/* FindWH Eve — lightweight UI. Themes: data-theme="light|dark|auto" on . */ :root { --bg: #f4f6f9; --bg-card: #ffffff; --fg: #1b2330; --muted: #66707f; --accent: #0f6fde; --accent-fg: #ffffff; --border: #d8dee7; --ok: #137333; --warn: #9a6700; --bad: #c5221f; --info: #0f6fde; --flash-ok-bg: #e6f4ea; --flash-warn-bg: #fef7e0; --flash-err-bg: #fce8e6; } [data-theme="dark"] { --bg: #14181f; --bg-card: #1c2230; --fg: #dde3ec; --muted: #8b95a7; --accent: #58a7bf; --accent-fg: #0c1218; --border: #2c3547; --ok: #4caf7d; --warn: #d8a531; --bad: #e06c64; --info: #58a7bf; --flash-ok-bg: #153526; --flash-warn-bg: #3a2f10; --flash-err-bg: #3d1c1a; } @media (prefers-color-scheme: dark) { [data-theme="auto"] { --bg: #14181f; --bg-card: #1c2230; --fg: #dde3ec; --muted: #8b95a7; --accent: #58a7bf; --accent-fg: #0c1218; --border: #2c3547; --ok: #4caf7d; --warn: #d8a531; --bad: #e06c64; --info: #58a7bf; --flash-ok-bg: #153526; --flash-warn-bg: #3a2f10; --flash-err-bg: #3d1c1a; } } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .mono, code { font-family: ui-monospace, Consolas, monospace; } .muted { color: var(--muted); } .eol { color: var(--bad); font-weight: 600; } /* --- layout --- */ .container { max-width: 960px; margin: 0 auto; padding: 1rem; } .topnav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 1rem; background: var(--bg-card); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; } .topnav .brand { font-weight: 700; font-size: 1.1rem; color: var(--fg); } .topnav nav { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; } .topnav nav a { color: var(--fg); } .topnav .admin-link { color: var(--warn); font-weight: 600; } .footer { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; max-width: 960px; margin: 2rem auto 0; padding: 1rem; color: var(--muted); font-size: .85rem; } .page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .head-meta { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; } /* --- components --- */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.2rem; margin: 1rem 0; } .auth-card { max-width: 420px; margin: 3rem auto; } .danger-zone { border-color: var(--bad); } .btn { display: inline-block; background: var(--accent); color: var(--accent-fg); border: 0; border-radius: 8px; padding: .55rem 1.1rem; cursor: pointer; font: inherit; font-weight: 600; } .btn:hover { filter: brightness(1.08); text-decoration: none; } .btn-small { padding: .3rem .7rem; font-size: .9rem; } .btn-ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent); } .btn-danger { background: var(--bad); color: #fff; } .linklike { background: none; border: 0; color: inherit; cursor: pointer; font: inherit; padding: 0; } .linklike:hover { text-decoration: underline; } .theme-toggle { background: none; border: 1px solid var(--border); color: var(--fg); border-radius: 8px; cursor: pointer; padding: .2rem .55rem; font-size: 1rem; } label { display: block; margin: .7rem 0 .2rem; } label.check { display: flex; align-items: center; gap: .5rem; margin: .4rem 0; } input[type="text"], input[type="password"], input[type="email"], input[type="number"], select { width: 100%; max-width: 380px; padding: .5rem .6rem; margin-top: .2rem; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 8px; font: inherit; } input[type="checkbox"] { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); } button[type="submit"] { margin-top: .8rem; } .table { width: 100%; border-collapse: collapse; margin: 1rem 0; background: var(--bg-card); border-radius: 10px; overflow: hidden; } .table th, .table td { text-align: left; padding: .55rem .8rem; border-bottom: 1px solid var(--border); vertical-align: top; } .table th { color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; } .table tr:last-child td { border-bottom: 0; } .row-inactive { opacity: .55; } .badge { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 600; } .badge-ok { background: var(--flash-ok-bg); color: var(--ok); } .badge-degraded, .badge-paused { background: var(--flash-warn-bg); color: var(--warn); } .badge-down, .badge-blocked, .badge-lvl-error, .badge-lvl-critical { background: var(--flash-err-bg); color: var(--bad); } .badge-lvl-warning { background: var(--flash-warn-bg); color: var(--warn); } .badge-lvl-info { background: var(--flash-ok-bg); color: var(--info); } .flash { border-radius: 8px; padding: .6rem .9rem; margin: .7rem 0; } .flash-success { background: var(--flash-ok-bg); color: var(--ok); } .flash-warning { background: var(--flash-warn-bg); color: var(--warn); } .flash-error { background: var(--flash-err-bg); color: var(--bad); } .inline { display: inline; } .add-form { display: flex; gap: .6rem; align-items: center; margin: 1rem 0; flex-wrap: wrap; } .add-form input[type="text"] { max-width: 320px; margin-top: 0; } .add-form button { margin-top: 0; } .actions form { display: inline; } .hero { text-align: center; padding: 3rem 1rem 1.5rem; } .hero h1 { font-size: 2.2rem; margin-bottom: .3rem; } .hero .tagline { color: var(--muted); font-size: 1.1rem; } .hero-actions { display: flex; gap: .8rem; justify-content: center; margin-top: 1.4rem; } .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 1.5rem; } .features > div { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 1rem; } .admin-nav { display: flex; gap: .9rem; margin: .6rem 0 1rem; flex-wrap: wrap; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .8rem; margin: 1rem 0; } .stat { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: .8rem; text-align: center; } .stat strong { display: block; font-size: 1.5rem; } .stat span { color: var(--muted); font-size: .85rem; } .stat-bad strong { color: var(--bad); } .cols-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; align-items: start; } .counter { font-weight: 600; } .code { background: var(--bg); border: 1px solid var(--border); padding: .2rem .5rem; border-radius: 6px; font-size: 1.1rem; letter-spacing: .1em; } .captcha-box { margin: .8rem 0; } @media (max-width: 640px) { .table { display: block; overflow-x: auto; } .footer { flex-direction: column; } }