From da31b2af0dad1a5d3de02eda528dba6ee96ab650 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Thu, 3 Dec 2015 00:20:09 +0100 Subject: [PATCH] gtk 3.14: update scrollbar styling --- common/gtk-3.0/3.14/gtk-contained-dark.css | 32 ++++++++++++------- common/gtk-3.0/3.14/gtk-contained-darker.css | 32 ++++++++++++------- .../gtk-3.0/3.14/gtk-contained-solid-dark.css | 32 ++++++++++++------- .../3.14/gtk-contained-solid-darker.css | 32 ++++++++++++------- common/gtk-3.0/3.14/gtk-contained-solid.css | 32 ++++++++++++------- common/gtk-3.0/3.14/gtk-contained.css | 32 ++++++++++++------- common/gtk-3.0/3.14/sass/_common.scss | 29 +++++++++++++---- 7 files changed, 143 insertions(+), 78 deletions(-) diff --git a/common/gtk-3.0/3.14/gtk-contained-dark.css b/common/gtk-3.0/3.14/gtk-contained-dark.css index 558e2b9..4405a9f 100644 --- a/common/gtk-3.0/3.14/gtk-contained-dark.css +++ b/common/gtk-3.0/3.14/gtk-contained-dark.css @@ -1564,18 +1564,29 @@ column-header .button, column-header .button:hover, column-header .button:active -GtkRange-trough-border: 0; -GtkScrollbar-has-backward-stepper: false; -GtkScrollbar-has-forward-stepper: false; - -GtkRange-slider-width: 11; + -GtkRange-slider-width: 13; -GtkScrollbar-min-slider-length: 42; -GtkRange-stepper-spacing: 0; -GtkRange-trough-under-steppers: 1; } .scrollbar .button { border: none; } + .scrollbar.trough { + background-color: #3e434f; + border-left: 1px solid #2b2e39; } + .scrollbar.trough.horizontal { + border-left: none; + border-top: 1px solid #2b2e39; } .scrollbar.slider { - border-radius: 20px; + border-radius: 21px 20px 20px 21px; border: 3px solid transparent; + border-left-width: 4px; background-color: #767b87; } + .scrollbar.slider.horizontal { + border-radius: 21px 21px 20px 20px; + border-left-width: 3px; + border-top-width: 4px; } .scrollbar.slider:hover { - background-color: #a5abb5; } + background-color: #5f6470; } .scrollbar.slider:prelight:active { background-color: #5294E2; } .scrollbar.slider.fine-tune { @@ -1585,11 +1596,10 @@ column-header .button, column-header .button:hover, column-header .button:active .scrollbar.slider:insensitive { background-color: transparent; } -.scrollbars-junction, .scrollbar.trough, -.scrollbars-junction.frame, -.frame.scrollbar.trough { +.scrollbars-junction, +.scrollbars-junction.frame { border-color: transparent; - background-color: #404552; } + background-color: #3e434f; } /********** * Switch * @@ -3356,8 +3366,7 @@ GraniteWidgetsStaticNotebook .frame { background-color: #5294E2; } .source-list .scrollbar.trough, -.source-list .scrollbars-junction, -.source-list .scrollbar.trough { +.source-list .scrollbars-junction { border-image: none; border-color: transparent; background-color: #383C4A; @@ -3831,9 +3840,8 @@ GeditFileBrowserWidget { background-color: rgba(53, 57, 69, 0.95); } .maximized GeditFileBrowserWidget { background-color: #353945; } - GeditFileBrowserWidget .scrollbars-junction, GeditFileBrowserWidget .scrollbar.trough, - GeditFileBrowserWidget .scrollbars-junction.frame, - GeditFileBrowserWidget .frame.scrollbar.trough { + GeditFileBrowserWidget .scrollbars-junction, + GeditFileBrowserWidget .scrollbars-junction.frame { border-color: transparent; background-color: transparent; } GeditFileBrowserWidget .horizontal { diff --git a/common/gtk-3.0/3.14/gtk-contained-darker.css b/common/gtk-3.0/3.14/gtk-contained-darker.css index d241efb..fc3a17e 100644 --- a/common/gtk-3.0/3.14/gtk-contained-darker.css +++ b/common/gtk-3.0/3.14/gtk-contained-darker.css @@ -1567,18 +1567,29 @@ column-header .button, column-header .button:hover, column-header .button:active -GtkRange-trough-border: 0; -GtkScrollbar-has-backward-stepper: false; -GtkScrollbar-has-forward-stepper: false; - -GtkRange-slider-width: 11; + -GtkRange-slider-width: 13; -GtkScrollbar-min-slider-length: 42; -GtkRange-stepper-spacing: 0; -GtkRange-trough-under-steppers: 1; } .scrollbar .button { border: none; } + .scrollbar.trough { + background-color: #fcfcfc; + border-left: 1px solid #dcdfe3; } + .scrollbar.trough.horizontal { + border-left: none; + border-top: 1px solid #dcdfe3; } .scrollbar.slider { - border-radius: 20px; + border-radius: 21px 20px 20px 21px; border: 3px solid transparent; + border-left-width: 4px; background-color: #b8babf; } + .scrollbar.slider.horizontal { + border-radius: 21px 21px 20px 20px; + border-left-width: 3px; + border-top-width: 4px; } .scrollbar.slider:hover { - background-color: #8a8e96; } + background-color: #cfd1d4; } .scrollbar.slider:prelight:active { background-color: #5294E2; } .scrollbar.slider.fine-tune { @@ -1588,11 +1599,10 @@ column-header .button, column-header .button:hover, column-header .button:active .scrollbar.slider:insensitive { background-color: transparent; } -.scrollbars-junction, .scrollbar.trough, -.scrollbars-junction.frame, -.frame.scrollbar.trough { +.scrollbars-junction, +.scrollbars-junction.frame { border-color: transparent; - background-color: #ffffff; } + background-color: #fcfcfc; } /********** * Switch * @@ -3359,8 +3369,7 @@ GraniteWidgetsStaticNotebook .frame { background-color: #5294E2; } .source-list .scrollbar.trough, -.source-list .scrollbars-junction, -.source-list .scrollbar.trough { +.source-list .scrollbars-junction { border-image: none; border-color: transparent; background-color: #F5F6F7; @@ -3824,9 +3833,8 @@ GeditFileBrowserWidget { background-color: rgba(53, 57, 69, 0.95); } .maximized GeditFileBrowserWidget { background-color: #353945; } - GeditFileBrowserWidget .scrollbars-junction, GeditFileBrowserWidget .scrollbar.trough, - GeditFileBrowserWidget .scrollbars-junction.frame, - GeditFileBrowserWidget .frame.scrollbar.trough { + GeditFileBrowserWidget .scrollbars-junction, + GeditFileBrowserWidget .scrollbars-junction.frame { border-color: transparent; background-color: transparent; } GeditFileBrowserWidget .horizontal { diff --git a/common/gtk-3.0/3.14/gtk-contained-solid-dark.css b/common/gtk-3.0/3.14/gtk-contained-solid-dark.css index 5431d03..8c7b56e 100644 --- a/common/gtk-3.0/3.14/gtk-contained-solid-dark.css +++ b/common/gtk-3.0/3.14/gtk-contained-solid-dark.css @@ -1564,18 +1564,29 @@ column-header .button, column-header .button:hover, column-header .button:active -GtkRange-trough-border: 0; -GtkScrollbar-has-backward-stepper: false; -GtkScrollbar-has-forward-stepper: false; - -GtkRange-slider-width: 11; + -GtkRange-slider-width: 13; -GtkScrollbar-min-slider-length: 42; -GtkRange-stepper-spacing: 0; -GtkRange-trough-under-steppers: 1; } .scrollbar .button { border: none; } + .scrollbar.trough { + background-color: #3e434f; + border-left: 1px solid #2b2e39; } + .scrollbar.trough.horizontal { + border-left: none; + border-top: 1px solid #2b2e39; } .scrollbar.slider { - border-radius: 20px; + border-radius: 21px 20px 20px 21px; border: 3px solid transparent; + border-left-width: 4px; background-color: #767b87; } + .scrollbar.slider.horizontal { + border-radius: 21px 21px 20px 20px; + border-left-width: 3px; + border-top-width: 4px; } .scrollbar.slider:hover { - background-color: #a5abb5; } + background-color: #5f6470; } .scrollbar.slider:prelight:active { background-color: #5294E2; } .scrollbar.slider.fine-tune { @@ -1585,11 +1596,10 @@ column-header .button, column-header .button:hover, column-header .button:active .scrollbar.slider:insensitive { background-color: transparent; } -.scrollbars-junction, .scrollbar.trough, -.scrollbars-junction.frame, -.frame.scrollbar.trough { +.scrollbars-junction, +.scrollbars-junction.frame { border-color: transparent; - background-color: #404552; } + background-color: #3e434f; } /********** * Switch * @@ -3356,8 +3366,7 @@ GraniteWidgetsStaticNotebook .frame { background-color: #5294E2; } .source-list .scrollbar.trough, -.source-list .scrollbars-junction, -.source-list .scrollbar.trough { +.source-list .scrollbars-junction { border-image: none; border-color: transparent; background-color: #383C4A; @@ -3831,9 +3840,8 @@ GeditFileBrowserWidget { background-color: #353945; } .maximized GeditFileBrowserWidget { background-color: #353945; } - GeditFileBrowserWidget .scrollbars-junction, GeditFileBrowserWidget .scrollbar.trough, - GeditFileBrowserWidget .scrollbars-junction.frame, - GeditFileBrowserWidget .frame.scrollbar.trough { + GeditFileBrowserWidget .scrollbars-junction, + GeditFileBrowserWidget .scrollbars-junction.frame { border-color: transparent; background-color: transparent; } GeditFileBrowserWidget .horizontal { diff --git a/common/gtk-3.0/3.14/gtk-contained-solid-darker.css b/common/gtk-3.0/3.14/gtk-contained-solid-darker.css index 3081334..a98bb19 100644 --- a/common/gtk-3.0/3.14/gtk-contained-solid-darker.css +++ b/common/gtk-3.0/3.14/gtk-contained-solid-darker.css @@ -1567,18 +1567,29 @@ column-header .button, column-header .button:hover, column-header .button:active -GtkRange-trough-border: 0; -GtkScrollbar-has-backward-stepper: false; -GtkScrollbar-has-forward-stepper: false; - -GtkRange-slider-width: 11; + -GtkRange-slider-width: 13; -GtkScrollbar-min-slider-length: 42; -GtkRange-stepper-spacing: 0; -GtkRange-trough-under-steppers: 1; } .scrollbar .button { border: none; } + .scrollbar.trough { + background-color: #fcfcfc; + border-left: 1px solid #dcdfe3; } + .scrollbar.trough.horizontal { + border-left: none; + border-top: 1px solid #dcdfe3; } .scrollbar.slider { - border-radius: 20px; + border-radius: 21px 20px 20px 21px; border: 3px solid transparent; + border-left-width: 4px; background-color: #b8babf; } + .scrollbar.slider.horizontal { + border-radius: 21px 21px 20px 20px; + border-left-width: 3px; + border-top-width: 4px; } .scrollbar.slider:hover { - background-color: #8a8e96; } + background-color: #cfd1d4; } .scrollbar.slider:prelight:active { background-color: #5294E2; } .scrollbar.slider.fine-tune { @@ -1588,11 +1599,10 @@ column-header .button, column-header .button:hover, column-header .button:active .scrollbar.slider:insensitive { background-color: transparent; } -.scrollbars-junction, .scrollbar.trough, -.scrollbars-junction.frame, -.frame.scrollbar.trough { +.scrollbars-junction, +.scrollbars-junction.frame { border-color: transparent; - background-color: #ffffff; } + background-color: #fcfcfc; } /********** * Switch * @@ -3359,8 +3369,7 @@ GraniteWidgetsStaticNotebook .frame { background-color: #5294E2; } .source-list .scrollbar.trough, -.source-list .scrollbars-junction, -.source-list .scrollbar.trough { +.source-list .scrollbars-junction { border-image: none; border-color: transparent; background-color: #F5F6F7; @@ -3824,9 +3833,8 @@ GeditFileBrowserWidget { background-color: #353945; } .maximized GeditFileBrowserWidget { background-color: #353945; } - GeditFileBrowserWidget .scrollbars-junction, GeditFileBrowserWidget .scrollbar.trough, - GeditFileBrowserWidget .scrollbars-junction.frame, - GeditFileBrowserWidget .frame.scrollbar.trough { + GeditFileBrowserWidget .scrollbars-junction, + GeditFileBrowserWidget .scrollbars-junction.frame { border-color: transparent; background-color: transparent; } GeditFileBrowserWidget .horizontal { diff --git a/common/gtk-3.0/3.14/gtk-contained-solid.css b/common/gtk-3.0/3.14/gtk-contained-solid.css index 901b99e..8b899bb 100644 --- a/common/gtk-3.0/3.14/gtk-contained-solid.css +++ b/common/gtk-3.0/3.14/gtk-contained-solid.css @@ -1567,18 +1567,29 @@ column-header .button, column-header .button:hover, column-header .button:active -GtkRange-trough-border: 0; -GtkScrollbar-has-backward-stepper: false; -GtkScrollbar-has-forward-stepper: false; - -GtkRange-slider-width: 11; + -GtkRange-slider-width: 13; -GtkScrollbar-min-slider-length: 42; -GtkRange-stepper-spacing: 0; -GtkRange-trough-under-steppers: 1; } .scrollbar .button { border: none; } + .scrollbar.trough { + background-color: #fcfcfc; + border-left: 1px solid #dcdfe3; } + .scrollbar.trough.horizontal { + border-left: none; + border-top: 1px solid #dcdfe3; } .scrollbar.slider { - border-radius: 20px; + border-radius: 21px 20px 20px 21px; border: 3px solid transparent; + border-left-width: 4px; background-color: #b8babf; } + .scrollbar.slider.horizontal { + border-radius: 21px 21px 20px 20px; + border-left-width: 3px; + border-top-width: 4px; } .scrollbar.slider:hover { - background-color: #8a8e96; } + background-color: #cfd1d4; } .scrollbar.slider:prelight:active { background-color: #5294E2; } .scrollbar.slider.fine-tune { @@ -1588,11 +1599,10 @@ column-header .button, column-header .button:hover, column-header .button:active .scrollbar.slider:insensitive { background-color: transparent; } -.scrollbars-junction, .scrollbar.trough, -.scrollbars-junction.frame, -.frame.scrollbar.trough { +.scrollbars-junction, +.scrollbars-junction.frame { border-color: transparent; - background-color: #ffffff; } + background-color: #fcfcfc; } /********** * Switch * @@ -3359,8 +3369,7 @@ GraniteWidgetsStaticNotebook .frame { background-color: #5294E2; } .source-list .scrollbar.trough, -.source-list .scrollbars-junction, -.source-list .scrollbar.trough { +.source-list .scrollbars-junction { border-image: none; border-color: transparent; background-color: #F5F6F7; @@ -3824,9 +3833,8 @@ GeditFileBrowserWidget { background-color: #353945; } .maximized GeditFileBrowserWidget { background-color: #353945; } - GeditFileBrowserWidget .scrollbars-junction, GeditFileBrowserWidget .scrollbar.trough, - GeditFileBrowserWidget .scrollbars-junction.frame, - GeditFileBrowserWidget .frame.scrollbar.trough { + GeditFileBrowserWidget .scrollbars-junction, + GeditFileBrowserWidget .scrollbars-junction.frame { border-color: transparent; background-color: transparent; } GeditFileBrowserWidget .horizontal { diff --git a/common/gtk-3.0/3.14/gtk-contained.css b/common/gtk-3.0/3.14/gtk-contained.css index d373e7f..1235099 100644 --- a/common/gtk-3.0/3.14/gtk-contained.css +++ b/common/gtk-3.0/3.14/gtk-contained.css @@ -1567,18 +1567,29 @@ column-header .button, column-header .button:hover, column-header .button:active -GtkRange-trough-border: 0; -GtkScrollbar-has-backward-stepper: false; -GtkScrollbar-has-forward-stepper: false; - -GtkRange-slider-width: 11; + -GtkRange-slider-width: 13; -GtkScrollbar-min-slider-length: 42; -GtkRange-stepper-spacing: 0; -GtkRange-trough-under-steppers: 1; } .scrollbar .button { border: none; } + .scrollbar.trough { + background-color: #fcfcfc; + border-left: 1px solid #dcdfe3; } + .scrollbar.trough.horizontal { + border-left: none; + border-top: 1px solid #dcdfe3; } .scrollbar.slider { - border-radius: 20px; + border-radius: 21px 20px 20px 21px; border: 3px solid transparent; + border-left-width: 4px; background-color: #b8babf; } + .scrollbar.slider.horizontal { + border-radius: 21px 21px 20px 20px; + border-left-width: 3px; + border-top-width: 4px; } .scrollbar.slider:hover { - background-color: #8a8e96; } + background-color: #cfd1d4; } .scrollbar.slider:prelight:active { background-color: #5294E2; } .scrollbar.slider.fine-tune { @@ -1588,11 +1599,10 @@ column-header .button, column-header .button:hover, column-header .button:active .scrollbar.slider:insensitive { background-color: transparent; } -.scrollbars-junction, .scrollbar.trough, -.scrollbars-junction.frame, -.frame.scrollbar.trough { +.scrollbars-junction, +.scrollbars-junction.frame { border-color: transparent; - background-color: #ffffff; } + background-color: #fcfcfc; } /********** * Switch * @@ -3359,8 +3369,7 @@ GraniteWidgetsStaticNotebook .frame { background-color: #5294E2; } .source-list .scrollbar.trough, -.source-list .scrollbars-junction, -.source-list .scrollbar.trough { +.source-list .scrollbars-junction { border-image: none; border-color: transparent; background-color: #F5F6F7; @@ -3824,9 +3833,8 @@ GeditFileBrowserWidget { background-color: rgba(53, 57, 69, 0.95); } .maximized GeditFileBrowserWidget { background-color: #353945; } - GeditFileBrowserWidget .scrollbars-junction, GeditFileBrowserWidget .scrollbar.trough, - GeditFileBrowserWidget .scrollbars-junction.frame, - GeditFileBrowserWidget .frame.scrollbar.trough { + GeditFileBrowserWidget .scrollbars-junction, + GeditFileBrowserWidget .scrollbars-junction.frame { border-color: transparent; background-color: transparent; } GeditFileBrowserWidget .horizontal { diff --git a/common/gtk-3.0/3.14/sass/_common.scss b/common/gtk-3.0/3.14/sass/_common.scss index 3a823f7..aaafff7 100644 --- a/common/gtk-3.0/3.14/sass/_common.scss +++ b/common/gtk-3.0/3.14/sass/_common.scss @@ -1844,6 +1844,8 @@ column-header.button.dnd { // for treeview-like derive widgets * Scrollbars * **************/ +$_scrollbar_bg_color: darken($base_color, 1%); + .scrollbar { background-clip: padding-box; background-image: none; @@ -1851,7 +1853,7 @@ column-header.button.dnd { // for treeview-like derive widgets -GtkRange-trough-border: 0; -GtkScrollbar-has-backward-stepper: false; -GtkScrollbar-has-forward-stepper: false; - -GtkRange-slider-width: 11; + -GtkRange-slider-width: 13; -GtkScrollbar-min-slider-length: 42; // minimum size for the slider. // sadly can't be in '.slider' // where it belongs @@ -1861,13 +1863,28 @@ column-header.button.dnd { // for treeview-like derive widgets .button { border: none; } - &.trough { @extend .scrollbars-junction; } + &.trough { + background-color: $_scrollbar_bg_color; + border-left: 1px solid $borders_color; + + &.horizontal { + border-left: none; + border-top: 1px solid $borders_color; + } + } &.slider { - border-radius: 20px; + border-radius: 21px 20px 20px 21px; border: 3px solid transparent; //margin :/ - background-color: mix($bg_color, $fg_color, 60%); + border-left-width: 4px; + background-color: mix($fg_color, $bg_color, 40%); + + &.horizontal { + border-radius: 21px 21px 20px 20px; + border-left-width: 3px; + border-top-width: 4px; + } &:hover { - background-color: mix($bg_color, $fg_color, 30%); + background-color: mix($fg_color, $bg_color, 25%); } &:prelight:active { background-color: $selected_bg_color; @@ -1887,7 +1904,7 @@ column-header.button.dnd { // for treeview-like derive widgets .scrollbars-junction, .scrollbars-junction.frame { // the small square between two scrollbars border-color: transparent; - background-color: $base_color; + background-color: $_scrollbar_bg_color; }