Merge remote-tracking branch 'origin/support/apply-bootstrap4' into dev/4.0.x

# Conflicts:
#	src/client/js/components/MyDraftList/MyDraftList.jsx
#	src/client/js/components/PageEditor/Editor.jsx

config/webpack.common.js

@@ -36,13 +36,12 @@ module.exports = (options) => {
       'styles/theme-default':         './src/client/styles/scss/theme/default.scss',
       'styles/theme-nature':          './src/client/styles/scss/theme/nature.scss',
       'styles/theme-mono-blue':       './src/client/styles/scss/theme/mono-blue.scss',
-      // 'styles/theme-future':          './src/client/styles/scss/theme/future.scss',
-      // 'styles/theme-blue-night':      './src/client/styles/scss/theme/blue-night.scss',
+      'styles/theme-future':          './src/client/styles/scss/theme/future.scss',
       'styles/theme-kibela':          './src/client/styles/scss/theme/kibela.scss',
       'styles/theme-halloween':       './src/client/styles/scss/theme/halloween.scss',
+      'styles/theme-christmas':          './src/client/styles/scss/theme/christmas.scss',
       'styles/theme-wood':          './src/client/styles/scss/theme/wood.scss',
-      // 'styles/theme-christmas':          './src/client/styles/scss/theme/christmas.scss',
-      // 'styles/theme-island':      './src/client/styles/scss/theme/island.scss',
+      'styles/theme-island':      './src/client/styles/scss/theme/island.scss',
       'styles/theme-antarctic':      './src/client/styles/scss/theme/antarctic.scss',
       'styles/theme-spring':         './src/client/styles/scss/theme/spring.scss',
       // styles for external services

resource/locales/en-US/admin/admin.json

@@ -99,6 +99,10 @@
       "kibela_text2": "Show and post comments at the bottom of the page",
       "kibela_text3": "Affix Table-of-contents"
     },
+    "theme_desc": {
+      "light_and_dark": "Light and dark modes",
+      "unique": "Only one mode"
+    },
     "function": "Function",
     "function_desc": "You can choose Valid/Invalid of the function",
     "function_options": {

resource/locales/ja/admin/admin.json

@@ -99,6 +99,10 @@
       "kibela_text2": "コメントはページの下部に表示されます。",
       "kibela_text3": "ページ情報は下部に表示されます。"
     },
