xref: /plugin/annotations/style.css (revision 563f3b4cdab433de36fec30ddf346093d60b9ccd) 
1/**
2 * Annotations plugin — stylesheet.
3 *
4 * Colour tokens use DokuWiki's __xxx__ replacement syntax so the theme
5 * controls the palette.  Hard-coded colours are limited to the annotation-
6 * specific highlights (amber / green) which are intentionally opinionated.
7 *
8 * FF78 ESR safe: no :has(), :not() with selectors, aspect-ratio, container
9 * queries, or CSS nesting.
10 */
11
12/* =========================================================================
13   Highlight spans
14   ========================================================================= */
15
16.ann-highlight-open {
17    background-color: rgba(251, 191, 36, 0.35);   /* amber-300 @ 35% */
18    border-bottom: 2px solid rgba(245, 158, 11, 0.7);
19    border-radius: 2px;
20    cursor: pointer;
21    transition: background-color 0.15s ease;
22}
23
24.ann-highlight-open:hover {
25    background-color: rgba(251, 191, 36, 0.55);
26}
27
28.ann-highlight-resolved {
29    background-color: rgba(134, 239, 172, 0.30);  /* green-300 @ 30% */
30    border-bottom: 2px solid rgba(74, 222, 128, 0.6);
31    border-radius: 2px;
32    cursor: pointer;
33    transition: background-color 0.15s ease;
34}
35
36.ann-highlight-resolved:hover {
37    background-color: rgba(134, 239, 172, 0.50);
38}
39
40/* =========================================================================
41   Counter bar
42   ========================================================================= */
43
44#ann-counter-bar {
45    display: flex;
46    align-items: center;
47    flex-wrap: wrap;
48    gap: 0.5em;
49    padding: 0.4em 0.75em;
50    margin-bottom: 0.75em;
51    background: __background_alt__;
52    border: 1px solid __border__;
53    border-radius: 4px;
54    color: __text__;
55}
56
57.ann-orphan-link {
58    color: __link__;
59    text-decoration: underline;
60    cursor: pointer;
61}
62
63/* =========================================================================
64   Gutter markers
65   ========================================================================= */
66
67/* Markers are appended to document.body as position:absolute elements so
68   that no template overflow:hidden can clip them. Top/left are set inline
69   via JS using getBoundingClientRect() + scroll offsets. All markers share
70   the same X position (left edge of the .page column) so they form a tidy
71   vertical column in the document margin. */
72.ann-gutter-marker {
73    position: absolute;
74    padding: 0;
75    border: none;
76    background: none;
77    color: rgba(245, 158, 11, 0.8); /* amber — open */
78    cursor: pointer;
79    display: flex;
80    align-items: center;
81    justify-content: center;
82    z-index: 1000;
83    transition: color 0.15s ease, transform 0.12s ease;
84}
85
86/* Suppress any UA button background on all interactive states. */
87.ann-gutter-marker:hover,
88.ann-gutter-marker:focus,
89.ann-gutter-marker:active {
90    background: none;
91    outline: none;
92    box-shadow: none;
93}
94
95.ann-gutter-marker:hover {
96    color: rgba(245, 158, 11, 1);
97}
98
99.ann-gutter-marker[data-status="resolved"] {
100    color: rgba(74, 222, 128, 0.8); /* green — resolved */
101}
102
103.ann-gutter-marker[data-status="resolved"]:hover {
104    color: rgba(74, 222, 128, 1);
105}
106
107/* =========================================================================
108   Annotation panel
109   ========================================================================= */
110
111.ann-panel {
112    margin: 0.75em 0 1em;
113    border: 1px solid __border__;
114    border-left: 3px solid rgba(245, 158, 11, 0.7);
115    background: __background_alt__;
116    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
117    contain: layout;
118}
119
120/* =========================================================================
121   Thread entries (annotation + replies)
122   ========================================================================= */
123
124.ann-thread-entry {
125    padding: 0.65em 0.85em;
126    border-bottom: 1px solid __border__;
127}
128
129.ann-thread-entry:last-of-type {
130    border-bottom: none;
131}
132
133/* Root annotation entry: lighter background so it stands out from the panel. */
134.ann-thread-entry.ann-annotation {
135    background: __background__;
136}
137
138/* Reply entries: inset card with the same lighter background. */
139.ann-reply {
140    margin-left: 1.5em;
141    background: __background__;
142    border-left: 2px solid __border__;
143}
144
145/* =========================================================================
146   Meta row (avatar, author, time, status, close button)
147   ========================================================================= */
148
149.ann-meta {
150    display: flex;
151    align-items: center;
152    gap: 0.4em;
153    margin-bottom: 0.35em;
154    flex-wrap: wrap;
155}
156
157.ann-avatar {
158    display: inline-flex;
159    align-items: center;
160    justify-content: center;
161    width: 1.8em;
162    height: 1.8em;
163    border-radius: 50%;
164    background: __link__;
165    color: #fff;
166    font-size: 0.75em;
167    font-weight: 700;
168    flex-shrink: 0;
169}
170
171.ann-author {
172    font-weight: 600;
173    color: __text__;
174}
175
176.ann-time {
177    color: __text_alt__;
178    font-size: 0.85em;
179}
180
181.ann-status {
182    display: inline-block;
183    padding: 0.1em 0.45em;
184    border-radius: 10em;
185    font-size: 0.78em;
186    font-weight: 600;
187    letter-spacing: 0.02em;
188}
189
190.ann-status-open {
191    background: rgba(251, 191, 36, 0.25);
192    color: #92400e;
193    border: 1px solid rgba(245, 158, 11, 0.5);
194}
195
196.ann-status-resolved {
197    background: rgba(134, 239, 172, 0.25);
198    color: #166534;
199    border: 1px solid rgba(74, 222, 128, 0.4);
200}
201
202/* =========================================================================
203   Body text and quoted selection
204   ========================================================================= */
205
206.ann-body {
207    white-space: pre-wrap;
208    word-break: break-word;
209    color: __text__;
210    margin-bottom: 0.4em;
211}
212
213.ann-quote {
214    margin-bottom: 0.65em;
215    padding: 0.25em 0.6em;
216    border-left: 3px solid rgba(245, 158, 11, 0.6);
217    color: __text__;
218    font-style: italic;
219    font-size: 0.9em;
220    background: rgba(251, 191, 36, 0.08);
221    border-radius: 0 2px 2px 0;
222}
223
224/* =========================================================================
225   Action buttons row
226   ========================================================================= */
227
228.ann-actions {
229    display: flex;
230    gap: 0.5em;
231    flex-wrap: wrap;
232    margin-top: 0.65em;
233}
234
235.ann-btn {
236    display: inline-block;
237    padding: 0.2em 0.55em;
238    font-size: 0.85em;
239    border: 1px solid __border__;
240    border-radius: 3px;
241    background: __background__ !important;
242    color: __text__;
243    cursor: pointer;
244    line-height: 1.4;
245    transition: background-color 0.12s ease;
246}
247
248.ann-btn:hover {
249    background: __background_alt__ !important;
250}
251
252.ann-btn-primary {
253    background: __link__ !important;
254    border-color: __link__;
255    color: #fff;
256}
257
258.ann-btn-primary:hover {
259    background: __link__ !important;
260    color: #fff;
261    opacity: 0.88;
262}
263
264/* Disabled state: prevent UA-stylesheet background overrides and ensure
265   primary buttons keep their link colour. */
266.ann-btn:disabled,
267.ann-btn[disabled] {
268    background: __background__;
269    opacity: 0.55;
270    cursor: not-allowed;
271}
272
273.ann-btn:disabled:hover,
274.ann-btn[disabled]:hover {
275    background: __background__;
276}
277
278.ann-btn-primary:disabled,
279.ann-btn-primary[disabled] {
280    background: __link__;
281    color: #fff;
282}
283
284.ann-btn-primary:disabled:hover,
285.ann-btn-primary[disabled]:hover {
286    background: __link__;
287    opacity: 0.55;
288}
289
290/* Spinner shown while an AJAX request is in flight (set by setBusy()).
291   The translate(-50%,-50%) is baked into every keyframe so it stays perfectly
292   centred regardless of sub-pixel rounding and never jigles. */
293@keyframes ann-spin {
294    from { transform: translate(-50%, -50%) rotate(0deg); }
295    to   { transform: translate(-50%, -50%) rotate(360deg); }
296}
297
298.ann-btn-busy {
299    position: relative;
300    color: transparent;
301}
302
303.ann-btn-busy::after {
304    content: '';
305    position: absolute;
306    top: 50%;
307    left: 50%;
308    width: 0.75em;
309    height: 0.75em;
310    border: 2px solid rgba(0, 0, 0, 0.25);
311    border-top-color: rgba(0, 0, 0, 0.75);
312    border-radius: 50%;
313    animation: ann-spin 0.6s linear infinite;
314}
315
316.ann-btn-primary.ann-btn-busy::after {
317    border-color: rgba(255, 255, 255, 0.35);
318    border-top-color: rgba(255, 255, 255, 0.9);
319}
320
321.ann-btn-danger {
322    border-color: #dc2626;
323    color: #dc2626;
324}
325
326.ann-btn-danger:hover {
327    background: rgba(220, 38, 38, 0.08);
328}
329
330.ann-btn-admin {
331    border-color: __border__;
332    color: __text__;
333}
334
335/* Close button — lives inside .ann-meta, pushed right via margin-left:auto (set in JS). */
336.ann-close {
337    font-size: 1.35em;
338    line-height: 1;
339    padding: 0.05em 0.3em;
340    border: none;
341    background: none !important;
342    color: __text_alt__;
343    cursor: pointer;
344    flex-shrink: 0;
345}
346
347.ann-close:hover {
348    color: __text__;
349    background: none !important;
350}
351
352/* =========================================================================
353   Reply form + new-annotation form
354   ========================================================================= */
355
356.ann-reply-form,
357.ann-new-form {
358    padding: 0.65em 0.85em;
359}
360
361.ann-new-form {
362    margin: 0.75em 0 1em;
363    border: 1px solid __border__;
364    border-left: 3px solid rgba(245, 158, 11, 0.7);
365    background: __background_alt__;
366    contain: layout;
367}
368
369.ann-body-input {
370    display: block;
371    width: 100%;
372    box-sizing: border-box;
373    padding: 0.4em 0.6em;
374    font: inherit;
375    border: 1px solid __border__;
376    background: __background__;
377    color: __text__;
378    resize: vertical;
379    margin-bottom: 0.65em;
380}
381
382.ann-body-input:focus {
383    outline: 1px solid __link__;
384}
385
386.ann-form-row {
387    display: flex;
388    gap: 0.4em;
389}
390
391.ann-form-row + .ann-quote {
392    margin-top: 0.65em;
393}
394
395/* =========================================================================
396   Selection tooltip
397   ========================================================================= */
398
399.ann-tooltip {
400    position: absolute;
401    z-index: 9000;
402    border-radius: 4px;
403    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
404}
405
406/* =========================================================================
407   Orphan drawer
408   ========================================================================= */
409
410.ann-orphan-drawer {
411    display: flow-root; /* BFC: shrinks to avoid overlapping the floated TOC */
412    margin-bottom: 0.65em;
413    padding: 0.75em 1em;
414    border: 1px dashed __border__;
415    border-radius: 4px;
416    background: __background_alt__;
417}
418
419.ann-orphan-drawer h4 {
420    margin: 0 0 0.3em;
421    font-size: 0.95em;
422    color: __text__;
423}
424
425.ann-orphan-note {
426    font-size: 0.85em;
427    color: __text__;
428    margin-bottom: 0.75em;
429}
430
431/* =========================================================================
432   Resolved annotation panels: shift to green accent
433   ========================================================================= */
434
435.ann-panel[data-status="resolved"] {
436    border-left-color: rgba(74, 222, 128, 0.6);
437}
438