Style search panel

src/editor/theme/base.js

@@ -2,6 +2,56 @@ import { EditorView } from '@codemirror/view';
 
 
 export const heynoteBase = EditorView.theme({
+    ".cm-panels": {
+        fontSize: "12px",
+    },
+    ".cm-panels .cm-panel": {
+        boxShadow: "0 0 10px rgba(0,0,0,0.15)",
+        padding: "8px 12px",
+    },
+    '.cm-panels .cm-textfield': {
+        fontSize: "1em",
+        borderRadius: "2px",
+    },
+    '.cm-panels .cm-button': {
+        border: "none",
+        borderRadius: "2px",
+        fontSize: "1em",
+        cursor: "pointer",
+        padding: "2px 12px",
+    },
+    '.cm-panels .cm-button:focus': {
+        border: "none",
+        outline: "2px solid #48b57e",
+        outlineOffset: "1px",
+    },
+    ".cm-panel.cm-search label": {
+        fontSize: "1em",
+    },
+    ".cm-panel.cm-search input[type=checkbox]": {
+        position: "relative",
+        top: "2px",
+    },
+    ".cm-panel.cm-search input[type=checkbox]:focus-visible": {
+        outline: "2px auto #48b57e",
+        outlineOffset: "2px",
+        //borderRadius: "3px",
+    },
+    ".cm-panel.cm-search [name=close]" : {
+        fontSize: "18px",
+        right: "4px",
+        top: "4px",
+        width: "22px",
+        height: "22px",
+        border: "2px solid transparent",
+        borderRadius: "2px",
+        cursor: "pointer",
+    },
+    ".cm-panel.cm-search [name=close]:focus-visible" : {
+        border: "2px solid #48b57e",
+        outline: "none",
+    },
+
     "&.cm-editor.cm-focused": {
         outline: "none",
     },

src/editor/theme/dark.js

@@ -42,9 +42,29 @@ const darkTheme = EditorView.theme({
     },
     '.cm-cursor, .cm-dropCursor': { borderLeftColor: cursor },
     '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': { backgroundColor: selection },
-    '.cm-panels': { backgroundColor: darkBackground, color: base03 },
+    '.cm-panels': {
+        backgroundColor: "#474747", 
+        color: "#9c9c9c",
+    },
+    ".cm-panels .cm-panel": {
+        boxShadow: "0 0 10px rgba(0,0,0,0.3)",
+    },
+    '.cm-panels .cm-textfield': {
+        backgroundColor: "#3b3b3b",
+        border: "1px solid #5a5a5a",
+        color: "#fff",
+    },
+    '.cm-panels .cm-textfield:focus': {
+        border: "1px solid #48b57e",
+        outline: "1px solid #48b57e",
+    },
+    '.cm-panels .cm-button': {
+        background: "#5f5f5f",
+        color: "rgba(255,255,255, 0.6)",
+        border: "none",
+    },
     '.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
-    '.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },
+    
     '.cm-searchMatch': {
         backgroundColor: 'transparent',
         outline: `1px solid ${base07}`

src/editor/theme/light.js

@@ -7,6 +7,20 @@ const lightTheme = EditorView.theme({
     "&": {
         backgroundColor: "#fff",
     },
+    '.cm-panels .cm-button': {
+        background: "#959b98",//"#48b57e",
+        color: "#fff",
+    },
+    '.cm-panels .cm-button:focus': {
+        background: "#8b928e"
+    },
+    '.cm-panels .cm-button:hover': {
+        background: "#8b928e"
+    },
+    '.cm-panels .cm-textfield:focus': {
+        border: "1px solid #48b57e",
+        outline: "1px solid #48b57e",
+    },
     ".cm-cursor, .cm-dropCursor": {
         borderLeftColor: "#000",
     },