GTK+-3: Submarine themes: use a transparent bg for clock applet

2 files changed, 105 insertions, 22 deletions

diff --git a/desktop-themes/Blue-Submarine/gtk-3.0/mate-applications.css b/desktop-themes/Blue-Submarine/gtk-3.0/mate-applications.css
index 77da1342..f7d5640d 100644
--- a/desktop-themes/Blue-Submarine/gtk-3.0/mate-applications.css
+++ b/desktop-themes/Blue-Submarine/gtk-3.0/mate-applications.css
@@ -1003,28 +1003,42 @@ CalendarWindow#MatePanelPopupWindow {
     border-radius: 0px 0px 4px 4px;
     border-style: none;
     border-width: 0px;
-    background-color: @theme_bg_dark_color;
+    background-color: rgba(0,0,0,0.5);
 }
 
 CalendarWindow#MatePanelPopupWindow .frame {
     border-radius: 0px 0px 4px 4px;
     border-style: solid;
     border-width: 1px;
-    border-color: shade(@theme_selected_bg_color, 1.3);
-    background-color: @theme_bg_dark_color;
+    border-color: shade(@theme_selected_bg_color, 1.5);
+    background-color: transparent;
     color: @menu_fg_dark_color;
 }
 
+CalendarWindow#MatePanelPopupWindow .frame .label {
+     text-shadow: 1px 1px alpha (#000000, 0.8);
+}
+
+CalendarWindow#MatePanelPopupWindow .frame GtkImage {
+     icon-shadow: 1px 1px alpha (#000000, 0.8);
+}
+
 CalendarWindow#MatePanelPopupWindow GtkCalendar.view {
-    border-color: shade(@theme_selected_bg_color, 1.3);
+    border-color: shade(@theme_selected_bg_color, 1.5);
 }
 
 CalendarWindow#MatePanelPopupWindow GtkCalendar.header {
+    background-color:transparent;
     background-image: -gtk-gradient (linear,
                                      left top, left bottom,
-                                     from (shade (@theme_bg_dark_color, 1.00)),
-                                     to (shade (@theme_bg_dark_color, 0.95)));
+                                     from (alpha(shade(@theme_bg_dark_color, 1.00) ,0.8)),
+                                     to   (alpha(shade(@theme_bg_dark_color, 0.95) ,0.8)));
+}
+
+CalendarWindow#MatePanelPopupWindow GtkCalendar.header GtkArrow,
+CalendarWindow#MatePanelPopupWindow GtkCalendar.header .label {
     color: @menu_fg_dark_color;
+    text-shadow: 1px 1px alpha (#000000, 0.8);
 }
 
 CalendarWindow#MatePanelPopupWindow GtkCalendar.button {
@@ -1034,31 +1048,59 @@ CalendarWindow#MatePanelPopupWindow GtkCalendar.button {
 CalendarWindow#MatePanelPopupWindow GtkCalendar.button:hover {
     background-image: -gtk-gradient (linear,
                                      left top, left bottom,
-                                     from (shade(@menu_bg_dark_color, 2.03)),
-                                     to   (shade(@menu_bg_dark_color, 1.17)));
-    color: shade (@theme_selected_bg_color, 1.6);
+                                     from (alpha(shade(@menu_bg_dark_color, 2.03), 0.6)),
+                                     to   (alpha(shade(@menu_bg_dark_color, 1.17), 0.6)));
+    color: shade (@theme_selected_bg_color, 1.5);
 }
 
 CalendarWindow#MatePanelPopupWindow .frame .button {
     background-color:transparent;
     background-image: none;
     color: @menu_fg_dark_color;
+    text-shadow: 1px 1px alpha (#000000, 0.8);
 }
 
 CalendarWindow#MatePanelPopupWindow .frame .button:hover {
     background-image: -gtk-gradient (linear,
                                      left top, left bottom,
-                                     from (shade(@menu_bg_dark_color, 2.03)),
-                                     to   (shade(@menu_bg_dark_color, 1.17)));
-    color: shade (@theme_selected_bg_color, 1.6);
+                                     from (alpha(shade(@menu_bg_dark_color, 2.03), 0.6)),
+                                     to   (alpha(shade(@menu_bg_dark_color, 1.17), 0.6)));
+    color: shade (@theme_selected_bg_color, 2.0);
 }
 
 CalendarWindow#MatePanelPopupWindow .frame GtkExpander {
     color: @menu_fg_dark_color;
