codemirror

apps/server/internal/httpserver/static/site.css

@@ -1540,11 +1540,17 @@ code {
 }
 
 .miller-column a:hover,
-.miller-column a.is-active {
+.miller-column a.is-active,
+.keyboard-navigation-active .miller-column a.is-keyboard-selected {
   background: var(--accent-soft);
   color: var(--accent);
 }
 
+.keyboard-navigation-active .miller-column a.is-keyboard-selected {
+  outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
+  outline-offset: -2px;
+}
+
 .browser-item-name {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2080,7 +2086,7 @@ code {
   display: none;
 }
 
-[data-monaco-mount] {
+[data-codemirror-mount] {
   display: none;
   width: 100%;
   min-height: 60vh;
@@ -2089,7 +2095,7 @@ code {
   overflow: hidden;
 }
 
-[data-monaco-mount].monaco-mounted {
+[data-codemirror-mount].codemirror-mounted {
   display: block;
 }
 
@@ -2105,26 +2111,31 @@ code {
   font: 400 0.98rem/1.6 ui-monospace, SFMono-Regular, monospace;
 }
 
-[data-monaco-mount].monaco-mounted ~ textarea {
+[data-codemirror-mount].codemirror-mounted ~ textarea {
   display: none;
 }
 
-@keyframes monaco-shimmer {
+@keyframes codemirror-shimmer {
   0% { background-position: -200% 0; }
   100% { background-position: 200% 0; }
 }
 
-[data-monaco-mount]:not(.monaco-mounted) {
+[data-codemirror-mount]:not(.codemirror-mounted) {
   display: flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(90deg, var(--panel-strong) 25%, var(--panel) 50%, var(--panel-strong) 75%);
   background-size: 200% 100%;
-  animation: monaco-shimmer 1.5s ease infinite;
+  animation: codemirror-shimmer 1.5s ease infinite;
   color: var(--muted);
   font-size: 0.85rem;
 }
 
+[data-codemirror-mount] .cm-editor,
+[data-conflict-codemirror-mount] .cm-editor {
+  height: 100%;
+}
+
 .editor-status {
   display: inline-block;
   min-width: 5.5rem;
@@ -2290,7 +2301,7 @@ code {
   padding: 0.75rem;
 }
 
-[data-conflict-monaco-mount] {
+[data-conflict-codemirror-mount] {
   display: none;
   width: 100%;
   min-height: 18rem;
@@ -2300,11 +2311,11 @@ code {
   overflow: hidden;
 }
 
-[data-conflict-monaco-mount].monaco-mounted {
+[data-conflict-codemirror-mount].codemirror-mounted {
   display: block;
 }
 
-[data-conflict-monaco-mount].monaco-mounted + textarea {
+[data-conflict-codemirror-mount].codemirror-mounted + textarea {
   display: none;
 }
 
@@ -2833,7 +2844,7 @@ code {
     color: var(--text);
   }
 
-  [data-conflict-monaco-mount] {
+  [data-conflict-codemirror-mount] {
     border-color: oklch(0.55 0.18 25 / 0.3);
     background: oklch(0.14 0.012 55);
   }
@@ -2913,10 +2924,17 @@ code {
   position: relative;
 }
 
-.commentable:hover {
+.commentable:hover,
+.keyboard-navigation-active .commentable.is-keyboard-selected,
+.keyboard-navigation-active .markdown-body .is-keyboard-selected {
   background: var(--accent-soft);
 }
 
+.keyboard-navigation-active .markdown-body .is-keyboard-selected {
+  outline: 2px solid color-mix(in srgb, var(--accent) 68%, transparent);
+  outline-offset: 0.25rem;
+}
+
 .comment-anchor-btn {
   position: absolute;
   right: -1.5rem;