pptx-vanilla-viewer 0.5.0 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,1141 @@
1
+ .pptxv {
2
+ --pptx-background: #030712;
3
+ --pptx-foreground: #f3f4f6;
4
+ --pptx-card: #111827;
5
+ --pptx-card-foreground: #f3f4f6;
6
+ --pptx-popover: #111827;
7
+ --pptx-popover-foreground: #f3f4f6;
8
+ --pptx-primary: #6366f1;
9
+ --pptx-primary-foreground: #ffffff;
10
+ --pptx-secondary: #1f2937;
11
+ --pptx-secondary-foreground: #f3f4f6;
12
+ --pptx-muted: #1f2937;
13
+ --pptx-muted-foreground: #9ca3af;
14
+ --pptx-accent: #1f2937;
15
+ --pptx-accent-foreground: #f3f4f6;
16
+ --pptx-destructive: #ef4444;
17
+ --pptx-destructive-foreground: #ffffff;
18
+ --pptx-border: #374151;
19
+ --pptx-input: #374151;
20
+ --pptx-ring: #6366f1;
21
+ --pptx-radius: 0.5rem;
22
+ }
23
+
24
+ .pptxv {
25
+ position: relative;
26
+ display: flex;
27
+ flex-direction: column;
28
+ width: 100%;
29
+ height: 100%;
30
+ min-height: 0;
31
+ overflow: hidden;
32
+ background: var(--pptx-background);
33
+ color: var(--pptx-foreground);
34
+ font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
35
+ font-size: 14px;
36
+ }
37
+ .pptxv *, .pptxv *::before, .pptxv *::after { box-sizing: border-box; }
38
+ .pptxv:focus { outline: none; }
39
+ .pptxv:focus-visible { outline: 2px solid var(--pptx-ring); outline-offset: -2px; }
40
+
41
+ /* Ribbon shell layout (primary row + nav row + tab bar + groups) lives in
42
+ * ribbon-css.ts; .pptxv-btn below is the shared icon-button primitive used by
43
+ * both the ribbon and the inspector. */
44
+ .pptxv-btn {
45
+ display: inline-flex;
46
+ align-items: center;
47
+ justify-content: center;
48
+ width: 28px;
49
+ height: 28px;
50
+ padding: 0;
51
+ border: none;
52
+ border-radius: var(--pptx-radius);
53
+ background: transparent;
54
+ color: inherit;
55
+ cursor: pointer;
56
+ }
57
+ .pptxv-btn:hover:not(:disabled) { background: var(--pptx-accent); color: var(--pptx-accent-foreground); }
58
+ .pptxv-btn:disabled { opacity: 0.4; cursor: default; }
59
+ .pptxv-btn.is-active { background: var(--pptx-accent); color: var(--pptx-accent-foreground); }
60
+ .pptxv-btn:focus-visible { outline: 2px solid var(--pptx-ring); outline-offset: 1px; }
61
+ .pptxv-btn svg { width: 16px; height: 16px; display: block; }
62
+ .pptxv-counter, .pptxv-zoom-label {
63
+ padding: 0 8px;
64
+ color: var(--pptx-muted-foreground);
65
+ white-space: nowrap;
66
+ font-variant-numeric: tabular-nums;
67
+ }
68
+ .pptxv-autosave-status {
69
+ padding: 0 6px;
70
+ font-size: 12px;
71
+ white-space: nowrap;
72
+ color: var(--pptx-muted-foreground);
73
+ }
74
+ .pptxv-autosave-status.is-saving { color: var(--pptx-accent-foreground); opacity: 0.8; }
75
+ .pptxv-autosave-status.is-error { color: #dc2626; }
76
+
77
+ /* ── PowerPoint-style title bar ─────────────────────────────────────── */
78
+ .pptxv-titlebar {
79
+ position: relative;
80
+ display: flex;
81
+ align-items: center;
82
+ gap: 6px;
83
+ min-height: 34px;
84
+ padding: 4px 10px;
85
+ border-bottom: 1px solid var(--pptx-border);
86
+ background: var(--pptx-card);
87
+ color: var(--pptx-card-foreground);
88
+ font-size: 11px;
89
+ user-select: none;
90
+ }
91
+ .pptxv-titlebar-logo {
92
+ display: inline-grid;
93
+ width: 20px;
94
+ height: 20px;
95
+ place-items: center;
96
+ border-radius: 3px;
97
+ background: #d24726;
98
+ color: #fff;
99
+ font-size: 13px;
100
+ font-weight: 700;
101
+ }
102
+ .pptxv-titlebar-autosave, .pptxv-titlebar-file { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
103
+ .pptxv-titlebar-autosave-label, .pptxv-titlebar-status { color: var(--pptx-muted-foreground); white-space: nowrap; }
104
+ .pptxv-titlebar-switch {
105
+ position: relative;
106
+ width: 27px;
107
+ height: 14px;
108
+ padding: 0;
109
+ border: 0;
110
+ border-radius: 999px;
111
+ background: var(--pptx-muted-foreground);
112
+ cursor: pointer;
113
+ }
114
+ .pptxv-titlebar-switch.is-on { background: var(--pptx-primary); }
115
+ .pptxv-titlebar-switch-knob { position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; transition: transform 120ms ease; }
116
+ .pptxv-titlebar-switch.is-on .pptxv-titlebar-switch-knob { transform: translateX(13px); }
117
+ .pptxv-titlebar-switch:focus-visible, .pptxv-titlebar-btn:focus-visible { outline: 2px solid var(--pptx-ring); outline-offset: 1px; }
118
+ .pptxv-titlebar-btn { width: 24px; height: 24px; }
119
+ .pptxv-titlebar-btn:hover:not(:disabled) { background: var(--pptx-accent); color: var(--pptx-accent-foreground); }
120
+ .pptxv-titlebar-sep { width: 1px; height: 16px; background: var(--pptx-border); }
121
+ .pptxv-titlebar-filename { overflow: hidden; max-width: 180px; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
122
+ .pptxv-titlebar-dot { color: var(--pptx-muted-foreground); }
123
+ .pptxv-titlebar-status.is-error { color: #dc2626; }
124
+ .pptxv-titlebar-status.is-saving { color: #ca8a04; }
125
+ .pptxv-titlebar-search { position: absolute; left: 50%; width: min(320px, 30vw); transform: translateX(-50%); }
126
+ .pptxv-titlebar-spacer { flex: 1; min-width: 20px; }
127
+ .pptxv-cmdsearch { position: relative; width: 100%; }
128
+ .pptxv-cmdsearch-box { display: flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border: 1px solid var(--pptx-border); border-radius: 4px; background: var(--pptx-muted); color: var(--pptx-muted-foreground); }
129
+ .pptxv-cmdsearch-box svg { width: 13px; height: 13px; flex: none; }
130
+ .pptxv-cmdsearch-input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--pptx-foreground); font: inherit; }
131
+ .pptxv-cmdsearch-menu { position: absolute; z-index: 20; top: calc(100% + 4px); right: 0; left: 0; overflow: hidden; border: 1px solid var(--pptx-border); border-radius: 4px; background: var(--pptx-card); box-shadow: 0 8px 20px rgb(0 0 0 / 0.16); }
132
+ .pptxv-cmdsearch-item, .pptxv-cmdsearch-empty { display: block; width: 100%; padding: 7px 9px; border: 0; background: transparent; color: var(--pptx-foreground); font: inherit; text-align: left; }
133
+ .pptxv-cmdsearch-item { cursor: pointer; }
134
+ .pptxv-cmdsearch-item:hover { background: var(--pptx-accent); color: var(--pptx-accent-foreground); }
135
+ .pptxv-cmdsearch-empty { color: var(--pptx-muted-foreground); }
136
+ @media (max-width: 767px) { .pptxv-titlebar { display: none; } }
137
+
138
+ /* ── Body: thumbnail rail + viewport ─────────────────────────────────── */
139
+ .pptxv-body { display: flex; flex: 1; min-height: 0; }
140
+ .pptxv-thumbs {
141
+ flex: none;
142
+ width: 168px;
143
+ overflow-y: auto;
144
+ overflow-x: hidden;
145
+ padding: 8px;
146
+ border-right: 1px solid var(--pptx-border);
147
+ background: var(--pptx-card);
148
+ display: flex;
149
+ flex-direction: column;
150
+ gap: 8px;
151
+ }
152
+ .pptxv-thumb {
153
+ display: flex;
154
+ align-items: flex-start;
155
+ gap: 6px;
156
+ padding: 0;
157
+ border: none;
158
+ background: transparent;
159
+ color: inherit;
160
+ cursor: pointer;
161
+ text-align: left;
162
+ }
163
+ .pptxv-thumb-num {
164
+ flex: none;
165
+ width: 16px;
166
+ font-size: 11px;
167
+ color: var(--pptx-muted-foreground);
168
+ line-height: 1.4;
169
+ }
170
+ .pptxv-thumb-frame {
171
+ position: relative;
172
+ overflow: hidden;
173
+ border: 2px solid var(--pptx-border);
174
+ border-radius: var(--pptx-radius);
175
+ background: #fff;
176
+ }
177
+ .pptxv-thumb.is-active .pptxv-thumb-frame { border-color: var(--pptx-primary); }
178
+ .pptxv-thumb:focus-visible .pptxv-thumb-frame { outline: 2px solid var(--pptx-ring); }
179
+
180
+ /* ── Viewport / stage ────────────────────────────────────────────────── */
181
+ .pptxv-viewport {
182
+ flex: 1;
183
+ min-width: 0;
184
+ overflow: auto;
185
+ display: grid;
186
+ place-items: center;
187
+ padding: 16px;
188
+ background: var(--pptx-muted);
189
+ }
190
+ .pptxv-stage-wrap {
191
+ position: relative;
192
+ overflow: hidden;
193
+ flex: none;
194
+ box-shadow: 0 2px 12px rgb(0 0 0 / 0.25);
195
+ }
196
+ .pptxv-stage { background: #fff; }
197
+ .pptxv-stage-wrap[data-draw-tool="pen"],
198
+ .pptxv-stage-wrap[data-draw-tool="highlighter"] { cursor: crosshair; }
199
+ .pptxv-stage-wrap[data-draw-tool="eraser"] { cursor: cell; }
200
+ .pptxv-para { margin: 0; }
201
+
202
+ /* ── Selection overlay (editing) ─────────────────────────────────────── */
203
+ .pptxv-editor-overlay {
204
+ position: absolute;
205
+ inset: 0;
206
+ pointer-events: none;
207
+ z-index: 5;
208
+ }
209
+ .pptxv-sel-box {
210
+ position: absolute;
211
+ box-sizing: border-box;
212
+ border: 1px solid var(--pptx-ring);
213
+ pointer-events: none;
214
+ transform-origin: center;
215
+ }
216
+ .pptxv-sel-handle {
217
+ position: absolute;
218
+ width: 10px;
219
+ height: 10px;
220
+ margin: -5px 0 0 -5px;
221
+ padding: 0;
222
+ border: 1px solid var(--pptx-ring);
223
+ border-radius: 2px;
224
+ background: #fff;
225
+ pointer-events: auto;
226
+ box-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
227
+ }
228
+ .pptxv-rotate-stem {
229
+ position: absolute;
230
+ left: 50%;
231
+ width: 1px;
232
+ margin-left: -0.5px;
233
+ background: var(--pptx-ring);
234
+ pointer-events: none;
235
+ }
236
+ .pptxv-rotate-knob {
237
+ position: absolute;
238
+ left: 50%;
239
+ width: 12px;
240
+ height: 12px;
241
+ margin: -6px 0 0 -6px;
242
+ padding: 0;
243
+ border: 1px solid var(--pptx-ring);
244
+ border-radius: 50%;
245
+ background: #fff;
246
+ cursor: grab;
247
+ pointer-events: auto;
248
+ box-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
249
+ }
250
+ .pptxv-snap-layer {
251
+ position: absolute;
252
+ inset: 0;
253
+ pointer-events: none;
254
+ }
255
+ .pptxv-snap-line { position: absolute; background: var(--pptx-destructive); }
256
+ .pptxv-snap-v { top: 0; bottom: 0; width: 1px; }
257
+ .pptxv-snap-h { left: 0; right: 0; height: 1px; }
258
+
259
+ /* ── Speaker notes panel ─────────────────────────────────────────────── */
260
+ .pptxv-notes {
261
+ display: flex;
262
+ flex-direction: column;
263
+ flex: none;
264
+ border-top: 1px solid var(--pptx-border);
265
+ background: var(--pptx-card);
266
+ color: var(--pptx-card-foreground);
267
+ }
268
+ .pptxv-notes-header {
269
+ display: flex;
270
+ align-items: center;
271
+ justify-content: space-between;
272
+ width: 100%;
273
+ padding: 6px 10px;
274
+ border: none;
275
+ background: transparent;
276
+ color: var(--pptx-muted-foreground);
277
+ font-size: 0.8125rem;
278
+ font-weight: 600;
279
+ text-align: left;
280
+ cursor: pointer;
281
+ }
282
+ .pptxv-notes-header:hover { background: var(--pptx-accent); color: var(--pptx-accent-foreground); }
283
+ .pptxv-notes-header:focus-visible { outline: 2px solid var(--pptx-ring); outline-offset: -2px; }
284
+ .pptxv-notes-chevron { font-size: 0.75rem; }
285
+ .pptxv-notes-body { padding: 0 10px 10px; }
286
+ .pptxv-notes-body[hidden] { display: none; }
287
+ .pptxv-notes-toolbar { display: flex; align-items: center; gap: 2px; margin: 0 0 6px; }
288
+ .pptxv-notes-tool, .pptxv-notes-mode {
289
+ min-width: 26px; height: 24px; padding: 0 6px; border: 1px solid var(--pptx-border);
290
+ border-radius: 3px; background: var(--pptx-muted); color: var(--pptx-foreground); cursor: pointer;
291
+ font-size: 0.75rem; line-height: 1;
292
+ }
293
+ .pptxv-notes-mode { margin-left: auto; font-size: 0.6875rem; }
294
+ .pptxv-notes-tool:hover, .pptxv-notes-mode:hover { background: var(--pptx-accent); color: var(--pptx-accent-foreground); }
295
+ .pptxv-notes-tool:focus-visible, .pptxv-notes-mode:focus-visible { outline: 2px solid var(--pptx-ring); outline-offset: 1px; }
296
+ .pptxv-notes-rich-editor {
297
+ box-sizing: border-box; width: 100%; min-height: 76px; max-height: 192px; overflow-y: auto;
298
+ border: 1px solid var(--pptx-border); border-radius: 4px; background: var(--pptx-muted);
299
+ color: var(--pptx-foreground); padding: 7px 9px; font-size: 0.75rem; line-height: 1.4; white-space: pre-wrap;
300
+ }
301
+ .pptxv-notes-rich-editor:focus-visible { outline: 2px solid var(--pptx-ring); outline-offset: -1px; }
302
+ .pptxv-notes-rich-editor[contenteditable='false'] { cursor: default; opacity: 0.85; }
303
+ .pptxv-notes-textarea {
304
+ box-sizing: border-box;
305
+ width: 100%;
306
+ min-height: 80px;
307
+ max-height: 200px;
308
+ padding: 8px;
309
+ border: 1px solid var(--pptx-border);
310
+ border-radius: var(--pptx-radius);
311
+ background: var(--pptx-muted);
312
+ color: var(--pptx-foreground);
313
+ font: inherit;
314
+ font-size: 0.8125rem;
315
+ line-height: 1.5;
316
+ resize: vertical;
317
+ }
318
+ .pptxv-notes-textarea:focus-visible { outline: 2px solid var(--pptx-ring); outline-offset: -1px; }
319
+ .pptxv-notes-textarea:disabled,
320
+ .pptxv-notes-textarea:read-only { cursor: default; opacity: 0.85; }
321
+ .pptxv.pptxv-presenting .pptxv-notes { display: none; }
322
+
323
+ /* ── Bottom status bar ──────────────────────────────────────────────── */
324
+ .pptxv-statusbar {
325
+ display: flex;
326
+ align-items: center;
327
+ gap: 4px;
328
+ min-height: 28px;
329
+ padding: 2px 8px;
330
+ border-top: 1px solid var(--pptx-border);
331
+ background: color-mix(in srgb, var(--pptx-muted) 55%, var(--pptx-card));
332
+ color: var(--pptx-muted-foreground);
333
+ font-size: 10px;
334
+ }
335
+ .pptxv-statusbar-spacer { flex: 1; }
336
+ .pptxv-statusbar-sep { width: 1px; height: 12px; margin: 0 4px; background: var(--pptx-border); opacity: 0.6; }
337
+ .pptxv-statusbar-btn {
338
+ display: inline-flex;
339
+ align-items: center;
340
+ justify-content: center;
341
+ gap: 4px;
342
+ min-width: 24px;
343
+ height: 22px;
344
+ padding: 2px 4px;
345
+ border: none;
346
+ border-radius: 3px;
347
+ background: transparent;
348
+ color: inherit;
349
+ font: inherit;
350
+ cursor: pointer;
351
+ }
352
+ .pptxv-statusbar-btn:hover:not(:disabled) { background: var(--pptx-accent); color: var(--pptx-accent-foreground); }
353
+ .pptxv-statusbar-btn:disabled { opacity: 0.4; cursor: default; }
354
+ .pptxv-statusbar-btn.is-active { color: var(--pptx-primary); }
355
+ .pptxv-statusbar-btn:focus-visible,
356
+ .pptxv-statusbar-zoom:focus-visible { outline: 2px solid var(--pptx-ring); outline-offset: 1px; }
357
+ .pptxv-statusbar-btn svg, .pptxv-statusbar-icon svg { width: 12px; height: 12px; display: block; }
358
+ .pptxv-statusbar-counter, .pptxv-statusbar-text { white-space: nowrap; }
359
+ .pptxv-statusbar-save.is-saving { color: #ca8a04; }
360
+ .pptxv-statusbar-save.is-error { color: #dc2626; }
361
+ .pptxv-statusbar-zoom {
362
+ min-width: 48px;
363
+ height: 22px;
364
+ padding: 2px 6px;
365
+ border: none;
366
+ border-radius: 3px;
367
+ background: transparent;
368
+ color: inherit;
369
+ font: inherit;
370
+ font-variant-numeric: tabular-nums;
371
+ cursor: pointer;
372
+ }
373
+ .pptxv-statusbar-zoom:hover { background: var(--pptx-accent); color: var(--pptx-accent-foreground); }
374
+ .pptxv.pptxv-presenting .pptxv-statusbar { display: none; }
375
+
376
+ /* ── Compact mobile navigation ───────────────────────────────────────── */
377
+ .pptxv-mobile-nav { display: none; }
378
+ @media (max-width: 767px) {
379
+ .pptxv-ribbon,
380
+ .pptxv-thumbs,
381
+ .pptxv-inspector,
382
+ .pptxv-statusbar { display: none; }
383
+ .pptxv-viewport { padding: 10px; }
384
+ .pptxv-mobile-nav {
385
+ display: grid;
386
+ grid-template-columns: auto minmax(48px, 1fr) auto auto auto minmax(42px, auto) auto auto;
387
+ align-items: center;
388
+ gap: 2px;
389
+ min-height: 52px;
390
+ padding: 6px max(10px, env(safe-area-inset-left)) max(6px, env(safe-area-inset-bottom));
391
+ border-top: 1px solid var(--pptx-border);
392
+ background: var(--pptx-card);
393
+ color: var(--pptx-card-foreground);
394
+ }
395
+ .pptxv-mobile-nav-btn {
396
+ width: 36px;
397
+ height: 36px;
398
+ border-radius: 8px;
399
+ }
400
+ .pptxv-mobile-nav-btn svg { width: 18px; height: 18px; }
401
+ .pptxv-mobile-nav-counter,
402
+ .pptxv-mobile-nav-zoom {
403
+ justify-self: center;
404
+ font-size: 11px;
405
+ font-variant-numeric: tabular-nums;
406
+ white-space: nowrap;
407
+ }
408
+ .pptxv-mobile-nav-counter { color: var(--pptx-muted-foreground); }
409
+ }
410
+ .pptxv.pptxv-presenting .pptxv-mobile-nav { display: none; }
411
+
412
+ /* ── Placeholder (element types without a renderer yet) ──────────────── */
413
+ .pptxv-placeholder {
414
+ display: flex;
415
+ align-items: center;
416
+ justify-content: center;
417
+ border: 1px dashed var(--pptx-muted-foreground);
418
+ border-radius: 4px;
419
+ background: rgb(127 127 127 / 0.08);
420
+ }
421
+ .pptxv-placeholder-label {
422
+ padding: 2px 8px;
423
+ font-size: 12px;
424
+ color: var(--pptx-muted-foreground);
425
+ background: rgb(127 127 127 / 0.12);
426
+ border-radius: 4px;
427
+ }
428
+
429
+ /* ── Overlays ────────────────────────────────────────────────────────── */
430
+ .pptxv-overlay {
431
+ position: absolute;
432
+ inset: 0;
433
+ display: flex;
434
+ align-items: center;
435
+ justify-content: center;
436
+ background: color-mix(in srgb, var(--pptx-background) 70%, transparent);
437
+ z-index: 10;
438
+ }
439
+ .pptxv-overlay[hidden] { display: none; }
440
+ .pptxv-error-message { color: var(--pptx-destructive); padding: 0 24px; text-align: center; }
441
+ .pptxv-empty { color: var(--pptx-muted-foreground); }
442
+
443
+ /* ── Presentation (fullscreen) mode ──────────────────────────────────── */
444
+ .pptxv.pptxv-presenting .pptxv-ribbon,
445
+ .pptxv.pptxv-presenting .pptxv-thumbs,
446
+ .pptxv.pptxv-presenting .pptxv-titlebar { display: none; }
447
+ .pptxv.pptxv-presenting .pptxv-viewport { background: #000; padding: 0; }
448
+ .pptxv.pptxv-presenting .pptxv-stage-wrap { box-shadow: none; }
449
+
450
+
451
+ .pptxv-marquee { position: absolute; z-index: 4; border: 1px solid var(--pptx-primary); background: color-mix(in srgb, var(--pptx-primary) 14%, transparent); pointer-events: none; }
452
+ /* Colour swatch control (native <input type=color>, used by the inspector). */
453
+ .pptxv-color {
454
+ display: inline-flex;
455
+ align-items: center;
456
+ justify-content: center;
457
+ width: 28px;
458
+ height: 28px;
459
+ border-radius: var(--pptx-radius);
460
+ cursor: pointer;
461
+ }
462
+ .pptxv-color:hover { background: var(--pptx-accent); }
463
+ .pptxv-color.is-disabled { opacity: 0.4; cursor: default; }
464
+ .pptxv-color-input {
465
+ width: 20px;
466
+ height: 20px;
467
+ padding: 0;
468
+ border: 1px solid var(--pptx-border);
469
+ border-radius: 4px;
470
+ background: none;
471
+ cursor: pointer;
472
+ }
473
+ .pptxv-color-input:disabled { cursor: default; }
474
+
475
+ /* Numeric field */
476
+ .pptxv-field {
477
+ display: inline-flex;
478
+ align-items: center;
479
+ gap: 4px;
480
+ font-size: 12px;
481
+ color: var(--pptx-muted-foreground);
482
+ }
483
+ .pptxv-field-label { white-space: nowrap; }
484
+ .pptxv-field-input {
485
+ width: 64px;
486
+ height: 26px;
487
+ padding: 2px 6px;
488
+ border: 1px solid var(--pptx-border);
489
+ border-radius: var(--pptx-radius);
490
+ background: var(--pptx-background);
491
+ color: var(--pptx-foreground);
492
+ font: inherit;
493
+ font-size: 12px;
494
+ }
495
+ .pptxv-field-compact .pptxv-field-input { width: 48px; }
496
+ .pptxv-field-input:focus-visible { outline: 2px solid var(--pptx-ring); outline-offset: -1px; }
497
+ .pptxv-field-input:disabled { opacity: 0.5; }
498
+
499
+ /* ── Property inspector ──────────────────────────────────────────────── */
500
+ .pptxv-inspector {
501
+ flex: none;
502
+ width: 232px;
503
+ overflow-y: auto;
504
+ border-left: 1px solid var(--pptx-border);
505
+ background: var(--pptx-card);
506
+ color: var(--pptx-card-foreground);
507
+ font-size: 12px;
508
+ }
509
+ .pptxv-inspector[hidden] { display: none; }
510
+ .pptxv-inspector-header {
511
+ display: flex;
512
+ align-items: center;
513
+ justify-content: space-between;
514
+ width: 100%;
515
+ padding: 8px 12px;
516
+ border: none;
517
+ border-bottom: 1px solid var(--pptx-border);
518
+ background: transparent;
519
+ color: var(--pptx-foreground);
520
+ font: inherit;
521
+ font-weight: 600;
522
+ cursor: pointer;
523
+ }
524
+ .pptxv-inspector-header:hover { background: var(--pptx-accent); color: var(--pptx-accent-foreground); }
525
+ .pptxv-inspector-body { padding: 10px 12px; }
526
+ .pptxv-inspector-body[hidden] { display: none; }
527
+ .pptxv-inspector-empty { color: var(--pptx-muted-foreground); margin: 0; }
528
+ .pptxv-inspector-empty[hidden] { display: none; }
529
+ .pptxv-inspector-section { margin-bottom: 14px; }
530
+ .pptxv-inspector-section[hidden] { display: none; }
531
+ .pptxv-inspector-section-title {
532
+ margin: 0 0 6px;
533
+ font-size: 11px;
534
+ font-weight: 600;
535
+ text-transform: uppercase;
536
+ letter-spacing: 0.04em;
537
+ color: var(--pptx-muted-foreground);
538
+ }
539
+ .pptxv-inspector-grid {
540
+ display: grid;
541
+ grid-template-columns: repeat(2, 1fr);
542
+ gap: 6px 8px;
543
+ }
544
+ .pptxv-inspector-grid .pptxv-field { justify-content: space-between; }
545
+ .pptxv-inspector-grid .pptxv-field-input { width: 100%; }
546
+ .pptxv-inspector-row {
547
+ display: flex;
548
+ align-items: center;
549
+ gap: 6px;
550
+ margin-bottom: 8px;
551
+ }
552
+ .pptxv-inspector-row-label { color: var(--pptx-muted-foreground); }
553
+
554
+ /* Select / checkbox / range fields (text/image/table inspector sections). */
555
+ .pptxv-field-select,
556
+ .pptxv-field-checkbox,
557
+ .pptxv-field-range {
558
+ display: flex;
559
+ align-items: center;
560
+ justify-content: space-between;
561
+ gap: 8px;
562
+ margin-bottom: 8px;
563
+ }
564
+ .pptxv-field-checkbox { justify-content: flex-start; }
565
+ .pptxv-field-checkbox .pptxv-field-label { order: 2; }
566
+ .pptxv-field-select-input {
567
+ height: 26px;
568
+ padding: 2px 6px;
569
+ border: 1px solid var(--pptx-border);
570
+ border-radius: var(--pptx-radius);
571
+ background: var(--pptx-background);
572
+ color: var(--pptx-foreground);
573
+ font: inherit;
574
+ font-size: 12px;
575
+ }
576
+ .pptxv-field-select-input:disabled { opacity: 0.5; }
577
+ .pptxv-field-range { flex-direction: column; align-items: stretch; }
578
+ .pptxv-field-range-row { display: flex; align-items: center; gap: 8px; }
579
+ .pptxv-field-range-row input[type='range'] { flex: 1; }
580
+ .pptxv-field-range-readout {
581
+ min-width: 34px;
582
+ text-align: right;
583
+ color: var(--pptx-muted-foreground);
584
+ font-variant-numeric: tabular-nums;
585
+ }
586
+
587
+ /* Gradient fill sub-panel (Fill & Stroke section). */
588
+ .pptxv-inspector-gradient { margin: 4px 0 8px; padding-left: 4px; border-left: 2px solid var(--pptx-border); }
589
+ .pptxv-inspector-gradient[hidden] { display: none; }
590
+ .pptxv-inspector-gradient-stops { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
591
+
592
+ /* Presentation mode hides all editing chrome (the ribbon is covered by
593
+ * `.pptxv.pptxv-presenting .pptxv-ribbon` in css.ts). */
594
+ .pptxv.pptxv-presenting .pptxv-inspector { display: none; }
595
+
596
+ /* ── Accessibility checker ───────────────────────────────────────────── */
597
+ .pptxv-accessibility-panel {
598
+ position: absolute;
599
+ top: 56px;
600
+ right: 12px;
601
+ z-index: 20;
602
+ width: min(360px, calc(100% - 24px));
603
+ max-height: min(560px, calc(100% - 72px));
604
+ overflow: auto;
605
+ border: 1px solid var(--pptx-border);
606
+ border-radius: calc(var(--pptx-radius) + 2px);
607
+ background: var(--pptx-card);
608
+ color: var(--pptx-card-foreground);
609
+ box-shadow: 0 16px 36px rgb(0 0 0 / 20%);
610
+ }
611
+ .pptxv-accessibility-panel[hidden] { display: none; }
612
+ .pptxv-accessibility-header { display: flex; align-items: center; justify-content: space-between; padding: 12px; border-bottom: 1px solid var(--pptx-border); }
613
+ .pptxv-accessibility-title { margin: 0; font-size: 13px; }
614
+ .pptxv-accessibility-close { border: 0; border-radius: var(--pptx-radius); background: transparent; color: var(--pptx-foreground); cursor: pointer; font: inherit; font-size: 12px; padding: 4px 7px; }
615
+ .pptxv-accessibility-close:hover { background: var(--pptx-accent); color: var(--pptx-accent-foreground); }
616
+ .pptxv-accessibility-summary { margin: 0; padding: 8px 12px; color: var(--pptx-muted-foreground); font-size: 11px; }
617
+ .pptxv-accessibility-list { padding: 0 8px 8px; }
618
+ .pptxv-accessibility-group { margin-top: 8px; }
619
+ .pptxv-accessibility-group-title { margin: 0 4px 5px; color: var(--pptx-muted-foreground); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }
620
+ .pptxv-accessibility-issue { display: grid; width: 100%; grid-template-columns: 1fr auto; gap: 3px 10px; margin: 3px 0; padding: 8px; border: 0; border-left: 3px solid var(--pptx-border); border-radius: var(--pptx-radius); background: var(--pptx-muted); color: inherit; cursor: pointer; font: inherit; text-align: left; }
621
+ .pptxv-accessibility-group.is-error .pptxv-accessibility-issue { border-left-color: #d64545; }
622
+ .pptxv-accessibility-group.is-warning .pptxv-accessibility-issue { border-left-color: #d9911b; }
623
+ .pptxv-accessibility-group.is-tip .pptxv-accessibility-issue { border-left-color: #4b8bc5; }
624
+ .pptxv-accessibility-issue:hover { background: var(--pptx-accent); color: var(--pptx-accent-foreground); }
625
+ .pptxv-accessibility-issue-type { font-size: 11px; }
626
+ .pptxv-accessibility-issue-message { grid-column: 1 / -1; color: var(--pptx-muted-foreground); font-size: 11px; line-height: 1.35; }
627
+ .pptxv-accessibility-issue:hover .pptxv-accessibility-issue-message { color: inherit; }
628
+ .pptxv-accessibility-issue-slide { color: var(--pptx-muted-foreground); font-size: 10px; }
629
+ .pptxv-accessibility-empty { margin: 12px 4px; color: var(--pptx-muted-foreground); font-size: 12px; text-align: center; }
630
+ .pptxv.pptxv-presenting .pptxv-accessibility-panel { display: none; }
631
+
632
+
633
+ /* ── Ribbon shell and React-aligned command row ─────────────────────────── */
634
+ .pptxv-ribbon {
635
+ display: flex;
636
+ flex-direction: column;
637
+ border-bottom: 1px solid var(--pptx-border);
638
+ background: var(--pptx-card);
639
+ color: var(--pptx-card-foreground);
640
+ flex: none;
641
+ }
642
+ .pptxv-ribbon-primary {
643
+ display: flex;
644
+ align-items: center;
645
+ justify-content: flex-end;
646
+ gap: 4px;
647
+ min-height: 26px;
648
+ padding: 4px 8px;
649
+ border-bottom: 1px solid var(--pptx-border);
650
+ }
651
+ .pptxv-ribbon-primary[hidden] { display: none; }
652
+ /* ── Tab bar ─────────────────────────────────────────────────────────── */
653
+ .pptxv-ribbon-tabs {
654
+ display: flex;
655
+ align-items: center;
656
+ gap: 2px;
657
+ padding: 0 6px;
658
+ border-bottom: 1px solid var(--pptx-border);
659
+ overflow-x: auto;
660
+ }
661
+ .pptxv-ribbon-tabs[hidden] { display: none; }
662
+ .pptxv-ribbon-tab {
663
+ padding: 6px 12px;
664
+ border: none;
665
+ border-bottom: 2px solid transparent;
666
+ background: transparent;
667
+ color: var(--pptx-muted-foreground);
668
+ font: inherit;
669
+ font-size: 12px;
670
+ font-weight: 500;
671
+ white-space: nowrap;
672
+ cursor: pointer;
673
+ }
674
+ .pptxv-ribbon-tab:hover { color: var(--pptx-foreground); background: var(--pptx-accent); }
675
+ .pptxv-ribbon-tab.is-active { color: var(--pptx-foreground); border-bottom-color: var(--pptx-primary); }
676
+ .pptxv-ribbon-tab-file { color: var(--pptx-primary); }
677
+ .pptxv-ribbon-tab-file.is-active {
678
+ color: #fff;
679
+ background: color-mix(in srgb, var(--pptx-primary) 80%, transparent);
680
+ border-radius: var(--pptx-radius);
681
+ }
682
+
683
+ /* ── Tab content + groups ────────────────────────────────────────────── */
684
+ .pptxv-ribbon-tab-content {
685
+ display: flex;
686
+ flex-wrap: wrap;
687
+ align-items: flex-start;
688
+ gap: 2px;
689
+ padding: 6px 8px;
690
+ }
691
+ .pptxv-ribbon-tab-content[hidden] { display: none; }
692
+ .pptxv-rgroup {
693
+ display: flex;
694
+ flex-direction: column;
695
+ align-items: center;
696
+ gap: 2px;
697
+ padding: 2px 8px;
698
+ border-right: 1px solid var(--pptx-border);
699
+ }
700
+ .pptxv-rgroup:last-child { border-right: none; }
701
+ .pptxv-rgroup-row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
702
+ .pptxv-rgroup-label {
703
+ font-size: 9px;
704
+ color: var(--pptx-muted-foreground);
705
+ text-transform: uppercase;
706
+ letter-spacing: 0.03em;
707
+ }
708
+ .pptxv-rgroup .pptxv-btn.is-active { background: var(--pptx-accent); color: var(--pptx-accent-foreground); }
709
+
710
+ /* ── Shape insert grid ───────────────────────────────────────────────── */
711
+ .pptxv-shape-grid {
712
+ display: grid;
713
+ grid-template-columns: repeat(10, 28px);
714
+ gap: 2px;
715
+ max-width: 320px;
716
+ }
717
+
718
+ /* ── Dropdown popover (font/size/spacing/case/line-spacing) ─────────────*/
719
+ .pptxv-dropdown { position: relative; display: inline-flex; }
720
+ .pptxv-dropdown-trigger {
721
+ display: inline-flex;
722
+ align-items: center;
723
+ gap: 4px;
724
+ height: 28px;
725
+ padding: 0 6px;
726
+ border: 1px solid var(--pptx-border);
727
+ border-radius: var(--pptx-radius);
728
+ background: var(--pptx-background);
729
+ color: inherit;
730
+ font: inherit;
731
+ font-size: 11px;
732
+ cursor: pointer;
733
+ }
734
+ .pptxv-dropdown-trigger:hover:not(:disabled) { background: var(--pptx-accent); }
735
+ .pptxv-dropdown-trigger:disabled { opacity: 0.4; cursor: default; }
736
+ .pptxv-dropdown-trigger.is-active { background: var(--pptx-accent); }
737
+ .pptxv-dropdown-trigger svg { width: 12px; height: 12px; flex: none; }
738
+ .pptxv-dropdown-text { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
739
+ .pptxv-font-family-dd .pptxv-dropdown-text { max-width: 120px; }
740
+ .pptxv-font-size-dd .pptxv-dropdown-trigger { min-width: 44px; justify-content: space-between; }
741
+ .pptxv-dropdown-menu {
742
+ position: absolute;
743
+ top: calc(100% + 4px);
744
+ left: 0;
745
+ z-index: 30;
746
+ min-width: 140px;
747
+ max-height: 240px;
748
+ overflow-y: auto;
749
+ padding: 4px;
750
+ border: 1px solid var(--pptx-border);
751
+ border-radius: var(--pptx-radius);
752
+ background: var(--pptx-card);
753
+ color: var(--pptx-card-foreground);
754
+ box-shadow: 0 6px 20px rgb(0 0 0 / 0.25);
755
+ }
756
+ .pptxv-dropdown-menu[hidden] { display: none; }
757
+ .pptxv-dropdown-item {
758
+ display: block;
759
+ width: 100%;
760
+ padding: 6px 8px;
761
+ border: none;
762
+ border-radius: 4px;
763
+ background: transparent;
764
+ color: inherit;
765
+ font: inherit;
766
+ text-align: left;
767
+ cursor: pointer;
768
+ }
769
+ .pptxv-dropdown-item:hover { background: var(--pptx-accent); color: var(--pptx-accent-foreground); }
770
+ .pptxv-dropdown-item.is-selected { font-weight: 600; color: var(--pptx-primary); }
771
+
772
+ /* ── Swatch colour picker ────────────────────────────────────────────── */
773
+ .pptxv-swatch-picker { position: relative; display: inline-flex; }
774
+ .pptxv-swatch-trigger { flex-direction: column; height: 28px; padding: 2px 6px; gap: 0; }
775
+ .pptxv-swatch-swab { display: block; width: 16px; height: 3px; border-radius: 1px; margin-top: 1px; }
776
+ .pptxv-swatch-menu {
777
+ position: absolute;
778
+ top: calc(100% + 4px);
779
+ left: 0;
780
+ z-index: 30;
781
+ padding: 8px;
782
+ border: 1px solid var(--pptx-border);
783
+ border-radius: var(--pptx-radius);
784
+ background: var(--pptx-card);
785
+ color: var(--pptx-card-foreground);
786
+ box-shadow: 0 6px 20px rgb(0 0 0 / 0.25);
787
+ }
788
+ .pptxv-swatch-menu[hidden] { display: none; }
789
+ .pptxv-swatch-grid { display: grid; grid-template-columns: repeat(5, 20px); gap: 4px; margin-bottom: 6px; }
790
+ .pptxv-swatch {
791
+ width: 20px;
792
+ height: 20px;
793
+ padding: 0;
794
+ border: 1px solid var(--pptx-border);
795
+ border-radius: 50%;
796
+ cursor: pointer;
797
+ }
798
+ .pptxv-swatch:hover { transform: scale(1.15); }
799
+ .pptxv-swatch.is-selected { outline: 2px solid var(--pptx-ring); outline-offset: 1px; }
800
+ .pptxv-swatch-custom {
801
+ display: flex;
802
+ align-items: center;
803
+ justify-content: space-between;
804
+ gap: 6px;
805
+ font-size: 11px;
806
+ color: var(--pptx-muted-foreground);
807
+ cursor: pointer;
808
+ }
809
+ .pptxv-swatch-custom-input {
810
+ width: 20px;
811
+ height: 20px;
812
+ padding: 0;
813
+ border: 1px solid var(--pptx-border);
814
+ border-radius: 4px;
815
+ background: none;
816
+ cursor: pointer;
817
+ }
818
+
819
+ /* ── Find & Replace docked panel ─────────────────────────────────────── */
820
+ .pptxv-findreplace {
821
+ display: flex;
822
+ flex-direction: column;
823
+ gap: 4px;
824
+ padding: 6px 8px;
825
+ border-bottom: 1px solid var(--pptx-border);
826
+ background: var(--pptx-muted);
827
+ }
828
+ .pptxv-findreplace[hidden] { display: none; }
829
+ .pptxv-findreplace-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
830
+ .pptxv-findreplace-input {
831
+ height: 28px;
832
+ min-width: 140px;
833
+ padding: 0 8px;
834
+ border: 1px solid var(--pptx-border);
835
+ border-radius: var(--pptx-radius);
836
+ background: var(--pptx-background);
837
+ color: var(--pptx-foreground);
838
+ font: inherit;
839
+ font-size: 12px;
840
+ }
841
+ .pptxv-findreplace-input:focus-visible { outline: 2px solid var(--pptx-ring); outline-offset: -1px; }
842
+ .pptxv-findreplace-checkbox {
843
+ display: inline-flex;
844
+ align-items: center;
845
+ gap: 4px;
846
+ font-size: 11px;
847
+ color: var(--pptx-muted-foreground);
848
+ cursor: pointer;
849
+ }
850
+ .pptxv-findreplace-status { font-size: 11px; color: var(--pptx-muted-foreground); }
851
+
852
+
853
+ /* ── Modal dialog (Share / Broadcast) ────────────────────────────────── */
854
+ .pptxv-modal-backdrop {
855
+ position: fixed;
856
+ inset: 0;
857
+ z-index: 1000;
858
+ display: flex;
859
+ align-items: center;
860
+ justify-content: center;
861
+ background: rgb(0 0 0 / 0.5);
862
+ }
863
+ .pptxv-modal-backdrop[hidden] { display: none; }
864
+ .pptxv-modal-panel {
865
+ display: flex;
866
+ flex-direction: column;
867
+ max-height: 88vh;
868
+ min-width: 320px;
869
+ max-width: min(92vw, 480px);
870
+ overflow: hidden;
871
+ border: 1px solid var(--pptx-border);
872
+ border-radius: var(--pptx-radius);
873
+ background: var(--pptx-card);
874
+ color: var(--pptx-card-foreground);
875
+ box-shadow: 0 12px 36px rgb(0 0 0 / 0.35);
876
+ }
877
+ .pptxv-modal-panel:focus { outline: none; }
878
+ .pptxv-modal-header {
879
+ display: flex;
880
+ align-items: center;
881
+ justify-content: space-between;
882
+ gap: 12px;
883
+ padding: 12px 16px;
884
+ border-bottom: 1px solid var(--pptx-border);
885
+ }
886
+ .pptxv-modal-title { margin: 0; font-size: 14px; font-weight: 600; }
887
+ .pptxv-modal-close {
888
+ display: inline-flex;
889
+ align-items: center;
890
+ justify-content: center;
891
+ width: 24px;
892
+ height: 24px;
893
+ border: none;
894
+ border-radius: 4px;
895
+ background: transparent;
896
+ color: var(--pptx-muted-foreground);
897
+ font-size: 18px;
898
+ line-height: 1;
899
+ cursor: pointer;
900
+ }
901
+ .pptxv-modal-close:hover { background: var(--pptx-muted); color: var(--pptx-foreground); }
902
+ .pptxv-modal-body { overflow-y: auto; padding: 16px; }
903
+ .pptxv-modal-footer {
904
+ display: flex;
905
+ justify-content: flex-end;
906
+ gap: 8px;
907
+ padding: 12px 16px;
908
+ border-top: 1px solid var(--pptx-border);
909
+ }
910
+ .pptxv-modal-section { display: flex; flex-direction: column; gap: 12px; }
911
+ .pptxv-modal-section[hidden] { display: none; }
912
+ .pptxv-modal-desc { margin: 0; font-size: 13px; line-height: 1.5; color: var(--pptx-muted-foreground); }
913
+ .pptxv-modal-hint { margin: 4px 0 0; font-size: 11px; color: var(--pptx-muted-foreground); }
914
+ .pptxv-modal-hint[hidden] { display: none; }
915
+ .pptxv-modal-field { display: flex; flex-direction: column; gap: 6px; }
916
+ .pptxv-modal-label { font-size: 12px; font-weight: 500; }
917
+ .pptxv-modal-input {
918
+ width: 100%;
919
+ padding: 6px 10px;
920
+ border: 1px solid var(--pptx-border);
921
+ border-radius: var(--pptx-radius);
922
+ background: var(--pptx-background);
923
+ color: var(--pptx-foreground);
924
+ font: inherit;
925
+ font-size: 13px;
926
+ }
927
+ .pptxv-modal-input:focus-visible { outline: 2px solid var(--pptx-ring); outline-offset: -1px; }
928
+ .pptxv-modal-link-row { display: flex; align-items: center; gap: 8px; }
929
+ .pptxv-modal-link-row .pptxv-modal-input { flex: 1; }
930
+ .pptxv-modal-btn {
931
+ padding: 6px 12px;
932
+ border: 1px solid var(--pptx-border);
933
+ border-radius: var(--pptx-radius);
934
+ background: var(--pptx-muted);
935
+ color: var(--pptx-foreground);
936
+ font-size: 12px;
937
+ white-space: nowrap;
938
+ cursor: pointer;
939
+ }
940
+ .pptxv-modal-btn:hover:not(:disabled) { background: var(--pptx-accent); color: var(--pptx-accent-foreground); }
941
+ .pptxv-modal-btn:disabled { opacity: 0.4; cursor: default; }
942
+ .pptxv-modal-btn-primary {
943
+ border-color: var(--pptx-primary);
944
+ background: var(--pptx-primary);
945
+ color: var(--pptx-primary-foreground);
946
+ }
947
+ .pptxv-modal-danger-btn {
948
+ width: 100%;
949
+ padding: 8px 12px;
950
+ border: 1px solid rgb(239 68 68 / 0.3);
951
+ border-radius: var(--pptx-radius);
952
+ background: rgb(239 68 68 / 0.1);
953
+ color: #f87171;
954
+ font-size: 12px;
955
+ font-weight: 500;
956
+ cursor: pointer;
957
+ }
958
+ .pptxv-modal-danger-btn:hover { background: rgb(239 68 68 / 0.2); }
959
+
960
+ /* ── Remote-cursor overlay ────────────────────────────────────────────── */
961
+ .pptxv-collab-cursors {
962
+ position: absolute;
963
+ inset: 0;
964
+ pointer-events: none;
965
+ overflow: visible;
966
+ z-index: 20;
967
+ }
968
+ .pptxv-collab-cursor {
969
+ position: absolute;
970
+ top: 0;
971
+ left: 0;
972
+ pointer-events: none;
973
+ will-change: transform;
974
+ transition: transform 90ms linear;
975
+ }
976
+ .pptxv-collab-pointer { display: block; filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.35)); }
977
+ .pptxv-collab-label {
978
+ position: absolute;
979
+ top: 16px;
980
+ left: 12px;
981
+ max-width: 150px;
982
+ padding: 2px 6px;
983
+ border-radius: 4px;
984
+ color: #ffffff;
985
+ font-size: 10px;
986
+ font-weight: 500;
987
+ line-height: 1.2;
988
+ white-space: nowrap;
989
+ overflow: hidden;
990
+ text-overflow: ellipsis;
991
+ box-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
992
+ }
993
+
994
+ /* ── Toolbar collaboration-status pill ───────────────────────────────── */
995
+ .pptxv-collab-status {
996
+ display: inline-flex;
997
+ align-items: center;
998
+ gap: 6px;
999
+ padding: 0 6px;
1000
+ font-size: 11px;
1001
+ white-space: nowrap;
1002
+ }
1003
+ .pptxv-collab-status[hidden] { display: none; }
1004
+ .pptxv-collab-status-dot {
1005
+ width: 8px;
1006
+ height: 8px;
1007
+ border-radius: 50%;
1008
+ background: var(--pptx-muted-foreground);
1009
+ }
1010
+ .pptxv-collab-status-dot.is-connected { background: #22c55e; }
1011
+ .pptxv-collab-status-dot.is-connecting { background: #eab308; }
1012
+ .pptxv-collab-status-dot.is-error { background: #ef4444; }
1013
+ .pptxv-collab-status-text { color: var(--pptx-muted-foreground); }
1014
+ .pptxv-collab-status-retry {
1015
+ border: none;
1016
+ background: transparent;
1017
+ color: var(--pptx-primary);
1018
+ font-size: 11px;
1019
+ text-decoration: underline;
1020
+ cursor: pointer;
1021
+ }
1022
+ .pptxv-collab-status-retry[hidden] { display: none; }
1023
+
1024
+ /* ── Follow-mode bar ─────────────────────────────────────────────────── */
1025
+ .pptxv-follow-bar {
1026
+ position: absolute;
1027
+ left: 50%;
1028
+ bottom: 12px;
1029
+ z-index: 15;
1030
+ display: flex;
1031
+ flex-wrap: wrap;
1032
+ align-items: center;
1033
+ gap: 10px;
1034
+ max-width: calc(100% - 24px);
1035
+ padding: 6px 10px;
1036
+ border-radius: var(--pptx-radius);
1037
+ background: color-mix(in srgb, var(--pptx-card) 95%, transparent);
1038
+ color: var(--pptx-card-foreground);
1039
+ font-size: 12px;
1040
+ transform: translateX(-50%);
1041
+ box-shadow: 0 4px 16px rgb(0 0 0 / 0.25);
1042
+ }
1043
+ .pptxv-follow-bar[hidden] { display: none; }
1044
+ .pptxv-follow-status {
1045
+ display: inline-flex;
1046
+ align-items: center;
1047
+ gap: 6px;
1048
+ white-space: nowrap;
1049
+ color: var(--pptx-muted-foreground);
1050
+ }
1051
+ .pptxv-follow-stop {
1052
+ padding: 2px 8px;
1053
+ border: 1px solid var(--pptx-border);
1054
+ border-radius: var(--pptx-radius);
1055
+ background: transparent;
1056
+ color: var(--pptx-foreground);
1057
+ font-size: 11px;
1058
+ cursor: pointer;
1059
+ }
1060
+ .pptxv-follow-stop:hover { background: var(--pptx-muted); }
1061
+ .pptxv-follow-list {
1062
+ display: flex;
1063
+ align-items: center;
1064
+ gap: 6px;
1065
+ margin: 0;
1066
+ padding: 0;
1067
+ list-style: none;
1068
+ }
1069
+ .pptxv-follow-peer {
1070
+ display: inline-flex;
1071
+ align-items: center;
1072
+ gap: 6px;
1073
+ padding: 2px 8px 2px 2px;
1074
+ border: 1px solid transparent;
1075
+ border-radius: 9999px;
1076
+ background: color-mix(in srgb, var(--pptx-muted) 60%, transparent);
1077
+ color: var(--pptx-foreground);
1078
+ cursor: pointer;
1079
+ }
1080
+ .pptxv-follow-peer:hover { background: var(--pptx-muted); }
1081
+ .pptxv-follow-peer.is-following { border-color: var(--pptx-primary); background: color-mix(in srgb, var(--pptx-primary) 30%, transparent); }
1082
+ .pptxv-follow-avatar {
1083
+ display: inline-flex;
1084
+ align-items: center;
1085
+ justify-content: center;
1086
+ width: 22px;
1087
+ height: 22px;
1088
+ border-radius: 50%;
1089
+ color: #ffffff;
1090
+ font-size: 10px;
1091
+ font-weight: 600;
1092
+ line-height: 1;
1093
+ }
1094
+ .pptxv-follow-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1095
+
1096
+ /* Presentation mode hides all collaboration chrome. */
1097
+ .pptxv.pptxv-presenting .pptxv-collab-status,
1098
+ .pptxv.pptxv-presenting .pptxv-follow-bar { display: none; }
1099
+
1100
+
1101
+ .pptxv-presentation-touch-controls { display: none; }
1102
+ @media (any-pointer: coarse) {
1103
+ .pptxv.pptxv-presenting .pptxv-presentation-touch-controls { display: contents; }
1104
+ .pptxv-presentation-touch-controls .pptxv-btn { position: fixed; z-index: 90; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: rgb(0 0 0 / 55%); box-shadow: 0 4px 14px rgb(0 0 0 / 30%); color: #fff; font-size: 28px; touch-action: manipulation; }
1105
+ .pptxv-presentation-touch-controls .pptxv-btn:active { background: rgb(0 0 0 / 75%); }
1106
+ .pptxv-presentation-touch-controls .pptxv-btn:disabled { opacity: .3; }
1107
+ .pptxv-presentation-touch-controls svg { width: 26px; height: 26px; }
1108
+ .pptxv-presentation-touch-exit { top: calc(env(safe-area-inset-top, 0px) + 8px); right: calc(env(safe-area-inset-right, 0px) + 8px); }
1109
+ .pptxv-presentation-touch-prev { top: 50%; left: calc(env(safe-area-inset-left, 0px) + 8px); transform: translateY(-50%); }
1110
+ .pptxv-presentation-touch-next { top: 50%; right: calc(env(safe-area-inset-right, 0px) + 8px); transform: translateY(-50%); }
1111
+ .pptxv-presentation-touch-counter { position: fixed; z-index: 90; bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); left: 50%; padding: 4px 12px; border-radius: 999px; background: rgb(0 0 0 / 55%); color: #fff; font: 12px ui-monospace, monospace; font-variant-numeric: tabular-nums; pointer-events: none; transform: translateX(-50%); }
1112
+ }
1113
+
1114
+
1115
+ .pptxv-mobile-actions { display: none; }
1116
+ @media (max-width: 720px) {
1117
+ .pptxv-ribbon { display: none; }
1118
+ .pptxv-mobile-actions { display: contents; }
1119
+ .pptxv-mobile-actions > nav { position: absolute; z-index: 50; right: 0; bottom: 0; left: 0; display: flex; min-height: 64px; padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--pptx-border); background: var(--pptx-card); }
1120
+ .pptxv-mobile-actions > nav button { flex: 1; min-width: 44px; border: 0; background: transparent; color: var(--pptx-muted-foreground); font-size: 10px; touch-action: manipulation; }
1121
+ .pptxv-mobile-actions > nav button[aria-pressed='true'] { color: var(--pptx-primary); }
1122
+ .pptxv-mobile-sheet-host { position: absolute; z-index: 48; inset: 0 0 64px; display: flex; align-items: end; }
1123
+ .pptxv-mobile-sheet-host[hidden] { display: none; }
1124
+ .pptxv-mobile-sheet-backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgb(0 0 0 / 40%); }
1125
+ .pptxv-mobile-sheet { position: relative; display: flex; flex-direction: column; width: 100%; max-height: min(70dvh, 620px); border: 1px solid var(--pptx-border); border-bottom: 0; border-radius: 16px 16px 0 0; background: var(--pptx-background); box-shadow: 0 -12px 36px rgb(0 0 0 / 35%); transition: transform 150ms ease-out; }
1126
+ .pptxv-mobile-sheet-header { display: grid; justify-items: center; gap: 5px; padding: 8px 16px 10px; border-bottom: 1px solid var(--pptx-border); cursor: grab; touch-action: none; }
1127
+ .pptxv-mobile-sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--pptx-muted-foreground); opacity: .45; }
1128
+ .pptxv-mobile-sheet-body { display: flex; flex-wrap: wrap; gap: 8px; overflow: auto; padding: 12px; overscroll-behavior: contain; }
1129
+ .pptxv-mobile-sheet-body > button { min-height: 44px; padding: 8px 12px; border: 1px solid var(--pptx-border); border-radius: 8px; background: var(--pptx-muted); color: inherit; }
1130
+ .pptxv-mobile-slide-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; width: 100%; }
1131
+ .pptxv-mobile-comment { display: grid; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--pptx-border); }
1132
+ .pptxv-mobile-comment textarea, .pptxv-mobile-comment-add textarea { box-sizing: border-box; width: 100%; min-height: 58px; padding: 8px; border: 1px solid var(--pptx-border); border-radius: var(--pptx-radius); background: var(--pptx-background); color: var(--pptx-foreground); font: inherit; }
1133
+ .pptxv-mobile-comment-actions { display: flex; flex-wrap: wrap; gap: 6px; }
1134
+ .pptxv-mobile-comment-actions button, .pptxv-mobile-comment-add button { min-height: 36px; padding: 6px 10px; border: 1px solid var(--pptx-border); border-radius: var(--pptx-radius); background: var(--pptx-muted); color: var(--pptx-foreground); }
1135
+ .pptxv-mobile-comment-add { display: grid; gap: 6px; padding-top: 10px; }
1136
+ .pptxv-mobile-slide-list button { min-height: 44px; border: 1px solid var(--pptx-border); border-radius: 8px; background: var(--pptx-muted); color: inherit; }
1137
+ .pptxv-mobile-slide-list button.is-active { border-color: var(--pptx-primary); color: var(--pptx-primary); }
1138
+ .pptxv-mobile-sheet .pptxv-inspector { display: flex; width: 100%; max-height: 55dvh; border: 0; }
1139
+ .pptxv-mobile-nav { bottom: calc(72px + env(safe-area-inset-bottom)); }
1140
+ }
1141
+