forked from cbytensky/katnip
-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.css
69 lines (59 loc) · 3.26 KB
/
style.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
@media not all and (max-width: 30rem) { :root { --margin: 1rem } }
@media (max-width: 30rem) { :root { --margin: .4rem } }
@media print { :root { --margin: 0 } }
:root {
--dimness: 0.2;
--half-margin: calc(var(--margin) / 2);
}
@media (prefers-color-scheme: dark), (prefers-color-scheme: no-preference) { :root { --back: 0%; --op: + } }
@media (prefers-color-scheme: light) { :root { --back: 100%; --op: - } }
:root {
--hue-title: calc( 4turn/12);
--hue-caption: calc( 2turn/12);
--hue-a: calc( 8turn/12);
--hue-visited: calc(10turn/12);
--percent-aux: 30%;
--lum-fore: calc(var(--back) var(--op) (1 - var(--dimness)) * 100%);
--lum-aux: calc(var(--back) var(--op) (100% - var(--percent-aux)));
--saturation-aux: 25%;
--color-aux: hsl(0, 0%, var(--lum-aux));
--color-title: hsl(var(--hue-title), 100%, calc(var(--back) var(--op) 75%));
--color-caption: hsl(var(--hue-caption), 75%, var(--lum-fore));
--color-caption-aux: hsl(var(--hue-caption), var(--saturation-aux), var(--lum-aux));
--color-back-2: hsl(0, 0%, calc(var(--back) var(--op) 1/32*100%));
--color-back-1: hsl(0, 0%, calc(var(--back) var(--op) 2/32*100%));
--color-back0: hsl(0, 0%, calc(var(--back) var(--op) 3/32*100%));
--color-back: hsl(0, 0%, calc(var(--back) var(--op) 4/32*100%));
--color-back1: hsl(0, 0%, calc(var(--back) var(--op) 5/32*100%));
--color-back2: hsl(0, 0%, calc(var(--back) var(--op) 6/32*100%));
--color-back3: hsl(0, 0%, calc(var(--back) var(--op) 7/32*100%));
--color-back4: hsl(0, 0%, calc(var(--back) var(--op) 8/32*100%));
--color-back5: hsl(0, 0%, calc(var(--back) var(--op) 9/32*100%));
--color-back6: hsl(0, 0%, calc(var(--back) var(--op) 10/32*100%));
--color-back7: hsl(0, 0%, calc(var(--back) var(--op) 11/32*100%));
--color-fore: hsl(0, 0%, var(--lum-fore));
--color-bright: hsl(0, 0%, calc(var(--back) var(--op) 200%));
}
body { display: table; margin: 0 auto; font-family: sans-serif; padding: var(--margin) var(--margin) 0; background-color: var(--color-back); color: var(--color-fore) }
input { background-color: var(--color-back-2); color: var(--color-bright); font-size: medium }
/*@media (prefers-color-scheme: light) { body {background-color: initial } }*/
* { border-width: 1px; border-color: var(--color-back7); box-sizing: border-box }
a, abbr { text-decoration: none }
a { color: hsl(var(--hue-a), 100%, var(--lum-fore)) }
a:visited { color: hsl(var(--hue-visited), 100%, var(--lum-fore)) }
table { border-collapse: collapse; max-width: 100%; background: var(--color-back1) }
th { font-weight: normal; font-size: smaller }
tbody > tr > th { text-align: right; vertical-align: baseline; line-height: 1.2rem }
td, th { border-style: solid; padding: .1rem .3rem }
td { font-family: monospace, monospace; font-size: 1em }
.sans td { font-family: inherit }
table { margin: var(--margin) auto; padding: 0 }
th { color: var(--color-aux); background: var(--color-back3) }
caption { color: var(--color-title); padding-bottom: .5rem }
.r { text-align: right }
.l { text-align: left !important }
.m * { font-family: monospace, monospace; font-size: 1em !important; }
.comment { text-align: center; opacity: 0.8 }
small {font-size: medium; color: var(--color-aux) }
input {width: 100%}
/*div.scroll { max-height: 2vh; overflow-y: auto; padding-right: 20px }*/