[gtk+] Hight Contrast: scrollbars

From: Jakub Steiner <jimmac src gnome org>
To: commits-list gnome org
Cc:
Subject: [gtk+] Hight Contrast: scrollbars
Date: Fri, 18 Mar 2016 12:54:17 +0000 (UTC)
commit a076df852b51981d099bd2a6e81470b653ead150
Author: Jakub Steiner <jimmac gmail com>
Date:   Fri Mar 18 13:53:30 2016 +0100

    Hight Contrast: scrollbars
    
    https://bugzilla.gnome.org/show_bug.cgi?id=763797

 gtk/theme/HighContrast/_colors.scss              |    7 +
 gtk/theme/HighContrast/_common.scss              |  194 ++++++++++++++++------
 gtk/theme/HighContrast/gtk-contained-inverse.css |  175 +++++++++++++++-----
 gtk/theme/HighContrast/gtk-contained.css         |  173 +++++++++++++++-----
 4 files changed, 421 insertions(+), 128 deletions(-)
---
diff --git a/gtk/theme/HighContrast/_colors.scss b/gtk/theme/HighContrast/_colors.scss
index 30716d1..d3d3b44 100644
--- a/gtk/theme/HighContrast/_colors.scss
+++ b/gtk/theme/HighContrast/_colors.scss
@@ -16,6 +16,11 @@ $borders_color: mix($bg_color,$fg_color,50%);
 $borders_edge: if($variant == 'light', #fff, #000);
 $link_color: $selected_bg_color;
 
+$scrollbar_bg_color: if($variant == 'light', mix($bg_color, $fg_color, 95%), mix($base_color, $bg_color, 
60%));
+$scrollbar_slider_color: mix($fg_color, $bg_color, 60%);
+$scrollbar_slider_hover_color: mix($fg_color, $bg_color, 80%);
+$scrollbar_slider_active_color: if($variant=='light', darken($selected_bg_color, 10%), 
lighten($selected_bg_color, 10%));
+
 $suggested_color: #4a90d9;
 $warning_color: #f57900;
 $error_color: #cc0000;
@@ -38,6 +43,8 @@ $backdrop_bg_color: $bg_color;
 $backdrop_fg_color: $fg_color;
 $backdrop_borders_color: mix($borders_color, $bg_color, 90%);
 $backdrop_dark_fill: mix($fg_color, $bg_color, 30%);
+$backdrop_scrollbar_bg_color: darken($backdrop_bg_color, 3%);
+$backdrop_scrollbar_slider_color: mix($backdrop_fg_color, $backdrop_bg_color, 40%);
 
 //apps rely on some named colors to be exported
 /* GTK NAMED COLORS */
diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss
index d42ae3e..42d8cc1 100644
--- a/gtk/theme/HighContrast/_common.scss
+++ b/gtk/theme/HighContrast/_common.scss
@@ -1765,82 +1765,178 @@ notebook {
 /**************
  * Scrollbars *
  **************/
-
 scrollbar {
-  background-clip: padding-box;
-  background-image: none;
-  border-style: solid;
-  -GtkScrollbar-has-backward-stepper: false;
-  -GtkScrollbar-has-forward-stepper: false;
-  -GtkRange-slider-width: 20;
-  -GtkScrollbar-min-slider-length: 42; // minimum size for the slider.
-                                       // sadly can't be in '.slider'
-                                       // where it belongs
+  $_slider_min_length: 40px;
 
-  trough { @extend junction; }
+  // disable steppers
+  @at-root * {
+    -GtkScrollbar-has-backward-stepper: false;
+    -GtkScrollbar-has-forward-stepper: false;
+  }
 
-  $_slider_margin: 3px;
-  $_slider_fine_tune_margin: 4px;
+  background-color: $scrollbar_bg_color;
+  transition: 300ms $ease-out-quad;
 
-  button {
-    border: none;
+  // scrollbar border
+  &.top { border-bottom: 1px solid $borders_color; }
+  &.bottom { border-top: 1px solid $borders_color; }
+  &.left { border-right: 1px solid $borders_color; }
+  &.right { border-left: 1px solid $borders_color; }
+
+  &:backdrop {
+    background-color: $backdrop_scrollbar_bg_color;
+    border-color: $backdrop_borders_color;
   }
-  & slider {
-    border-radius: 20px;
-    border: 5px solid transparent; //margin
-    background-color: mix($bg_color, $fg_color, 50%);
-    &:backdrop, &:disabled {
-      background-color: mix($bg_color, $fg_color, 90%);
-    }
-    &:hover {
-      background-color: mix($bg_color, $fg_color, 30%);
-    }
-    &:hover:active {
-      background-color: $selected_bg_color;
-    }
-    &.fine-tune {
-      border-width: 8px;
-      &:hover:active {
-        background-color: $selected_bg_color;
-      }
+
+  // slider
+  slider {
+    min-width: 14px;
+    min-height: 14px;
+    margin: -1px;
+    border: 4px solid transparent;
+    border-radius: 12px;
+    background-clip: padding-box;
+    background-color: $scrollbar_slider_color;
+
+    &:hover { background-color: $scrollbar_slider_hover_color; }
+
+    &:hover:active { background-color: $scrollbar_slider_active_color; }
+
+    &:backdrop { background-color: $backdrop_scrollbar_slider_color; }
+
+    &:disabled { background-color: transparent; }
+  }
+
+  &.fine-tune {
+    slider {
+      min-width: 4px;
+      min-height: 4px;
     }
+
+    &.horizontal slider { border-width: 5px 4px; }
+    &.vertical slider { border-width: 4px 5px; }
   }
+
   &.overlay-indicator {
-    &:not(.dragging):not(.hovering) { // Overlay scrolling indicator
+    &:not(.dragging):not(.hovering) {
+      border-color: transparent;
       opacity: 0.4;
-
-      -GtkRange-slider-width: 5px;
+      background-color: transparent;
 
       slider {
         margin: 0;
+        min-width: 3px;
+        min-height: 3px;
+        background-color: $fg_color;
+        border: 1px solid if($variant == 'light', white, black);
+      }
+
+      button {
+        min-width: 5px;
+        min-height: 5px;
         background-color: $fg_color;
-        border: 1px solid white;
         background-clip: padding-box;
+        border-radius: 100%;
+        border: 1px solid if($variant == 'light', white, black);
+        -gtk-icon-source: none;
       }
 
-      trough {
-        border-style: none;
-        background-color: transparent;
+      &.horizontal {
+        slider {
+          margin: 0 2px;
+          min-width: $_slider_min_length;
+        }
+
+        button {
+          margin: 1px 2px;
+          min-width: 5px;
+        }
       }
 
-      // w/o the following margin tweaks the slider shrinks when hovering/dragging
-      &.vertical slider {
-        margin-top: $_slider_margin - 1px;
-        margin-bottom: $_slider_margin - 1px;
+      &.vertical {
+        slider {
+          margin: 2px 0;
+          min-height: $_slider_min_length;
+        }
+
+        button {
+          margin: 2px 1px;
+          min-height: 5px;
+        }
       }
+    }
 
-      &.horizontal slider {
-        margin-left: $_slider_margin - 1px;
-        margin-right: $_slider_margin - 1px;
+    &.dragging,
+    &.hovering { opacity: 0.8; }
+  }
+
+  &.horizontal slider { min-width: $_slider_min_length; }
+
+  &.vertical slider { min-height: $_slider_min_length; }
+
+  // button styling
+  button {
+    padding: 0;
+    min-width: 12px;
+    min-height: 12px;
+    border-style: none;
+    border-radius: 0;
+    transition-property: min-height, min-width, color;
+
+    @include button(undecorated);
+
+    color: $scrollbar_slider_color;
+
+    &:hover {
+      @include button(undecorated);
+
+      color: $scrollbar_slider_hover_color;
+    }
+    &:active, &:checked {
+      @include button(undecorated);
+
+      color: $scrollbar_slider_active_color;
+    }
+    &:disabled {
+      @include button(undecorated);
+
+      color: transparentize($scrollbar_slider_color, 0.8);
+    }
+    &:backdrop {
+      @include button(undecorated);
+
+      color: $backdrop_scrollbar_slider_color;
+
+      &:disabled {
+        @include button(undecorated);
+
+        color: transparentize($backdrop_scrollbar_slider_color, 0.8);
       }
+    }
+  }
 
+  // button icons
+  &.vertical {
+    button {
+      &.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
+
+      &.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
     }
+  }
 
-    &.dragging,
-    &.hovering { opacity: 0.7; }
+  &.horizontal {
+    button {
+      &.down { -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); }
+
+      &.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); }
+    }
   }
 }
 
+treeview ~ scrollbar.vertical {
+  border-top: 1px solid $borders_color;
+  margin-top: -1px;
+}
 
 /**********
  * Switch *
diff --git a/gtk/theme/HighContrast/gtk-contained-inverse.css 
b/gtk/theme/HighContrast/gtk-contained-inverse.css
index 35df3d6..55468c3 100644
--- a/gtk/theme/HighContrast/gtk-contained-inverse.css
+++ b/gtk/theme/HighContrast/gtk-contained-inverse.css
@@ -1891,48 +1891,147 @@ notebook {
  * Scrollbars *
  **************/
 scrollbar {
-  background-clip: padding-box;
-  background-image: none;
-  border-style: solid;
-  -GtkScrollbar-has-backward-stepper: false;
-  -GtkScrollbar-has-forward-stepper: false;
-  -GtkRange-slider-width: 20;
-  -GtkScrollbar-min-slider-length: 42; }
-  scrollbar button {
-    border: none; }
+  background-color: #0a0a0a;
+  transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
+  * {
+    -GtkScrollbar-has-backward-stepper: false;
+    -GtkScrollbar-has-forward-stepper: false; }
+  scrollbar.top {
+    border-bottom: 1px solid gray; }
+  scrollbar.bottom {
+    border-top: 1px solid gray; }
+  scrollbar.left {
+    border-right: 1px solid gray; }
+  scrollbar.right {
+    border-left: 1px solid gray; }
+  scrollbar:backdrop {
+    background-color: black;
+    border-color: #737373; }
   scrollbar slider {
-    border-radius: 20px;
-    border: 5px solid transparent;
-    background-color: gray; }
-    scrollbar slider:backdrop, scrollbar slider:disabled {
-      background-color: #1a1a1a; }
+    min-width: 14px;
+    min-height: 14px;
+    margin: -1px;
+    border: 4px solid transparent;
+    border-radius: 12px;
+    background-clip: padding-box;
+    background-color: #999999; }
     scrollbar slider:hover {
-      background-color: #b3b3b3; }
+      background-color: #cccccc; }
     scrollbar slider:hover:active {
-      background-color: #aaa; }
-    scrollbar slider.fine-tune {
-      border-width: 8px; }
-      scrollbar slider.fine-tune:hover:active {
-        background-color: #aaa; }
+      background-color: #c4c4c4; }
+    scrollbar slider:backdrop {
+      background-color: #666666; }
+    scrollbar slider:disabled {
+      background-color: transparent; }
+  scrollbar.fine-tune slider {
+    min-width: 4px;
+    min-height: 4px; }
+  scrollbar.fine-tune.horizontal slider {
+    border-width: 5px 4px; }
+  scrollbar.fine-tune.vertical slider {
+    border-width: 4px 5px; }
   scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
+    border-color: transparent;
     opacity: 0.4;
-    -GtkRange-slider-width: 5px; }
+    background-color: transparent; }
     scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider {
       margin: 0;
+      min-width: 3px;
+      min-height: 3px;
       background-color: #fff;
-      border: 1px solid white;
-      background-clip: padding-box; }
-    scrollbar.overlay-indicator:not(.dragging):not(.hovering) trough {
-      border-style: none;
-      background-color: transparent; }
-    scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider {
-      margin-top: 2px;
-      margin-bottom: 2px; }
+      border: 1px solid black; }
+    scrollbar.overlay-indicator:not(.dragging):not(.hovering) button {
+      min-width: 5px;
+      min-height: 5px;
+      background-color: #fff;
+      background-clip: padding-box;
+      border-radius: 100%;
+      border: 1px solid black;
+      -gtk-icon-source: none; }
     scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider {
-      margin-left: 2px;
-      margin-right: 2px; }
+      margin: 0 2px;
+      min-width: 40px; }
+    scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal button {
+      margin: 1px 2px;
+      min-width: 5px; }
+    scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider {
+      margin: 2px 0;
+      min-height: 40px; }
+    scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical button {
+      margin: 2px 1px;
+      min-height: 5px; }
   scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering {
-    opacity: 0.7; }
+    opacity: 0.8; }
+  scrollbar.horizontal slider {
+    min-width: 40px; }
+  scrollbar.vertical slider {
+    min-height: 40px; }
+  scrollbar button {
+    padding: 0;
+    min-width: 12px;
+    min-height: 12px;
+    border-style: none;
+    border-radius: 0;
+    transition-property: min-height, min-width, color;
+    border-width: 2px;
+    border-style: solid;
+    color: #fff;
+    background-color: transparent;
+    background-image: none;
+    border-color: transparent;
+    color: #999999; }
+    scrollbar button:hover {
+      border-width: 2px;
+      border-style: solid;
+      color: #fff;
+      background-color: transparent;
+      background-image: none;
+      border-color: transparent;
+      color: #cccccc; }
+    scrollbar button:active, scrollbar button:checked {
+      border-width: 2px;
+      border-style: solid;
+      color: #fff;
+      background-color: transparent;
+      background-image: none;
+      border-color: transparent;
+      color: #c4c4c4; }
+    scrollbar button:disabled {
+      border-width: 2px;
+      border-style: solid;
+      color: #fff;
+      background-color: transparent;
+      background-image: none;
+      border-color: transparent;
+      color: rgba(153, 153, 153, 0.2); }
+    scrollbar button:backdrop {
+      border-width: 2px;
+      border-style: solid;
+      color: #fff;
+      background-color: transparent;
+      background-image: none;
+      border-color: transparent;
+      color: #666666; }
+      scrollbar button:backdrop:disabled {
+        border-width: 2px;
+        border-style: solid;
+        color: #fff;
+        background-color: transparent;
+        background-image: none;
+        border-color: transparent;
+        color: rgba(102, 102, 102, 0.2); }
+  scrollbar.vertical button.down {
+    -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
+  scrollbar.vertical button.up {
+    -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); }
+  scrollbar.horizontal button.down {
+    -gtk-icon-source: -gtk-icontheme("pan-right-symbolic"); }
+  scrollbar.horizontal button.up {
+    -gtk-icon-source: -gtk-icontheme("pan-left-symbolic"); }
+
+treeview ~ scrollbar.vertical {
+  border-top: 1px solid gray;
+  margin-top: -1px; }
 
 /**********
  * Switch *
@@ -2672,16 +2771,12 @@ scrolledwindow undershoot.right {
   background-position: right center;
   border: none;
   box-shadow: none; }
-placessidebar junction, placessidebar scrollbar trough, scrollbar placessidebar trough,
-scrolledwindow junction,
-scrolledwindow scrollbar trough,
-scrollbar scrolledwindow trough {
+placessidebar junction,
+scrolledwindow junction {
   border-color: transparent;
   background-color: black; }
-  placessidebar junction:backdrop, placessidebar scrollbar trough:backdrop, scrollbar placessidebar 
trough:backdrop,
-  scrolledwindow junction:backdrop,
-  scrolledwindow scrollbar trough:backdrop,
-  scrollbar scrolledwindow trough:backdrop {
+  placessidebar junction:backdrop,
+  scrolledwindow junction:backdrop {
     background-color: transparent; }
 
 separator, placessidebar .view separator, placessidebar textview text separator, textview placessidebar text 
separator, placessidebar iconview separator,
diff --git a/gtk/theme/HighContrast/gtk-contained.css b/gtk/theme/HighContrast/gtk-contained.css
index cc78539..b7b69bf 100644
--- a/gtk/theme/HighContrast/gtk-contained.css
+++ b/gtk/theme/HighContrast/gtk-contained.css
@@ -1895,48 +1895,147 @@ notebook {
  * Scrollbars *
  **************/
 scrollbar {
-  background-clip: padding-box;
-  background-image: none;
-  border-style: solid;
-  -GtkScrollbar-has-backward-stepper: false;
-  -GtkScrollbar-has-forward-stepper: false;
-  -GtkRange-slider-width: 20;
-  -GtkScrollbar-min-slider-length: 42; }
-  scrollbar button {
-    border: none; }
+  background-color: #f2f2f2;
+  transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
+  * {
+    -GtkScrollbar-has-backward-stepper: false;
+    -GtkScrollbar-has-forward-stepper: false; }
+  scrollbar.top {
+    border-bottom: 1px solid gray; }
+  scrollbar.bottom {
+    border-top: 1px solid gray; }
+  scrollbar.left {
+    border-right: 1px solid gray; }
+  scrollbar.right {
+    border-left: 1px solid gray; }
+  scrollbar:backdrop {
+    background-color: #f7f7f7;
+    border-color: #8d8d8d; }
   scrollbar slider {
-    border-radius: 20px;
-    border: 5px solid transparent;
-    background-color: gray; }
-    scrollbar slider:backdrop, scrollbar slider:disabled {
-      background-color: #e6e6e6; }
+    min-width: 14px;
+    min-height: 14px;
+    margin: -1px;
+    border: 4px solid transparent;
+    border-radius: 12px;
+    background-clip: padding-box;
+    background-color: #666666; }
     scrollbar slider:hover {
-      background-color: #4d4d4d; }
+      background-color: #333333; }
     scrollbar slider:hover:active {
-      background-color: #000; }
-    scrollbar slider.fine-tune {
-      border-width: 8px; }
-      scrollbar slider.fine-tune:hover:active {
-        background-color: #000; }
+      background-color: black; }
+    scrollbar slider:backdrop {
+      background-color: #999999; }
+    scrollbar slider:disabled {
+      background-color: transparent; }
+  scrollbar.fine-tune slider {
+    min-width: 4px;
+    min-height: 4px; }
+  scrollbar.fine-tune.horizontal slider {
+    border-width: 5px 4px; }
+  scrollbar.fine-tune.vertical slider {
+    border-width: 4px 5px; }
   scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
+    border-color: transparent;
     opacity: 0.4;
-    -GtkRange-slider-width: 5px; }
+    background-color: transparent; }
     scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider {
       margin: 0;
+      min-width: 3px;
+      min-height: 3px;
+      background-color: #000;
+      border: 1px solid white; }
+    scrollbar.overlay-indicator:not(.dragging):not(.hovering) button {
+      min-width: 5px;
+      min-height: 5px;
       background-color: #000;
+      background-clip: padding-box;
+      border-radius: 100%;
       border: 1px solid white;
-      background-clip: padding-box; }
-    scrollbar.overlay-indicator:not(.dragging):not(.hovering) trough {
-      border-style: none;
-      background-color: transparent; }
-    scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider {
-      margin-top: 2px;
-      margin-bottom: 2px; }
+      -gtk-icon-source: none; }
     scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider {
-      margin-left: 2px;
-      margin-right: 2px; }
+      margin: 0 2px;
+      min-width: 40px; }
+    scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal button {
+      margin: 1px 2px;
+      min-width: 5px; }
+    scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider {
+      margin: 2px 0;
+      min-height: 40px; }
+    scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical button {
+      margin: 2px 1px;
+      min-height: 5px; }
   scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering {
-    opacity: 0.7; }
+    opacity: 0.8; }
+  scrollbar.horizontal slider {
+    min-width: 40px; }
+  scrollbar.vertical slider {
+    min-height: 40px; }
+  scrollbar button {
+    padding: 0;
+    min-width: 12px;
+    min-height: 12px;
+    border-style: none;
+    border-radius: 0;
+    transition-property: min-height, min-width, color;
+    border-width: 2px;
+    border-style: solid;
+    color: #000;
+    background-color: transparent;
+    background-image: none;
+    border-color: transparent;
+    color: #666666; }
+    scrollbar button:hover {
+      border-width: 2px;
+      border-style: solid;
+      color: #000;
+      background-color: transparent;
+      background-image: none;
+      border-color: transparent;
+      color: #333333; }
+    scrollbar button:active, scrollbar button:checked {
+      border-width: 2px;
+      border-style: solid;
+      color: #000;
+      background-color: transparent;
+      background-image: none;
+      border-color: transparent;
+      color: black; }
+    scrollbar button:disabled {
+      border-width: 2px;
+      border-style: solid;
+      color: #000;
+      background-color: transparent;
+      background-image: none;
+      border-color: transparent;
+      color: rgba(102, 102, 102, 0.2); }
+    scrollbar button:backdrop {
+      border-width: 2px;
+      border-style: solid;
+      color: #000;
+      background-color: transparent;
+      background-image: none;
+      border-color: transparent;
+      color: #999999; }
+      scrollbar button:backdrop:disabled {
+        border-width: 2px;
+        border-style: solid;
+        color: #000;
+        background-color: transparent;
+        background-image: none;
+        border-color: transparent;
+        color: rgba(153, 153, 153, 0.2); }
+  scrollbar.vertical button.down {
+    -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
+  scrollbar.vertical button.up {
+    -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); }
+  scrollbar.horizontal button.down {
+    -gtk-icon-source: -gtk-icontheme("pan-right-symbolic"); }
+  scrollbar.horizontal button.up {
+    -gtk-icon-source: -gtk-icontheme("pan-left-symbolic"); }
+
+treeview ~ scrollbar.vertical {
+  border-top: 1px solid gray;
+  margin-top: -1px; }
 
 /**********
  * Switch *
@@ -2679,16 +2778,12 @@ scrolledwindow undershoot.right {
   background-position: right center;
   border: none;
   box-shadow: none; }
-placessidebar junction, placessidebar scrollbar trough, scrollbar placessidebar trough,
-scrolledwindow junction,
-scrolledwindow scrollbar trough,
-scrollbar scrolledwindow trough {
+placessidebar junction,
+scrolledwindow junction {
   border-color: transparent;
   background-color: #f2f2f2; }
-  placessidebar junction:backdrop, placessidebar scrollbar trough:backdrop, scrollbar placessidebar 
trough:backdrop,
-  scrolledwindow junction:backdrop,
-  scrolledwindow scrollbar trough:backdrop,
-  scrollbar scrolledwindow trough:backdrop {
+  placessidebar junction:backdrop,
+  scrolledwindow junction:backdrop {
     background-color: transparent; }
 
 separator, placessidebar .view separator, placessidebar textview text separator, textview placessidebar text 
separator, placessidebar iconview separator,
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]