GreenLaguna GTK+-3.14: a little re-work of the theme -->

- fix bg colors of .views
- adjust levelbars
- fix notebooks
- fix popovers button
- improve GtkSwitch
- improve app-notifications
- improve osd
- fix notebook close button

2 files changed, 293 insertions, 48 deletions

diff --git a/desktop-themes/GreenLaguna/gtk-3.0/gtk-widgets-assets.css b/desktop-themes/GreenLaguna/gtk-3.0/gtk-widgets-assets.css
index dc55e129..ee86e8ca 100644
--- a/desktop-themes/GreenLaguna/gtk-3.0/gtk-widgets-assets.css
+++ b/desktop-themes/GreenLaguna/gtk-3.0/gtk-widgets-assets.css
@@ -76,7 +76,8 @@ GtkScale.scale-has-marks-above.slider.vertical:insensitive {
 	border-image: url("assets/button-default-border.svg") 3 / 3px stretch;
 }
 
-.button.default:active {
+.button.default:active,
+.button.default:checked {
 	border-image: url("assets/button-default-active-border.svg") 3 / 3px stretch;
 }
 
@@ -103,6 +104,11 @@ GtkScale.scale-has-marks-above.slider.vertical:insensitive {
 	border-image: url("assets/toolbar-button-border.svg") 3 / 3px stretch;
 }
 
+/* overrride for osd */
+.osd.toolbar .button:hover {
+	border-image: none;
+}
+
 GtkSwitch.trough:active {
 	border-image: url("assets/switch-trough-border-active.svg") 3 / 3px stretch;
 }
diff --git a/desktop-themes/GreenLaguna/gtk-3.0/gtk-widgets.css b/desktop-themes/GreenLaguna/gtk-3.0/gtk-widgets.css
index bb87cdb3..cfbd52ab 100644
--- a/desktop-themes/GreenLaguna/gtk-3.0/gtk-widgets.css
+++ b/desktop-themes/GreenLaguna/gtk-3.0/gtk-widgets.css
@@ -194,7 +194,7 @@
  *********/
 .view,
 .view:insensitive { /* gdebi bug? */
-	background-color: @theme_bg_color;
+	background-color: shade(@base_color, 1.06);
 	color: @theme_text_color;
 	border-radius: 0px;
 	/*border-width: 3px;*/
@@ -564,11 +564,14 @@ GtkLevelBar.vertical {
 }
 
 .level-bar.trough {
+	border-radius: 2px;
 	padding: 2px;
 }
 
 .level-bar.fill-block {
-	border-style: none;
+	border-width: 1px;
+	border-style: solid;
+	border-color: @progressbar_border;
 	background-image: linear-gradient(to bottom,
 	                                  shade(@link_color, 1.2),
 	                                  shade(@link_color, 0.6));
@@ -612,7 +615,7 @@ GtkLevelBar.vertical {
 /* gtk-3.12 */
 .notebook.header {
 	background-image: none;
-	background-color: transparent;
+	background-color: @base_color;
 	border-style: none;
     border-image: none;
     border-width: 0px;
@@ -621,6 +624,7 @@ GtkLevelBar.vertical {
 .notebook {
 	padding: 1px 0px 1px 1px;
 	background-clip: border-box;
+	background-color: shade(@base_color, 1.06);
 	border-color: @notebook_border;
 	color: @theme_fg_color; /* gdebi bug? */
 	border-style: solid;
@@ -727,7 +731,7 @@ GtkLevelBar.vertical {
 	border-style: none;
 	border-image: none;
 	/*border-color: shade(@theme_bg_color, 0.9);*/
-	background-color: alpha(@theme_bg_color, 0.9);
+	background-color: transparent;
 	background-image: none;
 	-GtkButton-child-displacement-x: 0;
 	-GtkButton-child-displacement-y: 0;
@@ -1671,7 +1675,7 @@ GtkCalendar.header .stack-switcher > .titlebutton.button {
     /*background-image: linear-gradient(to bottom,
                                         @toolbar_gradient_base,
                                         shade(@theme_bg_color, 1.6));*/
-    border-color: alpha(@frame_color, 0.6);
+    border-color: shade(@theme_bg_color, 0.8);
 }
 
 .notebook GtkContainer .header-bar {
@@ -1699,6 +1703,11 @@ GtkOverlay.osd {
 	background-color: transparent;
 }
 
+.osd.frame {
+	background-clip: border-box;
+	background-origin: border-box;
+}
+
 .osd.button,
 .osd.button:checked,
 .osd.button:active,
@@ -1726,12 +1735,15 @@ GtkOverlay.osd {
 
 .osd.button,
 .osd.button:prelight,
-.osd.button:checked,
 .osd.button:active,
+.osd.button:checked {
+	background-color: shade(@osd_bg, 1.10);
+}
+
 .osd .button,
 .osd .button:prelight,
-.osd .button:checked,
-.osd .button:active {
+.osd .button:active,
+.osd .button:checked {
 	background-color: transparent;
 }
 
@@ -1749,24 +1761,28 @@ GtkOverlay.osd {
 	background-color: @osd_button_bg_insensitive_active;
 }
 
-.osd.button *:hover,
-.osd .button *:hover {
+.osd.button:hover,
+.osd .button:hover {
 	color: @osd_button_fg_hover;
 }
 
-.osd .button *:checked,
-.osd .button *:hover:checked,
-.osd .button *:active,
-.osd .button *:hover:active {
+.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 *:insensitive:checked,
-.osd.button *:insensitive:active,
-.osd .button *:insensitive,
-.osd .button *:insensitive:checked,
-.osd .button *:insensitive: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;
 }
 
@@ -1809,23 +1825,20 @@ 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 bottom,
-	                                  @osd_toolbar_bg_a,
-	                                  @osd_toolbar_bg_b 63%,
-	                                  @osd_toolbar_bg_c);
+	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;
 }
 
 .osd.toolbar .button {
 	padding: 4px;
-	border-width: 1px 0;
-	border-radius: 0;
+	border-width: 1px;
+	border-radius: 5px;
 	box-shadow: inset -1px 0 @osd_button_inset;
 }
 
@@ -1861,6 +1874,7 @@ GtkOverlay.osd {
    and Epiphany */
 .osd.trough {
 	background-color: @osd_trough_bg;
+	border-width: 0;
 }
 
 .osd.progressbar {
@@ -1868,13 +1882,25 @@ GtkOverlay.osd {
 }
 
 .osd .scale.trough {
-	border-color: @osd_button_border;
+	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.highlight {
+	background-image: none;
+	background-color: @theme_selected_bg_color;
+}
+
+.osd .scale.trough:insensitive,
+.osd .scale.trough.highlight:insensitive {
+	background-image: none;
+	background-color: transparent;
+}
+
 .osd GtkProgressBar,
 GtkProgressBar.osd {
 	padding: 0;
@@ -1902,6 +1928,49 @@ GtkProgressBar.osd.progressbar {
 	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;
+}
+
 /*************
  * Popovers *
  *************/
@@ -1997,11 +2066,20 @@ GtkModelButton.button:checked:insensitive,
 GtkModelButton.button,
 GtkModelButton.button:focus,
 GtkModelButton.button:active:focus,
-GtkModelButton.button:checked:focus {
+GtkModelButton.button:checked:focus,
+GtkModelButton.button.flat:checked,
+GtkModelButton.button.flat:active,
+GtkModelButton.button.flat:insensitive,
+GtkModelButton.button.flat:active:insensitive,
+GtkModelButton.button.flat:checked:insensitive,
+GtkModelButton.button.flat,
+GtkModelButton.button.flat:focus,
+GtkModelButton.button.flat:active:focus,
+GtkModelButton.button.flat:checked:focus {
 	color: @theme_selected_fg_color;
 	background-color: transparent;
 	background-image: none;
-	border-color: transparent;
+	border-color: @button_border;
 	border-image: none;
 	border-style: none;
 	box-shadow: none;
@@ -2011,7 +2089,11 @@ GtkModelButton.button:checked:focus {
 GtkModelButton.button:checked:hover,
 GtkModelButton.button:active:hover,
 GtkModelButton.button:hover,
-GtkModelButton.button:selected {
+GtkModelButton.button:selected,
+GtkModelButton.button.flat:checked:hover,
+GtkModelButton.button.flat:active:hover,
+GtkModelButton.button.flat:hover,
+GtkModelButton.button.flat:selected {
 	color: @theme_selected_fg_color;
 	background-image:  linear-gradient(to bottom,
 	                                  shade(@theme_selected_bg_color, 1.6),
@@ -2113,7 +2195,15 @@ GtkPopover .separator {
 .button.image-button.titlebutton:active,
 .button.image-button.titlebutton:active:hover,
 .button.text-button.titlebutton:active,
-.button.text-button.titlebutton:active:hover {
+.button.text-button.titlebutton:active:hover,
+.titlebar .titlebutton:checked,
+.titlebar .titlebutton:checked:hover,
+.header-bar.frame.titlebar:checked,
+.header-bar.frame.titlebar:checked:hover,
+.button.image-button.titlebutton:checked,
+.button.image-button.titlebutton:checked:hover,
+.button.text-button.titlebutton:checked,
+.button.text-button.titlebutton:checked:hover {
 	/* some apps need this */
 	color: @theme_fg_color;
 	border-style: solid;
@@ -2243,10 +2333,14 @@ GtkAssistant .sidebar {
  * GtkSwitch *
  *************/
 GtkSwitch {
+    -GtkSwitch-slider-width: 45px;
+    font-weight: bold;
+    font-size: smaller;
 	font: bold condensed;
 }
 
-GtkSwitch.trough {
+GtkSwitch.trough,
+GtkSwitch.trough:backdrop {
 	color: @internal_element_color;
 	border-radius: 3px;
 	border-width: 1px;
@@ -2258,7 +2352,8 @@ GtkSwitch.trough {
 	                                  @trough_bg_color_b);
 }
 
-GtkSwitch.trough:active {
+GtkSwitch.trough:active,
+GtkSwitch.trough:backdrop:active {
 	color: @theme_main_color;
 	border-style: none;
 	/*border-image is defined in gtk-widgets-assets.css*/
@@ -2267,14 +2362,16 @@ GtkSwitch.trough:active {
 	                                  @active_switch_bg_color_b);
 }
 
-GtkSwitch.trough:insensitive {
+GtkSwitch.trough:insensitive,
+GtkSwitch.trough:backdrop:insensitive {
 	background-image: none;
 	background-color: shade(@theme_bg_color, 0.9);
 	border-color: shade(@inactive_frame_color, 0.845);
 	border-image: none;
 }
 
-GtkSwitch.slider {
+GtkSwitch.slider,
+GtkSwitch.slider:backdrop {
 	border-width: 1px;
 	border-radius: 2px;
 	border-color: shade(@frame_color, 1.31);
@@ -2289,16 +2386,44 @@ GtkSwitch.slider {
 	background-position: center;
 }
 
-GtkSwitch.slider:active {
+GtkSwitch.slider:active,
+GtkSwitch.slider:backdrop:active {
 	border-color: @switch_slider_border;
 }
 
-GtkSwitch.slider:insensitive {
+GtkSwitch.slider:insensitive,
+GtkSwitch.slider:backdrop:insensitive {
 	border-style: none;
 	background-image: none;
 	background-color: shade(@insensitive_bg_color, 1.02);
 }
 
+GtkSwitch.slider:insensitive > GtkLabel,
+GtkSwitch.slider:backdrop:insensitive > GtkLabel {
+    color: inherit;
+}
+
+.list-row GtkSwitch,
+.list-row GtkSwitch:backdrop,
+.list-row:selected GtkSwitch,
+.list-row:selected GtkSwitch:backdrop {
+    box-shadow: none;
+    border-color: shade(@button_border, 1.0);
+}
+
+.list-row:selected GtkSwitch.slider:dir(rtl) {
+    border-left-color: @borders;
+}
+
+.list-row:selected GtkSwitch.slider:dir(ltr) {
+    border-right-color: @borders;
+}
+
+.list-row:selected GtkSwitch.slider,
+.list-row:selected GtkSwitch.slider:active {
+    border-color: shade(@button_border, 1.0);
+}
+
 GtkStatusbar {
 	padding: 5px;
 	color: @theme_fg_color;
@@ -2544,20 +2669,134 @@ GtkIconView.content-view.check:selected {
 /*********************
  * App Notifications *
  *********************/
-.app-notification {
+.app-notification,
+.app-notification.frame {
 	border-style: solid;
-	border-color: @app_notification_border;
+	border-color: rgba(112, 129, 106, 0.9);
 	border-width: 0 1px 1px 1px;
 	border-radius: 0 0 5px 5px;
 	padding: 8px;
+    background-color: rgba(112, 129, 106, 0.3);
+    background-image: linear-gradient(to bottom,
+                                      rgba(112, 129, 106, 0.2),
+                                      transparent 2px);
+    background-clip: padding-box;
+	color: @theme_fg_color;
+}
 
-	background-image: linear-gradient(to bottom,
-	                                  @app_notification_a,
-	                                  @app_notification_b 20%,
-	                                  @app_notification_c);
+.app-notification:backdrop,
+.app-notification.frame:backdrop {
+    background-image: none;
+}
 
-	color: @theme_text_color;
-	text-shadow: 0 1px white;
+.app-notification .button,
+.app-notification .header-bar .button.titlebutton,
+.header-bar .app-notification .button.titlebutton,
+.app-notification .titlebar .button.titlebutton,
+.titlebar .app-notification .button.titlebutton,
+.app-notification GtkCalendar.header .button.titlebutton,
+GtkCalendar.header .app-notification .button.titlebutton,
+.app-notification.frame .button {
+    color: @theme_selected_fg_color;
+    border-color: rgba(112, 129, 106, 0.9);
+    border-image: none;
+    background-image: linear-gradient(to bottom,
+                                      rgba(177, 204, 168, 0.9));
+    background-clip: padding-box;
+    box-shadow: inset 0 1px rgba(0, 0, 0, 0.1);
+    text-shadow: none;
+    icon-shadow: 0 1px black;
+    outline-color: rgba(0, 0, 0, 0.3);
+    border-radius: 3px;
+    padding: 0 0px 2px 0px;
+}
+
+.app-notification .button.flat,
+.app-notification .header-bar .titlebutton.button,
+.header-bar .app-notification .titlebutton.button,
+.app-notification .titlebar .titlebutton.button,
+.titlebar .app-notification .titlebutton.button,
+.app-notification GtkCalendar.header .titlebutton.button,
+GtkCalendar.header .app-notification .titlebutton.button,
+.app-notification.frame .button.flat,
+.app-notification.frame .header-bar .titlebutton.button,
+.header-bar .app-notification.frame .titlebutton.button,
+.app-notification.frame .titlebar .titlebutton.button,
+.titlebar .app-notification.frame .titlebutton.button,
+.app-notification.frame GtkCalendar.header .titlebutton.button,
+GtkCalendar.header .app-notification.frame .titlebutton.button {
+    border-image: none;
+    icon-shadow: 0 1px black;
+    text-shadow: 0 1px black;
+}
+
+.app-notification .button:hover,
+.app-notification.frame .button:hover {
+    color: @theme_selected_fg_color;
+    border-color: rgba(112, 129, 106, 0.7);
+    border-image: none;
+    background-color: transparent;
+    background-image: linear-gradient(to bottom,
+                                      rgba(177, 204, 168, 0.1));
+    background-clip: padding-box;
+    box-shadow: inset 0 1px rgba(0, 0, 0, 0.1);
+    text-shadow: none;
+    icon-shadow: 0 1px black;
+    outline-color: rgba(0, 0, 0, 0.3);
+    border-radius: 3px;
+}
+
+.app-notification .button,
+.app-notification .button:active,
+.app-notification .button:checked,
+.app-notification .button:backdrop:active,
+.app-notification .button:backdrop:checked,
+.app-notification.frame .button,
+.app-notification.frame .button:active,
+.app-notification.frame .button:checked,
+.app-notification.frame .button:backdrop:active,
+.app-notification.frame .button:backdrop:checked {
+    color: white;
+    border-color: rgba(112, 129, 106, 0.7);
+    background-color: transparent;
+    background-image: linear-gradient(to bottom,
+                                      rgba(170, 196, 161, 0.9));
+    background-clip: padding-box;
+    box-shadow: none;
+    text-shadow: none;
+    icon-shadow: none;
+    outline-color: rgba(0, 0, 0, 0.3);
+    border-radius: 3px;
+}
+
+.app-notification .button:insensitive,
+.app-notification .button:backdrop:insensitive,
+.app-notification.frame .button:insensitive,
+.app-notification.frame .button:backdrop:insensitive {
+    color: #878989;
+    border-color: rgba(112, 129, 106, 0.7);
+    background-image: linear-gradient(to bottom,
+                                      rgba(198, 207, 181, 0.5));
+    background-clip: padding-box;
+    box-shadow: none;
+    text-shadow: none;
+    icon-shadow: none;
+    border-radius: 3px;
+    padding: 0px;
+}
+
+.app-notification .button:backdrop,
+.app-notification.frame .button:backdrop {
+    color: #eeeeec;
+    border-color: rgba(112, 129, 106, 0.7);
+    background-image: linear-gradient(to bottom,
+                                      rgba(172, 205, 138, 0.7));
+    background-clip: padding-box;
+    box-shadow: none;
+    text-shadow: none;
+    icon-shadow: none;
+    border-radius: 3px;
+    padding: 0px;
 }
 
 /*************