/* ===================================================================== isSensorCloud — Φύλλο στυλ (ταυτότητα "instrument panel") Σκούρο θέμα ως προεπιλογή· τα LED κατάστασης είναι ο ήρωας. Εναλλαγή θέματος μέσω [data-theme="light"] στο . Χωρίς εξωτερικές γραμματοσειρές (offline-friendly για edge). ===================================================================== */ :root { /* Παλέτα — σκούρο (προεπιλογή) */ --bg: #0E1419; --bg-grad: radial-gradient(1200px 600px at 80% -10%, #16222c 0%, #0E1419 60%); --panel: #161D24; --panel-2: #1E272F; --border: #2A353F; --border-2: #38454F; --text: #E4EAF0; --muted: #8A99A8; --muted-2: #61707E; --accent: #00B4D8; --accent-dim:#0a3a45; /* Κατάσταση (LED) */ --ok: #2ED47A; --warn: #F5A623; --alarm: #FF4D4F; --ok-glow: rgba(46,212,122,.55); --warn-glow: rgba(245,166,35,.55); --alarm-glow: rgba(255,77,79,.65); /* Τυπογραφία */ --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "Cascadia Code", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace; --radius: 12px; --radius-sm: 8px; --shadow: 0 8px 30px rgba(0,0,0,.35); --shadow-sm: 0 2px 10px rgba(0,0,0,.25); --ok-text: var(--ok); --warn-text: var(--warn); --alarm-text: var(--alarm); } html[data-theme="light"] { --bg: #EEF2F6; --bg-grad: radial-gradient(1100px 560px at 85% -12%, #ffffff 0%, #EEF2F6 55%); --panel: #FFFFFF; --panel-2: #F4F7FA; --border: #DAE2EA; --border-2: #C4CFD9; --text: #16202A; --muted: #5C6B7A; --muted-2: #8696A4; --accent: #0089A8; --accent-dim:#d6eef4; --ok: #16A05A; --warn: #C77A09; --alarm: #D32F2F; --ok-glow: rgba(22,160,90,.35); --warn-glow: rgba(199,122,9,.35); --alarm-glow: rgba(211,47,47,.4); --shadow: 0 8px 30px rgba(20,40,60,.12); --shadow-sm: 0 2px 10px rgba(20,40,60,.08); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-ui); color: var(--text); background: var(--bg); background-image: var(--bg-grad); background-attachment: fixed; font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } h1,h2,h3 { margin: 0; font-weight: 650; letter-spacing: -0.01em; } .mono { font-family: var(--font-mono); } /* --------------------------------------------------------------- App bar */ .appbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 18px; padding: 0 20px; height: 60px; background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } .brand { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 17px; letter-spacing: -0.02em; white-space: nowrap; } .brand .logo { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), #0077a3); display: grid; place-items: center; box-shadow: 0 0 0 1px var(--border-2); } .brand .logo svg { width: 18px; height: 18px; } .brand b { color: var(--text); } .brand span { color: var(--accent); } .nav { display: flex; gap: 4px; margin-left: 6px; } .nav.mobile { display: none; } /* εμφανίζεται μόνο σε κινητά (βλ. media query) */ .nav a { padding: 8px 13px; border-radius: var(--radius-sm); color: var(--muted); font-weight: 550; font-size: 14px; text-decoration: none; transition: background .15s, color .15s; } .nav a:hover { color: var(--text); background: var(--panel-2); text-decoration: none; } .nav a.active { color: var(--text); background: var(--accent-dim); } .spacer { flex: 1; } .toolbar { display: flex; align-items: center; gap: 8px; } /* Κουμπιά */ .btn { appearance: none; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 550; color: var(--text); background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 14px; transition: background .15s, border-color .15s, transform .05s; display: inline-flex; align-items: center; gap: 7px; } .btn:hover { border-color: var(--border-2); background: color-mix(in srgb, var(--panel-2) 70%, var(--accent-dim)); } .btn:active { transform: translateY(1px); } .btn.primary { background: var(--accent); border-color: var(--accent); color: #03252e; font-weight: 650; } .btn.primary:hover { filter: brightness(1.07); background: var(--accent); } .btn.ghost { background: transparent; } .btn.danger { color: var(--alarm); border-color: color-mix(in srgb, var(--alarm) 40%, var(--border)); } .btn.danger:hover { background: color-mix(in srgb, var(--alarm) 14%, transparent); } .btn.icon { padding: 8px; width: 38px; height: 38px; justify-content: center; } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn.sm { padding: 5px 10px; font-size: 13px; } .icon-only { width: 20px; height: 20px; display: inline-block; } /* --------------------------------------------------------------- Layout */ .wrap { max-width: 1320px; margin: 0 auto; padding: 22px 20px 60px; } .page-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; } .page-head h1 { font-size: 22px; } .page-head .sub { color: var(--muted); font-size: 14px; } .row { display: flex; gap: 16px; flex-wrap: wrap; } .grid { display: grid; gap: 16px; } .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .card .card-h { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); } .card .card-h h3 { font-size: 15px; } .card .card-h .sub { color: var(--muted); font-size: 13px; } .card .card-b { padding: 16px; } label.field { display: block; margin-bottom: 13px; } label.field > span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; } input, select, textarea { width: 100%; font-family: inherit; font-size: 14px; color: var(--text); background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 11px; transition: border-color .15s, box-shadow .15s; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } select { cursor: pointer; } /* --------------------------------------------------------------- Status LED */ .led { --c: var(--ok); --g: var(--ok-glow); width: 11px; height: 11px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 30%, transparent), 0 0 10px var(--g); display: inline-block; flex: none; } .led.ok { --c: var(--ok); --g: var(--ok-glow); } .led.warn { --c: var(--warn); --g: var(--warn-glow); } .led.alarm { --c: var(--alarm); --g: var(--alarm-glow); animation: pulse 1.25s ease-in-out infinite; } @keyframes pulse { 0%,100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 35%, transparent), 0 0 8px var(--g); } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent), 0 0 18px var(--g); } } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); } .badge.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); } .badge.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); } .badge.alarm { color: var(--alarm); border-color: color-mix(in srgb, var(--alarm) 40%, var(--border)); } /* --------------------------------------------------------------- Summary rail */ .rail { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; } .stat { flex: 1; min-width: 150px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } .stat .k { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .stat .v { font-family: var(--font-mono); font-size: 30px; font-weight: 600; margin-top: 4px; line-height: 1; } .stat.ok .v { color: var(--ok); } .stat.warn .v { color: var(--warn); } .stat.alarm .v { color: var(--alarm); } .stat .edge { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); } .stat.ok .edge { background: var(--ok); } .stat.warn .edge { background: var(--warn); } .stat.alarm .edge { background: var(--alarm); } /* --------------------------------------------------------------- Sensor map */ .map-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .map-toolbar select { width: auto; min-width: 220px; } .mapframe { position: relative; width: 100%; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; min-height: 320px; } .mapframe img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; } .mapframe.empty { display: grid; place-items: center; min-height: 420px; color: var(--muted); text-align: center; padding: 40px; } .pin { position: absolute; transform: translate(-50%, -50%); width: 18px; height: 18px; border-radius: 50%; cursor: pointer; border: 2px solid rgba(255,255,255,.85); --c: var(--ok); --g: var(--ok-glow); background: var(--c); box-shadow: 0 0 0 2px rgba(0,0,0,.35), 0 0 14px var(--g); transition: transform .1s; } .pin:hover { transform: translate(-50%, -50%) scale(1.25); z-index: 5; } .pin.ok { --c: var(--ok); --g: var(--ok-glow); } .pin.warn { --c: var(--warn); --g: var(--warn-glow); } .pin.alarm { --c: var(--alarm); --g: var(--alarm-glow); animation: pinpulse 1.2s ease-in-out infinite; } .pin.draggable { cursor: grab; } .pin.draggable:active { cursor: grabbing; } .pin .pin-label { position: absolute; left: 50%; top: -8px; transform: translate(-50%, -100%); background: var(--panel); border: 1px solid var(--border); color: var(--text); padding: 2px 7px; border-radius: 6px; font-size: 11px; white-space: nowrap; font-family: var(--font-mono); box-shadow: var(--shadow-sm); pointer-events: none; opacity: 0; transition: opacity .12s; } .pin:hover .pin-label { opacity: 1; } @keyframes pinpulse { 0%,100% { box-shadow: 0 0 0 2px rgba(0,0,0,.35), 0 0 10px var(--g); } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--c) 22%, transparent), 0 0 22px var(--g); } } /* Popup μετρητή */ .popup { position: absolute; z-index: 20; width: 240px; background: var(--panel); border: 1px solid var(--border-2); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; transform: translate(-50%, calc(-100% - 16px)); } .popup::after { content: ""; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%) rotate(45deg); width: 12px; height: 12px; background: var(--panel); border-right: 1px solid var(--border-2); border-bottom: 1px solid var(--border-2); } .popup .pp-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .popup .pp-h .name { font-weight: 650; font-size: 14px; } .popup .pp-val { font-family: var(--font-mono); font-size: 30px; font-weight: 600; line-height: 1; } .popup .pp-val .u { font-size: 14px; color: var(--muted); margin-left: 3px; } .popup .pp-meta { margin-top: 8px; display: grid; grid-template-columns: auto auto; gap: 4px 12px; font-size: 12px; color: var(--muted); } .popup .pp-meta b { font-family: var(--font-mono); color: var(--text); font-weight: 600; } .popup .pp-close { cursor: pointer; color: var(--muted); border: none; background: none; font-size: 18px; line-height: 1; padding: 0; } .popup .pp-close:hover { color: var(--text); } /* --------------------------------------------------------------- Tables */ .table { width: 100%; border-collapse: collapse; font-size: 14px; } .table th, .table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); } .table th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; } .table tbody tr:hover { background: var(--panel-2); } .table td.num, .table th.num { text-align: right; font-family: var(--font-mono); } .table .actions { display: flex; gap: 6px; justify-content: flex-end; } /* --------------------------------------------------------------- Tabs (config) */ .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; flex-wrap: wrap; } .tabs button { appearance: none; cursor: pointer; background: none; border: none; font-family: inherit; font-size: 14px; font-weight: 550; color: var(--muted); padding: 10px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; } .tabs button:hover { color: var(--text); } .tabs button.active { color: var(--text); border-bottom-color: var(--accent); } .tabpane { display: none; } .tabpane.active { display: block; } /* --------------------------------------------------------------- Login */ .login-screen { min-height: 100dvh; display: grid; place-items: center; padding: 24px; } .login-card { width: 100%; max-width: 380px; background: var(--panel); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); padding: 30px 28px; } .login-card .brand { justify-content: center; font-size: 20px; margin-bottom: 4px; } .login-card .tagline { text-align: center; color: var(--muted); font-size: 13px; margin-bottom: 24px; } .login-card .corner { position: fixed; top: 16px; right: 16px; display: flex; gap: 8px; } /* --------------------------------------------------------------- Misc */ .toast-host { position: fixed; right: 18px; bottom: 18px; z-index: 100; display: flex; flex-direction: column; gap: 8px; } .toast { background: var(--panel); border: 1px solid var(--border-2); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 11px 14px; box-shadow: var(--shadow); font-size: 14px; max-width: 340px; animation: slidein .2s ease; } .toast.err { border-left-color: var(--alarm); } .toast.ok { border-left-color: var(--ok); } @keyframes slidein { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } } .empty { text-align: center; color: var(--muted); padding: 40px 20px; } .chips { display: flex; gap: 8px; flex-wrap: wrap; } .gauge-mini { display: flex; align-items: center; gap: 10px; } .gauge-mini .gv { font-family: var(--font-mono); font-size: 18px; font-weight: 600; } .muted { color: var(--muted); } .right { text-align: right; } .nowrap { white-space: nowrap; } .hidden { display: none !important; } .chart-wrap { position: relative; height: 360px; } .chart-wrap.short { height: 240px; } .ws-dot { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); } .ws-dot .led { width: 9px; height: 9px; } /* Segmented control (2D/3D) */ .seg { display: inline-flex; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px; gap: 3px; } .seg button { appearance: none; cursor: pointer; border: none; background: none; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--muted); padding: 6px 16px; border-radius: 6px; transition: background .15s, color .15s; } .seg button:hover { color: var(--text); } .seg button.active { background: var(--accent); color: #03252e; } @media (max-width: 720px) { .nav { display: none; } .appbar { gap: 10px; padding: 0 12px; } .wrap { padding: 16px 12px 50px; } .nav.mobile { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: var(--panel); border-top: 1px solid var(--border); padding: 6px; justify-content: space-around; z-index: 60; } .nav.mobile a { flex: 1; text-align: center; } } @media (prefers-reduced-motion: reduce) { .led.alarm, .pin.alarm { animation: none; } .toast { animation: none; } }