Merge pull request #3044 from weseek/imprv/gw3918-border-redesign-for-master-marge

Imprv/gw3918 border redesign for master marge

src/client/styles/scss/_admin.scss

@@ -40,7 +40,7 @@
   }
 
   .admin-setting-header {
-    border-bottom: 1px solid #dee2e6;
+    border-bottom: 1px solid transparent;
   }
 
   .admin-security {
@@ -142,7 +142,7 @@
     // style
     .theme-option-container a {
       background-color: $gray-50;
-      border: 1px solid $gray-300;
+      border: 1px solid $border-color;
     }
     .theme-option-name {
       opacity: 0.3;

src/client/styles/scss/_layout.scss

@@ -16,7 +16,7 @@ body {
 
 .grw-modal-head {
   font-size: 1em;
-  border-bottom: 1px solid $gray-500;
+  border-bottom: 1px solid transparent;
 }
 
 // padding settings for GrowiNavbarBottom

src/client/styles/scss/_page-accessories-control.scss

@@ -14,6 +14,7 @@
 
   .grw-border-vr {
     height: 25px;
+    border-left: solid 1px transparent;
   }
 
   .seen-user-count {

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

@@ -14,9 +14,10 @@ $bgcolor-table-hover: lighten($bgcolor-table, 7.5%) !default;
 $bgcolor-sidebar-list-group: $bgcolor-list !default;
 $color-tags: #949494 !default;
 $bgcolor-tags: $dark !default;
+$border-color-toc: $gray-500 !default;
 
 // override bootstrap variables
-$border-color: $gray-700;
+$border-color: $gray-500;
 $table-dark-color: $color-table;
 $table-dark-bg: $bgcolor-table;
 $table-dark-border-color: $border-color-table;
@@ -254,18 +255,6 @@ ul.pagination {
   @include override-list-group-item($color-list, $bgcolor-sidebar-list-group, $color-list-hover, $bgcolor-list-hover, $color-list-active, $bgcolor-list-active);
 }
 
-/*
- * GROWI on-edit
- */
-body.on-edit {
-  .grw-editor-navbar-bottom {
-    background-color: $bgcolor-global;
-    #slack-mark-black {
-      display: none;
-    }
-  }
-}
-
 /*
  * Popover
  */
@@ -282,6 +271,9 @@ body.on-edit {
   }
 }
 
+/*
+ * Slack
+ */
 .grw-slack-notification {
   background-color: transparent;
   $color-slack: #4b144c;
@@ -306,22 +298,21 @@ body.on-edit {
       background-image: url(/images/icons/slack/slack-logo-dark-on.svg);
     }
   }
-}
-
-.grw-slack-logo svg {
-  fill: #dd80de;
-}
+  .grw-slack-logo svg {
+    fill: #dd80de;
+  }
 
-.grw-btn-slack {
-  background-color: black;
-  &:focus,
-  &:hover {
+  .grw-btn-slack {
     background-color: black;
+    &:focus,
+    &:hover {
+      background-color: black;
+    }
   }
-}
 
-.grw-btn-slack-triangle {
-  color: $secondary;
+  .grw-btn-slack-triangle {
+    color: $secondary;
+  }
 }
 
 /*
@@ -362,3 +353,27 @@ body.on-edit {
     background-color: $bgcolor-tags;
   }
 }
+
+/*
+* grw-side-contents
+*/
+.grw-side-contents-sticky-container {
+  .grw-border-vr {
+    border-color: $border-color-toc;
+  }
+
+  .revision-toc {
+    border-color: $border-color-toc;
+  }
+}
+
+/*
+ * GROWI user page
+ */
+.grw-page-list-m {
+  .grw-page-list-title-m {
+    svg {
+      fill: $color-global;
+    }
+  }
+}

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

@@ -14,9 +14,9 @@ $bgcolor-table-hover: rgba(black, 0.075) !default;
 $bgcolor-sidebar-list-group: $bgcolor-list !default;
 $color-tags: $gray-500 !default;
 $bgcolor-tags: $gray-200 !default;
+$border-color-toc: $gray-300 !default;
 
 // override bootstrap variables
-$border-color: $gray-200;
 $table-color: $color-table;
 $table-bg: $bgcolor-table;
 $table-border-color: $border-color-table;
@@ -213,6 +213,9 @@ $table-hover-bg: $bgcolor-table-hover;
   }
 }
 
+/*
+ * Slack
+ */
 .grw-slack-notification {
   background-color: white;
   $color-slack: #4b144c;
@@ -235,23 +238,22 @@ $table-hover-bg: $bgcolor-table-hover;
       background-image: url(/images/icons/slack/slack-logo-on.svg);
     }
   }
-}
-
-.grw-slack-logo svg {
-  fill: #af30b0;
-}
-
-.grw-btn-slack {
-  background-color: white;
+  .grw-slack-logo svg {
+    fill: #af30b0;
+  }
 
-  &:hover,
-  &:focus {
+  .grw-btn-slack {
     background-color: white;
+
+    &:hover,
+    &:focus {
+      background-color: white;
+    }
   }
-}
 
-.grw-btn-slack-triangle {
-  color: $secondary;
+  .grw-btn-slack-triangle {
+    color: $secondary;
+  }
 }
 
 /*
@@ -292,3 +294,33 @@ $table-hover-bg: $bgcolor-table-hover;
     background-color: $bgcolor-tags;
   }
 }
+
+/*
+* grw-side-contents
+*/
+.grw-side-contents-sticky-container {
+  .grw-border-vr {
+    border-color: $border-color-toc;
+  }
+  .revision-toc {
+    border-color: $border-color-toc;
+  }
+}
+
+/*
+ * admin settings
+ */
+.admin-setting-header {
+  border-color: $border-color;
+}
+
+/*
+ * GROWI user page
+ */
+.grw-page-list-m {
+  .grw-page-list-title-m {
+    svg {
+      fill: $color-global;
+    }
+  }
+}

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

@@ -14,7 +14,6 @@ $bordercolor-nav-tabs: $gray-300 !default;
 $bordercolor-nav-tabs-hover: $gray-200 $gray-200 $bordercolor-nav-tabs !default;
 $color-nav-tabs-link-active: $gray-600 !default;
 $bordercolor-nav-tabs-active: $bordercolor-nav-tabs $bordercolor-nav-tabs $bgcolor-global !default;
-$bordercolor-toc: $bordercolor-nav-tabs !default;
 $color-seen-user: #549c79 !default;
 
 // override bootstrap variables
@@ -324,10 +323,6 @@ ul.pagination {
   }
 }
 
-.revision-toc {
-  border-color: $bordercolor-toc;
-}
-
 .grw-custom-nav {
   .nav-item {
     .nav-link {

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

@@ -190,7 +190,7 @@ html[dark] {
   $color-editor-icons: $color-global;
 
   // Border colors
-  $border-color-theme: $gray-700;
+  $border-color-theme: $gray-400;
   $bordercolor-inline-code: $secondary; // optional
 
   // Dropdown colors