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