adjust active tab color and .nav-editor color

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

@@ -199,7 +199,7 @@ export default class Editor extends AbstractEditor {
 
   renderNavbar() {
     return (
-      <div className="m-0 navbar navbar-default" style={{ minHeight: 'unset' }}>
+      <div className="m-0 navbar navbar-default navbar-editor" style={{ minHeight: 'unset' }}>
         <ul className="pr-4 nav nav-navbar navbar-right">
           <li>
             <Button bsSize="small" onClick={ () => this.refs.handsontableModal.show() }><i className="icon-grid"></i></Button>

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

@@ -211,31 +211,20 @@ legend {
 /*
  * Tabs
  */
+$active-nav-tabs-bgcolor: $bodycolor !default;
 .nav.nav-tabs {
-  > li > a {
-    &, &:hover, &:focus {
-      background: transparent;
-    }
-  }
-  > li.active > a {
-    background: $bodycolor;
-    border-bottom: 1px solid $bodycolor;
-  }
-}
 
-/*
- * Tabs
- */
- .nav.nav-tabs {
   border-bottom-color: $navbar-border;
 
   > li > a {
     color:$linktext;
     &:hover, &:focus {
       color: $linktext-hover;
+      background: transparent;
     }
   }
   > li.active > a {
+    background: $active-nav-tabs-bgcolor;
     border-top-color: $navbar-border;
     border-left-color: $navbar-border;
     border-right-color: $navbar-border;
@@ -309,6 +298,9 @@ body.on-edit {
 
     .page-editor-editor-container {
       border-right-color: $navbar-border;
+      .navbar-editor {
+        background-color: $active-nav-tabs-bgcolor;   // same color with active tab
+      }
     }
     .page-editor-preview-container {
       background-color: $bodycolor;

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

@@ -22,6 +22,7 @@ $dark: darken($bodytext, 5%);
 $border: $themecolor;
 $navbar-border: lighten($basecolor, 25%);
 $active-navbar-border: darken($navbar-border, 3%);
+$active-nav-tabs-bgcolor: #231313;
 $btn-default-bgcolor: darken($basecolor, 10%);
 $inline-code-color: #a94f04;
 $inline-code-bg: #0a121b;
@@ -63,7 +64,8 @@ $inline-code-bg: #0a121b;
   background-image: url("/images/themes/halloween/halloween-navbar.jpg");
 }
 
-.main-container > #wrapper > #page-wrapper {
+.main-container > #wrapper > #page-wrapper,
+.page-editor-preview-container {
   background-image: url("/images/themes/halloween/halloween.jpg");
   background-attachment: fixed;
 }
@@ -72,10 +74,14 @@ $inline-code-bg: #0a121b;
   background-color: rgba(0, 0, 0, 0.3);
 }
 
-/* Tabs */
-.nav.nav-tabs {
-  >li.active>a {
-    background: transparent;
-    border-bottom: 1px solid #1f1b1b;
+/*
+ * 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

@@ -8,7 +8,7 @@ $linkcolor: #3c6d72;
 $themecolor: #97cbc3;
 $topbar: #0c2a44;
 $sidebar: $themelight;
-$bodycolor: lighten($themelight, 5%);
+$bodycolor: lighten($themelight, 10%);
 $headingtext:#3c6d72;
 $bodytext: #3c6d72;
 $linktext: $linkcolor;
@@ -22,6 +22,7 @@ $dark: darken($bodytext, 5%);
 $border: #76b1a8;
 $navbar-border: #76b1a8;
 $active-navbar-border: darken($navbar-border, 13%);
+$active-nav-tabs-bgcolor: #dbf0ed;
 $btn-default-bgcolor: darken($themecolor, 10%);
 $inline-code-color: #8f5313;
 $inline-code-bg: darken($themelight, 3%);
@@ -74,18 +75,24 @@ $inline-code-bg: darken($themelight, 3%);
   background: lighten($themelight, 5%);
 }
 
-.main-container > #wrapper > #page-wrapper {
+.main-container > #wrapper > #page-wrapper,
+.page-editor-preview-container {
   background-image: url("/images/themes/island/island.png");
   background-attachment: fixed;
 }
 
-/* Tabs */
-.nav.nav-tabs {
-  >li.active>a {
-    background: transparent;
-    border-bottom: 1px solid #d0ece7;
+/*
+ * 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 ,

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

@@ -18,6 +18,7 @@ $wikilinktext: lighten($themecolor, 5%);
 $wikilinktext-hover: lighten($wikilinktext, 15%);
 $inline-code-color: darken($themecolor, 20%);
 $inline-code-bg: lighten($subthemecolor, 70%);
+$active-nav-tabs-bgcolor: #fffffc;
 
 @import 'apply-colors';
 @import 'apply-colors-light';
@@ -39,7 +40,8 @@ $inline-code-bg: lighten($subthemecolor, 70%);
   background: $themelight;
 }
 
-.main-container > #wrapper > #page-wrapper {
+.main-container > #wrapper > #page-wrapper,
+.page-editor-preview-container {
   background-image: url("/images/themes/wood/wood.jpg");
   background-attachment: fixed;
 }
@@ -48,18 +50,22 @@ $inline-code-bg: lighten($subthemecolor, 70%);
   background-color: rgba(226, 221, 192, 0.205);
 }
 
-/* Tabs */
-.nav.nav-tabs {
-  >li.active>a {
-    background: transparent;
-    border-bottom: 1px solid $bodycolor;
-  }
-}
-
 #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 {

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

@@ -140,11 +140,12 @@ body.on-edit {
     z-index: 1;
     left: $left-margin;
     width: calc(100% - #{$left-margin} - #{$right-margin});
+    pointer-events: none;                               // disable pointer-events because it becomes an obstacle
 
-    // for crowi layout
-    > .col-md-9, .col-xs-12 {
-      padding: 0;
-      width: 100%;
+    > .header-container {
+      pointer-events: initial;                          // enable pointer-events
+      padding: 0;   // for crowi layout
+      width: 100%;  // for crowi layout
     }
 
     background: none;

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

@@ -25,7 +25,7 @@
   </aside>
 
   <div class="row hidden-print bg-title">
-    <div class="col-md-9">
+    <div class="col-md-9 header-container">
       {% block content_header %}
       {% endblock %}
     </div>

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

@@ -4,7 +4,7 @@
 <div class="container-fluid">
 
   <div class="row bg-title hidden-print">
-    <div class="col-xs-12">
+    <div class="col-xs-12 header-container">
       {% block content_header %}
       {% endblock %}
     </div>