+    text-shadow: 1px 1px alpha (#000000, 0.8);
+    icon-shadow:  0px  1px shade (@menu_bg_dark_color, 1.0),
+                      1px  0px shade (@menu_bg_dark_color, 1.0),
+                     -1px  0px shade (@menu_bg_dark_color, 1.0),
+                      0px -1px shade (@menu_bg_dark_color, 1.0);
 }
 
 CalendarWindow#MatePanelPopupWindow .frame GtkExpander:hover {
-    color: shade (@theme_selected_bg_color, 1.6);
+    color: shade (@theme_selected_bg_color, 1.2);
+    icon-shadow:  0px  1px shade (@menu_fg_dark_color, 1.0),
+                       1px  0px shade (@menu_fg_dark_color, 1.0),
+                      -1px  0px shade (@menu_fg_dark_color, 1.0),
+                       0px -1px shade (@menu_fg_dark_color, 1.0);
+}
+
+CalendarWindow#MatePanelPopupWindow .frame GtkExpander:checked {
+    -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
+    color: shade (@theme_selected_bg_color, 1.2);
+    icon-shadow:  0px  1px shade (@menu_fg_dark_color, 1.0),
+                       1px  0px shade (@menu_fg_dark_color, 1.0),
+                      -1px  0px shade (@menu_fg_dark_color, 1.0),
+                       0px -1px shade (@menu_fg_dark_color, 1.0);
+}
+
+CalendarWindow#MatePanelPopupWindow .frame GtkExpander:checked:hover {
+    color: @menu_fg_dark_color;
+    text-shadow: 1px 1px alpha (#000000, 0.8);
+    icon-shadow:  0px  1px shade (@menu_bg_dark_color, 1.0),
+                      1px  0px shade (@menu_bg_dark_color, 1.0),
+                     -1px  0px shade (@menu_bg_dark_color, 1.0),
+                      0px -1px shade (@menu_bg_dark_color, 1.0);
 }
 
 /****************
diff --git a/desktop-themes/Green-Submarine/gtk-3.0/mate-applications.css b/desktop-themes/Green-Submarine/gtk-3.0/mate-applications.css
index de8c263e..222418cd 100644
--- a/desktop-themes/Green-Submarine/gtk-3.0/mate-applications.css
+++ b/desktop-themes/Green-Submarine/gtk-3.0/mate-applications.css
@@ -1005,7 +1005,7 @@ CalendarWindow#MatePanelPopupWindow {
     border-radius: 0px 0px 4px 4px;
     border-style: none;
     border-width: 0px;
-    background-color: @theme_bg_dark_color;
+    background-color: rgba(0,0,0,0.5);
 }
 
 CalendarWindow#MatePanelPopupWindow .frame {
@@ -1013,20 +1013,34 @@ CalendarWindow#MatePanelPopupWindow .frame {
     border-style: solid;
     border-width: 1px;
     border-color: shade(@theme_selected_bg_color, 1.3);
-    background-color: @theme_bg_dark_color;
+    background-color: transparent;
     color: @menu_fg_dark_color;
 }
 
+CalendarWindow#MatePanelPopupWindow .frame .label {
+     text-shadow: 1px 1px alpha (#000000, 0.8);
+}
+
+CalendarWindow#MatePanelPopupWindow .frame GtkImage {
+     icon-shadow: 1px 1px alpha (#000000, 0.8);
+}
+
 CalendarWindow#MatePanelPopupWindow GtkCalendar.view {
     border-color: shade(@theme_selected_bg_color, 1.3);
 }
 
 CalendarWindow#MatePanelPopupWindow GtkCalendar.header {
+    background-color:transparent;
     background-image: -gtk-gradient (linear,
                                      left top, left bottom,
-                                     from (shade (@theme_bg_dark_color, 1.00)),
-                                     to (shade (@theme_bg_dark_color, 0.95)));
+                                     from (alpha(shade(@theme_bg_dark_color, 1.00) ,0.8)),
+                                     to   (alpha(shade(@theme_bg_dark_color, 0.95) ,0.8)));
+}
+
+CalendarWindow#MatePanelPopupWindow GtkCalendar.header GtkArrow,
+CalendarWindow#MatePanelPopupWindow GtkCalendar.header .label {
     color: @menu_fg_dark_color;
+    text-shadow: 1px 1px alpha (#000000, 0.8);
 }
 
 CalendarWindow#MatePanelPopupWindow GtkCalendar.button {
@@ -1036,8 +1050,8 @@ CalendarWindow#MatePanelPopupWindow GtkCalendar.button {
 CalendarWindow#MatePanelPopupWindow GtkCalendar.button:hover {
     background-image: -gtk-gradient (linear,
                                      left top, left bottom,
-                                     from (shade(@menu_bg_dark_color, 2.03)),
-                                     to   (shade(@menu_bg_dark_color, 1.17)));
+                                     from (alpha(shade(@menu_bg_dark_color, 2.03), 0.6)),
+                                     to   (alpha(shade(@menu_bg_dark_color, 1.17), 0.6)));
     color: shade (@theme_selected_bg_color, 1.3);
 }
 
@@ -1050,17 +1064,44 @@ CalendarWindow#MatePanelPopupWindow .frame .button {
 CalendarWindow#MatePanelPopupWindow .frame .button:hover {
     background-image: -gtk-gradient (linear,
                                      left top, left bottom,
-                                     from (shade(@menu_bg_dark_color, 2.03)),
-                                     to   (shade(@menu_bg_dark_color, 1.17)));
+                                     from (alpha(shade(@menu_bg_dark_color, 2.03), 0.6)),
+                                     to   (alpha(shade(@menu_bg_dark_color, 1.17), 0.6)));
     color: shade (@theme_selected_bg_color, 1.3);
 }
 
 CalendarWindow#MatePanelPopupWindow .frame GtkExpander {
     color: @menu_fg_dark_color;
+    text-shadow: 1px 1px alpha (#000000, 0.8);
+    icon-shadow:  0px  1px shade (@menu_bg_dark_color, 1.0),
+                      1px  0px shade (@menu_bg_dark_color, 1.0),
+                     -1px  0px shade (@menu_bg_dark_color, 1.0),
+                      0px -1px shade (@menu_bg_dark_color, 1.0);
 }
 
 CalendarWindow#MatePanelPopupWindow .frame GtkExpander:hover {
-    color: shade (@theme_selected_bg_color, 1.3);
+    color: shade (@theme_selected_bg_color, 0.8);
+    icon-shadow:  0px  1px shade (@menu_fg_dark_color, 1.0),
+                       1px  0px shade (@menu_fg_dark_color, 1.0),
+                      -1px  0px shade (@menu_fg_dark_color, 1.0),
+                       0px -1px shade (@menu_fg_dark_color, 1.0);
+}
+
+CalendarWindow#MatePanelPopupWindow .frame GtkExpander:checked {
+    -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
+    color: shade (@theme_selected_bg_color, 0.8);
+    icon-shadow:  0px  1px shade (@menu_fg_dark_color, 1.0),
+                       1px  0px shade (@menu_fg_dark_color, 1.0),
+                      -1px  0px shade (@menu_fg_dark_color, 1.0),
+                       0px -1px shade (@menu_fg_dark_color, 1.0);
+}
+
+CalendarWindow#MatePanelPopupWindow .frame GtkExpander:checked:hover {
+    color: @menu_fg_dark_color;
+    text-shadow: 1px 1px alpha (#000000, 0.8);
+    icon-shadow:  0px  1px shade (@menu_bg_dark_color, 1.0),
+                      1px  0px shade (@menu_bg_dark_color, 1.0),
+                     -1px  0px shade (@menu_bg_dark_color, 1.0),
+                      0px -1px shade (@menu_bg_dark_color, 1.0);
 }
 
 /****************