Heavily customized version of smokesignal - https://whtwnd.com/kayrozen.com/3lpwe4ymowg2t
kayrozen.com
1/* Bookmark List Modal Styles */
2.tags-input-container {
3 border: 1px solid #dbdbdb;
4 border-radius: 4px;
5 padding: 0.375rem;
6 min-height: 2.5rem;
7 display: flex;
8 flex-wrap: wrap;
9 align-items: center;
10 gap: 0.25rem;
11 background-color: white;
12}
13
14.tags-input-container:focus-within {
15 border-color: #3273dc;
16 box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
17}
18
19.tags-display {
20 display: flex;
21 flex-wrap: wrap;
22 gap: 0.25rem;
23 margin-right: 0.5rem;
24}
25
26.tags-display .tag {
27 margin: 0;
28}
29
30.tags-input-container input {
31 border: none;
32 outline: none;
33 flex: 1;
34 min-width: 120px;
35 padding: 0.25rem;
36 font-size: 1rem;
37}
38
39.tags-input-container input:focus {
40 box-shadow: none;
41}
42
43/* Modal enhancements */
44.modal-card {
45 max-width: 600px;
46 width: 90vw;
47}
48
49.modal-card-body {
50 max-height: 70vh;
51 overflow-y: auto;
52}
53
54/* Notification toast styles */
55.notification-toast {
56 position: fixed;
57 top: 1rem;
58 right: 1rem;
59 z-index: 9999;
60 max-width: 400px;
61 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
62 animation: slideInRight 0.3s ease-out;
63}
64
65@keyframes slideInRight {
66 from {
67 transform: translateX(100%);
68 opacity: 0;
69 }
70 to {
71 transform: translateX(0);
72 opacity: 1;
73 }
74}
75
76/* Tag suggestions styling */
77#tag-suggestions {
78 margin-top: 0.5rem;
79 display: flex;
80 flex-wrap: wrap;
81 gap: 0.25rem;
82}
83
84#tag-suggestions .button {
85 font-size: 0.75rem;
86 height: auto;
87 padding: 0.25rem 0.5rem;
88}
89
90/* Privacy notice styling */
91.notification.is-info.is-light {
92 margin-top: 0.5rem;
93}
94
95.notification.is-info.is-light p {
96 margin: 0;
97}
98
99/* Form field spacing */
100.field:not(:last-child) {
101 margin-bottom: 1.5rem;
102}
103
104/* Help text styling */
105.help {
106 font-size: 0.875rem;
107 color: #6c757d;
108 margin-top: 0.25rem;
109}
110
111/* Enhanced checkbox styling */
112.checkbox {
113 display: flex;
114 align-items: center;
115 gap: 0.5rem;
116}
117
118.checkbox input[type="checkbox"] {
119 margin: 0;
120}
121
122/* Profile Bookmark Lists Grid */
123.profile-section {
124 margin-bottom: 2rem;
125}
126
127.section-header {
128 display: flex;
129 justify-content: space-between;
130 align-items: center;
131 margin-bottom: 1rem;
132 padding-bottom: 0.5rem;
133 border-bottom: 1px solid #e8e8e8;
134}
135
136.section-header .title {
137 margin-bottom: 0;
138 display: flex;
139 align-items: center;
140 gap: 0.5rem;
141}
142
143.bookmark-lists-grid {
144 display: grid;
145 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
146 gap: 1rem;
147 margin-top: 1rem;
148}
149
150.list-card {
151 border: 1px solid #e8e8e8;
152 border-radius: 8px;
153 padding: 1rem;
154 background-color: white;
155 transition: box-shadow 0.2s ease;
156}
157
158.list-card:hover {
159 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
160}
161
162.list-card-header {
163 display: flex;
164 justify-content: space-between;
165 align-items: flex-start;
166 margin-bottom: 0.75rem;
167}
168
169.list-name {
170 margin: 0;
171 font-size: 1.1rem;
172 font-weight: 600;
173}
174
175.list-name a {
176 color: #3273dc;
177 text-decoration: none;
178}
179
180.list-name a:hover {
181 text-decoration: underline;
182}
183
184.list-stats {
185 flex-shrink: 0;
186}
187
188.list-description {
189 color: #6c757d;
190 font-size: 0.9rem;
191 margin-bottom: 1rem;
192 line-height: 1.4;
193}
194
195.list-card-footer {
196 display: flex;
197 justify-content: space-between;
198 align-items: center;
199 margin-top: 1rem;
200 padding-top: 0.75rem;
201 border-top: 1px solid #f5f5f5;
202}
203
204.list-actions {
205 display: flex;
206 gap: 0.5rem;
207}
208
209.empty-state {
210 text-align: center;
211 padding: 2rem;
212 color: #6c757d;
213 font-style: italic;
214}
215
216/* Responsive adjustments */
217@media (max-width: 768px) {
218 .bookmark-lists-grid {
219 grid-template-columns: 1fr;
220 }
221
222 .section-header {
223 flex-direction: column;
224 align-items: flex-start;
225 gap: 0.5rem;
226 }
227
228 .list-card-header {
229 flex-direction: column;
230 gap: 0.5rem;
231 }
232
233 .list-card-footer {
234 flex-direction: column;
235 align-items: flex-start;
236 gap: 0.5rem;
237 }
238}