Traditional themes GTK3: improve popovers support

6 files changed, 372 insertions, 24 deletions

diff --git a/desktop-themes/TraditionalGreen/gtk-3.0/gtk-widgets.css b/desktop-themes/TraditionalGreen/gtk-3.0/gtk-widgets.css
index 5c1bb29b..e650306b 100644
--- a/desktop-themes/TraditionalGreen/gtk-3.0/gtk-widgets.css
+++ b/desktop-themes/TraditionalGreen/gtk-3.0/gtk-widgets.css
@@ -1954,19 +1954,131 @@ GtkHeaderBar .header-bar {
 	padding: 5px 4px 4px 4px;
 }
 
-/************
+/*************
  * Popovers *
- ************/
+ *************/
 
-GtkPopover {
-	border: 1px solid;
-	border-radius: 0px;
+.popover {
+	background-clip: initial;
+	margin: 10px;
+	padding: 2px;
 	border-color: @border_color;
+	border: 1px solid;
+	border-radius: 2px;
 	background-color: @theme_bg_color;
-	background-clip: border-box;
+	background-image: linear-gradient(to bottom,
+	                                  shade(@theme_bg_color, 1.0),
+	                                  shade(@theme_bg_color, 0.85));
+	box-shadow: 0 1px 5px @wm_shadow;
+	text-shadow: none;
+	icon-shadow: none;
+}
+
+.popover > .list,
+.popover > .view,
+.popover > .toolbar .popover.osd > .toolbar,
+.popover > .inline-toolbar .popover.osd > .toolbar,
+.popover > .search-bar .popover.osd > .toolbar,
+.popover > .location-bar .popover.osd > .toolbar,
+.popover > .toolbar .popover.osd > .inline-toolbar,
+.popover > .inline-toolbar .popover.osd > .inline-toolbar,
+.popover > .search-bar .popover.osd > .inline-toolbar,
+.popover > .location-bar .popover.osd > .inline-toolbar,
+.popover > .toolbar .popover.osd > .search-bar,
+.popover > .inline-toolbar .popover.osd > .search-bar,
+.popover > .search-bar .popover.osd > .search-bar,
+.popover > .location-bar .popover.osd > .search-bar,
+.popover > .toolbar .popover.osd > .location-bar,
+.popover > .inline-toolbar .popover.osd > .location-bar,
+.popover > .search-bar .popover.osd > .location-bar,
+.popover > .location-bar .popover.osd > .location-bar {
+	border-style: none;
+	background-color: transparent;
+}
+
+.popover .separator {
+	font-size: 80%;
+	font-weight: bold;
+	color: alpha(@theme_fg_color,0.1);
+	text-shadow: none;
+	background-color: transparent;
+	icon-shadow: none;
+	border: 0;
+}
+
+.popover.osd {
+	background-image: none;
+	background-color: alpha(shade(#3E403D, 0.85), 0.75);
+	border: 1px solid black;
+	box-shadow: none;
+	color: @theme_selected_fg_color;
+}
+.popover.osd .toolbar {
+	background-image: none;
+	background-color: transparent;
+	border: none;
+	box-shadow: none;
+}
+.popover.osd .button {
+	text-shadow: 0 -1px @osd_text_shadow;
+	icon-shadow: 0 -1px @osd_text_shadow;
+}
+.popover.osd .button:active,
+.popover.osd .button:checked {
+        box-shadow: none;
+}
+.popover.osd .button:insensitive {
+	color: alpha(@theme_selected_fg_color, 0.4);
+}
+
+.popover .list {
+	background-color: @theme_base_color;
+}
+
+GtkModelButton.button {
+	color: @theme_fg_color;
+	border-radius: 3px;
+}
+
+GtkModelButton.button:checked,
+GtkModelButton.button:active,
+GtkModelButton.button:insensitive,
+GtkModelButton.button:active:insensitive,
+GtkModelButton.button:checked:insensitive,
+GtkModelButton.button,
+GtkModelButton.button:focus,
+GtkModelButton.button:active:focus,
+GtkModelButton.button:checked:focus {
+	color: @theme_fg_color;
+	background-color: transparent;
+	background-image: none;
+	border-color: transparent;
+	border-image: none;
+	border-style: none;
+	box-shadow: none;
+	border-radius: 3px;
+}
+
+GtkModelButton.button:checked:hover,
+GtkModelButton.button:active:hover,
+GtkModelButton.button:hover,
+GtkModelButton.button:selected {
+	color: @theme_selected_fg_color;
+	background-image:  linear-gradient(to bottom,
+	                                  shade(@theme_selected_bg_color, 1.1),
+	                                  shade(@theme_selected_bg_color, 0.8));
+	text-shadow: none;
+	border-width: 2px;
+	border-color: @border_color;
+	border-radius: 3px;
 }
 
-GtkPopover > .toolbar,
-GtkPopover.osd > .toolbar .button {
+GtkPopover .separator {
+	font-size: 80%;
+	font-weight: bold;
+	color: alpha(@theme_text_color,0.4);
+	text-shadow: none;
 	background-color: transparent;
+	icon-shadow: none;
+	border: 0;
 }
diff --git a/desktop-themes/TraditionalGreen/gtk-3.0/gtk.css b/desktop-themes/TraditionalGreen/gtk-3.0/gtk.css
index db7572be..34de43b1 100644
--- a/desktop-themes/TraditionalGreen/gtk-3.0/gtk.css
+++ b/desktop-themes/TraditionalGreen/gtk-3.0/gtk.css
@@ -255,6 +255,7 @@
 @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_text_shadow alpha(black, 0.75);
 
 /***************
  * progressbar *
@@ -427,6 +428,9 @@
 @define-color trough_gradient_a shade(@core_color_b, 0.81);
 @define-color trough_gradient_b shade(@core_color_b, 0.90);
 
+
+@define-color wm_shadow alpha(black, 0.5);
+
 /***********
  * imports *
  ***********/
diff --git a/desktop-themes/TraditionalOk/gtk-3.0/gtk-widgets.css b/desktop-themes/TraditionalOk/gtk-3.0/gtk-widgets.css
index d47a19f0..7762b0b8 100644
--- a/desktop-themes/TraditionalOk/gtk-3.0/gtk-widgets.css
+++ b/desktop-themes/TraditionalOk/gtk-3.0/gtk-widgets.css
@@ -1958,19 +1958,131 @@ GtkHeaderBar .header-bar {
 	padding: 5px 4px 4px 4px;
 }
 
-/************
+/*************
  * Popovers *
- ************/
+ *************/
 
-GtkPopover {
-	border: 1px solid;
-	border-radius: 0px;
+.popover {
+	background-clip: initial;
+	margin: 10px;
+	padding: 2px;
 	border-color: @border_color;
+	border: 1px solid;
+	border-radius: 2px;
 	background-color: @theme_bg_color;
-	background-clip: border-box;
+	background-image: linear-gradient(to bottom,
+	                                  shade(@theme_bg_color, 1.0),
+	                                  shade(@theme_bg_color, 0.85));
+	box-shadow: 0 1px 5px @wm_shadow;
+	text-shadow: none;
+	icon-shadow: none;
+}
+
+.popover > .list,
+.popover > .view,
+.popover > .toolbar .popover.osd > .toolbar,
+.popover > .inline-toolbar .popover.osd > .toolbar,
+.popover > .search-bar .popover.osd > .toolbar,
+.popover > .location-bar .popover.osd > .toolbar,
+.popover > .toolbar .popover.osd > .inline-toolbar,
+.popover > .inline-toolbar .popover.osd > .inline-toolbar,
+.popover > .search-bar .popover.osd > .inline-toolbar,
+.popover > .location-bar .popover.osd > .inline-toolbar,
+.popover > .toolbar .popover.osd > .search-bar,
+.popover > .inline-toolbar .popover.osd > .search-bar,
+.popover > .search-bar .popover.osd > .search-bar,
+.popover > .location-bar .popover.osd > .search-bar,
+.popover > .toolbar .popover.osd > .location-bar,
+.popover > .inline-toolbar .popover.osd > .location-bar,
+.popover > .search-bar .popover.osd > .location-bar,
+.popover > .location-bar .popover.osd > .location-bar {
+	border-style: none;
+	background-color: transparent;
+}
+
+.popover .separator {
+	font-size: 80%;
+	font-weight: bold;
+	color: alpha(@theme_fg_color,0.1);
+	text-shadow: none;
+	background-color: transparent;
+	icon-shadow: none;
+	border: 0;
+}
+
+.popover.osd {
+	background-image: none;
+	background-color: alpha(shade(#3E403D, 0.85), 0.75);
+	border: 1px solid black;
+	box-shadow: none;
+	color: @theme_selected_fg_color;
+}
+.popover.osd .toolbar {
+	background-image: none;
+	background-color: transparent;
+	border: none;
+	box-shadow: none;
+}
+.popover.osd .button {
+	text-shadow: 0 -1px @osd_text_shadow;
+	icon-shadow: 0 -1px @osd_text_shadow;
+}
+.popover.osd .button:active,
+.popover.osd .button:checked {
+        box-shadow: none;
+}
+.popover.osd .button:insensitive {
+	color: alpha(@theme_selected_fg_color, 0.4);
+}
+
+.popover .list {
+	background-color: @theme_base_color;
+}
+
+GtkModelButton.button {
+	color: @theme_fg_color;
+	border-radius: 3px;
+}
+
+GtkModelButton.button:checked,
+GtkModelButton.button:active,
+GtkModelButton.button:insensitive,
+GtkModelButton.button:active:insensitive,
+GtkModelButton.button:checked:insensitive,
+GtkModelButton.button,
+GtkModelButton.button:focus,
+GtkModelButton.button:active:focus,
+GtkModelButton.button:checked:focus {
+	color: @theme_fg_color;
+	background-color: transparent;
+	background-image: none;
+	border-color: transparent;
+	border-image: none;
+	border-style: none;
+	box-shadow: none;
+	border-radius: 3px;
+}
+
+GtkModelButton.button:checked:hover,
+GtkModelButton.button:active:hover,
+GtkModelButton.button:hover,
+GtkModelButton.button:selected {
+	color: @theme_selected_fg_color;
+	background-image:  linear-gradient(to bottom,
+	                                  shade(@theme_selected_bg_color, 1.1),
+	                                  shade(@theme_selected_bg_color, 0.8));
+	text-shadow: none;
+	border-color: @border_color;
+	border-width: 2px;
+	border-radius: 3px;
 }
 
-GtkPopover > .toolbar,
-GtkPopover.osd > .toolbar .button {
+GtkPopover .separator {
+	font-size: 80%;
+	font-weight: bold;
+	color: alpha(@theme_text_color,0.4);
+	text-shadow: none;
 	background-color: transparent;
+	icon-shadow: none;
+	border: 0;
 }
diff --git a/desktop-themes/TraditionalOk/gtk-3.0/gtk.css b/desktop-themes/TraditionalOk/gtk-3.0/gtk.css
index f7fcdcec..0304deb2 100644
--- a/desktop-themes/TraditionalOk/gtk-3.0/gtk.css
+++ b/desktop-themes/TraditionalOk/gtk-3.0/gtk.css
@@ -255,6 +255,7 @@
 @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_text_shadow alpha(black, 0.75);
 
 /***************
  * progressbar *
@@ -427,6 +428,9 @@
 @define-color trough_gradient_a shade(@core_color_b, 0.81);
 @define-color trough_gradient_b shade(@core_color_b, 0.90);
 
+
+@define-color wm_shadow alpha(black, 0.5);
+
 /***********
  * imports *
  ***********/
diff --git a/desktop-themes/TraditionalOkTest/gtk-3.0/gtk-widgets.css b/desktop-themes/TraditionalOkTest/gtk-3.0/gtk-widgets.css
index 26f76d85..66743229 100644
--- a/desktop-themes/TraditionalOkTest/gtk-3.0/gtk-widgets.css
+++ b/desktop-themes/TraditionalOkTest/gtk-3.0/gtk-widgets.css
@@ -1953,19 +1953,131 @@ GtkHeaderBar .header-bar {
 	padding: 5px 4px 4px 4px;
 }
 
-/************
+/*************
  * Popovers *
- ************/
+ *************/
 
-GtkPopover {
-	border: 1px solid;
-	border-radius: 0px;
+.popover {
+	background-clip: initial;
+	margin: 10px;
+	padding: 2px;
 	border-color: @border_color;
+	border: 1px solid;
+	border-radius: 2px;
 	background-color: @theme_bg_color;
-	background-clip: border-box;
+	background-image: linear-gradient(to bottom,
+	                                  shade(@theme_bg_color, 1.0),
+	                                  shade(@theme_bg_color, 0.85));
+	box-shadow: 0 1px 5px @wm_shadow;
+	text-shadow: none;
+	icon-shadow: none;
+}
+
+.popover > .list,
+.popover > .view,
+.popover > .toolbar .popover.osd > .toolbar,
+.popover > .inline-toolbar .popover.osd > .toolbar,
+.popover > .search-bar .popover.osd > .toolbar,
+.popover > .location-bar .popover.osd > .toolbar,
+.popover > .toolbar .popover.osd > .inline-toolbar,
+.popover > .inline-toolbar .popover.osd > .inline-toolbar,
+.popover > .search-bar .popover.osd > .inline-toolbar,
+.popover > .location-bar .popover.osd > .inline-toolbar,
+.popover > .toolbar .popover.osd > .search-bar,
+.popover > .inline-toolbar .popover.osd > .search-bar,
+.popover > .search-bar .popover.osd > .search-bar,
+.popover > .location-bar .popover.osd > .search-bar,
+.popover > .toolbar .popover.osd > .location-bar,
+.popover > .inline-toolbar .popover.osd > .location-bar,
+.popover > .search-bar .popover.osd > .location-bar,
+.popover > .location-bar .popover.osd > .location-bar {
+	border-style: none;
+	background-color: transparent;
+}
+
+.popover .separator {
+	font-size: 80%;
+	font-weight: bold;
+	color: alpha(@theme_fg_color,0.1);
+	text-shadow: none;
+	background-color: transparent;
+	icon-shadow: none;
+	border: 0;
+}
+
+.popover.osd {
+	background-image: none;
+	background-color: alpha(shade(#3E403D, 0.85), 0.75);
+	border: 1px solid black;
+	box-shadow: none;
+	color: @theme_selected_fg_color;
+}
+.popover.osd .toolbar {
+	background-image: none;
+	background-color: transparent;
+	border: none;
+	box-shadow: none;
+}
+.popover.osd .button {
+	text-shadow: 0 -1px @osd_text_shadow;
+	icon-shadow: 0 -1px @osd_text_shadow;
+}
+.popover.osd .button:active,
+.popover.osd .button:checked {
+        box-shadow: none;
+}
+.popover.osd .button:insensitive {
+	color: alpha(@theme_selected_fg_color, 0.4);
+}
+
+.popover .list {
+	background-color: @theme_base_color;
+}
+
+GtkModelButton.button {
+	color: @theme_fg_color;
+	border-radius: 3px;
+}
+
+GtkModelButton.button:checked,
+GtkModelButton.button:active,
+GtkModelButton.button:insensitive,
+GtkModelButton.button:active:insensitive,
+GtkModelButton.button:checked:insensitive,
+GtkModelButton.button,
+GtkModelButton.button:focus,
+GtkModelButton.button:active:focus,
+GtkModelButton.button:checked:focus {
+	color: @theme_fg_color;
+	background-color: transparent;
+	background-image: none;
+	border-color: transparent;
+	border-image: none;
+	border-style: none;
+	box-shadow: none;
+	border-radius: 3px;
+}
+
+GtkModelButton.button:checked:hover,
+GtkModelButton.button:active:hover,
+GtkModelButton.button:hover,
+GtkModelButton.button:selected {
+	color: @theme_selected_fg_color;
+	background-image:  linear-gradient(to bottom,
+	                                  shade(@theme_selected_bg_color, 1.1),
+	                                  shade(@theme_selected_bg_color, 0.8));
+	text-shadow: none;
+	border-width: 2px;
+	border-color: @border_color;
+	border-radius: 3px;
 }
 
-GtkPopover > .toolbar,
-GtkPopover.osd > .toolbar .button {
+GtkPopover .separator {
+	font-size: 80%;
+	font-weight: bold;
+	color: alpha(@theme_text_color,0.4);
+	text-shadow: none;
 	background-color: transparent;
+	icon-shadow: none;
+	border: 0;
 }
diff --git a/desktop-themes/TraditionalOkTest/gtk-3.0/gtk.css b/desktop-themes/TraditionalOkTest/gtk-3.0/gtk.css
index 466dcd12..71d42d77 100755..100644
--- a/desktop-themes/TraditionalOkTest/gtk-3.0/gtk.css
+++ b/desktop-themes/TraditionalOkTest/gtk-3.0/gtk.css
@@ -255,6 +255,7 @@
 @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_text_shadow alpha(black, 0.75);
 
 /***************
  * progressbar *
@@ -427,6 +428,9 @@
 @define-color trough_gradient_a shade(@core_color_b, 0.81);
 @define-color trough_gradient_b shade(@core_color_b, 0.90);
 
+
+@define-color wm_shadow alpha(black, 0.5);
+
 /***********
  * imports *
  ***********/