summaryrefslogtreecommitdiff
path: root/desktop-themes
diff options
context:
space:
mode:
authorraveit65 <[email protected]>2015-09-12 16:14:01 +0200
committerraveit65 <[email protected]>2015-09-12 16:16:48 +0200
commitdfb94b155fd9e332f7189f8aec0cf80c5f3d4677 (patch)
tree0c74adc074247a0ca4739cae91522b35e69c15be /desktop-themes
parent7c6443384134febb4b6801f02543e9791de80bed (diff)
downloadmate-themes-dfb94b155fd9e332f7189f8aec0cf80c5f3d4677.tar.bz2
mate-themes-dfb94b155fd9e332f7189f8aec0cf80c5f3d4677.tar.xz
Gtk+-3.18 Traditional themes: add real OSD support
Diffstat (limited to 'desktop-themes')
-rw-r--r--desktop-themes/TraditionalGreen/gtk-3.0/gtk-widgets.css388
-rw-r--r--desktop-themes/TraditionalGreen/gtk-3.0/gtk.css64
-rw-r--r--desktop-themes/TraditionalOk/gtk-3.0/gtk-widgets.css388
-rw-r--r--desktop-themes/TraditionalOk/gtk-3.0/gtk.css64
-rw-r--r--desktop-themes/TraditionalOkTest/gtk-3.0/gtk-widgets.css388
-rw-r--r--desktop-themes/TraditionalOkTest/gtk-3.0/gtk.css64
6 files changed, 1320 insertions, 36 deletions
diff --git a/desktop-themes/TraditionalGreen/gtk-3.0/gtk-widgets.css b/desktop-themes/TraditionalGreen/gtk-3.0/gtk-widgets.css
index 440bd95f..60288f46 100644
--- a/desktop-themes/TraditionalGreen/gtk-3.0/gtk-widgets.css
+++ b/desktop-themes/TraditionalGreen/gtk-3.0/gtk-widgets.css
@@ -1823,17 +1823,387 @@ GtkFileChooserDialog GtkPlacesSidebar.sidebar.frame .frame .sidebar.list .list-r
* OSD *
*******/
-.osd {
- color: @osd_fg_color;
- background-color: @osd_bg_color;
- border-width: 1px;
- border-style: solid;
- border-color: @osd_border_color;
+.background.osd {
+ color: @osd_fg;
+ background-color: @osd_bg;
}
-.osd.toolbar GtkVolumeButton.button.flat.image-button,
-.osd.toolbar GtkVolumeButton.button.flat.image-button:hover {
- padding: 2px;
+GtkOverlay.osd {
+ background-color: transparent;
+}
+
+.osd.frame {
+ background-clip: border-box;
+ background-origin: border-box;
+}
+
+.osd.button,
+.osd.button:active,
+.osd.button:checked,
+.osd .button,
+.osd .button:active,
+.osd .button:checked {
+ border-width: 1px;
+ border-style: solid;
+ border-image: none;
+ border-radius: 5px;
+}
+
+.osd .button {
+ border-color: shade (@theme_bg_color, 0.4);
+}
+.osd .button:insensitive {
+ border-color: alpha(@osd_button_border,0.5);
+}
+
+.osd .button:hover,
+.osd .button:active,
+.osd .button:checked {
+ border-color: shade (@theme_selected_bg_color, 0.5);
+}
+
+.osd.button,
+.osd .button {
+ padding: 6px;
+ background-image: linear-gradient(to bottom,
+ @osd_button_bg_a,
+ @osd_button_bg_b 68%,
+ @osd_button_bg_c);
+ color: @osd_button_fg;
+ text-shadow: 0 -1px @osd_button_shadow;
+ icon-shadow: 0 -1px @osd_button_shadow;
+}
+
+.osd.button {
+ padding: 8px;
+}
+
+.osd.button,
+.osd.button:active,
+.osd.button:checked {
+ border-color: transparent;
+}
+
+.osd.button,
+.osd.button:prelight,
+.osd.button:active,
+.osd.button:checked {
+ background-color: shade(@osd_bg, 1.10);
+}
+
+.osd .button,
+.osd .button:prelight,
+.osd .button:active,
+.osd .button:checked {
+ background-color: transparent;
+}
+
+.osd.button:insensitive,
+.osd .button:insensitive {
+ background-image: none;
+ background-color: @osd_button_bg_insensitive;
+}
+
+.osd.button:active:insensitive,
+.osd .button:active:insensitive,
+.osd.button:checked:insensitive,
+.osd .button:checked:insensitive {
+ background-image: none;
+ background-color: @osd_button_bg_insensitive_active;
+}
+
+.osd.button:hover,
+.osd .button:hover {
+ color: @osd_button_fg_hover;
+}
+
+.osd.button:active,
+.osd.button:hover:active,
+.osd .button:active,
+.osd .button:hover:active,
+.osd.button:checked,
+.osd.button:hover:checked,
+.osd .button:checked,
+.osd .button:hover:checked {
+ color: @osd_button_fg_active;
+}
+
+.osd.button:insensitive,
+.osd.button:active *:insensitive,
+.osd.button:checked *:insensitive,
+.osd .button:insensitive,
+.osd .button:active *:insensitive,
+.osd .button:checked *:insensitive {
+ color: @osd_button_fg_insensitive;
+ text-shadow: none;
+ icon-shadow: none;
+}
+
+.osd.button:hover,
+.osd .button:hover {
+ background-image: linear-gradient(to bottom,
+ @osd_button_bg_hover_a,
+ @osd_button_bg_hover_b 68%,
+ @osd_button_bg_hover_c);
+}
+
+.osd.button:active,
+.osd.button:active:hover,
+.osd .button:active,
+.osd .button:active:hover,
+.osd GtkMenuButton.menu-button:active,
+.osd.button:checked,
+.osd.button:checked:hover,
+.osd .button:checked,
+.osd .button:checked:hover,
+.osd GtkMenuButton.menu-button:checked {
+ background-image: linear-gradient(to bottom,
+ @osd_button_bg_active_a,
+ @osd_button_bg_active_b 20%,
+ @osd_button_bg_active_c);
+}
+
+.osd .linked .button:active:first-child {
+ border-left-width: 1px;
+}
+
+.osd .linked .button:active:last-child {
+ border-right-width: 1px;
+}
+
+.osd GtkMenuButton.menu-button:active {
+ background-color: transparent;
+ border-color: @osd_button_border;
+}
+
+.osd GtkMenuButton.menu-button:active {
+ color: @osd_button_fg_active;
+ text-shadow: 0 -1px @osd_button_shadow;
+}
+
+
+.osd.toolbar {
+ color: @osd_fg;
+ text-shadow: 0 1px @osd_text_shadow;
+ padding: 5px;
+ border-style: solid;
+ border-width: 1px;
+ border-color: shade (@theme_bg_color, 0.4);
+ border-radius: 2px;
+ background-image: linear-gradient(to bottom,
+ @osd_toolbar_bg_a,
+ @osd_toolbar_bg_b 63%,
+ @osd_toolbar_bg_c);
+ background-color: transparent;
+ -GtkToolbar-button-relief: normal;
+}
+
+.osd.toolbar .flat.button.image-button {
+ box-shadow: none;
+}
+
+.osd.toolbar .button,
+.osd.toolbar .button:hover,
+.osd.toolbar .button:active,
+.osd.toolbar .button:checked,
+.osd.toolbar .button:active:hover,
+.osd.toolbar .button:insensitive,
+.osd.toolbar .linked .button,
+.osd.toolbar .linked .button:hover,
+.osd.toolbar .linked .button:active,
+.osd.toolbar .linked .button:checked,
+.osd.toolbar .linked .button:active:hover,
+.osd.toolbar .linked .button:insensitive {
+ border-color: shade (@theme_bg_color, 0.4);
+ border-style: solid;
+ border-image: none;
+ padding: 8px;
+ border-radius: 0px;
+}
+
+.osd.toolbar .button:active,
+.osd.toolbar .button:active:hover {
+ background-image: linear-gradient(to bottom,
+ @osd_button_bg_active_a,
+ @osd_button_bg_active_b 20%,
+ @osd_button_bg_active_c);
+}
+
+.osd.toolbar .button:hover {
+ background-image: linear-gradient(to bottom,
+ @osd_button_bg_hover_a,
+ @osd_button_bg_hover_b 68%,
+ @osd_button_bg_hover_c);
+}
+
+.osd.toolbar .button:first-child,
+.osd.toolbar .button:hover:first-child,
+.osd.toolbar .button:active:first-child,
+.osd.toolbar .button:active:hover:first-child {
+ border-radius: 3px 0 0 3px;
+ border-width: 1px 0 1px 1px;
+ box-shadow: inset -1px 0 @osd_button_inset;
+}
+
+.osd.toolbar .button:last-child,
+.osd.toolbar .button:hover:last-child,
+.osd.toolbar .button:active:last-child,
+.osd.toolbar .button:active:hover:last-child {
+ box-shadow: none;
+ border-radius: 0 3px 3px 0;
+ border-width: 1px 1px 1px 0;
+}
+
+.osd.toolbar .button:only-child,
+.osd.toolbar .button:hover:only-child,
+.osd.toolbar .button:active:only-child,
+.osd.toolbar .button:active:hover:only-child,
+.osd.toolbar GtkToolButton .button,
+.osd.toolbar GtkToolButton:only-child .button,
+.osd.toolbar GtkToolButton:last-child .button,
+.osd.toolbar GtkToolButton:first-child .button {
+ border-width: 1px;
+ border-radius: 3px;
+ border-style: solid;
+ box-shadow: none;
+}
+
+.osd.toolbar .separator {
+ color: shade(@osd_lowlight, 0.80);
+}
+
+/* used by gnome-settings-daemon's media-keys OSD */
+.osd.trough {
+ background-color: @osd_trough_bg;
+ border-width: 0;
+}
+
+.osd.progressbar {
+ background-color: @osd_fg;
+}
+
+.osd .scale.trough {
+ border-color: shade (@theme_bg_color, 0.4);
+ border-image: none;
+ /* this defines the bg color of the played segment */
+ background-color: @osd_scale_trough_bg_color;
+}
+
+.osd .scale.trough.highlight {
+ background-image: none;
+ background-color: @theme_selected_bg_color;
+ background-color: @osd_scale_trough_highlight_bg_color;
+}
+
+.osd .scale.trough:insensitive,
+.osd .scale.trough.highlight:insensitive {
+ background-image: none;
+ background-color: transparent;
+}
+
+.osd .scale-popup.popover.background {
+ color: @osd_fg;
+ border-style: solid;
+ border-width: 1px;
+ border-color: shade (@theme_bg_color, 0.4);
+ border-radius: 2px;
+ background-image: linear-gradient(to bottom,
+ @osd_toolbar_bg_a,
+ @osd_toolbar_bg_b 63%,
+ @osd_toolbar_bg_c);
+ background-color: transparent;
+ padding: 2px;
+}
+
+.osd .scale-popup.popover.background .button.flat.image-button {
+ background-image: linear-gradient(to bottom,
+ @osd_button_bg_a,
+ @osd_button_bg_b 68%,
+ @osd_button_bg_c);
+ border-radius: 3px;
+ border-width: 1px;
+ padding: 3px;
+}
+
+.osd .scale-popup.popover.background .button.flat.image-button:hover {
+ background-image: linear-gradient(to bottom,
+ @osd_button_bg_hover_a,
+ @osd_button_bg_hover_b 78%,
+ @osd_button_bg_hover_c);
+ box-shadow: none;
+}
+
+.osd .scale-popup.popover.background .button.flat.image-button:insensitive {
+ border-color: alpha (shade(@theme_bg_color, 0.4), 0.0);
+ background-image: none;
+ background-color: transparent;
+}
+
+.osd GtkProgressBar,
+GtkProgressBar.osd {
+ padding: 0;
+ -GtkProgressBar-xspacing: 0;
+ -GtkProgressBar-yspacing: 3px;
+ -GtkProgressBar-min-horizontal-bar-height: 3px;
+}
+
+.osd GtkProgressBar.trough,
+GtkProgressBar.osd.trough {
+ padding: 0;
+ border-image: none;
+ border-style: none;
+ border-width: 0;
+ background-image: none;
+ background-color: transparent;
+ border-radius: 0;
+}
+
+.osd GtkProgressBar.progressbar,
+GtkProgressBar.osd.progressbar {
+ border-style: none;
+ background-color: @theme_selected_bg_color;
+ background-image: none;
+ border-radius: 0;
+}
+
+.osd .view,
+.osd.view {
+ background-color: @osd_view_bg;
+}
+
+.osd .scrollbar.trough {
+ background-color: @osd_scrollbar_trough;
+}
+
+.osd .scrollbar.slider {
+ background-color: @osd_scrollbar_slider;
+}
+
+.osd .scrollbar.slider:hover {
+ background-color: @osd_scrollbar_slider_prelight;
+}
+
+.osd .scrollbar.slider:active {
+ background-color: @osd_scrollbar_slider_active;
+}
+
+.osd GtkIconView.cell:selected,
+.osd GtkIconView.cell:selected:focus {
+ background-color: transparent;
+ border-style: solid;
+ border-radius: 15px;
+ border-width: 3px;
+ border-color: @osd_button_fg;
+ outline-color: transparent;
+}
+
+/* used by Documents */
+.osd .page-thumbnail {
+ border-style: solid;
+ border-width: 1px;
+ border-color: @osd_lowlight;
+ /* when there's no pixbuf yet */
+ background-color: @osd_bg;
}
/****************
diff --git a/desktop-themes/TraditionalGreen/gtk-3.0/gtk.css b/desktop-themes/TraditionalGreen/gtk-3.0/gtk.css
index 2bdf7d7d..6fb385ac 100644
--- a/desktop-themes/TraditionalGreen/gtk-3.0/gtk.css
+++ b/desktop-themes/TraditionalGreen/gtk-3.0/gtk.css
@@ -252,11 +252,69 @@
* osd *
*******/
-@define-color osd_bg_color @theme_tooltip_bg_color;
-@define-color osd_fg_color @theme_tooltip_fg_color;
-@define-color osd_border_color @theme_tooltip_border_color;
+@define-color osd_highlight #ffffff;
+@define-color osd_lowlight #525252;
+@define-color osd_base #212526;
+@define-color osd_base_backdrop shade(@osd_base, 1.40);
+
+@define-color osd_fg #ededed;
+@define-color osd_bg alpha(@osd_base, 0.80);
+@define-color osd_bg_backdrop alpha(@osd_base_backdrop, 0.90);
+
@define-color osd_text_shadow alpha(black, 0.75);
+@define-color osd_toolbar_bg_a alpha(@osd_base, 0.50);
+@define-color osd_toolbar_bg_b alpha(#101010, 0.50);
+@define-color osd_toolbar_bg_c alpha(shade(@osd_base, 1.02), 0.50);
+
+@define-color osd_button_bg_a alpha(@osd_highlight, 0.16);
+@define-color osd_button_bg_b alpha(@osd_lowlight, 0.05);
+@define-color osd_button_bg_c alpha(@osd_highlight, 0.12);
+
+@define-color osd_button_bg_insensitive alpha(@osd_bg, 0.25);
+@define-color osd_button_bg_insensitive_active alpha(@osd_bg, 0.16);
+
+@define-color osd_button_bg_hover_a alpha(@osd_highlight, 0.28);
+@define-color osd_button_bg_hover_b alpha(@osd_lowlight, 0.14);
+@define-color osd_button_bg_hover_c alpha(@osd_highlight, 0.14);
+
+@define-color osd_button_bg_active_a alpha(black, .9);
+@define-color osd_button_bg_active_b alpha(black, 0.4);
+@define-color osd_button_bg_active_c alpha(black, 0);
+
+@define-color osd_button_bg_backdrop alpha(@osd_bg, 0.18);
+@define-color osd_button_bg_backdrop_hover alpha(@osd_bg, 0.25);
+@define-color osd_button_bg_backdrop_active alpha(@osd_bg, 0.35);
+@define-color osd_button_bg_backdrop_insensitive alpha(@osd_bg, 0.08);
+
+@define-color osd_button_fg_backdrop shade(@osd_fg, 0.70);
+@define-color osd_button_fg_backdrop_active shade(@osd_fg, 0.95);
+
+@define-color osd_button_fg shade(@osd_fg, 0.80);
+@define-color osd_button_fg_hover shade(@osd_fg, 0.96);
+@define-color osd_button_fg_active shade(@osd_fg, 1.10);
+@define-color osd_button_fg_insensitive shade(@osd_fg, 0.70);
+
+@define-color osd_button_border alpha(@osd_highlight, 0.40);
+@define-color osd_button_border_active alpha(@osd_highlight, 0.8);
+@define-color osd_button_inset shade(@osd_fg, 0.67);
+@define-color osd_button_shadow alpha(black, 0.35);
+
+@define-color osd_trough_bg alpha(@osd_button_fg, 0.10);
+@define-color osd_scale_trough_bg_color alpha(shade(@core_color_b, 0.35), 0.4);
+@define-color osd_scale_trough_highlight_bg_color alpha(shade(@core_color_a, 1.00), 0.4);
+
+@define-color osd_view_bg alpha(@osd_bg, 0.60);
+@define-color osd_view_bg_backdrop alpha(@osd_bg_backdrop, 0.60);
+
+@define-color osd_scrollbar_trough shade(@osd_base, 1.70);
+@define-color osd_scrollbar_trough_backdrop shade(@osd_base_backdrop, 1.40);
+
+@define-color osd_scrollbar_slider shade(@osd_scrollbar_trough, 1.50);
+@define-color osd_scrollbar_slider_prelight shade(@osd_scrollbar_trough, 1.80);
+@define-color osd_scrollbar_slider_active shade(@osd_scrollbar_trough, 2.10);
+@define-color osd_scrollbar_slider_backdrop shade(@osd_scrollbar_trough_backdrop, 1.50);
+
/***************
* progressbar *
***************/
diff --git a/desktop-themes/TraditionalOk/gtk-3.0/gtk-widgets.css b/desktop-themes/TraditionalOk/gtk-3.0/gtk-widgets.css
index 87bcc61e..61031e90 100644
--- a/desktop-themes/TraditionalOk/gtk-3.0/gtk-widgets.css
+++ b/desktop-themes/TraditionalOk/gtk-3.0/gtk-widgets.css
@@ -1827,17 +1827,387 @@ GtkFileChooserDialog GtkPlacesSidebar.sidebar.frame .frame .sidebar.list .list-r
* OSD *
*******/
-.osd {
- color: @osd_fg_color;
- background-color: @osd_bg_color;
- border-width: 1px;
- border-style: solid;
- border-color: @osd_border_color;
+.background.osd {
+ color: @osd_fg;
+ background-color: @osd_bg;
}
-.osd.toolbar GtkVolumeButton.button.flat.image-button,
-.osd.toolbar GtkVolumeButton.button.flat.image-button:hover {
- padding: 2px;
+GtkOverlay.osd {
+ background-color: transparent;
+}
+
+.osd.frame {
+ background-clip: border-box;
+ background-origin: border-box;
+}
+
+.osd.button,
+.osd.button:active,
+.osd.button:checked,
+.osd .button,
+.osd .button:active,
+.osd .button:checked {
+ border-width: 1px;
+ border-style: solid;
+ border-image: none;
+ border-radius: 5px;
+}
+
+.osd .button {
+ border-color: shade (@theme_bg_color, 0.4);
+}
+.osd .button:insensitive {
+ border-color: alpha(@osd_button_border,0.5);
+}
+
+.osd .button:hover,
+.osd .button:active,
+.osd .button:checked {
+ border-color: shade (@theme_selected_bg_color, 0.5);
+}
+
+.osd.button,
+.osd .button {
+ padding: 6px;
+ background-image: linear-gradient(to bottom,
+ @osd_button_bg_a,
+ @osd_button_bg_b 68%,
+ @osd_button_bg_c);
+ color: @osd_button_fg;
+ text-shadow: 0 -1px @osd_button_shadow;
+ icon-shadow: 0 -1px @osd_button_shadow;
+}
+
+.osd.button {
+ padding: 8px;
+}
+
+.osd.button,
+.osd.button:active,
+.osd.button:checked {
+ border-color: transparent;
+}
+
+.osd.button,
+.osd.button:prelight,
+.osd.button:active,
+.osd.button:checked {
+ background-color: shade(@osd_bg, 1.10);
+}
+
+.osd .button,
+.osd .button:prelight,
+.osd .button:active,
+.osd .button:checked {
+ background-color: transparent;
+}
+
+.osd.button:insensitive,
+.osd .button:insensitive {
+ background-image: none;
+ background-color: @osd_button_bg_insensitive;
+}
+
+.osd.button:active:insensitive,
+.osd .button:active:insensitive,
+.osd.button:checked:insensitive,
+.osd .button:checked:insensitive {
+ background-image: none;
+ background-color: @osd_button_bg_insensitive_active;
+}
+
+.osd.button:hover,
+.osd .button:hover {
+ color: @osd_button_fg_hover;
+}
+
+.osd.button:active,
+.osd.button:hover:active,
+.osd .button:active,
+.osd .button:hover:active,
+.osd.button:checked,
+.osd.button:hover:checked,
+.osd .button:checked,
+.osd .button:hover:checked {
+ color: @osd_button_fg_active;
+}
+
+.osd.button:insensitive,
+.osd.button:active *:insensitive,
+.osd.button:checked *:insensitive,
+.osd .button:insensitive,
+.osd .button:active *:insensitive,
+.osd .button:checked *:insensitive {
+ color: @osd_button_fg_insensitive;
+ text-shadow: none;
+ icon-shadow: none;
+}
+
+.osd.button:hover,
+.osd .button:hover {
+ background-image: linear-gradient(to bottom,
+ @osd_button_bg_hover_a,
+ @osd_button_bg_hover_b 68%,
+ @osd_button_bg_hover_c);
+}
+
+.osd.button:active,
+.osd.button:active:hover,
+.osd .button:active,
+.osd .button:active:hover,
+.osd GtkMenuButton.menu-button:active,
+.osd.button:checked,
+.osd.button:checked:hover,
+.osd .button:checked,
+.osd .button:checked:hover,
+.osd GtkMenuButton.menu-button:checked {
+ background-image: linear-gradient(to bottom,
+ @osd_button_bg_active_a,
+ @osd_button_bg_active_b 20%,
+ @osd_button_bg_active_c);
+}
+
+.osd .linked .button:active:first-child {
+ border-left-width: 1px;
+}
+
+.osd .linked .button:active:last-child {
+ border-right-width: 1px;
+}
+
+.osd GtkMenuButton.menu-button:active {
+ background-color: transparent;
+ border-color: @osd_button_border;
+}
+
+.osd GtkMenuButton.menu-button:active {
+ color: @osd_button_fg_active;
+ text-shadow: 0 -1px @osd_button_shadow;
+}
+
+
+.osd.toolbar {
+ color: @osd_fg;
+ text-shadow: 0 1px @osd_text_shadow;
+ padding: 5px;
+ border-style: solid;
+ border-width: 1px;
+ border-color: shade (@theme_bg_color, 0.4);
+ border-radius: 2px;
+ background-image: linear-gradient(to bottom,
+ @osd_toolbar_bg_a,
+ @osd_toolbar_bg_b 63%,
+ @osd_toolbar_bg_c);
+ background-color: transparent;
+ -GtkToolbar-button-relief: normal;
+}
+
+.osd.toolbar .flat.button.image-button {
+ box-shadow: none;
+}
+
+.osd.toolbar .button,
+.osd.toolbar .button:hover,
+.osd.toolbar .button:active,
+.osd.toolbar .button:checked,
+.osd.toolbar .button:active:hover,
+.osd.toolbar .button:insensitive,
+.osd.toolbar .linked .button,
+.osd.toolbar .linked .button:hover,
+.osd.toolbar .linked .button:active,
+.osd.toolbar .linked .button:checked,
+.osd.toolbar .linked .button:active:hover,
+.osd.toolbar .linked .button:insensitive {
+ border-color: shade (@theme_bg_color, 0.4);
+ border-style: solid;
+ border-image: none;
+ padding: 8px;
+ border-radius: 0px;
+}
+
+.osd.toolbar .button:active,
+.osd.toolbar .button:active:hover {
+ background-image: linear-gradient(to bottom,
+ @osd_button_bg_active_a,
+ @osd_button_bg_active_b 20%,
+ @osd_button_bg_active_c);
+}
+
+.osd.toolbar .button:hover {
+ background-image: linear-gradient(to bottom,
+ @osd_button_bg_hover_a,
+ @osd_button_bg_hover_b 68%,
+ @osd_button_bg_hover_c);
+}
+
+.osd.toolbar .button:first-child,
+.osd.toolbar .button:hover:first-child,
+.osd.toolbar .button:active:first-child,
+.osd.toolbar .button:active:hover:first-child {
+ border-radius: 3px 0 0 3px;
+ border-width: 1px 0 1px 1px;
+ box-shadow: inset -1px 0 @osd_button_inset;
+}
+
+.osd.toolbar .button:last-child,
+.osd.toolbar .button:hover:last-child,
+.osd.toolbar .button:active:last-child,
+.osd.toolbar .button:active:hover:last-child {
+ box-shadow: none;
+ border-radius: 0 3px 3px 0;
+ border-width: 1px 1px 1px 0;
+}
+
+.osd.toolbar .button:only-child,
+.osd.toolbar .button:hover:only-child,
+.osd.toolbar .button:active:only-child,
+.osd.toolbar .button:active:hover:only-child,
+.osd.toolbar GtkToolButton .button,
+.osd.toolbar GtkToolButton:only-child .button,
+.osd.toolbar GtkToolButton:last-child .button,
+.osd.toolbar GtkToolButton:first-child .button {
+ border-width: 1px;
+ border-radius: 3px;
+ border-style: solid;
+ box-shadow: none;
+}
+
+.osd.toolbar .separator {
+ color: shade(@osd_lowlight, 0.80);
+}
+
+/* used by gnome-settings-daemon's media-keys OSD */
+.osd.trough {
+ background-color: @osd_trough_bg;
+ border-width: 0;
+}
+
+.osd.progressbar {
+ background-color: @osd_fg;
+}
+
+.osd .scale.trough {
+ border-color: shade (@theme_bg_color, 0.4);
+ border-image: none;
+ /* this defines the bg color of the played segment */
+ background-color: @osd_scale_trough_bg_color;
+}
+
+.osd .scale.trough.highlight {
+ background-image: none;
+ background-color: @theme_selected_bg_color;
+ background-color: @osd_scale_trough_highlight_bg_color;
+}
+
+.osd .scale.trough:insensitive,
+.osd .scale.trough.highlight:insensitive {
+ background-image: none;
+ background-color: transparent;
+}
+
+.osd .scale-popup.popover.background {
+ color: @osd_fg;
+ border-style: solid;
+ border-width: 1px;
+ border-color: shade (@theme_bg_color, 0.4);
+ border-radius: 2px;
+ background-image: linear-gradient(to bottom,
+ @osd_toolbar_bg_a,
+ @osd_toolbar_bg_b 63%,
+ @osd_toolbar_bg_c);
+ background-color: transparent;
+ padding: 2px;
+}
+
+.osd .scale-popup.popover.background .button.flat.image-button {
+ background-image: linear-gradient(to bottom,
+ @osd_button_bg_a,
+ @osd_button_bg_b 68%,
+ @osd_button_bg_c);
+ border-radius: 3px;
+ border-width: 1px;
+ padding: 3px;
+}
+
+.osd .scale-popup.popover.background .button.flat.image-button:hover {
+ background-image: linear-gradient(to bottom,
+ @osd_button_bg_hover_a,
+ @osd_button_bg_hover_b 78%,
+ @osd_button_bg_hover_c);
+ box-shadow: none;
+}
+
+.osd .scale-popup.popover.background .button.flat.image-button:insensitive {
+ border-color: alpha (shade(@theme_bg_color, 0.4), 0.0);
+ background-image: none;
+ background-color: transparent;
+}
+
+.osd GtkProgressBar,
+GtkProgressBar.osd {
+ padding: 0;
+ -GtkProgressBar-xspacing: 0;
+ -GtkProgressBar-yspacing: 3px;
+ -GtkProgressBar-min-horizontal-bar-height: 3px;
+}
+
+.osd GtkProgressBar.trough,
+GtkProgressBar.osd.trough {
+ padding: 0;
+ border-image: none;
+ border-style: none;
+ border-width: 0;
+ background-image: none;
+ background-color: transparent;
+ border-radius: 0;
+}
+
+.osd GtkProgressBar.progressbar,
+GtkProgressBar.osd.progressbar {
+ border-style: none;
+ background-color: @theme_selected_bg_color;
+ background-image: none;
+ border-radius: 0;
+}
+
+.osd .view,
+.osd.view {
+ background-color: @osd_view_bg;
+}
+
+.osd .scrollbar.trough {
+ background-color: @osd_scrollbar_trough;
+}
+
+.osd .scrollbar.slider {
+ background-color: @osd_scrollbar_slider;
+}
+
+.osd .scrollbar.slider:hover {
+ background-color: @osd_scrollbar_slider_prelight;
+}
+
+.osd .scrollbar.slider:active {
+ background-color: @osd_scrollbar_slider_active;
+}
+
+.osd GtkIconView.cell:selected,
+.osd GtkIconView.cell:selected:focus {
+ background-color: transparent;
+ border-style: solid;
+ border-radius: 15px;
+ border-width: 3px;
+ border-color: @osd_button_fg;
+ outline-color: transparent;
+}
+
+/* used by Documents */
+.osd .page-thumbnail {
+ border-style: solid;
+ border-width: 1px;
+ border-color: @osd_lowlight;
+ /* when there's no pixbuf yet */
+ background-color: @osd_bg;
}
/****************
diff --git a/desktop-themes/TraditionalOk/gtk-3.0/gtk.css b/desktop-themes/TraditionalOk/gtk-3.0/gtk.css
index 4a9bbab0..11bfc5a3 100644
--- a/desktop-themes/TraditionalOk/gtk-3.0/gtk.css
+++ b/desktop-themes/TraditionalOk/gtk-3.0/gtk.css
@@ -252,11 +252,69 @@
* osd *
*******/
-@define-color osd_bg_color @theme_tooltip_bg_color;
-@define-color osd_fg_color @theme_tooltip_fg_color;
-@define-color osd_border_color @theme_tooltip_border_color;
+@define-color osd_highlight #ffffff;
+@define-color osd_lowlight #525252;
+@define-color osd_base #212526;
+@define-color osd_base_backdrop shade(@osd_base, 1.40);
+
+@define-color osd_fg #ededed;
+@define-color osd_bg alpha(@osd_base, 0.80);
+@define-color osd_bg_backdrop alpha(@osd_base_backdrop, 0.90);
+
@define-color osd_text_shadow alpha(black, 0.75);
+@define-color osd_toolbar_bg_a alpha(@osd_base, 0.50);
+@define-color osd_toolbar_bg_b alpha(#101010, 0.50);
+@define-color osd_toolbar_bg_c alpha(shade(@osd_base, 1.02), 0.50);
+
+@define-color osd_button_bg_a alpha(@osd_highlight, 0.16);
+@define-color osd_button_bg_b alpha(@osd_lowlight, 0.05);
+@define-color osd_button_bg_c alpha(@osd_highlight, 0.12);
+
+@define-color osd_button_bg_insensitive alpha(@osd_bg, 0.25);
+@define-color osd_button_bg_insensitive_active alpha(@osd_bg, 0.16);
+
+@define-color osd_button_bg_hover_a alpha(@osd_highlight, 0.28);
+@define-color osd_button_bg_hover_b alpha(@osd_lowlight, 0.14);
+@define-color osd_button_bg_hover_c alpha(@osd_highlight, 0.14);
+
+@define-color osd_button_bg_active_a alpha(black, .9);
+@define-color osd_button_bg_active_b alpha(black, 0.4);
+@define-color osd_button_bg_active_c alpha(black, 0);
+
+@define-color osd_button_bg_backdrop alpha(@osd_bg, 0.18);
+@define-color osd_button_bg_backdrop_hover alpha(@osd_bg, 0.25);
+@define-color osd_button_bg_backdrop_active alpha(@osd_bg, 0.35);
+@define-color osd_button_bg_backdrop_insensitive alpha(@osd_bg, 0.08);
+
+@define-color osd_button_fg_backdrop shade(@osd_fg, 0.70);
+@define-color osd_button_fg_backdrop_active shade(@osd_fg, 0.95);
+
+@define-color osd_button_fg shade(@osd_fg, 0.80);
+@define-color osd_button_fg_hover shade(@osd_fg, 0.96);
+@define-color osd_button_fg_active shade(@osd_fg, 1.10);
+@define-color osd_button_fg_insensitive shade(@osd_fg, 0.70);
+
+@define-color osd_button_border alpha(@osd_highlight, 0.40);
+@define-color osd_button_border_active alpha(@osd_highlight, 0.8);
+@define-color osd_button_inset shade(@osd_fg, 0.67);
+@define-color osd_button_shadow alpha(black, 0.35);
+
+@define-color osd_trough_bg alpha(@osd_button_fg, 0.10);
+@define-color osd_scale_trough_bg_color alpha(shade(@core_color_b, 0.35), 0.4);
+@define-color osd_scale_trough_highlight_bg_color alpha(shade(@core_color_a, 1.00), 0.4);
+
+@define-color osd_view_bg alpha(@osd_bg, 0.60);
+@define-color osd_view_bg_backdrop alpha(@osd_bg_backdrop, 0.60);
+
+@define-color osd_scrollbar_trough shade(@osd_base, 1.70);
+@define-color osd_scrollbar_trough_backdrop shade(@osd_base_backdrop, 1.40);
+
+@define-color osd_scrollbar_slider shade(@osd_scrollbar_trough, 1.50);
+@define-color osd_scrollbar_slider_prelight shade(@osd_scrollbar_trough, 1.80);
+@define-color osd_scrollbar_slider_active shade(@osd_scrollbar_trough, 2.10);
+@define-color osd_scrollbar_slider_backdrop shade(@osd_scrollbar_trough_backdrop, 1.50);
+
/***************
* progressbar *
***************/
diff --git a/desktop-themes/TraditionalOkTest/gtk-3.0/gtk-widgets.css b/desktop-themes/TraditionalOkTest/gtk-3.0/gtk-widgets.css
index 2ff045bf..2e15246f 100644
--- a/desktop-themes/TraditionalOkTest/gtk-3.0/gtk-widgets.css
+++ b/desktop-themes/TraditionalOkTest/gtk-3.0/gtk-widgets.css
@@ -1823,17 +1823,387 @@ GtkFileChooserDialog GtkPlacesSidebar.sidebar.frame .frame .sidebar.list .list-r
* OSD *
*******/
-.osd {
- color: @osd_fg_color;
- background-color: @osd_bg_color;
- border-width: 1px;
- border-style: solid;
- border-color: @osd_border_color;
+.background.osd {
+ color: @osd_fg;
+ background-color: @osd_bg;
}
-.osd.toolbar GtkVolumeButton.button.flat.image-button,
-.osd.toolbar GtkVolumeButton.button.flat.image-button:hover {
- padding: 2px;
+GtkOverlay.osd {
+ background-color: transparent;
+}
+
+.osd.frame {
+ background-clip: border-box;
+ background-origin: border-box;
+}
+
+.osd.button,
+.osd.button:active,
+.osd.button:checked,
+.osd .button,
+.osd .button:active,
+.osd .button:checked {
+ border-width: 1px;
+ border-style: solid;
+ border-image: none;
+ border-radius: 5px;
+}
+
+.osd .button {
+ border-color: shade (@theme_bg_color, 0.4);
+}
+.osd .button:insensitive {
+ border-color: alpha(@osd_button_border,0.5);
+}
+
+.osd .button:hover,
+.osd .button:active,
+.osd .button:checked {
+ border-color: shade (@theme_selected_bg_color, 0.5);
+}
+
+.osd.button,
+.osd .button {
+ padding: 6px;
+ background-image: linear-gradient(to bottom,
+ @osd_button_bg_a,
+ @osd_button_bg_b 68%,
+ @osd_button_bg_c);
+ color: @osd_button_fg;
+ text-shadow: 0 -1px @osd_button_shadow;
+ icon-shadow: 0 -1px @osd_button_shadow;
+}
+
+.osd.button {
+ padding: 8px;
+}
+
+.osd.button,
+.osd.button:active,
+.osd.button:checked {
+ border-color: transparent;
+}
+
+.osd.button,
+.osd.button:prelight,
+.osd.button:active,
+.osd.button:checked {
+ background-color: shade(@osd_bg, 1.10);
+}
+
+.osd .button,
+.osd .button:prelight,
+.osd .button:active,
+.osd .button:checked {
+ background-color: transparent;
+}
+
+.osd.button:insensitive,
+.osd .button:insensitive {
+ background-image: none;
+ background-color: @osd_button_bg_insensitive;
+}
+
+.osd.button:active:insensitive,
+.osd .button:active:insensitive,
+.osd.button:checked:insensitive,
+.osd .button:checked:insensitive {
+ background-image: none;
+ background-color: @osd_button_bg_insensitive_active;
+}
+
+.osd.button:hover,
+.osd .button:hover {
+ color: @osd_button_fg_hover;
+}
+
+.osd.button:active,
+.osd.button:hover:active,
+.osd .button:active,
+.osd .button:hover:active,
+.osd.button:checked,
+.osd.button:hover:checked,
+.osd .button:checked,
+.osd .button:hover:checked {
+ color: @osd_button_fg_active;
+}
+
+.osd.button:insensitive,
+.osd.button:active *:insensitive,
+.osd.button:checked *:insensitive,
+.osd .button:insensitive,
+.osd .button:active *:insensitive,
+.osd .button:checked *:insensitive {
+ color: @osd_button_fg_insensitive;
+ text-shadow: none;
+ icon-shadow: none;
+}
+
+.osd.button:hover,
+.osd .button:hover {
+ background-image: linear-gradient(to bottom,
+ @osd_button_bg_hover_a,
+ @osd_button_bg_hover_b 68%,
+ @osd_button_bg_hover_c);
+}
+
+.osd.button:active,
+.osd.button:active:hover,
+.osd .button:active,
+.osd .button:active:hover,
+.osd GtkMenuButton.menu-button:active,
+.osd.button:checked,
+.osd.button:checked:hover,
+.osd .button:checked,
+.osd .button:checked:hover,
+.osd GtkMenuButton.menu-button:checked {
+ background-image: linear-gradient(to bottom,
+ @osd_button_bg_active_a,
+ @osd_button_bg_active_b 20%,
+ @osd_button_bg_active_c);
+}
+
+.osd .linked .button:active:first-child {
+ border-left-width: 1px;
+}
+
+.osd .linked .button:active:last-child {
+ border-right-width: 1px;
+}
+
+.osd GtkMenuButton.menu-button:active {
+ background-color: transparent;
+ border-color: @osd_button_border;
+}
+
+.osd GtkMenuButton.menu-button:active {
+ color: @osd_button_fg_active;
+ text-shadow: 0 -1px @osd_button_shadow;
+}
+
+
+.osd.toolbar {
+ color: @osd_fg;
+ text-shadow: 0 1px @osd_text_shadow;
+ padding: 5px;
+ border-style: solid;
+ border-width: 1px;
+ border-color: shade (@theme_bg_color, 0.4);
+ border-radius: 2px;
+ background-image: linear-gradient(to bottom,
+ @osd_toolbar_bg_a,
+ @osd_toolbar_bg_b 63%,
+ @osd_toolbar_bg_c);
+ background-color: transparent;
+ -GtkToolbar-button-relief: normal;
+}
+
+.osd.toolbar .flat.button.image-button {
+ box-shadow: none;
+}
+
+.osd.toolbar .button,
+.osd.toolbar .button:hover,
+.osd.toolbar .button:active,
+.osd.toolbar .button:checked,
+.osd.toolbar .button:active:hover,
+.osd.toolbar .button:insensitive,
+.osd.toolbar .linked .button,
+.osd.toolbar .linked .button:hover,
+.osd.toolbar .linked .button:active,
+.osd.toolbar .linked .button:checked,
+.osd.toolbar .linked .button:active:hover,
+.osd.toolbar .linked .button:insensitive {
+ border-color: shade (@theme_bg_color, 0.4);
+ border-style: solid;
+ border-image: none;
+ padding: 8px;
+ border-radius: 0px;
+}
+
+.osd.toolbar .button:active,
+.osd.toolbar .button:active:hover {
+ background-image: linear-gradient(to bottom,
+ @osd_button_bg_active_a,
+ @osd_button_bg_active_b 20%,
+ @osd_button_bg_active_c);
+}
+
+.osd.toolbar .button:hover {
+ background-image: linear-gradient(to bottom,
+ @osd_button_bg_hover_a,
+ @osd_button_bg_hover_b 68%,
+ @osd_button_bg_hover_c);
+}
+
+.osd.toolbar .button:first-child,
+.osd.toolbar .button:hover:first-child,
+.osd.toolbar .button:active:first-child,
+.osd.toolbar .button:active:hover:first-child {
+ border-radius: 3px 0 0 3px;
+ border-width: 1px 0 1px 1px;
+ box-shadow: inset -1px 0 @osd_button_inset;
+}
+
+.osd.toolbar .button:last-child,
+.osd.toolbar .button:hover:last-child,
+.osd.toolbar .button:active:last-child,
+.osd.toolbar .button:active:hover:last-child {
+ box-shadow: none;
+ border-radius: 0 3px 3px 0;
+ border-width: 1px 1px 1px 0;
+}
+
+.osd.toolbar .button:only-child,
+.osd.toolbar .button:hover:only-child,
+.osd.toolbar .button:active:only-child,
+.osd.toolbar .button:active:hover:only-child,
+.osd.toolbar GtkToolButton .button,
+.osd.toolbar GtkToolButton:only-child .button,
+.osd.toolbar GtkToolButton:last-child .button,
+.osd.toolbar GtkToolButton:first-child .button {
+ border-width: 1px;
+ border-radius: 3px;
+ border-style: solid;
+ box-shadow: none;
+}
+
+.osd.toolbar .separator {
+ color: shade(@osd_lowlight, 0.80);
+}
+
+/* used by gnome-settings-daemon's media-keys OSD */
+.osd.trough {
+ background-color: @osd_trough_bg;
+ border-width: 0;
+}
+
+.osd.progressbar {
+ background-color: @osd_fg;
+}
+
+.osd .scale.trough {
+ border-color: shade (@theme_bg_color, 0.4);
+ border-image: none;
+ /* this defines the bg color of the played segment */
+ background-color: @osd_scale_trough_bg_color;
+}
+
+.osd .scale.trough.highlight {
+ background-image: none;
+ background-color: @theme_selected_bg_color;
+ background-color: @osd_scale_trough_highlight_bg_color;
+}
+
+.osd .scale.trough:insensitive,
+.osd .scale.trough.highlight:insensitive {
+ background-image: none;
+ background-color: transparent;
+}
+
+.osd .scale-popup.popover.background {
+ color: @osd_fg;
+ border-style: solid;
+ border-width: 1px;
+ border-color: shade (@theme_bg_color, 0.4);
+ border-radius: 2px;
+ background-image: linear-gradient(to bottom,
+ @osd_toolbar_bg_a,
+ @osd_toolbar_bg_b 63%,
+ @osd_toolbar_bg_c);
+ background-color: transparent;
+ padding: 2px;
+}
+
+.osd .scale-popup.popover.background .button.flat.image-button {
+ background-image: linear-gradient(to bottom,
+ @osd_button_bg_a,
+ @osd_button_bg_b 68%,
+ @osd_button_bg_c);
+ border-radius: 3px;
+ border-width: 1px;
+ padding: 3px;
+}
+
+.osd .scale-popup.popover.background .button.flat.image-button:hover {
+ background-image: linear-gradient(to bottom,
+ @osd_button_bg_hover_a,
+ @osd_button_bg_hover_b 78%,
+ @osd_button_bg_hover_c);
+ box-shadow: none;
+}
+
+.osd .scale-popup.popover.background .button.flat.image-button:insensitive {
+ border-color: alpha (shade(@theme_bg_color, 0.4), 0.0);
+ background-image: none;
+ background-color: transparent;
+}
+
+.osd GtkProgressBar,
+GtkProgressBar.osd {
+ padding: 0;
+ -GtkProgressBar-xspacing: 0;
+ -GtkProgressBar-yspacing: 3px;
+ -GtkProgressBar-min-horizontal-bar-height: 3px;
+}
+
+.osd GtkProgressBar.trough,
+GtkProgressBar.osd.trough {
+ padding: 0;
+ border-image: none;
+ border-style: none;
+ border-width: 0;
+ background-image: none;
+ background-color: transparent;
+ border-radius: 0;
+}
+
+.osd GtkProgressBar.progressbar,
+GtkProgressBar.osd.progressbar {
+ border-style: none;
+ background-color: @theme_selected_bg_color;
+ background-image: none;
+ border-radius: 0;
+}
+
+.osd .view,
+.osd.view {
+ background-color: @osd_view_bg;
+}
+
+.osd .scrollbar.trough {
+ background-color: @osd_scrollbar_trough;
+}
+
+.osd .scrollbar.slider {
+ background-color: @osd_scrollbar_slider;
+}
+
+.osd .scrollbar.slider:hover {
+ background-color: @osd_scrollbar_slider_prelight;
+}
+
+.osd .scrollbar.slider:active {
+ background-color: @osd_scrollbar_slider_active;
+}
+
+.osd GtkIconView.cell:selected,
+.osd GtkIconView.cell:selected:focus {
+ background-color: transparent;
+ border-style: solid;
+ border-radius: 15px;
+ border-width: 3px;
+ border-color: @osd_button_fg;
+ outline-color: transparent;
+}
+
+/* used by Documents */
+.osd .page-thumbnail {
+ border-style: solid;
+ border-width: 1px;
+ border-color: @osd_lowlight;
+ /* when there's no pixbuf yet */
+ background-color: @osd_bg;
}
/****************
diff --git a/desktop-themes/TraditionalOkTest/gtk-3.0/gtk.css b/desktop-themes/TraditionalOkTest/gtk-3.0/gtk.css
index d6a23458..692a38ba 100644
--- a/desktop-themes/TraditionalOkTest/gtk-3.0/gtk.css
+++ b/desktop-themes/TraditionalOkTest/gtk-3.0/gtk.css
@@ -252,11 +252,69 @@
* osd *
*******/
-@define-color osd_bg_color @theme_tooltip_bg_color;
-@define-color osd_fg_color @theme_tooltip_fg_color;
-@define-color osd_border_color @theme_tooltip_border_color;
+@define-color osd_highlight #ffffff;
+@define-color osd_lowlight #525252;
+@define-color osd_base #212526;
+@define-color osd_base_backdrop shade(@osd_base, 1.40);
+
+@define-color osd_fg #ededed;
+@define-color osd_bg alpha(@osd_base, 0.80);
+@define-color osd_bg_backdrop alpha(@osd_base_backdrop, 0.90);
+
@define-color osd_text_shadow alpha(black, 0.75);
+@define-color osd_toolbar_bg_a alpha(@osd_base, 0.50);
+@define-color osd_toolbar_bg_b alpha(#101010, 0.50);
+@define-color osd_toolbar_bg_c alpha(shade(@osd_base, 1.02), 0.50);
+
+@define-color osd_button_bg_a alpha(@osd_highlight, 0.16);
+@define-color osd_button_bg_b alpha(@osd_lowlight, 0.05);
+@define-color osd_button_bg_c alpha(@osd_highlight, 0.12);
+
+@define-color osd_button_bg_insensitive alpha(@osd_bg, 0.25);
+@define-color osd_button_bg_insensitive_active alpha(@osd_bg, 0.16);
+
+@define-color osd_button_bg_hover_a alpha(@osd_highlight, 0.28);
+@define-color osd_button_bg_hover_b alpha(@osd_lowlight, 0.14);
+@define-color osd_button_bg_hover_c alpha(@osd_highlight, 0.14);
+
+@define-color osd_button_bg_active_a alpha(black, .9);
+@define-color osd_button_bg_active_b alpha(black, 0.4);
+@define-color osd_button_bg_active_c alpha(black, 0);
+
+@define-color osd_button_bg_backdrop alpha(@osd_bg, 0.18);
+@define-color osd_button_bg_backdrop_hover alpha(@osd_bg, 0.25);
+@define-color osd_button_bg_backdrop_active alpha(@osd_bg, 0.35);
+@define-color osd_button_bg_backdrop_insensitive alpha(@osd_bg, 0.08);
+
+@define-color osd_button_fg_backdrop shade(@osd_fg, 0.70);
+@define-color osd_button_fg_backdrop_active shade(@osd_fg, 0.95);
+
+@define-color osd_button_fg shade(@osd_fg, 0.80);
+@define-color osd_button_fg_hover shade(@osd_fg, 0.96);
+@define-color osd_button_fg_active shade(@osd_fg, 1.10);
+@define-color osd_button_fg_insensitive shade(@osd_fg, 0.70);
+
+@define-color osd_button_border alpha(@osd_highlight, 0.40);
+@define-color osd_button_border_active alpha(@osd_highlight, 0.8);
+@define-color osd_button_inset shade(@osd_fg, 0.67);
+@define-color osd_button_shadow alpha(black, 0.35);
+
+@define-color osd_trough_bg alpha(@osd_button_fg, 0.10);
+@define-color osd_scale_trough_bg_color alpha(shade(@core_color_b, 0.35), 0.4);
+@define-color osd_scale_trough_highlight_bg_color alpha(shade(@core_color_a, 1.00), 0.4);
+
+@define-color osd_view_bg alpha(@osd_bg, 0.60);
+@define-color osd_view_bg_backdrop alpha(@osd_bg_backdrop, 0.60);
+
+@define-color osd_scrollbar_trough shade(@osd_base, 1.70);
+@define-color osd_scrollbar_trough_backdrop shade(@osd_base_backdrop, 1.40);
+
+@define-color osd_scrollbar_slider shade(@osd_scrollbar_trough, 1.50);
+@define-color osd_scrollbar_slider_prelight shade(@osd_scrollbar_trough, 1.80);
+@define-color osd_scrollbar_slider_active shade(@osd_scrollbar_trough, 2.10);
+@define-color osd_scrollbar_slider_backdrop shade(@osd_scrollbar_trough_backdrop, 1.50);
+
/***************
* progressbar *
***************/