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

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

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