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}
62header > details[open] {
63 background: $bg-dark;
64 border: 1px solid $fg;
65}
66header > details li {
67 margin: 1em 0em 1em 0em;
68}
69main {
70 max-width: 1200px;
71 margin: auto;
72 font-size: 1.5em;
73}
74.info {
75 background: $bg-dark;
76 border: 1px solid $fg;
77 margin-bottom: 1em;
78 padding: 0em 1em 0em 1em;
79}
80.info div {
81 margin-top: 1em;
82 margin-bottom: 1em;
83}
84label, button, form input[type=submit], select {
85 font-size: 16px;
86 font-family: monospace;
87 color: $fg;
88 background: $bg-page;
89 border: 1px solid $fg;
90 padding: 0.5em;
91}
92button a {
93 text-decoration: none;
94}
95form {
96 margin-top: 1em;
97}
98textarea {
99 padding: 0.5em;
100 font-size: 1em;
101 background: $bg-page;
102 color: $fg;
103 width: 600px;
104 height: 8em;
105 margin-bottom: 0.5em;
106 box-sizing: border-box;
107 max-width: 100%;
108}
109input[type="checkbox"] {
110 position: fixed;
111 top: -9999px;
112}
113input[type="checkbox"] + span:after {
114 content: "no";
115}
116input[type="checkbox"]:checked + span:after {
117 content: "yes";
118}
119input[type="checkbox"]:focus + span:after {
120 outline: 1px solid $fg;
121}
122input[type=file] {
123 display: none;
124}
125
126.honk {
127 margin: auto;
128 background: $bg-dark;
129 border: 1px solid $fg;
130 border-radius: 1em;
131 margin-bottom: 1em;
132 padding-left: 1em;
133 padding-right: 1em;
134 padding-top: 0;
135 overflow: hidden;
136}
137.honk #honkform {
138 padding: 1em;
139 border: 1px solid $fg;
140}
141
142.honk a {
143 color: $fg;
144}
145.honk header .clip a {
146 color: $fg-subtle;
147}
148.honk header {
149 white-space: nowrap;
150 overflow: hidden;
151 text-overflow: ellipsis;
152 font-size: 0.8em;
153 line-height: 1.1;
154 margin-top: 1em;
155 height: 64px;
156}
157.honk header img {
158 float: left;
159 margin-right: 1em;
160 width: 64px;
161 height: 64px;
162}
163.honk header p {
164 margin-top: 0px;
165}
166.honk button {
167 margin-left: 4em;
168 margin-top: 2em;
169}
170.subtle {
171}
172.subtle .noise {
173 color: $fg-subtle;
174 font-size: 0.8em;
175}
176.subtle .noise a {
177 color: $fg-subtle;
178}
179.limited {
180 border: 1px solid $fg-limited;
181 color: $fg-limited;
182}
183.limited .noise {
184 color: $fg-limited;
185}
186.limited .noise a {
187 color: $fg-limited;
188}
189details.noise[open] summary {
190 display: none;
191}
192.inlineform {
193 display: inline;
194}
195.inlineform select {
196}
197.honk details.actions summary {
198 color: $fg-subtle;
199}
200.limited details.actions summary {
201 color: $fg-limited;
202}
203h1, h2 {
204 font-size: 1.2em;
205}
206h3, h4 {
207 font-size: 1.1em;
208}
209
210img:not(.emu) {
211 background: $bg-page;
212}
213img, video {
214 max-width: 100%;
215}
216img.emu {
217 width: 2em;
218 height: 2em;
219 vertical-align: middle;
220 margin: -2px;
221 object-fit: contain;
222}
223@media screen and (max-width: 740px) {
224 body {
225 font-size: 12px;
226 }
227 .honk header {
228 height: 52px;
229 }
230 .honk header img {
231 width: 48px;
232 height: 48px;
233 }
234}