xref: /plugin/annotations/style.css (revision da56206cc13612db0df36be97c0f01d8f3c5e9f4) 
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    font-size: 0.85em;
52    background: __background_alt__;
53    border: 1px solid __border__;
54    border-radius: 4px;
55    color: __text__;
56}
57
58.ann-orphan-link {
59    color: __link__;
60    text-decoration: underline;
61    cursor: pointer;
62}
63
64/* =========================================================================
65   Gutter markers
66   ========================================================================= */
67
68/* Gutter markers are positioned relative to .page (the article area only),
69   NOT #dokuwiki__content which also contains the sidebar nav and would
70   break sidebar link click targets. script.js appends markers to .page. */
71.page {
72    position: relative;
73}
74
75.ann-gutter-marker {
76    position: absolute;
77    left: -1.6em;
78    width: 1.2em;
79    height: 1.2em;
80    padding: 0;
81    border: none;
82    border-radius: 50%;
83    background-color: rgba(245, 158, 11, 0.75);
84    cursor: pointer;
85    line-height: 1;
86    font-size: 0.6em;
87    transition: background-color 0.15s ease;
88}
89
90.ann-gutter-marker:hover {
91    background-color: rgba(245, 158, 11, 1);
92}
93
94/* =========================================================================
95   Annotation panel
96   ========================================================================= */
97
98.ann-panel {
99    margin: 0.75em 0 1em;
100    border: 1px solid __border__;
101    border-left: 3px solid rgba(245, 158, 11, 0.7);
102    border-radius: 4px;
103    background: __background_alt__;
104    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
105    font-size: 0.9em;
106}
107
108.ann-panel-header {
109    display: flex;
110    justify-content: flex-end;
111    padding: 0.3em 0.5em 0;
112}
113
114/* =========================================================================
115   Thread entries (annotation + replies)
116   ========================================================================= */
117
118.ann-thread-entry {
119    padding: 0.65em 0.85em;
120    border-bottom: 1px solid __border__;
121}
122
123.ann-thread-entry:last-of-type {
124    border-bottom: none;
125}
126
127.ann-reply {
128    margin-left: 1.5em;
129    background: __background__;
130    border-left: 2px solid __border__;
131    border-radius: 0 0 4px 4px;
132}
133
134/* =========================================================================
135   Meta row (avatar, author, time, status)
136   ========================================================================= */
137
138.ann-meta {
139    display: flex;
140    align-items: center;
141    gap: 0.4em;
142    margin-bottom: 0.35em;
143    flex-wrap: wrap;
144}
145
146.ann-avatar {
147    display: inline-flex;
148    align-items: center;
149    justify-content: center;
150    width: 1.8em;
151    height: 1.8em;
152    border-radius: 50%;
153    background: __link__;
154    color: #fff;
155    font-size: 0.75em;
156    font-weight: 700;
157    flex-shrink: 0;
158}
159
160.ann-author {
161    font-weight: 600;
162    color: __text__;
163}
164
165.ann-time {
166    color: __text_alt__;
167    font-size: 0.85em;
168}
169
170.ann-status {
171    display: inline-block;
172    padding: 0.1em 0.45em;
173    border-radius: 10em;
174    font-size: 0.78em;
175    font-weight: 600;
176    letter-spacing: 0.02em;
177}
178
179.ann-status-open {
180    background: rgba(251, 191, 36, 0.25);
181    color: #92400e;
182    border: 1px solid rgba(245, 158, 11, 0.5);
183}
184
185.ann-status-resolved {
186    background: rgba(134, 239, 172, 0.25);
187    color: #166534;
188    border: 1px solid rgba(74, 222, 128, 0.4);
189}
190
191/* =========================================================================
192   Body text and quoted selection
193   ========================================================================= */
194
195.ann-body {
196    white-space: pre-wrap;
197    word-break: break-word;
198    color: __text__;
199    margin-bottom: 0.4em;
200}
201
202.ann-quote {
203    margin: 0.3em 0 0.5em 0;
204    padding: 0.25em 0.6em;
205    border-left: 3px solid rgba(245, 158, 11, 0.6);
206    color: __text_alt__;
207    font-style: italic;
208    font-size: 0.9em;
209    background: rgba(251, 191, 36, 0.08);
210    border-radius: 0 2px 2px 0;
211}
212
213/* =========================================================================
214   Action buttons row
215   ========================================================================= */
216
217.ann-actions {
218    display: flex;
219    gap: 0.4em;
220    flex-wrap: wrap;
221    margin-top: 0.3em;
222}
223
224.ann-btn {
225    display: inline-block;
226    padding: 0.2em 0.55em;
227    font-size: 0.82em;
228    border: 1px solid __border__;
229    border-radius: 3px;
230    background: __background__;
231    color: __text__;
232    cursor: pointer;
233    line-height: 1.4;
234    transition: background-color 0.12s ease;
235}
236
237.ann-btn:hover {
238    background: __background_alt__;
239}
240
241.ann-btn-primary {
242    background: __link__;
243    border-color: __link__;
244    color: #fff;
245}
246
247.ann-btn-primary:hover {
248    opacity: 0.88;
249}
250
251.ann-btn-danger {
252    border-color: #dc2626;
253    color: #dc2626;
254}
255
256.ann-btn-danger:hover {
257    background: rgba(220, 38, 38, 0.08);
258}
259
260.ann-btn-admin {
261    border-color: __border__;
262    color: __text_alt__;
263    font-size: 0.78em;
264}
265
266.ann-close {
267    font-size: 1.1em;
268    line-height: 1;
269    padding: 0.1em 0.35em;
270    border: none;
271    background: none;
272    color: __text_alt__;
273    cursor: pointer;
274}
275
276.ann-close:hover {
277    color: __text__;
278}
279
280/* =========================================================================
281   Reply form + new-annotation form
282   ========================================================================= */
283
284.ann-reply-form,
285.ann-new-form {
286    padding: 0.65em 0.85em;
287    border-top: 1px solid __border__;
288}
289
290.ann-new-form {
291    margin: 0.75em 0 1em;
292    border: 1px solid __border__;
293    border-left: 3px solid rgba(245, 158, 11, 0.7);
294    border-radius: 4px;
295    background: __background_alt__;
296}
297
298.ann-body-input {
299    display: block;
300    width: 100%;
301    box-sizing: border-box;
302    padding: 0.4em 0.6em;
303    font: inherit;
304    font-size: 0.9em;
305    border: 1px solid __border__;
306    border-radius: 3px;
307    background: __background__;
308    color: __text__;
309    resize: vertical;
310    margin-bottom: 0.4em;
311}
312
313.ann-body-input:focus {
314    outline: 2px solid __link__;
315    outline-offset: 1px;
316}
317
318.ann-form-row {
319    display: flex;
320    gap: 0.4em;
321}
322
323/* =========================================================================
324   Selection tooltip
325   ========================================================================= */
326
327.ann-tooltip {
328    position: absolute;
329    z-index: 9000;
330    padding: 0.25em 0.4em;
331    background: __background_alt__;
332    border: 1px solid __border__;
333    border-radius: 4px;
334    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
335}
336
337/* =========================================================================
338   Orphan drawer
339   ========================================================================= */
340
341.ann-orphan-drawer {
342    margin: 1.5em 0 0.5em;
343    padding: 0.75em 1em;
344    border: 1px dashed __border__;
345    border-radius: 4px;
346    background: __background_alt__;
347}
348
349.ann-orphan-drawer h4 {
350    margin: 0 0 0.3em;
351    font-size: 0.95em;
352    color: __text_alt__;
353}
354
355.ann-orphan-note {
356    font-size: 0.85em;
357    color: __text_alt__;
358    margin-bottom: 0.75em;
359}
360
361/* =========================================================================
362   Resolved annotation panels: shift to green accent
363   ========================================================================= */
364
365.ann-panel[data-status="resolved"] {
366    border-left-color: rgba(74, 222, 128, 0.6);
367}
368