Menu button styling.

[guacamole.git] / src / main / webapp / styles / client.css

diff --git a/src/main/webapp/styles/client.css b/src/main/webapp/styles/client.css
index 99a09ae..9d0f9d2 100644 (file)
--- a/src/main/webapp/styles/client.css
+++ b/src/main/webapp/styles/client.css
@@ -24,7 +24,21 @@ body {
     margin: 0;
 }
 
-div.errorDialogOuter {
+img {
+    border: none;
+}
+
+.software-cursor {
+    cursor: url('../images/mouse/dot.gif'),url('../images/mouse/blank.cur'),default;
+}
+
+* {
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
+}
+
+/* Dialogs */
+
+div.dialogOuter {
     display: table;
     height: 100%;
     width: 100%;
@@ -35,81 +49,73 @@ div.errorDialogOuter {
     visibility: hidden;
 }
 
-div.errorDialogMiddle {
+div.dialogMiddle {
     width: 100%;
     text-align: center;
     display: table-cell;
     vertical-align: middle;
 }
 
-div.errorDialog {
-
-    opacity: 0.75;
-    background: #D22;
-    border: 1px solid #F44;
+div.dialog {
     padding: 1em;
 
     max-width: 75%;
     text-align: left;
 
     display: inline-block;
+    visibility: visible;
 }
 
-div.errorDialog h1 {
+div.dialog h1 {
     margin: 0;
     margin-bottom: 0.25em;
     text-align: center;
 }
 
-div.errorDialog div.buttons {
+div.dialog div.buttons {
     margin: 0;
     margin-top: 0.5em;
     text-align: center;
 }
 
-div.errorDialog p {
+*:not(.guac-error) button#reconnect {
+    display: none;
+}
+
+div.dialog p {
     margin: 0;
 }
 
+#statusText {
+    text-shadow: 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black;
+    font-size: xx-large;
+    color: white;
+}
+
+.guac-error #statusText {
+    text-shadow: 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black;
+    color: #D44;
+}
+
+/* Menu */
 
 #menu {
-    margin-left: auto;
-    margin-right: auto;
-    margin-bottom: 1em;
-    font-size: 0.8em;
-    background: #FEA;
-    border: 1px solid black;
     position: fixed;
     left: 0;
     top: 0;
     width: 100%;
-    z-index: 1;
-}
-
-#menu.connected {
-    opacity: 0.5;
-}
-
-#menu.connected:hover {
-    opacity: 1;
+    z-index: 4;
+    background: #FEA;
+    border-bottom: 1px solid black;
+    font-size: 0.8em;
 }
 
-#menu.error {
+.guac-error #menu {
     background: #D44;
 }
 
-.error #state {
-    font-weight: bold;
-}
-
-img {
-    border: none;
-}
-
-div#display {
+div#display * {
     position: relative;
-    width: 640px;
-    height: 480px;
     margin-left: auto;
     margin-right: auto;
 }
@@ -118,12 +124,41 @@ div#display {
     vertical-align: middle;
 }
 
-#menu button {
+#menu span {
     vertical-align: middle;
 }
 
-#menu span {
+#menu button {
     vertical-align: middle;
+    background: #DC8;
+    border: 1px solid #986;
+    color: black; 
+    padding: 0.25em;
+    padding-right: 1em;
+    padding-left: 1em;
+}
+
+#menu button:hover {
+    background: #FFC;
+    border: 1px solid #DC8;
+}
+
+#menu button:active {
+    padding-top: 0.35em;
+    padding-left: 1.1em;
+
+    padding-bottom: 0.15em;
+    padding-right: 0.9em;
+}
+
+.guac-error #menu button {
+    background: #B33;
+    border: 1px solid #822;
+}
+
+.guac-error #menu button:hover {
+    background: #F44;
+    border: 1px solid #B33;
 }
 
 div#clipboardDiv {
@@ -133,12 +168,14 @@ div#clipboardDiv {
     padding: 1em;
 
     border: 1px solid black;
-    -khtml-border-radius: 0.5em;
-    -webkit-border-radius: 0.5em;
-    -moz-border-radius: 0.5em;
-    border-radius: 0.5em;
 
     width: 50em;
+    z-index: 2;
+    opacity: 0.5;
+}
+
+#menu:hover div#clipboardDiv {
+    opacity: 1;
 }
 
 div#clipboardDiv h2 {
@@ -150,21 +187,27 @@ div#clipboardDiv textarea {
     width: 100%;
 }
 
-.guac-display.guac-loading {
-    border: 1px dotted gray;
-    background-image: url('../images/spinner.gif');
-    background-position: center;
-    background-repeat: no-repeat;
-}
+div#menuControl {
+    position: fixed;
+    top: 0;
+    left: 0;
+    
+    width: 100%;
+    height: 3px;
+    background: none;
 
-.guac-display.guac-error {
-    border: 1px dotted red;
-    background-image: url('../images/noimage.png');
-    background-position: center;
-    background-repeat: no-repeat;
+    z-index: 3;
 }
 
-.guac-hide-cursor {
-    cursor: url('../images/mouse/dot.gif'),url('../images/mouse/blank.cur'),default;
-}
+/* Viewport Clone */
 
+div#viewportClone {
+    display: table;
+    height: 100%;
+    width: 100%;
+    position: fixed;
+    left: 0;
+    top: 0;
+
+    visibility: hidden;
+}