vibes
This commit is contained in:
root
@@ -0,0 +1,80 @@
|
||||
/* The operator's console: the site's look, with a red accent so it is never mistaken for the player site. */
|
||||
|
||||
body.admin { --accent: #ff5577; background: linear-gradient(180deg, #07030f, #12061f 60%, #240a1c); min-height: 100vh; }
|
||||
body.admin::after { content: ""; position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.12) 3px, rgba(0,0,0,0) 4px); }
|
||||
|
||||
.a-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.4rem; padding: 0.7rem 1.2rem; background: rgba(7, 3, 15, 0.96); border-bottom: 2px solid var(--accent); }
|
||||
.a-brand { font-family: var(--display); letter-spacing: 0.3em; font-size: 0.95rem; }
|
||||
.a-brand b { color: var(--accent); }
|
||||
.a-note { color: var(--dim); font-size: 0.8rem; letter-spacing: 0.1em; }
|
||||
.a-main { max-width: 1240px; margin: 0 auto; padding: 1rem 1rem 6rem; position: relative; z-index: 1; }
|
||||
.a-tabs { display: flex; gap: 0.3rem; margin: 1rem 0; }
|
||||
.a-tabs .tab.on { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 16px rgba(255, 85, 119, 0.55); color: #07030f; }
|
||||
|
||||
.a-login { max-width: 420px; margin: 12vh auto 0; padding: 0 1rem; position: relative; z-index: 1; }
|
||||
.a-login h1 { font-family: var(--display); font-size: 1.6rem; letter-spacing: 0.3em; margin: 0 0 1rem; text-align: center; }
|
||||
.a-login h1 b { color: var(--accent); }
|
||||
|
||||
.a-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding: 0.8rem 1rem; }
|
||||
.a-filters label { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 15rem; min-width: 0; max-width: 24rem; }
|
||||
.a-filters label.check { flex: none; }
|
||||
.a-filters input[type="text"] { width: 100%; max-width: 16rem; }
|
||||
/* a callsign can be 40 characters: the dropdown shrinks and truncates instead of widening the page */
|
||||
.a-filters select { flex: 1; min-width: 0; max-width: 100%; width: auto; text-overflow: ellipsis; }
|
||||
|
||||
.scroll { overflow-x: auto; }
|
||||
table.atable { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
|
||||
table.atable th { text-align: left; font-weight: 400; font-size: 0.75rem; letter-spacing: 0.18em; color: var(--dim); padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
|
||||
table.atable th button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; text-transform: inherit; }
|
||||
table.atable th button:hover, table.atable th button[aria-sort] { color: var(--cyan); }
|
||||
table.atable td { padding: 0.5rem 0.8rem; border-bottom: 1px dashed var(--faint); vertical-align: top; }
|
||||
table.atable tr.arow { cursor: pointer; }
|
||||
table.atable tr.arow:hover td { background: rgba(255, 85, 119, 0.07); }
|
||||
table.atable tr.sel td { background: rgba(255, 85, 119, 0.13); }
|
||||
table.atable td.num { text-align: right; font-variant-numeric: tabular-nums; }
|
||||
table.atable td.nowrap { white-space: nowrap; }
|
||||
table.atable tr.more td { background: rgba(0, 0, 0, 0.35); }
|
||||
.detail-json { margin: 0; padding: 0.6rem 0.8rem; background: #05020c; border: 1px solid var(--faint); font-size: 0.85rem; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
|
||||
|
||||
.badge.lime { color: var(--lime); }
|
||||
.badge.violet { color: var(--violet); }
|
||||
.badge.dim { color: var(--dim); }
|
||||
|
||||
.a-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.2rem; align-items: start; }
|
||||
.a-detail { margin-top: 1.2rem; }
|
||||
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1.2rem; padding: 0.8rem 1rem; }
|
||||
.kv dt { color: var(--dim); letter-spacing: 0.12em; font-size: 0.8rem; }
|
||||
.kv dd { margin: 0; overflow-wrap: anywhere; }
|
||||
.code-view { margin: 0; padding: 0.8rem 1rem; max-height: 22rem; overflow: auto; background: #05020c; border-top: 1px solid var(--faint); font-size: 0.85rem; white-space: pre; }
|
||||
.a-empty { padding: 1rem; color: var(--dim); letter-spacing: 0.1em; }
|
||||
.a-foot { padding: 0.7rem 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; color: var(--dim); }
|
||||
|
||||
/* ---- the map ---------------------------------------------------------------- */
|
||||
|
||||
.map-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--faint); }
|
||||
.map-tools .btn { min-width: 2.2rem; }
|
||||
.map-tools label.check { font-size: 0.75rem; letter-spacing: 0.12em; }
|
||||
.map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; }
|
||||
.map-wrap { position: relative; height: min(72vh, 760px); min-height: 380px; background: #05020c; overflow: hidden; }
|
||||
.map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; outline-offset: -3px; }
|
||||
.map-canvas:active { cursor: grabbing; }
|
||||
.map-tip { position: absolute; z-index: 2; max-width: 20rem; padding: 0.3rem 0.6rem; font-size: 0.8rem; pointer-events: none; background: rgba(7, 3, 15, 0.95); border: 1px solid var(--cyan); box-shadow: 0 0 12px rgba(40, 245, 255, 0.35); }
|
||||
.map-tip[hidden] { display: none; }
|
||||
.map-readout { position: absolute; right: 0.6rem; bottom: 0.4rem; font-size: 0.75rem; color: var(--dim); pointer-events: none; text-shadow: 0 0 4px #000; }
|
||||
.map-side { border-left: 1px solid var(--faint); min-width: 0; max-height: min(72vh, 760px); overflow-y: auto; }
|
||||
.map-info .kv { grid-template-columns: max-content minmax(0, 1fr); padding: 0.6rem 0.9rem; font-size: 0.88rem; }
|
||||
.map-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: 0.75rem; letter-spacing: 0.12em; }
|
||||
.map-legend .dot { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; margin-right: 0.4rem; vertical-align: -0.05rem; background: var(--dim); }
|
||||
.map-legend .dot[data-c="0"] { background: #8fb4d9; }
|
||||
.map-legend .dot[data-c="1"] { background: #63e08a; }
|
||||
.map-legend .dot[data-c="2"] { background: #4ee6ff; }
|
||||
.map-legend .dot[data-c="3"] { background: #ffb62e; }
|
||||
.map-legend .dot.ship { background: none; border: 2px solid #ff3ad8; box-shadow: 0 0 6px #ff3ad8; }
|
||||
.map-legend .dot.box { background: #ffb62e; border-radius: 0; width: 0.55rem; height: 0.55rem; }
|
||||
.map-legend .dot.orbit { background: none; border-radius: 0; border-top: 2px dashed rgba(120, 245, 255, 0.9); width: 0.8rem; height: 0; margin-top: 0.35rem; }
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.map-layout { grid-template-columns: minmax(0, 1fr); }
|
||||
.map-side { border-left: 0; border-top: 1px solid var(--faint); max-height: none; }
|
||||
.map-wrap { height: 58vh; min-height: 320px; }
|
||||
}
|
||||
Reference in New Issue
Block a user