120 lines
15 KiB
CSS
120 lines
15 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&family=Rajdhani:wght@400;500;600;700&display=swap');
|
|
|
|
:root{
|
|
--bg:#02070c;--surface:#06131d;--surface2:#081b28;--surface3:#0a2230;
|
|
--cyan:#12dcff;--cyan2:#007fa8;--blue:#087dff;--green:#00f39c;
|
|
--orange:#ff6426;--text:#e4f9ff;--muted:#638b9d;--dim:#345a6b;
|
|
--line:#0c526a;--line2:#123749;
|
|
}
|
|
*{box-sizing:border-box}
|
|
body{margin:0;background:#02070c;color:var(--text);font-family:Rajdhani,"Segoe UI",sans-serif}
|
|
button,input{font:inherit}
|
|
button{cursor:pointer}
|
|
.app{
|
|
min-height:100vh;display:grid;grid-template-columns:252px 1fr;grid-template-rows:78px 1fr;
|
|
background:
|
|
radial-gradient(ellipse at 68% 9%,rgba(0,180,255,.11),transparent 28%),
|
|
radial-gradient(ellipse at 80% 80%,rgba(0,60,120,.12),transparent 32%),
|
|
linear-gradient(120deg,#02070c,#03111b 48%,#02070c);
|
|
overflow:hidden;
|
|
}
|
|
.app:before{
|
|
content:"";position:fixed;inset:0;pointer-events:none;z-index:20;opacity:.045;
|
|
background:repeating-linear-gradient(0deg,transparent 0 3px,#fff 4px);
|
|
mix-blend-mode:screen;
|
|
}
|
|
|
|
/* TOP */
|
|
.topbar{
|
|
grid-column:1/-1;height:78px;display:flex;align-items:center;padding:0 25px;
|
|
border-bottom:1px solid #0b4052;background:rgba(3,12,19,.94);backdrop-filter:blur(14px);
|
|
box-shadow:0 10px 45px rgba(0,0,0,.35);position:relative;z-index:10;
|
|
}
|
|
.topbar:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);box-shadow:0 0 12px var(--cyan);opacity:.45}
|
|
.brand{width:248px;display:flex;align-items:center;gap:12px}
|
|
.brand-emblem{width:43px;height:43px;display:grid;place-items:center;color:var(--cyan);border:1px solid #08718a;background:linear-gradient(145deg,rgba(0,221,255,.13),rgba(0,0,0,.15));border-radius:9px;box-shadow:0 0 25px rgba(0,217,255,.14),inset 0 0 18px rgba(0,217,255,.08)}
|
|
.brand-name{font-weight:700;font-size:20px;letter-spacing:.08em;line-height:1}
|
|
.brand-caption{font-size:8px;color:var(--cyan);letter-spacing:.17em;margin-top:5px}
|
|
.main-nav{display:flex;gap:8px}
|
|
.top-nav{width:65px;height:50px;color:#5d8596;border:1px solid #133e50;background:linear-gradient(180deg,#071923,#04111a);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;box-shadow:inset 0 0 15px rgba(0,150,200,.025);transition:.2s}
|
|
.top-nav span{font-size:7px;font-weight:700;letter-spacing:.1em}
|
|
.top-nav.active,.top-nav:hover{color:var(--cyan);border-color:var(--cyan);background:linear-gradient(180deg,#082633,#04141e);box-shadow:0 0 22px rgba(0,217,255,.17),inset 0 0 20px rgba(0,217,255,.09)}
|
|
.system-status{margin-left:auto;display:flex;gap:9px;padding-right:21px;border-right:1px solid #163b4b;align-items:flex-start}
|
|
.system-status strong{display:block;color:var(--cyan);font-size:9px;letter-spacing:.1em}
|
|
.system-status small{display:block;color:#5c8292;font-size:8px}
|
|
.pulse{width:7px;height:7px;margin-top:3px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(0,243,156,.06),0 0 13px var(--green);animation:pulse 1.8s infinite}
|
|
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(0,243,156,0),0 0 20px var(--green)}}
|
|
.user{display:flex;align-items:center;gap:9px;margin-left:20px}
|
|
.avatar{width:35px;height:35px;border-radius:50%;display:grid;place-items:center;color:#001018;font-weight:700;background:linear-gradient(135deg,#48ecff,#087fff);box-shadow:0 0 22px rgba(0,180,255,.25)}
|
|
.user b{font-size:10px;display:block}.user small{font-size:8px;color:#638999;display:block}
|
|
.user button{margin-left:11px;background:rgba(5,19,28,.8);border:1px solid #255266;color:#86aab7;padding:7px 12px;font-size:9px;border-radius:5px}
|
|
|
|
/* SIDEBAR */
|
|
.sidebar{position:relative;padding:20px 16px;border-right:1px solid #0a4053;background:linear-gradient(180deg,rgba(5,19,29,.97),rgba(2,9,14,.98));overflow:hidden}
|
|
.sidebar:after{content:"";position:absolute;right:-45px;top:220px;width:110px;height:340px;background:repeating-linear-gradient(90deg,transparent 0 9px,#0a2b39 10px 11px);opacity:.18;transform:skewY(-25deg)}
|
|
.new-vehicle{width:100%;height:42px;border:1px solid #ff8658;border-radius:6px;color:#160800;font-weight:800;letter-spacing:.08em;background:linear-gradient(180deg,#ff7b35,#ff5821);box-shadow:0 0 22px rgba(255,96,30,.22),inset 0 1px rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center;gap:7px}
|
|
.search{height:36px;margin:12px 0;display:flex;align-items:center;gap:8px;padding:0 10px;border:1px solid #123e50;border-radius:6px;background:#03101a;box-shadow:inset 0 0 14px rgba(0,0,0,.4)}
|
|
.search input{width:100%;border:0;outline:0;background:none;color:#c5e5ee;font-size:10px}.search input::placeholder{color:#426d7e}
|
|
.vehicle-list{display:grid;gap:3px}
|
|
.vehicle{height:45px;width:100%;border:1px solid transparent;border-left:2px solid transparent;border-radius:5px;background:transparent;color:#7093a1;display:flex;align-items:center;gap:7px;padding:0 9px;text-align:left;position:relative}
|
|
.vehicle:hover{color:#bcecf6;background:rgba(0,190,240,.035)}
|
|
.vehicle.selected{color:var(--cyan);border-color:#09647c;border-left-color:var(--cyan);background:linear-gradient(90deg,rgba(0,217,255,.13),rgba(0,217,255,.015));box-shadow:0 0 20px rgba(0,217,255,.06),inset 0 0 20px rgba(0,217,255,.05)}
|
|
.vehicle-dot{width:5px;height:5px;border-radius:50%;background:#2a4652}.vehicle-dot.live{background:var(--green);box-shadow:0 0 8px var(--green)}
|
|
.vehicle b{font-size:11px}.vehicle small{margin-left:auto;color:#4e8aa0;font-size:9px}
|
|
.sidebar-label{position:absolute;bottom:20px;left:18px;color:#4d7a8b;font-size:8px;letter-spacing:.18em;display:flex;gap:8px;align-items:center}.sidebar-label span{color:var(--cyan);font-size:15px}
|
|
|
|
/* CONTENT */
|
|
.content{min-width:0;min-height:0;padding:18px 24px 12px;overflow:auto;background:radial-gradient(ellipse at 70% 0,rgba(0,170,255,.07),transparent 27%)}
|
|
.vehicle-hero{height:106px;border:1px solid #0a5167;border-radius:10px;position:relative;overflow:hidden;background:linear-gradient(90deg,#06131d 0,#06131d 42%,rgba(6,19,29,.7) 65%,#06131d);box-shadow:0 15px 35px rgba(0,0,0,.18),inset 0 0 35px rgba(0,150,210,.035)}
|
|
.vehicle-hero:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.28),transparent 40%,rgba(0,0,0,.25))}
|
|
.vehicle-heading{position:relative;z-index:4;height:100%;display:flex;align-items:center;padding-left:17px;gap:10px}
|
|
.vehicle-icon{width:52px;height:52px;display:grid;place-items:center;color:var(--cyan);border:1px solid #0b728a;border-radius:9px;background:rgba(0,217,255,.07);box-shadow:0 0 25px rgba(0,217,255,.1),inset 0 0 15px rgba(0,217,255,.07)}
|
|
.vehicle-heading h1{margin:0;font:700 31px "Barlow Condensed",sans-serif;letter-spacing:.04em}.crumb{font-size:8px;color:#527b8c;letter-spacing:.13em;margin-top:2px}.crumb i{color:var(--cyan);font-style:normal;margin:0 5px}
|
|
.status{font-size:8px;padding:5px 8px;border:1px solid;border-radius:20px;letter-spacing:.08em}.status.active{color:var(--green);border-color:#08765a;background:rgba(0,243,156,.05);box-shadow:0 0 12px rgba(0,243,156,.06)}.status.scale{color:#ffad59;border-color:#76502d;background:rgba(255,100,38,.05)}
|
|
|
|
/* HERO ART */
|
|
.industrial-hero{position:absolute;inset:0 0 0 39%;overflow:hidden}
|
|
/* The photograph, cropped to the hero strip. `62% 42%` holds the truck cab in
|
|
frame as the panel width changes; `center` drifts to the empty loading bay. */
|
|
.hero-photo{position:absolute;inset:0;background:url('../../assets/weigh-station-hero.jpg') right center/cover no-repeat;
|
|
/* Pushed toward the panel's palette so the photo belongs to the UI rather
|
|
than sitting in it: slightly desaturated, cooled, and darkened at source
|
|
so the overlays below read as light rather than fighting the image. */
|
|
filter:saturate(1.02) contrast(1.08) brightness(.88) hue-rotate(-4deg)}
|
|
/* Fades the photo out to the left so it slides under the vehicle title instead
|
|
of ending on a hard vertical seam. */
|
|
.hero-photo:after{content:"";position:absolute;inset:0;
|
|
background:linear-gradient(90deg,#061019 0%,rgba(6,16,25,.82) 12%,rgba(6,16,25,.28) 34%,transparent 58%)}
|
|
.hero-vignette{position:absolute;inset:0;background:linear-gradient(90deg,#06131d 0%,rgba(5,17,26,.58) 17%,rgba(5,17,26,.05) 62%,rgba(2,8,12,.25));z-index:3}
|
|
.hero-scan{position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(0,217,255,.07),transparent);transform:translateX(-100%);animation:scan 7s linear infinite;z-index:4}@keyframes scan{to{transform:translateX(180%)}}
|
|
.hero-haze{position:absolute;border-radius:50%;filter:blur(28px);opacity:.35}.haze-a{width:250px;height:90px;right:80px;top:15px;background:#087bff}.haze-b{width:180px;height:80px;right:300px;bottom:0;background:#ff5b24;opacity:.15}
|
|
.hero-neon{position:absolute;height:2px;background:var(--cyan);box-shadow:0 0 9px var(--cyan),0 0 22px rgba(0,217,255,.45)}.neon-a{right:210px;top:23px;width:125px}.neon-b{right:52px;top:43px;width:80px;background:var(--orange);box-shadow:0 0 10px var(--orange)}.neon-c{right:360px;bottom:28px;width:90px}
|
|
|
|
/* METRICS */
|
|
.metric-row{display:grid;grid-template-columns:1.28fr 1fr 1fr 1fr 1.05fr;gap:10px;margin-top:12px}
|
|
.metric-card{height:99px;position:relative;overflow:hidden;border:1px solid #10536a;border-radius:9px;background:linear-gradient(145deg,#071a25,#04131d);padding:12px 14px;box-shadow:0 10px 24px rgba(0,0,0,.16),inset 0 0 22px rgba(0,150,200,.025)}
|
|
.metric-card:before{content:"";position:absolute;left:0;top:0;width:34%;height:1px;background:#1e839b;box-shadow:0 0 10px #1e839b}
|
|
.metric-card.current{border-color:#08b9dc;box-shadow:0 0 25px rgba(0,217,255,.09),inset 0 0 25px rgba(0,217,255,.07)}.metric-card.current:before{width:65%;background:var(--cyan);box-shadow:0 0 13px var(--cyan)}
|
|
.metric-card.net{border-color:#087c62;background:linear-gradient(145deg,#061d1b,#041411)}.metric-card.net:before{background:var(--green);box-shadow:0 0 10px var(--green)}
|
|
.metric-glow{position:absolute;width:110px;height:110px;right:-45px;bottom:-55px;border-radius:50%;border:1px solid rgba(0,217,255,.08);box-shadow:0 0 30px rgba(0,217,255,.03)}
|
|
.metric-label{display:flex;align-items:center;gap:7px;color:#7298a7;font-size:8px;font-weight:600;letter-spacing:.12em}.metric-icon{width:25px;height:25px;border:1px solid #17647a;border-radius:6px;display:grid;place-items:center;color:var(--cyan);background:rgba(0,217,255,.055)}.net .metric-icon{color:var(--green);border-color:#0b705a}
|
|
.metric-value{font:700 25px "Barlow Condensed",sans-serif;letter-spacing:.035em;margin-top:4px;color:#e8fbff}.metric-card.big .metric-value{font-size:34px;color:var(--cyan);text-shadow:0 0 17px rgba(0,217,255,.25)}.metric-card.net .metric-value{color:var(--green);text-shadow:0 0 15px rgba(0,243,156,.15)}
|
|
.metric-time{font-size:7px;color:#4d7484;margin-top:1px}.metric-time b{color:#668d9b}
|
|
.action-stack{display:flex;flex-direction:column;gap:8px}.print,.design{height:45px;border-radius:7px;display:flex;align-items:center;gap:8px;padding:0 14px;font-weight:700;font-size:10px;letter-spacing:.06em}.print{color:#160700;background:linear-gradient(180deg,#ff7132,#ff5820);border:1px solid #ff8a5d;box-shadow:0 0 18px rgba(255,95,30,.16)}.design{color:var(--cyan);background:#061923;border:1px solid #14627a;box-shadow:inset 0 0 15px rgba(0,217,255,.04)}.design svg:last-child{margin-left:auto}
|
|
|
|
/* DATA */
|
|
.data-card{margin-top:12px;border:1px solid #0c546a;border-radius:10px;background:linear-gradient(180deg,rgba(5,21,31,.98),rgba(3,13,20,.98));box-shadow:0 20px 45px rgba(0,0,0,.18),inset 0 0 35px rgba(0,150,210,.025);overflow:hidden;position:relative}
|
|
.data-card:before{content:"";position:absolute;left:0;top:0;width:190px;height:2px;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
|
|
.card-header{height:49px;padding:0 17px;border-bottom:1px solid #0d3c4d;display:flex;align-items:center;justify-content:space-between}.card-header>div{display:flex;align-items:center;gap:9px;color:var(--cyan)}.card-header b{font-size:13px;color:#bdeaf3}.card-header>span{font-size:7px;color:#315f70;letter-spacing:.2em}
|
|
.history-header{height:38px;padding:0 17px;display:flex;align-items:center;justify-content:space-between}.history-header div{display:flex;gap:7px;align-items:center;color:var(--cyan);font-size:8px;font-weight:600;letter-spacing:.14em}.history-header button{border:0;background:none;color:#4e8394;font-size:8px;letter-spacing:.12em}.history-header button span{color:var(--cyan)}
|
|
.table-shell{margin:0 17px;border:1px solid #0d3d4d;border-radius:5px;overflow:hidden}
|
|
table{width:100%;border-collapse:collapse;min-width:760px}th{text-align:left;padding:8px;color:#4e8394;font-size:7px;letter-spacing:.1em;background:linear-gradient(180deg,#071d29,#061722);border-right:1px solid #0d3544}td{padding:8px;color:#8bb1bd;font-size:9px;border-top:1px solid #0c3040;border-right:1px solid #0b2d3b;background:rgba(2,12,18,.65)}tbody tr:hover td{background:rgba(0,217,255,.045);color:#c8eff6}.remove{width:20px;height:20px;border:1px solid #275565;background:#05131b;color:#7197a4;border-radius:4px}
|
|
.form{padding:15px 17px 5px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 15px}.field>span{display:block;color:#568597;font-size:7px;letter-spacing:.13em;margin-bottom:5px}.control{height:35px;padding:0 10px;display:flex;align-items:center;justify-content:space-between;border:1px solid #174c5f;border-radius:5px;background:linear-gradient(180deg,#061721,#031018);color:#a2c5ce;font-size:9px;box-shadow:inset 0 0 12px rgba(0,0,0,.3)}.control:hover{border-color:#1491ae;box-shadow:0 0 12px rgba(0,217,255,.05),inset 0 0 12px rgba(0,0,0,.3)}
|
|
.bottom-actions{display:flex;align-items:center;gap:15px;padding:10px 17px 15px}.save{height:38px;padding:0 16px;display:flex;align-items:center;gap:8px;color:#001219;font-weight:800;font-size:9px;letter-spacing:.05em;border:1px solid #6af0ff;border-radius:5px;background:linear-gradient(180deg,#23e6ff,#06bede);box-shadow:0 0 22px rgba(0,217,255,.18)}.ready{font-size:7px;color:#4d7f8e;letter-spacing:.16em}.ready span{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);margin-right:7px}
|
|
footer{display:flex;justify-content:space-between;padding:8px 2px;color:#284b5a;font-size:7px;letter-spacing:.18em}
|
|
|
|
/* RESPONSIVE */
|
|
@media(max-width:1250px){.brand{width:205px}.system-status{display:none}.metric-row{grid-template-columns:1.2fr 1fr 1fr 1fr}.action-stack{grid-column:span 4;flex-direction:row}.action-stack>*{flex:1}}
|
|
@media(max-width:900px){.app{grid-template-columns:1fr;grid-template-rows:auto auto 1fr}.topbar{flex-wrap:wrap;height:auto;min-height:78px;padding:10px 15px}.main-nav{order:3;width:100%;overflow:auto;padding-bottom:4px}.sidebar{border-right:0;border-bottom:1px solid #0a4053}.vehicle-list{display:flex;overflow:auto}.vehicle{min-width:150px}.sidebar-label{display:none}.content{padding:12px}.industrial-hero{inset:0;opacity:.3}.metric-row{grid-template-columns:1fr 1fr}.action-stack{grid-column:span 2}.form{grid-template-columns:1fr 1fr}}
|
|
@media(max-width:560px){.user>div:nth-child(2),.user button{display:none}.metric-row,.form{grid-template-columns:1fr}.action-stack{grid-column:auto;flex-direction:column}.status{display:none}.brand-caption{display:none}}
|