Start UI Change

frontend/components/wiki/WikiEditor.vue

@@ -206,16 +206,62 @@ const addVideo = () => {
 <style scoped>
 /* Toolbar & Buttons */
 .toolbar-btn {
-  @apply p-1.5 rounded text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors text-sm font-medium min-w-[28px] h-[28px] flex items-center justify-center;
+  padding: 0.375rem;
+  border-radius: 0.25rem;
+  color: #4b5563;
+  transition: background-color 0.2s ease, color 0.2s ease;
+  font-size: 0.875rem;
+  font-weight: 500;
+  min-width: 28px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 .toolbar-btn.is-active {
-  @apply bg-gray-200 dark:bg-gray-600 text-black dark:text-white shadow-inner;
+  background: #e5e7eb;
+  color: #000;
+  box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
 }
 .bubble-btn {
-  @apply px-2 py-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors text-sm min-w-[24px] h-[24px] flex items-center justify-center text-gray-700 dark:text-gray-200;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  transition: background-color 0.2s ease, color 0.2s ease;
+  font-size: 0.875rem;
+  min-width: 24px;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #374151;
 }
 .bubble-btn.is-active {
-  @apply bg-gray-200 dark:bg-gray-600 text-black dark:text-white;
+  background: #e5e7eb;
+  color: #000;
+}
+
+.toolbar-btn:hover,
+.bubble-btn:hover {
+  background: #f3f4f6;
+}
+
+:global(.dark) .toolbar-btn {
+  color: #d1d5db;
+}
+
+:global(.dark) .toolbar-btn:hover,
+:global(.dark) .bubble-btn:hover {
+  background: #374151;
+}
+
+:global(.dark) .toolbar-btn.is-active,
+:global(.dark) .bubble-btn.is-active {
+  background: #4b5563;
+  color: #fff;
+}
+
+:global(.dark) .bubble-btn {
+  color: #e5e7eb;
 }
 
 /* GLOBAL EDITOR STYLES */
@@ -235,20 +281,48 @@ const addVideo = () => {
   /* MENTION */
   .wiki-mention {
     /* Pill-Shape, grau/neutral statt knallig blau */
-    @apply bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200 px-1.5 py-0.5 rounded-md text-sm font-medium no-underline inline-block mx-0.5 align-middle border border-gray-200 dark:border-gray-700;
-
+    background: #f3f4f6;
+    color: #374151;
+    padding: 0.125rem 0.375rem;
+    border-radius: 0.375rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    text-decoration: none;
+    display: inline-block;
+    margin-inline: 0.125rem;
+    vertical-align: middle;
+    border: 1px solid #e5e7eb;
     box-decoration-break: clone;
   }
 
   .wiki-mention::before {
-    @apply text-gray-400 dark:text-gray-500 mr-0.5;
+    color: #9ca3af;
+    margin-right: 0.125rem;
   }
 
   .wiki-mention:hover {
-    @apply bg-primary-50 dark:bg-primary-900/30 border-primary-200 dark:border-primary-800 text-primary-700 dark:text-primary-400;
+    background: #eefbf0;
+    border-color: #bbf7d0;
+    color: #15803d;
     cursor: pointer;
   }
 
+  :global(.dark) .wiki-mention {
+    background: #1f2937;
+    color: #e5e7eb;
+    border-color: #374151;
+  }
+
+  :global(.dark) .wiki-mention::before {
+    color: #6b7280;
+  }
+
+  :global(.dark) .wiki-mention:hover {
+    background: rgb(20 83 45 / 0.3);
+    border-color: #166534;
+    color: #4ade80;
+  }
+
   /* TABLE */
   table { width: 100% !important; border-collapse: collapse; table-layout: fixed; margin: 1rem 0; }
   th, td { border: 1px solid #d1d5db; padding: 0.5rem; vertical-align: top; box-sizing: border-box; min-width: 1em; }
@@ -258,7 +332,7 @@ const addVideo = () => {
   .column-resize-handle { background-color: #3b82f6; width: 4px; }
 
   /* CODE */
-  pre { background: #0d1117; color: #c9d1d9; font-family: 'JetBrains Mono', monospace; padding: 0.75rem 1rem; border-radius: 0.5rem; margin: 1rem 0; overflow-x: auto; }
+  pre { background: #0d1117; color: #c9d1d9; font-family: var(--font-mono); padding: 0.75rem 1rem; border-radius: 0.5rem; margin: 1rem 0; overflow-x: auto; }
   code { color: inherit; padding: 0; background: none; font-size: 0.9rem; }
 
   /* IMG */
@@ -269,4 +343,4 @@ const addVideo = () => {
   mark { background-color: #fef08a; padding: 0.1rem 0.2rem; border-radius: 0.2rem; }
   .ProseMirror-selectednode { outline: 2px solid #3b82f6; }
 }
-</style>
+</style>