/* * ReaderX Manga Details page -- Phase 1 visual redesign. * * Scoped overrides only, loaded after css/single-manga.css and * assets/css/genre-colors.css (both unchanged, untouched) so this file can * override colors/typography selectively without forking either of those * large existing stylesheets. Page background (#17181D) is already applied * site-wide by the child theme's readerx-theme.css and is not duplicated * here. * * PHASE 1 SCOPE ONLY: sections that already existed before this batch * (status pill, rank pill, title, Read Now button, and the new breadcrumb * added in this same phase). Explicitly NOT included, per the approved * scope: Preview, Related Manga, the Collection system, the Type/CEN/COLOR * badge row (does not currently exist as markup on this page at all -- see * the accompanying report), or any metadata-grid *layout* rearrangement * (only colors/typography touched here; the grid's current column * structure is left as-is pending a closer look in a future phase). * * No selector here is renamed, and no HTML structure this file targets was * changed beyond the new breadcrumb markup (single-manga.php). */ /* Breadcrumb (new in this phase) */ .readerx-breadcrumb { max-width: 1200px; margin: 0 auto 16px; padding: 0 20px; font-size: 13px; color: rgba(255, 255, 255, 0.65); } .readerx-breadcrumb a { color: rgba(255, 255, 255, 0.65); text-decoration: none; } .readerx-breadcrumb a:hover { color: #FFFFFF; } .readerx-breadcrumb .readerx-breadcrumb-current { color: #EC4899; } /* Manga title */ .manga-title { color: #FFFFFF; } /* Status pill on the cover -- ReaderX palette. The existing parent rule at body.single-manga .manga-status.status-ongoing (css/single-manga.css) uses !important, so this selector must match its specificity (body class + compound class selector) and also use !important, or it is silently ignored regardless of load order -- confirmed by direct inspection, not assumed. Scoped narrowly to this exact selector only, not a broad page-wide !important. Only the "ongoing" state is changed to a solid color matching the image; the other three states keep their existing semi-transparent colors, since the image only shows the "ongoing" state and I'm not guessing at colors it doesn't show. */ body.single-manga .manga-status.status-ongoing { background: #16A34A !important; } /* Rank pill -- bottom-left per the approved image (corrected: an earlier version of this file incorrectly moved it to bottom-right). Recolored to the dark/gold ReaderX badge treatment already established for manga cards elsewhere in this project; position is otherwise unchanged from the original rule. */ .rank-pill { background: rgba(0, 0, 0, 0.85); border: 1px solid rgba(255, 255, 255, 0.12); } .rank-pill .rank { color: #E9D58C; } /* ReaderX badge row (Type / Censorship / Color) -- new markup added in this correction, matching the same gold-on-dark pill styling already established for manga cards. Language badge intentionally absent; see the accompanying report for why. */ .readerx-details-badges { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; } .readerx-details-badge { background: #1F1F1F; color: #E9D58C; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; padding: 4px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } /* Read Now / Continue Reading button -- strong blue, matching the approved reference image button screenshot (revised from an earlier pink-gradient version). */ .manga-action-buttons .btn-read-first { background: #4361EE; color: #FFFFFF; border: none; } .manga-action-buttons .btn-read-first:hover { background: #3651D4; } /* Clickable metadata values (Circle, Artist, Parody, Characters, Tags) -- shared class applied via readerx_render_linked_terms() and the Tags link-building loop in single-manga.php. * * CASCADE FIX (this revision): the parent's css/single-manga.css already * declares body.single-manga .meta-item a { color:#fff !important } and * a:hover { color:#13667a !important } at this same specificity depth. * The earlier version of this rule (bare .readerx-meta-link, no * !important) could never win against that regardless of load order. * Corrected to match the parent's exact selector depth * (body.single-manga .meta-item a...) plus the .readerx-meta-link class, * with !important -- scoped narrowly to this one class, not applied * broadly across the page. * * TAG COLOR BEHAVIOR: Circle/Artist/Parody/Characters get the plain * ReaderX metadata color. Tags is different -- genre-red and * genre-doujinshi already have their own established normal-state colors * (teal and purple respectively, defined just above this file loads, also * with !important) which are intentionally preserved here, not overridden * by the generic rule -- accomplished via the more specific compound * selector (.readerx-meta-link.genre-red / .genre-doujinshi), which * naturally wins over the single-class .readerx-meta-link rule through * ordinary specificity, no source-order dependency. Only the HOVER color * for those two tag categories is changed to ReaderX pink, replacing * their own distinct hover colors and the shared teal hover every link in * .meta-item otherwise gets. Genres with neither special class (including * "gray" genres, which have no dedicated color rule in the parent at all) * simply fall through to the generic ReaderX color like Circle/Artist/ * Parody/Characters -- nothing to preserve there since no special color * existed for them to begin with. */ body.single-manga .meta-item a.readerx-meta-link { color: rgba(177, 197, 206, 1) !important; text-decoration: none; } body.single-manga .meta-item a.readerx-meta-link:hover { color: #F472B6 !important; text-decoration: none; } body.single-manga .meta-item a.readerx-meta-link.genre-red { color: #13667a !important; } body.single-manga .meta-item a.readerx-meta-link.genre-doujinshi { color: #7d40ff !important; } body.single-manga .meta-item a.readerx-meta-link.genre-red:hover, body.single-manga .meta-item a.readerx-meta-link.genre-doujinshi:hover { color: #F472B6 !important; text-decoration: none; } /* ============================================================ Phase 1 completion pass -- cover, title, rating/views, badge mobile fit, action buttons (Read Now + relocated Bookmark), Description heading, Chapter List. Checked against css/single-manga.css for !important conflicts in each area before writing (see comments); none found needing !important here except where already used above for badges/status/links. ============================================================ */ /* Cover: modest spacing tightening, no size/crop change -- the base max-width:300px / aspect-ratio:2/3 from the parent rule is left as-is, only the margin below it is adjusted to sit closer to the icon row. */ .manga-cover { margin-bottom: 12px; } /* Title / alternative titles */ .manga-title { color: #FFFFFF; line-height: 1.25; } .alt-titles.manga-subtitle { color: rgba(255, 255, 255, 0.6); font-size: 14px; font-weight: 400; line-height: 1.5; overflow-wrap: break-word; word-break: break-word; } /* Rating / views -- gold rating value, muted secondary text, matching the established ReaderX card treatment. Does not touch the existing collapsible-star hover-expand interaction, only colors/spacing. */ .mangayummy-rating-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* Badge row: verified mobile fit for the longest label, "BLACK & WHITE" -- allow wrapping onto a second line rather than forcing overflow, and reduce padding/font-size slightly on narrow screens so it fits more comfortably. */ @media (max-width: 480px) { .readerx-details-badges { gap: 6px; } .readerx-details-badge { font-size: 10px; padding: 3px 9px; } } /* Action buttons: Read Now + relocated Bookmark, side by side on desktop. The existing .manga-action-buttons a, button { flex:1 } rule does not apply to the Bookmark button (it's a
, not /