1  /* ── Guestbook ──────────────────────────────────────────────── */
  2  
  3  .gb-sign-btn,
  4  .gb-submit-btn,
  5  .gb-secondary-btn,
  6  .gb-action-btn {
  7          display: inline-block;
  8          font-family: inherit;
  9          font-size: 0.95rem;
 10          font-weight: bold;
 11          padding: 0.55rem 1.35rem;
 12          border-radius: 0.25em;
 13          border: 1px solid transparent;
 14          cursor: pointer;
 15          text-decoration: none;
 16  
 17          &:hover {
 18                  text-decoration: none;
 19                  opacity: 0.85;
 20          }
 21  }
 22  
 23  .gb-sign-btn,
 24  .gb-submit-btn,
 25  .gb-action-btn {
 26          background: var(--c-link-text);
 27          border-color: var(--c-link-text);
 28          color: var(--c-background);
 29  }
 30  
 31  .gb-secondary-btn,
 32  .gb-action-btn--reject {
 33          background: transparent;
 34          border-color: var(--c-focus);
 35          color: var(--c-text);
 36  }
 37  
 38  .gb-cta {
 39          margin: 1.25rem 0 2rem;
 40  }
 41  
 42  .gb-gallery {
 43          display: flex;
 44          flex-wrap: wrap;
 45          justify-content: center;
 46          gap: 1.5rem;
 47          width: 100vw;
 48          position: relative;
 49          left: 50%;
 50          transform: translateX(-50%);
 51          max-width: 1100px;
 52          padding: 0 20px;
 53          box-sizing: border-box;
 54  }
 55  
 56  .gb-entry {
 57          width: calc((100% - 3 * 1.5rem) / 4);
 58          min-width: 0;
 59  
 60          @media (max-width: 900px) {
 61                  width: calc((100% - 2 * 1.5rem) / 3);
 62          }
 63  
 64          @media (max-width: 640px) {
 65                  width: calc((100% - 1 * 1.5rem) / 2);
 66          }
 67  
 68          @media (max-width: 400px) {
 69                  width: 100%;
 70          }
 71  }
 72  
 73  .gb-gallery--single {
 74          display: block;
 75          width: auto;
 76          position: static;
 77          transform: none;
 78          max-width: none;
 79          padding: 0;
 80  }
 81  
 82  .gb-entry-image {
 83          display: block;
 84          width: 100%;
 85          border: 2px solid var(--c-text);
 86          border-radius: 0.25em;
 87          background: #fff;
 88  
 89          @media (prefers-color-scheme: dark) {
 90                  opacity: 0.8;
 91          }
 92  }
 93  
 94  .gb-entry-message {
 95          padding: 0.9rem 1rem;
 96          background: var(--c-secondary-background);
 97          border: 2px solid var(--c-secondary-background);
 98          border-radius: 0.25em;
 99          font-family: monaco, monospace;
100          font-size: 0.85rem;
101          line-height: 1.55;
102          white-space: pre-wrap;
103          word-break: break-word;
104          aspect-ratio: 1 / 1;
105          overflow-y: auto;
106          box-sizing: border-box;
107  }
108  
109  .gb-entry-meta {
110          display: flex;
111          align-items: baseline;
112          gap: 0.4rem;
113          margin: 0.4rem 0 0;
114          font-size: 0.82rem;
115          line-height: 1.4;
116          min-width: 0;
117  
118          a {
119                  color: var(--c-link-text);
120                  font-weight: bold;
121                  overflow: hidden;
122                  text-overflow: ellipsis;
123                  white-space: nowrap;
124                  min-width: 0;
125          }
126  }
127  
128  .gb-entry-author {
129          font-weight: bold;
130          overflow: hidden;
131          text-overflow: ellipsis;
132          white-space: nowrap;
133          min-width: 0;
134  }
135  
136  .gb-entry-date {
137          font-size: 0.78rem;
138          opacity: 0.6;
139          white-space: nowrap;
140          flex-shrink: 0;
141          margin-left: auto;
142  }
143  
144  .gb-loading,
145  .gb-empty {
146          text-align: center;
147          padding: 2.5rem 0;
148          font-size: 0.9rem;
149  }
150  
151  .gb-pagination {
152          clear: both;
153          margin-top: 0.75rem;
154          overflow: auto;
155          width: 100vw;
156          position: relative;
157          left: 50%;
158          transform: translateX(-50%);
159          max-width: 1100px;
160          padding: 0 20px;
161          box-sizing: border-box;
162  
163          .pages {
164                  font-size: 0.85em;
165          }
166  }
167  
168  .gb-toggle {
169          display: flex;
170          gap: 0;
171          margin-bottom: 1.5rem;
172          border: 1px solid var(--c-secondary-background);
173          border-radius: 0.25em;
174          overflow: hidden;
175          width: fit-content;
176  
177          input[type="radio"] {
178                  position: absolute;
179                  width: 1px;
180                  height: 1px;
181                  padding: 0;
182                  margin: -1px;
183                  overflow: hidden;
184                  clip: rect(0, 0, 0, 0);
185                  white-space: nowrap;
186                  border: 0;
187          }
188  
189          label {
190                  padding: 0.4rem 1rem;
191                  font-size: 0.9rem;
192                  font-family: inherit;
193                  cursor: pointer;
194                  background: var(--c-secondary-background);
195                  color: var(--c-text);
196                  user-select: none;
197          }
198  
199          input[type="radio"]:checked + label {
200                  background: var(--c-focus);
201                  font-weight: bold;
202          }
203  }
204  
205  .gb-canvas-wrap {
206          position: relative;
207          width: 100%;
208          max-width: 500px;
209          aspect-ratio: 1 / 1;
210          margin-bottom: 1rem;
211  
212          canvas {
213                  display: block;
214                  width: 100%;
215                  height: 100%;
216                  border-radius: 0.25em;
217                  border: 2px solid #b0b0b0;
218                  cursor: none;
219                  touch-action: none;
220                  background: #fff;
221  
222                  @media (prefers-color-scheme: dark) {
223                          border-color: #555;
224                  }
225          }
226  }
227  
228  .gb-cursor {
229          position: fixed;
230          pointer-events: none;
231          border: 1.5px solid #888;
232          border-radius: 50%;
233          transform: translate(-50%, -50%);
234          z-index: 100;
235          display: none;
236  }
237  
238  .gb-toolbar {
239          display: flex;
240          align-items: center;
241          gap: 0.3rem;
242          margin-bottom: 0.5rem;
243          flex-wrap: wrap;
244  
245          button {
246                  display: flex;
247                  align-items: center;
248                  justify-content: center;
249                  width: 34px;
250                  height: 34px;
251                  background: var(--c-secondary-background);
252                  border: 1px solid var(--c-secondary-background);
253                  border-radius: 0.25em;
254                  color: var(--c-text);
255                  cursor: pointer;
256                  font-size: inherit;
257  
258                  &:hover {
259                          background: var(--c-focus);
260                  }
261  
262                  &.active {
263                          background: var(--c-link-text);
264                          color: var(--c-background);
265                          border-color: var(--c-link-text);
266                  }
267          }
268  }
269  
270  .gb-toolbar-sep {
271          width: 1px;
272          height: 20px;
273          background: var(--c-secondary-background);
274          margin: 0 0.1rem;
275  }
276  
277  .gb-message-area {
278          max-width: 420px;
279          margin-bottom: 1rem;
280  
281          textarea {
282                  width: 100%;
283                  min-height: 220px;
284                  background: var(--c-secondary-background);
285                  color: var(--c-text);
286                  border: 2px solid var(--c-secondary-background);
287                  border-radius: 0.25em;
288                  padding: 0.75rem;
289                  font-family: monaco, monospace;
290                  font-size: 0.9rem;
291                  line-height: 1.5;
292                  resize: vertical;
293  
294                  &:focus {
295                          outline: none;
296                          border-color: var(--c-link-text);
297                  }
298          }
299  }
300  
301  .gb-field {
302          margin-bottom: 1rem;
303  
304          label {
305                  display: block;
306                  font-size: 0.85rem;
307                  margin-bottom: 0.2rem;
308          }
309  
310          small {
311                  display: block;
312                  font-size: 0.75rem;
313                  margin-bottom: 0.2rem;
314          }
315  
316          input[type="text"],
317          input[type="password"] {
318                  width: 100%;
319                  max-width: 420px;
320                  background: var(--c-secondary-background);
321                  color: var(--c-text);
322                  border: 1px solid var(--c-secondary-background);
323                  border-radius: 0.25em;
324                  padding: 0.5rem 0.75rem;
325                  font-family: inherit;
326                  font-size: 0.9rem;
327  
328                  &:focus {
329                          outline: none;
330                          border-color: var(--c-link-text);
331                  }
332          }
333  }
334  
335  .gb-status {
336          max-width: 420px;
337          margin: 0.75rem 0;
338          padding: 0.65rem 0.85rem;
339          background: var(--c-secondary-background);
340          border: 1px solid var(--c-secondary-background);
341          border-radius: 0.25em;
342          font-size: 0.9rem;
343  }
344  
345  .gb-status--error {
346          border-color: var(--c-link-text);
347  }
348  
349  .gb-status--success {
350          border-color: var(--c-focus);
351  }
352  
353  .gb-submit-btn {
354          display: block;
355          width: 100%;
356          max-width: 420px;
357          margin-top: 0.5rem;
358  
359          &:disabled {
360                  opacity: 0.5;
361                  cursor: not-allowed;
362          }
363  }
364  
365  .gb-success {
366          background: var(--c-secondary-background);
367          border-radius: 0.25em;
368          padding: 2rem;
369          max-width: 420px;
370  
371          h2 {
372                  margin-bottom: 0.5rem;
373          }
374  
375          p {
376                  font-size: 0.9rem;
377                  margin-bottom: 1rem;
378          }
379  }
380  
381  .gb-admin-auth {
382          max-width: 420px;
383  }
384  
385  .gb-admin-controls {
386          display: flex;
387          align-items: center;
388          gap: 0.75rem;
389          flex-wrap: wrap;
390  
391          .gb-submit-btn,
392          .gb-secondary-btn {
393                  width: auto;
394                  max-width: none;
395                  margin-top: 0;
396          }
397  }
398  
399  .gb-admin-hint {
400          font-size: 0.85rem;
401          margin-bottom: 1rem;
402  }
403  
404  .gb-admin-list {
405          display: grid;
406          gap: 1rem;
407  }
408  
409  .gb-admin-entry {
410          background: var(--c-secondary-background);
411          border: 1px solid var(--c-secondary-background);
412          border-radius: 0.25em;
413          padding: 1rem;
414  }
415  
416  .gb-admin-preview {
417          margin-bottom: 0.75rem;
418  }
419  
420  .gb-admin-preview-note {
421          padding: 0.75rem;
422          background: var(--c-background);
423          border: 1px dashed var(--c-focus);
424          border-radius: 0.25em;
425          font-size: 0.85rem;
426  }
427  
428  .gb-admin-entry .gb-entry-image {
429          max-width: 420px;
430  }
431  
432  .gb-admin-entry .gb-entry-message {
433          background: var(--c-background);
434  }
435  
436  .gb-admin-meta {
437          font-size: 0.85rem;
438  
439          p {
440                  margin: 0.25rem 0;
441          }
442  
443          time {
444                  font-family: monaco, monospace;
445                  font-size: 0.85rem;
446          }
447  }
448  
449  .gb-admin-actions {
450          display: flex;
451          gap: 0.6rem;
452          flex-wrap: wrap;
453          margin-top: 0.85rem;
454  }
455  
456  .gb-action-btn,
457  .gb-admin-actions .gb-secondary-btn {
458          width: auto;
459          max-width: none;
460          margin-top: 0;
461  }
462  
463  .gb-inline-status {
464          margin-top: 0.75rem;
465          font-size: 0.85rem;
466  }
467  
468  .hidden {
469          display: none !important;
470  }