GNOME.org
 

[gnome-themes-standard] dark: make selected borders look more contrasty

commit 15df5576e6d86ca00a29e691b1696be17d8456e0
Author: Jakub Steiner <jimmac gmail com>
Date:   Wed May 28 16:09:07 2014 +0200

    dark: make selected borders look more contrasty

 themes/Adwaita/gtk-3.0/_colors.scss           |    2 +-
 themes/Adwaita/gtk-3.0/_common.scss           |    3 +-
 themes/Adwaita/gtk-3.0/_drawing.scss          |    7 +-
 themes/Adwaita/gtk-3.0/gtk-contained-dark.css |   98 ++++++++++++------------
 themes/Adwaita/gtk-3.0/gtk-contained.css      |   20 +++---
 5 files changed, 64 insertions(+), 66 deletions(-)
---
diff --git a/themes/Adwaita/gtk-3.0/_colors.scss b/themes/Adwaita/gtk-3.0/_colors.scss
index bb549be..a12e4f7 100644
--- a/themes/Adwaita/gtk-3.0/_colors.scss
+++ b/themes/Adwaita/gtk-3.0/_colors.scss
@@ -6,7 +6,7 @@ $bg_color: if($variant =='light', #ededed, #393f3f);
 $fg_color: if($variant =='light', #2e3436, #eeeeec);
 
 $selected_fg_color: #fff;
-$selected_bg_color: if($variant =='light', #4a90d9, darken(#4a90d9,10%));
+$selected_bg_color: if($variant =='light', #4a90d9, darken(#4a90d9,20%));
 
 $borders_color: if($variant =='light', darken($bg_color,30%), darken($bg_color,12%));
 $borders_edge: if($variant =='light', white, transparentize($fg_color,.9));
diff --git a/themes/Adwaita/gtk-3.0/_common.scss b/themes/Adwaita/gtk-3.0/_common.scss
index acbf676..fb14237 100644
--- a/themes/Adwaita/gtk-3.0/_common.scss
+++ b/themes/Adwaita/gtk-3.0/_common.scss
@@ -743,14 +743,13 @@ GtkSwitch {
     &.slider {
       border-radius: 3px;
       @include button(normal, $noedge:true);
-      &:active { border: 1px solid darken($selected_bg_color, 20%); }
+      &:active { border: 1px solid darken($selected_bg_color, 30%); }
       &:insensitive { @include button(insensitive); }
       &:backdrop { @include button(backdrop); }
       &:backdrop:insensitive { @include button(backdrop-insensitive); }
     }
 }
 
-
 /************
  * GtkScale *
  ************/
diff --git a/themes/Adwaita/gtk-3.0/_drawing.scss b/themes/Adwaita/gtk-3.0/_drawing.scss
index 53b1c9e..abb85d8 100644
--- a/themes/Adwaita/gtk-3.0/_drawing.scss
+++ b/themes/Adwaita/gtk-3.0/_drawing.scss
@@ -67,9 +67,7 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
 
 // buttons
 
- mixin _button_border_color ($c) { // helper function to draw borders
-  border-color: if($variant=='light', darken($c,30%), darken($c,10%));
-}
+ mixin _button_border_color ($c) { border-color: darken($c,25%); } // colored buttons want the border form 
the base color
 
 @mixin _button_text_shadow ($tc:$fg_color, $bg:$bg_color) {
 //
@@ -148,7 +146,8 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
   // hovered button
   //
     color: $tc;
-    @include _button_border_color($c);
+    @if $c!=$bg_color { @include _button_border_color($c); }
+    @else { border-color: $borders_color; }
     background-image: linear-gradient(to bottom,
                                       lighten($c,14%),
                                       lighten($c,4%) 40%,
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained-dark.css b/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
index b0e42d1..2100b27 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
@@ -15,8 +15,8 @@
   -GtkTreeView-horizontal-separator: 4;
   -GtkMenu-horizontal-padding: 0;
   -GtkMenu-vertical-padding: 0;
-  -GtkWidget-link-color: #4a90d9;
-  -GtkWidget-visited-link-color: #4a90d9;
+  -GtkWidget-link-color: #2a76c6;
+  -GtkWidget-visited-link-color: #2a76c6;
   -GtkWidget-focus-padding: 2;
   -GtkWidget-focus-line-width: 1;
   -GtkWindow-resize-grip-width: 0;
@@ -47,11 +47,11 @@
 */
 *:selected,
 *:selected:focus {
-  background-color: #2a76c6;
+  background-color: #215d9c;
   color: white; }
 
 *:selected:backdrop {
-  background-color: #2a76c6;
+  background-color: #215d9c;
   color: white; }
 
 *:insensitive {
@@ -73,7 +73,7 @@
     background-color: #393f3f;
     color: white; }
   .gtkstyle-fallback:selected {
-    background-color: #2a76c6;
+    background-color: #215d9c;
     color: white; }
 
 GtkImage,
@@ -125,8 +125,8 @@ GtkGrid:insensitive {
     border-style: solid;
     border-width: 1px;
     background-image: linear-gradient(to bottom, #2b2b2b, #333333 90%);
-    border-color: #2a76c6;
-    box-shadow: inset 0 2px 2px -2px #191919, inset 0 0 2px 1px #314050, 0 1px rgba(238, 238, 236, 0.1); }
+    border-color: #215d9c;
+    box-shadow: inset 0 2px 2px -2px #191919, inset 0 0 2px 1px #2f3b48, 0 1px rgba(238, 238, 236, 0.1); }
   .entry:insensitive {
     background-color: transparent;
     border-style: solid;
@@ -153,13 +153,13 @@ GtkGrid:insensitive {
     background-image: linear-gradient(to bottom, #393f3f);
     box-shadow: 0 1px rgba(255, 255, 255, 0); }
   .entry:selected, .entrybackdrop:selected {
-    background-color: #2a76c6;
+    background-color: #215d9c;
     color: white; }
   .entry.progressbar {
     margin: 1px;
     border-radius: 0;
     border-width: 0 0 2px;
-    border-color: #2a76c6;
+    border-color: #215d9c;
     border-style: solid;
     background-image: none;
     box-shadow: none; }
@@ -190,7 +190,7 @@ GtkGrid:insensitive {
     border-width: 1px;
     border-style: solid;
     color: #eeeeec;
-    border-color: #212424;
+    border-color: #1c1f1f;
     background-image: linear-gradient(to bottom, #5b6464, #434a4a 40%, #393f3f);
     text-shadow: 0 -1px rgba(0, 0, 0, 0.77976);
     icon-shadow: 0 -1px rgba(0, 0, 0, 0.77976);
@@ -253,35 +253,35 @@ GtkGrid:insensitive {
     border-width: 1px;
     border-style: solid;
     color: white;
-    background-image: linear-gradient(to bottom, #3583d5, #2a76c6 40%, #256ab1);
-    border-color: #215d9c;
-    text-shadow: 0 -1px rgba(0, 0, 0, 0.62353);
-    icon-shadow: 0 -1px rgba(0, 0, 0, 0.62353);
+    background-image: linear-gradient(to bottom, #256ab1, #215d9c 40%, #1c5187);
+    border-color: #0b1e33;
+    text-shadow: 0 -1px rgba(0, 0, 0, 0.70353);
+    icon-shadow: 0 -1px rgba(0, 0, 0, 0.70353);
     box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
     .button.suggested-action:hover {
       border-width: 1px;
       border-style: solid;
       color: white;
-      border-color: #215d9c;
-      background-image: linear-gradient(to bottom, #5b9add, #3180d4 40%, #2a76c6);
-      text-shadow: 0 -1px rgba(0, 0, 0, 0.59153);
-      icon-shadow: 0 -1px rgba(0, 0, 0, 0.59153);
+      border-color: #0b1e33;
+      background-image: linear-gradient(to bottom, #3180d4, #2467ad 40%, #215d9c);
+      text-shadow: 0 -1px rgba(0, 0, 0, 0.67153);
+      icon-shadow: 0 -1px rgba(0, 0, 0, 0.67153);
       box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
     .button.suggested-action:active {
       border-width: 1px;
       border-style: solid;
       color: white;
-      border-color: #215d9c;
-      background-image: linear-gradient(to bottom, #215d9c, #256ab1 3%);
-      text-shadow: 0 -1px rgba(0, 0, 0, 0.70353);
-      icon-shadow: 0 -1px rgba(0, 0, 0, 0.70353);
+      border-color: #0b1e33;
+      background-image: linear-gradient(to bottom, #184472, #1c5187 3%);
+      text-shadow: 0 -1px rgba(0, 0, 0, 0.78353);
+      icon-shadow: 0 -1px rgba(0, 0, 0, 0.78353);
       box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3), 0 1px rgba(238, 238, 236, 0.1); }
     .button.suggested-action:backdrop {
       border-width: 1px;
       border-style: solid;
       color: #393f3f;
-      border-color: #2a76c6;
-      background-image: linear-gradient(to bottom, #2a76c6);
+      border-color: #215d9c;
+      background-image: linear-gradient(to bottom, #215d9c);
       text-shadow: none;
       icon-shadow: none;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
@@ -305,7 +305,7 @@ GtkGrid:insensitive {
     border-style: solid;
     color: white;
     background-image: linear-gradient(to bottom, #ed1212, #d51010 40%, #bd0e0e);
-    border-color: #a60c0c;
+    border-color: #5e0707;
     text-shadow: 0 -1px rgba(0, 0, 0, 0.64078);
     icon-shadow: 0 -1px rgba(0, 0, 0, 0.64078);
     box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
@@ -313,7 +313,7 @@ GtkGrid:insensitive {
       border-width: 1px;
       border-style: solid;
       color: white;
-      border-color: #a60c0c;
+      border-color: #5e0707;
       background-image: linear-gradient(to bottom, #f03c3c, #e81111 40%, #d51010);
       text-shadow: 0 -1px rgba(0, 0, 0, 0.60878);
       icon-shadow: 0 -1px rgba(0, 0, 0, 0.60878);
@@ -322,7 +322,7 @@ GtkGrid:insensitive {
       border-width: 1px;
       border-style: solid;
       color: white;
-      border-color: #a60c0c;
+      border-color: #5e0707;
       background-image: linear-gradient(to bottom, #a60c0c, #bd0e0e 3%);
       text-shadow: 0 -1px rgba(0, 0, 0, 0.72078);
       icon-shadow: 0 -1px rgba(0, 0, 0, 0.72078);
@@ -442,7 +442,7 @@ GtkColorButton.button {
       border-width: 1px;
       border-style: solid;
       color: #eeeeec;
-      border-color: #212424;
+      border-color: #1c1f1f;
       background-image: linear-gradient(to bottom, #5b6464, #434a4a 40%, #393f3f);
       text-shadow: 0 -1px rgba(0, 0, 0, 0.77976);
       icon-shadow: 0 -1px rgba(0, 0, 0, 0.77976);
@@ -494,7 +494,7 @@ GtkColorButton.button {
       border-width: 1px;
       border-style: solid;
       color: #eeeeec;
-      border-color: #212424;
+      border-color: #1c1f1f;
       background-image: linear-gradient(to bottom, #5b6464, #434a4a 40%, #393f3f);
       text-shadow: 0 -1px rgba(0, 0, 0, 0.77976);
       icon-shadow: 0 -1px rgba(0, 0, 0, 0.77976);
@@ -593,10 +593,10 @@ GtkComboBox {
     .header-bar > GtkBox > .separator.vertical:backdrop {
       border-image: linear-gradient(to bottom, rgba(28, 31, 31, 0.5)) 0 1/1px 1px; }
   .header-bar.selection-mode {
-    color: #1c5187;
+    color: #14375d;
     text-shadow: 0 1px rgba(0, 0, 0, 0.5);
-    background-image: linear-gradient(to bottom, #3583d5, #2b7bcf);
-    box-shadow: inset 0 -1px #303535, inset 0 1px rgba(51, 123, 199, 0.55); }
+    background-image: linear-gradient(to bottom, #256ab1, #2362a5);
+    box-shadow: inset 0 -1px #303535, inset 0 1px rgba(43, 100, 160, 0.55); }
   .tiled .header-bar, .maximized .header-bar {
     border-radius: 0; }
 
@@ -640,7 +640,7 @@ column-header .button:backdrop {
     .menubar .menuitem:hover, .menubar .menuitem:active {
       border-width: 0 0 3px;
       border-style: solid;
-      border-color: #2a76c6; }
+      border-color: #215d9c; }
 
 .menu .menuitem {
   background-color: #333333;
@@ -649,11 +649,11 @@ column-header .button:backdrop {
   .menu .menuitem:hover {
     border: none;
     color: white;
-    background-color: #2a76c6; }
+    background-color: #215d9c; }
   .menu .menuitem:active {
     border: none;
     color: white;
-    background-color: #256ab1; }
+    background-color: #1c5187; }
 .menu .separator {
   color: transparent; }
 
@@ -729,19 +729,19 @@ GtkPopover {
     .notebook tab.top:hover {
       box-shadow: inset 0 -2px #1c1f1f; }
     .notebook tab.top:active {
-      box-shadow: inset 0 -2px #2a76c6; }
+      box-shadow: inset 0 -2px #215d9c; }
     .notebook tab.bottom:hover {
       box-shadow: inset 0 2px #1c1f1f; }
     .notebook tab.bottom:active {
-      box-shadow: inset 0 2px #2a76c6; }
+      box-shadow: inset 0 2px #215d9c; }
     .notebook tab.right:hover {
       box-shadow: inset 2px 0 #1c1f1f; }
     .notebook tab.right:active {
-      box-shadow: inset 2px 0 #2a76c6; }
+      box-shadow: inset 2px 0 #215d9c; }
     .notebook tab.left:hover {
       box-shadow: inset -2px 0 #1c1f1f; }
     .notebook tab.left:active {
-      box-shadow: inset -2px 0 #2a76c6; }
+      box-shadow: inset -2px 0 #215d9c; }
     .notebook tab.reorderable-page:active {
       border-width: 0 1px 0 1px;
       background-color: rgba(57, 63, 63, 0.5);
@@ -807,11 +807,11 @@ GtkPopover {
     .scrollbar.slider:hover {
       background-color: #939695; }
     .scrollbar.slider:prelight:active {
-      background-color: #2a76c6; }
+      background-color: #215d9c; }
     .scrollbar.slider.fine-tune {
       border-width: 5px; }
       .scrollbar.slider.fine-tune:prelight:active {
-        background-color: #2a76c6; }
+        background-color: #215d9c; }
 
 /**********
  * Switch *
@@ -830,8 +830,8 @@ GtkSwitch {
     border-color: #1c1f1f; }
     GtkSwitch.trough:active {
       color: #d7d8d8;
-      background-image: linear-gradient(to bottom, #2364a8 5%, #256ab2 20%, #256ab2 90%, #2a76c6);
-      border-color: #215d9c; }
+      background-image: linear-gradient(to bottom, #1c4f84 5%, #1d538c 20%, #1d538c 90%, #215d9c);
+      border-color: #0b1e33; }
     GtkSwitch.trough:insensitive {
       color: #c9cbc9;
       background-image: linear-gradient(to bottom, #393f3f);
@@ -839,7 +839,7 @@ GtkSwitch {
     GtkSwitch.trough:backdrop {
       color: #c9cbc9;
       background-image: linear-gradient(to bottom, #212424);
-      border-color: #090909; }
+      border-color: black; }
     GtkSwitch.trough:backdrop:insensitive {
       color: #c9cbc9;
       background-image: linear-gradient(to bottom, #393f3f);
@@ -855,7 +855,7 @@ GtkSwitch {
     icon-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
     box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
     GtkSwitch.slider:active {
-      border: 1px solid #184472; }
+      border: 1px solid #06121e; }
     GtkSwitch.slider:insensitive {
       border-width: 1px;
       border-style: solid;
@@ -925,10 +925,10 @@ GtkSwitch {
       border-color: #1c1f1f;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
     .scale.slider:active {
-      border: 1px solid #2a76c6; }
+      border: 1px solid #215d9c; }
     .scale.slider.fine-tune:active {
       border: 4px solid transparent;
-      box-shadow: inset 0 0 0 1px #2a76c6; }
+      box-shadow: inset 0 0 0 1px #215d9c; }
   .scale.trough {
     color: #c9cbc9;
     background-image: linear-gradient(to bottom, #303535 5%, #333838 20%, #333838 90%, #393f3f);
@@ -939,8 +939,8 @@ GtkSwitch {
     border-radius: 3px; }
     .scale.trough.highlight {
       color: #c9cbc9;
-      background-image: linear-gradient(to bottom, #2364a8 5%, #256ab2 20%, #256ab2 90%, #2a76c6);
-      border-color: #215d9c;
+      background-image: linear-gradient(to bottom, #1c4f84 5%, #1d538c 20%, #1d538c 90%, #215d9c);
+      border-color: #0b1e33;
       box-shadow: inset 0 -1px 0 rgba(238, 238, 236, 0), 0 1px 0 rgba(238, 238, 236, 0); }
     .scale.trough:insensitive {
       color: #c9cbc9;
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained.css b/themes/Adwaita/gtk-3.0/gtk-contained.css
index 6bc8c1c..42b9231 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained.css
@@ -254,7 +254,7 @@ GtkGrid:insensitive {
     border-style: solid;
     color: white;
     background-image: linear-gradient(to bottom, #89b7e6, #4a90d9 40%, #2a76c6);
-    border-color: #184472;
+    border-color: #1c5187;
     text-shadow: 0 -1px rgba(0, 0, 0, 0.54353);
     icon-shadow: 0 -1px rgba(0, 0, 0, 0.54353);
     box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px white; }
@@ -262,7 +262,7 @@ GtkGrid:insensitive {
       border-width: 1px;
       border-style: solid;
       color: white;
-      border-color: #184472;
+      border-color: #1c5187;
       background-image: linear-gradient(to bottom, #85b4e5, #5b9add 40%, #4a90d9);
       text-shadow: 0 -1px rgba(0, 0, 0, 0.51153);
       icon-shadow: 0 -1px rgba(0, 0, 0, 0.51153);
@@ -271,7 +271,7 @@ GtkGrid:insensitive {
       border-width: 1px;
       border-style: solid;
       color: white;
-      border-color: #184472;
+      border-color: #1c5187;
       background-image: linear-gradient(to bottom, #256ab1, #2974c2 3%, #2a76c6);
       text-shadow: 0 -1px rgba(0, 0, 0, 0.62353);
       icon-shadow: 0 -1px rgba(0, 0, 0, 0.62353);
@@ -305,7 +305,7 @@ GtkGrid:insensitive {
     border-style: solid;
     color: white;
     background-image: linear-gradient(to bottom, #f47070, #ef2929 40%, #d51010);
-    border-color: #760909;
+    border-color: #8e0b0b;
     text-shadow: 0 -1px rgba(0, 0, 0, 0.56078);
     icon-shadow: 0 -1px rgba(0, 0, 0, 0.56078);
     box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px white; }
@@ -313,7 +313,7 @@ GtkGrid:insensitive {
       border-width: 1px;
       border-style: solid;
       color: white;
-      border-color: #760909;
+      border-color: #8e0b0b;
       background-image: linear-gradient(to bottom, #f46b6b, #f03c3c 40%, #ef2929);
       text-shadow: 0 -1px rgba(0, 0, 0, 0.52878);
       icon-shadow: 0 -1px rgba(0, 0, 0, 0.52878);
@@ -322,7 +322,7 @@ GtkGrid:insensitive {
       border-width: 1px;
       border-style: solid;
       color: white;
-      border-color: #760909;
+      border-color: #8e0b0b;
       background-image: linear-gradient(to bottom, #bd0e0e, #d01010 3%, #d51010);
       text-shadow: 0 -1px rgba(0, 0, 0, 0.64078);
       icon-shadow: 0 -1px rgba(0, 0, 0, 0.64078);
@@ -831,7 +831,7 @@ GtkSwitch {
     GtkSwitch.trough:active {
       color: #fbfbfb;
       background-image: linear-gradient(to bottom, #3e7ab8 5%, #4281c3 20%, #4281c3 90%, #4a90d9);
-      border-color: #184472; }
+      border-color: #1c5187; }
     GtkSwitch.trough:insensitive {
       color: #54595a;
       background-image: linear-gradient(to bottom, #ededed);
@@ -839,7 +839,7 @@ GtkSwitch {
     GtkSwitch.trough:backdrop {
       color: #54595a;
       background-image: linear-gradient(to bottom, lightgray);
-      border-color: #878787; }
+      border-color: #949494; }
     GtkSwitch.trough:backdrop:insensitive {
       color: #54595a;
       background-image: linear-gradient(to bottom, #ededed);
@@ -855,7 +855,7 @@ GtkSwitch {
     icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
     box-shadow: inset 0 1px white; }
     GtkSwitch.slider:active {
-      border: 1px solid #215d9c; }
+      border: 1px solid #184472; }
     GtkSwitch.slider:insensitive {
       border-width: 1px;
       border-style: solid;
@@ -940,7 +940,7 @@ GtkSwitch {
     .scale.trough.highlight {
       color: #54595a;
       background-image: linear-gradient(to bottom, #3e7ab8 5%, #4281c3 20%, #4281c3 90%, #4a90d9);
-      border-color: #184472;
+      border-color: #1c5187;
       box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5); }
     .scale.trough:insensitive {
       color: #54595a;
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]