diff --git a/src/components/AppHeader.tsx b/src/components/AppHeader.tsx index 087988491..8a0e49d35 100644 --- a/src/components/AppHeader.tsx +++ b/src/components/AppHeader.tsx @@ -27,7 +27,7 @@ export const AppHeader = ({ return (
diff --git a/src/components/CollapsiblePanel.module.css b/src/components/CollapsiblePanel.module.css index e4515567d..e869d1328 100644 --- a/src/components/CollapsiblePanel.module.css +++ b/src/components/CollapsiblePanel.module.css @@ -1,10 +1,10 @@ .panel { @apply relative overflow-auto z-0; - @apply bg-chalkboard-20/40; + @apply bg-chalkboard-10/70 backdrop-blur-sm; } :global(.dark) .panel { - @apply bg-chalkboard-110/50; + @apply bg-chalkboard-110/50 backdrop-blur-0; } .header { diff --git a/src/index.css b/src/index.css index 87cdc8cd1..ce3db04e1 100644 --- a/src/index.css +++ b/src/index.css @@ -86,8 +86,18 @@ code { @apply bg-transparent; } +#code-mirror-override .cm-activeLine, +#code-mirror-override .cm-activeLineGutter { + @apply bg-liquid-10/50; +} + +.dark #code-mirror-override .cm-activeLine, +.dark #code-mirror-override .cm-activeLineGutter { + @apply bg-liquid-80/50; +} + #code-mirror-override .cm-gutters { - @apply bg-chalkboard-10/50; + @apply bg-chalkboard-10/30; } .dark #code-mirror-override .cm-gutters { @@ -99,14 +109,24 @@ code { } #code-mirror-override .cm-cursor { display: block; - width: 200px; - background: linear-gradient( - to right, - rgb(0, 55, 94) 0%, - #0084e2ff 2%, - #0084e255 5%, - transparent 100% - ); + width: 1ch; + @apply bg-liquid-40 mix-blend-multiply; + + animation: blink 2s ease-out infinite; +} + +.dark #code-mirror-override .cm-cursor { + @apply bg-liquid-50; +} + +@keyframes blink { + 0%, + 100% { + opacity: 0; + } + 15% { + opacity: 0.75; + } } .react-json-view {