/* Neo-Brutalism site theme — loaded from to prevent FOUC */ /* ========== Design tokens (site-wide) ========== */ html.nb-brutal { /* Softened warm palette — lower saturation to reduce eye strain */ --nb-bg: #FBF6EB; --nb-fg: #000000; --nb-primary: #E8A090; /* was #FF6B6B coral — desaturated peach */ --nb-secondary: #6BBFBA; /* was #4ECDC4 — slightly softer teal */ --nb-accent: #E8D89A; /* was #FFE66D yellow — muted warm gold */ --nb-muted: #B5D9C8; /* was #A8E6CF — softer mint */ --nb-card: #FFFFFF; --nb-surface: #EBEBEB; --nb-border: #000000; --nb-shadow: 4px 4px 0 0 #000; --nb-shadow-lg: 8px 8px 0 0 #000; --nb-font: 'Space Grotesk', 'Open Sans', 'PingFang SC', 'Microsoft Yahei', sans-serif; /* Fixed nav height (border-box, includes 4px bottom border). Must match content offset. */ --nb-nav-height: 52px; /* Space between fixed nav and page content */ --nb-nav-gap: 16px; } /* ========== Base ========== */ html.nb-brutal, html.nb-brutal body { background: var(--nb-bg) !important; color: var(--nb-fg) !important; font-family: var(--nb-font) !important; font-weight: 500; } html.nb-brutal body { --font-family: var(--nb-font) !important; } html.nb-brutal #panel, html.nb-brutal .slideout-panel { background: var(--nb-bg) !important; } /* * Immersive auth pages (register / login / lostpass / sudo…): * Hydro defaults to white text for the blue photo background. * Neo-brutal replaces that with a light cream panel, so force dark text. */ html.nb-brutal.layout--immersive #panel, html.nb-brutal.layout--immersive .slideout-panel { background: var(--nb-bg) !important; background-image: none !important; } html.nb-brutal .immersive--content, html.nb-brutal .immersive--content h1, html.nb-brutal .immersive--content h2, html.nb-brutal .immersive--content h3, html.nb-brutal .immersive--content h4, html.nb-brutal .immersive--content p, html.nb-brutal .immersive--content .text-center, html.nb-brutal .immersive--content a:not(.button) { color: #000 !important; } html.nb-brutal label.textbox.material.inverse, html.nb-brutal label.textbox.material.inverse input, html.nb-brutal label.checkbox.material.inverse, html.nb-brutal label.checkbox.inverse { color: #000 !important; } html.nb-brutal label.textbox.material.inverse input { border-color: rgba(0, 0, 0, 0.45) !important; background: #fff !important; -webkit-text-fill-color: #000; } html.nb-brutal label.textbox.material.inverse input:disabled, html.nb-brutal label.textbox.material.inverse input:read-only { color: #555 !important; -webkit-text-fill-color: #555; } html.nb-brutal label.textbox.material.inverse input:enabled:read-write:hover { border-color: #000 !important; } html.nb-brutal label.textbox.material.inverse input:enabled:read-write:focus, html.nb-brutal label.textbox.material.inverse.focus { color: #000 !important; border-color: #000 !important; } /* ========== Domain avatar editor ========== */ html.nb-brutal .domain-avatar-editor { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; } html.nb-brutal .domain-avatar-editor__preview img { display: block; width: 96px; height: 96px; object-fit: cover; border: 3px solid #000; box-shadow: 4px 4px 0 0 #000; background: #fff; } html.nb-brutal .domain-avatar-editor__main { flex: 1 1 220px; min-width: 0; } html.nb-brutal .domain-avatar-editor__hint { margin: 0 0 0.75rem; font-weight: 600; color: #333; } html.nb-brutal .domain-avatar-editor__row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } html.nb-brutal .domain-avatar-editor__row .select, html.nb-brutal .domain-avatar-editor__row .textbox, html.nb-brutal .domain-avatar-editor__row input[type="file"] { border: 2px solid #000 !important; border-radius: 0 !important; background: #fff !important; color: #000 !important; font-weight: 600; max-width: 100%; } html.nb-brutal .domain-avatar-editor__row .select { min-width: 7.5rem; height: 2.25rem; padding: 0 0.5rem; } html.nb-brutal .domain-avatar-editor__row .textbox { flex: 1 1 12rem; min-width: 10rem; height: 2.25rem; padding: 0 0.6rem; } html.nb-brutal .domain-avatar-editor__status { margin: 0.5rem 0 0; font-weight: 600; } html.nb-brutal .domain-avatar-editor--create { margin: 0.5rem 0 1.25rem; padding: 1rem; border: 3px solid #000; box-shadow: 4px 4px 0 0 #000; background: var(--nb-bg); } html.nb-brutal .domain-avatar-editor--create > label, html.nb-brutal .row .domain-avatar-editor--create { display: flex; } /* ========== Auth cards (lostpass / immersive helpers) ========== */ html.nb-brutal.layout--immersive .main { display: flex; flex-direction: column; min-height: calc(100vh - var(--nb-nav-height) - 120px); } html.nb-brutal .nb-auth-wrap { display: flex; justify-content: center; align-items: center; width: 100%; max-width: 520px; margin: 1.5rem auto 2.5rem; padding: 0 0.75rem; box-sizing: border-box; } html.nb-brutal .nb-auth-card { width: 100%; background: #fff !important; border: 4px solid #000 !important; box-shadow: 8px 8px 0 0 #000 !important; border-radius: 0 !important; padding: 1.75rem 1.5rem 1.5rem; box-sizing: border-box; text-align: center; color: #000 !important; } html.nb-brutal .nb-auth-card__badge { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0 auto 1rem; background: var(--nb-accent); border: 3px solid #000; box-shadow: 3px 3px 0 0 #000; } html.nb-brutal .nb-auth-card__badge--ok { background: var(--nb-muted); } html.nb-brutal .nb-auth-card__badge-icon { font-family: var(--nb-font); font-size: 1.6rem; font-weight: 800; line-height: 1; color: #000; } html.nb-brutal .nb-auth-card__title { margin: 0 0 0.4rem !important; font-family: var(--nb-font) !important; font-size: 1.65rem !important; font-weight: 800 !important; letter-spacing: 0.02em; text-transform: none !important; color: #000 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html.nb-brutal .nb-auth-card__lead { margin: 0 0 1.1rem !important; font-size: 0.95rem; font-weight: 600; color: #333 !important; } html.nb-brutal .nb-auth-card__hint { margin: 0.75rem 0 0 !important; font-size: 0.88rem; font-weight: 600; line-height: 1.5; color: #444 !important; text-align: left; } html.nb-brutal .nb-auth-callout { text-align: left; border: 3px solid #000; box-shadow: 3px 3px 0 0 #000; padding: 0.85rem 1rem; margin: 0 0 1rem; background: var(--nb-bg); } html.nb-brutal .nb-auth-callout--tip { background: #FFF6D6; } html.nb-brutal .nb-auth-callout--ok { background: #E8F8EF; } html.nb-brutal .nb-auth-callout__label { display: inline-block; margin-bottom: 0.4rem; padding: 0.1rem 0.45rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; background: #000; color: #fff; border: 2px solid #000; } html.nb-brutal .nb-auth-callout__text { margin: 0 !important; font-size: 0.95rem; font-weight: 600; line-height: 1.55; color: #000 !important; } html.nb-brutal .nb-auth-steps { list-style: none; margin: 0 0 1.25rem; padding: 0; text-align: left; } html.nb-brutal .nb-auth-steps li { position: relative; margin: 0 0 0.55rem; padding: 0.55rem 0.75rem 0.55rem 2.1rem; font-size: 0.88rem; font-weight: 600; line-height: 1.4; color: #000; background: var(--nb-bg); border: 2px solid #000; } html.nb-brutal .nb-auth-steps li::before { content: attr(data-n); position: absolute; left: 0.45rem; top: 50%; transform: translateY(-50%); width: 1.25rem; height: 1.25rem; display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 800; background: var(--nb-primary); border: 2px solid #000; box-sizing: border-box; } /* numbered steps 1..3 without data attrs */ html.nb-brutal .nb-auth-steps li:nth-child(1)::before { content: "1"; } html.nb-brutal .nb-auth-steps li:nth-child(2)::before { content: "2"; } html.nb-brutal .nb-auth-steps li:nth-child(3)::before { content: "3"; } html.nb-brutal .nb-auth-form { text-align: left; margin-top: 0.5rem; } html.nb-brutal .nb-auth-field { display: block; width: 100%; margin: 0 0 0.9rem !important; color: #000 !important; font-weight: 700; } html.nb-brutal .nb-auth-field input { margin-top: 0.35rem; width: 100%; box-sizing: border-box; border: 3px solid #000 !important; border-radius: 0 !important; background: #fff !important; color: #000 !important; -webkit-text-fill-color: #000; box-shadow: 3px 3px 0 0 #000 !important; padding: 0.55rem 0.7rem !important; font-weight: 600; } html.nb-brutal .nb-auth-field input:focus { outline: none; border-color: #000 !important; background: #fffef8 !important; } html.nb-brutal .nb-auth-field input:disabled { background: #f0f0f0 !important; color: #555 !important; -webkit-text-fill-color: #555; box-shadow: none !important; } html.nb-brutal .nb-auth-actions { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 0.35rem; } html.nb-brutal .nb-auth-actions .button, html.nb-brutal .nb-auth-actions input[type="submit"] { width: 100%; margin: 0 !important; } html.nb-brutal .nb-auth-btn--ghost, html.nb-brutal a.nb-auth-btn--ghost { background: #fff !important; color: #000 !important; border: 3px solid #000 !important; box-shadow: 3px 3px 0 0 #000 !important; } html.nb-brutal .nb-auth-btn--ghost:hover, html.nb-brutal a.nb-auth-btn--ghost:hover { background: var(--nb-accent) !important; color: #000 !important; } @media (max-width: 520px) { html.nb-brutal .nb-auth-card { padding: 1.35rem 1.1rem 1.2rem; } html.nb-brutal .nb-auth-card__title { font-size: 1.4rem !important; } } /* * Hydro uses fixed nav (hasjs). Original theme offsets content via * .main { padding-top: 3.4375rem (~55px) } for a 45px nav. * We must keep padding-top >= nav height or content sits under the bar. */ html.nb-brutal .main { background: transparent !important; padding-top: calc(var(--nb-nav-height) + var(--nb-nav-gap)) !important; padding-bottom: 2.5rem !important; } html.nb-brutal .nav--placeholder { height: var(--nb-nav-height) !important; } /* Kill soft entrance / soft shadows site-wide */ html.nb-brutal.hasjs .section, html.nb-brutal.hasjs .section.visible { transform: none !important; opacity: 1 !important; transition: box-shadow 0.12s ease, transform 0.12s ease !important; } html.nb-brutal *, html.nb-brutal *::before, html.nb-brutal *::after { /* neutralize soft drop shadows that sneak in from theme vars — we re-apply hard ones on components */ } /* ========== Navigation ========== */ html.nb-brutal .nav { background: #fff !important; border-bottom: 4px solid #000 !important; box-shadow: none !important; box-sizing: border-box !important; height: var(--nb-nav-height) !important; min-height: var(--nb-nav-height) !important; max-height: var(--nb-nav-height) !important; font-family: var(--nb-font) !important; /* dropdown menus may overflow; keep bar itself fixed height */ overflow: visible !important; } html.nb-brutal .nav--shadow { box-shadow: none !important; border-bottom: 4px solid #000 !important; background: #fff !important; box-sizing: border-box !important; height: var(--nb-nav-height) !important; } html.nb-brutal .nav__item { font-family: var(--nb-font) !important; font-weight: 700 !important; color: #000 !important; text-transform: uppercase; letter-spacing: 0.02em; /* 铺满顶栏内容区（去掉 4px 底边后的高度），避免底边白线 */ line-height: 1 !important; height: calc(var(--nb-nav-height) - 4px) !important; min-height: calc(var(--nb-nav-height) - 4px) !important; max-height: calc(var(--nb-nav-height) - 4px) !important; margin: 0 !important; padding: 0 1.25rem !important; border: 0 !important; border-top: 0 !important; border-bottom: 0 !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; transition: background 0.12s ease, color 0.12s ease !important; background-clip: border-box !important; position: relative !important; } html.nb-brutal .nav__item:hover { background: var(--nb-accent) !important; background-color: var(--nb-accent) !important; border-color: transparent !important; color: #000 !important; /* 向下多铺 1px，盖住亚像素白缝（不超出黑底边太多） */ box-shadow: 0 1px 0 0 var(--nb-accent) !important; } html.nb-brutal .nav__item.nav--active, html.nb-brutal .nav__item.nav--active:hover, html.nb-brutal .nav__item.nav--active:focus { background: var(--nb-primary) !important; background-color: var(--nb-primary) !important; border: 0 !important; border-color: transparent !important; color: #000 !important; box-shadow: 0 1px 0 0 var(--nb-primary) !important; } html.nb-brutal .nav__item.nav--active:before, html.nb-brutal .nav__item:before { display: none !important; content: none !important; } /* li 同步铺色，防止 a 与 li 之间露白 */ html.nb-brutal .nav__list-item:has(> .nav__item.nav--active) { background: var(--nb-primary) !important; background-color: var(--nb-primary) !important; } html.nb-brutal .nav__list-item:has(> .nav__item:hover):not(:has(> .nav__item.nav--active)) { background: var(--nb-accent) !important; background-color: var(--nb-accent) !important; } html.nb-brutal .nav__item--round { border: 3px solid #000 !important; background: var(--nb-primary) !important; color: #000 !important; border-radius: 0 !important; font-weight: 700 !important; /* keep button inside 52px bar: 32px tall + vertical margin */ height: 32px !important; line-height: 26px !important; margin: 6px 8px 6px 0 !important; padding: 0 14px !important; box-sizing: border-box !important; box-shadow: 3px 3px 0 0 #000; display: inline-flex !important; align-items: center !important; transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease !important; } html.nb-brutal .nav__item--round:hover { background: var(--nb-accent) !important; color: #000 !important; transform: translate(2px, 2px); box-shadow: none; } html.nb-brutal .nav__logo { max-height: 28px; height: 28px; display: block; margin-top: 8px; margin-bottom: 8px; } /* * 桌面端（>600px）： * - 右侧域/账号完整显示（不强制省略截断） * - 左侧 float，过窄时抬高触发 handleNavbar →「更多」 * 选中背景填充见上方 .nav__item 规则，勿在此再压高度。 */ @media (min-width: 601px) { html.nb-brutal .nav > .row, html.nb-brutal .nav > .row > .columns { height: auto !important; min-height: calc(var(--nb-nav-height) - 4px) !important; } html.nb-brutal .nav__list--main { float: left !important; } html.nb-brutal .nav__list--main > .nav__list-item { float: left !important; height: calc(var(--nb-nav-height) - 4px) !important; } html.nb-brutal .nav__list--secondary { float: right !important; display: block !important; white-space: nowrap !important; max-width: none !important; overflow: visible !important; position: static !important; } html.nb-brutal .nav__list--secondary > .nav__list-item { float: none !important; display: inline-block !important; vertical-align: top !important; height: calc(var(--nb-nav-height) - 4px) !important; max-width: none !important; white-space: nowrap !important; overflow: visible !important; } html.nb-brutal .nav__list--secondary .nav__item, html.nb-brutal .nav__list--secondary span.nav__item, html.nb-brutal .nav__list--secondary a.nav__item { white-space: nowrap !important; max-width: none !important; width: auto !important; overflow: visible !important; text-overflow: clip !important; /* 与主菜单一致的高度铺满，避免选中露白 */ height: calc(var(--nb-nav-height) - 4px) !important; line-height: calc(var(--nb-nav-height) - 4px) !important; padding: 0 1.25rem !important; } } html.nb-brutal .header--mobile { background: #fff !important; border-bottom: 4px solid #000 !important; /* in document flow on mobile — not fixed; no extra offset needed */ box-sizing: border-box !important; color: #000 !important; } html.nb-brutal .header--mobile a, html.nb-brutal .header--mobile a:visited, html.nb-brutal .header--mobile a:hover { color: #000 !important; } html.nb-brutal .header__hamburger { border: 3px solid #000 !important; background: var(--nb-accent) !important; border-radius: 0 !important; box-shadow: 3px 3px 0 0 #000; } /* 网页端绝不显示独立登出；手机侧滑再单独打开（见 max-width:600 内规则） */ html.nb-brutal .nb-mobile-logout, html.nb-brutal .nav .nb-mobile-logout, html.nb-brutal .nav__list--secondary > .nav__list-item.nb-mobile-logout, html.nb-brutal .nav__list--secondary > li.nb-mobile-logout { display: none !important; } /* 桌面规则里 secondary > .nav__list-item 会写 display:inline-block，必须再压一次 */ @media (min-width: 601px) { html.nb-brutal .nav__list--secondary > .nav__list-item.nb-mobile-logout, html.nb-brutal .nav__list--secondary > li.nb-mobile-logout { display: none !important; width: 0 !important; height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; border: 0 !important; visibility: hidden !important; pointer-events: none !important; } } /* * 手机侧滑：仅 ≤600px 生效，绝不污染桌面顶栏。 */ @media (max-width: 600px) { html.nb-brutal .main { padding-top: 0.75rem !important; padding-left: 0.65rem !important; padding-right: 0.65rem !important; } html.nb-brutal .header--mobile { display: block !important; padding: 0.55rem 0.75rem !important; line-height: 1.2 !important; background: #fff !important; color: #000 !important; border-bottom: 4px solid #000 !important; } html.nb-brutal .header--mobile .row, html.nb-brutal .header--mobile .columns { width: 100% !important; margin: 0 !important; padding: 0 !important; } html.nb-brutal .header--mobile .float-left { float: left !important; display: block !important; max-width: calc(100% - 3.25rem) !important; } html.nb-brutal .header--mobile .float-right { float: right !important; display: block !important; } html.nb-brutal .header--mobile__domain { display: block !important; margin: 0 !important; height: 28px !important; overflow: hidden !important; } html.nb-brutal .header--mobile__domain img { height: 28px !important; width: auto !important; max-width: 100% !important; display: block !important; object-fit: contain !important; } html.nb-brutal .header__hamburger { float: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 2.5rem !important; height: 2.5rem !important; margin: 0 !important; padding: 0 !important; border: 3px solid #000 !important; background: var(--nb-accent) !important; box-shadow: 3px 3px 0 0 #000 !important; cursor: pointer !important; vertical-align: middle !important; } html.nb-brutal .header__hamburger .hamburger { transform: scale(0.72); transform-origin: center; } html.nb-brutal .header__hamburger .hamburger-inner, html.nb-brutal .header__hamburger .hamburger-inner::before, html.nb-brutal .header__hamburger .hamburger-inner::after { background-color: #000 !important; } html.nb-brutal .nav.slideout-menu { background: #fff !important; color: #000 !important; border-left: 4px solid #000 !important; box-shadow: -6px 0 0 0 rgba(0, 0, 0, 0.08) !important; width: min(280px, 84vw) !important; max-width: 84vw !important; padding: 0.5rem 0 1.25rem !important; box-sizing: border-box !important; z-index: 100000 !important; height: auto !important; min-height: 100% !important; max-height: none !important; border-bottom: 0 !important; } html.nb-brutal .slideout-overlay { background: rgba(0, 0, 0, 0.35) !important; } html.nb-brutal .nav > .row, html.nb-brutal .nav > .row > .columns { display: block !important; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; } html.nb-brutal .nav__list, html.nb-brutal .nav__list--main, html.nb-brutal .nav__list--secondary { float: none !important; display: block !important; position: static !important; right: auto !important; top: auto !important; width: 100% !important; max-width: none !important; min-width: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; flex: none !important; } html.nb-brutal .nav__list--secondary { border-top: 3px solid #000 !important; margin-top: 0.35rem !important; padding-top: 0.15rem !important; } html.nb-brutal .nav__list-item, html.nb-brutal .nav__list--main > .nav__list-item, html.nb-brutal .nav__list--secondary > .nav__list-item { float: none !important; display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important; height: auto !important; flex: none !important; } html.nb-brutal .nav__item, html.nb-brutal .nav__item--round, html.nb-brutal .nav .dropdown-target.menu .menu__link, html.nb-brutal .nav .menu__link { display: flex !important; align-items: center !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 2.75rem !important; line-height: 1.35 !important; margin: 0 !important; padding: 0.65rem 1rem !important; box-sizing: border-box !important; border: 0 !important; border-radius: 0 !important; border-bottom: 1px solid #e8e8e8 !important; border-left: 4px solid transparent !important; background: #fff !important; color: #000 !important; box-shadow: none !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 700 !important; font-size: 0.95rem !important; white-space: normal !important; overflow: hidden !important; text-overflow: ellipsis !important; text-decoration: none !important; } html.nb-brutal .nav__item:hover, html.nb-brutal .nav__item--round:hover, html.nb-brutal .nav .menu__link:hover { background: var(--nb-bg) !important; color: #000 !important; border-left-color: var(--nb-primary) !important; transform: none !important; box-shadow: none !important; } html.nb-brutal .nav__item.nav--active, html.nb-brutal .nav__item.nav--active:hover { background: var(--nb-accent) !important; color: #000 !important; border-left-color: #000 !important; } html.nb-brutal .nav__item--round { background: var(--nb-primary) !important; justify-content: center !important; margin: 0.5rem 0.75rem !important; width: calc(100% - 1.5rem) !important; border: 3px solid #000 !important; border-left: 3px solid #000 !important; box-shadow: 3px 3px 0 0 #000 !important; } html.nb-brutal .nav.slideout-menu .icon, html.nb-brutal .nav.slideout-menu .user-profile-avatar, html.nb-brutal .nav.slideout-menu .nav__logo { display: none !important; } html.nb-brutal .nav.slideout-menu .nav__list--main > .nav__list-item:first-child { display: none !important; } html.nb-brutal .nav.slideout-menu .dropdown-target.menu, html.nb-brutal .nav.slideout-menu .menu_more, html.nb-brutal .nav.slideout-menu #menu-nav-more, html.nb-brutal .nav.slideout-menu #menu-nav-domain, html.nb-brutal .nav.slideout-menu #menu-nav-user { display: none !important; } html.nb-brutal .nav.slideout-menu .menu__seperator { display: none !important; } html.nb-brutal .nav.slideout-menu .nav__item:before { display: none !important; } html.nb-brutal .nav.slideout-menu .nav__list--secondary .nav__item { justify-content: flex-start !important; } /* * ① 未登录：登录 / 注册必须显示且可点 * ② 已登录：账号链接可点（进个人主页）；勿再 pointer-events:none * 语言项在侧滑里隐藏（桌面下拉即可） */ html.nb-brutal .nav.slideout-menu .nav__list--secondary { display: block !important; } html.nb-brutal .nav.slideout-menu .nav__list--secondary > .nav__list-item { display: block !important; } html.nb-brutal .nav.slideout-menu a.nav__item[name="nav_login"], html.nb-brutal .nav.slideout-menu a.nav__item--round, html.nb-brutal .nav.slideout-menu .nav__item--round { display: flex !important; pointer-events: auto !important; visibility: visible !important; opacity: 1 !important; } /* 账号（用户名）链接：可点，跳转个人页 */ html.nb-brutal .nav.slideout-menu .nav__list--secondary a.nav__item { pointer-events: auto !important; cursor: pointer !important; } /* 侧滑内不展示「语言」入口（仍可通过桌面切换；避免占位像坏掉的按钮） */ html.nb-brutal .nav.slideout-menu .nav__list--secondary > .nav__list-item[data-dropdown-target="#menu-nav-user"]:has(.icon-global), html.nb-brutal .nav.slideout-menu .nav__list--secondary > .nav__list-item.nojs--hide:has(.icon-global) { display: none !important; } /* 手机侧滑才显示独立登出 */ html.nb-brutal .nav.slideout-menu .nb-mobile-logout, html.nb-brutal .nav.slideout-menu .nav__list--secondary > .nav__list-item.nb-mobile-logout { display: block !important; } html.nb-brutal .nav.slideout-menu .nb-mobile-logout .nav__item { pointer-events: auto !important; color: #000 !important; font-weight: 800 !important; border-left-color: var(--nb-primary) !important; } } /* Scratchpad / nprogress / hints sit under fixed nav */ html.nb-brutal #nprogress { top: var(--nb-nav-height) !important; } html.nb-brutal .scratchpad { top: var(--nb-nav-height) !important; } /* ========== Layout helpers (homepage) ========== */ html.nb-brutal .nb-home { max-width: 72rem; margin-left: auto; margin-right: auto; } html.nb-brutal .nb-home__col--main > .section, html.nb-brutal .nb-home__col--side > .section { margin-bottom: 1.5rem; } /* ========== Sections / cards ========== */ html.nb-brutal .section:not(.homepage-carousel) { background: var(--nb-card) !important; border: 4px solid #000 !important; border-radius: 0 !important; box-shadow: var(--nb-shadow) !important; overflow: visible !important; } html.nb-brutal .section.immersive--content, html.nb-brutal .section.section--contest { border: 4px solid #000 !important; border-radius: 0 !important; box-shadow: var(--nb-shadow) !important; } /* Contest highlight cards (ready/live): keep colored blocks, black body text. Original theme used white text on gradient; our white section bg made it unreadable. */ html.nb-brutal .page--contest_main .section--contest.live, html.nb-brutal .section.section--contest.live { background: var(--nb-primary) !important; background-image: none !important; color: #000 !important; } html.nb-brutal .page--contest_main .section--contest.ready, html.nb-brutal .section.section--contest.ready { background: var(--nb-secondary) !important; background-image: none !important; color: #000 !important; } html.nb-brutal .page--contest_main .section--contest h1, html.nb-brutal .page--contest_main .section--contest .info, html.nb-brutal .page--contest_main .section--contest .info li, html.nb-brutal .page--contest_main .section--contest .info a, html.nb-brutal .page--contest_main .section--contest .attandance, html.nb-brutal .page--contest_main .section--contest .media__body, html.nb-brutal .section.section--contest h1, html.nb-brutal .section.section--contest .info, html.nb-brutal .section.section--contest .info li, html.nb-brutal .section.section--contest .info a, html.nb-brutal .section.section--contest .attandance { color: #000 !important; } html.nb-brutal .page--contest_main .section--contest .info .icon, html.nb-brutal .section.section--contest .info .icon { color: #000 !important; } /* Contest status badge only: keep high-contrast white-on-black */ html.nb-brutal .page--contest_main .section--contest .status_title, html.nb-brutal .section.section--contest .status_title { color: #fff !important; background: #000 !important; border: 2px solid #000; border-radius: 0 !important; font-weight: 800 !important; } /* Contest list rows under the cards */ html.nb-brutal .page--contest_main .contest__title, html.nb-brutal .page--contest_main .contest__title a, html.nb-brutal .page--contest_main .contest__item, html.nb-brutal .page--contest_main .contest__item .supplementary, html.nb-brutal .page--contest_main .contest__item .supplementary a, html.nb-brutal .page--contest_main .contest__item .supplementary li { color: #000 !important; } html.nb-brutal .section.side { font-size: 0.95rem; } html.nb-brutal .nb-card__header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem 1.25rem 0.75rem !important; border-bottom: 4px solid #000; background: transparent; } html.nb-brutal .section__header { border-bottom: 4px solid #000; padding: 1rem 1.25rem 0.75rem !important; } html.nb-brutal h1.section__title, html.nb-brutal .section__title { font-family: var(--nb-font) !important; font-weight: 800 !important; font-size: 1.35rem !important; color: #000 !important; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 !important; line-height: 1.2 !important; } /* 标题内普通链接保持黑色；按钮勿继承标题色（否则黑底黑字看不见） */ html.nb-brutal h1.section__title > a:not(.button), html.nb-brutal .section__title > a:not(.button) { color: #000 !important; font-weight: 800 !important; } html.nb-brutal h1.section__title a.button, html.nb-brutal .section__title a.button, html.nb-brutal .page--contest_scoreboard .section__title a.button, html.nb-brutal .page--homework_scoreboard .section__title a.button { color: #fff !important; background: #000 !important; border: 3px solid #000 !important; font-size: 0.72rem !important; font-weight: 700 !important; letter-spacing: 0.02em !important; text-transform: none !important; line-height: 1.2 !important; display: inline-flex !important; align-items: center !important; gap: 0.25rem !important; vertical-align: middle !important; margin: 0.15rem 0.2rem !important; padding: 0.35rem 0.6rem !important; box-shadow: 3px 3px 0 0 #000 !important; white-space: nowrap !important; } html.nb-brutal h1.section__title a.button:hover, html.nb-brutal .section__title a.button:hover { color: #000 !important; background: var(--nb-accent) !important; transform: translate(2px, 2px); box-shadow: none !important; } html.nb-brutal .section__body { padding: 1rem 1.25rem !important; } html.nb-brutal .section__body.no-padding { padding: 0 !important; } /* * Hydro 默认：.section__header + .section__body.no-padding:last-child { padding-top: .9375rem !important } * 比上面的 padding:0 更高优先级，会在搜索栏与表头之间多出一行空白。 * 用更高选择器压掉（排名/题库等紧凑表头场景）。 */ html.nb-brutal .section__header + .section__body.no-padding, html.nb-brutal .section__header + .section__body.no-padding:last-child, html.nb-brutal .section > .section__body.no-padding:last-child, html.nb-brutal.page--ranking .section__body.no-padding, html.nb-brutal .page--ranking .section__body.no-padding { padding: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; } /* 表头克隆表紧贴容器顶，去掉表与搜索栏之间的缝 */ html.nb-brutal.page--ranking .section__table-container, html.nb-brutal .page--ranking .section__table-container, html.nb-brutal.page--ranking .section__table-header, html.nb-brutal .page--ranking .section__table-header, html.nb-brutal.page--ranking .section__table-container > .data-table, html.nb-brutal .page--ranking .section__table-container > .data-table { margin-top: 0 !important; margin-bottom: 0 !important; } html.nb-brutal .section__footer { border-top: 3px solid #000 !important; background: var(--nb-surface); } /* 仅工具区直接子链接；勿覆盖 .contest-problems 内 A/B/C 状态色 */ html.nb-brutal .section__tools > .tool-button, html.nb-brutal .section__tools > a { color: #000 !important; font-weight: 700 !important; } /* * 比赛题目编号条： * 在主栏 medium-9 内，与下方题目卡片同宽； * 紧贴题目上方；单行不换行，超出横向滚动。 */ html.nb-brutal .medium-9.columns > .nb-contest-pid-bar, html.nb-brutal .nb-contest-pid-bar, html.nb-brutal .contest-problems.nb-contest-pid-bar, html.nb-brutal .contest-problems { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; gap: 0.4rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 0 0.85rem !important; padding: 0.55rem 0.75rem !important; box-sizing: border-box !important; background: #fff !important; border: 3px solid #000 !important; box-shadow: 3px 3px 0 0 #000 !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; grid-template-columns: none !important; position: static !important; top: auto !important; right: auto !important; } /* 干净硬边方块，去掉 Hydro 圆角伪元素 */ html.nb-brutal .nb-contest-pid-bar > a, html.nb-brutal .contest-problems > a { flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 2rem !important; height: 2rem !important; min-width: 2rem !important; max-width: 2rem !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; border-radius: 0 !important; border: 2px solid #000 !important; background: #fff !important; color: #000 !important; font-weight: 800 !important; font-size: 0.9rem !important; line-height: 1 !important; text-decoration: none !important; position: relative !important; overflow: hidden !important; box-shadow: none !important; } html.nb-brutal .nb-contest-pid-bar > a:before, html.nb-brutal .nb-contest-pid-bar > a:after, html.nb-brutal .contest-problems > a:before, html.nb-brutal .contest-problems > a:after { content: none !important; display: none !important; } html.nb-brutal .nb-contest-pid-bar > a .id, html.nb-brutal .contest-problems > a .id { display: inline !important; font-weight: 800 !important; } html.nb-brutal .nb-contest-pid-bar > a .icon, html.nb-brutal .contest-problems > a .icon { display: none !important; } html.nb-brutal .nb-contest-pid-bar > a.pass, html.nb-brutal .contest-problems > a.pass { color: #1f7a3a !important; background: #d9f0e0 !important; border-color: #1f7a3a !important; } html.nb-brutal .nb-contest-pid-bar > a.pass .id, html.nb-brutal .contest-problems > a.pass .id, html.nb-brutal .nb-contest-pid-bar > a.pass:not(:hover) .id, html.nb-brutal .contest-problems > a.pass:not(:hover) .id { display: inline !important; } html.nb-brutal .nb-contest-pid-bar > a.fail, html.nb-brutal .contest-problems > a.fail { color: #b33a3a !important; background: #f8e0e0 !important; border-color: #b33a3a !important; } html.nb-brutal .nb-contest-pid-bar > a.fail .id, html.nb-brutal .contest-problems > a.fail .id, html.nb-brutal .nb-contest-pid-bar > a.fail:not(:hover) .id, html.nb-brutal .contest-problems > a.fail:not(:hover) .id { display: inline !important; } html.nb-brutal .nb-contest-pid-bar > a.active, html.nb-brutal .contest-problems > a.active { color: #000 !important; background: var(--nb-accent) !important; border-color: #000 !important; box-shadow: 2px 2px 0 0 #000 !important; } html.nb-brutal .nb-contest-pid-bar > a:hover, html.nb-brutal .contest-problems > a:hover { text-decoration: none !important; filter: brightness(0.97); } /* 旧的标题内 section__tools.contest-problems 若仍存在则隐藏，避免重复 */ html.nb-brutal .section__header .section__tools.contest-problems { display: none !important; } /* ========== Contest / homework scoreboard ========== */ /* * Mobile (≤600px): simple Hydro-like layout — NO sticky-left, no frozen px widths. * Desktop (≥601px): sticky-left (# + 用户) + sticky-kit top sync (JS). */ /* —— Shared: basic table chrome —— */ html.nb-brutal .page--contest_scoreboard .overflow-hidden-horizontal, html.nb-brutal .page--homework_scoreboard .overflow-hidden-horizontal, html.nb-brutal .scoreboard--acm .overflow-hidden-horizontal, html.nb-brutal .scoreboard--oi .overflow-hidden-horizontal, html.nb-brutal .scoreboard--homework .overflow-hidden-horizontal, html.nb-brutal [class*="scoreboard--"] .section__body.no-padding { overflow-x: auto !important; overflow-y: visible !important; -webkit-overflow-scrolling: touch !important; max-width: 100% !important; } html.nb-brutal .page--contest_scoreboard .data-table, html.nb-brutal .page--homework_scoreboard .data-table, html.nb-brutal [class*="scoreboard--"] .data-table { border-collapse: separate !important; border-spacing: 0 !important; box-sizing: border-box !important; } html.nb-brutal .page--contest_scoreboard .data-table th, html.nb-brutal .page--contest_scoreboard .data-table td, html.nb-brutal .page--homework_scoreboard .data-table th, html.nb-brutal .page--homework_scoreboard .data-table td, html.nb-brutal [class*="scoreboard--"] .data-table th, html.nb-brutal [class*="scoreboard--"] .data-table td { box-sizing: border-box !important; padding: 0.55rem 0.45rem !important; vertical-align: middle !important; } html.nb-brutal .page--contest_scoreboard .col--total_score, html.nb-brutal .page--contest_scoreboard .col--total, html.nb-brutal .page--contest_scoreboard .col--solved, html.nb-brutal .page--contest_scoreboard .col--time, html.nb-brutal .page--contest_scoreboard .col--penalty, html.nb-brutal .page--homework_scoreboard .col--total_score, html.nb-brutal .page--homework_scoreboard .col--total, html.nb-brutal .page--homework_scoreboard .col--solved, html.nb-brutal .page--homework_scoreboard .col--time, html.nb-brutal .page--homework_scoreboard .col--penalty, html.nb-brutal [class*="scoreboard--"] .col--total_score, html.nb-brutal [class*="scoreboard--"] .col--total, html.nb-brutal [class*="scoreboard--"] .col--solved, html.nb-brutal [class*="scoreboard--"] .col--time, html.nb-brutal [class*="scoreboard--"] .col--penalty { width: 4.5rem !important; min-width: 4.5rem !important; max-width: 5rem !important; text-align: center !important; } html.nb-brutal .page--contest_scoreboard td.col--user, html.nb-brutal .page--homework_scoreboard td.col--user, html.nb-brutal [class*="scoreboard--"] td.col--user { white-space: nowrap !important; } html.nb-brutal .page--contest_scoreboard td.col--user .user-profile-link, html.nb-brutal .page--homework_scoreboard td.col--user .user-profile-link, html.nb-brutal [class*="scoreboard--"] td.col--user .user-profile-link { display: inline-flex !important; align-items: center !important; gap: 0.25rem !important; max-width: calc(100% - 1.6rem) !important; min-width: 0 !important; vertical-align: middle !important; } html.nb-brutal .page--contest_scoreboard td.col--user .user-profile-name, html.nb-brutal .page--homework_scoreboard td.col--user .user-profile-name, html.nb-brutal [class*="scoreboard--"] td.col--user .user-profile-name, html.nb-brutal .page--contest_scoreboard td.col--user a.user-profile-name, html.nb-brutal .page--homework_scoreboard td.col--user a.user-profile-name, html.nb-brutal [class*="scoreboard--"] td.col--user a.user-profile-name { display: inline-block !important; max-width: 100% !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; vertical-align: middle !important; } html.nb-brutal .page--contest_scoreboard td.col--user .user-profile-avatar, html.nb-brutal .page--homework_scoreboard td.col--user .user-profile-avatar, html.nb-brutal [class*="scoreboard--"] td.col--user .user-profile-avatar { flex-shrink: 0 !important; } html.nb-brutal .page--contest_scoreboard .section__header .section__title, html.nb-brutal .page--homework_scoreboard .section__header .section__title { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 0.35rem 0.25rem !important; line-height: 1.4 !important; } /* 吸顶表头实色（桌面/手机共用，不涉及吸左） */ html.nb-brutal.page--contest_scoreboard .section__table-header, html.nb-brutal .page--contest_scoreboard .section__table-header, html.nb-brutal.page--homework_scoreboard .section__table-header, html.nb-brutal .page--homework_scoreboard .section__table-header, html.nb-brutal.page--contest_scoreboard .section__table-header th, html.nb-brutal .page--contest_scoreboard .section__table-header th, html.nb-brutal.page--homework_scoreboard .section__table-header th, html.nb-brutal .page--homework_scoreboard .section__table-header th, html.nb-brutal.page--contest_scoreboard .section__table-header.is_stuck, html.nb-brutal .page--contest_scoreboard .section__table-header.is_stuck, html.nb-brutal.page--homework_scoreboard .section__table-header.is_stuck, html.nb-brutal .page--homework_scoreboard .section__table-header.is_stuck, html.nb-brutal.page--contest_scoreboard .section__table-header.is_stuck th, html.nb-brutal .page--contest_scoreboard .section__table-header.is_stuck th, html.nb-brutal.page--homework_scoreboard .section__table-header.is_stuck th, html.nb-brutal .page--homework_scoreboard .section__table-header.is_stuck th { background: #6BBFBA !important; background-color: #6BBFBA !important; background-image: linear-gradient(#6BBFBA, #6BBFBA) !important; opacity: 1 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html.nb-brutal.page--contest_scoreboard .section__table-header.is_stuck, html.nb-brutal .page--contest_scoreboard .section__table-header.is_stuck, html.nb-brutal.page--homework_scoreboard .section__table-header.is_stuck, html.nb-brutal .page--homework_scoreboard .section__table-header.is_stuck { border-collapse: separate !important; border-spacing: 0 !important; z-index: 400 !important; box-shadow: 0 2px 0 #000 !important; } /* ========== DESKTOP scoreboard (≥601px): sticky-left + stable cols ========== */ @media (min-width: 601px) { html.nb-brutal.page--contest_scoreboard .data-table, html.nb-brutal .page--contest_scoreboard .data-table, html.nb-brutal.page--homework_scoreboard .data-table, html.nb-brutal .page--homework_scoreboard .data-table, html.nb-brutal.page--contest_scoreboard .section__table-header, html.nb-brutal .page--contest_scoreboard .section__table-header, html.nb-brutal.page--homework_scoreboard .section__table-header, html.nb-brutal .page--homework_scoreboard .section__table-header { width: max-content !important; min-width: 100% !important; table-layout: fixed !important; } /* Fixed rem widths — # left:0 and 用户 left must equal rank width exactly */ html.nb-brutal.page--contest_scoreboard col.col--rank, html.nb-brutal .page--contest_scoreboard col.col--rank, html.nb-brutal.page--contest_scoreboard .col--rank, html.nb-brutal .page--contest_scoreboard .col--rank, html.nb-brutal.page--homework_scoreboard col.col--rank, html.nb-brutal .page--homework_scoreboard col.col--rank, html.nb-brutal.page--homework_scoreboard .col--rank, html.nb-brutal .page--homework_scoreboard .col--rank { width: 3.5rem !important; min-width: 3.5rem !important; max-width: 3.5rem !important; text-align: center !important; box-sizing: border-box !important; } html.nb-brutal.page--contest_scoreboard col.col--user, html.nb-brutal .page--contest_scoreboard col.col--user, html.nb-brutal.page--contest_scoreboard .col--user, html.nb-brutal .page--contest_scoreboard .col--user, html.nb-brutal.page--homework_scoreboard col.col--user, html.nb-brutal .page--homework_scoreboard col.col--user, html.nb-brutal.page--homework_scoreboard .col--user, html.nb-brutal .page--homework_scoreboard .col--user { width: 14rem !important; min-width: 14rem !important; max-width: 14rem !important; text-align: left !important; box-sizing: border-box !important; } html.nb-brutal.page--contest_scoreboard col.col--problem, html.nb-brutal .page--contest_scoreboard col.col--problem, html.nb-brutal.page--contest_scoreboard .col--problem, html.nb-brutal .page--contest_scoreboard .col--problem, html.nb-brutal.page--homework_scoreboard col.col--problem, html.nb-brutal .page--homework_scoreboard col.col--problem, html.nb-brutal.page--homework_scoreboard .col--problem, html.nb-brutal .page--homework_scoreboard .col--problem, html.nb-brutal .scoreboard--acm .col--problem { width: 4rem !important; min-width: 4rem !important; max-width: 4rem !important; text-align: center !important; white-space: nowrap !important; } /* Single horizontal scroller for sticky-left */ html.nb-brutal.page--contest_scoreboard .overflow-hidden-horizontal, html.nb-brutal .page--contest_scoreboard .overflow-hidden-horizontal, html.nb-brutal.page--homework_scoreboard .overflow-hidden-horizontal, html.nb-brutal .page--homework_scoreboard .overflow-hidden-horizontal, html.nb-brutal.page--contest_scoreboard .section__body.no-padding, html.nb-brutal .page--contest_scoreboard .section__body.no-padding, html.nb-brutal.page--homework_scoreboard .section__body.no-padding, html.nb-brutal .page--homework_scoreboard .section__body.no-padding { overflow-x: visible !important; overflow-y: visible !important; } html.nb-brutal.page--contest_scoreboard .section__table-container, html.nb-brutal .page--contest_scoreboard .section__table-container, html.nb-brutal.page--homework_scoreboard .section__table-container, html.nb-brutal .page--homework_scoreboard .section__table-container { overflow-x: auto !important; overflow-y: visible !important; -webkit-overflow-scrolling: touch !important; max-width: 100% !important; position: relative !important; } html.nb-brutal.page--contest_scoreboard .section, html.nb-brutal .page--contest_scoreboard .section, html.nb-brutal.page--homework_scoreboard .section, html.nb-brutal .page--homework_scoreboard .section { overflow: visible !important; } /* sticky-left: left(user) === width(rank) = 3.5rem — no gap */ html.nb-brutal.page--contest_scoreboard th.col--rank, html.nb-brutal .page--contest_scoreboard th.col--rank, html.nb-brutal.page--contest_scoreboard td.col--rank, html.nb-brutal .page--contest_scoreboard td.col--rank, html.nb-brutal.page--homework_scoreboard th.col--rank, html.nb-brutal .page--homework_scoreboard th.col--rank, html.nb-brutal.page--homework_scoreboard td.col--rank, html.nb-brutal .page--homework_scoreboard td.col--rank, html.nb-brutal.page--contest_scoreboard .section__table-header th.col--rank, html.nb-brutal .page--contest_scoreboard .section__table-header th.col--rank { position: sticky !important; left: 0 !important; z-index: 14 !important; background: #fff !important; background-color: #fff !important; border-right: 1px solid #000 !important; box-shadow: none !important; } html.nb-brutal.page--contest_scoreboard th.col--user, html.nb-brutal .page--contest_scoreboard th.col--user, html.nb-brutal.page--contest_scoreboard td.col--user, html.nb-brutal .page--contest_scoreboard td.col--user, html.nb-brutal.page--homework_scoreboard th.col--user, html.nb-brutal .page--homework_scoreboard th.col--user, html.nb-brutal.page--homework_scoreboard td.col--user, html.nb-brutal .page--homework_scoreboard td.col--user, html.nb-brutal.page--contest_scoreboard .section__table-header th.col--user, html.nb-brutal .page--contest_scoreboard .section__table-header th.col--user { position: sticky !important; left: 3.5rem !important; /* == rank width */ z-index: 13 !important; background: #fff !important; background-color: #fff !important; border-right: 2px solid #000 !important; overflow: hidden !important; box-shadow: none !important; } html.nb-brutal.page--contest_scoreboard .data-table tbody tr:nth-child(even) td.col--rank, html.nb-brutal .page--contest_scoreboard .data-table tbody tr:nth-child(even) td.col--rank, html.nb-brutal.page--contest_scoreboard .data-table tbody tr:nth-child(even) td.col--user, html.nb-brutal .page--contest_scoreboard .data-table tbody tr:nth-child(even) td.col--user, html.nb-brutal.page--homework_scoreboard .data-table tbody tr:nth-child(even) td.col--rank, html.nb-brutal .page--homework_scoreboard .data-table tbody tr:nth-child(even) td.col--rank, html.nb-brutal.page--homework_scoreboard .data-table tbody tr:nth-child(even) td.col--user, html.nb-brutal .page--homework_scoreboard .data-table tbody tr:nth-child(even) td.col--user { background: var(--nb-bg, #FBF6EB) !important; } html.nb-brutal.page--contest_scoreboard .data-table tbody tr:hover td.col--rank, html.nb-brutal .page--contest_scoreboard .data-table tbody tr:hover td.col--rank, html.nb-brutal.page--contest_scoreboard .data-table tbody tr:hover td.col--user, html.nb-brutal .page--contest_scoreboard .data-table tbody tr:hover td.col--user, html.nb-brutal.page--homework_scoreboard .data-table tbody tr:hover td.col--rank, html.nb-brutal .page--homework_scoreboard .data-table tbody tr:hover td.col--rank, html.nb-brutal.page--homework_scoreboard .data-table tbody tr:hover td.col--user, html.nb-brutal .page--homework_scoreboard .data-table tbody tr:hover td.col--user { background: var(--nb-muted, #B5D9C8) !important; } html.nb-brutal.page--contest_scoreboard thead th.col--rank, html.nb-brutal .page--contest_scoreboard thead th.col--rank, html.nb-brutal.page--contest_scoreboard thead th.col--user, html.nb-brutal .page--contest_scoreboard thead th.col--user, html.nb-brutal.page--contest_scoreboard .section__table-header th.col--rank, html.nb-brutal .page--contest_scoreboard .section__table-header th.col--rank, html.nb-brutal.page--contest_scoreboard .section__table-header th.col--user, html.nb-brutal .page--contest_scoreboard .section__table-header th.col--user, html.nb-brutal.page--homework_scoreboard thead th.col--rank, html.nb-brutal .page--homework_scoreboard thead th.col--rank, html.nb-brutal.page--homework_scoreboard thead th.col--user, html.nb-brutal .page--homework_scoreboard thead th.col--user, html.nb-brutal.page--contest_scoreboard .section__table-header.is_stuck th.col--rank, html.nb-brutal .page--contest_scoreboard .section__table-header.is_stuck th.col--rank, html.nb-brutal.page--contest_scoreboard .section__table-header.is_stuck th.col--user, html.nb-brutal .page--contest_scoreboard .section__table-header.is_stuck th.col--user { background: #6BBFBA !important; background-color: #6BBFBA !important; background-image: linear-gradient(#6BBFBA, #6BBFBA) !important; color: #000 !important; z-index: 30 !important; } /* Timer: top-right under nav, away from sticky-left columns */ html.nb-brutal.page--contest_scoreboard .contest-timer, html.nb-brutal .page--contest_scoreboard .contest-timer, html.nb-brutal.page--homework_scoreboard .contest-timer, html.nb-brutal .page--homework_scoreboard .contest-timer { position: fixed !important; top: calc(var(--nb-nav-height, 52px) + 8px) !important; left: auto !important; right: 12px !important; z-index: 500 !important; margin: 0 !important; padding: 0.2rem 0.55rem !important; background: #fff !important; border: 2px solid #000 !important; box-shadow: 3px 3px 0 0 #000 !important; font-weight: 700 !important; color: #000 !important; line-height: 1.2 !important; pointer-events: none !important; } } /* ========== MOBILE scoreboard (≤600px): align header/body + safe sticky ========== */ @media (max-width: 600px) { /* * 关键根因： * 1) StyledTable 拆成「表头表 + 表体表」，table-layout:auto 时两表列宽按各自内容计算 → 不对齐 * 2) sticky-kit 吸顶后 position:fixed 宽/左未限制 → 右侧飞出屏幕 * 策略：固定表布局 + 同列宽；不吸左；吸顶由 JS 同步 width/left 并用 clip 裁切视口 */ /* 禁止桌面吸左 */ html.nb-brutal.page--contest_scoreboard th.col--rank, html.nb-brutal .page--contest_scoreboard th.col--rank, html.nb-brutal.page--contest_scoreboard td.col--rank, html.nb-brutal .page--contest_scoreboard td.col--rank, html.nb-brutal.page--contest_scoreboard th.col--user, html.nb-brutal .page--contest_scoreboard th.col--user, html.nb-brutal.page--contest_scoreboard td.col--user, html.nb-brutal .page--contest_scoreboard td.col--user, html.nb-brutal.page--homework_scoreboard th.col--rank, html.nb-brutal .page--homework_scoreboard th.col--rank, html.nb-brutal.page--homework_scoreboard td.col--rank, html.nb-brutal .page--homework_scoreboard td.col--rank, html.nb-brutal.page--homework_scoreboard th.col--user, html.nb-brutal .page--homework_scoreboard th.col--user, html.nb-brutal.page--homework_scoreboard td.col--user, html.nb-brutal .page--homework_scoreboard td.col--user, html.nb-brutal.page--contest_scoreboard .section__table-header th.col--rank, html.nb-brutal .page--contest_scoreboard .section__table-header th.col--rank, html.nb-brutal.page--contest_scoreboard .section__table-header th.col--user, html.nb-brutal .page--contest_scoreboard .section__table-header th.col--user { position: static !important; left: auto !important; top: auto !important; transform: none !important; z-index: auto !important; box-shadow: none !important; } /* 表头克隆 + 表体同一套 fixed 布局，保证不吸顶时也列对齐 */ html.nb-brutal.page--contest_scoreboard .section__table-container > .data-table, html.nb-brutal .page--contest_scoreboard .section__table-container > .data-table, html.nb-brutal.page--contest_scoreboard .section__table-header, html.nb-brutal .page--contest_scoreboard .section__table-header, html.nb-brutal.page--homework_scoreboard .section__table-container > .data-table, html.nb-brutal .page--homework_scoreboard .section__table-container > .data-table, html.nb-brutal.page--homework_scoreboard .section__table-header, html.nb-brutal .page--homework_scoreboard .section__table-header { width: 100% !important; min-width: 100% !important; max-width: 100% !important; table-layout: fixed !important; box-sizing: border-box !important; } /* 可见列宽（表头/表体共用）；题目列强制 0 */ html.nb-brutal.page--contest_scoreboard col.col--rank, html.nb-brutal .page--contest_scoreboard col.col--rank, html.nb-brutal.page--contest_scoreboard .col--rank, html.nb-brutal .page--contest_scoreboard .col--rank, html.nb-brutal.page--homework_scoreboard col.col--rank, html.nb-brutal .page--homework_scoreboard col.col--rank, html.nb-brutal.page--homework_scoreboard .col--rank, html.nb-brutal .page--homework_scoreboard .col--rank { width: 12% !important; min-width: 2.5rem !important; max-width: 3.25rem !important; text-align: center !important; box-sizing: border-box !important; } html.nb-brutal.page--contest_scoreboard col.col--user, html.nb-brutal .page--contest_scoreboard col.col--user, html.nb-brutal.page--contest_scoreboard .col--user, html.nb-brutal .page--contest_scoreboard .col--user, html.nb-brutal.page--homework_scoreboard col.col--user, html.nb-brutal .page--homework_scoreboard col.col--user, html.nb-brutal.page--homework_scoreboard .col--user, html.nb-brutal .page--homework_scoreboard .col--user { width: auto !important; min-width: 0 !important; max-width: none !important; box-sizing: border-box !important; } html.nb-brutal.page--contest_scoreboard col.col--solved, html.nb-brutal .page--contest_scoreboard col.col--solved, html.nb-brutal.page--contest_scoreboard .col--solved, html.nb-brutal .page--contest_scoreboard .col--solved, html.nb-brutal.page--contest_scoreboard col.col--time, html.nb-brutal .page--contest_scoreboard col.col--time, html.nb-brutal.page--contest_scoreboard .col--time, html.nb-brutal .page--contest_scoreboard .col--time, html.nb-brutal.page--contest_scoreboard col.col--total, html.nb-brutal .page--contest_scoreboard col.col--total, html.nb-brutal.page--contest_scoreboard .col--total, html.nb-brutal .page--contest_scoreboard .col--total, html.nb-brutal.page--contest_scoreboard col.col--total_score, html.nb-brutal .page--contest_scoreboard col.col--total_score, html.nb-brutal.page--contest_scoreboard .col--total_score, html.nb-brutal .page--contest_scoreboard .col--total_score, html.nb-brutal.page--contest_scoreboard col.col--penalty, html.nb-brutal .page--contest_scoreboard col.col--penalty, html.nb-brutal.page--contest_scoreboard .col--penalty, html.nb-brutal .page--contest_scoreboard .col--penalty, html.nb-brutal.page--homework_scoreboard col.col--solved, html.nb-brutal .page--homework_scoreboard col.col--solved, html.nb-brutal.page--homework_scoreboard .col--solved, html.nb-brutal .page--homework_scoreboard .col--solved, html.nb-brutal.page--homework_scoreboard col.col--time, html.nb-brutal .page--homework_scoreboard col.col--time, html.nb-brutal.page--homework_scoreboard .col--time, html.nb-brutal .page--homework_scoreboard .col--time, html.nb-brutal.page--homework_scoreboard col.col--total, html.nb-brutal .page--homework_scoreboard col.col--total, html.nb-brutal.page--homework_scoreboard .col--total, html.nb-brutal .page--homework_scoreboard .col--total, html.nb-brutal.page--homework_scoreboard col.col--total_score, html.nb-brutal .page--homework_scoreboard col.col--total_score, html.nb-brutal.page--homework_scoreboard .col--total_score, html.nb-brutal .page--homework_scoreboard .col--total_score, html.nb-brutal.page--homework_scoreboard col.col--penalty, html.nb-brutal .page--homework_scoreboard col.col--penalty, html.nb-brutal.page--homework_scoreboard .col--penalty, html.nb-brutal .page--homework_scoreboard .col--penalty { width: 3.5rem !important; min-width: 3.25rem !important; max-width: 4rem !important; text-align: center !important; box-sizing: border-box !important; } /* 题目列彻底不占宽（否则 fixed 布局会挤飞其它列） */ html.nb-brutal.page--contest_scoreboard col.col--problem, html.nb-brutal .page--contest_scoreboard col.col--problem, html.nb-brutal.page--contest_scoreboard .col--problem, html.nb-brutal .page--contest_scoreboard .col--problem, html.nb-brutal.page--contest_scoreboard th.col--problem, html.nb-brutal .page--contest_scoreboard th.col--problem, html.nb-brutal.page--contest_scoreboard td.col--problem, html.nb-brutal .page--contest_scoreboard td.col--problem, html.nb-brutal.page--homework_scoreboard col.col--problem, html.nb-brutal .page--homework_scoreboard col.col--problem, html.nb-brutal.page--homework_scoreboard .col--problem, html.nb-brutal .page--homework_scoreboard .col--problem, html.nb-brutal.page--homework_scoreboard th.col--problem, html.nb-brutal .page--homework_scoreboard th.col--problem, html.nb-brutal.page--homework_scoreboard td.col--problem, html.nb-brutal .page--homework_scoreboard td.col--problem { display: none !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; } /* 容器：不让表格比屏幕更宽导致横向飞出 */ html.nb-brutal.page--contest_scoreboard .overflow-hidden-horizontal, html.nb-brutal .page--contest_scoreboard .overflow-hidden-horizontal, html.nb-brutal.page--homework_scoreboard .overflow-hidden-horizontal, html.nb-brutal .page--homework_scoreboard .overflow-hidden-horizontal, html.nb-brutal.page--contest_scoreboard .section__body.no-padding, html.nb-brutal .page--contest_scoreboard .section__body.no-padding, html.nb-brutal.page--contest_scoreboard .section__table-container, html.nb-brutal .page--contest_scoreboard .section__table-container, html.nb-brutal.page--homework_scoreboard .section__table-container, html.nb-brutal .page--homework_scoreboard .section__table-container { overflow-x: hidden !important; overflow-y: visible !important; max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; } html.nb-brutal.page--contest_scoreboard .section, html.nb-brutal .page--contest_scoreboard .section, html.nb-brutal.page--homework_scoreboard .section, html.nb-brutal .page--homework_scoreboard .section { overflow-x: hidden !important; overflow-y: visible !important; max-width: 100% !important; } /* NProgress + timer */ html.nb-brutal.page--contest_scoreboard #nprogress, html.nb-brutal .page--contest_scoreboard #nprogress, html.nb-brutal.page--homework_scoreboard #nprogress, html.nb-brutal .page--homework_scoreboard #nprogress, html.nb-brutal.page--contest_scoreboard #nprogress .bar, html.nb-brutal .page--contest_scoreboard #nprogress .bar, html.nb-brutal.page--homework_scoreboard #nprogress .bar, html.nb-brutal .page--homework_scoreboard #nprogress .bar { display: none !important; visibility: hidden !important; height: 0 !important; opacity: 0 !important; pointer-events: none !important; } html.nb-brutal.page--contest_scoreboard .contest-timer, html.nb-brutal .page--contest_scoreboard .contest-timer, html.nb-brutal.page--homework_scoreboard .contest-timer, html.nb-brutal .page--homework_scoreboard .contest-timer { display: none !important; visibility: hidden !important; } /* 吸顶：实色；不取消 clip-path（由 JS 写入防止飞出） */ html.nb-brutal.page--contest_scoreboard .section__table-header.is_stuck, html.nb-brutal .page--contest_scoreboard .section__table-header.is_stuck, html.nb-brutal.page--homework_scoreboard .section__table-header.is_stuck, html.nb-brutal .page--homework_scoreboard .section__table-header.is_stuck { background: #6BBFBA !important; background-color: #6BBFBA !important; background-image: linear-gradient(#6BBFBA, #6BBFBA) !important; opacity: 1 !important; border-collapse: separate !important; border-spacing: 0 !important; box-sizing: border-box !important; z-index: 400 !important; /* sticky-kit 可能写超宽 width；限制在视口内作兜底 */ max-width: 100vw !important; } html.nb-brutal.page--contest_scoreboard .section__table-header.is_stuck th, html.nb-brutal .page--contest_scoreboard .section__table-header.is_stuck th, html.nb-brutal.page--homework_scoreboard .section__table-header.is_stuck th, html.nb-brutal .page--homework_scoreboard .section__table-header.is_stuck th { background: #6BBFBA !important; background-color: #6BBFBA !important; background-image: linear-gradient(#6BBFBA, #6BBFBA) !important; opacity: 1 !important; color: #000 !important; box-sizing: border-box !important; overflow: hidden !important; text-overflow: ellipsis !important; } } html.nb-brutal .section__list__item { border-bottom: 3px solid #000 !important; padding: 1rem 1.25rem !important; transition: background 0.12s ease; } html.nb-brutal .section__list__item:last-child { border-bottom: 0 !important; } html.nb-brutal .section__list__item:hover { background: var(--nb-bg); } /* Homepage color-block cards */ html.nb-brutal .nb-card--bulletin { background: var(--nb-accent) !important; } html.nb-brutal .nb-card--contest { background: #fff !important; } html.nb-brutal .nb-card--ranking { background: #fff !important; } html.nb-brutal .nb-card--hitokoto { background: var(--nb-muted) !important; } html.nb-brutal .nb-card--recent { background: var(--nb-secondary) !important; } html.nb-brutal .nb-card--tips { background: var(--nb-primary) !important; } html.nb-brutal .nb-card--weekly-ac { background: #fff !important; } html.nb-brutal .nb-card--submit-chart { background: #fff !important; } html.nb-brutal .nb-badge--chart { background: var(--nb-muted); color: #000; } html.nb-brutal .nb-submit-chart-body { padding-top: 0.65rem !important; } /* meta row: legend + summary chips */ html.nb-brutal .nb-submit-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; margin-bottom: 0.85rem; } html.nb-brutal .nb-submit-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; font-weight: 700; font-size: 0.82rem; color: #000; } html.nb-brutal .nb-submit-legend__item { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.55rem 0.2rem 0.35rem; background: #fff; border: 2px solid #000; box-shadow: 2px 2px 0 0 #000; } html.nb-brutal .nb-submit-legend__swatch { display: inline-block; width: 12px; height: 12px; border: 2px solid #000; box-sizing: border-box; flex-shrink: 0; } /* Low-saturation chart colors — match weekly-submit-chart palette */ html.nb-brutal .nb-submit-legend__item--ac .nb-submit-legend__swatch { background: #6B9E8A; } html.nb-brutal .nb-submit-legend__item--wa .nb-submit-legend__swatch { background: #C98980; } html.nb-brutal .nb-submit-legend__item--other .nb-submit-legend__swatch { background: #A09C96; } html.nb-brutal .nb-submit-summary { display: flex; flex-wrap: wrap; gap: 0.4rem; } html.nb-brutal .nb-submit-summary__chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.55rem; font-size: 0.78rem; font-weight: 700; border: 2px solid #000; background: var(--nb-bg); box-shadow: 2px 2px 0 0 #000; color: #000; white-space: nowrap; } html.nb-brutal .nb-submit-summary__chip strong { font-weight: 800; font-variant-numeric: tabular-nums; } html.nb-brutal .nb-submit-summary__chip--total { background: var(--nb-accent); } html.nb-brutal .nb-submit-summary__chip--ac { background: #e4efe9; /* soft sage tint of #6B9E8A */ } html.nb-brutal .nb-submit-summary__chip--wa { background: #f3e8e6; /* soft rose tint of #C98980 */ } html.nb-brutal .nb-submit-summary__chip--other { background: #efeeec; /* soft stone tint of #A09C96 */ } /* chart canvas — solid cream, no diagonal hatch stripes */ html.nb-brutal .nb-submit-chart { position: relative; width: 100%; min-height: 300px; border: 3px solid #000; background: var(--nb-bg, #FBF6EB) !important; background-image: none !important; box-shadow: 4px 4px 0 0 #000; box-sizing: border-box; padding: 0.35rem 0.2rem 0.15rem; overflow: hidden; } html.nb-brutal .nb-submit-chart__svg { display: block; width: 100%; height: auto; font-family: var(--nb-font); } html.nb-brutal .nb-submit-chart__plot-bg { /* transparent: show cream (--nb-bg) chrome, no white plot panel */ fill: none !important; } html.nb-brutal .nb-submit-chart__axis-label { fill: #000; font-size: 11px; font-weight: 700; font-family: var(--nb-font); } html.nb-brutal .nb-submit-chart__axis-label--wd { font-size: 11px; font-weight: 800; } html.nb-brutal .nb-submit-chart__axis-label--date { font-size: 10px; font-weight: 600; fill: #444; } /* area / line stay fully visible — no dash/opacity hide animations */ html.nb-brutal .nb-submit-chart__area { opacity: 1; } html.nb-brutal .nb-submit-chart__line { opacity: 1; } html.nb-brutal .nb-submit-chart__dot { pointer-events: none; } /* tooltip */ html.nb-brutal .nb-submit-chart__tooltip { position: absolute; z-index: 5; min-width: 168px; max-width: 260px; padding: 0.7rem 0.8rem; background: #fff; border: 3px solid #000; box-shadow: 5px 5px 0 0 #000; color: #000; font-size: 0.8rem; font-weight: 700; line-height: 1.4; pointer-events: none; } html.nb-brutal .nb-submit-chart__tooltip-date { display: flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; font-weight: 800; margin-bottom: 0.25rem; } html.nb-brutal .nb-submit-chart__tooltip-wd { display: inline-block; padding: 0.05rem 0.35rem; background: var(--nb-accent); border: 2px solid #000; font-size: 0.72rem; font-weight: 800; line-height: 1.3; } html.nb-brutal .nb-submit-chart__tooltip-total { margin-bottom: 0.4rem; padding-bottom: 0.35rem; border-bottom: 2px solid #000; font-size: 0.78rem; color: #333; } html.nb-brutal .nb-submit-chart__tooltip-total strong { font-weight: 800; color: #000; font-variant-numeric: tabular-nums; } html.nb-brutal .nb-submit-chart__tooltip-row { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 0.4rem; margin-top: 0.28rem; } html.nb-brutal .nb-submit-chart__tooltip-dot { width: 10px; height: 10px; border: 2px solid #000; flex-shrink: 0; box-sizing: border-box; } html.nb-brutal .nb-submit-chart__tooltip-name { font-weight: 700; } html.nb-brutal .nb-submit-chart__tooltip-val { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 1.5em; text-align: right; } html.nb-brutal .nb-submit-chart__tooltip-row--ac .nb-submit-chart__tooltip-dot { background: #6B9E8A; } html.nb-brutal .nb-submit-chart__tooltip-row--wa .nb-submit-chart__tooltip-dot { background: #C98980; } html.nb-brutal .nb-submit-chart__tooltip-row--other .nb-submit-chart__tooltip-dot { background: #A09C96; } html.nb-brutal .nb-submit-chart-empty { margin: 0.75rem 0 0; font-weight: 700; font-size: 0.9rem; color: #000; text-align: center; } @media (max-width: 640px) { html.nb-brutal .nb-submit-meta { flex-direction: column; align-items: flex-start; } html.nb-brutal .nb-submit-chart { min-height: 260px; } } html.nb-brutal .nb-badge { display: inline-block; background: #000; color: #fff; font-weight: 700; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.3rem 0.65rem; border: 2px solid #000; line-height: 1; flex-shrink: 0; } html.nb-brutal .nb-badge--dark { background: var(--nb-primary); color: #000; } html.nb-brutal .nb-badge--weekly { background: var(--nb-secondary); color: #000; font-size: 0.65rem; padding: 0.2rem 0.45rem; } /* Compact weekly board in sidebar — no horizontal scroll */ html.nb-brutal .nb-card--weekly-ac { overflow: hidden !important; } html.nb-brutal .nb-card--weekly-ac .section__title { font-size: 1rem !important; letter-spacing: 0.02em; } html.nb-brutal .nb-weekly-meta { padding: 0.4rem 0.65rem !important; border-bottom: 3px solid #000; background: var(--nb-bg); text-align: center !important; } html.nb-brutal .nb-weekly-range { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 0.25rem; line-height: 1.3; color: #000; min-width: 0; font-size: 0.8rem; font-weight: 700; width: 100%; text-align: center; } html.nb-brutal .nb-weekly-range__label { flex-shrink: 0; text-transform: none; letter-spacing: 0; opacity: 0.9; } html.nb-brutal .nb-weekly-range__sep { flex-shrink: 0; opacity: 0.5; } html.nb-brutal .nb-weekly-range__dates { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html.nb-brutal .nb-weekly-table-wrap { overflow: hidden !important; width: 100%; } html.nb-brutal .nb-weekly-table { table-layout: fixed !important; width: 100% !important; max-width: 100% !important; } html.nb-brutal .nb-weekly-table th, html.nb-brutal .nb-weekly-table td { padding: 0.4rem 0.35rem !important; font-size: 0.8rem !important; vertical-align: middle !important; text-align: center !important; overflow: hidden; } /* Rank | User | Count — all cells centered */ html.nb-brutal .nb-weekly-table .col--rank { width: 2.75rem !important; min-width: 2.75rem !important; max-width: 3rem !important; text-align: center !important; white-space: nowrap; } html.nb-brutal .nb-weekly-table .col--user { width: auto !important; text-align: center !important; } /* 过题数列：约为原宽度 2/3 */ html.nb-brutal .nb-weekly-table .col--count { width: 3rem !important; min-width: 2.35rem !important; max-width: 3.7rem !important; text-align: center !important; white-space: nowrap; overflow: hidden !important; box-sizing: border-box !important; padding-left: 0.15rem !important; padding-right: 0.15rem !important; } html.nb-brutal .nb-weekly-table thead th { font-size: 0.68rem !important; letter-spacing: 0.02em; padding: 0.35rem 0.3rem !important; text-align: center !important; } html.nb-brutal .nb-weekly-table .col--user .user-profile-link { display: inline-flex; align-items: center; justify-content: center; min-width: 0; max-width: 100%; margin: 0 auto; } html.nb-brutal .nb-weekly-table thead th.col--user { font-size: 0.85rem !important; } html.nb-brutal .nb-weekly-table .col--user .user-profile-name, html.nb-brutal .nb-weekly-table .col--user a.user-profile-name { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.95rem !important; line-height: 1.25; text-align: center; } html.nb-brutal .nb-weekly-table .col--user .user-profile-avatar, html.nb-brutal .nb-weekly-table .col--user .user-profile-badge { display: none !important; } html.nb-brutal .nb-card--weekly-ac .nb-rank-num { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6rem; height: 1.6rem; font-size: 0.8rem; font-weight: 800; padding: 0 0.25rem; border-width: 2px; box-sizing: border-box; line-height: 1; } /* 过题数：纯数字，无方框；过长省略，不溢出表格边框 */ html.nb-brutal .nb-ac-count { display: inline-block; max-width: 100%; box-sizing: border-box; font-weight: 800; font-size: 0.9rem; font-variant-numeric: tabular-nums; background: transparent; border: 0; padding: 0; min-width: 0; text-align: center; line-height: 1.25; color: #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } html.nb-brutal .nb-weekly-row--top1 .nb-rank-num { background: var(--nb-accent); color: #000; } html.nb-brutal .nb-weekly-row--top2 .nb-rank-num { background: var(--nb-surface); color: #000; } html.nb-brutal .nb-weekly-row--top3 .nb-rank-num { background: var(--nb-primary); color: #000; } html.nb-brutal .nb-weekly-empty { font-weight: 700; color: #000; font-size: 0.85rem; padding: 0.75rem !important; } html.nb-brutal .nb-weekly-empty p { margin: 0; } html.nb-brutal .nb-bulletin-body, html.nb-brutal .nb-card--bulletin .section__body { font-weight: 600; color: #000 !important; } html.nb-brutal .nb-bulletin-body a { color: #000 !important; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } /* ========== Buttons ========== */ html.nb-brutal .button, html.nb-brutal a.button, html.nb-brutal button.button, html.nb-brutal input.button, html.nb-brutal input[type="submit"], html.nb-brutal input[type="button"], html.nb-brutal .primary.button, html.nb-brutal button.primary { border: 3px solid #000 !important; border-radius: 0 !important; background: #000 !important; color: #fff !important; font-family: var(--nb-font) !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.03em; box-shadow: 4px 4px 0 0 #000 !important; transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease !important; text-shadow: none !important; } html.nb-brutal .button:hover, html.nb-brutal a.button:hover, html.nb-brutal button.button:hover, html.nb-brutal input[type="submit"]:hover, html.nb-brutal .primary.button:hover { transform: translate(2px, 2px); box-shadow: none !important; background: var(--nb-primary) !important; color: #000 !important; } html.nb-brutal .button:active, html.nb-brutal a.button:active { transform: translate(2px, 2px); box-shadow: none !important; } html.nb-brutal .inverse.button, html.nb-brutal a.inverse.button { background: #fff !important; color: #000 !important; border: 3px solid #000 !important; box-shadow: 4px 4px 0 0 #000 !important; } html.nb-brutal .inverse.button:hover { background: var(--nb-accent) !important; color: #000 !important; } html.nb-brutal .rounded.button { border-radius: 0 !important; } html.nb-brutal .detail-button { border: 3px solid #000 !important; border-radius: 0 !important; background: var(--nb-accent) !important; color: #000 !important; font-weight: 800 !important; box-shadow: 3px 3px 0 0 #000; transition: transform 0.12s ease, box-shadow 0.12s ease !important; } html.nb-brutal .detail-button:hover { transform: translate(2px, 2px); box-shadow: none; } /* ========== Forms / inputs ========== */ html.nb-brutal .textbox, html.nb-brutal input.textbox, html.nb-brutal textarea.textbox, html.nb-brutal select.textbox, html.nb-brutal input[type="text"], html.nb-brutal input[type="password"], html.nb-brutal input[type="email"], html.nb-brutal input[type="number"], html.nb-brutal input[type="search"], html.nb-brutal input[type="url"], html.nb-brutal textarea, html.nb-brutal select { border: 3px solid #000 !important; border-radius: 0 !important; background: #fff !important; color: #000 !important; font-family: var(--nb-font) !important; font-weight: 600 !important; box-shadow: none !important; outline: none !important; } html.nb-brutal .textbox:focus, html.nb-brutal input:focus, html.nb-brutal textarea:focus, html.nb-brutal select:focus { outline: none !important; box-shadow: 3px 3px 0 0 #000 !important; border-color: #000 !important; } html.nb-brutal label.material.textbox, html.nb-brutal .material.textbox { border: 0 !important; box-shadow: none !important; background: transparent !important; } html.nb-brutal label.material.textbox input, html.nb-brutal .material.textbox input { border: 3px solid #000 !important; border-radius: 0 !important; background: #fff !important; padding: 0.75rem 1rem !important; font-weight: 600 !important; } html.nb-brutal .checkbox, html.nb-brutal input[type="checkbox"] { accent-color: #000; } /* ========== Tables ========== */ html.nb-brutal .data-table, html.nb-brutal table.data-table, html.nb-brutal .nb-table { border-collapse: collapse !important; width: 100%; font-weight: 600; } html.nb-brutal .data-table th, html.nb-brutal .data-table td, html.nb-brutal table th, html.nb-brutal table td { border: 2px solid #000 !important; padding: 0.55rem 0.7rem !important; color: #000 !important; background: #fff !important; /* prevent text clipping / overflow hide under fixed layouts */ overflow: visible !important; white-space: normal !important; word-break: break-word !important; height: auto !important; max-height: none !important; line-height: 1.4 !important; vertical-align: middle !important; } html.nb-brutal .data-table thead th, html.nb-brutal table thead th { /* 必须用不透明实色，吸顶时才能挡住下方列表 */ background: #6BBFBA !important; background-color: #6BBFBA !important; font-weight: 800 !important; text-transform: none; font-size: 0.85rem; letter-spacing: 0.02em; white-space: normal !important; } html.nb-brutal .data-table tbody tr:nth-child(even) td { background: var(--nb-bg) !important; } html.nb-brutal .data-table tbody tr:hover td { background: var(--nb-muted) !important; } /* * Hydro StyledTable + sticky-kit（题库/排名/成绩通用，不拆结构）： * thead 克隆到 .section__table-header，滚动时 is_stuck → position:fixed。 * * 关键：border-collapse:collapse + position:fixed 时，部分浏览器不绘制表/单元格背景， * 导致列表从「实色表头」下透出。吸顶时改 separate + 实色 th 背景即可遮住。 * 禁止再对 thead 用 position:sticky 叠 sticky-kit（会空白行且失效）。 */ html.nb-brutal .section__table-container { position: relative !important; background: transparent !important; /* 不要给容器低 z-index，否则 is_stuck 的 fixed 表头会被后续内容盖住 */ overflow-x: auto !important; overflow-y: visible !important; } /* 克隆表头：默认（未吸顶）实色，与 Hydro #fffffff2 半透明区分 */ html.nb-brutal .section__table-header, html.nb-brutal table.section__table-header { background: #6BBFBA !important; background-color: #6BBFBA !important; opacity: 1 !important; z-index: 100 !important; box-shadow: none !important; border-bottom: 0 !important; } html.nb-brutal .section__table-header thead, html.nb-brutal .section__table-header thead tr, html.nb-brutal .section__table-header th, html.nb-brutal .section__table-header thead th, html.nb-brutal table.section__table-header th { background: #6BBFBA !important; background-color: #6BBFBA !important; background-image: linear-gradient(#6BBFBA, #6BBFBA) !important; opacity: 1 !important; color: #000 !important; background-clip: border-box !important; box-shadow: none !important; } /* * 吸顶态：必须 opaque + 足够 z-index。 * border-collapse:separate 修复 fixed 表背景下透；底边 2px 黑线代替大块 box-shadow。 */ html.nb-brutal .section__table-header.is_stuck, html.nb-brutal table.section__table-header.is_stuck { background: #6BBFBA !important; background-color: #6BBFBA !important; background-image: linear-gradient(#6BBFBA, #6BBFBA) !important; opacity: 1 !important; z-index: 400 !important; border-collapse: separate !important; border-spacing: 0 !important; box-shadow: 0 2px 0 #000 !important; /* 盖住下方列表，避免半透明残留 */ -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html.nb-brutal .section__table-header.is_stuck thead, html.nb-brutal .section__table-header.is_stuck thead tr, html.nb-brutal .section__table-header.is_stuck th, html.nb-brutal .section__table-header.is_stuck thead th, html.nb-brutal table.section__table-header.is_stuck th { background: #6BBFBA !important; background-color: #6BBFBA !important; background-image: linear-gradient(#6BBFBA, #6BBFBA) !important; opacity: 1 !important; color: #000 !important; z-index: 401 !important; background-clip: padding-box !important; box-shadow: none !important; } /* 空克隆表（无 thead）不占位，避免表头上方空白行 */ html.nb-brutal .section__table-header:not(:has(thead)), html.nb-brutal table.section__table-header:empty { display: none !important; height: 0 !important; min-height: 0 !important; overflow: hidden !important; border: 0 !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; } /* 题库 / 排名 / 成绩：吸顶实色（选择器加重，压过 .data-table th { background:#fff }） */ html.nb-brutal.page--problem_main .section__table-header, html.nb-brutal .page--problem_main .section__table-header, html.nb-brutal.page--problem_main .section__table-header.is_stuck, html.nb-brutal .page--problem_main .section__table-header.is_stuck, html.nb-brutal.page--problem_main .section__table-header th, html.nb-brutal .page--problem_main .section__table-header th, html.nb-brutal.page--problem_main .section__table-header.is_stuck th, html.nb-brutal .page--problem_main .section__table-header.is_stuck th, html.nb-brutal.page--ranking .section__table-header, html.nb-brutal .page--ranking .section__table-header, html.nb-brutal.page--ranking .section__table-header.is_stuck, html.nb-brutal .page--ranking .section__table-header.is_stuck, html.nb-brutal.page--ranking .section__table-header th, html.nb-brutal .page--ranking .section__table-header th, html.nb-brutal.page--contest_scoreboard .section__table-header, html.nb-brutal .page--contest_scoreboard .section__table-header, html.nb-brutal.page--homework_scoreboard .section__table-header, html.nb-brutal .page--homework_scoreboard .section__table-header, html.nb-brutal.page--contest_scoreboard .section__table-header th, html.nb-brutal .page--contest_scoreboard .section__table-header th, html.nb-brutal.page--homework_scoreboard .section__table-header th, html.nb-brutal .page--homework_scoreboard .section__table-header th, html.nb-brutal.page--contest_scoreboard .section__table-header.is_stuck, html.nb-brutal .page--contest_scoreboard .section__table-header.is_stuck, html.nb-brutal.page--homework_scoreboard .section__table-header.is_stuck, html.nb-brutal .page--homework_scoreboard .section__table-header.is_stuck, html.nb-brutal.page--contest_scoreboard .section__table-header.is_stuck th, html.nb-brutal .page--contest_scoreboard .section__table-header.is_stuck th, html.nb-brutal.page--homework_scoreboard .section__table-header.is_stuck th, html.nb-brutal .page--homework_scoreboard .section__table-header.is_stuck th, html.nb-brutal.page--contest_scoreboard .section__table-header.is_stuck thead, html.nb-brutal .page--contest_scoreboard .section__table-header.is_stuck thead, html.nb-brutal.page--contest_scoreboard .section__table-header.is_stuck thead tr, html.nb-brutal .page--contest_scoreboard .section__table-header.is_stuck thead tr, html.nb-brutal.page--homework_scoreboard .section__table-header.is_stuck thead, html.nb-brutal .page--homework_scoreboard .section__table-header.is_stuck thead, html.nb-brutal.page--homework_scoreboard .section__table-header.is_stuck thead tr, html.nb-brutal .page--homework_scoreboard .section__table-header.is_stuck thead tr { background: #6BBFBA !important; background-color: #6BBFBA !important; background-image: linear-gradient(#6BBFBA, #6BBFBA) !important; opacity: 1 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* Admin / domain manage tables — never clip labels */ html.nb-brutal.page--domain_permission .section, html.nb-brutal.page--domain_user .section, html.nb-brutal.page--domain_role .section, html.nb-brutal.page--domain_group .section, html.nb-brutal.page--manage_user_priv .section, html.nb-brutal.page--manage_user_import .section, html.nb-brutal.page--manage_setting .section, html.nb-brutal.page--manage_config .section, html.nb-brutal.page--manage_dashboard .section, html.nb-brutal.page--domain_dashboard .section, html.nb-brutal.page--domain_edit .section { overflow: visible !important; } html.nb-brutal.page--domain_permission .section__body.no-padding, html.nb-brutal.page--domain_permission .domain-users, html.nb-brutal.page--domain_user .section__body.no-padding, html.nb-brutal.page--domain_role .section__body.no-padding, html.nb-brutal.page--manage_user_priv .section__body.no-padding { overflow-x: auto !important; overflow-y: visible !important; } html.nb-brutal.page--domain_permission .data-table { table-layout: auto !important; width: max-content !important; min-width: 100% !important; } html.nb-brutal.page--domain_permission .col--description, html.nb-brutal.page--domain_permission td.col--description { min-width: 14rem !important; max-width: 28rem !important; white-space: normal !important; word-break: break-word !important; padding-left: 1rem !important; padding-right: 0.75rem !important; } html.nb-brutal.page--domain_permission .col--p, html.nb-brutal.page--domain_permission th.col--p, html.nb-brutal.page--domain_permission td.col--p { width: 5.5rem !important; min-width: 5rem !important; max-width: 7rem !important; text-align: center !important; white-space: normal !important; overflow: visible !important; } html.nb-brutal.page--domain_permission th.col--p span { display: inline-block !important; max-width: 100% !important; white-space: normal !important; word-break: break-word !important; line-height: 1.25 !important; } /* Permission family header row — high contrast, no white-on-light */ html.nb-brutal.page--domain_permission .col--family, html.nb-brutal.page--domain_permission td.col--family { color: #000 !important; background: var(--nb-secondary) !important; font-weight: 800 !important; border-top: 3px solid #000 !important; white-space: normal !important; line-height: 1.5 !important; padding: 0.55rem 0.85rem !important; } html.nb-brutal.page--domain_permission .col--family:hover, html.nb-brutal.page--domain_permission tbody tr:hover td.col--family { background: var(--nb-secondary) !important; color: #000 !important; } /* Super-admin privilege dialog / tables */ html.nb-brutal.page--manage_user_priv .data-table, html.nb-brutal .dialog .priv_table, html.nb-brutal .dialog__body--set-priv .data-table { table-layout: auto !important; width: 100% !important; } html.nb-brutal.page--manage_user_priv .col--description, html.nb-brutal .dialog .col--description { white-space: normal !important; word-break: break-word !important; min-width: 8rem !important; } /* .dialog is the full-screen overlay (flex-centered). Style .dialog__content only. Do NOT force display:flex — Hydro toggles display none/flex via JS inline style. */ html.nb-brutal .dialog, html.nb-brutal .dialog--signin { position: fixed !important; left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; overflow: auto !important; box-sizing: border-box !important; padding: 1rem !important; /* overlay itself has no card chrome */ border: 0 !important; box-shadow: none !important; background: rgba(0, 0, 0, 0.45) !important; } html.nb-brutal .dialog--signin .dialog__content { background: transparent !important; border: 0 !important; box-shadow: none !important; max-width: none !important; max-height: none !important; /* black bar extends outside content box via negative left/right */ overflow: visible !important; padding: 0 !important; } html.nb-brutal .dialog--signin__bg { background: rgba(0, 0, 0, 0.88) !important; border: 0 !important; box-shadow: none !important; } html.nb-brutal .dialog--signin__main { background: #fff !important; border: 0 !important; /* keep form readable over the dark bar; avoid extra outer white frame */ box-shadow: 0 0 30px rgba(0, 0, 0, 0.6) !important; } /* Title "登录 / SIGN IN" — Hydro uses lighten(primary) blue; force black */ html.nb-brutal .dialog--signin__title, html.nb-brutal h1.dialog--signin__title, html.nb-brutal .dialog--signin__main h1 { color: #000 !important; -webkit-text-fill-color: #000 !important; } html.nb-brutal .dialog--signin__side { color: #ddd !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html.nb-brutal .dialog--signin__side h1 { color: #fff !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html.nb-brutal .dialog--signin__side p { color: #ddd !important; background: transparent !important; } html.nb-brutal .dialog__content, html.nb-brutal .dialog.withBg .dialog__content { position: relative !important; max-width: min(960px, 96vw) !important; max-height: 90vh !important; overflow: auto !important; box-sizing: border-box !important; margin: auto !important; } html.nb-brutal .dialog__body--set-priv, html.nb-brutal .dialog .dialog__body { overflow: visible !important; max-height: none !important; } html.nb-brutal .dialog__body--set-priv .columns { min-width: 0 !important; } html.nb-brutal .dialog__body--set-priv .priv_table th, html.nb-brutal .dialog__body--set-priv .priv_table td { font-size: 0.82rem !important; padding: 0.4rem 0.5rem !important; } /* Domain user / role tables */ html.nb-brutal.page--domain_user .data-table, html.nb-brutal.page--domain_role .data-table, html.nb-brutal.page--domain_group .data-table { table-layout: auto !important; } html.nb-brutal.page--domain_user .col--role, html.nb-brutal.page--domain_role .col--users { white-space: normal !important; word-break: break-word !important; } /* Checkbox cells: don't clip the control */ html.nb-brutal .data-table .checkbox, html.nb-brutal .data-table label.compact.checkbox { overflow: visible !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; max-width: none !important; } html.nb-brutal .nb-rank-num { display: inline-flex; align-items: center; justify-content: center; min-width: 1.75rem; height: 1.75rem; padding: 0 0.35rem; background: #000; color: #fff; font-weight: 800; font-size: 0.9rem; border: 2px solid #000; } html.nb-brutal .col--rp, html.nb-brutal .col--ac-tried { font-weight: 800 !important; } /* Ranking page: hide bio, rebalance remaining columns */ html.nb-brutal .page--ranking .col--bio, html.nb-brutal .page--homepage .col--bio, /* Ranking search bar */ html.nb-brutal .nb-ranking-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; padding: 0.85rem 1rem !important; border-bottom: 3px solid #000; } html.nb-brutal .nb-ranking-header .section__title { margin: 0 !important; } html.nb-brutal .nb-ranking-search { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin: 0; } html.nb-brutal .nb-ranking-search__label { font-weight: 800; font-size: 0.85rem; color: #000; } html.nb-brutal .nb-ranking-search__input { flex: 1 1 10rem; min-width: 0; max-width: 100%; width: auto; height: 2.25rem; padding: 0 0.65rem !important; border: 3px solid #000 !important; border-radius: 0 !important; box-shadow: 3px 3px 0 0 #000 !important; background: #fff !important; color: #000 !important; font-weight: 600; box-sizing: border-box; } html.nb-brutal .nb-ranking-search__btn, html.nb-brutal .nb-ranking-search__clear { height: 2.25rem; line-height: 1.2; margin: 0 !important; white-space: nowrap; flex: 0 0 auto; } html.nb-brutal .nb-ranking-search-meta { padding: 0.65rem 1rem; font-weight: 600; font-size: 0.9rem; border-bottom: 2px solid #000; background: var(--nb-bg); color: #000; } html.nb-brutal .nb-ranking-uid { display: inline-block; margin-left: 0.35rem; padding: 0.05rem 0.35rem; font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #333; background: var(--nb-surface, #ebebeb); border: 2px solid #000; vertical-align: middle; } /* Ranking page: hide bio, rebalance remaining columns */ html.nb-brutal .page--ranking .col--bio, html.nb-brutal .page--homepage .col--bio, html.nb-brutal .nb-ranking-table .col--bio { display: none !important; } html.nb-brutal .nb-ranking-table .col--bio { display: none !important; } /* * 排名表 + sticky-kit 克隆表头： * 两表必须同宽、同 table-layout、同列 rem 宽（禁用 %，否则 is_stuck 后错位）。 */ html.nb-brutal.page--ranking .section__table-container, html.nb-brutal .page--ranking .section__table-container { width: 100% !important; overflow-x: auto !important; overflow-y: visible !important; } html.nb-brutal.page--ranking .section__table-header, html.nb-brutal.page--ranking .section__table-container > .data-table, html.nb-brutal .page--ranking .section__table-header, html.nb-brutal .page--ranking .section__table-container > .data-table, html.nb-brutal .page--ranking .nb-ranking-table, html.nb-brutal .page--ranking .data-table, html.nb-brutal .nb-ranking-table { table-layout: fixed !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } html.nb-brutal.page--ranking .section__table-header th, html.nb-brutal.page--ranking .section__table-header td, html.nb-brutal.page--ranking .data-table th, html.nb-brutal.page--ranking .data-table td, html.nb-brutal .page--ranking .section__table-header th, html.nb-brutal .page--ranking .data-table th, html.nb-brutal .page--ranking .data-table td { box-sizing: border-box !important; } /* Rank | User | RP | detail… | AC —— 固定 rem，表头/表体共用 */ html.nb-brutal.page--ranking .col--rank, html.nb-brutal .page--ranking .col--rank, html.nb-brutal .nb-ranking-table .col--rank, html.nb-brutal.page--ranking col.col--rank, html.nb-brutal .page--ranking col.col--rank { width: 4.5rem !important; min-width: 4.5rem !important; max-width: 4.5rem !important; text-align: center !important; } html.nb-brutal.page--ranking .col--user, html.nb-brutal .page--ranking .col--user, html.nb-brutal .nb-ranking-table .col--user, html.nb-brutal.page--ranking col.col--user, html.nb-brutal .page--ranking col.col--user { width: 14rem !important; min-width: 14rem !important; max-width: 14rem !important; text-align: left !important; } /* 表头「账号」居中；单元格内容仍左对齐 */ html.nb-brutal.page--ranking th.col--user, html.nb-brutal .page--ranking th.col--user, html.nb-brutal.page--ranking .section__table-header th.col--user, html.nb-brutal .page--ranking .section__table-header th.col--user, html.nb-brutal .nb-ranking-table th.col--user { text-align: center !important; } html.nb-brutal .page--ranking .col--user .user-profile-name, html.nb-brutal .page--ranking .col--user a.user-profile-name { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } html.nb-brutal.page--ranking .col--rp, html.nb-brutal .page--ranking .col--rp, html.nb-brutal .nb-ranking-table .col--rp, html.nb-brutal.page--ranking col.col--rp, html.nb-brutal .page--ranking col.col--rp { width: 6.5rem !important; min-width: 6.5rem !important; max-width: 6.5rem !important; text-align: center !important; } html.nb-brutal.page--ranking .col--detail, html.nb-brutal .page--ranking .col--detail, html.nb-brutal.page--ranking col.col--detail, html.nb-brutal .page--ranking col.col--detail { width: 6.5rem !important; min-width: 6.5rem !important; max-width: 6.5rem !important; text-align: center !important; } html.nb-brutal.page--ranking .col--ac, html.nb-brutal .page--ranking .col--ac, html.nb-brutal.page--ranking col.col--ac, html.nb-brutal .page--ranking col.col--ac { width: 6.5rem !important; min-width: 6.5rem !important; max-width: 6.5rem !important; text-align: center !important; } html.nb-brutal .page--ranking .col--rp, html.nb-brutal .page--ranking .col--ac, html.nb-brutal .page--ranking .col--detail { font-weight: 700 !important; } /* 排名页：首行「自己」与其它行背景区分 */ html.nb-brutal .page--ranking tr.nb-ranking-self, html.nb-brutal .nb-ranking-table tr.nb-ranking-self { background: var(--nb-accent) !important; } html.nb-brutal .page--ranking tr.nb-ranking-self > td, html.nb-brutal .nb-ranking-table tr.nb-ranking-self > td { background: transparent !important; font-weight: 700 !important; } html.nb-brutal .page--ranking tr.nb-ranking-self:hover, html.nb-brutal .nb-ranking-table tr.nb-ranking-self:hover { background: #e0d08a !important; /* slightly deeper gold on hover */ } @media (max-width: 768px) { html.nb-brutal .page--ranking .col--detail, html.nb-brutal.page--ranking .col--detail, html.nb-brutal .page--ranking col.col--detail { display: none !important; } html.nb-brutal .page--ranking .col--rank, html.nb-brutal.page--ranking .col--rank, html.nb-brutal .page--ranking col.col--rank { width: 3.25rem !important; min-width: 3.25rem !important; max-width: 3.25rem !important; } html.nb-brutal .page--ranking .col--user, html.nb-brutal.page--ranking .col--user, html.nb-brutal .nb-ranking-table .col--user, html.nb-brutal .page--ranking col.col--user { width: 10rem !important; min-width: 10rem !important; max-width: 10rem !important; } html.nb-brutal .page--ranking .col--rp, html.nb-brutal .page--ranking .col--ac, html.nb-brutal.page--ranking .col--rp, html.nb-brutal.page--ranking .col--ac, html.nb-brutal .page--ranking col.col--rp, html.nb-brutal .page--ranking col.col--ac { width: 5.5rem !important; min-width: 5.5rem !important; max-width: 5.5rem !important; } } /* Problem list rows */ html.nb-brutal .col--problem-name a, html.nb-brutal a.typo-a { color: #000 !important; font-weight: 700 !important; } html.nb-brutal a { color: #000; } html.nb-brutal a:hover { text-decoration: underline; text-underline-offset: 2px; } /* ========== Menus / sidebars ========== */ /* * Dropdown / floating menus keep a hard black frame. * Side panels (.section.side) already have the section outer frame — * nested .menu must NOT get a second frame (double-box + white gap bar). */ html.nb-brutal .menu, html.nb-brutal .dropdown-target.menu { border: 3px solid #000 !important; border-radius: 0 !important; box-shadow: 4px 4px 0 0 #000 !important; background: #fff !important; } /* Contest / homework / training / problem sidebars: single outer border only */ html.nb-brutal .section.side .menu, html.nb-brutal .section.side ol.menu, html.nb-brutal .section.side ul.menu, html.nb-brutal .section.side .dropdown-target.menu { border: none !important; box-shadow: none !important; background: transparent !important; margin: 0 !important; } /* Wrapper div around side menus (Hydro contest/homework sidebars) — no extra card */ html.nb-brutal .section.side > div:not(.section__body):not(.section__header) { border: none !important; box-shadow: none !important; background: transparent !important; margin: 0 !important; padding: 0 !important; } /* Meta body under action menu: not a second card; subtle divider only */ html.nb-brutal .section.side > .section__body { border: none !important; box-shadow: none !important; background: transparent !important; margin: 0 !important; } html.nb-brutal .section.side > div + .section__body, html.nb-brutal .section.side > .menu + .section__body { border-top: 1px solid rgba(0, 0, 0, 0.1) !important; padding-top: 0.75rem !important; } html.nb-brutal .section.side .menu__link, html.nb-brutal .section.side .menu__item > a, html.nb-brutal .section.side button.menu__link { border: none !important; border-left: 3px solid transparent !important; box-shadow: none !important; } html.nb-brutal .section.side .menu__link:hover, html.nb-brutal .section.side .menu__item > a:hover, html.nb-brutal .section.side .menu__link.active, html.nb-brutal .section.side .menu__item > a.active, html.nb-brutal .section.side button.menu__link:hover { background: var(--nb-accent) !important; color: #000 !important; border-left-color: #000 !important; box-shadow: none !important; } html.nb-brutal .menu__link, html.nb-brutal .menu__item a { font-weight: 600 !important; color: #000 !important; border-radius: 0 !important; } html.nb-brutal .menu__link:hover, html.nb-brutal .menu__item a:hover, html.nb-brutal .menu__link.active, html.nb-brutal .menu__item a.active { background: var(--nb-accent) !important; color: #000 !important; } html.nb-brutal .menu__seperator { border-top: 2px solid #000 !important; } /* Side panel separators: light line; hide trailing bar that creates a white stripe */ html.nb-brutal .section.side .menu__seperator { border-top: 1px solid rgba(0, 0, 0, 0.12) !important; margin: 0.35rem 0 !important; height: 0 !important; background: transparent !important; box-shadow: none !important; } html.nb-brutal .section.side .menu > .menu__seperator:last-child { display: none !important; } /* ========== Tags / chips ========== */ html.nb-brutal .problem__tag, html.nb-brutal .problem__tag-link, html.nb-brutal .chip-list__item, html.nb-brutal .chip-list__item a, html.nb-brutal .contest-type-tag, html.nb-brutal .contest-tag-rated { display: inline-block; border: 2px solid #000 !important; border-radius: 0 !important; background: var(--nb-surface) !important; color: #000 !important; font-weight: 700 !important; box-shadow: none !important; text-decoration: none !important; padding: 0.15rem 0.5rem; } html.nb-brutal .contest-tag-rated, html.nb-brutal .problem__tag-link:hover, html.nb-brutal .chip-list__item a:hover { background: var(--nb-accent) !important; } html.nb-brutal .chip-list { gap: 0.35rem; } /* ========== Contest / training / homework list ========== */ html.nb-brutal .contest__title, html.nb-brutal .contest__title a, html.nb-brutal .training__title a, html.nb-brutal .homework__title a { font-family: var(--nb-font) !important; font-weight: 700 !important; color: #000 !important; text-decoration: none !important; } html.nb-brutal .contest__title a:hover, html.nb-brutal .training__title a:hover, html.nb-brutal .homework__title a:hover { text-decoration: underline !important; text-underline-offset: 3px; } html.nb-brutal .numbox, html.nb-brutal .contest__date.numbox, html.nb-brutal .homework__date.numbox, html.nb-brutal .training__participants.numbox, html.nb-brutal .nb-numbox { background: var(--nb-primary) !important; border: 3px solid #000 !important; border-radius: 0 !important; box-shadow: 3px 3px 0 0 #000; padding: 0.5rem 0.65rem !important; min-width: 4.25rem; text-align: center; color: #000 !important; } html.nb-brutal .numbox__num, html.nb-brutal .numbox .numbox__num { font-family: var(--nb-font) !important; font-weight: 800 !important; font-size: 2rem !important; color: #000 !important; line-height: 1 !important; } html.nb-brutal .numbox__text { font-weight: 700 !important; font-size: 0.7rem !important; text-transform: uppercase; color: #000 !important; } html.nb-brutal .contest__item.live .numbox, html.nb-brutal .section--contest.live { /* keep hard edges */ } html.nb-brutal .contest__item.live .numbox { background: var(--nb-secondary) !important; } html.nb-brutal .contest__item.ready .numbox { background: var(--nb-accent) !important; } html.nb-brutal .supplementary.list, html.nb-brutal .supplementary.list a, html.nb-brutal .supplementary.list li { color: #000 !important; font-weight: 600 !important; } html.nb-brutal .text-blue { color: #000 !important; } /* ========== Side panels (homepage) ========== */ html.nb-brutal .nb-hitokoto-body, html.nb-brutal .nb-hitokoto-body .typo-a, html.nb-brutal [name="hitokoto-local"] { font-weight: 700 !important; font-size: 1.05rem !important; color: #000 !important; line-height: 1.55; } html.nb-brutal .nb-recent-item { margin: 0 0 0.65rem !important; padding-bottom: 0.65rem; border-bottom: 2px solid #000; } html.nb-brutal .nb-recent-item:last-child { margin-bottom: 0 !important; padding-bottom: 0; border-bottom: 0; } html.nb-brutal .nb-recent-item a { color: #000 !important; font-weight: 700 !important; text-decoration: none !important; border-bottom: 2px solid transparent; } html.nb-brutal .nb-recent-item a:hover { border-bottom-color: #000; background: rgba(0,0,0,0.06); } html.nb-brutal .nb-tips-list { list-style: none !important; margin: 0 !important; padding: 0 !important; } /* Button chrome on the so the whole card is clickable */ html.nb-brutal .nb-tips-list .group-list__item { margin: 0 0 0.65rem !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; list-style: none !important; } html.nb-brutal .nb-tips-list .group-list__item:last-child { margin-bottom: 0 !important; } html.nb-brutal .nb-tips-list .nb-tip-link { display: block !important; box-sizing: border-box !important; width: 100% !important; margin: 0 !important; padding: 0.75rem 0.9rem !important; background: #fff !important; border: 3px solid #000 !important; box-shadow: 3px 3px 0 0 #000 !important; color: #000 !important; font-weight: 800 !important; font-size: 0.95rem !important; line-height: 1.35 !important; text-align: center !important; text-decoration: none !important; border-bottom: 3px solid #000 !important; transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease !important; cursor: pointer; } html.nb-brutal .nb-tips-list .nb-tip-link:hover, html.nb-brutal .nb-tips-list .nb-tip-link:focus { transform: translate(2px, 2px); box-shadow: none !important; background: var(--nb-accent) !important; color: #000 !important; text-decoration: none !important; outline: none !important; } html.nb-brutal .nb-tips-list .nb-tip-link:active { transform: translate(2px, 2px); box-shadow: none !important; } html.nb-brutal .group-list__item { font-weight: 600; } /* ========== Pager ========== */ html.nb-brutal .pager { margin: 0 !important; padding: 0.75rem 1.25rem 1rem !important; list-style: none; } html.nb-brutal .pager-bottom { border-top: 3px solid #000; background: var(--nb-surface); } html.nb-brutal .pager__item, html.nb-brutal a.pager__item { display: inline-block; font-weight: 800 !important; color: #000 !important; background: #fff; border: 3px solid #000 !important; border-radius: 0 !important; box-shadow: 3px 3px 0 0 #000; padding: 0.35rem 0.75rem; text-decoration: none !important; margin: 0 0.2rem; transition: transform 0.12s ease, box-shadow 0.12s ease; } html.nb-brutal .pager__item:hover, html.nb-brutal a.pager__item:hover, html.nb-brutal .nb-link-more:hover { transform: translate(2px, 2px); box-shadow: none; color: #000 !important; } html.nb-brutal .pager__item.current, html.nb-brutal a.pager__item.current { background: var(--nb-primary) !important; box-shadow: none; } html.nb-brutal .nb-link-more, html.nb-brutal .pager__item.next.link { display: inline-block; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 0.04em; color: #000 !important; background: var(--nb-accent); border: 3px solid #000; box-shadow: 3px 3px 0 0 #000; padding: 0.4rem 0.9rem; text-decoration: none !important; transition: transform 0.12s ease, box-shadow 0.12s ease; } /* ========== Tabs ========== */ html.nb-brutal .section__tab-header, html.nb-brutal .section__tab-header-item { border-radius: 0 !important; } html.nb-brutal .section__tab-header-item { border: 3px solid #000 !important; border-bottom: 0 !important; background: var(--nb-surface) !important; color: #000 !important; font-weight: 700 !important; margin-right: 4px; } html.nb-brutal .section__tab-header-item.selected, html.nb-brutal .section__tab-header-item:hover { background: var(--nb-accent) !important; box-shadow: none !important; } html.nb-brutal .section__tab-container { border-color: #000 !important; } /* ========== Dialogs / modals / signin ========== */ html.nb-brutal .dialog__content, html.nb-brutal .dialog.withBg .dialog__content, html.nb-brutal .modal, html.nb-brutal .notyf, html.nb-brutal .notification { border-radius: 0 !important; } /* Card chrome on the content panel, NOT the full-screen .dialog overlay */ html.nb-brutal .dialog__content, html.nb-brutal .dialog.withBg .dialog__content { border: 4px solid #000 !important; box-shadow: 8px 8px 0 0 #000 !important; background: #fff !important; } html.nb-brutal .dialog__body, html.nb-brutal .dialog__header { color: #000 !important; } /* ========== Footer ========== */ html.nb-brutal .footer { background: #fff !important; border-top: 4px solid #000 !important; color: #000 !important; margin-top: 1rem; } html.nb-brutal .footer a { color: #000 !important; font-weight: 600; } html.nb-brutal .footer__category h1, html.nb-brutal .footer__category__title { font-family: var(--nb-font) !important; font-weight: 800 !important; text-transform: uppercase; color: #000 !important; } html.nb-brutal .footer__extra-link { border-top: 3px solid #000; padding-top: 0.75rem; } html.nb-brutal .footer__extra-link-item, html.nb-brutal .footer__extra-link a { color: #000 !important; font-weight: 600; } /* ========== User chips ========== */ html.nb-brutal .user-profile-name, html.nb-brutal a.user-profile-name { color: #000 !important; font-weight: 700 !important; } /* ========== User profile: outer frame; content must stay inside when viewport shrinks ========== */ html.nb-brutal.page--user_detail .nb-profile-card.section, html.nb-brutal .page--user_detail .nb-profile-card, html.nb-brutal.page--user_detail .nb-profile-card.section { overflow: hidden !important; /* 框内裁切，禁止账号/正文飞出黑框 */ padding: 0 !important; margin-bottom: 1.25rem !important; max-width: 100% !important; box-sizing: border-box !important; min-width: 0 !important; } /* 顶栏资料区：flex + min-width:0，避免 table-cell 把长账号撑破 */ html.nb-brutal.page--user_detail .nb-profile-card .profile-header, html.nb-brutal .page--user_detail .nb-profile-card .profile-header { margin: 0 !important; border-bottom: 1px solid #d0d0d0 !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; overflow: hidden !important; } html.nb-brutal.page--user_detail .profile-header__content, html.nb-brutal .page--user_detail .profile-header__content { max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; overflow: hidden !important; } html.nb-brutal.page--user_detail .profile-header__content .media, html.nb-brutal .page--user_detail .profile-header__content .media { display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; gap: 1rem 1.25rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; padding: 0 !important; } html.nb-brutal.page--user_detail .profile-header__content .media__left, html.nb-brutal .page--user_detail .profile-header__content .media__left { display: block !important; flex: 0 0 auto !important; width: auto !important; max-width: 100% !important; padding-right: 0 !important; text-align: left !important; } html.nb-brutal.page--user_detail .profile-header__content .media__body, html.nb-brutal.page--user_detail .profile-header__main, html.nb-brutal .page--user_detail .profile-header__content .media__body, html.nb-brutal .page--user_detail .profile-header__main { display: block !important; flex: 1 1 12rem !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; /* 关键：否则 flex/table 子项不会收缩 */ margin-top: 0 !important; padding-left: 0 !important; padding-top: 0 !important; box-sizing: border-box !important; overflow: hidden !important; } /* 账号名 + 下方注册/登录等信息：随宽度换行，不许撑出框 */ html.nb-brutal.page--user_detail .profile-header__main h1, html.nb-brutal.page--user_detail .profile-header__main p, html.nb-brutal.page--user_detail .profile-header__main small, html.nb-brutal .page--user_detail .profile-header__main h1, html.nb-brutal .page--user_detail .profile-header__main p, html.nb-brutal .page--user_detail .profile-header__main small { max-width: 100% !important; min-width: 0 !important; height: auto !important; line-height: 1.4 !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: break-word !important; box-sizing: border-box !important; } html.nb-brutal.page--user_detail .profile-header__contact-bar, html.nb-brutal .page--user_detail .profile-header__contact-bar { position: relative !important; right: auto !important; top: auto !important; margin: 0.75rem 0 0 !important; text-align: left !important; max-width: 100% !important; flex-wrap: wrap !important; display: flex !important; gap: 0.5rem !important; } html.nb-brutal.page--user_detail .nb-profile-body, html.nb-brutal .page--user_detail .nb-profile-body { background: #fff !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; max-width: 100% !important; min-width: 0 !important; overflow: hidden !important; } /* Between the 4 blocks only — no extra lines inside each block */ html.nb-brutal.page--user_detail .nb-profile-block, html.nb-brutal .page--user_detail .nb-profile-block { display: block !important; margin: 0 !important; padding: 1.15rem 1.5rem 1.25rem !important; background: #fff !important; border: 0 !important; border-bottom: 1px solid #ddd !important; box-shadow: none !important; border-radius: 0 !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; overflow: hidden !important; } html.nb-brutal.page--user_detail .nb-profile-block:last-child, html.nb-brutal .page--user_detail .nb-profile-block:last-child { border-bottom: 0 !important; } html.nb-brutal.page--user_detail .nb-profile-block__title, html.nb-brutal .page--user_detail .nb-profile-block__title { display: block !important; margin: 0 0 0.7rem !important; padding: 0 !important; font-size: 1.15rem !important; font-weight: 600 !important; color: #888 !important; line-height: 1.35 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; text-transform: none !important; letter-spacing: normal !important; max-width: 100% !important; word-break: break-word !important; } html.nb-brutal.page--user_detail .nb-profile-block__content, html.nb-brutal .page--user_detail .nb-profile-block__content { display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; color: #333 !important; line-height: 1.6 !important; max-width: 100% !important; min-width: 0 !important; overflow-wrap: anywhere !important; word-break: break-word !important; box-sizing: border-box !important; } html.nb-brutal.page--user_detail .nb-profile-block__content a, html.nb-brutal .page--user_detail .nb-profile-block__content a { box-shadow: none !important; border: none !important; background: transparent !important; text-transform: none !important; word-break: break-word !important; overflow-wrap: anywhere !important; } html.nb-brutal.page--user_detail .nb-profile-block__content ul, html.nb-brutal .page--user_detail .nb-profile-block__content ul { margin: 0.25rem 0 0 !important; padding-left: 1.25rem !important; max-width: 100% !important; box-sizing: border-box !important; } html.nb-brutal.page--user_detail .nb-profile-block__content li, html.nb-brutal .page--user_detail .nb-profile-block__content li { margin: 0.3rem 0 !important; max-width: 100% !important; word-break: break-word !important; overflow-wrap: anywhere !important; } /* Accepted / starred lists: wrap inside card; long titles can break */ html.nb-brutal.page--user_detail .nb-profile-plist, html.nb-brutal .page--user_detail .nb-profile-plist { overflow: hidden !important; max-height: none !important; max-width: 100% !important; } html.nb-brutal.page--user_detail .nb-profile-block__content .row, html.nb-brutal.page--user_detail .nb-profile-block__content .columns { max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } html.nb-brutal.page--user_detail .nb-profile-plist__list, html.nb-brutal .page--user_detail .nb-profile-plist__list { display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; gap: 0.45rem 1rem !important; list-style: none !important; margin: 0 !important; padding: 0 !important; max-width: 100% !important; min-width: 0 !important; } html.nb-brutal.page--user_detail .nb-profile-plist__item, html.nb-brutal .page--user_detail .nb-profile-plist__item { display: inline-block !important; flex: 0 1 auto !important; margin: 0 !important; padding: 0 !important; line-height: 1.5 !important; white-space: normal !important; max-width: 100% !important; min-width: 0 !important; overflow-wrap: anywhere !important; word-break: break-word !important; } html.nb-brutal.page--user_detail .nb-profile-plist__item a, html.nb-brutal .page--user_detail .nb-profile-plist__item a { white-space: normal !important; word-break: break-word !important; overflow-wrap: anywhere !important; } /* 主栏列也要允许收缩 */ html.nb-brutal.page--user_detail .medium-9.columns, html.nb-brutal.page--user_detail .medium-3.columns, html.nb-brutal .page--user_detail .medium-9.columns, html.nb-brutal .page--user_detail .medium-3.columns { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; } /* * Profile sidebar stats — 大方框内纯文本（标签 + 数值），无内层卡片。 * page--user_detail 在 上：html.nb-brutal.page--user_detail / #nb-user-stat。 */ html.nb-brutal.page--user_detail .nb-user-stat-section.section, html.nb-brutal .nb-user-stat-section.section { overflow: hidden !important; padding: 0 !important; } html.nb-brutal.page--user_detail .nb-user-stat-section > .section__body, html.nb-brutal .nb-user-stat-section > .section__body { padding: 0 !important; margin: 0 !important; } html.nb-brutal #nb-user-stat, html.nb-brutal.page--user_detail .nb-user-stat { display: flex !important; flex-direction: column !important; gap: 0.5rem !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0.75rem !important; background: transparent !important; border: 0 !important; box-shadow: none !important; box-sizing: border-box !important; font-family: var(--nb-font) !important; } html.nb-brutal #nb-user-stat .nb-user-stat__row, html.nb-brutal.page--user_detail .nb-user-stat__row { display: grid !important; grid-template-columns: minmax(3.5rem, auto) minmax(0, 1fr) !important; align-items: center !important; column-gap: 0.75rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; margin: 0 !important; padding: 0.7rem 0.85rem !important; border: 0 !important; border-bottom: 1px solid #d0d0d0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html.nb-brutal #nb-user-stat .nb-user-stat__row:last-child, html.nb-brutal.page--user_detail .nb-user-stat__row:last-child { border-bottom: 0 !important; } html.nb-brutal #nb-user-stat .nb-user-stat__label, html.nb-brutal.page--user_detail .nb-user-stat__label { justify-self: start !important; max-width: 100% !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; font-family: inherit !important; font-size: 1.05rem !important; font-weight: 600 !important; color: #000 !important; letter-spacing: 0.01em; line-height: 1.35 !important; white-space: nowrap !important; text-transform: none !important; } html.nb-brutal #nb-user-stat .nb-user-stat__val, html.nb-brutal.page--user_detail .nb-user-stat__val { justify-self: stretch !important; min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; text-align: right !important; } html.nb-brutal #nb-user-stat .nb-user-stat__num, html.nb-brutal.page--user_detail .nb-user-stat__num { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-family: inherit !important; font-size: 1.1rem !important; font-weight: 700 !important; line-height: 1.3 !important; color: #000 !important; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.01em; } html.nb-brutal .user-profile-badge, html.nb-brutal .badge--mod { border: 2px solid #000 !important; border-radius: 0 !important; font-weight: 800 !important; } /* ========== Record status colors — keep readable, hard edges ========== */ html.nb-brutal .record-status--text, html.nb-brutal .record-status--icon { font-weight: 700 !important; } /* ========== Code / editor — preserve usability ========== */ html.nb-brutal pre, html.nb-brutal code, html.nb-brutal .hljs, html.nb-brutal .monaco-editor, html.nb-brutal .CodeMirror { border-radius: 0 !important; } html.nb-brutal pre, html.nb-brutal .typo pre { border: 3px solid #000 !important; box-shadow: 3px 3px 0 0 #000; } /* ========== Typo / markdown content ========== */ html.nb-brutal .typo, html.nb-brutal .typo h1, html.nb-brutal .typo h2, html.nb-brutal .typo h3 { color: #000 !important; } html.nb-brutal .typo h1, html.nb-brutal .typo h2, html.nb-brutal .typo h3 { font-family: var(--nb-font) !important; font-weight: 800 !important; } html.nb-brutal .typo blockquote { border-left: 4px solid #000 !important; background: var(--nb-bg) !important; border-radius: 0 !important; } html.nb-brutal .typo table th, html.nb-brutal .typo table td { border: 2px solid #000 !important; } /* ========== Hints / alerts ========== */ html.nb-brutal .typo.hint, html.nb-brutal blockquote.note, html.nb-brutal blockquote.warn, html.nb-brutal blockquote.error { border: 3px solid #000 !important; border-radius: 0 !important; box-shadow: 3px 3px 0 0 #000; } html.nb-brutal blockquote.warn { background: var(--nb-accent) !important; } html.nb-brutal blockquote.error { background: var(--nb-primary) !important; } html.nb-brutal blockquote.note { background: var(--nb-muted) !important; } /* ========== Progress / training status ========== */ html.nb-brutal .training-status--text { font-weight: 700 !important; color: #000 !important; } /* ========== Calendar / datepicker (if any) ========== */ html.nb-brutal .datepicker, html.nb-brutal .calendar { border: 3px solid #000 !important; border-radius: 0 !important; box-shadow: 4px 4px 0 0 #000 !important; } /* ========== NProgress ========== */ html.nb-brutal #nprogress .bar { background: var(--nb-primary) !important; height: 4px !important; } html.nb-brutal #nprogress .peg { box-shadow: none !important; } /* ========== Carousel (homepage) ========== */ html.nb-brutal .homepage-carousel, html.nb-brutal .homepage-carousel.section, html.nb-brutal .section.homepage-carousel { background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; margin-bottom: 1.5rem !important; padding: 0 !important; } html.nb-brutal .homepage-carousel__viewport, html.nb-brutal .homepage-carousel__stage { border: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible !important; } html.nb-brutal .homepage-carousel__card { border: 3px solid #000 !important; border-radius: 0 !important; box-shadow: 6px 6px 0 0 #000 !important; background: #fff !important; overflow: hidden !important; } html.nb-brutal .homepage-carousel__slide.is-active .homepage-carousel__card { box-shadow: 8px 8px 0 0 #000 !important; } html.nb-brutal .homepage-carousel__caption { background: #000 !important; color: #fff !important; font-family: var(--nb-font) !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.03em; padding: 10px 12px !important; border-top: 3px solid #000; } html.nb-brutal .homepage-carousel__btn { width: 44px !important; height: 44px !important; border: 3px solid #000 !important; border-radius: 0 !important; background: var(--nb-accent) !important; color: #000 !important; box-shadow: 3px 3px 0 0 #000 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; opacity: 1 !important; font-weight: 800; transition: transform 0.12s ease, box-shadow 0.12s ease !important; } html.nb-brutal .homepage-carousel__btn:hover { background: var(--nb-primary) !important; transform: translateY(-50%) translate(2px, 2px) !important; box-shadow: none !important; border-color: #000 !important; } html.nb-brutal .homepage-carousel__dots { border: 3px solid #000 !important; border-radius: 0 !important; background: #fff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: 3px 3px 0 0 #000; padding: 6px 10px !important; gap: 6px !important; } html.nb-brutal .homepage-carousel__dot { width: 10px !important; height: 10px !important; border: 2px solid #000 !important; border-radius: 0 !important; background: #fff !important; box-shadow: none !important; } html.nb-brutal .homepage-carousel__dot.is-active { width: 22px !important; border-radius: 0 !important; background: var(--nb-primary) !important; box-shadow: none !important; } html.nb-brutal .homepage-carousel__dot:hover { background: var(--nb-secondary) !important; } body .carousel-lightbox .carousel-lightbox__panel, body .carousel-lightbox__dialog, body .carousel-lightbox__card { border: 4px solid #000 !important; border-radius: 0 !important; box-shadow: 8px 8px 0 0 #000 !important; } /* ========== Scratchpad / immersive contest — light hard frame ========== */ html.nb-brutal .scratchpad, html.nb-brutal .scratchpad__panel { border-color: #000 !important; } /* ========== Star / vote icons ========== */ html.nb-brutal .star, html.nb-brutal .icon { /* keep icons legible on cream */ } /* ========== Mantine / React islands (if any) ========== */ html.nb-brutal [data-mantine-color-scheme] { --mantine-radius-default: 0px; } /* ========== Mobile (tablet+) ========== */ @media (max-width: 768px) { html.nb-brutal .section:not(.homepage-carousel) { box-shadow: 3px 3px 0 0 #000 !important; margin-left: 0 !important; margin-right: 0 !important; } html.nb-brutal h1.section__title { font-size: 1.15rem !important; } html.nb-brutal .numbox__num { font-size: 1.5rem !important; } html.nb-brutal .homepage-carousel__viewport { border: 0 !important; background: transparent !important; box-shadow: none !important; } html.nb-brutal .button, html.nb-brutal a.button { box-shadow: 3px 3px 0 0 #000 !important; } } /* Desktop large: keep same nav-aware top padding (don't use theme's 4rem alone) */ @media (min-width: 1000px) { html.nb-brutal .main { padding-top: calc(var(--nb-nav-height) + var(--nb-nav-gap) + 4px) !important; } } /* ========== Generic radius kill ========== */ html.nb-brutal .section, html.nb-brutal .menu, html.nb-brutal .dropdown-target, html.nb-brutal .button, html.nb-brutal .textbox, html.nb-brutal .dialog__content, html.nb-brutal .pager__item { border-radius: 0 !important; } /* ========== Contest main: attended contests side panel ========== */ html.nb-brutal .nb-attended-contests__list { list-style: none !important; margin: 0 !important; padding: 0 !important; } html.nb-brutal .nb-attended-contests__item { margin: 0 0 0.65rem !important; padding: 0 0 0.55rem !important; border-bottom: 2px solid #000 !important; } html.nb-brutal .nb-attended-contests__item:last-child { border-bottom: 0 !important; margin-bottom: 0 !important; padding-bottom: 0 !important; } html.nb-brutal .nb-attended-contests__link { display: block !important; color: #000 !important; font-weight: 800 !important; font-size: 0.9rem !important; line-height: 1.35 !important; text-decoration: none !important; word-break: break-word !important; } html.nb-brutal .nb-attended-contests__link:hover { text-decoration: underline !important; } html.nb-brutal .nb-attended-contests__meta { display: flex !important; flex-wrap: wrap !important; gap: 0.25rem 0.6rem !important; margin-top: 0.2rem !important; font-size: 0.75rem !important; font-weight: 600 !important; color: #444 !important; } html.nb-brutal .nb-attended-contests__empty { margin: 0 !important; font-weight: 600 !important; font-size: 0.9rem !important; color: #333 !important; line-height: 1.45 !important; } html.nb-brutal .nb-attended-contests__empty a { color: #000 !important; font-weight: 800 !important; text-decoration: underline !important; } /* ============================================================ * Training detail page ONLY (.page--training_detail) * - Outer section frames: keep full site black border (no lighten) * - Kill nested double-frames (.menu inside .section.side) * - Same content max-width as other pages (side margins) * - User picker under task list (search + dropdown) * - No sticky/fixed leftovers * Does not affect 题库 / 比赛 / 首页 or global chrome. * ============================================================ */ /* ---- Outer frames: restore site-wide section chrome ---- */ html.nb-brutal.page--training_detail .section:not(.homepage-carousel), html.nb-brutal.page--training_detail .section.side { border: 4px solid #000 !important; box-shadow: var(--nb-shadow, 4px 4px 0 0 #000) !important; background: #fff !important; } /* * Nested “doll frames”: global `.menu` also has 3px black border + shadow. * Inside side panels that already have a .section frame, strip the inner menu * chrome so each block has exactly one outer border. */ html.nb-brutal.page--training_detail .section.side .menu, html.nb-brutal.page--training_detail .section.side .dropdown-target.menu, html.nb-brutal.page--training_detail .section.side ol.menu, html.nb-brutal.page--training_detail .section.side ul.menu, html.nb-brutal.page--training_detail .training-detail__col--side .menu, html.nb-brutal.page--training_detail #menu-item-training_detail > ul, html.nb-brutal.page--training_detail #menu-item-training_detail .menu { border: none !important; box-shadow: none !important; background: transparent !important; margin: 0 !important; } /* Menu links: no extra boxes; only highlight on hover/active */ html.nb-brutal.page--training_detail .section.side .menu__link, html.nb-brutal.page--training_detail .section.side .menu__item > a, html.nb-brutal.page--training_detail .section.side button.menu__link { border: none !important; border-left: 3px solid transparent !important; box-shadow: none !important; background: transparent !important; } html.nb-brutal.page--training_detail .section.side .menu__link:hover, html.nb-brutal.page--training_detail .section.side .menu__item > a:hover, html.nb-brutal.page--training_detail .section.side .menu__link.active, html.nb-brutal.page--training_detail .section.side .menu__item > a.active { background: var(--nb-accent, #E8D89A) !important; border-left-color: #000 !important; color: #000 !important; box-shadow: none !important; } /* Separator inside side menus: light line, not another hard bar */ html.nb-brutal.page--training_detail .section.side .menu__seperator { border-top: 1px solid rgba(0, 0, 0, 0.12) !important; margin: 0.35rem 0 !important; height: 0 !important; background: transparent !important; box-shadow: none !important; } /* Hide trailing separator that leaves a blank band under action links */ html.nb-brutal.page--training_detail .section.side .menu > .menu__seperator:last-child { display: none !important; } /* * Main column: keep full site borders inside (tables, chapter headers). * Do NOT lighten — match global neo-brutal table/header chrome. */ html.nb-brutal.page--training_detail .training-detail__col--main .data-table th, html.nb-brutal.page--training_detail .training-detail__col--main .data-table td, html.nb-brutal.page--training_detail .training-detail__col--main table.data-table th, html.nb-brutal.page--training_detail .training-detail__col--main table.data-table td, html.nb-brutal.page--training_detail .training-detail__col--main .training__problems th, html.nb-brutal.page--training_detail .training-detail__col--main .training__problems td { border: 2px solid #000 !important; } html.nb-brutal.page--training_detail .training-detail__col--main .section__header, html.nb-brutal.page--training_detail .training-detail__col--main .training__section > .section__header { border-bottom: 4px solid #000 !important; } /* Kill sticky-kit leftovers (position:fixed / is_stuck) on this page */ html.nb-brutal.page--training_detail [data-sticky], html.nb-brutal.page--training_detail [data-sticky-parent], html.nb-brutal.page--training_detail .is_stuck, html.nb-brutal.page--training_detail .section__table-header, html.nb-brutal.page--training_detail .section__table-header.is_stuck, html.nb-brutal.page--training_detail .section__table-header.is_stuck thead, html.nb-brutal.page--training_detail .section__table-header.is_stuck th, html.nb-brutal.page--training_detail .training__section .section__header, html.nb-brutal.page--training_detail .training-detail__col--side { position: static !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; } /* sticky-kit often injects fixed pixel widths — free only stuck/header leftovers */ html.nb-brutal.page--training_detail .is_stuck, html.nb-brutal.page--training_detail .section__table-header { width: auto !important; max-width: 100% !important; margin-top: 0 !important; } /* Side panels: fill their grid column, never lock to sticky-kit px widths */ html.nb-brutal.page--training_detail .training-detail__col--side .section.side { width: 100% !important; max-width: 100% !important; margin-top: 0 !important; box-sizing: border-box !important; } /* Hide sticky-kit spacer placeholders if any remain */ html.nb-brutal.page--training_detail .section__table-container > div[style*="height"]:empty, html.nb-brutal.page--training_detail [style*="position: static"][style*="display: block"][style*="height"][style*="width"]:empty { display: none !important; height: 0 !important; } /* ---- Content width: match site grid (980 / 1200), not full-bleed ---- */ html.nb-brutal.page--training_detail .main > .row.training-detail__row, html.nb-brutal.page--training_detail .main > .row { max-width: 980px !important; width: 100%; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box; padding-left: 0.5rem; padding-right: 0.5rem; } @media (min-width: 1280px) { html.nb-brutal.page--training_detail .main > .row.training-detail__row, html.nb-brutal.page--training_detail .main > .row { max-width: 1200px !important; } } html.nb-brutal.page--training_detail .training-detail__col, html.nb-brutal.page--training_detail .main > .row > .columns { box-sizing: border-box !important; min-width: 0 !important; max-width: 100%; } html.nb-brutal.page--training_detail .training-detail__col--side .section.side { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow-wrap: anywhere; word-break: break-word; } html.nb-brutal.page--training_detail .training-detail__col--side .menu__link, html.nb-brutal.page--training_detail .training-detail__col--side .section__body, html.nb-brutal.page--training_detail .training-detail__col--side dl, html.nb-brutal.page--training_detail .training-detail__col--side dd, html.nb-brutal.page--training_detail .training-detail__col--side dt { overflow-wrap: anywhere; word-break: break-word; max-width: 100%; } /* Task list: stay in document flow; scroll inside if long, never sticky */ html.nb-brutal.page--training_detail #menu-item-training_detail ul { max-height: min(50vh, 28rem); overflow-y: auto; overflow-x: hidden; position: static !important; } /* Meta / task panels: single outer frame, flat interior */ html.nb-brutal.page--training_detail .training-detail__meta > .menu, html.nb-brutal.page--training_detail .training-detail__tasks > .menu { border: none !important; box-shadow: none !important; background: transparent !important; } html.nb-brutal.page--training_detail .training-detail__meta-body { border: none !important; box-shadow: none !important; background: transparent !important; border-top: 1px solid rgba(0, 0, 0, 0.1) !important; margin: 0 !important; padding-top: 0.75rem !important; } /* ---- User picker: search + dropdown (under task list) ---- */ html.nb-brutal.page--training_detail .training-detail__user-picker .section__header { padding-top: 0.75rem; padding-bottom: 0.35rem; border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important; } html.nb-brutal.page--training_detail .td-user-search { position: relative; width: 100%; } html.nb-brutal.page--training_detail .td-user-search__group { width: 100% !important; max-width: 100% !important; margin-bottom: 0.5rem !important; box-sizing: border-box !important; border: 1px solid rgba(0, 0, 0, 0.18) !important; border-radius: 0 !important; background: #fff !important; box-shadow: none !important; } html.nb-brutal.page--training_detail .td-user-search__field { position: relative; width: 100%; } /* * Search input: NO extra black frame — only the outer「查看用户」section * keeps a single black border. Input uses a light edge so it stays usable. */ html.nb-brutal.page--training_detail .td-user-search__input, html.nb-brutal.page--training_detail input.td-user-search__input.textbox { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; border: 1px solid rgba(0, 0, 0, 0.18) !important; box-shadow: none !important; border-radius: 0 !important; background: #fff !important; color: #000 !important; font-weight: 600 !important; } html.nb-brutal.page--training_detail .td-user-search__input:focus, html.nb-brutal.page--training_detail input.td-user-search__input.textbox:focus { border: 1px solid rgba(0, 0, 0, 0.35) !important; box-shadow: none !important; outline: none !important; } html.nb-brutal.page--training_detail .td-user-search__group { border: 1px solid rgba(0, 0, 0, 0.18) !important; box-shadow: none !important; } html.nb-brutal.page--training_detail .td-user-search__dropdown { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40; margin: 0; padding: 0.25rem 0; list-style: none; max-height: min(40vh, 16rem); overflow-y: auto; overflow-x: hidden; background: #fff !important; border: 1px solid rgba(0, 0, 0, 0.18) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important; border-radius: 0 !important; box-sizing: border-box; } html.nb-brutal.page--training_detail .td-user-search__dropdown.is-open, html.nb-brutal.page--training_detail .td-user-search__dropdown:not([hidden]) { display: block; } html.nb-brutal.page--training_detail .td-user-search__item { margin: 0; padding: 0; } html.nb-brutal.page--training_detail .td-user-search__item[hidden] { display: none !important; } html.nb-brutal.page--training_detail .td-user-search__link { display: flex !important; align-items: center; gap: 0.35rem; padding: 0.4rem 0.65rem !important; width: 100%; box-sizing: border-box; color: #000 !important; text-decoration: none !important; border: none !important; box-shadow: none !important; background: transparent !important; } html.nb-brutal.page--training_detail .td-user-search__link:hover, html.nb-brutal.page--training_detail .td-user-search__link:focus { background: var(--nb-muted, #B5D9C8) !important; } html.nb-brutal.page--training_detail .td-user-search__link.active { background: var(--nb-primary, #E8A090) !important; font-weight: 700; } html.nb-brutal.page--training_detail .td-user-search__empty { padding: 0.55rem 0.65rem; color: #666; font-size: 0.85rem; font-weight: 600; } html.nb-brutal.page--training_detail .td-user-search__empty[hidden] { display: none !important; } /* ---- Problem list table: stable columns on width change ---- */ html.nb-brutal.page--training_detail .training__problems { width: 100%; max-width: 100%; overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; box-sizing: border-box; } html.nb-brutal.page--training_detail .training__problems .data-table, html.nb-brutal.page--training_detail .training__problems-table, html.nb-brutal.page--training_detail .training__problems .section__table-header { width: 100% !important; min-width: 36rem; /* status + name + tried + ac + difficulty */ table-layout: fixed !important; border-collapse: collapse !important; box-sizing: border-box !important; } /* Fixed-ish col widths; name takes remaining space */ html.nb-brutal.page--training_detail .training__problems .col--status { width: 8.5rem !important; max-width: 8.5rem !important; } html.nb-brutal.page--training_detail .training__problems .col--status.col--status--sm { width: 5.25rem !important; max-width: 5.25rem !important; } html.nb-brutal.page--training_detail .training__problems .col--tried, html.nb-brutal.page--training_detail .training__problems .col--ac, html.nb-brutal.page--training_detail .training__problems .col--difficulty { width: 4.25rem !important; max-width: 4.25rem !important; text-align: center !important; white-space: nowrap !important; } html.nb-brutal.page--training_detail .training__problems .col--name, html.nb-brutal.page--training_detail .training__problems .col--problem-name { width: auto !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html.nb-brutal.page--training_detail .training__problems th, html.nb-brutal.page--training_detail .training__problems td { box-sizing: border-box !important; vertical-align: middle !important; } /* Match section body horizontal padding for first/last cells */ html.nb-brutal.page--training_detail .training__problems .data-table td:first-child, html.nb-brutal.page--training_detail .training__problems .data-table th:first-child { padding-left: 1.25rem !important; } html.nb-brutal.page--training_detail .training__problems .data-table td:last-child, html.nb-brutal.page--training_detail .training__problems .data-table th:last-child { padding-right: 1.25rem !important; } /* Chapter title: normal document flow, never sticky */ html.nb-brutal.page--training_detail .training__section > .section__header { position: static !important; top: auto !important; z-index: auto !important; } /* Mobile: keep existing hide of status/tried/difficulty; table min-width can shrink */ @media (max-width: 600px) { html.nb-brutal.page--training_detail .training__problems .data-table, html.nb-brutal.page--training_detail .training__problems-table { min-width: 0 !important; } html.nb-brutal.page--training_detail .training__problems .col--status, html.nb-brutal.page--training_detail .training__problems .col--tried, html.nb-brutal.page--training_detail .training__problems .col--difficulty { display: none !important; } html.nb-brutal.page--training_detail .training__problems .col--ac { width: 4.5rem !important; max-width: 4.5rem !important; } } /* ============================================================ * Contest list page ONLY (/contest → page--contest_main) * Search bar (filter-form) layout. * * Empty filter results (IOI / Ledo / Strict…) use longer titles and * long selected