guacamole-client/guacamole/src/main/webapp/app/index/styles/ui.css

/*
 * Copyright (C) 2013 Glyptodon LLC
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */

* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    background: white;
    font-family: Carlito, FreeSans, Helvetica, Arial, sans-serif;
    padding: 0;
    margin: 0;
}

img {
    border: none;
    vertical-align: middle;
}

h1 {
    
    margin: 0;
    padding: 0.5em;

    font-size: 2em;
    vertical-align: middle;
    text-align: center;

}

h2 {
    font-size: 1.25em;
    font-weight: bold;
    text-transform: uppercase;
    padding: 0.75em 0.5em;
    margin: 0;
}

.header {

    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.125);
    background: rgba(0, 0, 0, 0.04);

    margin-bottom: 1em;
    margin-top: 0;
    border-top: none;
    width: 100%;

    /* IE10 */
    display: -ms-flexbox;
    -ms-flex-align: stretch;
    -ms-flex-direction: row;

    /* Ancient Mozilla */
    display: -moz-box;
    -moz-box-align: stretch;
    -moz-box-orient: horizontal;
    
    /* Ancient WebKit */
    display: -webkit-box;
    -webkit-box-align: stretch;
    -webkit-box-orient: horizontal;

    /* Old WebKit */
    display: -webkit-flex;
    -webkit-align-items: stretch;
    -webkit-flex-direction: row;

    /* W3C */
    display: flex;
    align-items: stretch;
    flex-direction: row;

}

.header ~ .header {
    margin-top: 1em;
    border-top: 1px solid rgba(0, 0, 0, 0.125);
}

.header h2 {
    -ms-flex: 1 1 auto;
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
}

div.section {
    margin: 1em;
    padding: 0;
}

/*
 * List elements
 */

.list-item {

    display: block;
    text-align: left;
    cursor: pointer;

    position: relative;

}

.icon {
    width: 24px;
    height: 24px;
    background-size: 16px 16px;
    -moz-background-size: 16px 16px;
    -webkit-background-size: 16px 16px;
    -khtml-background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: center center;
    display: inline-block;
    vertical-align: middle;
}

.list-item * {
    vertical-align: middle;
}

.list-item .caption {
    padding: 0.1em;
}

.list-item .name {
    color: black;
    font-weight: normal;
    padding: 0.1em;
    margin-left: 0.25em;
}

.list-item .usage {
    float: right;
    font-style: italic;
    color: gray;
}

.list-item.in-use {
    opacity: 0.5;
}

.choice .list-item.in-use {
    opacity: 1;
}

/*
 * List element styling
 */

.list-item.selected {
    background: #DEB;
}

.caption.active * {
    opacity: 0.5;
}

.caption .activeUserCount {
    font-style: italic;
    position: absolute;
    right: 1em;
}

.list-item:not(.selected) .caption:hover {
    background: #CDA;
}

.choice .list-item {
    display: inline-block;
}

.choice input[type='checkbox'] {
    vertical-align: top;
    height: 24px;
    padding: 0;
    margin: 0;
}

.disabled .list-item:not(.selected) {
    opacity: 0.25;
}

.disabled .list-item:not(.selected):hover {
    background: inherit;
}

/*
 * List element icons
 */

.icon.user {
    background-image: url('images/user-icons/guac-user.png');
}

.icon.user.add {
    background-image: url('images/action-icons/guac-user-add.png');
}

.icon.connection {
    background-image: url('images/protocol-icons/guac-plug.png');
}

.icon.connection.add {
    background-image: url('images/action-icons/guac-monitor-add.png');
}

.protocol {
    display: inline-block;
}

.protocol .icon {
    width: 24px;
    height: 24px;
    background-image: url('images/protocol-icons/guac-plug.png');
    background-size: 16px 16px;
    -moz-background-size: 16px 16px;
    -webkit-background-size: 16px 16px;
    -khtml-background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: center center;
}

.protocol .icon.ssh,
.protocol .icon.telnet {
    background-image: url('images/protocol-icons/guac-text.png');
}

.protocol .icon.vnc,
.protocol .icon.rdp {
    background-image: url('images/protocol-icons/guac-monitor.png');
}
/*
 * Groups
 */

.group > .children {
    margin-left: 13px;
    padding-left: 6px;
}
 
.group .icon.group.type.empty.balancer {
    opacity: 1;
    background-image: url('images/protocol-icons/guac-monitor.png');
}

.group.expanded > .children {
    display: block;
    border-left: 1px dotted rgba(0, 0, 0, 0.25);
}

.group > .caption .icon.group {
    opacity: 0.75;
    background-image: url('images/group-icons/guac-closed.png');
}

.group .icon.type.group.expanded {
    background-image: url('images/group-icons/guac-open.png');
}

.group .icon.type.group.empty {
    opacity: 0.25;
    background-image: url('images/group-icons/guac-open.png');
}

.history th,
.history td {
    padding-left: 1em;
    padding-right: 1em;
}

.buttons {
    text-align: center;
    margin: 1em;
}