From a4911dcf29d55c6431ff2f22ca09bacc94a0afe0 Mon Sep 17 00:00:00 2001
From: raveit65 <chat-to-me@raveit.de>
Date: Thu, 10 Sep 2015 18:22:16 +0200
Subject: GTK3 Submarine themes: make osd toolbar volume scale popup
 transparent

---
 .../Green-Submarine/gtk-3.0/gtk-widgets.css        | 307 +++++++++++++--------
 desktop-themes/Green-Submarine/gtk-3.0/gtk.css     |   4 +
 2 files changed, 199 insertions(+), 112 deletions(-)

(limited to 'desktop-themes/Green-Submarine/gtk-3.0')

diff --git a/desktop-themes/Green-Submarine/gtk-3.0/gtk-widgets.css b/desktop-themes/Green-Submarine/gtk-3.0/gtk-widgets.css
index b28777ae..d5db1c90 100644
--- a/desktop-themes/Green-Submarine/gtk-3.0/gtk-widgets.css
+++ b/desktop-themes/Green-Submarine/gtk-3.0/gtk-widgets.css
@@ -583,9 +583,9 @@ GtkLevelBar.vertical {
  ************/
 
 .scale {
-    -GtkScale-slider-length: 14;
-    -GtkRange-slider-width: 14;
-    -GtkRange-trough-border: 1;
+    -GtkScale-slider-length: 16;
+    -GtkRange-slider-width: 16;
+    -GtkRange-trough-border: 0;
     -GtkWidget-focus-line-width: 0;
 }
 
@@ -598,6 +598,16 @@ GtkLevelBar.vertical {
     color: alpha(@theme_base_color, 0.0);
     background-color: alpha(@theme_base_color, 0.0);
     /* background-image in -assets variant */
+    background-position: center;
+}
+
+.scale.slider.fine-tune:active,
+.scale.slider.fine-tune:active:hover,
+.scale.slider.fine-tune.horizontal:active,
+.scale.slider.fine-tune.horizontal:active:hover {
+    background-size: 80%;
+    background-repeat: no-repeat;
+    background-position: center;
 }
 
 .toolbar .scale.trough,
@@ -620,6 +630,16 @@ GtkLevelBar.vertical {
     margin: 0 7px;
 }
 
+.scale.trough,
+.scale.trough.vertical {
+    border-color: @scale_border_b;
+}
+
+.scale.trough.highlight,
+.scale.trough.highlight.vertical {
+    border-color: @scale_highlight_border;
+}
+
 .scale.trough:insensitive {
     background-image: -gtk-gradient (linear,
                                      left top,
@@ -4722,18 +4742,18 @@ GtkDialog GtkScrolledWindow.frame GtkViewport .vertical GtkExpander .vertical {
  *******/
 
 .background.osd {
-	color: @osd_fg;
-	background-image: none;
-	background-color: @osd_bg;
+    color: @osd_fg;
+    background-image: none;
+    background-color: @osd_bg;
 }
 
 GtkOverlay.osd {
-	background-color: transparent;
+    background-color: transparent;
 }
 
 .osd.frame {
-	background-clip: border-box;
-	background-origin: border-box;
+    background-clip: border-box;
+    background-origin: border-box;
 }
 
 .osd.button,
@@ -4742,63 +4762,63 @@ GtkOverlay.osd {
 .osd .button,
 .osd .button:checked,
 .osd .button:active {
-	border-width: 1px;
-	border-style: solid;
-	border-image: none;
-	border-color: @osd_button_border;
-	border-radius: 5px;
+    border-width: 1px;
+    border-style: solid;
+    border-image: none;
+    border-color: @osd_button_border;
+    border-radius: 5px;
 }
 
 .osd.button,
 .osd .button {
-	padding: 4px;
-	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;
+    padding: 4px;
+    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,
 .osd.button:prelight,
 .osd.button:active,
 .osd.button:checked {
-	background-color: shade(@osd_bg, 1.10);
+    background-color: shade(@osd_bg, 1.10);
 }
 
 .osd .button,
 .osd .button:prelight,
 .osd .button:active,
 .osd .button:checked {
-	background-color: transparent;
+    background-color: transparent;
 }
 
 .osd.button:insensitive,
 .osd .button:insensitive {
-	background-image: none;
-	background-color: @osd_button_bg_insensitive;
+    background-image: none;
+    background-color: @osd_button_bg_insensitive;
 }
 
 .osd.button:checked:insensitive,
 .osd .button:checked:insensitive,
 .osd.button:active:insensitive,
 .osd .button:active:insensitive {
-	background-image: none;
-	background-color: @osd_button_bg_insensitive_active;
+    background-image: none;
+    background-color: @osd_button_bg_insensitive_active;
 }
 
 .osd.button:hover,
 .osd .button:hover {
-	color: @osd_button_fg_hover;
+    color: @osd_button_fg_hover;
 }
 
 .osd .linked .button:hover:first-child,
 .osd .linked .button:hover:last-child,
 .osd .linked .button:hover:only-child {
     background-image: none;
-    padding: 4px;
+    padding: 6px;
 }
 
 .osd.button:active,
@@ -4809,7 +4829,7 @@ GtkOverlay.osd {
 .osd.button:hover:checked,
 .osd .button:checked,
 .osd .button:hover:checked {
-	color: @osd_button_fg_active;
+    color: @osd_button_fg_active;
 }
 
 .osd.button:insensitive,
@@ -4818,15 +4838,15 @@ GtkOverlay.osd {
 .osd .button:insensitive,
 .osd .button:active *:insensitive,
 .osd .button:checked *:insensitive {
-	color: @osd_button_fg_insensitive;
+    color: @osd_button_fg_insensitive;
 }
 
 .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);
+    background-image: linear-gradient(to bottom,
+                                      @osd_button_bg_hover_a,
+                                      @osd_button_bg_hover_b 68%,
+                                      @osd_button_bg_hover_c);
 }
 
 .osd.button:checked,
@@ -4839,10 +4859,10 @@ GtkOverlay.osd {
 .osd .button:active,
 .osd .button:active:hover,
 .osd GtkMenuButton.button:active {
-	background-image: linear-gradient(to bottom,
-	                                  @osd_button_bg_active_a,
-	                                  @osd_button_bg_active_b 68%,
-	                                  @osd_button_bg_active_c);
+    background-image: linear-gradient(to bottom,
+                                      @osd_button_bg_active_a,
+                                      @osd_button_bg_active_b 68%,
+                                      @osd_button_bg_active_c);
 }
 
 .osd GtkMenuButton.button:checked,
@@ -4858,35 +4878,37 @@ GtkOverlay.osd {
 }
 
 .osd.toolbar {
-	color: @osd_fg;
-	text-shadow: 0 1px @osd_text_shadow;
-	padding: 10px;
-	border-style: none;
-	border-radius: 7px;
-	background-image: linear-gradient(to left,
-	                                  shade(@theme_selected_bg_color, 1.1),
-	                                  shade(@theme_selected_bg_color, 0.65));
-	background-color: transparent;
-	-GtkToolbar-button-relief: normal;
+    color: @osd_fg;
+    text-shadow: 0 1px @osd_text_shadow;
+    padding: 10px;
+    border-style: solid;
+    border-width: 1px;
+    border-color: shade (@theme_selected_bg_color, 0.8);
+    border-radius: 7px;
+    background-image: linear-gradient(to left,
+                                      alpha(shade(@theme_selected_bg_color, 1.2), 0.7),
+                                      alpha(shade(@theme_selected_bg_color, 0.95), 0.7));
+    background-color: alpha(shade(@theme_selected_bg_color, 1.0), 0.4);
+    -GtkToolbar-button-relief: normal;
 }
 
 .osd.toolbar .button,
 .osd.toolbar .linked .button {
-	padding: 4px;
-	border-width: 1px;
-	border-radius: 5px;
+    padding: 6px;
+    border-width: 1px;
+    border-radius: 5px;
 }
 
 .osd.toolbar .button:first-child {
-	border-radius: 5px 0 0 5px;
-	border-width: 1px 0 1px 1px;
-	box-shadow: inset -1px 0 @osd_button_inset;
+    border-radius: 5px 0 0 5px;
+    border-width: 1px 0 1px 1px;
+    box-shadow: inset -1px 0 @osd_button_inset;
 }
 
 .osd.toolbar .button:last-child {
-	box-shadow: none;
-	border-radius: 0 5px 5px 0;
-	border-width: 1px 1px 1px 0;
+    box-shadow: none;
+    border-radius: 0 5px 5px 0;
+    border-width: 1px 1px 1px 0;
 }
 
 .osd.toolbar .button:only-child,
@@ -4894,112 +4916,139 @@ GtkOverlay.osd {
 .osd.toolbar GtkToolButton:only-child .button,
 .osd.toolbar GtkToolButton:last-child .button,
 .osd.toolbar GtkToolButton:first-child .button {
-	border-width: 1px;
-	border-radius: 5px;
-	border-style: solid;
-	box-shadow: none;
+    border-width: 1px;
+    border-radius: 5px;
+    border-style: solid;
+    box-shadow: none;
 }
 
 .osd.toolbar .separator {
-	color: shade(@osd_lowlight, 0.80);
+    color: shade(@osd_lowlight, 0.80);
 }
 
 /* used by gnome-settings-daemon's media-keys OSD
    and Epiphany */
 .osd.trough {
-	background-color: @osd_trough_bg;
-	border-width: 0;
+    background-color: @osd_trough_bg;
+    border-width: 0;
 }
 
 .osd.progressbar {
-	background-color: @osd_fg;
+    background-color: @osd_fg;
 }
 
-.osd .scale.trough {
-	border: 1px solid rgba(0,0,0,0.1);
-	border-image: none;
-	background-image: linear-gradient(to bottom,
-	                                  shade(@osd_button_border, 0.70),
-	                                  shade(@osd_button_border, 0.90));
-	background-color: transparent;
+.osd .scale.trough:insensitive,
+.osd .scale.trough.highlight:insensitive {
+    background-image: none;
+    background-color: transparent;
 }
 
-.osd .scale.trough.highlight {
-	background-image: none;
-	background-color: @theme_selected_bg_color;
+.osd .scale-popup.popover.background {
+    color: @osd_fg;
+    border-style: solid;
+    border-width: 1px;
+    border-color: shade (@theme_selected_bg_color, 0.8);
+    border-radius: 4px;
+    background-image: linear-gradient(to bottom,
+                                      alpha(shade(@theme_selected_bg_color, 1.2), 0.7),
+                                      alpha(shade(@theme_selected_bg_color, 0.95), 0.7));
+    background-color: alpha(shade(@theme_selected_bg_color, 1.0), 0.4);
 }
 
-.osd .scale.trough:insensitive,
-.osd .scale.trough.highlight:insensitive {
-	background-image: none;
-	background-color: transparent;
+.osd .popover.scale-popup .flat.button.image-button {
+    background-image: linear-gradient(to bottom,
+                                      @osd_button_bg_a,
+                                      @osd_button_bg_b 68%,
+                                      @osd_button_bg_c);
+    border-radius: 4px;
+    border-width: 1px;
+    border-color: @osd_button_border;
+    box-shadow: none;
+    padding: 2px;
+}
+
+.osd .popover.scale-popup .flat.button.image-button:hover {
+    background-image: linear-gradient(to bottom,
+                                      @osd_button_bg_hover_a,
+                                      @osd_button_bg_hover_b 68%,
+                                      @osd_button_bg_hover_c);
+    border-color: alpha(shade(@theme_selected_bg_color, 2.2), 0.8);
+    -gtk-image-effect: highlight;
+}
+
+.osd .popover.scale-popup .flat.button.image-button:insensitive {
+    background-image: none;
+    background-color: transparent;
+    border-image: none;
+    border-color: transparent;
+    box-shadow: none;
 }
 
 .osd GtkProgressBar,
 GtkProgressBar.osd {
-	padding: 0;
-	-GtkProgressBar-xspacing: 0;
-	-GtkProgressBar-yspacing: 3px;
-	-GtkProgressBar-min-horizontal-bar-height: 3px;
+    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;
+    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;
+    border-style: none;
+    background-color: @theme_selected_bg_color;
+    background-image: none;
+    border-radius: 0;
 }
 
 .osd .view,
 .osd.view {
-	background-color: @osd_view_bg;
+    background-color: @osd_view_bg;
 }
 
 .osd .scrollbar.trough {
-	background-color: @osd_scrollbar_trough;
+    background-color: @osd_scrollbar_trough;
 }
 
 .osd .scrollbar.slider {
-	background-color: @osd_scrollbar_slider;
+    background-color: @osd_scrollbar_slider;
 }
 
 .osd .scrollbar.slider:hover {
-	background-color: @osd_scrollbar_slider_prelight;
+    background-color: @osd_scrollbar_slider_prelight;
 }
 
 .osd .scrollbar.slider:active {
-	background-color: @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;
+    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;
+    border-style: solid;
+    border-width: 1px;
+    border-color: @osd_lowlight;
+    /* when there's no pixbuf yet */
+    background-color: @osd_bg;
 }
 
 /*************
@@ -5105,6 +5154,40 @@ GtkProgressBar.osd.progressbar {
     -gtk-image-effect: highlight;
 }
 
+.popover.scale-popup .scale .trough,
+.popover.scale-popup .scale .trough.vertical {
+    background-image: -gtk-gradient (linear,
+                                     left top, left bottom,
+                                     from (shade (@scale_border_a, 1.10)),
+                                     to (shade (@scale_border_a, 1.51)));
+}
+
+.popover.scale-popup .scale .trough.highlight,
+.popover.scale-popup .scale .trough.highlight.vertical {
+    background-image: -gtk-gradient (linear,
+                                     left top, left bottom,
+                                     from (shade (@theme_selected_bg_color, 1.31)),
+                                     to (shade (@theme_selected_bg_color, 1.00)));
+}
+
+/* needs to be here to avoid a override by .popover.scale-popup */
+.osd .scale.trough,
+.osd .scale-popup.popover .scale.trough {
+    border-color: @osd_scale_border;
+    border-image: none;
+    background-image: linear-gradient(to bottom,
+                                      shade(@osd_button_border, 0.70),
+                                      shade(@osd_button_border, 0.90));
+    background-color: transparent;
+}
+
+.osd .scale.trough.highlight,
+.osd .scale-popup.popover .scale.trough.highlight {
+    background-image: none;
+    background-color: @theme_selected_bg_color;
+    border-color: @scale_highlight_border;
+}
+
 .popover .list {
     background-color: @theme_base_color;
 }
diff --git a/desktop-themes/Green-Submarine/gtk-3.0/gtk.css b/desktop-themes/Green-Submarine/gtk-3.0/gtk.css
index 1548b339..3fdc23b1 100644
--- a/desktop-themes/Green-Submarine/gtk-3.0/gtk.css
+++ b/desktop-themes/Green-Submarine/gtk-3.0/gtk.css
@@ -114,6 +114,10 @@
 @define-color scale_fill shade(@button_bg_active, 1.00);
 @define-color scale_border_a @internal_element_color;
 @define-color scale_border_b shade (@internal_element_color, 1.25);
+@define-color osd_scale_border alpha (shade (@theme_bg_color, 1.25), 0.4);
+@define-color scale_highlight_border @theme_selected_bg_color;
+@define-color scale_highlight_bg @theme_selected_bg_color;
+@define-color scale_highlight_shadow alpha(white, 0.50);
 
 @define-color progressbar_fill_a @button_bg_active;
 @define-color progressbar_fill_b shade(mix(@button_bg_active, green, 0.10), 1.10);
-- 
cgit v1.2.1