bvandeusen/FabledCurator
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases 21 Wiki Activity

refactor: components read the obsidian surface from its token, not a typed rgba (3108)

Browse Source 
Thirteen rgba(20, 23, 26, ...) across six components (the task counted
eleven). They now use --v-theme-background, which Vuetify maps to obsidian;
ArtistHeader's banner fade uses --fc-chrome-rgb, since it is nav-style
chrome. A spec fails if the literal reappears outside a comment. Values are
unchanged, so nothing should render differently.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LVjrnpQjRgHdvq95rASoiR
This commit is contained in:
bvandeusen
2026-09-24 16:37:49 -04:00
co-authored by Claude Opus 5.5
parent f2e4ee4d17
commit 0842df46e9
7 changed files with 53 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/ExploreView.vue
+1 -1
View File
@@ -369,7 +369,7 @@ onUnmounted(() => {
/* Center viewer. */
.fc-ex__viewer {
background: rgb(20, 23, 26);
background: rgb(var(--v-theme-background));
display: flex; flex-direction: column; min-width: 0; min-height: 0;
}
.fc-ex__canvas { flex: 1 1 auto; display: flex; min-height: 0; min-width: 0; }
frontend/src/views/SeriesReaderView.vue
+2 -2
View File
@@ -276,7 +276,7 @@ onUnmounted(() => {
.fc-reader__thumb img { width: 100%; height: auto; display: block; }
.fc-reader__thumbnum {
position: absolute; bottom: 4px; right: 4px;
background: rgba(20, 23, 26, 0.8); color: rgb(var(--v-theme-on-surface));
background: rgba(var(--v-theme-background), 0.8); color: rgb(var(--v-theme-on-surface));
padding: 1px 5px; border-radius: 4px; font-size: 0.7rem;
}
.fc-reader__content {
@@ -302,7 +302,7 @@ onUnmounted(() => {
.fc-reader__indicator {
position: fixed; bottom: 1.5rem; right: 1.5rem;
padding: 4px 10px; border-radius: 999px;
background: rgba(20, 23, 26, 0.6);
background: rgba(var(--v-theme-background), 0.6);
border: 1px solid rgb(var(--v-theme-surface-light));
font-size: 0.8rem; color: rgb(var(--v-theme-on-surface-variant));
z-index: 100; pointer-events: none;
frontend/src/views/SeriesView.vue
+3 -3
View File
@@ -338,18 +338,18 @@ onMounted(() => {
position: absolute; top: 6px; left: 6px;
display: inline-flex; align-items: center; gap: 2px;
padding: 1px 6px; border-radius: 999px; font-size: 11px;
background: rgba(20, 23, 26, 0.75);
background: rgba(var(--v-theme-background), 0.75);
color: rgb(var(--v-theme-warning, var(--v-theme-accent)));
}
/* Kebab sits top-right of the cover, opposite the gap badge. Tinted backing so
it stays legible over any cover image. */
.fc-sbcard__kebab {
position: absolute; top: 4px; right: 4px;
background: rgba(20, 23, 26, 0.6) !important;
background: rgba(var(--v-theme-background), 0.6) !important;
border-radius: 50%;
color: rgb(var(--v-theme-on-surface));
}
.fc-sbcard__kebab:hover { background: rgba(20, 23, 26, 0.85) !important; }
.fc-sbcard__kebab:hover { background: rgba(var(--v-theme-background), 0.85) !important; }
.fc-sbcard__body { padding: 8px 10px; }
.fc-sbcard__name {
font-family: 'Fraunces', Georgia, serif; font-size: 15px; font-weight: 600;