GTK3 Submarine themes: make osd toolbar volume scale popup transparent

author: raveit65 <[email protected]> 2015-09-10 18:22:16 +0200
committer: raveit65 <[email protected]> 2015-09-10 18:31:07 +0200
commit: a4911dcf29d55c6431ff2f22ca09bacc94a0afe0 (patch)
tree: 93a47db9bc63ebe88d3e8134580784a1258ae39c /desktop-themes/Blue-Submarine
parent: ef899e6a1e968379c6ed14957261e2f7bb2debd7 (diff)
download: mate-themes-a4911dcf29d55c6431ff2f22ca09bacc94a0afe0.tar.bz2
mate-themes-a4911dcf29d55c6431ff2f22ca09bacc94a0afe0.tar.xz
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);
author	raveit65 <[email protected]>	2015-09-10 18:22:16 +0200
committer	raveit65 <[email protected]>	2015-09-10 18:31:07 +0200
commit	a4911dcf29d55c6431ff2f22ca09bacc94a0afe0 (patch)
tree	93a47db9bc63ebe88d3e8134580784a1258ae39c /desktop-themes/Blue-Submarine
parent	ef899e6a1e968379c6ed14957261e2f7bb2debd7 (diff)
download	mate-themes-a4911dcf29d55c6431ff2f22ca09bacc94a0afe0.tar.bz2 mate-themes-a4911dcf29d55c6431ff2f22ca09bacc94a0afe0.tar.xz