TraditionalOK themes GTK3: improve titlebar section

3 files changed, 176 insertions, 47 deletions

diff --git a/desktop-themes/TraditionalGreen/gtk-3.0/gtk-widgets.css b/desktop-themes/TraditionalGreen/gtk-3.0/gtk-widgets.css
index 255fe7ae..eb2bd72e 100644
--- a/desktop-themes/TraditionalGreen/gtk-3.0/gtk-widgets.css
+++ b/desktop-themes/TraditionalGreen/gtk-3.0/gtk-widgets.css
@@ -1769,30 +1769,33 @@ GtkInfoBar:last-child,
  * Titlebar *
  ************/
 
+/* this is the default titlebar that is added by GTK
+ * when client-side decorations are in use and the application
+ * did not set a custom titlebar.
+ */
+.titlebar.default-decoration {
+    border: none;
+    box-shadow: none;
+}
+
 .titlebar {
 	background-image: linear-gradient(to bottom,
-	                  shade (@theme_selected_bg_color, 1.10),
+	                  shade (@theme_selected_bg_color, 1.20),
 	                  @theme_selected_bg_color);
 	background-color: transparent;
 	border-radius: 7px 7px 0px 0px;
-/*	border-bottom: 1px solid;
-	border-color: shade(@theme_fg_color, 1.30);*/
-}
-
-.titlebar > * {
-	background: none;
-}
-
-.tiled .titlebar {
-	border-radius: 0;
-}
-
-.maximized .titlebar {
-	border-radius: 0;
+	border-bottom: 1px solid;
+	border-color: shade(@border_color, 1.30);
+    color: @theme_selected_fg_color;
+    font: Bold 10;
+    text-shadow: 1px 1px 1px 1px @theme_base_color;
 }
 
