GNOME.org
 

[gnome-themes-standard/wip/sass] Fixed entry selected text, implemented entry backdrop states. Sassified comments so they won't appea

commit fcb5b7cea4915f269ac7d0e06288fe6516661fa5
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Wed May 21 17:04:20 2014 +0200

    Fixed entry selected text, implemented entry backdrop states.
    Sassified comments so they won't appear in the generated css.

 themes/Adwaita/gtk-3.0/_common.scss           |   45 +++++++++++++++----------
 themes/Adwaita/gtk-3.0/gtk-contained-dark.css |   35 +++++++++----------
 themes/Adwaita/gtk-3.0/gtk-contained.css      |   35 +++++++++----------
 themes/Adwaita/gtk-3.0/gtk-contained.scss     |    2 +-
 4 files changed, 62 insertions(+), 55 deletions(-)
---
diff --git a/themes/Adwaita/gtk-3.0/_common.scss b/themes/Adwaita/gtk-3.0/_common.scss
index c6dc0ab..d799e23 100644
--- a/themes/Adwaita/gtk-3.0/_common.scss
+++ b/themes/Adwaita/gtk-3.0/_common.scss
@@ -9,11 +9,10 @@
     -GtkCheckButton-indicator-size: 16;
     -GtkCheckMenuItem-indicator-size: 12;
 
-    /* The size for scrollbars. The slider is 2px smaller, but we keep it
-     * up so that the whole area is sensitive to button presses for the
-     * slider. The stepper button is larger in both directions, the slider
-     * only in the width
-     */
+    // The size for scrollbars. The slider is 2px smaller, but we keep it
+    // up so that the whole area is sensitive to button presses for the
+    // slider. The stepper button is larger in both directions, the slider
+    // only in the width
 
     -GtkScrolledWindow-scrollbar-spacing: 0;
     -GtkScrolledWindow-scrollbars-within-bevel: 1;
