Full document, spreadsheet, slideshow, and diagram tooling
Merge pull request 'fix: replace hardcoded transition durations with CSS variables' (#268) from fix/css-transition-vars into main
+34
-34
+34
-34
src/css/app.css
+34
-34
src/css/app.css
···
226
226
background: var(--color-bg);
227
227
line-height: 1.55;
228
228
min-height: 100dvh;
229
-
transition: background-color 200ms ease, color 200ms ease;
229
+
transition: background-color var(--transition-med), color var(--transition-med);
230
230
}
231
231
232
232
/* Smooth transitions for theme switching on key surfaces */
···
249
249
.landing-header,
250
250
.editor-container,
251
251
.sheet-container {
252
-
transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
252
+
transition: background-color var(--transition-med), border-color var(--transition-med), color var(--transition-med);
253
253
}
254
254
255
255
/* --- Theme toggle button --- */
···
394
394
white-space: nowrap;
395
395
pointer-events: none;
396
396
opacity: 0;
397
-
transition: opacity 150ms ease;
397
+
transition: opacity var(--transition-fast);
398
398
z-index: 9999;
399
399
}
400
400
[data-tooltip]:hover::after {
···
618
618
border-radius: var(--radius-md);
619
619
text-decoration: none;
620
620
color: inherit;
621
-
transition: box-shadow 0.15s, border-color 0.15s;
621
+
transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
622
622
background: var(--color-bg-elevated);
623
623
}
624
624
.pinned-card:hover {
···
652
652
background: var(--color-bg);
653
653
cursor: pointer;
654
654
color: var(--color-text-secondary);
655
-
transition: border-color 0.15s, color 0.15s;
655
+
transition: border-color var(--transition-fast), color var(--transition-fast);
656
656
}
657
657
.view-toggle:hover {
658
658
border-color: var(--color-accent);
···
701
701
text-decoration: none;
702
702
color: inherit;
703
703
background: var(--color-bg);
704
-
transition: box-shadow 0.15s, border-color 0.15s;
704
+
transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
705
705
position: relative;
706
706
}
707
707
.doc-grid-card:hover {
···
1365
1365
border: 1px solid var(--color-border);
1366
1366
border-radius: var(--radius);
1367
1367
text-decoration: none;
1368
-
transition: border-color 0.15s, color 0.15s;
1368
+
transition: border-color var(--transition-fast), color var(--transition-fast);
1369
1369
}
1370
1370
1371
1371
.desktop-download-btn:hover {
···
1530
1530
cursor: pointer;
1531
1531
font-size: 14px;
1532
1532
line-height: 1;
1533
-
transition: background 150ms ease, color 150ms ease, transform 100ms ease;
1533
+
transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
1534
1534
flex-shrink: 0;
1535
1535
}
1536
1536
.tb-btn:active {
···
2189
2189
opacity: 0.6;
2190
2190
cursor: pointer;
2191
2191
border-radius: 3px;
2192
-
transition: opacity 150ms ease, height 150ms ease;
2192
+
transition: opacity var(--transition-fast), height var(--transition-fast);
2193
2193
position: relative;
2194
2194
}
2195
2195
.hidden-row-indicator-line:hover {
···
2211
2211
white-space: nowrap;
2212
2212
opacity: 0;
2213
2213
pointer-events: none;
2214
-
transition: opacity 150ms ease;
2214
+
transition: opacity var(--transition-fast);
2215
2215
}
2216
2216
.hidden-row-indicator-line:hover::after { opacity: 1; }
2217
2217
.hidden-col-boundary {
···
2238
2238
background: var(--color-teal);
2239
2239
opacity: 0.6;
2240
2240
border-radius: 3px;
2241
-
transition: opacity 150ms ease, width 150ms ease;
2241
+
transition: opacity var(--transition-fast), width var(--transition-fast);
2242
2242
}
2243
2243
.hidden-col-indicator:hover .hidden-col-indicator-bar {
2244
2244
opacity: 1;
···
2260
2260
white-space: nowrap;
2261
2261
opacity: 0;
2262
2262
pointer-events: none;
2263
-
transition: opacity 150ms ease;
2263
+
transition: opacity var(--transition-fast);
2264
2264
z-index: 20;
2265
2265
}
2266
2266
.hidden-col-indicator:hover::after { opacity: 1; }
···
2378
2378
font-size: 1em;
2379
2379
line-height: 1;
2380
2380
user-select: none;
2381
-
transition: color 0.1s;
2381
+
transition: color var(--transition-fast);
2382
2382
}
2383
2383
.cell-rating-star.filled {
2384
2384
color: oklch(0.75 0.15 85);
···
2396
2396
.cell-progress-bar {
2397
2397
height: 0.6rem;
2398
2398
border-radius: 3px;
2399
-
transition: width 0.2s;
2399
+
transition: width var(--transition-med);
2400
2400
flex-shrink: 0;
2401
2401
}
2402
2402
.cell-progress-label {
···
2479
2479
background: var(--color-bg); border: 1px solid var(--color-border);
2480
2480
border-radius: var(--radius-sm); padding: var(--space-xs) var(--space-sm);
2481
2481
margin-bottom: var(--space-xs); cursor: pointer; font-size: 0.8rem;
2482
-
transition: box-shadow 0.15s;
2482
+
transition: box-shadow var(--transition-fast);
2483
2483
}
2484
2484
.kanban-card:hover { box-shadow: 0 2px 8px oklch(0 0 0 / 0.1); }
2485
2485
.kanban-card-title { font-weight: 600; margin-bottom: 2px; }
···
2493
2493
.gallery-card {
2494
2494
background: var(--color-bg); border: 1px solid var(--color-border);
2495
2495
border-radius: var(--radius-md); padding: var(--space-md);
2496
-
cursor: pointer; transition: box-shadow 0.15s;
2496
+
cursor: pointer; transition: box-shadow var(--transition-fast);
2497
2497
}
2498
2498
.gallery-card:hover { box-shadow: 0 2px 8px oklch(0 0 0 / 0.1); }
2499
2499
.gallery-card-title { font-weight: 600; font-size: 0.9rem; margin-bottom: var(--space-xs); }
···
2546
2546
.form-question-card {
2547
2547
border: 1px solid var(--color-border); border-radius: var(--radius-md);
2548
2548
padding: var(--space-md); margin-bottom: var(--space-sm);
2549
-
background: var(--color-bg); transition: border-color 0.15s;
2549
+
background: var(--color-bg); transition: border-color var(--transition-fast);
2550
2550
}
2551
2551
.form-question-card:focus-within { border-color: var(--color-accent); }
2552
2552
.form-question-header {
···
2617
2617
.form-preview-rating, .form-preview-scale { display: flex; gap: 4px; }
2618
2618
.form-rating-star {
2619
2619
font-size: 1.5rem; background: none; border: none; cursor: pointer;
2620
-
color: var(--color-border); transition: color 0.1s;
2620
+
color: var(--color-border); transition: color var(--transition-fast);
2621
2621
}
2622
2622
.form-rating-star:hover, .form-rating-star.active { color: oklch(0.75 0.15 80); }
2623
2623
.form-scale-btn {
···
3484
3484
border-radius: var(--radius-md);
3485
3485
box-shadow: var(--shadow-lg);
3486
3486
opacity: 0;
3487
-
transition: opacity 200ms ease-out, transform 200ms ease-out;
3487
+
transition: opacity var(--transition-med), transform var(--transition-med);
3488
3488
z-index: 200;
3489
3489
pointer-events: none;
3490
3490
}
···
3629
3629
font-size: 0.75rem !important;
3630
3630
white-space: nowrap;
3631
3631
border-radius: var(--radius-sm);
3632
-
transition: background 150ms ease, color 150ms ease;
3632
+
transition: background var(--transition-fast), color var(--transition-fast);
3633
3633
}
3634
3634
3635
3635
.find-bar-replace {
···
3766
3766
border: 1px solid oklch(0.65 0.1 250 / 0.3);
3767
3767
border-radius: 2px;
3768
3768
pointer-events: none;
3769
-
transition: top 0.1s ease, height 0.1s ease;
3769
+
transition: top var(--transition-fast), height var(--transition-fast);
3770
3770
}
3771
3771
3772
3772
.minimap-headings {
···
3780
3780
white-space: nowrap;
3781
3781
overflow: hidden;
3782
3782
text-overflow: ellipsis;
3783
-
transition: color 0.15s;
3783
+
transition: color var(--transition-fast);
3784
3784
}
3785
3785
.minimap-heading:hover {
3786
3786
color: var(--color-text);
···
5590
5590
height: 0;
5591
5591
padding: 0;
5592
5592
overflow: hidden;
5593
-
transition: all 200ms ease-out;
5593
+
transition: all var(--transition-med);
5594
5594
}
5595
5595
5596
5596
.zen-mode .toolbar {
···
5598
5598
height: 0;
5599
5599
padding: 0;
5600
5600
overflow: hidden;
5601
-
transition: all 200ms ease-out;
5601
+
transition: all var(--transition-med);
5602
5602
}
5603
5603
5604
5604
.zen-mode .docs-footer {
···
5606
5606
height: 0;
5607
5607
padding: 0;
5608
5608
overflow: hidden;
5609
-
transition: all 200ms ease-out;
5609
+
transition: all var(--transition-med);
5610
5610
}
5611
5611
5612
5612
.zen-mode .editor-wrapper {
5613
5613
max-width: none;
5614
-
transition: max-width 200ms ease-out;
5614
+
transition: max-width var(--transition-med);
5615
5615
}
5616
5616
5617
5617
.zen-mode .editor-container {
···
5655
5655
.toolbar,
5656
5656
.docs-footer,
5657
5657
.editor-wrapper {
5658
-
transition: all 200ms ease-out;
5658
+
transition: all var(--transition-med);
5659
5659
}
5660
5660
5661
5661
/* ========================================================
···
5671
5671
background: var(--color-surface);
5672
5672
flex-shrink: 0;
5673
5673
min-height: 24px;
5674
-
transition: background-color 200ms ease, border-color 200ms ease;
5674
+
transition: background-color var(--transition-med), border-color var(--transition-med);
5675
5675
}
5676
5676
5677
5677
.status-bar-info {
···
5704
5704
font-family: var(--font-body);
5705
5705
font-size: 0.65rem;
5706
5706
cursor: pointer;
5707
-
transition: background 150ms ease;
5707
+
transition: background var(--transition-fast);
5708
5708
}
5709
5709
.status-bar-freeze:hover {
5710
5710
background: oklch(0.75 0.1 195 / 0.25);
···
5761
5761
cursor: pointer;
5762
5762
padding: 1px 4px;
5763
5763
border-radius: 2px;
5764
-
transition: background 150ms ease;
5764
+
transition: background var(--transition-fast);
5765
5765
}
5766
5766
5767
5767
.status-bar-stat:hover {
···
5820
5820
flex-direction: column;
5821
5821
padding: 4px 10px;
5822
5822
cursor: pointer;
5823
-
transition: background-color 80ms ease;
5823
+
transition: background-color var(--transition-fast);
5824
5824
}
5825
5825
5826
5826
.formula-autocomplete-item:hover,
···
6381
6381
font-size: 0.82rem;
6382
6382
font-weight: 500;
6383
6383
cursor: pointer;
6384
-
transition: background 150ms ease;
6384
+
transition: background var(--transition-fast);
6385
6385
}
6386
6386
6387
6387
.onboarding-dismiss:hover {
···
7341
7341
cursor: pointer;
7342
7342
padding: 0 0.1em;
7343
7343
border-radius: 2px;
7344
-
transition: background 0.15s;
7344
+
transition: background var(--transition-fast);
7345
7345
}
7346
7346
a.wiki-link:hover {
7347
7347
background: oklch(0.85 0.06 195 / 0.2);
···
8840
8840
color: var(--color-text-muted);
8841
8841
text-decoration: none;
8842
8842
font-size: 0.9rem;
8843
-
transition: color 0.15s;
8843
+
transition: color var(--transition-fast);
8844
8844
}
8845
8845
8846
8846
.toc-list a:hover {