/* ========================================================= responsive.css — cross-page small-screen fixes Loaded globally via header_imports.html ========================================================= */ /* ---------- Notifications: keep the action button from clipping ---------- */ @media (max-width: 575.98px) { #page-notification { flex-wrap: wrap; row-gap: 0.5rem; } #page-notification > .flex-fill { flex: 1 1 100%; min-width: 0; } /* action link + close button drop below the message and never clip */ #page-notification .btn:not(.btn-close) { margin-left: 0 !important; flex-shrink: 0; } #page-notification .btn-close { position: absolute; top: 0.5rem; right: 0.5rem; } } /* ---------- Sidenav: stop the footer (support buttons) overlapping links ---------- */ /* On small screens the sidenav is an in-flow offcanvas; the absolutely positioned footer would overlap the nav list. Let it flow normally. */ @media (max-width: 1199.98px) { #sidenav-main .sidenav-footer { position: static !important; margin-top: 1rem; } #sidenav-main #sidenav-collapse-main { padding-bottom: 1rem !important; } } /* On very short viewports (e.g. landscape phones) the same overlap happens even on desktop layout — give the list room to scroll past the footer. */ @media (min-width: 1200px) and (max-height: 760px) { #sidenav-main .sidenav-footer { position: static !important; } #sidenav-main #sidenav-collapse-main { padding-bottom: 1rem !important; } } /* ---------- Run cards: long key/dungeon/region headline overflow ---------- */ @media (max-width: 575.98px) { .card-header .h4, .card-body > .h4, .card-body > h4 { font-size: 1.05rem; line-height: 1.25; } /* allow the key + dungeon name + region cluster to wrap instead of overflow */ .card-header .h4 { display: inline; } } /* ---------- Dashboard: responsive tabs + dense charts ---------- */ @media (max-width: 575.98px) { #specTabs .nav-link { font-size: 0.8rem; padding: 0.45rem 0.4rem; text-align: center; } } /* Spec-popularity charts pack ~40 specs; on small screens give them a comfortable min-width and let the user scroll horizontally instead of squashing every bar/icon into ~340px. */ .dash-dense-chart { overflow-x: auto; overflow-y: hidden; } @media (max-width: 991.98px) { .dash-dense-chart .chart { min-width: 640px; } } /* ---------- Dashboard mobile ranked tables (replace charts < lg) ---------- */ .dash-rank-table { width: 100%; margin-bottom: 0; } .dash-rank-table td, .dash-rank-table th { padding: 0.4rem 0.25rem; vertical-align: middle; } .dash-rank-num { color: var(--bs-gray-500, #6c757d); width: 1.6rem; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; } .dash-rank-icon { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; } .dash-rank-name { font-weight: 600; line-height: 1.1; } .dash-rank-value { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .dash-rank-bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; margin-top: 3px; } .dash-rank-bar > span { display: block; height: 100%; border-radius: 3px; } /* ---------- DataTables Responsive: dark-theme child rows ---------- */ /* The expand/collapse control is a border-drawn caret. The bundled CSS only whitens it when data-bs-theme is on , but this site sets it on , so force the caret white here. Collapsed = right caret (border-left), expanded = down caret (border-top). */ table.dataTable > tbody > tr > td.dtr-control:before { border-left-color: #fff !important; } table.dataTable > tbody > tr.dtr-expanded > td.dtr-control:before { border-top-color: #fff !important; border-left-color: transparent !important; } ul.dtr-details { width: 100%; } ul.dtr-details > li { border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding: 0.35rem 0; } .dtr-details .dtr-title { min-width: 8rem; color: var(--bs-gray-400, #9aa0a6); }