GTK3 Traditional themes: add real OSD support

2 files changed, 402 insertions, 12 deletions

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 *
  ***************/