all repos — honk @ bd69e3626507991399d455ac9c83f9fd9b7405c8

my fork of honk

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