experiments in a post-browser web
fix(editor): selection contrast and outline zoom shortcuts
- Use hardcoded rgba selection colors per color-scheme for reliable contrast
- Light mode: sky-blue wash (rgba 50,130,220 at 25/35%)
- Dark mode: brighter blue tint (rgba 60,140,230 at 35/45%)
- Active line at 4% opacity so it never obscures selection
- Add Cmd+Shift+Plus/Minus shortcuts for outline zoom in/out
+29
-4
+4
-4
extensions/editor/codemirror.js
+4
-4
extensions/editor/codemirror.js
···
560
560
borderLeftColor: 'var(--base05)',
561
561
},
562
562
'.cm-selectionBackground, ::selection': {
563
-
backgroundColor: 'color-mix(in srgb, var(--base0D) 45%, var(--base02))',
563
+
background: 'var(--editor-selection) !important',
564
564
},
565
565
'&.cm-focused .cm-selectionBackground': {
566
-
backgroundColor: 'color-mix(in srgb, var(--base0D) 55%, var(--base02))',
566
+
background: 'var(--editor-selection-focused) !important',
567
567
},
568
568
'.cm-activeLine': {
569
-
backgroundColor: 'color-mix(in srgb, var(--base01) 50%, transparent)',
569
+
backgroundColor: 'var(--editor-activeline)',
570
570
},
571
571
'.cm-activeLineGutter': {
572
-
backgroundColor: 'var(--base02)',
572
+
backgroundColor: 'var(--base01)',
573
573
},
574
574
'.cm-gutters': {
575
575
backgroundColor: 'var(--base01)',
+10
extensions/editor/editor-layout.js
+10
extensions/editor/editor-layout.js
···
707
707
e.preventDefault();
708
708
this._addHighlightFromSelection();
709
709
}
710
+
// Cmd+Shift+Plus: Zoom outline in (show more levels)
711
+
if ((e.metaKey || e.ctrlKey) && e.shiftKey && (e.key === '=' || e.key === '+')) {
712
+
e.preventDefault();
713
+
if (this.outlineSidebar) this.outlineSidebar.zoomIn();
714
+
}
715
+
// Cmd+Shift+Minus: Zoom outline out (show fewer levels)
716
+
if ((e.metaKey || e.ctrlKey) && e.shiftKey && (e.key === '-' || e.key === '_')) {
717
+
e.preventDefault();
718
+
if (this.outlineSidebar) this.outlineSidebar.zoomOut();
719
+
}
710
720
// Escape: Exit focus mode
711
721
if (e.key === 'Escape' && this.isFocusMode) {
712
722
this.exitFocusMode();
+15
extensions/editor/home.css
+15
extensions/editor/home.css
···
1
1
/* Import theme variables */
2
2
@import url('peek://theme/variables.css');
3
3
4
+
/* Selection colors — hardcoded rgba for reliable contrast in both themes */
5
+
:root {
6
+
--editor-selection: rgba(50, 130, 220, 0.25);
7
+
--editor-selection-focused: rgba(50, 130, 220, 0.35);
8
+
--editor-activeline: rgba(0, 0, 0, 0.04);
9
+
}
10
+
11
+
@media (prefers-color-scheme: dark) {
12
+
:root {
13
+
--editor-selection: rgba(60, 140, 230, 0.35);
14
+
--editor-selection-focused: rgba(60, 140, 230, 0.45);
15
+
--editor-activeline: rgba(255, 255, 255, 0.04);
16
+
}
17
+
}
18
+
4
19
* {
5
20
box-sizing: border-box;
6
21
margin: 0;