/* * CricketWindies User Control Panel structure * * This file is intentionally scoped to the shared User CP shell. It is not a * second global stylesheet and does not target the masthead, navigation, * footer, PM pages, reply pages, or unrelated MyBB tables. * * Add the two hooks in the shared usercp layout template: * *
* *
{$usercp_content}
*
* * Keep MyBB's existing .usercp_nav, .usercp_nav_item, and * .usercp_container classes inside those regions. */ body.cw-usercp-page .cw-usercp-shell { --usercp-maroon: var(--maroon, #54102b); --usercp-maroon-dark: var(--maroon-dark, #390a1d); --usercp-gold: var(--gold, #edc268); --usercp-ivory: var(--ivory, #fff9f0); --usercp-surface: var(--surface, #ffffff); --usercp-surface-alt: var(--surface-alt, #f7f5f2); --usercp-surface-hover: var(--surface-hover, #f4f1ed); --usercp-ink: var(--ink, #152033); --usercp-muted: var(--muted, #5f6877); --usercp-border: var(--border, #e4ddd7); --usercp-border-strong: var(--border-strong, #d5cdc7); --usercp-link: var(--blue-link, #07588c); } /* One reusable desktop structure for every User CP action route. 168px rail + 14px gap matches .pm-layout in theme.css exactly (not an independent choice) -- User CP and Private Messages are meant to read as the same inner-page pattern, not two similar-but-different ones. */ body.cw-usercp-page .cw-usercp-shell { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 14px; width: 100%; min-width: 0; align-items: start; color: var(--usercp-ink); } body.cw-usercp-page .cw-usercp-nav, body.cw-usercp-page .cw-usercp-main { min-width: 0; } body.cw-usercp-page .cw-usercp-nav { position: sticky; top: 16px; overflow: hidden; border: 1px solid var(--usercp-border); border-radius: 4px; background: var(--usercp-surface); } /* Matches .pm-folder-nav / .pm-folder-nav__heading exactly: ONE outer bordered box (the .cw-usercp-nav aside above) wrapping both the heading and the {$usercpnav} list -- the heading itself carries no border/radius of its own, it just sits inside that box with a bottom rule, same as PM's own folder-nav heading. */ body.cw-usercp-page .cw-usercp-nav__heading { padding: 12px 13px 9px; color: var(--usercp-muted); background: var(--usercp-surface-alt); border-bottom: 1px solid var(--usercp-border); font-size: 11px; font-weight: 700; letter-spacing: .45px; line-height: 1.2; text-transform: uppercase; } /* Flat, hand-built nav for routes rebuilt off stock templates entirely (see windies_usercp_nav() in windies_usercp.php) -- matches .pm-folder-link / .pm-folder-link.is-active exactly, same component as PM's own folder rail, not a similar-but-different one. Not-yet-rebuilt routes still render {$usercpnav} (the stock table) via the .usercp_nav/.usercp_nav_item rules below, kept as-is until each of those gets the same treatment. */ body.cw-usercp-page .ucp-nav-link { display: block; min-height: 39px; padding: 10px 13px; color: var(--usercp-ink); border-bottom: 1px solid var(--usercp-border); font-size: 13px; line-height: 1.35; text-decoration: none; } body.cw-usercp-page .ucp-nav-link:last-child { border-bottom: 0; } body.cw-usercp-page .ucp-nav-link:hover, body.cw-usercp-page .ucp-nav-link:focus-visible { background: var(--usercp-surface-hover); text-decoration: none; } body.cw-usercp-page .ucp-nav-link.is-active { color: var(--usercp-maroon); background: rgba(84, 16, 43, .07); box-shadow: inset 3px 0 0 var(--usercp-maroon); font-weight: 700; } [data-theme="dark"] body.cw-usercp-page .ucp-nav-link.is-active { color: var(--usercp-gold); background: rgba(237, 194, 104, .12); box-shadow: inset 3px 0 0 var(--usercp-gold); } body.cw-usercp-page .ucp-nav__heading { padding: 12px 13px 6px; color: var(--usercp-muted); font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; } /* Collapses the whole ~20-link nav behind one button on mobile, showing the current page's own name so it still reads as "you are here" even collapsed. Hidden entirely on desktop, where the full list already shows -- this button only exists to save vertical space once the rail stacks above the actual page content instead of sitting beside it. */ body.cw-usercp-page .ucp-nav-toggle { display: none; } @media (max-width: 760px) { body.cw-usercp-page .ucp-nav-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 13px; border: 0; background: var(--usercp-surface); color: var(--usercp-ink); font: inherit; font-weight: 700; text-align: left; cursor: pointer; } body.cw-usercp-page .ucp-nav-toggle .icon { width: 16px; height: 16px; color: var(--usercp-muted); transition: transform .15s ease; } body.cw-usercp-page .ucp-nav-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); } /* Collapsed by default on mobile, shown once the toggle above adds .is-open -- a plain class, not the [hidden] attribute, since an author `display` rule always beats the UA's own [hidden] default regardless of media query (see the maroon-dark-mode-contrast memory's own cascade-origin note) -- easy to get backwards here otherwise. */ body.cw-usercp-page .ucp-nav-list { display: none; } body.cw-usercp-page .ucp-nav-list.is-open { display: block; } } @media (max-width: 760px) { body.cw-usercp-page .ucp-nav-link.is-active { box-shadow: inset 0 -3px 0 var(--usercp-maroon); } [data-theme="dark"] body.cw-usercp-page .ucp-nav-link.is-active { box-shadow: inset 0 -3px 0 var(--usercp-gold); } } body.cw-usercp-page .usercp_nav { /* Border/radius/background now live on .cw-usercp-nav (the outer box wrapping this list AND the heading above it) -- this element just fills that box. */ overflow: hidden; margin: 0; padding: 0; } /* MyBB's stock usercp.css (still loaded, per this file's own doc comment) gives each item's icon via a `background-position` px offset into usercp_sprite.png applied directly to the `` itself, anchored to that element's own padding-box top-left. That only lines up with the text when the element's total height is left at stock's original ~20px single-line row — any taller box (which this file needs, for a comfortable tap target and the card-style row spacing) and the icon stays pinned near the top while the text sits lower, so the icon renders above/detached from the label instead of beside it. A same-height fix here (matching line-height/padding to the icon's own 20px slice) held up in this project's own test browser but NOT in real Chrome/Safari at normal desktop zoom (confirmed live, screenshots from both) — some combination of font metrics/DPI rounding this project can't fully control for produces a few extra px of drift there, enough to visibly separate icon from text. Robust fix: stop anchoring the icon to the link's own (variable-height) box at all. Move the sprite onto a fixed 20x20px ::before pseudo-element instead, laid out via flexbox — a fixed-size box can't drift regardless of the row's total height, font, browser, or zoom. This needs each of the ~20 `.usercp_nav_` sprite-position rules mirrored onto the ::before below (kept in the same numeric order MyBB's own usercp.css uses, so a future MyBB update to that file's offsets is easy to diff against and re-apply here) — the image and its per-action offsets are MyBB's own, unchanged; only which element they paint onto has moved. */ body.cw-usercp-page .usercp_nav_item { display: flex; align-items: center; gap: 8px; box-sizing: border-box; padding: 6px 12px !important; background-image: none !important; border-bottom: 1px solid var(--usercp-border); background-color: var(--usercp-surface); color: var(--usercp-link); font-size: 13px; line-height: 1.35; text-decoration: none; } body.cw-usercp-page .usercp_nav_item::before { /* usercp_sprite.png is 35x420px (21 icons stacked at 20px row height) — NOT 20x20 as first assumed here. A 20px-wide box hard-cropped 15px off every icon's right edge, which is what read as "another sprite peeking through" (found by checking the actual file's pixel dimensions rather than guessing again — 420/20 = 21, matching the 21 .usercp_nav_ classes below, so this is the real, full glyph width, not a rounding/DPI artifact). */ content: ""; flex: 0 0 35px; width: 35px; height: 20px; overflow: hidden; background-image: url(../usercp_sprite.png); background-repeat: no-repeat; } body.cw-usercp-page .usercp_nav_composepm::before { background-position: 0 0; } body.cw-usercp-page .usercp_nav_pmfolder::before { background-position: 0 -20px; } body.cw-usercp-page .usercp_nav_sub_pmfolder::before { background-position: 0 -40px; } body.cw-usercp-page .usercp_nav_trash_pmfolder::before { background-position: 0 -60px; } body.cw-usercp-page .usercp_nav_pmtracking::before { background-position: 0 -80px; } body.cw-usercp-page .usercp_nav_pmfolders::before { background-position: 0 -100px; } body.cw-usercp-page .usercp_nav_profile::before { background-position: 0 -120px; } body.cw-usercp-page .usercp_nav_email::before { background-position: 0 -140px; } body.cw-usercp-page .usercp_nav_password::before { background-position: 0 -160px; } body.cw-usercp-page .usercp_nav_username::before { background-position: 0 -180px; } body.cw-usercp-page .usercp_nav_editsig::before { background-position: 0 -200px; } body.cw-usercp-page .usercp_nav_avatar::before { background-position: 0 -220px; } body.cw-usercp-page .usercp_nav_options::before { background-position: 0 -240px; } body.cw-usercp-page .usercp_nav_usergroups::before { background-position: 0 -260px; } body.cw-usercp-page .usercp_nav_editlists::before { background-position: 0 -280px; } body.cw-usercp-page .usercp_nav_attachments::before { background-position: 0 -300px; } body.cw-usercp-page .usercp_nav_drafts::before { background-position: 0 -320px; } body.cw-usercp-page .usercp_nav_subscriptions::before { background-position: 0 -340px; } body.cw-usercp-page .usercp_nav_fsubscriptions::before { background-position: 0 -360px; } body.cw-usercp-page .usercp_nav_viewprofile::before { background-position: 0 -380px; } body.cw-usercp-page .usercp_nav_home::before { background-position: 0 -400px; } /* The old layout used a wider padding-left as an icon gutter for these "child" items (email/password/username/editsig/avatar and the PM sub/trash folder rows) — with the icon now a flex sibling instead of a padding-box background, that gutter has no purpose; the !important above already normalizes all items to the same padding. Visual grouping for these comes from the surrounding template markup, not this file. */ body.cw-usercp-page .usercp_nav_item:last-child { border-bottom: 0; } body.cw-usercp-page .usercp_nav_item:hover, body.cw-usercp-page .usercp_nav_item:focus-visible { background-color: var(--usercp-surface-hover); color: var(--usercp-maroon); text-decoration: none; } /* --maroon as a hover TEXT color has no dark-mode counterpart here (found auditing this file for the active-state change below) -- near-invisible against this theme's own dark --usercp-surface-hover otherwise. Same fix as everywhere else this pattern shows up sitewide. */ [data-theme="dark"] body.cw-usercp-page .usercp_nav_item:hover, [data-theme="dark"] body.cw-usercp-page .usercp_nav_item:focus-visible { color: var(--usercp-gold); } /* Matches .pm-folder-link.is-active exactly, maroon-tinted wash + inset left bar rather than the plain gold-left-border+flat-surface-alt this read as before -- User CP's active route should look like the same component as PM's active folder, not a similar-but-different one. */ body.cw-usercp-page .usercp_nav_item.active, body.cw-usercp-page .usercp_nav_item.selected, body.cw-usercp-page .usercp_nav_item[aria-current="page"] { border-left: 0; background-color: rgba(84, 16, 43, .07); box-shadow: inset 3px 0 0 var(--usercp-maroon); color: var(--usercp-maroon); font-weight: 700; } [data-theme="dark"] body.cw-usercp-page .usercp_nav_item.active, [data-theme="dark"] body.cw-usercp-page .usercp_nav_item.selected, [data-theme="dark"] body.cw-usercp-page .usercp_nav_item[aria-current="page"] { background-color: rgba(237, 194, 104, .12); box-shadow: inset 3px 0 0 var(--usercp-gold); color: var(--usercp-gold); } body.cw-usercp-page .usercp_nav_item + .usercp_nav_item { margin-top: 0; } body.cw-usercp-page .usercp_container { margin: 0; padding: 0; border: 0; color: var(--usercp-ink); } body.cw-usercp-page .cw-usercp-main > h1, body.cw-usercp-page .cw-usercp-main > h2, body.cw-usercp-page .usercp_container > h1, body.cw-usercp-page .usercp_container > h2 { margin: 0 0 14px; color: var(--usercp-ink); font-size: 26px; line-height: 1.2; } /* Bordered warm-paper panel for route content -- used to wrap a route's stock table/fieldset markup (e.g. usercp_profile's own {$requiredfields}/ {$customfields}, which MyBB core generates as raw HTML no template here can restructure) rather than replacing it, matching the handoff's own "keep the generated markup" rule extended to field HTML, not just nav links. */ body.cw-usercp-page .cw-usercp-panel { min-width: 0; overflow: hidden; border: 1px solid var(--usercp-border); border-radius: 4px; background: var(--usercp-surface); } body.cw-usercp-page .cw-usercp-panel + .cw-usercp-panel { margin-top: 14px; } body.cw-usercp-page .cw-usercp-panel__heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--usercp-border); background: var(--usercp-surface-alt); } body.cw-usercp-page .cw-usercp-panel__heading h2 { margin: 0; color: var(--usercp-ink); font-size: 16px; line-height: 1.2; } body.cw-usercp-page .cw-usercp-panel__heading p { margin: 0; color: var(--usercp-muted); font-size: 11px; } body.cw-usercp-page .cw-usercp-form { padding: 15px 16px 16px; } /* Edit Options keeps its own stock table entirely as generated (not field-by-field rebuilt like the other routes) -- but that table still carries MyBB's own "Edit Options" thead bar, which now duplicates the real

heading this route also has. Hide just that leftover bar rather than touch the table markup itself. */ body.cw-usercp-page .cw-usercp-form > table.tborder > tbody > tr:first-child > td.thead, body.cw-usercp-page .cw-usercp-form > table.tborder > tr:first-child > td.thead { display: none; } body.cw-usercp-page .cw-usercp-form__intro { margin: 0 0 16px; color: var(--usercp-muted); font-size: 13px; line-height: 1.45; } /* Wrapping flex row, not a fixed-column grid -- a strict N-col grid forces every row to share the same track widths even when a given row's fields don't call for it (a full-width Bio next to a narrow Gender select). Each field instead sets its own flex-basis/order inline (see usercp_profile_customfield and the hand-placed fields in usercp_profile itself) so unrelated fields can share a row where it makes sense (Home Island / Location / Gender three across) and stand alone where it doesn't (Bio, Website), while still wrapping cleanly at any width. */ body.cw-usercp-page .cw-usercp-field-grid { display: flex; flex-flow: row wrap; gap: 16px; } body.cw-usercp-page .cw-usercp-field { min-width: 0; } /* Smilies box beside the editor rather than stacked above it. The smilies column sizes to its own content (that box is a fixed 170px regardless -- see the inline-style override below) rather than a hardcoded percentage, so it never carries dead space of its own; the editor column takes whatever's left in the row. */ body.cw-usercp-page .cw-usercp-editor-row { display: flex; gap: 16px; align-items: flex-start; } body.cw-usercp-page .cw-usercp-editor-row__smilies { flex: 0 0 auto; /* 225px, not 170px -- the smilie box's own inline-styled wrapper declares width:170px, but the table nested inside it renders wider than that (its own cellpadding pushes past what the outer div states, and divs don't clip overflowing content by default), so 170px still let it overflow/overlap the editor column beside it. flex-shrink is already 0 above, but min-width:0 still let the FLEX ITEM's own box shrink narrower than its content whenever the row was tight on space -- min-width here is what actually holds the line. */ min-width: 225px; } body.cw-usercp-page .cw-usercp-editor-row__editor { flex: 1 1 0; min-width: 0; } /* build_clickable_smilies() (core) wraps its own output in a bare
-- no class or id, just an inline style. margin-top assumed the box was sitting below other page content, not beside a column that already starts at the same top; margin:auto (left/right) centers the 170px box within this column instead of sitting flush left like the rest of the form's fields. :first-child targets that bare div specifically without touching anything else that might land in this column later; !important is the only way to beat an inline style at all, not a specificity choice. Width is left at its own 170px -- that's sized for its own emoji grid internally, not something to stretch. */ body.cw-usercp-page .cw-usercp-editor-row__smilies > div:first-child { margin: 0 !important; } @media (max-width: 760px) { body.cw-usercp-page .cw-usercp-editor-row { flex-direction: column; } body.cw-usercp-page .cw-usercp-editor-row__smilies { flex-basis: auto; width: 100%; } } /* A field that's alone in its own row (no sibling to naturally split the row width with) shouldn't stretch its input to the full row just because nothing else is competing for the space -- found live on Change Password's "Current Password" row, and the same call applies anywhere else a lone single-line field sits above a paired row (Change Email, Change Username). Not for textareas (Bio genuinely benefits from the full row) -- opt in per input with this class, not a blanket rule. */ body.cw-usercp-page .cw-usercp-main .cw-usercp-field--solo input.textbox { /* .cw-usercp-main and .textbox both added to the selector specifically to outweigh the shared input.textbox rule's own max-width:100% -- without them this rule was genuinely LESS specific than that one (found live: max-width:100% kept winning regardless of this rule's position in the file). */ max-width: calc(50% - 8px); } @media (max-width: 760px) { body.cw-usercp-page .cw-usercp-main .cw-usercp-field--solo input.textbox { max-width: 100%; } } body.cw-usercp-page .cw-usercp-field label { display: block; margin-bottom: 6px; font-size: 12px; } body.cw-usercp-page .cw-usercp-field small { display: block; margin-top: 5px; color: var(--usercp-muted); font-size: 11px; line-height: 1.35; } body.cw-usercp-page .cw-usercp-field small:empty { display: none; } body.cw-usercp-page .cw-usercp-field p { margin: 0; color: var(--usercp-ink); font-weight: 700; } /* Day/month/year (or similar) triplets -- birthday, away return date -- share this one row layout rather than each growing its own markup. */ body.cw-usercp-page .cw-usercp-date-row { display: flex; flex-wrap: wrap; gap: 8px; } body.cw-usercp-page .cw-usercp-date-row select, body.cw-usercp-page .cw-usercp-date-row input { flex: 1 1 100px; min-width: 0; } /* Radio/checkbox options sitting inside a .cw-usercp-field (away status, revert-title) -- overrides the plain field