ant-http/build/htdocs/dist/themes/styles/glass.css
2016-10-29 14:34:29 +02:00

1241 lines
28 KiB
CSS

@charset "UTF-8";
/*!
* OS.js - JavaScript Cloud/Web Desktop Platform
*
* Copyright (c) 2011-2016, Anders Evenrud <andersevenrud@gmail.com>
* All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are met:
*
* 1. Redistributions of source code must retain the above copyright notice, this
* list of conditions and the following disclaimer.
* 2. Redistributions in binary form must reproduce the above copyright notice,
* this list of conditions and the following disclaimer in the documentation
* and/or other materials provided with the distribution.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
* ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
* WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
* DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
* ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
* (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
* LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
* ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
* SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*
* @author Anders Evenrud <andersevenrud@gmail.com>
* @licence Simplified BSD License
*/
/**
* ===========================================================================
* CLASSES
* ===========================================================================
*/
.gui-has-emblem {
background-repeat: no-repeat;
background-position: calc(96%) center;
padding-right: calc(20px);
}
.gui-generic-container {
padding: 4px;
color: #656565;
}
.gui-generic-zebra-container {
background-color: #ffffff;
}
.gui-generic-zebra-container > * {
padding: 4px;
}
.gui-generic-zebra-container > *:nth-child(even) {
background: rgba(254, 254, 254, 0.5);
}
.gui-generic-hoverable:hover {
background-color: #33a550;
}
.gui-generic-padded {
padding: 4px;
}
.gui-generic-double-padded {
padding: calc(8px);
}
.gui-generic-margin {
margin: 4px;
}
/**
* ===========================================================================
* OVERRIDES
* ===========================================================================
*/
body,
input,
button,
textarea,
label,
select {
font-family: Karla, Sans-serif;
font-weight: normal;
font-style: normal;
font-size: 12px;
color: #656565;
}
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-button {
background: #c3c3c3;
color: #d9d9d9;
width: 12px;
height: 12px;
display: none;
}
::-webkit-scrollbar-track {
background: #fefefe;
}
::-webkit-scrollbar-track-piece {
background: #fefefe;
}
::-webkit-scrollbar-thumb {
background: #c3c3c3;
}
::-webkit-scrollbar-corner {
background: #fefefe;
}
::-webkit-resizer {
background: #fefefe;
}
/**
* ===========================================================================
* WM
* ===========================================================================
*/
body[data-attention="true"]:after {
background-color: #656565;
}
corewm-panel {
color: #ffffff;
/* Window Manager manages this */
font-size: 0;
padding: 4px;
}
corewm-panel:before {
background: #101010;
/* Window Manager manages this */
box-shadow: 0px 0px 10px 1px rgba(34, 34, 34, 0.3);
opacity: .85;
}
corewm-panel-container {
padding: 8px;
}
corewm-panel[data-orientation="horizontal"] corewm-panel-container {
width: calc(100% - 8px);
}
corewm-panel[data-orientation="vertical"] corewm-panel-container {
height: calc(100% - 8px);
}
corewm-panel corewm-panel-item .corewm-panel-buttons > li {
cursor: pointer;
font-size: 12px;
}
corewm-panel[data-orientation="horizontal"] corewm-panel-item .corewm-panel-buttons > li {
margin-right: 4px;
margin-left: 4px;
}
corewm-panel[data-orientation="vertical"] corewm-panel-item .corewm-panel-buttons > li {
margin-top: 4px;
margin-bottom: 4px;
}
corewm-panel .PanelItemClock {
font-family: Monospace, Courier New;
font-weight: normal;
text-align: right;
}
corewm-panel .PanelItemWindowList li {
opacity: .50;
}
corewm-panel .PanelItemWindowList li.Focused {
opacity: 1;
}
corewm-panel .PanelItemWindowList li img {
margin-right: 4px;
}
html[dir="rtl"] corewm-panel .PanelItemWindowList li img {
margin-right: 0;
margin-left: 4px;
}
/* Notifications */
application-splash {
box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.6);
background: #fefefe;
box-shadow: 0px 0px 10px 1px rgba(34, 34, 34, 0.3);
opacity: .85;
cursor: pointer;
}
.custom-notification {
color: #fff;
/* Window Manager manages this */
}
corewm-notifications {
top: 10px;
right: 10px;
}
corewm-notification {
color: #fff;
/* Window Manager manages this */
cursor: pointer;
padding: 8px;
margin-bottom: 4px;
}
.custom-notification:before,
corewm-notification:before {
content: '';
background: #101010;
/* Window Manager manages this */
box-shadow: 0px 0px 10px 1px rgba(34, 34, 34, 0.3);
opacity: .85;
}
.custom-notification .Title,
corewm-notification .Title {
font-weight: bold;
}
.custom-notification .Title,
.custom-notification .Message,
corewm-notification .Title,
corewm-notification .Message {
line-height: 16px;
}
/* Desktop drop wallpaper effect */
#Background.Blinking {
background: #fff;
}
/* Window Switcher */
corewm-window-switcher {
box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.6);
background: #fefefe;
}
corewm-window-switcher > div.Active {
background: #33a550;
}
corewm-window-switcher > div.Active > span {
color: #ffffff;
}
corewm-search {
padding: 4px;
min-width: 200px;
max-width: 40%;
right: 10px;
top: 10px;
}
corewm-search > div {
margin-top: 4px;
}
corewm-search > ul {
margin-top: 4px;
cursor: pointer;
}
corewm-search > ul > li {
padding: 4px;
padding-left: 24px;
}
corewm-search > ul > li > img {
top: 4px;
left: 4px;
}
corewm-search > ul > .active,
corewm-search > ul > li:hover {
background: #fff;
color: #000;
}
/**
* ===========================================================================
* WINDOW
* ===========================================================================
*/
application-window {
opacity: 0.8;
margin-top: 30px;
}
application-window:before {
box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.3);
background: #fefefe;
top: calc(-35px);
left: -5px;
right: -5px;
bottom: -5px;
}
application-window[data-focused="true"] {
opacity: 1.0;
}
application-window[data-focused="true"]:before {
box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.6);
}
application-window[data-dnd-state="true"]:after {
top: -30px;
}
application-window-top {
top: -30px;
height: 30px;
}
application-window-top application-window-icon {
width: 30px;
}
/* application-window-content {overflow : hidden;}*/
application-window-top:active {
cursor: move;
cursor: pointer;
}
application-window-title {
font-weight: bold;
color: #656565;
opacity: .5;
left: 24px;
line-height: 30px;
text-align: center;
}
application-window-title:active {
cursor: move;
cursor: pointer;
}
application-window[data-focused="true"] application-window-title {
opacity: 1;
}
.application-window-button-entry {
width: 22px;
text-align: center;
cursor: pointer;
}
application-window-resize {
cursor: move;
}
application-window-top,
application-window-top > * {
cursor: default;
}
application-window-loading {
background: #000;
opacity: 0.8;
}
application-window-loading-indicator {
position: absolute;
width: 48px;
height: 48px;
left: 50%;
top: 50%;
margin-left: -24px;
margin-top: -24px;
}
application-window-loading-indicator:before {
display: block;
content: '';
width: 44px;
height: 44px;
border-top: 4px solid #fff;
border-right: 4px solid #666;
border-left: 4px solid #666;
border-bottom: 4px solid #fff;
border-radius: 100%;
-webkit-animation: windowloadinganim 0.75s linear infinite;
-moz-animation: windowloadinganim 0.75s linear infinite;
-ms-animation: windowloadinganim 0.75s linear infinite;
animation: windowloadinganim 0.75s linear infinite;
}
application-window[data-dnd-state="true"]:after {
border: 4px solid rgba(0, 0, 0, 0.7);
border-radius: 1px;
-webkit-border-top-left-radius: 3px;
-moz-border-top-left-radius: 3px;
border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-top-right-radius: 3px;
border-top-right-radius: 3px;
margin: -4px;
}
application-window-disabled {
background: #000;
opacity: 0.5;
cursor: not-allowed;
}
application-window-warning {
background: #FFB800;
color: #fff;
border-color: #DF9F15;
height: 30px;
line-height: 20px;
margin: 4px;
border: 1px solid transparent;
}
application-window-warning > div:nth-child(1) {
padding: 4px;
}
application-window-warning > div:nth-child(2) {
right: 20px;
padding: 4px;
}
application-window-warning > div:nth-child(1):hover {
color: #111;
cursor: pointer;
opacity: .9;
}
application-window-resize {
top: -38px;
left: -8px;
right: -8px;
bottom: -8px;
}
/**
* ===========================================================================
* CONTAINERS
* ===========================================================================
*/
/* Container */
gui-container {
margin: 4px;
}
gui-container[data-borders="true"] {
cursor: pointer;
padding: 4px;
background-color: #ffffff;
border: 1px solid #c3c3c3;
}
/* Box */
gui-hbox-container > .gui-element,
gui-vbox-container > .gui-element {
margin: 4px;
}
gui-hbox-container[data-fill='true'] > *,
gui-vbox-container[data-fill='true'] > * {
width: calc(100% - 8px);
height: calc(100% - 8px);
}
gui-hbox-container > .perc-100 {
height: calc(100% - 8px);
}
gui-vbox-container > .perc-100 {
width: calc(100% - 8px);
}
gui-hbox-container > .perc-90 {
height: calc(90% - 8px);
}
gui-vbox-container > .perc-90 {
width: calc(90% - 8px);
}
gui-hbox-container > .perc-80 {
height: calc(80% - 8px);
}
gui-vbox-container > .perc-80 {
width: calc(80% - 8px);
}
gui-hbox-container > .perc-70 {
height: calc(70% - 8px);
}
gui-vbox-container > .perc-70 {
width: calc(70% - 8px);
}
gui-hbox-container > .perc-60 {
height: calc(60% - 8px);
}
gui-vbox-container > .perc-60 {
width: calc(60% - 8px);
}
gui-hbox-container > .perc-50 {
height: calc(50% - 8px);
}
gui-vbox-container > .perc-50 {
width: calc(50% - 8px);
}
gui-hbox-container > .perc-40 {
height: calc(40% - 8px);
}
gui-vbox-container > .perc-40 {
width: calc(40% - 8px);
}
gui-hbox-container > .perc-30 {
height: calc(30% - 8px);
}
gui-vbox-container > .perc-30 {
width: calc(30% - 8px);
}
gui-hbox-container > .perc-20 {
height: calc(20% - 8px);
}
gui-vbox-container > .perc-20 {
width: calc(20% - 8px);
}
gui-hbox-container > .perc-10 {
height: calc(10% - 8px);
}
gui-vbox-container > .perc-10 {
width: calc(10% - 8px);
}
/* Paned View */
gui-paned-view > gui-paned-view-handle {
min-width: 8px;
width: 8px;
cursor: ew-resize;
}
gui-paned-view[data-orientation='vertical'] > gui-paned-view-handle {
min-width: auto;
width: auto;
min-height: 8px;
height: 8px;
cursor: ns-resize;
}
/* IFrame */
gui-iframe {
background-color: #ffffff;
}
gui-iframe > iframe {
background-color: #ffffff;
}
/* Button Bar */
/* Toolbar */
gui-toolbar > *,
gui-button-bar > *,
gui-toolbar > gui-expander > *,
gui-button-bar > gui-expander > * {
margin: 4px;
}
gui-toolbar > gui-expander,
gui-button-bar > gui-expander {
margin: 0;
}
gui-toolbar[data-orientation="vertical"] {
margin-left: 0;
margin-right: 0;
margin-top: 4px;
margin-bottom: 4px;
}
/* Expander */
gui-expander {
font-size: 12px;
}
gui-expander-label {
cursor: pointer;
padding: 4px;
background-color: #d9d9d9;
margin-bottom: 4px;
}
gui-expander-label:before {
content: '▼';
font-family: sans-serif;
padding-right: 4px;
}
gui-expander[data-expanded="false"] > gui-expander-label:before {
content: '►';
}
/* Tabs */
gui-tabs > ul {
height: 25px;
}
gui-tabs > ul > li {
padding-left: 8px;
padding-right: 8px;
cursor: pointer;
background-color: #d9d9d9;
border: 1px solid transparent;
border-bottom: 0 none;
line-height: 25px;
}
gui-tabs > ul > li.gui-active {
background-color: transparent;
border-color: #c3c3c3;
}
gui-tabs > ul > li.gui-active:after {
bottom: -1px;
border-bottom: 1px solid #fefefe;
}
gui-tabs > gui-tab-container {
height: calc(100% - 25px);
border: 1px solid #c3c3c3;
padding: 4px;
}
/* Button Bar */
/**
* ===========================================================================
* INPUTS
* ===========================================================================
*/
/* Label */
gui-label {
height: 26px;
line-height: 26px;
}
gui-hbox-container > gui-label,
gui-vbox-container > gui-label {
height: 16px;
line-height: 16px;
min-height: 16px;
}
/* Button */
gui-button {
height: 26px;
}
gui-button[data-icon-size="32"] {
height: 42px;
}
gui-button button {
cursor: pointer;
padding: 4px;
background-color: #f8f8f8;
background: linear-gradient(to bottom, #f8f8f8 0%, #f4f4f4 100%);
border: 1px solid #c3c3c3;
color: #656565;
}
gui-button button:focus {
outline: 0 none transparent;
}
gui-button button.gui-active,
gui-button button:active {
border-color: #242424;
color: #656565;
background-color: #f8f8f8;
background: linear-gradient(to bottom, #f8f8f8 0%, #f4f4f4 100%);
}
gui-button button.gui-active:disabled,
gui-button button:disabled:active,
gui-button button:disabled {
border-color: #cccccc;
color: #656565;
background-color: #dddddd;
background: #dddddd;
}
gui-button button:disabled img {
opacity: .5;
}
gui-button button:disabled {
cursor: default;
color: #C7C7C7;
}
gui-button button.gui-has-image img {
padding-right: 4px;
}
gui-button.gui-has-image.gui-has-label button {
padding-left: 28px;
}
gui-button[data-icon-size="32"].gui-has-image.gui-has-label button {
padding-left: 44px;
}
/* Checkbox Button */
/* Radio Button */
gui-radio,
gui-checkbox {
height: 26px;
}
gui-radio input,
gui-checkbox input {
text-align: center;
background: #ffffff;
border: 1px solid #c3c3c3;
width: 16px;
height: 16px;
line-height: 12px;
color: #656565;
font-family: Arial;
}
gui-radio input:focus,
gui-checkbox input:focus {
outline: 0 none transparent;
}
gui-radio input {
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
-ms-border-radius: 16px;
border-radius: 16px;
}
gui-radio input:checked:after {
content: "\2022";
font-size: 32px;
}
gui-checkbox input:checked:after {
content: "\2713";
font-size: 12px;
}
gui-radio[data-disabled="true"] label,
gui-checkbox[data-disabled="true"] label {
color: #C7C7C7;
}
gui-radio input:disabled,
gui-checkbox input:disabled {
border-color: #cccccc;
background-color: #dddddd;
}
gui-radio > label,
gui-checkbox > label {
line-height: 26px;
}
gui-radio > label > span,
gui-checkbox > label > span {
padding-left: 4px;
}
/* Select Dropdown */
gui-select {
height: 26px;
}
gui-select select {
cursor: pointer;
padding: 4px;
background-color: #ffffff;
border: 1px solid #c3c3c3;
padding-right: 20px;
}
gui-select select:disabled {
border-color: #cccccc;
background-color: #dddddd;
color: #C7C7C7;
}
gui-select select:focus {
outline: 0 none transparent;
}
gui-select:before {
right: 1px;
top: 1px;
bottom: 1px;
width: 22px;
background: #ffffff;
}
gui-select:after {
content: '<>';
font: 11px "Consolas", monospace;
color: #c3c3c3;
right: 2px;
top: 5px;
padding: 0 0 2px;
border-bottom: 1px solid #c3c3c3;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
gui-select[data-disabled="true"]:before {
background-color: #dddddd;
}
/* Select List */
gui-select-list select {
cursor: pointer;
padding: 4px;
background-color: #ffffff;
border: 1px solid #c3c3c3;
}
gui-select-list select:focus {
outline: 0 none transparent;
}
gui-select-list select:disabled {
border-color: #cccccc;
background-color: #dddddd;
color: #C7C7C7;
}
/* Slider */
gui-slider {
height: 26px;
}
gui-slider input {
background: transparent;
border: 0 none;
height: 26px;
}
/*
* RANGE TRACK
*/
gui-slider input::-moz-range-track {
height: 4px;
background-color: #d9d9d9;
}
gui-slider input::-webkit-slider-runnable-track {
height: 4px;
background-color: #d9d9d9;
}
gui-slider input::-ms-track {
height: 4px;
background-color: #d9d9d9;
}
/*
* RANGE THUMB
*/
gui-slider input::-moz-range-thumb {
cursor: pointer;
padding: 4px;
background-color: #f8f8f8;
background: linear-gradient(to bottom, #f8f8f8 0%, #f4f4f4 100%);
border: 1px solid #c3c3c3;
color: #656565;
height: 18px;
width: 10px;
}
gui-slider input:disabled::-moz-range-thumb {
border-color: #cccccc;
color: #656565;
background-color: #dddddd;
background: #dddddd;
}
gui-slider input::-webkit-slider-thumb {
cursor: pointer;
padding: 4px;
background-color: #f8f8f8;
background: linear-gradient(to bottom, #f8f8f8 0%, #f4f4f4 100%);
border: 1px solid #c3c3c3;
color: #656565;
height: 24px;
width: 16px;
margin-top: -10px;
}
gui-slider input:disabled::-webkit-range-thumb {
border-color: #cccccc;
color: #656565;
background-color: #dddddd;
background: #dddddd;
}
gui-slider input::-ms-thumb {
cursor: pointer;
padding: 4px;
background-color: #f8f8f8;
background: linear-gradient(to bottom, #f8f8f8 0%, #f4f4f4 100%);
border: 1px solid #c3c3c3;
color: #656565;
height: 24px;
width: 16px;
}
gui-slider input:disabled::-ms-thumb {
border-color: #cccccc;
color: #656565;
background-color: #dddddd;
background: #dddddd;
}
/**
* MISC
*/
gui-slider input[type=range]::-ms-fill-lower {
border: 0 none;
background-color: #d9d9d9;
}
gui-slider input[type=range]::-ms-fill-upper {
border: 0 none;
background-color: #d9d9d9;
}
gui-slider input[type=range]:focus::-ms-fill-lower {
background-color: #d9d9d9;
}
gui-slider input[type=range]:focus::-ms-fill-upper {
background-color: #d9d9d9;
}
/* Switch */
gui-switch {
height: 26px;
}
gui-switch div {
width: 48px;
padding: 4px;
background-color: #ffffff;
border: 1px solid #c3c3c3;
cursor: pointer;
padding: 0;
}
gui-switch button {
cursor: pointer;
padding: 4px;
background-color: #f8f8f8;
background: linear-gradient(to bottom, #f8f8f8 0%, #f4f4f4 100%);
border: 1px solid #c3c3c3;
color: #656565;
}
gui-switch button:focus {
outline: 0 none transparent;
}
gui-switch > label > div {
margin-left: 4px;
}
gui-switch[data-disabled="true"] button {
border-color: #cccccc;
color: #656565;
background-color: #dddddd;
background: #dddddd;
}
gui-switch[data-disabled="true"] div {
border-color: #cccccc;
background-color: #dddddd;
color: #C7C7C7;
padding: 0;
}
gui-switch[data-disabled="true"] button,
gui-switch[data-disabled="true"] label {
color: #C7C7C7;
}
/* Text Field */
/* Password Field */
gui-password,
gui-text {
height: 26px;
}
gui-password input,
gui-text input {
cursor: pointer;
padding: 4px;
background-color: #ffffff;
border: 1px solid #c3c3c3;
padding-left: 8px;
padding-right: 8px;
}
gui-password > label > input,
gui-text > label > input {
margin-left: 4px;
}
gui-password input:disabled,
gui-text input:disabled {
border-color: #cccccc;
background-color: #dddddd;
color: #C7C7C7;
}
gui-password input:focus,
gui-text input:focus {
outline: 0 none transparent;
}
gui-password[data-disabled="true"] label,
gui-text[data-disabled="true"] label {
color: #C7C7C7;
}
/* Text Area */
gui-textarea textarea {
cursor: pointer;
padding: 4px;
background-color: #ffffff;
border: 1px solid #c3c3c3;
}
gui-textarea textarea:focus {
outline: 0 none transparent;
}
gui-textarea textarea:disabled {
border-color: #cccccc;
background-color: #dddddd;
color: #C7C7C7;
}
gui-textarea[data-disabled="true"] label {
color: #C7C7C7;
}
/* Rich Text */
gui-richtext {
padding: 4px;
background-color: #ffffff;
border: 1px solid #c3c3c3;
}
gui-richtext > iframe {
background-color: #ffffff;
}
/* Grid */
gui-grid > gui-grid-row > gui-grid-entry {
/* li */
margin: 4px;
}
/* Modal Input */
gui-input-modal input {
cursor: pointer;
padding: 4px;
background-color: #ffffff;
border: 1px solid #c3c3c3;
border-color: #cccccc;
background-color: #dddddd;
color: #C7C7C7;
}
gui-input-modal button {
margin-left: 4px;
cursor: pointer;
padding: 4px;
background-color: #f8f8f8;
background: linear-gradient(to bottom, #f8f8f8 0%, #f4f4f4 100%);
border: 1px solid #c3c3c3;
color: #656565;
padding-left: 8px;
padding-right: 8px;
}
gui-input-modal button:focus {
outline: 0 none transparent;
}
/**
* ===========================================================================
* MISC
* ===========================================================================
*/
/* Video */
/* Color Swatch */
gui-color-swatch {
border: 1px solid #c3c3c3;
}
/* Color Box */
gui-color-box {
cursor: pointer;
padding: 4px;
background-color: #f8f8f8;
background: linear-gradient(to bottom, #f8f8f8 0%, #f4f4f4 100%);
border: 1px solid #c3c3c3;
color: #656565;
}
gui-color-box > div {
background: #fff;
}
/* Menu */
gui-menu {
border: 1px solid transparent;
background: #fefefe;
box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.6);
color: #656565;
}
gui-menu > gui-menu-entry {
color: #656565;
}
gui-menu > gui-menu-entry > label {
cursor: pointer;
line-height: 18px;
padding: 4px;
}
gui-menu > gui-menu-entry.gui-menu-expand {
padding-right: 16px;
}
html[dir="rtl"] gui-menu > gui-menu-entry.gui-menu-expand {
padding-right: 0;
}
html[dir="rtl"] gui-menu > gui-menu-entry[data-icon] {
padding-right: 16px;
}
gui-menu > gui-menu-entry.gui-menu-expand:after {
content: '►';
font-family: sans-serif;
line-height: 18px;
padding: 4px;
}
gui-menu > gui-menu-entry.gui-hover,
gui-menu > gui-menu-entry:hover {
background-color: #33a550;
}
gui-menu > gui-menu-entry.gui-hover > label,
gui-menu > gui-menu-entry:hover > label {
color: #ffffff;
}
gui-menu > gui-menu-entry {
background-position: 4px center;
}
html[dir="rtl"] gui-menu > gui-menu-entry {
background-position: right 4px center;
}
gui-menu > gui-menu-entry > label.gui-has-image {
padding-left: 22px;
}
gui-menu > gui-menu-entry[data-disabled="true"],
gui-menu > gui-menu-entry[data-disabled="true"] > label {
color: #C7C7C7;
}
/* Menu Bar */
gui-menu-bar {
padding-left: 4px;
padding-right: 4px;
}
gui-menu-bar-entry {
cursor: pointer;
padding: 4px;
}
gui-menu-bar-entry:hover {
background: #33a550;
color: #ffffff;
}
gui-menu-bar-entry[data-disabled="true"] > span {
color: #C7C7C7;
}
/* Progressbar */
gui-progress-bar {
display: block;
height: 26px;
}
gui-progress-bar:before {
background-color: #d9d9d9;
border: 1px solid #c3c3c3;
padding: 4px;
}
gui-progress-bar > div {
background: #33a550 url('/themes/styles/glass/gui/progressbar.png') repeat-x center;
}
gui-progress-bar > span {
color: #fff;
}
/* Statusbar */
gui-statusbar {
margin: 4px;
padding-bottom: 4px;
}
/**
* ===========================================================================
* VIEWS
* ===========================================================================
*/
/* Icon View */
gui-icon-view {
background-color: #ffffff;
border: 1px solid #c3c3c3;
padding: 4px;
}
gui-icon-view.gui-element-focused {
outline: 0 none transparent;
}
gui-icon-view-entry {
cursor: pointer;
margin: 2px;
padding: 2px;
text-align: center;
min-width: 60px !important;
min-height: 60px !important;
}
gui-icon-view-entry.gui-active {
background: rgba(51, 165, 80, 0.8);
color: #ffffff;
}
gui-icon-view-entry.gui-active > div > span {
background: rgba(51, 165, 80, 0.8);
}
gui-icon-view.gui-element-focused gui-icon-view-entry.gui-active {
background: #33a550;
}
gui-icon-view.gui-element-focused gui-icon-view-entry.gui-active > div > span {
background: #33a550;
}
/* List View */
gui-list-view {
background-color: #ffffff;
border: 1px solid #c3c3c3;
}
gui-list-view.gui-element-focused {
outline: 0 none transparent;
}
gui-list-view-head {
background-color: #d9d9d9;
}
gui-list-view[data-zebra="true"] gui-list-view-body gui-list-view-row:nth-child(2n) {
background-color: #F9F9F9;
color: inherit;
}
gui-list-view-column {
padding: 4px;
}
gui-list-view-column.gui-has-image {
padding-left: 24px;
background-position: 4px;
}
html[dir="rtl"] gui-list-view gui-list-view-column.gui-has-image {
padding-left: 0;
padding-right: 24px;
background-position: right 4px center;
}
gui-list-view[data-icon-size="32"] gui-list-view-column.gui-has-image {
padding-left: 40px;
}
html[dir="rtl"] gui-list-view[data-icon-size="32"] gui-list-view-column.gui-has-image {
padding-left: 0;
padding-right: 40px;
}
gui-list-view-row.gui-active {
background-color: rgba(51, 165, 80, 0.8);
color: #ffffff;
}
gui-list-view.gui-element-focused gui-list-view-row.gui-active {
background-color: #33a550;
}
gui-list-view-column-resizer {
cursor: ew-resize;
width: 3px;
right: 0px;
}
gui-list-view-column-resizer:after {
background: #c3c3c3;
}
/* Tree View */
gui-tree-view {
background-color: #ffffff;
border: 1px solid #c3c3c3;
}
gui-tree-view.gui-element-focused {
outline: 0 none transparent;
}
gui-tree-view-entry.dnd-over > div {
font-weight: bold;
text-decoration: underline;
}
gui-tree-view-entry > div {
padding: 4px;
}
gui-tree-view-entry > div > span {
cursor: pointer;
padding: 2px;
}
gui-tree-view-entry > div > span.gui-has-image {
padding-left: 20px;
}
gui-tree-view-entry > gui-tree-view-entry {
margin-left: 16px;
}
gui-tree-view-entry > gui-tree-view-entry.gui-expandable {
margin-left: 2px;
}
gui-tree-view-entry.gui-active > div {
background-color: rgba(51, 165, 80, 0.8);
color: #ffffff;
}
gui-tree-view.gui-element-focused gui-tree-view-entry.gui-active > div {
background-color: #33a550;
}
gui-tree-view-entry.gui-expandable {
padding-left: 16px;
}
gui-tree-view-entry.gui-expandable gui-tree-view-expander {
padding-left: 4px;
cursor: pointer;
line-height: 24px;
}
gui-tree-view-entry.gui-expandable gui-tree-view-expander:before {
content: '\25BA';
font-family: Arial;
color: #c3c3c3;
}
gui-tree-view-entry.gui-expandable.gui-expanded > gui-tree-view-expander:before {
content: '\25BC';
}
application-window-top {
height: 25px;
}
application-window-title {
line-height: 25px;
}
.application-window-button-entry {
width: 20px;
}
application-window-content {
background: #fefefe;
}
application-window:before {
opacity: .7;
border: 1px solid #fefefe;
}
/* Max */
application-window-button-maximize,
application-window-button-maximize:hover,
application-window-button-maximize:active,
application-window[data-focused="true"] application-window-button-maximize,
application-window[data-focused="true"] application-window-button-maximize:hover,
application-window[data-focused="true"] application-window-button-maximize:active {
background: url('glass/wm/maximize.png') no-repeat center center;
}
/* Min */
application-window-button-minimize,
application-window-button-minimize:hover,
application-window-button-minimize:active,
application-window[data-focused="true"] application-window-button-minimize,
application-window[data-focused="true"] application-window-button-minimize:hover,
application-window[data-focused="true"] application-window-button-minimize:active {
background: url('glass/wm/minimize.png') no-repeat center 70%;
}
/* Close */
application-window-button-close,
application-window-button-close:hover,
application-window-button-close:active,
application-window[data-focused="true"] application-window-button-close,
application-window[data-focused="true"] application-window-button-close:hover,
application-window[data-focused="true"] application-window-button-close:active {
background: url('glass/wm/close.png') no-repeat center center;
}