123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282 |
- /* ---- Console.css ---- */
- .console-container { width: 100%; z-index: 998; position: absolute; top: -100vh; padding-bottom: 100%; }
- .console-container .console { background-color: #212121; height: 100vh; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px) ; padding-top: 80px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box ; }
- .console-top { color: white; font-family: Consolas, monospace; font-size: 11px; line-height: 20px; height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box ; letter-spacing: 0.5px;}
- .console-text { overflow-y: scroll; height: calc(100% - 10px); color: #DDD; padding: 5px; margin-top: -36px; overflow-wrap: break-word; }
- .console-tabs {
- background-color: #41193fad; position: relative; margin-right: 17px; /*backdrop-filter: blur(2px);*/
- -webkit-box-shadow: -30px 0px 45px #7d2463; -moz-box-shadow: -30px 0px 45px #7d2463; -o-box-shadow: -30px 0px 45px #7d2463; -ms-box-shadow: -30px 0px 45px #7d2463; box-shadow: -30px 0px 45px #7d2463 ; background: -webkit-linear-gradient(-75deg, #591a48ed, #70305e66);background: -moz-linear-gradient(-75deg, #591a48ed, #70305e66);background: -o-linear-gradient(-75deg, #591a48ed, #70305e66);background: -ms-linear-gradient(-75deg, #591a48ed, #70305e66);background: linear-gradient(-75deg, #591a48ed, #70305e66); border-bottom: 1px solid #792e6473;
- }
- .console-tabs a {
- margin-right: 5px; padding: 5px 15px; text-decoration: none; color: #AAA;
- font-size: 11px; font-family: "Consolas"; text-transform: uppercase; border: 1px solid #666;
- border-bottom: 0px; display: inline-block; margin: 5px; margin-bottom: 0px; background-color: rgba(0,0,0,0.5);
- }
- .console-tabs a:hover { color: #FFF }
- .console-tabs a.active { background-color: #46223c; color: #FFF }
- .console-middle {height: 0px; top: 50%; position: absolute; width: 100%; left: 50%; display: none; }
- .console .mynode {
- border: 0.5px solid #aaa; width: 50px; height: 50px; -webkit-transform: rotateZ(45deg); -moz-transform: rotateZ(45deg); -o-transform: rotateZ(45deg); -ms-transform: rotateZ(45deg); transform: rotateZ(45deg) ; margin-top: -25px; margin-left: -25px;
- opacity: 1; display: inline-block; background-color: #EEE; z-index: 9; position: absolute; outline: 5px solid #EEE;
- }
- .console .peers { width: 0px; height: 0px; position: absolute; left: -20px; top: -20px; text-align: center; }
- .console .peer { left: 0px; top: 0px; position: absolute; }
- .console .peer .icon { width: 20px; height: 20px; padding: 10px; display: inline-block; text-decoration: none; left: 200px; position: absolute; color: #666; }
- .console .peer .icon:before { content: "\25BC"; position: absolute; margin-top: 3px; margin-left: -1px; opacity: 0; -webkit-transition: all 0.3s ; -moz-transition: all 0.3s ; -o-transition: all 0.3s ; -ms-transition: all 0.3s ; transition: all 0.3s }
- .console .peer .icon:hover:before { opacity: 1; -webkit-transition: none ; -moz-transition: none ; -o-transition: none ; -ms-transition: none ; transition: none }
- .console .peer .line {
- width: 187px; border-top: 1px solid #CCC; position: absolute; top: 20px; left: 20px;
- -webkit-transform: rotateZ(334deg); -moz-transform: rotateZ(334deg); -o-transform: rotateZ(334deg); -ms-transform: rotateZ(334deg); transform: rotateZ(334deg) ; transform-origin: bottom left;
- }
- /* ---- Menu.css ---- */
- .menu {
- background-color: white; padding: 10px 0px; position: absolute; top: 0px; left: 0px; max-height: 0px; overflow: hidden; -webkit-transform: translate(0px, -30px); -moz-transform: translate(0px, -30px); -o-transform: translate(0px, -30px); -ms-transform: translate(0px, -30px); transform: translate(0px, -30px) ; pointer-events: none;
- -webkit-box-shadow: 0px 2px 8px rgba(0,0,0,0.3); -moz-box-shadow: 0px 2px 8px rgba(0,0,0,0.3); -o-box-shadow: 0px 2px 8px rgba(0,0,0,0.3); -ms-box-shadow: 0px 2px 8px rgba(0,0,0,0.3); box-shadow: 0px 2px 8px rgba(0,0,0,0.3) ; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; -ms-border-radius: 2px; border-radius: 2px ; opacity: 0; -webkit-transition: opacity 0.2s ease-out, transform 1s ease-out, max-height 0.2s ease-in-out; -moz-transition: opacity 0.2s ease-out, transform 1s ease-out, max-height 0.2s ease-in-out; -o-transition: opacity 0.2s ease-out, transform 1s ease-out, max-height 0.2s ease-in-out; -ms-transition: opacity 0.2s ease-out, transform 1s ease-out, max-height 0.2s ease-in-out; transition: opacity 0.2s ease-out, transform 1s ease-out, max-height 0.2s ease-in-out ;
- }
- .menu.visible { opacity: 1; max-height: 350px; -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); transform: translate(0px, 0px) ; -webkit-transition: opacity 0.1s ease-out, transform 0.3s ease-out, max-height 0.3s ease-in-out; -moz-transition: opacity 0.1s ease-out, transform 0.3s ease-out, max-height 0.3s ease-in-out; -o-transition: opacity 0.1s ease-out, transform 0.3s ease-out, max-height 0.3s ease-in-out; -ms-transition: opacity 0.1s ease-out, transform 0.3s ease-out, max-height 0.3s ease-in-out; transition: opacity 0.1s ease-out, transform 0.3s ease-out, max-height 0.3s ease-in-out ; pointer-events: all }
- .menu-item { display: block; text-decoration: none; color: black; padding: 6px 24px; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; transition: all 0.2s ; border-bottom: none; font-weight: normal; padding-left: 30px; }
- .menu-item-separator { margin-top: 5px; border-top: 1px solid #eee }
- .menu-item:hover { background-color: #F6F6F6; -webkit-transition: none; -moz-transition: none; -o-transition: none; -ms-transition: none; transition: none ; color: inherit; border: none }
- .menu-item:active, .menu-item:focus { background-color: #AF3BFF; color: white; -webkit-transition: none ; -moz-transition: none ; -o-transition: none ; -ms-transition: none ; transition: none }
- .menu-item.selected:before {
- content: "L"; display: inline-block; -webkit-transform: rotateZ(45deg) scaleX(-1); -moz-transform: rotateZ(45deg) scaleX(-1); -o-transform: rotateZ(45deg) scaleX(-1); -ms-transform: rotateZ(45deg) scaleX(-1); transform: rotateZ(45deg) scaleX(-1) ;
- font-weight: bold; position: absolute; margin-left: -17px; font-size: 12px; margin-top: 2px;
- }
- @media only screen and (max-width: 800px) {
- .menu, .menu.visible { position: absolute; left: unset !important; right: 20px; }
- }
- /* ---- 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: #3A3A3A;
- 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;
- }
- /* ---- Sidebar.css ---- */
- .menu {
- font-family: Roboto, 'Segoe UI', 'Helvetica Neue'; z-index: 999;
- }
- .drag-bg { width: 100%; height: 100%; position: fixed; }
- .fixbutton.dragging { cursor: -webkit-grabbing; }
- .fixbutton-bg:active { cursor: -webkit-grabbing; }
- .body-sidebar, .body-console { 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 bottom; }
- .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; outline: 1px solid transparent }
- .body-console iframe { -webkit-transform: rotateX(5deg); -moz-transform: rotateX(5deg); -o-transform: rotateX(5deg); -ms-transform: rotateX(5deg); transform: rotateX(5deg) ; opacity: 0.8; pointer-events: none; outline: 1px solid transparent }
- .sidebar .label-right { float: right; margin-right: 7px; margin-top: 1px; float: right; }
- .sidebar .link-right { color: white; text-decoration: none; border-bottom: 1px solid #666; text-transform: uppercase; }
- .sidebar .link-right:hover { border-color: #CCC; }
- .sidebar .link-right:active { background-color: #444 }
- .sidebar .link-outline { outline: 1px solid #eee6; padding: 2px 13px; border-bottom: none; font-size: 80%; }
- /* SIDEBAR */
- .sidebar-container { width: 100%; height: 100%; overflow: hidden; position: fixed; top: 0px; z-index: 2;}
- .sidebar { background-color: #212121; position: fixed; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden ; 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; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; -ms-transition: all 1s; transition: all 1s ; opacity: 0 }
- .sidebar-container.loaded .content { opacity: 1; -webkit-transform: none ; -moz-transform: none ; -o-transform: none ; -ms-transform: none ; transform: none }
- .sidebar h1, .sidebar h2 { font-weight: lighter; }
- .sidebar .close { color: #999; float: right; text-decoration: none; margin-top: -5px; padding: 0px 5px; font-size: 33px; margin-right: 20px; display: none }
- .sidebar .button { margin: 0px; display: inline-block; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s ; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box ; max-width: 260px }
- .sidebar .button.hidden { padding: 0px; max-width: 0px; opacity: 0; pointer-events: none }
- .sidebar #button-delete { background-color: transparent; border: 1px solid #333; color: #AAA; margin-left: 10px }
- .sidebar #button-delete:hover { border: 1px solid #666; color: white }
- .sidebar .flex { display: flex }
- .sidebar .flex .input.text, .sidebar .flex input.text { width: 100%; }
- .sidebar .flex .button { margin-left: 4px; white-space: nowrap; }
- /* 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; width: 100%
- }
- .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: 260px; 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; font-size: 0 }
- .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 { white-space: nowrap; }
- .graph-stacked li { position: static; display: inline-block; height: 20px }
- .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; }
- .filelist { font-size: 12px; font-family: monospace; margin: 0px; padding: 0px; list-style-type: none; line-height: 1.5em; }
- .filelist li:before { content: '\2022'; font-size: 11px; line-height: 0px; vertical-align: 0px; margin-right: 5px; color: #FFBE00; }
- .filelist li { overflow: hidden; text-overflow: ellipsis; }
- /* 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: #156fb7 }
- .color-darkblue:before { color: #156fb7 }
- .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-red { background-color: #5E4934 }
- .color-red:before { color: #5E4934 }
- .back-gray { background-color: #9e9e9e }
- .color-gray:before { color: #9e9e9e }
- .back-white { background-color: #EEE }
- .color-white:before { color: #EEE }
- .back-red { background-color: #E91E63 }
- .color-red:before { color: #E91E63 }
- /* Settings owned */
- .owned-title { float: left }
- #checkbox-owned { margin-bottom: 25px; margin-top: 26px; margin-left: 11px; }
- .settings-owned { clear: both }
- #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: 420px }
- /* Settings autodownload */
- .settings-autodownloadoptional { clear: both; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box ; padding-top: 0px; }
- #checkbox-autodownloadoptional ~ .settings-autodownloadoptional { opacity: 0; max-height: 0px; -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 ; overflow: hidden; }
- #checkbox-autodownloadoptional:checked ~ .settings-autodownloadoptional { opacity: 1; max-height: 120px; padding-top: 30px; }
- /* Globe */
- .globe { width: 360px; height: 360px }
- .globe.loading { background: url(/uimedia/img/loading-circle.gif) center center no-repeat }
- .globe.error { text-align: center; padding-top: 156px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box ; opacity: 0.2; }
- /* Sign publish */
- .contents { background-color: #3B3B3B; color: white; padding: 7px 10px; font-family: Consolas; font-size: 11px; display: inline-block; margin-bottom: 6px; margin-top: 10px }
- .contents a { color: white }
- .contents a:active { background-color: #6B6B6B }
- .contents + .flex.active {
- padding-bottom: 100px;
- }
- #wrapper-sign-publish {
- padding: 0;
- }
- #button-sign-publish, #menu-sign-publish {
- display: inline-block;
- margin: 5px 10px;
- text-decoration: none;
- }
- #button-sign-publish {
- margin-right: 5px;
- }
- #menu-sign-publish {
- margin-left: 5px;
- color: #AAA;
- padding: 7px;
- margin: 0px;
- }
- #menu-sign-publish:hover { color: white }
- /* Small screen */
- @media screen and (max-width: 600px) {
- .sidebar .close { display: block }
- }
|