This commit is contained in:
Jens
+9
-7
@@ -1,7 +1,9 @@
|
||||
@import url("tokens.css");
|
||||
@import url("base.css");
|
||||
@import url("layout.css");
|
||||
@import url("components.css");
|
||||
@import url("pages.css");
|
||||
@import url("responsive.css");
|
||||
@import url("premium.css");
|
||||
/* Houd ook geïmporteerde stylesheets versieerbaar; alleen app.css voorzien van
|
||||
een querystring ververst anders niet noodzakelijk de browsercache. */
|
||||
@import url("tokens.css?v=0.3.9");
|
||||
@import url("base.css?v=0.3.9");
|
||||
@import url("layout.css?v=0.3.9");
|
||||
@import url("components.css?v=0.3.9");
|
||||
@import url("pages.css?v=0.3.9");
|
||||
@import url("responsive.css?v=0.3.9");
|
||||
@import url("premium.css?v=0.3.9");
|
||||
|
||||
+39
-2
@@ -125,9 +125,29 @@ body.auth-page {
|
||||
|
||||
.auth-brand-logo {
|
||||
display: block;
|
||||
width: min(274px, 78vw);
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 18px;
|
||||
box-shadow: 0 16px 38px rgba(0, 124, 131, 0.16), 0 2px 6px rgba(18, 38, 43, 0.08);
|
||||
}
|
||||
|
||||
.auth-shell > .developer-credit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
justify-content: center;
|
||||
margin: 18px auto 0;
|
||||
color: var(--on-surface-variant);
|
||||
font: 700 9px/1 var(--font-sans);
|
||||
letter-spacing: .1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.auth-shell > .developer-credit img {
|
||||
display: block;
|
||||
width: 113px;
|
||||
height: auto;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.auth-brand-name {
|
||||
@@ -221,6 +241,7 @@ body.auth-page {
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.field-link:hover {
|
||||
@@ -290,6 +311,22 @@ body.auth-page {
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.pw-toggle .icon[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.field-label-row {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.field-link {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.field-error {
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
.sidebar-account strong, .sidebar-account small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.sidebar-account small { font: 10px var(--font-mono); text-transform: uppercase; }
|
||||
.cockpit-workspace { min-height: 100vh; margin-left: var(--sidebar-width); }
|
||||
.cockpit-topbar { position: fixed; inset: 0 0 auto var(--sidebar-width); z-index: 40; display: flex; height: var(--topbar-height); align-items: center; justify-content: space-between; gap: 20px; padding: 0 var(--content-gutter); border-bottom: 1px solid color-mix(in srgb, var(--outline) 32%, transparent); background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(18px); }
|
||||
.cockpit-topbar { position: fixed; inset: 0 0 auto var(--sidebar-width); z-index: 40; display: flex; height: var(--topbar-height); align-items: center; padding: 0 var(--content-gutter); border-bottom: 1px solid color-mix(in srgb, var(--outline) 32%, transparent); background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(18px); }
|
||||
.topbar-start, .topbar-actions { display: flex; min-width: 0; align-items: center; gap: 12px; }
|
||||
.topbar-start { flex: 1; }
|
||||
.cockpit-main { width: 100%; min-height: 100vh; padding: calc(var(--topbar-height) + 36px) var(--content-gutter) 56px; }
|
||||
|
||||
@@ -300,18 +300,18 @@
|
||||
.platform-grid { margin-top: 18px; }
|
||||
.platform-grid article { align-items: flex-start; flex-direction: column; }
|
||||
.activity-filterbar { display: grid; grid-template-columns: minmax(260px, 1fr) 220px auto; align-items: end; gap: 10px; margin-bottom: 28px; padding: 14px; border: 1px solid color-mix(in srgb, var(--outline) 42%, transparent); background: var(--surface-low); }
|
||||
.activity-timeline { position: relative; display: grid; gap: 16px; padding-left: 78px; }
|
||||
.activity-timeline::before { position: absolute; inset: 0 auto 0 28px; width: 1px; content: ""; background: linear-gradient(var(--cyan), var(--outline) 70%, transparent); opacity: .45; }
|
||||
.activity-timeline { position: relative; display: grid; gap: 10px; padding-left: 62px; }
|
||||
.activity-timeline::before { position: absolute; inset: 0 auto 0 22px; width: 1px; content: ""; background: linear-gradient(var(--cyan), var(--outline) 70%, transparent); opacity: .45; }
|
||||
.activity-event { position: relative; }
|
||||
.activity-marker { position: absolute; top: 0; left: -78px; display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid var(--outline); background: var(--surface-low); color: var(--text-muted); }
|
||||
.activity-marker { position: absolute; top: 0; left: -62px; display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--outline); border-radius: 10px; background: var(--surface-low); color: var(--text-muted); }
|
||||
.activity-marker.is-positive { border-color: color-mix(in srgb, var(--emerald) 45%, var(--outline)); color: var(--emerald); }
|
||||
.activity-marker.is-attention { border-color: color-mix(in srgb, var(--coral) 45%, var(--outline)); color: var(--coral); }
|
||||
.activity-card { padding: 20px; border: 1px solid color-mix(in srgb, var(--outline) 44%, transparent); background: var(--surface-container); }
|
||||
.activity-card { padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--outline) 44%, transparent); border-radius: 12px; background: var(--surface-container); }
|
||||
.activity-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
|
||||
.activity-card-head h2 { margin: 9px 0 0; }
|
||||
.activity-card-head h2 { margin: 6px 0 0; font-size: 18px; }
|
||||
.activity-card-head time { color: var(--text-faint); font: 11px var(--font-mono); }
|
||||
.activity-object { color: var(--text-muted); }
|
||||
.decision-note { margin: 14px 0; padding: 12px 14px; border-left: 2px solid var(--cyan); background: var(--surface-high); }
|
||||
.decision-note { margin: 10px 0; padding: 9px 12px; border-left: 2px solid var(--cyan); background: var(--surface-high); }
|
||||
.decision-note p { margin: 7px 0 0; }
|
||||
.employer-kpis { display: flex; gap: 8px; }
|
||||
.employer-kpis > div { min-width: 130px; padding: 11px 13px; border: 1px solid color-mix(in srgb, var(--outline) 42%, transparent); background: var(--surface-low); }
|
||||
|
||||
+18
-4
@@ -7,6 +7,7 @@
|
||||
--radius-sm: 7px;
|
||||
--radius-md: 12px;
|
||||
--radius-lg: 18px;
|
||||
--content-frame: 1720px;
|
||||
}
|
||||
|
||||
:root[data-theme="light"] {
|
||||
@@ -34,10 +35,16 @@ body::before {
|
||||
|
||||
.cockpit-sidebar { background: color-mix(in srgb, var(--surface-lowest) 97%, black); }
|
||||
.cockpit-main { padding-top: calc(var(--topbar-height) + 42px); }
|
||||
.cockpit-main > * { max-width: 2800px; margin-right: auto; margin-left: 0; }
|
||||
.brand-lockup { display: grid; min-width: 0; gap: 5px; }
|
||||
.brand-wordmark { display: block; width: 174px; height: auto; padding: 5px 8px; border-radius: 7px; background: rgba(255, 255, 255, .94); }
|
||||
.cockpit-brand small { margin: 0 2px; color: var(--text-faint); font-size: 8px; font-weight: 700; letter-spacing: .08em; }
|
||||
.cockpit-main > * { width: min(100%, var(--content-frame)); margin-right: auto; margin-left: 0; }
|
||||
.topbar-inner { display: flex; width: min(100%, var(--content-frame)); height: 100%; align-items: center; justify-content: space-between; gap: 20px; }
|
||||
.brand-radar { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 11px; box-shadow: 0 10px 28px color-mix(in srgb, var(--cyan) 12%, transparent); }
|
||||
.brand-lockup { display: grid; min-width: 0; gap: 4px; }
|
||||
.brand-lockup strong { color: var(--text-strong); font: 740 17px/1 var(--font-headline); letter-spacing: -.025em; }
|
||||
.cockpit-brand small { margin: 0; color: var(--text-faint); font-size: 8px; font-weight: 700; letter-spacing: .09em; }
|
||||
.developer-credit { display: flex; align-items: center; gap: 7px; color: var(--text-faint); font: 650 7px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
|
||||
.developer-credit img { display: block; width: 92px; height: auto; opacity: .82; }
|
||||
.cockpit-sidebar > .developer-credit { margin: 0 18px 10px; padding: 8px 0 0; border-top: 1px solid var(--divider); }
|
||||
.cockpit-sidebar > .developer-credit img { padding: 2px 4px; border-radius: 3px; background: rgba(255, 255, 255, .9); filter: saturate(.82); }
|
||||
.workspace-identity { display: grid; min-width: 176px; padding-right: 18px; border-right: 1px solid var(--divider); line-height: 1.1; }
|
||||
.workspace-identity span { color: var(--text-strong); font-size: 14px; font-weight: 740; letter-spacing: -.015em; }
|
||||
.workspace-identity small { margin-top: 5px; color: var(--text-faint); font: 650 9px var(--font-body); letter-spacing: .075em; text-transform: uppercase; }
|
||||
@@ -62,6 +69,7 @@ body::before {
|
||||
.section-kicker,
|
||||
.kpi-label { color: var(--text-faint); font-family: var(--font-body); font-weight: 700; letter-spacing: .105em; }
|
||||
.section-kicker { margin-bottom: 7px; }
|
||||
.section-link { display: inline-flex; min-height: 38px; align-items: center; padding: 5px 2px; }
|
||||
|
||||
.button { min-height: 44px; border-radius: 9px; }
|
||||
.button-primary { box-shadow: 0 8px 24px color-mix(in srgb, var(--cyan) 13%, transparent); }
|
||||
@@ -114,6 +122,9 @@ label > span:first-child { font-family: var(--font-body); font-weight: 700; lett
|
||||
.rail-panel:not(.radar-summary) { background: color-mix(in srgb, var(--surface-raised) 76%, var(--surface-low)); box-shadow: none; }
|
||||
.job-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
|
||||
.job-card:hover { transform: translateY(-2px); border-color: var(--divider-strong); box-shadow: var(--shadow-card); }
|
||||
.dashboard-matches .job-feed { gap: 12px; }
|
||||
.dashboard-matches .feed-card { min-height: 0; }
|
||||
.dashboard-matches .job-card-main { padding: 18px 20px; }
|
||||
|
||||
.filter-console {
|
||||
grid-template-columns: minmax(280px, 1.8fr) repeat(5, minmax(126px, .72fr)) auto;
|
||||
@@ -163,6 +174,7 @@ label > span:first-child { font-family: var(--font-body); font-weight: 700; lett
|
||||
.empty-state { border-color: var(--divider-strong); border-radius: var(--radius-md); }
|
||||
|
||||
@media (min-width: 1800px) {
|
||||
:root { --content-frame: 1880px; }
|
||||
.explorer-shell { grid-template-columns: minmax(650px, 880px) minmax(760px, 1fr); }
|
||||
.automation-layout { grid-template-columns: minmax(0, 1fr) minmax(340px, 430px); }
|
||||
}
|
||||
@@ -188,6 +200,7 @@ label > span:first-child { font-family: var(--font-body); font-weight: 700; lett
|
||||
.profile-index-art { min-height: 230px; border-top: 1px solid var(--divider); border-left: 0; }
|
||||
.profile-index-art .radar-illustration { width: 220px; }
|
||||
.command-search:focus-within { width: min(100%, 510px); }
|
||||
.topbar-inner { gap: 8px; }
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
@@ -219,5 +232,6 @@ label > span:first-child { font-family: var(--font-body); font-weight: 700; lett
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
|
||||
.radar-illustration { transform: none !important; transition: none; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user