-
Notifications
You must be signed in to change notification settings - Fork 3
/
inline.css
95 lines (86 loc) · 3.95 KB
/
inline.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
:root {
--L1: url('icon.svg');
--D1: url('icon_dark.svg');
--L2: rgb(234, 234, 234);
--D2: rgb(35, 42, 55);
--L3: #777;
--D3: #adf;
--L4: #223;
--D4: #fff;
--ar: url("data:image/svg+xml,%3Csvg version='1.1' viewBox='-2 -2 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m2.9 2.9v5.7l2.1-2.1 3.5 3.5-3.5 3.5-2.1-2.1v5.7h5.7l-2.1-2.1 3.5-3.5 3.5 3.5-2.1 2.1h5.7v-5.7l-2.1 2.1-3.5-3.5 3.5-3.5 2.1 2.1v-5.7h-5.7l2.1 2.1-3.5 3.5-3.5-3.5 2.1-2.1z'/%3E%3C/svg%3E%0A");
--hg: url("data:image/svg+xml,%3Csvg version='1.1' viewBox='-2 -2 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m10 0-4 4h3v12h-3l4 4 4-4h-3v-12h3l-4-4z'/%3E%3C/svg%3E%0A");
--wd: url("data:image/svg+xml,%3Csvg version='1.1' viewBox='-2 -2 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m4 6-4 4 4 4v-3h12v3l4-4-4-4v3h-12v-3z'/%3E%3C/svg%3E%0A");
}
body { --icon: var(--L1); --bg-color: var(--L2);
--icon-bottom-color: var(--L3); --text-color: var(--L4)}
@media (prefers-color-scheme: dark) {
body { --icon: var(--D1); --bg-color: var(--D2);
--icon-bottom-color: var(--D3); --text-color: var(--D4)}}
body#lite {--icon: var(--L1); --bg-color: var(--L2);
--icon-bottom-color: var(--L3); --text-color: var(--L4)}
body#dark {--icon: var(--D1); --bg-color: var(--D2);
--icon-bottom-color: var(--D3); --text-color: var(--D4)}
* {margin: 0; padding: 0}
body {background: var(--bg-color); text-align: center; margin: 50px}
#theme {position: fixed; top: 0; right: 10px; text-align: right; display: block}
#theme>input{display:none}
#theme>input+label{background: var(--bg-color); margin: 0; padding: 4px 2ch; cursor: pointer; min-width: 8ch;
display: inline-block; font-size: 8pt; font-family: monospace; color: var(--text-color); vertical-align: top;
border: 1px solid var(--icon-bottom-color); border-top: none; text-align: center; box-sizing: border-box;}
#theme>input+label:first-of-type{border-bottom-left-radius: 4px}
#theme>input+label:last-of-type{border-bottom-right-radius: 4px}
#theme>input+label:not(:first-of-type){border-left:none}
#theme>input:checked+label{background: var(--icon-bottom-color); color: var(--bg-color)}
#main>.imCt {margin: 10px; padding: 10px; text-align: center;
display: inline-block; background: transparent; border-radius: 10px;
vertical-align: top; border: 2px dashed #94EAFF}
#main>.imCt:nth-child(even) {border-color: #ffa1c3}
#main>.imCt>span {display: block; text-align: center; font-size: 8pt;
font-family: monospace; margin: auto; margin-top: 10px;
color: var(--text-color); white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; max-width: 300px}
.markers {display: block; position: relative; text-align: right;
margin-bottom: -20px; height: 20px; top: -21px}
.markers .wd>div {mask: var(--wd)}
.markers .ar>div {mask: var(--ar)}
.markers .hg>div {mask: var(--hg)}
.markers div {width: 20px; height: 20px; display: inline-block}
.multiResult .widest .markers .wd, .multiResult .largest .markers .ar,
.multiResult .tallest .markers .hg {background-color: var(--bg-color)}
.multiResult .widest .markers .wd>div, .multiResult .largest .markers .ar>div,
.multiResult .tallest .markers .hg>div {background-color: var(--text-color)}
#icon {
display: inline-block;
background-image: var(--icon);
background-size: 128px 128px;
background-repeat: no-repeat;
background-position: top left;
width: 128px; height: 128px;
padding: 0; padding-bottom: 5px;
border-bottom: 3px dotted black;
border-color: var(--icon-bottom-color);
margin-bottom: 30px;
}
#main>.imCt img, #main>.imCt video {
display: block;
margin: auto;
background: transparent;
min-width: 64px;
min-height: 64px;
max-width: 600px;
max-height: 400px;
object-fit: scale-down;
}
.orderSelector {
width: 100%; display: block; text-align: right;
margin-top: -30px; margin-bottom: 30px;
}
.orderSelector select {
display: inline-block;
background-color: var(--bg-color);
border: none;
padding: 2px;
border-bottom: 2px dotted black;
color: var(--icon-bottom-color);
border-color: var(--icon-bottom-color);
}