Adjust colors for new MacOS UI

Paxa · Aug 29, 2021 · 1f31434 · 1f31434
1 parent de58d71
commit 1f31434
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 106 deletions.
diff --git a/assets/styles/_unfocused.scss b/assets/styles/_unfocused.scss
@@ -1,13 +1,17 @@
 $unfocus-list-item-bg: #dcdcdc;
+$unfocus-sidebar-bg: #f3f3f3;
 
 body.unfocused {
   #tabs {
-    background: #ececec;
+    background: #dcdbdb;
+    box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.1);
     .tab {
-      background: #ececec;
+      // background: rgba(#acabab, 0.3);
       border-color: #dbdbdb;
+      color: #a09f9f;
       &.active {
-        background: #f1f1f1;
+        background: #e9e8e8;
+        color: #a9a8a8;
       }
     }
     &:after {
@@ -31,7 +35,7 @@ body.unfocused {
   }
 
   .main-screen > .sidebar, .login-screen .sidebar {
-    background: #f6f6f6;
+    background: $unfocus-sidebar-bg;
     border-right-color: #dfdfdf;
   }
 

diff --git a/assets/styles/elements/_sidebar.scss b/assets/styles/elements/_sidebar.scss
@@ -3,7 +3,7 @@
   border-right: none;
   width: $sidebar-width;
   padding: {
-    top: 48px;
+    top: 50px;
     right: 0px;
     left: 0px;
     bottom: $sidebar-footer-height + 1px;
@@ -38,18 +38,22 @@
     top: 0;
     left: 0;
     box-sizing: border-box;
-    padding: 3px 5px 6px;
+    padding: 3px 12px 6px;
     width: 100%;
     border-bottom: 1px solid #d1d1d1;
 
     select {
       width: 100%;
+      border-color: #ccc;
+      border-radius: 4px;
+      height: 23px;
     }
 
     label {
       display: block;
       @include unselectable;
-      margin-bottom: -1px;
+      margin-bottom: 1px;
+      font-size: 0.9em;
     }
 
     span.connection-lost {

diff --git a/assets/styles/elements/_tabs.scss b/assets/styles/elements/_tabs.scss
@@ -1,10 +1,13 @@
-$tab-border-color: #9b9b9b;
+// $tab-border-color: #9b9b9b;
+$tab-border-color: #acacac;
 
 #tabs {
   @include children-inline;
-  @include gradient(#c4c2c4, #bfbdbf);
-  @include gradient(#c3c1c3, #bebdbe);
+  // @include gradient(#c4c2c4, #bfbdbf);
+  // @include gradient(#c3c1c3, #bebdbe);
+  background-color: #e7e6e5;
   overflow: hidden;
+  box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.15);
 
   position: relative;
 
@@ -20,13 +23,15 @@ $tab-border-color: #9b9b9b;
   }
 
   .tab {
-    @include gradient(#c3c1c3, #bebdbe);
-    color: #4d4d4d;
+    //@include gradient(#c3c1c3, #bebdbe);
+    background-color: #e7e6e5;
+    background-color: transparent;
+    color: #5c5b5b;
     margin: {
       right: 0px;
       bottom: 0px;
     };
-    line-height: 22px;
+    line-height: 26px;
     font: {
       size: 12px;
     };
@@ -35,11 +40,12 @@ $tab-border-color: #9b9b9b;
     text-align: center;
     border-bottom: none;
     position: relative;
-    border-right: 1px solid #aaa;
+    border-right: 1px solid #d5d4d3;
+    // box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.15);
 
     .close {
       position: absolute;
-      top: 3px;
+      top: 5px;
       left: 5px;
       text-decoration: none;
       vertical-align: top;
@@ -68,7 +74,8 @@ $tab-border-color: #9b9b9b;
       }
 
       &:hover {
-        @include gradient(#a7a5a7, #a3a2a3);
+        // @include gradient(#a7a5a7, #a3a2a3);
+        background-color: #c2c1c1
       }
     }
 
@@ -77,23 +84,28 @@ $tab-border-color: #9b9b9b;
     }
 
     &:hover {
-      @include gradient(#b8b7b8, #b4b2b4);
+      // @include gradient(#b8b7b8, #b4b2b4);
+      background-color: #dbdada;
       .close {
         display: inline-block;
       }
     }
 
     &.active {
-      @include gradient(#dcdadc, #d6d4d6);
+      // @include gradient(#dcdadc, #d6d4d6);
+      color: #4A4A4A;
+      background-color: #F4F3F2;
       position: relative;
 
-      border-color: #999;
-      box-shadow: inset 0px 0px 3px rgba(255, 255, 255, 0.5), 0px 2px 3px rgba(0, 0, 0, 0.2);
+      border-color: #d6d5d5;
+      // box-shadow: inset 0px 0px 3px rgba(255, 255, 255, 0.5), 0px 2px 3px rgba(0, 0, 0, 0.2);
+      box-shadow: none;
 
       padding-bottom: 0;
       &:hover .close {
         &:hover {
-          @include gradient(#cac8ca, #c5c4c5);
+          // @include gradient(#cac8ca, #c5c4c5);
+          background-color: #dcdbdb;
         }
         &:before, &:after {
           background: #797879;

diff --git a/assets/styles/extras/_mac-native-elements.scss b/assets/styles/extras/_mac-native-elements.scss
@@ -1,7 +1,7 @@
-$mac-window-background: #ececec;
+$mac-window-background: #f6f6f6;
 
-$mac-item-selected-bg: #2b66da;
-$mac-item-selected-inactive-bg: #dcdcdc;
+$mac-item-selected-bg: #2065d9;
+$mac-item-selected-inactive-bg: #dbdcdd;
 $mac-table-even-row-dg: #f5f5f4;
 
 $mac-sidebar-border-color: #ddddd9;
@@ -94,15 +94,15 @@ $mac-button-shadow: 0 1px 1px rgba(0,0,0,.06);
 }
 
 @mixin native-sidebar() {
-  background: #f0f1ed; // #eff1ed; // #f5f5f4;
+  background: #ededee; // #eff1ed; // #f5f5f4;
   border-right: 1px solid #dadbd7;
 }
 
 @mixin native-panel-element() {
-  background: #e2e2e2;
+  background: #eaeaea;
   border-radius: 5px;
-  border: 1px solid #dfdfdf;
-  border-top: 1px solid #d3d3d3;
+  border: 1px solid #e3e3e3;
+  border-top: 1px solid #dfdfdf;
 }
 
 @mixin native-sidebar-title() {

diff --git a/assets/styles/screens/_main.scss b/assets/styles/screens/_main.scss
@@ -22,15 +22,15 @@
     .window-tabs {
       display: flex;
       background: rgba(#000, 0.1);
-      border-bottom: 1px solid #a3a3a3;
+      border-bottom: 1px solid #c3c3c3;
 
       @include children-inline;
 
       > * {
         width: 150px;
         max-width: 100%;
         text-align: center;
-        border-right: 1px solid #a3a3a3;
+        border-right: 1px solid #c3c3c3;
 
         @include system-text;