diff --git a/gtk/theme/Adwaita/_colors.scss b/gtk/theme/Adwaita/_colors.scss index 52ca0a93dc..6e6039e509 100644 --- a/gtk/theme/Adwaita/_colors.scss +++ b/gtk/theme/Adwaita/_colors.scss @@ -15,6 +15,7 @@ $borders_edge: if($variant == 'light', white, transparentize($fg_color, 0.9)); $link_color: if($variant == 'light', darken($selected_bg_color,10%), lighten($selected_bg_color,20%)); $link_visited_color: if($variant == 'light', darken($selected_bg_color,20%), lighten($selected_bg_color,10%)); $top_hilight: $borders_edge; +$dark_fill: mix($borders_color, $bg_color, 35%); $scrollbar_bg_color: darken($bg_color, 7%); diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss index 0049141750..4cfc9187d0 100644 --- a/gtk/theme/Adwaita/_common.scss +++ b/gtk/theme/Adwaita/_common.scss @@ -2123,306 +2123,178 @@ checkbutton.text-button, radiobutton.text-button { /************ * GtkScale * ************/ + scale { // FIXME: rationalize -GtkScale-slider-length: 20; -GtkRange-slider-width: 24; -GtkRange-trough-border: 2; + outline-offset: -9px; - outline-radius: 4px; + outline-radius: 6px; &.fine-tune { outline-offset: -7px; - outline-radius: 6px; - & highlight, - & fill, - & trough { + outline-radius: 8px; + + trough, + fill, + highlight { + margin: 10px; border-radius: 4px; - &:not(:first-child):not(:last-child), - &:only-child { - margin: 10px; - } } } - & trough, - & fill, - & highlight { - &:not(:first-child):not(:last-child), - &:only-child { - margin: 12px; - } - } + trough, + fill, + highlight { margin: 12px; } - & trough:not(:first-child):not(:last-child), - & trough:only-child { - & slider { margin: 2px 0; } - } - &.vertical trough:not(:first-child):not(:last-child), - &.vertical trough:only-child { - & slider { margin: 0 2px; } - } + &:not(.vertical) slider { margin: 2px 0; } + + &.vertical slider { margin: 0 2px; } + + trough { @extend %trough; } + + highlight { @extend %highlight; } + + slider { + // FIXME: scale-has-marks-* missing + $_slider_edge_color: transparentize(black, 0.9); + @include button(normal, $edge: $_slider_edge_color); + border: 1px solid darken($borders_color, 3%); + border-radius: 100%; + + &:hover { @include button(hover, $edge: $_slider_edge_color); } + + &:active { border-color: $selected_borders_color; } + + &:insensitive { @include button (insensitive); } - & trough { - border: 1px solid $borders_color; - border-radius: 3px; - background-color: mix($bg_color, $borders_color, 60%); - box-shadow: inset 1px 1px transparentize(black, 0.9), - _widget_edge(); - & slider { - //FIXME: better gradient on the slider and hover state - @include button(normal); - border: 1px solid; - border-radius: 50%; - border-color: darken($borders_color,3%); - box-shadow: inset 0 1px if($variant=='light', white, - transparentize(white,0.85)), - inset 0 #{-2px} $bg_color, - inset 0 #{-1px} mix($bg_color, $borders_color, 50%); - &:hover { - @include button(hover); - border-color: darken($borders_color,3%); - border-radius: 50%; // needed for double marks scales - box-shadow: inset 0 1px if($variant=='light', white, - transparentize(white, 0.85)), - inset 0 #{-2px} if($variant=='light', white, - transparentize(white, 0.86)), - inset 0 #{-1px} mix($bg_color, $borders_color, 70%); - } - &:insensitive { - border-style: solid; // needed for double marks scales or they'll get - border-radius: 50%; // overridden - background-image: linear-gradient(to bottom, $insensitive_bg_color); - box-shadow: none; - } - &:backdrop { - border-style: solid; // needed for double marks scales or they'll get - border-radius: 50%; // overridden - border-color: darken($backdrop_borders_color,3%); - background-image: linear-gradient(to bottom, $backdrop_bg_color); - box-shadow: none; - } - &:backdrop:insensitive { - @include button(backdrop-insensitive); - } - &:active { - @include button(active); - border: 1px solid if($variant=='light',darken($selected_borders_color,3%), - darken($selected_bg_color,15%)); - } - //OSD sliders - .osd & { - @include button(osd); - background-color: opacify($osd_bg_color, 1); - &:hover { @include button(osd-hover); } - &:active { @include button(osd-active); } - &:backdrop { @include button(osd-backdrop); } - } - } - & highlight { - @include progressbar_fill; - border: 1px solid $borders_color; - border-radius: 3px; - box-shadow: _widget_edge(); - &.vertical { @include progressbar_fill(vertical); } - &:backdrop { - border-color: if($variant=='light', $selected_bg_color, - $selected_borders_color); - background-color: $selected_bg_color; - box-shadow: none; - } - } - & fill { - background: none; - background-color: red; - border: 1px solid $borders_color; - border-radius: 3px; - box-shadow: _widget_edge(); - } - &:insensitive, &.vertical:insensitive { - border-color: $insensitive_borders_color; - background-image: none; - background-color: $insensitive_bg_color; - box-shadow: _widget_edge(); - } &:backdrop { - border-color: $backdrop_borders_color; - background-color: mix($backdrop_bg_color, $borders_color, 50%); - box-shadow: none; - } - &:backdrop:insensitive, .highlight:backdrop:insensitive { - border-color: $backdrop_borders_color; - background-color: $insensitive_bg_color; + @include button(backdrop); + &:insensitive { @include button(backdrop-insensitive); } } - //OSD troughs + // OSD .osd & { - border-color: $osd_borders_color; - box-shadow: none; - margin: 9px; - &.fine-tune { margin: 7px; } - background-color: transparentize($osd_borders_color, 0.2); - outline-color: transparentize($osd_fg_color, 0.8); - outline-offset: -8px; - &.highlight { - background-image: none; - background-color: $selected_bg_color; - } - &:insensitive, &:backdrop:insensitive { - border-color: transparent; - background-color: transparent; - } + @include button(osd); + border-color: darken($osd_borders_color, 3%); + background-color: opacify($osd_bg_color, 1); // solid background needed here + + &:hover { @include button(osd-hover); } + + &:active { @include button(osd-active); } + + &:insensitive { @include button(osd-insensitive); } + &:backdrop { - border-color: $osd_borders_color; - background-image: none; - } - } - } - // scales on selected list rows - row:selected & { - border-color: $selected_borders_color; - box-shadow: inset 1px 1px transparentize(black, 0.9); - &:backdrop { box-shadow: none; } - &.highlight:backdrop { border-color: $selected_borders_color; } - &:insensitive, - &.highlight:insensitive { - border-color: $selected_bg_color; - box-shadow: none; - background-color: mix($selected_fg_color, $selected_bg_color, 50%); - background-image: none; - &:backdrop { background-color: mix($backdrop_selected_fg_color, $selected_bg_color, 50%); } - } - } -} + @include button(osd-backdrop); -scale marks { - color: gtkalpha(currentColor, 0.5); // marks color -} - -@each $d,$dn in ('', 'horz'), - ('.vertical', 'vert') { - @each $ws,$w,$we in (':first-child:not(:last-child)','scale-has-marks-below','scale_marks_below'), - (':not(:first-child):last-child','scale-has-marks-above','scale_marks_above') { - scale#{$d} { - &.fine-tune trough#{$ws} { @extend %#{$we}_#{$dn}_ft; } - & trough#{$ws} { - @extend %#{$we}_#{$dn}; - - @each $s,$as in ('',''), - (':hover','-hover'), - (':active','-active'), - (':insensitive','-insensitive'), - (':backdrop','-backdrop'), - (':backdrop:insensitive','-backdrop-insensitive') { - & slider#{$s} { - $_url: 'assets/slider-#{$dn}-#{$w}#{$as}#{$asset_suffix}'; - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url('#{$_url}.png'), - url('#{$_url}@2.png')); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; - } - } + &:insensitive { @include button(osd-backdrop-insensitive); } } } } } -%scale_marks_above_horz { margin: 14px 10px 10px 10px; } -%scale_marks_below_horz { margin: 10px 10px 14px 10px; } -%scale_marks_above_vert { margin: 10px 10px 10px 14px; } -%scale_marks_below_vert { margin: 10px 14px 10px 10px; } -%scale_marks_above_horz_ft { margin: 12px 8px 8px 8px; } -%scale_marks_below_horz_ft { margin: 8px 8px 12px 8px; } -%scale_marks_above_vert_ft { margin: 8px 8px 8px 12px; } -%scale_marks_below_vert_ft { margin: 8px 12px 8px 8px; } +%trough { + border: 1px solid $borders_color; + border-radius: 3px; + background-color: $dark_fill; + box-shadow: inset 1px 1px transparentize(black, 0.9), + _widget_edge(); + + &:insensitive { + background-color: $insensitive_bg_color; + box-shadow: _widget_edge(); + } + + &:backdrop { + background-color: $backdrop_dark_fill; + border-color: $backdrop_borders_color; + box-shadow: none; + &:insensitive { background-color: $insensitive_bg_color; } + } + + // OSD + .osd & { + border-color: $osd_borders_color; + background-color: transparentize($osd_borders_color, 0.2); + box-shadow: none; + outline-color: transparentize($osd_fg_color, 0.8); + + &:insensitive { background-color: $osd_insensitive_bg_color; } + } +} + +%highlight { + border: 1px solid $selected_borders_color; + border-radius: 3px; + background-color: $selected_bg_color; + + &:insensitive { + background-color: transparent; + border-color: transparent; + } + + &:backdrop { + border-color: if($variant=='light', $selected_bg_color, + $selected_borders_color); + &:insensitive { + background-color: transparent; + border-color: transparent; + } + } + + // OSD + .osd & { + border-color: $osd_borders_color; + &:insensitive { border-color: transparent; } + } +} /***************** * Progress bars * *****************/ progressbar { + // FIXME: insensitive state missing padding: 0; font-size: smaller; color: transparentize($fg_color, 0.6); - box-shadow: inset 1px 1px transparentize(black, 0.9), // needs to be set - _widget_edge(); // here ot it gets - // clipped - &:backdrop { - color: $backdrop_insensitive_color; - } - &.osd { - -GtkProgressBar-min-horizontal-bar-height: 3; - trough { - border-style: none; - background-color: transparent; - box-shadow: none; - } - } + box-shadow: _widget_edge(); // needs to be set here; + &:backdrop { box-shadow: none; } + trough { - border: 1px solid $borders_color; - border-radius: 3px; - background-color: mix($borders_color, $bg_color, 35%); - &:backdrop { - border-color: $backdrop_borders_color; - background-color: $backdrop_dark_fill; - box-shadow: 0 1px transparentize(white,1); + @extend %trough; + } + + &:backdrop trough { @extend %trough:backdrop; } // looks like states are not passed to the trough component here + + progress { + @extend %highlight; + border-radius: 1.5px; + &.left { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + &.right { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + } + &.top { + border-top-right-radius: 3px; + border-top-left-radius: 3px; + } + &.bottom { + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; } } -} -progressbar.horizontal progress { - @include progressbar_fill; - border: 1px solid $selected_borders_color; - border-radius: 1.5px; - box-shadow: none; //needed for clipping - &.left { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - } - &.right { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - &.left.right { - box-shadow: none; - } + &:backdrop progress { @extend %highlight:backdrop; } // states not passed here as well } -progressbar.vertical progress { - @include progressbar_fill(vertical); - border: 1px solid $selected_borders_color; - border-radius: 1.5px; - box-shadow: none; //needed for clipping - &.bottom { - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; - box-shadow: none; - } - &.top { - border-top-left-radius: 3px; - border-top-right-radius: 3px; - } - &:backdrop { - border-color: if($variant=='light', $selected_bg_color, - $selected_borders_color); - background-image: none; - background-color: $selected_bg_color; - box-shadow: none; - } - &.osd { - background-image: none; - background-color: $selected_bg_color; - border-style: none; - border-radius: 0; - } -} - - /************* * Level Bar * *************/ diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css index a3b1cf4d3d..a23179fa4a 100644 --- a/gtk/theme/Adwaita/gtk-contained-dark.css +++ b/gtk/theme/Adwaita/gtk-contained-dark.css @@ -2913,397 +2913,152 @@ scale { -GtkRange-slider-width: 24; -GtkRange-trough-border: 2; outline-offset: -9px; - outline-radius: 4px; } + outline-radius: 6px; } scale.fine-tune { outline-offset: -7px; - outline-radius: 6px; } - scale.fine-tune highlight, scale.fine-tune fill, scale.fine-tune trough { + outline-radius: 8px; } + scale.fine-tune trough, + scale.fine-tune fill, + scale.fine-tune highlight { + margin: 10px; border-radius: 4px; } - scale.fine-tune highlight:not(:first-child):not(:last-child), scale.fine-tune highlight:only-child, scale.fine-tune fill:not(:first-child):not(:last-child), scale.fine-tune fill:only-child, scale.fine-tune trough:not(:first-child):not(:last-child), scale.fine-tune trough:only-child { - margin: 10px; } - scale trough:not(:first-child):not(:last-child), scale trough:only-child, scale fill:not(:first-child):not(:last-child), scale fill:only-child, scale highlight:not(:first-child):not(:last-child), scale highlight:only-child { + scale trough, + scale fill, + scale highlight { margin: 12px; } - scale trough:not(:first-child):not(:last-child) slider, scale trough:only-child slider { + scale:not(.vertical) slider { margin: 2px 0; } - scale.vertical trough:not(:first-child):not(:last-child) slider, scale.vertical trough:only-child slider { + scale.vertical slider { margin: 0 2px; } - scale trough { - border: 1px solid #1c1f1f; - border-radius: 3px; - background-color: #2d3232; - box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), 0 1px rgba(238, 238, 236, 0.1); } - scale trough slider { + scale slider { + color: #eeeeec; + outline-color: rgba(238, 238, 236, 0.3); + border-color: #1c1f1f; + background-image: linear-gradient(to bottom, #454c4c, #393f3f 40%, #2d3232); + text-shadow: 0 -1px rgba(0, 0, 0, 0.81176); + -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.81176); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(0, 0, 0, 0.1); + border: 1px solid #151717; + border-radius: 100%; } + scale slider:hover { color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #1c1f1f; - background-image: linear-gradient(to bottom, #454c4c, #393f3f 40%, #2d3232); - text-shadow: 0 -1px rgba(0, 0, 0, 0.81176); - -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.81176); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(238, 238, 236, 0.1); - border: 1px solid; - border-radius: 50%; - border-color: #151717; - box-shadow: inset 0 1px rgba(255, 255, 255, 0.15), inset 0 -2px #393f3f, inset 0 -1px #2b2f2f; } - scale trough slider:hover { - color: #eeeeec; - outline-color: rgba(238, 238, 236, 0.3); - border-color: #1c1f1f; - background-image: linear-gradient(to bottom, #5b6464, #434a4a 40%, #393f3f); - text-shadow: 0 -1px rgba(0, 0, 0, 0.77976); - -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.77976); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(238, 238, 236, 0.1); - border-color: #151717; - border-radius: 50%; - box-shadow: inset 0 1px rgba(255, 255, 255, 0.15), inset 0 -2px rgba(255, 255, 255, 0.14), inset 0 -1px #303535; } - scale trough slider:insensitive { - border-style: solid; - border-radius: 50%; - background-image: linear-gradient(to bottom, #333636); - box-shadow: none; } - scale trough slider:backdrop { - border-style: solid; - border-radius: 50%; - border-color: #181a1a; - background-image: linear-gradient(to bottom, #393f3f); - box-shadow: none; } - scale trough slider:backdrop:insensitive { + background-image: linear-gradient(to bottom, #5b6464, #434a4a 40%, #393f3f); + text-shadow: 0 -1px rgba(0, 0, 0, 0.77976); + -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.77976); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(0, 0, 0, 0.1); } + scale slider:active { + border-color: #0f2b48; } + scale slider:insensitive { + color: #949796; + border-color: #1c1f1f; + background-image: linear-gradient(to bottom, #333636); + text-shadow: none; + -gtk-icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0.1); } + scale slider:insensitive > .label { + color: inherit; } + scale slider:backdrop { + color: #949796; + border-color: #1f2222; + background-image: linear-gradient(to bottom, #393f3f); + text-shadow: none; + -gtk-icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0); } + scale slider:backdrop:insensitive { color: #5d6767; border-color: #1f2222; background-image: linear-gradient(to bottom, #333636); text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0); } - scale trough slider:backdrop:insensitive > .label { + scale slider:backdrop:insensitive > .label { color: inherit; } - scale trough slider:active { - color: #eeeeec; - outline-color: rgba(238, 238, 236, 0.3); - border-color: #1c1f1f; - background-image: linear-gradient(to bottom, #232727, #292d2d 40%, #2d3232); - text-shadow: 0 -1px rgba(0, 0, 0, 0.89176); - -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.89176); - box-shadow: inset 0 1px rgba(0, 0, 0, 0.07), inset 0 2px 1px -2px rgba(0, 0, 0, 0.6), 0 1px rgba(238, 238, 236, 0.1); - border: 1px solid #14375d; } - .osd scale trough slider { - color: #eeeeec; + .osd scale slider { + color: #eeeeec; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.7)); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + outline-color: rgba(238, 238, 236, 0.3); + border-color: rgba(0, 0, 0, 0.7); + background-color: #202526; } + .osd scale slider:hover { + color: white; border-color: rgba(0, 0, 0, 0.7); - background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.7)); + background-image: linear-gradient(to bottom, rgba(60, 69, 71, 0.7)); background-clip: padding-box; box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; - outline-color: rgba(238, 238, 236, 0.3); - background-color: #202526; } - .osd scale trough slider:hover { - color: white; - border-color: rgba(0, 0, 0, 0.7); - background-image: linear-gradient(to bottom, rgba(60, 69, 71, 0.7)); - background-clip: padding-box; - box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); - text-shadow: 0 1px black; - -gtk-icon-shadow: 0 1px black; - outline-color: rgba(238, 238, 236, 0.3); } - .osd scale trough slider:active { - color: white; - border-color: rgba(0, 0, 0, 0.7); - background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7)); - background-clip: padding-box; - box-shadow: none; - text-shadow: none; - -gtk-icon-shadow: none; - outline-color: rgba(238, 238, 236, 0.3); } - .osd scale trough slider:backdrop { - color: #eeeeec; - border-color: rgba(0, 0, 0, 0.7); - background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.7)); - background-clip: padding-box; - box-shadow: none; - text-shadow: none; - -gtk-icon-shadow: none; } - scale trough highlight { - background-image: linear-gradient(to bottom, #215d9c 2px, #266cb5); - border: 1px solid #1c1f1f; - border-radius: 3px; - box-shadow: 0 1px rgba(238, 238, 236, 0.1); } - scale trough highlight.vertical { - background-image: linear-gradient(to right, #215d9c 2px, #266cb5); } - scale trough highlight:backdrop { - border-color: #0f2b48; - background-color: #215d9c; - box-shadow: none; } - scale trough fill { - background: none; - background-color: red; - border: 1px solid #1c1f1f; - border-radius: 3px; - box-shadow: 0 1px rgba(238, 238, 236, 0.1); } - scale trough:insensitive, scale trough.vertical:insensitive { - border-color: #1c1f1f; - background-image: none; - background-color: #333636; - box-shadow: 0 1px rgba(238, 238, 236, 0.1); } - scale trough:backdrop { - border-color: #1f2222; - background-color: #2b2f2f; - box-shadow: none; } - scale trough:backdrop:insensitive, scale trough .highlight:backdrop:insensitive { - border-color: #1f2222; - background-color: #333636; } - .osd scale trough { - border-color: rgba(0, 0, 0, 0.7); - box-shadow: none; - margin: 9px; - background-color: rgba(0, 0, 0, 0.5); - outline-color: rgba(238, 238, 236, 0.2); - outline-offset: -8px; } - .osd scale trough.fine-tune { - margin: 7px; } - .osd scale trough.highlight { - background-image: none; - background-color: #215d9c; } - .osd scale trough:insensitive, .osd scale trough:backdrop:insensitive { - border-color: transparent; - background-color: transparent; } - .osd scale trough:backdrop { + outline-color: rgba(238, 238, 236, 0.3); } + .osd scale slider:active { + color: white; border-color: rgba(0, 0, 0, 0.7); - background-image: none; } - row:selected scale { - border-color: #0f2b48; - box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1); } - row:selected scale:backdrop { - box-shadow: none; } - row:selected scale.highlight:backdrop { - border-color: #0f2b48; } - row:selected scale:insensitive, row:selected scale.highlight:insensitive { - border-color: #215d9c; - box-shadow: none; - background-color: #90aece; - background-image: none; } - row:selected scale:insensitive:backdrop, row:selected scale.highlight:insensitive:backdrop { - background-color: #90aece; } + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; + outline-color: rgba(238, 238, 236, 0.3); } + .osd scale slider:insensitive { + color: #878a89; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(53, 57, 58, 0.5)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; } + .osd scale slider:backdrop { + color: #eeeeec; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.7)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; } -scale marks { - color: alpha(currentColor,0.5); } +scale trough, progressbar trough { + border: 1px solid #1c1f1f; + border-radius: 3px; + background-color: #2f3434; + box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), 0 1px rgba(238, 238, 236, 0.1); } + scale trough:insensitive, progressbar trough:insensitive { + background-color: #333636; + box-shadow: 0 1px rgba(238, 238, 236, 0.1); } + scale trough:backdrop, progressbar trough:backdrop, progressbar:backdrop trough { + background-color: #303535; + border-color: #1f2222; + box-shadow: none; } + scale trough:backdrop:insensitive, progressbar trough:backdrop:insensitive, progressbar:backdrop trough:insensitive { + background-color: #333636; } + .osd scale trough, scale .osd trough, .osd progressbar trough, progressbar .osd trough { + border-color: rgba(0, 0, 0, 0.7); + background-color: rgba(0, 0, 0, 0.5); + box-shadow: none; + outline-color: rgba(238, 238, 236, 0.2); } + .osd scale trough:insensitive, scale .osd trough:insensitive, .osd progressbar trough:insensitive, progressbar .osd trough:insensitive { + background-color: rgba(53, 57, 58, 0.5); } -scale trough:first-child:not(:last-child) slider { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-below-dark.png"), url("assets/slider-horz-scale-has-marks-below-dark@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } -scale trough:first-child:not(:last-child) slider:hover { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-below-hover-dark.png"), url("assets/slider-horz-scale-has-marks-below-hover-dark@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } -scale trough:first-child:not(:last-child) slider:active { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-below-active-dark.png"), url("assets/slider-horz-scale-has-marks-below-active-dark@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } -scale trough:first-child:not(:last-child) slider:insensitive { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-below-insensitive-dark.png"), url("assets/slider-horz-scale-has-marks-below-insensitive-dark@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } -scale trough:first-child:not(:last-child) slider:backdrop { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-below-backdrop-dark.png"), url("assets/slider-horz-scale-has-marks-below-backdrop-dark@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } -scale trough:first-child:not(:last-child) slider:backdrop:insensitive { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-below-backdrop-insensitive-dark.png"), url("assets/slider-horz-scale-has-marks-below-backdrop-insensitive-dark@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } - -scale trough:not(:first-child):last-child slider { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-above-dark.png"), url("assets/slider-horz-scale-has-marks-above-dark@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } -scale trough:not(:first-child):last-child slider:hover { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-above-hover-dark.png"), url("assets/slider-horz-scale-has-marks-above-hover-dark@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } -scale trough:not(:first-child):last-child slider:active { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-above-active-dark.png"), url("assets/slider-horz-scale-has-marks-above-active-dark@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } -scale trough:not(:first-child):last-child slider:insensitive { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-above-insensitive-dark.png"), url("assets/slider-horz-scale-has-marks-above-insensitive-dark@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } -scale trough:not(:first-child):last-child slider:backdrop { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-above-backdrop-dark.png"), url("assets/slider-horz-scale-has-marks-above-backdrop-dark@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } -scale trough:not(:first-child):last-child slider:backdrop:insensitive { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-above-backdrop-insensitive-dark.png"), url("assets/slider-horz-scale-has-marks-above-backdrop-insensitive-dark@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } - -scale.vertical trough:first-child:not(:last-child) slider { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-below-dark.png"), url("assets/slider-vert-scale-has-marks-below-dark@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } -scale.vertical trough:first-child:not(:last-child) slider:hover { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-below-hover-dark.png"), url("assets/slider-vert-scale-has-marks-below-hover-dark@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } -scale.vertical trough:first-child:not(:last-child) slider:active { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-below-active-dark.png"), url("assets/slider-vert-scale-has-marks-below-active-dark@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } -scale.vertical trough:first-child:not(:last-child) slider:insensitive { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-below-insensitive-dark.png"), url("assets/slider-vert-scale-has-marks-below-insensitive-dark@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } -scale.vertical trough:first-child:not(:last-child) slider:backdrop { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-below-backdrop-dark.png"), url("assets/slider-vert-scale-has-marks-below-backdrop-dark@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } -scale.vertical trough:first-child:not(:last-child) slider:backdrop:insensitive { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-below-backdrop-insensitive-dark.png"), url("assets/slider-vert-scale-has-marks-below-backdrop-insensitive-dark@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } - -scale.vertical trough:not(:first-child):last-child slider { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-above-dark.png"), url("assets/slider-vert-scale-has-marks-above-dark@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } -scale.vertical trough:not(:first-child):last-child slider:hover { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-above-hover-dark.png"), url("assets/slider-vert-scale-has-marks-above-hover-dark@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } -scale.vertical trough:not(:first-child):last-child slider:active { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-above-active-dark.png"), url("assets/slider-vert-scale-has-marks-above-active-dark@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } -scale.vertical trough:not(:first-child):last-child slider:insensitive { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-above-insensitive-dark.png"), url("assets/slider-vert-scale-has-marks-above-insensitive-dark@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } -scale.vertical trough:not(:first-child):last-child slider:backdrop { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-above-backdrop-dark.png"), url("assets/slider-vert-scale-has-marks-above-backdrop-dark@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } -scale.vertical trough:not(:first-child):last-child slider:backdrop:insensitive { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-above-backdrop-insensitive-dark.png"), url("assets/slider-vert-scale-has-marks-above-backdrop-insensitive-dark@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } - -scale trough:not(:first-child):last-child { - margin: 14px 10px 10px 10px; } - -scale trough:first-child:not(:last-child) { - margin: 10px 10px 14px 10px; } - -scale.vertical trough:not(:first-child):last-child { - margin: 10px 10px 10px 14px; } - -scale.vertical trough:first-child:not(:last-child) { - margin: 10px 14px 10px 10px; } - -scale.fine-tune trough:not(:first-child):last-child { - margin: 12px 8px 8px 8px; } - -scale.fine-tune trough:first-child:not(:last-child) { - margin: 8px 8px 12px 8px; } - -scale.vertical.fine-tune trough:not(:first-child):last-child { - margin: 8px 8px 8px 12px; } - -scale.vertical.fine-tune trough:first-child:not(:last-child) { - margin: 8px 12px 8px 8px; } +scale highlight, progressbar progress { + border: 1px solid #0f2b48; + border-radius: 3px; + background-color: #215d9c; } + scale highlight:insensitive, progressbar progress:insensitive { + background-color: transparent; + border-color: transparent; } + scale highlight:backdrop, progressbar progress:backdrop, progressbar:backdrop progress { + border-color: #0f2b48; } + scale highlight:backdrop:insensitive, progressbar progress:backdrop:insensitive, progressbar:backdrop progress:insensitive { + background-color: transparent; + border-color: transparent; } + .osd scale highlight, scale .osd highlight, .osd progressbar progress, progressbar .osd progress { + border-color: rgba(0, 0, 0, 0.7); } + .osd scale highlight:insensitive, scale .osd highlight:insensitive, .osd progressbar progress:insensitive, progressbar .osd progress:insensitive { + border-color: transparent; } /***************** * Progress bars * @@ -3312,60 +3067,23 @@ progressbar { padding: 0; font-size: smaller; color: rgba(238, 238, 236, 0.4); - box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), 0 1px rgba(238, 238, 236, 0.1); } + box-shadow: 0 1px rgba(238, 238, 236, 0.1); } progressbar:backdrop { - color: #5d6767; } - progressbar.osd { - -GtkProgressBar-min-horizontal-bar-height: 3; } - progressbar.osd trough { - border-style: none; - background-color: transparent; - box-shadow: none; } - progressbar trough { - border: 1px solid #1c1f1f; - border-radius: 3px; - background-color: #2f3434; } - progressbar trough:backdrop { - border-color: #1f2222; - background-color: #303535; - box-shadow: 0 1px rgba(255, 255, 255, 0); } - -progressbar.horizontal progress { - background-image: linear-gradient(to bottom, #215d9c 2px, #266cb5); - border: 1px solid #0f2b48; - border-radius: 1.5px; - box-shadow: none; } - progressbar.horizontal progress.left { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; } - progressbar.horizontal progress.right { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; } - progressbar.horizontal progress.left.right { box-shadow: none; } - -progressbar.vertical progress { - background-image: linear-gradient(to right, #215d9c 2px, #266cb5); - border: 1px solid #0f2b48; - border-radius: 1.5px; - box-shadow: none; } - progressbar.vertical progress.bottom { - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; - box-shadow: none; } - progressbar.vertical progress.top { - border-top-left-radius: 3px; - border-top-right-radius: 3px; } - progressbar.vertical progress:backdrop { - border-color: #0f2b48; - background-image: none; - background-color: #215d9c; - box-shadow: none; } - progressbar.vertical progress.osd { - background-image: none; - background-color: #215d9c; - border-style: none; - border-radius: 0; } + progressbar progress { + border-radius: 1.5px; } + progressbar progress.left { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; } + progressbar progress.right { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; } + progressbar progress.top { + border-top-right-radius: 3px; + border-top-left-radius: 3px; } + progressbar progress.bottom { + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; } /************* * Level Bar * diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css index cac2b0e044..66f0d6971a 100644 --- a/gtk/theme/Adwaita/gtk-contained.css +++ b/gtk/theme/Adwaita/gtk-contained.css @@ -3075,397 +3075,152 @@ scale { -GtkRange-slider-width: 24; -GtkRange-trough-border: 2; outline-offset: -9px; - outline-radius: 4px; } + outline-radius: 6px; } scale.fine-tune { outline-offset: -7px; - outline-radius: 6px; } - scale.fine-tune highlight, scale.fine-tune fill, scale.fine-tune trough { + outline-radius: 8px; } + scale.fine-tune trough, + scale.fine-tune fill, + scale.fine-tune highlight { + margin: 10px; border-radius: 4px; } - scale.fine-tune highlight:not(:first-child):not(:last-child), scale.fine-tune highlight:only-child, scale.fine-tune fill:not(:first-child):not(:last-child), scale.fine-tune fill:only-child, scale.fine-tune trough:not(:first-child):not(:last-child), scale.fine-tune trough:only-child { - margin: 10px; } - scale trough:not(:first-child):not(:last-child), scale trough:only-child, scale fill:not(:first-child):not(:last-child), scale fill:only-child, scale highlight:not(:first-child):not(:last-child), scale highlight:only-child { + scale trough, + scale fill, + scale highlight { margin: 12px; } - scale trough:not(:first-child):not(:last-child) slider, scale trough:only-child slider { + scale:not(.vertical) slider { margin: 2px 0; } - scale.vertical trough:not(:first-child):not(:last-child) slider, scale.vertical trough:only-child slider { + scale.vertical slider { margin: 0 2px; } - scale trough { - border: 1px solid #a1a1a1; - border-radius: 3px; - background-color: #cfcfcf; - box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), 0 1px white; } - scale trough slider { + scale slider { + color: #2e3436; + outline-color: rgba(46, 52, 54, 0.3); + border-color: #a1a1a1; + background-image: linear-gradient(to bottom, #fafafa, #ededed 40%, #e0e0e0); + text-shadow: 0 1px rgba(255, 255, 255, 0.76923); + -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923); + box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1); + border: 1px solid #999999; + border-radius: 100%; } + scale slider:hover { color: #2e3436; outline-color: rgba(46, 52, 54, 0.3); border-color: #a1a1a1; - background-image: linear-gradient(to bottom, #fafafa, #ededed 40%, #e0e0e0); + background-image: linear-gradient(to bottom, white, #f7f7f7 40%, #ededed); text-shadow: 0 1px rgba(255, 255, 255, 0.76923); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923); - box-shadow: inset 0 1px white, 0 1px white; - border: 1px solid; - border-radius: 50%; - border-color: #999999; - box-shadow: inset 0 1px white, inset 0 -2px #ededed, inset 0 -1px #c7c7c7; } - scale trough slider:hover { - color: #2e3436; - outline-color: rgba(46, 52, 54, 0.3); - border-color: #a1a1a1; - background-image: linear-gradient(to bottom, white, #f7f7f7 40%, #ededed); - text-shadow: 0 1px rgba(255, 255, 255, 0.76923); - -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923); - box-shadow: inset 0 1px white, 0 1px white; - border-color: #999999; - border-radius: 50%; - box-shadow: inset 0 1px white, inset 0 -2px white, inset 0 -1px #d6d6d6; } - scale trough slider:insensitive { - border-style: solid; - border-radius: 50%; - background-image: linear-gradient(to bottom, #f4f4f4); - box-shadow: none; } - scale trough slider:backdrop { - border-style: solid; - border-radius: 50%; - border-color: #a1a1a1; - background-image: linear-gradient(to bottom, #ededed); - box-shadow: none; } - scale trough slider:backdrop:insensitive { + box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1); } + scale slider:active { + border-color: #184472; } + scale slider:insensitive { + color: #8e9192; + border-color: #a1a1a1; + background-image: linear-gradient(to bottom, #f4f4f4); + text-shadow: none; + -gtk-icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px white; } + scale slider:insensitive > .label { + color: inherit; } + scale slider:backdrop { + color: #8e9192; + border-color: darkgray; + background-image: linear-gradient(to bottom, #ededed); + text-shadow: none; + -gtk-icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } + scale slider:backdrop:insensitive { color: #c7c7c7; border-color: darkgray; background-image: linear-gradient(to bottom, #f4f4f4); text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } - scale trough slider:backdrop:insensitive > .label { + scale slider:backdrop:insensitive > .label { color: inherit; } - scale trough slider:active { - color: #2e3436; - outline-color: rgba(46, 52, 54, 0.3); - border-color: #a1a1a1; - background-image: linear-gradient(to bottom, #d6d6d6, gainsboro 40%, #e0e0e0); - text-shadow: 0 1px rgba(255, 255, 255, 0.76923); - -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923); - box-shadow: inset 0 1px rgba(0, 0, 0, 0.07), inset 0 2px 1px -2px rgba(0, 0, 0, 0.6), 0 1px white; - border: 1px solid #153d65; } - .osd scale trough slider { - color: #eeeeec; + .osd scale slider { + color: #eeeeec; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.7)); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + outline-color: rgba(238, 238, 236, 0.3); + border-color: rgba(0, 0, 0, 0.7); + background-color: #202526; } + .osd scale slider:hover { + color: white; border-color: rgba(0, 0, 0, 0.7); - background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.7)); + background-image: linear-gradient(to bottom, rgba(60, 69, 71, 0.7)); background-clip: padding-box; box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; - outline-color: rgba(238, 238, 236, 0.3); - background-color: #202526; } - .osd scale trough slider:hover { - color: white; - border-color: rgba(0, 0, 0, 0.7); - background-image: linear-gradient(to bottom, rgba(60, 69, 71, 0.7)); - background-clip: padding-box; - box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); - text-shadow: 0 1px black; - -gtk-icon-shadow: 0 1px black; - outline-color: rgba(238, 238, 236, 0.3); } - .osd scale trough slider:active { - color: white; - border-color: rgba(0, 0, 0, 0.7); - background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7)); - background-clip: padding-box; - box-shadow: none; - text-shadow: none; - -gtk-icon-shadow: none; - outline-color: rgba(238, 238, 236, 0.3); } - .osd scale trough slider:backdrop { - color: #eeeeec; - border-color: rgba(0, 0, 0, 0.7); - background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.7)); - background-clip: padding-box; - box-shadow: none; - text-shadow: none; - -gtk-icon-shadow: none; } - scale trough highlight { - background-image: linear-gradient(to bottom, #4a90d9 2px, #63a0de); - border: 1px solid #a1a1a1; - border-radius: 3px; - box-shadow: 0 1px white; } - scale trough highlight.vertical { - background-image: linear-gradient(to right, #4a90d9 2px, #63a0de); } - scale trough highlight:backdrop { - border-color: #4a90d9; - background-color: #4a90d9; - box-shadow: none; } - scale trough fill { - background: none; - background-color: red; - border: 1px solid #a1a1a1; - border-radius: 3px; - box-shadow: 0 1px white; } - scale trough:insensitive, scale trough.vertical:insensitive { - border-color: #a1a1a1; - background-image: none; - background-color: #f4f4f4; - box-shadow: 0 1px white; } - scale trough:backdrop { - border-color: darkgray; - background-color: #c7c7c7; - box-shadow: none; } - scale trough:backdrop:insensitive, scale trough .highlight:backdrop:insensitive { - border-color: darkgray; - background-color: #f4f4f4; } - .osd scale trough { - border-color: rgba(0, 0, 0, 0.7); - box-shadow: none; - margin: 9px; - background-color: rgba(0, 0, 0, 0.5); - outline-color: rgba(238, 238, 236, 0.2); - outline-offset: -8px; } - .osd scale trough.fine-tune { - margin: 7px; } - .osd scale trough.highlight { - background-image: none; - background-color: #4a90d9; } - .osd scale trough:insensitive, .osd scale trough:backdrop:insensitive { - border-color: transparent; - background-color: transparent; } - .osd scale trough:backdrop { + outline-color: rgba(238, 238, 236, 0.3); } + .osd scale slider:active { + color: white; border-color: rgba(0, 0, 0, 0.7); - background-image: none; } - row:selected scale { - border-color: #184472; - box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1); } - row:selected scale:backdrop { - box-shadow: none; } - row:selected scale.highlight:backdrop { - border-color: #184472; } - row:selected scale:insensitive, row:selected scale.highlight:insensitive { - border-color: #4a90d9; - box-shadow: none; - background-color: #a5c8ec; - background-image: none; } - row:selected scale:insensitive:backdrop, row:selected scale.highlight:insensitive:backdrop { - background-color: #a5c8ec; } + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; + outline-color: rgba(238, 238, 236, 0.3); } + .osd scale slider:insensitive { + color: #878a89; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(53, 57, 58, 0.5)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; } + .osd scale slider:backdrop { + color: #eeeeec; + border-color: rgba(0, 0, 0, 0.7); + background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.7)); + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; } -scale marks { - color: alpha(currentColor,0.5); } +scale trough, progressbar trough { + border: 1px solid #a1a1a1; + border-radius: 3px; + background-color: #d2d2d2; + box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), 0 1px white; } + scale trough:insensitive, progressbar trough:insensitive { + background-color: #f4f4f4; + box-shadow: 0 1px white; } + scale trough:backdrop, progressbar trough:backdrop, progressbar:backdrop trough { + background-color: #d5d5d5; + border-color: darkgray; + box-shadow: none; } + scale trough:backdrop:insensitive, progressbar trough:backdrop:insensitive, progressbar:backdrop trough:insensitive { + background-color: #f4f4f4; } + .osd scale trough, scale .osd trough, .osd progressbar trough, progressbar .osd trough { + border-color: rgba(0, 0, 0, 0.7); + background-color: rgba(0, 0, 0, 0.5); + box-shadow: none; + outline-color: rgba(238, 238, 236, 0.2); } + .osd scale trough:insensitive, scale .osd trough:insensitive, .osd progressbar trough:insensitive, progressbar .osd trough:insensitive { + background-color: rgba(53, 57, 58, 0.5); } -scale trough:first-child:not(:last-child) slider { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-below.png"), url("assets/slider-horz-scale-has-marks-below@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } -scale trough:first-child:not(:last-child) slider:hover { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-below-hover.png"), url("assets/slider-horz-scale-has-marks-below-hover@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } -scale trough:first-child:not(:last-child) slider:active { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-below-active.png"), url("assets/slider-horz-scale-has-marks-below-active@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } -scale trough:first-child:not(:last-child) slider:insensitive { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-below-insensitive.png"), url("assets/slider-horz-scale-has-marks-below-insensitive@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } -scale trough:first-child:not(:last-child) slider:backdrop { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-below-backdrop.png"), url("assets/slider-horz-scale-has-marks-below-backdrop@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } -scale trough:first-child:not(:last-child) slider:backdrop:insensitive { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-below-backdrop-insensitive.png"), url("assets/slider-horz-scale-has-marks-below-backdrop-insensitive@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } - -scale trough:not(:first-child):last-child slider { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-above.png"), url("assets/slider-horz-scale-has-marks-above@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } -scale trough:not(:first-child):last-child slider:hover { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-above-hover.png"), url("assets/slider-horz-scale-has-marks-above-hover@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } -scale trough:not(:first-child):last-child slider:active { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-above-active.png"), url("assets/slider-horz-scale-has-marks-above-active@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } -scale trough:not(:first-child):last-child slider:insensitive { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-above-insensitive.png"), url("assets/slider-horz-scale-has-marks-above-insensitive@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } -scale trough:not(:first-child):last-child slider:backdrop { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-above-backdrop.png"), url("assets/slider-horz-scale-has-marks-above-backdrop@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } -scale trough:not(:first-child):last-child slider:backdrop:insensitive { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-horz-scale-has-marks-above-backdrop-insensitive.png"), url("assets/slider-horz-scale-has-marks-above-backdrop-insensitive@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } - -scale.vertical trough:first-child:not(:last-child) slider { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-below.png"), url("assets/slider-vert-scale-has-marks-below@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } -scale.vertical trough:first-child:not(:last-child) slider:hover { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-below-hover.png"), url("assets/slider-vert-scale-has-marks-below-hover@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } -scale.vertical trough:first-child:not(:last-child) slider:active { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-below-active.png"), url("assets/slider-vert-scale-has-marks-below-active@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } -scale.vertical trough:first-child:not(:last-child) slider:insensitive { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-below-insensitive.png"), url("assets/slider-vert-scale-has-marks-below-insensitive@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } -scale.vertical trough:first-child:not(:last-child) slider:backdrop { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-below-backdrop.png"), url("assets/slider-vert-scale-has-marks-below-backdrop@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } -scale.vertical trough:first-child:not(:last-child) slider:backdrop:insensitive { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-below-backdrop-insensitive.png"), url("assets/slider-vert-scale-has-marks-below-backdrop-insensitive@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } - -scale.vertical trough:not(:first-child):last-child slider { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-above.png"), url("assets/slider-vert-scale-has-marks-above@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } -scale.vertical trough:not(:first-child):last-child slider:hover { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-above-hover.png"), url("assets/slider-vert-scale-has-marks-above-hover@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } -scale.vertical trough:not(:first-child):last-child slider:active { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-above-active.png"), url("assets/slider-vert-scale-has-marks-above-active@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } -scale.vertical trough:not(:first-child):last-child slider:insensitive { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-above-insensitive.png"), url("assets/slider-vert-scale-has-marks-above-insensitive@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } -scale.vertical trough:not(:first-child):last-child slider:backdrop { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-above-backdrop.png"), url("assets/slider-vert-scale-has-marks-above-backdrop@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } -scale.vertical trough:not(:first-child):last-child slider:backdrop:insensitive { - border-style: none; - border-radius: 0; - background-color: transparent; - background-image: -gtk-scaled(url("assets/slider-vert-scale-has-marks-above-backdrop-insensitive.png"), url("assets/slider-vert-scale-has-marks-above-backdrop-insensitive@2.png")); - background-repeat: no-repeat; - background-position: center; - box-shadow: none; } - -scale trough:not(:first-child):last-child { - margin: 14px 10px 10px 10px; } - -scale trough:first-child:not(:last-child) { - margin: 10px 10px 14px 10px; } - -scale.vertical trough:not(:first-child):last-child { - margin: 10px 10px 10px 14px; } - -scale.vertical trough:first-child:not(:last-child) { - margin: 10px 14px 10px 10px; } - -scale.fine-tune trough:not(:first-child):last-child { - margin: 12px 8px 8px 8px; } - -scale.fine-tune trough:first-child:not(:last-child) { - margin: 8px 8px 12px 8px; } - -scale.vertical.fine-tune trough:not(:first-child):last-child { - margin: 8px 8px 8px 12px; } - -scale.vertical.fine-tune trough:first-child:not(:last-child) { - margin: 8px 12px 8px 8px; } +scale highlight, progressbar progress { + border: 1px solid #184472; + border-radius: 3px; + background-color: #4a90d9; } + scale highlight:insensitive, progressbar progress:insensitive { + background-color: transparent; + border-color: transparent; } + scale highlight:backdrop, progressbar progress:backdrop, progressbar:backdrop progress { + border-color: #4a90d9; } + scale highlight:backdrop:insensitive, progressbar progress:backdrop:insensitive, progressbar:backdrop progress:insensitive { + background-color: transparent; + border-color: transparent; } + .osd scale highlight, scale .osd highlight, .osd progressbar progress, progressbar .osd progress { + border-color: rgba(0, 0, 0, 0.7); } + .osd scale highlight:insensitive, scale .osd highlight:insensitive, .osd progressbar progress:insensitive, progressbar .osd progress:insensitive { + border-color: transparent; } /***************** * Progress bars * @@ -3474,60 +3229,23 @@ progressbar { padding: 0; font-size: smaller; color: rgba(46, 52, 54, 0.4); - box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), 0 1px white; } + box-shadow: 0 1px white; } progressbar:backdrop { - color: #c7c7c7; } - progressbar.osd { - -GtkProgressBar-min-horizontal-bar-height: 3; } - progressbar.osd trough { - border-style: none; - background-color: transparent; - box-shadow: none; } - progressbar trough { - border: 1px solid #a1a1a1; - border-radius: 3px; - background-color: #d2d2d2; } - progressbar trough:backdrop { - border-color: darkgray; - background-color: #d5d5d5; - box-shadow: 0 1px rgba(255, 255, 255, 0); } - -progressbar.horizontal progress { - background-image: linear-gradient(to bottom, #4a90d9 2px, #63a0de); - border: 1px solid #184472; - border-radius: 1.5px; - box-shadow: none; } - progressbar.horizontal progress.left { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; } - progressbar.horizontal progress.right { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; } - progressbar.horizontal progress.left.right { box-shadow: none; } - -progressbar.vertical progress { - background-image: linear-gradient(to right, #4a90d9 2px, #63a0de); - border: 1px solid #184472; - border-radius: 1.5px; - box-shadow: none; } - progressbar.vertical progress.bottom { - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; - box-shadow: none; } - progressbar.vertical progress.top { - border-top-left-radius: 3px; - border-top-right-radius: 3px; } - progressbar.vertical progress:backdrop { - border-color: #4a90d9; - background-image: none; - background-color: #4a90d9; - box-shadow: none; } - progressbar.vertical progress.osd { - background-image: none; - background-color: #4a90d9; - border-style: none; - border-radius: 0; } + progressbar progress { + border-radius: 1.5px; } + progressbar progress.left { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; } + progressbar progress.right { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; } + progressbar progress.top { + border-top-right-radius: 3px; + border-top-left-radius: 3px; } + progressbar progress.bottom { + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; } /************* * Level Bar *