finxol.io
A very simple bookmarking webapp
bookmarker.finxol.deno.net/
1.bookmark-edit-modal {
2 position: fixed;
3 inset: 0;
4 margin: auto;
5 width: min(90vw, 32rem);
6 max-height: min(80vh, 600px);
7 padding: calc(var(--spacing) * 3);
8 border: none;
9 border-radius: var(--radius);
10 background: var(--page-bg);
11 color: var(--primary-text);
12 flex-direction: column;
13 gap: calc(var(--spacing) * 1);
14 box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
15
16 opacity: 1;
17 transform: scale(1) translateY(0);
18 transition:
19 opacity 0.25s ease,
20 transform 0.25s cubic-bezier(0.32, 0.72, 0, 1),
21 display 0.25s ease allow-discrete;
22
23 @starting-style {
24 opacity: 0;
25 transform: scale(0.95) translateY(0.5rem);
26 }
27
28 &:popover-open {
29 display: flex;
30 }
31
32 &::backdrop {
33 background: hsl(from var(--primary) h s 3% / 0.2);
34 backdrop-filter: blur(4px);
35 transition:
36 background 0.25s ease,
37 backdrop-filter 0.25s ease,
38 display 0.25s ease allow-discrete;
39
40 @starting-style {
41 background: hsl(from var(--primary) h s 3% / 0);
42 backdrop-filter: blur(0);
43 }
44 }
45
46 & > .button-ghost {
47 align-self: flex-end;
48 }
49
50 & > div.title {
51 display: flex;
52 align-items: center;
53 justify-content: space-between;
54 margin-bottom: calc(var(--spacing) * 0.5);
55
56 h2 {
57 font-size: 1.25rem;
58 font-weight: 700;
59 }
60 }
61}
62
63.edit-form {
64 display: flex;
65 flex-direction: column;
66 gap: calc(var(--spacing) * 2);
67
68 .input-group {
69 display: flex;
70 flex-direction: column;
71 gap: calc(var(--spacing) * 0.5);
72
73 label {
74 font-size: 0.8rem;
75 font-weight: 600;
76 color: oklch(from var(--primary-text) l c h / 0.7);
77 }
78
79 input,
80 textarea {
81 width: 100%;
82 padding: calc(var(--spacing) * 1);
83 border: 1px solid oklch(from var(--primary-text) l c h / 0.15);
84 border-radius: var(--radius);
85 font-size: 0.9rem;
86 font-family: inherit;
87 color: var(--primary-text);
88 background: transparent;
89 outline: none;
90 transition: all 0.15s ease;
91
92 &::placeholder {
93 color: oklch(from var(--primary-text) l c h / 0.3);
94 }
95
96 &:focus {
97 border-color: var(--primary);
98 box-shadow: 0 0 0 3px oklch(from var(--primary) l c h / 0.12);
99 }
100
101 &:disabled {
102 opacity: 0.6;
103 cursor: not-allowed;
104 }
105 }
106
107 textarea {
108 resize: vertical;
109 min-height: 5rem;
110 }
111 }
112
113 button[type="submit"] {
114 align-self: flex-end;
115 }
116}
117
118.bookmark-edit-modal .error-message {
119 margin-top: calc(var(--spacing) * 0.5);
120 padding: calc(var(--spacing) * 1);
121 background: oklch(0.65 0.25 25 / 0.08);
122 border: 1px solid oklch(0.65 0.25 25 / 0.2);
123 border-radius: var(--radius);
124 color: oklch(0.5 0.2 25);
125 font-size: 0.85rem;
126}