+    "theme_desc" : {
+      "light_and_dark": "Light/Dark モード選択あり",
+      "unique": "モード選択なし"
+    },
     "function": "機能",
     "function_desc": "機能の有効/無効を選択できます。",
     "function_options": {

src/client/js/components/Admin/Customize/CustomizeThemeOptions.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
 
 import { createSubscribedElement } from '../../UnstatedUtils';
 
@@ -10,15 +12,17 @@ import AdminCustomizeContainer from '../../../services/AdminCustomizeContainer';
 class CustomizeThemeOptions extends React.Component {
 
   render() {
-    const { adminCustomizeContainer } = this.props;
+    const { t, adminCustomizeContainer } = this.props;
     const { currentLayout, currentTheme } = adminCustomizeContainer.state;
 
-    const lightTheme = [{
+    const lightNDarkTheme = [{
       name: 'default', bg: '#ffffff', topbar: '#334455', theme: '#112744',
-    }, {
-      name: 'nature', bg: '#f9fff3', topbar: '#118050', theme: '#460039',
     }, {
       name: 'mono-blue', bg: '#F7FBFD', topbar: '#00587A', theme: '#00587A',
+    }];
+
+    const uniqueTheme = [{
+      name: 'nature', bg: '#f9fff3', topbar: '#118050', theme: '#460039',
     }, {
       name: 'wood', bg: '#fffefb', topbar: '#aaa45f', theme: '#dddebf',
     }, {
@@ -29,49 +33,51 @@ class CustomizeThemeOptions extends React.Component {
       name: 'antarctic', bg: '#ffffff', topbar: '#000080', theme: '#99cccc',
     }, {
       name: 'spring', bg: '#fff5ee', topbar: '#ff69b4', theme: '#ffb6c1',
-    }];
-
-    const darkTheme = [{
-      name: 'future', bg: '#16282D', topbar: '#011414', theme: '#04B4AE',
     }, {
-      name: 'blue-night', bg: '#061F2F', topbar: '#27343B', theme: '#0090C8',
+      name: 'future', bg: '#16282D', topbar: '#011414', theme: '#04B4AE',
     }, {
       name: 'halloween', bg: '#030003', topbar: '#cc5d1f', theme: '#e9af2b',
     }];
 
     return (
       <div id="themeOptions" className={`${currentLayout === 'kibela' && 'disabled'}`}>
-        {/* Light Themes  */}
-        <div className="d-flex flex-wrap">
-          {lightTheme.map((theme) => {
-            return (
-              <ThemeColorBox
-                key={theme.name}
-                isSelected={currentTheme === theme.name}
-                onSelected={() => adminCustomizeContainer.switchThemeType(theme.name)}
-                name={theme.name}
-                bg={theme.bg}
-                topbar={theme.topbar}
-                theme={theme.theme}
-              />
-            );
-          })}
+        {/* Light and Dark Themes */}
+        <div>
+          <h3>{t('admin:customize_setting.theme_desc.light_and_dark')}</h3>
+          <div className="d-flex flex-wrap">
+            {lightNDarkTheme.map((theme) => {
+              return (
+                <ThemeColorBox
+                  key={theme.name}
+                  isSelected={currentTheme === theme.name}
+                  onSelected={() => adminCustomizeContainer.switchThemeType(theme.name)}
+                  name={theme.name}
+                  bg={theme.bg}
+                  topbar={theme.topbar}
+                  theme={theme.theme}
+                />
+              );
+            })}
+          </div>
         </div>
-        {/* Dark Themes  */}
-        <div className="d-flex mt-3">
-          {darkTheme.map((theme) => {
-            return (
-              <ThemeColorBox
-                key={theme.name}
-                isSelected={currentTheme === theme.name}
-                onSelected={() => adminCustomizeContainer.switchThemeType(theme.name)}
-                name={theme.name}
-                bg={theme.bg}
-                topbar={theme.topbar}
-                theme={theme.theme}
-              />
-            );
-          })}
+        {/* Unique Theme */}
+        <div>
+          <h3>{t('admin:customize_setting.theme_desc.unique')}</h3>
+          <div className="d-flex flex-wrap">
+            {uniqueTheme.map((theme) => {
+              return (
+                <ThemeColorBox
+                  key={theme.name}
+                  isSelected={currentTheme === theme.name}
+                  onSelected={() => adminCustomizeContainer.switchThemeType(theme.name)}
+                  name={theme.name}
+                  bg={theme.bg}
+                  topbar={theme.topbar}
+                  theme={theme.theme}
+                />
+              );
+            })}
+          </div>
         </div>
       </div>
     );
@@ -84,8 +90,9 @@ const CustomizeThemeOptionsWrapper = (props) => {
 };
 
 CustomizeThemeOptions.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   adminCustomizeContainer: PropTypes.instanceOf(AdminCustomizeContainer).isRequired,
 };
 
-export default CustomizeThemeOptionsWrapper;
+export default withTranslation()(CustomizeThemeOptionsWrapper);

src/client/js/components/Admin/Users/UserTable.jsx

@@ -89,7 +89,7 @@ class UserTable extends React.Component {
 
     return (
       <Fragment>
-        <div className="table-responsive text-nowrap">
+        <div className="table-responsive text-nowrap h-100">
           <table className="table table-default table-bordered table-user-list">
             <thead>
               <tr>

src/client/js/components/Drawio.jsx

@@ -55,7 +55,7 @@ class Drawio extends React.Component {
       <div className="editable-with-drawio position-relative">
         { !this.isPreview
           && (
-          <button type="button" className="drawio-iframe-trigger position-absolute btn" onClick={this.onEdit}>
+          <button type="button" className="drawio-iframe-trigger position-absolute btn btn-outline-secondary" onClick={this.onEdit}>
             <i className="icon-note mr-1"></i>{this.props.t('Edit')}
           </button>
           )

src/client/js/components/MyDraftList/MyDraftList.jsx

@@ -141,8 +141,8 @@ class MyDraftList extends React.Component {
             <div className="d-flex justify-content-between">
               <h4>Total: {totalCount} drafts</h4>
               <div className="align-self-center">
-                <button type="button" className="btn btn-sm btn-outline-secondary" onClick={this.clearAllDrafts}>
-                  <i className="icon-fw icon-fire text-danger"></i>
+                <button type="button" className="btn btn-sm btn-outline-danger" onClick={this.clearAllDrafts}>
+                  <i className="icon-fw icon-fire"></i>
                   {t('delete_all')}
                 </button>
               </div>

src/client/js/components/Navbar/GrowiSubNavigationForUserPage.jsx

@@ -55,7 +55,7 @@ const GrowiSubNavigationForUserPage = (props) => {
   }
 
   return (
-    <div className={`px-3 ${additionalClassNames.join(' ')}`}>
+    <div className={`px-3 py-3 ${additionalClassNames.join(' ')}`}>
       <PagePathNav pageId={pageId} pagePath={path} />
 
       <div className="d-flex align-items-center justify-content-between">

src/client/js/components/Page/TagEditor.jsx

@@ -48,7 +48,7 @@ export default class TagEditor extends React.Component {
     return (
       <Modal isOpen={this.state.isOpenModal} toggle={this.closeModalHandler} id="edit-tag-modal">
         <ModalHeader tag="h4" toggle={this.closeModalHandler} className="bg-primary text-light">
-          <span className="text-white">Edit Tags</span>
+          Edit Tags
         </ModalHeader>
         <ModalBody>
           <TagsInput tags={this.state.tags} onTagsUpdated={this.onTagsUpdatedByTagsInput} />

src/client/js/components/PageComment/Comment.jsx

@@ -199,7 +199,7 @@ class Comment extends React.PureComponent {
             <div className="page-comment-writer">
               <UserPicture user={creator} />
             </div>
-            <div className="page-comment-main ml-0">
+            <div className="page-comment-main">
               <div className="page-comment-creator">
                 <Username user={creator} />
               </div>

src/client/js/components/PageEditor/Editor.jsx

@@ -261,7 +261,7 @@ export default class Editor extends AbstractEditor {
     return (
       <Modal isOpen={this.state.isCheatsheetModalShown} toggle={hideCheatsheetModal} className="modal-gfm-cheatsheet">
         <ModalHeader tag="h4" toggle={hideCheatsheetModal} className="bg-primary text-light">
-          <span className="text-white"><i className="icon-fw icon-question" />Markdown help</span>
+          <i className="icon-fw icon-question" />Markdown help
         </ModalHeader>
         <ModalBody>
           <Cheatsheet />

src/client/js/components/PageEditor/HandsontableModal.jsx

@@ -437,7 +437,7 @@ export default class HandsontableModal extends React.PureComponent {
           Edit Table
         </ModalHeader>
         <ModalBody className="p-0 d-flex flex-column">
-          <div className="px-4 py-3 modal-navbar bg-light">
+          <div className="px-4 py-3 border-bottom bg-light">
             <button
               type="button"
               className="mr-4 data-import-button btn btn-secondary"

src/client/js/components/PageEditorByHackmd.jsx

@@ -314,7 +314,7 @@ class PageEditorByHackmd extends React.Component {
 
       content = (
         <div>
-          <p className="text-center hackmd-status-label"><i className="fa fa-file-text"></i> HackMD is READY!</p>
+          <p className="text-muted text-center hackmd-status-label"><i className="fa fa-file-text"></i> HackMD is READY!</p>
           <div className="text-center hackmd-start-button-container mb-3">
             <button
               className="btn btn-info btn-lg waves-effect waves-light"

src/client/styles/agile-admin/inverse/colors/_apply-colors-dark.scss

@@ -1,172 +0,0 @@
-/*
- * Button
- */
-.btn-default {
-  &:hover,
-  &:focus,
-  &.active,
-  &.active:hover,
-  &.active:focus {
-    color: white;
-    background-color: lighten($bodycolor, 5%);
-  }
-}
-
-/*
-  * Form
-  */
-input.form-control,
-textarea.form-control {
-  color: lighten($bodytext, 30%);
-  background-color: darken($bodycolor, 5%);
-  border: 1px solid darken($border, 30%);
-}
-.form-control[disabled],
-.form-control[readonly] {
-  color: lighten($bodytext, 10%);
-  background-color: lighten($bodycolor, 5%);
-}
-.input-group .input-group-addon {
-  color: $dark;
-  background-color: rgba($topbar, 0.4);
-  border: 1px solid darken($border, 30%);
-  border-right: none;
-}
-
-/*
- * Dropdown
- */
-.dropdown-menu {
-  background-color: $bodycolor;
-  > li > a {
-    color: $bodytext;
-  }
-
-  .divider {
-    background-color: $border;
-  }
-}
-
-.modal {
-  .modal-header {
-    .close {
-      color: white;
-    }
-  }
-}
-
-/*
- * Panel
- */
-.panel {
-  &,
-  &.panel-white,
-  &.panel-default {
-    .panel-heading,
-    .panel-body {
-      color: $light;
-    }
-  }
-}
-
-/*
- * Table
- */
-.table > thead > tr > th,
-.table > tbody > tr > th,
-.table > tfoot > tr > th,
-.table > thead > tr > td,
-.table > tbody > tr > td,
-.table > tfoot > tr > td,
-.table > thead > tr > th,
-.table-bordered {
-  border-top: 1px solid $border;
-}
-
-.table-bordered > thead > tr > th,
-.table-bordered > tbody > tr > th,
-.table-bordered > tfoot > tr > th,
-.table-bordered > thead > tr > td,
-.table-bordered > tbody > tr > td,
-.table-bordered > tfoot > tr > td {
-  border: 1px solid $border;
-}
-.table > thead > tr > th {
-  border-bottom: 1px solid $border;
-}
-
-.table-bordered {
-  border: 1px solid $border;
-}
-
-/*
- * GROWI page list
- */
-.page-list {
-  .page-list-ul {
-    > li {
-      > a strong {
-        color: lighten($bodytext, 25%);
-      }
-      > span.page-list-meta {
-        color: $bodytext;
-      }
-    }
-  }
-}
-
-/*
- * GROWI search page
- */
-.search-page {
-  .input-group-btn {
-    .btn-default {
-      border: 1px solid darken($border, 30%); // fit to input.form-control
-    }
-  }
-}
-
-/*
- * GROWI on-edit
- */
-.page-editor-footer {
-  #slack-mark-black {
-    display: none;
-  }
-}
-
-legend {
-  border-color: lighten($border, 10%);
-}
-.wiki {
-  h1 {
-    border-color: lighten($border, 10%);
-  }
-  h2 {
-    border-color: $border;
-  }
-}
-.editor-container .navbar-editor svg {
-  fill: $bodytext;
-}
-
-/*
- * GROWI admin page #themeOptions
- */
-.admin-page {
-  #themeOptions {
-    .theme-option-container.active a {
-      background-color: darken($themecolor, 15%);
-      border-color: darken($themecolor, 15%);
-    }
-  }
-}
-
-/*
- * GROWI comment form
- */
-.comment-form {
-  #slack-mark-black {
-    display: none;
-  }
-}

src/client/styles/agile-admin/inverse/colors/antarctic.scss

@@ -1,231 +0,0 @@
-@import '../variables';
-
-$bgcolor-theme: #000080;
-$themelight: #f0f8ff;
-$subthemecolor: black;
-$accentcolor: #ffd700;
-$sidebar-text: $themelight;
-$bgcolor-navbar: $bgcolor-theme;
-$bgcolor-global: $themelight;
-$bgcolor-global: $themelight;
-$color-header: $subthemecolor;
-$color-global: $subthemecolor;
-$linktext: lighten(blue, 5%);
-$primary: $bgcolor-theme;
-$active-nav-tabs-bgcolor: $bgcolor-theme;
-$fillcolor-logo-mark: $themelight;
-$color-link-wiki: lighten($bgcolor-theme, 5%);
-$color-link-wiki-hover: lighten($color-link-wiki, 15%);
-$color-inline-code: #c7254e;
-$bgcolor-inline-code: #f9f2f4;
-$border: $subthemecolor;
-$border-original: $subthemecolor;
-$navbar-border: $bgcolor-theme;
-$background-color: rgba(
-  $color: $themelight,
-  $alpha: 0.8,
-);
-
-@import 'apply-colors';
-@import 'apply-colors-light';
-
-// change color of highlighted header in wiki (default: orange)
-.code-line,
-ul > .text-muted {
-  color: $subthemecolor;
-}
-
-.wiki {
-  h1 {
-    border-color: $subthemecolor;
-  }
-
-  .code-line.revision-head.highlighted {
-    color: $themelight;
-    background-color: lighten($bgcolor-theme, 50%);
-
-    .icon-note,
-    .icon-link {
-      color: $themelight;
-    }
-  }
-}
-
-// add background-image
-#wrapper > #page-wrapper,
-.page-editor-preview-container {
-  background-image: url('/images/themes/antarctic/bg.svg');
-  background-attachment: fixed;
-  background-position: center center;
-  background-size: cover;
-}
-
-.sidebar {
-  background: $bgcolor-theme;
-}
-
-table,
-.hljs,
-.help-block {
-  background-color: $background-color;
-}
-
-.grw-subnav,
-.nav-navbar {
-  background-color: $themelight;
-}
-
-.edit-button {
-  color: $themelight;
-}
-
-.editor-container .btn-open-dropzone {
-  border-top: none;
-}
-
-.help-block {
-  padding: 5px;
-}
-
-/*
- * Accentcolor (yellow)
- */
-
-.modal {
-  .modal-header {
-    border-bottom: 4px solid $accentcolor;
-  }
-}
-
-#wrapper > .navbar > .navbar-header {
-  border-bottom: 4px solid $accentcolor;
-}
-
-/*
- * Comments
- */
-
-.page-comment {
-  .page-comment-main {
-    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
-
-    .page-comment-creator > a {
-      border-bottom: 1px double $subthemecolor;
-    }
-  }
-}
-
-.growi .main {
-  .page-comments-row {
-    border-top-color: transparent;
-  }
-
-  .page-comment .page-comment-main,
-  .page-comment-form .comment-form-main {
-    background-color: $background-color;
-
-    &::before {
-      border-right-color: $background-color;
-    }
-
-    .nav.nav-tabs {
-      > li.active > a {
-        background: $bgcolor-theme;
-        border-bottom: solid 1px $bgcolor-theme;
-        border-bottom-color: $bgcolor-theme;
-      }
-    }
-  }
-}
-
-/*
- * Tabs
- */
-
-.nav.nav-tabs > li.active > a {
-  color: $themelight;
-}
-
-.text-info,
-body:not(.on-edit) .nav.nav-tabs {
-  > li > a {
-    color: $subthemecolor;
-  }
-
-  > li.active > a {
-    color: $themelight;
-    background: linear-gradient(
-      rgba($active-nav-tabs-bgcolor, 0) 50%,
-      rgba($active-nav-tabs-bgcolor, 0) 90%,
-      $active-nav-tabs-bgcolor 100%
-    ); // overwrite only the bottom pixel
-    background-color: $bgcolor-theme;
-  }
-}
-
-/*
- * Panel
- */
-
-.panel {
-  width: 80%;
-  margin: 0px auto;
-
-  &.panel-white,
-  &.panel-default {
-    border: 1px solid $subthemecolor;
-    border-color: $border-original;
-
-    .panel-heading {
-      color: $subthemecolor;
-      background-color: $background-color;
-    }
-  }
-}
-
-/*
- *  Right space for readable
- */
-
-.growi {
-  .revision-toc {
-    max-width: 360px;
-    background-color: $background-color;
-    border-radius: 5px;
-
-    .revision-toc-content {
-      padding: 10px;
-
-      ul {
-        padding-left: 5px;
-      }
-    }
-  }
-}
-
-/*
- *  Login page
- */
-
-.login-page > #wrapper > #page-wrapper {
-  background-image: url('/images/themes/antarctic/topimage.svg');
-  background-attachment: fixed;
-  background-position: center center;
-  background-size: cover;
-
-  .link-switch {
-    color: dimgray;
-
-    &:hover {
-      color: #000080;
-    }
-  }
-}
-
-/*
- *  for Hightlight-js
- */
-
-.hljs-ln {
-  background-color: transparent;
-}

src/client/styles/agile-admin/inverse/colors/blue-night.scss

@@ -1,51 +0,0 @@
-@import '../variables';
-
-$basecolor: #061f2f;
-$bgcolor-theme: #0090c8;
-
-$linkcolor: #97d1f0;
-
-$bgcolor-navbar: #27343b;
-$bgcolor-global: #061f2f;
-$bgcolor-global: #061f2f;
-$color-header: #fff;
-$color-global: #d3d4d4;
-$linktext: $linkcolor;
-$linktext-hover: rgba($linktext, 0.8);
-$sidebar-text: #d3d4d4;
-$dark-themecolor: #4f5467;
-
-$primary: $bgcolor-theme;
-
-$fillcolor-logo-mark: lighten(desaturate($bgcolor-navbar, 10%), 15%);
-$color-link-wiki: $linkcolor;
-$color-link-wiki-hover: rgba($linktext, 0.8);
-
-$dark: darken($color-global, 5%);
-$border: #fff;
-$navbar-border: lighten($basecolor, 25%);
-$active-navbar-border: darken($navbar-border, 3%);
-$btn-default-bgcolor: darken($basecolor, 10%);
-$color-inline-code: #c1f1f0;
-$bgcolor-inline-code: #0a121b;
-
-@import 'apply-colors';
-@import 'apply-colors-dark';
-
-.wiki {
-  .highlighted {
-    background-color: lighten($bgcolor-theme, 20%);
-  }
-}
-
-.panel {
-  &,
-  &.panel-white,
-  &.panel-default {
-    border-color: $color-global;
-    .panel-heading {
-      color: $basecolor;
-      background-color: 1px solid $color-global;
-    }
-  }
-}

src/client/styles/agile-admin/inverse/colors/christmas.scss

@@ -1,130 +0,0 @@
-@import '../variables';
-
-$bgcolor-theme: #b3000c;
-$themelight: white;
-$subthemecolor: #017e20;
-$bgcolor-navbar: $bgcolor-theme;
-$bgcolor-global: $themelight;
-$bgcolor-global: $themelight;
-$color-header: $subthemecolor;
-$color-global: black;
-$linktext: lighten(#0d5901, 5%);
-$linktext-hover: lighten($linktext, 12%);
-$sidebar-text: #ffffff;
-$primary: $bgcolor-theme;
-$fillcolor-logo-mark: lighten(desaturate($bgcolor-navbar, 50%), 50%);
-$color-link-wiki: lighten($bgcolor-theme, 5%);
-$color-link-wiki-hover: lighten($color-link-wiki, 15%);
-$color-inline-code: darken($subthemecolor, 5%);
-$bgcolor-inline-code: lighten($subthemecolor, 70%);
-$border-original: $border;
-$border: $subthemecolor;
-$navbar-border: $bgcolor-theme;
-$active-nav-tabs-bgcolor: white;
-
-@import 'apply-colors';
-@import 'apply-colors-light';
-
-// change color of highlighted header in wiki (default: orange)
-.wiki {
-  .code-line.revision-head.highlighted {
-    color: $themelight;
-    background-color: lighten($bgcolor-theme, 20%);
-
-    .icon-note,
-    .icon-link {
-      color: $themelight;
-    }
-  }
-}
-
-.sidebar {
-  background: $bgcolor-theme;
-}
-
-.rbt-menu {
-  background: $themelight;
-}
-
-#wrapper > #page-wrapper,
-.page-editor-preview-container {
-  background-image: url('/images/themes/christmas/christmas.jpg');
-  background-attachment: fixed;
-  background-size: cover;
-}
-
-.grw-subnav {
-  background-color: #ffffff;
-}
-
-#wrapper > .navbar > .navbar-header {
-  background-image: url('/images/themes/christmas/christmas-navbar.jpg');
-  border-bottom: 4px solid $subthemecolor;
-}
-
-/*
- * Tabs
- */
-body:not(.on-edit) .nav.nav-tabs {
-  > li.active > a {
-    background: linear-gradient(
-      rgba($active-nav-tabs-bgcolor, 0) 0%,
-      rgba($active-nav-tabs-bgcolor, 0) 90%,
-      $active-nav-tabs-bgcolor 100%
-    ); // overwrite only the bottom pixel
-  }
-}
-
-// login page
-.nologin {
-  .input-group {
-    .input-group-addon {
-      background-color: rgba(lighten(black, 10%), 0.6);
-    }
-    .form-control {
-      background-color: rgba(lighten(black, 10%), 0.6);
-    }
-  }
-
-  &.login-page {
-    .login-header,
-    .login-dialog {
-      background-color: rgba(#ccc, 0.5);
-    }
-    .link-switch {
-      color: #bd3425;
-    }
-  }
-}
-
-/*
- * Modal
- */
-.modal-dialog .modal-header.bg-primary {
-  background-image: url('/images/themes/christmas/christmas-navbar.jpg');
-  border-bottom: 2px solid $subthemecolor;
-}
-
-/*
- * Panel
- */
-.panel {
-  &.panel-white,
-  &.panel-default {
-    border-color: $border-original;
-    .panel-heading {
-      color: $dark;
-      background-color: $border-original;
-      border-bottom: 1px solid $border-original;
-    }
-  }
-}
-
-.panel.panel-primary {
-  border-color: #bd3425;
-  .panel-heading {
-    color: white;
-    background-color: $bgcolor-theme;
-    background-image: url('/images/themes/christmas/christmas-navbar.jpg');
-  }
-}

src/client/styles/agile-admin/inverse/colors/future.scss

@@ -1,37 +0,0 @@
-@import '../variables';
-
-$basecolor: #16282d;
-$bgcolor-theme: rgba(11, 79, 104, 0.616);
-
-$bgcolor-navbar: #011414;
-$bgcolor-global: #fff;
-$bgcolor-global: $basecolor;
-$color-header: #d9a364;
-$color-global: lighten($basecolor, 35%);
-$linktext: lighten($basecolor, 45%);
-$linktext-hover: lighten($linktext, 80%);
-$sidebar-text: rgb(65, 133, 124);
-$dark-themecolor: #4f5467;
-
-$primary: $bgcolor-theme;
-$info: lighten($bgcolor-theme, 20%);
-
-$fillcolor-logo-mark: rgb(170, 245, 237);
-$color-link-wiki: saturate($color-global, 20%);
-$color-link-wiki-hover: darken($color-link-wiki, 5%);
-
-$dark: darken($color-global, 5%);
-$border: lighten($basecolor, 15%);
-$navbar-border: lighten($border, 10%);
-$active-navbar-border: darken($border, 3%);
-$btn-default-bgcolor: darken($basecolor, 10%);
-$bgcolor-inline-code: darken($bgcolor-global, 5%);
-
-@import 'apply-colors';
-@import 'apply-colors-dark';
-
-body:not(.on-edit) {
-  .grw-subnav {
-    border-bottom: 1px solid rgb(131, 228, 215);
-  }
-}

src/client/styles/agile-admin/inverse/colors/halloween.scss

@@ -1,87 +0,0 @@
-@import '../variables';
-
-$basecolor: #0a010a;
-$bgcolor-theme: #aa4a04;
-$subthemecolor: #e9af2b;
-$linkcolor: #aa4a04;
-$bgcolor-navbar: $bgcolor-theme;
-$bgcolor-global: #061f2f;
-$subthemecolor: #e9af2b;
-$bgcolor-global: #0f0101;
-$color-header: #e9af2b;
-$color-global: #e9af2b;
-$linktext: $linkcolor;
-$linktext-hover: rgba($linktext, 0.8);
-$sidebar-text: $bgcolor-theme;
-$dark-themecolor: #4f5467;
-$primary: $bgcolor-theme;
-$fillcolor-logo-mark: lighten($subthemecolor, 20%);
-$color-link-wiki: $linkcolor;
-$color-link-wiki-hover: rgba($linktext, 0.8);
-$dark: darken($color-global, 5%);
-$border: $bgcolor-theme;
-$navbar-border: lighten($basecolor, 25%);
-$active-navbar-border: darken($navbar-border, 3%);
-$active-nav-tabs-bgcolor: #231313;
-$btn-default-bgcolor: darken($basecolor, 10%);
-$color-inline-code: #a94f04;
-$bgcolor-inline-code: #0a121b;
-
-@import 'apply-colors';
-@import 'apply-colors-dark';
-
-.wiki {
-  .highlighted {
-    background-color: lighten($bgcolor-theme, 20%);
-  }
-}
-
-.panel {
-  &,
-  &.panel-white,
-  &.panel-default {
-    background-color: lighten($basecolor, 5%);
-    border-color: $color-global;
-
-    .panel-heading {
-      color: $basecolor;
-      background-color: 1px solid $color-global;
-    }
-  }
-}
-
-.rbt-menu {
-  background: lighten($basecolor, 7%);
-}
-
-.nav-pills > li > a:hover {
-  color: $white;
-  background: #d3671a;
-}
-
-#wrapper > .navbar > .navbar-header {
-  background-image: url('/images/themes/halloween/halloween-navbar.jpg');
-}
-
-#wrapper > #page-wrapper,
-.page-editor-preview-container {
-  background-image: url('/images/themes/halloween/halloween.jpg');
-  background-attachment: fixed;
-}
-
-.grw-subnav {
-  background-color: rgba(0, 0, 0, 0.3);
-}
-
-/*
- * Tabs
- */
-body:not(.on-edit) .nav.nav-tabs {
-  > li.active > a {
-    background: linear-gradient(
-      rgba($active-nav-tabs-bgcolor, 0) 0%,
-      rgba($active-nav-tabs-bgcolor, 0) 90%,
-      $active-nav-tabs-bgcolor 100%
-    ); // overwrite only the bottom pixel
-  }
-}

src/client/styles/agile-admin/inverse/colors/island.scss

@@ -1,132 +0,0 @@
-@import '../variables';
-
-$bgcolor-theme: #0c2a44;
-$themelight: rgba(183, 226, 219, 1);
-
-$subthemecolor: rgba($linktext, 0.8);
-$linkcolor: #3c6d72;
-$bgcolor-theme: #97cbc3;
-$bgcolor-navbar: #0c2a44;
-$bgcolor-global: $themelight;
-$bgcolor-global: lighten($themelight, 10%);
-$color-header: #3c6d72;
-$color-global: #3c6d72;
-$linktext: $linkcolor;
-$linktext-hover: rgba($linktext, 0.8);
-$sidebar-text: $bgcolor-theme;
-$primary: $bgcolor-theme;
-$fillcolor-logo-mark: lighten($themelight, 10%);
-$color-link-wiki: $linkcolor;
-$color-link-wiki-hover: rgba($linktext, 0.8);
-$dark: darken($color-global, 5%);
-$border: #76b1a8;
-$navbar-border: #76b1a8;
-$active-navbar-border: darken($navbar-border, 13%);
-$active-nav-tabs-bgcolor: #dbf0ed;
-$btn-default-bgcolor: darken($bgcolor-theme, 10%);
-$color-inline-code: #8f5313;
-$bgcolor-inline-code: darken($themelight, 3%);
-
-@import 'apply-colors';
-@import 'apply-colors-light';
-
-.wiki {
-  .highlighted {
-    background-color: lighten($bgcolor-theme, 20%);
-  }
-}
-
-.panel {
-  &,
-  &.panel-white,
-  &.panel-default {
-    color: $bgcolor-theme;
-    background-color: lighten($bgcolor-theme, 30%);
-    border-color: white;
-
-    .panel-heading {
-      color: $bgcolor-theme;
-      background-color: white;
-    }
-
-    ul {
-      li {
-        a {
-          color: darken($bgcolor-theme, 15%);
-        }
-      }
-    }
-  }
-}
-
-/* GROWI page list */
-.page-list {
-  .page-list-ul {
-    > li {
-      > a strong {
-        color: $linkcolor;
-      }
-    }
-  }
-}
-
-.rbt-menu {
-  background: lighten($themelight, 5%);
-}
-
-#wrapper > #page-wrapper,
-.page-editor-preview-container {
-  background-image: url('/images/themes/island/island.png');
-  background-attachment: fixed;
-}
-
-/*
- * Tabs
- */
-body:not(.on-edit) .nav.nav-tabs {
-  > li.active > a {
-    background: linear-gradient(
-      rgba($active-nav-tabs-bgcolor, 0) 0%,
-      rgba($active-nav-tabs-bgcolor, 0) 90%,
-      $active-nav-tabs-bgcolor 100%
-    ); // overwrite only the bottom pixel
-  }
-}
-
-/* Table */
-.table > thead > tr > th,
-.table > tbody > tr > th,
-.table > tfoot > tr > th,
-.table > thead > tr > td,
-.table > tbody > tr > td,
-.table > tfoot > tr > td,
-.table > thead > tr > th,
-.table-bordered {
-  border-top: 1px solid $border;
-}
-
-.table-bordered > thead > tr > th,
-.table-bordered > tbody > tr > th,
-.table-bordered > tfoot > tr > th,
-.table-bordered > thead > tr > td,
-.table-bordered > tbody > tr > td,
-.table-bordered > tfoot > tr > td {
-  border: 1px solid $border;
-}
-
-.table > thead > tr > th {
-  border-bottom: 1px solid $border;
-}
-
-.table-bordered {
-  border: 1px solid $border;
-}
-
-// login page
-.nologin {
-  &.login-page {
-    > #wrapper > #page-wrapper {
-      background-image: unset;
-    }
-  }
-}

src/client/styles/agile-admin/inverse/colors/kibela.scss

@@ -1,43 +0,0 @@
-@import '../variables';
-
-$radius: 3px;
-
-$bgcolor-theme: rgb(18, 86, 163);
-$themelight: #f4f5f6;
-$subthemecolor: rgb(90, 149, 216);
-
-$bgcolor-navbar: $bgcolor-theme;
-$bgcolor-global: $themelight;
-$bgcolor-global: $themelight;
-
-$color-header: $bgcolor-theme;
-$color-global: #3c4a60;
-$linktext: rgb(74, 109, 204);
-$linktext-hover: lighten($linktext, 12%);
-$sidebar-text: $bgcolor-theme;
-
-$primary: $bgcolor-theme;
-$info: lighten($bgcolor-theme, 20%);
-
-$fillcolor-logo-mark: lighten($bgcolor-theme, 20%);
-$color-link-wiki: lighten($bgcolor-theme, 20%);
-$color-link-wiki-hover: lighten($color-link-wiki, 20%);
-$color-inline-code: $subthemecolor;
-$bgcolor-inline-code: lighten($subthemecolor, 70%);
-$border: rgba(181, 203, 247, 0.61);
-
-@import 'apply-colors';
-@import 'apply-colors-light';
-
-// change color of highlighted header in wiki (default: orange)
-.wiki {
-  .code-line.revision-head.highlighted {
-    color: $themelight;
-    background-color: lighten($bgcolor-theme, 20%);
-
-    .icon-note,
-    .icon-link {
-      color: $themelight;
-    }
-  }
-}

src/client/styles/agile-admin/inverse/colors/mono-blue.scss

@@ -1,40 +0,0 @@
-@import '../variables';
-
-$bgcolor-theme: #00587a;
-$themelight: #f7fbfd;
-$subthemecolor: #186718;
-
-$bgcolor-navbar: $bgcolor-theme;
-$bgcolor-global: $themelight;
-$bgcolor-global: $themelight;
-
-$color-header: $bgcolor-theme;
-$color-global: $bgcolor-theme;
-$linktext: lighten($bgcolor-theme, 5%);
-$linktext-hover: lighten($linktext, 12%);
-$sidebar-text: $bgcolor-theme;
-
-$primary: $bgcolor-theme;
-$info: lighten($bgcolor-theme, 20%);
-
-$fillcolor-logo-mark: lighten(desaturate($bgcolor-navbar, 30%), 20%);
-$color-link-wiki: lighten($bgcolor-theme, 20%);
-$color-link-wiki-hover: lighten($color-link-wiki, 20%);
-$color-inline-code: $subthemecolor;
-$bgcolor-inline-code: lighten($subthemecolor, 70%);
-
-@import 'apply-colors';
-@import 'apply-colors-light';
-
-// change color of highlighted header in wiki (default: orange)
-.wiki {
-  .code-line.revision-head.highlighted {
-    color: $themelight;
-    background-color: lighten($bgcolor-theme, 20%);
-
-    .icon-note,
-    .icon-link {
-      color: $themelight;
-    }
-  }
-}

src/client/styles/agile-admin/inverse/colors/nature.scss

@@ -1,22 +0,0 @@
-@import '../variables';
-
-$bgcolor-theme: #460039;
-
-$bgcolor-navbar: #118050;
-$bgcolor-global: #fff;
-$bgcolor-global: #fefffd;
-
-$color-header: #46694e;
-$color-global: #333333;
-$linktext: lighten($bgcolor-theme, 5%);
-$linktext-hover: lighten($linktext, 12%);
-$sidebar-text: #5c7253;
-
-$primary: $bgcolor-theme;
-
-$fillcolor-logo-mark: lighten(desaturate($bgcolor-navbar, 30%), 20%);
-$color-link-wiki: lighten($bgcolor-theme, 20%);
-$color-link-wiki-hover: lighten($color-link-wiki, 20%);
-
-@import 'apply-colors';
-@import 'apply-colors-light';

src/client/styles/agile-admin/inverse/colors/spring.scss

@@ -1,206 +0,0 @@
-@import '../variables';
-$radius: 5px;
-
-$themecolor: #ffb8c6;
-$buttoncolor: rgba(255, 184, 197, 0.5);
-$subthemecolor: #67a856;
-$themelight: #fff0f5;
-$topbar: $themecolor;
-$sidebar: #fff;
-$bodycolor: $sidebar;
-$headingtext: $subthemecolor;
-$bodytext: #333333;
-$linktext: $subthemecolor;
-$linktext-hover: lighten($linktext, 20%);
-$sidebar-text: #38495a;
-$accentcolor: #e08dbc;
-$accentlight: rgba(224, 141, 188, 0.2);
-$accentdark: rgba(224, 141, 188, 0.5);
-$background-color: rgba(171, 224, 174, 0.4);
-$third-main-color: antiquewhite;
-$textcolor: dimgray;
-$primary: #e87b98;
-$logo-mark-fill: lighten(desaturate($topbar, 10%), 15%);
-$wikilinktext: $subthemecolor;
-$wikilinktext-hover: gba(171, 224, 174, 0.9);
-
-@import 'apply-colors';
-@import 'apply-colors-light';
-
-// add background-image
-.main-container > #wrapper > #page-wrapper,
-.page-editor-preview-container {
-  background-color: rgba(255, 255, 255, 0.8);
-  background-image: url('/images/themes/spring/spring02.svg');
-  background-attachment: fixed;
-  background-position: bottom;
-  background-size: cover;
-}
-
-.sidebar {
-  background: $themelight;
-}
-
-/*
- * user's page
- */
-
-.growi .main .page-comments-row {
-  border-top-color: $third-main-color;
-}
-
-.modal {
-  .modal-header {
-    border-bottom: 4px solid $accentcolor;
-  }
-}
-
-#wrapper > .navbar > .navbar-header {
-  border-bottom: 4px solid $accentcolor;
-}
-
-/*
- * Comments
- */
-
-.page-comment {
-  .page-comment-main {
-    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
-
-    .page-comment-creator > a {
-      border-bottom: 1px double $subthemecolor;
-    }
-  }
-}
-
-div .page-comment-main {
-  border-radius: 10px;
-}
-
-// add comment
-div .comment-form-main {
-  border-radius: 10px;
-}
-
-/*
- * Tabs
- */
-
-.nav.nav-tabs > li.active > a {
-  color: $subthemecolor;
-}
-
-.text-info,
-body:not(.on-edit) .nav.nav-tabs {
-  > li > a {
-    color: $subthemecolor;
-  }
-
-  > li.active > a {
-    color: $subthemecolor;
-    background: linear-gradient(
-      rgba($active-nav-tabs-bgcolor, 0) 50%,
-      rgba($active-nav-tabs-bgcolor, 0) 90%,
-      $active-nav-tabs-bgcolor 100%
-    ); // overwrite only the bottom pixel
-    background-color: $themelight;
-  }
-}
-
-/*
- * button
- */
-
-.btn-link {
-  color: $subthemecolor;
-}
-
-.label-default {
-  background-color: $primary;
-}
-
-div .btn-inverse {
-  background-color: $themecolor;
-  border: $themecolor;
-}
-
-div .btn-default {
-  background-color: $accentlight;
-  border-color: $accentdark;
-}
-
-.admin-page .btn-group.btn-toggle .btn.active[data-active-class='primary'] {
-  color: $sidebar;
-  background-color: $accentcolor;
-  border-color: $accentdark;
-}
-
-/*
- * GROWI admin page #themeOptions
- */
-.admin-page {
-  #themeOptions {
-    .theme-option-container.active a {
-      border-color: $accentcolor;
-    }
-  }
-}
-
-button .btn-outline {
-  background-color: $themelight;
-}
-
-input .btn-secondary {
-  background: $themecolor;
-}
-
-/*
- *  Login page
- */
-
-.login-page > #wrapper > #page-wrapper {
-  background: $themelight;
-  background-image: url('/images/themes/spring/spring.svg');
-  background-attachment: fixed;
-  background-position: bottom;
-  background-size: cover;
-
-  .link-switch {
-    color: $themecolor;
-
-    &:hover {
-      color: $subthemecolor;
-    }
-  }
-}
-
-/*
- *  letter
- */
-
-.help-block {
-  padding: 5px;
-  color: $textcolor;
-  background-color: $accentlight;
-  border-radius: 3px;
-}
-
-.panel-primary a {
-  color: $subthemecolor;
-}
-
-/*
- *  panel
- */
-
-.panel-timeline > .panel-heading {
-  background-color: $third-main-color;
-}
-
-.panel-default > .panel-heading {
-  background-color: $third-main-color;
-}
-
-.panel .panel-body {
-  border-radius: 10px;
-}

src/client/styles/agile-admin/inverse/colors/wood.scss

@@ -1,90 +0,0 @@
-@import '../variables';
-
-$bgcolor-theme: #aaa45f;
-$themelight: #f5f3ee;
-$subthemecolor: #dddebf;
-$bgcolor-navbar: $bgcolor-theme;
-$bgcolor-global: $themelight;
-$bgcolor-global: $themelight;
-$color-header: #577254;
-$color-global: #7c7a70;
-$linktext: lighten(#6d8969, 5%);
-$linktext-hover: lighten($linktext, 12%);
-$sidebar-text: #859083;
-$primary: $bgcolor-theme;
-$info: lighten($bgcolor-theme, 10%);
-$fillcolor-logo-mark: lighten(desaturate($bgcolor-navbar, 50%), 50%);
-$color-link-wiki: lighten($bgcolor-theme, 5%);
-$color-link-wiki-hover: lighten($color-link-wiki, 15%);
-$color-inline-code: darken($bgcolor-theme, 20%);
-$bgcolor-inline-code: lighten($subthemecolor, 70%);
-$active-nav-tabs-bgcolor: #fffffc;
-
-@import 'apply-colors';
-@import 'apply-colors-light';
-
-// change color of highlighted header in wiki (default: orange)
-.wiki {
-  .code-line.revision-head.highlighted {
-    color: $themelight;
-    background-color: lighten($bgcolor-theme, 20%);
-
-    .icon-note,
-    .icon-link {
-      color: $themelight;
-    }
-  }
-}
-
-.rbt-menu {
-  background: $themelight;
-}
-
-#wrapper > #page-wrapper,
-.page-editor-preview-container {
-  background-image: url('/images/themes/wood/wood.jpg');
-  background-attachment: fixed;
-}
-
-.grw-subnav {
-  background-color: rgba(226, 221, 192, 0.205);
-}
-
-#wrapper > .navbar > .navbar-header {
-  background-image: url('/images/themes/wood/wood-navbar.jpg');
-}
-
-/*
- * Tabs
- */
-body:not(.on-edit) .nav.nav-tabs {
-  > li.active > a {
-    background: linear-gradient(
-      rgba($active-nav-tabs-bgcolor, 0) 0%,
-      rgba($active-nav-tabs-bgcolor, 0) 90%,
-      $active-nav-tabs-bgcolor 100%
-    ); // overwrite only the bottom pixel
-  }
-}
-
-// login page
-.nologin {
-  .input-group {
-    .input-group-addon {
-      background-color: rgba(lighten(black, 10%), 0.6);
-    }
-    .form-control {
-      background-color: rgba(lighten(black, 10%), 0.6);
-    }
-  }
-
-  &.login-page {
-    .login-header,
-    .login-dialog {
-      background-color: rgba(#ccc, 0.5);
-    }
-    .link-switch {
-      color: $color-global;
-    }
-  }
-}

src/client/styles/agile-admin/inverse/variables.scss

@@ -4,7 +4,7 @@
 
 // $basefont1:'Rubik', sans-serif;
 // $basefont2:'Rubik', sans-serif;
-$basefont1: Lato, -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif !default;
+// $basefont1: Lato, -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif !default;
 // $basefont2: Lato, -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif !default;
 
 /* GROWI Color */
@@ -17,11 +17,11 @@ $basefont1: Lato, -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN'
 // $warning: #ffa32b !default;
 // $primary: $growi-blue !default;
 // $info: #009fbb !default;
-$muted: #98a6ad !default;
+// $muted: #98a6ad !default;
 // $dark: #3e4d6c !default;
-$inverse: #3e4d6c !default;
+// $inverse: #3e4d6c !default;
 // $light: #e4e7ea !default;
-$extralight: #f7fafc !default;
+// $extralight: #f7fafc !default;
 
 /*Normal Color*/
 // $white: #ffffff !default;
@@ -29,16 +29,16 @@ $extralight: #f7fafc !default;
 // $purple: #7b00ce !default;
 // $blue: #0d00c5 !default;
 // $yellow: #cccf0e !default;
-$border: #f0f0f0 !default;
+// $border: #f0f0f0 !default;
 // $megna: #00b5c2 !default;
 
 /*Theme Colors*/
 // $topbar: #3c4451 !default;
 // $sidebar: #4f5467 !default;
 // $bodycolor: #fff !default;
-$headingtext: #2b2b2b !default;
-$bodytext: #686868 !default;
-$linktext: $inverse !default;
+// $headingtext: #2b2b2b !default;
+// $bodytext: #686868 !default;
+// $linktext: $inverse !default;
 // $linktext-hover: lighten($inverse, 20%) !default;
 // $sidebar-text: #54667a !default;
 // $themecolor: #ff6849 !default;
@@ -50,12 +50,12 @@ $linktext: $inverse !default;
 // $dark-text: #848a96 !default;
 // $navbar-border: #ccc !default;
 // $active-navbar-border: lighten($navbar-border, 10%) !default;
-$btn-default-bgcolor: darken(#fff, 10%) !default;
+// $btn-default-bgcolor: darken(#fff, 10%) !default;
 // $color-inline-code: #c7254e !default;
 // $bgcolor-inline-code: #f9f2f4 !default;
 
 /*Border radius*/
-$radius: 0 !default;
+// $radius: 0 !default;
 
 /*Preloader*/
 /*

src/client/styles/scss/_admin.scss

@@ -7,7 +7,7 @@
     .dropdown-menu {
       right: 0;
       left: auto;
-      width: 300px;
+      width: 400px;
     }
   }
 

src/client/styles/scss/_comment_growi.scss

@@ -2,11 +2,6 @@
   %comment-section {
     position: relative;
     padding: 1em;
-    margin-left: 4.5em;
-
-    @include media-breakpoint-down(xs) {
-      margin-left: 3.5em;
-    }
 
     // speech balloon
     &:before {
@@ -75,7 +70,7 @@
     .page-comment-main {
       @extend %comment-section;
       @include media-breakpoint-up(sm) {
-        margin-left: 4.5em !important;
+        margin-left: 4.5em;
       }
       @include media-breakpoint-down(xs) {
         &:before {
@@ -129,6 +124,10 @@
     // seciton
     .comment-form-main {
       @extend %comment-section;
+      margin-left: 4.5em;
+      @include media-breakpoint-down(xs) {
+        margin-left: 3.5em;
+      }
     }
 
     // textarea

src/client/styles/scss/_comment_kibela.scss

@@ -3,11 +3,6 @@
   %comment-section {
     position: relative;
     padding: 1em;
-    margin-left: 4.5em;
-
-    @include media-breakpoint-down(xs) {
-      margin-left: 3.5em;
-    }
 
     // speech balloon
     &:before {
@@ -69,6 +64,7 @@
     // コメントセクション
     .page-comment-main {
       @extend %comment-section;
+      margin-left: 4.5em;
       background: #e6e9ec;
       border-radius: 0.35em;
     }
@@ -123,6 +119,10 @@
     // seciton
     .comment-form-main {
       @extend %comment-section;
+      margin-left: 4.5em;
+      @include media-breakpoint-down(xs) {
+        margin-left: 3.5em;
+      }
       background: #e6e9ec;
       border-radius: 0.35em;
       .CodeMirror {

src/client/styles/scss/_handsontable.scss

@@ -23,18 +23,6 @@
 .modal.in .modal-dialog.handsontable-modal {
   transform: none;
 
-  .modal-navbar {
-    border-bottom: $border 1px solid;
-  }
-
-  .data-import-form {
-    color: $headingtext;
-
-    .btn + .btn {
-      margin-left: 5px;
-    }
-  }
-
   .data-import-button {
     position: relative;
     padding-right: 35px;

src/client/styles/scss/_layout_kibela.scss

@@ -56,6 +56,9 @@ body.kibela {
     min-height: 8em;
     margin: auto;
     border-radius: 0.35em;
+    @include media-breakpoint-down(xs) {
+      top: 0px;
+    }
   }
 
   .grw-subnav {
@@ -73,6 +76,10 @@ body.kibela {
     @media screen and (max-width: 765px) {
       padding-top: 30px;
     }
+
+    @include media-breakpoint-down(xs) {
+      padding-top: 0px;
+    }
   }
 
   .revision-toc {
@@ -113,11 +120,6 @@ body.kibela {
     }
   }
 
-  /* button */
-  .btn {
-    // border-radius: $radius;
-  }
-
   /* edit */
   .CodeMirror {
     border-radius: 0.35em;

src/client/styles/scss/_login.scss

@@ -1,10 +1,11 @@
 .nologin {
   $gray-800-for-login: darken(white, 30%);
+  $color-gradient: #3e4d6c;
 
   // background color
-  background: linear-gradient(45deg, darken($inverse, 30%) 0%, hsla(340, 100%, 55%, 0) 70%),
+  background: linear-gradient(45deg, darken($color-gradient, 30%) 0%, hsla(340, 100%, 55%, 0) 70%),
     linear-gradient(135deg, $growi-green 10%, hsla(225, 95%, 50%, 0) 70%), linear-gradient(225deg, $growi-blue 10%, hsla(140, 90%, 50%, 0) 80%),
-    linear-gradient(315deg, darken($inverse, 25%) 100%, hsla(35, 95%, 55%, 0) 70%);
+    linear-gradient(315deg, darken($color-gradient, 25%) 100%, hsla(35, 95%, 55%, 0) 70%);
 
   #page-wrapper {
     background: none;
@@ -274,6 +275,10 @@
       color: white;
     }
   }
+
+  .grw-fixed-controls-container {
+    display: none;
+  }
 }
 
 .login-page {

src/client/styles/scss/_navbar_kibela.scss

@@ -21,8 +21,6 @@
       }
     }
     .create-page {
-      width: 8em;
-      text-align: center;
       background: #5584e1;
       border-radius: 0.35em;
       &:hover {

src/client/styles/scss/_on-edit.scss

@@ -248,7 +248,6 @@ body.on-edit {
 
     .hackmd-status-label {
       font-size: 3em;
-      color: $muted;
     }
 
     .hackmd-resume-button-container,

src/client/styles/scss/_override-bootstrap.scss

@@ -97,57 +97,6 @@
     }
   }
 
-  // agile-admin style
-  .dropdown-menu {
-    padding-bottom: 8px;
-    margin-top: 0px;
-    border: 1px solid $border;
-    border-radius: $radius;
-    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05) !important;
-  }
-
-  .dropdown-menu > li > a {
-    width: 100%;
-    padding: 9px 20px;
-  }
-
-  .dropdown-menu > li > a:focus,
-  .dropdown-menu > li > a:hover {
-    background: $extralight;
-  }
-
-  // btn-light (substitute for btn-default of bootstrap3)  (agile-admin style)
-  .btn-light,
-  .btn-light.disabled {
-    color: $bodytext;
-    $this-color: $btn-default-bgcolor;
-    background: $this-color;
-    border: 1px solid $this-color;
-
-    &:hover,
-    &:focus,
-    &.focus {
-      color: $bodytext;
-      background: $this-color;
-      border: 1px solid $this-color;
-      opacity: 0.8;
-    }
-
-    &:active &.active {
-      box-shadow: none;
-    }
-  }
-
-  .btn-light.btn-outline {
-    background-color: transparent;
-
-    &:hover,
-    &:focus,
-    &.focus {
-      background: $btn-default-bgcolor;
-    }
-  }
-
   //Modals
   .modal-content {
     box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.1);

src/client/styles/scss/_page.scss

@@ -31,7 +31,7 @@
     .revision-history-outer {
       // add border-top except of first element
       &:not(:first-of-type) {
-        border-top: 1px solid $border;
+        @extend .border-top;
       }
 
       .revision-history-main {
@@ -132,15 +132,6 @@
     z-index: 14;
     font-size: 12px;
     line-height: 1;
-    color: $linktext;
-    background-color: transparent;
-    border: 1px solid $linktext;
-    opacity: 1;
-
-    &:hover {
-      color: $white;
-      background-color: $linktext;
-    }
   }
 }
 

src/client/styles/scss/_sidebar.scss

@@ -11,12 +11,6 @@
     // Adjust to be on top of the growi subnavigation
     z-index: $zindex-sticky + 5;
   }
-  div[class$='-Outer'] {
-    div[class$='-Shadow'] {
-      background: unset;
-      border-right: 1px solid $border;
-    }
-  }
 
   .grw-global-item-container {
     i {

src/client/styles/scss/_staff_credit.scss

@@ -16,16 +16,13 @@
     background-image: radial-gradient(rgba(50, 100, 100, 0.75), black 120%);
   }
 
-  font-family: 'Press Start 2P', $basefont1;
-  color: white;
-
   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
-    font-family: 'Press Start 2P', $basefont1;
+    font-family: 'Press Start 2P', $font-family-for-staff-credit;
     color: white;
   }
 

src/client/styles/scss/_variables.scss

@@ -2,6 +2,7 @@
 $growi-green: #74bc46;
 $growi-blue: #175fa5;
 
+$font-family-for-staff-credit: Lato, -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif !default;
 $font-family-monospace-not-strictly: Monaco, Menlo, Consolas, 'Courier New', MeiryoKe_Gothic, monospace;
 
 //== Layout

src/client/styles/scss/theme/_apply-colors-dark.scss

@@ -1,17 +1,3 @@
-/*
- * Button
- */
-.btn-light {
-  &:hover,
-  &:focus,
-  &.active,
-  &.active:hover,
-  &.active:focus {
-    color: $light;
-    background-color: lighten($bgcolor-global, 5%);
-  }
-}
-
 /*
   * Form
   */
@@ -197,18 +183,6 @@ ul.pagination {
   }
 }
 
-/*
- * GROWI admin page #themeOptions
- */
-.admin-page {
-  #themeOptions {
-    .theme-option-container.active a {
-      background-color: darken(theme-color('primary'), 15%);
-      border-color: darken(theme-color('primary'), 15%);
-    }
-  }
-}
-
 /*
  * GROWI comment form
  */

src/client/styles/scss/theme/_apply-colors-kibela.scss

@@ -125,14 +125,6 @@ body.kibela {
   /* Modal */
   .modal-content {
     background-color: $themelight;
-
-    .modal-header.bg-primary {
-      color: white;
-
-      .close {
-        color: white;
-      }
-    }
   }
 
   /* Inline Code */
@@ -169,6 +161,11 @@ body.kibela {
         color: $color-link-nabvar;
       }
     }
+    #personal-dropdown {
+      a.nav-link {
+        color: $color-global;
+      }
+    }
   }
 
   /* h */

src/client/styles/scss/theme/_apply-colors-light.scss

@@ -77,18 +77,6 @@
   }
 }
 
-/*
- * GROWI admin page #themeOptions
- */
-.admin-page {
-  #themeOptions {
-    .theme-option-container.active a {
-      background-color: lighten(theme-color('primary'), 20%);
-      border-color: lighten(theme-color('primary'), 20%);
-    }
-  }
-}
-
 /*
  * GROWI comment form
  */

src/client/styles/scss/theme/_apply-colors.scss

@@ -131,6 +131,12 @@ $input-focus-color: $color-global;
       background-color: $bgcolor-sidebar-context;
     }
   }
