Files
VacatureRadar/static/css/responsive.css
T

142 lines
9.4 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; }
.explorer-shell { grid-template-columns: minmax(390px, .9fr) minmax(430px, 1.1fr); }
.source-health-summary { grid-template-columns: minmax(260px, 1fr) minmax(300px, .9fr) auto; }
}
@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; }
.explorer-shell { grid-template-columns: 1fr; }
.explorer-intelligence { position: static; }
.application-editor-grid, .source-management-grid { grid-template-columns: 1fr; }
.application-timeline { position: static; }
.profile-index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.source-health-summary { grid-template-columns: 1fr auto; }
.source-health-metrics { grid-column: 1 / -1; grid-row: 2; }
.watchlist-grid, .platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.employer-radar-layout, .employer-detail-grid, .automation-layout { grid-template-columns: 1fr; }
.employer-intelligence-rail { position: static; border-top: 1px solid var(--outline); border-left: 0; }
.automation-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.skills-insight-layout { grid-template-columns: 1fr; }
.skills-method-rail { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@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; }
.detail-hero { align-items: flex-start; flex-direction: column; min-height: 0; }
.hero-score { min-width: 0; width: 100%; text-align: left; }
.intelligence-strip { grid-template-columns: repeat(2, 1fr); }
.preference-grid, .source-health-details { grid-template-columns: 1fr; }
.automation-status { align-items: flex-start; flex-direction: column; }
.automation-status dl { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
.automation-status dl > div { min-width: 0; border-top: 1px solid var(--outline); border-left: 0; padding: 11px 4px; }
.employer-job-grid { grid-template-columns: 1fr; }
.login-cockpit { min-height: 0; grid-template-columns: 1fr; }
.login-intelligence { min-height: 360px; border-right: 0; border-bottom: 1px solid var(--outline); }
.login-radar { width: 310px; }
.login-cockpit .auth-card { margin: 34px; }
.insight-hero { grid-template-columns: 96px minmax(0, 1fr); }
.insight-hero .button { grid-column: 1 / -1; width: fit-content; }
.insight-orbit { width: 92px; height: 92px; }
.skill-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.skill-metrics article:nth-child(2) { border-right: 0; }
.skill-metrics article:nth-child(-n+2) { border-bottom: 1px solid color-mix(in srgb, var(--outline) 32%, transparent); }
.skills-method-rail { grid-template-columns: 1fr; }
}
@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; }
.explorer-card { grid-template-columns: 54px minmax(0, 1fr); padding: 12px; }
.explorer-score { width: 50px; height: 50px; }
.explorer-arrow { display: none; }
.intelligence-actions, .intel-facts, .signal-columns, .intelligence-strip { grid-template-columns: 1fr; }
.score-components > div { grid-template-columns: 100px minmax(70px, 1fr) 30px; }
.source-list li, .version-list article { align-items: flex-start; grid-template-columns: 1fr; flex-direction: column; padding: 11px 0; }
.pipeline-summary, .choice-field ul, .profile-index-grid, .watchlist-grid, .platform-grid { grid-template-columns: 1fr; }
.source-health-summary { grid-template-columns: 1fr; align-items: start; }
.source-health-metrics { grid-column: auto; grid-row: auto; grid-template-columns: 1fr; width: 100%; }
.source-health-metrics > div { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid color-mix(in srgb, var(--outline) 30%, transparent); border-left: 0; }
.source-health-metrics strong { margin-top: 0; }
.mailbox-row, .danger-zone { align-items: flex-start; flex-direction: column; }
.activity-filterbar, .automation-kpis { grid-template-columns: 1fr; }
.activity-timeline { padding-left: 52px; }
.activity-timeline::before { left: 20px; }
.activity-marker { left: -52px; width: 42px; height: 42px; }
.activity-card-head { flex-direction: column; gap: 8px; }
.employer-kpis { width: 100%; }
.employer-kpis > div { min-width: 0; flex: 1; }
.automation-status dl { grid-template-columns: 1fr; }
.match-history > div { grid-template-columns: 38px 1fr 36px; }
.match-history a { grid-column: 1 / -1; }
.auth-shell { padding: 14px; }
.auth-card { padding: 22px 18px; }
.login-intelligence { min-height: 310px; padding: 24px; }
.login-intro h1 { font-size: 34px; }
.login-signals { display: none; }
.login-radar { top: 3%; right: -34%; width: 290px; }
.login-cockpit .auth-card { margin: 28px 20px; padding: 0; }
.insight-hero { min-height: 0; grid-template-columns: 1fr; padding: 20px; }
.insight-orbit { width: 82px; height: 82px; }
.skill-metrics { grid-template-columns: 1fr; }
.skill-metrics article { border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--outline) 32%, transparent); }
.skill-demand-card { grid-template-columns: 1fr; }
.skill-demand-action { min-width: 0; border-top: 1px solid color-mix(in srgb, var(--outline) 34%, transparent); border-left: 0; }
.skill-demand-action .button { width: 100%; }
.skill-card-heading, .skill-job-examples li { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}