diff --git a/packages/hoppscotch-app/assets/scss/styles.scss b/packages/hoppscotch-app/assets/scss/styles.scss index 6ab9329d..9131b7f2 100644 --- a/packages/hoppscotch-app/assets/scss/styles.scss +++ b/packages/hoppscotch-app/assets/scss/styles.scss @@ -35,13 +35,8 @@ @apply bg-divider; } -.cm-focused { - @apply !outline-none; -} - input::placeholder, -textarea::placeholder, -.CodeMirror-empty { +textarea::placeholder { @apply text-secondary; @apply opacity-25; } @@ -435,29 +430,15 @@ pre.ace_editor { @apply w-full; } -.CodeMirror { - @apply !h-auto; +.cm-focused { + @apply !outline-none; - font-size: var(--body-font-size); - - &:not(.CodeMirror-focused) .CodeMirror-activeline-background { - background: transparent !important; - } - - .CodeMirror-dialog-top { + .cm-activeLine { @apply bg-primaryLight; - @apply border-dividerLight; - @apply px-4; - @apply py-2; - @apply z-5; } - .CodeMirror-scroll { - @apply min-h-64; - } - - * { - font-family: "Roboto Mono", monospace; + .cm-activeLineGutter { + @apply bg-primaryDark; } } diff --git a/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts b/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts index 4faa622b..9f7a2c40 100644 --- a/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts +++ b/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts @@ -91,7 +91,7 @@ export const baseTheme = EditorView.theme({ ".cm-tooltip-autocomplete ul li[aria-selected] .cm-completionLabel": { color: "var(--accent-contrast-color)", }, - ".cm-activeLine": { backgroundColor: "var(--primary-light-color)" }, + ".cm-activeLine": { backgroundColor: "transparent" }, ".cm-searchMatch": { outline: "1px solid var(--accent-dark-color)", }, @@ -121,10 +121,9 @@ export const baseTheme = EditorView.theme({ ".cm-line": { paddingLeft: "0.5em", paddingRight: "0.5em", - color: "var(--secondary-dark-color)", }, ".cm-activeLineGutter": { - backgroundColor: "var(--primary-dark-color)", + backgroundColor: "transparent", }, ".cm-scroller::-webkit-scrollbar": { display: "none",