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.1;
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 margin-top: 1em;
154 height: 64px;
155}
156.honk header img {
157 float: left;
158 margin-right: 1em;
159 width: 64px;
160 height: 64px;
161}
162.honk header p {
163 margin-top: 0px;
164}
165.honk button {
166 margin-left: 4em;
167 margin-top: 2em;
168}
169.subtle {
170}
171.subtle .noise {
172 color: $fg-subtle;
173 font-size: 0.8em;
174}
175.subtle .noise a {
176 color: $fg-subtle;
177}
178.limited {
179 border: 1px solid $fg-limited;
180 color: $fg-limited;
181}
182.limited .noise {
183 color: $fg-limited;
184}
185.limited .noise a {
186 color: $fg-limited;
187}
188details.noise[open] summary {
189 display: none;
190}
191.inlineform {
192 display: inline;
193}
194.inlineform select {
195}
196.honk details.actions summary {
197 color: $fg-subtle;
198}
199.limited details.actions summary {
200 color: $fg-limited;
201}
202h1, h2 {
203 font-size: 1.2em;
204}
205h3, h4 {
206 font-size: 1.1em;
207}
208
209img:not(.emu) {
210 background: $bg-page;
211}
212img, video {
213 max-width: 100%
214}
215img.emu {
216 width: 2em;
217 height: 2em;
218 vertical-align: middle;
219 margin: -2px;
220 object-fit: contain;
221}
222@media screen and (max-width: 740px) {
223 body {
224 font-size: 12px;
225 }
226 .honk header {
227 height: 52px;
228 }
229 .honk header img {
230 width: 48px;
231 height: 48px;
232 }
233}