s each holding several .card elements stacked inside, not a .card itself - one level too deep for the .card fix to reach, so this needs its own. */ .content-grid > div { min-width: 0; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; box-shadow: var(--shadow); margin-bottom: 20px; /* Cards sit as a grid/flex item in several layouts on this site (.content-grid, .profile-general- grid, ...), each its own separate nesting level of the same min-width:auto trap fixed on .profile-content/.profile-head-info above - a grid item won't shrink below its content's own intrinsic minimum width by default, regardless of the track's own size, unless told to. Blanket fix here since it's a no-op for a card that isn't inside a grid/flex container anyway. */ min-width: 0; } .card h2, .section-title { font-size: 16px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border-soft); color: var(--text); display: flex; align-items: baseline; gap: 8px; } .section-title small { font-weight: 400; color: var(--text-faint); font-size: 12px; } h1.page-title { font-size: 26px; margin: 0 0 16px; color: var(--text); } .blurb-title { font-weight: 700; font-size: 16px; margin-bottom: 6px; color: var(--text); } .pill-links { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; } .pill-links a { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-weight: 600; font-size: 13px; box-shadow: var(--shadow); } .pill-links a:hover { border-color: var(--accent); color: var(--accent-strong); text-decoration: none; } .pill-links img { width: 20px; height: 20px; object-fit: contain; } .news-item { padding: 12px 0; border-bottom: 1px solid var(--border-soft); } .news-item:last-child { border-bottom: none; padding-bottom: 0; } .news-date { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; } .news-item h3 { margin: 3px 0 5px; font-size: 15px; } .news-item p { margin: 0; color: var(--text-muted); font-size: 13.5px; } /* ---------- homepage chat widget ---------- */ .chat-log { max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-alt); padding: 4px 0; } .chat-line { padding: 4px 12px; font-size: 13px; line-height: 1.5; word-break: break-word; } .chat-line:nth-child(odd) { background: rgba(128, 128, 128, 0.06); } .chat-time { color: var(--text-faint); font-size: 11px; margin-right: 6px; } .chat-user { font-weight: 600; color: var(--accent); } .chat-message { color: var(--text); } /* ---------- tables / rows ---------- */ table.modern-table { /* `width: 100%` only sets a *preferred* width - table-layout:auto (the default) still sizes each column from its content's natural/minimum width first, so a wide row (long beatmap titles etc, and there are up to 7 columns on some of these tables) can force the table past 100% regardless. Every one of this class's 10+ call sites renders the raw tag directly with no wrapper div, so contain the overflow on the table element itself instead of the page around it - `display: block` + `overflow-x: auto` here works without disturbing the // children's own table-row/table-cell layout underneath it. */ display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; border-collapse: collapse; font-size: 13.5px; } table.modern-table th { text-align: left; color: var(--text-faint); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.03em; padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; } table.modern-table td { padding: 10px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; /* table-layout:auto's column-width algorithm prefers to wrap cell text over widening the table whenever content CAN wrap (multiple words) - without this, a long beatmap title on a narrow screen gets squeezed into a handful-of-characters-wide column and wraps across 5-6 cramped lines instead of the table just scrolling sideways (which the container above already supports). One readable line per cell, scroll to see the rest, matches how a data table like this is normally handled on mobile. */ white-space: nowrap; } table.modern-table tr:hover td { background: var(--accent-soft); } table.modern-table tr:last-child td { border-bottom: none; } table.modern-table input, table.modern-table select { width: 100%; min-width: 64px; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface-alt); color: var(--text); font-size: 13px; } .title-row { display: flex; align-items: center; gap: 10px; } .beatmap-thumb { width: 44px; height: 33px; border-radius: 6px; object-fit: cover; background: var(--surface-alt); border: 1px solid var(--border); flex-shrink: 0; } .cover-banner { max-height: 220px; } .cover-banner img { width: 100%; height: 220px; object-fit: cover; } /* ---------- profile: score list dropdowns ---------- */ .score-list-more { margin-top: 10px; } .score-list-more summary { cursor: pointer; color: var(--accent); font-size: 13px; font-weight: 600; padding: 6px 0; list-style: none; } .score-list-more summary::-webkit-details-marker { display: none; } .score-list-more summary::before { content: "\25be "; } .score-list-more[open] summary::before { content: "\25b4 "; } .score-list-more table { margin-top: 4px; } /* ---------- profile: achievements ---------- */ .achievement-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 12px; margin-bottom: 8px; } .achievement-item { text-align: center; } .achievement-item img { width: 64px; height: 64px; object-fit: contain; border-radius: 10px; background: var(--surface-alt); border: 1px solid var(--border); padding: 6px; } .achievement-item.locked img { opacity: 0.35; filter: grayscale(1); } .achievement-item .achievement-name { margin-top: 5px; font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .achievement-item.locked .achievement-name { color: var(--text-faint); } .achievement-subheading { font-size: 13px; color: var(--text-faint); margin: 16px 0 8px; } .achievement-text-list { display: flex; flex-direction: column; gap: 8px; } .achievement-text-item { padding: 8px 12px; border-radius: 8px; background: var(--surface-alt); border: 1px solid var(--border); opacity: 0.6; } .achievement-text-item.unlocked { opacity: 1; border-color: var(--accent); } .achievement-text-item .achievement-name { font-weight: 600; font-size: 13px; } .rank-cell { color: var(--text-faint); font-weight: 700; width: 34px; } .diff-icon { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; } .title-cell b { color: var(--text); } .title-cell small { color: var(--text-faint); } .badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; } .badge-ranked { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); } .badge-approved { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-strong); } .badge-qualified { background: color-mix(in srgb, #3fa7e0 18%, transparent); color: #2d86b8; } .badge-pending { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); } .badge-wip, .badge-graveyard { background: color-mix(in srgb, var(--text-faint) 20%, transparent); color: var(--text-muted); } /* ---------- stat tiles ---------- */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin: 16px 0; } .stat-tile { background: var(--surface-alt); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; } .stat-tile .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-faint); } .stat-tile .value { font-size: 19px; font-weight: 700; color: var(--text); margin-top: 2px; } .stat-tile.accent .value { color: var(--pink-strong); } .profile-head { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 6px; } /* Flex items default to `min-width: auto` (their content's own intrinsic width), not 0 - the username/joined-date/follower-count text here has no fixed width of its own to shrink against, so without this the row (avatar + this + the edit/follow button, none of which can otherwise give ground) just keeps growing past the viewport on a narrow screen instead of wrapping the text. */ .profile-head-info { min-width: 0; flex: 1 1 200px; } .avatar-fallback, .avatar-image { width: 64px; height: 64px; border-radius: 14px; border: 1px solid var(--border); flex-shrink: 0; } .avatar-fallback { background: linear-gradient(135deg, var(--accent) 0%, var(--pink) 100%); color: #fff; font-size: 26px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .avatar-image { object-fit: cover; } .profile-head .rank-tag { color: var(--text-faint); font-size: 13px; } .profile-head .profile-meta { color: var(--text-muted); font-size: 13px; margin-top: 6px; } .profile-head .profile-meta b { color: var(--text); } .profile-banner { height: 150px; border-radius: 16px; margin-bottom: -46px; background: linear-gradient(120deg, var(--accent) 0%, var(--pink) 55%, var(--warn) 100%); background-size: cover; background-position: center; box-shadow: var(--shadow); } .profile-card { position: relative; } .profile-avatar-large .avatar-image, .profile-avatar-large .avatar-fallback { width: 96px; height: 96px; border-radius: 18px; border: 3px solid var(--surface); font-size: 36px; box-shadow: var(--shadow); } .profile-layout { display: grid; grid-template-columns: 200px 1fr; gap: 20px; align-items: start; } @media (max-width: 780px) { .profile-layout { grid-template-columns: 1fr; } } /* Grid items default to `min-width: auto`, same trap as flex items (see .profile-head-info above) - here it's the perf-chart SVG that trips it: even with width:100% in its own CSS, an SVG's intrinsic/min-content size can still be read from its viewBox (620 units) for this calculation in some browsers, so without this the 1fr column - and everything in it, the nav pills included, since they're siblings in the same track once the layout collapses to one column on mobile - gets forced wider than the viewport to fit it. overflow-x:hidden then clips the excess invisibly instead of scrolling, which just makes the right-side padding disappear rather than showing an overlap. */ .profile-content { min-width: 0; } .profile-nav { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 76px; } @media (max-width: 780px) { /* .profile-nav's `position: sticky` is only meaningful in the desktop two-column layout, where it stays pinned beside the content column as that scrolls past it. Once the grid collapses to a single column, nav and content stack as normal document flow instead - but sticky positioning doesn't get reset by that on its own, so the (now full-width, six-item-tall) nav block sticks to the top of the viewport and scrolling floats it directly over the content underneath it. MUST come after the base .profile-nav rule above - identical specificity means source order decides the tie, and a media query changes nothing about that on its own. This was declared before the base rule originally, which silently made it a no-op the whole time. */ .profile-nav { position: static; } } .profile-nav-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; padding: 10px 14px; border-radius: 10px; border: 1px solid transparent; background: none; color: var(--text-muted); font-size: 13.5px; font-weight: 600; cursor: pointer; } .profile-nav-item small { color: var(--text-faint); font-weight: 600; } .profile-nav-item:hover { background: var(--surface-alt); color: var(--text); } .profile-nav-item.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); } .profile-general-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; align-items: start; } @media (max-width: 780px) { .profile-general-grid { grid-template-columns: 1fr; } } .perf-chart-legend { display: flex; gap: 16px; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; } .perf-chart-legend span::before { content: ""; display: inline-block; width: 14px; height: 2px; margin-right: 6px; vertical-align: middle; } .perf-legend-pp::before { background: var(--accent-strong); } .perf-legend-rank::before { background: var(--text-faint); border-top: 2px dashed var(--text-faint); background: none; } /* Explicit size wins regardless of any other page's global `svg { width/height }` reset (see the theme-toggle icon fix elsewhere in this file) - this chart needs to stay a fixed-aspect strip, not stretch to fill an arbitrary container. */ .perf-chart { display: block; width: 100%; height: 160px; } .perf-line-pp { fill: none; stroke: var(--accent-strong); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } .perf-line-rank { fill: none; stroke: var(--text-faint); stroke-width: 1.5; stroke-dasharray: 4 3; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } .perf-chart-caption { font-size: 12px; color: var(--text-faint); margin-top: 8px; } .level-bar-row { margin-top: 16px; } .level-bar-track { height: 8px; border-radius: 999px; background: var(--surface-alt); border: 1px solid var(--border); overflow: hidden; } .level-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent) 0%, var(--accent-strong) 100%); } .level-bar-label { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-muted); margin-top: 6px; font-weight: 600; } .grade-badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .grade-badge { flex: 1; min-width: 56px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; border-radius: 10px; font-weight: 700; } .grade-badge span { font-size: 12px; letter-spacing: 0.02em; } .grade-badge b { font-size: 16px; } /* Matches real osu!'s grade coloring: the "H" (Hidden-eligible) SS/S variants render silver, the plain SS/S variants render gold - same distinction the client's own ranking screen draws. */ .grade-badge.grade-ssh, .grade-badge.grade-sh { background: color-mix(in srgb, #b8c4d9 20%, transparent); color: #b8c4d9; } .grade-badge.grade-ss, .grade-badge.grade-s { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); } .grade-badge.grade-a { background: color-mix(in srgb, var(--success) 20%, transparent); color: var(--success); } .user-chip-list { display: flex; flex-wrap: wrap; gap: 8px; } .user-chip { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-alt); color: var(--text); font-size: 13px; font-weight: 600; } .user-chip:hover { border-color: var(--accent); color: var(--accent-strong); text-decoration: none; } .user-chip .avatar-image, .user-chip .avatar-fallback { width: 26px; height: 26px; border-radius: 50%; font-size: 12px; } .flag { vertical-align: middle; margin-right: 5px; border-radius: 2px; box-shadow: 0 0 0 1px var(--border); } .country-flag-large { width: 64px; height: 44px; object-fit: cover; border-radius: 6px; box-shadow: 0 0 0 1px var(--border); } /* ---------- forms ---------- */ .form-card { max-width: 420px; } .form-card.settings-card { max-width: 520px; } .form-row { margin-bottom: 14px; } .form-row label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-muted); margin-bottom: 5px; } .form-row input, .form-row select, .form-row textarea { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-alt); color: var(--text); font-size: 14px; font-family: inherit; } .form-row textarea { resize: vertical; } .form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .settings-section { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--border); } .settings-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 10px 18px; border-radius: 999px; border: none; background: linear-gradient(135deg, var(--accent) 0%, var(--pink) 100%); color: #fff; font-weight: 700; font-size: 13.5px; cursor: pointer; box-shadow: 0 4px 14px rgba(140, 111, 232, 0.35); } .btn:hover { filter: brightness(1.06); text-decoration: none; color: #fff; } .btn.secondary { background: var(--surface-alt); color: var(--text); border: 1px solid var(--border); box-shadow: none; } .btn.danger { background: var(--danger); box-shadow: none; } .btn-small { padding: 6px 12px; font-size: 12px; } .inline-form { display: inline-block; } .message-banner { padding: 12px 14px; border-radius: 10px; font-size: 13.5px; margin-bottom: 16px; border: 1px solid transparent; } .message-banner.success { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, transparent); } .message-banner.error { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); } /* ---------- footer ---------- */ .site-footer { border-top: 1px solid var(--border); background: var(--bg-soft); margin-top: 40px; } .footer-inner { max-width: 1180px; margin: 0 auto; padding: 34px 20px; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 22px; } @media (max-width: 700px) { .footer-inner { grid-template-columns: 1fr 1fr; } } .footer-brand { display: flex; align-items: center; gap: 10px; color: var(--text-faint); font-size: 12.5px; } .footer-brand img { width: 30px; height: 30px; border-radius: 50%; } .footer-col h4 { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); margin: 0 0 10px; } .footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; } .footer-col a { color: var(--text-muted); font-size: 13px; } .footer-col a:hover { color: var(--accent-strong); } .empty-state { color: var(--text-faint); font-size: 13.5px; padding: 10px 0; } .smaller { font-size: 12px; color: var(--text-faint); } /* ---------- compatibility shims for legacy static template bodies ---------- */ /* about/download/history/etc still emit their original markup + class names */ .legacy-page h1 { font-size: 24px; font-weight: 700; margin: 4px 0 14px; color: var(--text); text-shadow: none; } .legacy-page h2 { font-size: 18px; font-weight: 700; margin: 22px 0 10px; color: var(--text); text-shadow: none; } .legacy-page h2 a { color: var(--accent-strong); } .legacy-page h3 { font-size: 15px; font-weight: 700; margin: 16px 0 8px; color: var(--text-muted); } .legacy-page p, .legacy-page div { color: var(--text); } .legacy-page .marginp { padding-bottom: 10px; } .legacy-page .centrep { width: 100%; text-align: center; padding-bottom: 10px; } .legacy-page .centrep img { padding: 5px; border-radius: 10px; } .legacy-page .historyp { width: 100%; background: var(--surface-alt); text-align: center; margin-bottom: 12px; border-radius: 10px; padding: 4px; } .legacy-page table { width: 100%; border-collapse: collapse; margin: 10px 0; } .legacy-page table td, .legacy-page table th { padding: 8px 10px; border-bottom: 1px solid var(--border-soft); } .legacy-page .row1, .legacy-page .row2 { background: var(--surface); } .legacy-page .row2 { background: var(--row-alt); } .legacy-page ul { padding-left: 22px; } .legacy-page li { margin-bottom: 6px; }