From be2785faebf0639c3013ecf1883d4656eb4620c2 Mon Sep 17 00:00:00 2001 From: raveit65 Date: Sat, 12 Sep 2015 16:14:01 +0200 Subject: GTK3 Traditional themes: add real OSD support --- .../TraditionalGreen/gtk-3.0/gtk-widgets.css | 350 ++++++++++++++++++++- desktop-themes/TraditionalGreen/gtk-3.0/gtk.css | 64 +++- .../TraditionalOk/gtk-3.0/gtk-widgets.css | 350 ++++++++++++++++++++- desktop-themes/TraditionalOk/gtk-3.0/gtk.css | 64 +++- .../TraditionalOkTest/gtk-3.0/gtk-widgets.css | 350 ++++++++++++++++++++- desktop-themes/TraditionalOkTest/gtk-3.0/gtk.css | 64 +++- 6 files changed, 1206 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 54ffaec1..e8bb88e2 100644 --- a/desktop-themes/TraditionalGreen/gtk-3.0/gtk-widgets.css +++ b/desktop-themes/TraditionalGreen/gtk-3.0/gtk-widgets.css @@ -1774,17 +1774,349 @@ GtkCheckButton:selected:focus { * 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 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 f836afe3..f1b4e2fd 100644 --- a/desktop-themes/TraditionalOk/gtk-3.0/gtk-widgets.css +++ b/desktop-themes/TraditionalOk/gtk-3.0/gtk-widgets.css @@ -1778,17 +1778,349 @@ GtkCheckButton:selected:focus { * 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 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 187ba7b1..010c5d33 100644 --- a/desktop-themes/TraditionalOkTest/gtk-3.0/gtk-widgets.css +++ b/desktop-themes/TraditionalOkTest/gtk-3.0/gtk-widgets.css @@ -1774,17 +1774,349 @@ GtkCheckButton:selected:focus { * 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 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 * ***************/ -- cgit v1.2.1