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

1703 lines
38 KiB
CSS

@charset "UTF-8";
/*!
* OS.js - JavaScript Cloud/Web Desktop Platform
*
* Copyright (c) 2011-2015, 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
*/
html, body {
height : 100%;
overflow : hidden;
}
body {
margin : 0;
padding : 0;
background-color : #572a79;
}
body, input, button, textarea, label, select {
font-size : 12px;
font-family : Sans-serif, Arial;
}
#Login {
background : #fff;
width : 400px;
height : 230px;
padding : 20px;
position : absolute;
left : 50%;
top : 50%;
z-index : 9999;
margin-left : -200px;
margin-top : -155px;
border : 4px solid rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 0 5px 4px rgba(0,0,0,0.15);
-moz-box-shadow: 0 0 5px 4px rgba(0,0,0,0.15);
box-shadow: 0 0 5px 4px rgba(0,0,0,0.15);
box-sizing : border-box;
display : none;
}
#LoginForm > div {
margin-bottom : 20px;
}
#Login label {
display : block;
font-weight : bold;
height : 30px;
line-height : 30px;
}
#Login input[type=text],
#Login input[type=password] {
display : block;
width : 100%;
height : 24px;
padding : 4px;
line-height : 12px;
box-sizing : border-box;
}
#Login input[type=submit] {
height : 40px;
padding : 10px;
padding-left : 20px;
padding-right : 20px;
box-sizing : border-box;
background : rgba(0, 0, 0, .1);
border : 0 none;
cursor : pointer;
}
#Login .Submit {
text-align : right;
}
#LoadingScreen {
position : absolute;
width : 320px;
height : 182px;
top : 50%;
left : 50%;
margin-top : -91px;
margin-left : -160px;
z-index : 999;
}
#LoadingScreen span {
color : #fff;
font-family : sans-serif, Arial;
font-size : 30px;
display : block;
}
application-splash {
display : block;
position : absolute;
top : 50%;
left : 50%;
width : 300px;
height : 55px;
margin-left : -150px;
margin-top : -28px;
z-index : 99999998;
}
application-splash > img {
display : block;
position : absolute;
top : 5px;
left : 5px;
width : 16px;
height : 16px;
}
application-splash > span {
display : block;
position : absolute;
top : 5px;
left : 26px;
height : 16px;
line-height : 16px;
}
application-splash > gui-progress-bar {
position : absolute;
bottom : 5px;
left : 5px;
right : 5px;
}
#LoadingScreen application-splash {
position : absolute;
height : 30px;
width : auto;
top : auto;
left : 0;
right : 0;
bottom : -40px;
margin : 0;
background : #fff;
z-index : 99999999;
}
#LoadingScreen application-splash > span {
display : none;
}
#LoadingScreen application-splash > gui-progress-bar {
top : 5px;
left : 5px;
right : 5px;
bottom : 5px;
height : auto;
}
#LoadingScreen application-splash > gui-progress-bar:before {
border : 1px solid #ccc;
background : #ddd;
}
#LoadingScreen application-splash > gui-progress-bar > span {
display : none;
}
#LoadingScreen application-splash > gui-progress-bar > div {
background : rgb(87, 42, 121);
}
body[data-attention="true"]:after {
content : '';
display : block;
position : fixed;
top : 0;
left : 0;
right : 0;
bottom : 0;
z-index : 1;
}
#DebugNotice {
position : absolute;
bottom : 5px;
right : 5px;
font-size : 12px;
color : #fff;
text-shadow: 0 0 2px rgba(34, 34, 34, .5);
text-align : right;
line-height : 20px;
z-index : 2;
opacity : .7;
cursor : default;
}
#DebugNotice a {
color : #fff;
text-decoration : underline;
font-weight : normal;
cursor : pointer;
}
.application-window-button-entry,
application-window,
application-window-top,
application-window-content,
application-window-icon,
application-window-title,
application-window-loading,
application-window-disabled,
application-window-loading-indicator {
display : block;
}
application-window {
position : absolute;
top : 0;
left : 0;
overflow : visible;
}
application-window:before {
content : '';
position : absolute;
top : 0;
left : 0;
right : 0;
bottom : 0;
}
application-window-top {
position : absolute;
top : 0;
left : 0;
right : 0;
height : 20px;
z-index : 5;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
-o-flex-wrap: nowrap;
flex-wrap: nowrap;
}
application-window-top > * {
min-width : 16px;
min-height : 16px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex: 0 0 auto;
-moz-flex: 0 0 auto;
-ms-flex: 0 0 auto;
-o-flex: 0 0 auto;
flex: 0 0 auto;
}
application-window-icon {
text-align : center;
position : relative;
background-position : center center;
background-repeat : no-repeat;
background-size : 16px;
}
application-window-title {
height : 100%;
z-index : 1;
overflow : hidden;
white-space : nowrap;
line-height : 20px;
display : block;
-webkit-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
-webkit-flex: 1 1 auto;
-moz-flex: 1 1 auto;
-ms-flex: 1 1 auto;
-o-flex: 1 1 auto;
flex: 1 1 auto;
}
.application-window-button-entry {
padding : 0;
margin : 0;
height : 100%;
text-align : center;
display : inline-block;
position : relative;
display : none;
}
application-window[data-allow-maximize="true"] application-window-button-maximize {
display : block;
}
application-window[data-allow-minimize="true"] application-window-button-minimize {
display : block;
}
application-window[data-allow-close="true"] application-window-button-close {
display : block;
}
application-window-content {
position : absolute;
top : 0;
left : 0;
right : 0;
bottom : 0;
z-index : 1;
}
application-window-resize {
position : absolute;
top : 0;
left : 0;
right : 0;
bottom : 0;
z-index : -1;
}
application-window[data-allow-resize="false"] > application-window-resize {
display : none;
cursor : default !important;
}
application-window-resize-handle {
position : absolute;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
application-window-resize-handle[data-direction="n"] {
cursor : n-resize;
top : 0;
height : 30px;
left : 20px;
right : 20px;
}
application-window-resize-handle[data-direction="s"] {
cursor : s-resize;
bottom : 0;
height : 30px;
left : 20px;
right : 20px;
}
application-window-resize-handle[data-direction="w"] {
cursor : w-resize;
left : 0;
width : 30px;
top : 20px;
bottom : 20px;
}
application-window-resize-handle[data-direction="e"] {
cursor : e-resize;
right : 0;
width : 30px;
top : 20px;
bottom : 20px;
}
application-window-resize-handle[data-direction="sw"] {
cursor : sw-resize;
bottom : 0;
left : 0;
height : 30px;
width : 30px;
}
application-window-resize-handle[data-direction="se"] {
cursor : se-resize;
bottom : 0;
right : 0;
height : 30px;
width : 30px;
}
application-window-resize-handle[data-direction="nw"] {
cursor : nw-resize;
top : 0;
left : 0;
height : 30px;
width : 30px;
}
application-window-resize-handle[data-direction="ne"] {
cursor : ne-resize;
top : 0;
right : 0;
height : 30px;
width : 30px;
}
application-window-loading {
position : absolute;
top : 0;
left : 0;
right : 0;
bottom : 0;
z-index : 999999;
}
application-window-loading-indicator {
position : absolute;
left : 50%;
top : 50%;
}
application-window-disabled {
position : absolute;
top : 0;
left : 0;
right : 0;
bottom : 0;
z-index : 999998;
}
application-window[data-dnd-state="true"]:after {
content : '';
position : absolute;
top : 0;
left : 0;
bottom : 0;
right : 0;
}
application-window[data-hint="resizing"] iframe,
application-window[data-hint="moving"] iframe {
pointer-events: none;
}
application-window-warning {
position : absolute;
top : 0;
left : 0;
right : 0;
height : 30px;
line-height : 20px;
margin : 4px;
border : 1px solid transparent;
z-index : 99999;
box-sizing : border-box;
}
application-window-warning > div:nth-child(1) {
position : absolute;
top : 0;
right : 0;
bottom : 0;
padding : 4px;
box-sizing : border-box;
}
application-window-warning > div:nth-child(2) {
position : absolute;
top : 0;
left : 0;
right : 20px;
bottom : 0;
padding : 4px;
overflow : hidden;
box-sizing : border-box;
}
application-window.DialogWindow gui-label label {
white-space : inherit;
}
application-window.DialogWindow gui-button-bar gui-button {
min-width : 80px;
}
application-window.DialogWindow gui-label[data-id="Message"] span {
font-weight : bold;
}
.IFrameApplicationWindow application-window-content {
background : #000;
}
.IframeApplicationFrame {
box-sizing : border-box;
margin : 0;
padding : 0;
width : 100%;
height : 100%;
border : 0 none;
outline : 0 none;
position : absolute;
top : 0;
left : 0;
right : 0;
bottom : 0;
}
application-window[data-focused="false"] iframe {
pointer-events : none;
}
@media all and (max-width: 800px) {
body {
overflow : hidden;
}
application-window {
width : auto !important;
height : auto !important;
left : 0 !important;
right : 0 !important;
bottom : 0 !important;
top : 0 !important;
}
application-window-button-maximize,
application-window-button-minimize {
display : none !important;
}
application-window-content {
overflow : auto !important;
}
}
button, div, span, p, a, img, label, .gui-element, application-window {
cursor : default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.gui-bold > label,
.gui-bold {
font-weight : bold;
}
.gui-italic > label,
.gui-italic {
font-style : italic;
}
.gui-underline > label,
.gui-underline {
text-decoration : underline;
}
.gui-align-left {
text-align : left;
}
.gui-align-center {
text-align : center;
}
.gui-align-right {
text-align : right;
}
.gui-disable-events {
pointer-events : none;
}
.gui-no-overflow {
overflow : hidden;
}
.gui-has-emblem {
background-repeat : no-repeat;
background-position : right center;
}
.gui-focus-element {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
display : block;
outline : 0 none;
resize : none;
border : 0 none;
background : transparent;
color : transparent;
position : absolute;
margin : 0;
padding : 0;
left : 0;
bottom : 0;
top : 0;
right : 0;
width : 100%;
height : 100%;
z-index : 1;
overflow : hidden;
box-sizing : border-box;
}
.gui-flex-align-start {
-webkit-box-align: start;
-moz-box-align: start;
-ms-box-align: start;
-o-box-align: start;
box-align: start;
-webkit-align-self: flex-start;
-moz-align-self: flex-start;
-ms-align-self: flex-start;
-o-align-self: flex-start;
align-self: flex-start;
}
.gui-flex-align-end {
-webkit-box-align: end;
-moz-box-align: end;
-ms-box-align: end;
-o-box-align: end;
box-align: end;
-webkit-align-self: flex-end;
-moz-align-self: flex-end;
-ms-align-self: flex-end;
-o-align-self: flex-end;
align-self: flex-end;
}
.gui-flex-align-center {
-webkit-box-align: center;
-moz-box-align: center;
-ms-box-align: center;
-o-box-align: center;
box-align: center;
-webkit-align-self: center;
-moz-align-self: center;
-ms-align-self: center;
-o-align-self: center;
align-self: center;
}
.gui-flex {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-ms-box-orient: horizontal;
-o-box-orient: horizontal;
box-orient: horizontal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
}
.gui-flex > * {
display : block;
}
.gui-flex-normal {
-webkit-box-flex: 0 0 auto;
-moz-box-flex: 0 0 auto;
-ms-box-flex: 0 0 auto;
-o-box-flex: 0 0 auto;
-webkit-flex: 0 0 auto;
-moz-flex: 0 0 auto;
-ms-flex: 0 0 auto;
-o-flex: 0 0 auto;
flex: 0 0 auto;
}
.gui-flex-grow-shrink {
-webkit-box-flex: 1 1 auto;
-moz-box-flex: 1 1 auto;
-ms-box-flex: 1 1 auto;
-o-box-flex: 1 1 auto;
-webkit-flex: 1 1 auto;
-moz-flex: 1 1 auto;
-ms-flex: 1 1 auto;
-o-flex: 1 1 auto;
flex: 1 1 auto;
}
.gui-flex-grow {
-webkit-box-flex: 1 0 auto;
-moz-box-flex: 1 0 auto;
-ms-box-flex: 1 0 auto;
-o-box-flex: 1 0 auto;
-webkit-flex: 1 0 auto;
-moz-flex: 1 0 auto;
-ms-flex: 1 0 auto;
-o-flex: 1 0 auto;
flex: 1 0 auto;
}
.gui-flex-shrink {
-webkit-box-flex: 0 1 auto;
-moz-box-flex: 0 1 auto;
-ms-box-flex: 0 1 auto;
-o-box-flex: 0 1 auto;
-webkit-flex: 0 1 auto;
-moz-flex: 0 1 auto;
-ms-flex: 0 1 auto;
-o-flex: 0 1 auto;
flex: 0 1 auto;
}
gui-container {
display : block;
position : relative;
overflow : auto;
}
gui-hbox,
gui-vbox {
width : 100%;
height : 100%;
position : relative;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
gui-hbox {
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-ms-box-orient: horizontal;
-o-box-orient: horizontal;
box-orient: horizontal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
}
gui-vbox {
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-ms-box-orient: vertical;
-o-box-orient: vertical;
box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
}
gui-hbox-container {
height : 100%;
}
gui-hbox-container,
gui-vbox-container {
display : block;
position : relative;
-webkit-box-flex: 0 0 auto;
-moz-box-flex: 0 0 auto;
-ms-box-flex: 0 0 auto;
-o-box-flex: 0 0 auto;
-webkit-flex: 0 0 auto;
-moz-flex: 0 0 auto;
-ms-flex: 0 0 auto;
-o-flex: 0 0 auto;
flex: 0 0 auto;
}
gui-hbox-container[data-fill='true'],
gui-vbox-container[data-fill='true'] {
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-o-align-items: stretch;
align-items: stretch;
-webkit-align-content: stretch;
-moz-align-content: stretch;
-ms-align-content: stretch;
-o-align-content: stretch;
align-content: stretch;
}
gui-hbox-container[data-expand='true'] > *,
gui-vbox-container[data-expand='true'] > * {
display : block;
}
gui-hbox-container[data-fill='true'] > *,
gui-vbox-container[data-fill='true'] > * {
position : absolute;
top : 0;
left : 0;
bottom : 0;
right : 0;
}
gui-hbox-container[data-fill='true'] > gui-hbox,
gui-hbox-container[data-fill='true'] > gui-vbox,
gui-vbox-container[data-fill='true'] > gui-hbox,
gui-vbox-container[data-fill='true'] > gui-vbox {
width : 100%;
height : 100%;
}
gui-hbox-container[data-fill='true'] > gui-vbox,
gui-hbox-container[data-fill='true'] > gui-hbox,
gui-vbox-container[data-fill='true'] > gui-vbox,
gui-vbox-container[data-fill='true'] > gui-hbox {
top : 0;
left : 0;
right : 0;
bottom : 0;
}
gui-scroll-view {
display : block;
position : relative;
overflow : auto;
width : 100%;
height : 100%;
}
gui-paned-view {
position : relative;
overflow : hidden;
width : 100%;
height : 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-ms-box-orient: horizontal;
-o-box-orient: horizontal;
box-orient: horizontal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
}
gui-paned-view[data-orientation='vertical'] {
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-ms-box-orient: vertical;
-o-box-orient: vertical;
box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
}
gui-paned-view > * {
display : block;
position : relative;
-webkit-box-flex: 1 1 auto;
-moz-box-flex: 1 1 auto;
-ms-box-flex: 1 1 auto;
-o-box-flex: 1 1 auto;
-webkit-flex: 1 1 auto;
-moz-flex: 1 1 auto;
-ms-flex: 1 1 auto;
-o-flex: 1 1 auto;
flex: 1 1 auto;
}
gui-paned-view > gui-paned-view-container {
height : 100%;
overflow : hidden;
}
gui-paned-view > gui-paned-view-container > * {
height : 100%;
display : block;
}
gui-paned-view > gui-paned-view-container[data-fill='true'] > * {
position : absolute;
top : 0;
left : 0;
bottom : 0;
right : 0;
}
gui-paned-view > gui-paned-view-handle {
height : 100%;
-webkit-box-flex: 0 1 auto;
-moz-box-flex: 0 1 auto;
-ms-box-flex: 0 1 auto;
-o-box-flex: 0 1 auto;
-webkit-flex: 0 1 auto;
-moz-flex: 0 1 auto;
-ms-flex: 0 1 auto;
-o-flex: 0 1 auto;
flex: 0 1 auto;
}
gui-paned-view > gui-paned-view-container {
min-width : 16px;
min-height : auto;
}
gui-paned-view[data-orientation='vertical'] > gui-paned-view-container {
min-width : auto;
min-height : 16px;
}
gui-iframe {
display : inline-block;
position : relative;
min-width : 16px;
min-height : 16px;
}
gui-iframe > iframe {
display : block;
width : 100%;
height : 100%;
margin : 0;
padding : 0;
border : 0 none;
box-sizing : border-box;
}
gui-toolbar,
gui-button-bar {
display : block;
position : relative;
overflow : hidden;
font-size : 0;
min-width : 16px;
min-height : 16px;
}
gui-button-bar {
white-space: nowrap;
}
gui-toolbar[data-orientation="vertical"],
gui-button-bar[data-orientation="vertical"] {
width : 100%;
height : 100%;
}
gui-toolbar-separator {
display : inline-block;
}
gui-expander {
display : block;
position : relative;
}
gui-expander-label {
display : block !important;
position : relative;
}
gui-expander[data-expanded="false"] > * {
display : none;
}
gui-tabs {
display : block;
position : relative;
}
gui-tabs > ul {
display : block;
list-style-type : none;
margin : 0;
padding : 0;
white-space: nowrap;
}
gui-tabs > ul > li {
position : relative;
display : inline-block;
margin : 0;
padding : 0;
height : 100%;
}
gui-tabs > ul > li.gui-active:after {
content : '';
position : absolute;
left : 0;
right : 0;
bottom : 0;
z-index : 999999999;
}
gui-tabs > gui-tab-container {
overflow : hidden;
display : none;
position : relative;
}
gui-tab-container.gui-active {
display : block;
}
application-window-content > gui-tabs {
width : 100%;
height : 100%;
}
gui-grid {
position : relative;
display : block;
}
gui-grid > gui-grid-row {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-ms-box-orient: horizontal;
-o-box-orient: horizontal;
box-orient: horizontal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
justify-content: space-around;
}
gui-grid > gui-grid-row > gui-grid-entry {
margin: 5px;
-webkit-box-flex: 1 0 auto;
-moz-box-flex: 1 0 auto;
-ms-box-flex: 1 0 auto;
-o-box-flex: 1 0 auto;
-webkit-flex: 1 0 auto;
-moz-flex: 1 0 auto;
-ms-flex: 1 0 auto;
-o-flex: 1 0 auto;
flex: 1 0 auto;
height: auto;
position: relative;
}
gui-grid > gui-grid-row > gui-grid-entry > * {
position : absolute;
top : 0;
left : 0;
right : 0;
bottom : 0;
width : 100%;
height : 100%;
margin : 0;
box-sizing : border-box;
overflow : hidden;
}
gui-grid > gui-grid-row > gui-grid-entry > * > * {
height : 100%;
}
gui-grid > gui-grid-row > gui-grid-entry:before {
content:'';
float:left;
padding-top:100%;
}
gui-label {
display : inline-block;
position : relative;
}
gui-label > label {
display : inline;
white-space: nowrap;
}
gui-button {
position : relative;
display : inline-block;
box-sizing : content-box;
}
gui-button button {
display : block;
margin : 0;
padding : 0;
outline : 0 none;
white-space: nowrap;
min-width : 16px;
min-height : 16px;
width : 100%;
height : 100%;
}
gui-button button::-moz-focus-inner {
border : 0;
padding : 0;
}
gui-button[data-icon-size="32"] {
min-width : 32px;
min-height : 32px;
}
gui-button.gui-has-image img {
vertical-align : middle;
}
gui-button.gui-has-image.gui-has-label img {
position : absolute;
top : 50%;
margin-top : -8px;
left : 8px;
}
gui-button[data-icon-size="32"].gui-has-image.gui-has-label img {
margin-top : -16px;
}
gui-radio,
gui-checkbox {
display : inline-block;
position : relative;
}
gui-radio input,
gui-checkbox input {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
display: inline-block;
vertical-align : middle;
position: relative;
background: transparent;
border: 0 none;
margin : 0;
padding : 0;
overflow : hidden;
outline : none;
}
gui-radio input:checked:after {
display : inline;
vertical-align: middle;
}
gui-checkbox input:checked:after {
display : inline;
vertical-align: middle;
}
gui-radio > label > span,
gui-checkbox > label > span {
vertical-align : middle;
}
gui-radio {
display : inline-block;
position : relative;
}
gui-select {
display : inline-block;
position : relative;
}
gui-select select {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
display : block;
padding : 0;
margin : 0;
width : 100%;
height : 100%;
outline : none;
box-sizing : border-box;
}
gui-select:before {
content: '';
position: absolute;
z-index: 99;
pointer-events: none;
display: block;
}
gui-select:after {
position: absolute;
z-index: 100;
pointer-events: none;
}
gui-select-list {
display : inline-block;
position : relative;
min-height : 32px;
}
gui-select-list select {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
display : block;
padding : 0;
margin : 0;
width : 100%;
height : 100%;
outline : none;
box-sizing : border-box;
}
gui-slider {
display : inline-block;
position : relative;
}
gui-slider input {
display : inline-block;
position : relative;
width : 100%;
padding : 0;
margin : 0;
vertical-align : middle;
outline : 0 none;
box-sizing : border-box;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
gui-slider input::-moz-range-track {
-moz-appearance: none;
appearance: none;
background : transparent;
border : 0 none;
width : 100%;
box-sizing : border-box;
}
gui-slider input::-webkit-slider-runnable-track {
width : 100%;
border : 0 none;
box-sizing : border-box;
}
gui-slider input::-ms-track {
width: 100%;
border : 0 none;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
box-sizing : border-box;
}
gui-slider input::-moz-range-thumb {
-moz-appearance: none;
-moz-border-radius : 0;
border-radius : 0;
}
gui-slider input::-webkit-slider-thumb {
-webkit-appearance: none !important;
-webkit-border-radius : 0;
border-radius : 0;
}
gui-slider input::-ms-thumb {
-ms-appearance : none !important;
-ms-border-radius : 0;
border-radius : 0;
}
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;
}
gui-switch {
display : inline-block;
position : relative;
}
gui-switch div {
display : inline-block;
position : relative;
}
gui-switch button {
display : inline-block;
outline : 0 none;
margin : 0;
width : 50%;
box-sizing : border-box;
}
gui-switch button.gui-active {
margin-left : 50%;
}
gui-switch input {
display : none;
pointer-events : none;
}
gui-password,
gui-text {
display : inline-block;
position : relative;
}
gui-password input,
gui-text input {
display : block;
padding : 0;
margin : 0;
width : 100%;
height : 100%;
background : transparent;
border : 0 none;
outline : none;
box-sizing : border-box;
}
gui-password > label > input,
gui-text > label > input {
display : inline-block;
width : auto;
}
gui-textarea {
display : inline-block;
position : relative;
}
gui-textarea textarea {
display : block;
padding : 0;
margin : 0;
width : 100%;
height : 100%;
border : 0 none;
resize : none;
outline : none;
box-sizing : border-box;
}
gui-richtext {
display : inline-block;
position : relative;
min-height : 100px !important;
}
gui-richtext > iframe {
display : block;
width : 100%;
height : 100%;
margin : 0;
padding : 0;
border : 0 none;
box-sizing : border-box;
}
gui-file-upload {
display : inline-block;
position : relative;
}
gui-input-modal {
position : relative;
display : inline-block;
}
gui-input-modal > div {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
gui-input-modal input {
display : inline-block;
padding : 0;
margin : 0;
border : 0 none;
outline : none;
-webkit-box-flex: 1 0 auto;
-moz-box-flex: 1 0 auto;
-ms-box-flex: 1 0 auto;
-o-box-flex: 1 0 auto;
-webkit-flex: 1 0 auto;
-moz-flex: 1 0 auto;
-ms-flex: 1 0 auto;
-o-flex: 1 0 auto;
flex: 1 0 auto;
}
gui-input-modal button {
display : inline-block;
-webkit-box-flex: 0 1 auto;
-moz-box-flex: 0 1 auto;
-ms-box-flex: 0 1 auto;
-o-box-flex: 0 1 auto;
-webkit-flex: 0 1 auto;
-moz-flex: 0 1 auto;
-ms-flex: 0 1 auto;
-o-flex: 0 1 auto;
flex: 0 1 auto;
}
gui-audio {
display : inline-block;
position : relative;
}
gui-video {
display : inline-block;
position : relative;
min-width : 16px;
min-height : 16px;
}
gui-image {
display : inline-block;
position : relative;
}
gui-image > img {
border : 0 none;
outline : 0 none;
vertical-align : middle;
}
gui-canvas {
display : inline-block;
position : relative;
min-width : 16px;
min-height : 16px;
}
gui-color-swatch {
display : inline-block;
position : relative;
min-width : 100px !important;
min-height : 100px !important;
}
gui-color-swatch canvas {
width : 100%;
height : 100%;
display : block;
}
gui-color-box {
display : inline-block;
position : relative;
background-color : #fff;
}
gui-color-box[data-disabled="true"] {
cursor : default !important;
}
gui-color-box > div {
min-width : 16px;
min-height : 16px;
}
gui-menu {
display : inline-block;
position : relative;
}
gui-menu.gui-root-menu {
display : block;
position : absolute;
z-index : 99999999;
}
gui-menu > gui-menu-entry {
display : block;
position : relative;
white-space : nowrap;
}
gui-menu > gui-menu-entry[data-disabled="true"] {
pointer-events: none;
}
gui-menu > .gui-menu-expand:after {
position : absolute;
right : 0;
top : 0;
bottom : 0;
}
html[dir="rtl"] gui-menu > .gui-menu-expand:after {
right : auto;
left : 0;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
gui-menu > gui-menu-entry {
background-repeat : no-repeat;
background-position : left center;
background-size : 16px;
}
gui-menu > gui-menu-entry > label {
vertical-align : middle;
display : inline-block;
pointer-events : none;
}
gui-menu > gui-menu-entry > label > input {
margin : 0;
padding : 0;
vertical-align : middle;
margin-top : -2px;
padding-right : 2px;
pointer-events : none;
}
gui-menu > gui-menu-entry > gui-menu {
position : absolute;
z-index : 99999;
}
.gui-showing gui-menu-entry > gui-menu {
display : none;
}
gui-menu > .gui-hover > gui-menu,
gui-menu > gui-menu-entry:hover > gui-menu {
display : inline-block;
left : 100%;
top : 0;
}
.gui-overflowing > gui-menu-entry:hover > gui-menu {
left : auto;
top : 0;
}
gui-menu.gui-root-menu > gui-menu-entry:hover > gui-menu {
display : block;
}
gui-menu.gui-root-menu > gui-menu-entry[data-disabled="true"]:hover > gui-menu {
display : none;
}
gui-menu-bar {
position : relative;
display : block;
min-height : 16px;
}
gui-menu-bar-entry {
position : relative;
display : inline-block;
}
gui-menu-bar-entry > span {
pointer-events : none;
display : block;
}
gui-menu-bar-entry > gui-menu {
display : none;
position : absolute;
z-index : 99999;
}
gui-menu-bar-entry.gui-active > gui-menu {
display : inline-block;
top : 100%;
left : 0;
}
gui-progress-bar {
position : relative;
display : inline-block;
text-align : center;
overflow : hidden;
}
gui-progress-bar:before {
content : '';
position : absolute;
left : 0;
bottom : 0;
right : 0;
top : 0;
z-index : -1;
}
gui-progress-bar > div {
position : absolute;
left : 1px;
bottom : 1px;
top : 1px;
z-index : -1;
}
gui-progress-bar > span {
display : inline-block;
vertical-align : middle;
position : absolute;
top : 50%;
left : 0;
right : 0;
bottom : 0;
height : 16px;
margin-top : -8px;
}
gui-statusbar {
position : relative;
display : block;
min-height : 16px;
overflow : hidden;
white-space : nowrap;
-webkit-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
gui-statusbar-label {
display : inline-block;
vertical-align : middle;
}
gui-file-view {
position : relative;
display : inline-block;
}
gui-file-view > * {
display : block;
width : 100%;
height : 100%;
}
gui-icon-view {
position : relative;
display : inline-block;
overflow : auto;
min-width : 16px;
min-height : 16px;
}
gui-icon-view-body {
position : absolute;
top : 0;
left : 0;
right : 0;
bottom : 0;
z-index : 2;
}
gui-icon-view-entry {
float : left;
width : 34px;
width : 54px;
}
gui-icon-view-entry > div {
pointer-events: none;
position : relative;
}
gui-icon-view-entry > div > img {
pointer-events: none;
width : 32px;
height : 32px;
}
gui-icon-view-entry > div > span {
pointer-events: none;
position : absolute;
display : block;
left : -2px;
right : -2px;
top : 0;
padding : 2px;
z-index : 9999;
white-space : nowrap;
overflow: hidden;
-webkit-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
gui-icon-view-entry.gui-active > div > span {
pointer-events: none;
overflow: visible;
white-space : pre-wrap;
word-wrap : break-word;
text-overflow: inherit;
-o-text-overflow: inherit;
}
gui-list-view {
position : relative;
display : inline-block;
overflow : auto;
min-width : 16px;
min-height : 16px;
}
gui-list-view-inner {
display : table;
width : 100%;
z-index : 2;
position : relative;
table-layout : fixed;
border-collapse : collapse;
}
gui-list-view-body {
position : relative;
z-index : 2;
display : table-row-group;
width : 100%;
}
gui-list-view-head {
display : table-header-group;
width : 100%;
visibility : hidden;
pointer-events: none;
}
gui-list-view-row {
position : relative;
display : table-row;
width : 100%;
}
gui-list-view-column {
position : relative;
display : table-cell;
background-repeat : no-repeat;
background-position : left center;
background-size : 16px;
line-height : 16px;
}
gui-list-view[data-icon-size="32"] gui-list-view-column {
line-height : 32px;
background-size : 32px;
}
gui-list-view-column > span {
pointer-events: none;
white-space: nowrap;
display : block;
overflow : hidden;
-webkit-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
gui-list-view-fake-head {
position : absolute;
display : block;
top : 0;
}
gui-list-view-fake-head gui-list-view-head {
visibility : visible;
}
gui-list-view-column-resizer {
width : 1px;
position : absolute;
top : 0;
bottom : 0;
left : 0;
z-index : 999999999;
pointer-events: all;
}
gui-list-view-column-resizer:after {
content : '';
background : #b2b2b2;
position : absolute;
top : 0;
left : 1px;
width : 1px;
bottom : 0;
}
gui-tree-view {
position : relative;
display : inline-block;
overflow : auto;
min-width : 16px;
min-height : 16px;
}
gui-tree-view-body {
position : absolute;
top : 0;
left : 0;
right : 0;
bottom : 0;
z-index : 2;
}
gui-tree-view-entry {
display : block;
position : relative;
}
gui-tree-view-entry > div {
pointer-events: none;
}
gui-tree-view-entry > div > span {
pointer-events: none;
background-repeat : no-repeat;
background-position : left center;
display : inline-block;
vertical-align : middle;
-webkit-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
gui-tree-view-entry.gui-expandable {
padding-left : 16px;
}
gui-tree-view-entry.gui-expandable gui-tree-view-expander {
display : block;
position : absolute;
left : 0;
top : 0;
width : 16px;
height : 16px;
overflow : visible;
}
gui-toolbar > .gui-element {
vertical-align : middle;
}