diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss index da38df0e1f..dd1deca91b 100644 --- a/gtk/theme/HighContrast/_common.scss +++ b/gtk/theme/HighContrast/_common.scss @@ -1457,8 +1457,7 @@ notebook { * Scrollbars * **************/ -scrollbar, -.scrollbar { +scrollbar { background-clip: padding-box; background-image: none; border-style: solid; @@ -1472,7 +1471,9 @@ scrollbar, -GtkRange-stepper-spacing: 0; -GtkRange-trough-under-steppers: 1; - @extend junction; + + trough { @extend junction; } + $_slider_margin: 3px; $_slider_fine_tune_margin: 4px; @@ -1502,8 +1503,6 @@ scrollbar, &.overlay-indicator { &:not(.dragging):not(.hovering) { // Overlay scrolling indicator opacity: 0.4; - border-style: none; - background-color: transparent; -GtkRange-slider-width: 5px; @@ -1514,6 +1513,11 @@ scrollbar, background-clip: padding-box; } + trough { + border-style: none; + background-color: transparent; + } + // w/o the following margin tweaks the slider shrinks when hovering/dragging &.vertical slider { margin-top: $_slider_margin - 1px; @@ -1651,7 +1655,6 @@ GtkCheckButton.text-button, GtkRadioButton.text-button { * GtkScale * ************/ scale, -.scale, .scale.scale-has-marks-above.scale-has-marks-below, .scale.vertical.scale-has-marks-above.scale-has-marks-below { -GtkScale-slider-length: 20; @@ -1659,18 +1662,11 @@ scale, -GtkRange-trough-border: 2; outline-offset: -9px; outline-radius: 4px; - margin: 10px; - border-width: 1px; - border-style: solid; - border-radius: 3px; - border-color: $borders_color; - background-color: mix($bg_color,$borders_color,60%); - box-shadow: inset 1px 1px transparentize(black, 0.9); &.fine-tune { outline-offset: -7px; outline-radius: 6px; - &.trough { + & trough { border-radius: 4px; margin: 8px; } @@ -1703,47 +1699,56 @@ scale, border: 1px solid darken($selected_borders_color,3%); } } - &.highlight { - border-color: $selected_borders_color; - background-color: $selected_bg_color; - &:backdrop { - border-color: $insensitive_fg_color; - background-color: $insensitive_fg_color; - box-shadow: none; + trough { + margin: 10px; + border-width: 1px; + border-style: solid; + border-radius: 3px; + border-color: $borders_color; + background-color: mix($bg_color,$borders_color,60%); + box-shadow: inset 1px 1px transparentize(black, 0.9); + &.highlight { + border-color: $selected_borders_color; + background-color: $selected_bg_color; + &:backdrop { + border-color: $insensitive_fg_color; + background-color: $insensitive_fg_color; + box-shadow: none; + } + } + &:insensitive, &.hilight:insensitive { + border-color: $insensitive_borders_color; + background-color: $insensitive_bg_color; + } + &:backdrop { + border-color: $backdrop_borders_color; + background-color: mix($backdrop_bg_color,$borders_color); + box-shadow: none; + } + &:backdrop:insensitive, .hilight:backdrop:insensitive { + border-color: $insensitive_fg_color; + background-color: $backdrop_bg_color; } - } - &:insensitive, &.hilight:insensitive { - border-color: $insensitive_borders_color; - background-color: $insensitive_bg_color; - } - &:backdrop { - border-color: $backdrop_borders_color; - background-color: mix($backdrop_bg_color,$borders_color); - box-shadow: none; - } - &:backdrop:insensitive, .hilight:backdrop:insensitive { - border-color: $insensitive_fg_color; - background-color: $backdrop_bg_color; } } //FIXME: scale sliders %scale_marks_above_horz { - margin: 14px 10px 10px; - &.fine-tune { margin: 12px 8px 8px; } + trough { margin: 14px 10px 10px; } + &.fine-tune trough { margin: 12px 8px 8px; } } %scale_marks_below_horz { - margin: 10px 10px 14px; - &.fine-tune { margin: 8px 8px 12px; } + trough { margin: 10px 10px 14px; } + &.fine-tune trough { margin: 8px 8px 12px; } } %scale_marks_above_vert { - margin: 10px 10px 10px 14px; - &.fine-tune { margin: 8px 8px 8px 12px; } + trough { margin: 10px 10px 10px 14px; } + &.fine-tune trough { margin: 8px 8px 8px 12px; } } %scale_marks_below_vert { - margin: 10px 14px 10px 10px; - &.fine-tune { margin: 8px 12px 8px 8px; } + trough { margin: 10px 14px 10px 10px; } + &.fine-tune trough { margin: 8px 12px 8px 8px; } } /***************** diff --git a/gtk/theme/HighContrast/gtk.css b/gtk/theme/HighContrast/gtk.css index d951eb1dd9..5d08660c52 100644 --- a/gtk/theme/HighContrast/gtk.css +++ b/gtk/theme/HighContrast/gtk.css @@ -1600,8 +1600,7 @@ notebook { /************** * Scrollbars * **************/ -scrollbar, -.scrollbar { +scrollbar { background-clip: padding-box; background-image: none; border-style: solid; @@ -1612,53 +1611,40 @@ scrollbar, -GtkScrollbar-min-slider-length: 42; -GtkRange-stepper-spacing: 0; -GtkRange-trough-under-steppers: 1; } - scrollbar button, - .scrollbar button { + scrollbar button { border: none; } - scrollbar slider, - .scrollbar slider { + scrollbar slider { border-radius: 20px; border: 5px solid transparent; background-color: gray; } - scrollbar slider:backdrop, scrollbar slider:insensitive, - .scrollbar slider:backdrop, - .scrollbar slider:insensitive { + scrollbar slider:backdrop, scrollbar slider:insensitive { background-color: #e6e6e6; } - scrollbar slider:hover, - .scrollbar slider:hover { + scrollbar slider:hover { background-color: #4d4d4d; } - scrollbar slider:prelight:active, - .scrollbar slider:prelight:active { + scrollbar slider:prelight:active { background-color: #000; } - scrollbar slider.fine-tune, - .scrollbar slider.fine-tune { + scrollbar slider.fine-tune { border-width: 8px; } - scrollbar slider.fine-tune:prelight:active, - .scrollbar slider.fine-tune:prelight:active { + scrollbar slider.fine-tune:prelight:active { background-color: #000; } - scrollbar.overlay-indicator:not(.dragging):not(.hovering), - .scrollbar.overlay-indicator:not(.dragging):not(.hovering) { + scrollbar.overlay-indicator:not(.dragging):not(.hovering) { opacity: 0.4; - border-style: none; - background-color: transparent; -GtkRange-slider-width: 5px; } - scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider, - .scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider { + scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider { margin: 0; background-color: #000; border: 1px solid white; background-clip: padding-box; } - scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider, - .scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider { + 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; } - scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider, - .scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider { + scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider { margin-left: 2px; margin-right: 2px; } - scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering, - .scrollbar.overlay-indicator.dragging, - .scrollbar.overlay-indicator.hovering { + scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering { opacity: 0.7; } /********** @@ -1812,35 +1798,24 @@ GtkCheckButton.text-button, GtkRadioButton.text-button { * GtkScale * ************/ scale, -.scale, .scale.scale-has-marks-above.scale-has-marks-below, .scale.vertical.scale-has-marks-above.scale-has-marks-below { -GtkScale-slider-length: 20; -GtkRange-slider-width: 20; -GtkRange-trough-border: 2; outline-offset: -9px; - outline-radius: 4px; - margin: 10px; - border-width: 1px; - border-style: solid; - border-radius: 3px; - border-color: gray; - background-color: #cccccc; - box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1); } + outline-radius: 4px; } scale.fine-tune, - .scale.fine-tune, .scale.scale-has-marks-above.scale-has-marks-below.fine-tune, .scale.vertical.scale-has-marks-above.scale-has-marks-below.fine-tune { outline-offset: -7px; outline-radius: 6px; } - scale.fine-tune.trough, - .scale.fine-tune.trough, - .scale.scale-has-marks-above.scale-has-marks-below.fine-tune.trough, - .scale.vertical.scale-has-marks-above.scale-has-marks-below.fine-tune.trough { + scale.fine-tune trough, + .scale.scale-has-marks-above.scale-has-marks-below.fine-tune trough, + .scale.vertical.scale-has-marks-above.scale-has-marks-below.fine-tune trough { border-radius: 4px; margin: 8px; } scale slider, - .scale slider, .scale.scale-has-marks-above.scale-has-marks-below slider, .scale.vertical.scale-has-marks-above.scale-has-marks-below slider { border-width: 2px; @@ -1852,7 +1827,6 @@ scale, border-radius: 50%; border-color: #787878; } scale slider:hover, - .scale slider:hover, .scale.scale-has-marks-above.scale-has-marks-below slider:hover, .scale.vertical.scale-has-marks-above.scale-has-marks-below slider:hover { border-width: 2px; @@ -1864,7 +1838,6 @@ scale, border-color: #787878; border-radius: 50%; } scale slider:insensitive, - .scale slider:insensitive, .scale.scale-has-marks-above.scale-has-marks-below slider:insensitive, .scale.vertical.scale-has-marks-above.scale-has-marks-below slider:insensitive { border-style: solid; @@ -1872,7 +1845,6 @@ scale, background-image: none; box-shadow: none; } scale slider:backdrop, - .scale slider:backdrop, .scale.scale-has-marks-above.scale-has-marks-below slider:backdrop, .scale.vertical.scale-has-marks-above.scale-has-marks-below slider:backdrop { border-style: solid; @@ -1881,7 +1853,6 @@ scale, background-image: none; box-shadow: none; } scale slider:backdrop:insensitive, - .scale slider:backdrop:insensitive, .scale.scale-has-marks-above.scale-has-marks-below slider:backdrop:insensitive, .scale.vertical.scale-has-marks-above.scale-has-marks-below slider:backdrop:insensitive { border-width: 2px; @@ -1891,48 +1862,50 @@ scale, border-color: #8d8d8d; background-image: none; } scale slider:active, - .scale slider:active, .scale.scale-has-marks-above.scale-has-marks-below slider:active, .scale.vertical.scale-has-marks-above.scale-has-marks-below slider:active { border: 1px solid black; } - scale.highlight, - .scale.highlight, - .scale.scale-has-marks-above.scale-has-marks-below.highlight, - .scale.vertical.scale-has-marks-above.scale-has-marks-below.highlight { - border-color: #000; - background-color: #000; } - scale.highlight:backdrop, - .scale.highlight:backdrop, - .scale.scale-has-marks-above.scale-has-marks-below.highlight:backdrop, - .scale.vertical.scale-has-marks-above.scale-has-marks-below.highlight:backdrop { + scale trough, + .scale.scale-has-marks-above.scale-has-marks-below trough, + .scale.vertical.scale-has-marks-above.scale-has-marks-below trough { + margin: 10px; + border-width: 1px; + border-style: solid; + border-radius: 3px; + border-color: gray; + background-color: #cccccc; + box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1); } + scale trough.highlight, + .scale.scale-has-marks-above.scale-has-marks-below trough.highlight, + .scale.vertical.scale-has-marks-above.scale-has-marks-below trough.highlight { + border-color: #000; + background-color: #000; } + scale trough.highlight:backdrop, + .scale.scale-has-marks-above.scale-has-marks-below trough.highlight:backdrop, + .scale.vertical.scale-has-marks-above.scale-has-marks-below trough.highlight:backdrop { + border-color: gray; + background-color: gray; + box-shadow: none; } + scale trough:insensitive, scale trough.hilight:insensitive, + .scale.scale-has-marks-above.scale-has-marks-below trough:insensitive, + .scale.scale-has-marks-above.scale-has-marks-below trough.hilight:insensitive, + .scale.vertical.scale-has-marks-above.scale-has-marks-below trough:insensitive, + .scale.vertical.scale-has-marks-above.scale-has-marks-below trough.hilight:insensitive { border-color: gray; - background-color: gray; + background-color: white; } + scale trough:backdrop, + .scale.scale-has-marks-above.scale-has-marks-below trough:backdrop, + .scale.vertical.scale-has-marks-above.scale-has-marks-below trough:backdrop { + border-color: #8d8d8d; + background-color: silver; box-shadow: none; } - scale:insensitive, scale.hilight:insensitive, - .scale:insensitive, - .scale.hilight:insensitive, - .scale.scale-has-marks-above.scale-has-marks-below:insensitive, - .scale.scale-has-marks-above.scale-has-marks-below.hilight:insensitive, - .scale.vertical.scale-has-marks-above.scale-has-marks-below:insensitive, - .scale.vertical.scale-has-marks-above.scale-has-marks-below.hilight:insensitive { - border-color: gray; - background-color: white; } - scale:backdrop, - .scale:backdrop, - .scale.scale-has-marks-above.scale-has-marks-below:backdrop, - .scale.vertical.scale-has-marks-above.scale-has-marks-below:backdrop { - border-color: #8d8d8d; - background-color: silver; - box-shadow: none; } - scale:backdrop:insensitive, scale .hilight:backdrop:insensitive, - .scale:backdrop:insensitive, - .scale .hilight:backdrop:insensitive, - .scale.scale-has-marks-above.scale-has-marks-below:backdrop:insensitive, - .scale.scale-has-marks-above.scale-has-marks-below .hilight:backdrop:insensitive, - .scale.vertical.scale-has-marks-above.scale-has-marks-below:backdrop:insensitive, - .scale.vertical.scale-has-marks-above.scale-has-marks-below .hilight:backdrop:insensitive { - border-color: gray; - background-color: #fff; } + scale trough:backdrop:insensitive, scale trough .hilight:backdrop:insensitive, + .scale.scale-has-marks-above.scale-has-marks-below trough:backdrop:insensitive, + .scale.scale-has-marks-above.scale-has-marks-below trough .hilight:backdrop:insensitive, + .scale.vertical.scale-has-marks-above.scale-has-marks-below trough:backdrop:insensitive, + .scale.vertical.scale-has-marks-above.scale-has-marks-below trough .hilight:backdrop:insensitive { + border-color: gray; + background-color: #fff; } /***************** * Progress bars * @@ -2184,12 +2157,10 @@ scrolledwindow undershoot.right { background-position: right center; border: none; box-shadow: none; } -scrolledwindow junction, scrolledwindow scrollbar, -scrolledwindow .scrollbar { +scrolledwindow junction, scrolledwindow scrollbar trough, scrollbar scrolledwindow trough { border-color: transparent; background-color: #f2f2f2; } - scrolledwindow junction:backdrop, scrolledwindow scrollbar:backdrop, - scrolledwindow .scrollbar:backdrop { + scrolledwindow junction:backdrop, scrolledwindow scrollbar trough:backdrop, scrollbar scrolledwindow trough:backdrop { background-color: transparent; } separator, GtkPlacesSidebar.sidebar .view separator,