/* easyHermes appliance UI — dark by default, optional light mode. */ :root { --bg: #101820; --bg-2: #182430; --bg-3: #1f2e3d; --border: #2c3a48; --text: #eef3f7; --muted: #b8c7d3; --dim: #7c8b98; --accent: #8bd3ff; --accent-2: #2b6cb0; --ok: #34d399; --warn: #fbbf24; --err: #f87171; } /* Light (daylight) mode — opt-in via . */ html[data-theme="light"] { --bg: #f4f7fb; --bg-2: #ffffff; --bg-3: #eef2f7; --border: #d7dee8; --text: #1b2430; --muted: #4b5563; --dim: #6b7280; --accent: #2563eb; --accent-2: #2563eb; --ok: #059669; --warn: #b45309; --err: #dc2626; } html[data-theme="light"] body { background: var(--bg); } html[data-theme="light"] .card, html[data-theme="light"] table { box-shadow: 0 1px 2px rgba(16,24,40,.05); } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; display: flex; flex-direction: column; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } pre { background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 12px; overflow-x: auto; white-space: pre-wrap; word-break: break-word; } /* nav */ .navbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 22px; background: var(--bg-2); border-bottom: 1px solid var(--border); } .brand-link { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; font-size: 17px; } .brand-link:hover { text-decoration: none; } .brand-mark { color: var(--accent); font-size: 20px; } .nav-links { display: flex; align-items: center; gap: 4px; } .nav-link { padding: 7px 12px; border-radius: 8px; color: var(--muted); font-size: 14px; } .nav-link:hover { background: var(--bg-3); color: var(--text); text-decoration: none; } .nav-link.logout { color: var(--dim); } .theme-toggle { background: none; border: 0; cursor: pointer; font-family: inherit; font-size: 15px; line-height: 1; } .theme-icon-light { display: none; } html[data-theme="light"] .theme-icon-dark { display: none; } html[data-theme="light"] .theme-icon-light { display: inline; } .nav-dropdown { position: relative; } .nav-dropdown .dropdown-content { display: none; position: absolute; right: 0; top: 100%; background: var(--bg-3); border: 1px solid var(--border); border-radius: 8px; min-width: 140px; z-index: 40; padding: 6px 0; } .nav-dropdown:hover .dropdown-content { display: block; } .dropdown-content a { display: block; padding: 8px 14px; color: var(--muted); font-size: 14px; } .dropdown-content a:hover { background: var(--bg-2); color: var(--text); text-decoration: none; } /* layout */ .container { flex: 1; width: min(1080px, calc(100vw - 40px)); margin: 26px auto; } .container.wide { width: min(1400px, calc(100vw - 24px)); } .footer { padding: 14px 22px; border-top: 1px solid var(--border); color: var(--dim); font-size: 13px; text-align: center; } h1 { font-size: 26px; margin: 0 0 6px; } h2 { font-size: 19px; margin: 26px 0 10px; } .subtitle { color: var(--muted); margin: 0 0 22px; } /* cards */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; } .card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; } .card h3 { margin: 0 0 12px; font-size: 15px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; } .kv { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 14px; } .kv:last-child { border-bottom: 0; } .kv .k { color: var(--dim); } .kv .v { color: var(--text); text-align: right; word-break: break-all; } /* status pills */ .pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; } .pill.ok { background: rgba(52, 211, 153, .15); color: var(--ok); } .pill.warn { background: rgba(251, 191, 36, .15); color: var(--warn); } .pill.err { background: rgba(248, 113, 113, .15); color: var(--err); } .pill.dim { background: var(--bg-3); color: var(--dim); } /* forms + buttons */ label { display: block; margin: 14px 0 6px; font-size: 14px; color: var(--muted); } input[type=text], input[type=password], input[type=email], input[type=number], select, textarea { width: 100%; padding: 10px 12px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; font-size: 14px; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-2); } .btn { display: inline-block; padding: 9px 18px; background: var(--accent-2); color: #fff; border: 0; border-radius: 8px; font-size: 14px; cursor: pointer; } .btn:hover { filter: brightness(1.15); text-decoration: none; } .btn.secondary { background: var(--bg-3); color: var(--muted); border: 1px solid var(--border); } .btn.danger { background: #b03030; } .btn:disabled { opacity: .5; cursor: not-allowed; } .actions { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; } /* tables */ table { width: 100%; border-collapse: collapse; background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; font-size: 14px; } th, td { padding: 10px 14px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; } th { background: var(--bg-3); color: var(--muted); font-weight: 600; } tr:last-child td { border-bottom: 0; } /* alerts */ .alert { padding: 12px 16px; border-radius: 8px; margin: 0 0 18px; font-size: 14px; } .alert.error { background: rgba(248, 113, 113, .12); border: 1px solid rgba(248, 113, 113, .4); color: var(--err); } .alert.ok { background: rgba(52, 211, 153, .12); border: 1px solid rgba(52, 211, 153, .4); color: var(--ok); } .alert.info { background: rgba(139, 211, 255, .1); border: 1px solid rgba(139, 211, 255, .35); color: var(--accent); } /* login */ .login-wrap { flex: 1; display: grid; place-items: center; padding: 30px 16px; } .login-box { width: min(400px, 100%); background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px; padding: 34px; } .login-box h1 { text-align: center; margin-bottom: 4px; } .login-box .subtitle { text-align: center; } /* embedded dashboard iframe */ .embed-frame { width: 100%; height: calc(100vh - 130px); border: 1px solid var(--border); border-radius: 10px; background: var(--bg-2); } /* misc */ .muted { color: var(--dim); font-size: 13px; } .spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--border); border-top: 2px solid var(--accent); border-radius: 50%; animation: spin 1s linear infinite; vertical-align: -3px; } @keyframes spin { to { transform: rotate(360deg); } }