153 lines
8.6 KiB
CSS
153 lines
8.6 KiB
CSS
|
|
|
|
/* ---- plugins/Sidebar/media/Scrollbable.css ---- */
|
|
|
|
|
|
.scrollable {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.scrollable.showScroll::after {
|
|
position: absolute;
|
|
content: '';
|
|
top: 5%;
|
|
right: 7px;
|
|
height: 90%;
|
|
width: 3px;
|
|
background: rgba(224, 224, 255, .3);
|
|
}
|
|
|
|
.scrollable .content-wrapper {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding-right: 50%;
|
|
overflow-y: scroll;
|
|
}
|
|
.scroller {
|
|
margin-top: 5px;
|
|
z-index: 5;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
width: 7px;
|
|
-webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px ;
|
|
background: #151515;
|
|
top: 0px;
|
|
left: 395px;
|
|
-webkit-transition: top .08s;
|
|
-moz-transition: top .08s;
|
|
-ms-transition: top .08s;
|
|
-o-transition: top .08s;
|
|
-webkit-transition: top .08s; -moz-transition: top .08s; -o-transition: top .08s; -ms-transition: top .08s; transition: top .08s ;
|
|
}
|
|
.scroller {
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
|
|
/* ---- plugins/Sidebar/media/Sidebar.css ---- */
|
|
|
|
|
|
.drag-bg { width: 100%; height: 100%; position: absolute; }
|
|
.fixbutton.dragging { cursor: -webkit-grabbing; }
|
|
.fixbutton-bg:active { cursor: -webkit-grabbing; }
|
|
|
|
|
|
.body-sidebar { background-color: #666 !important; }
|
|
#inner-iframe { -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; -ms-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out ; transform-origin: left; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden ; outline: 1px solid transparent }
|
|
.body-sidebar iframe { -webkit-transform: rotateY(5deg); -moz-transform: rotateY(5deg); -o-transform: rotateY(5deg); -ms-transform: rotateY(5deg); transform: rotateY(5deg) ; opacity: 0.8; pointer-events: none } /* translateX(-200px) scale(0.95)*/
|
|
|
|
/* SIDEBAR */
|
|
|
|
.sidebar-container { width: 100%; height: 100%; overflow: hidden; position: absolute; }
|
|
.sidebar { background-color: #212121; position: absolute; right: -1200px; height: 100%; width: 1200px; } /*box-shadow: inset 0px 0px 10px #000*/
|
|
.sidebar .content { margin: 30px; font-family: "Segoe UI Light", "Segoe UI", "Helvetica Neue"; color: white; width: 375px; height: 300px; font-weight: 200 }
|
|
.sidebar h1, .sidebar h2 { font-weight: lighter; }
|
|
.sidebar .button { margin: 0px; display: inline-block; }
|
|
|
|
|
|
/* FIELDS */
|
|
|
|
.sidebar .fields { padding: 0px; list-style-type: none; width: 355px; }
|
|
.sidebar .fields > li, .sidebar .fields .settings-owned > li { margin-bottom: 30px }
|
|
.sidebar .fields > li:after, .sidebar .fields .settings-owned > li:after { clear: both; content: ''; display: block }
|
|
.sidebar .fields label {
|
|
font-family: Consolas, monospace; text-transform: uppercase; font-size: 13px; color: #ACACAC; display: inline-block; margin-bottom: 10px;
|
|
vertical-align: text-bottom; margin-right: 10px;
|
|
}
|
|
.sidebar .fields label small { font-weight: normal; color: white; text-transform: none; }
|
|
.sidebar .fields .text { background-color: black; border: 0px; padding: 10px; color: white; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px ; width: 250px; font-family: Consolas, monospace; }
|
|
.sidebar .fields .text.long { width: 330px; font-size: 72%; }
|
|
.sidebar .fields .disabled { color: #AAA; background-color: #3B3B3B; }
|
|
.sidebar .fields .text-num { width: 30px; text-align: right; padding-right: 30px; }
|
|
.sidebar .fields .text-post { color: white; font-family: Consolas, monospace; display: inline-block; font-size: 13px; margin-left: -25px; width: 25px; }
|
|
|
|
/* Select */
|
|
.sidebar .fields select {
|
|
width: 225px; background-color: #3B3B3B; color: white; font-family: Consolas, monospace; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; -ms-appearance: none; appearance: none ;
|
|
padding: 5px; padding-right: 25px; border: 0px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px ; height: 35px; vertical-align: 1px; -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.5); -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.5); -o-box-shadow: 0px 1px 2px rgba(0,0,0,0.5); -ms-box-shadow: 0px 1px 2px rgba(0,0,0,0.5); box-shadow: 0px 1px 2px rgba(0,0,0,0.5) ;
|
|
}
|
|
.sidebar .fields .select-down { margin-left: -39px; width: 34px; display: inline-block; -webkit-transform: rotateZ(90deg); -moz-transform: rotateZ(90deg); -o-transform: rotateZ(90deg); -ms-transform: rotateZ(90deg); transform: rotateZ(90deg) ; height: 35px; vertical-align: -8px; pointer-events: none; font-weight: bold }
|
|
|
|
/* Checkbox */
|
|
.sidebar .fields .checkbox { width: 50px; height: 24px; position: relative; z-index: 999; opacity: 0; }
|
|
.sidebar .fields .checkbox-skin { background-color: #CCC; width: 50px; height: 24px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -o-border-radius: 15px; -ms-border-radius: 15px; border-radius: 15px ; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out ; display: inline-block; margin-left: -59px; }
|
|
.sidebar .fields .checkbox-skin:before {
|
|
content: ""; position: relative; width: 20px; background-color: white; height: 20px; display: block; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; -ms-border-radius: 100%; border-radius: 100% ; margin-top: 2px; margin-left: 2px;
|
|
-webkit-transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86); -moz-transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86); -o-transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86); -ms-transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) ;
|
|
}
|
|
.sidebar .fields .checkbox:checked ~ .checkbox-skin:before { margin-left: 27px; }
|
|
.sidebar .fields .checkbox:checked ~ .checkbox-skin { background-color: #2ECC71; }
|
|
|
|
/* Fake input */
|
|
.sidebar .input { font-size: 13px; width: 250px; display: inline-block; overflow: hidden; text-overflow: ellipsis; vertical-align: top }
|
|
|
|
/* GRAPH */
|
|
|
|
.graph { padding: 0px; list-style-type: none; width: 351px; background-color: black; height: 10px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -o-border-radius: 8px; -ms-border-radius: 8px; border-radius: 8px ; overflow: hidden; position: relative;}
|
|
.graph li { height: 100%; position: absolute; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s ; }
|
|
.graph-stacked li { position: static; float: left; }
|
|
|
|
.graph-legend { padding: 0px; list-style-type: none; margin-top: 13px; font-family: Consolas, "Andale Mono", monospace; font-size: 13px; text-transform: capitalize; }
|
|
.sidebar .graph-legend li { margin: 0px; margin-top: 5px; margin-left: 0px; width: 160px; float: left; position: relative; }
|
|
.sidebar .graph-legend li:nth-child(odd) { margin-right: 29px }
|
|
.graph-legend span { position: absolute; }
|
|
.graph-legend b { text-align: right; display: inline-block; width: 50px; float: right; font-weight: normal; }
|
|
.graph-legend li:before { content: '\2022'; font-size: 23px; line-height: 0px; vertical-align: -3px; margin-right: 5px; }
|
|
|
|
/* COLORS */
|
|
|
|
.back-green { background-color: #2ECC71 }
|
|
.color-green:before { color: #2ECC71 }
|
|
.back-blue { background-color: #3BAFDA }
|
|
.color-blue:before { color: #3BAFDA }
|
|
.back-darkblue { background-color: #2196F3 }
|
|
.color-darkblue:before { color: #2196F3 }
|
|
.back-purple { background-color: #B10DC9 }
|
|
.color-purple:before { color: #B10DC9 }
|
|
.back-yellow { background-color: #FFDC00 }
|
|
.color-yellow:before { color: #FFDC00 }
|
|
.back-orange { background-color: #FF9800 }
|
|
.color-orange:before { color: #FF9800 }
|
|
.back-gray { background-color: #ECF0F1 }
|
|
.color-gray:before { color: #ECF0F1 }
|
|
.back-black { background-color: #34495E }
|
|
.color-black:before { color: #34495E }
|
|
.back-white { background-color: #EEE }
|
|
.color-white:before { color: #EEE }
|
|
|
|
|
|
/* Settings owned */
|
|
|
|
.owned-title { float: left }
|
|
#checkbox-owned { margin-bottom: 25px; margin-top: 26px; margin-left: 11px; }
|
|
#checkbox-owned ~ .settings-owned { opacity: 0; max-height: 0px; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; -ms-transition: all 0.3s linear; transition: all 0.3s linear ; overflow: hidden }
|
|
#checkbox-owned:checked ~ .settings-owned { opacity: 1; max-height: 400px }
|
|
|
|
/* Globe */
|
|
.globe { width: 360px; height: 360px }
|
|
.globe.loading { background: url(/uimedia/img/loading-circle.gif) center center no-repeat } |