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