[gtk+] Adwaita: simplify scrollbar styling

From: Lapo Calamandrei <lapo src gnome org>
To: commits-list gnome org
Cc:
Subject: [gtk+] Adwaita: simplify scrollbar styling
Date: Thu, 13 Nov 2014 10:28:14 +0000 (UTC)
commit c9d0bd8a7244c8cc5a13e96193ebd1f0f62d07b9
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Thu Nov 13 11:26:40 2014 +0100

    Adwaita: simplify scrollbar styling
    
    By the use of slider margins. In the process darken the overlay
    scrollbar trough in fine-tune mode to make it noticiable.

 gtk/resources/theme/Adwaita/_common.scss           |   68 +++++++-------------
 gtk/resources/theme/Adwaita/gtk-contained-dark.css |   60 +++++++-----------
 gtk/resources/theme/Adwaita/gtk-contained.css      |   60 +++++++-----------
 3 files changed, 69 insertions(+), 119 deletions(-)
---
diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss
index fe89e06..c3d7457 100644
--- a/gtk/resources/theme/Adwaita/_common.scss
+++ b/gtk/resources/theme/Adwaita/_common.scss
@@ -1898,7 +1898,6 @@ column-header.button.dnd { // for treeview-like derive widgets
   }
 
   // slider coloring
