/* ------------------------------------------------ vapordon skin, the per site rethinks

   frame.js puts data-vapor-site on <html> (hub, drive, ludodon, chat, naut, heliodon, velociraptor,
   pteroglyph, chronodon), everything here hangs off that so one site cant mess with another
*/

/* ------------------------------------------------ hub, the "my games" list from the steam main window */

[data-vapor-site="hub"] .wrap { max-width: 980px !important; }
[data-vapor-site="hub"] header { margin-bottom: 14px !important; }
/* the hub logo is the stego png now, 3x so the pixels stay square */
[data-vapor-site="hub"] .mark::before { content: ""; width: 48px; height: 48px; flex: none;
  background: url("/__vapor/skin/icons/stego.png") center / 48px 48px no-repeat,
    url("/__vapor/skin/icons/rings/stego.png") center / 48px 48px no-repeat; image-rendering: pixelated; }
[data-vapor-site="hub"] .mark svg { display: none !important; }
[data-vapor-site="hub"] h1 { font-size: 32px !important; }
[data-vapor-site="hub"] .sub { font-size: 14px !important; }

[data-vapor-site="hub"] .grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  background: var(--v-window) !important;
  border: 1px solid !important;
  border-color: var(--v-inset) !important;
  padding: 0 0 2px !important;
}
.v-listhead, [data-vapor-site="hub"] a.card {
  display: grid !important;
  grid-template-columns: 48px 160px minmax(0, 1fr) 150px 120px 100px;
  align-items: center;
  column-gap: 0;
}
.v-listhead { order: -1; padding: 0 !important; }
.v-listhead span {
  background: var(--v-control);
  border: 1px solid; border-color: var(--v-raised);
  padding: 4px 8px; color: var(--v-text); white-space: nowrap; overflow: hidden; font-size: 13px;
}
.v-listhead span:first-child { padding: 4px 0; }
[data-vapor-site="hub"] a.card {
  background: transparent !important;
  border: 0 !important;
  padding: 4px 0 !important;
  min-height: 44px;
}
/* roomier than the real 2005 list on purpose, 12 px rows were a squint fest */
[data-vapor-site="hub"] a.card > * > *, [data-vapor-site="hub"] .desc { padding: 0 8px !important; }
[data-vapor-site="hub"] a.card:hover { background: var(--v-sel) !important; }
[data-vapor-site="hub"] a.card:hover * { color: var(--v-bright) !important; }
[data-vapor-site="hub"] .card-top, [data-vapor-site="hub"] .card-foot { display: contents !important; }
[data-vapor-site="hub"] a.card::before {
  content: ""; grid-column: 1; grid-row: 1; width: 32px; height: 32px; justify-self: center;
  background: center / 32px 32px no-repeat; image-rendering: pixelated;
}
[data-vapor-site="hub"] .name {
  grid-column: 2; grid-row: 1;
  font: 700 15px var(--v-head) !important; color: var(--v-text) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-vapor-site="hub"] .desc {
  grid-column: 3; grid-row: 1; margin: 0 !important; min-height: 0 !important;
  font-size: 13px !important; color: var(--v-dim) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* status column, the steam way of saying its fine. the little dot stays so the colour isnt the only hint */
[data-vapor-site="hub"] .dot {
  grid-column: 4; grid-row: 1; width: auto !important; height: auto !important; border-radius: 0 !important;
  background: none !important; align-self: center !important; font-size: 13px; color: var(--v-dim); white-space: nowrap;
  display: flex; align-items: center; gap: 7px;
}
[data-vapor-site="hub"] .dot::before {
  content: ""; width: 8px; height: 8px; flex: none; border-radius: 50% !important; background: var(--v-off);
}
[data-vapor-site="hub"] .dot::after { content: "checking.."; }
[data-vapor-site="hub"] .dot.up { color: var(--v-ok) !important; background: none !important; }
[data-vapor-site="hub"] .dot.up::before { background: var(--v-ok); }
[data-vapor-site="hub"] .dot.up::after { content: "100% - ready"; }
[data-vapor-site="hub"] .dot.down { color: var(--v-bad) !important; background: none !important; }
[data-vapor-site="hub"] .dot.down::before { background: var(--v-bad-dot); border-radius: 1px !important; }
[data-vapor-site="hub"] .dot.down::after { content: "not responding"; }
/* right now column, frame.js sorts the text into busy / warn / quiet */
[data-vapor-site="hub"] .extra {
  grid-column: 5; grid-row: 1; font-size: 13px !important; color: var(--v-dim) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-vapor-site="hub"] .extra[data-vapor-state="busy"] { color: var(--v-gold) !important; font-weight: 700; }
[data-vapor-site="hub"] .extra[data-vapor-state="warn"] { color: var(--v-amber) !important; }
[data-vapor-site="hub"] .path { grid-column: 6; grid-row: 1; font-size: 13px !important; color: var(--v-off) !important; }

/* same order as the menu row, drive and ludodon on top */
[data-vapor-site="hub"] a.card[href^="/drive"]     { order: 1; }
[data-vapor-site="hub"] a.card[href^="/games"]     { order: 2; }
[data-vapor-site="hub"] a.card[href^="/chat"]      { order: 3; }
[data-vapor-site="hub"] a.card[href^="/tracks"]    { order: 4; }
[data-vapor-site="hub"] a.card[href^="/solar"]     { order: 5; }
[data-vapor-site="hub"] a.card[href^="/speed"]     { order: 6; }
[data-vapor-site="hub"] a.card[href^="/qr"]        { order: 7; }
[data-vapor-site="hub"] a.card[href^="/chronodon"] { order: 8; }
/* the line icons also get their ring from rings.py, under the icon */
[data-vapor-site="hub"] a.card[href^="/drive"]::before     { background-image: url("/__vapor/skin/icons/drive.png"), url("/__vapor/skin/icons/rings/drive.png"); }
[data-vapor-site="hub"] a.card[href^="/games"]::before     { background-image: url("/__vapor/skin/icons/ludodon.png"); }
[data-vapor-site="hub"] a.card[href^="/chat"]::before      { background-image: url("/__vapor/skin/icons/chat.png"); }
[data-vapor-site="hub"] a.card[href^="/tracks"]::before    { background-image: url("/__vapor/skin/icons/naut.png"), url("/__vapor/skin/icons/rings/naut.png"); }
[data-vapor-site="hub"] a.card[href^="/solar"]::before     { background-image: url("/__vapor/skin/icons/heliodon.png"), url("/__vapor/skin/icons/rings/heliodon.png"); }
[data-vapor-site="hub"] a.card[href^="/speed"]::before     { background-image: url("/__vapor/skin/icons/velociraptor.png"), url("/__vapor/skin/icons/rings/velociraptor.png"); }
[data-vapor-site="hub"] a.card[href^="/qr"]::before        { background-image: url("/__vapor/skin/icons/pteroglyph.png"); }
[data-vapor-site="hub"] a.card[href^="/chronodon"]::before { background-image: url("/__vapor/skin/icons/chronodon.png"), url("/__vapor/skin/icons/rings/chronodon.png"); }

[data-vapor-site="hub"] footer { margin-top: 12px !important; text-align: left !important; color: var(--v-off) !important; font-size: 13px !important; }

/* phones only get icon, name and status, like the compact steam list */
@media (max-width: 620px) {
  .v-listhead, [data-vapor-site="hub"] a.card { grid-template-columns: 46px minmax(0, 1fr) 124px; }
  .v-listhead span:nth-child(3), .v-listhead span:nth-child(5), .v-listhead span:nth-child(6),
  [data-vapor-site="hub"] .desc, [data-vapor-site="hub"] .extra, [data-vapor-site="hub"] .path { display: none !important; }
  [data-vapor-site="hub"] .dot { grid-column: 3; }
}

/* ------------------------------------------------ chat, the friends chat window */

[data-vapor-site="chat"] .page { max-width: 860px !important; }
[data-vapor-site="chat"] .chat-card { padding: 6px !important; gap: 0 !important; }
[data-vapor-site="chat"] .room-tabs {
  display: flex !important; gap: 2px !important; padding: 0 !important; margin: 0 0 -1px !important;
  border: 0 !important; background: transparent !important; position: relative; z-index: 1;
}
/* property sheet tabs, the open one melts into the page under it */
[data-vapor-site="chat"] .room-tab {
  border-bottom: 0 !important; padding: 3px 12px 4px !important; margin: 0 !important;
}
[data-vapor-site="chat"] .room-tab.active {
  background: var(--v-control) !important;
  border-color: var(--v-lit) var(--v-shade) transparent var(--v-lit) !important;
  border-style: solid !important; border-width: 1px 1px 0 !important;
  padding-bottom: 5px !important; margin-top: -2px !important;
}
[data-vapor-site="chat"] .chat-status {
  background: var(--v-control) !important; color: var(--v-dim) !important;
  border: 1px solid !important; border-color: var(--v-raised) !important; border-bottom: 0 !important;
  padding: 4px 8px !important; font-size: 12px !important;
}
[data-vapor-site="chat"] .room-title { color: var(--v-gold) !important; }
[data-vapor-site="chat"] .messages {
  background: var(--v-window) !important;
  border: 1px solid !important; border-color: var(--v-inset) !important;
  padding: 6px 8px !important; gap: 1px !important;
  display: flex !important; flex-direction: column !important;
}
/* no bubbles in 2005, just name: text lines */
[data-vapor-site="chat"] .msg {
  display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; column-gap: 6px;
  align-self: stretch !important; max-width: none !important; width: auto !important;
  background: transparent !important; border: 0 !important; padding: 1px 2px !important; margin: 0 !important;
  text-align: left !important; position: relative;
}
[data-vapor-site="chat"] .msg:hover { background: rgba(149, 136, 49, .14) !important; }
[data-vapor-site="chat"] .msg .msg-time {
  order: -1; display: inline !important; margin: 0 !important; text-align: left !important;
  font-size: 11px !important; color: var(--v-off) !important;
}
[data-vapor-site="chat"] .msg .msg-user { order: 0; display: inline !important; margin: 0 !important; font-weight: 700 !important; font-size: 12px !important; }
[data-vapor-site="chat"] .msg .msg-user::after { content: ":"; color: var(--v-dim); }
[data-vapor-site="chat"] .msg.mine::before { content: "you:"; order: 0; font-weight: 700; color: var(--v-dim); }
[data-vapor-site="chat"] .msg .msg-text { order: 1; font-size: 12px !important; color: var(--v-gold) !important; flex: 1 1 0; min-width: 40%; }
[data-vapor-site="chat"] .msg.mine .msg-text { color: var(--v-text) !important; }
[data-vapor-site="chat"] .msg .msg-text.deleted { color: var(--v-off) !important; }
[data-vapor-site="chat"] .reply-quote {
  order: -2; flex-basis: 100%; margin: 2px 0 0 40px !important; padding: 0 0 0 6px !important;
  background: transparent !important; border: 0 !important; border-left: 2px solid var(--v-lit) !important;
  font-size: 11px !important; color: var(--v-dim) !important;
}
[data-vapor-site="chat"] .msg-image, [data-vapor-site="chat"] .msg-sticker {
  order: 1; margin: 3px 0 !important; border: 1px solid !important; border-color: var(--v-inset) !important;
}
[data-vapor-site="chat"] .reactions { order: 3; flex-basis: 100%; padding-left: 40px; }
[data-vapor-site="chat"] .reactions:empty { display: none !important; }
[data-vapor-site="chat"] .reaction-chip { background: var(--v-control) !important; border: 1px solid !important; border-color: var(--v-raised) !important; color: var(--v-text) !important; }
[data-vapor-site="chat"] .reaction-chip.mine { border-color: var(--v-inset) !important; background: var(--v-window) !important; color: var(--v-gold) !important; }
[data-vapor-site="chat"] .seen-mark { order: 2; font-size: 11px !important; color: var(--v-off) !important; }
[data-vapor-site="chat"] .mention { color: var(--v-bright) !important; background: transparent !important; text-decoration: underline; }
[data-vapor-site="chat"] .mention.me { background: var(--v-sel) !important; color: var(--v-bright) !important; text-decoration: none; }
[data-vapor-site="chat"] .msg-actions {
  background: var(--v-control) !important; border: 1px solid !important; border-color: var(--v-raised) !important;
}
[data-vapor-site="chat"] .msg-action { border: 0 !important; background: transparent !important; color: var(--v-dim) !important; }
[data-vapor-site="chat"] .msg-action:hover { background: var(--v-sel) !important; color: var(--v-bright) !important; }
[data-vapor-site="chat"] .msg.system { color: var(--v-off) !important; font-style: italic; }
[data-vapor-site="chat"] .composer {
  background: var(--v-control) !important; border: 0 !important; padding: 6px 0 0 !important; gap: 4px !important;
}
[data-vapor-site="chat"] .composer textarea { min-height: 26px; }
[data-vapor-site="chat"] .reply-bar { background: var(--v-window) !important; border: 1px solid var(--v-shade) !important; color: var(--v-dim) !important; }
[data-vapor-site="chat"] .typing-indicator { color: var(--v-off) !important; font-style: italic; }
[data-vapor-site="chat"] .color-dot { border: 1px solid var(--v-shade) !important; }
[data-vapor-site="chat"] .color-dot.selected { outline: 1px solid var(--v-bright) !important; outline-offset: 1px; }

/* ------------------------------------------------ drive */

[data-vapor-site="drive"] .card-preview, [data-vapor-site="drive"] .file-card .preview {
  background: var(--v-window) !important;
  border: 1px solid !important; border-color: var(--v-inset) !important;
}
[data-vapor-site="drive"] .card-name { color: var(--v-text) !important; font: 700 12px var(--v-head) !important; }
[data-vapor-site="drive"] .file-card:has(input[type="checkbox"]:checked) { outline: 1px solid var(--v-gold) !important; }
[data-vapor-site="drive"] .upload-card { border-style: solid !important; }
[data-vapor-site="drive"] .drop-zone, [data-vapor-site="drive"] .upload-dropzone {
  background: var(--v-window) !important; border: 1px dashed var(--v-lit) !important;
}
[data-vapor-site="drive"] .selection-bar { background: var(--v-sel) !important; color: var(--v-bright) !important; border: 1px solid #000 !important; }
[data-vapor-site="drive"] .selection-bar * { color: var(--v-bright) !important; }

/* ------------------------------------------------ ludodon, a bit of server browser */

[data-vapor-site="ludodon"] .server.friend { border: 1px dashed var(--v-lit) !important; }
[data-vapor-site="ludodon"] .fstrip {
  background: var(--v-window) !important; color: var(--v-dim) !important;
  border-bottom: 1px dashed var(--v-lit) !important; border-radius: 0 !important;
}
[data-vapor-site="ludodon"] .fstrip b, [data-vapor-site="ludodon"] .chart figcaption .ftag { color: var(--v-bright) !important; }
[data-vapor-site="ludodon"] .stat, [data-vapor-site="ludodon"] .stats > div {
  background: var(--v-window) !important;
  border: 1px solid !important; border-color: var(--v-inset) !important;
}
[data-vapor-site="ludodon"] img { image-rendering: pixelated; }

/* server states, same shapes as the real page: round up, ring waking, square down, grey asleep */
[data-vapor-site="ludodon"] .status .dot { border-radius: 50% !important; background: var(--v-off) !important; border: 0 !important; }
[data-vapor-site="ludodon"] .status[data-s="online"] { color: var(--v-ok) !important; }
[data-vapor-site="ludodon"] .status[data-s="online"] .dot { background: var(--v-ok) !important; }
[data-vapor-site="ludodon"] .status[data-s="starting"] { color: var(--v-amber) !important; }
[data-vapor-site="ludodon"] .status[data-s="starting"] .dot { background: transparent !important; border: 2px solid var(--v-amber) !important; }
[data-vapor-site="ludodon"] .status[data-s="unresponsive"], [data-vapor-site="ludodon"] .status[data-s="crashed"],
[data-vapor-site="ludodon"] .status[data-s="offline"] { color: var(--v-bad) !important; }
[data-vapor-site="ludodon"] .status[data-s="unresponsive"] .dot, [data-vapor-site="ludodon"] .status[data-s="crashed"] .dot,
[data-vapor-site="ludodon"] .status[data-s="offline"] .dot { background: var(--v-bad-dot) !important; border-radius: 2px !important; }
[data-vapor-site="ludodon"] .status[data-s="sleeping"] { color: var(--v-dim) !important; }
[data-vapor-site="ludodon"] .status[data-s="sleeping"] .dot { background: var(--v-off) !important; }
/* people playing is the in-game gold from the steam friends list */
[data-vapor-site="ludodon"] .pcount b, [data-vapor-site="ludodon"] .players-head b,
[data-vapor-site="ludodon"] #sub .sline b:nth-of-type(2) { color: var(--v-gold) !important; }
[data-vapor-site="ludodon"] #sub .sline b:nth-of-type(1) { color: var(--v-ok) !important; }

/* ------------------------------------------------ heliodon */

[data-vapor-site="heliodon"] .bottom-nav { border-top: 1px solid var(--v-lit) !important; }
[data-vapor-site="heliodon"] .nav-btn { border-top: 0 !important; }
[data-vapor-site="heliodon"] .nav-btn svg { stroke: currentColor !important; }
[data-vapor-site="heliodon"] .stat-card { background: var(--v-control) !important; }

/* ------------------------------------------------ n.a.u.t and chronodon maps */

[data-vapor-site="naut"] .panel, [data-vapor-site="naut"] .sheet { outline: 1px solid #000 !important; }
[data-vapor-site="naut"] .ctl button, [data-vapor-site="naut"] .ctl a { outline: 1px solid #000 !important; }
[data-vapor-site="chronodon"] .screen { border: 1px solid !important; border-color: var(--v-inset) !important; }
[data-vapor-site="chronodon"] .mapbox { border: 1px solid !important; border-color: var(--v-inset) !important; }
[data-vapor-site="chronodon"] .bar > i { background: repeating-linear-gradient(90deg, var(--v-gold) 0 6px, transparent 6px 8px) !important; }
[data-vapor-site="chronodon"] .btn { color: var(--v-text) !important; }