/*
* 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:
*
*
*
* 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. */
body.cw-usercp-page .cw-usercp-shell {
display: grid;
grid-template-columns: 238px minmax(0, 1fr);
gap: 20px;
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;
}
body.cw-usercp-page .usercp_nav {
overflow: hidden;
margin: 0;
padding: 0;
border: 1px solid var(--usercp-border);
border-radius: 5px;
background: var(--usercp-surface);
box-shadow: 0 1px 2px rgba(21, 32, 51, 0.05);
}
/* 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;
}
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: 3px solid var(--usercp-gold);
background-color: var(--usercp-surface-alt);
color: var(--usercp-maroon);
font-weight: 700;
}
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;
}
body.cw-usercp-page .cw-usercp-main > h3,
body.cw-usercp-page .usercp_container > h3 {
margin: 18px 0 8px;
color: var(--usercp-ink);
font-size: 18px;
line-height: 1.25;
}
/* Route content stays within panels without changing outside tables. */
body.cw-usercp-page .cw-usercp-main table.tborder,
body.cw-usercp-page .usercp_container table.tborder {
width: 100%;
overflow: hidden;
border: 1px solid var(--usercp-border);
border-radius: 5px;
border-collapse: separate;
border-spacing: 0;
background: var(--usercp-surface);
box-shadow: 0 1px 2px rgba(21, 32, 51, 0.05);
}
body.cw-usercp-page .cw-usercp-main table.tborder .thead,
body.cw-usercp-page .usercp_container table.tborder .thead {
background: var(--usercp-maroon);
color: var(--usercp-ivory);
font-weight: 700;
}
body.cw-usercp-page .cw-usercp-main table.tborder .thead a:link,
body.cw-usercp-page .cw-usercp-main table.tborder .thead a:visited,
body.cw-usercp-page .usercp_container table.tborder .thead a:link,
body.cw-usercp-page .usercp_container table.tborder .thead a:visited {
color: var(--usercp-ivory);
}
body.cw-usercp-page .cw-usercp-main table.tborder .tcat,
body.cw-usercp-page .usercp_container table.tborder .tcat {
background: var(--usercp-surface-alt);
color: var(--usercp-ink);
font-weight: 700;
}
body.cw-usercp-page .cw-usercp-main table.tborder .trow1,
body.cw-usercp-page .cw-usercp-main table.tborder .trow2,
body.cw-usercp-page .usercp_container table.tborder .trow1,
body.cw-usercp-page .usercp_container table.tborder .trow2 {
background: var(--usercp-surface);
color: var(--usercp-ink);
}
body.cw-usercp-page .cw-usercp-main table.tborder .trow2,
body.cw-usercp-page .usercp_container table.tborder .trow2 {
background: var(--usercp-surface-alt);
}
body.cw-usercp-page .cw-usercp-main table.tborder td,
body.cw-usercp-page .cw-usercp-main table.tborder th,
body.cw-usercp-page .usercp_container table.tborder td,
body.cw-usercp-page .usercp_container table.tborder th {
padding: 10px 12px;
border-bottom: 1px solid var(--usercp-border);
vertical-align: middle;
}
body.cw-usercp-page .cw-usercp-main table.tborder tr:last-child > td,
body.cw-usercp-page .cw-usercp-main table.tborder tr:last-child > th,
body.cw-usercp-page .usercp_container table.tborder tr:last-child > td,
body.cw-usercp-page .usercp_container table.tborder tr:last-child > th {
border-bottom: 0;
}
/* Consistent field rows for profile, email, password, options, and lists. */
body.cw-usercp-page .cw-usercp-main label,
body.cw-usercp-page .usercp_container label {
color: var(--usercp-ink);
font-weight: 700;
}
body.cw-usercp-page .cw-usercp-main input.textbox,
body.cw-usercp-page .cw-usercp-main input[type="text"],
body.cw-usercp-page .cw-usercp-main input[type="email"],
body.cw-usercp-page .cw-usercp-main input[type="password"],
body.cw-usercp-page .cw-usercp-main input[type="url"],
body.cw-usercp-page .cw-usercp-main select,
body.cw-usercp-page .cw-usercp-main textarea,
body.cw-usercp-page .usercp_container input.textbox,
body.cw-usercp-page .usercp_container input[type="text"],
body.cw-usercp-page .usercp_container input[type="email"],
body.cw-usercp-page .usercp_container input[type="password"],
body.cw-usercp-page .usercp_container input[type="url"],
body.cw-usercp-page .usercp_container select,
body.cw-usercp-page .usercp_container textarea {
max-width: 100%;
box-sizing: border-box;
border: 1px solid var(--usercp-border-strong);
border-radius: 4px;
background: var(--usercp-surface);
color: var(--usercp-ink);
font: inherit;
}
body.cw-usercp-page .cw-usercp-main input.textbox,
body.cw-usercp-page .cw-usercp-main input[type="text"],
body.cw-usercp-page .cw-usercp-main input[type="email"],
body.cw-usercp-page .cw-usercp-main input[type="password"],
body.cw-usercp-page .cw-usercp-main input[type="url"],
body.cw-usercp-page .cw-usercp-main select,
body.cw-usercp-page .usercp_container input.textbox,
body.cw-usercp-page .usercp_container input[type="text"],
body.cw-usercp-page .usercp_container input[type="email"],
body.cw-usercp-page .usercp_container input[type="password"],
body.cw-usercp-page .usercp_container input[type="url"],
body.cw-usercp-page .usercp_container select {
min-height: 38px;
padding: 8px 10px;
}
body.cw-usercp-page .cw-usercp-main textarea,
body.cw-usercp-page .usercp_container textarea {
min-height: 110px;
padding: 10px;
line-height: 1.45;
resize: vertical;
}
/* Buttons remain scoped to User CP route content. */
body.cw-usercp-page .cw-usercp-main input.button,
body.cw-usercp-page .cw-usercp-main button.button,
body.cw-usercp-page .cw-usercp-main a.button,
body.cw-usercp-page .cw-usercp-main .button,
body.cw-usercp-page .usercp_container input.button,
body.cw-usercp-page .usercp_container button.button,
body.cw-usercp-page .usercp_container a.button,
body.cw-usercp-page .usercp_container .button {
display: inline-flex;
min-height: 38px;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 8px 15px;
border: 1px solid var(--usercp-maroon);
border-radius: 4px;
background: var(--usercp-maroon);
color: var(--usercp-ivory) !important;
cursor: pointer;
font: inherit;
font-weight: 700;
line-height: 1.2;
text-decoration: none !important;
}
body.cw-usercp-page .cw-usercp-main input.button:hover,
body.cw-usercp-page .cw-usercp-main button.button:hover,
body.cw-usercp-page .cw-usercp-main a.button:hover,
body.cw-usercp-page .cw-usercp-main .button:hover,
body.cw-usercp-page .usercp_container input.button:hover,
body.cw-usercp-page .usercp_container button.button:hover,
body.cw-usercp-page .usercp_container a.button:hover,
body.cw-usercp-page .usercp_container .button:hover {
border-color: var(--usercp-maroon-dark);
background: var(--usercp-maroon-dark);
}
body.cw-usercp-page .cw-usercp-main input.button[type="button"],
body.cw-usercp-page .cw-usercp-main input.button[name="preview"],
body.cw-usercp-page .cw-usercp-main input.button[name="cancel"],
body.cw-usercp-page .usercp_container input.button[type="button"],
body.cw-usercp-page .usercp_container input.button[name="preview"],
body.cw-usercp-page .usercp_container input.button[name="cancel"] {
border-color: var(--usercp-border-strong);
background: var(--usercp-surface);
color: var(--usercp-ink) !important;
}
/* Notices, PM-space meter, and small route utilities. */
body.cw-usercp-page .cw-usercp-main .notice,
body.cw-usercp-page .cw-usercp-main .error,
body.cw-usercp-page .cw-usercp-main .red_alert,
body.cw-usercp-page .usercp_container .notice,
body.cw-usercp-page .usercp_container .error,
body.cw-usercp-page .usercp_container .red_alert {
margin: 12px 0;
padding: 11px 13px;
border: 1px solid var(--usercp-border);
border-left: 4px solid var(--usercp-gold);
border-radius: 4px;
background: #fffaf0;
color: var(--usercp-ink);
}
body.cw-usercp-page .cw-usercp-main .error,
body.cw-usercp-page .cw-usercp-main .red_alert,
body.cw-usercp-page .usercp_container .error,
body.cw-usercp-page .usercp_container .red_alert {
border-left-color: #8b2731;
background: #fff4f4;
}
/* Added on integration, not part of the original handoff file: .notice's
background is a hardcoded light cream (#fffaf0) and .error/.red_alert a
hardcoded light red (#fff4f4), neither with a dark-mode counterpart —
the same gap already found and fixed on the PM banner, profile
empty-state, and the reply/newthread preview and validation notices.
Also covers .error/.red_alert list items, which otherwise inherit the
near-white dark-mode body text color against these light backgrounds. */
[data-theme="dark"] body.cw-usercp-page .cw-usercp-main .notice,
[data-theme="dark"] body.cw-usercp-page .usercp_container .notice {
background: rgba(237, 194, 104, .12);
border-color: rgba(237, 194, 104, .35);
}
[data-theme="dark"] body.cw-usercp-page .cw-usercp-main .error,
[data-theme="dark"] body.cw-usercp-page .cw-usercp-main .red_alert,
[data-theme="dark"] body.cw-usercp-page .usercp_container .error,
[data-theme="dark"] body.cw-usercp-page .usercp_container .red_alert {
background: rgba(139, 39, 49, .18);
border-color: rgba(139, 39, 49, .4);
}
body.cw-usercp-page .cw-usercp-main .error li,
body.cw-usercp-page .cw-usercp-main .red_alert li,
body.cw-usercp-page .cw-usercp-main .notice li,
body.cw-usercp-page .usercp_container .error li,
body.cw-usercp-page .usercp_container .red_alert li,
body.cw-usercp-page .usercp_container .notice li {
color: var(--usercp-ink);
}
body.cw-usercp-page .pmspace {
float: none;
margin: 0 0 12px;
}
body.cw-usercp-page .pmspace_container {
width: min(100%, 260px);
min-height: 16px;
box-sizing: border-box;
overflow: hidden;
border: 1px solid var(--usercp-border-strong);
border-radius: 3px;
background: var(--usercp-surface);
}
body.cw-usercp-page .pmspace_used {
min-height: 16px;
box-sizing: border-box;
margin: 0;
padding: 1px 5px;
border: 0 !important;
background: var(--usercp-maroon);
color: var(--usercp-ivory);
font-size: 11px;
line-height: 14px;
}
body.cw-usercp-page .pmspace_used.medium {
background: #b7791f;
}
body.cw-usercp-page .pmspace_used.high {
background: #8b2731;
}
body.cw-usercp-page .new_pm {
color: var(--usercp-maroon);
}
body.cw-usercp-page .cw-usercp-main a:focus-visible,
body.cw-usercp-page .cw-usercp-main button:focus-visible,
body.cw-usercp-page .cw-usercp-main input:focus-visible,
body.cw-usercp-page .cw-usercp-main select:focus-visible,
body.cw-usercp-page .cw-usercp-main textarea:focus-visible,
body.cw-usercp-page .cw-usercp-nav a:focus-visible {
outline: 3px solid var(--usercp-gold);
outline-offset: 2px;
}
@media (max-width: 760px) {
body.cw-usercp-page .cw-usercp-shell {
display: block;
}
body.cw-usercp-page .cw-usercp-nav {
position: static;
margin-bottom: 14px;
}
body.cw-usercp-page .usercp_nav {
display: flex;
overflow-x: auto;
gap: 0;
-webkit-overflow-scrolling: touch;
}
body.cw-usercp-page .usercp_nav_item {
/* flex:0 0 auto sizes this item within .usercp_nav's own outer flex
row above — unrelated to (and compatible with) the base rule's own
display:flex, which lays out THIS item's icon+text internally. */
flex: 0 0 auto;
border-right: 1px solid var(--usercp-border);
border-bottom: 0;
white-space: nowrap;
}
body.cw-usercp-page .usercp_nav_item:last-child {
border-right: 0;
}
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;
border-bottom: 3px solid var(--usercp-gold);
}
body.cw-usercp-page .cw-usercp-main table.tborder,
body.cw-usercp-page .usercp_container table.tborder {
display: block;
overflow-x: auto;
}
body.cw-usercp-page .cw-usercp-main table.tborder > tbody,
body.cw-usercp-page .usercp_container table.tborder > tbody {
min-width: 560px;
}
}
@media (max-width: 450px) {
body.cw-usercp-page .cw-usercp-main input.textbox,
body.cw-usercp-page .cw-usercp-main input[type="text"],
body.cw-usercp-page .cw-usercp-main input[type="email"],
body.cw-usercp-page .cw-usercp-main input[type="password"],
body.cw-usercp-page .cw-usercp-main input[type="url"],
body.cw-usercp-page .cw-usercp-main select,
body.cw-usercp-page .cw-usercp-main textarea,
body.cw-usercp-page .usercp_container input.textbox,
body.cw-usercp-page .usercp_container input[type="text"],
body.cw-usercp-page .usercp_container input[type="email"],
body.cw-usercp-page .usercp_container input[type="password"],
body.cw-usercp-page .usercp_container input[type="url"],
body.cw-usercp-page .usercp_container select,
body.cw-usercp-page .usercp_container textarea {
width: 100%;
}
body.cw-usercp-page .cw-usercp-main input.button,
body.cw-usercp-page .cw-usercp-main button.button,
body.cw-usercp-page .cw-usercp-main a.button,
body.cw-usercp-page .cw-usercp-main .button,
body.cw-usercp-page .usercp_container input.button,
body.cw-usercp-page .usercp_container button.button,
body.cw-usercp-page .usercp_container a.button,
body.cw-usercp-page .usercp_container .button {
width: 100%;
}
}