-  %scrollbar_slider_coloring,
   .slider {
     border-color: transparent;
     border-style: solid;
@@ -1919,11 +1918,10 @@ column-header.button.dnd { // for treeview-like derive widgets
   &.overlay-indicator { // Overlay scrolling indicator
     -GtkRange-slider-width: 8px;
 
-    &.vertical .slider,
-    &.horizontal .slider {
+    .slider {
       background-color: transparentize($fg_color, 0.7);
       border-width: 2px;
-      border-radius: 30px;
+      border-radius: 100px;
     }
 
     .trough {
@@ -1935,53 +1933,38 @@ column-header.button.dnd { // for treeview-like derive widgets
     &.hovering {
       -GtkRange-slider-width: 13;
 
-      &.vertical {
-        @extend %scrollbar_vertical_sizing;
-
-        .slider {
-          @extend %scrollbar_slider_coloring;
+      .slider { border-width: 1px; }
 
-          border-width: 1px 1px 1px 2px; // see comments in the sizing part
-          &:dir(rtl) { border-width: 1px 2px 1px 1px; }
-        }
+      .trough {
+        border-color: transparentize($borders_color, 0.3);
+        background-color: transparentize($scrollbar_bg_color, 0.3);
       }
 
-      &.horizontal {
-        @extend %scrollbar_horizontal_sizing;
+      &.fine-tune {
 
-        .slider {
-          @extend %scrollbar_slider_coloring;
+        .slider { border-width: 3px; }
 
-          border-width: 2px 1px 1px 1px;
-         }
-      }
-
-      .trough {
-        border-color: transparentize($borders_color, 0.3);
-        background-color: transparentize($scrollbar_bg_color, 0.3);
+        .trough { background-color: if($variant=='light', darken($scrollbar_bg_color, 3%), 
lighten($scrollbar_bg_color, 3%)); }
       }
     }
   }
 
-  // sizing
-  %scrollbar_vertical_sizing,
+  // borders and margins
+  .slider {
+    border-width: 3px;
+    border-radius: 100px;
+  }
+
+  &.fine-tune .slider { border-width: 4px; }
+
   &.vertical {
-    .slider {
-      border-width: 3px 3px 3px 4px; // This is used as a margin actually, it's uneven since the
-                                     // trough border needs to be compensated
-      border-radius: 6px;
-      border-top-left-radius: 7px 6px;    // uneven vertical/horizontal radius since borders are uneven
-      border-bottom-left-radius: 7px 6px; //
 
-      &.fine-tune { border-width: 4px 4px 4px 5px; }
+    .slider {
+      margin-left: 1px;
 
       &:dir(rtl) {
-        border-width: 3px 4px 3px 3px;
-        border-radius: 6px;
-        border-top-right-radius: 7px 6px;
-        border-bottom-right-radius: 7px 6px;
-
-        &.fine-tune { border-width: 4px 5px 4px 4px; }
+        margin-left: 0;
+        margin-right: 1px;
       }
     }
 
@@ -1995,15 +1978,10 @@ column-header.button.dnd { // for treeview-like derive widgets
     }
   }
 
-  %scrollbar_horizontal_sizing,
   &.horizontal {
-    .slider {
-      border-width: 4px 3px 3px 3px;
-      border-radius: 6px;
-      border-top-right-radius: 7px 5px; // This is actually bogus, to workaround a gtk+ border radius 
drawing issue
-      border-top-left-radius: 6px 7px;
 
-      &.fine-tune { border-width: 5px 4px 4px 4px; }
+    .slider {
+      margin-top: 1px;
     }
 
     .trough { border-top-style: solid; }
diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css 
b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
index 116e26b..d910b87 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
@@ -2408,71 +2408,57 @@ column-header .titlebar .button.titlebutton,
     .scrollbar .trough:backdrop {
       background-color: #323737;
       border-color: #1e2222; }
-  .scrollbar.overlay-indicator.dragging.vertical .slider, .scrollbar.overlay-indicator.hovering.vertical 
.slider, .scrollbar.overlay-indicator.dragging.horizontal .slider, 
.scrollbar.overlay-indicator.hovering.horizontal .slider,
   .scrollbar .slider {
     border-color: transparent;
     border-style: solid;
     background-color: #818584;
     background-clip: padding-box; }
-    .scrollbar.overlay-indicator.dragging.vertical .slider:hover, 
.scrollbar.overlay-indicator.hovering.vertical .slider:hover, 
.scrollbar.overlay-indicator.dragging.horizontal .slider:hover, 
.scrollbar.overlay-indicator.hovering.horizontal .slider:hover,
     .scrollbar .slider:hover {
       background-color: #a5a8a6; }
-    .scrollbar.overlay-indicator.dragging.vertical .slider:prelight:active, 
.scrollbar.overlay-indicator.hovering.vertical .slider:prelight:active, 
.scrollbar.overlay-indicator.dragging.horizontal .slider:prelight:active, 
.scrollbar.overlay-indicator.hovering.horizontal .slider:prelight:active,
     .scrollbar .slider:prelight:active {
       background-color: #2a76c6; }
-    .scrollbar.overlay-indicator.dragging.vertical .slider:backdrop, 
.scrollbar.overlay-indicator.hovering.vertical .slider:backdrop, 
.scrollbar.overlay-indicator.dragging.horizontal .slider:backdrop, 
.scrollbar.overlay-indicator.hovering.horizontal .slider:backdrop,
     .scrollbar .slider:backdrop {
       background-color: #5d6161; }
-    .scrollbar.overlay-indicator.dragging.vertical .slider:insensitive, 
.scrollbar.overlay-indicator.hovering.vertical .slider:insensitive, 
.scrollbar.overlay-indicator.dragging.horizontal .slider:insensitive, 
.scrollbar.overlay-indicator.hovering.horizontal .slider:insensitive,
     .scrollbar .slider:insensitive {
       background-color: transparent; }
   .scrollbar.overlay-indicator {
     -GtkRange-slider-width: 8px; }
-    .scrollbar.overlay-indicator.vertical .slider, .scrollbar.overlay-indicator.horizontal .slider {
+    .scrollbar.overlay-indicator .slider {
       background-color: rgba(238, 238, 236, 0.3);
       border-width: 2px;
-      border-radius: 30px; }
+      border-radius: 100px; }
     .scrollbar.overlay-indicator .trough {
       border-color: transparent;
       background-color: transparent; }
     .scrollbar.overlay-indicator.dragging, .scrollbar.overlay-indicator.hovering {
       -GtkRange-slider-width: 13; }
-      .scrollbar.overlay-indicator.dragging.vertical .slider, .scrollbar.overlay-indicator.hovering.vertical 
.slider {
-        border-width: 1px 1px 1px 2px; }
-        .scrollbar.overlay-indicator.dragging.vertical .slider:dir(rtl), 
.scrollbar.overlay-indicator.hovering.vertical .slider:dir(rtl) {
-          border-width: 1px 2px 1px 1px; }
-      .scrollbar.overlay-indicator.dragging.horizontal .slider, 
.scrollbar.overlay-indicator.hovering.horizontal .slider {
-        border-width: 2px 1px 1px 1px; }
+      .scrollbar.overlay-indicator.dragging .slider, .scrollbar.overlay-indicator.hovering .slider {
+        border-width: 1px; }
       .scrollbar.overlay-indicator.dragging .trough, .scrollbar.overlay-indicator.hovering .trough {
         border-color: rgba(28, 31, 31, 0.7);
         background-color: rgba(40, 44, 44, 0.7); }
-  .scrollbar .scrollbar.overlay-indicator.dragging.vertical .slider, .scrollbar 
.scrollbar.overlay-indicator.hovering.vertical .slider, .scrollbar.vertical .slider {
-    border-width: 3px 3px 3px 4px;
-    border-radius: 6px;
-    border-top-left-radius: 7px 6px;
-    border-bottom-left-radius: 7px 6px; }
-    .scrollbar .scrollbar.overlay-indicator.dragging.vertical .slider.fine-tune, .scrollbar 
.scrollbar.overlay-indicator.hovering.vertical .slider.fine-tune, .scrollbar.vertical .slider.fine-tune {
-      border-width: 4px 4px 4px 5px; }
-    .scrollbar .scrollbar.overlay-indicator.dragging.vertical .slider:dir(rtl), .scrollbar 
.scrollbar.overlay-indicator.hovering.vertical .slider:dir(rtl), .scrollbar.vertical .slider:dir(rtl) {
-      border-width: 3px 4px 3px 3px;
-      border-radius: 6px;
-      border-top-right-radius: 7px 6px;
-      border-bottom-right-radius: 7px 6px; }
-      .scrollbar .scrollbar.overlay-indicator.dragging.vertical .slider:dir(rtl).fine-tune, .scrollbar 
.scrollbar.overlay-indicator.hovering.vertical .slider:dir(rtl).fine-tune, .scrollbar.vertical 
.slider:dir(rtl).fine-tune {
-        border-width: 4px 5px 4px 4px; }
-  .scrollbar .scrollbar.overlay-indicator.dragging.vertical .trough, .scrollbar 
.scrollbar.overlay-indicator.hovering.vertical .trough, .scrollbar.vertical .trough {
+      .scrollbar.overlay-indicator.dragging.fine-tune .slider, 
.scrollbar.overlay-indicator.hovering.fine-tune .slider {
+        border-width: 3px; }
+      .scrollbar.overlay-indicator.dragging.fine-tune .trough, 
.scrollbar.overlay-indicator.hovering.fine-tune .trough {
+        background-color: #2f3434; }
+  .scrollbar .slider {
+    border-width: 3px;
+    border-radius: 100px; }
+  .scrollbar.fine-tune .slider {
+    border-width: 4px; }
+  .scrollbar.vertical .slider {
+    margin-left: 1px; }
+    .scrollbar.vertical .slider:dir(rtl) {
+      margin-left: 0;
+      margin-right: 1px; }
+  .scrollbar.vertical .trough {
     border-left-style: solid; }
-    .scrollbar .scrollbar.overlay-indicator.dragging.vertical .trough:dir(rtl), .scrollbar 
.scrollbar.overlay-indicator.hovering.vertical .trough:dir(rtl), .scrollbar.vertical .trough:dir(rtl) {
+    .scrollbar.vertical .trough:dir(rtl) {
       border-left-style: none;
       border-right-style: solid; }
-  .scrollbar .scrollbar.overlay-indicator.dragging.horizontal .slider, .scrollbar 
.scrollbar.overlay-indicator.hovering.horizontal .slider, .scrollbar.horizontal .slider {
-    border-width: 4px 3px 3px 3px;
-    border-radius: 6px;
-    border-top-right-radius: 7px 5px;
-    border-top-left-radius: 6px 7px; }
-    .scrollbar .scrollbar.overlay-indicator.dragging.horizontal .slider.fine-tune, .scrollbar 
.scrollbar.overlay-indicator.hovering.horizontal .slider.fine-tune, .scrollbar.horizontal .slider.fine-tune {
-      border-width: 5px 4px 4px 4px; }
-  .scrollbar .scrollbar.overlay-indicator.dragging.horizontal .trough, .scrollbar 
.scrollbar.overlay-indicator.hovering.horizontal .trough, .scrollbar.horizontal .trough {
+  .scrollbar.horizontal .slider {
+    margin-top: 1px; }
+  .scrollbar.horizontal .trough {
     border-top-style: solid; }
 
 .scrollbars-junction,
diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css
index e2ee8f1..fea5d57 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained.css
@@ -2405,71 +2405,57 @@ column-header .titlebar .button.titlebutton,
     .scrollbar .trough:backdrop {
       background-color: #e5e5e5;
       border-color: #a8a8a8; }
-  .scrollbar.overlay-indicator.dragging.vertical .slider, .scrollbar.overlay-indicator.hovering.vertical 
.slider, .scrollbar.overlay-indicator.dragging.horizontal .slider, 
.scrollbar.overlay-indicator.hovering.horizontal .slider,
   .scrollbar .slider {
     border-color: transparent;
     border-style: solid;
     background-color: #a0a3a3;
     background-clip: padding-box; }
-    .scrollbar.overlay-indicator.dragging.vertical .slider:hover, 
.scrollbar.overlay-indicator.hovering.vertical .slider:hover, 
.scrollbar.overlay-indicator.dragging.horizontal .slider:hover, 
.scrollbar.overlay-indicator.hovering.horizontal .slider:hover,
     .scrollbar .slider:hover {
       background-color: #7a7e7f; }
-    .scrollbar.overlay-indicator.dragging.vertical .slider:prelight:active, 
.scrollbar.overlay-indicator.hovering.vertical .slider:prelight:active, 
.scrollbar.overlay-indicator.dragging.horizontal .slider:prelight:active, 
.scrollbar.overlay-indicator.hovering.horizontal .slider:prelight:active,
     .scrollbar .slider:prelight:active {
       background-color: #2a76c6; }
-    .scrollbar.overlay-indicator.dragging.vertical .slider:backdrop, 
.scrollbar.overlay-indicator.hovering.vertical .slider:backdrop, 
.scrollbar.overlay-indicator.dragging.horizontal .slider:backdrop, 
.scrollbar.overlay-indicator.hovering.horizontal .slider:backdrop,
     .scrollbar .slider:backdrop {
       background-color: #c6c7c8; }
-    .scrollbar.overlay-indicator.dragging.vertical .slider:insensitive, 
.scrollbar.overlay-indicator.hovering.vertical .slider:insensitive, 
.scrollbar.overlay-indicator.dragging.horizontal .slider:insensitive, 
.scrollbar.overlay-indicator.hovering.horizontal .slider:insensitive,
     .scrollbar .slider:insensitive {
       background-color: transparent; }
   .scrollbar.overlay-indicator {
     -GtkRange-slider-width: 8px; }
-    .scrollbar.overlay-indicator.vertical .slider, .scrollbar.overlay-indicator.horizontal .slider {
+    .scrollbar.overlay-indicator .slider {
       background-color: rgba(46, 52, 54, 0.3);
       border-width: 2px;
-      border-radius: 30px; }
+      border-radius: 100px; }
     .scrollbar.overlay-indicator .trough {
       border-color: transparent;
       background-color: transparent; }
     .scrollbar.overlay-indicator.dragging, .scrollbar.overlay-indicator.hovering {
       -GtkRange-slider-width: 13; }
-      .scrollbar.overlay-indicator.dragging.vertical .slider, .scrollbar.overlay-indicator.hovering.vertical 
.slider {
-        border-width: 1px 1px 1px 2px; }
-        .scrollbar.overlay-indicator.dragging.vertical .slider:dir(rtl), 
.scrollbar.overlay-indicator.hovering.vertical .slider:dir(rtl) {
-          border-width: 1px 2px 1px 1px; }
-      .scrollbar.overlay-indicator.dragging.horizontal .slider, 
.scrollbar.overlay-indicator.hovering.horizontal .slider {
-        border-width: 2px 1px 1px 1px; }
+      .scrollbar.overlay-indicator.dragging .slider, .scrollbar.overlay-indicator.hovering .slider {
+        border-width: 1px; }
       .scrollbar.overlay-indicator.dragging .trough, .scrollbar.overlay-indicator.hovering .trough {
         border-color: rgba(161, 161, 161, 0.7);
         background-color: rgba(219, 219, 219, 0.7); }
-  .scrollbar .scrollbar.overlay-indicator.dragging.vertical .slider, .scrollbar 
.scrollbar.overlay-indicator.hovering.vertical .slider, .scrollbar.vertical .slider {
-    border-width: 3px 3px 3px 4px;
-    border-radius: 6px;
-    border-top-left-radius: 7px 6px;
-    border-bottom-left-radius: 7px 6px; }
-    .scrollbar .scrollbar.overlay-indicator.dragging.vertical .slider.fine-tune, .scrollbar 
.scrollbar.overlay-indicator.hovering.vertical .slider.fine-tune, .scrollbar.vertical .slider.fine-tune {
-      border-width: 4px 4px 4px 5px; }
-    .scrollbar .scrollbar.overlay-indicator.dragging.vertical .slider:dir(rtl), .scrollbar 
.scrollbar.overlay-indicator.hovering.vertical .slider:dir(rtl), .scrollbar.vertical .slider:dir(rtl) {
-      border-width: 3px 4px 3px 3px;
-      border-radius: 6px;
-      border-top-right-radius: 7px 6px;
-      border-bottom-right-radius: 7px 6px; }
-      .scrollbar .scrollbar.overlay-indicator.dragging.vertical .slider:dir(rtl).fine-tune, .scrollbar 
.scrollbar.overlay-indicator.hovering.vertical .slider:dir(rtl).fine-tune, .scrollbar.vertical 
.slider:dir(rtl).fine-tune {
-        border-width: 4px 5px 4px 4px; }
-  .scrollbar .scrollbar.overlay-indicator.dragging.vertical .trough, .scrollbar 
.scrollbar.overlay-indicator.hovering.vertical .trough, .scrollbar.vertical .trough {
+      .scrollbar.overlay-indicator.dragging.fine-tune .slider, 
.scrollbar.overlay-indicator.hovering.fine-tune .slider {
+        border-width: 3px; }
+      .scrollbar.overlay-indicator.dragging.fine-tune .trough, 
.scrollbar.overlay-indicator.hovering.fine-tune .trough {
+        background-color: lightgray; }
+  .scrollbar .slider {
+    border-width: 3px;
+    border-radius: 100px; }
+  .scrollbar.fine-tune .slider {
+    border-width: 4px; }
+  .scrollbar.vertical .slider {
+    margin-left: 1px; }
+    .scrollbar.vertical .slider:dir(rtl) {
+      margin-left: 0;
+      margin-right: 1px; }
+  .scrollbar.vertical .trough {
     border-left-style: solid; }
-    .scrollbar .scrollbar.overlay-indicator.dragging.vertical .trough:dir(rtl), .scrollbar 
.scrollbar.overlay-indicator.hovering.vertical .trough:dir(rtl), .scrollbar.vertical .trough:dir(rtl) {
+    .scrollbar.vertical .trough:dir(rtl) {
       border-left-style: none;
       border-right-style: solid; }
-  .scrollbar .scrollbar.overlay-indicator.dragging.horizontal .slider, .scrollbar 
.scrollbar.overlay-indicator.hovering.horizontal .slider, .scrollbar.horizontal .slider {
-    border-width: 4px 3px 3px 3px;
-    border-radius: 6px;
-    border-top-right-radius: 7px 5px;
-    border-top-left-radius: 6px 7px; }
-    .scrollbar .scrollbar.overlay-indicator.dragging.horizontal .slider.fine-tune, .scrollbar 
.scrollbar.overlay-indicator.hovering.horizontal .slider.fine-tune, .scrollbar.horizontal .slider.fine-tune {
-      border-width: 5px 4px 4px 4px; }
-  .scrollbar .scrollbar.overlay-indicator.dragging.horizontal .trough, .scrollbar 
.scrollbar.overlay-indicator.hovering.horizontal .trough, .scrollbar.horizontal .trough {
+  .scrollbar.horizontal .slider {
+    margin-top: 1px; }
+  .scrollbar.horizontal .trough {
     border-top-style: solid; }
 
 .scrollbars-junction,
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]