Start of themes

src-web/components/Editor/Editor.css

@@ -12,7 +12,7 @@
 }
 
 .cm-editor {
-    @apply bg-background w-full block text-[0.85rem];
+    @apply w-full block text-[0.85rem];
 
     &.cm-focused {
         outline: none !important;
@@ -26,6 +26,18 @@
         @apply text-placeholder;
     }
 
+    .cm-gutters {
+        @apply border-0 text-gray-500 text-opacity-30;
+        .cm-gutterElement {
+            @apply cursor-default;
+        }
+    }
+
+    &.cm-focused .cm-gutters,
+    .cm-gutters:hover {
+        @apply text-opacity-60;
+    }
+
     .placeholder-widget {
         @apply text-xs text-white/90 bg-blue-400/80 py-[0.5px] px-1 mx-[1px] rounded cursor-default hover:bg-blue-400 hover:text-white;
         text-shadow: 0 0 1px rgba(0, 0, 0, 0.9);
@@ -69,10 +81,6 @@
     align-items: center !important;
 }
 
-.cm-editor .cm-gutters {
-    @apply bg-background border-0 text-gray-200;
-}
-
 .cm-editor .cm-gutterElement {
     transition: color var(--transition-duration);
 }
@@ -98,10 +106,6 @@
     @apply text-gray-400 bg-gray-100/20;
 }
 
-.cm-editor.cm-focused .cm-gutters {
-    @apply text-gray-300;
-}
-
 .cm-editor .cm-foldPlaceholder {
     @apply px-2 border border-gray-200 bg-gray-100;
 }