+  div[class$='-Outer'] {
+    div[class$='-Shadow'] {
+      background: unset;
+      border-right: 1px solid $gray-300;
+    }
+  }
 }
 
 /*
@@ -155,6 +161,7 @@ $input-focus-color: $color-global;
   .modal-header {
     border-bottom-color: $border-color-theme;
     .close {
+      color: $light;
       opacity: 0.5;
       &:hover {
         opacity: 0.9;
@@ -327,6 +334,10 @@ mark.rbt-highlight-text {
       .theme-option-name {
         color: $color-global;
       }
+      a {
+        background-color: $color-theme-color-box;
+        border-color: $color-theme-color-box;
+      }
     }
   }
 }

src/client/styles/scss/theme/antarctic.scss

@@ -86,6 +86,9 @@ html[dark] {
   $color-dropdown-link-active: $color-reversal;
   $color-dropdown-link-hover: $color-global;
 
+  // admin theme box
+  $color-theme-color-box: lighten($themecolor, 20%);
+
   // alert
   $color-alert: $color-reversal;
 

src/client/styles/scss/theme/blue-night.scss

@@ -1,8 +0,0 @@
-// import colors
-@import '../../agile-admin/inverse/colors/blue-night';
-
-// apply agile-admin theme
-@import '../../agile-admin/inverse/style';
-
-// override
-@import 'override-agileadmin';

src/client/styles/scss/theme/christmas.scss

@@ -1,8 +1,215 @@
-// import colors
-@import '../../agile-admin/inverse/colors/christmas';
+@import '../variables';
+@import '../override-bootstrap-variables';
 
-// apply agile-admin theme
-@import '../../agile-admin/inverse/style';
+// == Define Bootstrap theme colors
+//
 
-// override
-@import 'override-agileadmin';
+// colors for overriding bootstrap $theme-colors
+// $secondary: #;
+// $info: #;
+// $success: #;
+// $warning: #;
+// $danger: #;
+// $light: #;
+// $dark: #;
+$themecolor: #b3000c;
+$themelight: white;
+
+$subthemecolor: #017e20;
+$bgcolor-navbar: $themecolor;
+$bgcolor-global: $themelight;
+$linktext: lighten(#0d5901, 5%);
+$linktext-hover: lighten($linktext, 12%);
+$sidebar-text: #ffffff;
+$fillcolor-logo-mark: lighten(desaturate($themecolor, 50%), 50%);
+$color-link-wiki: lighten($themecolor, 5%);
+$color-link-wiki-hover: lighten($color-link-wiki, 15%);
+$color-inline-code: darken($subthemecolor, 5%);
+$bgcolor-inline-code: lighten($subthemecolor, 70%);
+$active-nav-tabs-bgcolor: white;
+
+.growi:not(.login-page) {
+  // add background-image
+  #page-wrapper,
+  .page-editor-preview-container {
+    background-image: url('/images/themes/christmas/christmas.jpg');
+    background-attachment: fixed;
+    background-position: center center;
+    background-size: cover;
+  }
+}
+
+//== Light Mode
+//
+html[light],
+html[dark] {
+  // Background colors
+  $bgcolor-card: #f5f5f5;
+
+  // Font colors
+  $color-global: $subthemecolor;
+  $color-reversal: #eeeeee;
+  $color-link: lighten($color-global, 2%);
+  $color-link-hover: lighten($color-link, 20%);
+  $color-link-nabvar: $color-reversal;
+
+  // List Group colors
+  $color-list: $color-global;
+  $bgcolor-list: $themelight;
+  $color-list-active: $color-reversal;
+  $bgcolor-list-active: $themecolor;
+  $color-list-hover: $color-reversal;
+
+  // Logo colors
+  $bgcolor-logo: $themecolor;
+
+  // Icon colors
+  $color-editor-icons: $color-global;
+
+  // Border colors
+  $border-color-theme: #ccc; // former: `$navbar-border: #ccc;`
+
+  // Dropdown colors
+  $bgcolor-dropdown-link-active: $growi-blue;
+  $color-dropdown-link-active: $color-reversal;
+  $color-dropdown-link-hover: $color-global;
+
+  // admin theme box
+  $color-theme-color-box: lighten($themecolor, 20%);
+
+  // alert
+  $color-alert: $color-reversal;
+
+  // badge
+  $color-badge: $color-reversal;
+
+  // Sidebar
+  $bgcolor-sidebar: $themecolor;
+  $color-sidebar-context: $color-reversal;
+  $bgcolor-sidebar-context: lighten($themecolor, 10%);
+
+  @import 'apply-colors';
+  @import 'apply-colors-light';
+
+  // change color of highlighted header in wiki (default: orange)
+  .wiki {
+    .code-line.revision-head.highlighted {
+      color: $themelight;
+      background-color: lighten($themecolor, 20%);
+
+      .icon-note,
+      .icon-link {
+        color: $themelight;
+      }
+    }
+  }
+
+  .sidebar {
+    background: $themecolor;
+  }
+
+  .rbt-menu {
+    background: $themelight;
+  }
+
+  #wrapper > #page-wrapper,
+  .page-editor-preview-container {
+    background-image: url('/images/themes/christmas/christmas.jpg');
+    background-attachment: fixed;
+    background-size: cover;
+  }
+
+  /*
+  * Tabs
+  */
+  body:not(.on-edit) .nav.nav-tabs {
+    > li.active > a {
+      background: linear-gradient(
+        rgba($active-nav-tabs-bgcolor, 0) 0%,
+        rgba($active-nav-tabs-bgcolor, 0) 90%,
+        $active-nav-tabs-bgcolor 100%
+      ); // overwrite only the bottom pixel
+    }
+  }
+
+  // login page
+  .nologin {
+    .input-group {
+      .input-group-addon {
+        background-color: rgba(lighten(black, 10%), 0.6);
+      }
+      .form-control {
+        background-color: rgba(lighten(black, 10%), 0.6);
+      }
+    }
+
+    &.login-page {
+      .login-header,
+      .login-dialog {
+        background-color: rgba(#ccc, 0.5);
+      }
+      .link-switch {
+        color: #bd3425;
+      }
+    }
+  }
+
+  /*
+  * Modal
+  */
+  .modal-dialog .modal-header.bg-primary {
+    background-image: url('/images/themes/christmas/christmas-navbar.jpg');
+    border-bottom: 2px solid $subthemecolor;
+  }
+
+  /*
+  * Panel
+  */
+  .panel {
+    &.panel-white,
+    &.panel-default {
+      border-color: $subthemecolor;
+      .panel-heading {
+        color: $dark;
+        background-color: $subthemecolor;
+        border-bottom: 1px solid $subthemecolor;
+      }
+    }
+  }
+
+  .panel.panel-primary {
+    border-color: #bd3425;
+    .panel-heading {
+      color: white;
+      background-color: $themecolor;
+      background-image: url('/images/themes/christmas/christmas-navbar.jpg');
+    }
+  }
+
+  .grw-navbar {
+    background-image: url('/images/themes/christmas/christmas-navbar.jpg');
+    border-bottom: 4px solid $subthemecolor;
+  }
+
+  .grw-subnav {
+    background-color: #ffffff;
+  }
+
+  .nav-tabs {
+    border-bottom-color: $themecolor;
+  }
+
+  .nav-link {
+    border-color: $themecolor;
+  }
+
+  .nav-tabs .nav-link.active {
+    background: none;
+    border-color: $themecolor;
+  }
+
+  .search-top .dropdown-toggle {
+    color: black;
+    background-color: hsla(0, 0%, 100%, 0.8);
+  }
+}

