Full document, spreadsheet, slideshow, and diagram tooling
Merge pull request 'fix: add prefers-reduced-motion + CSS polish' (#265) from fix/css-polish-a11y-reduced-motion into main
+21
-3
+21
-3
src/css/app.css
+21
-3
src/css/app.css
···
74
74
75
75
/* Color swatch */
76
76
--color-swatch-height: 4px;
77
-
--color-highlight-default: #fff3c4;
77
+
--color-highlight-default: oklch(0.95 0.08 95);
78
78
79
79
/* Shadows (use dark base) */
80
80
--shadow-color: oklch(0.22 0.02 55);
···
114
114
--color-cell-editor-bg: oklch(0.18 0.005 75);
115
115
--color-modal-backdrop: oklch(0.05 0.005 75 / 0.7);
116
116
--color-btn-active-bg: oklch(0.62 0.14 25 / 0.15);
117
+
118
+
--color-highlight-default: oklch(0.38 0.08 85);
117
119
118
120
--color-comment-bg: oklch(0.30 0.04 85);
119
121
--color-comment-border: oklch(0.50 0.10 85);
···
163
165
--color-modal-backdrop: oklch(0.05 0.005 75 / 0.7);
164
166
--color-btn-active-bg: oklch(0.62 0.14 25 / 0.15);
165
167
168
+
--color-highlight-default: oklch(0.38 0.08 85);
169
+
166
170
--color-comment-bg: oklch(0.30 0.04 85);
167
171
--color-comment-border: oklch(0.50 0.10 85);
168
172
--color-comment-bg-hover: oklch(0.35 0.05 85);
···
174
178
--color-range-bg: oklch(0.60 0.1 195 / 0.15);
175
179
--color-range-header-bg: oklch(0.60 0.1 195 / 0.20);
176
180
--color-merge-active-bg: oklch(0.60 0.1 195 / 0.15);
181
+
}
182
+
}
183
+
184
+
/* --- Reduced motion: disable transitions/animations for users who prefer it --- */
185
+
@media (prefers-reduced-motion: reduce) {
186
+
:root {
187
+
--transition-fast: 0ms;
188
+
--transition-med: 0ms;
189
+
}
190
+
*, *::before, *::after {
191
+
animation-duration: 0.01ms !important;
192
+
animation-iteration-count: 1 !important;
193
+
transition-duration: 0.01ms !important;
194
+
scroll-behavior: auto !important;
177
195
}
178
196
}
179
197
···
1653
1671
pointer-events: none;
1654
1672
}
1655
1673
.tb-color-swatch-highlight {
1656
-
background: var(--color-highlight-default, #fff3c4);
1674
+
background: var(--color-highlight-default);
1657
1675
}
1658
1676
1659
1677
/* Inline SVG toolbar icons */
···
3831
3849
width: 10px;
3832
3850
height: 10px;
3833
3851
background: var(--color-accent, #0563C1);
3834
-
border: 1px solid #fff;
3852
+
border: 1px solid var(--color-bg, #fff);
3835
3853
border-radius: 2px;
3836
3854
z-index: 10;
3837
3855
}