[gtk+] Adwaita: more sass functions remixing



commit 356e02fc78385680887ba7d1a971e3836985b362
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Wed Sep 3 20:40:43 2014 +0200

    Adwaita: more sass functions remixing

 gtk/resources/theme/Adwaita/_colors.scss           |    8 +++---
 gtk/resources/theme/Adwaita/_drawing.scss          |   20 +++++++++++++---
 gtk/resources/theme/Adwaita/gtk-contained-dark.css |    8 +++---
 gtk/resources/theme/Adwaita/gtk-contained.css      |   24 ++++++++++----------
 4 files changed, 36 insertions(+), 24 deletions(-)
---
diff --git a/gtk/resources/theme/Adwaita/_colors.scss b/gtk/resources/theme/Adwaita/_colors.scss
index eafc182..c79f523 100644
--- a/gtk/resources/theme/Adwaita/_colors.scss
+++ b/gtk/resources/theme/Adwaita/_colors.scss
@@ -7,13 +7,13 @@ $bg_color: if($variant =='light', #ededed, #393f3f);
 $fg_color: if($variant =='light', #2e3436, #eeeeec);
 
 $selected_fg_color: #ffffff;
-$selected_bg_color: if($variant =='light', #4a90d9, darken(#4a90d9,20%));
-$selected_borders_color: if($variant == 'light', darken($selected_bg_color, 30%), 
darken($selected_bg_color,20%));
-                         // FIXME dark variant color
+$selected_bg_color: if($variant == 'light', #4a90d9, darken(#4a90d9,20%));
+$selected_borders_color: if($variant=='light', darken($selected_bg_color, 30%),
+                                               darken($selected_bg_color, 20%));
 $borders_color: if($variant =='light', darken($bg_color,30%), darken($bg_color,12%));
 $borders_edge: if($variant =='light', white, transparentize($fg_color, 0.9));
 $link_color: darken($selected_bg_color,10%);
-$top_hilight: if($variant =='light', white, transparentize($fg_color, 0.9));
+$top_hilight: $borders_edge;
 
 $warning_color: #f57900;
 $error_color: #cc0000;
diff --git a/gtk/resources/theme/Adwaita/_drawing.scss b/gtk/resources/theme/Adwaita/_drawing.scss
index 371af4a..571d0e1 100644
--- a/gtk/resources/theme/Adwaita/_drawing.scss
+++ b/gtk/resources/theme/Adwaita/_drawing.scss
@@ -110,6 +110,19 @@
   @else { @return transparentize(black,$_lbg*0.8); }
 }
 
+ function _button_hilight_color($c) {
+//
+// calculate the right top hilight color for buttons
+//
+// $c: base color;
+//
+  @if lightness($c)>90% { @return white; }
+  @else if lightness($c)>80% { @return transparentize(white, 0.3); }
+  @else if lightness($c)>50% { @return transparentize(white, 0.5); }
+  @else if lightness($c)>40% { @return transparentize(white, 0.7); }
+  @else { @return transparentize(white, 0.9); }
+}
+
 @mixin _button_text_shadow ($tc:$fg_color, $bg:$bg_color) {
 //
 // helper function for the text emboss effect
@@ -147,8 +160,7 @@
 // osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
 //
 
-  $_top_hilight: if(lightness($c)> 70%, white, transparentize(white,0.9)); //not just dark/light but colored 
buttons
-
+  $_hilight_color: _button_hilight_color($c);
   $_button_edge: if($edge == none, none, _widget_edge($edge));
   $_blank_edge: if($edge == none, none, _widget_edge(transparentize($edge,1)));
 
@@ -167,7 +179,7 @@
     @else { border-color: $borders_color; }
 
     @include _button_text_shadow($tc,$c);
-    @include _shadows(inset 0 1px $_top_hilight, $_button_edge);
+    @include _shadows(inset 0 1px $_hilight_color, $_button_edge);
   }
 
   @else if $t==hover {
@@ -183,7 +195,7 @@
                                       $c);
 
     @include _button_text_shadow($tc,lighten($c,4%));
-    @include _shadows(inset 0 1px $_top_hilight, $_button_edge);
+    @include _shadows(inset 0 1px $_hilight_color, $_button_edge);
   }
 
   @else if $t==active {
diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css 
b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
index 29cf305..2b03675 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
@@ -551,7 +551,7 @@ GtkFlowBox .grid-child {
     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);
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px rgba(238, 238, 236, 0.1);
     outline-color: rgba(255, 255, 255, 0.3); }
     .button.destructive-action:hover {
       color: white;
@@ -559,7 +559,7 @@ GtkFlowBox .grid-child {
       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);
-      box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px rgba(238, 238, 236, 0.1); }
     .button.destructive-action:active, .button.destructive-action:checked {
       color: white;
       border-color: #5e0707;
@@ -3254,14 +3254,14 @@ GtkCalendar {
       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); }
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0.3); }
       .message-dialog.csd .dialog-action-area .button.destructive-action:hover {
         color: white;
         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);
