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