73 lines
4.5 KiB
CSS
73 lines
4.5 KiB
CSS
@media (min-width: 1850px) {
|
|
.results-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.results-feed .result-card { grid-template-columns: 1fr; }
|
|
.results-feed .result-actions { min-width: 0; flex-direction: row; justify-content: flex-start; border-top: 1px solid color-mix(in srgb, var(--outline) 34%, transparent); border-left: 0; }
|
|
.health-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
|
}
|
|
|
|
@media (max-width: 1450px) {
|
|
.filter-console { grid-template-columns: minmax(240px, 2fr) repeat(3, minmax(130px, 1fr)); }
|
|
.filter-console > :nth-last-child(-n+3) { grid-row: 2; }
|
|
}
|
|
|
|
@media (max-width: 1180px) {
|
|
.dashboard-grid, .results-layout, .job-detail-grid, .profile-editor-layout { grid-template-columns: 1fr; }
|
|
.dashboard-rail, .detail-sidebar, .profile-preview { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.health-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.filter-console { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
|
.filter-console > * { grid-row: auto !important; }
|
|
}
|
|
|
|
@media (max-width: 820px) {
|
|
:root { --content-gutter: 16px; --topbar-height: 64px; }
|
|
.mobile-only { display: inline-grid; }
|
|
.desktop-label { display: none !important; }
|
|
.cockpit-sidebar { width: min(296px, 86vw); transform: translateX(-102%); transition: transform .2s ease; }
|
|
.nav-open .cockpit-sidebar { transform: translateX(0); }
|
|
.cockpit-workspace { margin-left: 0; }
|
|
.cockpit-topbar { left: 0; padding: 0 14px; }
|
|
.nav-scrim { position: fixed; z-index: 45; inset: 0; display: block; visibility: hidden; background: rgba(2,7,17,.7); opacity: 0; transition: opacity .2s, visibility .2s; }
|
|
.nav-open .nav-scrim { visibility: visible; opacity: 1; }
|
|
.command-search { width: min(100%, 510px); }
|
|
.cockpit-main { padding-bottom: 92px; }
|
|
.mobile-tabbar { position: fixed; z-index: 38; inset: auto 0 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--outline); background: color-mix(in srgb, var(--surface-lowest) 94%, transparent); backdrop-filter: blur(18px); }
|
|
.mobile-tabbar a { display: grid; min-height: 66px; place-items: center; align-content: center; gap: 4px; color: var(--text-faint); font: 10px var(--font-mono); }
|
|
.mobile-tabbar a.is-active { color: var(--cyan); }
|
|
.mobile-tabbar .icon { width: 19px; height: 19px; }
|
|
.page-header, .cockpit-heading, .section-heading { align-items: flex-start; flex-direction: column; }
|
|
.page-header { margin-bottom: 20px; }
|
|
.form-grid, .source-details-grid, .import-layout, .mailbox-form-grid, .system-hero { grid-template-columns: 1fr; }
|
|
.span-2 { grid-column: auto; }
|
|
.filter-console { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.filter-console .grow { grid-column: span 2; }
|
|
.dashboard-rail, .detail-sidebar, .profile-preview { grid-template-columns: 1fr; }
|
|
.source-alert-grid { grid-template-columns: 1fr; }
|
|
.feed-card, .result-card { grid-template-columns: 1fr; }
|
|
.feed-card-actions, .result-actions { min-width: 0; flex-direction: row; justify-content: flex-start; border-top: 1px solid color-mix(in srgb, var(--outline) 34%, transparent); border-left: 0; }
|
|
}
|
|
|
|
@media (max-width: 560px) {
|
|
h1 { font-size: 27px; }
|
|
.cockpit-main { padding-top: calc(var(--topbar-height) + 24px); }
|
|
.command-search kbd, .system-live { display: none; }
|
|
.topbar-actions { gap: 3px; }
|
|
.stats-grid, .health-grid, .filter-console, .command-panel, .system-counts { grid-template-columns: 1fr; }
|
|
.filter-console .grow { grid-column: auto; }
|
|
.stat-card { min-height: 105px; }
|
|
.job-card-main, .result-body, .panel, .tonal-panel, .health-card, .form-panel, .form-section, .detail-section { padding: 16px; }
|
|
.job-card-head, .result-heading { align-items: flex-start; flex-direction: column; }
|
|
.score-block { min-width: 0; text-align: left; }
|
|
.source-card-head, .source-alert-card { align-items: flex-start; flex-direction: column; }
|
|
.source-actions { width: 100%; justify-content: space-between; }
|
|
.page-actions, .job-actions, .form-actions { width: 100%; }
|
|
.page-actions .button, .form-actions .button { flex: 1; }
|
|
.sticky-actions { bottom: 76px; width: 100%; overflow-x: auto; justify-content: flex-start; }
|
|
.auth-shell { padding: 14px; }
|
|
.auth-card { padding: 22px 18px; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
|
|
}
|