/* ========================================================================== SoRS "Clean" theme — front-end only. Loaded exclusively by templates/base.html.twig, never by base-admin.html.twig or the Sonata admin, so none of this touches either admin surface. ========================================================================== */ :root { --sors-bg: #F6F7FB; --sors-surface: #FFFFFF; --sors-border: #E5E7EB; --sors-border-strong: #D8DCE3; --sors-text: #12151A; --sors-text-muted: #6B7280; --sors-text-faint: #9AA1AC; --sors-primary: #4C6EF5; --sors-primary-hover: #3B5BDB; --sors-primary-light: #EEF1FE; --sors-success: #2F9E44; --sors-success-bg: #EBFBEE; --sors-danger: #E03131; --sors-danger-bg: #FFF0F0; --sors-radius: 10px; --sors-radius-sm: 6px; --sors-shadow-sm: 0 1px 2px rgba(16, 24, 40, .04); --sors-shadow: 0 4px 16px rgba(16, 24, 40, .06); --sors-sidebar-width: 250px; --sors-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* Dark mode — toggled via data-theme="dark" on (see sidebar.js). Same variable names throughout, so every component that already reads them (which is nearly everything below) flips automatically. */ :root[data-theme="dark"] { --sors-bg: #0F1115; --sors-surface: #171A21; --sors-border: #262B36; --sors-border-strong: #333A48; --sors-text: #E7E9EE; --sors-text-muted: #9BA3B4; --sors-text-faint: #6B7385; --sors-primary: #5B7CFA; --sors-primary-hover: #7C97FB; --sors-primary-light: rgba(91, 124, 250, .18); --sors-success: #3FBF63; --sors-success-bg: rgba(63, 191, 99, .16); --sors-danger: #F1594F; --sors-danger-bg: rgba(241, 89, 79, .16); --sors-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35); --sors-shadow: 0 4px 16px rgba(0, 0, 0, .45); } /* Base ========================================================================== */ html { overflow-x: hidden; } body { background: var(--sors-bg); color: var(--sors-text); font-family: var(--sors-font); overflow-x: hidden; max-width: 100vw; } .sors-main a, .sors-sidebar a { color: var(--sors-primary); } .sors-main a:hover { color: var(--sors-primary-hover); } .sors-main h1, .sors-main h2, .sors-main h3, .sors-main h4, .sors-main h5, .sors-main h6 { font-family: var(--sors-font); font-weight: 700; letter-spacing: -0.01em; color: var(--sors-text); } /* Shell layout ========================================================================== */ .sors-shell { min-height: 100vh; } /* Sidebar ========================================================================== */ .sors-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sors-sidebar-width); background: var(--sors-surface); border-right: 1px solid var(--sors-border); display: flex; flex-direction: column; z-index: 1030; transition: transform .2s ease; } .sors-sidebar-brand { display: flex; align-items: center; gap: .5rem; padding: 1.25rem 1.25rem 1rem; border-bottom: 1px solid var(--sors-border); flex-shrink: 0; overflow: hidden; } .sors-sidebar-brand img { max-height: 34px; max-width: 130px; width: auto; height: auto; object-fit: contain; } .sors-sidebar-close { display: none; margin-left: auto; background: none; border: 0; color: var(--sors-text-muted); font-size: 1.1rem; } .sors-nav { flex: 1 1 auto; overflow-y: auto; padding: 1rem .75rem; display: flex; flex-direction: column; gap: .125rem; } .sors-nav-link { display: flex; align-items: center; gap: .65rem; padding: .55rem .75rem; border-radius: var(--sors-radius-sm); color: var(--sors-text-muted) !important; font-size: .9rem; font-weight: 500; text-decoration: none !important; white-space: nowrap; } button.sors-nav-link { width: 100%; border: none; background: none; text-align: left; cursor: pointer; font-family: var(--sors-font); } .sors-nav-link i { width: 18px; text-align: center; font-size: .85rem; color: var(--sors-text-faint); } .sors-nav-link:hover { background: var(--sors-bg); color: var(--sors-text) !important; } .sors-nav-link.active { background: var(--sors-primary-light); color: var(--sors-primary) !important; font-weight: 600; } .sors-nav-link.active i { color: var(--sors-primary); } .sors-nav-divider { height: 1px; background: var(--sors-border); margin: .75rem .25rem; flex-shrink: 0; } .sors-nav-group-label { padding: .5rem .75rem .25rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--sors-text-faint); } .sors-sidebar-footer { padding: 1rem .75rem 1.25rem; border-top: 1px solid var(--sors-border); flex-shrink: 0; } /* Mobile top bar ========================================================================== */ .sors-topbar { display: none; align-items: center; gap: .75rem; padding: .75rem 1rem; background: var(--sors-surface); border-bottom: 1px solid var(--sors-border); position: sticky; top: 0; z-index: 1020; } .sors-topbar-toggle { background: none; border: 1px solid var(--sors-border); border-radius: var(--sors-radius-sm); width: 36px; height: 36px; color: var(--sors-text); } .sors-topbar img { max-height: 26px; } .sors-overlay { display: none; position: fixed; inset: 0; background: rgba(15, 17, 21, .35); z-index: 1025; } /* Content ========================================================================== */ .sors-content { margin-left: var(--sors-sidebar-width); width: auto; min-height: 100vh; display: flex; flex-direction: column; box-sizing: border-box; } .sors-main { flex: 1 1 auto; width: 100%; padding: 2rem 2.5rem 3rem; box-sizing: border-box; } .sors-panel { background: var(--sors-surface); border: 1px solid var(--sors-border); border-top: 3px solid var(--sors-primary); border-radius: var(--sors-radius); box-shadow: var(--sors-shadow-sm); padding: 2rem 2.5rem; } /* The panel spans the full content width, but its content is kept to a readable centered column instead of stretching edge-to-edge. */ .sors-content-col { max-width: 1000px; margin: 0 auto; } /* Bootstrap's .jumbotron ships its own grey background/padding, which nested inside .sors-panel reads as a redundant "card within a card". Neutralize it so page content sits flush inside the panel instead. */ .sors-main .jumbotron { background: transparent; padding: 0; margin-bottom: 0; } /* Footer ========================================================================== */ .sors-footer { border-top: 1px solid var(--sors-border); padding: 1.5rem 2.5rem; color: var(--sors-text-faint); font-size: .85rem; width: 100%; box-sizing: border-box; } .sors-footer a { color: var(--sors-text-muted); } .sors-footer-links { margin-top: .35rem; } .sors-footer-sep { margin: 0 .5rem; color: var(--sors-border-strong); } /* Cards, badges, buttons, tables — applied within .sors-main only, so this never reaches Sonata admin or the AdminLTE dashboard (different stylesheet entirely, see header comment). */ .sors-main .card { background: var(--sors-surface); color: var(--sors-text); border: 1px solid var(--sors-border); border-radius: var(--sors-radius); box-shadow: var(--sors-shadow-sm); overflow: hidden; } .sors-main .card-body { overflow-x: auto; } .sors-main .card-header { background: var(--sors-bg); border-bottom: 1px solid var(--sors-border); font-weight: 600; color: var(--sors-text); } .sors-main .badge { font-weight: 600; border-radius: 999px; padding: .35em .7em; } .sors-main .badge-success, .sors-main .text-success { color: var(--sors-success) !important; } .sors-main .badge-success { background: var(--sors-success-bg); } .sors-main .badge-danger, .sors-main .text-danger { color: var(--sors-danger) !important; } .sors-main .badge-danger { background: var(--sors-danger-bg); } .sors-main .badge-primary { color: #fff; background: var(--sors-primary); } .sors-main .badge-secondary { color: var(--sors-text-muted); background: var(--sors-bg); } .sors-main a.badge-primary:hover { background: var(--sors-primary-hover); } .sors-main .text-muted { color: var(--sors-text-faint) !important; } .sors-main .btn { border-radius: var(--sors-radius-sm); font-weight: 600; font-size: .9rem; } .sors-main .btn-primary { background: var(--sors-primary); border-color: var(--sors-primary); color: #fff !important; } .sors-main .btn-primary:hover { background: var(--sors-primary-hover); border-color: var(--sors-primary-hover); color: #fff !important; } .sors-main .btn-outline-primary { color: var(--sors-primary) !important; border-color: var(--sors-border-strong); } .sors-main .btn-outline-primary:hover { background: var(--sors-primary-light); border-color: var(--sors-primary); color: var(--sors-primary-hover) !important; } .sors-main .btn-outline-danger { color: var(--sors-danger) !important; border-color: var(--sors-border-strong); } .sors-main .btn-outline-danger:hover { background: var(--sors-danger-bg); border-color: var(--sors-danger); color: var(--sors-danger) !important; } .sors-main .btn-danger { background: var(--sors-danger); border-color: var(--sors-danger); color: #fff !important; } .sors-main .btn-danger:hover { background: var(--sors-danger); border-color: var(--sors-danger); color: #fff !important; opacity: .9; } .sors-main .btn-secondary { background: var(--sors-bg); border-color: var(--sors-border-strong); color: var(--sors-text-faint); } .sors-main .btn-secondary:hover { background: var(--sors-bg); border-color: var(--sors-border-strong); color: var(--sors-text-faint); } .sors-main .alert { border: 1px solid var(--sors-border); border-radius: var(--sors-radius-sm); font-size: .9rem; } .sors-main .alert-success { background: var(--sors-success-bg); border-color: var(--sors-success-bg); color: var(--sors-success); } .sors-main .alert-danger { background: var(--sors-danger-bg); border-color: var(--sors-danger-bg); color: var(--sors-danger); } .sors-main .alert-secondary, .sors-main .alert-info { background: var(--sors-bg); border-color: var(--sors-border); color: var(--sors-text-muted); } .sors-main .table { color: var(--sors-text); } .sors-main .table th { text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; color: var(--sors-text-faint); font-weight: 700; border-bottom-width: 1px; border-color: var(--sors-border); } .sors-main .table td { border-color: var(--sors-border); vertical-align: middle; } .sors-main .table-hover tbody tr:hover, .sors-main .table-hover tbody tr:hover td, .sors-main .table-hover tbody tr:hover th { color: var(--sors-text) !important; background-color: var(--sors-bg); } .sors-main .pagination { margin-top: 1.5rem; margin-bottom: 0; justify-content: center; } .sors-main .page-link { background: var(--sors-surface); color: var(--sors-text-muted); border-color: var(--sors-border); border-radius: var(--sors-radius-sm); margin: 0 .15rem; } .sors-main .page-link:hover { background: var(--sors-bg); color: var(--sors-text); } .sors-main .page-item.active .page-link { background: var(--sors-primary); border-color: var(--sors-primary); color: #fff; } .sors-main .page-item.disabled .page-link { background: var(--sors-surface); border-color: var(--sors-border); color: var(--sors-text-faint); } /* Page header — title + optional action (e.g. a search form) on one row */ .sors-page-header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; } .sors-page-header h1 { font-size: 1.6rem; margin-bottom: .25rem; } .sors-page-title .badge { font-size: 50%; vertical-align: middle; } .sors-page-subtitle { color: var(--sors-text-muted); font-size: .9rem; margin: 0; } .sors-search-form { display: flex; gap: .5rem; flex-wrap: wrap; } .sors-search-form .form-control { width: 220px; } /* Rank / empty state */ .sors-rank img { vertical-align: middle; margin-right: .35rem; margin-top: -2px; } .sors-metric-icon { width: 18px; height: 18px; object-fit: contain; vertical-align: middle; margin-right: .4rem; margin-top: -2px; } /* Compact variant so this widget can sit at half width next to another one on larger screens without its rows feeling cramped. */ .sors-best-players .table th, .sors-best-players .table td { padding: .4rem .6rem; font-size: .82rem; white-space: nowrap; } .sors-best-players .sors-metric-icon { width: 15px; height: 15px; margin-right: .3rem; } .sors-metric-icon-fa { width: 15px; display: inline-block; text-align: center; margin-right: .3rem; color: var(--sors-primary); font-size: .78rem; } .sors-best-players .card-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; } .sors-best-players .card-header-tabs { margin: -.2rem 0; border-bottom: none; } .sors-best-players .nav-tabs .nav-link { padding: .3rem .7rem; font-size: .78rem; } /* Clan activity feed - compact list to sit alongside Best Players. */ .sors-activity-feed { max-height: 950px; overflow-y: hidden; } .sors-activity-feed .list-group-item { display: flex; align-items: center; gap: .5rem; padding: .5rem .9rem; font-size: .82rem; border-color: var(--sors-border); } .sors-activity-feed .sors-metric-icon { width: 18px; height: 18px; margin-right: 0; flex-shrink: 0; } .sors-activity-feed-icon { width: 18px; text-align: center; color: var(--sors-primary); flex-shrink: 0; } .sors-activity-feed-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sors-text); } .sors-activity-feed-date { flex-shrink: 0; font-size: .72rem; color: var(--sors-text-faint); white-space: nowrap; } /* Full clan activity page - same building blocks as the compact sidebar feed, but no height cap and the description text wraps instead of truncating with an ellipsis. */ .sors-activity-feed-full .list-group-item { display: flex; align-items: center; gap: .6rem; padding: .65rem 1rem; font-size: .88rem; } .sors-activity-feed-full .sors-metric-icon { width: 22px; height: 22px; margin-right: 0; flex-shrink: 0; } .sors-activity-feed-full .sors-activity-feed-text { white-space: normal; overflow: visible; text-overflow: unset; } .sors-activity-filter { display: flex; align-items: center; gap: .75rem; } .sors-activity-filter__label { margin-bottom: 0; font-size: .85rem; font-weight: 600; color: var(--sors-text-muted); flex-shrink: 0; } .sors-activity-filter__select { width: auto; min-width: 220px; max-width: 100%; background: var(--sors-bg); color: var(--sors-text); border-color: var(--sors-border); } .sors-activity-filter__select option:last-child { border-top: 1px solid var(--sors-border); font-weight: 600; } /* Staff card — OSRS-themed take on a FUT-style player card. Two stacked clip-path shields (gold, then navy inset a few px smaller) fake a bordered badge shape, since clip-path alone can't stroke an outline. */ .staff-section { background: var(--sors-surface); border: 1px solid var(--sors-border); border-top: 3px solid #c9a227; border-radius: var(--sors-radius); box-shadow: var(--sors-shadow-sm); padding: 1.5rem 1.75rem 1.75rem; } .staff-section__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; padding-bottom: .85rem; border-bottom: 1px solid var(--sors-border); } .staff-section__header h2 { display: flex; align-items: center; gap: .55rem; margin-bottom: 0; font-size: 1.05rem; font-weight: 700; } .staff-section__icon { width: 22px; height: 22px; object-fit: contain; } .staff-section__count { flex: 0 0 auto; min-width: 1.6rem; text-align: center; padding: .2rem .6rem; border-radius: 999px; background: rgba(201, 162, 39, .14); color: #a6811d; font-size: .75rem; font-weight: 700; } :root[data-theme="dark"] .staff-section__count { color: #e0bd5c; } .staff-card-grid { display: flex; flex-wrap: wrap; gap: 1.75rem; } .staff-card { flex: 0 0 auto; width: 288px; padding: 14px; box-sizing: border-box; background: var(--sors-bg); border: 1px solid var(--sors-border); border-radius: 18px; } .staff-card__shield { --staff-card-shape: polygon( 8% 5%, 35% 0%, 50% 6%, 65% 0%, 92% 5%, 100% 42%, 90% 50%, 100% 58%, 92% 92%, 50% 100%, 8% 92%, 0% 58%, 10% 50%, 0% 42% ); position: relative; width: 260px; height: 380px; box-sizing: border-box; background: linear-gradient(160deg, #f5deb3 0%, #c9a227 45%, #8a6d1f 100%); clip-path: var(--staff-card-shape); box-shadow: 0 8px 20px rgba(16, 24, 40, .18), 0 2px 6px rgba(16, 24, 40, .12); transition: transform .2s ease, box-shadow .2s ease; } :root[data-theme="dark"] .staff-card__shield { box-shadow: 0 10px 28px rgba(0, 0, 0, .5), 0 0 0 1px rgba(201, 162, 39, .12); } .staff-card__shield:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(16, 24, 40, .24), 0 2px 6px rgba(16, 24, 40, .14); } :root[data-theme="dark"] .staff-card__shield:hover { box-shadow: 0 16px 34px rgba(0, 0, 0, .55), 0 0 0 1px rgba(201, 162, 39, .22); } .staff-card__shield::after { content: ''; position: absolute; inset: 4px; background: linear-gradient(165deg, #1b2f5e 0%, #0c1830 55%, #060d1c 100%); clip-path: var(--staff-card-shape); } .staff-card__shield::before { content: ''; position: absolute; inset: 4px; z-index: 1; clip-path: var(--staff-card-shape); background-image: radial-gradient(circle at 20% 14%, rgba(255, 255, 255, .55) 0, rgba(255, 255, 255, .55) 1px, transparent 1.5px), radial-gradient(circle at 72% 22%, rgba(255, 255, 255, .4) 0, rgba(255, 255, 255, .4) 1px, transparent 1.5px), radial-gradient(circle at 42% 38%, rgba(255, 255, 255, .3) 0, rgba(255, 255, 255, .3) 1px, transparent 1.5px), radial-gradient(circle at 85% 68%, rgba(255, 255, 255, .4) 0, rgba(255, 255, 255, .4) 1px, transparent 1.5px), radial-gradient(circle at 12% 78%, rgba(255, 255, 255, .3) 0, rgba(255, 255, 255, .3) 1px, transparent 1.5px), radial-gradient(circle at 60% 88%, rgba(255, 255, 255, .3) 0, rgba(255, 255, 255, .3) 1px, transparent 1.5px); pointer-events: none; } .staff-card__topline, .staff-card__portrait, .staff-card__name, .staff-card__stats { position: relative; z-index: 2; } .staff-card__topline, .staff-card__portrait, .staff-card__name, .staff-card__stats { margin-left: auto; margin-right: auto; } .staff-card__shield { padding: 20px 22px 18px; display: flex; flex-direction: column; align-items: center; color: #f4e4b8; font-family: var(--sors-font); } .staff-card__topline { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; padding: 10px; } .staff-card__rating { font-size: 2.1rem; font-weight: 800; line-height: 1; color: #f5deb3; text-shadow: 0 2px 4px rgba(0, 0, 0, .5); } .staff-card__role { font-size: .65rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #d9b64a; margin-top: 4px; } .staff-card__badges { display: flex; flex-direction: column; align-items: center; gap: 8px; } .staff-card__flag { width: 40px; height: 40px; object-fit: contain; border-radius: 50%; } .staff-card__crest { width: 26px; height: 26px; object-fit: contain; } .staff-card__portrait { width: 108px; height: 108px; border-radius: 50%; overflow: hidden; margin-top: 2px; margin-bottom: 10px; border: 2px solid rgba(245, 222, 179, .6); background: rgba(255, 255, 255, .05); } .staff-card__portrait img { width: 100%; height: 100%; object-fit: cover; } .staff-card__name { text-align: center; font-size: 1.1rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #f5deb3; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid rgba(245, 222, 179, .35); width: 88%; } .staff-card__stats { display: flex; justify-content: center; gap: 16px; width: 100%; } .staff-card__stats-col { display: flex; flex-direction: column; gap: 7px; } .staff-card__stats-divider { width: 1px; background: rgba(245, 222, 179, .3); } .staff-card__stat { display: flex; align-items: baseline; gap: 6px; font-size: .85rem; } .staff-card__stat-value { font-weight: 800; font-size: 1rem; color: #f5deb3; min-width: 1.5em; text-align: right; } .staff-card__stat-label { font-weight: 600; letter-spacing: .04em; color: #cbd5e1; } .sors-empty-state { text-align: center; padding: 3rem 1.5rem; color: var(--sors-text-muted); border: 1px dashed var(--sors-border-strong); border-radius: var(--sors-radius); } .sors-empty-state--compact { padding: 1rem 1.5rem; font-size: .85rem; text-align: left; } /* Member of the Month - "Previous Winners" sliding 6-month window. */ .motm-window { flex: 1 1 auto; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; min-width: 0; } .motm-month-box { display: block; text-align: center; padding: .85rem .5rem; border: 1px solid var(--sors-border); border-radius: var(--sors-radius-sm); background: var(--sors-bg); } a.motm-month-box { text-decoration: none; transition: border-color .15s ease, background-color .15s ease; } a.motm-month-box:hover { border-color: var(--sors-primary); } .motm-month-box.is-active { border-color: var(--sors-primary); background: var(--sors-primary-light); } .motm-month-box--label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--sors-text-faint); margin-bottom: .5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .motm-month-box--winner { font-size: .85rem; font-weight: 600; color: var(--sors-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .motm-month-box--points { font-size: .75rem; color: var(--sors-text-muted); margin-top: .2rem; } .motm-month-box--empty { font-size: .8rem; color: var(--sors-text-faint); margin-top: .3rem; } @media (max-width: 991.98px) { .motm-window { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: .75rem; } } @media (max-width: 575.98px) { .motm-window { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .sors-main .form-control { background: var(--sors-surface); color: var(--sors-text); border-radius: var(--sors-radius-sm); border-color: var(--sors-border-strong); } .sors-main .form-control::placeholder { color: var(--sors-text-faint); } .sors-main .form-control:focus { background: var(--sors-surface); color: var(--sors-text); border-color: var(--sors-primary); box-shadow: 0 0 0 3px var(--sors-primary-light); } .sors-main .list-group-item { border-color: var(--sors-border); background: transparent; font-size: .9rem; padding: .65rem 1.25rem; } .sors-main .list-group-item.active { background: var(--sors-bg) !important; color: var(--sors-text) !important; border-color: var(--sors-border) !important; font-weight: 700; } .sors-avatar { width: 56px; height: 56px; border-radius: 999px; object-fit: cover; border: 1px solid var(--sors-border); } /* Bootstrap's contextual border/background utilities (.border-primary, .table-primary, etc.) still point at Bootstrap's own blue, which no longer matches --sors-primary. Bring the ones actually in use into line. */ .sors-main .border-primary, .sors-main .border-dark { border-color: var(--sors-border) !important; } .sors-main .table-primary, .sors-main .table-primary > td, .sors-main .table-primary > th { background: var(--sors-bg); color: var(--sors-text); } /* Tabs ========================================================================== */ .sors-main .nav-tabs { border-bottom: 1px solid var(--sors-border); margin-bottom: 1.5rem; } .sors-main .nav-tabs .nav-link { border: none; color: var(--sors-text-muted); font-weight: 600; font-size: .9rem; padding: .6rem 1rem; } .sors-main .nav-tabs .nav-link:hover { border-color: transparent; color: var(--sors-text); } .sors-main .nav-tabs .nav-link.active { color: var(--sors-primary); background: transparent; border: none; border-bottom: 2px solid var(--sors-primary); } .sors-main .sors-best-players .card-header, .sors-main .sors-activity-feed .card-header { display: flex; height: 63.61px; align-items: center; } .sors-main .card-header .nav-tabs { margin-bottom: 0; border-bottom: none; } /* Card grid — for laying out a handful of cards (e.g. side-by-side stat panels) responsively without hardcoded pixel widths. */ .sors-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem; } .sors-card-grid .card { margin: 0; } .sors-main .card + .sors-card-grid, .sors-main .sors-card-grid + .card { margin-top: 1.5rem; } /* Clan Resources - 4 resource cards, narrower minmax than the default .sors-card-grid so all 4 sit in one row instead of wrapping 3-then-1. */ .sors-resource-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } /* Clan Resources - rank list (20%) + rank-up explainer (80%). */ .sors-rank-progress { display: flex; gap: 1.5rem; align-items: flex-start; } .sors-rank-progress--list { flex: 0 0 20%; max-width: 20%; margin: 0; } .sors-rank-progress--explainer { flex: 1 1 80%; max-width: 80%; margin: 0; } .sors-rank-progress--list .list-group-item { padding: .5rem .9rem; } .sors-rank-progress--list img { object-fit: contain; width: 16px; margin-right: .4rem !important; } .sors-rank-progress--list .list-group-item > .d-flex { font-size: .85rem; } .sors-rank-progress--points { font-size: .7rem; color: var(--sors-text-muted); margin-top: .1rem; margin-left: 22px; } @media (max-width: 767.98px) { .sors-rank-progress { flex-direction: column; } .sors-rank-progress--list, .sors-rank-progress--explainer { flex: 1 1 auto; max-width: 100%; width: 100%; } } /* Home page ========================================================================== */ .sors-hero h1 { font-size: 2.5rem; margin-bottom: .25rem; } .sors-hero .text-accent { color: var(--sors-primary); } .sors-hero + * { margin-top: 1.75rem; } .sors-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--sors-border); border: 1px solid var(--sors-border); border-radius: var(--sors-radius); overflow: hidden; margin-bottom: 1.75rem; } .sors-info-item { background: var(--sors-surface); padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: .25rem; } /* Nested inside a .card-body (e.g. dashboard "Clan Overview"), the grid's own border/background is redundant with the card's - strip it so the tiles sit flush instead of reading as a box within a box. */ .sors-info-grid--flush { border: none; border-radius: 0; margin-bottom: 0; background: transparent; gap: 1px; } .sors-info-grid--flush .sors-info-item { background: var(--sors-bg); } .sors-info-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--sors-text-faint); } .sors-info-value { font-size: .95rem; font-weight: 600; color: var(--sors-text); } .sors-banner { background: var(--sors-primary-light); color: var(--sors-primary-hover); border-radius: var(--sors-radius-sm); padding: .9rem 1.25rem; font-weight: 600; font-size: .9rem; margin-bottom: 1.75rem; } .sors-section { margin-bottom: 1.75rem; } .sors-section h2 { font-size: 1.15rem; margin-bottom: .5rem; } .sors-section p { color: var(--sors-text-muted); line-height: 1.6; margin-bottom: 0; } .sors-callout { display: flex; align-items: center; gap: .5rem; background: var(--sors-bg); border: 1px solid var(--sors-border); border-radius: var(--sors-radius-sm); padding: .9rem 1.25rem; font-size: .9rem; } /* DataTables — its default theme (jquery.dataTables.min.css) is loaded standalone on a few pages with no Bootstrap integration layer, so its search/length/pagination controls need their own palette pass. */ .sors-main .dataTables_wrapper { padding: 1.25rem 1.5rem; color: var(--sors-text-muted); font-size: .85rem; } .sors-main .dataTables_filter input, .sors-main .dataTables_length select { background: var(--sors-surface); border: 1px solid var(--sors-border-strong); border-radius: var(--sors-radius-sm); padding: .3rem .5rem; color: var(--sors-text); } .sors-main .dataTables_filter input:focus, .sors-main .dataTables_length select:focus { outline: none; border-color: var(--sors-primary); box-shadow: 0 0 0 3px var(--sors-primary-light); } .sors-main .dataTables_paginate .paginate_button { border: 1px solid transparent !important; border-radius: var(--sors-radius-sm) !important; color: var(--sors-text-muted) !important; padding: .3rem .65rem !important; margin-left: .15rem !important; } .sors-main .dataTables_paginate .paginate_button:hover { background: var(--sors-bg) !important; border-color: var(--sors-border) !important; color: var(--sors-text) !important; } .sors-main .dataTables_paginate .paginate_button.current, .sors-main .dataTables_paginate .paginate_button.current:hover { background: var(--sors-primary) !important; border-color: var(--sors-primary) !important; color: #fff !important; } .sors-main .dataTables_paginate .paginate_button.disabled, .sors-main .dataTables_paginate .paginate_button.disabled:hover { color: var(--sors-text-faint) !important; background: transparent !important; } .sors-main table.dataTable thead .sorting:before, .sors-main table.dataTable thead .sorting:after, .sors-main table.dataTable thead .sorting_asc:before, .sors-main table.dataTable thead .sorting_asc:after, .sors-main table.dataTable thead .sorting_desc:before, .sors-main table.dataTable thead .sorting_desc:after { opacity: .4; } /* Bingo — replaces the OSRS parchment-scroll theme (RuneScape scroll GIF background, brown text with shadows) with the site palette. The board layout/positioning mechanics (region map, hex grid, normal grid) are left untouched; only colors/typography change. */ .sors-main .bingo--card { background: none; padding: 0; } .sors-main .bingo--card:before, .sors-main .bingo--card:after { content: none; background: none; } .sors-main .bingo--card--title, .sors-main .bingo--card--title a { color: var(--sors-text) !important; font-family: var(--sors-font); font-size: 2rem !important; font-weight: 700; text-shadow: none !important; letter-spacing: normal; margin-bottom: .25rem; } .sors-main .bingo--card--sub-title { color: var(--sors-text-muted) !important; font-family: var(--sors-font); font-size: 1.1rem; font-weight: 600; text-shadow: none !important; letter-spacing: normal; margin-bottom: 1rem; text-align: center; } .sors-main .bingo--card--list { margin-bottom: 1rem; } .sors-main .bingo--card--list--item a { color: var(--sors-primary) !important; font-family: var(--sors-font); font-size: 1rem; font-weight: 600; text-shadow: none !important; letter-spacing: normal; margin-bottom: .25rem; display: inline-block; } .sors-main .bingo--card--title a:hover, .sors-main .bingo--card--list--item a:hover { color: var(--sors-primary-hover) !important; } .sors-main .bingo--card--row--cell { border: 1px solid var(--sors-border); border-radius: var(--sors-radius-sm); background: var(--sors-surface); } .sors-main .bingo--card--row--cell.completed { background: var(--sors-success-bg); border-color: var(--sors-success); } .sors-main .bingo--card--row--cell--text, .sors-main .bingo--card--row--cell--text a, .sors-main .bingo--card--row--cell--text a:hover { color: var(--sors-text) !important; font-family: var(--sors-font); font-size: 1rem !important; font-weight: 600; text-shadow: none !important; letter-spacing: normal; margin-bottom: 0; } .bingo--header { margin-bottom: 1.75rem; } .bingo--header--top { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; } .bingo--header--title { font-size: 1.75rem; font-weight: 700; color: var(--sors-text) !important; text-shadow: none !important; margin: 0; } .bingo--header--stats { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; } .bingo--stat { background: var(--sors-primary-light); border-radius: var(--sors-radius-sm); padding: .6rem 1.1rem; display: flex; flex-direction: column; gap: .1rem; } .bingo--stat--label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--sors-primary-hover); } .bingo--stat--value { font-size: 1.2rem; font-weight: 700; color: var(--sors-primary-hover); } .bingo--header--members--label { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--sors-text-faint); margin-bottom: .5rem; } .bingo--member-pills { display: flex; flex-wrap: wrap; gap: .5rem; } .bingo--member-pill { background: var(--sors-bg); border: 1px solid var(--sors-border); border-radius: 999px; padding: .3rem .85rem; font-size: .85rem; font-weight: 600; color: var(--sors-primary) !important; text-decoration: none !important; } .bingo--member-pill:hover { background: var(--sors-primary-light); border-color: var(--sors-primary); } /* PVM event drops — a tile grid per boss; obtained drops are full-color and tinted green, undiscovered ones are greyed out. */ .pvm-drop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 1rem; } .pvm-drop-item { text-align: center; padding: .75rem .5rem; border: 1px solid var(--sors-border); border-radius: var(--sors-radius-sm); background: var(--sors-bg); } .pvm-drop-item img { width: 48px; height: 48px; object-fit: contain; filter: grayscale(100%); opacity: .45; margin-bottom: .4rem; } .pvm-drop-item.obtained { background: var(--sors-success-bg); border-color: var(--sors-success); } .pvm-drop-item.obtained img { filter: none; opacity: 1; } .pvm-drop-item--name { font-size: .78rem; color: var(--sors-text-muted); margin: 0; line-height: 1.25; } .pvm-drop-item.obtained .pvm-drop-item--name { color: var(--sors-text); font-weight: 600; } .pvm-drop-item--qty { display: inline-block; margin-top: .35rem; font-size: .72rem; font-weight: 700; color: var(--sors-success); } /* Highscores profile — RuneProfile "Latest Collections" / "Latest Activities" strips. Every tile here is something the player has actually done, so unlike .pvm-drop-item there's no greyed-out/undiscovered state. */ /* Overrides the generic .sors-main .card { overflow: hidden } and .card-body { overflow-x: auto } - both exist for other components (rounded corners / wide tables), but here they either clip the tooltip outright or turn its absolute positioning into a phantom horizontal scrollbar the moment it pokes past the card edge. */ .sors-main .sors-activity-card { overflow: visible; } .sors-main .sors-activity-card-body { overflow: visible; } .sors-activity-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: .75rem; } .sors-activity-item { position: relative; text-align: center; padding: .6rem .4rem; border: 1px solid var(--sors-border); border-radius: var(--sors-radius-sm); background: var(--sors-bg); } .sors-activity-item img { width: 32px; height: 32px; object-fit: contain; } .sors-activity-item .fas { font-size: 1.4rem; color: var(--sors-primary); line-height: 32px; } .sors-activity-item--label { display: block; margin-top: .35rem; font-size: .68rem; font-weight: 700; color: var(--sors-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Custom tooltip — inverted colours (dark-on-light / light-on-dark) so it always reads clearly regardless of theme, rather than relying on the plain browser title="" tooltip. */ .sors-tooltip { position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(4px); display: flex; flex-direction: column; align-items: center; gap: .1rem; min-width: 140px; max-width: 220px; padding: .5rem .7rem; background: var(--sors-text); color: var(--sors-bg); border-radius: var(--sors-radius-sm); box-shadow: var(--sors-shadow); font-size: .78rem; line-height: 1.3; white-space: normal; text-align: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s ease, transform .15s ease; z-index: 1050; } .sors-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--sors-text); } .sors-tooltip--name { font-weight: 700; } .sors-tooltip--date { font-size: .7rem; opacity: .75; } .sors-activity-item:hover .sors-tooltip, .sors-activity-item:focus-within .sors-tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } /* Login ========================================================================== */ .sors-auth { max-width: 380px; margin: 2rem auto; } .sors-auth--header { text-align: center; margin-bottom: 1.75rem; } .sors-auth--header h1 { font-size: 1.6rem; margin-bottom: .25rem; } .sors-discord-btn { display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; background: #5865F2; color: #fff !important; font-weight: 600; font-size: 1rem; padding: .75rem 1rem; border-radius: var(--sors-radius-sm); text-decoration: none !important; box-sizing: border-box; transition: background .15s ease; } .sors-discord-btn:hover { background: #4752C4; } .sors-auth--divider { display: flex; align-items: center; color: var(--sors-text-faint); font-size: .8rem; margin: 1.5rem 0; } .sors-auth--divider::before, .sors-auth--divider::after { content: ''; flex: 1; border-bottom: 1px solid var(--sors-border); } .sors-auth--divider span { padding: 0 .75rem; white-space: nowrap; } .sors-auth--form label { font-size: .85rem; font-weight: 600; color: var(--sors-text-muted); } .sors-form-narrow { max-width: 420px; } /* Responsive ========================================================================== */ @media (max-width: 991.98px) { .sors-sidebar { transform: translateX(-100%); box-shadow: var(--sors-shadow); } .sors-sidebar-close { display: block; } .sors-content { margin-left: 0; } .sors-topbar { display: flex; } .sors-main { padding: 1.5rem 1.25rem 2.5rem; } .sors-footer { padding: 1.25rem; } body.sors-sidebar-open .sors-sidebar { transform: translateX(0); } body.sors-sidebar-open .sors-overlay { display: block; } }