From 6bd1954a964e1718923224476b83b6b5ab14521a Mon Sep 17 00:00:00 2001
From: Mohan <jtkjcmh@126.com>
Date: Mon, 10 Aug 2026 19:39:15 +0800
Subject: [PATCH] fix(ux): move page title next to brand, fix dark mode editor
 borders and icons

- App.vue: remove margin-right:auto from brand, add margin-left:auto to nav-links so page title sits right after Mach-CMS
- QuillEditor: use --ac-border (subtle) instead of --ac-border-strong; dark mode borders at 0.08 opacity
- QuillEditor: fix toolbar icon SVG stroke/fill colors to use theme vars instead of Quill default #444
---
 src/App.vue                    |  2 +-
 src/components/QuillEditor.vue | 41 +++++++++++++++++++++++-----------
 2 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index cb4ff81..4d6aa37 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -99,7 +99,6 @@ async function handleLogout() {
   display: flex;
   align-items: center;
   height: 100%;
-  margin-right: auto;
   color: var(--ac-header-text);
   font-family: var(--song-font-display);
   font-size: 18px;
@@ -113,6 +112,7 @@ async function handleLogout() {
   align-items: center;
   height: 100%;
   gap: 6px;
+  margin-left: auto;
 }
 
 .nav-links a,
diff --git a/src/components/QuillEditor.vue b/src/components/QuillEditor.vue
index 6494250..106b13c 100644
--- a/src/components/QuillEditor.vue
+++ b/src/components/QuillEditor.vue
@@ -87,30 +87,45 @@ watch(() => props.modelValue, (val) => {
   line-height: 1.8;
 }
 .quill-editor :deep(.ql-toolbar) {
-  border-color: var(--ac-border-strong, #d4c4b0);
+  border-color: var(--ac-border);
   background: var(--ac-surface, #faf8f5);
 }
 .quill-editor :deep(.ql-container) {
-  border-color: var(--ac-border-strong, #d4c4b0);
+  border-color: var(--ac-border);
 }
 .quill-editor :deep(.ql-editor.ql-blank::before) {
   color: var(--ac-text-disabled);
 }
-.quill-editor :deep(.ql-toolbar button) {
-  color: var(--ac-text-secondary);
-}
-.quill-editor :deep(.ql-toolbar button:hover) {
+.quill-editor :deep(.ql-toolbar button),
+.quill-editor :deep(.ql-toolbar .ql-picker-label) {
   color: var(--ac-text);
 }
-.quill-editor :deep(.ql-toolbar .ql-active) {
+.quill-editor :deep(.ql-toolbar button:hover),
+.quill-editor :deep(.ql-toolbar button.ql-active),
+.quill-editor :deep(.ql-toolbar .ql-picker-label:hover),
+.quill-editor :deep(.ql-toolbar .ql-picker-item:hover) {
   color: var(--ac-primary-ink);
 }
-.quill-editor :deep(.ql-toolbar .ql-picker-label),
-.quill-editor :deep(.ql-toolbar .ql-picker-item) {
-  color: var(--ac-text-secondary);
+.quill-editor :deep(.ql-toolbar button .ql-stroke),
+.quill-editor :deep(.ql-toolbar .ql-picker-label .ql-stroke) {
+  stroke: var(--ac-text);
 }
-.quill-editor :deep(.ql-toolbar .ql-picker-label:hover),
-.quill-editor :deep(.ql-toolbar .ql-picker-item:hover) {
-  color: var(--ac-text);
+.quill-editor :deep(.ql-toolbar button:hover .ql-stroke),
+.quill-editor :deep(.ql-toolbar button.ql-active .ql-stroke) {
+  stroke: var(--ac-primary-ink);
+}
+.quill-editor :deep(.ql-toolbar button .ql-fill) {
+  fill: var(--ac-text);
+}
+.quill-editor :deep(.ql-toolbar button:hover .ql-fill),
+.quill-editor :deep(.ql-toolbar button.ql-active .ql-fill) {
+  fill: var(--ac-primary-ink);
+}
+:root[data-theme='dark'] .quill-editor :deep(.ql-toolbar),
+:root[data-theme='dark'] .quill-editor :deep(.ql-container) {
+  border-color: rgba(230, 236, 239, 0.08);
+}
+:root[data-theme='dark'] .quill-editor :deep(.ql-toolbar) {
+  background: var(--ac-bg-card);
 }
 </style>
\ No newline at end of file