From 3b607e4f5174834a66a81a7cdf7e14faed5836d6 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Wed, 2 Mar 2016 12:28:43 +0100 Subject: [PATCH] update scrollbar and scale styling --- common/gtk-3.0/3.20/gtk-dark.css | 95 ++++++++++++------- common/gtk-3.0/3.20/gtk-darker.css | 95 ++++++++++++------- common/gtk-3.0/3.20/gtk-solid-dark.css | 95 ++++++++++++------- common/gtk-3.0/3.20/gtk-solid-darker.css | 95 ++++++++++++------- common/gtk-3.0/3.20/gtk-solid.css | 95 ++++++++++++------- common/gtk-3.0/3.20/gtk.css | 95 ++++++++++++------- common/gtk-3.0/3.20/sass/_common.scss | 114 ++++++++++++++--------- 7 files changed, 429 insertions(+), 255 deletions(-) diff --git a/common/gtk-3.0/3.20/gtk-dark.css b/common/gtk-3.0/3.20/gtk-dark.css index fcd02a5..1e07c48 100644 --- a/common/gtk-3.0/3.20/gtk-dark.css +++ b/common/gtk-3.0/3.20/gtk-dark.css @@ -1630,20 +1630,26 @@ notebook { color: #5294E2; } * { - -GtkRange-slider-width: 13; - -GtkRange-trough-border: 0; -GtkScrollbar-has-backward-stepper: false; - -GtkScrollbar-has-forward-stepper: false; - -GtkScrollbar-min-slider-length: 42; - -GtkRange-stepper-spacing: 0; - -GtkRange-trough-under-steppers: 1; } + -GtkScrollbar-has-forward-stepper: false; } scrollbar button { border: none; } +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"); } + scrollbar.overlay-indicator:not(.dragging):not(.hovering) { - opacity: 0.4; - -GtkRange-slider-width: 6px; } + opacity: 0.4; } scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider { margin: 0; background-color: #a5abb5; @@ -1653,9 +1659,11 @@ scrollbar.overlay-indicator:not(.dragging):not(.hovering) { border-style: none; background-color: transparent; } scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider { + min-width: 4px; margin-top: 2px; margin-bottom: 2px; } scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider { + min-height: 4px; margin-left: 2px; margin-right: 2px; } @@ -1679,32 +1687,29 @@ scrollbar slider { border-radius: 100px; margin: 3px; } -scrollbar.fine-tune slider { +scrollbar.vertical.fine-tune slider { + min-width: 4px; margin: 4px; } scrollbar.vertical slider { - margin-left: 4px; } - scrollbar.vertical slider:dir(rtl) { - margin-left: 3px; - margin-right: 4px; } + min-height: 42px; + min-width: 6px; + margin: 3px; } -scrollbar.vertical.fine-tune .slider { - margin-left: 5px; } - scrollbar.vertical.fine-tune .slider:dir(rtl) { - margin-left: 4px; - margin-right: 5px; } - -scrollbar.vertical trough { +scrollbar.vertical trough:dir(ltr) { border-left-style: solid; } - scrollbar.vertical trough:dir(rtl) { - border-left-style: none; - border-right-style: solid; } -scrollbar.horizontal slider { - margin-top: 4px; } +scrollbar.vertical trough:dir(rtl) { + border-right-style: solid; } scrollbar.horizontal.fine-tune slider { - margin-top: 5px; } + min-height: 4px; + margin: 4px; } + +scrollbar.horizontal slider { + min-height: 6px; + min-width: 42px; + margin-top: 3px; } scrollbar.horizontal trough { border-top-style: solid; } @@ -1915,19 +1920,37 @@ checkbutton check { margin: 0; } scale { - -GtkScale-slider-length: 15; - -GtkRange-slider-width: 15; - -GtkRange-trough-border: 0; - outline-offset: -1px; - -gtk-outline-radius: 2px; } + min-height: 9px; + min-width: 9px; + padding: 5px; } scale marks { - color: alpha(currentColor,0.7); } - scale.fine-tune trough, scale.fine-tune fill, scale.fine-tune highlight { - border-radius: 5px; - margin: 3px; } + color: alpha(currentColor,0.3); } + scale marks.top { + margin-bottom: -4px; } + scale marks.bottom { + margin-top: -4px; } + scale marks.left { + margin-right: -4px; } + scale marks.right { + margin-left: -4px; } + scale.horizontal mark indicator { + min-height: 3px; + min-width: 1px; } + scale.vertical mark indicator { + min-height: 1px; + min-width: 3px; } + scale.fine-tune { + padding: 3px; } + scale.fine-tune trough, scale.fine-tune fill, scale.fine-tune highlight { + border-radius: 5px; } + scale.fine-tune slider { + margin: -4px; } scale trough, scale fill, scale highlight { border-radius: 2.5px; } scale slider { + min-width: 15px; + min-height: 15px; + margin: -6px; background-clip: border-box; background-image: linear-gradient(to bottom, #444a58); border: 1px solid #262933; @@ -1967,6 +1990,8 @@ scale { background-image: linear-gradient(to bottom, #b1cff2); border-color: #b1cff2; } scale trough { + outline-offset: 2px; + -gtk-outline-radius: 2px; margin: 5px; border: none; background-image: linear-gradient(to bottom, #2d303b); } diff --git a/common/gtk-3.0/3.20/gtk-darker.css b/common/gtk-3.0/3.20/gtk-darker.css index c7d32f3..00dc464 100644 --- a/common/gtk-3.0/3.20/gtk-darker.css +++ b/common/gtk-3.0/3.20/gtk-darker.css @@ -1629,20 +1629,26 @@ notebook { color: #5294E2; } * { - -GtkRange-slider-width: 13; - -GtkRange-trough-border: 0; -GtkScrollbar-has-backward-stepper: false; - -GtkScrollbar-has-forward-stepper: false; - -GtkScrollbar-min-slider-length: 42; - -GtkRange-stepper-spacing: 0; - -GtkRange-trough-under-steppers: 1; } + -GtkScrollbar-has-forward-stepper: false; } scrollbar button { border: none; } +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"); } + scrollbar.overlay-indicator:not(.dragging):not(.hovering) { - opacity: 0.4; - -GtkRange-slider-width: 6px; } + opacity: 0.4; } scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider { margin: 0; background-color: #8a8e96; @@ -1652,9 +1658,11 @@ scrollbar.overlay-indicator:not(.dragging):not(.hovering) { border-style: none; background-color: transparent; } scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider { + min-width: 4px; margin-top: 2px; margin-bottom: 2px; } scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider { + min-height: 4px; margin-left: 2px; margin-right: 2px; } @@ -1678,32 +1686,29 @@ scrollbar slider { border-radius: 100px; margin: 3px; } -scrollbar.fine-tune slider { +scrollbar.vertical.fine-tune slider { + min-width: 4px; margin: 4px; } scrollbar.vertical slider { - margin-left: 4px; } - scrollbar.vertical slider:dir(rtl) { - margin-left: 3px; - margin-right: 4px; } + min-height: 42px; + min-width: 6px; + margin: 3px; } -scrollbar.vertical.fine-tune .slider { - margin-left: 5px; } - scrollbar.vertical.fine-tune .slider:dir(rtl) { - margin-left: 4px; - margin-right: 5px; } - -scrollbar.vertical trough { +scrollbar.vertical trough:dir(ltr) { border-left-style: solid; } - scrollbar.vertical trough:dir(rtl) { - border-left-style: none; - border-right-style: solid; } -scrollbar.horizontal slider { - margin-top: 4px; } +scrollbar.vertical trough:dir(rtl) { + border-right-style: solid; } scrollbar.horizontal.fine-tune slider { - margin-top: 5px; } + min-height: 4px; + margin: 4px; } + +scrollbar.horizontal slider { + min-height: 6px; + min-width: 42px; + margin-top: 3px; } scrollbar.horizontal trough { border-top-style: solid; } @@ -1914,19 +1919,37 @@ checkbutton check { margin: 0; } scale { - -GtkScale-slider-length: 15; - -GtkRange-slider-width: 15; - -GtkRange-trough-border: 0; - outline-offset: -1px; - -gtk-outline-radius: 2px; } + min-height: 9px; + min-width: 9px; + padding: 5px; } scale marks { - color: alpha(currentColor,0.7); } - scale.fine-tune trough, scale.fine-tune fill, scale.fine-tune highlight { - border-radius: 5px; - margin: 3px; } + color: alpha(currentColor,0.3); } + scale marks.top { + margin-bottom: -4px; } + scale marks.bottom { + margin-top: -4px; } + scale marks.left { + margin-right: -4px; } + scale marks.right { + margin-left: -4px; } + scale.horizontal mark indicator { + min-height: 3px; + min-width: 1px; } + scale.vertical mark indicator { + min-height: 1px; + min-width: 3px; } + scale.fine-tune { + padding: 3px; } + scale.fine-tune trough, scale.fine-tune fill, scale.fine-tune highlight { + border-radius: 5px; } + scale.fine-tune slider { + margin: -4px; } scale trough, scale fill, scale highlight { border-radius: 2.5px; } scale slider { + min-width: 15px; + min-height: 15px; + margin: -6px; background-clip: border-box; background-image: linear-gradient(to bottom, #fbfbfc); border: 1px solid rgba(123, 142, 186, 0.5); @@ -1966,6 +1989,8 @@ scale { background-image: linear-gradient(to bottom, #b1cff2); border-color: #b1cff2; } scale trough { + outline-offset: 2px; + -gtk-outline-radius: 2px; margin: 5px; border: none; background-image: linear-gradient(to bottom, #cfd6e6); } diff --git a/common/gtk-3.0/3.20/gtk-solid-dark.css b/common/gtk-3.0/3.20/gtk-solid-dark.css index 3234d22..7671bf3 100644 --- a/common/gtk-3.0/3.20/gtk-solid-dark.css +++ b/common/gtk-3.0/3.20/gtk-solid-dark.css @@ -1630,20 +1630,26 @@ notebook { color: #5294E2; } * { - -GtkRange-slider-width: 13; - -GtkRange-trough-border: 0; -GtkScrollbar-has-backward-stepper: false; - -GtkScrollbar-has-forward-stepper: false; - -GtkScrollbar-min-slider-length: 42; - -GtkRange-stepper-spacing: 0; - -GtkRange-trough-under-steppers: 1; } + -GtkScrollbar-has-forward-stepper: false; } scrollbar button { border: none; } +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"); } + scrollbar.overlay-indicator:not(.dragging):not(.hovering) { - opacity: 0.4; - -GtkRange-slider-width: 6px; } + opacity: 0.4; } scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider { margin: 0; background-color: #a5abb5; @@ -1653,9 +1659,11 @@ scrollbar.overlay-indicator:not(.dragging):not(.hovering) { border-style: none; background-color: transparent; } scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider { + min-width: 4px; margin-top: 2px; margin-bottom: 2px; } scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider { + min-height: 4px; margin-left: 2px; margin-right: 2px; } @@ -1679,32 +1687,29 @@ scrollbar slider { border-radius: 100px; margin: 3px; } -scrollbar.fine-tune slider { +scrollbar.vertical.fine-tune slider { + min-width: 4px; margin: 4px; } scrollbar.vertical slider { - margin-left: 4px; } - scrollbar.vertical slider:dir(rtl) { - margin-left: 3px; - margin-right: 4px; } + min-height: 42px; + min-width: 6px; + margin: 3px; } -scrollbar.vertical.fine-tune .slider { - margin-left: 5px; } - scrollbar.vertical.fine-tune .slider:dir(rtl) { - margin-left: 4px; - margin-right: 5px; } - -scrollbar.vertical trough { +scrollbar.vertical trough:dir(ltr) { border-left-style: solid; } - scrollbar.vertical trough:dir(rtl) { - border-left-style: none; - border-right-style: solid; } -scrollbar.horizontal slider { - margin-top: 4px; } +scrollbar.vertical trough:dir(rtl) { + border-right-style: solid; } scrollbar.horizontal.fine-tune slider { - margin-top: 5px; } + min-height: 4px; + margin: 4px; } + +scrollbar.horizontal slider { + min-height: 6px; + min-width: 42px; + margin-top: 3px; } scrollbar.horizontal trough { border-top-style: solid; } @@ -1915,19 +1920,37 @@ checkbutton check { margin: 0; } scale { - -GtkScale-slider-length: 15; - -GtkRange-slider-width: 15; - -GtkRange-trough-border: 0; - outline-offset: -1px; - -gtk-outline-radius: 2px; } + min-height: 9px; + min-width: 9px; + padding: 5px; } scale marks { - color: alpha(currentColor,0.7); } - scale.fine-tune trough, scale.fine-tune fill, scale.fine-tune highlight { - border-radius: 5px; - margin: 3px; } + color: alpha(currentColor,0.3); } + scale marks.top { + margin-bottom: -4px; } + scale marks.bottom { + margin-top: -4px; } + scale marks.left { + margin-right: -4px; } + scale marks.right { + margin-left: -4px; } + scale.horizontal mark indicator { + min-height: 3px; + min-width: 1px; } + scale.vertical mark indicator { + min-height: 1px; + min-width: 3px; } + scale.fine-tune { + padding: 3px; } + scale.fine-tune trough, scale.fine-tune fill, scale.fine-tune highlight { + border-radius: 5px; } + scale.fine-tune slider { + margin: -4px; } scale trough, scale fill, scale highlight { border-radius: 2.5px; } scale slider { + min-width: 15px; + min-height: 15px; + margin: -6px; background-clip: border-box; background-image: linear-gradient(to bottom, #444a58); border: 1px solid #262933; @@ -1967,6 +1990,8 @@ scale { background-image: linear-gradient(to bottom, #b1cff2); border-color: #b1cff2; } scale trough { + outline-offset: 2px; + -gtk-outline-radius: 2px; margin: 5px; border: none; background-image: linear-gradient(to bottom, #2d303b); } diff --git a/common/gtk-3.0/3.20/gtk-solid-darker.css b/common/gtk-3.0/3.20/gtk-solid-darker.css index de9f415..250f875 100644 --- a/common/gtk-3.0/3.20/gtk-solid-darker.css +++ b/common/gtk-3.0/3.20/gtk-solid-darker.css @@ -1629,20 +1629,26 @@ notebook { color: #5294E2; } * { - -GtkRange-slider-width: 13; - -GtkRange-trough-border: 0; -GtkScrollbar-has-backward-stepper: false; - -GtkScrollbar-has-forward-stepper: false; - -GtkScrollbar-min-slider-length: 42; - -GtkRange-stepper-spacing: 0; - -GtkRange-trough-under-steppers: 1; } + -GtkScrollbar-has-forward-stepper: false; } scrollbar button { border: none; } +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"); } + scrollbar.overlay-indicator:not(.dragging):not(.hovering) { - opacity: 0.4; - -GtkRange-slider-width: 6px; } + opacity: 0.4; } scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider { margin: 0; background-color: #8a8e96; @@ -1652,9 +1658,11 @@ scrollbar.overlay-indicator:not(.dragging):not(.hovering) { border-style: none; background-color: transparent; } scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider { + min-width: 4px; margin-top: 2px; margin-bottom: 2px; } scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider { + min-height: 4px; margin-left: 2px; margin-right: 2px; } @@ -1678,32 +1686,29 @@ scrollbar slider { border-radius: 100px; margin: 3px; } -scrollbar.fine-tune slider { +scrollbar.vertical.fine-tune slider { + min-width: 4px; margin: 4px; } scrollbar.vertical slider { - margin-left: 4px; } - scrollbar.vertical slider:dir(rtl) { - margin-left: 3px; - margin-right: 4px; } + min-height: 42px; + min-width: 6px; + margin: 3px; } -scrollbar.vertical.fine-tune .slider { - margin-left: 5px; } - scrollbar.vertical.fine-tune .slider:dir(rtl) { - margin-left: 4px; - margin-right: 5px; } - -scrollbar.vertical trough { +scrollbar.vertical trough:dir(ltr) { border-left-style: solid; } - scrollbar.vertical trough:dir(rtl) { - border-left-style: none; - border-right-style: solid; } -scrollbar.horizontal slider { - margin-top: 4px; } +scrollbar.vertical trough:dir(rtl) { + border-right-style: solid; } scrollbar.horizontal.fine-tune slider { - margin-top: 5px; } + min-height: 4px; + margin: 4px; } + +scrollbar.horizontal slider { + min-height: 6px; + min-width: 42px; + margin-top: 3px; } scrollbar.horizontal trough { border-top-style: solid; } @@ -1914,19 +1919,37 @@ checkbutton check { margin: 0; } scale { - -GtkScale-slider-length: 15; - -GtkRange-slider-width: 15; - -GtkRange-trough-border: 0; - outline-offset: -1px; - -gtk-outline-radius: 2px; } + min-height: 9px; + min-width: 9px; + padding: 5px; } scale marks { - color: alpha(currentColor,0.7); } - scale.fine-tune trough, scale.fine-tune fill, scale.fine-tune highlight { - border-radius: 5px; - margin: 3px; } + color: alpha(currentColor,0.3); } + scale marks.top { + margin-bottom: -4px; } + scale marks.bottom { + margin-top: -4px; } + scale marks.left { + margin-right: -4px; } + scale marks.right { + margin-left: -4px; } + scale.horizontal mark indicator { + min-height: 3px; + min-width: 1px; } + scale.vertical mark indicator { + min-height: 1px; + min-width: 3px; } + scale.fine-tune { + padding: 3px; } + scale.fine-tune trough, scale.fine-tune fill, scale.fine-tune highlight { + border-radius: 5px; } + scale.fine-tune slider { + margin: -4px; } scale trough, scale fill, scale highlight { border-radius: 2.5px; } scale slider { + min-width: 15px; + min-height: 15px; + margin: -6px; background-clip: border-box; background-image: linear-gradient(to bottom, #fbfbfc); border: 1px solid rgba(123, 142, 186, 0.5); @@ -1966,6 +1989,8 @@ scale { background-image: linear-gradient(to bottom, #b1cff2); border-color: #b1cff2; } scale trough { + outline-offset: 2px; + -gtk-outline-radius: 2px; margin: 5px; border: none; background-image: linear-gradient(to bottom, #cfd6e6); } diff --git a/common/gtk-3.0/3.20/gtk-solid.css b/common/gtk-3.0/3.20/gtk-solid.css index ed13ded..bbe9836 100644 --- a/common/gtk-3.0/3.20/gtk-solid.css +++ b/common/gtk-3.0/3.20/gtk-solid.css @@ -1633,20 +1633,26 @@ notebook { color: #5294E2; } * { - -GtkRange-slider-width: 13; - -GtkRange-trough-border: 0; -GtkScrollbar-has-backward-stepper: false; - -GtkScrollbar-has-forward-stepper: false; - -GtkScrollbar-min-slider-length: 42; - -GtkRange-stepper-spacing: 0; - -GtkRange-trough-under-steppers: 1; } + -GtkScrollbar-has-forward-stepper: false; } scrollbar button { border: none; } +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"); } + scrollbar.overlay-indicator:not(.dragging):not(.hovering) { - opacity: 0.4; - -GtkRange-slider-width: 6px; } + opacity: 0.4; } scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider { margin: 0; background-color: #8a8e96; @@ -1656,9 +1662,11 @@ scrollbar.overlay-indicator:not(.dragging):not(.hovering) { border-style: none; background-color: transparent; } scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider { + min-width: 4px; margin-top: 2px; margin-bottom: 2px; } scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider { + min-height: 4px; margin-left: 2px; margin-right: 2px; } @@ -1682,32 +1690,29 @@ scrollbar slider { border-radius: 100px; margin: 3px; } -scrollbar.fine-tune slider { +scrollbar.vertical.fine-tune slider { + min-width: 4px; margin: 4px; } scrollbar.vertical slider { - margin-left: 4px; } - scrollbar.vertical slider:dir(rtl) { - margin-left: 3px; - margin-right: 4px; } + min-height: 42px; + min-width: 6px; + margin: 3px; } -scrollbar.vertical.fine-tune .slider { - margin-left: 5px; } - scrollbar.vertical.fine-tune .slider:dir(rtl) { - margin-left: 4px; - margin-right: 5px; } - -scrollbar.vertical trough { +scrollbar.vertical trough:dir(ltr) { border-left-style: solid; } - scrollbar.vertical trough:dir(rtl) { - border-left-style: none; - border-right-style: solid; } -scrollbar.horizontal slider { - margin-top: 4px; } +scrollbar.vertical trough:dir(rtl) { + border-right-style: solid; } scrollbar.horizontal.fine-tune slider { - margin-top: 5px; } + min-height: 4px; + margin: 4px; } + +scrollbar.horizontal slider { + min-height: 6px; + min-width: 42px; + margin-top: 3px; } scrollbar.horizontal trough { border-top-style: solid; } @@ -1918,19 +1923,37 @@ checkbutton check { margin: 0; } scale { - -GtkScale-slider-length: 15; - -GtkRange-slider-width: 15; - -GtkRange-trough-border: 0; - outline-offset: -1px; - -gtk-outline-radius: 2px; } + min-height: 9px; + min-width: 9px; + padding: 5px; } scale marks { - color: alpha(currentColor,0.7); } - scale.fine-tune trough, scale.fine-tune fill, scale.fine-tune highlight { - border-radius: 5px; - margin: 3px; } + color: alpha(currentColor,0.3); } + scale marks.top { + margin-bottom: -4px; } + scale marks.bottom { + margin-top: -4px; } + scale marks.left { + margin-right: -4px; } + scale marks.right { + margin-left: -4px; } + scale.horizontal mark indicator { + min-height: 3px; + min-width: 1px; } + scale.vertical mark indicator { + min-height: 1px; + min-width: 3px; } + scale.fine-tune { + padding: 3px; } + scale.fine-tune trough, scale.fine-tune fill, scale.fine-tune highlight { + border-radius: 5px; } + scale.fine-tune slider { + margin: -4px; } scale trough, scale fill, scale highlight { border-radius: 2.5px; } scale slider { + min-width: 15px; + min-height: 15px; + margin: -6px; background-clip: border-box; background-image: linear-gradient(to bottom, #fbfbfc); border: 1px solid rgba(123, 142, 186, 0.5); @@ -1970,6 +1993,8 @@ scale { background-image: linear-gradient(to bottom, #b1cff2); border-color: #b1cff2; } scale trough { + outline-offset: 2px; + -gtk-outline-radius: 2px; margin: 5px; border: none; background-image: linear-gradient(to bottom, #cfd6e6); } diff --git a/common/gtk-3.0/3.20/gtk.css b/common/gtk-3.0/3.20/gtk.css index 8d362ef..d747a20 100644 --- a/common/gtk-3.0/3.20/gtk.css +++ b/common/gtk-3.0/3.20/gtk.css @@ -1633,20 +1633,26 @@ notebook { color: #5294E2; } * { - -GtkRange-slider-width: 13; - -GtkRange-trough-border: 0; -GtkScrollbar-has-backward-stepper: false; - -GtkScrollbar-has-forward-stepper: false; - -GtkScrollbar-min-slider-length: 42; - -GtkRange-stepper-spacing: 0; - -GtkRange-trough-under-steppers: 1; } + -GtkScrollbar-has-forward-stepper: false; } scrollbar button { border: none; } +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"); } + scrollbar.overlay-indicator:not(.dragging):not(.hovering) { - opacity: 0.4; - -GtkRange-slider-width: 6px; } + opacity: 0.4; } scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider { margin: 0; background-color: #8a8e96; @@ -1656,9 +1662,11 @@ scrollbar.overlay-indicator:not(.dragging):not(.hovering) { border-style: none; background-color: transparent; } scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider { + min-width: 4px; margin-top: 2px; margin-bottom: 2px; } scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider { + min-height: 4px; margin-left: 2px; margin-right: 2px; } @@ -1682,32 +1690,29 @@ scrollbar slider { border-radius: 100px; margin: 3px; } -scrollbar.fine-tune slider { +scrollbar.vertical.fine-tune slider { + min-width: 4px; margin: 4px; } scrollbar.vertical slider { - margin-left: 4px; } - scrollbar.vertical slider:dir(rtl) { - margin-left: 3px; - margin-right: 4px; } + min-height: 42px; + min-width: 6px; + margin: 3px; } -scrollbar.vertical.fine-tune .slider { - margin-left: 5px; } - scrollbar.vertical.fine-tune .slider:dir(rtl) { - margin-left: 4px; - margin-right: 5px; } - -scrollbar.vertical trough { +scrollbar.vertical trough:dir(ltr) { border-left-style: solid; } - scrollbar.vertical trough:dir(rtl) { - border-left-style: none; - border-right-style: solid; } -scrollbar.horizontal slider { - margin-top: 4px; } +scrollbar.vertical trough:dir(rtl) { + border-right-style: solid; } scrollbar.horizontal.fine-tune slider { - margin-top: 5px; } + min-height: 4px; + margin: 4px; } + +scrollbar.horizontal slider { + min-height: 6px; + min-width: 42px; + margin-top: 3px; } scrollbar.horizontal trough { border-top-style: solid; } @@ -1918,19 +1923,37 @@ checkbutton check { margin: 0; } scale { - -GtkScale-slider-length: 15; - -GtkRange-slider-width: 15; - -GtkRange-trough-border: 0; - outline-offset: -1px; - -gtk-outline-radius: 2px; } + min-height: 9px; + min-width: 9px; + padding: 5px; } scale marks { - color: alpha(currentColor,0.7); } - scale.fine-tune trough, scale.fine-tune fill, scale.fine-tune highlight { - border-radius: 5px; - margin: 3px; } + color: alpha(currentColor,0.3); } + scale marks.top { + margin-bottom: -4px; } + scale marks.bottom { + margin-top: -4px; } + scale marks.left { + margin-right: -4px; } + scale marks.right { + margin-left: -4px; } + scale.horizontal mark indicator { + min-height: 3px; + min-width: 1px; } + scale.vertical mark indicator { + min-height: 1px; + min-width: 3px; } + scale.fine-tune { + padding: 3px; } + scale.fine-tune trough, scale.fine-tune fill, scale.fine-tune highlight { + border-radius: 5px; } + scale.fine-tune slider { + margin: -4px; } scale trough, scale fill, scale highlight { border-radius: 2.5px; } scale slider { + min-width: 15px; + min-height: 15px; + margin: -6px; background-clip: border-box; background-image: linear-gradient(to bottom, #fbfbfc); border: 1px solid rgba(123, 142, 186, 0.5); @@ -1970,6 +1993,8 @@ scale { background-image: linear-gradient(to bottom, #b1cff2); border-color: #b1cff2; } scale trough { + outline-offset: 2px; + -gtk-outline-radius: 2px; margin: 5px; border: none; background-image: linear-gradient(to bottom, #cfd6e6); } diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index 9256c0b..0f57cdb 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -1732,15 +1732,8 @@ $_scrollbar_bg_color: darken($base_color, 1%); scrollbar { @at-root * { - -GtkRange-slider-width: 13; - -GtkRange-trough-border: 0; -GtkScrollbar-has-backward-stepper: false; -GtkScrollbar-has-forward-stepper: false; - -GtkScrollbar-min-slider-length: 42; // minimum size for the slider. - // sadly can't be in '.slider' - // where it belongs - -GtkRange-stepper-spacing: 0; - -GtkRange-trough-under-steppers: 1; } $_slider_margin: 3px; @@ -1748,12 +1741,28 @@ scrollbar { button { border: none; } + &.vertical { + button.down { + -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); + } + button.up { + -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); + } + } + + &.horizontal { + button.down { + -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); + } + button.up { + -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); + } + } + &.overlay-indicator { &:not(.dragging):not(.hovering) { // Overlay scrolling indicator opacity: 0.4; - -GtkRange-slider-width: 6px; - slider { margin: 0; background-color: mix($fg_color, $bg_color, 70%); @@ -1766,17 +1775,17 @@ scrollbar { background-color: transparent; } - // w/o the following margin tweaks the slider shrinks when hovering/dragging &.vertical slider { + min-width: 4px; margin-top: $_slider_margin - 1px; margin-bottom: $_slider_margin - 1px; } &.horizontal slider { + min-height: 4px; margin-left: $_slider_margin - 1px; margin-right: $_slider_margin - 1px; } - } &.dragging, @@ -1808,42 +1817,37 @@ scrollbar { margin: $_slider_margin; } - &.fine-tune slider { margin: $_slider_fine_tune_margin; } - &.vertical { - slider { - margin-left: 1px + $_slider_margin; - - &:dir(rtl) { - margin-left: $_slider_margin; - margin-right: 1px + $_slider_margin; - } + &.fine-tune slider { + min-width: 4px; + margin: $_slider_fine_tune_margin; } - &.fine-tune .slider { - margin-left: 1px + $_slider_fine_tune_margin; - - &:dir(rtl) { - margin-left: $_slider_fine_tune_margin; - margin-right: 1px + $_slider_fine_tune_margin; - } + slider { + min-height: 42px; + min-width: 6px; + margin: $_slider_margin; } trough { - border-left-style: solid; - - &:dir(rtl) { - border-left-style: none; - border-right-style: solid; - } + &:dir(ltr) { border-left-style: solid; } + &:dir(rtl) { border-right-style: solid; } } } &.horizontal { - slider { margin-top: 1px + $_slider_margin; } - &.fine-tune slider { margin-top: 1px + $_slider_fine_tune_margin; } + &.fine-tune slider { + min-height: 4px; + margin: $_slider_fine_tune_margin; + } + + slider { + min-height: 6px; + min-width: 42px; + margin-top: $_slider_margin; + } trough { border-top-style: solid; } } @@ -1970,19 +1974,34 @@ checkbutton check { // GtkScale // scale { - -GtkScale-slider-length: 15; - -GtkRange-slider-width: 15; - -GtkRange-trough-border: 0; - outline-offset: -1px; - -gtk-outline-radius: 2px; + min-height: 9px; + min-width: 9px; + padding: 5px; - marks { color: gtkalpha(currentColor, 0.7); } + marks { + color: gtkalpha(currentColor, 0.3); + + &.top { margin-bottom: -4px; } + &.bottom { margin-top: -4px; } + &.left { margin-right: -4px; } + &.right { margin-left: -4px; } + } + + &.horizontal mark indicator { + min-height: 3px; + min-width: 1px; + } + &.vertical mark indicator { + min-height: 1px; + min-width: 3px; + } &.fine-tune { - trough, fill, highlight { - border-radius: 5px; - margin: 3px; - } + padding: 3px; + + trough, fill, highlight { border-radius: 5px; } + + slider { margin: -4px; } } trough, fill, highlight { @@ -1992,6 +2011,9 @@ scale { slider { $_slider_border: if($variant=='light', transparentize(darken($button_border,25%), 0.5), darken($button_border,2%)); + min-width: 15px; + min-height: 15px; + margin: -6px; background-clip: border-box; background-image: linear-gradient(to bottom, $button_bg); border: 1px solid $_slider_border; @@ -2044,6 +2066,8 @@ scale { trough { $_scale_trough_bg: if($variant == 'light', $button_border, darken($bg_color, 5%)); + outline-offset: 2px; + -gtk-outline-radius: 2px; margin: 5px; border: none; background-image: linear-gradient(to bottom, $_scale_trough_bg);