all repos — honk @ f8e96c4feb37fc109edc6ae3b08a83dd8d8d3145

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}
 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;
 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}