299 lines
20 KiB
CSS
299 lines
20 KiB
CSS
@import "tailwindcss";
|
|
|
|
:root {
|
|
--bg: #f3f5f8;
|
|
--panel: #ffffff;
|
|
--panel-soft: #f8fafc;
|
|
--ink: #172234;
|
|
--muted: #6b778a;
|
|
--line: #e2e7ee;
|
|
--nav: #142333;
|
|
--nav-soft: #1a2e43;
|
|
--blue: #1f72e5;
|
|
--cyan: #23a9c9;
|
|
--green: #21a675;
|
|
--orange: #f08a35;
|
|
--amber: #d99614;
|
|
--red: #dc4f4f;
|
|
--shadow: 0 14px 34px rgba(20, 35, 51, .07);
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); }
|
|
body {
|
|
font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
button, input, select { font: inherit; }
|
|
button { cursor: pointer; }
|
|
|
|
.loading-screen {
|
|
min-height: 100vh; display: grid; place-content: center; text-align: center;
|
|
background: radial-gradient(circle at 50% 30%, #fff, #edf2f8);
|
|
}
|
|
.loading-mark {
|
|
width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 18px;
|
|
display: grid; place-items: center; color: white; font-size: 26px; font-weight: 800;
|
|
background: linear-gradient(135deg, var(--blue), var(--cyan)); box-shadow: 0 15px 30px rgba(31,114,229,.25);
|
|
}
|
|
.loading-screen h1 { font-size: 22px; margin: 0; }
|
|
.loading-screen p { color: var(--muted); margin: 10px 0 22px; }
|
|
.error-screen .loading-mark { background: var(--red); }
|
|
|
|
.app-shell { min-height: 100vh; }
|
|
.sidebar {
|
|
position: fixed; inset: 0 auto 0 0; z-index: 20; width: 236px; display: flex; flex-direction: column;
|
|
color: #d9e4ef; background:
|
|
radial-gradient(circle at -10% 0, rgba(35,169,201,.18), transparent 28%),
|
|
linear-gradient(180deg, #142536 0%, #101d2a 100%);
|
|
border-right: 1px solid #20364b;
|
|
}
|
|
.brand {
|
|
min-height: 76px; padding: 17px 16px; display: flex; align-items: center; gap: 11px;
|
|
border-bottom: 1px solid rgba(255,255,255,.08); position: relative;
|
|
}
|
|
.brand-symbol {
|
|
width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px;
|
|
background: linear-gradient(135deg, #2686ff, #27b1c5); color: white; font-weight: 900; font-size: 17px;
|
|
box-shadow: 0 8px 20px rgba(31,114,229,.25);
|
|
}
|
|
.brand strong { display: block; font-size: 16px; letter-spacing: .08em; }
|
|
.brand small { display: block; margin-top: 3px; color: #71869a; font-size: 8px; letter-spacing: .18em; }
|
|
.version { position: absolute; top: 17px; right: 13px; color: #4fc0d8; font: 700 9px monospace; }
|
|
.sidebar nav { flex: 1; overflow: auto; padding: 10px 8px; }
|
|
.nav-group { margin-bottom: 8px; }
|
|
.nav-group p { padding: 8px 11px 5px; margin: 0; color: #647d92; font-size: 10px; letter-spacing: .16em; }
|
|
.nav-group button {
|
|
width: 100%; height: 39px; padding: 0 11px; display: flex; align-items: center; gap: 10px;
|
|
border: 0; border-radius: 8px; background: transparent; color: #9fb1c2; font-size: 13px; text-align: left;
|
|
transition: .18s ease; position: relative;
|
|
}
|
|
.nav-group button:hover { color: #fff; background: rgba(255,255,255,.05); }
|
|
.nav-group button.active { color: #fff; background: linear-gradient(90deg, rgba(31,114,229,.35), rgba(35,169,201,.13)); }
|
|
.nav-group button.active::before { content: ""; position: absolute; left: 0; width: 3px; height: 20px; border-radius: 4px; background: #47b9e9; }
|
|
.nav-icon { width: 19px; color: #5aa7d6; font-weight: 800; text-align: center; }
|
|
.nav-group button b {
|
|
margin-left: auto; min-width: 19px; height: 19px; display: grid; place-items: center;
|
|
color: white; background: var(--red); border-radius: 10px; font-size: 10px;
|
|
}
|
|
.sidebar-foot { padding: 13px 17px 18px; border-top: 1px solid rgba(255,255,255,.08); font-size: 11px; color: #8fa4b7; }
|
|
.sidebar-foot div { display: flex; align-items: center; gap: 7px; margin: 6px 0; }
|
|
.sidebar-foot strong { color: #d8e3ec; margin-left: auto; }
|
|
.sidebar-foot small { display: block; color: #586f83; margin-top: 8px; }
|
|
.online-dot, .offline-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: #3bd29b; box-shadow: 0 0 0 4px rgba(59,210,155,.1); }
|
|
.offline-dot { background: var(--red); box-shadow: 0 0 0 4px rgba(220,79,79,.1); }
|
|
|
|
.workspace { min-height: 100vh; margin-left: 236px; }
|
|
.topbar {
|
|
height: 76px; padding: 0 24px; display: flex; align-items: center; gap: 20px;
|
|
background: rgba(255,255,255,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
|
|
position: sticky; top: 0; z-index: 10;
|
|
}
|
|
.page-title { display: flex; align-items: baseline; gap: 11px; }
|
|
.page-title h1 { margin: 0; font-size: 20px; }
|
|
.page-title span { color: #9aa5b4; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
|
|
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
|
|
.connection {
|
|
display: flex; align-items: center; gap: 7px; padding: 6px 10px; color: var(--green);
|
|
background: #f2fbf7; border: 1px solid #cfefe2; border-radius: 8px; font-size: 11px; font-weight: 700;
|
|
}
|
|
.clock { padding-right: 4px; text-align: right; }
|
|
.clock strong { display: block; font: 700 13px ui-monospace, monospace; }
|
|
.clock span { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; }
|
|
.alert-button {
|
|
width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 9px;
|
|
background: white; color: var(--red); font-weight: 900; position: relative;
|
|
}
|
|
.alert-button b { position: absolute; top: -7px; right: -7px; min-width: 17px; height: 17px; line-height: 17px; border-radius: 9px; color: white; background: var(--red); font-size: 9px; }
|
|
.role-switch { padding: 3px; display: flex; background: #edf1f5; border-radius: 9px; }
|
|
.role-switch button { padding: 6px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 11px; }
|
|
.role-switch button.active { color: #fff; background: var(--blue); box-shadow: 0 4px 10px rgba(31,114,229,.2); }
|
|
.content { max-width: 1500px; margin: 0 auto; padding: 22px 24px 40px; }
|
|
.page-stack { display: grid; gap: 16px; }
|
|
|
|
.greeting {
|
|
padding: 18px 21px; display: flex; align-items: center; justify-content: space-between;
|
|
background: linear-gradient(125deg, #18334c, #164664 60%, #176079); color: white;
|
|
border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; position: relative;
|
|
}
|
|
.greeting::after { content: ""; position: absolute; right: -60px; width: 280px; height: 280px; border: 54px solid rgba(255,255,255,.05); border-radius: 50%; }
|
|
.greeting span { color: #b9deee; font-size: 12px; }
|
|
.greeting h2 { margin: 4px 0 0; font-size: 18px; }
|
|
.greeting button { position: relative; z-index: 1; color: white; border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.08); }
|
|
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
|
|
.kpi {
|
|
min-height: 124px; padding: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
|
|
box-shadow: 0 8px 25px rgba(20,35,51,.04); position: relative; overflow: hidden;
|
|
}
|
|
.kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--blue); }
|
|
.kpi::after { content: ""; position: absolute; right: -20px; top: -20px; width: 84px; height: 84px; border-radius: 50%; background: rgba(31,114,229,.06); }
|
|
.kpi.orange::before { background: var(--orange); } .kpi.orange::after { background: rgba(240,138,53,.08); }
|
|
.kpi.green::before { background: var(--green); } .kpi.green::after { background: rgba(33,166,117,.08); }
|
|
.kpi.amber::before { background: var(--amber); } .kpi.amber::after { background: rgba(217,150,20,.08); }
|
|
.kpi > span { color: var(--muted); font-size: 12px; }
|
|
.kpi > strong { display: block; margin: 11px 0 7px; font-size: 28px; letter-spacing: -.03em; }
|
|
.kpi > small { color: #9aa5b4; font-size: 10px; }
|
|
.two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
|
.two-columns.wide-left { grid-template-columns: 1.45fr 1fr; }
|
|
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 26px rgba(20,35,51,.04); overflow: hidden; }
|
|
.card-head { min-height: 61px; padding: 14px 17px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
|
|
.card-head h3 { margin: 0; font-size: 14px; }
|
|
.card-head p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
|
|
.card-tools { display: flex; gap: 8px; }
|
|
.live-scale { min-height: 235px; padding: 34px 28px; display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; background: radial-gradient(circle at 20% 50%, #eef8ff, transparent 48%); }
|
|
.live-scale > div > strong { color: var(--blue); font-size: 58px; letter-spacing: -.06em; }
|
|
.live-scale > div > span { margin-left: 8px; color: var(--muted); font-size: 16px; }
|
|
.live-scale p { display: flex; align-items: center; gap: 8px; color: var(--green); font-size: 11px; }
|
|
.live-scale dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
|
|
.live-scale dl div { padding: 10px; background: white; border: 1px solid var(--line); border-radius: 9px; }
|
|
.live-scale dt { color: var(--muted); font-size: 9px; }
|
|
.live-scale dd { margin: 5px 0 0; font-size: 12px; font-weight: 700; }
|
|
.device-list { padding: 8px 17px 13px; }
|
|
.device-list > div { min-height: 40px; display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 8px; border-bottom: 1px solid #eef1f4; }
|
|
.device-list > div:last-child { border: 0; }
|
|
.device-list span { display: flex; gap: 9px; color: var(--muted); font-size: 11px; }
|
|
.device-list span strong { width: 60px; color: var(--ink); }
|
|
.device-list small { color: #9aa5b4; font-size: 9px; }
|
|
.bar-chart { height: 190px; padding: 25px 25px 15px; display: flex; align-items: end; justify-content: space-around; gap: 13px; }
|
|
.bar-chart div { height: 100%; flex: 1; display: flex; flex-direction: column; justify-content: end; align-items: center; gap: 8px; }
|
|
.bar-chart i { width: min(24px, 65%); min-height: 10px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #39b8d5, #247ae4); box-shadow: 0 5px 12px rgba(31,114,229,.15); }
|
|
.bar-chart span { color: var(--muted); font-size: 9px; }
|
|
.activity-list { padding: 7px 17px 13px; }
|
|
.activity-list > div { min-height: 38px; display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 8px; border-bottom: 1px solid #eef1f4; font-size: 11px; }
|
|
.activity-list time { color: #97a4b2; font: 600 10px ui-monospace, monospace; }
|
|
.activity-list span { color: var(--muted); }
|
|
.activity-list strong { font-size: 11px; }
|
|
|
|
.toolbar { min-height: 58px; padding: 10px 15px; display: flex; align-items: center; gap: 10px; background: var(--panel-soft); border-bottom: 1px solid var(--line); }
|
|
.toolbar > :last-child { margin-left: auto; }
|
|
.tabs { display: flex; gap: 3px; }
|
|
.tabs button { height: 34px; padding: 0 13px; border: 1px solid transparent; border-radius: 8px; color: var(--muted); background: transparent; font-size: 11px; }
|
|
.tabs button.active { color: var(--blue); background: #eaf3ff; border-color: #d4e6ff; font-weight: 700; }
|
|
.search-box { width: min(310px, 35vw); height: 36px; padding: 0 11px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 9px; background: white; color: #99a5b3; }
|
|
.search-box input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 11px; }
|
|
.primary-button, .ghost-button {
|
|
min-height: 34px; padding: 0 14px; border-radius: 8px; font-size: 11px; font-weight: 700; transition: .16s;
|
|
}
|
|
.primary-button { color: white; border: 1px solid var(--blue); background: var(--blue); box-shadow: 0 5px 12px rgba(31,114,229,.15); }
|
|
.primary-button:hover { background: #1767d2; }
|
|
.primary-button:disabled { opacity: .55; cursor: wait; }
|
|
.ghost-button { color: #476079; border: 1px solid var(--line); background: white; }
|
|
.ghost-button:hover { border-color: #b7c4d1; color: var(--blue); }
|
|
.table-wrap { overflow-x: auto; }
|
|
table { width: 100%; min-width: 850px; border-collapse: collapse; }
|
|
th { padding: 11px 14px; color: #8794a3; background: #fbfcfd; border-bottom: 1px solid var(--line); text-align: left; font-size: 10px; font-weight: 700; white-space: nowrap; }
|
|
td { padding: 12px 14px; border-bottom: 1px solid #edf0f4; color: #4c5a6c; font-size: 11px; white-space: nowrap; }
|
|
tbody tr:hover { background: #f9fbfd; }
|
|
td strong { color: var(--ink); }
|
|
td select { max-width: 150px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; background: white; color: var(--ink); font-size: 10px; }
|
|
.empty { height: 180px; text-align: center; color: #9aa5b4; }
|
|
.status { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border: 1px solid; border-radius: 12px; font-size: 9px; font-weight: 700; }
|
|
.status.ok { color: #17835c; border-color: #bce7d5; background: #effaf5; }
|
|
.status.warn { color: #9a6d0d; border-color: #f0d89d; background: #fff9e8; }
|
|
.status.bad { color: #b73939; border-color: #f0c3c3; background: #fff3f3; }
|
|
.status.muted { color: #6e7c8d; border-color: #dce2e8; background: #f6f8fa; }
|
|
.row-actions { display: flex; gap: 6px; }
|
|
.row-actions button { padding: 4px 8px; border: 1px solid #d9e1e9; border-radius: 6px; color: #52708f; background: white; font-size: 9px; }
|
|
.row-actions button:hover { color: var(--blue); border-color: #a9c8ed; }
|
|
.statistics-grid { padding: 28px; display: grid; grid-template-columns: repeat(4,1fr); gap: 15px; }
|
|
.statistics-grid > div { padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfe; overflow: hidden; }
|
|
.statistics-grid span { color: var(--muted); font-size: 11px; }
|
|
.statistics-grid strong { display: block; margin: 9px 0 14px; font-size: 22px; }
|
|
.statistics-grid i { display: block; height: 5px; border-radius: 4px; background: linear-gradient(90deg, var(--blue), var(--cyan)); }
|
|
|
|
.device-grid { padding: 15px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
|
|
.device-grid article { min-height: 160px; padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(145deg, #fff, #f7fafc); }
|
|
.device-grid article > div:first-child { display: flex; align-items: center; justify-content: space-between; }
|
|
.device-grid article h4 { margin: 16px 0 5px; font-size: 14px; }
|
|
.device-grid article p, .device-grid article small, .device-grid article footer { color: var(--muted); font-size: 10px; }
|
|
.device-grid article footer { margin-top: 13px; padding-top: 10px; border-top: 1px solid var(--line); }
|
|
.meter { height: 6px; margin: 16px 0 7px; overflow: hidden; background: #e7ebef; border-radius: 5px; }
|
|
.meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), var(--amber)); }
|
|
.alert-list { padding: 9px 15px 15px; display: grid; gap: 9px; }
|
|
.alert-list article { min-height: 86px; padding: 13px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 13px; border: 1px solid #eadfbf; border-left: 3px solid var(--amber); border-radius: 9px; background: #fffdf7; }
|
|
.alert-list article.critical { border-color: #ecc7c7; border-left-color: var(--red); background: #fff9f9; }
|
|
.alert-sign { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: white; background: var(--amber); font-weight: 900; }
|
|
.critical .alert-sign { background: var(--red); }
|
|
.alert-title { display: flex; align-items: center; gap: 8px; }
|
|
.alert-title h3 { margin: 0; font-size: 13px; }
|
|
.alert-list p { margin: 5px 0; color: #596879; font-size: 11px; }
|
|
.alert-list small { color: #97a3af; font-size: 9px; }
|
|
.sub-toolbar { min-height: 50px; padding: 8px 15px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 10px; border-bottom: 1px solid var(--line); }
|
|
.settings-form { max-width: 720px; padding: 24px; display: grid; gap: 14px; }
|
|
.settings-form > label, .modal-body label { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 10px; }
|
|
.settings-form label span, .modal-body label span { color: var(--muted); font-size: 11px; }
|
|
.settings-form input, .settings-form select, .modal-body input {
|
|
height: 38px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; outline: 0; color: var(--ink); background: white; font-size: 11px;
|
|
}
|
|
.settings-form input:focus, .modal-body input:focus { border-color: #8bb8ee; box-shadow: 0 0 0 3px rgba(31,114,229,.08); }
|
|
.settings-form small { color: var(--muted); font-size: 10px; }
|
|
.form-actions { padding-left: 120px; display: flex; align-items: center; gap: 9px; }
|
|
|
|
.simulator-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
|
|
.sim-card .card-head { background: #fbfcfd; }
|
|
.terminal {
|
|
width: 100%; min-height: 520px; padding: 48px 38px; display: flex; flex-direction: column; align-items: center; justify-content: center;
|
|
border: 18px solid #1e2b38; background: radial-gradient(circle at 50% 42%, #f9fcff, #eaf1f7); color: var(--ink); position: relative;
|
|
}
|
|
.terminal-camera { position: absolute; top: -12px; width: 7px; height: 7px; border-radius: 50%; background: #090e13; box-shadow: 0 0 0 2px #354758; }
|
|
.terminal > small { position: absolute; top: 14px; left: 17px; color: #7d8b99; font: 600 9px ui-monospace, monospace; }
|
|
.terminal-icon { width: 100px; height: 100px; display: grid; place-items: center; border: 2px solid var(--orange); border-radius: 50%; color: var(--orange); font-size: 38px; box-shadow: 0 0 0 12px rgba(240,138,53,.08); }
|
|
.terminal.blue .terminal-icon { color: var(--blue); border-color: var(--blue); box-shadow: 0 0 0 12px rgba(31,114,229,.08); }
|
|
.terminal h3 { margin: 33px 0 10px; font-size: 24px; }
|
|
.terminal p { color: var(--muted); font-size: 12px; }
|
|
.terminal > strong { margin-top: 25px; padding: 11px 18px; border-radius: 8px; color: white; background: var(--orange); font-size: 11px; }
|
|
.terminal.blue > strong { background: var(--blue); }
|
|
.step-dots { position: absolute; bottom: 20px; display: flex; gap: 7px; }
|
|
.step-dots i { width: 7px; height: 7px; border-radius: 50%; background: #c5ced6; }
|
|
.step-dots i.active { width: 22px; border-radius: 5px; background: var(--orange); }
|
|
.terminal.blue .step-dots i.active { background: var(--blue); }
|
|
|
|
.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(12,24,37,.42); backdrop-filter: blur(4px); }
|
|
.modal { width: min(500px, calc(100vw - 30px)); border-radius: 14px; background: white; box-shadow: 0 28px 70px rgba(12,24,37,.25); overflow: hidden; }
|
|
.modal header { height: 60px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
|
|
.modal header h2 { margin: 0; font-size: 16px; }
|
|
.modal header button { width: 32px; height: 32px; border: 0; border-radius: 8px; color: var(--muted); background: #f3f5f7; font-size: 20px; }
|
|
.modal-body { padding: 22px; display: grid; gap: 13px; }
|
|
.modal footer { padding: 13px 18px; display: flex; justify-content: end; gap: 8px; border-top: 1px solid var(--line); background: #fbfcfd; }
|
|
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 70; padding: 12px 16px; color: white; background: #17334b; border-radius: 9px; box-shadow: 0 13px 30px rgba(12,24,37,.25); font-size: 11px; animation: toast-in .25s ease; }
|
|
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }
|
|
|
|
@media (max-width: 1150px) {
|
|
.sidebar { width: 205px; }
|
|
.workspace { margin-left: 205px; }
|
|
.kpi-grid { grid-template-columns: 1fr 1fr; }
|
|
.device-grid { grid-template-columns: 1fr 1fr; }
|
|
.connection, .clock { display: none; }
|
|
}
|
|
|
|
@media (max-width: 820px) {
|
|
.sidebar { position: static; width: 100%; height: auto; }
|
|
.sidebar nav { display: flex; overflow-x: auto; }
|
|
.nav-group { display: contents; }
|
|
.nav-group p, .sidebar-foot { display: none; }
|
|
.nav-group button { min-width: 110px; justify-content: center; }
|
|
.workspace { margin-left: 0; }
|
|
.topbar { height: auto; min-height: 72px; align-items: flex-start; padding: 12px 14px; }
|
|
.topbar-right { flex-wrap: wrap; justify-content: end; }
|
|
.role-switch { order: 3; width: 100%; justify-content: end; }
|
|
.content { padding: 14px; }
|
|
.two-columns, .two-columns.wide-left, .simulator-grid { grid-template-columns: 1fr; }
|
|
.kpi-grid { grid-template-columns: 1fr 1fr; }
|
|
.device-grid, .statistics-grid { grid-template-columns: 1fr; }
|
|
.search-box { width: 100%; }
|
|
.toolbar { align-items: stretch; flex-direction: column; }
|
|
.toolbar > :last-child { margin-left: 0; }
|
|
.tabs { overflow-x: auto; }
|
|
.live-scale { grid-template-columns: 1fr; gap: 18px; }
|
|
}
|
|
|
|
@media (max-width: 520px) {
|
|
.brand { min-height: 64px; }
|
|
.page-title span, .alert-button { display: none; }
|
|
.kpi-grid { grid-template-columns: 1fr; }
|
|
.greeting { align-items: flex-start; gap: 12px; flex-direction: column; }
|
|
.terminal { min-height: 430px; border-width: 11px; }
|
|
.modal-body label, .settings-form > label { grid-template-columns: 1fr; }
|
|
.form-actions { padding-left: 0; }
|
|
}
|