src/client/styles/scss/theme/default.scss

@@ -56,6 +56,9 @@ html[light] {
   $color-dropdown-link-active: $color-reversal;
   $color-dropdown-link-hover: $color-reversal;
 
+  // admin theme box
+  $color-theme-color-box: lighten($primary, 20%);
+
   // alert
   $color-alert: $color-reversal;
 
@@ -117,6 +120,9 @@ html[dark] {
   $color-dropdown-link-active: $color-global;
   $color-dropdown-link-hover: $color-reversal;
 
+  // admin theme box
+  $color-theme-color-box: $primary;
+
   // alert
   $color-alert: $color-reversal;
 

src/client/styles/scss/theme/future.scss

@@ -1,8 +1,104 @@
-// import colors
-@import '../../agile-admin/inverse/colors/future';
+@import '../variables';
+@import '../override-bootstrap-variables';
 
-// apply agile-admin theme
-@import '../../agile-admin/inverse/style';
+$themecolor: #16282d;
+$themelight: rgba(11, 79, 104, 0.616);
+$accentcolor: #66eddf;
 
-// override
-@import 'override-agileadmin';
+$primary: $themelight;
+$dark: darken($themecolor, 5%);
+
+html[light],
+html[dark] {
+  // Background colors
+  $bgcolor-global: $themecolor;
+  $bgcolor-navbar: #011414;
+  $bgcolor-inline-code: darken($themecolor, 5%);
+  $bgcolor-card: darken($themecolor, 5%);
+
+  // Font colors
+  $color-global: lighten($themecolor, 35%);
+  $color-reversal: #eeeeee;
+  $color-header: #d9a364;
+  $color-link: lighten($primary, 20%);
+  $color-link-hover: lighten($color-link, 20%);
+  $color-link-wiki: darken($themecolor, 5%);
+  $color-link-wiki-hover: darken($color-link-wiki, 5%);
+  $color-link-nabvar: $color-reversal;
+  $color-inline-code: #c7254e;
+  $color-search: #050a0b;
+
+  // List Group colors
+  $color-list: $color-global;
+  $bgcolor-list: transparent;
+  $color-list-active: $color-reversal;
+  $bgcolor-list-active: $primary;
+  $color-list-hover: $color-reversal;
+
+  // Logo colors
+  $bgcolor-logo: darken($themecolor, 10%);
+  $fillcolor-logo-mark: lighten($accentcolor, 15%);
+
+  // Icon colors
+  $color-editor-icons: $color-global;
+
+  // Border colors
+  $border-color-theme: #407483;
+
+  // Dropdown colors
+  $bgcolor-dropdown-link-active: $primary;
+  $color-dropdown-link-active: $color-reversal;
+  $color-dropdown-link-hover: $color-global;
+
+  // admin theme box
+  $color-theme-color-box: lighten($primary, 20%);
+
+  // alert
+  $color-alert: $color-reversal;
+
+  // badge
+  $color-badge: $color-reversal;
+
+  // Sidebar
+  $bgcolor-sidebar: $bgcolor-navbar;
+  $color-sidebar-context: $color-reversal;
+  $bgcolor-sidebar-context: lighten($bgcolor-navbar, 10%);
+
+  @import 'apply-colors';
+  @import 'apply-colors-dark';
+
+  // headers
+  @for $i from 1 through 6 {
+    h#{$i} {
+      color: $color-header;
+    }
+  }
+
+  // Navs {
+  .nav-tabs {
+    border-bottom: $border-color-theme 1px solid;
+    .nav-link {
+      &:hover {
+        border-color: darken($border-color-theme, 10%);
+        border-bottom: none;
+      }
+      &.active {
+        color: $color-link;
+        background-color: transparent;
+        border-color: $border-color-theme;
+      }
+    }
+  }
+
+  // Search Top
+  .search-top {
+    .input-group-prepend .dropdown-toggle {
+      color: #5193a5;
+      background-color: $color-search;
+      border-color: $color-search;
+      &:hover {
+        background-color: darken($color-search, 10%);
+      }
+    }
+  }
+}

src/client/styles/scss/theme/halloween.scss

@@ -73,6 +73,9 @@ html[dark] {
   $color-dropdown-link-active: $color-reversal;
   $color-dropdown-link-hover: $color-global;
 
+  // admin theme box
+  $color-theme-color-box: lighten($primary, 20%);
+
   // alert
   $color-alert: $color-reversal;
 

src/client/styles/scss/theme/island.scss

@@ -1,8 +1,183 @@
-// import colors
-@import '../../agile-admin/inverse/colors/island';
+@import '../variables';
+@import '../override-bootstrap-variables';
 
-// apply agile-admin theme
-@import '../../agile-admin/inverse/style';
+$color-themelight: rgba(183, 226, 219, 1);
+$color-primary: #97cbc3;
+$color-navbar: #0c2a44;
+$color-global: #3c6d72;
+$color-link-global: $color-global;
+$color-inline-code: #8f5313;
+$color-active-bgnav-tabs: #dbf0ed;
+$color-link-wiki: $color-global;
+$color-link-wiki-hover: rgba($color-global, 0.8);
+$bgcolor-inline-code: darken($color-themelight, 3%);
 
-// override
-@import 'override-agileadmin';
+$dark: darken($color-global, 5%);
+
+html[light],
+html[dark] {
+  // Background colors
+  $bgcolor-card: #f5f5f5;
+  $bgcolor-global: lighten($color-themelight, 10%);
+  $bgcolor-navbar: $color-navbar;
+
+  // Font colors
+  $color-reversal: #eeeeee;
+  $color-link: lighten($color-global, 20%);
+  $color-link-hover: lighten($color-link, 20%);
+  $color-link-nabvar: $color-reversal;
+
+  // List Group colors
+  $color-list: $color-global;
+  $bgcolor-list: lighten($color-themelight, 10%);
+  $color-list-active: $color-reversal;
+  $bgcolor-list-active: $color-primary;
+  $color-list-hover: $color-reversal;
+
+  // Logo colors
+  $bgcolor-logo: $color-navbar;
+  $fillcolor-logo-mark: lighten(desaturate($bgcolor-inline-code, 10%), 15%);
+
+  // Icon colors
+  $color-editor-icons: $color-global;
+
+  // Border colors
+  $border-color-theme: #ccc;
+
+  // Dropdown colors
+  $bgcolor-dropdown-link-active: $growi-blue;
+  $color-dropdown-link-active: $color-reversal;
+  $color-dropdown-link-hover: $color-global;
+
+  // admin theme box
+  $color-theme-color-box: lighten($primary, 20%);
+
+  // alert
+  $color-alert: $color-reversal;
+
+  // badge
+  $color-badge: $color-reversal;
+
+  // Sidebar
+  $bgcolor-sidebar: $color-navbar;
+  $color-sidebar-context: $color-reversal;
+  $bgcolor-sidebar-context: lighten($color-navbar, 10%);
+
+  @import 'apply-colors';
+  @import 'apply-colors-light';
+
+  .wiki {
+    .highlighted {
+      background-color: lighten($color-primary, 20%);
+    }
+  }
+
+  .nav-tabs,
+  .nav-tabs .nav-link.active,
+  .nav-link {
+    background: none;
+    border-color: $color-primary;
+    border-bottom-color: $color-primary;
+  }
+
+  .card,
+  .card-header {
+    background: none;
+    border: none;
+  }
+
+  .panel {
+    &,
+    &.panel-white,
+    &.panel-default {
+      color: $color-primary;
+      background-color: lighten($color-primary, 30%);
+      border-color: white;
+
+      .panel-heading {
+        color: $color-primary;
+        background-color: white;
+      }
+
+      ul {
+        li {
+          a {
+            color: darken($color-primary, 15%);
+          }
+        }
+      }
+    }
+  }
+
+  /* GROWI page list */
+  .page-list {
+    .page-list-ul {
+      > li {
+        > a strong {
+          color: $color-link-global;
+        }
+      }
+    }
+  }
+
+  .rbt-menu {
+    background: lighten($color-themelight, 5%);
+  }
+
+  #wrapper > #page-wrapper,
+  .page-editor-preview-container {
+    background-image: url('/images/themes/island/island.png');
+    background-attachment: fixed;
+  }
+
+  /*
+   * Tabs
+   */
+  body:not(.on-edit) .nav.nav-tabs {
+    > li.active > a {
+      background: linear-gradient(
+        rgba($color-active-bgnav-tabs, 0) 0%,
+        rgba($color-active-bgnav-tabs, 0) 90%,
+        $color-active-bgnav-tabs 100%
+      ); // overwrite only the bottom pixel
+    }
+  }
+
+  /* Table */
+  .table > thead > tr > th,
+  .table > tbody > tr > th,
+  .table > tfoot > tr > th,
+  .table > thead > tr > td,
+  .table > tbody > tr > td,
+  .table > tfoot > tr > td,
+  .table > thead > tr > th,
+  .table-bordered {
+    border-top: 1px solid $color-primary;
+  }
+
+  .table-bordered > thead > tr > th,
+  .table-bordered > tbody > tr > th,
+  .table-bordered > tfoot > tr > th,
+  .table-bordered > thead > tr > td,
+  .table-bordered > tbody > tr > td,
+  .table-bordered > tfoot > tr > td {
+    border: 1px solid $color-primary;
+  }
+
+  .table > thead > tr > th {
+    border-bottom: 1px solid $color-primary;
+  }
+
+  .table-bordered {
+    border: 1px solid $color-primary;
+  }
+
+  // login page
+  .nologin {
+    &.login-page {
+      > #wrapper > #page-wrapper {
+        background-image: unset;
+      }
+    }
+  }
+}

src/client/styles/scss/theme/kibela.scss

@@ -53,6 +53,9 @@ html[light] {
   $color-dropdown-link-active: $color-reversal;
   $color-dropdown-link-hover: $color-global;
 
+  // admin theme box
+  $color-theme-color-box: lighten($bgcolor-theme, 20%);
+
   // alert
   $color-alert: $color-reversal;
 
@@ -116,6 +119,9 @@ html[dark] {
   $color-dropdown-link-active: $color-reversal;
   $color-dropdown-link-hover: $color-global;
 
+  // admin theme box
+  $color-theme-color-box: lighten($bgcolor-theme, 20%);
+
   // alert
   $color-alert: $color-reversal;
 

src/client/styles/scss/theme/mono-blue.scss

@@ -1,8 +1,6 @@
 @import '../variables';
 @import '../override-bootstrap-variables';
 
-
-
 html[light] {
   // Theme colors
   $themecolor: #00587a;
@@ -29,7 +27,6 @@ html[light] {
   $color-inline-code: $subthemecolor;
   $color-search: #c0d6df;
 
-
   // List Group colors
   $color-list: $color-global;
   $bgcolor-list: transparent;
@@ -51,6 +48,9 @@ html[light] {
   $bgcolor-dropdown-link-active: $primary;
   $color-dropdown-link-active: $color-reversal;
 
+  // admin theme box
+  $color-theme-color-box: lighten($primary, 20%);
+
   // alert
   $color-alert: $color-reversal;
 
@@ -62,7 +62,6 @@ html[light] {
   $color-sidebar-context: $color-reversal;
   $bgcolor-sidebar-context: lighten($bgcolor-sidebar, 10%);
 
-
   @import 'apply-colors';
   @import 'apply-colors-light';
 
@@ -119,7 +118,6 @@ html[dark] {
   $color-inline-code: $subthemecolor;
   $color-search: #000102;
 
-
   // List Group colors
   $color-list: $color-global;
   $bgcolor-list: transparent;
@@ -142,6 +140,9 @@ html[dark] {
   $bgcolor-dropdown-link-active: $primary;
   $color-dropdown-link-active: $color-reversal;
 
+  // admin theme box
+  $color-theme-color-box: $primary;
+
   // alert
   $color-alert: $color-reversal;
 
@@ -153,7 +154,6 @@ html[dark] {
   $color-sidebar-context: $color-reversal;
   $bgcolor-sidebar-context: lighten($bgcolor-sidebar, 10%);
 
-
   @import 'apply-colors';
   @import 'apply-colors-dark';
 
@@ -188,4 +188,4 @@ html[dark] {
   .table {
     color: white;
   }
-}
+}

src/client/styles/scss/theme/nature.scss

@@ -93,6 +93,9 @@ html[dark] {
   $color-dropdown-link-active: $color-reversal;
   $color-dropdown-link-hover: $color-global;
 
+  // admin theme box
+  $color-theme-color-box: lighten($primary, 20%);
+
   // alert
   $color-alert: $color-reversal;
 

src/client/styles/scss/theme/spring.scss

@@ -19,7 +19,7 @@
   .page-editor-preview-container {
     background-image: url('/images/themes/spring/spring02.svg');
     background-attachment: fixed;
-    background-position: center center;
+    background-position: bottom;
     background-size: cover;
   }
 }
@@ -28,7 +28,7 @@
   #page-wrapper {
     background-image: url('/images/themes/spring/spring.svg');
     background-attachment: fixed;
-    background-position: center center;
+    background-position: bottom;
     background-size: cover;
   }
 }
@@ -57,21 +57,21 @@ html[dark] {
 
   // Font colors
   $color-global: black;
-  $color-reversal: #eeeeee;
+  $color-reversal: white;
   // $color-header: #2b2b2b;
   $color-link: lighten($color-global, 20%);
-  $color-link-hover: lighten($color-link, 20%);
+  $color-link-hover: $subthemecolor;
   $color-link-wiki: $subthemecolor;
   $color-link-wiki-hover: lighten($color-link-wiki, 20%);
-  $color-link-nabvar: $color-reversal;
+  $color-link-nabvar: $bgcolor-global;
   $color-inline-code: #c7254e;
 
   // List Group colors
   $color-list: $color-global;
-  $bgcolor-list: $bgcolor-global;
-  $color-list-active: $color-reversal;
-  $bgcolor-list-active: $primary;
-  $color-list-hover: $color-reversal;
+  $bgcolor-list: $themelight;
+  $color-list-active: $bgcolor-global;
+  $bgcolor-list-active: $accentcolor;
+  $color-list-hover: lighten($accentcolor, 20%);
 
   // Logo colors
   $bgcolor-logo: $bgcolor-navbar;
@@ -88,6 +88,9 @@ html[dark] {
   $color-dropdown-link-active: $color-reversal;
   $color-dropdown-link-hover: $color-global;
 
+  // admin theme box
+  $color-theme-color-box: darken($primary, 20%);
+
   // alert
   $color-alert: $color-reversal;
 
@@ -105,9 +108,23 @@ html[dark] {
   .table {
     background-color: $bgcolor-global;
   }
+
   .card-timeline > .card-header {
     background-color: $third-main-color;
   }
+
+  h1,
+  h2 {
+    color: $subthemecolor;
+  }
+
+  .nav.nav-tabs {
+    > .nav-item {
+      > .nav-link.active {
+        color: $subthemecolor;
+      }
+    }
+  }
 }
 
 //== Dark Mode

src/client/styles/scss/theme/wood.scss

@@ -12,7 +12,6 @@
 // $dark: #;
 
 .growi:not(.login-page) {
-
   // add background-image
   #page-wrapper,
   .page-editor-preview-container {
@@ -79,6 +78,9 @@ html[dark] {
   $color-dropdown-link-active: $color-reversal;
   $color-dropdown-link-hover: $color-global;
 
+  // admin theme box
+  $color-theme-color-box: lighten($primary, 20%);
+
   // alert
   $color-alert: $color-reversal;
 
@@ -103,7 +105,6 @@ html[dark] {
   .grw-navbar {
     background-image: url('/images/themes/wood/wood-navbar.jpg');
     border-bottom: $accentcolor 4px solid;
-
   }
 }
 

src/migrations/20200514001356-update-theme-color-for-dark.js

@@ -0,0 +1,27 @@
+require('module-alias/register');
+const logger = require('@alias/logger')('growi:migrate:update-theme-color-for-dark');
+
+const mongoose = require('mongoose');
+const config = require('@root/config/migrate');
+
+const { getModelSafely } = require('@commons/util/mongoose-utils');
+
+module.exports = {
+  async up(db, client) {
+    logger.info('Apply migration');
+    mongoose.connect(config.mongoUri, config.mongodb.options);
+
+    const Config = getModelSafely('Config') || require('@server/models/config')();
+
+    await Promise.all([
+      await Config.findOneAndUpdate({ key: 'customize:theme', value: JSON.stringify('default-dark') }, { value: JSON.stringify('default') }), // update default-dark
+      await Config.findOneAndUpdate({ key: 'customize:theme', value: JSON.stringify('blue-night') }, { value: JSON.stringify('mono-blue') }), // update blue-night
+    ]);
+
+    logger.info('Migration has successfully applied');
+  },
+
+  async down(db, client) {
+    // do not rollback
+  },
+};

src/server/routes/apiv3/customize-setting.js

@@ -90,13 +90,13 @@ module.exports = (crowi) => {
   const validator = {
     themeAssetPath: [
       query('themeName').isString().isIn([
-        'default', 'nature', 'mono-blue', 'wood', 'island', 'christmas', 'antarctic', 'future', 'blue-night', 'halloween', 'spring',
+        'default', 'nature', 'mono-blue', 'wood', 'island', 'christmas', 'antarctic', 'future', 'halloween', 'spring',
       ]),
     ],
     layoutTheme: [
       body('layoutType').isString().isIn(['growi', 'kibela']),
       body('themeType').isString().isIn([
-        'default', 'nature', 'mono-blue', 'wood', 'island', 'christmas', 'antarctic', 'future', 'blue-night', 'halloween', 'spring',
+        'default', 'nature', 'mono-blue', 'wood', 'island', 'christmas', 'antarctic', 'future', 'halloween', 'spring',
       ]),
     ],
     function: [

src/server/views/layout/layout.html

@@ -109,7 +109,7 @@
       {% if user %}
       <!-- TODO GW-79 enable after refactoring  <li id="create-page-button" class="nav-item d-none d-md-block"></li> -->
       <li class="nav-item d-none d-md-block">
-        <a class="nav-link create-page" href="#" data-target="#create-page" data-toggle="modal">
+        <a class="nav-link create-page px-4" href="#" data-target="#create-page" data-toggle="modal">
           <i class="icon-pencil mr-2"></i>
           <span>{{ t('New') }}</span>
         </a>

src/server/views/modal/create_page.html

@@ -3,9 +3,9 @@
   <div class="modal-dialog modal-lg">
     <div class="modal-content">
 
-      <div class="modal-header bg-primary">
-        <div class="modal-title text-white">{{ t('New Page') }}</div>
-        <button type="button" class="close text-white" data-dismiss="modal" aria-hidden="true">&times;</button>
+      <div class="modal-header bg-primary text-light">
+        <div class="modal-title">{{ t('New Page') }}</div>
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
       </div>
 
       <div class="modal-body">
@@ -29,6 +29,7 @@
           </div>
         </form>
 
+        {% if !isTrashPage() %}
         <form id="create-page-under-tree" role="form">
           <div class="row form-group">
             <fieldset class="col-12 mb-4">
@@ -81,6 +82,7 @@
             </div>
           </fieldset>
         </div>
+        {% endif %}
 
         <script>
           $('#dd-template-type .dropdown-item').on('click', function() {

src/server/views/modal/create_template.html

@@ -4,7 +4,7 @@
   <div class="modal-dialog">
     <div class="modal-content">
 
-      <div class="modal-header bg-primary">
+      <div class="modal-header bg-primary text-light">
         <div class="modal-title">{{ t('template.modal_label.Create/Edit Template Page') }}</div>
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
       </div>

src/server/views/modal/delete.html

@@ -4,7 +4,7 @@
 
       <form role="form" id="delete-page-form" onsubmit="return false;">
 
-        <div class="modal-header {% if page.isDeleted() %}bg-danger{% else %}bg-primary{% endif %}">
+        <div class="modal-header text-light {% if page.isDeleted() %}bg-danger{% else %}bg-primary{% endif %}">
           <div class="modal-title">
             {% if page.isDeleted() %}
             <i class="icon-fw icon-fire"></i> {{ t('modal_delete.delete_completely') }}

src/server/views/modal/duplicate.html

@@ -4,7 +4,7 @@
 
       <form role="form" id="duplicatePageForm" onsubmit="return false;">
 
-        <div class="modal-header bg-primary">
+        <div class="modal-header bg-primary text-light">
           <div class="modal-title">{{ t('modal_duplicate.label.Duplicate page') }}</div>
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
         </div>

src/server/views/modal/empty_trash.html

@@ -4,7 +4,7 @@
 
     <form role="form" id="empty-trash-form" onsubmit="return false;">
 
-      <div class="modal-header bg-danger">
+      <div class="modal-header bg-danger text-light">
         <div class="modal-title">
           <i class="icon-fw icon-trash"></i>  {{ t('modal_empty.empty_the_trash') }}
         </div>

src/server/views/modal/put_back.html

@@ -4,7 +4,7 @@
 
       <form role="form" id="revert-delete-page-form" onsubmit="return false;">
 
-        <div class="modal-header bg-info">
+        <div class="modal-header bg-info text-light">
           <div class="modal-title"><i class="icon-action-undo"></i> {{ t('modal_putback.label.Put Back Page') }}</div>
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
         </div>

src/server/views/modal/rename.html

@@ -4,7 +4,7 @@
 
       <form role="form" id="renamePageForm" onsubmit="return false;">
 
-        <div class="modal-header bg-primary">
+        <div class="modal-header bg-primary text-light">
           <div class="modal-title">{{ t('modal_rename.label.Move/Rename page') }}</div>
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
         </div>

src/server/views/modal/shortcuts.html

@@ -2,7 +2,7 @@
   <div class="modal-dialog modal-lg">
     <div class="modal-content">
 
-      <div class="modal-header">
+      <div class="modal-header text-light">
         <div class="modal-title">{{ t('Shortcuts') }}</div>
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
       </div>

src/server/views/widget/alert_siteurl_undefined.html

@@ -1,5 +1,5 @@
 {% if !getConfig('crowi', 'app:siteUrl') %}
-<div class="alert alert-danger text-white mb-0 px-4 py-2">
+<div class="alert alert-danger mb-0 px-4 py-2">
   <i class="icon-exclamation"></i>
   {{ t("security_setting.alert_siteUrl_is_not_set", { link:t('App Settings')}) }}
 </div>

src/server/views/widget/page_tabs_kibela.html

@@ -72,11 +72,11 @@
       >
         <i class="icon-options-vertical"></i>
       </a>
-      <ul class="dropdown-menu dropdown-menu-right">
-        <li class="dropdown-item">
-          <a href="#" data-target="#create-template" data-toggle="modal"><i class="icon-fw icon-magic-wand"></i> {{ t('template.option_label.create/edit') }}</a>
-        </li>
-      </ul>
+      <div class="dropdown-menu dropdown-menu-right">
+        <a class="dropdown-item" href="#" data-target="#create-template" data-toggle="modal">
+          <i class="icon-fw icon-magic-wand"></i> {{ t('template.option_label.create/edit') }}
+        </a>
+      </div>
     </li>
     {% else %}
     <li class="nav-item dropdown">
@@ -89,18 +89,16 @@
       >
         <i class="icon-options-vertical"></i>
       </a>
-      <ul class="dropdown-menu dropdown-menu-right">
-        <li class="dropdown-item"><a href="#" data-target="#renamePage" data-toggle="modal"><i class="icon-fw icon-action-redo"></i> {{ t('Move/Rename') }}</a></li>
-        <li class="dropdown-item"><a href="#" data-target="#duplicatePage" data-toggle="modal"><i class="icon-fw icon-docs"></i> {{ t('Duplicate') }}</a></li>
-        <li class="dropdown-divider"></li>
-        <li class="dropdown-item">
-          <a href="#" data-target="#create-template" data-toggle="modal"><i class="icon-fw icon-magic-wand"></i> {{ t('template.option_label.create/edit') }}</a>
-        </li>
+      <div class="dropdown-menu dropdown-menu-right">
+        <a class="dropdown-item" href="#" data-target="#renamePage" data-toggle="modal"><i class="icon-fw icon-action-redo"></i> {{ t('Move/Rename') }}</a>
+        <a class="dropdown-item" href="#" data-target="#duplicatePage" data-toggle="modal"><i class="icon-fw icon-docs"></i> {{ t('Duplicate') }}</a>
+        <div class="dropdown-divider"></div>
+        <a class="dropdown-item" href="#" data-target="#create-template" data-toggle="modal"><i class="icon-fw icon-magic-wand"></i> {{ t('template.option_label.create/edit') }}</a>
         {% if isDeletablePage() %}
-        <li class="dropdown-divider"></li>
-        <li class="dropdown-item"><a href="#" data-target="#deletePage" data-toggle="modal"><i class="icon-fw icon-fire text-danger"></i> {{ t('Delete') }}</a></li>
+        <div class="dropdown-divider"></div>
+        <a class="dropdown-item" href="#" data-target="#deletePage" data-toggle="modal"><i class="icon-fw icon-fire text-danger"></i> {{ t('Delete') }}</a>
         {% endif %}
-      </ul>
+      </div>
     </li>
     {% endif %}
   {% endif %}