-.titlebar .title {
-	font: Bold;
+ /* Colour when unfocused? */
+.titlebar:backdrop {
+    text-shadow: none;
+    background-image: none;
+    background-color: @theme_bg_color;
 }
 
 .titlebar .titlebutton {
@@ -1813,13 +1816,53 @@ GtkInfoBar:last-child,
 	padding: 5px 5px 6px 5px;
 }
 
+.titlebar .titlebutton:active {
+	background-image: linear-gradient(to bottom,
+	                  shade (@theme_selected_bg_color, 1.05),
+	                  shade (@theme_selected_bg_color, 1.25));
+	border-image: url("img/border.svg") 3 3 4 3 / 3px 3px 4px 3px repeat;
+    color: @theme_fg_color;
+    icon-shadow: none;
+}
+
+.titlebar .right .titlebutton:first-child {
+    border-left: 1px solid @menu_separator;
+}
+
+.titlebar .right .titlebutton:last-child {
+
+}
+
+.titlebar .left .titlebutton:last-child {
+    border-right: 1px solid @menu_separator;
+}
+
+.titlebar .left .titlebutton:first-child {
+
+}
+
+.titlebar .titlebutton:backdrop {
+    background: none;
+    color: @theme_text_color;
+    border-image: none;
+    icon-shadow: none;
+}
+
 .window-frame {
 	border-width: 1px;
 	border-radius: 7px 7px 0 0;
 	border-style: solid;
+    background-color: @theme_bg_color;
+/* dummy to avoid resizing mate-appearence-properties if theme changed */
+    box-shadow: 0px 0px 0px 0px;
 	margin: 10px;
 }
 
+.window-frame:backdrop {
+/* dummy to avoid resizing mate-appearence-properties if theme changed */
+    box-shadow: 0 0 0 2px @insensitive_text_shadow_color, 0 2px 5px 1px @insensitive_text_shadow_color;
+}
+
 /************
  * Popovers *
  ************/
diff --git a/desktop-themes/TraditionalOk/gtk-3.0/gtk-widgets.css b/desktop-themes/TraditionalOk/gtk-3.0/gtk-widgets.css
index d11a3bbc..a2bad583 100644
--- a/desktop-themes/TraditionalOk/gtk-3.0/gtk-widgets.css
+++ b/desktop-themes/TraditionalOk/gtk-3.0/gtk-widgets.css
@@ -1769,30 +1769,33 @@ GtkInfoBar:last-child,
  * Titlebar *
  ************/
 
+/* this is the default titlebar that is added by GTK
+ * when client-side decorations are in use and the application
+ * did not set a custom titlebar.
+ */
+.titlebar.default-decoration {
+    border: none;
+    box-shadow: none;
+}
+
 .titlebar {
 	background-image: linear-gradient(to bottom,
-	                  shade (@theme_selected_bg_color, 1.10),
+	                  shade (@theme_selected_bg_color, 1.20),
 	                  @theme_selected_bg_color);
 	background-color: transparent;
 	border-radius: 7px 7px 0px 0px;
 	border-bottom: 1px solid;
 	border-color: shade(@border_color, 1.30);
+    color: @theme_selected_fg_color;
+    font: Bold 10;
+    text-shadow: 1px 1px 1px 1px @theme_fg_color;
 }
 
-.titlebar > * {
-	background: none;
-}
-
-.tiled .titlebar {
-	border-radius: 0;
-}
-
-.maximized .titlebar {
-	border-radius: 0;
-}
-
-.titlebar .title {
-	font: Bold;
+ /* Colour when unfocused? */
+.titlebar:backdrop {
+    text-shadow: none;
+    background-image: none;
+    background-color: @theme_bg_color;
 }
 
 .titlebar .titlebutton {
@@ -1813,13 +1816,53 @@ GtkInfoBar:last-child,
 	padding: 5px 5px 6px 5px;
 }
 
+.titlebar .titlebutton:active {
+	background-image: linear-gradient(to bottom,
+	                  shade (@theme_selected_bg_color, 1.05),
+	                  shade (@theme_selected_bg_color, 1.25));
+	border-image: url("img/border.svg") 3 3 4 3 / 3px 3px 4px 3px repeat;
+    color: @theme_fg_color;
+    icon-shadow: none;
+}
+
+.titlebar .right .titlebutton:first-child {
+    border-left: 1px solid @menu_separator;
+}
+
+.titlebar .right .titlebutton:last-child {
+
+}
+
+.titlebar .left .titlebutton:last-child {
+    border-right: 1px solid @menu_separator;
+}
+
+.titlebar .left .titlebutton:first-child {
+
+}
+
+.titlebar .titlebutton:backdrop {
+    background: none;
+    color: @theme_text_color;
+    border-image: none;
+    icon-shadow: none;
+}
+
 .window-frame {
 	border-width: 1px;
 	border-radius: 7px 7px 0 0;
 	border-style: solid;
+    background-color: @theme_bg_color;
+/* dummy to avoid resizing mate-appearence-properties if theme changed */
+    box-shadow: 0px 0px 0px 0px;
 	margin: 10px;
 }
 
+.window-frame:backdrop {
+/* dummy to avoid resizing mate-appearence-properties if theme changed */
+    box-shadow: 0 0 0 2px @insensitive_text_shadow_color, 0 2px 5px 1px @insensitive_text_shadow_color;
+}
+
 /************
  * Popovers *
  ************/
diff --git a/desktop-themes/TraditionalOkTest/gtk-3.0/gtk-widgets.css b/desktop-themes/TraditionalOkTest/gtk-3.0/gtk-widgets.css
index 3ad7efa6..c8c1b031 100755..100644
--- a/desktop-themes/TraditionalOkTest/gtk-3.0/gtk-widgets.css
+++ b/desktop-themes/TraditionalOkTest/gtk-3.0/gtk-widgets.css
@@ -1767,30 +1767,33 @@ GtkInfoBar:last-child,
  * Titlebar *
  ************/
 
+/* this is the default titlebar that is added by GTK
+ * when client-side decorations are in use and the application
+ * did not set a custom titlebar.
+ */
+.titlebar.default-decoration {
+    border: none;
+    box-shadow: none;
+}
+
 .titlebar {
 	background-image: linear-gradient(to bottom,
-	                  shade (@theme_selected_bg_color, 1.10),
+	                  shade (@theme_selected_bg_color, 1.20),
 	                  @theme_selected_bg_color);
 	background-color: transparent;
 	border-radius: 7px 7px 0px 0px;
 	border-bottom: 1px solid;
 	border-color: shade(@border_color, 1.30);
+    color: @theme_selected_fg_color;
+    font: Bold 10;
+    text-shadow: 1px 1px 1px 1px @theme_fg_color;
 }
 
-.titlebar > * {
-	background: none;
-}
-
-.tiled .titlebar {
-	border-radius: 0;
-}
-
-.maximized .titlebar {
-	border-radius: 0;
-}
-
-.titlebar .title {
-	font: Bold;
+ /* Colour when unfocused? */
+.titlebar:backdrop {
+    text-shadow: none;
+    background-image: none;
+    background-color: @theme_bg_color;
 }
 
 .titlebar .titlebutton {
@@ -1811,13 +1814,53 @@ GtkInfoBar:last-child,
 	padding: 5px 5px 6px 5px;
 }
 
+.titlebar .titlebutton:active {
+	background-image: linear-gradient(to bottom,
+	                  shade (@theme_selected_bg_color, 1.05),
+	                  shade (@theme_selected_bg_color, 1.25));
+	border-image: url("img/border.svg") 3 3 4 3 / 3px 3px 4px 3px repeat;
+    color: @theme_fg_color;
+    icon-shadow: none;
+}
+
+.titlebar .right .titlebutton:first-child {
+    border-left: 1px solid @menu_separator;
+}
+
+.titlebar .right .titlebutton:last-child {
+
+}
+
+.titlebar .left .titlebutton:last-child {
+    border-right: 1px solid @menu_separator;
+}
+
+.titlebar .left .titlebutton:first-child {
+
+}
+
+.titlebar .titlebutton:backdrop {
+    background: none;
+    color: @theme_text_color;
+    border-image: none;
+    icon-shadow: none;
+}
+
 .window-frame {
 	border-width: 1px;
 	border-radius: 7px 7px 0 0;
 	border-style: solid;
+    background-color: @theme_bg_color;
+/* dummy to avoid resizing mate-appearence-properties if theme changed */
+    box-shadow: 0px 0px 0px 0px;
 	margin: 10px;
 }
 
+.window-frame:backdrop {
+/* dummy to avoid resizing mate-appearence-properties if theme changed */
+    box-shadow: 0 0 0 2px @insensitive_text_shadow_color, 0 2px 5px 1px @insensitive_text_shadow_color;
+}
+
 /************
  * Popovers *
  ************/