~alcinnz/amphiarao

ref: 097acc6e5d470b3f3651a65475808274932c7e48 amphiarao/assets/pantheon.css -rw-r--r-- 2.1 KiB
097acc6e — Adrian Cochrane Display CSS styles in web UI. 2 years ago 
                                                                                
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
/* Styles inspired by elementary OS's Pantheon desktop, & Solarized. */

:root {
    --silver100: #fafafa;
    --silver300: #d4d4d4;
    --silver500: #abacae;
    --silver700: #7e8087;
    --silver900: #555761;

    --black100: #666;
    --black300: #4d4d4d;
    --black500: #333;
    --black700: #1a1a1a;
    --black900: #000;
}
body {font-family: sans-serif;}
body.fill {padding: 0; margin: 0;}
body.fill > :only-child {height: 100%}

header, footer, main {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 2px;
}
header {background: var(--silver500); border-bottom: thin solid black;}
footer {border-top: thin solid var(--silver500)}
main {align-items: stretch; padding: 0}
main > :not(iframe) {padding: 2px}
header > hr, footer > hr {
    border: none;
    flex-grow: 1;
}
main > *:not(aside) {flex-grow: 2}
main > aside {background: var(--silver300); flex-grow: 1; min-width: 100px;}
iframe {width: 100%; border: none;}

/* --- */

blockquote { /* Only being used for code..., though appropriate I'm quoting that code from the download. */
    background: #fdf6e3; color: #586e75; padding: 5px; margin: 0; font: monospace;
    voice-family: inherit;
}
.tok-symbol {color: #586e75; speak-as: spell-out literal-punctuation; pause: none; rest: none;}
.tok-qualify {color: #cb4b16; voice-stress: strong voice-volume: soft;}
.tok-keyword {color: #6c71c4; voice-stress: reduced}
.tok-ident {color: #dc322f; voice-stress: strong;}
.tok-string {color: #859900; voice-pitch: high;}
.tok-comment {color: #839496; voice-volume: soft;}
.tok-error {color: red; voice-stress: x-strong;}
.tok-num {color: #d33682; voice-pitch: low;}

@media (prefers-color-scheme: dark) {
    body {
        background: var(--black700);
        color: var(--silver300);
    }
    main > aside, header {background: var(--black500)}
    blockquote {background: #002b36; color: #93a1a1}
    .tok-symbol {color: #93a1a1}
}

/* --- */

.silent {speak: never}
dl > dt {font-weight: bold; text-align: center;}
dl > dd {margin: 0;}
.disclosure {float: right}

dl.tabular {display: grid}
dl.tabular > dt {grid-column: 1}
dl.tabular > dd {grid-column: 2}