views/style.css (view raw)
1$bg-page: #305;
2$bg-dark: #002;
3$fg: #dde;
4$fg-subtle: #aab;
5$fg-limited: #a79;
6
7body {
8 background: $bg-page;
9 color: $fg;
10 font-size: 1em;
11 word-wrap: break-word;
12 font-family: sans-serif, "Noto Color Emoji";
13 line-height: 1.2;
14}
15pre, code {
16 white-space: pre-wrap;
17}
18blockquote {
19 margin-left: 0em;
20 padding-left: 0.5em;
21 border-left: 1px solid $fg-subtle;
22}
23table {
24 display: block;
25 max-width: 100%;
26 overflow-x: auto;
27}
28a {
29 color: $fg;
30}
31form, input, textarea {
32 font-family: monospace, "Noto Color Emoji";
33}
34p {
35 margin-top: 1em;
36 margin-bottom: 1em;
37}
38input {
39 background: $bg-page;
40 color: $fg;
41 font-size: 1.0em;
42 line-height: 1.2em;
43 padding: 0.5em;
44}
45body > header {
46 margin: 1em auto;
47 font-size: 1.5em;
48}
49body > header p {
50 margin-left: 4em;
51}
52body > header span {
53 margin-left: 2em;
54}
55header > details {
56 background: $bg-page;
57 padding: 1em;
58 position: fixed;
59 top: 0;
60 display: inline;
61 max-height: 100%;
62 overflow: auto;
63}
64header > details[open] {
65 background: $bg-dark;
66 border: 1px solid $fg;
67}
68header > details li {
69 margin: 1em 0em 1em 0em;
70}
71main {
72 max-width: 1200px;
73 margin: auto;
74 font-size: 1.5em;
75}
76.info {
77 background: $bg-dark;
78 border: 1px solid $fg;
79 margin-bottom: 1em;
80 padding: 0em 1em 0em 1em;
81}
82.info div {
83 margin-top: 1em;
84 margin-bottom: 1em;
85}
86label, button, form input[type=submit], select {
87 font-size: 16px;
88 font-family: monospace;
89 color: $fg;
90 background: $bg-page;
91 border: 1px solid $fg;
92 padding: 0.5em;
93}
94button a {
95 text-decoration: none;
96}
97form {
98 margin-top: 1em;
99}
100textarea {
101 padding: 0.5em;
102 font-size: 1em;
103 background: $bg-page;
104 color: $fg;
105 width: 600px;
106 height: 8em;
107 margin-bottom: 0.5em;
108 box-sizing: border-box;
109 max-width: 100%;
110}
111input[type="checkbox"] {
112 position: fixed;
113 top: -9999px;
114}
115input[type="checkbox"] + span:after {
116 content: "no";
117}
118input[type="checkbox"]:checked + span:after {
119 content: "yes";
120}
121input[type="checkbox"]:focus + span:after {
122 outline: 1px solid $fg;
123}
124input[type=file] {
125 display: none;
126}
127
128.honk {
129 margin: auto;
130 background: $bg-dark;
131 border: 1px solid $fg;
132 border-radius: 1em;
133 margin-bottom: 1em;
134 padding-left: 1em;
135 padding-right: 1em;
136 padding-top: 0;
137 overflow: hidden;
138}
139.honk #honkform {
140 padding: 1em;
141 border: 1px solid $fg;
142}
143
144.honk a {
145 color: $fg;
146}
147.honk header .clip a {
148 color: $fg-subtle;
149}
150.honk header {
151 white-space: nowrap;
152 overflow: hidden;
153 text-overflow: ellipsis;
154 font-size: 0.8em;
155 line-height: 1.1;
156 margin-top: 1em;
157 height: 64px;
158}
159.honk header img {
160 float: left;
161 margin-right: 1em;
162 width: 64px;
163 height: 64px;
164}
165.honk header p {
166 margin-top: 0px;
167}
168.honk button {
169 margin-left: 4em;
170 margin-top: 2em;
171}
172.subtle {
173}
174.subtle .noise {
175 color: $fg-subtle;
176 font-size: 0.8em;
177}
178.subtle .noise a {
179 color: $fg-subtle;
180}
181.limited {
182 border: 1px solid $fg-limited;
183 color: $fg-limited;
184}
185.limited .noise {
186 color: $fg-limited;
187}
188.limited .noise a {
189 color: $fg-limited;
190}
191details.noise[open] summary {
192 display: none;
193}
194.inlineform {
195 display: inline;
196}
197.inlineform select {
198}
199.honk details.actions summary {
200 color: $fg-subtle;
201}
202.limited details.actions summary {
203 color: $fg-limited;
204}
205h1, h2 {
206 font-size: 1.2em;
207}
208h3, h4 {
209 font-size: 1.1em;
210}
211
212img:not(.emu) {
213 background: $bg-page;
214}
215img, video {
216 max-width: 100%;
217}
218img.emu {
219 width: 2em;
220 height: 2em;
221 vertical-align: middle;
222 margin: -2px;
223 object-fit: contain;
224}
225@media screen and (max-width: 740px) {
226 body {
227 font-size: 12px;
228 }
229 .honk header {
230 height: 52px;
231 }
232 .honk header img {
233 width: 48px;
234 height: 48px;
235 }
236}