GTK3 Submarine themes: make osd toolbar volume scale popup transparent

2 files changed, 199 insertions, 112 deletions

diff --git a/desktop-themes/Blue-Submarine/gtk-3.0/gtk-widgets.css b/desktop-themes/Blue-Submarine/gtk-3.0/gtk-widgets.css
index 717c2d2b..42bd1efa 100644
--- a/desktop-themes/Blue-Submarine/gtk-3.0/gtk-widgets.css
+++ b/desktop-themes/Blue-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,

@@ -4734,18 +4754,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,

@@ -4754,63 +4774,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,

@@ -4821,7 +4841,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,

@@ -4830,15 +4850,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,

@@ -4851,10 +4871,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,

@@ -4870,35 +4890,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,

@@ -4906,112 +4928,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;

 }

 

 /*************

@@ -5117,6 +5166,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/Blue-Submarine/gtk-3.0/gtk.css b/desktop-themes/Blue-Submarine/gtk-3.0/gtk.css
index d4a2a85c..1bdc48d0 100644
--- a/desktop-themes/Blue-Submarine/gtk-3.0/gtk.css
+++ b/desktop-themes/Blue-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, blue, 0.10), 1.10);