src/app.css

@@ -8,12 +8,6 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
-
-  --background: white;
-  --foreground: black;
-  --transparentish: rgba(0, 0, 0, 0.2);
-  --accent-bg: #cbd5e1;
-  --accent-fg: #1e293b;
 }
 
 *,
@@ -27,20 +21,4 @@ body,
 main {
   margin: 0;
   min-height: 100vh;
-  background: var(--background);
-  color: var(--foreground);
-}
-
-a {
-  color: var(--accent-fg);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #18181b;
-    --foreground: #d4d4d8;
-    --transparentish: rgba(255, 255, 255, 0.2);
-    --accent-bg: #334155;
-    --accent-fg: #94a3b8;
-  }
 }

src/components/Modal.svelte

@@ -106,8 +106,8 @@
   .backdrop {
     position: fixed;
     inset: 0;
-    background: var(--background);
+    background: #6b7280;
-    opacity: 0.9;
+    opacity: 0.75;
   }
 
   .content-alignment {
@@ -123,16 +123,11 @@
 
   .content {
     overflow-y: none;
-    background: var(--background);
+    background: white;
     padding: 16px 20px;
     border-radius: 16px;
     min-width: 50%;
     min-height: 50%;
-
-    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
-      0 8px 10px -6px rgb(0 0 0 / 0.1);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
-      var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
 
   h3 {

src/editor/BubbleMenu.svelte

@@ -181,8 +181,8 @@ transform: scale(${1 / viewport.scale});
     /* https://wicg.github.io/visual-viewport/examples/fixed-to-keyboard.html */
     transform-origin: left bottom;
 
-    background: var(--background);
+    background: white;
-    border-top: 1px solid var(--accent-bg);
+    border-top: 1px solid #ccc;
     width: 100%;
 
     visibility: visible;

src/editor/bubblemenu/Button.svelte

@@ -32,10 +32,10 @@
   /* https://stackoverflow.com/a/64553121 */
   @media (hover: hover) and (pointer: fine) {
     button:hover {
-      background: var(--transparentish);
+      background: #eee;
     }
   }
   button.active {
-    background: var(--accent-bg);
+    background: #ddd;
   }
 </style>

src/editor/editor.css

@@ -9,12 +9,18 @@
   box-sizing: border-box;
 }
 
+/* para ver los cambios con el sobrerayado */
+::selection,
+::-moz-selection {
+  background: rgba(0, 0, 0, 0.3);
+}
+
 .editor .menubar {
   position: sticky;
   top: 0px;
   z-index: 69;
-  background: var(--background, white);
+  background: white;
-  border-bottom: 1px solid var(--accent-bg);
+  border-bottom: 1px solid #bbb;
 }
 
 .editor .menubar button {
@@ -26,15 +32,14 @@
   padding: 0.4em 0.6em;
   margin: 0.2em;
   transition: all 0.2s;
-  color: var(--foreground);
-}
-
-.editor .menubar button:hover {
-  background: var(--transparentish);
 }
 
 .editor .menubar button.active {
-  background: var(--accent-bg);
+  background: #ddd;
+}
+
+.editor .menubar button:hover {
+  background: #eee;
 }
 
 .editor .menubar button svg {
@@ -66,10 +71,49 @@
   content: "Descripción: ";
   color: #666;
 }
+.ProseMirror .ProseMirror-multimedia-placeholder {
+  margin-bottom: 0.5em;
+}
+.ProseMirror .ProseMirror-multimedia-placeholder::before {
+  content: "Clickea aquí para subir una imágen, audio o documento.";
+  color: #666;
+}
 
 .ProseMirror blockquote {
-  background-color: var(--transparentish);
+  background-color: #f5f5f5;
-  border-left: 5px solid var(--foreground);
+  border-left: 5px solid #dbdbdb;
   padding: 1.25em 1.5em;
   margin: 0.5em;
 }
+
+.ProseMirror-menubar {
+  position: sticky;
+  top: 0px;
+  z-index: 69;
+  background: white;
+  border-bottom: 1px solid #bbb;
+}
+
+.ProseMirror-menubar-separator {
+  border-right: 2px solid #bbb;
+  margin: 0 0.5rem;
+}
+
+.ProseMirror-menubar-button {
+  appearance: none;
+  background: none;
+  border: none;
+  border-radius: 8px;
+  font-size: 1em;
+  padding: 0.4em 0.6em;
+  margin: 0.2em;
+  transition: all 0.2s;
+}
+
+.ProseMirror-menubar-button-active {
+  background: #ddd;
+}
+
+.ProseMirror-menubar-button:hover {
+  background: #eee;
+}