-        box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0.3); }
       .message-dialog.csd .dialog-action-area .button.destructive-action:active {
         color: white;
         border-color: #5e0707;
diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css
index 0f46d95..d9c2ffa 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained.css
@@ -461,7 +461,7 @@ GtkFlowBox .grid-child {
     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;
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px white;
     outline-color: rgba(255, 255, 255, 0.3); }
     .button.suggested-action:hover {
       color: white;
@@ -469,7 +469,7 @@ GtkFlowBox .grid-child {
       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);
-      box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px white; }
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px white; }
     .button.suggested-action:active, .button.suggested-action:checked {
       color: white;
       border-color: #1c5187;
@@ -543,7 +543,7 @@ GtkFlowBox .grid-child {
     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;
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px white;
     outline-color: rgba(255, 255, 255, 0.3); }
     .button.destructive-action:hover {
       color: white;
@@ -551,7 +551,7 @@ GtkFlowBox .grid-child {
       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);
-      box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px white; }
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px white; }
     .button.destructive-action:active, .button.destructive-action:checked {
       color: white;
       border-color: #8e0b0b;
@@ -1218,7 +1218,7 @@ GtkComboBox {
       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); }
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0.5); }
       .titlebar.selection-mode .button:hover, GtkCalendar.selection-mode.header .button:hover,
       .header-bar.selection-mode .button:hover {
         color: #ffffff;
@@ -1226,7 +1226,7 @@ GtkComboBox {
         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);
-        box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0.5); }
       .titlebar.selection-mode .button:active, GtkCalendar.selection-mode.header .button:active, 
.titlebar.selection-mode .button:checked, GtkCalendar.selection-mode.header .button:checked,
       .header-bar.selection-mode .button:active,
       .header-bar.selection-mode .button:checked {
@@ -3355,14 +3355,14 @@ GtkCalendar {
       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); }
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0.5); }
       .message-dialog.csd .dialog-action-area .button.suggested-action:hover {
         color: white;
         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);
-        box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0.5); }
       .message-dialog.csd .dialog-action-area .button.suggested-action:active {
         color: white;
         border-color: #1c5187;
@@ -3401,14 +3401,14 @@ GtkCalendar {
       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); }
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0.5); }
       .message-dialog.csd .dialog-action-area .button.destructive-action:hover {
         color: white;
         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);
-        box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0.5); }
       .message-dialog.csd .dialog-action-area .button.destructive-action:active {
         color: white;
         border-color: #8e0b0b;
@@ -3523,7 +3523,7 @@ GtkInfoBar {
     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); }
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.5); }
     .info .button:hover,
     .question .button:hover,
     .warning .button:hover,
@@ -3533,7 +3533,7 @@ GtkInfoBar {
       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);
-      box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0.5); }
     .info .button:active,
     .question .button:active,
     .warning .button:active,


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]