EHV/librodrome
18
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Palette dynamique dans BookPlayer et admin
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse Source 
- BookPlayer : toutes les couleurs HSL en dur remplacées par variables CSS palette
- Admin (sidebar, formulaires, pages, book, songs, messages, media, login) : idem
- L'ambiance graphique suit maintenant la palette active partout

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Yvv
2026-03-14 16:41:23 +01:00
parent 9caf11c8ab
commit 8f548afb17
19 changed files with 170 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/components/admin/AdminFieldList.vue
View File

@@ -58,7 +58,7 @@ function addItem() {
.field-label { .field-label {
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 500; font-weight: 500;
color: hsl(20 8% 60%); color: hsl(var(--color-text-muted));
} }
.list-item { .list-item {
@@ -66,9 +66,9 @@ function addItem() {
align-items: flex-start; align-items: flex-start;
gap: 0.5rem; gap: 0.5rem;
padding: 0.5rem; padding: 0.5rem;
border: 1px solid hsl(20 8% 14%); border: 1px solid hsl(var(--color-surface-light));
border-radius: 0.5rem; border-radius: 0.5rem;
background: hsl(20 8% 5%); background: hsl(var(--color-bg));
} }
.list-item > :deep(*:first-child) { .list-item > :deep(*:first-child) {
@@ -101,9 +101,9 @@ function addItem() {
gap: 0.375rem; gap: 0.375rem;
padding: 0.375rem 0.75rem; padding: 0.375rem 0.75rem;
border-radius: 0.5rem; border-radius: 0.5rem;
border: 1px dashed hsl(20 8% 22%); border: 1px dashed hsl(var(--color-surface-light));
background: none; background: none;
color: hsl(20 8% 50%); color: hsl(var(--color-text-muted));
font-size: 0.8rem; font-size: 0.8rem;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
@@ -111,7 +111,7 @@ function addItem() {
} }
.list-add:hover { .list-add:hover {
border-color: hsl(12 76% 48% / 0.4); border-color: hsl(var(--color-primary) / 0.4);
color: hsl(12 76% 68%); color: hsl(var(--color-primary));
} }
</style> </style>

8
app/components/admin/AdminFieldText.vue
View File

@@ -36,14 +36,14 @@ const id = computed(() => `field-${props.label.toLowerCase().replace(/\s+/g, '-'
.field-label { .field-label {
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 500; font-weight: 500;
color: hsl(20 8% 60%); color: hsl(var(--color-text-muted));
} }
.field-input { .field-input {
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
border-radius: 0.5rem; border-radius: 0.5rem;
border: 1px solid hsl(20 8% 18%); border: 1px solid hsl(var(--color-surface-light));
background: hsl(20 8% 6%); background: hsl(var(--color-bg));
color: white; color: white;
font-size: 0.875rem; font-size: 0.875rem;
transition: border-color 0.2s; transition: border-color 0.2s;
@@ -51,6 +51,6 @@ const id = computed(() => `field-${props.label.toLowerCase().replace(/\s+/g, '-'
.field-input:focus { .field-input:focus {
outline: none; outline: none;
border-color: hsl(12 76% 48% / 0.5); border-color: hsl(var(--color-primary) / 0.5);
} }
</style> </style>

8
app/components/admin/AdminFieldTextarea.vue
View File

@@ -37,14 +37,14 @@ const id = computed(() => `field-${props.label.toLowerCase().replace(/\s+/g, '-'
.field-label { .field-label {
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 500; font-weight: 500;
color: hsl(20 8% 60%); color: hsl(var(--color-text-muted));
} }
.field-textarea { .field-textarea {
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
border-radius: 0.5rem; border-radius: 0.5rem;
border: 1px solid hsl(20 8% 18%); border: 1px solid hsl(var(--color-surface-light));
background: hsl(20 8% 6%); background: hsl(var(--color-bg));
color: white; color: white;
font-size: 0.875rem; font-size: 0.875rem;
resize: vertical; resize: vertical;
@@ -55,6 +55,6 @@ const id = computed(() => `field-${props.label.toLowerCase().replace(/\s+/g, '-'
.field-textarea:focus { .field-textarea:focus {
outline: none; outline: none;
border-color: hsl(12 76% 48% / 0.5); border-color: hsl(var(--color-primary) / 0.5);
} }
</style> </style>

6
app/components/admin/AdminFormSection.vue
View File

@@ -19,7 +19,7 @@ defineProps<{
<style scoped> <style scoped>
.admin-section { .admin-section {
border: 1px solid hsl(20 8% 14%); border: 1px solid hsl(var(--color-surface-light));
border-radius: 0.75rem; border-radius: 0.75rem;
overflow: hidden; overflow: hidden;
margin-bottom: 1rem; margin-bottom: 1rem;
@@ -34,12 +34,12 @@ defineProps<{
font-size: 0.9rem; font-size: 0.9rem;
color: white; color: white;
cursor: pointer; cursor: pointer;
background: hsl(20 8% 6%); background: hsl(var(--color-bg));
user-select: none; user-select: none;
} }
.admin-section-header:hover { .admin-section-header:hover {
background: hsl(20 8% 8%); background: hsl(var(--color-surface));
} }
.admin-section[open] .section-arrow { .admin-section[open] .section-arrow {

20
app/components/admin/AdminMarkdownEditor.vue
View File

@@ -98,7 +98,7 @@ const renderedHtml = computed(() => {
<style scoped> <style scoped>
.md-editor { .md-editor {
border: 1px solid hsl(20 8% 18%); border: 1px solid hsl(var(--color-surface-light));
border-radius: 0.5rem; border-radius: 0.5rem;
overflow: hidden; overflow: hidden;
} }
@@ -107,8 +107,8 @@ const renderedHtml = computed(() => {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
background: hsl(20 8% 6%); background: hsl(var(--color-bg));
border-bottom: 1px solid hsl(20 8% 14%); border-bottom: 1px solid hsl(var(--color-surface-light));
} }
.md-tabs { .md-tabs {
@@ -122,7 +122,7 @@ const renderedHtml = computed(() => {
padding: 0.5rem 0.875rem; padding: 0.5rem 0.875rem;
border: none; border: none;
background: none; background: none;
color: hsl(20 8% 50%); color: hsl(var(--color-text-muted));
font-size: 0.8rem; font-size: 0.8rem;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
@@ -130,12 +130,12 @@ const renderedHtml = computed(() => {
.md-tab--active { .md-tab--active {
color: white; color: white;
background: hsl(20 8% 10%); background: hsl(var(--color-surface));
} }
.md-fullscreen { .md-fullscreen {
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
color: hsl(20 8% 40%); color: hsl(var(--color-text-muted));
transition: color 0.2s; transition: color 0.2s;
} }
.md-fullscreen:hover, .md-fullscreen:hover,
@@ -151,14 +151,14 @@ const renderedHtml = computed(() => {
} }
.md-body--split .md-preview { .md-body--split .md-preview {
border-left: 1px solid hsl(20 8% 14%); border-left: 1px solid hsl(var(--color-surface-light));
} }
.md-body--fullscreen { .md-body--fullscreen {
position: fixed; position: fixed;
inset: 0; inset: 0;
z-index: 50; z-index: 50;
background: hsl(20 8% 4%); background: hsl(var(--color-bg));
} }
.md-body--fullscreen .md-textarea, .md-body--fullscreen .md-textarea,
@@ -170,7 +170,7 @@ const renderedHtml = computed(() => {
width: 100%; width: 100%;
padding: 1rem; padding: 1rem;
border: none; border: none;
background: hsl(20 8% 4%); background: hsl(var(--color-bg));
color: white; color: white;
font-family: var(--font-mono, monospace); font-family: var(--font-mono, monospace);
font-size: 0.85rem; font-size: 0.85rem;
@@ -189,6 +189,6 @@ const renderedHtml = computed(() => {
min-height: 24rem; min-height: 24rem;
max-height: 70vh; max-height: 70vh;
overflow-y: auto; overflow-y: auto;
background: hsl(20 8% 4%); background: hsl(var(--color-bg));
} }
</style> </style>

30
app/components/admin/AdminMediaBrowser.vue
View File

@@ -102,18 +102,18 @@ function formatSize(bytes: number): string {
.filter-btn { .filter-btn {
padding: 0.25rem 0.625rem; padding: 0.25rem 0.625rem;
border-radius: 9999px; border-radius: 9999px;
border: 1px solid hsl(20 8% 18%); border: 1px solid hsl(var(--color-surface-light));
background: none; background: none;
color: hsl(20 8% 55%); color: hsl(var(--color-text-muted));
font-size: 0.75rem; font-size: 0.75rem;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
} }
.filter-btn--active { .filter-btn--active {
background: hsl(12 76% 48% / 0.15); background: hsl(var(--color-primary) / 0.15);
border-color: hsl(12 76% 48% / 0.3); border-color: hsl(var(--color-primary) / 0.3);
color: hsl(12 76% 68%); color: hsl(var(--color-primary));
} }
.media-grid { .media-grid {
@@ -123,7 +123,7 @@ function formatSize(bytes: number): string {
} }
.media-card { .media-card {
border: 1px solid hsl(20 8% 14%); border: 1px solid hsl(var(--color-surface-light));
border-radius: 0.5rem; border-radius: 0.5rem;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
@@ -131,18 +131,18 @@ function formatSize(bytes: number): string {
} }
.media-card:hover { .media-card:hover {
border-color: hsl(20 8% 22%); border-color: hsl(var(--color-surface-light));
} }
.media-card--selected { .media-card--selected {
border-color: hsl(12 76% 48%); border-color: hsl(var(--color-primary));
box-shadow: 0 0 0 1px hsl(12 76% 48% / 0.3); box-shadow: 0 0 0 1px hsl(var(--color-primary) / 0.3);
} }
.media-thumb { .media-thumb {
aspect-ratio: 1; aspect-ratio: 1;
overflow: hidden; overflow: hidden;
background: hsl(20 8% 6%); background: hsl(var(--color-bg));
} }
.media-thumb img { .media-thumb img {
@@ -156,8 +156,8 @@ function formatSize(bytes: number): string {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: hsl(20 8% 6%); background: hsl(var(--color-bg));
color: hsl(20 8% 40%); color: hsl(var(--color-text-muted));
} }
.media-info { .media-info {
@@ -177,7 +177,7 @@ function formatSize(bytes: number): string {
.media-size { .media-size {
font-size: 0.65rem; font-size: 0.65rem;
color: hsl(20 8% 40%); color: hsl(var(--color-text-muted));
} }
.media-actions { .media-actions {
@@ -186,9 +186,9 @@ function formatSize(bytes: number): string {
justify-content: space-between; justify-content: space-between;
margin-top: 1rem; margin-top: 1rem;
padding: 0.75rem; padding: 0.75rem;
border: 1px solid hsl(20 8% 14%); border: 1px solid hsl(var(--color-surface-light));
border-radius: 0.5rem; border-radius: 0.5rem;
background: hsl(20 8% 5%); background: hsl(var(--color-bg));
} }
.delete-btn { .delete-btn {

10
app/components/admin/AdminMediaUpload.vue
View File

@@ -73,7 +73,7 @@ async function upload(files: FileList) {
<style scoped> <style scoped>
.upload-zone { .upload-zone {
border: 2px dashed hsl(20 8% 22%); border: 2px dashed hsl(var(--color-surface-light));
border-radius: 0.75rem; border-radius: 0.75rem;
padding: 2rem; padding: 2rem;
text-align: center; text-align: center;
@@ -82,12 +82,12 @@ async function upload(files: FileList) {
} }
.upload-zone:hover { .upload-zone:hover {
border-color: hsl(12 76% 48% / 0.4); border-color: hsl(var(--color-primary) / 0.4);
} }
.upload-zone--active { .upload-zone--active {
border-color: hsl(12 76% 48%); border-color: hsl(var(--color-primary));
background: hsl(12 76% 48% / 0.05); background: hsl(var(--color-primary) / 0.05);
} }
.upload-progress { .upload-progress {
@@ -95,7 +95,7 @@ async function upload(files: FileList) {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
color: hsl(20 8% 55%); color: hsl(var(--color-text-muted));
font-size: 0.85rem; font-size: 0.85rem;
} }

4
app/components/admin/AdminSaveButton.vue
View File

@@ -31,7 +31,7 @@ defineEmits<{
padding: 0.625rem 1.25rem; padding: 0.625rem 1.25rem;
border-radius: 0.5rem; border-radius: 0.5rem;
border: none; border: none;
background: hsl(12 76% 48%); background: hsl(var(--color-primary));
color: white; color: white;
font-weight: 600; font-weight: 600;
font-size: 0.85rem; font-size: 0.85rem;
@@ -40,7 +40,7 @@ defineEmits<{
} }
.save-btn:hover:not(:disabled) { .save-btn:hover:not(:disabled) {
background: hsl(12 76% 42%); background: hsl(var(--color-primary));
} }
.save-btn:disabled { .save-btn:disabled {

18
app/components/admin/AdminSidebar.vue
View File

@@ -91,8 +91,8 @@ async function logout() {
<style scoped> <style scoped>
.admin-sidebar { .admin-sidebar {
background: hsl(20 8% 5%); background: hsl(var(--color-bg));
border-right: 1px solid hsl(20 8% 14%); border-right: 1px solid hsl(var(--color-surface-light));
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100dvh; height: 100dvh;
@@ -102,7 +102,7 @@ async function logout() {
.sidebar-header { .sidebar-header {
padding: 1.25rem 1rem; padding: 1.25rem 1rem;
border-bottom: 1px solid hsl(20 8% 14%); border-bottom: 1px solid hsl(var(--color-surface-light));
} }
.sidebar-nav { .sidebar-nav {
@@ -116,7 +116,7 @@ async function logout() {
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.1em; letter-spacing: 0.1em;
color: hsl(20 8% 40%); color: hsl(var(--color-text-muted));
padding: 1rem 0.75rem 0.375rem; padding: 1rem 0.75rem 0.375rem;
margin: 0; margin: 0;
} }
@@ -128,7 +128,7 @@ async function logout() {
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
border-radius: 0.5rem; border-radius: 0.5rem;
font-size: 0.85rem; font-size: 0.85rem;
color: hsl(20 8% 60%); color: hsl(var(--color-text-muted));
text-decoration: none; text-decoration: none;
transition: all 0.2s; transition: all 0.2s;
border: none; border: none;
@@ -138,18 +138,18 @@ async function logout() {
} }
.sidebar-link:hover { .sidebar-link:hover {
background: hsl(20 8% 10%); background: hsl(var(--color-surface));
color: white; color: white;
} }
.sidebar-link--active { .sidebar-link--active {
background: hsl(12 76% 48% / 0.12); background: hsl(var(--color-primary) / 0.12);
color: hsl(12 76% 68%); color: hsl(var(--color-primary));
} }
.sidebar-footer { .sidebar-footer {
padding: 0.5rem; padding: 0.5rem;
border-top: 1px solid hsl(20 8% 14%); border-top: 1px solid hsl(var(--color-surface-light));
} }
@media (max-width: 768px) { @media (max-width: 768px) {

38
app/components/book/BookPlayer.vue
View File

@@ -447,7 +447,7 @@ onUnmounted(() => {
position: fixed; position: fixed;
inset: 0; inset: 0;
z-index: 60; z-index: 60;
background: hsl(20 8% 3%); background: hsl(var(--color-bg));
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@@ -538,7 +538,7 @@ onUnmounted(() => {
transform: translateX(-50%); transform: translateX(-50%);
z-index: 10; z-index: 10;
font-size: 0.68rem; font-size: 0.68rem;
color: hsl(20 8% 28%); color: hsl(var(--color-text-muted));
white-space: nowrap; white-space: nowrap;
} }
@@ -582,7 +582,7 @@ onUnmounted(() => {
width: 2.25rem; height: 2.25rem; width: 2.25rem; height: 2.25rem;
border-radius: 0.5rem; border-radius: 0.5rem;
background: transparent; background: transparent;
color: hsl(20 8% 45%); color: hsl(var(--color-text-muted));
border: none; border: none;
cursor: pointer; cursor: pointer;
transition: all 0.3s; transition: all 0.3s;
@@ -617,7 +617,7 @@ onUnmounted(() => {
.reader-bar-pages { .reader-bar-pages {
font-family: var(--font-mono, monospace); font-family: var(--font-mono, monospace);
font-size: 0.75rem; font-size: 0.75rem;
color: hsl(20 8% 40%); color: hsl(var(--color-text-muted));
flex-shrink: 0; flex-shrink: 0;
} }
@@ -626,16 +626,16 @@ onUnmounted(() => {
position: absolute; position: absolute;
inset: 0; inset: 0;
z-index: 72; z-index: 72;
background: hsl(20 8% 3% / 0.6); background: hsl(var(--color-bg) / 0.6);
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
display: flex; display: flex;
} }
.sommaire-panel { .sommaire-panel {
width: min(300px, 80vw); width: min(300px, 80vw);
height: 100%; height: 100%;
background: hsl(20 8% 6% / 0.95); background: hsl(var(--color-surface) / 0.95);
backdrop-filter: blur(16px); backdrop-filter: blur(16px);
border-right: 1px solid hsl(20 8% 14%); border-right: 1px solid hsl(var(--color-surface-light));
padding: 1.5rem; padding: 1.5rem;
overflow-y: auto; overflow-y: auto;
display: flex; display: flex;
@@ -646,7 +646,7 @@ onUnmounted(() => {
font-family: var(--font-display, 'Syne', sans-serif); font-family: var(--font-display, 'Syne', sans-serif);
font-size: 0.85rem; font-size: 0.85rem;
font-weight: 700; font-weight: 700;
color: hsl(20 8% 45%); color: hsl(var(--color-text-muted));
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.1em; letter-spacing: 0.1em;
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
@@ -658,7 +658,7 @@ onUnmounted(() => {
padding: 0.625rem 0.75rem; padding: 0.625rem 0.75rem;
border-radius: 0.5rem; border-radius: 0.5rem;
font-size: 0.85rem; font-size: 0.85rem;
color: hsl(20 8% 55%); color: hsl(var(--color-text-muted));
background: transparent; background: transparent;
border: none; border: none;
cursor: pointer; cursor: pointer;
@@ -667,7 +667,7 @@ onUnmounted(() => {
width: 100%; width: 100%;
} }
.sommaire-item:hover { .sommaire-item:hover {
background: hsl(20 8% 12%); background: hsl(var(--color-surface));
color: white; color: white;
} }
.sommaire-item--active { .sommaire-item--active {
@@ -683,8 +683,8 @@ onUnmounted(() => {
font-size: 0.65rem; font-size: 0.65rem;
font-weight: 700; font-weight: 700;
font-family: var(--font-mono, monospace); font-family: var(--font-mono, monospace);
color: hsl(20 8% 40%); color: hsl(var(--color-text-muted));
background: hsl(20 8% 12%); background: hsl(var(--color-surface));
flex-shrink: 0; flex-shrink: 0;
} }
.sommaire-item--active .sommaire-num { .sommaire-item--active .sommaire-num {
@@ -713,7 +713,7 @@ onUnmounted(() => {
width: 100%; width: 100%;
overflow: hidden auto; overflow: hidden auto;
border-radius: 0.75rem; border-radius: 0.75rem;
background: hsl(20 8% 5% / 0.4); background: hsl(var(--color-bg) / 0.4);
backdrop-filter: blur(16px); backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
} }
@@ -809,7 +809,7 @@ onUnmounted(() => {
height: 100%; height: 100%;
pointer-events: none; pointer-events: none;
opacity: 0; opacity: 0;
background: linear-gradient(to left, hsl(20 8% 3% / 0.4), transparent); background: linear-gradient(to left, hsl(var(--color-bg) / 0.4), transparent);
transition: opacity 0.15s; transition: opacity 0.15s;
border-radius: 0 0.75rem 0.75rem 0; border-radius: 0 0.75rem 0.75rem 0;
} }
@@ -833,7 +833,7 @@ onUnmounted(() => {
width: 2.5rem; height: 2.5rem; width: 2.5rem; height: 2.5rem;
border-radius: 50%; border-radius: 50%;
background: transparent; background: transparent;
color: hsl(20 8% 45%); color: hsl(var(--color-text-muted));
border: none; border: none;
cursor: pointer; cursor: pointer;
transition: all 0.3s; transition: all 0.3s;
@@ -861,7 +861,7 @@ onUnmounted(() => {
border-radius: 50%; border-radius: 50%;
overflow: hidden; overflow: hidden;
flex-shrink: 0; flex-shrink: 0;
border: 2px solid hsl(20 8% 22%); border: 2px solid hsl(var(--color-surface-light));
box-shadow: 0 0 10px hsl(var(--scene-h1) 50% 40% / 0.15); box-shadow: 0 0 10px hsl(var(--scene-h1) 50% 40% / 0.15);
} }
.reader-disc.spinning { .reader-disc.spinning {
@@ -878,12 +878,12 @@ onUnmounted(() => {
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 0.5rem; height: 0.5rem; width: 0.5rem; height: 0.5rem;
border-radius: 50%; border-radius: 50%;
background: hsl(20 8% 5%); background: hsl(var(--color-bg));
border: 1.5px solid hsl(20 8% 18%); border: 1.5px solid hsl(var(--color-surface-light));
} }
.reader-song-name { .reader-song-name {
font-size: 0.75rem; font-size: 0.75rem;
color: hsl(20 8% 50%); color: hsl(var(--color-text-muted));
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;

32
app/pages/admin/book/[slug].vue
View File

@@ -209,7 +209,7 @@ async function save() {
.field-label { .field-label {
display: block; display: block;
font-size: 0.75rem; font-size: 0.75rem;
color: hsl(20 8% 50%); color: hsl(var(--color-text-muted));
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
@@ -217,15 +217,15 @@ async function save() {
width: 100%; width: 100%;
padding: 0.5rem 0.625rem; padding: 0.5rem 0.625rem;
border-radius: 0.375rem; border-radius: 0.375rem;
border: 1px solid hsl(20 8% 18%); border: 1px solid hsl(var(--color-surface-light));
background: hsl(20 8% 6%); background: hsl(var(--color-bg));
color: white; color: white;
font-size: 0.85rem; font-size: 0.85rem;
} }
.field-input:focus { .field-input:focus {
outline: none; outline: none;
border-color: hsl(12 76% 48% / 0.5); border-color: hsl(var(--color-primary) / 0.5);
} }
/* ── Song tags ── */ /* ── Song tags ── */
@@ -233,41 +233,41 @@ async function save() {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
border-radius: 9999px; border-radius: 9999px;
border: 1px solid hsl(20 8% 22%); border: 1px solid hsl(var(--color-surface-light));
transition: all 0.15s; transition: all 0.15s;
overflow: hidden; overflow: hidden;
} }
.song-tag:hover { .song-tag:hover {
border-color: hsl(12 76% 48% / 0.4); border-color: hsl(var(--color-primary) / 0.4);
} }
.song-tag--active { .song-tag--active {
border-color: hsl(12 76% 48% / 0.6); border-color: hsl(var(--color-primary) / 0.6);
background: hsl(12 76% 48% / 0.08); background: hsl(var(--color-primary) / 0.08);
} }
.song-tag--primary { .song-tag--primary {
border-color: hsl(45 90% 55%); border-color: hsl(var(--color-accent));
background: hsl(45 90% 55% / 0.08); background: hsl(var(--color-accent) / 0.08);
} }
.song-tag-label { .song-tag-label {
padding: 0.375rem 0.75rem; padding: 0.375rem 0.75rem;
background: none; background: none;
border: none; border: none;
color: hsl(20 8% 50%); color: hsl(var(--color-text-muted));
font-size: 0.8rem; font-size: 0.8rem;
cursor: pointer; cursor: pointer;
transition: color 0.15s; transition: color 0.15s;
} }
.song-tag--active .song-tag-label { .song-tag--active .song-tag-label {
color: hsl(12 76% 68%); color: hsl(var(--color-primary));
} }
.song-tag--primary .song-tag-label { .song-tag--primary .song-tag-label {
color: hsl(45 90% 65%); color: hsl(var(--color-accent));
} }
.song-tag-label:hover { .song-tag-label:hover {
@@ -281,16 +281,16 @@ async function save() {
padding: 0.375rem 0 0.375rem 0.625rem; padding: 0.375rem 0 0.375rem 0.625rem;
background: none; background: none;
border: none; border: none;
color: hsl(20 8% 30%); color: hsl(var(--color-text-muted));
cursor: pointer; cursor: pointer;
transition: color 0.15s; transition: color 0.15s;
} }
.song-star:hover { .song-star:hover {
color: hsl(45 90% 55%); color: hsl(var(--color-accent));
} }
.song-star--active { .song-star--active {
color: hsl(45 90% 55%); color: hsl(var(--color-accent));
} }
</style> </style>

54
app/pages/admin/book/index.vue
View File

@@ -249,9 +249,9 @@ async function removeChapter(slug: string) {
.pdf-section { .pdf-section {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
padding: 1rem; padding: 1rem;
border: 1px solid hsl(20 8% 14%); border: 1px solid hsl(var(--color-surface-light));
border-radius: 0.5rem; border-radius: 0.5rem;
background: hsl(20 8% 5%); background: hsl(var(--color-bg));
} }
.save-pdf-btn { .save-pdf-btn {
@@ -260,9 +260,9 @@ async function removeChapter(slug: string) {
gap: 0.5rem; gap: 0.5rem;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border-radius: 0.5rem; border-radius: 0.5rem;
border: 1px solid hsl(20 8% 25%); border: 1px solid hsl(var(--color-surface-light));
background: none; background: none;
color: hsl(20 8% 55%); color: hsl(var(--color-text-muted));
font-size: 0.8rem; font-size: 0.8rem;
cursor: pointer; cursor: pointer;
transition: all 0.15s; transition: all 0.15s;
@@ -270,8 +270,8 @@ async function removeChapter(slug: string) {
} }
.save-pdf-btn:hover:not(:disabled) { .save-pdf-btn:hover:not(:disabled) {
border-color: hsl(12 76% 48% / 0.5); border-color: hsl(var(--color-primary) / 0.5);
color: hsl(12 76% 68%); color: hsl(var(--color-primary));
} }
.save-pdf-btn:disabled { .save-pdf-btn:disabled {
@@ -284,14 +284,14 @@ async function removeChapter(slug: string) {
align-items: center; align-items: center;
gap: 0.75rem; gap: 0.75rem;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
border: 1px solid hsl(20 8% 14%); border: 1px solid hsl(var(--color-surface-light));
border-radius: 0.5rem; border-radius: 0.5rem;
transition: all 0.2s; transition: all 0.2s;
} }
.chapter-item:hover { .chapter-item:hover {
border-color: hsl(12 76% 48% / 0.3); border-color: hsl(var(--color-primary) / 0.3);
background: hsl(20 8% 6%); background: hsl(var(--color-bg));
} }
.chapter-item--dragging { .chapter-item--dragging {
@@ -299,13 +299,13 @@ async function removeChapter(slug: string) {
} }
.chapter-item--over { .chapter-item--over {
border-top: 2px solid hsl(12 76% 48%); border-top: 2px solid hsl(var(--color-primary));
} }
.drag-handle { .drag-handle {
cursor: grab; cursor: grab;
padding: 0.25rem; padding: 0.25rem;
color: hsl(20 8% 35%); color: hsl(var(--color-text-muted));
flex-shrink: 0; flex-shrink: 0;
} }
@@ -316,7 +316,7 @@ async function removeChapter(slug: string) {
.chapter-order { .chapter-order {
font-family: var(--font-mono, monospace); font-family: var(--font-mono, monospace);
font-size: 0.85rem; font-size: 0.85rem;
color: hsl(12 76% 48% / 0.5); color: hsl(var(--color-primary) / 0.5);
font-weight: 600; font-weight: 600;
width: 1.75rem; width: 1.75rem;
} }
@@ -334,7 +334,7 @@ async function removeChapter(slug: string) {
} }
.chapter-title:hover { .chapter-title:hover {
color: hsl(12 76% 68%); color: hsl(var(--color-primary));
} }
.chapter-songs { .chapter-songs {
@@ -348,9 +348,9 @@ async function removeChapter(slug: string) {
font-size: 0.65rem; font-size: 0.65rem;
padding: 0.1rem 0.5rem; padding: 0.1rem 0.5rem;
border-radius: 9999px; border-radius: 9999px;
background: hsl(12 76% 48% / 0.1); background: hsl(var(--color-primary) / 0.1);
color: hsl(12 76% 60%); color: hsl(var(--color-primary));
border: 1px solid hsl(12 76% 48% / 0.2); border: 1px solid hsl(var(--color-primary) / 0.2);
} }
.page-select { .page-select {
@@ -358,16 +358,16 @@ async function removeChapter(slug: string) {
max-width: 14rem; max-width: 14rem;
padding: 0.25rem 0.4rem; padding: 0.25rem 0.4rem;
border-radius: 0.375rem; border-radius: 0.375rem;
border: 1px solid hsl(20 8% 18%); border: 1px solid hsl(var(--color-surface-light));
background: hsl(20 8% 6%); background: hsl(var(--color-bg));
color: hsl(20 8% 65%); color: hsl(var(--color-text-muted));
font-size: 0.7rem; font-size: 0.7rem;
cursor: pointer; cursor: pointer;
} }
.page-select:focus { .page-select:focus {
outline: none; outline: none;
border-color: hsl(12 76% 48% / 0.5); border-color: hsl(var(--color-primary) / 0.5);
} }
.delete-btn { .delete-btn {
@@ -388,15 +388,15 @@ async function removeChapter(slug: string) {
.admin-input { .admin-input {
padding: 0.375rem 0.5rem; padding: 0.375rem 0.5rem;
border-radius: 0.375rem; border-radius: 0.375rem;
border: 1px solid hsl(20 8% 18%); border: 1px solid hsl(var(--color-surface-light));
background: hsl(20 8% 6%); background: hsl(var(--color-bg));
color: white; color: white;
font-size: 0.8rem; font-size: 0.8rem;
} }
.admin-input:focus { .admin-input:focus {
outline: none; outline: none;
border-color: hsl(12 76% 48% / 0.5); border-color: hsl(var(--color-primary) / 0.5);
} }
.add-btn { .add-btn {
@@ -405,9 +405,9 @@ async function removeChapter(slug: string) {
gap: 0.5rem; gap: 0.5rem;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border-radius: 0.5rem; border-radius: 0.5rem;
border: 1px solid hsl(20 8% 25%); border: 1px solid hsl(var(--color-surface-light));
background: none; background: none;
color: hsl(20 8% 55%); color: hsl(var(--color-text-muted));
font-size: 0.85rem; font-size: 0.85rem;
cursor: pointer; cursor: pointer;
transition: all 0.15s; transition: all 0.15s;
@@ -415,8 +415,8 @@ async function removeChapter(slug: string) {
} }
.add-btn:hover:not(:disabled) { .add-btn:hover:not(:disabled) {
border-color: hsl(12 76% 48% / 0.5); border-color: hsl(var(--color-primary) / 0.5);
color: hsl(12 76% 68%); color: hsl(var(--color-primary));
} }
.add-btn:disabled { .add-btn:disabled {

8
app/pages/admin/index.vue
View File

@@ -53,14 +53,14 @@ definePageMeta({
.dash-card { .dash-card {
padding: 1.5rem; padding: 1.5rem;
border-radius: 0.75rem; border-radius: 0.75rem;
border: 1px solid hsl(20 8% 14%); border: 1px solid hsl(var(--color-surface-light));
background: hsl(20 8% 6%); background: hsl(var(--color-bg));
text-decoration: none; text-decoration: none;
transition: all 0.2s; transition: all 0.2s;
} }
.dash-card:hover { .dash-card:hover {
border-color: hsl(12 76% 48% / 0.3); border-color: hsl(var(--color-primary) / 0.3);
background: hsl(20 8% 8%); background: hsl(var(--color-surface));
} }
</style> </style>

24
app/pages/admin/login.vue
View File

@@ -72,16 +72,16 @@ async function login() {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: hsl(20 8% 3.5%); background: hsl(var(--color-bg));
} }
.login-form { .login-form {
width: 100%; width: 100%;
max-width: 24rem; max-width: 24rem;
padding: 2.5rem; padding: 2.5rem;
border: 1px solid hsl(20 8% 14%); border: 1px solid hsl(var(--color-surface-light));
border-radius: 1rem; border-radius: 1rem;
background: hsl(20 8% 6%); background: hsl(var(--color-bg));
} }
.login-error { .login-error {
@@ -97,7 +97,7 @@ async function login() {
display: block; display: block;
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 500; font-weight: 500;
color: hsl(20 8% 60%); color: hsl(var(--color-text-muted));
margin-bottom: 0.375rem; margin-bottom: 0.375rem;
} }
@@ -105,8 +105,8 @@ async function login() {
width: 100%; width: 100%;
padding: 0.625rem 0.75rem; padding: 0.625rem 0.75rem;
border-radius: 0.5rem; border-radius: 0.5rem;
border: 1px solid hsl(20 8% 18%); border: 1px solid hsl(var(--color-surface-light));
background: hsl(20 8% 4%); background: hsl(var(--color-bg));
color: white; color: white;
font-size: 0.9rem; font-size: 0.9rem;
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
@@ -114,7 +114,7 @@ async function login() {
.login-input:focus { .login-input:focus {
outline: none; outline: none;
border-color: hsl(12 76% 48% / 0.5); border-color: hsl(var(--color-primary) / 0.5);
} }
.login-btn { .login-btn {
@@ -126,7 +126,7 @@ async function login() {
padding: 0.625rem; padding: 0.625rem;
border-radius: 0.5rem; border-radius: 0.5rem;
border: none; border: none;
background: hsl(12 76% 48%); background: hsl(var(--color-primary));
color: white; color: white;
font-weight: 600; font-weight: 600;
font-size: 0.9rem; font-size: 0.9rem;
@@ -135,7 +135,7 @@ async function login() {
} }
.login-btn:hover:not(:disabled) { .login-btn:hover:not(:disabled) {
background: hsl(12 76% 42%); background: hsl(var(--color-primary));
} }
.login-btn:disabled { .login-btn:disabled {
@@ -147,12 +147,12 @@ async function login() {
margin-top: 1rem; margin-top: 1rem;
text-align: center; text-align: center;
font-size: 0.75rem; font-size: 0.75rem;
color: hsl(20 8% 40%); color: hsl(var(--color-text-muted));
} }
.dev-hint code { .dev-hint code {
color: hsl(12 76% 60%); color: hsl(var(--color-primary));
background: hsl(20 8% 10%); background: hsl(var(--color-surface));
padding: 0.125rem 0.375rem; padding: 0.125rem 0.375rem;
border-radius: 0.25rem; border-radius: 0.25rem;
} }

22
app/pages/admin/messages.vue
View File

@@ -130,14 +130,14 @@ function formatDate(iso: string) {
<style scoped> <style scoped>
.msg-row { .msg-row {
background: hsl(20 8% 6%); background: hsl(var(--color-bg));
border: 1px solid hsl(20 8% 14%); border: 1px solid hsl(var(--color-surface-light));
border-radius: 0.75rem; border-radius: 0.75rem;
padding: 1rem 1.25rem; padding: 1rem 1.25rem;
} }
.msg-row--draft { .msg-row--draft {
border-left: 3px solid hsl(36 80% 52%); border-left: 3px solid hsl(var(--color-accent));
} }
.status-badge { .status-badge {
@@ -155,22 +155,22 @@ function formatDate(iso: string) {
} }
.status-badge--draft { .status-badge--draft {
background: hsl(36 80% 52% / 0.15); background: hsl(var(--color-accent) / 0.15);
color: hsl(36 80% 66%); color: hsl(var(--color-accent));
} }
.admin-input { .admin-input {
padding: 0.375rem 0.5rem; padding: 0.375rem 0.5rem;
border-radius: 0.375rem; border-radius: 0.375rem;
border: 1px solid hsl(20 8% 18%); border: 1px solid hsl(var(--color-surface-light));
background: hsl(20 8% 6%); background: hsl(var(--color-bg));
color: white; color: white;
font-size: 0.8rem; font-size: 0.8rem;
} }
.admin-input:focus { .admin-input:focus {
outline: none; outline: none;
border-color: hsl(12 76% 48% / 0.5); border-color: hsl(var(--color-primary) / 0.5);
} }
.action-btn { .action-btn {
@@ -180,15 +180,15 @@ function formatDate(iso: string) {
padding: 0.3rem 0.6rem; padding: 0.3rem 0.6rem;
border-radius: 0.375rem; border-radius: 0.375rem;
font-size: 0.75rem; font-size: 0.75rem;
color: hsl(20 8% 60%); color: hsl(var(--color-text-muted));
background: none; background: none;
border: 1px solid hsl(20 8% 16%); border: 1px solid hsl(var(--color-surface-light));
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
} }
.action-btn:hover { .action-btn:hover {
background: hsl(20 8% 10%); background: hsl(var(--color-surface));
color: white; color: white;
} }

8
app/pages/admin/pages/[...path].vue
View File

@@ -83,10 +83,10 @@ async function save() {
.yaml-textarea { .yaml-textarea {
width: 100%; width: 100%;
padding: 1rem; padding: 1rem;
border: 1px solid hsl(20 8% 18%); border: 1px solid hsl(var(--color-surface-light));
border-radius: 0.5rem; border-radius: 0.5rem;
background: hsl(20 8% 4%); background: hsl(var(--color-bg));
color: hsl(36 80% 76%); color: hsl(var(--color-accent));
font-family: var(--font-mono, monospace); font-family: var(--font-mono, monospace);
font-size: 0.85rem; font-size: 0.85rem;
line-height: 1.7; line-height: 1.7;
@@ -96,6 +96,6 @@ async function save() {
.yaml-textarea:focus { .yaml-textarea:focus {
outline: none; outline: none;
border-color: hsl(12 76% 48% / 0.5); border-color: hsl(var(--color-primary) / 0.5);
} }
</style> </style>

8
app/pages/admin/pages/index.vue
View File

@@ -84,14 +84,14 @@ const sections = computed(() => {
flex-direction: column; flex-direction: column;
padding: 1rem; padding: 1rem;
border-radius: 0.5rem; border-radius: 0.5rem;
border: 1px solid hsl(20 8% 14%); border: 1px solid hsl(var(--color-surface-light));
background: hsl(20 8% 6%); background: hsl(var(--color-bg));
text-decoration: none; text-decoration: none;
transition: all 0.2s; transition: all 0.2s;
} }
.page-card:hover { .page-card:hover {
border-color: hsl(12 76% 48% / 0.3); border-color: hsl(var(--color-primary) / 0.3);
background: hsl(20 8% 8%); background: hsl(var(--color-surface));
} }
</style> </style>

6
app/pages/admin/site.vue
View File

@@ -103,14 +103,14 @@ async function save() {
.admin-input { .admin-input {
padding: 0.375rem 0.5rem; padding: 0.375rem 0.5rem;
border-radius: 0.375rem; border-radius: 0.375rem;
border: 1px solid hsl(20 8% 18%); border: 1px solid hsl(var(--color-surface-light));
background: hsl(20 8% 6%); background: hsl(var(--color-bg));
color: white; color: white;
font-size: 0.8rem; font-size: 0.8rem;
} }
.admin-input:focus { .admin-input:focus {
outline: none; outline: none;
border-color: hsl(12 76% 48% / 0.5); border-color: hsl(var(--color-primary) / 0.5);
} }
</style> </style>

22
app/pages/admin/songs.vue
View File

@@ -163,7 +163,7 @@ async function save() {
align-items: flex-start; align-items: flex-start;
gap: 0.75rem; gap: 0.75rem;
padding: 0.75rem 0.5rem; padding: 0.75rem 0.5rem;
border-bottom: 1px solid hsl(20 8% 10%); border-bottom: 1px solid hsl(var(--color-surface));
transition: background 0.15s; transition: background 0.15s;
} }
@@ -172,13 +172,13 @@ async function save() {
} }
.song-row--over { .song-row--over {
border-top: 2px solid hsl(12 76% 48%); border-top: 2px solid hsl(var(--color-primary));
} }
.drag-handle { .drag-handle {
cursor: grab; cursor: grab;
padding: 0.25rem; padding: 0.25rem;
color: hsl(20 8% 35%); color: hsl(var(--color-text-muted));
flex-shrink: 0; flex-shrink: 0;
margin-top: 0.25rem; margin-top: 0.25rem;
} }
@@ -190,7 +190,7 @@ async function save() {
.song-num { .song-num {
font-family: var(--font-mono, monospace); font-family: var(--font-mono, monospace);
font-size: 0.8rem; font-size: 0.8rem;
color: hsl(20 8% 40%); color: hsl(var(--color-text-muted));
width: 1.25rem; width: 1.25rem;
text-align: right; text-align: right;
flex-shrink: 0; flex-shrink: 0;
@@ -200,8 +200,8 @@ async function save() {
.admin-input { .admin-input {
padding: 0.375rem 0.5rem; padding: 0.375rem 0.5rem;
border-radius: 0.375rem; border-radius: 0.375rem;
border: 1px solid hsl(20 8% 18%); border: 1px solid hsl(var(--color-surface-light));
background: hsl(20 8% 6%); background: hsl(var(--color-bg));
color: white; color: white;
font-size: 0.8rem; font-size: 0.8rem;
width: 100%; width: 100%;
@@ -209,7 +209,7 @@ async function save() {
.admin-input:focus { .admin-input:focus {
outline: none; outline: none;
border-color: hsl(12 76% 48% / 0.5); border-color: hsl(var(--color-primary) / 0.5);
} }
.lyrics-textarea { .lyrics-textarea {
@@ -240,16 +240,16 @@ async function save() {
margin-top: 1rem; margin-top: 1rem;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border-radius: 0.5rem; border-radius: 0.5rem;
border: 1px dashed hsl(20 8% 25%); border: 1px dashed hsl(var(--color-surface-light));
background: none; background: none;
color: hsl(20 8% 55%); color: hsl(var(--color-text-muted));
font-size: 0.85rem; font-size: 0.85rem;
cursor: pointer; cursor: pointer;
transition: all 0.15s; transition: all 0.15s;
} }
.add-btn:hover { .add-btn:hover {
border-color: hsl(12 76% 48% / 0.5); border-color: hsl(var(--color-primary) / 0.5);
color: hsl(12 76% 68%); color: hsl(var(--color-primary));
} }
</style> </style>