Merge branch 'dev/4.0.x' into imprv/profile-image-cache

CHANGES.md

@@ -11,6 +11,8 @@
 
 ### Updates
 
+* Feature: Sidebar
+* Feature: Recent changes on Sidebar
 * Feature: Switch Light/Dark Mode
 * Improvement: Migrate to Bootstrap 4
 * Improvement: Copy Page URL menu item to copy path dropdown
@@ -18,10 +20,6 @@
 * Support: Upgrade libs
     * bootstrap
 
-## v3.8.2-RC
-
-*
-
 ## v3.8.1
 
 ### BREAKING CHANGES

bin/github-actions/update-readme.sh

@@ -2,5 +2,5 @@
 
 cd docker
 
-sed -i -e "s/^\([*] \[\`\)[^\`]\+\(\`, \`3\.8\`, .\+\]\)\(.\+\/blob\/v\).\+\(\/docker\/Dockerfile.\+\)$/\1${RELEASE_VERSION}\2\3${RELEASE_VERSION}\4/" README.md
-sed -i -e "s/^\([*] \[\`\)[^\`]\+\(\`, \`3\.8-nocdn\`, .\+\]\)\(.\+\/blob\/v\).\+\(\/docker\/Dockerfile.\+\)$/\1${RELEASE_VERSION}-nocdn\2\3${RELEASE_VERSION}\4/" README.md
+sed -i -e "s/^\([*] \[\`\)[^\`]\+\(\`, \`4\.0\`, .\+\]\)\(.\+\/blob\/v\).\+\(\/docker\/Dockerfile.\+\)$/\1${RELEASE_VERSION}\2\3${RELEASE_VERSION}\4/" README.md
+sed -i -e "s/^\([*] \[\`\)[^\`]\+\(\`, \`4\.0-nocdn\`, .\+\]\)\(.\+\/blob\/v\).\+\(\/docker\/Dockerfile.\+\)$/\1${RELEASE_VERSION}-nocdn\2\3${RELEASE_VERSION}\4/" README.md

docker/README.md

@@ -10,10 +10,10 @@ GROWI Official docker image
 Supported tags and respective Dockerfile links
 ------------------------------------------------
 
