Merge pull request #2966 from weseek/imprv/gw3983-border-dark-theme

Imprv/gw3983 border dark theme

src/client/styles/scss/_layout.scss

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

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

@@ -16,7 +16,7 @@ $color-tags: #949494 !default;
 $bgcolor-tags: $dark !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;
@@ -37,6 +37,7 @@ select.form-control,
 textarea.form-control {
   color: lighten($color-global, 30%);
   background-color: darken($bgcolor-global, 5%);
+  border-color: $border-color;
   &:focus {
     background-color: $bgcolor-global;
   }
@@ -58,7 +59,7 @@ textarea.form-control {
 }
 
 .input-group input {
-  border-color: $secondary;
+  border-color: $border-color;
 }
 
 /*
@@ -253,18 +254,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
  */
@@ -281,6 +270,9 @@ body.on-edit {
   }
 }
 
+/*
+ * Slack
+ */
 .grw-slack-notification {
   background-color: transparent;
   $color-slack: #4b144c;
@@ -305,22 +297,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;
+  }
 }
 
 /*
@@ -357,3 +348,29 @@ body.on-edit {
     background-color: $bgcolor-tags;
   }
 }
+
+/*
+ * admin settings
+ */
+.admin-setting-header {
+  border-color: $border-color;
+}
+
+.revision-toc {
+  .top-of-table-contents {
+    border-color: $border-color;
+
+    .grw-seen-user-list {
+      &:before {
+        border-color: $border-color;
+      }
+    }
+  }
+}
+
+/*
+ * modal
+ */
+.grw-modal-head {
+  border-color: $border-color;
+}

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

@@ -206,6 +206,9 @@ $table-hover-bg: $bgcolor-table-hover;
   }
 }
 
+/*
+ * Slack
+ */
 .grw-slack-notification {
   background-color: white;
   $color-slack: #4b144c;
@@ -228,23 +231,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;
+  }
 }
 
 /*
@@ -285,11 +287,12 @@ $table-hover-bg: $bgcolor-table-hover;
 .revision-toc {
   .top-of-table-contents {
     border-color: $border-color;
-
-    .grw-seen-user-list {
-      &:before {
-        border-color: $border-color;
-      }
-    }
   }
 }
+
+/*
+ * modal
+ */
+.grw-modal-head {
+  border-color: $border-color;
+}

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
@@ -268,13 +267,11 @@ pre:not(.hljs):not(.CodeMirror-line) {
 }
 
 .top-of-table-contents {
-  border-color: $bordercolor-toc;
-
   .grw-btn-top-of-table {
     fill: $color-link;
   }
   .grw-seen-user-list {
-    @include border-vertical('before', $bordercolor-toc, 70%);
+    @include border-vertical('before', $border-color, 70%);
 
     .btn {
       color: $color-seen-user;

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