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); } \ No newline at end of file