@@ -132,7 +131,7 @@ GtkGrid:insensitive {
 .spinner {
   background-image: none;
   background-color: blue;
-  opacity: 0; /* non spinning spinner makes no sense */
+  opacity: 0; // non spinning spinner makes no sense
   -gtk-icon-source: url("assets/spinner.svg");
 
   &:active {
@@ -159,7 +158,7 @@ GtkGrid:insensitive {
                                       $theme_base_color 90%
                                       );
   box-shadow: inset 0 2px 2px -2px $theme_shade,
-              0 1px $borders_edge; // not working 
+              0 1px $borders_edge; /* not working */
 
   background-color: transparent; // this needs to be 'transparent'
                                  // if we need a flat bg, let's abuse a gradient
@@ -168,17 +167,27 @@ GtkGrid:insensitive {
     color: $_insensitive_fg_color;
     background-image: none;
     background-color: $_insensitive_bg_color;
-    box-shadow: 0 1px $borders_edge; // not working
+    box-shadow: 0 1px $borders_edge; /* not working */
   }
   &:focus {
     border-color: $theme_selected_bg_color;
     box-shadow: inset 0 2px 2px -2px transparentize(black,0.6),
-                inset 0 0 2px 1px transparentize($theme_selected_bg_color, 0.5), /* focus indicator */
-                0 1px $borders_edge; /* not working */
+                // focus indicator
+                inset 0 0 2px 1px transparentize($theme_selected_bg_color, 0.5),                0 1px 
$borders_edge; /* not working */
+  }
+  &:selected, &:backdrop:selected { 
+    color: $theme_selected_fg_color;
+    background-color: $theme_selected_bg_color;
   }
   &:backdrop {
-    background-image: none;
-    box-shadow: none; /* let's make it flat */
+    color: $_backdrop_fg_color;
+    border-color: $_backdrop_borders_color;
+    background-image: linear-gradient(to bottom, $_backdrop_base_color);
+    box-shadow: none; // let's make it flat
+  }
+  &:backdrop:insensitive {
+    color: $_backdrop_insensitive_color;
+    background-image: linear-gradient(to bottom, $_backdrop_bg_color);
   }
 }
 
@@ -232,9 +241,8 @@ GtkGrid:insensitive {
       @include button(insensitive-active);
     }
   }
-  // button label can't be colored easily, need to match for the GtkLabel
   
-  /* Suggested and Destructive Action buttons */
+  // Suggested and Destructive Action buttons
   @each $b_type, $b_color in (suggested-action, $theme_selected_bg_color), 
                               (destructive-action, $destructive_color) {
     &.#{$b_type} {
@@ -270,7 +278,7 @@ GtkGrid:insensitive {
   &:active,
   &:insensitive,
   &:active:insensitive {
-    @extend .menuitem.button; /* override generic .button:*  */
+    @extend .menuitem.button; // override generic .button:*
   }
   &:backdrop,
   &:hover:backdrop,
@@ -310,7 +318,8 @@ GtkGrid:insensitive {
 
 .header-bar .button {
   &.text-button {
-    padding: 6px 8px 5px; /* due to font metrics the image buttons are 1px shorter */
+    padding: 6px 8px 5px; /* due to font metrics the image buttons 
+                             are 1px shorter */
   }
   &.image-button {
     padding: 8px; 
@@ -370,7 +379,7 @@ GtkComboBox {
   }
   
   .separator {
-    /* always disable separators */
+    // always disable separators
     -GtkWidget-wide-separators: true;
     -GtkWidget-horizontal-separator: 0;
     -GtkWidget-vertical-separator: 0;
@@ -452,7 +461,7 @@ GtkComboBox {
 }
 
 .window-frame.tiled .header-bar {
-  border-radius: 0; /* FIXME doesn't work */
+  border-radius: 0; // FIXME doesn't work
 }
 
 /***************
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained-dark.css b/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
index 385efd1..2e868b6 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
@@ -7,11 +7,6 @@
   -GtkPaned-handle-size: 5;
   -GtkCheckButton-indicator-size: 16;
   -GtkCheckMenuItem-indicator-size: 12;
-  /* The size for scrollbars. The slider is 2px smaller, but we keep it
-   * up so that the whole area is sensitive to button presses for the
-   * slider. The stepper button is larger in both directions, the slider
-   * only in the width
-   */
   -GtkScrolledWindow-scrollbar-spacing: 0;
   -GtkScrolledWindow-scrollbars-within-bevel: 1;
   -GtkToolItemGroup-expander-size: 11;
@@ -100,7 +95,6 @@ GtkGrid:insensitive {
   background-image: none;
   background-color: blue;
   opacity: 0;
-  /* non spinning spinner makes no sense */
   -gtk-icon-source: url("assets/spinner.svg"); }
   .spinner:active {
     opacity: 1;
@@ -119,20 +113,29 @@ GtkGrid:insensitive {
   border: 1px solid #1c1f1f;
   background-image: linear-gradient(to bottom, #2b2b2b 0%, #333333 90%);
   box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.6), 0 1px rgba(238, 238, 236, 0.1);
+  /* not working */
   background-color: transparent; }
   .entry:insensitive {
     color: white;
     background-image: none;
     background-color: transparent;
-    box-shadow: 0 1px rgba(238, 238, 236, 0.1); }
+    box-shadow: 0 1px rgba(238, 238, 236, 0.1);
+    /* not working */ }
   .entry:focus {
     border-color: #2a76c6;
     box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.4), inset 0 0 2px 1px rgba(42, 118, 198, 0.5), 0 1px 
rgba(238, 238, 236, 0.1);
     /* not working */ }
+  .entry:selected, .entry:backdrop:selected {
+    color: white;
+    background-color: #2a76c6; }
   .entry:backdrop {
-    background-image: none;
-    box-shadow: none;
-    /* let's make it flat */ }
+    color: #eeeeec;
+    border-color: #1c1f1f;
+    background-image: linear-gradient(to bottom, #262626);
+    box-shadow: none; }
+  .entry:backdrop:insensitive {
+    color: white;
+    background-image: linear-gradient(to bottom, #393f3f); }
 
 .linked .entry:first-child {
   border-top-right-radius: 0;
@@ -160,8 +163,7 @@ GtkGrid:insensitive {
   border-color: #1c1f1f;
   text-shadow: 0 -1px rgba(0, 0, 0, 0.2);
   icon-shadow: 0 -1px rgba(0, 0, 0, 0.2);
-  box-shadow: inset 0 1px rgba(238, 238, 236, 0.1), 0 1px rgba(238, 238, 236, 0.1);
-  /* Suggested and Destructive Action buttons */ }
+  box-shadow: inset 0 1px rgba(238, 238, 236, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
   .button:hover,
   .toolbar .button.raised:hover,
   .toolbar .raised .button:hover,
@@ -413,8 +415,6 @@ GtkGrid:insensitive {
   border-image: none;
   border-style: none;
   box-shadow: none; }
-  .menuitem.button:active, .menuitem.button:insensitive, .menuitem.button:active:insensitive {
-    /* override generic .button:*  */ }
   .menuitem.button:backdrop, .menuitem.button:backdrop:active:insensitive, .menuitem.button:hover:backdrop, 
.menuitem.button:insensitive:backdrop, .menuitem.button:active:insensitive:backdrop, 
.menuitem.button:active:backdrop, .menuitem.button:active:hover:backdrop, 
.menuitem.button:active:selected:backdrop {
     text-shadow: none;
     icon-shadow: none;
@@ -440,7 +440,8 @@ GtkGrid:insensitive {
 
 .header-bar .button.text-button {
   padding: 6px 8px 5px;
-  /* due to font metrics the image buttons are 1px shorter */ }
+  /* due to font metrics the image buttons 
+     are 1px shorter */ }
 .header-bar .button.image-button {
   padding: 8px; }
 
@@ -491,7 +492,6 @@ GtkComboBox {
   GtkComboBox:backdrop:insensitive {
     color: rgba(255, 255, 255, 0.5); }
   GtkComboBox .separator {
-    /* always disable separators */
     -GtkWidget-wide-separators: true;
     -GtkWidget-horizontal-separator: 0;
     -GtkWidget-vertical-separator: 0; }
@@ -543,8 +543,7 @@ GtkComboBox {
     background-image: linear-gradient(to bottom, #3583d5, #2b7bcf); }
 
 .window-frame.tiled .header-bar {
-  border-radius: 0;
-  /* FIXME doesn't work */ }
+  border-radius: 0; }
 
 /***************
  * Popovers   *
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained.css b/themes/Adwaita/gtk-3.0/gtk-contained.css
index c633315..94bbfcf 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained.css
@@ -7,11 +7,6 @@
   -GtkPaned-handle-size: 5;
   -GtkCheckButton-indicator-size: 16;
   -GtkCheckMenuItem-indicator-size: 12;
-  /* The size for scrollbars. The slider is 2px smaller, but we keep it
-   * up so that the whole area is sensitive to button presses for the
-   * slider. The stepper button is larger in both directions, the slider
-   * only in the width
-   */
   -GtkScrolledWindow-scrollbar-spacing: 0;
   -GtkScrolledWindow-scrollbars-within-bevel: 1;
   -GtkToolItemGroup-expander-size: 11;
@@ -100,7 +95,6 @@ GtkGrid:insensitive {
   background-image: none;
   background-color: blue;
   opacity: 0;
-  /* non spinning spinner makes no sense */
   -gtk-icon-source: url("assets/spinner.svg"); }
   .spinner:active {
     opacity: 1;
@@ -119,20 +113,29 @@ GtkGrid:insensitive {
   border: 1px solid #a1a1a1;
   background-image: linear-gradient(to bottom, #f7f7f7 0%, white 90%);
   box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.5), 0 1px rgba(255, 255, 255, 0.05);
+  /* not working */
   background-color: transparent; }
   .entry:insensitive {
     color: #748489;
     background-image: none;
     background-color: transparent;
-    box-shadow: 0 1px rgba(255, 255, 255, 0.05); }
+    box-shadow: 0 1px rgba(255, 255, 255, 0.05);
+    /* not working */ }
   .entry:focus {
     border-color: #729fcf;
     box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.4), inset 0 0 2px 1px rgba(114, 159, 207, 0.5), 0 1px 
rgba(255, 255, 255, 0.05);
     /* not working */ }
+  .entry:selected, .entry:backdrop:selected {
+    color: white;
+    background-color: #729fcf; }
   .entry:backdrop {
-    background-image: none;
-    box-shadow: none;
-    /* let's make it flat */ }
+    color: #454f52;
+    border-color: #a1a1a1;
+    background-image: linear-gradient(to bottom, #fcfcfc);
+    box-shadow: none; }
+  .entry:backdrop:insensitive {
+    color: #c7c7c7;
+    background-image: linear-gradient(to bottom, #ededed); }
 
 .linked .entry:first-child {
   border-top-right-radius: 0;
@@ -160,8 +163,7 @@ GtkGrid:insensitive {
   border-color: #a1a1a1;
   text-shadow: 0 1px rgba(255, 255, 255, 0.8);
   icon-shadow: 0 1px rgba(255, 255, 255, 0.8);
-  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(255, 255, 255, 0.05);
-  /* Suggested and Destructive Action buttons */ }
+  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(255, 255, 255, 0.05); }
   .button:hover,
   .toolbar .button.raised:hover,
   .toolbar .raised .button:hover,
@@ -413,8 +415,6 @@ GtkGrid:insensitive {
   border-image: none;
   border-style: none;
   box-shadow: none; }
-  .menuitem.button:active, .menuitem.button:insensitive, .menuitem.button:active:insensitive {
-    /* override generic .button:*  */ }
   .menuitem.button:backdrop, .menuitem.button:backdrop:active:insensitive, .menuitem.button:hover:backdrop, 
.menuitem.button:insensitive:backdrop, .menuitem.button:active:insensitive:backdrop, 
.menuitem.button:active:backdrop, .menuitem.button:active:hover:backdrop, 
.menuitem.button:active:selected:backdrop {
     text-shadow: none;
     icon-shadow: none;
@@ -440,7 +440,8 @@ GtkGrid:insensitive {
 
 .header-bar .button.text-button {
   padding: 6px 8px 5px;
-  /* due to font metrics the image buttons are 1px shorter */ }
+  /* due to font metrics the image buttons 
+     are 1px shorter */ }
 .header-bar .button.image-button {
   padding: 8px; }
 
@@ -491,7 +492,6 @@ GtkComboBox {
   GtkComboBox:backdrop:insensitive {
     color: rgba(116, 132, 137, 0.5); }
   GtkComboBox .separator {
-    /* always disable separators */
     -GtkWidget-wide-separators: true;
     -GtkWidget-horizontal-separator: 0;
     -GtkWidget-vertical-separator: 0; }
@@ -543,8 +543,7 @@ GtkComboBox {
     background-image: linear-gradient(to bottom, #85acd5, #7aa4d2); }
 
 .window-frame.tiled .header-bar {
-  border-radius: 0;
-  /* FIXME doesn't work */ }
+  border-radius: 0; }
 
 /***************
  * Popovers   *
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained.scss b/themes/Adwaita/gtk-3.0/gtk-contained.scss
index 4a41aed..83aaca7 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained.scss
+++ b/themes/Adwaita/gtk-3.0/gtk-contained.scss
@@ -33,7 +33,7 @@ $destructive_color: #ef2929;
 
 
 //colors for the backdrop state, derived from the main colors.
-$_backdrop_base_color: darken($theme_base_color,5%);
+$_backdrop_base_color: darken($theme_base_color,1%);
 $_backdrop_bg_color: $theme_bg_color;
 $_backdrop_fg_color: lighten($theme_fg_color,10%);
 $_backdrop_insensitive_color: darken($_backdrop_bg_color,15%);
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]