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