2021-03-29 15:59:14 +08:00
|
|
|
html {
|
|
|
|
var(accent): #0071ff;
|
|
|
|
var(button): #2C8CFF;
|
|
|
|
var(gray-bg): #eee;
|
|
|
|
var(bg): white;
|
|
|
|
var(border): #ccc;
|
|
|
|
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);
|
|
|
|
}
|
|
|
|
|
|
|
|
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 {
|
|
|
|
overflow: hidden;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
white-space: nowrap;
|
|
|
|
}
|
|
|
|
|
|
|
|
.ellipsis {
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
white-space: nowrap;
|
|
|
|
}
|
|
|
|
|
|
|
|
div.password svg {
|
|
|
|
padding-left: 1em;
|
|
|
|
size: 16px;
|
|
|
|
color: #ddd;
|
|
|
|
background: none;
|
2021-07-31 22:25:04 +08:00
|
|
|
padding-top: 4px!important;
|
2021-03-29 15:59:14 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
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;
|
|
|
|
height: *;
|
|
|
|
position: absolute;
|
|
|
|
margin: 0;
|
|
|
|
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.msgbox {
|
|
|
|
size: *;
|
|
|
|
}
|
|
|
|
|
|
|
|
div.msgbox div.send svg {
|
|
|
|
size: 16px;
|
|
|
|
}
|
|
|
|
|
|
|
|
div.msgbox div.send span:active {
|
|
|
|
opacity: 0.5;
|
|
|
|
}
|
|
|
|
|
|
|
|
div.msgbox div.send span {
|
|
|
|
display: inline-block;
|
|
|
|
padding: 6px;
|
|
|
|
}
|
|
|
|
|
|
|
|
div.msgbox .msgs {
|
|
|
|
border: none;
|
|
|
|
size: *;
|
|
|
|
border-bottom: color(border) 1px solid;
|
|
|
|
overflow-x: hidden;
|
|
|
|
overflow-y: scroll-indicator;
|
|
|
|
border-spacing: 1em;
|
|
|
|
padding: 1em;
|
|
|
|
}
|
|
|
|
|
|
|
|
div.msgbox div.send {
|
|
|
|
flow: horizontal;
|
|
|
|
height: 30px;
|
|
|
|
padding: 5px;
|
|
|
|
}
|
|
|
|
|
|
|
|
div.msgbox div.send input {
|
|
|
|
height: 20px !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
div.msgbox div.name {
|
|
|
|
color: color(dark-green);
|
|
|
|
}
|
|
|
|
|
|
|
|
div.msgbox div.right-side div {
|
|
|
|
text-align: right;
|
|
|
|
}
|
|
|
|
|
|
|
|
div.msgbox div.text {
|
|
|
|
margin-top: 0.5em;
|
|
|
|
word-wrap: break-word;
|
|
|
|
word-break: break-all;
|
|
|
|
}
|
|
|
|
|
|
|
|
@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 {
|
|
|
|
display: inline-block;
|
|
|
|
position: absolute;
|
|
|
|
left: -10px;
|
|
|
|
top: 2px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.link {
|
|
|
|
cursor: pointer;
|
|
|
|
text-decoration: underline;
|
|
|
|
}
|
|
|
|
|
|
|
|
.link:active {
|
|
|
|
opacity: 0.5;
|
2021-07-31 22:25:04 +08:00
|
|
|
}
|