/* daw theming for Lychee -- update-safe (gitignored upstream, emitted by ). * * SPECIFICITY NOTE: emits this file BEFORE @vite(...), so the app's CSS * loads after and wins any tie. Overrides here must out-specify it, hence the * leading `html`. The old v4 rule `body { background: #484c57 }` lost to * `body.dark { background: var(--p-surface-900) }` for exactly this reason. * * Palette from the daw theme (wp-content/themes/daw/theme.json): * slate-deep #484c57 - daw's own page background (body.page) * accent #25c2a0 - daw link/icon hover * Lychee's dark theme ships a zinc ramp (--p-surface-900 = #18181b) with a sky * accent (#38bdf8); the rules below pull the page onto daw's slate instead. * * The rest of the v4 user.css was dropped: it targeted the jQuery DOM (.header, * #imageview, #footer, .album .overlay) that v6's Vue rewrite no longer renders. * Original kept at daw/_claude/scratch/photo-upgrade-2026-07-16/user.css-v4-backup. */ /* ---- page surface -------------------------------------------------------- */ /* Match daw's body.page. */ html body.dark, html body { background-color: #484c57; } /* The gallery grid sits in a PrimeVue panel, and the album's title/count header in a card; both paint their own zinc-900, which bands the page (slate header / near-black body / slate footer). Letting the body show through puts them on daw's slate, as the v4 install did. The card matters more now that use_album_compact_header hides the hero image above it. Scoped to #app main so it can't reach dialogs/overlays -- PrimeVue teleports those to , outside #app, and they still want a distinct surface. */ html body.dark #app main .p-panel, html body.dark #app main .p-panel-content, html body.dark #app main .p-card, html body.dark #app main .p-card-body { background-color: transparent; } /* Toolbar: flat, same slate as the daw bar above it and the page below. PrimeVue's Toolbar defaults to --p-toolbar-background (zinc-800 #27272a) in dark mode. The gallery_header_bar_transparent / _gradient configs only dress the root AlbumsHeader (and are "Mod Welcome"-gated, so inert here) -- the album view's Toolbar has no such guard, so it needs CSS. Earlier this held `linear-gradient(#535763,#484c57)` from the v4 .header rule, which rendered #525662 -- LIGHTER than the #484c57 bar above it. That, not the bar itself, is what made the bar look like the darker one. */ html body.dark #app .p-toolbar { background: transparent; border-bottom: 0; } /* Individual photo view. PhotoPanel's root is `... z-20 ... bg-black`, so the lightbox letterboxes in pure black; #2b2f37 is the daw slate darkened, which keeps photos on a near-black stage without the hard black edge (the v4 user.css did the same with #imageview / #2f2f2f). Tailwind utilities are the only hook here -- that div has no id or semantic class. Matched as a direct child of

so it can't also catch the `bg-black` in Landing.vue. */ html body.dark #app main > .bg-black.z-20 { background-color: #2b2f37; } /* ---- trimmed UI ---------------------------------------------------------- */ /* "Powered by Lychee". Unlike the copyright and additional-text lines beside it in GalleryFooter.vue, this one carries no v-if -- it renders unconditionally, so there's no setting to switch it off in 6.10.4 (the white-label flag is v7). Lychee is MIT, which doesn't require UI attribution, so hiding it here is the update-safe route. Support them at https://lycheeorg.dev if you're inclined. */ html body.dark #app .hosted_by { display: none; } /* Sign-In. AlbumsHeader/TimelineHeader render it for guests with no config guard. Keyed on the login href rather than the p-button utility classes, which are generic and churn between releases. NOTE: this only hides the link -- /photo/login still works if you go direct. */ html body.dark #app a[href$="/login"] { display: none; } /* Hamburger (OpenLeftMenu: