hyl.st
1body {
2 margin: 0;
3 font-family: "Courier", monospace;
4 color: #555;
5 background: #fff;
6}
7p {
8 margin: 0.5rem 0;
9}
10h3 {
11 margin-top: 2rem;
12 margin-bottom: 0px;
13}
14a {
15 color: #555;
16}
17
18.footer {
19 text-align: center;
20 padding: 50px 0 70px;
21}
22
23.containers {
24 display: flex;
25 flex-wrap: wrap;
26 gap: 1vw;
27 padding: 3vw;
28 box-sizing: border-box;
29}
30
31.container {
32 width: 30vw;
33 height: 30vw;
34 background: #fefdfd;
35 border: 0px;
36 box-sizing: border-box;
37 overflow: hidden;
38 padding: 10px;
39 position: relative;
40}
41
42.container a {
43 display: flex;
44 justify-content: center;
45 align-items: center;
46 text-align: center;
47 width: 100%;
48 height: 100%;
49 color: inherit;
50 text-decoration: none;
51 cursor: pointer;
52}
53
54.container span {
55 display: block;
56 width: 100%;
57 word-break: break-word;
58 line-height: 1.2;
59}
60.local-container {
61 box-shadow: 0 0 4px 4px rgba(94, 255, 180, 0.756); /* glowing green */
62}
63
64.topbar {
65 width: 100%;
66 min-height: 57px;
67 padding: 10px 20px;
68 background-color: #ffffff;
69 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
70 position: sticky;
71 top: 0;
72 z-index: 10;
73 display: flex;
74 box-sizing: border-box;
75 align-items: center;
76 color: #555;
77}
78#headerTitle {
79 color: #555;
80 text-decoration: none;
81 margin-right: 1rem;
82 white-space: nowrap;
83}
84
85#whatsThis {
86 cursor: pointer;
87 text-decoration: underline;
88}
89
90#searchInput {
91 width: 140px;
92 margin-left: 1vw;
93}
94
95hr {
96 border: none;
97 height: 2vw;
98 margin: 0;
99 visibility: hidden;
100}
101
102.modal-overlay {
103 position: fixed;
104 top: 0;
105 left: 0;
106 width: 100%;
107 height: 100%;
108 background: rgba(0, 0, 0, 0.4);
109 display: flex;
110 justify-content: center;
111 align-items: flex-start; /* aligns modal to top */
112 padding: 40px 20px; /* top/bottom space */
113 overflow-y: auto; /* scrolls if modal content is too tall */
114 z-index: 100;
115}
116
117.modal-content {
118 width: 70%;
119 max-width: 1000px;
120 background: white;
121 padding: 30px;
122 border-radius: 10px;
123 box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
124 box-sizing: border-box;
125 max-height: calc(
126 100vh - 80px
127 ); /* ensures modal never exceeds screen height */
128 overflow-y: auto; /* scroll inside modal if needed */
129}
130
131.hidden {
132 display: none;
133}
134
135.param-dialog {
136 padding: 1.5rem;
137 border: none;
138 border-radius: 10px;
139 width: 50%;
140 font-family: "Courier", monospace;
141}
142
143.param-form {
144 display: flex;
145 flex-direction: column;
146 gap: 1rem;
147}
148
149.param-group {
150 display: flex;
151 flex-direction: column;
152}
153
154.param-label {
155 font-weight: bold;
156 margin-bottom: 0.3rem;
157 color: #555;
158}
159
160input {
161 padding: 0.5rem;
162 border: 1px solid #ccc;
163 border-radius: 6px;
164 font-size: 14px;
165 font-family: "Courier", monospace;
166}
167
168.param-menu {
169 display: flex;
170 justify-content: space-between;
171 align-items: center;
172 padding: 0;
173 margin-top: 12px;
174}
175
176.menu-left {
177 flex: 1;
178}
179
180.menu-right {
181 display: flex;
182 gap: 12px;
183}
184
185.export-link {
186 font-size: 0.9rem;
187 color: #0077cc;
188 text-decoration: underline;
189 background: none;
190 border: none;
191 padding: 6px 0;
192 cursor: pointer;
193}
194
195.export-link:hover {
196 text-decoration: none;
197}
198
199.param-btn {
200 border: none;
201 border-radius: 5px;
202 cursor: pointer;
203 margin: 0 0.5vw 0 0;
204 padding: 8px 16px 8px;
205 font-size: 12px;
206 color: #555;
207 white-space: nowrap;
208 font-family: "Courier", monospace;
209}
210
211.param-btn:hover {
212 background: #e0e0e0;
213}
214
215.param-btn.cancel {
216 background: #eee;
217 color: #555;
218}
219
220.param-btn.dark {
221 background: #555;
222 color: white;
223}
224
225.tags-wrapper {
226 display: flex;
227 flex-wrap: wrap;
228 gap: 0.3vw;
229 margin-top: -1vw;
230}
231
232.tag-style {
233 font-family: "Courier", monospace;
234 font-size: 1.3vw;
235 padding: 0 6px;
236 opacity: 0.8;
237 cursor: pointer;
238}
239.tag-style:hover {
240 border: 1px solid currentColor;
241}
242
243.delete-btn {
244 position: absolute;
245 opacity: 0;
246
247 bottom: 8px;
248 right: 8px;
249 z-index: 2;
250 color: inherit;
251 border: 1px solid transparent;
252 background-color: transparent;
253 font-size: 1vw;
254 font-family: "Courier", monospace;
255}
256.container:hover .delete-btn {
257 opacity: 1;
258}
259
260.delete-btn:hover {
261 font-weight: bold;
262 cursor: pointer;
263 border: 1px solid currentColor;
264}
265
266.param-btn:disabled {
267 opacity: 0.6;
268 cursor: not-allowed;
269}
270
271
272.page {
273 padding: 20px 20vw;
274}
275
276pre {
277 overflow-x: auto;
278 padding: 1em;
279 border: 1px solid #ccc;
280 background: #f9f9f9;
281 border-radius: 6px;
282 font-family: monospace;
283 white-space: pre;
284}
285
286pre code {
287 display: block;
288 max-width: 100%;
289 box-sizing: border-box;
290}
291
292textarea {
293 width: 100%;
294 height: 200px;
295 padding: 12px;
296 font-size: 16px;
297 font-family: inherit; /* assumes same font as input */
298 border: 1px solid #ccc;
299 border-radius: 6px;
300 background-color: white;
301 box-sizing: border-box;
302 resize: vertical;
303 margin: 1em 0;
304}
305
306.anchor-target {
307 scroll-margin-top: 80px; /* adjust based on your sticky topbar height */
308}
309
310
311
312@media (max-width: 600px) {
313 .container {
314 width: 46vw;
315 height: 46vw;
316 }
317
318 .btn-text {
319 display: none;
320 }
321
322 .page{
323 padding: 20px 20px;
324 }
325}
326
327/* User avatar styles */
328.user-avatar {
329 width: 32px;
330 height: 32px;
331 border-radius: 50%;
332 margin-left: 12px;
333 margin-right: 8px;
334 object-fit: cover;
335 border: 2px solid #ddd;
336 vertical-align: middle;
337}
338
339.searched-user-avatar {
340 width: 28px;
341 height: 28px;
342 border-radius: 50%;
343 margin-right: 6px;
344 object-fit: cover;
345 border: 2px solid #bbb;
346 vertical-align: middle;
347}
348
349/* List view styles */
350.list-view .containers {
351 display: block;
352 padding: 1rem 3vw;
353}
354
355.list-view .bookmark-item {
356 display: flex;
357 align-items: flex-start;
358 padding: 0.5rem;
359 border-bottom: 1px solid #e8e8e8;
360 background: #fefdfd;
361 margin-bottom: 0.25rem;
362 border-radius: 3px;
363 position: relative;
364}
365
366.list-view .bookmark-item:hover {
367 background: #f8f8f8;
368}
369
370.list-view .bookmark-content {
371 flex: 1;
372 min-width: 0;
373}
374
375.list-view .bookmark-link-group {
376 cursor: pointer;
377}
378
379.list-view .bookmark-title {
380 font-family: "Courier", monospace;
381 font-size: 0.9rem;
382 font-weight: bold;
383 color: #333;
384 text-decoration: none;
385 display: block;
386 margin-bottom: 0.1rem;
387 word-break: break-word;
388 line-height: 1.3;
389 transition: color 0.2s ease;
390}
391
392.list-view .bookmark-link-group:hover .bookmark-title {
393 color: #0066cc;
394}
395
396.list-view .bookmark-url-container {
397 margin-bottom: 0.1rem;
398}
399
400.list-view .bookmark-meta-row {
401 display: flex;
402 justify-content: space-between;
403 align-items: center;
404 margin-bottom: 0.25rem;
405 min-height: 1.2em;
406}
407
408.list-view .bookmark-url {
409 font-family: "Courier", monospace;
410 font-size: 0.75rem;
411 color: #666;
412 word-break: break-all;
413 text-decoration: none;
414 transition: color 0.2s ease, text-decoration 0.2s ease;
415 display: block;
416}
417
418.list-view .bookmark-link-group:hover .bookmark-url {
419 color: #0066cc;
420 text-decoration: underline;
421}
422
423.list-view .bookmark-date {
424 font-family: "Courier", monospace;
425 font-size: 0.7rem;
426 color: #888;
427 white-space: nowrap;
428}
429
430.list-view .bookmark-tags {
431 display: flex;
432 flex-wrap: wrap;
433 gap: 0.2rem;
434 flex: 1;
435}
436
437.list-view .bookmark-tag {
438 font-family: "Courier", monospace;
439 font-size: 0.7rem;
440 padding: 1px 4px;
441 background: #f0f0f0;
442 color: #555;
443 border-radius: 2px;
444 cursor: pointer;
445 border: 1px solid transparent;
446}
447
448.list-view .bookmark-tag:hover {
449 border-color: #ccc;
450 background: #e8e8e8;
451}
452
453.list-view .bookmark-actions {
454 display: flex;
455 align-items: center;
456 margin-left: 1rem;
457}
458
459.list-view .delete-btn {
460 position: static;
461 opacity: 1;
462 padding: 2px 6px;
463 font-size: 0.8rem;
464 border: 1px solid transparent;
465 border-radius: 3px;
466 background: transparent;
467 color: #e74c3c;
468 cursor: pointer;
469 font-family: "Courier", monospace;
470 font-weight: bold;
471}
472
473.list-view .delete-btn:hover {
474 border-color: #e74c3c;
475 background: #fdf2f2;
476 color: #c0392b;
477}
478
479/* Hide grid view when in list mode */
480.list-view .container {
481 display: none;
482}
483
484