4 lines
6.2 KiB
CSS
4 lines
6.2 KiB
CSS
|
:root{--bg:#e9ece9;--panel:#fff;--soft:#f0f2ef;--line:rgba(10,10,10,.12);--text:#0a0a0a;--muted:#6f746f;--accent:#f4511e;--green:#08806b;--blue:#2764ff;font-family:var(--jw-font-sans,"Geist Variable",Inter,system-ui,sans-serif)}*{box-sizing:border-box}html,body,#app{min-height:100%;margin:0}body{background:var(--bg);color:var(--text);overscroll-behavior:none;touch-action:manipulation}button{font:inherit}.topbar{height:76px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 24px;background:transparent;border-bottom:1px solid transparent;color:#fff;transition:background .3s,border-color .3s,backdrop-filter .3s;pointer-events:none}.topbar.is-scrolled{background:rgba(10,10,10,.86);border-bottom-color:rgba(255,255,255,.09);backdrop-filter:blur(8px)}.topbar>*{pointer-events:auto}.brand{display:flex;align-items:center;gap:10px}.brand [data-logo]{width:34px;height:34px}.brand b{font-size:16px;font-weight:900}.brand small,.merchant small{color:#979d99;font-size:16px;text-transform:none;letter-spacing:0}.brand small{display:inline;font-weight:900}.brand small:before{content:"·";color:#979d99;margin:0 9px}.brand b,.merchant strong,.merchant small{display:block}.merchant{text-align:center}.merchant strong{font-family:var(--jw-font-display,"Syne Variable");font-size:21px}.connection{justify-self:end;display:grid;grid-template-columns:auto auto;align-items:center;gap:6px;text-align:right}.connection i{width:9px;height:9px;border-radius:50%;background:#18b397;box-shadow:0 0 0 5px rgba(24,179,151,.15)}.connection span{font-size:11px;font-weight:850}.connection time{grid-column:1/-1;color:#979d99;font-size:9px}.connection.offline i{background:#e05b43}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:12px 14px 8px}.stats article{display:flex;align-items:center;justify-content:space-between;min-height:66px;padding:10px 15px;border:1px solid var(--line);border-radius:15px;background:var(--panel)}.stats span{color:var(--muted);font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.08em}.stats strong{font-size:30px}.tabs{display:flex;gap:8px;padding:4px 14px 12px}.tabs button{min-height:46px;padding:0 18px;border:1px solid var(--line);border-radius:13px;background:var(--panel);color:var(--muted);font-weight:850}.tabs button.active{background:var(--text);color:#fff}.tabs span{display:inline-grid;place-items:center;min-width:22px;height:22px;margin-left:7px;border-radius:99px;background:var(--soft);color:var(--text);font-size:10px}.tabs small{margin-left:4px;color:var(--accent)}.board{display:none;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px;padding:0 14px 18px}.board.active{display:grid}.ticket,.payment-ticket{min-height:260px;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:20px;background:var(--panel);overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.05)}.ticket>header{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:10px;padding:14px;border-bottom:1px solid var(--line)}.table{width:52px;height:52px;display:grid;place-items:center;border-radius:14px;background:var(--text);color:#fff;font-size:20px;font-weight:900}.ticket header small,.ticket header strong{display:block}.ticket header small{color:var(--muted);font-size:9px;text-transform:uppercase}.ticket header strong{font-size:24px}.ticket header time{color:var(--muted);font-size:12px;font-weight:800}.ticket-body{flex:1;padding:16px}.ticket-body p{margin:0;font-size:20px;font-weight:800;line-height:1.28}.ticket-body small{display:block;margin-top:12px;color:var(--muted)}.ticket>footer{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--soft)}.status{color:var(--muted);font-size:10px;font-weight:900;text-transform:uppercase}.ticket footer button,.payment-ticket button{min-height:56px;margin-left:auto;padding:0 18px;border:0;border-radius:13px;background:var(--accent);color:#fff;font-weight:900}.ticket footer button b{margin-left:12px}.status-accepted{border-color:rgba(39,100,255,.35)}.status-accepted .table{background:var(--blue)
|
||
|
|
body{padding-top:76px}
|
||
|
|
@media(max-width:700px){body{padding-top:64px}}
|