ombi: support the UI redesign#718
Open
tidusjar wants to merge 1 commit intothemepark-dev:developfrom
Open
Conversation
The recent Ombi redesign rebuilt the login page, requests list, TV request grid + requests panel, media details hero, discover/detailed cards, cast carousel, social icons, the discover hero banner, and the sidebar + top bar with brand-new class names. None of those new selectors were styled by theme.park, so users on current Ombi were seeing Ombi's stock $ombi-active palette instead of their selected theme. Add overrides that map the new selectors onto theme.park's CSS variables (accent, text, transparency layers, button colors, modal background) so the existing themes work again on current Ombi. Covered: - Login: .login-panel, .brand-title, .input-wrapper(--focused/--error), .login-input, .input-icon (focused state), .toggle-password, .checkmark + .checkmark::after, .custom-checkbox, .forgot-link, .btn-submit, .btn-login--primary (Plex/Emby/Jellyfin brand buttons intentionally left untouched). - Hero banner: .hero-banner, .hero-overlay, .hero-title, .hero-cta, .hero-indicator(.active). - Media details: .details-hero, .hero-backdrop-overlay, .meta-badge(--accent), .action-btn(--primary/--secondary), .info-panel-modern, .info-grid/-item/-label/-value, .streaming-label/-logo, .genre-tag. - Cast / social: .cast-card, .cast-profile-img (+ accent hover), .cast-name, .cast-character, .social-link, .social-divider, .admin-cog-btn. - Discover cards: .detailed-card, .card-inner, .card-status-badge, .approve-btn, .deny-btn, .request-btn, .filter-toggle-group, .filter-active, .genre-chip. - Requests list: .requests-page, .tab-bar/.tab-item.active, .chip(.active), .request-card(.selected), .poster-overlay, .btn-detail, .btn-options, .fab-button, .no-poster, .empty-state. - TV requests panel: .request-header, .request-season-chip(.active), .req-ep-*, .expand-icon. - TV request grid: .quick-action-btn, .season-chip(.active), .season-panel, .episode-count-badge, .season-progress-bar, .episode-row, .sticky-bar, .request-selected-btn, .section-divider. - Sidebar + top bar (rebuild beyond the linked commits): .sidebar-brand .brand-link (was .application-name), .nav-item, .nav-item--active (was .active-list-item), .nav-icon, .nav-indicator, .nav-section-label, .nav-divider, .sidebar-footer, .top-bar (was .top-bar-container), .hamburger-btn, .top-bar .chip / .chip.active (scoped so it doesn't clash with the requests-list .chip), .profile-link, .profile-username, .profile-avatar. Old Material-UI rules are kept so users on the previous Ombi release (which still ships the old DOM) aren't affected. Verified by building Ombi develop locally and using Playwright to read computed styles + capture screenshots on the live build with both the dark and plex themes injected. Brand link, active nav indicator, hero CTA, top-bar chip active state, and profile avatar hover ring all resolve to the selected theme's accent (rgb(170,170,170) for dark, rgb(229,160,13) for plex).
tidusjar
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Bug fixes
Description:
The recent Ombi redesign rebuilt the login page, requests list, TV request grid + requests panel, media details hero, discover/detailed cards, cast carousel, social icons, the discover hero banner, and the sidebar + top bar with brand-new class names. None of those new selectors were styled by theme.park, so users on current Ombi were seeing Ombi's stock $ombi-active palette instead of their selected theme.
Add overrides that map the new selectors onto theme.park's CSS variables (accent, text, transparency layers, button colors, modal background) so the existing themes work again on current Ombi.
Old Material-UI rules are kept so users on the previous Ombi release (which still ships the old DOM) aren't affected.
How Has This Been Tested?
Verified by building Ombi develop locally.