[gtk+] [broadway] New adwaita based css for "wm"

[Alexander Larsson <alexl src gnome org>]

commit ce80929b83677e95e5c1c7ecf5a7f7af53e98fc9
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Tue Apr 19 08:30:21 2011 +0200

    [broadway] New adwaita based css for "wm"
    
    Created by Lapo Calamandrei.

 gdk/broadway/broadway.js |    2 +-
 gdk/broadway/client.html |   52 +++++++++++++++++++++++++--------------------
 2 files changed, 30 insertions(+), 24 deletions(-)
---
diff --git a/gdk/broadway/broadway.js b/gdk/broadway/broadway.js
index 3409ba8..357620e 100644
--- a/gdk/broadway/broadway.js
+++ b/gdk/broadway/broadway.js
@@ -462,7 +462,7 @@ function cmdCreateSurface(id, x, y, width, height, isTemp)
 
 	var button = document.createElement("center");
 	button.closeFor = surface;
-	var X = document.createTextNode("X");
+	var X = document.createTextNode("\u00d7");
 	button.appendChild(X);
 	button.className = "frame-close";
 	frame.appendChild(button);
diff --git a/gdk/broadway/client.html b/gdk/broadway/client.html
index e98aac4..85e66cd 100644
--- a/gdk/broadway/client.html
+++ b/gdk/broadway/client.html
@@ -7,41 +7,43 @@
 <style type="text/css">
 
 .frame-window {
-    background-color: rgb(179, 230, 255);
-    background-image: -moz-linear-gradient(rgba(250, 253, 255, 0.1) 0px, rgba(250, 253, 255, 0.65) 40px, rgba(250, 253, 255, 0.75) 50px, rgba(250, 253, 255, 0) 54px);
-    background-image: -webkit-gradient(linear, left top, left 50, from(rgba(250, 253, 255, 0.9)), to(rgba(250, 253, 255, 0)), color-stop(88%, rgba(250, 253, 255, 0.75)));
-    border-radius: 6px;
-    -moz-border-radius: 6px;
-    border: 1px solid rgb(0, 0,0);
-    padding: 0 7px 7px 7px;
+    background-color: rgb(248, 248, 248);
+    background-image: -moz-linear-gradient(rgb(255, 255, 255) 1px, rgb(247, 247, 247) 1px, rgb(237, 236, 235) 32px);
+/*    background-image: -webkit-gradient(linear, left top, left 50, from(rgba(250, 253, 255, 0.9)), to(rgba(250, 253, 255, 0)), color-stop(88%, rgba(250, 253, 255, 0.75))); */
+    border-radius: 5px 5px 0 0;
+    -moz-border-radius: 5px 5px 0 0;
+    border: 1px solid rgb(142, 142, 142);
+    padding: 0 0 3px;
 }
 
 .frame-contents {
-    border-radius: 3px;
-    -moz-border-radius: 3px;
-    border: 1px solid rgb(0, 0, 0);
     clear: both;
     position: relative;
 }
 
 .frame-close {
-    margin: 0 2px 3px 2px;
-    background-color: #CC3333;
-    background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 100%);
-    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.35)), to(rgba(255, 255, 255, 0.5)), color-stop(50%, rgba(255, 255, 255, 0.5)), color-stop(50%, rgba(255, 255, 255, 0)));
-    border-radius: 2px;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
+    margin: 0 0 4px;
+    background-color: #BFC1C1;
+    background-image: -moz-linear-gradient(#D1D2D2 0%, #BABBBC 65%, #D4D4D5 100%);
+/*    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.35)), to(rgba(255, 255, 255, 0.5)), color-stop(50%, rgba(255, 255, 255, 0.5)), color-stop(50%, rgba(255, 255, 255, 0))); */
+    border-radius: 0 4px 0 5px;
+/*    border-top-left-radius: 0;
+    border-top-right-radius: 4px;
     -moz-border-radius: 2px;
     -moz-border-top-left-radius: 0;
-    -moz-border-top-right-radius: 0;
-    border: 1px solid #550000;
+    -moz-border-top-right-radius: 0; */
     border-top: none;
+    border-right: none;
+    border-bottom: 1px solid #BEBEBE;
+    border-left: 1px solid #8E8E8E;
     float: right;
     color: white;
-    width: 36px;
-    text-shadow: black -1px 0 0, black 1px 0 0, black 0 1px 0, black 0 -1px 0;
+    line-height: 30px;
+    width: 30px;
+    text-shadow: 0 1px 0 #8E8E8E;
     font-weight: bold;
+    font-family: sans-serif;
+    font-size: 190%;
     cursor: pointer;
     -webkit-user-select: none;
     -khtml-user-select: none;
@@ -51,11 +53,15 @@
 }
 
 .frame-close.frame-hover {
-    background-color: #EE4A4A;
+    background-image: -moz-linear-gradient(#E8E8E8 0%, #C7C8C9 65%, #D6D6D6 100%);
 }
 
 .frame-close.frame-active {
-    background-color: #AA2020;
+    background-image: -moz-linear-gradient(#8E8E8E 1px, #BEBEBE 100%);
+    text-shadow: none;
+    /* this is a gross hack, remove if it break things */
+    margin: -1px 0 4px;
+    padding-top: 1px;
 }
 
 </style>