[gtk+] HC: clean up borders for buttons & entries

From: Jakub Steiner <jimmac src gnome org>
To: commits-list gnome org
Cc:
Subject: [gtk+] HC: clean up borders for buttons & entries
Date: Mon, 1 Dec 2014 19:36:29 +0000 (UTC)
commit c1c68b409c31d4584362d44d68d24654eea482cf
Author: Jakub Steiner <jimmac gmail com>
Date:   Mon Dec 1 19:06:02 2014 +0100

    HC: clean up borders for buttons & entries
    
    https://bugzilla.gnome.org/show_bug.cgi?id=740860

 gtk/theme/HighContrast/_common.scss  |  215 ++++++++++++++++++++++------------
 gtk/theme/HighContrast/_drawing.scss |   55 +++------
 gtk/theme/HighContrast/gtk.css       |  139 +++++++++++++---------
 3 files changed, 237 insertions(+), 172 deletions(-)
---
diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss
index 9400929..9a7c212 100644
--- a/gtk/theme/HighContrast/_common.scss
+++ b/gtk/theme/HighContrast/_common.scss
@@ -185,7 +185,7 @@ GtkLabel {
   @include entry(normal);
   &.flat, &.flat:focus {
     padding: 2px;
-    @include entry(normal, $noedge:true);
+    @include entry(normal, $edge: none);
     border: none;
     border-radius: 0;
   }
@@ -280,8 +280,7 @@ GtkLabel {
       &:focus {
         border-color: entry_focus_border($selected_bg_color);
         box-shadow: entry_focus_glow($selected_bg_color),
-                    0 -1px 0 0 entry_focus_border($selected_bg_color),
-                    _widget_edge();
+                    0 -1px 0 0 entry_focus_border($selected_bg_color);
         @extend %linked_vertical:last-child;
       }
       &:insensitive {
@@ -320,6 +319,25 @@ GtkLabel {
 /***********
  * Buttons *
  ***********/
+// stuff for .needs-attention
+$_dot_color: $selected_bg_color;
+
+ keyframes needs_attention {
+  from {
+    background-image: -gtk-gradient(radial,
+                                    center center, 0,
+                                    center center, 0.01,
+                                    to($_dot_color),
+                                    to(transparent));
+  }
+  to {
+    background-image: -gtk-gradient(radial,
+                                    center center, 0,
+                                    center center, 0.5,
+                                    to($selected_bg_color),
+                                    to(transparent));
+  }
+}
 
 .button {
   border-radius: 3px;
@@ -439,12 +457,12 @@ GtkLabel {
 // should really be reprecated...
 .inline-toolbar GtkToolButton > .button { // redefining the button look is
                                                // needed since those are flat...
-  @include button(normal, $noedge: true); // the box-shadow outset doesn't work
-                                          // in this case, hence $noedge
-  &:hover { @include button(hover, $noedge: true); }
-  &:active { @include button(active, $noedge:true); }
-  &:insensitive { @include button(insensitive, $noedge:true); }
-  &:insensitive:active { @include button(insensitive-active, $noedge:true); }
+  @include button(normal, $edge: none); // the box-shadow outset doesn't work
+                                          // in this case, hence $edge: none
+  &:hover { @include button(hover, $edge: none); }
+  &:active { @include button(active, $edge: none); }
+  &:insensitive { @include button(insensitive, $edge: none); }
+  &:insensitive:active { @include button(insensitive-active, $edge:none); }
   &:backdrop { @include button(backdrop); };
   &:backdrop:active { @include button(backdrop-active); }
   &:backdrop:insensitive { @include button(backdrop-insensitive); }
@@ -475,6 +493,29 @@ GtkLabel {
 }
 
 
+%needs_attention {
+  animation: needs_attention 150ms ease-in;
+  $_dot_shadow: $fg_color;
+  $_dot_shadow_r: 0.5;
+  background-image: -gtk-gradient(radial,
+                                  center center, 0,
+                                  center center, 0.5,
+                                  to($_dot_color),
+                                  to(transparent)),
+                    -gtk-gradient(radial,
+                                  center center, 0,
+                                  center center, $_dot_shadow_r,
+                                  to($_dot_shadow),
+                                  to(transparent));
+  background-size: 6px 6px, 6px 6px;
+  background-repeat: no-repeat;
+  background-position: right 3px, right 4px;
+  &:backdrop { background-size: 6px 6px, 0 0;}
+  &:dir(rtl) {
+    background-position: left 3px, left 4px;
+  }
+}
+
 %linked_middle {
   border-radius: 0;
   border-left-style: none;
@@ -616,18 +657,18 @@ GtkColorButton.button { padding: 4px; } // Uniform padding on the
     .button {
       &:first-child {
         @extend %top_button;
-        @include button(normal, $noedge: true);
+        @include button(normal, $edge: none);
         &:active {
           @extend %top_button;
-          @include button(active, $noedge: true);
+          @include button(active, $edge: none);
         }
         &:hover {
           @extend %top_button;
-          @include button(hover, $noedge: true);
+          @include button(hover, $edge: none);
         }
         &:insensitive {
           @extend %top_button;
-          @include button(insensitive, $noedge: true);
+          @include button(insensitive, $edge: none);
         }
         &:backdrop {
           @extend %top_button;
@@ -854,22 +895,22 @@ GtkComboBox {
     box-shadow: inset 0 -1px mix($borders_color,$bg_color, 30%), //bottom shade
                 inset 0 1px mix($borders_edge,$selected_bg_color, 50%); //top highlight
     .button {
-      @include button(normal, $selected_bg_color, $selected_fg_color, noedge);
-      &:hover { @include button(hover, $selected_bg_color, $selected_fg_color, noedge); }
-      &:active { @include button(active, $selected_bg_color, $selected_fg_color, noedge); }
-      &:insensitive { @include button(insensitive, $selected_bg_color, $selected_fg_color, noedge); }
+      @include button(normal, $selected_bg_color, $selected_fg_color, $edge: none);
+      &:hover { @include button(hover, $selected_bg_color, $selected_fg_color, $edge: none); }
+      &:active { @include button(active, $selected_bg_color, $selected_fg_color, $edge: none); }
+      &:insensitive { @include button(insensitive, $selected_bg_color, $selected_fg_color, $edge: none); }
       &:backdrop {
-        @include button(backdrop, $selected_bg_color, $selected_fg_color, noedge);
+        @include button(backdrop, $selected_bg_color, $selected_fg_color, $edge: none);
         border-color: darken($selected_bg_color, 15%);
       }
-      &:backdrop:insensitive { @include button(backdrop-insensitive, $selected_bg_color, $selected_fg_color, 
noedge); }
+      &:backdrop:insensitive { @include button(backdrop-insensitive, $selected_bg_color, $selected_fg_color, 
$edge: none); }
       &.suggested-action {
-        @include button($t:normal, $noedge:true);
-        &:hover { @include button($t:hover,$noedge:true); }
-        &:active { @include button($t:active, $noedge:true); }
-        &:insensitive { @include button($t:insensitive, $noedge:true); }
-        &:backdrop { @include button($t:backdrop, $noedge:true); }
-        &:backdrop:insensitive { @include button($t:backdrop-insensitive, $noedge:true); }
+        @include button($t:normal, $edge: none);
+        &:hover { @include button($t:hover,$edge: none); }
+        &:active { @include button($t:active, $edge: none); }
+        &:insensitive { @include button($t:insensitive, $edge: none); }
+        &:backdrop { @include button($t:backdrop, $edge: none); }
+        &:backdrop:insensitive { @include button($t:backdrop-insensitive, $edge: none); }
       }
     }
     .selection-menu {
@@ -1278,12 +1319,12 @@ GtkTreeView.view.progressbar { //Progressbar in treeview cells
       color: transparentize($fg_color,0.7);
       &:hover {
         color:  $fg_color;
-        @include button(hover, $noedge: true);
+        @include button(hover, $edge: none);
         background-image: none;
         box-shadow: none;
       }
       &:active {
-        @include button(active, $noedge: true);
+        @include button(active, $edge: none);
       }
       &:backdrop {
         color: transparentize($backdrop_fg_color,0.7);
@@ -1371,14 +1412,12 @@ GtkSwitch {
         color: white;
         border-color: $selected_borders_color;
         background-color: $selected_bg_color;
-        box-shadow: $widget_edge;
         text-shadow: 0 0 2px white;
       }
       &:insensitive {
         color: $insensitive_fg_color;
         border-color: $borders_color;
         background-color: $insensitive_bg_color;
-        box-shadow: $widget_edge;
         text-shadow: none;
       }
       &:backdrop {
@@ -1401,18 +1440,18 @@ GtkSwitch {
     }
     &.slider {
       border-radius: 3px;
-      @include button(normal, $noedge: true);
+      @include button(normal, $edge: none);
       box-shadow: inset 0 1px white,
                   inset 0 -2px transparentize($bg_color,0.4),
                   inset 0 -1px mix($bg_color,$borders_color,50%);
       &:hover {
-        @include button(hover, $noedge: true);
+        @include button(hover, $edge: none);
         box-shadow: inset 0 1px white,
                     inset 0 -2px transparentize($bg_color,0.4),
                     inset 0 -1px mix($bg_color,$borders_color,50%);
       }
       &:active { border: 1px solid $selected_borders_color; }
-      &:insensitive { @include button(insensitive, $noedge: true); }
+      &:insensitive { @include button(insensitive, $edge: none); }
       &:backdrop { @include button(backdrop);
         &:active{ border-color: $selected_bg_color; }
         &:insensitive {
@@ -1487,14 +1526,14 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
   }
   &.slider {
     //FIXME: better gradient on the slider and hover state
-    @include button(normal, $noedge: true);
+    @include button(normal, $edge: none);
     border-radius: 50%;
     border-color: darken($borders_color,3%);
     box-shadow: inset 0 1px white,
                 inset 0 #{-2px} $bg_color,
                 inset 0 #{-1px} mix($bg_color,$borders_color,50%);
     &:hover {
-      @include button(hover, $noedge: true);
+      @include button(hover, $edge: none);
       border-color: darken($borders_color,3%);
       border-radius: 50%; // needed for double marks scales
       box-shadow: inset 0 1px white,
@@ -1526,12 +1565,10 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
     border-radius: 3px;
     border-color: $borders_color;
     background-color: mix($bg_color,$borders_color,60%);
-    box-shadow: inset 1px 1px transparentize(black, 0.9),
-                $widget_edge;
+    box-shadow: inset 1px 1px transparentize(black, 0.9);
     &.highlight {
       border-color: $selected_borders_color;
       background-color: $selected_bg_color;
-      box-shadow: $widget_edge;
       &:backdrop {
          border-color: $selected_bg_color;
          background-color: $selected_bg_color;
@@ -1541,7 +1578,6 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
     &:insensitive, &.hilight:insensitive {
       border-color: $insensitive_borders_color;
       background-color: $insensitive_bg_color;
-      box-shadow: $widget_edge;
     }
     &:backdrop {
       border-color: $backdrop_borders_color;
@@ -1622,8 +1658,7 @@ GtkProgressBar.trough {
   border-radius: 3px;
   border-color: $borders_color;
   background-color: mix($borders_color,$bg_color, 35%);
-  box-shadow: inset 1px 1px transparentize(black, 0.9),
-              $widget_edge;
+  box-shadow: inset 1px 1px transparentize(black, 0.9);
   &:backdrop{
     border-color: $backdrop_borders_color;
     background-color: mix($backdrop_borders_color,$backdrop_bg_color, 35%);
@@ -1731,7 +1766,7 @@ GtkScrolledWindow {
 .separator {
   // always disable separators
   // -GtkWidget-wide-separators: true;
-  color: $fg_color;
+  color: $borders_color;
 
   // Font and File button separators
   GtkFileChooserButton &,
@@ -1870,39 +1905,39 @@ GtkCalendar {
     .dialog-action-area .button {
       padding: 12px;
       border-radius: 0;
-      @include button(normal, $noedge: true);
+      @include button(normal, $edge: none);
       @extend %middle_button;
       &:hover {
-        @include button(hover, $noedge: true);
+        @include button(hover, $edge: none);
         @extend %middle_button;
       }
       &:active {
-        @include button(active, $noedge: true);
+        @include button(active, $edge: none);
         @extend %middle_button;
       }
       &:insensitive {
-        @include button(insensitive, $noedge: true);
+        @include button(insensitive, $edge: none);
         @extend %middle_button;
       }
       &:backdrop {
-        @include button(backdrop, $noedge: true);
+        @include button(backdrop, $edge: none);
         @extend %middle_button;
       }
       &:backdrop:insensitive {
-        @include button(backdrop-insensitive, $noedge: true);
+        @include button(backdrop-insensitive, $edge: none);
         @extend %middle_button;
       }
       @each $b_type, $b_color in (suggested-action, $suggested_color),
                                  (destructive-action, $destructive_color) {
         &.#{$b_type} {
-          @include button(normal, $b_color, white, $noedge: true);
+          @include button(normal, $b_color, white, $edge: none);
           @extend %middle_button;
           &:hover {
-            @include button(hover, $b_color, white, $noedge: true);
+            @include button(hover, $b_color, white, $edge: none);
             @extend %middle_button;
           }
           &:active {
-            @include button(active, $b_color, white, $noedge: true);
+            @include button(active, $b_color, white, $edge: none);
             @extend %middle_button;
           }
           &:backdrop {
@@ -1954,34 +1989,60 @@ GtkFileChooserDialog {
  * Sidebar *
  ***********/
 
-.sidebar,
-.sidebar .view {
-  border: none;
-  $_sidebar_bg: lighten($bg_color,5%);
-  background-color: $_sidebar_bg;
-  .scrollbar {
-    &.trough {
-      background-color: darken($bg_color,10%);
-      border-radius: 6px;
-      border-width: 2px;
-      border-color: transparent;
-    }
-    &.slider {
-      background-color: $_sidebar_bg;
-      &:hover { background-color: lighten($bg_color, 10%); }
-    }
-  }
+.sidebar {
+  border-width: 1px 0 0 0;
+  border-style: solid;
+  border-color: $borders_color;
+  &:dir(rtl) { border-width: 0 0 0 1px; }
   &:backdrop {
-    background-color: lighten($backdrop_bg_color,5%);
+    background-color: $bg_color;
   }
+
   &:selected {
-    background-color: $selected_bg_color;
+    @extend %selected_items;
   }
- .separator {
-    color: mix($_sidebar_bg,$borders_color,70%);
+}
+
+// Places sidebar is a special case, since the view here have to look like chrome not content, so we 
override text color
+GtkPlacesSidebar.sidebar .view {
+
+  color: $fg_color;
+  background-color: transparent;
+
+  .separator,
+  .separator:backdrop { @extend .separator; }
+
+  .image { // icons color
+    color: mix($fg_color, $bg_color, 70%);
+
+    &:selected {
+      color: mix($selected_fg_color, $selected_bg_color, 90%);
+    }
+  }
+
+  &:selected {
+    @extend %selected_items;
+  }
+}
+
+
+.sidebar-item {
+  padding: 10px 4px;
+  > .label {
+    padding-left: 6px;
+    padding-right: 6px;
+  }
+  &.needs-attention > .label {
+    @extend %needs_attention;
+    background-size: 6px 6px, 0 0;
   }
 }
 
+/*********
+ * Paned *
+ *********/
+
+
 GtkPaned {
   // This is actually the invisible area of the paned separator, not a margin...
   margin: 0 8px 8px 0; //drag area of the separator
@@ -2030,12 +2091,12 @@ GtkInfoBar {
   text-shadow: 0 1px darken($selected_bg_color, 10%);
   border-color: darken($selected_bg_color, 10%);
   .button {
-    @include button(normal, $selected_bg_color, $selected_fg_color, noedge);
-    &:hover { @include button(hover, $selected_bg_color, $selected_fg_color, noedge); }
-    &:active { @include button(active, $selected_bg_color, $selected_fg_color, noedge); }
-    &:insensitive { @include button(insensitive, $selected_bg_color, $selected_fg_color, noedge); }
-    &:backdrop { @include button(backdrop, $selected_bg_color, $selected_fg_color, noedge); }
-    &:backdrop:insensitive { @include button(backdrop-insensitive, $selected_bg_color, $selected_fg_color, 
noedge); }
+    @include button(normal, $selected_bg_color, $selected_fg_color, $edge: none);
+    &:hover { @include button(hover, $selected_bg_color, $selected_fg_color, $edge: none); }
+    &:active { @include button(active, $selected_bg_color, $selected_fg_color, $edge: none); }
+    &:insensitive { @include button(insensitive, $selected_bg_color, $selected_fg_color, $edge: none); }
+    &:backdrop { @include button(backdrop, $selected_bg_color, $selected_fg_color, $edge: none); }
+    &:backdrop:insensitive { @include button(backdrop-insensitive, $selected_bg_color, $selected_fg_color, 
$edge: none); }
   }
 }
 
diff --git a/gtk/theme/HighContrast/_drawing.scss b/gtk/theme/HighContrast/_drawing.scss
index d9e3b36..76073a7 100644
--- a/gtk/theme/HighContrast/_drawing.scss
+++ b/gtk/theme/HighContrast/_drawing.scss
@@ -2,9 +2,6 @@
 
 // generic drawing of more complex things
 
-$widget_edge: 0 1px $borders_edge; //outer hilight "used" on
-                                   //most widgets
-
 @mixin _shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) {
 //
 // Helper function to stack up to 4 box-shadows;
@@ -17,13 +14,26 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
 
 // entries
 
- mixin entry($t, $fc:$selected_bg_color, $noedge:false) {
+ function entry_focus_border($fc) {
+  @return $fc;
+}
+
+ function entry_focus_glow($fc) {
+  $_focus_glow_color: transparentize($fc,0.85);
+  @return inset 0 0 0 1px $_focus_glow_color;
+}
+
+ function entry_gradient($c) {
+  @return linear-gradient(to bottom, darken($c,3%), $c 90%);
+}
+
+ mixin entry($t, $fc:$selected_bg_color, $edge: $borders_edge) {
 //
 // Entries drawing function
 //
 // $t: entry type
 // $fc: focus color
-// $noedge: set to true not to draw the bottom edge hilight
+// $edge:none set to true not to draw the bottom edge hilight
 //
 // possible $t values:
 // normal, focus, insensitive, backdrop, backdrop-insensitive;
@@ -34,8 +44,7 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
   background-image: linear-gradient(to bottom,
                                     darken($base_color,3%),
                                     $base_color 90%);
-  $_entry_edge: $widget_edge;
-  @if $noedge { $_entry_edge: none; }
+  $_entry_edge: none;
   
   @if $t==normal {
     border-color: $borders_color;
@@ -92,14 +101,14 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
   }
 }
 
- mixin button($t, $c:$bg_color, $tc:$fg_color, $noedge:false ) {
+ mixin button($t, $c:$bg_color, $tc:$fg_color, $edge: $borders_color) {
 //
 // Button drawing function
 //
 // $t:  button type,
 // $c:  base button color for colored* types
 // $tc: optional text color for colored* types
-// $noedge: set to true not to draw the bottom edge hilight
+// $noedge:none set to true not to draw the bottom edge hilight
 //
 // possible $t values:
 // normal, hover, active, insensitive, insensitive-active,
@@ -253,34 +262,6 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
   
 }
 
- mixin trough($flat:false, $c:$bg_color, $tc:$fg_color, $noedge:false) {
-  color: mix($tc,$bg_color,80%);
-  @if $flat { background-image: linear-gradient(to bottom,$c); }
-  @else {
-    background-image: linear-gradient(to bottom,
-                                  mix(black,$c,15%) 5%,
-                                  mix(black,$c,10%) 20%,
-                                  mix(black,$c,10%) 90%,
-                                  $c
-                                  );
-  }
-
-  @if $c!=$bg_color { @include _button_border_color($c); }
-  @else { border-color: $borders_color; }
-  
-  @if $noedge==false { 
-    @if lightness($c) > 60% {
-      box-shadow: inset 0 -1px 0 $borders_edge,
-                  0 1px 0 $borders_edge;
-    }
-    @else {
-      box-shadow: inset 0 -1px 0 transparentize($borders_edge,0.5),
-                  0 1px 0 transparentize($borders_edge,0.5);
-    }
-  }
-
-}
-
 @mixin overshoot($p, $t:normal, $c:$fg_color) {
 //
 // overshoot
diff --git a/gtk/theme/HighContrast/gtk.css b/gtk/theme/HighContrast/gtk.css
index 3abb40f..aa534bc 100644
--- a/gtk/theme/HighContrast/gtk.css
+++ b/gtk/theme/HighContrast/gtk.css
@@ -203,7 +203,7 @@
   border-width: 1px;
   background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%);
   border-color: #7f7f7f;
-  box-shadow: inset 0 2px 2px -2px #7f7f7f, 0 1px #fff; }
+  box-shadow: inset 0 2px 2px -2px #7f7f7f; }
   .entry.flat, .entry.flat:focus {
     padding: 2px;
     background-color: transparent;
@@ -220,7 +220,7 @@
     border-width: 1px;
     background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%);
     border-color: #000;
-    box-shadow: inset 0 2px 2px -2px #7f7f7f, inset 0 0 2px 1px #cccccc, 0 1px #fff; }
+    box-shadow: inset 0 2px 2px -2px #7f7f7f, inset 0 0 2px 1px #cccccc; }
   .entry:insensitive {
     background-color: transparent;
     border-style: solid;
@@ -229,7 +229,7 @@
     color: #7f7f7f;
     border-color: #7f7f7f;
     background-image: linear-gradient(to bottom, white);
-    box-shadow: 0 1px #fff; }
+    box-shadow: none; }
   .entry:backdrop {
     background-color: transparent;
     border-style: solid;
@@ -277,13 +277,13 @@
     border-width: 1px;
     background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%);
     border-color: #7f7f7f;
-    box-shadow: inset 0 2px 2px -2px #7f7f7f, 0 1px #fff;
+    box-shadow: inset 0 2px 2px -2px #7f7f7f;
     background-image: linear-gradient(to bottom, #fff);
     border-bottom-color: #d8d8d8;
     box-shadow: none; }
     .linked.vertical .entry:focus {
-      border-color: entry_focus_border(#000);
-      box-shadow: entry_focus_glow(#000), 0 -1px 0 0 entry_focus_border(#000); }
+      border-color: #000;
+      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 -1px 0 0 #000; }
     .linked.vertical .entry:insensitive {
       background-color: transparent;
       border-style: solid;
@@ -292,7 +292,7 @@
       color: #7f7f7f;
       border-color: #7f7f7f;
       background-image: linear-gradient(to bottom, white);
-      box-shadow: 0 1px #fff;
+      box-shadow: none;
       border-bottom-color: #d8d8d8; }
       .linked.vertical .entry:insensitive:backdrop {
         background-color: transparent;
@@ -318,7 +318,7 @@
       border-width: 1px;
       background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%);
       border-color: #7f7f7f;
-      box-shadow: inset 0 2px 2px -2px #7f7f7f, 0 1px #fff;
+      box-shadow: inset 0 2px 2px -2px #7f7f7f;
       border-bottom-color: #d8d8d8; }
       .linked.vertical .entry:first-child:focus {
         background-color: transparent;
@@ -326,7 +326,7 @@
         border-width: 1px;
         background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%);
         border-color: #000;
-        box-shadow: inset 0 2px 2px -2px #7f7f7f, inset 0 0 2px 1px #cccccc, 0 1px #fff; }
+        box-shadow: inset 0 2px 2px -2px #7f7f7f, inset 0 0 2px 1px #cccccc; }
       .linked.vertical .entry:first-child:insensitive {
         background-color: transparent;
         border-style: solid;
@@ -335,7 +335,7 @@
         color: #7f7f7f;
         border-color: #7f7f7f;
         background-image: linear-gradient(to bottom, white);
-        box-shadow: 0 1px #fff;
+        box-shadow: none;
         border-bottom-color: gainsboro; }
         .linked.vertical .entry:first-child:insensitive:backdrop {
           background-color: transparent;
@@ -362,13 +362,13 @@
       border-width: 1px;
       background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%);
       border-color: #7f7f7f;
-      box-shadow: inset 0 2px 2px -2px #7f7f7f, 0 1px #fff;
+      box-shadow: inset 0 2px 2px -2px #7f7f7f;
       border-top-width: 0;
       background-image: linear-gradient(to bottom, #fff);
       box-shadow: none; }
       .linked.vertical .entry:last-child:focus {
-        border-color: entry_focus_border(#000);
-        box-shadow: entry_focus_glow(#000), 0 -1px 0 0 entry_focus_border(#000), _widget_edge(); }
+        border-color: #000;
+        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 -1px 0 0 #000; }
       .linked.vertical .entry:last-child:insensitive {
         background-color: transparent;
         border-style: solid;
@@ -377,7 +377,7 @@
         color: #7f7f7f;
         border-color: #7f7f7f;
         background-image: linear-gradient(to bottom, white);
-        box-shadow: 0 1px #fff; }
+        box-shadow: none; }
         .linked.vertical .entry:last-child:insensitive:backdrop {
           background-color: transparent;
           border-style: solid;
@@ -403,7 +403,7 @@
       border-width: 1px;
       background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%);
       border-color: #cc0000;
-      box-shadow: inset 0 2px 2px -2px #7f7f7f, inset 0 0 2px 1px #f4cccc, 0 1px #fff; }
+      box-shadow: inset 0 2px 2px -2px #7f7f7f, inset 0 0 2px 1px #f4cccc; }
     .entry.error:selected, .entry.error:selected:focus {
       background-color: #cc0000; }
   .entry.warning {
@@ -415,13 +415,18 @@
       border-width: 1px;
       background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%);
       border-color: #f57900;
-      box-shadow: inset 0 2px 2px -2px #7f7f7f, inset 0 0 2px 1px #fde4cc, 0 1px #fff; }
+      box-shadow: inset 0 2px 2px -2px #7f7f7f, inset 0 0 2px 1px #fde4cc; }
     .entry.warning:selected, .entry.warning:selected:focus {
       background-color: #f57900; }
 
 /***********
  * Buttons *
  ***********/
+ keyframes needs_attention {
+  from {
+    background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to(#000), 
to(transparent)); }
+  to {
+    background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#000), 
to(transparent)); } }
 .button {
   border-radius: 3px;
   transition: all 200ms ease-out;
@@ -677,6 +682,17 @@
   border-radius: 3px;
   border-style: solid; }
 
+.sidebar-item.needs-attention > .label {
+  animation: needs_attention 150ms ease-in;
+  background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#000), to(transparent)), 
-gtk-gradient(radial, center center, 0, center center, 0.5, to(#000), to(transparent));
+  background-size: 6px 6px, 6px 6px;
+  background-repeat: no-repeat;
+  background-position: right 3px, right 4px; }
+  .sidebar-item.needs-attention > .label:backdrop {
+    background-size: 6px 6px, 0 0; }
+  .sidebar-item.needs-attention > .label:dir(rtl) {
+    background-position: left 3px, left 4px; }
+
 .osd .button, .osd .button:hover, .osd .button:active, .osd .button:checked, .osd .button:insensitive, .osd 
.button:backdrop, .inline-toolbar .button, .inline-toolbar .button:backdrop, .linked .button, .linked 
.button:hover, .linked .button:active, .linked .button:checked, .linked .button:backdrop, .linked > 
GtkComboBox > .button:dir(ltr) {
   border-radius: 0;
   border-left-style: none; }
@@ -895,7 +911,9 @@ GtkComboBox {
     color: #7f7f7f; }
   GtkComboBox .menuitem {
     text-shadow: none; }
-  GtkComboBox .separator {
+  GtkComboBox .separator, GtkComboBox GtkPlacesSidebar.sidebar .view .separator, GtkPlacesSidebar.sidebar 
.view GtkComboBox .separator,
+  GtkComboBox GtkPlacesSidebar.sidebar .view .separator:backdrop,
+  GtkPlacesSidebar.sidebar .view GtkComboBox .separator:backdrop {
     -GtkWidget-wide-separators: true;
     -GtkWidget-horizontal-separator: 0;
     -GtkWidget-vertical-separator: 0; }
@@ -967,8 +985,10 @@ GtkComboBox {
     font-size: 80%;
     padding: 0 12px; }
   .titlebar .header-bar-separator, .titlebar > GtkBox > .separator.vertical,
+  GtkPlacesSidebar.sidebar .view .titlebar > GtkBox > .vertical.separator:backdrop,
   .header-bar .header-bar-separator,
-  .header-bar > GtkBox > .separator.vertical {
+  .header-bar > GtkBox > .separator.vertical,
+  GtkPlacesSidebar.sidebar .view .header-bar > GtkBox > .vertical.separator:backdrop {
     -GtkWidget-wide-separators: true;
     -GtkWidget-separator-width: 1px;
     border-width: 0 1px;
@@ -1185,7 +1205,7 @@ GtkTreeView.view.progressbar {
     box-shadow: none; }
   .popover > .list, .popover > .view, .popover > .toolbar {
     background-color: transparent; }
-  .popover .separator {
+  .popover .separator, .popover GtkPlacesSidebar.sidebar .view .separator, GtkPlacesSidebar.sidebar .view 
.popover .separator {
     color: #000;
     background-color: transparent;
     border: 0; }
@@ -1530,13 +1550,11 @@ GtkSwitch {
       color: white;
       border-color: #000;
       background-color: #000;
-      box-shadow: 0 1px #fff;
       text-shadow: 0 0 2px white; }
     GtkSwitch.trough:insensitive {
       color: #7f7f7f;
       border-color: #7f7f7f;
       background-color: white;
-      box-shadow: 0 1px #fff;
       text-shadow: none; }
     GtkSwitch.trough:backdrop {
       color: #000;
@@ -1736,13 +1754,12 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
     border-radius: 3px;
     border-color: #7f7f7f;
     background-color: #cbcbcb;
-    box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), 0 1px #fff; }
+    box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1); }
     .scale.trough.highlight,
     .scale.scale-has-marks-above.scale-has-marks-below.trough.highlight,
     .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.highlight {
       border-color: #000;
-      background-color: #000;
-      box-shadow: 0 1px #fff; }
+      background-color: #000; }
       .scale.trough.highlight:backdrop,
       .scale.scale-has-marks-above.scale-has-marks-below.trough.highlight:backdrop,
       .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.highlight:backdrop {
@@ -1755,8 +1772,7 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
     .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough:insensitive,
     .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.hilight:insensitive {
       border-color: #7f7f7f;
-      background-color: white;
-      box-shadow: 0 1px #fff; }
+      background-color: white; }
     .scale.trough:backdrop,
     .scale.scale-has-marks-above.scale-has-marks-below.trough:backdrop,
     .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough:backdrop {
@@ -1807,7 +1823,7 @@ GtkProgressBar.trough {
   border-radius: 3px;
   border-color: #7f7f7f;
   background-color: #d2d2d2;
-  box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), 0 1px #fff; }
+  box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1); }
   GtkProgressBar.trough:backdrop {
     border-color: #8b8b8b;
     background-color: #d6d6d6;
@@ -1836,7 +1852,7 @@ GtkLevelBar.vertical {
   border-width: 1px;
   background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%);
   border-color: #7f7f7f;
-  box-shadow: inset 0 2px 2px -2px #7f7f7f, 0 1px #fff; }
+  box-shadow: inset 0 2px 2px -2px #7f7f7f; }
   .level-bar.trough:backdrop {
     background-color: transparent;
     border-style: solid;
@@ -1876,11 +1892,11 @@ GtkLevelBar.vertical {
     .level-bar.fill-block.empty-fill-block:backdrop {
       border-color: rgba(0, 0, 0, 0.15); }
 
-.view:selected, .view:selected:focus, .view:selected:hover, GtkLabel:selected, GtkLabel:selected:focus, 
GtkLabel:selected:hover, GtkLabel:backdrop:selected, .entry:selected, .entry:selected:focus, 
.menuitem.button.flat:selected {
+.view:selected, .view:selected:focus, .view:selected:hover, GtkLabel:selected, GtkLabel:selected:focus, 
GtkLabel:selected:hover, GtkLabel:backdrop:selected, .entry:selected, .entry:selected:focus, 
.menuitem.button.flat:selected, .sidebar:selected, GtkPlacesSidebar.sidebar .view:selected {
   background-color: #000;
   color: #fff;
   outline-color: rgba(255, 255, 255, 0.3); }
-  .view:backdrop:selected, GtkLabel:backdrop:selected, .entry:backdrop:selected, 
.menuitem.button.flat:backdrop:selected {
+  .view:backdrop:selected, GtkLabel:backdrop:selected, .entry:backdrop:selected, 
.menuitem.button.flat:backdrop:selected, .sidebar:backdrop:selected, GtkPlacesSidebar.sidebar 
.view:backdrop:selected {
     color: #fff; }
 
 /**********
@@ -1902,9 +1918,14 @@ GtkScrolledWindow .frame {
 GtkScrolledWindow GtkViewport.frame {
   border-style: none; }
 
-.separator {
-  color: #000; }
-  GtkFileChooserButton .separator, GtkFontButton .separator {
+.separator, GtkPlacesSidebar.sidebar .view .separator,
+GtkPlacesSidebar.sidebar .view .separator:backdrop {
+  color: #7f7f7f; }
+  GtkFileChooserButton .separator, GtkFileChooserButton GtkPlacesSidebar.sidebar .view .separator, 
GtkPlacesSidebar.sidebar .view GtkFileChooserButton .separator,
+  GtkFileChooserButton GtkPlacesSidebar.sidebar .view .separator:backdrop,
+  GtkPlacesSidebar.sidebar .view GtkFileChooserButton .separator:backdrop, GtkFontButton .separator, 
GtkFontButton GtkPlacesSidebar.sidebar .view .separator, GtkPlacesSidebar.sidebar .view GtkFontButton 
.separator,
+  GtkFontButton GtkPlacesSidebar.sidebar .view .separator:backdrop,
+  GtkPlacesSidebar.sidebar .view GtkFontButton .separator:backdrop {
     -GtkWidget-wide-separators: true;
     -GtkWidget-horizontal-separator: 0;
     -GtkWidget-vertical-separator: 0; }
@@ -2151,32 +2172,34 @@ GtkFileChooserDialog .dialog-action-box {
 /***********
  * Sidebar *
  ***********/
-.sidebar,
-.sidebar .view {
-  border: none;
-  background-color: white; }
-  .sidebar .scrollbar.trough,
-  .sidebar .view .scrollbar.trough {
-    background-color: #e6e6e6;
-    border-radius: 6px;
-    border-width: 2px;
-    border-color: transparent; }
-  .sidebar .scrollbar.slider,
-  .sidebar .view .scrollbar.slider {
-    background-color: white; }
-    .sidebar .scrollbar.slider:hover,
-    .sidebar .view .scrollbar.slider:hover {
-      background-color: white; }
-  .sidebar:backdrop,
-  .sidebar .view:backdrop {
-    background-color: white; }
-  .sidebar:selected,
-  .sidebar .view:selected {
-    background-color: #000; }
-  .sidebar .separator,
-  .sidebar .view .separator {
-    color: #d8d8d8; }
+.sidebar {
+  border-width: 1px 0 0 0;
+  border-style: solid;
+  border-color: #7f7f7f; }
+  .sidebar:dir(rtl) {
+    border-width: 0 0 0 1px; }
+  .sidebar:backdrop {
+    background-color: #fff; }
+
+GtkPlacesSidebar.sidebar .view {
+  color: #000;
+  background-color: transparent; }
+  GtkPlacesSidebar.sidebar .view .image {
+    color: #4c4c4c; }
+    GtkPlacesSidebar.sidebar .view .image:selected {
+      color: #e5e5e5; }
+
+.sidebar-item {
+  padding: 10px 4px; }
+  .sidebar-item > .label {
+    padding-left: 6px;
+    padding-right: 6px; }
+  .sidebar-item.needs-attention > .label {
+    background-size: 6px 6px, 0 0; }
 
+/*********
+ * Paned *
+ *********/
 GtkPaned {
   margin: 0 8px 8px 0; }
   GtkPaned:dir(rtl) {
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]