Files
guacamole-client/guacamole/src/main/webapp/styles/login.css
2012-11-11 00:26:23 -08:00

343 lines
6.1 KiB
CSS

/*
* Guacamole - Clientless Remote Desktop
* Copyright (C) 2010 Michael Jumper
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
* {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
input[type=checkbox], input[type=text], textarea {
-webkit-tap-highlight-color: rgba(128,192,128,0.5);
}
input[type=submit], button {
-webkit-appearance: none;
}
body {
background: #EEE;
font-family: FreeSans, Helvetica, Arial, sans-serif;
padding: 0;
margin: 0;
}
div#login-ui {
height: 100%;
width: 100%;
position: fixed;
left: 0;
top: 0;
display: table;
}
p#login-error {
text-align: center;
background: #FDD;
color: red;
margin: 0.2em;
}
div#login-logo {
position: relative;
bottom: 0;
display: inline-block;
vertical-align: middle;
}
div#login-dialog-middle {
width: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
}
div#login-dialog {
max-width: 75%;
text-align: left;
display: inline-block;
}
div#login-dialog h1 {
margin-top: 0;
margin-bottom: 0em;
text-align: center;
}
div#login-dialog #buttons {
padding-top: 0.5em;
text-align: right;
}
div#login-dialog #buttons input,
div#logout-panel button {
background: #8A6;
border: 1px solid rgba(0, 0, 0, 0.4);
border-radius: 0.6em;
color: white;
text-shadow: -1px -1px rgba(0, 0, 0, 0.3);
font-weight: bold;
font-size: 1.125em;
box-shadow: inset -1px -1px 0.25em rgba(0, 0, 0, 0.25),
inset 1px 1px 0.25em rgba(255, 255, 255, 0.25),
-1px -1px 0.25em rgba(0, 0, 0, 0.25),
1px 1px 0.25em rgba(255, 255, 255, 0.25);
padding: 0.35em;
padding-right: 1em;
padding-left: 1em;
min-width: 5em;
}
div#login-dialog #buttons input:hover,
div#logout-panel button:hover {
background: #9C7;
}
div#login-dialog #buttons input:active,
div#logout-panel button:active {
padding-left: 1.1em;
padding-right: 0.9em;
padding-top: 0.45em;
padding-bottom: 0.25em;
box-shadow:
inset 1px 1px 0.25em rgba(0, 0, 0, 0.25),
-1px -1px 0.25em rgba(0, 0, 0, 0.25),
1px 1px 0.25em rgba(255, 255, 255, 0.25);
}
div#login-dialog #login-fields {
vertical-align: middle;
padding: 1em;
background: #DDD;
border: 1px solid #999;
border-radius: 0.25em;
}
div#login-dialog th {
text-shadow: 1px 1px white;
}
div#login-dialog #login-fields input {
border: 1px solid #777;
border-radius: 0.2em;
width: 100%;
}
div#login-dialog #login-fields img.logo {
position: fixed;
margin: 10px;
left: 0;
bottom: 0;
opacity: 0.1;
z-index: -1;
}
div#version-dialog {
position: fixed;
right: 0;
bottom: 0;
text-align: right;
font-style: italic;
font-size: 0.75em;
color: black;
opacity: 0.5;
padding: 0.5em;
}
img {
border: none;
}
img#license {
float: right;
margin: 2px;
}
div#connection-list-ui h1 {
margin: 0;
padding: 0.5em;
font-size: 2em;
vertical-align: middle;
text-align: center;
}
div#connection-list-ui h2 {
padding: 0.5em;
margin: 0;
font-size: 1.5em;
font-weight: lighter;
text-shadow: 1px 1px white;
border-top: 1px solid #AAA;
border-bottom: 1px solid #AAA;
background: #DDD;
}
div#connection-list-ui img {
vertical-align: middle;
}
div#logout-panel {
padding: 0.45em;
text-align: right;
float: right;
}
.history-unavailable div#recent-connections {
display: none;
}
div#recent-connections,
div#clipboardDiv,
div#settings,
div#all-connections {
margin: 0;
padding: 1em;
}
div#recent-connections {
text-align: center;
}
#no-recent {
color: black;
text-shadow: 1px 1px white;
opacity: 0.5;
font-size: 2em;
font-weight: bolder;
}
div#recent-connections div.connection {
border-radius: 0.5em;
display: inline-block;
padding: 1em;
margin: 1em;
text-align: center;
max-width: 75%;
overflow: hidden;
}
.connection {
cursor: pointer;
}
.connection:hover {
background: #CDA;
}
.connection .name {
color: black;
font-weight: normal;
padding: 0.1em;
}
.connection .thumbnail {
margin: 0.5em;
}
.connection .thumbnail img {
border: 1px solid black;
box-shadow: 1px 1px 5px black;
max-width: 75%;
}
div#all-connections .connection {
display: block;
text-align: left;
}
div#all-connections .connection .thumbnail {
display: none;
}
div#all-connections .connection {
padding: 0.1em;
}
.protocol {
display: inline-block;
}
.protocol .icon {
width: 24px;
height: 24px;
background-image: url('../images/protocol-icons/guac-plug.png');
background-size: 16px 16px;
background-repeat: no-repeat;
background-position: center center;
opacity: 0.5;
}
.protocol .icon.ssh {
background-image: url('../images/protocol-icons/guac-text.png');
}
.protocol .icon.vnc,
.protocol .icon.rdp {
background-image: url('../images/protocol-icons/guac-monitor.png');
}
div#recent-connections .protocol {
display: none;
}
.caption * {
vertical-align: middle;
}
.caption .name {
margin-left: 0.25em;
}
#clipboardDiv textarea {
width: 100%;
border: 1px solid #AAA;
border-radius: 0.25em;
}
#settings dt {
border-bottom: 1px dotted #AAA;
padding-bottom: 0.25em;
}
#settings dd {
margin: 1.5em;
margin-left: 2.5em;
font-size: 0.75em;
}