all repos — honk @ 2f5e3e464ccf1dee38e702d9a1ad83a929d1e488

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