html { var(accent): #0071ff; var(button): #2C8CFF; var(gray-bg): #eee; var(bg): white; var(border): #ccc; var(hover-border): #999; var(text): #222; var(placeholder): #aaa; var(lighter-text): #888; var(light-text): #666; var(dark-red): #A72145; var(dark-yellow): #FBC732; var(dark-blue): #2E2459; var(green-blue): #197260; var(gray-blue): #2B3439; var(blue-green): #4299bf; var(light-green): #D4EAB7; var(dark-green): #5CB85C; var(blood-red): #F82600; } body { margin: 0; color: color(text); } button.button { height: 2em; border-radius: 0.5em; background: color(button); color: color(bg); border-color: color(button); min-width: 40px; } button[type=checkbox], button[type=checkbox]:active { background: none; border: none; color: unset; height: 1.4em; } button.outline { border: color(border) solid 1px; background: transparent; color: color(text); } button.button:active, button.active { background: color(accent); color: color(bg); border-color: color(accent); } button.button:hover, button.outline:hover { border-color: color(hover-border); } input[type=text], input[type=password], input[type=number] { width: *; font-size: 1.5em; border-color: color(border); border-radius: 0; color: black; padding-left: 0.5em; } input:empty { color: color(placeholder); } input.outline-focus:focus { outline: color(button) solid 3px; } @set my-scrollbar { .prev { display:none; } .next { display:none; } .base, .next-page, .prev-page { background: white;} .slider { background: #bbb; border: white solid 4px; } .base:disabled { background: transparent; } .slider:hover { background: grey; } .slider:active { background: grey; } .base { size: 16px; } .corner { background: white; } } @mixin ELLIPSIS { text-overflow: ellipsis; white-space: nowrap; overflow-x: hidden; } .ellipsis { @ELLIPSIS; } div.password svg { padding-left: 1em; size: 16px; color: #ddd; background: none; padding-top: 4px!important; } div.password input { font-family: Consolas, Menlo, Monaco, 'Courier New'; font-size: 1.2em; } svg { background: none; } header { border-bottom: color(border) solid 1px; height: 22px; flow: horizontal; overflow-x: hidden; position: relative; } @media platform == "OSX" { header { background: linear-gradient(top,#E4E4E4,#D1D1D1); } } header div.window-icon { size: 22px; } @media platform != "OSX" { header { background: white; height: 30px; } header div.window-icon { size: 30px; } } header div.window-icon icon { display: block; margin: *; size: 16px; background-size: cover; background-repeat: no-repeat; } header caption { size: *; } @media platform != "OSX" { button.window { top: 0; padding: 0 10px; width: 22px; position: absolute; color: black; border: none; background: none; border-radius: 0; } button.window div { size: 10px; margin: *; background-size: cover; background-repeat: no-repeat; } button.window:hover { background: color(gray-bg); } button.window#minimize { right: 84px; } button.window#maximize { right: 42px; } button.window#close { right: 0px; } button.window#minimize div { height: 3px; border-bottom: black solid 1px; width: 12px; } button.window#maximize div { border: black solid 1px; } button.window#close:hover { background: #F82600; } button.window#close:hover div { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMBAMAAACkW0HUAAAAD1BMVEUAAAD///////////////+PQt5oAAAABXRSTlMAO+hBqp3RzLsAAAAuSURBVAjXY3BkAAIRBiEDBgZGZRACMkEYxAJyQRwgV5EBSsEEoUqgGqDaoYYBALKmBEEnAGy8AAAAAElFTkSuQmCC'); } button.window#close div { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMBAMAAACkW0HUAAAAD1BMVEUAAAAAAAAAAAAAAAAAAABPDueNAAAABXRSTlMAO+hBqp3RzLsAAAAuSURBVAjXY3BkAAIRBiEDBgZGZRACMkEYxAJyQRwgV5EBSsEEoUqgGqDaoYYBALKmBEEnAGy8AAAAAElFTkSuQmCC'); size: 12px; } button.window#maximize.restore div { border: none; size: 12px; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAABlBMVEUAAAAAAAClZ7nPAAAAAXRSTlMAQObYZgAAAB1JREFUCNdjsP/AoCDA8P8CQ0MABipgaHBg+H8AAMfSC36WAZteAAAAAElFTkSuQmCC'); } } div.chatbox { size: *; } div.chatbox div.send svg { size: 16px; } div.chatbox div.send span:active { opacity: 0.5; } div.chatbox div.send span { display: inline-block; padding: 6px; } div.chatbox .msgs { border: none; size: *; border-bottom: color(border) 1px solid; overflow-x: hidden; overflow-y: scroll-indicator; border-spacing: 1em; padding: 1em; } div.chatbox div.send { flow: horizontal; height: 30px; padding: 5px; } div.chatbox div.send input { height: 20px !important; } div.chatbox div.name { color: color(dark-green); } div.chatbox div.right-side div { text-align: right; } div.chatbox div.text { margin-top: 0.5em; } @media platform != "OSX" { header .window-toolbar { width: max-content; background: transparent; position: absolute; bottom: 4px; height: 24px; } } header svg, menu svg { size: 14px; } header span, menu span { padding: 4px 8px; margin: * 0.5em; color: color(light-text); } progress { display: inline-block; aspect: Progress; border: none; margin-right: 1em; height: 0.25em; background: transparent; } menu div.separator { height: 1px; width: *; margin: 5px 0; background: color(gray-bg); border: none; } menu li { position: relative; } menu li span { display: none; } menu li.selected span:nth-child(1) { display: inline-block; position: absolute; left: -10px; top: 2px; } .link { cursor: pointer; text-decoration: underline; } .link:active { opacity: 0.5; } menu li.line-through { text-decoration-line: line-through; color: red; } #tags { border: color(border) 1px solid; size: *; padding: 0.5em; overflow-y: scroll-indicator; border-spacing: 0.5em; flow: horizontal-flow; } #tags span { display: inline-block; border: color(border) 1px solid; border-radius: 6px; padding: 3px 0.5em; word-wrap: normal; } #tags span.active { background: color(button); border-color: color(button); color: white; } #tags span:hover { border-color: color(hover-border); } div#msgbox .msgbox-icon svg { size: 80px; background: white; } div#msgbox .form { border-spacing: 0.5em; } div#msgbox .caption { @ELLIPSIS; height: 2em; line-height: 2em; text-align: center; color: white; font-weight: bold; } div#msgbox .form .text { @ELLIPSIS; } div#msgbox button.button { margin-left: 1.6em; } div#msgbox div.password { position: relative; } div#msgbox div.password svg { position: absolute; right: 0.25em; top: 0.25em; padding: 0.5em; color: color(text); } div#msgbox div.set-password > div { flow: horizontal; } div#msgbox div.set-password > div > span { width: 30%; line-height: 2em; } div#msgbox div.set-password div.password { width: *; } div#msgbox div.set-password div > input { width: *; } div#msgbox div.set-password input { font-size: 1em; } div#msgbox #error { color: red; }