-* [`3.8.0`, `3.8`, `3`, `latest` (Dockerfile)](https://github.com/weseek/growi/blob/v3.8.0/docker/Dockerfile)
-* [`3.8.0-nocdn`, `3.8-nocdn`, `3-nocdn`, `latest-nocdn` (Dockerfile)](https://github.com/weseek/growi/blob/v3.8.0/docker/Dockerfile)
-* [`3.7.6`, `3.7` (Dockerfile)](https://github.com/weseek/growi/blob/v3.7.6/docker/Dockerfile)
-* [`3.7.6-nocdn`, `3.7-nocdn` (Dockerfile)](https://github.com/weseek/growi/blob/v3.7.6/docker/Dockerfile)
+* [`4.0.0`, `4.0`, `4`, `latest` (Dockerfile)](https://github.com/weseek/growi/blob/v4.0.0/docker/Dockerfile)
+* [`4.0.0-nocdn`, `4.0-nocdn`, `4-nocdn`, `latest-nocdn` (Dockerfile)](https://github.com/weseek/growi/blob/v4.0.0/docker/Dockerfile)
+* [`3.8.0`, `3.8`, `3` (Dockerfile)](https://github.com/weseek/growi/blob/v3.8.0/docker/Dockerfile)
+* [`3.8.0-nocdn`, `3.8-nocdn`, `3-nocdn` (Dockerfile)](https://github.com/weseek/growi/blob/v3.8.0/docker/Dockerfile)
 
 
 What is GROWI?

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

@@ -23,21 +23,21 @@ class CustomizeThemeOptions extends React.Component {
     }];
 
     const uniqueTheme = [{
-      name: 'nature',     bg: '#f9fff3', topbar: '#2a2929', sidebar: '#118050', theme: '#460039',
+      name: 'nature',     bg: '#f9fff3', topbar: '#234136', sidebar: '#118050', theme: '#460039',
     }, {
-      name: 'wood',       bg: '#fffefb', topbar: '#2a2929', sidebar: '#aaa45f', theme: '#dddebf',
+      name: 'wood',       bg: '#fffefb', topbar: '#2a2929', sidebar: '#aaa45f', theme: '#aaa45f',
     }, {
-      name: 'island',     bg: '#8ecac0', topbar: '#2a2929', sidebar: '#0c2a44', theme: '#cef2ef',
+      name: 'island',     bg: '#cef2ef', topbar: '#2a2929', sidebar: '#0c2a44', theme: 'rgba(183, 226, 219, 1)',
     }, {
-      name: 'christmas',  bg: '#fffefb', topbar: '#2a2929', sidebar: '#b3000c', theme: '#017e20',
+      name: 'christmas',  bg: '#fffefb', topbar: '#b3000c', sidebar: '#30882c', theme: '#d3c665',
     }, {
-      name: 'antarctic',  bg: '#ffffff', topbar: '#2a2929', sidebar: '#000080', theme: '#99cccc',
+      name: 'antarctic',  bg: '#ffffff', topbar: '#2a2929', sidebar: '#000080', theme: '#fa9913',
     }, {
-      name: 'spring',     bg: '#fff5ee', topbar: '#2a2929', sidebar: '#ff69b4', theme: '#ffb6c1',
+      name: 'spring',     bg: '#ffffff', topbar: '#d3687c', sidebar: '#ffb8c6', theme: '#67a856',
     }, {
-      name: 'future',     bg: '#16282D', topbar: '#2a2929', sidebar: '#011414', theme: '#04B4AE',
+      name: 'future',     bg: '#16282d', topbar: '#2a2929', sidebar: '#00b5b7', theme: '#00b5b7',
     }, {
-      name: 'halloween',  bg: '#030003', topbar: '#2a2929', sidebar: '#cc5d1f', theme: '#e9af2b',
+      name: 'halloween',  bg: '#030003', topbar: '#aa4a04', sidebar: '#162b33', theme: '#e9af2b',
     }];
     /* eslint-enable no-multi-spaces */
 

src/client/js/components/Admin/Notification/GlobalNotificationList.jsx

@@ -143,10 +143,10 @@ class GlobalNotificationList extends React.Component {
                     <i className="icon-settings"></i> <span className="caret"></span>
                   </button>
                   <div className="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
-                    <a className="dropdown-item" href={urljoin('/admin/global-notification/', notification._id)}>
+                    <a className="dropdown-item" type="button" href={urljoin('/admin/global-notification/', notification._id)}>
                       <i className="icon-fw icon-note"></i> {t('Edit')}
                     </a>
-                    <a className="dropdown-item" onClick={() => this.openConfirmationModal(notification)}>
+                    <a className="dropdown-item" type="button" onClick={() => this.openConfirmationModal(notification)}>
                       <i className="icon-fw icon-fire text-danger"></i> {t('Delete')}
                     </a>
                   </div>

src/client/js/components/Admin/Notification/ManageGlobalNotification.jsx

@@ -101,11 +101,9 @@ class ManageGlobalNotification extends React.Component {
       <React.Fragment>
 
         <div className="my-3">
-          <a href="/admin/notification#global-notification">
-            <button type="button" className="btn page-link text-dark d-inline-block">
-              <i className="icon-fw ti-arrow-left" aria-hidden="true"></i>
-              {t('notification_setting.back_to_list')}
-            </button>
+          <a href="/admin/notification#global-notification" className="btn btn-outline-secondary">
+            <i className="icon-fw ti-arrow-left" aria-hidden="true"></i>
+            {t('notification_setting.back_to_list')}
           </a>
         </div>
 

src/client/js/components/Admin/Notification/SlackAppConfiguration.jsx

@@ -53,8 +53,10 @@ class SlackAppConfiguration extends React.Component {
                 {`Slack ${adminNotificationContainer.state.selectSlackOption}`}
               </button>
               <div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                <a className="dropdown-item" onClick={() => adminNotificationContainer.switchSlackOption('Incoming Webhooks')}>Slack Incoming Webhooks</a>
-                <a className="dropdown-item" onClick={() => adminNotificationContainer.switchSlackOption('App')}>Slack App</a>
+                <a className="dropdown-item" type="button" onClick={() => adminNotificationContainer.switchSlackOption('Incoming Webhooks')}>
+                  Slack Incoming Webhooks
+                </a>
+                <a className="dropdown-item" type="button" onClick={() => adminNotificationContainer.switchSlackOption('App')}>Slack App</a>
               </div>
             </div>
           </div>

src/client/js/components/Admin/Security/LdapSecuritySetting.jsx

@@ -140,10 +140,10 @@ class LdapSecuritySetting extends React.Component {
                         : <span className="pull-left">{t('security_setting.ldap.bind_manager')}</span>}
                   </button>
                   <div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                    <a className="dropdown-item" onClick={() => { adminLdapSecurityContainer.changeLdapBindMode(true) }}>
+                    <a className="dropdown-item" type="button" onClick={() => { adminLdapSecurityContainer.changeLdapBindMode(true) }}>
                       {t('security_setting.ldap.bind_user')}
                     </a>
-                    <a className="dropdown-item" onClick={() => { adminLdapSecurityContainer.changeLdapBindMode(false) }}>
+                    <a className="dropdown-item" type="button" onClick={() => { adminLdapSecurityContainer.changeLdapBindMode(false) }}>
                       {t('security_setting.ldap.bind_manager')}
                     </a>
                   </div>

src/client/js/components/Admin/Security/LocalSecuritySetting.jsx

@@ -118,13 +118,13 @@ class LocalSecuritySetting extends React.Component {
                     {registrationMode === 'Closed' && t('security_setting.registration_mode.closed')}
                   </button>
                   <div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                    <a className="dropdown-item" onClick={() => { adminLocalSecurityContainer.changeRegistrationMode('Open') }}>
+                    <a className="dropdown-item" type="button" onClick={() => { adminLocalSecurityContainer.changeRegistrationMode('Open') }}>
                       {t('security_setting.registration_mode.open')}
                     </a>
-                    <a className="dropdown-item" onClick={() => { adminLocalSecurityContainer.changeRegistrationMode('Restricted') }}>
+                    <a className="dropdown-item" type="button" onClick={() => { adminLocalSecurityContainer.changeRegistrationMode('Restricted') }}>
                       {t('security_setting.registration_mode.restricted')}
                     </a>
-                    <a className="dropdown-item" onClick={() => { adminLocalSecurityContainer.changeRegistrationMode('Closed') }}>
+                    <a className="dropdown-item" type="button" onClick={() => { adminLocalSecurityContainer.changeRegistrationMode('Closed') }}>
                       {t('security_setting.registration_mode.closed')}
                     </a>
                   </div>

src/client/js/components/Admin/Security/SecuritySetting.jsx

@@ -135,10 +135,10 @@ class SecuritySetting extends React.Component {
                 </span>
               </button>
               <div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                <a className="dropdown-item" onClick={() => { adminGeneralSecurityContainer.changeRestrictGuestMode('Deny') }}>
+                <a className="dropdown-item" type="button" onClick={() => { adminGeneralSecurityContainer.changeRestrictGuestMode('Deny') }}>
                   {t('security_setting.guest_mode.deny')}
                 </a>
-                <a className="dropdown-item" onClick={() => { adminGeneralSecurityContainer.changeRestrictGuestMode('Readonly') }}>
+                <a className="dropdown-item" type="button" onClick={() => { adminGeneralSecurityContainer.changeRestrictGuestMode('Readonly') }}>
                   {t('security_setting.guest_mode.readonly')}
                 </a>
               </div>
@@ -180,13 +180,17 @@ class SecuritySetting extends React.Component {
                 </span>
               </button>
               <div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                <a className="dropdown-item" onClick={() => { adminGeneralSecurityContainer.changePageCompleteDeletionAuthority('anyOne') }}>
+                <a className="dropdown-item" type="button" onClick={() => { adminGeneralSecurityContainer.changePageCompleteDeletionAuthority('anyOne') }}>
                   {t('security_setting.anyone')}
                 </a>
-                <a className="dropdown-item" onClick={() => { adminGeneralSecurityContainer.changePageCompleteDeletionAuthority('adminOnly') }}>
+                <a className="dropdown-item" type="button" onClick={() => { adminGeneralSecurityContainer.changePageCompleteDeletionAuthority('adminOnly') }}>
                   {t('security_setting.admin_only')}
                 </a>
-                <a className="dropdown-item" onClick={() => { adminGeneralSecurityContainer.changePageCompleteDeletionAuthority('adminAndAuthor') }}>
+                <a
+                  className="dropdown-item"
+                  type="button"
+                  onClick={() => { adminGeneralSecurityContainer.changePageCompleteDeletionAuthority('adminAndAuthor') }}
+                >
                   {t('security_setting.admin_and_author')}
                 </a>
               </div>

src/client/js/components/Admin/UserGroup/UserGroupTable.jsx

@@ -87,10 +87,10 @@ class UserGroupTable extends React.Component {
                             <i className="icon-settings"></i>
                           </button>
                           <div className="dropdown-menu" role="menu" aria-labelledby={`admin-group-menu-button-${group._id}`}>
-                            <a className="dropdown-item" href={`/admin/user-group-detail/${group._id}`}>
+                            <a className="dropdown-item" type="button" href={`/admin/user-group-detail/${group._id}`}>
                               <i className="icon-fw icon-note"></i> {t('Edit')}
                             </a>
-                            <a className="dropdown-item" role="button" onClick={this.onDelete} data-user-group-id={group._id}>
+                            <a className="dropdown-item" type="button" role="button" onClick={this.onDelete} data-user-group-id={group._id}>
                               <i className="icon-fw icon-fire text-danger"></i> {t('Delete')}
                             </a>
                           </div>

src/client/js/components/Admin/UserGroupDetail/UserGroupUserTable.jsx

@@ -75,6 +75,7 @@ class UserGroupUserTable extends React.Component {
                     <div className="dropdown-menu" role="menu" aria-labelledby={`admin-group-menu-button-${relatedUser._id}`}>
                       <a
                         className="dropdown-item"
+                        type="button"
                         onClick={() => {
                           return this.removeUser(relatedUser.username);
                         }}

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

@@ -99,7 +99,7 @@ class ExternalAccountTable extends React.Component {
                       </button>
                       <ul className="dropdown-menu" role="menu">
                         <li className="dropdown-header">{t('admin:user_management.user_table.edit_menu')}</li>
-                        <a className="dropdown-item" role="button" onClick={() => { return this.removeExtenalAccount(ea._id) }}>
+                        <a className="dropdown-item" type="button" role="button" onClick={() => { return this.removeExtenalAccount(ea._id) }}>
                           <i className="icon-fw icon-fire text-danger"></i> {t('Delete')}
                         </a>
                       </ul>

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

@@ -31,7 +31,7 @@ class GiveAdminButton extends React.Component {
     const { t } = this.props;
 
     return (
-      <a className="dropdown-item" href="#" onClick={() => { this.onClickGiveAdminBtn() }}>
+      <a className="dropdown-item" type="button" onClick={() => { this.onClickGiveAdminBtn() }}>
         <i className="icon-fw icon-user-following"></i> {t('admin:user_management.user_table.give_admin_access')}
       </a>
     );

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

@@ -32,7 +32,7 @@ class RemoveAdminButton extends React.Component {
     const { t } = this.props;
 
     return (
-      <a className="dropdown-item" onClick={() => { this.onClickRemoveAdminBtn() }}>
+      <a className="dropdown-item" type="button" onClick={() => { this.onClickRemoveAdminBtn() }}>
         <i className="icon-fw icon-user-unfollow"></i> {t('admin:user_management.user_table.remove_admin_access')}
       </a>
     );

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

@@ -31,7 +31,7 @@ class StatusActivateButton extends React.Component {
     const { t } = this.props;
 
     return (
-      <a className="dropdown-item" onClick={() => { this.onClickAcceptBtn() }}>
+      <a className="dropdown-item" type="button" onClick={() => { this.onClickAcceptBtn() }}>
         <i className="icon-fw icon-user-following"></i> {t('admin:user_management.user_table.accept')}
       </a>
     );

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

@@ -31,7 +31,7 @@ class StatusSuspendedButton extends React.Component {
     const { t } = this.props;
 
     return (
-      <a className="dropdown-item" onClick={() => { this.onClickDeactiveBtn() }}>
+      <a className="dropdown-item" type="button" onClick={() => { this.onClickDeactiveBtn() }}>
         <i className="icon-fw icon-ban"></i> {t('admin:user_management.user_table.deactivate_account')}
       </a>
     );

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

@@ -36,7 +36,7 @@ class UserMenu extends React.Component {
         <li className="dropdown-divider"></li>
         <li className="dropdown-header">{t('admin:user_management.user_table.edit_menu')}</li>
         <li>
-          <a className="dropdown-item" href="#" onClick={this.onPasswordResetClicked}>
+          <a className="dropdown-item" type="button" onClick={this.onPasswordResetClicked}>
             <i className="icon-fw icon-key"></i>{ t('admin:user_management.reset_password') }
           </a>
         </li>

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

@@ -32,7 +32,7 @@ class UserRemoveButton extends React.Component {
     const { t } = this.props;
 
     return (
-      <a className="dropdown-item" onClick={() => { this.onClickDeleteBtn() }}>
+      <a className="dropdown-item" type="button" onClick={() => { this.onClickDeleteBtn() }}>
         <i className="icon-fw icon-fire text-danger"></i> {t('Delete')}
       </a>
     );

src/client/js/components/EmptyTrashModal.jsx

@@ -46,7 +46,7 @@ const EmptyTrashModal = (props) => {
       <ModalFooter>
         <ApiErrorMessage errorCode={errorCode} errorMessage={errorMessage} />
         <button type="button" className="btn btn-danger" onClick={emptyButtonHandler}>
-          <i className="icon-trash mr-2" aria-hidden="true"></i>Empty
+          <i className="icon-trash mr-2" aria-hidden="true"></i> Empty
         </button>
       </ModalFooter>
     </Modal>
@@ -67,7 +67,6 @@ EmptyTrashModal.propTypes = {
 
   isOpen: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,
-  onClickEmptyBtn: PropTypes.func.isRequired,
 };
 
 export default withTranslation()(EmptyTrashModalWrapper);

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

@@ -65,8 +65,8 @@ const PersonalDropdown = (props) => {
       {/* Menu */}
       <div className="dropdown-menu dropdown-menu-right">
 
-        <a className="dropdown-item" href={`/user/${user.username}`}><i className="icon-fw icon-user"></i>{ t('User\'s Home') }</a>
-        <a className="dropdown-item" href="/me"><i className="icon-fw icon-wrench"></i>{ t('User Settings') }</a>
+        <a className="dropdown-item" type="button" href={`/user/${user.username}`}><i className="icon-fw icon-user"></i>{ t('User\'s Home') }</a>
+        <a className="dropdown-item" type="button" href="/me"><i className="icon-fw icon-wrench"></i>{ t('User Settings') }</a>
 
         <div className="dropdown-divider"></div>
 

src/client/js/components/PageEditor.jsx

@@ -288,7 +288,7 @@ class PageEditor extends React.Component {
     const emojiStrategy = this.props.appContainer.getEmojiStrategy();
 
     return (
-      <div className="d-flex">
+      <div className="d-flex flex-wrap">
         <div className="page-editor-editor-container" style={{ flex: 1 }}>
           <Editor
             ref={(c) => { this.editor = c }}

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

@@ -191,7 +191,7 @@ class OptionsSelector extends React.Component {
     return (
       <DropdownItem toggle={false} onClick={this.onClickStyleActiveLine}>
         <span className="icon-container"></span>
-        <span className="menuitem-label">{ t('page_edit.Show active line') }</span>
+        <span className="menuitem-label mr-2">{ t('page_edit.Show active line') }</span>
         <span className="icon-container"><i className={iconClassName}></i></span>
       </DropdownItem>
     );

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

@@ -132,6 +132,14 @@ body.on-edit {
     }
   }
 
+  // deal with word wrap problem
+  // see: https://qiita.com/mpyw/items/dfc63c1fed5dfc5eda26
+  .page-editor-editor-container,
+  .page-editor-preview-container {
+    min-width: 0;
+    overflow-wrap: break-word;
+  }
+
   /*********************
    * Navigation styles
    */
@@ -206,11 +214,6 @@ body.on-edit {
           display: flex;
           align-items: center;
           justify-content: space-between;
-
-          .menuitem-label {
-            flex: 1;
-            margin-right: 10px;
-          }
         }
       }
     }

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

@@ -59,6 +59,10 @@ $modal-content-border-width: 0;
 $modal-header-padding-y: 0.75rem;
 $modal-header-padding-x: 1rem;
 
+//== Alerts
+$alert-bg-level: -2;
+$alert-border-level: 0;
+
 //== Progress bar
 $progress-height: 4px;
 $progress-border-radius: $border-radius-sm;

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

@@ -124,13 +124,4 @@
     margin-bottom: 18px;
     overflow: hidden;
   }
-
-  // badge
-  .badge {
-    letter-spacing: 0.05em;
-    &.badge-warning {
-      // badge-warning text is white color in bootstrap3
-      color: white;
-    }
-  }
 }

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

@@ -89,11 +89,8 @@ ul.pagination {
 .page-list {
   .page-list-ul {
     > li {
-      > a strong {
-        color: lighten($color-global, 25%);
-      }
       > span.page-list-meta {
-        color: $color-global;
+        color: darken($color-global, 10%);
       }
     }
   }

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

@@ -1,185 +1,187 @@
 body.kibela {
-  .icon-link,
-  .CodeMirror-hint-active,
-  .grw-nav-main-left-tab,
-  .tav-pane,
-  .active {
-    color: $subthemecolor;
-  }
+  .growi:not(.login-page) {
+    .icon-link,
+    .CodeMirror-hint-active,
+    .grw-nav-main-left-tab,
+    .tav-pane,
+    .active {
+      color: $subthemecolor;
+    }
 
-  .bg-white {
-    background: #fefffe !important;
-  }
+    .bg-white {
+      background: #fefffe !important;
+    }
 
-  .bg-primary {
-    background-color: $primary !important;
-  }
+    .bg-primary {
+      background-color: $primary !important;
+    }
 
-  .grw-subnavbar {
-    background-color: rgba(lighten($bgcolor-global, 50%), 1);
-  }
+    .grw-subnavbar {
+      background-color: rgba(lighten($bgcolor-global, 50%), 1);
+    }
 
-  /* kibela block */
-  .kibela-border-top {
-    border-top: solid 0.4em $thickborder;
-  }
+    /* kibela block */
+    .kibela-border-top {
+      border-top: solid 0.4em $thickborder;
+    }
 
-  /* page wrapper */
-  #page-wrapper {
-    background-color: $bgcolor-global;
-  }
+    /* page wrapper */
+    #page-wrapper {
+      background-color: $bgcolor-global;
+    }
 
-  .search-input-group,
-  .search-typeahead {
-    .btn {
-      background-color: transparent;
+    .search-input-group,
+    .search-typeahead {
+      .btn {
+        background-color: transparent;
+      }
     }
-  }
 
-  .btn-open-dropzone {
-    background: $themelight;
-  }
+    .btn-open-dropzone {
+      background: $themelight;
+    }
 
-  /* page list */
-  .page-list {
-    background: white;
-  }
+    /* page list */
+    .page-list {
+      background: white;
+    }
 
-  .page-attachments-row {
-    background-color: #e5ecf1;
-  }
+    .page-attachments-row {
+      background-color: #e5ecf1;
+    }
 
-  /* round */
-  .round-corner-top {
-    border-top: solid 0.4em $thickborder;
-  }
+    /* round */
+    .round-corner-top {
+      border-top: solid 0.4em $thickborder;
+    }
 
-  /* admin navigation */
-  .admin-navigation {
-    .list-group-item {
-      background-color: transparent;
+    /* admin navigation */
+    .admin-navigation {
+      .list-group-item {
+        background-color: transparent;
 
-      &:hover {
-        background: #eee;
+        &:hover {
+          background: #eee;
+        }
+      }
+
+      .list-group-item.active {
+        color: white;
+        background: $bgcolor-navbar-active;
       }
     }
 
-    .list-group-item.active {
-      color: white;
-      background: $bgcolor-navbar-active;
+    /* search page */
+    .search-result-list,
+    .page-list-li {
+      background: $themelight;
     }
-  }
 
-  /* search page */
-  .search-result-list,
-  .page-list-li {
-    background: $themelight;
-  }
+    /* Tabs */
+    .nav.nav-tabs {
+      > .nav-item {
+        color: $color-link;
+        background: transparent;
 
-  /* Tabs */
-  .nav.nav-tabs {
-    > .nav-item {
-      color: $color-link;
-      background: transparent;
+        &:hover,
+        &:focus {
+          > .nav-link {
+            color: $color-link-hover;
+          }
+        }
 
-      &:hover,
-      &:focus {
         > .nav-link {
-          color: $color-link-hover;
+          color: $color-link;
         }
-      }
-
-      > .nav-link {
-        color: $color-link;
-      }
 
-      > .nav-link.active {
-        background: transparent !important;
-        border-bottom: solid 2.7px $thickborder;
+        > .nav-link.active {
+          background: transparent !important;
+          border-bottom: solid 2.7px $thickborder;
+        }
       }
     }
-  }
-
-  /* wiki */
-  .wiki {
-    h1 {
-      border-bottom: solid 2px $thickborder !important;
-    }
 
-    h2 {
-      border-color: solid 1px $thickborder;
-    }
+    /* wiki */
+    .wiki {
+      h1 {
+        border-bottom: solid 2px $thickborder !important;
+      }
 
-    // change color of highlighted header in wiki (default: orange)
-    .code-line.revision-head.highlighted {
-      color: $themelight;
-      background-color: lighten($bgcolor-theme, 20%);
+      h2 {
+        border-color: solid 1px $thickborder;
+      }
 
-      .icon-note,
-      .icon-link {
+      // change color of highlighted header in wiki (default: orange)
+      .code-line.revision-head.highlighted {
         color: $themelight;
+        background-color: lighten($bgcolor-theme, 20%);
+
+        .icon-note,
+        .icon-link {
+          color: $themelight;
+        }
       }
     }
-  }
 
-  /* Modal */
-  .modal-title {
-    color: #ffffff; // override header colors
-  }
-  .modal-content {
-    background-color: $themelight;
-  }
-
-  /* Inline Code */
-  :not(.hljs) > code:not(.hljs) {
-    color: $color-inline-code;
-    background-color: $bgcolor-inline-code;
-    border: solid 1px $bordercolor-inline-code;
-    border-radius: 0.35em;
-  }
+    /* Modal */
+    .modal-title {
+      color: #ffffff; // override header colors
+    }
+    .modal-content {
+      background-color: $themelight;
+    }
 
-  /* button */
-  .btn-primary {
-    background: $primary;
-    border: 1px solid $primary;
-  }
+    /* Inline Code */
+    :not(.hljs) > code:not(.hljs) {
+      color: $color-inline-code;
+      background-color: $bgcolor-inline-code;
+      border: solid 1px $bordercolor-inline-code;
+      border-radius: 0.35em;
+    }
 
-  /* edit */
-  .CodeMirror {
-    border: solid 1.2px #d8d8d8;
-    border-top: solid 0.3em $thickborder !important;
-  }
+    /* button */
+    .btn-primary {
+      background: $primary;
+      border: 1px solid $primary;
+    }
 
-  &.on-edit {
-    .page-editor-preview-container {
-      background: white !important;
+    /* edit */
+    .CodeMirror {
+      border: solid 1.2px #d8d8d8;
+      border-top: solid 0.3em $thickborder !important;
     }
-  }
 
-  /* navbar */
-  .grw-navbar {
-    .nav-item > .nav-link {
-      &:hover {
-        color: $color-link-nabvar-hover;
-      }
-      &:focus {
-        color: $color-link-nabvar;
+    &.on-edit {
+      .page-editor-preview-container {
+        background: white !important;
       }
     }
-    #personal-dropdown {
-      a.nav-link {
-        color: $color-global;
+
+    /* navbar */
+    .grw-navbar {
+      .nav-item > .nav-link {
+        &:hover {
+          color: $color-link-nabvar-hover;
+        }
+        &:focus {
+          color: $color-link-nabvar;
+        }
+      }
+      #personal-dropdown {
+        a.nav-link {
+          color: $color-global;
+        }
       }
     }
-  }
 
-  /* h */
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    color: $color-header;
+    /* h */
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      color: $color-header;
+    }
   }
 }

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

@@ -53,9 +53,6 @@ $table-hover-bg: $bgcolor-table-hover;
 .page-list {
   .page-list-ul {
     > li {
-      > a strong {
-        color: darken($color-global, 20%);
-      }
       > span.page-list-meta {
         color: lighten($color-global, 10%);
       }

src/client/styles/scss/theme/_reboot-bootstrap-theme-colors.scss

@@ -52,26 +52,18 @@ $theme-colors: map-merge($theme-colors, $colors);
   }
 }
 
-@each $theme-color, $color in $theme-colors {
-  .alert.alert-#{$theme-color} {
-    color: $color-alert;
-    background: $color;
-    border: none;
-
-    a:not(.btn) {
-      color: $bgcolor-global;
-
-      &:hover,
-      &:focus {
-        color: lighten($color, 30%);
-      }
-    }
+@each $color, $value in $theme-colors {
+  .alert-#{$color} {
+    @include alert-variant(
+      theme-color-level($color, $alert-bg-level),
+      theme-color-level($color, $alert-border-level),
+      theme-color-level($color, $alert-color-level)
+    );
   }
 }
 
-@each $theme-color, $color in $theme-colors {
-  .badge.badge-#{$theme-color} {
-    color: $color-badge;
-    background: $color;
+@each $color, $value in $theme-colors {
+  .badge-#{$color} {
+    @include badge-variant($value);
   }
 }

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

@@ -108,12 +108,6 @@ html[dark] {
   // admin theme box
   $color-theme-color-box: lighten($themecolor, 20%);
 
-  // alert
-  $color-alert: $color-reversal;
-
-  // badge
-  $color-badge: $color-reversal;
-
   @import 'apply-colors';
   @import 'apply-colors-light';
 
@@ -127,6 +121,11 @@ html[dark] {
       background-color: transparent;
     }
   }
+
+  a#login.link-switch,
+  a#register.link-switch {
+    color: rgba(black, 0.5);
+  }
 }
 
 //== Dark Mode
@@ -175,12 +174,6 @@ html[dark] {
 //   $color-dropdown-link-active: $color-global;
 //   $color-dropdown-link-hover: $color-reversal;
 
-//   // alert
-//   $color-alert: $color-global;
-
-//   // badge
-//   $color-badge: $color-global;
-
 //   // Sidebar
 //   $bgcolor-sidebar: $bgcolor-navbar;
 //   $color-sidebar-context: $color-global;

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

@@ -52,6 +52,9 @@ html[dark] {
   $color-link-nabvar: $color-reversal;
   $color-inline-code: #c7254e; // optional
 
+  // Table colors
+  $border-color-table: #aaa; // optional
+
   // List Group colors
   $color-list: $color-global;
   $bgcolor-list: $themelight;
@@ -98,12 +101,6 @@ html[dark] {
   // admin theme box
   $color-theme-color-box: lighten($themecolor, 20%);
 
-  // alert
-  $color-alert: $color-reversal;
-
-  // badge
-  $color-badge: $color-reversal;
-
   @import 'apply-colors';
   @import 'apply-colors-light';
 

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

@@ -95,12 +95,6 @@ html[light] {
   // admin theme box
   $color-theme-color-box: lighten($primary, 20%);
 
-  // alert
-  $color-alert: $color-reversal;
-
-  // badge
-  $color-badge: $color-reversal;
-
   @import 'apply-colors';
   @import 'apply-colors-light';
 }
@@ -188,12 +182,6 @@ html[dark] {
   // admin theme box
   $color-theme-color-box: $primary;
 
-  // alert
-  $color-alert: $color-reversal;
-
-  // badge
-  $color-badge: $color-reversal;
-
   @import 'apply-colors';
   @import 'apply-colors-dark';
 }

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

@@ -53,9 +53,9 @@ html[dark] {
   $bgcolor-sidebar-list-group: #162126; // optional
 
   // Sidebar resize button
-  $color-resize-button: #0E2329;
-  $bgcolor-resize-button: #00C2C4;
-  $color-resize-button-hover: #0E2329;
+  $color-resize-button: #0e2329;
+  $bgcolor-resize-button: #00c2c4;
+  $color-resize-button-hover: #0e2329;
   $bgcolor-resize-button-hover: lighten($bgcolor-resize-button, 5%);
 
   // Icon colors
@@ -73,19 +73,13 @@ html[dark] {
   // admin theme box
   $color-theme-color-box: lighten($primary, 20%);
 
-  // alert
-  $color-alert: $color-reversal;
-
-  // badge
-  $color-badge: $color-reversal;
-
   @import 'apply-colors';
   @import 'apply-colors-dark';
 
   // headers
   @for $i from 1 through 6 {
     h#{$i} {
-      color: $color-header;
+      color: white;
     }
   }
 

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

@@ -103,12 +103,6 @@ html[dark] {
   // admin theme box
   $color-theme-color-box: lighten($primary, 20%);
 
-  // alert
-  $color-alert: $color-reversal;
-
-  // badge
-  $color-badge: $color-reversal;
-
   @import 'apply-colors';
   @import 'apply-colors-dark';
 
@@ -121,5 +115,4 @@ html[dark] {
     color: #edba4a;
     background: #000000;
   }
-
 }

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

@@ -1,53 +1,69 @@
 @import '../variables';
 @import '../override-bootstrap-variables';
 
-$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%);
-
-$dark: darken($color-global, 5%);
+$color-themelight: rgba(183, 226, 219, 1);
 
 html[light],
 html[dark] {
+  $primary: $color-primary;
   // Background colors
   $bgcolor-card: #f5f5f5;
   $bgcolor-global: lighten($color-themelight, 10%);
   $bgcolor-inline-code: #f0f0f0; //optional
 
   // Font colors
+  $color-global: #112744;
   $color-reversal: #eeeeee;
-  $color-link: lighten($color-global, 20%);
+  // $color-header: #2b2b2b;
+  $color-link: #3c6d72;
   $color-link-hover: lighten($color-link, 20%);
+  $color-link-wiki: $color-link;
+  $color-link-wiki-hover: lighten($color-link-wiki, 20%);
   $color-link-nabvar: $color-reversal;
   $color-inline-code: #c7254e; // optional
 
   // 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-active: $color-global;
+  $bgcolor-list-active: $primary;
   $color-list-hover: $color-reversal;
 
+  // Table colors
+  // $color-table: #; // optional
+  // $bgcolor-table: #; // optional
+  $border-color-table: $primary; // optional
+  // $color-table-hover: #; // optional
+  // $bgcolor-table-hover: #; // optional
+
   // Navbar
-  $bgcolor-navbar: #0c2a44;
-  $border-color-navbar-gradient-left: #545fff;
-  $border-color-navbar-gradient-right: #00a6e5;
+  $bgcolor-navbar: #302e2e;
+  $bgcolor-search-top-dropdown: $color-primary;
+  $border-image-navbar: linear-gradient(to right, #5ce4ef 0%, #5953eb 100%);
 
   // Logo colors
-  $bgcolor-logo: $color-navbar;
+  $bgcolor-logo: #0d3955;
   $fillcolor-logo-mark: lighten(desaturate($bgcolor-inline-code, 10%), 15%);
 
   // Sidebar
-  $bgcolor-sidebar: $color-navbar;
-  $color-sidebar-context: $color-reversal;
-  $bgcolor-sidebar-context: lighten($color-navbar, 10%);
+  $bgcolor-sidebar: #0d3955;
+  $bgcolor-sidebar-nav-item-active: rgba(#000000, 0.37);
+  // $bgcolor-sidebar-nav-item-active: rgba(#969494, 0.3); // optional
+  $text-shadow-sidebar-nav-item-active: 0px 0px 10px #0099ff; // optional
+  // Sidebar resize button
+  $color-resize-button: white;
+  $bgcolor-resize-button: $primary;
+  $color-resize-button-hover: white;
+  $bgcolor-resize-button-hover: darken($bgcolor-resize-button, 5%);
+  // Sidebar contents
+  $bgcolor-sidebar-context: #e2f3f1;
+  $color-sidebar-context: $color-link;
+  // Sidebar list group
+  $bgcolor-sidebar-list-group: #eff8f7; // optional
+
+  // Tabs
+  $bordercolor-nav-tabs: #ccc; // optional
 
   // Icon colors
   $color-editor-icons: $color-global;
@@ -62,68 +78,14 @@ html[dark] {
   $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;
+  $color-theme-color-box: darken($primary, 15%);
 
   @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;
-        }
-      }
+      background-color: lighten($primary, 20%);
     }
   }
 
@@ -137,48 +99,6 @@ html[dark] {
     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 {

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

@@ -61,12 +61,6 @@ html[dark] {
   // admin theme box
   $color-theme-color-box: lighten($bgcolor-theme, 20%);
 
-  // alert
-  $color-alert: $color-reversal;
-
-  // badge
-  $color-badge: $color-reversal;
-
   // Sidebar
   $bgcolor-sidebar: $bgcolor-theme;
   $color-sidebar-context: $color-reversal;

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

@@ -71,12 +71,6 @@ html[light] {
   // admin theme box
   $color-theme-color-box: lighten($primary, 20%);
 
-  // alert
-  $color-alert: $color-reversal;
-
-  // badge
-  $color-badge: $color-reversal;
-
   @import 'apply-colors';
   @import 'apply-colors-light';
 
@@ -170,12 +164,6 @@ html[dark] {
   // admin theme box
   $color-theme-color-box: $primary;
 
-  // alert
-  $color-alert: $color-reversal;
-
-  // badge
-  $color-badge: $color-reversal;
-
   @import 'apply-colors';
   @import 'apply-colors-dark';
 

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

@@ -87,15 +87,12 @@ html[dark] {
   $color-dropdown-link-active: $color-reversal;
   $color-dropdown-link-hover: $color-global;
 
+  // Table colors
+  $border-color-table: #aaa; // optional
+
   // admin theme box
   $color-theme-color-box: lighten($primary, 20%);
 
-  // alert
-  $color-alert: $color-reversal;
-
-  // badge
-  $color-badge: $color-reversal;
-
   @import 'apply-colors';
   @import 'apply-colors-light';
 
@@ -119,64 +116,3 @@ html[dark] {
     }
   }
 }
-
-//== Dark Mode
-//
-// html[dark] {
-//   $primary: #d65a31;
-
-//   $basecolor: #222831;
-
-//   // Background colors
-//   $bgcolor-global: $basecolor;
-//   $bgcolor-navbar: #151515;
-//   $bgcolor-inline-code: darken($basecolor, 5%);
-//   $bgcolor-card: darken($basecolor, 5%);
-
-//   // Font colors
-//   $color-global: #eeeeee;
-//   $color-reversal: #333333;
-//   // $color-header: desaturate($primary, 20%);
-//   $color-link: $primary;
-//   $color-link-hover: lighten($color-link, 10%);
-//   $color-link-wiki: lighten($basecolor, 50%);
-//   $color-link-wiki-hover: darken($color-link-wiki, 5%);
-//   $color-link-nabvar: $color-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;
-
-//   // Logo colors
-//   $bgcolor-logo: $bgcolor-navbar;
-//   $fillcolor-logo-mark: #444;
-
-//   // Icon colors
-//   $color-editor-icons: darken($accentcolor, 15%);
-
-//   // Border colors
-//   $border-color-theme: black; // former: `$navbar-border: #ccc;`
-
-//   // Dropdown colors
-//   $bgcolor-dropdown-link-active: $primary;
-//   $color-dropdown-link-active: $color-global;
-//   $color-dropdown-link-hover: $color-reversal;
-
-//   // alert
-//   $color-alert: $color-global;
-
-//   // badge
-//   $color-badge: $color-global;
-
-//   // Sidebar
-//   $bgcolor-sidebar: $bgcolor-navbar;
-//   $color-sidebar-context: $color-global;
-//   $bgcolor-sidebar-context: lighten($bgcolor-navbar, 5%);
-
-//   @import 'apply-colors';
-//   @import 'apply-colors-dark';
-// }

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

@@ -13,26 +13,6 @@
 // $light: #;
 // $dark: #;
 
-.growi:not(.login-page) {
-  // add background-image
-  #page-wrapper,
-  .page-editor-preview-container {
-    background-image: url('/images/themes/spring/spring02.svg');
-    background-attachment: fixed;
-    background-position: bottom;
-    background-size: cover;
-  }
-}
-
-.growi.login-page {
-  #page-wrapper {
-    background-image: url('/images/themes/spring/spring.svg');
-    background-attachment: fixed;
-    background-position: bottom;
-    background-size: cover;
-  }
-}
-
 $themecolor: #ffb8c6;
 $themelight: #fff0f5;
 $subthemecolor: #67a856;
@@ -109,15 +89,35 @@ html[dark] {
   // admin theme box
   $color-theme-color-box: darken($primary, 20%);
 
-  // alert
-  $color-alert: $color-reversal;
-
-  // badge
-  $color-badge: $color-reversal;
-
   @import 'apply-colors';
   @import 'apply-colors-light';
 
+  .growi:not(.login-page) {
+    // add background-image
+    #page-wrapper,
+    .page-editor-preview-container {
+      background-image: url('/images/themes/spring/spring02.svg');
+      background-attachment: fixed;
+      background-position: bottom;
+      background-size: cover;
+    }
+  }
+
+  .growi.login-page {
+    #page-wrapper {
+      background-color: $themelight;
+      background-image: url('/images/themes/spring/spring.svg');
+      background-attachment: fixed;
+      background-position: bottom;
+      background-size: cover;
+    }
+  }
+
+  a#login.link-switch,
+  a#register.link-switch {
+    color: $color-global;
+  }
+
   .table {
     background-color: $bgcolor-global;
   }
@@ -139,64 +139,3 @@ html[dark] {
     }
   }
 }
-
-//== Dark Mode
-//
-// html[dark] {
-//   $primary: #d65a31;
-
-//   $basecolor: #222831;
-
-//   // Background colors
-//   $bgcolor-global: $basecolor;
-//   $bgcolor-navbar: #151515;
-//   $bgcolor-inline-code: darken($basecolor, 5%);
-//   $bgcolor-card: darken($basecolor, 5%);
-
-//   // Font colors
-//   $color-global: #eeeeee;
-//   $color-reversal: #333333;
-//   // $color-header: desaturate($primary, 20%);
-//   $color-link: $primary;
-//   $color-link-hover: lighten($color-link, 10%);
-//   $color-link-wiki: lighten($basecolor, 50%);
-//   $color-link-wiki-hover: darken($color-link-wiki, 5%);
-//   $color-link-nabvar: $color-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;
-
-//   // Logo colors
-//   $bgcolor-logo: $bgcolor-navbar;
-//   $fillcolor-logo-mark: #444;
-
-//   // Icon colors
-//   $color-editor-icons: darken($accentcolor, 15%);
-
-//   // Border colors
-//   $border-color-theme: black; // former: `$navbar-border: #ccc;`
-
-//   // Dropdown colors
-//   $bgcolor-dropdown-link-active: $primary;
-//   $color-dropdown-link-active: $color-global;
-//   $color-dropdown-link-hover: $color-reversal;
-
-//   // alert
-//   $color-alert: $color-global;
-
-//   // badge
-//   $color-badge: $color-global;
-
-//   // Sidebar
-//   $bgcolor-sidebar: $bgcolor-navbar;
-//   $color-sidebar-context: $color-global;
-//   $bgcolor-sidebar-context: lighten($bgcolor-navbar, 5%);
-
-//   @import 'apply-colors';
-//   @import 'apply-colors-dark';
-// }

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

@@ -60,10 +60,17 @@ html[dark] {
   // List Group colors
   $color-list-hover: #eee;
 
+  // Table colors
+  // $color-table: #; // optional
+  // $bgcolor-table: #; // optional
+  $border-color-table: #aaa; // optional
+  // $color-table-hover: #; // optional
+  // $bgcolor-table-hover: #; // optional
+
   // Navbar
   $bgcolor-navbar: #2a2929;
   $bgcolor-search-top-dropdown: $themecolor;
-  $border-image-navbar: linear-gradient(to right, #5c78ef 0%, #16bc42 50%, #5c78ef 100%);
+  $border-image-navbar: linear-gradient(to right, $themecolor 0%, darken($themecolor, 20%) 100%);
 
   // Logo colors
   $bgcolor-logo: darken($themecolor, 10%);
@@ -71,12 +78,12 @@ html[dark] {
   $color-editor-icons: $color-global;
 
   // Sidebar
-  $bgcolor-sidebar: $bgcolor-navbar;
+  $bgcolor-sidebar: transparent;
   // Sidebar contents
   $color-sidebar-context: #9d7406;
-  $bgcolor-sidebar-context: #f0efe7;
+  $bgcolor-sidebar-context: transparent;
   // Sidebar list group
-  $bgcolor-sidebar-list-group: #f7f5f1;
+  $bgcolor-sidebar-list-group: rgba(#f7f5f1, 0.5);
   // Sidebar resize button
   $color-resize-button: white;
   $bgcolor-resize-button: $themecolor;
@@ -96,103 +103,47 @@ html[dark] {
   // alert
   $color-alert: $color-reversal;
 
-  // badge
-  $color-badge: $color-reversal;
-
   // portal
   $info: lighten($themecolor, 10%);
 
   @import 'apply-colors';
   @import 'apply-colors-light';
 
-  // hljs
-  .hljs {
-    color: #433005;
-    background-color: $bgcolor-inline-code;
+  /*
+   * Modal
+   */
+  .modal-dialog .modal-header.bg-primary {
+    background-image: url('/images/themes/wood/wood-navbar.jpg');
   }
 
-  // List
-  .list-group .list-group-item {
-    background: transparent;
-  }
+  // Sidebar
+  .grw-sidebar {
+    div[data-testid='GlobalNavigation'] {
+      background-image: url('/images/themes/wood/wood-navbar.jpg');
 
-  // Search Top
-  .search-top {
-    .btn-secondary.dropdown-toggle {
-      color: $color-search;
+      button,
+      .btn {
+        border: none;
+      }
+    }
+    div[data-testid='ContextualNavigation'] {
+      > div {
+        background-color: rgba(white, 0.6);
+        background-image: url('/images/themes/wood/wood-navbar.jpg');
+        background-blend-mode: lighten;
+      }
     }
   }
 
-  // Sidebar
-  .grw-sidebar div[data-testid='GlobalNavigation'] {
-    * {
-      background-image: url('/images/themes/wood/wood-navbar.jpg');
-    }
+  // login and register
 
-    button,
-    .btn {
-      border: none;
-    }
+  .login-header,
+  .login-dialog {
+    background-color: rgba(black, 0.1);
   }
-}
 
-//== Dark Mode
-//
-// html[dark] {
-//   $primary: #d65a31;
-
-//   $basecolor: #222831;
-
-//   // Background colors
-//   $bgcolor-global: $basecolor;
-//   $bgcolor-navbar: #151515;
-//   $bgcolor-inline-code: darken($basecolor, 5%);
-//   $bgcolor-card: darken($basecolor, 5%);
-
-//   // Font colors
-//   $color-global: #eeeeee;
-//   $color-reversal: #333333;
-//   // $color-header: desaturate($primary, 20%);
-//   $color-link: $primary;
-//   $color-link-hover: lighten($color-link, 10%);
-//   $color-link-wiki: lighten($basecolor, 50%);
-//   $color-link-wiki-hover: darken($color-link-wiki, 5%);
-//   $color-link-nabvar: $color-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;
-
-//   // Logo colors
-//   $bgcolor-logo: $bgcolor-navbar;
-//   $fillcolor-logo-mark: #444;
-
-//   // Icon colors
-//   $color-editor-icons: darken($accentcolor, 15%);
-
-//   // Border colors
-//   $border-color-theme: black; // former: `$navbar-border: #ccc;`
-
-//   // Dropdown colors
-//   $bgcolor-dropdown-link-active: $primary;
-//   $color-dropdown-link-active: $color-global;
-//   $color-dropdown-link-hover: $color-reversal;
-
-//   // alert
-//   $color-alert: $color-global;
-
-//   // badge
-//   $color-badge: $color-global;
-
-//   // Sidebar
-//   $bgcolor-sidebar: $bgcolor-navbar;
-//   $color-sidebar-context: $color-global;
-//   $bgcolor-sidebar-context: lighten($bgcolor-navbar, 5%);
-
-//   @import 'apply-colors';
-//   @import 'apply-colors-dark';
-// }
+  a#login.link-switch,
+  a#register.link-switch {
+    color: rgba(black, 0.5);
+  }
+}

src/lib/components/PagePathHierarchicalLink.jsx

@@ -52,7 +52,7 @@ const PagePathHierarchicalLink = (props) => {
   return (
     <RootElm>
       { isParentExists && (
-        <PagePathHierarchicalLink linkedPagePath={linkedPagePath.parent} basePath={basePath} isInnerElem />
+        <PagePathHierarchicalLink linkedPagePath={linkedPagePath.parent} basePath={basePath} isInTrash={isInTrash || linkedPagePath.isInTrash} isInnerElem />
       ) }
       { isSeparatorRequired && (
         <span className="separator">/</span>
@@ -66,11 +66,10 @@ const PagePathHierarchicalLink = (props) => {
 PagePathHierarchicalLink.propTypes = {
   linkedPagePath: PropTypes.instanceOf(LinkedPagePath).isRequired,
   basePath: PropTypes.string,
+  isInTrash: PropTypes.bool,
 
   // !!INTERNAL USE ONLY!!
   isInnerElem: PropTypes.bool,
-
-  isInTrash: PropTypes.bool, // TODO: omit
 };
 
 export default PagePathHierarchicalLink;

src/server/routes/apiv3/index.js

@@ -37,6 +37,7 @@ module.exports = (crowi) => {
 
   router.use('/search', require('./search')(crowi));
 
+  router.use('/page', require('./page')(crowi));
   router.use('/pages', require('./pages')(crowi));
 
   router.use('/bookmarks', require('./bookmarks')(crowi));

src/server/views/layout-kibela/base/layout.html

@@ -13,7 +13,7 @@
 
     <div id="main" class="main col-12 kibela-block round-corner {% if page %}{{ css.grant(page) }}{% endif %}{% block main_css_class %}{% endblock %}">
       <div class="row grw-subnav d-edit-none">
-        <div class="col px-0 mx-0 bg-white kibela-border-top round-corner">
+        <div class="col-12 col-xl-9 col-lg-8 px-0 mx-0 bg-white kibela-border-top round-corner">
           {% block content_header %} {% endblock %}
         </div>
         <div class="col-xl-3 col-lg-4"></div>

src/server/views/layout-kibela/forbidden.html

@@ -13,7 +13,7 @@
 
 {% block content_main %}
   <div class="row">
-    <div class="col bg-white round-corner">
+    <div class="col-12 col-xl-9 col-lg-8 bg-white round-corner">
       {% include '../widget/forbidden_content.html' %}
     </div>
   </div>

src/server/views/layout-kibela/not_creatable.html

@@ -13,7 +13,7 @@
 
 {% block content_main %}
   <div class="row">
-    <div class="col bg-white round-corner">
+    <div class="col-12 col-xl-9 col-lg-8 bg-white round-corner">
       {% include '../widget/not_creatable_content.html' %}
     </div>
   </div>

src/server/views/layout-kibela/not_found.html

@@ -13,7 +13,7 @@
 
 {% block content_main %}
   <div class="row">
-    <div class="col bg-white round-corner">
+    <div class="col-12 col-xl-9 col-lg-8 bg-white round-corner">
       {% include '../widget/not_found_content.html' %}
     </div>
     <div class="col-xl-3 col-lg-4 d-none d-lg-block revision-toc-container"></div>

src/server/views/layout-kibela/page.html

@@ -13,7 +13,7 @@
 {% block content_main %}
 <div class="row">
 
-  <div class="col bg-white round-corner">
+  <div class="col-12 col-xl-9 col-lg-8 bg-white round-corner">
 
     {% include '../widget/page_content.html' %}
     {# force remove #revision-toc from #content_main of parent #}

src/server/views/layout-kibela/page_list.html

@@ -12,7 +12,7 @@
 <div class="row page-content">
 
 
-  <div class="col bg-white round-corner">
+  <div class="col-12 col-xl-9 col-lg-8 bg-white round-corner">
 
     {% include '../widget/page_content.html' %}