[gtk+] Adwaita: initial overlay indicator styling

From: Lapo Calamandrei <lapo src gnome org>
To: commits-list gnome org
Cc:
Subject: [gtk+] Adwaita: initial overlay indicator styling
Date: Thu, 6 Nov 2014 16:23:07 +0000 (UTC)
commit d781599b0db3a5ca412041184a9fc687f63979e9
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Thu Nov 6 12:39:34 2014 +0100

    Adwaita: initial overlay indicator styling

 gtk/resources/theme/Adwaita/_common.scss           |   84 +++++++++++--------
 gtk/resources/theme/Adwaita/gtk-contained-dark.css |   61 ++++++++-------
 gtk/resources/theme/Adwaita/gtk-contained.css      |   61 ++++++++-------
 3 files changed, 113 insertions(+), 93 deletions(-)
---
diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss
index a30ac2a..d367684 100644
--- a/gtk/resources/theme/Adwaita/_common.scss
+++ b/gtk/resources/theme/Adwaita/_common.scss
@@ -1873,7 +1873,7 @@ column-header.button.dnd { // for treeview-like derive widgets
   background-clip: padding-box;
   background-image: none;
   border-style: solid;
-  -GtkRange-trough-border: 0;
+  -GtkRange-trough-border: 1;
   -GtkScrollbar-has-backward-stepper: false;
   -GtkScrollbar-has-forward-stepper: false;
   -GtkRange-slider-width: 13;
@@ -1886,27 +1886,63 @@ column-header.button.dnd { // for treeview-like derive widgets
   .button {
     border: none;
   }
-  &.trough { @extend .scrollbars-junction; }
-  &.slider {
+
+  .trough {
+    @extend .scrollbars-junction;
+    &.right { border-right: 1px solid $borders_color; }
+  }
+
+  .slider {
     border-radius: 20px;
     border: 3px solid transparent; //margin :/
     background-color: mix($bg_color, $fg_color, 70%);
-    &:hover {
-      background-color: mix($bg_color, $fg_color, 50%);
-    }
-    &:prelight:active {
-      background-color: $selected_bg_color;
-    }
+
+    &:hover { background-color: mix($bg_color, $fg_color, 50%); }
+
+    &:prelight:active { background-color: $selected_bg_color; }
+
     &.fine-tune {
       border-width: 5px;
-      &:prelight:active {
-        background-color: $selected_bg_color;
-      }
+      &:prelight:active { background-color: $selected_bg_color; }
     }
-    &:backdrop, &:insensitive {
+
+    &:backdrop,
+    &:insensitive {
       background-color: mix($bg_color, $fg_color, 90%);
     }
   }
+
+  .sidebar &.overlay-indicator,
+  &.overlay-indicator {  // overlay scrollbars
+    -GtkRange-slider-width: 8px;
+
+    .slider {
+      border-width: 2px;
+      background-color: transparentize($fg_color, 0.8);
+    }
+
+    .trough {
+      background-color: transparent;
+    }
+
+    &.hovering,
+    &.dragging {
+      -GtkRange-slider-width: 15px;
+
+      .slider { 
+        border-width: 3px;
+        background-color: transparentize($fg_color, 0.7);
+        &:active { background-color: $fg_color; }
+      }
+
+      .trough {
+        border: none;     // to override sidebar styling
+        border-radius: 0; //
+        background-color: if($variant == 'light', transparentize($fg_color, 0.9),
+                                                  transparentize($fg_color, 0.95));
+      }
+    }
+  }
 }
 
 
@@ -3166,25 +3202,3 @@ GtkVolumeButton.button { padding: 8px; }
 .monospace {
   font: Monospace;
 }
-
-/* Overlay scrollbars */
-
-.scrollbar.overlay-indicator.dragging,
-.scrollbar.overlay-indicator.hovering {
-  -GtkRange-slider-width: 15;
-}
-
-.scrollbar.overlay-indicator.dragging.trough,
-.scrollbar.overlay-indicator.hovering.trough {
-  background-color: transparentize(black, 0.9);
-}
-
-.sidebar .scrollbar.overlay-indicator,
-.scrollbar.overlay-indicator {
-  -GtkRange-slider-width: 10;
-}
-
-.sidebar .scrollbar.overlay-indicator .trough,
-.scrollbar.overlay-indicator.trough {
-  background-color: transparent;
-}
diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css 
b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
index 56b7f68..a31a443 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
@@ -2410,7 +2410,7 @@ column-header .titlebar .button.titlebutton,
   background-clip: padding-box;
   background-image: none;
   border-style: solid;
-  -GtkRange-trough-border: 0;
+  -GtkRange-trough-border: 1;
   -GtkScrollbar-has-backward-stepper: false;
   -GtkScrollbar-has-forward-stepper: false;
   -GtkRange-slider-width: 13;
@@ -2421,29 +2421,49 @@ column-header .titlebar .button.titlebutton,
   .scrollbar .titlebar .button.titlebutton,
   .titlebar .scrollbar .button.titlebutton {
     border: none; }
-  .scrollbar.slider {
+  .scrollbar .trough.right {
+    border-right: 1px solid #1c1f1f; }
+  .scrollbar .slider {
     border-radius: 20px;
     border: 3px solid transparent;
     background-color: #6f7372; }
-    .scrollbar.slider:hover {
+    .scrollbar .slider:hover {
       background-color: #939695; }
-    .scrollbar.slider:prelight:active {
+    .scrollbar .slider:prelight:active {
       background-color: #215d9c; }
-    .scrollbar.slider.fine-tune {
+    .scrollbar .slider.fine-tune {
       border-width: 5px; }
-      .scrollbar.slider.fine-tune:prelight:active {
+      .scrollbar .slider.fine-tune:prelight:active {
         background-color: #215d9c; }
-    .scrollbar.slider:backdrop, .scrollbar.slider:insensitive {
+    .scrollbar .slider:backdrop, .scrollbar .slider:insensitive {
       background-color: #4b5050; }
-
-.scrollbars-junction, .scrollbar.trough,
+  .sidebar .scrollbar.overlay-indicator, .scrollbar.overlay-indicator {
+    -GtkRange-slider-width: 8px; }
+    .sidebar .scrollbar.overlay-indicator .slider, .scrollbar.overlay-indicator .slider {
+      border-width: 2px;
+      background-color: rgba(238, 238, 236, 0.2); }
+    .sidebar .scrollbar.overlay-indicator .trough, .scrollbar.overlay-indicator .trough {
+      background-color: transparent; }
+    .sidebar .scrollbar.overlay-indicator.hovering, .sidebar .scrollbar.overlay-indicator.dragging, 
.scrollbar.overlay-indicator.hovering, .scrollbar.overlay-indicator.dragging {
+      -GtkRange-slider-width: 15px; }
+      .sidebar .scrollbar.overlay-indicator.hovering .slider, .sidebar .scrollbar.overlay-indicator.dragging 
.slider, .scrollbar.overlay-indicator.hovering .slider, .scrollbar.overlay-indicator.dragging .slider {
+        border-width: 3px;
+        background-color: rgba(238, 238, 236, 0.3); }
+        .sidebar .scrollbar.overlay-indicator.hovering .slider:active, .sidebar 
.scrollbar.overlay-indicator.dragging .slider:active, .scrollbar.overlay-indicator.hovering .slider:active, 
.scrollbar.overlay-indicator.dragging .slider:active {
+          background-color: #eeeeec; }
+      .sidebar .scrollbar.overlay-indicator.hovering .trough, .sidebar .scrollbar.overlay-indicator.dragging 
.trough, .scrollbar.overlay-indicator.hovering .trough, .scrollbar.overlay-indicator.dragging .trough {
+        border: none;
+        border-radius: 0;
+        background-color: rgba(238, 238, 236, 0.05); }
+
+.scrollbars-junction, .scrollbar .trough,
 .scrollbars-junction.frame,
-.frame.scrollbar.trough {
+.scrollbar .frame.trough {
   border-color: transparent;
   background-color: #2d3232; }
-  .scrollbars-junction:backdrop, .scrollbar.trough:backdrop,
+  .scrollbars-junction:backdrop, .scrollbar .trough:backdrop,
   .scrollbars-junction.frame:backdrop,
-  .frame.scrollbar.trough:backdrop {
+  .scrollbar .frame.trough:backdrop {
     background-color: transparent; }
 
 /**********
@@ -4270,23 +4290,6 @@ GtkVolumeButton.button, .header-bar GtkVolumeButton.button.titlebutton,
 .monospace {
   font: Monospace; }
 
-/* Overlay scrollbars */
-.scrollbar.overlay-indicator.dragging,
-.scrollbar.overlay-indicator.hovering {
-  -GtkRange-slider-width: 15; }
-
-.scrollbar.overlay-indicator.dragging.trough,
-.scrollbar.overlay-indicator.hovering.trough {
-  background-color: rgba(0, 0, 0, 0.1); }
-
-.sidebar .scrollbar.overlay-indicator,
-.scrollbar.overlay-indicator {
-  -GtkRange-slider-width: 10; }
-
-.sidebar .scrollbar.overlay-indicator .trough,
-.scrollbar.overlay-indicator.trough {
-  background-color: transparent; }
-
 /* GTK NAMED COLORS
    ----------------
    use responsibly! */
diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css
index 99453bb..f9eca09 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained.css
@@ -2407,7 +2407,7 @@ column-header .titlebar .button.titlebutton,
   background-clip: padding-box;
   background-image: none;
   border-style: solid;
-  -GtkRange-trough-border: 0;
+  -GtkRange-trough-border: 1;
   -GtkScrollbar-has-backward-stepper: false;
   -GtkScrollbar-has-forward-stepper: false;
   -GtkRange-slider-width: 13;
@@ -2418,29 +2418,49 @@ column-header .titlebar .button.titlebutton,
   .scrollbar .titlebar .button.titlebutton,
   .titlebar .scrollbar .button.titlebutton {
     border: none; }
-  .scrollbar.slider {
+  .scrollbar .trough.right {
+    border-right: 1px solid #a1a1a1; }
+  .scrollbar .slider {
     border-radius: 20px;
     border: 3px solid transparent;
     background-color: #b3b5b6; }
-    .scrollbar.slider:hover {
+    .scrollbar .slider:hover {
       background-color: #8d9091; }
-    .scrollbar.slider:prelight:active {
+    .scrollbar .slider:prelight:active {
       background-color: #4a90d9; }
-    .scrollbar.slider.fine-tune {
+    .scrollbar .slider.fine-tune {
       border-width: 5px; }
-      .scrollbar.slider.fine-tune:prelight:active {
+      .scrollbar .slider.fine-tune:prelight:active {
         background-color: #4a90d9; }
-    .scrollbar.slider:backdrop, .scrollbar.slider:insensitive {
+    .scrollbar .slider:backdrop, .scrollbar .slider:insensitive {
       background-color: #d9dada; }
-
-.scrollbars-junction, .scrollbar.trough,
+  .sidebar .scrollbar.overlay-indicator, .scrollbar.overlay-indicator {
+    -GtkRange-slider-width: 8px; }
+    .sidebar .scrollbar.overlay-indicator .slider, .scrollbar.overlay-indicator .slider {
+      border-width: 2px;
+      background-color: rgba(46, 52, 54, 0.2); }
+    .sidebar .scrollbar.overlay-indicator .trough, .scrollbar.overlay-indicator .trough {
+      background-color: transparent; }
+    .sidebar .scrollbar.overlay-indicator.hovering, .sidebar .scrollbar.overlay-indicator.dragging, 
.scrollbar.overlay-indicator.hovering, .scrollbar.overlay-indicator.dragging {
+      -GtkRange-slider-width: 15px; }
+      .sidebar .scrollbar.overlay-indicator.hovering .slider, .sidebar .scrollbar.overlay-indicator.dragging 
.slider, .scrollbar.overlay-indicator.hovering .slider, .scrollbar.overlay-indicator.dragging .slider {
+        border-width: 3px;
+        background-color: rgba(46, 52, 54, 0.3); }
+        .sidebar .scrollbar.overlay-indicator.hovering .slider:active, .sidebar 
.scrollbar.overlay-indicator.dragging .slider:active, .scrollbar.overlay-indicator.hovering .slider:active, 
.scrollbar.overlay-indicator.dragging .slider:active {
+          background-color: #2e3436; }
+      .sidebar .scrollbar.overlay-indicator.hovering .trough, .sidebar .scrollbar.overlay-indicator.dragging 
.trough, .scrollbar.overlay-indicator.hovering .trough, .scrollbar.overlay-indicator.dragging .trough {
+        border: none;
+        border-radius: 0;
+        background-color: rgba(46, 52, 54, 0.1); }
+
+.scrollbars-junction, .scrollbar .trough,
 .scrollbars-junction.frame,
-.frame.scrollbar.trough {
+.scrollbar .frame.trough {
   border-color: transparent;
   background-color: #e0e0e0; }
-  .scrollbars-junction:backdrop, .scrollbar.trough:backdrop,
+  .scrollbars-junction:backdrop, .scrollbar .trough:backdrop,
   .scrollbars-junction.frame:backdrop,
-  .frame.scrollbar.trough:backdrop {
+  .scrollbar .frame.trough:backdrop {
     background-color: transparent; }
 
 /**********
@@ -4432,23 +4452,6 @@ GtkVolumeButton.button, .header-bar GtkVolumeButton.button.titlebutton,
 .monospace {
   font: Monospace; }
 
-/* Overlay scrollbars */
-.scrollbar.overlay-indicator.dragging,
-.scrollbar.overlay-indicator.hovering {
-  -GtkRange-slider-width: 15; }
-
-.scrollbar.overlay-indicator.dragging.trough,
-.scrollbar.overlay-indicator.hovering.trough {
-  background-color: rgba(0, 0, 0, 0.1); }
-
-.sidebar .scrollbar.overlay-indicator,
-.scrollbar.overlay-indicator {
-  -GtkRange-slider-width: 10; }
-
-.sidebar .scrollbar.overlay-indicator .trough,
-.scrollbar.overlay-indicator.trough {
-  background-color: transparent; }
-
 /* GTK NAMED COLORS
    ----------------
    use responsibly! */
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]