Full document, spreadsheet, slideshow, and diagram tooling
Merge pull request 'fix: define missing CSS variables, remove hardcoded hex fallbacks' (#267) from fix/css-undefined-vars-and-focus into main
+29
-22
+29
-22
src/css/app.css
+29
-22
src/css/app.css
···
49
49
--transition-fast: 120ms ease-out;
50
50
--transition-med: 200ms ease-out;
51
51
52
+
--color-text-secondary: oklch(0.48 0.015 55);
53
+
--color-bg-secondary: oklch(0.935 0.008 75);
54
+
--color-surface-raised: oklch(0.94 0.008 75);
55
+
52
56
/* Colors that need dark-mode overrides but are used inline */
53
57
--color-btn-primary-text: oklch(0.97 0.005 75);
54
58
--color-collab-text: oklch(0.97 0.005 75);
···
89
93
--color-text: oklch(0.88 0.01 75);
90
94
--color-text-muted: oklch(0.65 0.01 75);
91
95
--color-text-faint: oklch(0.50 0.008 75);
96
+
--color-text-secondary: oklch(0.65 0.01 75);
97
+
--color-bg-secondary: oklch(0.20 0.008 75);
98
+
--color-surface-raised: oklch(0.22 0.008 75);
92
99
--color-accent: oklch(0.62 0.14 25);
93
100
--color-accent-hover: oklch(0.56 0.14 25);
94
101
--color-teal: oklch(0.60 0.1 195);
···
139
146
--color-text: oklch(0.88 0.01 75);
140
147
--color-text-muted: oklch(0.65 0.01 75);
141
148
--color-text-faint: oklch(0.50 0.008 75);
149
+
--color-text-secondary: oklch(0.65 0.01 75);
150
+
--color-bg-secondary: oklch(0.20 0.008 75);
151
+
--color-surface-raised: oklch(0.22 0.008 75);
142
152
--color-accent: oklch(0.62 0.14 25);
143
153
--color-accent-hover: oklch(0.56 0.14 25);
144
154
--color-teal: oklch(0.60 0.1 195);
···
788
798
padding: 1px 6px;
789
799
font-size: 0.7rem;
790
800
border-radius: 9px;
791
-
background: var(--color-surface-raised, #e8e8e8);
792
-
color: var(--color-text-muted, #666);
801
+
background: var(--color-surface-raised);
802
+
color: var(--color-text-muted);
793
803
white-space: nowrap;
794
804
}
795
805
···
819
829
}
820
830
821
831
.tag-filter-pill:hover {
822
-
background: var(--color-surface-raised, #f0f0f0);
832
+
background: var(--color-surface-raised);
823
833
}
824
834
825
835
.tag-filter-pill.active {
826
-
background: var(--color-accent, #0563C1);
827
-
color: #fff;
828
-
border-color: var(--color-accent, #0563C1);
836
+
background: var(--color-accent);
837
+
color: var(--color-btn-primary-text);
838
+
border-color: var(--color-accent);
829
839
}
830
840
831
841
.doc-item-delete,
···
2650
2660
.sheet-grid td.frozen-col,
2651
2661
.sheet-grid td.frozen-corner {
2652
2662
position: sticky;
2653
-
background: var(--color-bg, #fff);
2663
+
background: var(--color-bg);
2654
2664
/* Force own compositing layer — prevents WebKit/Blink from dropping the
2655
2665
background paint of sticky cells during fast scrolling (oklch + custom
2656
2666
properties exacerbate the bug). */
···
2661
2671
[data-theme="dark"] .sheet-grid td.frozen-row,
2662
2672
[data-theme="dark"] .sheet-grid td.frozen-col,
2663
2673
[data-theme="dark"] .sheet-grid td.frozen-corner {
2664
-
background: var(--color-bg, #1a1815);
2674
+
background: var(--color-bg);
2665
2675
}
2666
2676
2667
2677
@media (prefers-color-scheme: dark) {
2668
2678
:root:not([data-theme="light"]) .sheet-grid td.frozen-row,
2669
2679
:root:not([data-theme="light"]) .sheet-grid td.frozen-col,
2670
2680
:root:not([data-theme="light"]) .sheet-grid td.frozen-corner {
2671
-
background: var(--color-bg, #1a1815);
2681
+
background: var(--color-bg);
2672
2682
}
2673
2683
}
2674
2684
···
3290
3300
background: var(--color-teal);
3291
3301
cursor: crosshair;
3292
3302
z-index: 6;
3293
-
border: 1px solid #fff;
3303
+
border: 1px solid var(--color-bg);
3294
3304
pointer-events: auto;
3295
-
}
3296
-
[data-theme="dark"] .fill-handle {
3297
-
border-color: var(--color-bg);
3298
3305
}
3299
3306
@media (prefers-color-scheme: dark) {
3300
3307
:root:not([data-theme="light"]) .fill-handle {
···
3719
3726
/* --- Footnotes (#122) --- */
3720
3727
.tiptap .footnote-marker {
3721
3728
cursor: pointer;
3722
-
color: var(--color-accent, #0563C1);
3729
+
color: var(--color-accent);
3723
3730
font-size: 0.75em;
3724
3731
vertical-align: super;
3725
3732
line-height: 0;
···
3732
3739
}
3733
3740
3734
3741
.tiptap .footnote-marker.ProseMirror-selectednode {
3735
-
outline: 2px solid var(--color-accent, #0563C1);
3742
+
outline: 2px solid var(--color-accent);
3736
3743
border-radius: 2px;
3737
3744
}
3738
3745
···
3787
3794
margin-top: 2rem;
3788
3795
padding-top: 1rem;
3789
3796
font-size: 0.875rem;
3790
-
color: var(--color-text-muted, #666);
3797
+
color: var(--color-text-muted);
3791
3798
}
3792
3799
3793
3800
.footnote-section h4 {
···
3795
3802
text-transform: uppercase;
3796
3803
letter-spacing: 0.05em;
3797
3804
margin: 0 0 0.5rem;
3798
-
color: var(--color-text-muted, #999);
3805
+
color: var(--color-text-muted);
3799
3806
}
3800
3807
3801
3808
.footnote-section ol {
···
3838
3845
}
3839
3846
3840
3847
.tiptap .resizable-image-wrapper.selected .resizable-image-container {
3841
-
outline: 2px solid var(--color-accent, #0563C1);
3848
+
outline: 2px solid var(--color-accent);
3842
3849
border-radius: var(--radius-sm, 4px);
3843
3850
}
3844
3851
···
3848
3855
position: absolute;
3849
3856
width: 10px;
3850
3857
height: 10px;
3851
-
background: var(--color-accent, #0563C1);
3852
-
border: 1px solid var(--color-bg, #fff);
3858
+
background: var(--color-accent);
3859
+
border: 1px solid var(--color-bg);
3853
3860
border-radius: 2px;
3854
3861
z-index: 10;
3855
3862
}
···
4053
4060
min-height: 600px;
4054
4061
border: 1px solid var(--color-border);
4055
4062
border-radius: var(--radius-sm);
4056
-
background: #fff;
4063
+
background: var(--color-bg);
4057
4064
}
4058
4065
4059
4066
.print-preview-footer {
···
6464
6471
/* Active state for the MD toggle button */
6465
6472
#btn-md-toggle.active {
6466
6473
background: var(--color-teal);
6467
-
color: #fff;
6474
+
color: var(--color-btn-primary-text);
6468
6475
}
6469
6476
6470
6477
/* Markdown mode indicator in the status area */