Browse Source

WIP: adjust dark theme

Yuki Takei 8 years ago
parent
commit
df62485905

+ 19 - 9
resource/styles/agile-admin/inverse/colors/_apply-colors-dark.scss

@@ -4,10 +4,6 @@
   }
 }
 
-.bg-title{
-  background: darken($bodycolor, 5%);
-}
-
 /*
   * Code
   */
@@ -28,8 +24,7 @@ input.form-control, textarea.form-control {
  * Tabs
  */
 .nav.nav-tabs {
-  $border-color: #999;
-  border-color: $border-color;
+  border-bottom-color: $border;
 
   > li > a {
     color:$light;
@@ -37,12 +32,27 @@ input.form-control, textarea.form-control {
       color: $light;
     }
   }
+  > li.active > a {
+    border-top-color: $border;
+    border-left-color: $border;
+    border-right-color: $border;
+  }
   > li:not(.active) > a {
     &:hover, &:focus {
-      border-top-color: darken($border-color, 25%);
-      border-left-color: darken($border-color, 25%);
-      border-right-color: darken($border-color, 25%);
+      border-top-color: darken($border, 20%);
+      border-left-color: darken($border, 20%);
+      border-right-color: darken($border, 20%);
       border-bottom: transparent;
     }
   }
 }
+
+
+/*
+ * header
+ */
+.main-container header.affix {
+  .logo-mark {
+    fill: white;
+  }
+}

+ 4 - 8
resource/styles/agile-admin/inverse/colors/_apply-colors-light.scss

@@ -4,20 +4,16 @@
   }
 }
 
-.bg-title{
-  background: #fafafa;
-}
-
 /*
-* Form
-*/
+ * Form
+ */
 .form-control {
   background-color: $bodycolor;
 }
 
 /*
-* Tabs
-*/
+ * Tabs
+ */
 .nav-tabs > li > a {
   color: $dark;
 }

+ 26 - 2
resource/styles/agile-admin/inverse/colors/_apply-colors.scss

@@ -57,7 +57,7 @@ body{
     color:$themecolor;
 }
 .bg-title{
-
+  background: darken($bodycolor, 2%);
 }
 
 /*Sidebar*/
@@ -179,7 +179,31 @@ legend {
     }
   }
   > li.active > a {
-    background: transparent;
+    background: $bodycolor;
     border-bottom: 1px solid $bodycolor;
   }
 }
+
+
+/*
+ * header
+ */
+.main-container header.affix {
+  background: rgba(darken($bodycolor, 2%), .9);
+}
+
+/*
+ * on-edit
+ */
+body.on-edit {
+  .main {
+    background-color: darken($bodycolor, 2%);
+  }
+
+  .page-editor-editor-container {
+    border-right: 1px solid $border;
+  }
+  .page-editor-preview-container {
+    background-color: $bodycolor;
+  }
+}

+ 2 - 0
resource/styles/agile-admin/inverse/colors/default-dark.scss

@@ -15,5 +15,7 @@ $dark-themecolor:#4F5467;
 
 $primary: $topbar;
 
+$border: lighten($basecolor, 40%);
+
 @import 'apply-colors';
 @import 'apply-colors-dark';

+ 0 - 9
resource/styles/scss/_on-edit.scss

@@ -80,7 +80,6 @@ body.on-edit {
         margin: 0;
         padding: 8px;
         min-height: 50px;
-        background-color: #fafafa;
         border-top: solid 1px #ccc;
       }
 
@@ -112,16 +111,8 @@ body.on-edit {
   /*****************
    * Editor styles
    *****************/
-  .main {
-    background-color: #fafafa;
-    #page-editor {
-      background-color: #fff;
-    }
-  }
   .page-editor-editor-container {
     padding-right: 0;
-    border-right: 1px solid #ccc;
-
     // override CodeMirror styles
     .CodeMirror {
       pre {

+ 0 - 1
resource/styles/scss/_page.scss

@@ -80,7 +80,6 @@
       left: 0;
       padding: 2px 20px;
       z-index: 15; // over the .sidebar
-      background: rgba(white, .9);
       box-shadow: 0 0px 2px #999;
 
       h1 {