:root { --bg: #0e1217; --surface: #151b22; --surface-2: #1b232c; --line: #27313d; --text: #e6ebf1; --muted: #8a96a5; /* Accent: the hedgehog blue */ --accent: #007dff; --accent-hover: #2b93ff; --accent-text: #4da3ff; --accent-dim: #0f2f57; /* Game colours (also used for "Online" on that game's cards) */ --green: #6fcf73; /* Minecraft */ --green-dim: #2c4a2f; --ark: #3fd4ff; /* ARK: Survival Ascended cyan */ --ark-dim: #11414f; --discord: #5865f2; --red: #e0675b; --red-dim: #4a2622; --amber: #d9b45a; --radius: 10px; --mono: ui-monospace, "Cascadia Mono", "Consolas", "SFMono-Regular", monospace; --sans: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif; color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; } body { background: var(--bg); color: var(--text); font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; } /* Brand */ .brand { display: flex; align-items: center; gap: 10px; } .brand-name { font: 600 18px var(--mono); letter-spacing: -0.02em; } .brand-dot { color: var(--muted); } /* Login */ .login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(600px 300px at 50% 0%, rgba(0,125,255,.10), transparent 70%), var(--bg); } .login-card { width: 100%; max-width: 360px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 28px 24px 24px; display: flex; flex-direction: column; } .login-sub { color: var(--muted); margin: 10px 0 18px; } .login-card label { font-size: 13px; color: var(--muted); margin: 12px 0 6px; } .login-card input { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; } .login-card input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; } .login-card button { margin-top: 20px; font: 600 15px var(--sans); background: var(--accent); color: #fff; border: 0; border-radius: 8px; padding: 11px; cursor: pointer; } .login-card button:hover { filter: brightness(1.08); } .login-card button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; } .alert { margin: 0 0 6px; padding: 10px 12px; border-radius: 8px; background: var(--red-dim); color: #ffd9d4; font-size: 14px; } /* Dashboard */ .topbar { display: flex; justify-content: space-between; align-items: center; padding: 14px 24px; border-bottom: 1px solid var(--line); background: var(--surface); } .topbar-right { display: flex; align-items: center; gap: 14px; } .who { color: var(--muted); font: 13px var(--mono); } .btn-ghost { font: 500 13px var(--sans); color: var(--text); background: transparent; border: 1px solid var(--line); border-radius: 7px; padding: 6px 12px; cursor: pointer; } .btn-ghost:hover { border-color: var(--muted); } /* Content width: half-way between the old 1180px column and the screen edges. */ .dash { max-width: calc(50vw + 590px); margin: 0 auto; padding: 28px 24px 48px; } .dash-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; } .dash-head h1 { margin: 0; font-size: 24px; letter-spacing: -0.01em; } .dash-head h1 .dash-home { color: inherit; text-decoration: none; border-radius: 6px; } .dash-head h1 .dash-home:hover { color: var(--accent); } .dash-head h1 .dash-home:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .summary { margin: 0; color: var(--muted); font-family: var(--mono); font-size: 13px; } .grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 8px; border-top: 3px solid var(--line); } .card.is-online { border-top-color: var(--green); } .card.is-offline { border-top-color: var(--red-dim); } .card.is-offline .card-name, .card.is-offline .stats { opacity: .6; } .card-top { display: flex; justify-content: space-between; align-items: center; } .kind { font: 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .pill { display: inline-flex; align-items: center; gap: 6px; font: 600 12px var(--sans); padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--muted); } .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); } .is-online .pill { background: var(--green-dim); color: var(--green); } .is-online .dot { background: var(--green); box-shadow: 0 0 0 3px rgba(111,207,115,.18); } .is-offline .pill { background: var(--red-dim); color: #f0a49b; } .is-offline .dot { background: var(--red); } .is-checking .dot { animation: pulse 1s ease-in-out infinite alternate; } @keyframes pulse { from { opacity: .3; } to { opacity: 1; } } .card-name { margin: 2px 0 0; font-size: 17px; line-height: 1.3; } .motd { margin: 0; color: var(--muted); font-size: 13px; min-height: 1.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .stats > div { display: flex; flex-direction: column; min-width: 0; } .stat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .stat-val { font: 600 14px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .who-online { margin: 0; font-size: 12px; color: var(--muted); min-height: 0; } .who-online:empty { display: none; } .addr { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer; background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; color: var(--text); } .addr:hover { border-color: var(--accent); } .addr code { font: 12px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .addr-hint { font-size: 11px; color: var(--muted); flex: none; } .foot { color: var(--muted); font-size: 12px; margin-top: 18px; } /* Sections */ .section { margin-top: 36px; } .section:first-of-type { margin-top: 8px; } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid var(--line); } .section-head h2 { margin: 0; font-size: 19px; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; } .section-meta { color: var(--muted); font: 12px var(--mono); } .section-active { background: linear-gradient(180deg, rgba(0,125,255,.07), rgba(0,125,255,0) 70%); border: 1px solid var(--accent-dim); border-radius: 14px; padding: 18px 18px 6px; } .section-active .section-head { border-bottom-color: var(--accent-dim); } .live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(0,125,255,.22); animation: pulse 1.6s ease-in-out infinite alternate; } .subsection { margin-bottom: 16px; } .subhead { margin: 0 0 10px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); display: flex; align-items: center; gap: 8px; } .count { font: 600 11px var(--mono); color: var(--accent-text); background: var(--accent-dim); border-radius: 999px; padding: 1px 8px; letter-spacing: 0; } .empty { margin: 0 0 4px; color: var(--muted); font-size: 13px; } .grid:empty { display: none; } @media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } } @media (max-width: 520px) { .topbar { padding: 12px 16px; } .dash { padding: 20px 16px 40px; } .who { display: none; } } @media (prefers-reduced-motion: reduce) { .is-checking .dot { animation: none; } } /* Discord link page */ .link-card { max-width: 420px; } .link-title { font-size: 20px; margin: 16px 0 4px; } .link-points { margin: 0 0 18px; padding-left: 18px; color: var(--muted); font-size: 14px; } .link-points li { margin: 4px 0; } .link-points a, .login-sub a { color: var(--accent-text); } .link-who { display: flex; align-items: center; gap: 12px; margin: 14px 0 6px; } .link-who img { border-radius: 50%; } .link-who div { display: flex; flex-direction: column; } .link-who span { color: var(--muted); font-size: 13px; } .btn-primary { display: inline-flex; justify-content: center; align-items: center; gap: 8px; font: 600 15px var(--sans); text-decoration: none; text-align: center; background: var(--accent); color: #fff; border: 0; border-radius: 8px; padding: 11px 16px; cursor: pointer; } .btn-primary:hover { filter: brightness(1.08); } .btn-discord { background: var(--discord); color: #fff; } .btn-small { padding: 6px 12px; font-size: 13px; } .btn-link { background: none; border: 0; padding: 0; cursor: pointer; font: 13px var(--sans); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; } .btn-link:hover { color: var(--text); } .skip { display: block; text-align: center; margin-top: 14px; } .unlink-form { margin-top: 14px; text-align: center; } /* Discord chat */ .chat-me { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--muted); } .chat-me:hover { color: var(--text); } .chat-me img { border-radius: 50%; } .chat-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; overflow: hidden; } .chat-tabs { display: flex; gap: 4px; padding: 8px 8px 0; border-bottom: 1px solid var(--line); overflow-x: auto; } .chat-tab { font: 500 13px var(--sans); color: var(--muted); background: none; border: 0; padding: 8px 12px; border-radius: 7px 7px 0 0; cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; } .chat-tab:hover { color: var(--text); background: var(--surface-2); } .chat-tab.is-on { color: var(--text); border-bottom-color: var(--accent); } .chat-notice { padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); } .chat-notice-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; } .chat-messages { list-style: none; margin: 0; padding: 8px 0; height: 380px; overflow-y: auto; display: flex; flex-direction: column; } .msg { display: grid; grid-template-columns: 32px 1fr; gap: 0 12px; padding: 6px 16px 2px; } .msg:hover { background: rgba(255,255,255,.02); } .msg-avatar { border-radius: 50%; width: 32px; height: 32px; margin-top: 2px; } .msg-cont { padding-top: 0; } .msg-cont .msg-avatar { visibility: hidden; height: 0; } .msg-cont .msg-head { display: none; } .msg-body { min-width: 0; } .msg-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .msg-author { font-weight: 600; font-size: 14px; } .msg-tag { font: 600 10px var(--sans); text-transform: uppercase; letter-spacing: .04em; background: var(--accent); color: #fff; border-radius: 4px; padding: 1px 5px; } .msg-time { color: var(--muted); font-size: 11px; } .msg-text { font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; } .msg-text a, .msg-file { color: var(--accent-text); } .msg-file { display: inline-block; font-size: 13px; margin-top: 2px; } .msg-muted { color: var(--muted); font-style: italic; } .msg-empty { color: var(--muted); font-size: 14px; padding: 24px 16px; text-align: center; margin: auto 0; } .chat-compose { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); } .chat-compose textarea { flex: 1; resize: none; font: 14px/1.4 var(--sans); color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; max-height: 160px; } .chat-compose textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; } .chat-compose button { font: 600 14px var(--sans); background: var(--accent); color: #fff; border: 0; border-radius: 8px; padding: 0 16px; cursor: pointer; } .chat-compose button:disabled { opacity: .5; cursor: default; } .chat-hint { margin: 0; padding: 0 12px 10px; color: var(--muted); font-size: 11px; } @media (max-width: 520px) { .chat-messages { height: 60vh; } .msg { padding-left: 10px; padding-right: 10px; } } .msg-initial { display: grid; place-items: center; background: var(--accent); color: #fff; font: 600 14px var(--sans); } .chat-messages > :first-child { margin-top: auto; } /* newest messages sit at the bottom, like Discord */ /* Top row: Active Servers (2/3) + Discord (1/3) */ .top-row { display: grid; gap: 20px; margin-top: 8px; align-items: stretch; } .top-row.has-chat { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .top-row > .section { margin-top: 0; } .section-chat { background: linear-gradient(180deg, rgba(88,101,242,.08), rgba(88,101,242,0) 70%); border: 1px solid rgba(88,101,242,.35); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; /* Same height as Active Servers, but never shorter than this. */ min-height: 610px; } .section-chat .section-head { border-bottom-color: rgba(88,101,242,.35); } .section-chat .chat-box { flex: 1; min-height: 0; } .section-chat .chat-messages { height: auto; flex: 1 1 0; min-height: 0; } .section-chat .chat-me span { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 960px) { .top-row.has-chat { grid-template-columns: 1fr; } .section-chat { min-height: 0; height: 560px; } } /* Collapsible Minecraft / ARK sections */ .section-toggle { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; border-radius: 6px; } .section-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } .chev { width: 7px; height: 7px; margin: -3px 2px 0; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s ease, margin .15s ease; } .section-toggle:hover .chev { border-color: var(--text); } .section-game.is-collapsed { border: 1px solid var(--game-dim); border-radius: 14px; padding: 14px 18px; background: linear-gradient(180deg, var(--game-glow), transparent 80%); } .section-game.is-collapsed .chev { transform: rotate(-45deg); margin: 0 2px; } .section-game.is-collapsed .section-head { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; } .section-game.is-collapsed .grid { display: none; } @media (prefers-reduced-motion: reduce) { .chev { transition: none; } } .dash .section-game { margin-top: 24px; } .section-game.is-collapsed + .section-game.is-collapsed { margin-top: 12px; } /* Images, GIFs, videos and stickers in chat */ .msg-media { display: block; margin-top: 6px; max-width: min(100%, 360px); line-height: 0; } .msg-media img, .msg-media video { max-width: 100%; height: auto; max-height: 280px; border-radius: 8px; background: var(--surface-2); object-fit: contain; } .msg-media-video video { max-height: 320px; } .msg-media-sticker { max-width: 120px; } .msg-media-sticker img { background: none; } /* Admin */ .brand-link { text-decoration: none; color: inherit; } .admin-link { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .badge { background: var(--red); color: #fff; font: 700 11px var(--sans); border-radius: 999px; padding: 1px 7px; } a.btn-ghost { text-decoration: none; } .btn-danger { color: #f0a49b; } .btn-danger:hover { border-color: var(--red); } .admin-panel { border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: var(--surface); } .dash.admin .section { margin-top: 20px; } .admin-table { width: 100%; border-collapse: collapse; font-size: 14px; } .admin-table th { text-align: left; color: var(--muted); font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: .06em; padding: 6px 10px; border-bottom: 1px solid var(--line); } .admin-table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; } .admin-table tr:last-child td { border-bottom: 0; } .admin-table td.actions { text-align: right; white-space: nowrap; } .admin-table td.actions > form, .admin-table td.actions > button, .admin-table td.actions > a { display: inline-block; vertical-align: middle; margin-left: 8px; } .admin-table .mono { font-family: var(--mono); font-size: 12px; color: var(--muted); } .addr-inline { width: auto; display: inline-flex; margin: 0; } .new-link { margin-bottom: 14px; padding: 12px; border: 1px solid var(--accent-dim); border-radius: 10px; background: rgba(0,125,255,.06); } .new-link p { margin: 0 0 8px; font-size: 14px; } .user-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; } .user-chip { background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font: 13px var(--mono); } .user-chip em { color: var(--accent-text); font-style: normal; font-size: 11px; } .field-hint { color: var(--muted); font-size: 12px; margin-top: 4px; } @media (max-width: 700px) { .admin-table thead { display: none; } .admin-table tr { display: grid; grid-template-columns: 1fr; padding: 8px 0; border-bottom: 1px solid var(--line); } .admin-table td { border: 0; padding: 3px 4px; } .admin-table td.actions { text-align: left; } .admin-table td.actions > form:first-child, .admin-table td.actions > button:first-child { margin-left: 0; } } /* ---- Theme: per-game colours, logos, chat box accent ---------------------- */ .login-card button:hover, .btn-primary:hover, .chat-compose button:hover { filter: none; background: var(--accent-hover); } .btn-discord:hover { background: #6d78f5; } .section-game[data-section="minecraft"] { --game: var(--green); --game-dim: var(--green-dim); --game-glow: rgba(111,207,115,.05); } .section-game[data-section="ark"] { --game: var(--ark); --game-dim: var(--ark-dim); --game-glow: rgba(0,170,200,.09); } .section-game .section-head { border-bottom-color: var(--game-dim); } .section-game[data-section="ark"]:not(.is-collapsed) { background: radial-gradient(900px 260px at 0% 0%, rgba(0,170,200,.07), transparent 70%); border-radius: 14px; } .section-logo { display: block; width: auto; } .section-logo-minecraft { height: 30px; } .section-logo-ark { height: 42px; filter: drop-shadow(0 0 10px rgba(63,212,255,.35)); } .section-game.is-collapsed .section-logo-minecraft { height: 26px; } .section-game.is-collapsed .section-logo-ark { height: 36px; } /* "Online" uses the game's colour: green for Minecraft, cyan for ARK */ .card[data-game="ark"].is-online { border-top-color: var(--ark); } .card[data-game="ark"].is-online .pill { background: var(--ark-dim); color: var(--ark); } .card[data-game="ark"].is-online .dot { background: var(--ark); box-shadow: 0 0 0 3px rgba(63,212,255,.2); } .card[data-game="ark"] .addr:hover { border-color: var(--ark); } /* Discord panel keeps its dark blue; the chat box inside uses the accent */ .section-chat .chat-box { border-color: rgba(0,125,255,.45); } .section-chat .chat-tabs { border-bottom-color: var(--accent-dim); } /* ---- Revision: Discord panel all Discord blue; status pills green/red; top strip always the game colour (green Minecraft, cyan ARK) ---- */ .card[data-game="minecraft"], .card[data-game="minecraft"].is-online, .card[data-game="minecraft"].is-offline { border-top-color: var(--green); } .card[data-game="ark"], .card[data-game="ark"].is-online, .card[data-game="ark"].is-offline { border-top-color: var(--ark); } .card[data-game="ark"].is-online .pill { background: var(--green-dim); color: var(--green); } .card[data-game="ark"].is-online .dot { background: var(--green); box-shadow: 0 0 0 3px rgba(111,207,115,.18); } /* ---- Revision 2 ---------------------------------------------------------- */ /* Discord panel: same blue as Active Servers, inside and out */ .section-chat { background: linear-gradient(180deg, rgba(0,125,255,.07), rgba(0,125,255,0) 70%); border-color: var(--accent-dim); } .section-chat .section-head { border-bottom-color: var(--accent-dim); } .section-chat .chat-box { border-color: var(--accent-dim); } .section-chat .chat-tabs { border-bottom-color: var(--accent-dim); } .section-chat .chat-tab.is-on { border-bottom-color: var(--accent); } .section-chat .msg-tag, .section-chat .msg-initial { background: var(--accent); } .section-chat .msg-text a, .section-chat .msg-file { color: var(--accent-text); } .section-chat .chat-compose textarea:focus { outline-color: var(--accent); } .section-chat .chat-compose button { background: var(--accent); } .section-chat .chat-compose button:hover { background: var(--accent-hover); } /* Minecraft gets the same soft glow behind its logo as ARK, in green */ .section-game[data-section="minecraft"]:not(.is-collapsed) { background: radial-gradient(900px 260px at 0% 0%, rgba(111,207,115,.07), transparent 70%); border-radius: 14px; } .section-logo-minecraft { filter: drop-shadow(0 0 10px rgba(111,207,115,.35)); } /* Centre the game logos vertically in their header bars */ .section-game .section-head { align-items: center; padding: 12px 4px 12px; } .section-game.is-collapsed .section-head { padding: 4px 0; } .section-game h2 { line-height: 0; } /* Admin: accounts + console */ .admin-notice { margin: 0 0 4px; padding: 10px 14px; border-radius: 10px; background: var(--accent-dim); color: var(--text); font-size: 14px; } .you, .muted { color: var(--muted); font-size: 12px; } .role-admin { color: var(--accent-text); font-weight: 600; } .console { background: #07090c; border: 1px solid var(--line); border-radius: 10px; height: 420px; overflow-y: auto; padding: 10px 12px; font: 12.5px/1.55 var(--mono); color: #b9c2cc; white-space: pre-wrap; overflow-wrap: anywhere; } .console:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .con-ok { color: #6fcf73; } .con-warn { color: #e6c35c; } .con-error { color: #ff7b6e; } .view-only { font: 700 10px var(--sans); text-transform: uppercase; letter-spacing: .08em; color: #e6c35c; border: 1px solid rgba(230,195,92,.45); background: rgba(230,195,92,.08); border-radius: 5px; padding: 2px 7px; margin-left: 8px; vertical-align: middle; } /* ARK cards: give the Map column twice the room so names like "Scorched Earth" fit. Very long names wrap instead of being cut off; cards in the same row stay the same height. */ .card[data-type="asa"] .stats { grid-template-columns: minmax(0, .8fr) minmax(0, 1.7fr) minmax(0, .8fr); } .card[data-type="asa"] .stats [data-field="version"] { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; } /* Top bar stays pinned while scrolling (dashboard and admin pages) */ .topbar { position: sticky; top: 0; z-index: 50; background: rgba(21, 27, 34, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 1px 0 var(--line), 0 6px 18px rgba(0, 0, 0, .25); } /* Jump links (e.g. future #sections) land below the bar, not under it */ html { scroll-padding-top: 76px; } /* Login header: hedgehog + name centered, with even spacing above and below */ .login-card { padding-top: 34px; } .login-head { display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: 30px; margin-bottom: 6px; border-bottom: 1px solid var(--line); } .login-brand { justify-content: center; gap: 12px; } .login-logo { width: 44px; height: 44px; border-radius: 11px; display: block; flex: none; } .login-brand .brand-name { font-size: 24px; line-height: 1; } .login-head .login-sub { margin: 14px 0 0; } /* Both game sections closed -> the dashboard fits the window with no page scroll. Active Servers and Discord fill the space left over; if more servers are online than fit, the Active Servers list scrolls inside its own panel. */ @media (min-width: 961px) and (min-height: 600px) { body.fit-screen { height: 100vh; height: 100dvh; display: flex; flex-direction: column; } body.fit-screen .topbar { flex: none; } body.fit-screen main.dash { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; padding-top: 20px; padding-bottom: 16px; } body.fit-screen .dash-head { flex: none; margin-bottom: 12px; } body.fit-screen .top-row { flex: 1 1 auto; min-height: 340px; margin-top: 0; grid-template-rows: minmax(0, 1fr); } body.fit-screen .section-game { flex: none; margin-top: 16px; } body.fit-screen .foot { flex: none; margin-top: 10px; } body.fit-screen .section-chat { min-height: 0; } body.fit-screen .section-active { display: flex; flex-direction: column; min-height: 0; } body.fit-screen .active-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-right: -8px; padding-right: 8px; /* room for the scrollbar */ scrollbar-width: thin; scrollbar-color: var(--line) transparent; } } /* Hedgehog next to ZanPro.net in the top bar (matches the login page) */ .topbar .brand { gap: 10px; } .topbar-logo { width: 30px; height: 30px; border-radius: 8px; display: block; flex: none; } /* Admin accounts: custom roles (e.g. Pookie) and the Last Online column */ .role-custom { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #ff8fc7; background: rgba(255, 105, 180, .13); border: 1px solid rgba(255, 105, 180, .35); } .seen { color: var(--muted); white-space: nowrap; } .seen-now { color: var(--green); } .seen-now::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-right: 7px; vertical-align: 1px; } /* Same centered hedgehog header on the sign-up and Discord pages */ .login-head .link-title { margin: 18px 0 0; font-size: 21px; } .login-head .link-title + .login-sub { margin-top: 8px; line-height: 1.5; } .login-head-plain { padding-bottom: 0; margin-bottom: 4px; border-bottom: 0; } .login-card > .btn-primary { margin-top: 20px; text-align: center; } .login-head .login-sub { text-wrap: balance; } /* Admin: a new sign-up request arriving on the 10-second refresh */ .admin-panel.flash { animation: admin-flash 2.6s ease-out; } @keyframes admin-flash { 0%, 30% { box-shadow: 0 0 0 2px var(--accent), 0 0 24px rgba(0, 125, 255, .35); } 100% { box-shadow: 0 0 0 0 transparent; } } /* Role pills: Admin (blue), Member (grey), custom roles like Pookie (pink) */ .role-admin, .role-member, .role-custom { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.5; } .role-admin { color: var(--accent-text); background: rgba(0, 125, 255, .14); border: 1px solid rgba(0, 125, 255, .45); } .role-member { color: #b4bdc8; background: rgba(180, 189, 200, .08); border: 1px solid rgba(180, 189, 200, .28); } /* ---------- Top bar tabs: Servers | Messages ---------- */ .topbar .brand-link { flex: none; } .topnav { display: flex; align-items: center; gap: 4px; margin-right: auto; margin-left: 28px; } .topnav-link { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 8px; text-decoration: none; color: var(--muted); font: 500 14px var(--sans); } .topnav-link:hover { color: var(--text); background: var(--surface-2); } .topnav-link.is-on { color: var(--text); background: rgba(0, 125, 255, .12); box-shadow: inset 0 -2px 0 var(--accent); } .topnav-link .badge, .admin-link .badge { margin-left: 0; } .topnav-arrow { display: none; } .badge[hidden] { display: none; } .admin-link.is-on { border-color: var(--accent); color: var(--text); } @media (max-width: 720px) { .topbar .brand-name { display: none; } .topnav { margin-left: 12px; } .topnav-link { padding: 7px 10px; } } /* ---------- Servers page: Active Servers now spans the full width ---------- */ .top-row { grid-template-columns: minmax(0, 1fr); } /* ---------- Messages page ---------- */ .msgs-row { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); } .msgs-row.has-chat { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .msgs-row > .section { margin-top: 0; } .im-panel { background: linear-gradient(180deg, rgba(0,125,255,.07), rgba(0,125,255,0) 70%); border: 1px solid var(--accent-dim); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; min-width: 0; } .im-panel .section-head { border-bottom-color: var(--accent-dim); } .im-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 330px minmax(0, 1fr); background: var(--surface); border: 1px solid var(--accent-dim); border-radius: var(--radius); overflow: hidden; } .im-list { border-right: 1px solid var(--line); overflow-y: auto; min-height: 0; } .im-list ul { list-style: none; margin: 0; padding: 6px; } .im-convo { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; } .im-convo:hover { background: var(--surface-2); } .im-convo:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .im-convo.is-on { background: rgba(0, 125, 255, .14); } .im-convo-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .im-convo-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .im-convo-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .im-convo-time { color: var(--muted); font-size: 11px; flex: none; } .im-convo-last { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .im-convo.has-unread .im-convo-last { color: var(--text); } .im-avatar { position: relative; width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font: 600 15px var(--sans); background: var(--surface-2); } .im-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; display: block; } .im-dot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--green); border: 2px solid var(--surface); } .im-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; } .im-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); } .im-head .im-avatar { width: 34px; height: 34px; font-size: 14px; } .im-head-text { display: flex; flex-direction: column; min-width: 0; } .im-head-text strong { font-size: 15px; } #im-status { color: var(--muted); font-size: 12px; } #im-status.is-online { color: var(--green); } .im-back { display: none; } .im-messages { list-style: none; margin: 0; padding: 12px 16px; flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; } .im-messages > :first-child { margin-top: auto; } .im-day { align-self: center; margin: 14px 0 8px; padding: 3px 12px; border-radius: 999px; color: var(--muted); font-size: 11.5px; background: var(--surface-2); } .im-msg { display: flex; align-items: flex-end; gap: 8px; margin-top: 10px; max-width: 78%; } .im-msg.is-grouped { margin-top: 2px; } .im-msg.is-mine { align-self: flex-end; flex-direction: row-reverse; } .im-avatar-sm { width: 28px; height: 28px; font-size: 12px; align-self: flex-start; margin-top: 18px; } .im-msg.is-grouped .im-avatar-sm { background: none; margin-top: 0; height: 0; } .im-bubble-wrap { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; } .im-msg.is-mine .im-bubble-wrap { align-items: flex-end; } .im-name { color: var(--muted); font-size: 12px; margin: 0 0 3px 4px; } .im-bubble { padding: 8px 12px; border-radius: 16px 16px 16px 5px; background: var(--surface-2); font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; } .im-msg.is-mine .im-bubble { background: var(--accent); color: #fff; border-radius: 16px 16px 5px 16px; } .im-bubble a { color: var(--accent-text); } .im-msg.is-mine .im-bubble a { color: #fff; } .im-time { color: var(--muted); font-size: 10.5px; margin: 3px 6px 0; } .im-empty { color: var(--muted); font-size: 14px; text-align: center; margin: auto; padding: 24px; max-width: 420px; } .im-error { margin: 0 12px 8px; padding: 8px 12px; border-radius: 8px; background: rgba(229, 72, 77, .15); color: #f0a49b; font-size: 13px; } .im-compose { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); } .im-compose textarea { flex: 1; resize: none; font: 14px/1.4 var(--sans); color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; max-height: 140px; } .im-compose textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; } .im-compose button { font: 600 14px var(--sans); background: var(--accent); color: #fff; border: 0; border-radius: 10px; padding: 0 18px; cursor: pointer; } .im-compose button:hover { background: var(--accent-hover); } .im-compose button:disabled { opacity: .5; cursor: default; } .im-hint { margin: 0; padding: 0 12px 10px; color: var(--muted); font-size: 11px; } /* Desktop: the Messages page fills the window like an app; each panel scrolls inside (narrow tall windows too - e.g. a monitor turned on its side - instead of a fixed-height box with empty space under it) */ @media (min-width: 721px) and (min-height: 600px) { body.page-messages { height: 100vh; height: 100dvh; display: flex; flex-direction: column; } body.page-messages .topbar { flex: none; } body.page-messages main.msgs { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; padding-top: 20px; padding-bottom: 20px; } body.page-messages .dash-head { flex: none; margin-bottom: 12px; } body.page-messages .msgs-row { flex: 1 1 auto; min-height: 460px; grid-template-rows: minmax(0, 1fr); } body.page-messages .section-chat { min-height: 0; } } /* Phones and short windows: fixed heights, panels stack */ @media (max-width: 720px), (max-height: 599px) { .msgs-row.has-chat { grid-template-columns: minmax(0, 1fr); } .im-body { flex: none; height: 620px; } } /* Phones: the chat list and the open chat take turns */ @media (max-width: 720px) { .im-body { grid-template-columns: minmax(0, 1fr); height: 72vh; } .im-body .im-pane { display: none; } .im-body.show-pane .im-list { display: none; } .im-body.show-pane .im-pane { display: flex; } .im-back { display: block; all: unset; cursor: pointer; font-size: 28px; line-height: 1; padding: 0 6px 2px 0; color: var(--muted); } .im-msg { max-width: 88%; } } /* Phones: keep the top bar on one line, even with the Admin button */ .topbar .btn-ghost, .topnav-link { white-space: nowrap; } @media (max-width: 520px) { .topbar { padding: 10px 12px; gap: 8px; } .topnav { margin-left: 4px; gap: 2px; } .topnav-link { padding: 6px 8px; font-size: 13.5px; } .topbar-right { gap: 6px; } .topbar .btn-ghost { padding: 6px 9px; font-size: 13px; } } /* ---------- Calls in the top bar (center) ---------- */ .topbar { position: sticky; } .topbar-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 60; pointer-events: none; } .topbar-center.has-call { pointer-events: auto; } .cb-card { display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 10px; border-radius: 14px; background: var(--surface-2); border: 1px solid rgba(111, 207, 115, .5); box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 0 4px rgba(111, 207, 115, .12); animation: cb-in .25s ease-out, cb-glow 1.6s ease-in-out infinite alternate; white-space: nowrap; } @keyframes cb-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } } @keyframes cb-glow { to { box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 0 7px rgba(111, 207, 115, .06); } } .cb-who { display: flex; align-items: center; gap: 10px; margin-right: 6px; } .cb-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--accent); color: #fff; font: 600 14px var(--sans); overflow: hidden; } .cb-avatar img { width: 100%; height: 100%; object-fit: cover; } .cb-text { display: flex; flex-direction: column; line-height: 1.2; } .cb-text strong { font-size: 14px; } .cb-kind { color: var(--muted); font-size: 12px; } .cb-btn { font: 600 13px var(--sans); color: #fff; border: 0; border-radius: 9px; padding: 8px 14px; cursor: pointer; } .cb-accept { background: #2f9e44; } .cb-accept:hover { background: #37b24d; } .cb-decline { background: #c92a2a; } .cb-decline:hover { background: #e03131; } .cb-small { padding: 4px 10px; font-size: 12px; } .cb-pill .cb-icon { width: 38px; height: 38px; border-radius: 10px; } .cb-pill .cb-icon svg { width: 21px; height: 21px; } .cb-pill .cb-icon-x { background: #c92a2a; border-color: #c92a2a; color: #fff; } /* join / switch here: voice green, video blue (like a private chat's call buttons during a call) */ .cb-pill .cb-icon.cb-join-voice { background: rgba(47, 158, 68, .2); color: #69db7c; border-color: rgba(105, 219, 124, .5); } .cb-pill .cb-icon.cb-join-video { background: rgba(0, 125, 255, .22); color: #74c0fc; border-color: rgba(116, 192, 252, .55); } .cb-pill .cb-icon.cb-join-voice:hover:not(:disabled), .cb-pill .cb-icon.cb-join-video:hover:not(:disabled) { filter: brightness(1.2); } .cb-pill { touch-action: pan-y; } .cb-pill .cb-icon-x:hover:not(:disabled) { background: #e03131; border-color: #e03131; color: #fff; } .cb-pill { display: flex; align-items: center; gap: 9px; padding: 5px 6px 5px 12px; border-radius: 999px; background: rgba(47, 158, 68, .14); border: 1px solid rgba(111, 207, 115, .4); font-size: 13px; white-space: nowrap; } .cb-live { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: pulse 1.2s ease-in-out infinite alternate; } .cb-timer { font: 12px var(--mono); color: var(--muted); } @media (max-width: 1100px) { /* not enough room in the middle of the bar: drop the popup just below it, still centered */ .topbar-center { top: calc(100% + 8px); transform: translateX(-50%); } } /* ---------- Messages: call buttons, files, drop zone ---------- */ .im-head .im-head-text { flex: 1; } .im-call-btns { display: flex; gap: 6px; } .im-call-btns[hidden] { display: none; } .im-icon-btn { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; cursor: pointer; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); } .im-icon-btn svg { width: 18px; height: 18px; fill: currentColor; } .im-icon-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-text); } .im-icon-btn:disabled { opacity: .4; cursor: not-allowed; } .im-attach { flex: none; align-self: stretch; height: auto; width: 40px; } .im-pane { position: relative; } .im-drop { position: absolute; inset: 58px 8px 8px; z-index: 5; display: grid; place-items: center; border: 2px dashed var(--accent); border-radius: 12px; background: rgba(14, 18, 23, .86); color: var(--accent-text); font-weight: 600; font-size: 16px; pointer-events: none; } .im-drop[hidden] { display: none; } .im-bubble.has-file { padding: 0; background: none; border-radius: 14px; } .im-msg.is-mine .im-bubble.has-file { background: none; } .im-file { width: 320px; max-width: 100%; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; color: var(--text); } .im-msg.is-mine .im-file { border-color: rgba(0, 125, 255, .55); background: #12263f; } .im-file-preview { display: block; width: 100%; max-height: 320px; background: #0b0e12; } .im-file-preview img { display: block; width: 100%; max-height: 320px; object-fit: contain; } audio.im-file-preview { background: none; height: 40px; margin: 10px 10px 0; width: calc(100% - 20px); } .im-file-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px 4px; } .im-file-icon { flex: none; width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-dim); color: var(--accent-text); font: 700 10.5px var(--mono); letter-spacing: .02em; } .im-file-info { min-width: 0; flex: 1; display: flex; flex-direction: column; } .im-file-name { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .im-file-size { color: var(--muted); font-size: 12px; } .im-file-dl { flex: none; font: 600 12.5px var(--sans); color: #fff; background: var(--accent); border: 0; border-radius: 8px; padding: 6px 11px; text-decoration: none; cursor: pointer; } .im-file-dl:hover { background: var(--accent-hover); } .im-file-timer { padding: 2px 12px 10px 62px; color: var(--muted); font: 11.5px var(--mono); } .im-file-timer.is-expired { color: #f0a49b; font-family: var(--sans); } .im-file.is-expired .im-file-icon { background: var(--surface); color: var(--muted); } .im-file.is-expired .im-file-name { color: var(--muted); text-decoration: line-through; } .im-progress { height: 4px; margin: 6px 12px 12px; background: var(--surface); border-radius: 99px; overflow: hidden; } .im-progress span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; } .im-callline { align-self: center; display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; padding: 6px 12px; border-radius: 999px; background: var(--surface-2); font-size: 13px; } .im-callline .im-time { margin: 0; } .im-callline.is-missed { color: #f0a49b; } .im-callline-icon { width: 14px; height: 14px; background: currentColor; flex: none; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat; } /* ---------- Call window ---------- */ body.page-call { height: 100vh; height: 100dvh; overflow: hidden; background: #07090c; } .call { height: 100%; display: flex; flex-direction: column; } .call-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; background: radial-gradient(700px 420px at 50% 40%, rgba(0, 125, 255, .16), transparent 70%), #07090c; } #remote-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; opacity: 0; transition: opacity .3s; } .call-stage.has-remote-video #remote-video { opacity: 1; } .call-who { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 20px; } .call-stage.has-remote-video .call-who { opacity: 0; pointer-events: none; } .call-avatar { width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--accent); color: #fff; font: 600 44px var(--sans); box-shadow: 0 0 0 10px rgba(0, 125, 255, .12), 0 0 0 22px rgba(0, 125, 255, .05); } .call-avatar img { width: 100%; height: 100%; object-fit: cover; } .call-who strong { font-size: 24px; margin-top: 10px; } .call-status { color: var(--muted); font-size: 14px; max-width: 420px; } #local-video { position: absolute; right: 16px; bottom: 16px; width: 22%; max-width: 260px; min-width: 120px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .15); background: #111; transform: scaleX(-1); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); } #local-video.is-off { opacity: .15; } .call-brand { position: absolute; left: 16px; top: 14px; display: flex; align-items: center; gap: 8px; font: 600 14px var(--mono); color: var(--text); opacity: .8; } .call-brand img { width: 22px; height: 22px; border-radius: 6px; } .call-brand span { color: var(--muted); } .call-bar { flex: none; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 14px 16px 18px; background: var(--surface); border-top: 1px solid var(--line); position: relative; } .call-time { position: absolute; left: 20px; font: 14px var(--mono); color: var(--muted); } .call-controls { display: flex; gap: 12px; } .call-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 74px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: 500 12px var(--sans); cursor: pointer; } .call-btn svg { width: 22px; height: 22px; fill: currentColor; } .call-btn[hidden] { display: none; } .call-btn:hover:not(:disabled) { border-color: var(--accent); } .call-btn[aria-pressed="true"] { background: #fff; color: #111; } .call-hangup { background: #c92a2a; border-color: #c92a2a; color: #fff; } .call-hangup:hover:not(:disabled) { background: #e03131; border-color: #e03131; } .call-btn:disabled { opacity: .45; cursor: default; } .call-back { position: absolute; right: 20px; color: var(--accent-text); font-size: 14px; } .call.is-ended .call-avatar { filter: grayscale(.7); opacity: .7; } @media (max-width: 560px) { .call-time { position: static; } .call-bar { flex-wrap: wrap; } .call-back { position: static; } .call-btn { min-width: 64px; } } /* Paperclip: a square icon button with the icon dead-center (not the Send button's padding) */ .im-compose .im-attach { padding: 0; width: 42px; min-width: 42px; display: grid; place-items: center; align-self: stretch; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); } .im-compose .im-attach:hover { background: var(--surface-2); border-color: var(--accent); color: var(--accent-text); } .im-compose .im-attach svg { width: 19px; height: 19px; display: block; } /* Admin / Accounts tab on the right: same look as Servers and Messages */ .topbar-right .admin-link, .topbar-right .admin-link.is-on { border: 0; } /* ---------- Group chats ---------- */ .im-list { display: flex; flex-direction: column; } .im-list-head { padding: 8px 8px 2px; } .im-new-group { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; padding: 8px 10px; border-radius: 10px; border: 1px dashed var(--accent-dim); background: none; color: var(--accent-text); font: 600 13px var(--sans); } .im-new-group:hover { border-style: solid; border-color: var(--accent); background: rgba(0, 125, 255, .08); } .im-new-group svg { width: 16px; height: 16px; fill: currentColor; } .im-avatar.is-group { border-radius: 11px; font-size: 13.5px; letter-spacing: .02em; } .im-head #im-group-btn[hidden] { display: none; } .im-event { align-self: center; text-align: center; margin: 10px 0 4px; padding: 4px 12px; max-width: 90%; color: var(--muted); font-size: 12.5px; } /* group dialog */ .im-dialog { width: min(440px, calc(100vw - 32px)); padding: 0; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--text); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); } .im-dialog::backdrop { background: rgba(5, 8, 12, .65); } .im-dialog form { display: flex; flex-direction: column; padding: 20px; max-height: min(640px, 85vh); } .im-dialog h3 { margin: 0 0 14px; font-size: 18px; } .im-dialog label[for] { font-size: 13px; color: var(--muted); margin-bottom: 6px; } .im-dialog input[type="text"], #dlg-group-name { font: 14px var(--sans); color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; } #dlg-group-name:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; } .dlg-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 16px 0 6px; } .dlg-label[hidden] { display: none; } .dlg-members, .dlg-people { display: flex; flex-direction: column; gap: 2px; } .dlg-members[hidden] { display: none; } .dlg-people { overflow-y: auto; min-height: 0; max-height: 260px; } .dlg-person { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 9px; font-size: 14px; } label.dlg-person { cursor: pointer; } label.dlg-person:hover { background: var(--surface-2); } .dlg-person input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; } .dlg-person .im-avatar-sm { margin: 0; align-self: center; } .dlg-none { color: var(--muted); font-size: 13px; margin: 4px 0; } .im-dialog .im-error { margin: 12px 0 0; } .dlg-actions { display: flex; align-items: center; gap: 8px; margin-top: 18px; } .dlg-actions [hidden] { display: none; } .dlg-spacer { flex: 1; } /* ---------- Photos & videos like Discord: the picture itself ---------- */ .im-bubble.has-media { padding: 0; background: none; } .im-media { display: flex; flex-direction: column; align-items: flex-start; max-width: min(420px, 100%); } .im-msg.is-mine .im-media { align-items: flex-end; } .im-media-img { display: block; max-width: 100%; max-height: 350px; width: auto; height: auto; border-radius: 10px; cursor: zoom-in; background: var(--surface-2); object-fit: contain; } .im-media-video { display: block; max-width: 100%; max-height: 350px; border-radius: 10px; background: #000; } .im-media-cap { display: flex; align-items: center; gap: 10px; margin-top: 5px; font-size: 12px; color: var(--muted); max-width: 100%; } .im-media-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .im-media-dl { color: var(--accent-text); text-decoration: none; flex: none; } .im-media-dl:hover { text-decoration: underline; } .im-media .im-file-timer { padding: 2px 0 0; } .im-media.is-expired .im-media-cap { text-decoration: line-through; } .im-lightbox { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 40px 24px 24px; background: rgba(4, 6, 9, .9); } .im-lightbox[hidden] { display: none; } .im-lightbox img { max-width: 100%; max-height: calc(100% - 48px); object-fit: contain; border-radius: 6px; } .im-lightbox-bar { display: flex; gap: 16px; font-size: 13px; color: var(--muted); } .im-lightbox-bar a { color: var(--accent-text); } .im-lightbox-x { position: absolute; top: 12px; right: 16px; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255, 255, 255, .1); color: #fff; font-size: 26px; line-height: 1; } .im-lightbox-x:hover { background: rgba(255, 255, 255, .2); } .im-drop span { text-align: center; padding: 0 20px; } /* ---------- GIFs ---------- */ .im-compose .im-gif-btn { flex: none; padding: 0 12px; align-self: stretch; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); font: 800 12px var(--sans); letter-spacing: .06em; } .im-compose .im-gif-btn:hover, .im-compose .im-gif-btn.is-on { background: var(--surface-2); border-color: var(--accent); color: var(--accent-text); } .gif-picker { position: absolute; right: 10px; bottom: 92px; z-index: 20; width: min(460px, calc(100% - 20px)); height: min(440px, calc(100% - 120px)); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .5); overflow: hidden; } .gif-picker[hidden] { display: none; } .gif-tabs { display: flex; align-items: center; gap: 4px; padding: 8px; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .gif-tab { border: 0; background: none; color: var(--muted); font: 500 13px var(--sans); padding: 6px 10px; border-radius: 8px; cursor: pointer; white-space: nowrap; } .gif-tab:hover { color: var(--text); background: var(--surface-2); } .gif-tab.is-on { color: var(--text); background: rgba(0, 125, 255, .14); box-shadow: inset 0 -2px 0 var(--accent); } .gif-spacer { flex: 1; } .gif-upload { border: 0; border-radius: 8px; padding: 6px 12px; cursor: pointer; background: var(--accent); color: #fff; font: 600 12.5px var(--sans); } .gif-upload:hover { background: var(--accent-hover); } .gif-grid { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); grid-auto-rows: 104px; gap: 6px; } .gif-tile { position: relative; padding: 0; border: 0; border-radius: 9px; overflow: hidden; cursor: pointer; background: var(--surface-2); } .gif-tile img { width: 100%; height: 100%; object-fit: cover; display: block; } .gif-tile:hover { outline: 2px solid var(--accent); outline-offset: -2px; } .gif-status { margin: 0; padding: 0 12px 10px; color: var(--muted); font-size: 12.5px; } .gif-status:empty { display: none; } /* the favorite star: top-right corner, shows on hover (always when favorited) */ .im-gifbox { position: relative; display: inline-block; max-width: 100%; line-height: 0; } .gif-star { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; border: 0; cursor: pointer; line-height: 1; background: rgba(10, 13, 18, .72); color: #fff; font-size: 18px; opacity: 0; transition: opacity .12s, transform .12s; } .im-gifbox:hover .gif-star, .gif-tile:hover .gif-star, .gif-star:focus-visible, .gif-star.is-fav { opacity: 1; } .gif-star:hover { transform: scale(1.1); } .gif-star.is-fav { color: #ffd43b; } .im-older { align-self: center; color: var(--muted); font-size: 12px; margin: 6px 0; } @media (max-width: 720px) { .gif-picker { left: 8px; right: 8px; width: auto; bottom: 88px; } .gif-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); grid-auto-rows: 84px; } .gif-star { opacity: 1; } } @media (hover: none) { .gif-star { opacity: 1; } } /* photos/GIFs never sit on a chat bubble color (yours were getting a blue edge) */ .im-msg .im-bubble.has-media, .im-msg.is-mine .im-bubble.has-media { background: none; padding: 0; border-radius: 10px; } .im-gifbox .im-media-img { border-radius: 10px; } /* ======================= Voice window (Discord-style) ======================= */ body.page-voice { height: 100vh; height: 100dvh; overflow: hidden; background: #0b0d10; } .vc { height: 100%; display: flex; flex-direction: column; } .vc-top { flex: none; display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--line); } .vc-title { display: flex; align-items: center; gap: 8px; min-width: 0; } .vc-title img { width: 24px; height: 24px; border-radius: 6px; } .vc-title strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vc-speaker { width: 16px; height: 16px; background: var(--green); flex: none; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9zm13.5 3A4.5 4.5 0 0 0 14 8v8a4.5 4.5 0 0 0 2.5-4zM14 3.2v2.1a7 7 0 0 1 0 13.4v2.1a9 9 0 0 0 0-17.6z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9zm13.5 3A4.5 4.5 0 0 0 14 8v8a4.5 4.5 0 0 0 2.5-4zM14 3.2v2.1a7 7 0 0 1 0 13.4v2.1a9 9 0 0 0 0-17.6z'/%3E%3C/svg%3E") center / contain no-repeat; } .vc-count { color: var(--muted); font-size: 12.5px; white-space: nowrap; } .vc-status { color: var(--green); font-size: 13px; margin-left: auto; text-align: right; } .vc.is-done .vc-status { color: var(--muted); } .vc-time { font: 13px var(--mono); color: var(--muted); min-width: 44px; text-align: right; } .vc-stage { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px; } .vc-focus { flex: 1; min-height: 0; display: grid; place-items: center; container-type: size; } .vc-focus[hidden] { display: none; } /* the focused tile takes the video's own shape and grows until it touches the edges (like "contain") */ .vc-focus .vc-tile { aspect-ratio: var(--ar, 16 / 9); width: min(100cqw, 100cqh * var(--ar, 1.7778)); height: auto; } .vc-focus .vc-tile video { object-fit: contain; } .vc-grid { flex: 1; min-height: 0; display: flex; flex-wrap: wrap; gap: 10px; align-content: center; justify-content: center; } .vc-grid > .vc-tile { width: var(--tw, 320px); flex: none; } /* size picked by voice.js to fit the window */ /* the others under the big tile: side by side, and when they don't all fit across, stacked in more rows (a vertical monitor, a narrow window) - never a row you have to scroll sideways. Only past half the call's height do they scroll. */ .vc.has-focus .vc-grid { flex: none; display: flex; flex-wrap: wrap; overflow-x: hidden; overflow-y: auto; max-height: 50%; justify-content: center; align-content: flex-start; gap: 10px; padding: 6px 8px; /* (room for the green speaking ring - it was cut off at the edges) */ } .vc.has-focus .vc-grid .vc-tile { width: 280px; flex: none; } .vc-tile { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; cursor: default; isolation: isolate; background: #1c2027; display: grid; place-items: center; outline: none; transition: box-shadow .12s; } .vc-tile:focus-visible { box-shadow: 0 0 0 2px var(--accent); } .vc-tile.is-speaking { box-shadow: 0 0 0 3px #3ba55d, 0 0 18px rgba(59, 165, 93, .35); } .vc-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; border-radius: inherit; } .vc-tile.is-stream video { object-fit: contain; } .vc-tile video { transform: translateZ(0); backface-visibility: hidden; will-change: transform; } .vc-tile video.is-mirror { transform: scaleX(-1) translateZ(0); } /* The Android app: its video layer ignores object-fit and stretches the picture to the box (an upright phone camera in a wide tile came out squashed). So there the video itself is sized to its real shape (--ar, from voice.js) and the tile crops it - "cover" for cameras, "contain" for streams - and nothing gets stretched. */ html.in-android .vc-grid > .vc-tile:not(:fullscreen) { container-type: size; } html.in-android .vc-grid > .vc-tile:not(:fullscreen) video { inset: auto; left: 50%; top: 50%; translate: -50% -50%; border-radius: 0; width: max(100cqw, 100cqh * var(--ar, 1.7778)); height: max(100cqh, 100cqw / var(--ar, 1.7778)); } html.in-android .vc-grid > .vc-tile.is-stream:not(:fullscreen) video { width: min(100cqw, 100cqh * var(--ar, 1.7778)); height: min(100cqh, 100cqw / var(--ar, 1.7778)); } .vc-tile.has-video .vc-avatar { visibility: hidden; } .vc-avatar { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; color: #fff; font: 600 34px var(--sans); background: var(--accent); } .vc-focus .vc-avatar { width: 120px; height: 120px; font-size: 48px; } .vc.has-focus .vc-grid .vc-avatar { width: 64px; height: 64px; font-size: 26px; } .vc-avatar img { width: 100%; height: 100%; object-fit: cover; } .vc-label { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); display: flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 7px; background: rgba(0, 0, 0, .62); font-size: 13px; color: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .vc-ico { width: 14px; height: 14px; background: #f23f43; flex: none; } .vc-ico-muted { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 11a7 7 0 0 1-1.2 3.9l-1.5-1.5A5 5 0 0 0 17 11zm-4 .2L9 5.2V5a3 3 0 0 1 6 0zM4.3 3 3 4.3l6 6V11a3 3 0 0 0 4.4 2.7l1.6 1.6A5 5 0 0 1 7 11H5a7 7 0 0 0 6 6.9V21h2v-3.1a6.9 6.9 0 0 0 3.4-1.4L19.7 21 21 19.7z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 11a7 7 0 0 1-1.2 3.9l-1.5-1.5A5 5 0 0 0 17 11zm-4 .2L9 5.2V5a3 3 0 0 1 6 0zM4.3 3 3 4.3l6 6V11a3 3 0 0 0 4.4 2.7l1.6 1.6A5 5 0 0 1 7 11H5a7 7 0 0 0 6 6.9V21h2v-3.1a6.9 6.9 0 0 0 3.4-1.4L19.7 21 21 19.7z'/%3E%3C/svg%3E") center / contain no-repeat; } .vc-ico-deaf { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a9 9 0 0 0-9 9v6a3 3 0 0 0 3 3h2v-8H5v-1a7 7 0 0 1 14 0v1h-3v8h2a3 3 0 0 0 3-3v-6a9 9 0 0 0-9-9z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a9 9 0 0 0-9 9v6a3 3 0 0 0 3 3h2v-8H5v-1a7 7 0 0 1 14 0v1h-3v8h2a3 3 0 0 0 3-3v-6a9 9 0 0 0-9-9z'/%3E%3C/svg%3E") center / contain no-repeat; } .vc-live { position: absolute; left: 8px; top: 8px; padding: 2px 7px; border-radius: 5px; background: #f23f43; color: #fff; font: 800 11px var(--sans); letter-spacing: .06em; } /* Admin > Holiday Sounds > Sound Set */ .al-set { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 12px 14px; margin-bottom: 14px; border-radius: 10px; background: var(--panel-2, rgba(255,255,255,.04)); } .al-set-pick { min-width: 230px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line, #2b3442); background: var(--bg, #0d1117); color: var(--text, #e6edf3); font: 600 14px var(--sans); } /* someone's stream you haven't opened yet: a "Watch Stream" button, like Discord */ .vc-watch { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; display: none; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 8px; border: 0; cursor: pointer; font: 700 14px var(--sans); white-space: nowrap; } .vc-watch svg { width: 18px; height: 18px; fill: currentColor; } .vc-tile.is-unwatched .vc-watch { display: inline-flex; } .vc-tile.is-unwatched { background: #111214; } .vc-fs { position: absolute; right: 8px; top: 8px; width: 34px; height: 34px; border-radius: 8px; border: 0; cursor: pointer; z-index: 2; display: grid; place-items: center; padding: 0; background: rgba(0, 0, 0, .6); color: #fff; opacity: 0; transition: opacity .12s; } .vc-fs svg { width: 20px; height: 20px; fill: currentColor; } .vc-fs .fs-out, .vc-tile:fullscreen .vc-fs .fs-in { display: none; } .vc-tile:fullscreen .vc-fs .fs-out { display: inline; } .vc-tile:not(.has-video) .vc-fs { display: none; } .vc-tile:focus-visible .vc-fs, .vc-fs:focus-visible { opacity: 1; } .vc-tile:fullscreen .vc-fs { right: 18px; top: 18px; } .vc-tile:hover .vc-fs { opacity: 1; } .vc-tile:fullscreen { border-radius: 0; cursor: default; } .vc-tile:fullscreen video { object-fit: contain; } .vc-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(5, 7, 10, .72); z-index: 5; } .vc-overlay[hidden] { display: none; } .vc-overlay-box { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; max-width: 420px; text-align: center; } .vc-overlay-box p { margin: 0 0 14px; font-size: 15px; } .vc-obtn { margin: 0 4px; border: 0; border-radius: 9px; padding: 9px 16px; cursor: pointer; background: var(--accent); color: #fff; font: 600 14px var(--sans); } .vc-obtn-ghost { background: var(--surface-2); color: var(--text); } .vc-bar { flex: none; display: flex; justify-content: center; padding: 12px 16px 16px; background: #0b0d10; } .vc-controls { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; justify-content: center; } .vc-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 76px; padding: 9px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: 500 12px var(--sans); cursor: pointer; } .vc-btn svg { width: 22px; height: 22px; fill: currentColor; } .vc-btn:hover:not(:disabled) { border-color: var(--accent); } .vc-btn.is-off { color: #f23f43; border-color: rgba(242, 63, 67, .5); } .vc-btn.is-deaf { color: #fff; background: #c92a2a; border-color: #c92a2a; } /* (deafened: from the Mute button's menu) */ #btn-deaf, #btn-nc, #btn-quality { display: none !important; } /* (Share Screen's quality: press and hold it, or right-click) */ #btn-screen { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; } #btn-mic { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; } .vc-btn.is-on { background: #fff; color: #111; border-color: #fff; } .vc-leave { background: #c92a2a; border-color: #c92a2a; color: #fff; } .vc-leave:hover:not(:disabled) { background: #e03131; border-color: #e03131; } .vc.is-done .vc-btn { opacity: .45; pointer-events: none; } .vc-share { position: relative; display: flex; } .vc-share #btn-screen { border-radius: 14px; } /* (its quality button is folded into it now) */ .vc-quality-btn { min-width: 0; border-radius: 0 14px 14px 0; margin-left: -1px; font: 600 11.5px var(--mono); padding: 9px 10px; } .vc-share .vc-btn { position: relative; } .vc-share .vc-btn:hover, .vc-share .vc-btn:focus-visible, .vc-share .vc-btn[aria-expanded="true"] { z-index: 1; } .vc-quality { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 10; width: 330px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); } .vc-quality[hidden] { display: none; } .vc-quality h4 { margin: 0 0 10px; font-size: 14px; } .vc-qrow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-bottom: 8px; } #q-fps { grid-template-columns: repeat(4, 1fr); } .vc-qrow button { border: 1px solid var(--line); background: var(--surface-2); color: var(--text); border-radius: 8px; padding: 7px 0; font: 600 12px var(--sans); cursor: pointer; } .vc-qrow button:hover { border-color: var(--accent); } .vc-qrow button.is-on { background: var(--accent); border-color: var(--accent); color: #fff; } .vc-qnote { margin: 4px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.45; } @media (max-width: 640px) { .vc-btn { min-width: 62px; padding: 8px; } .vc-btn span { font-size: 11px; } } /* ---------- Voice in the Messages page and top bar ---------- */ .im-voice-btn { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 10px; cursor: pointer; background: rgba(47, 158, 68, .14); border: 1px solid rgba(111, 207, 115, .45); color: var(--green); font: 600 13px var(--sans); } .im-voice-btn[hidden] { display: none; } .im-voice-btn svg { width: 17px; height: 17px; fill: currentColor; } .im-voice-btn:hover { background: rgba(47, 158, 68, .24); } .im-voicebar { display: flex; align-items: center; gap: 10px; padding: 8px 16px; font-size: 13px; background: rgba(47, 158, 68, .1); border-bottom: 1px solid rgba(111, 207, 115, .25); color: var(--text); } .im-voicebar[hidden] { display: none; } .im-voicebar-ico, .im-convo-voice::before { width: 15px; height: 15px; flex: none; background: var(--green); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9zm13.5 3A4.5 4.5 0 0 0 14 8v8a4.5 4.5 0 0 0 2.5-4zM14 3.2v2.1a7 7 0 0 1 0 13.4v2.1a9 9 0 0 0 0-17.6z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9zm13.5 3A4.5 4.5 0 0 0 14 8v8a4.5 4.5 0 0 0 2.5-4zM14 3.2v2.1a7 7 0 0 1 0 13.4v2.1a9 9 0 0 0 0-17.6z'/%3E%3C/svg%3E") center / contain no-repeat; } .im-voicebar-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* a call already going in this chat: the call buttons join it */ #im-call-btns .im-icon-btn.is-join, .im-call-btns .im-icon-btn.is-join { background: rgba(47, 158, 68, .18); color: #69db7c; border-color: rgba(105, 219, 124, .45); } #im-call-btns .im-icon-btn.is-join[data-call="video"], .im-call-btns .im-icon-btn.is-join[data-call="video"] { background: rgba(0, 125, 255, .2); color: #74c0fc; border-color: rgba(116, 192, 252, .5); } #im-call-btns .im-icon-btn.is-join:hover { filter: brightness(1.2); } .im-convo-voice { display: inline-flex; align-items: center; gap: 3px; color: var(--green); font: 600 11px var(--sans); margin-left: auto; margin-right: 6px; } .im-convo-voice::before { content: ""; width: 12px; height: 12px; } .cb-open { background: var(--accent); } .cb-open:hover { background: var(--accent-hover); } /* ======================= Site shell (top bar + frame + voice) ======================= */ body.page-shell { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; } body.page-shell .topbar { flex: none; } .shell-main { position: relative; flex: 1; min-height: 0; } #app-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: var(--bg); } .shell-main > .vc { position: absolute; inset: 0; z-index: 30; background: #0b0d10; } .shell-main > .vc[hidden] { display: none; } /* top bar middle: incoming-call popup, or the voice dock */ .topbar-center { pointer-events: none; display: flex; align-items: center; justify-content: center; } .topbar-center > * { pointer-events: auto; } .callbar:empty { display: none; } .callbar.has-call ~ .voice-dock { display: none; } .voice-dock { display: flex; align-items: center; gap: 4px; padding: 3px; border-radius: 12px; background: rgba(47, 158, 68, .12); border: 1px solid rgba(111, 207, 115, .4); } .voice-dock[hidden] { display: none; } .vd-main { display: flex; align-items: center; gap: 8px; padding: 3px 10px 3px 8px; border: 0; border-radius: 9px; background: none; color: var(--text); cursor: pointer; text-align: left; } .vd-main:hover { background: rgba(255, 255, 255, .06); } .vd-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(111, 207, 115, .2); flex: none; } .voice-dock.is-speaking .vd-dot { box-shadow: 0 0 0 4px rgba(111, 207, 115, .55); } .vd-text { display: flex; flex-direction: column; line-height: 1.15; } .vd-text strong { font-size: 12.5px; color: var(--green); white-space: nowrap; } .vd-text span { font-size: 11.5px; color: var(--muted); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vd-btn { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--text); cursor: pointer; } .vd-btn svg { width: 17px; height: 17px; fill: currentColor; } .vd-btn:hover { background: rgba(255, 255, 255, .08); } .vd-btn.is-off { color: #f23f43; } .vd-leave { color: #f23f43; } @media (max-width: 1100px) { .topbar-center { top: calc(100% + 8px); transform: translateX(-50%); } } /* settings gear */ .topbar-gear { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; border: 0; background: none; color: var(--muted); cursor: pointer; } .topbar-gear svg { width: 19px; height: 19px; fill: currentColor; } .topbar-gear:hover { color: var(--text); background: var(--surface-2); } /* voice stage inside the shell */ .shell-main > .vc { display: flex; flex-direction: column; } .vc-stage { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px; } /* messages: Join Video */ .im-video-btn { background: rgba(0, 125, 255, .12); border-color: rgba(0, 125, 255, .45); color: var(--accent-text); } .im-video-btn:hover { background: rgba(0, 125, 255, .22); } /* toast */ .toast { position: fixed; left: 50%; top: 70px; transform: translateX(-50%); z-index: 300; max-width: min(520px, calc(100vw - 32px)); padding: 10px 16px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(0, 0, 0, .45); font-size: 14px; } .toast[hidden] { display: none; } /* ---------- Settings ---------- */ .settings { width: min(820px, calc(100vw - 24px)); height: min(620px, calc(100vh - 40px)); padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--text); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); } .settings::backdrop { background: rgba(5, 8, 12, .7); } .st-wrap { display: grid; grid-template-columns: 200px minmax(0, 1fr); height: 100%; position: relative; } .st-nav { background: #12171d; border-right: 1px solid var(--line); padding: 18px 10px; display: flex; flex-direction: column; gap: 2px; } .st-nav h3 { margin: 0 8px 12px; font-size: 16px; } .st-nav button { text-align: left; border: 0; background: none; color: var(--muted); padding: 8px 10px; border-radius: 8px; cursor: pointer; font: 500 14px var(--sans); } .st-nav button:hover { background: var(--surface-2); color: var(--text); } .st-nav button.is-on { background: rgba(0, 125, 255, .16); color: var(--text); } .st-body { position: relative; padding: 22px 26px; overflow-y: auto; } .st-close { position: absolute; right: 14px; top: 12px; z-index: 5; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 20px; cursor: pointer; } .st-close:hover { color: var(--text); border-color: var(--accent); } .st-pane h4 { margin: 0 0 14px; font-size: 18px; } .st-pane[hidden] { display: none; } .st-toggle, .st-select, .st-range { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); } .st-toggle span, .st-select span, .st-range span { display: flex; flex-direction: column; gap: 2px; } .st-toggle strong, .st-select strong, .st-range strong { font-size: 14px; font-weight: 600; } .st-toggle small { color: var(--muted); font-size: 12.5px; } .st-toggle input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; width: 42px; height: 24px; border-radius: 999px; position: relative; cursor: pointer; background: #3a4350; transition: background .15s; } .st-toggle input[type="checkbox"]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; } .st-toggle input[type="checkbox"]:checked { background: #2f9e44; } .st-toggle input[type="checkbox"]:checked::after { transform: translateX(18px); } .st-toggle input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .st-select select { min-width: 260px; max-width: 60%; font: 14px var(--sans); color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; } .st-range input { flex: 1; max-width: 320px; accent-color: var(--accent); } .st-range output { font: 12.5px var(--mono); color: var(--muted); min-width: 40px; text-align: right; } .st-btn { margin: 12px 0 4px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); border-radius: 9px; padding: 8px 14px; font: 600 13px var(--sans); cursor: pointer; } .st-btn:hover { border-color: var(--accent); } .st-btn[hidden] { display: none; } .st-btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; } .st-btn-primary:hover { background: var(--accent-hover); } .st-note { color: var(--muted); font-size: 12.5px; margin: 0 0 6px; line-height: 1.5; } .st-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 14px 0 8px; } .st-pane .vc-qrow { margin-bottom: 4px; } .st-pane .vc-qrow button { padding: 9px 0; } .st-meter { height: 6px; border-radius: 99px; background: var(--bg); overflow: hidden; margin: -4px 0 4px; } .st-meter span { display: block; height: 100%; width: 0; background: var(--green); transition: width .08s; } .st-cam { width: 100%; max-width: 360px; aspect-ratio: 16 / 9; border-radius: 10px; background: #000; object-fit: cover; transform: scaleX(-1); margin-top: 10px; display: block; } .st-cam[hidden] { display: none; } .st-form { display: flex; flex-direction: column; gap: 8px; max-width: 360px; } .st-form input { font: 14px var(--sans); color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; } .st-form input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; } .st-msg { margin: 4px 0 0; font-size: 13px; min-height: 1.2em; } .st-msg.is-good { color: var(--green); } .st-msg.is-bad { color: #f0a49b; } .st-saved { position: absolute; right: 60px; top: 20px; margin: 0; color: var(--green); font-size: 12.5px; } @media (max-width: 640px) { .st-wrap { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .st-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px; margin-right: 52px; } .st-close { top: 9px; right: 10px; } /* (in the gap at the end of the sections row, which stops short of it) */ .st-nav h3 { display: none; } .st-select { flex-direction: column; align-items: stretch; } .st-select select { max-width: none; min-width: 0; } } /* Top bar: your name in your rank's colors (Admin blue, Member grey, Pookie pink), left of Admin/Accounts */ .topbar .who.role-admin, .topbar .who.role-member, .topbar .who.role-custom { font: 600 13px/1.5 var(--sans, inherit); padding: 3px 11px; border-radius: 999px; white-space: nowrap; } .topbar-right form + .who { margin-left: 4px; } /* "Sign Out?" confirmation */ .signout-dlg { width: min(360px, calc(100vw - 32px)); } .signout-dlg form { padding: 22px 22px 20px; } .signout-dlg h3 { margin-bottom: 8px; } .signout-text { margin: 0 0 4px; color: var(--muted); font-size: 14px; } .signout-text[hidden] { display: none; } .btn-signout { background: var(--red); border-color: var(--red); } .btn-signout:hover { filter: brightness(1.1); } /* Narrow windows (e.g. a vertical 1080p monitor): keep the voice controls inside the top bar, in the gap between the tabs and your name, instead of dropping them onto the page. A ringing call still drops below. */ @media (max-width: 1100px) { .topbar-center:not(:has(.callbar.has-call)) { position: static; transform: none; margin: 0 auto 0 0; } .voice-dock #vd-name { display: none; } } /* ---------- Call tiles: ⋮ menu, Picture-In-Picture, drag to reorder, streams on top ---------- */ .vc-tile video::-webkit-media-controls { display: none !important; } .vc-more, .vc-pip { position: absolute; width: 34px; height: 34px; border-radius: 8px; border: 0; cursor: pointer; z-index: 2; padding: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .6); color: #fff; opacity: 0; transition: opacity .12s; } .vc-more { right: 48px; top: 8px; } .vc-tile:not(.has-video) .vc-more { right: 8px; } /* no full-screen button without a camera: the dots take its place */ .vc-pip { right: 8px; bottom: 8px; } .vc-more svg, .vc-pip svg { width: 20px; height: 20px; fill: currentColor; } .vc-more:hover, .vc-pip:hover, .vc-fs:hover { background: rgba(0, 0, 0, .8); } .vc-tile:hover .vc-more, .vc-tile:hover .vc-pip, .vc-tile:focus-visible .vc-more, .vc-tile:focus-visible .vc-pip, .vc-more:focus-visible, .vc-pip:focus-visible { opacity: 1; } .vc-tile:not(.has-video) .vc-pip { display: none; } .vc-tile:fullscreen .vc-more { right: 58px; top: 18px; } .vc-tile:fullscreen:not(.has-video) .vc-more { right: 18px; } .vc-tile:fullscreen .vc-pip { right: 18px; bottom: 18px; } .vc.has-focus .vc-grid .vc-more, .vc.has-focus .vc-grid .vc-pip, .vc.has-focus .vc-grid .vc-fs { display: none; } .vc-menu { position: fixed; z-index: 2147483000; min-width: 230px; padding: 6px; border-radius: 10px; background: #1b1f26; border: 1px solid var(--line); box-shadow: 0 14px 40px rgba(0, 0, 0, .55); display: flex; flex-direction: column; } .vc-menu[hidden] { display: none; } .vc-menu-item { text-align: left; border: 0; background: none; color: var(--text); font: 500 14px var(--sans); padding: 8px 10px; border-radius: 6px; cursor: pointer; } .vc-menu-item:hover:not(:disabled), .vc-menu-item:focus-visible { background: var(--accent); color: #fff; outline: none; } .vc-menu-item:disabled { color: var(--muted); opacity: .55; cursor: default; } .vc-ico-off { background: #f0a49b; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9zm13.6 3 2.7-2.7-1.4-1.4-2.7 2.7-2.7-2.7-1.4 1.4 2.7 2.7-2.7 2.7 1.4 1.4 2.7-2.7 2.7 2.7 1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9zm13.6 3 2.7-2.7-1.4-1.4-2.7 2.7-2.7-2.7-1.4 1.4 2.7 2.7-2.7 2.7 1.4 1.4 2.7-2.7 2.7 2.7 1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat; } .vc-tile.is-dragging { opacity: .45; } .vc-tile[draggable="true"] { -webkit-user-drag: element; } /* call timer inside the top-bar voice box */ .vd-sub { display: flex; align-items: baseline; gap: 0; } .vd-text .vd-sub span { max-width: 130px; } .vd-time { font-family: var(--mono); font-size: 11px !important; color: var(--muted); } .vd-time:not(:empty)::before { content: "\00b7"; margin: 0 5px; } @media (max-width: 1100px) { .vd-time:not(:empty)::before { content: none; margin: 0; } } /* ---------- Call header: no "Voice Connected" / timer (they're in the top bar box) ---------- */ .vc-top .vc-time { display: none; } .vc-top .vc-status[hidden] { display: none; } /* tile menu: volume slider */ .vc-menu-vol { padding: 8px 10px 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 4px 0; } .vc-menu-vol-top { display: flex; justify-content: space-between; align-items: center; font: 500 13px var(--sans); color: var(--text); margin-bottom: 8px; } .vc-menu-vol-val { border: 0; background: none; color: var(--muted); font: 600 12px var(--mono); cursor: pointer; padding: 0; } .vc-menu-vol-val:hover { color: var(--text); } .vc-menu input[type="range"], .vc-sb-vol input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; margin: 0; cursor: pointer; background: linear-gradient(90deg, var(--accent) var(--fill, 25%), rgba(255, 255, 255, .14) var(--fill, 25%)); } .vc-menu input[type="range"]::-webkit-slider-thumb, .vc-sb-vol input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); } .vc-menu input[type="range"]::-moz-range-thumb, .vc-sb-vol input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); } .vc-menu input[type="range"]::-moz-range-track, .vc-sb-vol input[type="range"]::-moz-range-track { background: transparent; } /* Soundboard + More Options pop-ups above the call buttons */ .vc-popwrap { position: relative; display: flex; } .vc-pop { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 10; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); } .vc-pop[hidden] { display: none; } .vc-pop h4 { margin: 0 0 10px; font-size: 14px; } .vc-sb { width: 456px; } .vc-sb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .vc-sb-item { display: flex; align-items: center; gap: 7px; padding: 8px 9px; border-radius: 9px; cursor: pointer; text-align: left; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: 500 12.5px var(--sans); min-width: 0; } .vc-sb-item:hover { border-color: var(--accent); background: rgba(0, 125, 255, .1); } .vc-sb-emoji { font-size: 17px; line-height: 1; flex: none; } .vc-sb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vc-sb-vol { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-top: 12px; font-size: 12.5px; color: var(--muted); } .vc-sb-vol b { font: 600 12px var(--mono); color: var(--text); min-width: 38px; text-align: right; } .vc-opts { width: 290px; padding: 8px; left: auto; right: -40px; transform: none; } .vc-check { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 10px; border-radius: 8px; font: 500 14px var(--sans); color: var(--text); cursor: pointer; } .vc-check:hover { background: var(--surface-2); } .vc-check input { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 6px; margin: 0; flex: none; cursor: pointer; border: 1.5px solid #8b929c; background: transparent; display: grid; place-items: center; } .vc-check input:checked { background: #5865f2; border-color: #5865f2; } .vc-check input:checked::after { content: ""; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: translateY(-1px) rotate(45deg); } .vc-check input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* who played a sound: a little tag on their tile */ .vc-sb-tag { position: absolute; left: 50%; top: 10px; transform: translate(-50%, -6px); z-index: 3; opacity: 0; pointer-events: none; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, .7); color: #fff; font: 600 12.5px var(--sans); transition: opacity .15s, transform .15s; white-space: nowrap; } .vc-sb-tag.is-on { opacity: 1; transform: translate(-50%, 0); } /* Soundboard: your board + the shared archive */ .vc-sb { max-height: calc(100vh - 190px); overflow-y: auto; } .vc-sb-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .vc-sb-head h4 { margin: 0; } .vc-sb-edit { border: 1px solid var(--line); background: var(--surface-2); color: var(--text); border-radius: 8px; padding: 5px 11px; font: 600 12.5px var(--sans); cursor: pointer; } .vc-sb-edit:hover, .vc-sb-edit[aria-pressed="true"] { border-color: var(--accent); } .vc-sb-edit[aria-pressed="true"] { background: var(--accent); color: #fff; } .vc-sb-item { position: relative; } .vc-sb-item.is-empty { border-style: dashed; color: var(--muted); background: transparent; } .vc-sb-grid.is-editing .vc-sb-item { cursor: grab; } .vc-sb-item.is-picked { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(0, 125, 255, .45); } .vc-sb-item.is-over { border-color: var(--green); background: rgba(111, 207, 115, .12); } .vc-sb-x { position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: #c92a2a; color: #fff; font: 700 12px/1 var(--sans); } .vc-sb-hint { margin: 8px 0 0; color: var(--muted); font-size: 12px; } .vc-sb-hint[hidden], .vc-sb-archive[hidden] { display: none; } .vc-sb-archive { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); } .vc-sb-archead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: 13.5px; } .vc-sb-archead span { color: var(--muted); font-size: 12px; } .vc-sb-list { max-height: 210px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding-right: 2px; } .vc-sb-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px; cursor: grab; } .vc-sb-row:hover { background: var(--surface-2); } .vc-sb-prev, .vc-sb-del { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; padding: 0; background: rgba(255, 255, 255, .08); color: var(--text); } .vc-sb-prev svg, .vc-sb-del svg { width: 14px; height: 14px; fill: currentColor; } .vc-sb-prev:hover { background: var(--accent); color: #fff; } .vc-sb-del { background: none; color: var(--muted); } .vc-sb-del:hover { color: #f0a49b; } .vc-sb-rname { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; font-size: 13px; } .vc-sb-rtext { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vc-sb-by { color: var(--muted); font-size: 11.5px; white-space: nowrap; max-width: 90px; overflow: hidden; text-overflow: ellipsis; } .vc-sb-add { border: 1px solid var(--line); background: none; color: var(--text); border-radius: 7px; padding: 3px 9px; cursor: pointer; font: 600 11.5px var(--sans); white-space: nowrap; } .vc-sb-add:hover:not(:disabled) { border-color: var(--accent); background: var(--accent); color: #fff; } .vc-sb-add:disabled { color: var(--muted); cursor: default; opacity: .7; } .vc-sb-up { display: grid; grid-template-columns: 1fr 112px 52px auto; gap: 6px; margin-top: 10px; } .vc-sb-up input[type="text"] { min-width: 0; font: 13px var(--sans); color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; } .vc-sb-up input[type="text"]:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; } .vc-sb-file { position: relative; display: flex; align-items: center; min-width: 0; padding: 6px 9px; border-radius: 8px; cursor: pointer; border: 1px dashed var(--line); color: var(--muted); font-size: 12.5px; } .vc-sb-file:hover { border-color: var(--accent); color: var(--text); } .vc-sb-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .vc-sb-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #sb-upload { border: 0; border-radius: 8px; padding: 6px 12px; background: var(--accent); color: #fff; font: 600 12.5px var(--sans); cursor: pointer; } #sb-upload:disabled { opacity: .55; cursor: default; } .vc-sb-msg { margin: 6px 0 0; min-height: 1.2em; font-size: 12.5px; color: var(--muted); } /* ---------- Tabs that are on the way: greyed out, "Coming Soon" bubble on hover ---------- */ .topnav-link { padding: 7px 11px; } .topnav-link.is-soon { color: var(--muted); opacity: .45; cursor: default; user-select: none; } .topnav-link.is-soon:hover, .topnav-link.is-soon:focus-visible { background: none; color: var(--muted); opacity: .6; outline: none; } .topnav-link.is-soon::after, .topnav-link.is-soon::before { position: absolute; left: 50%; pointer-events: none; opacity: 0; transition: opacity .12s, transform .12s; z-index: 80; } .topnav-link.is-soon::after { content: attr(data-soon); top: calc(100% + 9px); transform: translate(-50%, -3px); padding: 5px 10px; border-radius: 8px; white-space: nowrap; background: #f2f4f7; color: #12161c; font: 600 12.5px var(--sans); box-shadow: 0 8px 22px rgba(0, 0, 0, .45); } .topnav-link.is-soon::before { content: ""; top: calc(100% + 4px); transform: translate(-50%, -3px); border: 5px solid transparent; border-bottom-color: #f2f4f7; border-top: 0; } .topnav-link.is-soon:hover::after, .topnav-link.is-soon:hover::before, .topnav-link.is-soon:focus-visible::after, .topnav-link.is-soon:focus-visible::before { opacity: 1; transform: translate(-50%, 0); } .topnav-link.is-soon:hover, .topnav-link.is-soon:focus-visible { opacity: 1; color: rgba(155, 166, 178, .55); } /* With more tabs, the voice box sits in the gap between the tabs and the right side instead of floating over the middle of the bar (so it can never cover a tab). An incoming call still drops below. */ /* (the voice box's own auto margins split the gap evenly, so it sits dead center between the last tab and Quick Access) */ .topbar-center { position: static; transform: none; margin: 0 auto; } .topnav { margin-right: 0; } .topbar-right { margin-left: 0; } @media (max-width: 1100px) { .topbar-center:not(:has(.callbar.has-call)) { margin: 0 auto; } } @media (max-width: 1600px) { .topbar-center:has(.callbar.has-call) { position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); margin: 0; } } /* the voice box never makes the bar taller, and keeps a little space on both sides */ .topbar-center { margin-block: -6px; padding-inline: 12px; } @media (max-width: 1560px) { .topnav-link { padding: 7px 8px; font-size: 13.5px; } .topnav { margin-left: 18px; gap: 2px; } .voice-dock #vd-name { display: none; } .vd-time:not(:empty)::before { content: none; margin: 0; } } @media (max-width: 1280px) { .vd-text strong { display: none; } .topbar-center { padding-inline: 8px; } } @media (max-width: 1180px) { .topbar .brand-name { display: none; } .topnav { margin-left: 10px; gap: 0; } .topnav-link { padding: 6px 7px; font-size: 13px; } .topnav-link.is-soon { padding: 6px 5px; font-size: 12.5px; } .topbar-right { gap: 8px; } .topbar .btn-ghost { padding: 6px 10px; } } /* ---------- Your name = a menu: Profile / Settings / Admin (Users) ---------- */ .usermenu { position: relative; } .usermenu-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-family: var(--sans); } .topbar .who.usermenu-btn { padding: 4px 8px 4px 12px; } .usermenu-btn:hover, .usermenu-btn[aria-expanded="true"] { filter: brightness(1.18); } .usermenu-btn.is-on { box-shadow: 0 0 0 2px rgba(255, 255, 255, .12); } .usermenu-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .usermenu-caret { width: 16px; height: 16px; fill: currentColor; opacity: .8; transition: transform .12s; } .usermenu-btn[aria-expanded="true"] .usermenu-caret { transform: rotate(180deg); } .usermenu-btn .badge { margin: 0; } .usermenu-list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 90; min-width: 190px; padding: 6px; background: #1b1f26; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 44px rgba(0, 0, 0, .55); display: flex; flex-direction: column; } .usermenu-list[hidden] { display: none; } .usermenu-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; border: 0; background: none; color: var(--text); font: 500 14px var(--sans); text-decoration: none; text-align: left; cursor: pointer; width: 100%; } .usermenu-item svg { width: 18px; height: 18px; fill: var(--muted); flex: none; } .usermenu-item:hover, .usermenu-item:focus-visible { background: var(--accent); color: #fff; outline: none; } .usermenu-item:hover svg, .usermenu-item:focus-visible svg { fill: #fff; } .usermenu-item.is-on:not(:hover):not(:focus-visible) { background: rgba(0, 125, 255, .14); } .usermenu-item .badge { margin-left: auto; } .topbar-right { gap: 10px; } /* ---------- Profile page ---------- */ .profile-page { max-width: 760px; } .profile-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 26px; } .profile-top { display: flex; align-items: center; gap: 18px; } .profile-avatar { position: relative; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; flex: none; display: grid; place-items: center; background: var(--accent); color: #fff; font: 700 36px var(--sans); } .profile-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .profile-id h2 { margin: 0 0 6px; font-size: 24px; } .profile-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 24px 0 0; } .profile-facts div { background: var(--surface-2); border-radius: 12px; padding: 12px 14px; } .profile-facts dt { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; } .profile-facts dd { margin: 0; font-size: 15px; } .profile-facts .muted { color: var(--muted); } .profile-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; } .profile-actions .btn-ghost { text-decoration: none; } .profile-soon { margin: 18px 0 0; color: var(--muted); font-size: 13px; } /* Room for the voice box in the dead center: slightly tighter tabs and a slimmer voice box */ .topnav { margin-left: 18px; gap: 2px; } .topnav-link { padding: 7px 9px; font-size: 13.5px; } .voice-dock { gap: 2px; padding: 2px; } .vd-main { gap: 7px; padding: 3px 8px 3px 7px; } .vd-btn { width: 29px; height: 30px; } .vd-text span { max-width: 120px; } /* the line under "Voice Connected": the room's name shortens with "…" if it has to, the call timer always shows in full */ .vd-text .vd-sub { max-width: none; overflow: visible; } .vd-text .vd-sub #vd-name { max-width: 150px; min-width: 0; flex: 0 1 auto; } .vd-text .vd-sub .vd-time { max-width: none; overflow: visible; flex: none; } @media (max-width: 1180px) { .topnav { margin-left: 10px; gap: 0; } .topnav-link { padding: 6px 7px; font-size: 13px; } .topnav-link.is-soon { padding: 6px 5px; font-size: 12.5px; } } /* ---------- dragging tiles: the picked-up tile leaves a faint placeholder; others slide out of the way ---------- */ .vc-tile.vc-ghost { position: fixed; z-index: 60; margin: 0; pointer-events: none; opacity: .95; aspect-ratio: auto; box-shadow: 0 18px 50px rgba(0, 0, 0, .6), 0 0 0 2px var(--accent); } .vc-tile.is-placeholder { opacity: .3; } /* while dragging, the clenched hand stays everywhere until you let go */ html.vc-grabbing, html.vc-grabbing * { cursor: grabbing !important; user-select: none !important; } .vc-grid .vc-tile.can-drag { touch-action: none; } /* (the clenched hand shows only while one's being dragged) */ /* ---------- "Connecting…" on someone's tiles until the connection to them is up ---------- */ .vc-conn { position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); z-index: 3; pointer-events: none; display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; white-space: nowrap; background: rgba(0, 0, 0, .7); color: #fff; font: 600 12.5px var(--sans); } .vc-conn::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #f5a524; animation: vc-pulse 1.1s ease-in-out infinite; } .vc-tile.is-failed .vc-conn::before { background: #f23f43; animation: none; } .vc-tile.is-connecting video { opacity: .35; } @keyframes vc-pulse { 50% { opacity: .3; } } /* ---------- audio-only people as bubbles (Show Non-Video Participants off) ---------- */ .vc-bubbles { position: absolute; left: 12px; top: 12px; z-index: 6; display: flex; flex-wrap: wrap; gap: 8px; max-width: calc(100% - 24px); padding: 7px; border-radius: 999px; background: rgba(12, 15, 20, .72); border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 8px 26px rgba(0, 0, 0, .45); cursor: grab; touch-action: none; user-select: none; } .vc-bubbles[hidden] { display: none; } .vc-bubbles.is-moving { cursor: grabbing; } .vc-bubbles .vc-tile { width: 52px; height: 52px; aspect-ratio: 1; border-radius: 50%; flex: none; overflow: visible; cursor: inherit; background: transparent; display: grid; place-items: center; } .vc-bubbles .vc-avatar { width: 52px; height: 52px; font-size: 21px; } .vc-bubbles .vc-tile.is-speaking { box-shadow: 0 0 0 3px #3ba55d, 0 0 14px rgba(59, 165, 93, .45); } .vc-bubbles .vc-label, .vc-bubbles .vc-more, .vc-bubbles .vc-pip, .vc-bubbles .vc-fs, .vc-bubbles .vc-conn, .vc-bubbles video { display: none; } .vc-bubbles .vc-tile.is-connecting .vc-avatar { opacity: .45; } .vc-bubbles .vc-tile.is-muted::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 18px; height: 18px; border-radius: 50%; background: #f23f43 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M19 11a7 7 0 0 1-1.2 3.9l-1.5-1.5A5 5 0 0 0 17 11zm-4 .2L9 5.2V5a3 3 0 0 1 6 0zM4.3 3 3 4.3l6 6V11a3 3 0 0 0 4.4 2.7l1.6 1.6A5 5 0 0 1 7 11H5a7 7 0 0 0 6 6.9V21h2v-3.1a6.9 6.9 0 0 0 3.4-1.4L19.7 21 21 19.7z'/%3E%3C/svg%3E") center / 12px no-repeat; border: 2px solid #12161c; } /* Settings > Voice & Video > Connection Details */ .st-diag { padding: 12px 0; border-top: 1px solid var(--line); } .st-diag-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .st-diag-head small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; } .st-diag-btns { display: flex; gap: 6px; flex: none; } .st-diag-out { margin: 10px 0 0; padding: 10px 12px; max-height: 220px; overflow: auto; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); font: 11.5px/1.5 var(--mono); color: var(--text); white-space: pre-wrap; word-break: break-word; } .st-diag-out[hidden] { display: none; } .vc-bubbles .vc-sb-tag { top: calc(100% + 8px); } .vc-bubbles .vc-sb-tag.is-on { transform: translate(-50%, 0); } /* bubbles stack top to bottom */ .vc-bubbles { flex-direction: column; flex-wrap: nowrap; border-radius: 36px; max-width: none; max-height: calc(100% - 24px); } .discord-off { padding: 40px; text-align: center; color: var(--muted); } /* ---------- Upload tab ---------- */ .up-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } @media (max-width: 1000px) { .up-grid { grid-template-columns: minmax(0, 1fr); } } .up-card { background: linear-gradient(180deg, rgba(0,125,255,.06), rgba(0,125,255,0) 60%), var(--surface); border: 1px solid var(--accent-dim); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; } .up-head { display: flex; gap: 12px; align-items: flex-start; } .up-head h2 { margin: 0 0 3px; font-size: 17px; } .up-head p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; } .up-ico { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; background: rgba(0,125,255,.14); } .up-ico svg { width: 21px; height: 21px; fill: var(--accent-text); } .up-field { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); } .up-field select { flex: 1; min-width: 0; font: 14px var(--sans); color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; } .up-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; min-height: 120px; padding: 16px; border: 2px dashed var(--line); border-radius: 12px; cursor: pointer; color: var(--muted); font-size: 13px; transition: border-color .12s, background .12s; } .up-drop strong { color: var(--text); font-size: 15px; } .up-drop:hover, .up-drop:focus-visible { border-color: var(--accent); outline: none; } .up-drop.is-over { border-color: var(--green); background: rgba(111, 207, 115, .08); } .up-drop-small { min-height: 84px; } .up-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; } .up-list:empty { display: none; } .up-row { background: var(--surface-2); border-radius: 9px; padding: 8px 10px; } .up-row-top { display: flex; align-items: center; gap: 10px; font-size: 13px; } .up-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .up-row-info { color: var(--muted); white-space: nowrap; font-size: 12px; } .up-row-info a { color: var(--accent-text); } .up-row.is-done .up-row-info { color: var(--green); } .up-row.is-bad .up-row-info { color: #f0a49b; white-space: normal; } .up-row-x { border: 0; background: none; color: var(--muted); cursor: pointer; font: 600 12px var(--sans); } .up-row-x:hover { color: #f0a49b; } .up-bar { height: 4px; border-radius: 4px; background: rgba(255,255,255,.08); margin-top: 6px; overflow: hidden; } .up-bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .15s; } .up-row.is-done .up-bar span { background: var(--green); } .up-row.is-bad .up-bar { display: none; } .up-sub { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .up-gif-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; } .up-gif-strip img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: var(--surface-2); } .up-empty { margin: 0; color: var(--muted); font-size: 13px; list-style: none; } .up-sound-form { display: flex; flex-direction: column; gap: 8px; } .up-sound-fields { display: grid; grid-template-columns: 1fr 64px auto; gap: 8px; } .up-sound-fields input { min-width: 0; font: 14px var(--sans); color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; } .up-sound-fields input:focus, .up-field select:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; } .up-msg { margin: 0; min-height: 1.2em; font-size: 13px; color: var(--muted); } .up-msg.is-good { color: var(--green); } .up-msg.is-bad { color: #f0a49b; } .up-sounds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; } .up-sound { display: flex; align-items: center; gap: 9px; padding: 5px 6px; border-radius: 8px; font-size: 13.5px; } .up-sound:hover { background: var(--surface-2); } .up-play { width: 28px; height: 28px; border-radius: 50%; border: 0; flex: none; display: grid; place-items: center; cursor: pointer; background: rgba(255,255,255,.08); color: var(--text); padding: 0; } .up-play svg { width: 14px; height: 14px; fill: currentColor; } .up-play:hover { background: var(--accent); color: #fff; } .up-sound-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .up-sound-by { color: var(--muted); font-size: 12px; } .up-del { border: 0; background: none; color: var(--muted); cursor: pointer; font: 600 12px var(--sans); } .up-del:hover { color: #f0a49b; } /* Archive Upload: on the way */ .up-card.is-soon { opacity: .55; filter: grayscale(.6); } .up-card.is-soon .up-ico { background: rgba(255,255,255,.06); } .up-card.is-soon .up-ico svg { fill: var(--muted); } .up-soon { min-height: 180px; display: grid; place-items: center; border: 2px dashed var(--line); border-radius: 12px; cursor: not-allowed; background: repeating-linear-gradient(135deg, rgba(255,255,255,.015) 0 12px, transparent 12px 24px); } .up-soon span { font: 700 20px var(--sans); color: var(--muted); letter-spacing: .02em; } /* ---------- a minimized call, docked at the top of its chat ---------- */ .im-callslot { flex: none; } .has-callslot .im-voicebar { display: none; } .shell-main > .vc.is-docked { inset: auto; border-bottom: 1px solid var(--line); box-shadow: 0 10px 24px rgba(0, 0, 0, .35); z-index: 25; } .vc.is-docked .vc-top { padding: 6px 12px; gap: 10px; } .vc.is-docked .vc-title strong { font-size: 14px; } .vc.is-docked .vc-stage { padding: 8px; gap: 8px; } .vc.is-docked .vc-bar { padding: 6px 10px 8px; } .vc.is-docked .vc-controls { gap: 6px; } .vc.is-docked .vc-btn { min-width: 44px; padding: 7px 10px; border-radius: 11px; } .vc.is-docked .vc-btn > span { display: none; } .vc.is-docked .vc-btn svg { width: 19px; height: 19px; } .vc.is-docked .vc-share #btn-screen { border-radius: 11px; } .vc.is-docked .vc-quality-btn { border-radius: 0 11px 11px 0; padding: 7px 8px; } .vc.is-docked .vc-quality-btn > span { display: inline; font-size: 10.5px; } .vc.is-docked .vc-bubbles { transform: scale(.85); transform-origin: 0 0; } .vc-resize { display: none; position: absolute; left: 0; right: 0; bottom: -9px; height: 18px; cursor: ns-resize; z-index: 9; touch-action: none; } .vc.is-docked .vc-resize { display: block; } .vc-resize::after { content: ""; position: absolute; left: 50%; top: 5px; width: 64px; height: 8px; border-radius: 999px; transform: translateX(-50%); background: #3a4350; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 2px 8px rgba(0, 0, 0, .5); transition: background .12s, width .12s; } .vc-resize:hover::after, html.vc-resizing .vc-resize::after { background: var(--accent); width: 84px; } html.vc-resizing, html.vc-resizing * { cursor: ns-resize !important; user-select: none !important; } html.vc-resizing iframe { pointer-events: none; } /* ten tabs: the greyed "Coming Soon" ones are a touch smaller so the voice box still fits dead center */ @media (min-width: 1181px) { .topnav { margin-left: 14px; } .topnav-link { padding: 7px 8px; } .topnav-link.is-soon { padding: 7px 6px; font-size: 12.5px; } } /* ---------- once per account: the "review your defaults" walk-through (Settings in welcome mode) ---------- */ .settings.is-onboarding { width: min(640px, calc(100vw - 24px)); height: min(720px, calc(100vh - 40px)); } .settings.is-onboarding .st-wrap { grid-template-columns: minmax(0, 1fr); } .settings.is-onboarding .st-nav, .settings.is-onboarding .st-close, .settings.is-onboarding .st-diag { display: none; } .settings.is-onboarding .st-body { display: flex; flex-direction: column; padding: 26px 28px 0; } .settings.is-onboarding .st-pane { flex: none; } .settings.is-onboarding .st-pane + .st-pane { margin-top: 18px; } .settings.is-onboarding .st-pane h4 { font-size: 15px; color: var(--accent-text); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; } .st-intro[hidden], .st-steps[hidden] { display: none; } .st-intro { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .st-step { margin: 0 0 6px; color: var(--muted); font: 600 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; } .st-intro h3 { margin: 0 0 8px; font-size: 22px; } .st-intro-text { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; } .st-intro-text strong { color: var(--text); } .st-steps { position: sticky; bottom: 0; margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 14px 0 18px; background: linear-gradient(180deg, rgba(21, 27, 34, 0), var(--surface) 30%); } .st-skip { border: 0; background: none; color: var(--muted); font: 600 13px var(--sans); cursor: pointer; padding: 6px 2px; } .st-skip:hover { color: var(--text); } .st-dots { display: flex; gap: 6px; margin: 0 auto; } .st-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: background .15s, width .15s; } .st-dots i.is-done { background: rgba(0, 125, 255, .5); } .st-dots i.is-on { background: var(--accent); width: 22px; border-radius: 4px; } .st-steps .btn-primary, .st-steps .btn-ghost { min-width: 90px; } .st-steps [hidden] { display: none; } /* ===================== Home: Quick Reply, Announcements, Active Servers ===================== */ .home-top { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; margin-bottom: 24px; } @media (max-width: 900px) { .home-top { grid-template-columns: minmax(0, 1fr); } } .home-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; min-width: 0; min-height: 0; max-height: 530px; /* Quick Reply and Announcements never get taller than this - their lists scroll */ } .home-card > .section-head, .home-card > .ann-new { flex: none; } .home-card .section-head { margin-bottom: 10px; } .home-quick .section-head { border-bottom-color: var(--accent-dim); } .home-news .section-head { border-bottom-color: rgba(217, 180, 90, .3); } .home-h-ico { width: 19px; height: 19px; fill: var(--accent-text); flex: none; } .home-news .home-h-ico { fill: var(--amber); } .home-link { color: var(--accent-text); } .home-active { margin-top: 0; } .dash.home .section-active { padding-bottom: 6px; } .qr-list { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 -6px; padding: 0 6px; } .qr-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 11px; text-decoration: none; color: var(--text); border: 1px solid transparent; transition: background .12s, border-color .12s; } .qr-item:hover { background: var(--surface-2); border-color: var(--line); } .qr-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; } .qr-item.is-missed { background: rgba(0, 125, 255, .07); border-color: var(--accent-dim); } .qr-item.is-missed:hover { background: rgba(0, 125, 255, .12); } .qr-item .im-dot { border-color: var(--surface); } .qr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .qr-top { display: flex; align-items: baseline; gap: 8px; } .qr-name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qr-time { margin-left: auto; color: var(--muted); font-size: 11px; flex: none; } .qr-text { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qr-item.is-missed .qr-text { color: var(--text); } .qr-end { flex: none; width: 58px; display: flex; justify-content: flex-end; } .qr-go { flex: none; font: 600 12px var(--sans); color: var(--accent-text); opacity: 0; transition: opacity .12s; border: 1px solid var(--accent-dim); border-radius: 999px; padding: 3px 10px; } .qr-item:hover .qr-go, .qr-item:focus-visible .qr-go { opacity: 1; } .ann-new { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .ann-new textarea, .ann-edit textarea { font: 14px/1.45 var(--sans); color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; resize: vertical; min-height: 44px; width: 100%; } .ann-new textarea:focus, .ann-edit textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; } .ann-new-row { display: flex; align-items: center; gap: 8px; justify-content: flex-end; } .ann-msg { margin-right: auto; color: var(--muted); font-size: 12.5px; } .ann-list { display: flex; flex-direction: column; gap: 10px; flex: 0 1 auto; min-height: 0; overflow-y: auto; } .ann { border: 1px solid var(--line); border-left: 3px solid var(--amber); border-radius: 10px; padding: 10px 14px; background: linear-gradient(90deg, rgba(217, 180, 90, .06), rgba(217, 180, 90, 0) 60%); } .ann-meta { display: flex; align-items: baseline; gap: 4px; font-size: 12px; color: var(--muted); flex-wrap: wrap; } .ann-meta strong { color: var(--text); font-size: 13px; } .ann-acts { margin-left: auto; display: flex; gap: 4px; } .ann-btn { background: none; border: 0; padding: 2px 6px; border-radius: 6px; cursor: pointer; font: 12px var(--sans); color: var(--muted); } .ann-btn:hover { color: var(--text); background: var(--surface-2); } .ann-del:hover { color: #f0a49b; } .ann-text { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14.5px; line-height: 1.5; } .ann-edit { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } /* ===================== NAS file explorer ===================== */ .page-media .dash { padding-bottom: 110px; } .nas-box { position: relative; background: var(--surface); border: 1px solid var(--accent-dim); border-radius: 14px; background-image: linear-gradient(180deg, rgba(0,125,255,.05), rgba(0,125,255,0) 140px); min-height: 320px; overflow: clip; } .nas-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px 12px 16px; border-bottom: 1px solid var(--line); } .nas-crumbs { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; min-width: 0; flex: 1; font-size: 14.5px; } .nas-crumb { color: var(--muted); text-decoration: none; padding: 4px 8px; border-radius: 7px; border: 1px dashed transparent; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } a.nas-crumb:hover { color: var(--text); background: var(--surface-2); } .nas-crumb.is-here { color: var(--text); font-weight: 600; } .nas-sep { color: var(--line); font-size: 16px; padding: 0 1px; } .nas-tools { display: flex; align-items: center; gap: 8px; } .nas-tip { color: var(--muted); font-size: 12px; margin-right: 4px; } @media (max-width: 1100px) { .nas-tip { display: none; } } .nas-tools .btn-ghost svg, .nas-selbar .btn-ghost svg { width: 16px; height: 16px; fill: currentColor; vertical-align: -3px; margin-right: 6px; } .nas-tools .btn-ghost, .nas-selbar .btn-ghost { display: inline-flex; align-items: center; } .nas-icon-btn { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; background: transparent; border: 1px solid var(--line); color: var(--muted); } .nas-icon-btn:hover { color: var(--text); border-color: var(--muted); } .nas-icon-btn svg { width: 17px; height: 17px; fill: currentColor; } .nas-selbar { display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 16px; font-size: 13.5px; background: linear-gradient(rgba(0, 125, 255, .1), rgba(0, 125, 255, .1)), var(--surface); border-bottom: 1px solid var(--accent-dim); position: absolute; top: 0; left: 0; right: 0; z-index: 4; box-sizing: border-box; } .nas-selbar[hidden] { display: none; } /* one grid for the header and every row (subgrid), so Size / Added / actions line up */ .nas-table { display: grid; grid-template-columns: 30px 40px minmax(0, 1fr) auto auto auto auto; column-gap: 12px; } .nas-cols, .nas-list, .nas-row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; } .nas-cols { padding: 8px 14px 6px 16px; color: var(--muted); font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--line); } .nas-cols[hidden] { display: none; } .nas-col-size { text-align: right; } .nas-list { list-style: none; margin: 0; padding: 4px 6px 6px; transition: opacity .15s; align-content: start; } .nas-list.is-loading { opacity: .55; } .nas-row { padding: 6px 8px 6px 10px; border-radius: 9px; min-height: 46px; border: 1px solid transparent; user-select: none; } .nas-row:hover { background: var(--surface-2); } .nas-row.is-selected { background: rgba(0, 125, 255, .12); border-color: var(--accent-dim); } .nas-row.is-dragging { opacity: .45; } .nas-row.is-drop, .nas-crumb.is-drop { background: rgba(0, 125, 255, .18); border-color: var(--accent); border-style: dashed; } .nas-check { display: grid; place-items: center start; cursor: pointer; padding-left: 2px; } .nas-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; } .nas-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: rgba(255,255,255,.04); position: relative; overflow: hidden; } /* a preview of the file instead of the plain icon */ .nas-ico img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; animation: nas-thumb-in .2s ease-out; } .nas-ico.has-thumb { background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); } .nas-ico.has-thumb svg { visibility: hidden; } .nas-ico-badge { position: absolute; right: 2px; bottom: 2px; z-index: 1; width: 16px; height: 16px; border-radius: 5px; display: grid; place-items: center; background: rgba(10, 30, 56, .92); box-shadow: 0 1px 4px rgba(0, 0, 0, .6); } .nas-ico.has-thumb .nas-ico-badge svg { visibility: visible; width: 11px; height: 11px; fill: var(--accent-text); } @keyframes nas-thumb-in { from { opacity: 0; } } .nas-ico svg { width: 20px; height: 20px; fill: var(--muted); } .nas-ico-folder { background: rgba(0, 125, 255, .14); } .nas-ico-folder svg { fill: var(--accent-text); } .nas-ico-video svg { fill: #ff8fc7; } .nas-ico-audio svg { fill: #a78bfa; } .nas-ico-image svg { fill: var(--green); } .nas-ico-book svg { fill: var(--amber); } .nas-ico-archive svg { fill: #ff7a59; } .nas-ico-text svg { fill: var(--ark); } .nas-namebox { min-width: 0; display: flex; flex-direction: column; } .nas-name { color: var(--text); text-decoration: none; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; align-self: flex-start; max-width: 100%; } .nas-row.is-dir .nas-name { font-weight: 600; } .nas-name:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; } /* under the name: what kind of file it is ("Microsoft Word Document", like Explorer's Type) */ .nas-type { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* who uploaded it: its own column, between Added and the buttons (the heading only where someone did) */ .nas-col-by { max-width: 150px; } .nas-row .nas-col-by { font-size: 12.5px; } .nas-row.is-mine .nas-col-by { color: var(--accent-text); } #nas:not(.has-by) .nas-cols > .nas-col-by { display: none; } /* the kinds of file without a picture of their own: Explorer-style logos (PDF, Word, Java, zipped folders...) */ .nas-ico.nas-ico-logo { background: rgba(255, 255, 255, .05); } .nas-ico svg.nas-logo, .nas-pv-media svg.nas-logo, .zd-pop-logo svg { fill: none; } .nas-ico svg.nas-logo { width: 28px; height: 28px; } .nas-prog { display: flex; align-items: center; gap: 8px; margin-top: 3px; } .nas-prog-bar { width: 120px; height: 4px; border-radius: 4px; background: var(--surface-2); overflow: hidden; flex: none; } .nas-prog-bar i { display: block; height: 100%; background: var(--accent); border-radius: inherit; } .nas-prog.is-done .nas-prog-bar i { background: var(--green); } .nas-prog-text { color: var(--muted); font-size: 11px; } .nas-prog.is-done .nas-prog-text { color: var(--green); } .nas-meta { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nas-row .nas-col-size { font-family: var(--mono); font-size: 12px; } .nas-acts { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 64px; } .nas-act { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--muted); background: none; border: 0; cursor: pointer; opacity: 0; transition: opacity .12s; } .nas-row:hover .nas-act, .nas-act:focus-visible { opacity: 1; } .nas-act:hover { color: var(--text); background: rgba(255,255,255,.06); } .nas-act svg { width: 17px; height: 17px; fill: currentColor; } .nas-count { color: var(--muted); font: 11.5px var(--mono); white-space: nowrap; } .nas-trash { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; background: rgba(224, 103, 91, .1); border: 1px solid rgba(224, 103, 91, .35); color: var(--red); } .nas-trash:hover { background: var(--red); color: #fff; border-color: var(--red); } .nas-trash svg { width: 16px; height: 16px; fill: currentColor; } .nas-ask { font: 600 12px var(--sans); color: var(--amber); background: rgba(217, 180, 90, .08); cursor: pointer; white-space: nowrap; border: 1px solid rgba(217, 180, 90, .35); border-radius: 999px; padding: 4px 11px; } .nas-ask:hover { background: rgba(217, 180, 90, .18); } .nas-note { font: 600 11.5px var(--sans); color: var(--amber); white-space: nowrap; } .nas-tag { font: 600 10.5px var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--accent-text); background: var(--accent-dim); border-radius: 999px; padding: 2px 9px; white-space: nowrap; cursor: default; } .nas-empty { margin: 0; padding: 48px 20px; text-align: center; color: var(--muted); font-size: 14px; } .nas-empty[hidden] { display: none; } .nas-col-date { min-width: 128px; } @media (max-width: 860px) { .nas-table { grid-template-columns: 28px 40px minmax(0, 1fr) auto; } .nas-col-size, .nas-col-date, .nas-col-by { display: none; } .nas-count { font-size: 10.5px; } } @media (hover: none) { .nas-act { opacity: 1; } } html.nas-grabbing, html.nas-grabbing * { cursor: grabbing !important; user-select: none !important; } .nas-ghost { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-radius: 9px; padding: 6px 12px; font: 600 13px var(--sans); box-shadow: 0 10px 30px rgba(0,0,0,.45); white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; } .nas-ghost.is-ok { border-color: var(--accent); background: #10284a; } /* dragging files over a NAS tab: just the box they'll land in lights up (the section, bubble or file list under the pointer), with the "Drop ... to upload to X" label inside it */ .nas-drop { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 60; pointer-events: none; display: flex; align-items: center; justify-content: center; padding: 10px; box-sizing: border-box; background: rgba(0, 125, 255, .10); border: 2px dashed var(--accent); border-radius: 14px; font-size: 14.5px; color: var(--text); } .nas-drop > span { background: var(--surface-2); border: 1px solid var(--accent); border-radius: 999px; padding: 8px 16px; box-shadow: 0 10px 28px rgba(0, 0, 0, .45); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nas-drop.is-small > span { display: none; } /* a bubble: the outline says it all */ .nas-drop[hidden] { display: none; } .nas-drop strong { color: var(--accent-text); } .nas-upload-btn { position: fixed; right: 24px; bottom: 24px; z-index: 20; padding: 12px 20px; border-radius: 999px; box-shadow: 0 10px 28px rgba(0, 125, 255, .35), 0 2px 8px rgba(0,0,0,.4); } .nas-upload-btn svg { width: 19px; height: 19px; fill: currentColor; } .nas-upload-btn[hidden] { display: none; } .nas-setup { padding: 40px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; } .nas-setup h2 { margin: 8px 0 4px; font-size: 20px; } .nas-setup p { margin: 0 0 10px; color: var(--muted); max-width: 620px; font-size: 14px; line-height: 1.55; } .nas-setup p strong { color: var(--text); } .nas-setup-ico { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; background: rgba(0,125,255,.14); } .nas-setup-ico svg { width: 30px; height: 30px; fill: var(--accent-text); } .nas-waking svg { animation: nas-waking 1.2s linear infinite; } @keyframes nas-waking { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .nas-waking svg { animation: none; } } .nas-setup-form, .nas-admin-form { display: flex; gap: 8px; width: min(520px, 100%); margin: 6px 0 10px; align-items: center; } .nas-setup-form input, .nas-admin-form input { flex: 1; min-width: 0; font: 14px var(--mono); color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; } .nas-setup-form input:focus, .nas-admin-form input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; } .nas-hint { color: var(--muted); font-size: 12.5px; margin: 0; } .nas-setup .nas-hint { font-size: 12.5px; } .nas-hint code, .nas-setup code { font: 12px var(--mono); background: var(--surface-2); padding: 1px 6px; border-radius: 5px; color: var(--text); } .nas-dlg-list { margin: 4px 0 8px; padding-left: 18px; font-size: 13.5px; max-height: 180px; overflow-y: auto; } .nas-dlg-list li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nas-dlg-list[hidden], #nas-dlg-input[hidden], .nas-dlg .signout-text[hidden] { display: none; } .nas-more { color: var(--muted); list-style: none; margin-left: -18px; } #nas-dlg-input { margin-top: 10px; } #nas-dlg-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; } .nas-dlg-err { margin: 10px 0 0; color: #f0a49b; font-size: 13px; min-height: 0; } .nas-dlg-err:empty { display: none; } /* Admin: NAS settings + removal requests */ .nas-admin-form label { font-size: 13px; color: var(--muted); white-space: nowrap; } .nas-folders { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; padding: 0; } .nas-folders li { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 13.5px; background: var(--surface-2); } .nas-ok { color: var(--green); font-size: 12px; font-weight: 600; padding-right: 4px; } .nas-missing { color: var(--amber); font-size: 12px; font-weight: 600; } .nas-tools-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); } .nas-tools-row strong { font-size: 14px; } .nas-tools-row .nas-hint { flex-basis: 100%; } .nas-tools-row .mono-path { flex-basis: auto; font: 11.5px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; } .nas-open-form { display: flex; align-items: center; gap: 16px; justify-content: space-between; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); } .nas-open-form strong { font-size: 14px; } .rm-area { font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: .05em; color: var(--accent-text); background: var(--accent-dim); border-radius: 999px; padding: 1px 8px; margin-right: 6px; } .rm-path { display: inline-block; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } .rm-reason { color: var(--muted); max-width: 260px; } /* Upload page: links into the NAS sections */ .up-nas-links { display: flex; flex-wrap: wrap; gap: 8px; } .up-nas-link { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; text-decoration: none; color: var(--text); font: 600 14px var(--sans); border: 1px solid var(--line); background: var(--surface-2); } .up-nas-link:hover { border-color: var(--accent); color: var(--accent-text); } .up-nas-link span { font: 600 10px var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } /* ===================== NAS upload progress (lives in the shell, bottom right) ===================== */ .upq { position: fixed; right: 24px; bottom: 84px; z-index: 60; width: min(380px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); } .upq[hidden] { display: none; } .upq-head { display: flex; align-items: center; gap: 6px; padding: 10px 8px 10px 14px; } .upq-words { flex: 1; min-width: 0; display: flex; flex-direction: column; } .upq-title { font-size: 14px; } .upq-sub { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .upq-btn { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; border: 0; background: none; color: var(--muted); cursor: pointer; } .upq-btn:hover { color: var(--text); background: var(--surface-2); } .upq-btn svg { width: 18px; height: 18px; fill: currentColor; transition: transform .15s; } .upq-total { height: 3px; background: var(--surface-2); } .upq-total[hidden] { display: none; } .upq-total span { display: block; height: 100%; background: var(--accent); transition: width .3s; } .upq-list { list-style: none; margin: 0; padding: 6px; max-height: min(420px, calc(100vh - 240px)); overflow-y: auto; border-top: 1px solid var(--line); } .upq-again { flex: none; padding: 5px 10px; font-size: 12.5px; } .upq-again[hidden] { display: none; } .upq.is-collapsed .upq-list { display: none; } .upq-item { padding: 7px 8px; border-radius: 9px; display: flex; flex-direction: column; gap: 3px; } .upq-item + .upq-item { border-top: 1px solid rgba(39, 49, 61, .6); } .upq-top { display: flex; align-items: center; gap: 8px; } .upq-name { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .upq-x { flex: none; width: 24px; height: 24px; border-radius: 6px; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 13px; } .upq-x:hover { color: var(--text); background: var(--surface-2); } .upq-where { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .upq-item.is-done .upq-where { color: var(--green); } .upq-item.is-error .upq-where { color: #f0a49b; white-space: normal; } .upq-item.is-cancelled { opacity: .55; } .upq-bar { height: 4px; border-radius: 4px; background: var(--surface-2); overflow: hidden; } .upq-bar span { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width .25s; } /* ===================== Player / reader (NAS files) ===================== */ .page-viewer main.viewer { max-width: calc(50vw + 640px); margin: 0 auto; padding: 14px 24px 22px; } .vw-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; min-height: 44px; } .vw-back { display: inline-flex; align-items: center; gap: 2px; flex: none; color: var(--muted); text-decoration: none; padding: 6px 12px 6px 6px; border-radius: 9px; border: 1px solid var(--line); font: 600 13px var(--sans); } .vw-back:hover { color: var(--text); border-color: var(--muted); } .vw-back svg { width: 18px; height: 18px; fill: currentColor; } .vw-titles { min-width: 0; flex: 1; } .vw-titles h1 { margin: 0; font-size: 20px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vw-titles p { margin: 1px 0 0; color: var(--muted); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vw-titles p[hidden] { display: none; } .vw-nav { display: flex; gap: 8px; flex: none; } .vw-step { display: inline-flex; align-items: center; gap: 6px; max-width: 240px; cursor: pointer; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); border-radius: 9px; padding: 7px 12px; font: 600 13px var(--sans); } .vw-step:hover { border-color: var(--accent); } .vw-step span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vw-step svg { width: 16px; height: 16px; fill: currentColor; flex: none; } .vw-step[hidden] { display: none; } @media (max-width: 760px) { .vw-step span { display: none; } } .vw-error { max-width: 520px; margin: 60px auto; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; align-items: center; gap: 8px; } .vw-error p { color: var(--muted); margin: 0 0 8px; } .vw-error a { text-decoration: none; } /* video */ .vp { position: relative; background: #000; border-radius: 14px; overflow: hidden; margin: 0 auto; outline: none; user-select: none; width: min(100%, calc((100vh - 160px) * 16 / 9)); aspect-ratio: 16 / 9; container-type: size; } .vp.is-full { width: 100%; height: 100%; border-radius: 0; aspect-ratio: auto; } /* full screen is the whole player page (not just the video): the next episode opens still full screen */ html.vp-fs .vp { position: fixed !important; inset: 0 !important; z-index: 1000; width: 100vw !important; height: 100vh !important; max-width: none !important; margin: 0 !important; border-radius: 0 !important; aspect-ratio: auto !important; } html.vp-fs, html.vp-fs body { overflow: hidden; background: #000; } /* the Android app's picture-in-picture window: only the video, nothing else */ html.app-pip .pip-frame { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; z-index: 2147483000; border: 0 !important; border-radius: 0 !important; } html.app-pip .vp { position: fixed !important; inset: 0 !important; z-index: 1000; width: 100vw !important; height: 100vh !important; max-width: none !important; margin: 0 !important; border-radius: 0 !important; aspect-ratio: auto !important; } html.app-pip, html.app-pip body { overflow: hidden; background: #000; } html.app-pip .vp-bar, html.app-pip .vp-center, html.app-pip .vp-toast, html.app-pip .vp-nextcard { display: none !important; } /* the Android app: no Messages Window (one screen) */ html.in-android .vw-pop { display: none !important; } .vp video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; } /* subtitles: bold, with a thick black outline (like fansubs). A line made with a particular font uses it - the video's own packed-in fonts are loaded for that - else this default */ .vp { --sub-font: "Trebuchet MS", "Segoe UI Semibold", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } .vp-subs { position: absolute; left: 6%; right: 6%; z-index: 2; pointer-events: none; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .15em; font: 700 clamp(15px, 5.4cqh, 50px)/1.25 var(--sub-font); color: #fff; letter-spacing: .005em; text-shadow: .07em 0 0 #000, -.07em 0 0 #000, 0 .07em 0 #000, 0 -.07em 0 #000, .05em .05em 0 #000, -.05em .05em 0 #000, .05em -.05em 0 #000, -.05em -.05em 0 #000, .065em .03em 0 #000, -.065em .03em 0 #000, .065em -.03em 0 #000, -.065em -.03em 0 #000, .03em .065em 0 #000, -.03em .065em 0 #000, .03em -.065em 0 #000, -.03em -.065em 0 #000, 0 .1em .14em rgba(0, 0, 0, .55); transition: bottom .2s; } .vp-subs-bottom { bottom: 6%; } .vp:not(.is-idle) .vp-subs-bottom { bottom: calc(6% + 62px); } .vp-subs-top { top: 5%; } .vp-line { padding: 0 .25em; white-space: normal; } .vp-line.is-italic { font-style: italic; } .vp-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; cursor: pointer; width: 76px; height: 76px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(0, 125, 255, .92); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); } .vp-center:hover { background: var(--accent-hover); } .vp-center svg { width: 38px; height: 38px; fill: #fff; margin-left: 4px; } .vp-center[hidden], .vp-spin[hidden] { display: none; } .vp-spin { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; z-index: 3; pointer-events: none; border-radius: 50%; border: 4px solid rgba(255, 255, 255, .2); border-top-color: var(--accent); animation: vp-spin .9s linear infinite; } @keyframes vp-spin { to { transform: rotate(360deg); } } .vp-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 30px 12px 8px; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .78)); transition: opacity .25s; } /* (hidden, but never all the way to 0: with nothing visible over it, Chrome / the desktop app hands a full-screen video straight to the graphics card and then missed the bar coming back - it was there to click but not drawn until a subtitle changed the picture. At 1% it's invisible and keeps the video drawn the normal way) */ .vp.is-idle .vp-bar { opacity: .01; pointer-events: none; } .vp.is-idle { cursor: none; } .vp-seek { position: relative; height: 18px; cursor: pointer; margin: 0 6px 2px; touch-action: none; } .vp-seek::before, .vp-buf, .vp-fill { position: absolute; left: 0; top: 7px; height: 4px; border-radius: 4px; transition: top .1s, height .1s; } .vp-seek::before { content: ""; right: 0; background: rgba(255, 255, 255, .22); } .vp-buf { background: rgba(255, 255, 255, .38); } .vp-fill { background: var(--accent); } .vp-seek:hover::before, .vp-seek:hover .vp-buf, .vp-seek:hover .vp-fill, .vp-seek.is-drag::before, .vp-seek.is-drag .vp-buf, .vp-seek.is-drag .vp-fill { top: 6px; height: 6px; } .vp-knob { z-index: 2; position: absolute; top: 9px; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .12s; } .vp-seek:hover .vp-knob, .vp-seek.is-drag .vp-knob { transform: scale(1); } .vp-tip { position: absolute; bottom: 20px; transform: translateX(-50%); padding: 3px 7px; border-radius: 6px; pointer-events: none; background: rgba(0, 0, 0, .85); color: #fff; font: 600 12px var(--mono); opacity: 0; white-space: nowrap; } .vp-seek:hover .vp-tip { opacity: 1; } .vp-row { display: flex; align-items: center; gap: 2px; } .vp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; min-width: 38px; padding: 0 8px; border: 0; border-radius: 9px; background: none; color: #fff; cursor: pointer; font: 600 13px var(--sans); } .vp-btn:hover { background: rgba(255, 255, 255, .13); } .vp-btn svg { width: 22px; height: 22px; fill: currentColor; flex: none; } .vp-btn[hidden], .vp-menuwrap[hidden] { display: none; } .vp-cc.is-on { color: var(--accent-text); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 9px 9px 2px 2px; } /* Quality: a small outlined badge with what it's playing at (4K, 1080p...) */ .vp-quality { padding: 0 5px; } .vp-quality span { padding: 3px 5px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); font: 700 12px var(--sans); letter-spacing: .02em; line-height: 1; } /* a narrow player (a phone held upright): everything still fits on one line. On a touchscreen the volume button only mutes (the phone's own buttons do the volume), so it goes first; then the buttons get a little closer. */ @media (pointer: coarse) { @container (max-width: 430px) { /* (the sides of the picture: double-tap to skip 10 seconds; the next episode: the button under the video) */ .vp .vp-vol, .vp .vp-back, .vp .vp-fwd, .vp .vp-nextbtn, .vp .vp-audio span { display: none; } /* the time above the seek bar, at its left (like other video apps): the buttons have the row to themselves */ .vp .vp-time { position: absolute; left: 18px; top: 8px; margin: 0; font-size: 12px; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); } } } @container (max-width: 360px) { .vp .vp-btn { min-width: 34px; padding: 0 4px; } .vp .vp-time { margin-left: 4px; font-size: 12px; } } @container (max-width: 250px) { .vp .vp-row > .vp-btn:nth-child(2), .vp .vp-row > .vp-btn:nth-child(3) { display: none; } } .vp-vol { display: flex; align-items: center; } .vp-volume { width: 0; opacity: 0; transition: width .2s, opacity .2s; accent-color: #fff; margin: 0; } .vp-vol:hover .vp-volume, .vp-volume:focus-visible, .vp.is-vol .vp-volume { width: 120px; opacity: 1; margin: 0 6px 0 2px; } /* the percentage beside the volume slider (it goes to 400%, so the handle a quarter of the way along is 100%) */ .vp-volpct { width: 0; opacity: 0; overflow: hidden; transition: width .2s, opacity .2s; white-space: nowrap; color: #fff; font: 600 12px var(--mono); text-align: left; } .vp-vol:hover .vp-volpct, .vp-vol:focus-within .vp-volpct, .vp.is-vol .vp-volpct { width: 42px; opacity: 1; margin-right: 4px; } .vp-volpct.is-boost { color: #ffb454; } .vp.is-vol .vp-bar { opacity: 1; pointer-events: auto; } .vp-time { color: #fff; font: 12.5px var(--mono); margin-left: 8px; white-space: nowrap; } .vp-spacer { flex: 1; } .vp-menuwrap { position: relative; } .vp-menu { position: absolute; bottom: 46px; right: 0; min-width: 220px; z-index: 6; padding: 6px; background: rgba(21, 27, 34, .97); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .6); } .vp-menu { max-height: min(70vh, 520px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent; } .vp-menu[hidden] { display: none; } /* a menu that wouldn't fit in a small player (a phone): a sheet along the bottom of the screen instead */ .vp-menu.vp-sheet { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); top: auto; min-width: 0; max-height: 62vh; z-index: 2000; padding: 8px; border-radius: 16px; box-shadow: 0 -8px 40px rgba(0, 0, 0, .7); background: rgb(21, 27, 34); } .vp-menu.vp-sheet .vp-menu-item { padding: 13px 12px; font-size: 15px; } .vp-menu-head { position: sticky; top: -6px; z-index: 1; background: rgb(21, 27, 34); border-radius: 8px 8px 0 0; } .vp-menu-head { color: var(--muted); font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: .06em; padding: 6px 10px 4px; } .vp-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer; background: none; border: 0; color: var(--text); padding: 8px 10px; border-radius: 8px; font: 14px var(--sans); white-space: nowrap; } .vp-menu-item:hover { background: var(--surface-2); } .vp-menu-item.is-on { color: var(--accent-text); } .vp-check { width: 16px; font-weight: 700; color: var(--accent-text); } .vp-toast { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 10px; background: rgba(21, 27, 34, .95); border: 1px solid var(--line); color: var(--text); padding: 8px 10px 8px 14px; border-radius: 10px; font-size: 13.5px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); white-space: nowrap; } .vp-toast[hidden], .vp-nextcard[hidden] { display: none; } .vp-toast-btn { background: var(--accent); color: #fff; border: 0; border-radius: 7px; padding: 4px 10px; font: 600 12.5px var(--sans); cursor: pointer; } .vp-nextcard { position: absolute; right: 20px; bottom: 96px; z-index: 5; width: min(320px, 70%); padding: 14px 16px; background: rgba(21, 27, 34, .96); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, .6); } .vp-next-kicker { color: var(--accent-text); font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: .07em; } .vp-next-title { font-size: 16px; font-weight: 600; margin: 3px 0 2px; } .vp-next-count { color: var(--muted); font-size: 12.5px; } .vp-next-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; } .vp-next-acts svg { width: 16px; height: 16px; fill: currentColor; } /* audio */ .ap { display: flex; flex-direction: column; gap: 22px; align-items: center; max-width: 760px; margin: 18px auto; padding: 28px 28px 24px; background: linear-gradient(135deg, rgba(167, 139, 250, .08), rgba(0, 125, 255, .04) 60%), var(--surface); border: 1px solid var(--line); border-radius: 18px; } /* the cover, centred above the seek line */ .ap-cover { width: min(280px, 60vw); aspect-ratio: 1; flex: none; border-radius: 14px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; box-shadow: 0 18px 44px rgba(0, 0, 0, .5); } .ap-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .ap-cover.is-icon svg { width: 84px; height: 84px; fill: var(--amber); } .ap-main { width: 100%; min-width: 0; position: relative; } .ap-chapter { text-align: center; font-size: 17px; font-weight: 600; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ap-chapter[hidden] { display: none; } .ap-name { text-align: center; color: var(--muted); font: 12.5px var(--mono); margin-bottom: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ap .vp-seek::before { background: var(--surface-2); } .ap .vp-buf { background: rgba(255, 255, 255, .14); } .ap .vp-tip { background: var(--surface-2); } .ap-times { display: flex; justify-content: space-between; color: var(--muted); font: 12px var(--mono); margin: 2px 6px 0; } .ap-ctrls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; } .ap-btn { position: relative; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); } .ap-btn:hover:not(:disabled) { border-color: var(--accent); } .ap-btn:disabled { opacity: .35; cursor: default; } .ap-btn svg { width: 22px; height: 22px; fill: currentColor; } .ap-btn.ap-skip { width: auto; padding: 0 14px 0 11px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; } .ap-btn.ap-skip svg { width: 20px; height: 20px; } .ap-btn.ap-skip span { font: 600 12.5px var(--mono); } .ap-play { width: 62px; height: 62px; background: var(--accent); border-color: var(--accent); color: #fff; } .ap-play svg { width: 30px; height: 30px; } .ap-speed { margin-left: 6px; border: 1px solid var(--line); background: transparent; color: var(--text); border-radius: 999px; padding: 6px 12px; font: 600 13px var(--mono); cursor: pointer; } .ap-speed:hover { border-color: var(--accent); } .ap-toast { position: static; transform: none; margin: 14px auto 0; width: fit-content; } .ap-extras { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 14px; } .ap-extras .ap-speed { margin-left: 0; } .ap-chapwrap { position: relative; } .ap-chapwrap[hidden] { display: none; } .ap-chaplist { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 10; margin: 0; padding: 6px; list-style: none; width: min(420px, 86vw); max-height: 340px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 44px rgba(0, 0, 0, .55); } .ap-chaplist[hidden] { display: none; } .ap-chap { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 9px; border: 0; border-radius: 8px; cursor: pointer; background: none; color: var(--text); font: 13.5px var(--sans); text-align: left; } .ap-chap:hover { background: var(--surface-2); } .ap-chaplist li.is-on .ap-chap { background: rgba(0, 125, 255, .14); color: var(--accent-text); } .ap-chap-n { width: 24px; flex: none; text-align: right; color: var(--muted); font: 12px var(--mono); } .ap-chap-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ap-chap-at { flex: none; color: var(--muted); font: 12px var(--mono); } /* chapter marks: small gaps in the seek bar where each chapter starts (the name shows when you point at the bar) */ .vp-marks { position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; z-index: 1; } .vp-mark { position: absolute; top: 6px; width: 3px; height: 6px; margin-left: -1px; background: var(--surface); border-radius: 1px; } .vp-seek:not(:hover):not(.is-drag) .vp-mark { top: 7px; height: 4px; } @media (max-width: 720px) { .ap { padding: 20px 14px; } } /* reader (comics, picture folders, PDFs, EPUBs) */ .rd { position: relative; display: flex; flex-direction: column; height: calc(100vh - 150px); min-height: 420px; outline: none; background: #0a0d11; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; } .rd:fullscreen { height: 100vh; border: 0; border-radius: 0; } .rd-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: none; padding: 8px 10px; background: var(--surface); border-bottom: 1px solid var(--line); } .rd-btn { width: 34px; height: 34px; display: grid; place-items: center; flex: none; cursor: pointer; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); } .rd-btn:hover:not(:disabled) { border-color: var(--accent); } .rd-btn:disabled { opacity: .35; cursor: default; } .rd-btn svg { width: 18px; height: 18px; fill: currentColor; } .rd-pagebox { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--muted); } .rd-jump { width: 66px; text-align: center; font: 13px var(--mono); background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 7px; padding: 5px 4px; } .rd-count { color: var(--muted); font-size: 13.5px; white-space: nowrap; } .rd-chip { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 999px; padding: 5px 12px; font: 600 12.5px var(--sans); cursor: pointer; } .rd-chip:hover { color: var(--text); border-color: var(--muted); } .rd-chip.is-on { color: var(--accent-text); border-color: var(--accent); background: rgba(0, 125, 255, .12); } .rd-chip[hidden] { display: none; } .rd-view { flex: 1; min-height: 0; overflow: auto; position: relative; overscroll-behavior: contain; } .rd-loading { color: var(--muted); padding: 60px; text-align: center; } .rd-single { display: flex; align-items: center; justify-content: center; padding: 8px; min-height: 100%; } .rd:not(.fit-width) .rd-single { height: 100%; } .rd:not(.fit-width) .rd-single .rd-img { max-width: 100%; max-height: 100%; object-fit: contain; } .rd.fit-width .rd-single { align-items: flex-start; } .rd.fit-width .rd-single img.rd-img { width: 100%; max-width: 1200px; height: auto; } .rd-single .rd-img { display: block; box-shadow: 0 6px 30px rgba(0, 0, 0, .5); } .rd:not(.is-scroll) .rd-view { cursor: pointer; } .rd-strip { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0 40px; } .rd-slot { width: min(100%, 900px); background: #151b22; } .rd-slot .rd-img { width: 100%; height: auto; display: block; } .rd-end { position: absolute; inset: 51px 0 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(10, 13, 17, .94); text-align: center; padding: 20px; } .rd-end[hidden] { display: none; } .rd-end-kicker { color: var(--green); font: 600 12px var(--sans); text-transform: uppercase; letter-spacing: .08em; } .rd-end-title { font-size: 20px; font-weight: 600; } .rd-end-acts { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; justify-content: center; } .rd-end-acts a { text-decoration: none; display: inline-flex; align-items: center; } .rd-strip-end { width: min(100%, 900px); margin-top: 18px; padding: 28px 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-align: center; } /* EPUB: pages turned left to right, sized to the reading area */ .ep-view { flex: 1; min-height: 0; position: relative; overflow: hidden; background: #11161c; } .ep-view .ep-frame { position: absolute; left: 0; top: 0; border: 0; background: #11161c; display: block; } .ep-view .ep-meter { left: -100000px; visibility: hidden; pointer-events: none; } .ep-zone { position: absolute; top: 0; bottom: 0; width: 9%; min-width: 34px; border: 0; padding: 0; cursor: pointer; z-index: 2; background: transparent; color: rgba(255, 255, 255, 0); display: grid; place-items: center; transition: background .15s, color .15s; } .ep-zone[hidden] { display: none; } .ep-zone svg { width: 30px; height: 30px; fill: currentColor; } .ep-zone-l { left: 0; } .ep-zone-r { right: 0; } .ep-zone-l:hover { background: linear-gradient(90deg, rgba(0, 0, 0, .35), transparent); color: rgba(255, 255, 255, .8); } .ep-zone-r:hover { background: linear-gradient(270deg, rgba(0, 0, 0, .35), transparent); color: rgba(255, 255, 255, .8); } .ep-count { min-width: 120px; text-align: center; font-variant-numeric: tabular-nums; } .ep-chap { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 40%; } .ep-tocwrap { position: relative; } .ep-tocwrap[hidden] { display: none; } .ep-toc { position: absolute; top: calc(100% + 6px); right: 0; z-index: 10; margin: 0; padding: 6px; list-style: none; width: min(380px, 86vw); max-height: 60vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 44px rgba(0, 0, 0, .55); } .ep-toc[hidden] { display: none; } .ep-toc-item { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font: 13.5px var(--sans); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ep-toc-item:hover { background: var(--surface-2); } .ep-toc li.is-on .ep-toc-item { background: rgba(0, 125, 255, .14); color: var(--accent-text); } /* Settings: choice buttons (Japanese / English etc.) */ .st-choice { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 12px; } .st-choice button { border: 1px solid var(--line); background: var(--bg); color: var(--muted); border-radius: 9px; padding: 8px 14px; font: 600 13px var(--sans); cursor: pointer; } .st-choice button:hover { color: var(--text); } .st-choice button.is-on { color: #fff; background: var(--accent); border-color: var(--accent); } /* ===================== Active Servers: 4 Minecraft slots + the ARK slot, 5 across ===================== */ .active-row { --slot-gap: 14px; display: grid; gap: var(--slot-gap); grid-template-columns: minmax(0, 1fr); align-items: start; } .active-row.has-ark { grid-template-columns: minmax(0, calc((100% - 4 * var(--slot-gap)) / 5 * 4 + 3 * var(--slot-gap))) minmax(0, 1fr); } .active-col { min-width: 0; } .active-col .subhead { margin-bottom: 8px; } .active-strip { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-bottom: 8px; margin-bottom: 6px; outline: none; scrollbar-width: thin; scrollbar-color: #3a5f8c rgba(255, 255, 255, .05); } .active-strip::-webkit-scrollbar { height: 8px; } .active-strip::-webkit-scrollbar-track { background: rgba(255, 255, 255, .05); border-radius: 8px; } .active-strip::-webkit-scrollbar-thumb { background: #3a5f8c; border-radius: 8px; } .active-row .active-grid { gap: var(--slot-gap); } .active-mc .active-grid { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc((100% - 4 * var(--slot-gap)) / 5); } .active-row.has-ark .active-mc .active-grid { grid-auto-columns: calc((100% - 3 * var(--slot-gap)) / 4); } .active-ark .active-grid { grid-template-columns: minmax(0, 1fr); } .active-mc .card { scroll-snap-align: start; } .active-grid .card { padding: 13px 13px 12px; gap: 7px; min-width: 0; } .active-grid .card-name { font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .active-grid .motd { font-size: 12.5px; } .active-grid .stats { gap: 6px; padding: 8px 0; } .active-grid .stat-label { font-size: 10px; } .active-grid .stat-val { font-size: 13px; } .active-grid .who-online { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .active-grid .addr { padding: 6px 9px; } .active-grid .addr code { font-size: 11.5px; } .active-grid .card[data-type="asa"] .stats [data-field="version"] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .active-empty { display: grid; place-items: center; min-height: 196px; margin: 0 0 14px; padding: 16px; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius); background: rgba(255, 255, 255, .015); } .active-empty[hidden] { display: none; } .active-ark .active-empty { border-color: rgba(63, 212, 255, .25); } .section-active .active-row + .empty { margin-top: 8px; } @media (max-width: 1000px) { .active-row.has-ark { grid-template-columns: minmax(0, 1fr); } .active-mc .active-grid, .active-row.has-ark .active-mc .active-grid { grid-auto-columns: calc((100% - var(--slot-gap)) / 2); } } @media (max-width: 600px) { .active-mc .active-grid, .active-row.has-ark .active-mc .active-grid { grid-auto-columns: 86%; } } /* ===================== Home: Recently Viewed ===================== */ .home-recent { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px; margin-bottom: 24px; } .home-recent .section-head { margin-bottom: 14px; border-bottom-color: rgba(167, 139, 250, .3); } .home-recent .home-h-ico { fill: #a78bfa; } /* Recently Viewed: the four latest, each a picture card - where you stopped the video, or the cover - with the words on top of it */ .rv-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .rv-grid > .empty { grid-column: 1 / -1; } .rv-card { position: relative; display: block; min-width: 0; min-height: 0; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate; text-decoration: none; color: #fff; background: #0b0f14; border: 1px solid var(--line); border-radius: 12px; transition: border-color .12s, transform .12s, box-shadow .12s; } .rv-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, .45); } .rv-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .rv-art { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 30%, #1b2633, #0b0f14); } .rv-art > svg { width: 44px; height: 44px; fill: var(--muted); opacity: .55; margin-bottom: 30px; } .rv-card.kind-video .rv-art > svg { fill: #ff8fc7; } .rv-card.kind-audio .rv-art > svg { fill: #a78bfa; } .rv-card.kind-pages .rv-art > svg, .rv-card.kind-pdf .rv-art > svg, .rv-card.kind-epub .rv-art > svg { fill: var(--amber); } .rv-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .rv-card.kind-pages .rv-art img, .rv-card.kind-epub .rv-art img, .rv-card.kind-audio .rv-art img { object-position: 50% 22%; } .rv-card:hover .rv-art img { transform: scale(1.04); } .rv-card::after { /* darker toward the bottom, so the words read on any picture */ content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(5, 8, 12, .45) 0%, rgba(5, 8, 12, 0) 26%, rgba(5, 8, 12, .1) 48%, rgba(5, 8, 12, .9) 100%); } .rv-tab { position: absolute; left: 10px; top: 10px; z-index: 2; font: 600 10px var(--sans); text-transform: uppercase; letter-spacing: .06em; color: #fff; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; padding: 2px 8px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .rv-go { position: absolute; z-index: 2; left: 50%; top: 42%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 125, 255, .92); box-shadow: 0 6px 20px rgba(0, 0, 0, .45); opacity: 0; transform: scale(.85); transition: opacity .15s, transform .15s; } .rv-go svg { width: 24px; height: 24px; fill: #fff; margin-left: 2px; } .rv-card:hover .rv-go, .rv-card:focus-visible .rv-go { opacity: 1; transform: none; } .rv-body { position: absolute; left: 0; right: 0; bottom: 4px; z-index: 2; padding: 10px 14px 10px; display: flex; flex-direction: column; gap: 1px; min-width: 0; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); } .rv-title { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rv-sub { color: rgba(255, 255, 255, .78); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rv-label { margin-top: 4px; font: 600 11.5px var(--mono); color: #8cc4ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rv-card.is-done .rv-label { color: #8de39a; } /* a small card (two across on a phone): everything smaller and closer together, so the tab's name, the title, the episode / chapter and how far you got all fit without running into each other */ .rv-card { container-type: inline-size; } @container (max-width: 300px) { .rv-tab, .rv-when { top: 6px; font-size: 8.5px; padding: 1px 6px; letter-spacing: .04em; } .rv-tab { left: 6px; max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rv-when { right: 6px; } .rv-art > svg { width: 24px; height: 24px; margin-bottom: 38px; opacity: .4; } .rv-go { width: 34px; height: 34px; margin: -17px 0 0 -17px; } .rv-go svg { width: 18px; height: 18px; } .rv-body { padding: 5px 8px 5px; gap: 0; line-height: 1.2; } .rv-title { font-size: 12.5px; } .rv-sub { font-size: 10.5px; } .rv-label { margin-top: 1px; font-size: 9.5px; } } @container (max-width: 190px) { .rv-title { font-size: 11.5px; } .rv-sub { font-size: 10px; } .rv-label { font-size: 9px; } .rv-tab, .rv-when { font-size: 8px; } .rv-when { display: none; } /* (no room for both little tags) */ } .rv-thumb-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .18); z-index: 3; } .rv-thumb-bar i { display: block; height: 100%; background: var(--accent); } .rv-card.is-done .rv-thumb-bar i { background: var(--green); } /* ===================== a heading row in the file list (search results) ===================== */ .nas-sec { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; min-width: 0; margin: 14px 0 4px; padding: 10px 10px 8px 6px; border-bottom: 1px solid var(--accent-dim); } .nas-list > .nas-sec:first-child { margin-top: 2px; } .nas-sec-name { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } a.nas-sec-name:hover { color: var(--accent-text); } .nas-sec-note { grid-column: 1 / -1; color: var(--muted); font-size: 13px; padding: 8px 12px 10px 42px; } /* dropping files onto search results: the rows of the folder it would go into light up */ .nas-row.is-drop-zone { background: rgba(0, 125, 255, .12); } .nas-read { text-decoration: none; } .nas-read[hidden] { display: none; } .nas-ico-book + .nas-namebox .nas-name { font-weight: 600; } @keyframes nas-pane-in { from { opacity: .2; transform: scale(.985); } to { opacity: 1; transform: none; } } /* toolbar upload button + floating back-to-top */ .nas-upload-here[hidden] { display: none; } .nas-upload-here svg { width: 15px; height: 15px; fill: currentColor; } .nas-totop { position: fixed; right: 24px; bottom: 24px; z-index: 20; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: var(--accent); color: #fff; box-shadow: 0 10px 28px rgba(0, 125, 255, .35), 0 2px 8px rgba(0,0,0,.4); animation: nas-pane-in .2s ease-out; } .nas-totop:hover { filter: brightness(1.1); } .nas-totop[hidden] { display: none; } .nas-totop svg { width: 22px; height: 22px; fill: currentColor; } /* Discord: drag the channel tabs into your own order */ .chat-tab { touch-action: none; user-select: none; } .chat-tab.is-dragging { position: relative; z-index: 2; background: var(--surface-2); border-radius: 8px 8px 0 0; box-shadow: 0 6px 18px rgba(0,0,0,.4); } html.chat-grabbing, html.chat-grabbing * { cursor: grabbing !important; user-select: none !important; } /* ===================== Quick Access ===================== */ .qa-tab { display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; cursor: pointer; font: inherit; color: var(--muted); } .qa-tab svg { width: 16px; height: 16px; fill: currentColor; transform: rotate(45deg); } .qa-tab.is-on { color: var(--text); background: rgba(0, 125, 255, .12); box-shadow: inset 0 -2px 0 var(--accent); } /* the same place and size on every tab: the size of the bubbles in Messages' and Discord's column, lined up with them */ .qa-fab { position: fixed; left: 11px; top: 74px; z-index: 46; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; padding: 0; box-sizing: border-box; border: 1px solid var(--line); background: var(--surface-2); color: var(--accent-text); box-shadow: 0 8px 22px rgba(0, 0, 0, .45); transition: background .2s, color .2s, border-color .2s, width .2s, height .2s, left .2s, opacity .2s, visibility .2s; } /* no empty margin beside the page (narrow window, or a page that fills the width): the button stays where it is, the same size (it's the only way into Quick Access) - just see-through until you point at it; the page centres its title instead */ .qa-fab.is-cramped:not(.is-on) { opacity: .85; } .qa-fab.is-cramped:hover, .qa-fab.is-cramped:focus-visible { opacity: 1; } .qa-fab:hover { border-color: var(--accent); } /* tilted when closed, standing straight up when open. Tilted, the pin's wide head swings up and to the right, so it's nudged back by the same amount (1.9 of its 24 units each way) to sit dead centre in the bubble. will-change keeps it on its own layer the whole time, so it doesn't flicker or shift a pixel as the turn starts and ends. */ .qa-fab svg { width: 20px; height: 20px; fill: currentColor; display: block; transform: translate(-7.9%, 8%) rotate(45deg); transition: transform .25s cubic-bezier(.2, .8, .2, 1); will-change: transform; backface-visibility: hidden; } .qa-fab.is-on { background: var(--accent); color: #fff; border-color: var(--accent); } .qa-fab.is-on svg { transform: translate(0, 0) rotate(0deg); } body.vc-open .qa-fab { display: none; } .qa-backdrop { position: fixed; inset: 0; z-index: 44; background: rgba(5, 8, 12, 0); transition: background .2s; } .qa-backdrop.is-on { background: rgba(5, 8, 12, .45); } .qa-backdrop[hidden] { display: none; } .qa-drawer { position: fixed; left: 0; top: 0; bottom: 0; z-index: 45; width: min(340px, 88vw); padding: 70px 12px 16px; background: var(--surface); border-right: 1px solid var(--line); box-shadow: 18px 0 50px rgba(0, 0, 0, .5); transform: translateX(-104%); transition: transform .22s cubic-bezier(.2, .8, .2, 1); display: flex; flex-direction: column; overflow-y: auto; } .qa-drawer.is-open { transform: none; } /* the floating pin bubble stays put over the drawer (it just turns blue and the pin straightens up), so the title sits beside it and the line runs below it */ .qa-head { /* the bubble sits 8px below the top bar; the line runs 8px below the bubble, and the title keeps clear of it */ display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 4px 6px 8px 64px; border-bottom: 1px solid var(--line); margin-bottom: 8px; } /* the pin bubble in the drawer's header (the floating button tucks away while the drawer is open) */ .qa-head-pin { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center; background: var(--accent); color: #fff; box-shadow: 0 4px 12px rgba(0, 125, 255, .35); } .qa-head-pin:hover { background: var(--accent-hover); } .qa-head-pin svg { width: 18px; height: 18px; fill: currentColor; display: block; } .qa-head-pin { display: none; } .qa-head h2 { margin: 0; font-size: 15.5px; letter-spacing: .01em; } .qa-count { font: 600 11px var(--mono); color: var(--accent-text); background: var(--accent-dim); border-radius: 999px; padding: 1px 8px; } .qa-count:empty { display: none; } html.m-nav .qa-count { display: none; } /* (phones: no item count next to Quick Access) */ .qa-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .qa-item { position: relative; display: flex; align-items: center; border-radius: 10px; } .qa-item:hover { background: var(--surface-2); } .qa-item.is-dragging { background: var(--surface-2); box-shadow: 0 12px 28px rgba(0,0,0,.55); z-index: 2; will-change: transform; } .qa-item.is-dragging .qa-x { opacity: 0; } .qa-ico.is-thumb { overflow: hidden; background: #0b0f14; } /* (a pinned Recently Viewed: the picture of what's newest) */ .qa-ico.is-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .qa-ico-history svg { fill: #a78bfa; } .qa-ico-news svg { fill: var(--amber); } .qa-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; padding: 8px 8px; text-decoration: none; color: var(--text); touch-action: none; } .qa-ico { width: 34px; height: 34px; flex: none; border-radius: 9px; display: grid; place-items: center; background: rgba(0, 125, 255, .14); } .qa-ico svg { width: 18px; height: 18px; fill: var(--accent-text); } .qa-ico.is-person { border-radius: 50%; overflow: hidden; color: #fff; font: 600 15px var(--sans); } .qa-ico.is-person img { width: 100%; height: 100%; object-fit: cover; display: block; } .qa-ico-video svg { fill: #ff8fc7; } .qa-ico-audio svg { fill: #a78bfa; } .qa-ico-book svg { fill: var(--amber); } .qa-ico-image svg { fill: var(--green); } .qa-ico-discord svg { fill: #8b95ff; } .qa-ico-server svg { fill: var(--green); } .qa-words { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; } .qa-words strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qa-words small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qa-x { flex: none; width: 28px; height: 28px; margin-right: 6px; border-radius: 7px; border: 0; background: none; color: var(--muted); font-size: 18px; cursor: pointer; opacity: 0; } .qa-item:hover .qa-x, .qa-x:focus-visible { opacity: 1; } .qa-x:hover { color: #f0a49b; background: rgba(224, 103, 91, .12); } .qa-empty { color: var(--muted); font-size: 14px; line-height: 1.55; padding: 18px 10px; margin: 0; } .qa-empty[hidden] { display: none; } html.qa-grabbing, html.qa-grabbing * { cursor: grabbing !important; user-select: none !important; } .qa-menu { position: fixed; z-index: 2147483000; min-width: 210px; padding: 6px; border-radius: 10px; background: #1b1f26; border: 1px solid var(--line); box-shadow: 0 14px 40px rgba(0, 0, 0, .55); } .qa-menu-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: 0; background: none; color: var(--text); font: 500 14px var(--sans); padding: 8px 10px; border-radius: 6px; cursor: pointer; } .qa-menu-item svg { width: 16px; height: 16px; fill: currentColor; transform: rotate(45deg); } .qa-menu-item.is-upright svg { transform: none; } /* (Remove from Recently Watched's bin) */ .qa-menu-item:hover, .qa-menu-item:focus-visible { background: var(--accent); color: #fff; outline: none; } /* ---- Mods tab (also the public page for visitors without an account) ---- */ .btn-login-big { padding: 10px 24px; font-size: 16px; border-radius: 9px; letter-spacing: .01em; box-shadow: 0 6px 18px rgba(0, 125, 255, .28); } .btn-login-big svg { width: 19px; height: 19px; fill: currentColor; } .topbar-public { min-height: 64px; } .mods-intro { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: linear-gradient(120deg, rgba(0, 125, 255, .10), rgba(0, 125, 255, 0) 60%), var(--surface); border: 1px solid var(--accent-dim); border-radius: 14px; padding: 18px 20px; margin-bottom: 30px; } .mods-intro-logo { width: 56px; height: 56px; border-radius: 14px; flex: none; display: block; } .mods-intro-text { flex: 1 1 280px; min-width: 0; } .mods-intro-text h2 { margin: 0 0 3px; font-size: 19px; letter-spacing: -0.01em; } .mods-intro-text p { margin: 0; color: var(--muted); } .mods-intro-actions { display: flex; align-items: center; gap: 10px; } .mods-cf { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; padding: 8px 14px; font-size: 14px; } .mods-cf svg { width: 15px; height: 15px; fill: currentColor; } #mods-refresh.is-spinning svg { animation: mods-spin .8s linear infinite; } @keyframes mods-spin { to { transform: rotate(360deg); } } .mods-group { margin-bottom: 30px; } .mods-group .section-head { border-bottom-color: var(--accent-dim); } .mod-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); } .mod-grid > li { display: flex; min-width: 0; } .mod-card { position: relative; flex: 1; min-width: 0; display: flex; gap: 16px; align-items: flex-start; padding: 16px 44px 16px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; color: inherit; text-decoration: none; scroll-margin-top: 90px; transition: border-color .15s, background-color .15s, transform .15s, box-shadow .15s; } .mod-card:hover, .mod-card:focus-visible { border-color: var(--accent); background: var(--surface-2); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .3); outline: none; } .mod-card:target { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 125, 255, .25); } .mod-logo { width: 72px; height: 72px; border-radius: 12px; flex: none; object-fit: cover; display: block; background: var(--surface-2); border: 1px solid var(--line); } .mod-logo-none { display: grid; place-items: center; font: 700 30px var(--mono); color: var(--accent-text); background: var(--accent-dim); } .mod-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; } .mod-name { margin: 0; font-size: 16.5px; line-height: 1.3; letter-spacing: -0.005em; } .mod-sum { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .mod-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: auto; padding-top: 4px; } .mod-body { align-self: stretch; } .mod-chip { font: 12px var(--mono); color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; white-space: nowrap; } .mod-card:hover .mod-chip { background: var(--bg); } .mod-chip-loader { color: #e8d6b0; border-color: rgba(219, 190, 130, .35); background: rgba(219, 190, 130, .08); } .mod-chip-side { color: var(--accent-text); border-color: var(--accent-dim); background: rgba(0, 125, 255, .1); } .mod-stat { display: inline-flex; align-items: center; gap: 4px; font: 12.5px var(--mono); color: var(--muted); white-space: nowrap; } .mod-stat svg { width: 15px; height: 15px; fill: currentColor; } .mod-out { position: absolute; top: 16px; right: 16px; width: 16px; height: 16px; fill: var(--muted); opacity: .55; transition: opacity .15s; } .mod-card:hover .mod-out { opacity: 1; fill: var(--accent-text); } @media (max-width: 560px) { .mod-card { padding: 14px 38px 14px 14px; gap: 12px; } .mod-logo { width: 56px; height: 56px; } .btn-login-big { padding: 9px 16px; font-size: 15px; } } /* ---- Mods page comments ---- */ .mc-form { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; } .mc-form:focus-within { border-color: var(--accent-dim); } .mc-who { color: var(--muted); font-size: 13.5px; } .mc-who strong { font-weight: 600; } .mc-form textarea { width: 100%; resize: vertical; min-height: 64px; max-height: 220px; font: 15px/1.5 var(--sans); color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; } .mc-form textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; } .mc-hp { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; } .mc-foot { display: flex; align-items: center; gap: 12px; } .mc-err { margin: 0 auto 0 0; color: var(--red); font-size: 13px; min-height: 1px; } .mc-count { font: 12.5px var(--mono); color: var(--muted); margin-left: auto; } .mc-err:not(:empty) + .mc-count { margin-left: 0; } .mc-count.is-near { color: var(--amber); } .mc-count.is-over { color: var(--red); font-weight: 700; } .mc-foot .btn-primary { padding: 7px 18px; } .mc-foot .btn-primary:disabled { opacity: .45; cursor: default; } .mc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .mc-empty { color: var(--muted); padding: 18px 4px; } .mc-item { position: relative; display: flex; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--line); } .mc-item:last-child { border-bottom: 0; } .mc-av { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 700 15px var(--sans); } .mc-body { min-width: 0; flex: 1; } .mc-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; } .mc-name { font-size: 14.5px; } .mc-badge { font: 600 10.5px var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; line-height: 17px; } .mc-badge-admin { color: var(--accent-text); border-color: var(--accent-dim); background: rgba(0, 125, 255, .1); } .mc-badge-you { color: var(--green); border-color: var(--green-dim); } .mc-time { color: var(--muted); font: 12px var(--mono); } .mc-text { margin: 3px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; } .mc-tools { display: flex; gap: 4px; align-self: flex-start; opacity: 0; transition: opacity .15s; } .mc-item:hover .mc-tools, .mc-item:focus-within .mc-tools { opacity: 1; } @media (hover: none) { .mc-tools { opacity: 1; } } .mc-tool { background: none; border: 1px solid transparent; border-radius: 6px; color: var(--muted); font: 12.5px var(--sans); padding: 3px 8px; cursor: pointer; } .mc-tool:hover { color: var(--text); border-color: var(--line); } .mc-tool-danger:hover { color: var(--red); border-color: var(--red-dim); } .mc-more { display: block; margin: 14px auto 0; } .mc-more[hidden] { display: none; } /* Admin: the website can't save to the NAS */ .nas-nowrite { margin: 12px 0; padding: 12px 14px; border-radius: 10px; font-size: 14px; line-height: 1.55; background: var(--red-dim); border: 1px solid rgba(224, 103, 91, .45); color: var(--text); } .nas-nowrite strong:first-child { color: #ffb4ab; } .nas-cmd { margin: 8px 0; padding: 8px 10px; border-radius: 7px; background: var(--bg); border: 1px solid var(--line); font: 13px var(--mono); white-space: pre-wrap; word-break: break-all; user-select: all; } /* ---------- Music bar (bottom of the whole site, like YouTube Music) ---------- */ .mb { position: relative; flex: none; z-index: 42; height: 72px; display: grid; align-items: center; gap: 18px; grid-template-columns: auto minmax(0, 1fr) auto; padding: 0 18px; background: rgba(21, 27, 34, .97); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(0, 0, 0, .3); } .mb[hidden] { display: none; } .mb-btn { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer; background: transparent; color: var(--text); flex: none; position: relative; } .mb-btn:hover { background: var(--surface-2); } .mb-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .mb-btn svg { width: 22px; height: 22px; fill: currentColor; display: block; } .mb-left { display: flex; align-items: center; gap: 4px; } .mb-play { width: 44px; height: 44px; background: var(--text); color: var(--bg); } .mb-play:hover { background: #fff; } .mb-play svg { width: 26px; height: 26px; } .mb-time { font: 12.5px var(--mono); color: var(--muted); margin-left: 10px; white-space: nowrap; min-width: 92px; } .mb-mid { display: flex; align-items: center; gap: 12px; min-width: 0; justify-self: center; max-width: 640px; width: 100%; background: none; border: 0; padding: 6px 8px; border-radius: 10px; cursor: pointer; color: inherit; text-align: left; font: inherit; } .mb-mid:hover { background: rgba(255, 255, 255, .04); } .mb-cover { width: 48px; height: 48px; border-radius: 6px; flex: none; overflow: hidden; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); } .mb-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .mb-cover img[hidden], .mbx-art img[hidden] { display: none; } /* (no cover art: the icon instead) */ .mb-cover svg { display: none; width: 24px; height: 24px; fill: var(--muted); } .mb-cover.is-none svg { display: block; } .mb-words { display: flex; flex-direction: column; min-width: 0; gap: 2px; flex: 1; } .mb-title { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mb-sub { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mb-badge { flex: none; font: 11.5px var(--mono); color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; white-space: nowrap; } .mb-badge[hidden] { display: none; } .mb-badge.is-lossless { color: #e8d6b0; border-color: rgba(219, 190, 130, .4); background: rgba(219, 190, 130, .08); } .mb-right { display: flex; align-items: center; gap: 2px; } .mb-right .mb-btn svg { width: 20px; height: 20px; } .mb-toggle { color: var(--muted); } .mb-toggle.is-on { color: var(--accent-text); } .mb-toggle.is-one::after { content: "1"; position: absolute; right: 6px; bottom: 6px; font: 700 9px var(--sans); color: var(--bg); background: var(--accent-text); border-radius: 50%; width: 12px; height: 12px; display: grid; place-items: center; } .mb-vol { display: flex; align-items: center; gap: 2px; margin-right: 6px; } .mb-volume { width: 96px; height: 4px; appearance: none; -webkit-appearance: none; border-radius: 2px; cursor: pointer; background: linear-gradient(90deg, var(--text) var(--p, 80%), var(--line) var(--p, 80%)); } .mb-volume::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--text); border: 0; } .mb-volume::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--text); border: 0; } /* the seek bar is the bar's top edge (taller while you hover it) */ .mb-prog { position: absolute; left: 0; right: 0; top: -7px; height: 14px; cursor: pointer; touch-action: none; } .mb-prog::before, .mb-prog-buf, .mb-prog-fill { content: ""; position: absolute; left: 0; top: 5px; height: 3px; transition: height .12s, top .12s; } .mb-prog::before { right: 0; background: rgba(255, 255, 255, .12); } .mb-prog-buf { background: rgba(255, 255, 255, .22); width: 0; } .mb-prog-fill { background: var(--accent); width: 0; } .mb-prog:hover::before, .mb-prog:hover .mb-prog-buf, .mb-prog:hover .mb-prog-fill, .mb-prog.is-drag::before, .mb-prog.is-drag .mb-prog-buf, .mb-prog.is-drag .mb-prog-fill { top: 4px; height: 5px; } .mb-prog-knob { position: absolute; top: 1px; width: 13px; height: 13px; margin-left: -6px; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform .12s; left: 0; } .mb-prog:hover .mb-prog-knob, .mb-prog.is-drag .mb-prog-knob { transform: scale(1); } .mb-prog-tip { position: absolute; bottom: 18px; transform: translateX(-50%); font: 12px var(--mono); padding: 3px 7px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); pointer-events: none; white-space: nowrap; } .mb-prog-tip[hidden] { display: none; } .mb-queue { position: absolute; right: 12px; bottom: calc(100% + 10px); width: min(380px, calc(100vw - 24px)); max-height: min(60vh, 520px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); overflow: hidden; } .mb-queue[hidden] { display: none; } .mb-queue-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); } .mb-queue-head strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; } .mb-link { background: none; border: 0; color: var(--accent-text); cursor: pointer; font: 600 13px var(--sans); padding: 2px 4px; } .mb-queue-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; } .mb-q-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 8px; cursor: pointer; background: none; color: var(--text); font: 13.5px var(--sans); text-align: left; } .mb-q-btn:hover { background: var(--surface-2); } .mb-q.is-on .mb-q-btn { background: rgba(0, 125, 255, .14); color: var(--accent-text); } .mb-q.is-past .mb-q-btn { color: var(--muted); } .mb-q-n { width: 26px; flex: none; text-align: right; font: 12px var(--mono); color: var(--muted); } .mb-q.is-on .mb-q-n { color: var(--accent-text); } .mb-q-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.has-music .upq { bottom: 92px; } @media (max-width: 900px) { .mb { gap: 8px; padding: 0 8px; } .mb-time, .mb-vol, .mb-badge, .mb-right .mb-toggle:not(.mb-queue-btn) { display: none; } } /* ---------- Video: back arrow (shrinks to the mini player) ---------- */ .vp-goback { position: absolute; left: 14px; top: 14px; z-index: 5; width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: rgba(0, 0, 0, .55); color: #fff; transition: opacity .25s, background .15s; } .vp-goback:hover { background: rgba(0, 0, 0, .8); } .vp-goback svg { width: 22px; height: 22px; fill: currentColor; } .vp-goback[hidden] { display: none; } .vp.is-idle .vp-goback { opacity: .01; pointer-events: none; } /* (not 0: see .vp-bar) */ /* the video page while it's the mini player: just the picture (and subtitles), filling the little frame */ html.is-mini, html.is-mini body { background: #000; overflow: hidden; } html.is-mini .vw-head, html.is-mini .vp-bar, html.is-mini .vp-center, html.is-mini .vp-goback, html.is-mini .vp-toast, html.is-mini .vp-nextcard, html.is-mini .vp-spin { display: none !important; } html.is-mini main.viewer { max-width: none; padding: 0; margin: 0; } /* (!important: the episode-list and phone-sideways sizes outrank this, and they work the width out from the window's height - in a 135px-tall mini player that's a sliver or nothing, so the video sat tiny in a big black box) */ html.is-mini .vp { position: fixed; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; aspect-ratio: auto; border-radius: 0; cursor: default; } html.is-mini .vp-subs { font-size: clamp(9px, 6cqh, 22px); } html.is-mini .vp:not(.is-idle) .vp-subs-bottom { bottom: 6%; } /* ---------- Video mini player (in the site shell) ---------- */ .shell-main > iframe.vf { border: 0; display: block; background: #000; } .shell-main > iframe.vf-full { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 20; } .shell-main > iframe.vf-mini { position: fixed; z-index: 47; border-radius: 12px; pointer-events: none; box-shadow: 0 16px 44px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08); } .vf.is-anim, .mini-ui.is-anim { transition: left .28s cubic-bezier(.2, .8, .2, 1), top .28s cubic-bezier(.2, .8, .2, 1), width .28s, height .28s; } .mini-ui { position: fixed; z-index: 48; border-radius: 12px; cursor: grab; touch-action: none; user-select: none; } .mini-ui[hidden] { display: none; } /* the buttons (and a shade so they show up) appear while you point at it, tap it, or it's paused */ .mini-ui::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .2s; background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .1) 40%, rgba(0, 0, 0, .1) 65%, rgba(0, 0, 0, .5)); } .mini-ui .mini-btn { opacity: 0; transition: opacity .2s, background .15s; } .mini-ui:hover::before, .mini-ui.is-shown::before, .mini-ui.is-paused::before, .mini-ui.is-drag::before, .mini-ui:hover .mini-btn, .mini-ui.is-shown .mini-btn, .mini-ui.is-paused .mini-btn, .mini-ui.is-drag .mini-btn { opacity: 1; } html.mini-grabbing, html.mini-grabbing * { cursor: grabbing !important; } .mini-btn { position: absolute; display: grid; place-items: center; border: 0; cursor: pointer; color: #fff; background: rgba(0, 0, 0, .55); border-radius: 50%; width: 34px; height: 34px; } .mini-btn:hover { background: rgba(0, 0, 0, .85); } .mini-btn svg { width: 20px; height: 20px; fill: currentColor; } .mini-expand { left: 8px; top: 8px; } .mini-close { right: 8px; top: 8px; } .mini-play { left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; background: rgba(0, 125, 255, .9); } .mini-play:hover { background: var(--accent-hover); } .mini-play svg { width: 28px; height: 28px; } .mini-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .2); border-radius: 0 0 12px 12px; overflow: hidden; } .mini-prog span { display: block; height: 100%; width: 0; background: var(--accent); } /* tucked off the side: a strip of the video stays in view, under a see-through grey strip with an arrow */ .mini-tab { display: none; position: absolute; top: 0; bottom: 0; width: 56px; border: 0; cursor: pointer; color: rgba(255, 255, 255, .9); padding: 0; place-items: center; background: rgba(28, 32, 38, .55); transition: background .15s; /* (no backdrop-filter here: over a video that has just slid into place, Firefox can paint it solid black until the mouse moves) */ } .mini-tab svg { width: 26px; height: 26px; fill: currentColor; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6)); } .mini-ui.is-tucked::before { display: none; } .mini-ui.is-tucked .mini-btn, .mini-ui.is-tucked .mini-prog { display: none; } .mini-ui.is-tucked .mini-tab { display: grid; left: 0; border-radius: 12px 0 0 12px; } .mini-ui.is-tucked.is-left .mini-tab { left: auto; right: 0; border-radius: 0 12px 12px 0; } .mini-ui.is-tucked:hover .mini-tab { background: rgba(28, 32, 38, .35); } /* ---------- the full-size music player (opens from the bar) ---------- */ .mbx { position: fixed; left: 0; right: 0; top: 66px; bottom: 72px; z-index: 41; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 40px; padding: 36px 48px 28px; background: #0b0f14; animation: mbx-in .22s cubic-bezier(.2, .8, .2, 1); } .mbx[hidden] { display: none; } @keyframes mbx-in { from { opacity: 0; transform: translateY(24px); } } .mbx-backdrop { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .mbx-backdrop img { width: 100%; height: 100%; object-fit: cover; filter: blur(70px) saturate(1.3); opacity: .38; transform: scale(1.25); } .mbx-backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 15, 20, .35), rgba(11, 15, 20, .85)); } .mbx-main, .mbx-side, .mbx-close { position: relative; z-index: 1; } .mbx-main { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; text-align: center; gap: 6px; } .mbx-art { width: min(52vh, 40vw, 560px); aspect-ratio: 1; border-radius: 14px; overflow: hidden; flex: none; margin-bottom: 18px; display: grid; place-items: center; background: var(--surface-2); box-shadow: 0 28px 70px rgba(0, 0, 0, .6); } .mbx-art img { width: 100%; height: 100%; object-fit: cover; display: block; } .mbx-art svg { display: none; width: 30%; height: 30%; fill: var(--muted); } .mbx-art.is-none svg { display: block; } .mbx-title { margin: 0; font-size: 26px; letter-spacing: -0.01em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mbx-sub { margin: 0; color: var(--muted); font-size: 15px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mbx-badge { margin-top: 8px; } .mbx-nav { display: flex; align-items: center; gap: 18px; margin-top: 16px; } .mbx-step { width: 48px; height: 48px; } .mbx-step svg { width: 28px; height: 28px; } .mbx-step:disabled { opacity: .35; cursor: default; } .mbx-play { width: 62px; height: 62px; background: var(--text); color: var(--bg); } .mbx-play:hover { background: #fff; } .mbx-play svg { width: 32px; height: 32px; } .mbx-side { display: flex; flex-direction: column; min-height: 0; background: rgba(21, 27, 34, .6); border: 1px solid rgba(255, 255, 255, .06); border-radius: 16px; padding: 14px 10px 10px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .mbx-side-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 8px; } .mbx-side-head strong { font-size: 17px; } .mbx-from { margin: 2px 8px 8px; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mbx-list { flex: 1; min-height: 0; padding: 0; } .mbx-list .mb-q-btn { padding: 9px 8px; font-size: 14px; } .mbx-close { position: absolute; top: 14px; right: 18px; } @media (min-width: 901px) { .mbx { padding-right: 80px; } /* the close arrow gets its own strip, clear of the Up Next box */ .mbx-close { right: 22px; } } .mbx-close svg { width: 26px; height: 26px; } .mb-big-btn.is-on { color: var(--accent-text); } body.music-big .mb-mid { background: rgba(255, 255, 255, .06); } @media (max-width: 900px) { .mbx { grid-template-columns: minmax(0, 1fr); padding: 20px 16px; gap: 16px; overflow-y: auto; } .mbx-art { width: min(70vw, 42vh); } .mbx-side { min-height: 320px; } } /* ---------- Restricted tab (the owner's vault) ---------- */ .topnav-vault { display: inline-flex; align-items: center; gap: 5px; } .topnav-vault svg { width: 14px; height: 14px; fill: currentColor; opacity: .85; } .vault-box { padding: 48px 28px 40px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; } .vault-box h2 { margin: 10px 0 4px; font-size: 21px; } .vault-box > p { margin: 0 0 14px; color: var(--muted); max-width: 520px; font-size: 14px; line-height: 1.55; } .vault-ico { width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; background: rgba(217, 180, 90, .14); } .vault-ico svg { width: 32px; height: 32px; fill: var(--amber); } .vault-form { display: flex; flex-direction: column; gap: 10px; width: min(320px, 100%); } .vault-form input { font: 15px var(--sans); color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 11px 13px; } .vault-form input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; } .vault-err { margin: 0; min-height: 1.3em; color: #f0a49b; font-size: 13.5px; } .vault-warn .vault-ico { background: rgba(224, 103, 91, .14); } .vault-warn .vault-ico svg { fill: #f0a49b; } .vault-warn-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 6px; } .vault-warn-btns button { min-width: 140px; padding: 10px 18px; font-size: 14.5px; } .vault-box.is-shake .vault-form { animation: vault-shake .35s; } @keyframes vault-shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } } .vault-lock { display: inline-flex; align-items: center; gap: 6px; } .vault-lock svg { width: 15px; height: 15px; fill: var(--amber); } /* right-click menu in the file lists */ .nas-menu .qa-menu-item svg { transform: none; } /* (only the pin leans, like everywhere else) */ .nas-menu .qa-menu-item[data-icon="pin"] svg { transform: rotate(45deg); } .nas-menu .qa-menu-item.is-danger { color: #f0a49b; } .nas-menu .qa-menu-item.is-danger:hover, .nas-menu .qa-menu-item.is-danger:focus-visible { background: var(--red); color: #fff; } /* ======================= Phones and narrow windows ======================= Nothing is ever wider than the screen (so there's nothing to pinch-zoom out to). The tabs slide sideways inside the top bar; the logo and your name / Sign Out stay put. Wider screens are untouched. */ .signout-btn svg { display: none; } @media (max-width: 1100px) { html { overflow-x: clip; } .topbar { flex-wrap: nowrap; } .topbar .brand-link, .topbar-right, .topbar-center { flex: none; } .topbar .topnav { flex: 0 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; touch-action: pan-x; } .topbar .topnav::-webkit-scrollbar { display: none; } .topbar .topnav-link { flex: none; } /* an arrow on whichever side has more tabs to slide to (nav.js) - it sits over the edge of the tabs (sticky, and it takes no room of its own, so nothing jumps when it shows) */ .topbar .topnav-arrow { position: sticky; z-index: 2; flex: none; width: 34px; height: 34px; padding: 0; border: 0; cursor: pointer; display: grid; place-items: center; color: var(--text); border-radius: 8px; } .topbar .topnav-arrow[hidden] { display: none; } .topbar .topnav-arrow svg { width: 22px; height: 22px; fill: currentColor; } .topbar .topnav-arrow:hover svg { color: var(--accent-text); } .topbar .topnav-arrow.is-l { left: 0; margin-right: -34px; background: linear-gradient(90deg, rgb(21, 27, 34) 60%, transparent); justify-content: start; } .topbar .topnav-arrow.is-r { right: 0; margin-left: -34px; background: linear-gradient(270deg, rgb(21, 27, 34) 60%, transparent); justify-content: end; } } @media (max-width: 900px) { .topbar { gap: 6px; padding-left: 12px; padding-right: 12px; } .topbar .topnav { margin: 0 0 0 2px; gap: 0; } .topbar .topnav-link { padding: 7px 9px; font-size: 14px; } .topbar-center { margin: 0; padding-inline: 0; } .topbar-right { gap: 6px; } } @media (max-width: 600px) { .topbar { gap: 4px; padding-left: 10px; padding-right: 10px; } .topbar-logo { width: 28px; height: 28px; } /* the right side shrinks to icons */ .topbar-right { gap: 2px; } .topbar .qa-tab { font-size: 0; gap: 0; padding: 8px; } .topbar .qa-tab svg { width: 18px; height: 18px; } .topbar .who.usermenu-btn { padding: 4px 4px 4px 9px; } .topbar .usermenu-name { max-width: 82px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar .signout-btn { padding: 6px 7px; border-color: transparent; display: grid; place-items: center; } .topbar .signout-btn span { display: none; } .topbar .signout-btn svg { display: block; width: 18px; height: 18px; fill: currentColor; } /* in a voice call: just the green dot and the buttons */ .voice-dock .vd-text { display: none; } .vd-main { padding: 3px 6px; } .vd-btn { width: 30px; height: 30px; } } /* ---------- sorting (click a column) and cut / copy / paste ---------- */ .nas-sort-col { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; border-radius: 5px; padding: 2px 4px; margin: -2px -4px; } .nas-sort-col.nas-col-size { justify-content: flex-end; } .nas-sort-col:hover { color: var(--text); background: rgba(255, 255, 255, .05); } .nas-sort-col:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .nas-sort-col.is-on { color: var(--accent-text); } .nas-sort-col.is-on::after { /* a small arrow: up = A-Z / oldest / smallest first */ content: ""; width: 0; height: 0; border: 4px solid transparent; border-bottom: 5px solid currentColor; border-top: 0; margin-top: -1px; } .nas-sort-col.is-on.is-desc::after { border-bottom: 0; border-top: 5px solid currentColor; margin-top: 1px; } .nas-row.is-cut { opacity: .45; } .nas-row.is-cut .nas-ico { filter: grayscale(.6); } .nas-paste { border-color: var(--accent-dim); color: var(--accent-text); } .nas-tools .nas-paste[hidden] { display: none; } .nas-menu .qa-menu-item.is-current { color: var(--accent-text); } .nas-menu .qa-menu-item.is-current:hover, .nas-menu .qa-menu-item.is-current:focus-visible { color: #fff; } .nas-menu .qa-menu-item[data-icon="blank"] svg { visibility: hidden; } #nas-sort[aria-expanded="true"] { color: var(--text); } /* downloading a whole folder: a main folder members have to ask for looks a little quieter */ .nas-act.is-ask, .nas-icon-btn.is-ask { opacity: .6; } .nas-act.is-ask:hover, .nas-icon-btn.is-ask:hover { opacity: 1; } .nas-tools .nas-icon-btn[hidden] { display: none; } /* ---------- the audiobook player, sized to the page (the same layout, just as big as the window allows) ---------- */ .ap { max-width: min(1120px, 100%); min-height: calc(100vh - 116px); min-height: calc(100dvh - 116px); justify-content: center; margin: 4px auto 12px; gap: clamp(16px, 2.6vh, 30px); padding: clamp(24px, 3.6vh, 44px) clamp(20px, 5vw, 72px); } .ap-cover { width: clamp(200px, 42vh, 480px); border-radius: 16px; } .ap-main { max-width: 980px; } .ap-chapter { font-size: clamp(18px, 2.7vh, 27px); margin-bottom: 4px; } .ap-name { font-size: clamp(12.5px, 1.6vh, 15px); margin-bottom: clamp(20px, 3.4vh, 36px); } .ap .vp-seek { height: 22px; } .ap .vp-seek::before, .ap .vp-buf, .ap .vp-fill { top: 8px; height: 6px; } .ap .vp-seek:hover::before, .ap .vp-seek:hover .vp-buf, .ap .vp-seek:hover .vp-fill, .ap .vp-seek.is-drag::before, .ap .vp-seek.is-drag .vp-buf, .ap .vp-seek.is-drag .vp-fill { top: 7px; height: 8px; } .ap .vp-knob { top: 11px; width: 16px; height: 16px; margin: -8px 0 0 -8px; } .ap .vp-mark { top: 8px; height: 6px; } .ap .vp-seek:not(:hover):not(.is-drag) .vp-mark { top: 8px; height: 6px; } .ap-times { font-size: clamp(12px, 1.6vh, 15px); margin-top: 6px; } .ap-ctrls { gap: clamp(12px, 1.6vw, 20px); margin-top: clamp(14px, 2.6vh, 28px); } .ap-btn { width: clamp(46px, 6vh, 58px); height: clamp(46px, 6vh, 58px); } .ap-btn svg { width: clamp(22px, 2.9vh, 28px); height: clamp(22px, 2.9vh, 28px); } .ap-btn.ap-skip { padding: 0 18px 0 14px; gap: 6px; } .ap-btn.ap-skip svg { width: clamp(20px, 2.6vh, 25px); height: clamp(20px, 2.6vh, 25px); } .ap-btn.ap-skip span { font-size: clamp(12.5px, 1.7vh, 15px); } .ap-play { width: clamp(62px, 9vh, 86px); height: clamp(62px, 9vh, 86px); } .ap-play svg { width: clamp(30px, 4.4vh, 42px); height: clamp(30px, 4.4vh, 42px); } .ap-extras { margin-top: clamp(12px, 2vh, 22px); gap: 10px; } .ap-speed { font-size: clamp(13px, 1.7vh, 15px); padding: 7px 16px; } @media (max-width: 720px) { .ap { min-height: 0; padding: 20px 14px; } .ap-cover { width: min(70vw, 340px); } } /* ======================= Home: four boxes, a quarter of the screen each ======================= Recently Viewed, Quick Reply, Announcements and Active Servers. Drag a box by its title bar onto another to swap them (saved to your account). On a computer screen they fill the window with no page scroll - each box scrolls inside itself; on a phone they stack. */ .home-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); } /* each box's place: m1-m4 on a phone (stacked), o1-o4 on a computer (two by two) - remembered separately */ .home-grid > .m1 { order: 1; } .home-grid > .m2 { order: 2; } .home-grid > .m3 { order: 3; } .home-grid > .m4 { order: 4; } .home-grid > .home-tile { margin: 0; min-width: 0; min-height: 0; max-height: none; position: relative; } .home-grid > .home-active > .section-active { margin: 0; height: 100%; } .home-grid > .home-active { border-radius: 14px; } /* (its panel is rounded inside it: the drop outline and lift shadow follow the same corners) */ .home-grid .home-recent { margin: 0; } .home-grid .section-head { cursor: grab; touch-action: pan-y; user-select: none; } .home-grip { display: grid; place-items: center; width: 26px; height: 26px; margin-left: 4px; border-radius: 7px; color: var(--muted); opacity: .55; flex: none; align-self: center; } .home-grip svg { width: 18px; height: 18px; fill: currentColor; } /* the dots light up only while the pointer is right on them */ .home-grid .home-grip:hover { opacity: 1; background: rgba(255, 255, 255, .05); } .home-grid .section-head > h2 { margin-right: auto; } /* dragging one box onto another */ html.home-grabbing, html.home-grabbing * { cursor: grabbing !important; user-select: none !important; } .home-tile.is-lifted { z-index: 30; box-shadow: 0 24px 60px rgba(0, 0, 0, .6); opacity: .92; transition: none !important; } .home-tile.is-target { outline: 2px dashed var(--accent); outline-offset: 4px; } .home-tile.is-target::after { content: ""; position: absolute; inset: 0; border-radius: 14px; background: rgba(0, 125, 255, .08); pointer-events: none; z-index: 5; } @media (min-width: 1000px) { .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-grid > .o1 { order: 1; } .home-grid > .o2 { order: 2; } .home-grid > .o3 { order: 3; } .home-grid > .o4 { order: 4; } } @media (min-width: 1000px) and (min-height: 560px) { /* the page is exactly the window: the four boxes share it, two by two */ body.page-home { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; } body.page-home > .topbar { flex: none; } body.page-home main.home { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; padding-top: 16px; padding-bottom: 16px; } body.page-home main.home > .dash-head { flex: none; margin-bottom: 12px; } body.page-home main.home > .foot { display: none; } .home-grid { flex: 1 1 auto; min-height: 0; grid-template-rows: repeat(2, minmax(0, 1fr)); } .home-grid > .home-tile { display: flex; flex-direction: column; overflow: hidden; } .home-grid > .home-tile > .section-head, .home-grid > .home-tile > .ann-new { flex: none; } .home-grid .home-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; } /* the four cards share the box two by two, whatever its size */ /* four cards fill the box (two by two, same size as always) - the rest of your history is a scroll away */ .home-grid .rv-grid { grid-template-rows: none; grid-auto-rows: calc((100% - 12px) / 2); padding: 2px; margin: -2px; overflow-x: hidden; overflow-y: auto; } .home-grid .rv-card { aspect-ratio: auto; height: 100%; } .home-grid > .home-active { display: flex; } .home-grid > .home-active > .section-active { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding-bottom: 12px; } .home-grid > .home-active .active-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; } /* half the width: two Minecraft servers side by side (the rest slide), ARK beside them */ .home-grid .active-row.has-ark { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .home-grid .active-mc .active-grid, .home-grid .active-row.has-ark .active-mc .active-grid { grid-auto-columns: calc((100% - var(--slot-gap)) / 2); } .home-grid .active-row:not(.has-ark) .active-mc .active-grid { grid-auto-columns: calc((100% - 2 * var(--slot-gap)) / 3); } } /* ---------- Home: Active Servers looks like the other three boxes, and is one grid, three across, that scrolls down ---------- */ .home-grid > .home-active > .section-active { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px; } .home-grid > .home-active .section-active .section-head { border-bottom-color: rgba(111, 207, 115, .3); margin-bottom: 14px; } .home-grid > .home-active .live-dot { background: var(--green); box-shadow: 0 0 0 4px rgba(111, 207, 115, .18); } .active-all { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-content: start; } .active-all > .card { min-width: 0; } .active-ark-slot { display: grid; place-items: center; text-align: center; min-height: 150px; padding: 16px; border-radius: 12px; border: 1px dashed rgba(63, 212, 255, .3); color: var(--muted); font-size: 13.5px; list-style: none; } .active-all-body > .active-empty { text-align: center; padding: 24px 12px; } @media (max-width: 560px) { .active-all { grid-template-columns: minmax(0, 1fr); } } @media (min-width: 1000px) and (min-height: 560px) { .home-grid > .home-active .active-all-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 2px 4px 2px 2px; margin: -2px -4px -2px -2px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; } } /* ---------- dragging a box over the files to select them ---------- */ .nas-marquee { position: absolute; z-index: 70; pointer-events: none; border: 1px solid rgba(77, 163, 255, .9); background: rgba(0, 125, 255, .14); border-radius: 3px; } html.nas-selecting, html.nas-selecting * { user-select: none !important; cursor: default !important; } /* the file box reaches the bottom of the window, so there's always empty space to start a selection box in */ .page-media .nas-box:not(.vault-box):not(.nas-setup) { min-height: max(320px, calc(100vh - 220px)); min-height: max(320px, calc(100dvh - 220px)); } /* ======================= Two-step verification: the sign-in pages ======================= */ .tf-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 2px 0 10px; } .tf-tab { flex: 1 1 auto; text-align: center; padding: 7px 8px; border-radius: 8px; border: 1px solid var(--line); color: var(--muted); text-decoration: none; font-size: 12.5px; white-space: nowrap; } .tf-tab:hover { color: var(--text); border-color: var(--muted); } .tf-tab.is-on { color: var(--text); border-color: var(--accent); background: rgba(0, 125, 255, .12); } .tf-help { color: var(--muted); font-size: 13.5px; line-height: 1.45; margin: 6px 0 2px; } .tf-help strong { color: var(--text); font-weight: 600; } .login-card input.tf-code { font: 600 22px var(--mono); letter-spacing: .28em; text-align: center; } .login-card .tf-remember { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; margin: 14px 0 0; cursor: pointer; } .login-card .tf-remember input { width: 16px; height: 16px; margin: 0; padding: 0; accent-color: var(--accent); flex: none; } .tf-note { margin: 0 0 6px; padding: 10px 12px; border-radius: 8px; background: rgba(111, 207, 115, .12); color: #bfeec2; font-size: 13.5px; } .tf-foot { text-align: center; margin: 14px 0 0; font-size: 13px; } .tf-foot a { color: var(--accent-text); text-decoration: none; } .tf-foot a:hover { text-decoration: underline; } .login-card .tf-key { display: flex; align-items: center; justify-content: center; gap: 9px; } .login-card .tf-key svg { width: 20px; height: 20px; fill: currentColor; } .login-card .tf-send.btn-ghost { background: transparent; border: 1px solid var(--line); color: var(--text); margin-top: 8px; } .login-card .tf-send.btn-ghost:hover { border-color: var(--muted); background: transparent; } .tf-key-err { margin-top: 10px; } .tf-key-err[hidden] { display: none; } /* ---------- Admin: Email settings, 2FA tags ---------- */ .mail-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 16px; margin-top: 14px; } .mail-form label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--muted); } .mail-form input, .mail-form select { font: inherit; font-size: 14px; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; } .mail-form input:focus, .mail-form select:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; } .mail-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .mail-test { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; } .mail-test input { font: inherit; font-size: 13.5px; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; min-width: 220px; } .mail-msg { font-size: 13px; color: var(--muted); } .mail-msg.is-ok { color: var(--green); } .mail-msg.is-err { color: #ff8b80; } .tag-2fa { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; font: 600 10px var(--sans); letter-spacing: .05em; color: #8de39a; background: rgba(111, 207, 115, .14); border: 1px solid rgba(111, 207, 115, .3); vertical-align: 1px; } /* ======================= Settings > Security ======================= */ .sec-status { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 10px; margin-bottom: 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); font-size: 13.5px; } .sec-status strong { font-size: 14.5px; } .sec-status span { color: var(--muted); } .sec-status.is-on { border-color: rgba(111, 207, 115, .35); background: rgba(111, 207, 115, .07); } .sec-status.is-on strong { color: #8de39a; } .sec-status.is-req { border-color: rgba(217, 180, 90, .45); background: rgba(217, 180, 90, .08); } .sec-status.is-req strong { color: var(--amber); } .sec-intro { margin: 0 0 14px; color: var(--muted); font-size: 13.5px; line-height: 1.5; } .sec-intro strong { color: var(--text); } .sec-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; background: rgba(255, 255, 255, .015); } .sec-card-head { display: flex; align-items: center; gap: 12px; } .sec-card-head > svg { width: 22px; height: 22px; fill: var(--accent-text); flex: none; } .sec-card-head > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .sec-card-head strong { font-size: 14.5px; } .sec-card-head small { color: var(--muted); font-size: 12.5px; } .sec-badge { flex: none; font: 600 11px var(--sans); letter-spacing: .04em; padding: 2px 9px; border-radius: 999px; color: var(--muted); border: 1px solid var(--line); } .sec-badge.is-on { color: #8de39a; border-color: rgba(111, 207, 115, .35); background: rgba(111, 207, 115, .1); } .sec-card-body { margin-top: 10px; padding-left: 34px; } .sec-card-body:empty { display: none; } .sec-note { margin: 0 0 8px; color: var(--muted); font-size: 13px; line-height: 1.45; } .sec-warn { color: var(--amber); font-weight: 600; } .sec-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .sec-input { font: 14px var(--sans); color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; min-width: 0; flex: 1 1 180px; max-width: 280px; } .sec-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; } .st-btn-danger { color: #ff9b91; } .st-btn-danger:hover { border-color: var(--red); } .sec-totp-setup { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; } .sec-qr { flex: none; background: #fff; padding: 6px; border-radius: 10px; line-height: 0; } .sec-qr svg { width: 188px; height: 188px; display: block; } .sec-steps { flex: 1 1 220px; min-width: 0; } .sec-steps p { margin: 0 0 8px; font-size: 13px; color: var(--muted); line-height: 1.45; } .sec-secret code { display: inline-block; margin-top: 4px; font: 600 12.5px var(--mono); color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 3px 7px; user-select: all; word-break: break-all; } .sec-keylist { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; } .sec-keylist li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); } .sec-keyname { display: flex; flex-direction: column; flex: 1; min-width: 0; } .sec-keyname small { color: var(--muted); font-size: 12px; } .sec-codes-box { padding: 2px 0; } .sec-codes { display: grid; grid-template-columns: repeat(2, max-content); gap: 6px 28px; margin: 4px 0 12px; padding: 12px 16px 12px 36px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; font: 600 14px var(--mono); user-select: all; } .sec-pw-dlg form { padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 10px; } .sec-pw-dlg h3 { margin: 0; } .sec-pw-dlg input { font: 14px var(--sans); color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; } /* the one-time "Protect Your Account" popup */ .tf-prompt { padding: 26px 26px 20px; width: min(500px, calc(100vw - 32px)); } .tf-prompt-ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: rgba(111, 207, 115, .14); margin-bottom: 12px; } .tf-prompt-ico svg { width: 30px; height: 30px; fill: #8de39a; } .tf-prompt h3 { margin: 0 0 10px; font-size: 20px; } .tf-prompt p { margin: 0 0 10px; color: var(--muted); font-size: 14px; line-height: 1.5; } .tf-prompt p strong { color: var(--text); } .tf-prompt-key { padding: 10px 12px; border-radius: 10px; background: rgba(0, 125, 255, .08); border: 1px solid var(--accent-dim); } .tf-prompt-admin { padding: 10px 12px; border-radius: 10px; background: rgba(217, 180, 90, .08); border: 1px solid rgba(217, 180, 90, .35); } .tf-prompt-admin[hidden], .tf-prompt .btn-ghost[hidden] { display: none; } .tf-prompt-later { font-size: 13px !important; } .tf-prompt .dlg-actions { margin-top: 14px; } /* ---------- Home: box titles are links (just the words); History + Announcements pages ---------- */ .home-h-link { color: inherit; text-decoration: none; border-radius: 4px; cursor: pointer; } .home-h-link:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; } .home-h-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .back-crumb { color: var(--muted); text-decoration: none; font-weight: 600; } .back-crumb:hover { color: var(--text); } .crumb-sep { color: var(--muted); margin: 0 4px; font-weight: 400; } .hist-filters { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 16px; } .hist-filters[hidden] { display: none; } .hist-chip { font: 600 13px var(--sans); color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; cursor: pointer; } .hist-chip:hover { color: var(--text); border-color: var(--muted); } .hist-chip.is-on { color: var(--text); border-color: var(--accent); background: rgba(0, 125, 255, .14); } .hist-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .rv-when { position: absolute; right: 10px; top: 10px; z-index: 2; font: 600 10.5px var(--sans); color: #fff; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; padding: 2px 8px; } .ann-page { max-height: none; } .ann-page .ann-list { overflow: visible; } .home-grid > .home-active .section-head > h2 { margin-right: auto; } /* phones: the boxes stack, and nothing in them scrolls by itself (it got in the way of scrolling the page). Each shows a set amount - 4 recently viewed, 4 chats, 3 announcements (a long one cut off and faded: tap it for the rest), 4 servers - and See More shows that many more each time (home.js). */ .home-more { display: none; } @media (max-width: 999.98px) { .home-grid .home-scroll, .home-grid .active-body { max-height: none !important; overflow: visible !important; } .home-grid .is-later { display: none !important; } .home-grid .ann-text { max-height: 9em; overflow: hidden; } .home-grid .ann-text.is-cut { cursor: pointer; -webkit-mask-image: linear-gradient(#000 45%, transparent); mask-image: linear-gradient(#000 45%, transparent); } .home-grid .ann-text.is-open { max-height: none; } .home-grid .home-more:not([hidden]) { display: flex; justify-content: center; width: 100%; margin-top: 12px; padding: 9px 12px; border-radius: 10px; cursor: pointer; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); font: inherit; font-weight: 600; font-size: 14px; } } /* ---------- each media tab's Recently Watched / Listened / Read...: the last 5 in its history, as cards across the whole width of the file explorer below it (phones: a row you swipe) ---------- */ .tab-recent { margin: 0 0 16px; padding: 14px 16px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; } .tab-recent .section-head { border-bottom-color: rgba(167, 139, 250, .3); } .tab-recent[hidden] { display: none; } .tab-recent .section-head { margin-bottom: 10px; gap: 24px; } .tab-recent .section-head > h2 { display: flex; align-items: center; gap: 8px; margin: 0; } .tr-slot { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } .tr-slot .rv-card { width: 100%; aspect-ratio: 16 / 9; } .tr-slot.is-empty { display: block; } .tr-slot > .empty { margin: 0; } .rv-card.is-removing { opacity: .4; pointer-events: none; transition: opacity .15s; } /* (right-click > Remove from...) */ @media (max-width: 760px) { .tr-slot { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px; } .tr-slot::-webkit-scrollbar { display: none; } .tr-slot .rv-card { flex: 0 0 min(240px, 72vw); scroll-snap-align: start; } } /* ---------- Messages: Everyone + group chats as a rail of icons (like Discord), direct messages beside it ---------- */ .im-list { display: grid; grid-template-columns: 66px minmax(0, 1fr); overflow: hidden; } .im-rail { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 0; min-height: 0; background: var(--bg); border-right: 1px solid var(--line); overflow-y: auto; scrollbar-width: none; } .im-rail::-webkit-scrollbar { display: none; } .im-rail-items { display: flex; flex-direction: column; align-items: center; gap: 10px; } .im-rail-item { all: unset; position: relative; cursor: pointer; border-radius: 14px; } .im-rail-item .im-avatar { width: 44px; height: 44px; font-size: 15px; border-radius: 50%; transition: border-radius .15s, box-shadow .15s; } .im-rail-item .im-avatar.is-group { border-radius: 14px; } .im-rail-item:hover .im-avatar { border-radius: 14px; } .im-rail-item.is-on .im-avatar { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); } .im-rail-item:focus-visible .im-avatar { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-text); } /* a little bar on the left edge: white for the open chat, a dot for unread messages */ .im-rail-item::before { content: ""; position: absolute; left: -11px; top: 50%; width: 4px; height: 0; border-radius: 0 4px 4px 0; background: #fff; transform: translateY(-50%); transition: height .15s; } .im-rail-item.has-unread::before { height: 8px; } .im-rail-item:hover::before { height: 20px; } .im-rail-item.is-on::before { height: 36px; } .im-rail-item .badge { position: absolute; right: -6px; bottom: -5px; margin: 0; box-sizing: border-box; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; font: 700 10.5px/1 var(--sans); border-radius: 999px; box-shadow: 0 0 0 3px var(--bg); } .im-rail-voice { position: absolute; left: -4px; bottom: -4px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px; box-sizing: border-box; display: grid; place-items: center; background: var(--green); color: #0b0f14; font: 700 10px var(--sans); border: 2px solid var(--bg); } .im-rail-sep { width: 30px; height: 0; border-top: 1px solid var(--line); margin: 0 0 0; } .im-rail-add { all: unset; box-sizing: border-box; cursor: pointer; width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--surface-2); color: var(--green); transition: border-radius .15s, background .15s, color .15s; } .im-rail-add svg { width: 22px; height: 22px; fill: currentColor; } .im-rail-add:hover, .im-rail-add:focus-visible { border-radius: 14px; background: var(--green); color: #0b0f14; } .im-dms { display: flex; flex-direction: column; min-height: 0; min-width: 0; } .im-dms > ul { overflow-y: auto; min-height: 0; flex: 1 1 auto; } .im-list .im-list-head { display: flex; align-items: center; gap: 6px; padding: 14px 14px 4px; color: var(--muted); font: 700 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; } .im-list-count { font-weight: 600; opacity: .7; } .im-list-empty { color: var(--muted); font-size: 13px; padding: 10px; } /* phones: the icons run along the top of the chat list instead */ @media (max-width: 720px) { .im-list { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); } .im-rail { flex-direction: row; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; } .im-rail-items { flex-direction: row; } .im-rail-sep { width: 0; height: 30px; border-top: 0; border-left: 1px solid var(--line); } .im-rail-item::before { left: 50%; top: auto; bottom: -10px; width: 0; height: 4px; border-radius: 4px 4px 0 0; transform: translateX(-50%); transition: width .15s; } .im-rail-item.has-unread::before { width: 8px; height: 4px; } .im-rail-item.is-on::before { width: 30px; height: 4px; } .im-rail-item:hover::before { height: 4px; } } /* ---------- Discord: laid out like Messages - its text channels are the bubbles down the left (under the Quick Access bubble, spaced like Messages' group chats), you at the bottom, the open channel beside them ---------- */ .dc-body { grid-template-columns: 66px minmax(0, 1fr); } .dc-list { grid-template-columns: 66px; } .dc-channels[hidden] { display: none; } .dc-channel { touch-action: none; user-select: none; } .dc-channel.is-dragging { z-index: 2; } .dc-channel.is-dragging .im-avatar { box-shadow: 0 8px 22px rgba(0, 0, 0, .5); } .dc-channel-ico { font: 700 17px var(--sans); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); } .dc-channel-ico.is-long { font-size: 13px; letter-spacing: .02em; } /* you, at the bottom of the column: your Discord picture - the way to your Discord settings */ .chat-me.dc-me { margin-top: auto; flex: none; display: block; border-radius: 50%; } .dc-me-ico { width: 44px; height: 44px; font: 600 16px var(--sans); background: #5865f2; transition: border-radius .15s, box-shadow .15s; } .chat-me.dc-me:hover .dc-me-ico, .chat-me.dc-me:focus-visible .dc-me-ico { border-radius: 14px; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px #5865f2; } .chat-me.dc-me img { border-radius: inherit; } .dc-hash { flex: none; width: 34px; text-align: center; font: 300 26px/1 var(--sans); color: var(--muted); } .dc-pane .chat-notice { border-bottom: 1px solid var(--line); } .dc-pane .chat-messages { height: auto; flex: 1 1 0; min-height: 0; } .dc-pane .chat-compose { margin: 0; } #dc-sub { color: var(--muted); font-size: 12px; } /* phones: the bubbles run along the top (like Messages) and the open channel fills the rest - no list to go back to */ @media (max-width: 720px) { .dc-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); } .dc-list { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; } .dc-body .im-list { display: grid; } .dc-body .im-pane { display: flex; } .chat-me.dc-me { margin-top: 0; margin-left: auto; } .dc-hash { width: auto; font-size: 22px; } } /* ---------- ZanPro.net for Windows (the desktop app's download page) ---------- */ .dk-hero { display: flex; gap: 28px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 28px; } .dk-logo { border-radius: 22px; flex: none; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); } .dk-text { min-width: 0; } .dk-text h2 { margin: 0 0 14px; font-size: 20px; } .dk-list { margin: 0 0 22px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--muted); line-height: 1.5; } .dk-list strong { color: var(--text); } .dk-get { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .dk-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; font-size: 15px; text-decoration: none; } .dk-btn svg { width: 20px; height: 20px; fill: currentColor; } .dk-meta, .dk-inapp { color: var(--muted); font-size: 13px; margin: 0; } .dk-steps { margin-top: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px 28px; } .dk-steps h2 { margin: 0 0 10px; font-size: 16px; } .dk-steps ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--muted); line-height: 1.5; } .dk-steps strong, .dk-steps em { color: var(--text); } html.in-app [data-not-app] { display: none !important; } html.not-windows [data-windows-only], html.not-pc [data-pc-only], html.is-ios [data-not-ios] { display: none !important; } /* (paint.js, before it's drawn) */ @media (max-width: 720px) { .dk-hero { flex-direction: column; padding: 20px; } } .usermenu-item[hidden] { display: none; } /* ---------- App Download: the tab right of Home Assistant (the website only), and its page ---------- */ .appdl-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; flex: none; white-space: nowrap; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: 600 13px var(--sans); text-decoration: none; } .appdl-btn svg { width: 16px; height: 16px; fill: var(--accent-text); flex: none; } .appdl-btn:hover, .appdl-btn:focus-visible { border-color: var(--accent); color: var(--text); } .appdl-btn.is-on { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(0, 125, 255, .2); } .appdl-btn[hidden] { display: none; } @media (max-width: 1180px) { .appdl-btn { padding: 7px; } .appdl-btn .appdl-btn-text { display: none; } } html.m-nav .topbar .appdl-btn { display: none; } /* (phones: in the side menu - mnav.js) */ /* a top bar with more tabs than the window has room for (nav.js): icon-only buttons, then closer tabs, then smaller */ .topbar.is-fit-1 .appdl-btn, .topbar.is-fit-1 .ha-btn { padding: 7px; } .topbar.is-fit-1 .appdl-btn-text, .topbar.is-fit-1 .ha-btn-text { display: none; } .topbar.is-fit-2 .topnav { gap: 0; margin-left: 14px; } .topbar.is-fit-2 .topnav-link { padding-left: 8px; padding-right: 8px; } .topbar.is-fit-3 .topnav-link { padding-left: 6px; padding-right: 6px; font-size: 13px; } .topbar.is-fit-4 .brand-name { display: none; } /* the page: one card per app - Windows blue, Linux amber, Android green; iOS greyed out at the bottom */ .appdl-list { display: flex; flex-direction: column; gap: 14px; width: 100%; } /* (the tab's full width, like the others) */ .appdl-card { display: flex; align-items: center; gap: 18px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); --appdl: var(--accent); --appdl-ink: #fff; } .appdl-card.is-mine { border-color: var(--appdl); box-shadow: 0 0 0 1px var(--appdl) inset; } .appdl-linux { --appdl: var(--amber); --appdl-ink: #1f1600; } .appdl-android { --appdl: var(--green); --appdl-ink: #0d1a0e; } .appdl-ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--appdl) 16%, transparent); } .appdl-ico svg { width: 30px; height: 30px; fill: var(--appdl); } .appdl-words { flex: 1; min-width: 0; } .appdl-words h2 { margin: 0 0 4px; font-size: 17px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .appdl-words p { margin: 0 0 4px; color: var(--muted); font-size: 13.5px; line-height: 1.45; } .appdl-words small { color: var(--muted); font: 12px var(--mono); } .appdl-mine { font: 700 10.5px var(--sans); letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--appdl); color: var(--appdl-ink); } .appdl-get { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 999px; flex: none; white-space: nowrap; background: var(--appdl); color: var(--appdl-ink); font: 700 13.5px var(--sans); text-decoration: none; box-shadow: 0 2px 10px color-mix(in srgb, var(--appdl) 35%, transparent); transition: filter .15s, box-shadow .15s, transform .15s; } .appdl-get svg { width: 17px; height: 17px; fill: currentColor; flex: none; } .appdl-get:hover, .appdl-get:focus-visible { filter: brightness(1.12); color: var(--appdl-ink); box-shadow: 0 4px 16px color-mix(in srgb, var(--appdl) 50%, transparent); } .appdl-get:active { transform: translateY(1px); } .appdl-get.is-off { background: var(--surface-2); color: var(--muted); box-shadow: none; cursor: not-allowed; filter: none; } /* the Linux card's Konsole commands, each with a Copy button */ .appdl-cmds { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; } .appdl-cmd-label { font-size: 12.5px; color: var(--muted); } .appdl-cmd { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); max-width: 100%; } .appdl-cmd code { flex: 1; min-width: 0; font: 12.5px var(--mono); color: var(--text); overflow-x: auto; white-space: nowrap; scrollbar-width: thin; } .appdl-copy { flex: none; padding: 4px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: 600 12px var(--sans); cursor: pointer; } .appdl-copy:hover, .appdl-copy:focus-visible { border-color: var(--amber); } .appdl-copy.is-done { border-color: var(--green); color: var(--green); } .appdl-admin, .appdl-admin:visited { font-size: 12.5px; flex: none; color: var(--accent-text); } .appdl-card.is-never { opacity: .6; --appdl: var(--muted); } .appdl-ios .appdl-get.is-off { white-space: normal; max-width: 290px; text-align: center; font-weight: 600; } @media (max-width: 760px) { .appdl-card { flex-wrap: wrap; padding: 16px; } .appdl-words { flex-basis: calc(100% - 70px); } .appdl-get, .appdl-ios .appdl-get.is-off { width: 100%; max-width: none; justify-content: center; } } /* Settings > General, inside the Windows app: the build number */ .st-appinfo { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); } .st-appinfo[hidden] { display: none; } .st-appinfo img { border-radius: 9px; flex: none; } .st-appinfo > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .st-appinfo small { color: var(--muted); font-size: 12.5px; } .st-appinfo b { color: var(--text); font-family: var(--mono); font-weight: 600; } /* Settings > Notifications: the kinds sit under the main switch */ .st-sub { margin-left: 18px; padding-left: 14px; border-left: 2px solid var(--line); } .st-sub.is-off { opacity: .45; } .st-toggle[hidden] { display: none; } /* Settings > App Settings, the Android app (admins): Photo Backup */ .st-backup[hidden], .st-backup-more[hidden] { display: none; } .st-backup-folders { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; padding-top: 4px; padding-bottom: 4px; } .st-backup-folders > strong { font-size: 14px; } .st-backup-folders > small { color: var(--muted); font-size: 12.5px; } .st-backup-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; } .st-backup-list label { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: var(--surface-2); cursor: pointer; } .st-backup-list label span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; } .st-backup-list label small { color: var(--muted); font-size: 12px; flex: none; } .st-backup-list p { margin: 0; color: var(--muted); font-size: 12.5px; } .st-backup-foot { display: flex; align-items: center; gap: 12px; margin-top: 12px; } .st-backup-bg { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding-top: 8px; padding-bottom: 8px; } .st-backup-bg[hidden] { display: none; } .st-backup-bg > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .st-backup-bg strong { font-size: 14px; } .st-backup-bg small { color: var(--muted); font-size: 12.5px; } .st-backup-bg .btn-small { flex: none; } .st-backup-status { flex: 1; margin: 0; font-size: 13px; color: var(--muted); } .st-backup-status strong { color: var(--text); font-weight: 600; } .st-backup-err { margin: 6px 0 0; font-size: 13px; color: var(--red); } .st-backup-err:empty { display: none; } /* Idle: on the site but not looking at it (yellow, like Discord's moon) */ .im-dot.is-idle { background: var(--amber); } .seen-idle { color: var(--amber); } .seen-idle::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); margin-right: 7px; vertical-align: 1px; } #im-status.is-idle { color: var(--amber); } /* ---------- replaceable ringtone and sounds (Settings, and Admin's defaults) ---------- */ .st-sub-h { margin: 22px 0 6px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; } .al-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .al-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid transparent; } .al-row.is-custom { border-color: var(--accent-dim); } .al-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .al-text strong { font-size: 13.5px; } .al-text small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .al-row.is-custom .al-text small { color: var(--accent-text); } .al-actions { display: flex; gap: 6px; flex: none; } .al-btn { border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 8px; padding: 5px 10px; font: 600 12px var(--sans); cursor: pointer; } .al-btn:hover { border-color: var(--accent); } .al-play { width: 30px; padding: 5px; display: grid; place-items: center; } .al-play svg { width: 14px; height: 14px; fill: currentColor; } .al-msg { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); min-height: 1em; } .al-msg.is-bad { color: var(--red); } #admin-alerts .al-list { max-width: 760px; } /* ---------- Mods tab: Bug Reports (top centre) and its form ---------- */ .mods-head { position: relative; } .bug-open { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px; border-radius: 999px; cursor: pointer; font: 600 14px var(--sans); color: #ffd4cf; background: var(--red-dim); border: 1px solid rgba(224, 103, 91, .55); transition: background .15s, border-color .15s; } .bug-open svg { width: 16px; height: 16px; fill: currentColor; } .bug-open:hover { background: #5c2d28; border-color: var(--red); } .bug-open:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; } @media (max-width: 820px) { .bug-open { position: static; transform: none; order: 3; margin: 2px auto 0; } .mods-head .summary { order: 2; flex-basis: 100%; } } .bug-dlg { width: min(520px, calc(100vw - 32px)); } .bug-dlg form, .bug-done { display: flex; flex-direction: column; padding: 20px; } .bug-dlg form { overflow-y: auto; } .bug-dlg form[hidden], .bug-done[hidden] { display: none; } .bug-intro, .bug-done p { margin: -6px 0 6px; color: var(--muted); font-size: 13.5px; line-height: 1.45; } .bug-done h3 { margin: 0 0 12px; font-size: 18px; } .bug-done p { margin: 0; color: var(--text); } .bug-dlg label[for] { margin: 12px 0 6px; } .bug-opt { color: var(--muted); font-weight: 400; opacity: .8; } .bug-dlg select, .bug-dlg textarea, .bug-dlg input[type="text"] { font: 14px var(--sans); color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; width: 100%; box-sizing: border-box; } .bug-dlg textarea { resize: vertical; min-height: 96px; line-height: 1.45; } .bug-dlg select:focus, .bug-dlg textarea:focus, .bug-dlg input[type="text"]:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; } .bug-dlg .mc-hp { position: absolute; width: 1px; } .bug-shot-pick { display: flex; align-items: center; gap: 10px; min-width: 0; } .bug-shot-name { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .bug-shot-x { background: none; border: 0; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; } .bug-shot-x:hover { color: var(--text); } .bug-shot-x[hidden] { display: none; } .bug-err:empty { display: none; } /* Admin > Bug Reports */ .bug-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .bug-row { display: flex; align-items: flex-start; gap: 14px; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--red); } .bug-row.is-fixed { border-left-color: var(--green); opacity: .7; } .bug-main { flex: 1; min-width: 0; } .bug-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; } .bug-mod { font-size: 15px; } .bug-state { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--green); } .bug-meta { font-size: 12.5px; color: var(--muted); } .bug-contact { color: var(--text); } .bug-details summary { cursor: pointer; color: var(--text); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bug-details[open] summary { color: var(--muted); } .bug-text { margin: 8px 0 2px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.5; } .bug-shot { flex: none; display: block; width: 96px; height: 64px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--bg); } .bug-shot img { width: 100%; height: 100%; object-fit: cover; display: block; } .bug-shot:hover { border-color: var(--accent); } .bug-actions { display: flex; flex-direction: column; gap: 6px; flex: none; } .bug-actions form { margin: 0; } .bug-actions button { width: 100%; } @media (max-width: 640px) { .bug-row { flex-wrap: wrap; } .bug-actions { flex-direction: row; width: 100%; } } /* Admin > Desktop App */ .dk-up { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .dk-bar { width: 220px; height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; } .dk-bar[hidden] { display: none; } .dk-bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; } .dk-msg { font-size: 13px; color: var(--muted); } .dk-msg.is-bad { color: var(--red); } /* the Windows app: "App Update Ready" box (bottom right) */ .app-upd { position: fixed; right: 20px; bottom: 20px; z-index: 2000; width: min(400px, calc(100vw - 40px)); display: flex; gap: 14px; padding: 16px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--accent-dim); box-shadow: 0 18px 50px rgba(0, 0, 0, .55); animation: app-upd-in .25s ease-out; } body.has-music .app-upd { bottom: 92px; } @keyframes app-upd-in { from { opacity: 0; transform: translateY(12px); } } .app-upd-icon { width: 44px; height: 44px; border-radius: 11px; flex: none; } .app-upd-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 13.5px; color: var(--muted); line-height: 1.45; } .app-upd-text strong { color: var(--text); font-size: 15px; } .app-upd-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; } .dk-folder { margin-top: 14px; font-size: 12.5px; color: var(--muted); } .dk-files { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; } .dk-files li.is-live { color: var(--text); } .dk-files li.is-live strong { color: var(--accent-text); margin-left: 6px; font-weight: 600; } .dk-files li.is-odd { color: var(--amber); } /* the menu under your name: Switch Accounts */ .usermenu-form { margin: 0; display: contents; } .usermenu-form .usermenu-item { width: 100%; white-space: nowrap; } .usermenu-sub { margin-left: auto; padding-left: 12px; font-size: 12px; color: var(--muted); font-weight: 400; } .usermenu-item:hover .usermenu-sub, .usermenu-item:focus-visible .usermenu-sub { color: inherit; opacity: .85; } .st-dots[hidden] { display: none; } /* ---------- a video in a series: episode buttons under the player, the season down the right ---------- */ .page-viewer main.viewer.has-list { max-width: calc(50vw + 640px + 360px); } .viewer-video .vw-stage { display: flex; gap: 18px; align-items: flex-start; } .vw-main { flex: 1 1 auto; min-width: 0; } .vw-eps { display: flex; justify-content: space-between; align-items: stretch; gap: 12px; margin-top: 12px; } .vw-ep { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 12px; cursor: pointer; max-width: 48%; background: var(--surface); border: 1px solid var(--line); color: var(--text); font: inherit; text-align: left; transition: border-color .15s, background .15s; } .vw-ep:hover, .vw-ep:focus-visible { border-color: var(--accent); background: var(--surface-2); outline: none; } .vw-ep svg { width: 20px; height: 20px; fill: var(--accent-text); flex: none; } .vw-ep-next { text-align: right; margin-left: auto; } .vw-ep-words { display: flex; flex-direction: column; min-width: 0; } .vw-ep-words strong { font-size: 14px; } .vw-ep-words small { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vw-list { flex: 0 0 340px; display: flex; flex-direction: column; min-height: 0; border-radius: 14px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); min-height: 260px; } .vw-list-head { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 10px; border-bottom: 1px solid var(--line); } .vw-list-head strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vw-list-head small { font-size: 12.5px; color: var(--muted); } .vw-list-items { list-style: none; margin: 0; padding: 6px; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 2px; } .vw-item { display: flex; gap: 10px; align-items: center; width: 100%; padding: 6px; border-radius: 10px; border: 0; cursor: pointer; background: none; color: var(--text); font: inherit; text-align: left; } .vw-item:hover, .vw-item:focus-visible { background: var(--surface-2); outline: none; } .vw-item.is-current { background: rgba(0, 125, 255, .14); box-shadow: inset 3px 0 0 var(--accent); cursor: default; } .vw-item-pic { position: relative; flex: none; width: 128px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--bg); display: grid; place-items: center; color: var(--muted); font-weight: 700; } .vw-item-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .vw-item-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .25); } .vw-item-bar i { display: block; height: 100%; background: var(--red); } .vw-item-now { position: absolute; left: 6px; bottom: 6px; padding: 1px 6px; border-radius: 6px; font-size: 11px; font-weight: 600; background: var(--accent); color: #fff; } .vw-item.is-done .vw-item-pic img { opacity: .55; } .vw-item-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .vw-item-words strong { font-size: 13.5px; } .vw-item-name { font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .vw-item.is-current .vw-item-name { color: var(--text); } .vw-item-done { font-size: 11.5px; color: var(--green); } html.is-mini .vw-list, html.is-mini .vw-eps { display: none !important; } @media (max-width: 1100px) { .viewer-video .vw-stage { flex-direction: column; align-items: stretch; } .vw-list { flex-basis: auto; max-height: 420px; } } .vw-main.has-eps .vp { width: min(100%, calc((100vh - 232px) * 16 / 9)); } /* (room for the episode buttons underneath) */ .vw-main.has-eps .vw-eps { width: min(100%, calc((100vh - 232px) * 16 / 9)); margin-inline: auto; } /* a phone held sideways: the video as big as the screen's height allows (the episode buttons are a scroll away) - it was a 200px-wide strip with its buttons spilling out of it */ @media (max-height: 520px) and (orientation: landscape) { .vp, .vw-main.has-eps .vp, .vw-main.has-eps .vw-eps { width: min(100%, calc((100vh - 96px) * 16 / 9)); } } .vc.has-focus .vc-stage { justify-content: center; } /* (the big tile and the strip, together in the middle) */ .vc.has-focus .vc-ghost .vc-avatar { width: 64px; height: 64px; font-size: 26px; } .vc.has-focus .vc-ghost .vc-more, .vc.has-focus .vc-ghost .vc-pip, .vc.has-focus .vc-ghost .vc-fs { display: none; } /* the transfers, minimized: a bar in the bottom-right corner - the total as a ring (the % in the middle), what it's doing, Pause, Retry (once one has failed) and an arrow that opens the list */ .upq-mini { position: fixed; right: 16px; bottom: 16px; z-index: 60; width: min(340px, calc(100vw - 32px)); height: 56px; display: flex; align-items: center; gap: 4px; padding-right: 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 10px 28px rgba(0, 0, 0, .5); } .upq-mini[hidden] { display: none; } .upq-mini.is-failed { border-color: rgba(237, 66, 69, .55); } body.has-music .upq-mini { bottom: 88px; } .upq-mini-main { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; gap: 10px; padding: 0 4px 0 9px; border: 0; border-radius: 13px 0 0 13px; background: none; color: var(--text); cursor: pointer; text-align: left; font: inherit; } .upq-mini-main:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .upq-mini-ring { position: relative; flex: none; width: 40px; height: 40px; display: grid; place-items: center; color: var(--accent-text); } .upq-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .upq-ring circle { fill: none; stroke-width: 3.5; } .upq-ring-bg { stroke: rgba(255, 255, 255, .08); } .upq-ring-fill { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset .4s ease, stroke .2s; } .upq-mini-pct { font: 700 10.5px var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .upq-mini-done, .upq-mini-err { display: none; width: 20px; height: 20px; fill: currentColor; } .upq-mini.is-done .upq-mini-ring { color: var(--green); } .upq-mini.is-done .upq-ring-fill { stroke: var(--green); } .upq-mini.is-failed .upq-mini-ring { color: var(--red); } .upq-mini.is-failed .upq-ring-fill { stroke: var(--red); } .upq-mini.is-done .upq-mini-pct, .upq-mini.is-failed .upq-mini-pct { display: none; } .upq-mini.is-done .upq-mini-done, .upq-mini.is-failed .upq-mini-err { display: block; } .upq-mini.is-paused .upq-mini-ring { color: var(--muted); } .upq-mini.is-paused .upq-ring-fill { stroke: var(--muted); } .upq-mini-words { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .upq-mini-title { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .upq-mini-sub { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .upq-mini-btn { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; border: 0; background: none; color: var(--muted); cursor: pointer; } .upq-mini-btn:hover, .upq-mini-btn:focus-visible { color: var(--text); background: var(--surface-2); outline: none; } .upq-mini-btn svg { width: 20px; height: 20px; fill: currentColor; } .upq-mini-retry { flex: none; height: 30px; display: flex; align-items: center; gap: 5px; padding: 0 10px 0 8px; border-radius: 999px; cursor: pointer; border: 1px solid rgba(237, 66, 69, .55); background: var(--surface-2); color: var(--text); font: 600 12.5px var(--sans); } .upq-mini-retry[hidden] { display: none; } .upq-mini-retry svg { width: 15px; height: 15px; fill: var(--red); } .upq-mini-retry:hover, .upq-mini-retry:focus-visible { border-color: var(--red); outline: none; } /* Pause / Resume (the bar and the top of the list): the two bars, or a play arrow while paused */ .upq-pause[hidden] { display: none; } .upq-pause .upq-play, .upq-pause.is-paused .upq-hold { display: none; } .upq-pause.is-paused .upq-play { display: block; } .upq-pause.is-paused { color: var(--accent-text); } @media (max-width: 400px) { .upq-mini-retry { padding: 0 8px; } .upq-mini-retry span { display: none; } } /* ---------- a call in full screen: just the call, its buttons, and "Voice Connected" at the top in the middle ---------- */ .vc-fullbtn { display: inline-flex; align-items: center; gap: 6px; } .vc-fullbtn svg { width: 15px; height: 15px; fill: currentColor; } html.vc-immersive body.page-shell .topbar { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 90; width: auto; height: auto; min-height: 0; padding: 0; margin: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; } html.vc-immersive body.page-shell .topbar > :not(.topbar-center) { display: none !important; } html.vc-immersive body.page-shell .topbar-center { margin: 0; padding: 0; position: static; transform: none; } html.vc-immersive .qa-fab, html.vc-immersive .qa-drawer { display: none !important; } html.vc-immersive .vc-top { display: none; } html.vc-immersive .vc-stage { padding-top: 62px; } /* (room for the bubble above the video) */ .vc.is-docked.has-focus .vc-grid .vc-tile { width: 190px; } .vc.is-docked.has-focus .vc-grid { max-height: none; } /* (minimized: the call grows to fit every row instead) */ /* the Voice Isolation switch (between Mute and Deafen) - in the full-screen call and the small one */ .vc-btn.vc-nc[hidden] { display: none; } .vc-btn.vc-nc .nc-slash { display: none; } .vc-btn.vc-nc.is-off .nc-slash { display: inline; } .vc-btn.vc-nc.is-on { background: rgba(59, 165, 93, .14); color: #6fcf73; border-color: rgba(59, 165, 93, .5); } /* a narrow but tall window (a monitor turned on its side): a slimmer chat list, and the chat's header buttons wrap */ @media (min-width: 721px) and (max-width: 1000px) { .im-body { grid-template-columns: 260px minmax(0, 1fr); } .im-head { flex-wrap: wrap; row-gap: 8px; } } /* Pop Out: the player / reader in its own window */ .vw-pop[hidden] { display: none; } /* Messages > Messages Window (top right of the tab) */ .im-popout { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; align-self: center; } .im-popout svg { width: 15px; height: 15px; fill: currentColor; flex: none; } .im-popout[hidden] { display: none; } html.in-android .im-popout { display: none !important; } @media (max-width: 760px) { .im-popout { display: none !important; } } .viewer.is-popout .vw-back { display: none; } .page-viewer main.viewer.is-popout { max-width: none; padding: 10px 14px 14px; } .vw-popped { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 80px 20px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); } .vw-popped strong { color: var(--text); font-size: 18px; } .vw-popped p { margin: 0 0 6px; } /* full screen <-> small: an icon in the bottom-right corner of the call */ .vc-bar { position: relative; } .vc-size { position: absolute; right: 16px; bottom: 16px; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); cursor: pointer; } .vc-size:hover, .vc-size:focus-visible { border-color: var(--accent); outline: none; } .vc-size svg { width: 20px; height: 20px; fill: currentColor; } .vc-size .vc-size-shrink, .vc-size.is-full .vc-size-grow { display: none; } .vc-size.is-full .vc-size-shrink { display: block; } .vc.is-docked .vc-size { right: 10px; bottom: 8px; width: 34px; height: 34px; border-radius: 9px; } .vc.is-docked .vc-size svg { width: 18px; height: 18px; } /* a narrow or tall window (no margin beside the page): Quick Access keeps its top-left corner, so each page's title moves to the middle (with its summary/buttons under it) to leave that corner clear */ html.qa-tight .dash-head { flex-direction: column; align-items: center; text-align: center; gap: 6px; padding-top: 2px; } html.qa-tight .dash-head > * { max-width: calc(100% - 120px); } html.qa-tight .dash-head > .summary, html.qa-tight .dash-head > div, html.qa-tight .dash-head > nav { max-width: 100%; } /* the call is on the whole screen: the minimized transfers sit just above its bottom-right Minimize button */ body.vc-open .upq-mini { bottom: 84px; } html.qa-tight .vw-head { padding-left: 48px; } /* (the players: Back steps right, out from under the button) */ /* one tile on the whole screen: the other people as small bubbles in the bottom-left corner */ .vc-fs-people { position: absolute; left: 18px; bottom: 18px; z-index: 3; display: flex; flex-wrap: wrap-reverse; gap: 10px; max-width: calc(100% - 100px); pointer-events: none; } .vc-mini { position: relative; width: 168px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: #1c2027; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 6px 18px rgba(0, 0, 0, .5); transition: box-shadow .12s; } .vc-mini.is-speaking { box-shadow: 0 0 0 3px #3ba55d, 0 0 16px rgba(59, 165, 93, .4); } .vc-mini video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; } .vc-mini video.is-mirror { transform: scaleX(-1); } .vc-mini.has-video .vc-avatar { visibility: hidden; } .vc-tile .vc-mini:not(.has-video) .vc-avatar { visibility: visible; } /* (not hidden by the big tile having video) */ .vc-tile .vc-mini .vc-avatar { width: 44px; height: 44px; font-size: 19px; } .vc-mini .vc-label { left: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 2px 7px; font-size: 11.5px; gap: 4px; } .vc-mini .vc-ico { width: 12px; height: 12px; } /* (the big tile's own name moves up to the top-left, next to LIVE, out of the bubbles' way) */ .vc-tile.has-fs-people > .vc-live { left: 18px; top: 18px; } .vc-tile.has-fs-people > .vc-label { top: 16px; bottom: auto; left: 18px; } .vc-tile.is-stream.has-fs-people > .vc-label { left: 76px; } @media (max-width: 700px) { .vc-mini { width: 120px; } } /* the website restarting / the connection dropping: a small note at the top in the middle */ .zp-conn { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; align-items: center; gap: 9px; padding: 8px 14px; border-radius: 999px; background: rgba(20, 24, 30, .94); border: 1px solid rgba(245, 165, 36, .45); color: var(--text); font: 600 13px var(--sans); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); pointer-events: none; } .zp-conn[hidden] { display: none; } .zp-conn-dot { width: 9px; height: 9px; border-radius: 50%; background: #f5a524; animation: vc-pulse 1.1s ease-in-out infinite; } /* the Messages Window (a second window - e.g. the call on your other monitor): only Messages, with calls and all */ body.is-solo .topnav, body.is-solo .appdl-btn, body.is-solo .qa-fab, body.is-solo .qa-drawer, body.is-solo .qa-backdrop, body.is-solo #switch-btn, body.is-solo #switch-list, body.is-solo .usermenu-item[href] { display: none !important; } body.is-solo .brand-link { pointer-events: none; } .solo-label { margin: 0 auto 0 14px; padding: 4px 10px; border-radius: 999px; font: 600 12.5px var(--sans); color: var(--accent-text); background: rgba(0, 125, 255, .12); border: 1px solid rgba(0, 125, 255, .3); white-space: nowrap; } /* the main window while the Messages Window is open: its Messages tab is greyed out (clicking it brings that window up) */ html.msgwin-open .topbar a.topnav-link[href="/messages"] { opacity: .38; filter: grayscale(1); } /* the call in a corner while you're on another tab (who you had focused) */ .vcp { position: fixed; z-index: 58; border-radius: 12px; overflow: hidden; display: grid; place-items: center; cursor: grab; background: #1c2027; touch-action: none; outline: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 12px 32px rgba(0, 0, 0, .55); transition: left .2s cubic-bezier(.2, .8, .2, 1), top .2s cubic-bezier(.2, .8, .2, 1), box-shadow .12s; } .vcp[hidden] { display: none; } .vcp.is-dragging { transition: box-shadow .12s; cursor: grabbing; } .vcp:focus-visible { box-shadow: 0 0 0 2px var(--accent), 0 12px 32px rgba(0, 0, 0, .55); } .vcp.is-speaking { box-shadow: 0 0 0 3px #3ba55d, 0 0 18px rgba(59, 165, 93, .4), 0 12px 32px rgba(0, 0, 0, .55); } .vcp video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; pointer-events: none; } .vcp.is-stream video { object-fit: contain; } .vcp video.is-mirror { transform: scaleX(-1); } .vcp:not(.has-video) video { visibility: hidden; } .vcp.has-video .vcp-face { visibility: hidden; } .vcp-face { pointer-events: none; } .vcp-face .vc-avatar { width: 64px; height: 64px; font-size: 26px; } .vcp .vc-label { left: 8px; bottom: 8px; font-size: 12px; padding: 2px 8px; pointer-events: none; } .vcp-bar { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; opacity: 0; transition: opacity .12s; } .vcp:hover .vcp-bar, .vcp:focus-within .vcp-bar { opacity: 1; } .vcp-btn { width: 32px; height: 32px; border-radius: 8px; border: 0; padding: 0; display: grid; place-items: center; cursor: pointer; background: rgba(0, 0, 0, .62); color: #fff; } .vcp-btn:hover, .vcp-btn:focus-visible { background: rgba(0, 0, 0, .85); outline: none; } .vcp-btn svg { width: 18px; height: 18px; fill: currentColor; } @media (hover: none) { .vcp-bar { opacity: 1; } } /* the owner's DNS Settings button: in the middle of the Minecraft bar (open or closed) */ .section-game .section-head { position: relative; } .section-dns { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 9px; white-space: nowrap; border: 1px solid var(--game-dim, var(--line)); background: rgba(111, 207, 115, .08); color: var(--text); font: 600 13px var(--sans); text-decoration: none; transition: border-color .15s, background .15s; } .section-dns:hover, .section-dns:focus-visible { border-color: var(--game, var(--accent)); background: rgba(111, 207, 115, .16); outline: none; } .section-dns svg { width: 16px; height: 16px; fill: var(--game, currentColor); flex: none; } .section-game.is-collapsed .section-dns { padding: 4px 12px; } @media (max-width: 640px) { .section-dns span { display: none; } .section-dns { padding: 6px 8px; } } /* ---------- the Android app ---------- */ html.in-android .vw-pop { display: none !important; } /* (Messages Window: a desktop thing) */ /* picture-in-picture: only the playing video, filling the little window */ html.app-pip iframe.pip-frame { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; z-index: 2147483000 !important; border: 0 !important; border-radius: 0 !important; transform: none !important; margin: 0 !important; } html.app-pip .vp { position: fixed !important; inset: 0 !important; z-index: 1000; width: 100vw !important; height: 100vh !important; max-width: none !important; margin: 0 !important; border-radius: 0 !important; aspect-ratio: auto !important; } html.app-pip .vp > :not(video):not(.vp-subs) { display: none !important; } html.app-pip, html.app-pip body { overflow: hidden; background: #000; } /* ===================== Sign Out lives at the bottom of your name's menu ===================== */ .usermenu-sep { flex: none; height: 1px; margin: 5px 6px; background: var(--line); } .usermenu-item.usermenu-signout:hover, .usermenu-item.usermenu-signout:focus-visible { background: var(--red); color: #fff; } body.is-solo .usermenu-sep { display: none; } /* ===================== Sign-in pages on a phone: the card never runs off the side ===================== */ .login-wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; } .login-card { min-width: 0; } .login-card input:not([type="checkbox"]) { min-width: 0; width: 100%; } .tf-tab { min-width: 0; } @media (max-width: 400px) { .login-card { padding-left: 18px; padding-right: 18px; } .login-card input.tf-code { letter-spacing: .2em; } } /* "right click" with a mouse, "press and hold" on a touch screen */ .qa-how-touch { display: none; } @media (pointer: coarse) { .qa-how-touch { display: inline; } .qa-how-mouse { display: none; } } html.in-android .qa-how-touch { display: inline; } html.in-android .qa-how-mouse { display: none; } /* ===================== Phones: the tabs are in a side menu that opens from the logo (static/mnav.js) ===================== (the Android app, and phone browsers - computers keep the tabs in the top bar) */ .mn-burger, .mn-current, .mn-tabs { display: none; } html.m-nav .topbar .topnav, html.m-nav .qa-fab { display: none !important; } html.m-nav .topbar .brand-link { position: relative; flex: 0 1 auto; min-width: 0; gap: 10px; padding: 4px 8px 4px 4px; margin-left: -4px; border-radius: 10px; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; } html.m-nav .topbar .brand-link:active { background: rgba(255, 255, 255, .06); } html.m-nav .topbar .brand-name { display: none; } html.m-nav .topbar .topbar-logo { width: 32px; height: 32px; } html.m-nav .mn-burger { display: grid; place-items: center; position: absolute; left: 25px; top: 25px; width: 17px; height: 17px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px #151b22; transition: transform .2s; } html.m-nav .mn-burger svg { width: 11px; height: 11px; fill: #fff; display: block; } html.m-nav .mn-current { display: block; min-width: 0; max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 16px var(--sans); color: var(--text); } html.m-nav .mn-current:empty { display: none; } html.m-nav .topbar-center { margin-left: auto; } html.m-nav .topbar-right { margin-left: auto; } html.m-nav .topbar-center + .topbar-right { margin-left: 0; } /* phones: a call notice ("X Is Waiting for You in a Call", "X Is Calling") drops just under the top bar, the full width of the screen less a small margin, solid (not see-through over the page), its text wrapping and its buttons always on screen */ html.m-nav .topbar-center:has(.callbar.has-call) { position: absolute; left: 8px; right: 8px; top: calc(100% + 6px); transform: none; margin: 0; padding: 0; } html.m-nav .callbar.has-call { width: 100%; } html.m-nav .callbar.has-call > .cb-pill, html.m-nav .callbar.has-call > .cb-card { width: 100%; box-sizing: border-box; white-space: normal; flex-wrap: wrap; row-gap: 8px; background: var(--surface-2); border-radius: 14px; padding: 9px 10px 9px 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); } html.m-nav .callbar.has-call .cb-pill-text { flex: 1 1 140px; min-width: 0; font-size: 14px; line-height: 1.3; } html.m-nav .callbar.has-call .cb-pill .cb-btn { flex: none; padding: 8px 14px; font-size: 13px; } html.m-nav .callbar.has-call .cb-who { flex: 1 1 160px; min-width: 0; margin-right: 0; } html.m-nav .callbar.has-call .cb-card .cb-btn { flex: 1 1 0; } /* the menu itself: Quick Access first, then the tabs */ html.m-nav .qa-head { padding-left: 8px; min-height: 40px; } html.m-nav .qa-empty { margin-top: 2px; margin-bottom: 4px; } html.m-nav .mn-tabs { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); } .mn-h { margin: 2px 8px 8px; font-size: 15.5px; letter-spacing: .01em; } .mn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .mn-link { display: flex; align-items: center; gap: 11px; padding: 7px 8px; border-radius: 10px; text-decoration: none; color: var(--text); font: 500 15px var(--sans); -webkit-tap-highlight-color: transparent; } .mn-link:hover, a.mn-link:active { background: var(--surface-2); } .mn-link.is-on { background: rgba(0, 125, 255, .14); box-shadow: inset 3px 0 0 var(--accent); } .mn-ico { width: 34px; height: 34px; flex: none; border-radius: 9px; display: grid; place-items: center; background: rgba(255, 255, 255, .05); } .mn-ico svg { width: 18px; height: 18px; fill: var(--muted); display: block; } .mn-link.is-on .mn-ico { background: rgba(0, 125, 255, .2); } .mn-link.is-on .mn-ico svg { fill: var(--accent-text); } .mn-link.is-vault .mn-ico svg { fill: var(--amber); } .mn-words { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mn-link .badge { margin-left: auto; } .mn-link.is-soon { opacity: .5; cursor: default; } .mn-soon { font-size: 11.5px; color: var(--muted); white-space: nowrap; } html.msgwin-open .mn-link.mn-messages { opacity: .38; filter: grayscale(1); } /* Admin > Desktop App: Automatic Android Uploads (GitHub's key) */ .dk-auto { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, .02); } .dk-auto-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 260px; min-width: 0; } .dk-auto-state { color: var(--muted); font-size: 13px; } .dk-auto[data-on="1"] .dk-auto-state { color: #8de39a; } .dk-key { flex: 1 1 100%; } .dk-key[hidden] { display: none; } .dk-key p { margin: 4px 0 8px; color: var(--muted); font-size: 13px; line-height: 1.5; } .dk-key-row { display: flex; gap: 8px; } .dk-key-row input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--accent); background: var(--bg); color: var(--text); font-size: 13px; } /* ---------- Home: the four boxes get the same blue tint and edge as the boxes on the other tabs ---------- */ .home-grid > .home-recent, .home-grid > .home-card, .home-grid > .home-active > .section-active { border-color: var(--accent-dim); background: var(--surface) linear-gradient(180deg, rgba(0, 125, 255, .07), rgba(0, 125, 255, 0) 180px) no-repeat; } /* ===================== Messages on a phone: everything fits on the screen ===================== */ .im-attach-menu, .im-send-ico { display: none; } .im-compose textarea { min-width: 0; } @media (max-width: 720px) { /* the page is exactly the screen: the chat takes what's left under the title */ body.page-messages { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; } body.page-messages > .topbar { flex: none; } body.page-messages main.msgs { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; padding: 12px 10px 10px; } body.page-messages .dash-head { flex: none; margin-bottom: 8px; } body.page-messages .dash-head h1 { font-size: 24px; } body.page-messages .msgs-row { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); } body.page-messages .im-panel { padding: 0; border: 0; background: none; min-height: 0; } body.page-messages .im-panel > .section-head { display: none; } body.page-messages .im-body { height: auto; flex: 1 1 auto; min-height: 0; } /* the open chat's header: name and member count get the room; Join Video / Join Voice become icon buttons */ .im-head { gap: 8px; padding: 8px 10px; } .im-head .im-head-text { flex: 1 1 auto; min-width: 0; } .im-head-text strong, #im-status { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .im-voice-btn { width: 38px; height: 36px; padding: 0; justify-content: center; flex: none; } .im-voice-btn span { display: none; } .im-voice-btn svg { width: 19px; height: 19px; } .im-messages { padding: 10px; } /* the box you type in: paperclip (files or GIFs) - message - send arrow */ .im-compose { position: relative; gap: 6px; padding: 8px; } .im-compose .im-gif-btn { display: none; } .im-compose .im-attach { width: 40px; min-width: 40px; } .im-compose .im-attach.is-on { border-color: var(--accent); color: var(--accent-text); } .im-compose textarea { font-size: 16px; padding: 8px 11px; } /* (16px: the phone doesn't zoom in on it) */ #im-send { width: 44px; padding: 0; display: grid; place-items: center; flex: none; } #im-send .im-send-text { display: none; } #im-send .im-send-ico { display: block; width: 20px; height: 20px; fill: currentColor; } .im-attach-menu:not([hidden]) { display: flex; flex-direction: column; position: absolute; left: 8px; bottom: calc(100% + 6px); z-index: 25; min-width: 170px; padding: 6px; background: #1b1f26; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 40px rgba(0, 0, 0, .55); } .im-compose .im-attach-menu button { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; background: none; border: 0; color: var(--text); font: 500 15px var(--sans); text-align: left; } .im-compose .im-attach-menu button:hover, .im-compose .im-attach-menu button:active { background: var(--accent); color: #fff; } .im-attach-menu svg { width: 20px; height: 20px; fill: currentColor; flex: none; } .im-attach-gif { width: 20px; text-align: center; font: 800 10px var(--sans); letter-spacing: .04em; flex: none; } .gif-picker { left: 8px; right: 8px; width: auto; bottom: 64px; height: min(400px, calc(100% - 80px)); } } /* ===================== NAS tabs on a phone (or a narrow window): more room for the names ===================== */ @media (max-width: 860px) { /* inside a folder: every column again (Name, Size, Added, download) and the list slides left / right to show them - the download button can start off the edge */ #nas.has-files:not(.view-grid) .nas-box .nas-main > .nas-table { grid-template-columns: 20px 36px minmax(230px, 1fr) max-content max-content max-content max-content; column-gap: 10px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; } #nas.has-files:not(.view-grid) .nas-box .nas-main > .nas-table > .nas-list > .nas-row > .nas-col-size, #nas.has-files:not(.view-grid) .nas-box .nas-main > .nas-table > .nas-list > .nas-row > .nas-col-date, #nas.has-files:not(.view-grid) .nas-box .nas-main > .nas-table > .nas-list > .nas-row > .nas-col-by { display: block; } #nas.has-files:not(.view-grid) .nas-box .nas-main > .nas-table > .nas-cols > .nas-col-size, #nas.has-files:not(.view-grid) .nas-box .nas-main > .nas-table > .nas-cols > .nas-col-date, #nas.has-files.has-by:not(.view-grid) .nas-box .nas-main > .nas-table > .nas-cols > .nas-col-by { display: inline-flex; } #nas.has-files:not(.view-grid) .nas-box .nas-main > .nas-table .nas-col-date { min-width: 0; } /* a list of folders (a tab's front page, a series' seasons): fits the screen - name and download button only */ #nas:not(.has-files):not(.view-grid) .nas-box .nas-main > .nas-table { grid-template-columns: 20px 36px minmax(0, 1fr) max-content; column-gap: 10px; } #nas:not(.has-files) .nas-box .nas-col-size, #nas:not(.has-files) .nas-box .nas-col-date { display: none; } /* nothing you can tick here: the checkbox column goes, so the icon starts at the left edge */ #nas.no-checks:not(.view-grid) .nas-box .nas-main > .nas-table { column-gap: 0; } /* (the icon's column holds the icon and its gaps either side: 4 + 36 + 10 - a picture's preview never covers the name) */ #nas.no-checks:not(.view-grid) .nas-box .nas-main > .nas-table { grid-template-columns: 0 50px minmax(0, 1fr) max-content; } #nas.no-checks.has-files:not(.view-grid) .nas-box .nas-main > .nas-table { grid-template-columns: 0 50px minmax(230px, 1fr) max-content max-content max-content max-content; } #nas.no-checks .nas-row > .nas-ico { margin-left: 4px; margin-right: 10px; } #nas.no-checks .nas-cols > :first-child { visibility: hidden; overflow: hidden; } #nas.no-checks .nas-row > :nth-child(n+4), #nas.no-checks .nas-cols > :nth-child(n+4) { margin-left: 10px; } /* names get two lines instead of being cut off after a few letters */ .nas-name { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.3; } .nas-ico { width: 36px; height: 36px; } .nas-row { padding: 5px 6px; min-height: 44px; } .nas-list { padding: 4px 4px 6px; } .nas-cols { padding: 8px 10px 6px; } .nas-acts { min-width: 0; gap: 4px; } .nas-check { padding-left: 0; } .nas-sec-name { font-size: 16px; } } @media (max-width: 640px) { .page-media main.dash { padding-left: 10px; padding-right: 10px; } .page-media .dash-head h1 { font-size: 24px; } /* the top of the box: where you are (it gets its own line when it's long), then the buttons as icons */ .nas-bar { gap: 8px; padding: 8px 10px; } .nas-crumbs { flex: 1 0 auto; max-width: 100%; font-size: 14px; } .nas-crumb { max-width: 100%; padding: 3px 6px; } .nas-tools { flex-wrap: wrap; gap: 6px; margin-left: auto; } .nas-tools .btn-ghost { font-size: 0; gap: 0; padding: 0; width: 36px; height: 34px; justify-content: center; } .nas-tools .btn-ghost svg { margin: 0; width: 17px; height: 17px; vertical-align: 0; } .nas-icon-btn { width: 36px; height: 34px; } .nas-selbar { padding: 8px 10px; } } /* (phones: a Home box's title and the drag dots on one line, its note in full on the line under them) */ @media (max-width: 640px) { .home-grid .section-head { flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 4px; } .home-grid .section-head > h2 { min-width: 0; white-space: nowrap; } .home-grid .section-head > .home-grip { order: 2; } .home-grid .section-head .section-meta { order: 3; flex: 1 0 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere; } .home-grid .section-head .section-meta:empty { display: none; } } /* ---------- Calls on a phone held upright: tall tiles (upright cameras aren't cut to a strip), and the full screen button up in the top right corner, away from Leave ---------- */ .vc-grid.is-tall > .vc-tile { aspect-ratio: 3 / 4; } /* a box open on the page under the small call / corner player: they keep out of its way until it's closed */ .vc.is-docked.is-under-dialog, .vcp.is-under-dialog { visibility: hidden !important; pointer-events: none !important; } /* an upright video: the tile takes the video's own shape at the same height as the others (narrower, nothing cut off or squashed) */ .vc-grid > .vc-tile.is-upright.has-video { aspect-ratio: var(--ar); width: calc(var(--tw, 320px) / var(--gar, 1.7778) * var(--ar)); } .vc.has-focus .vc-grid > .vc-tile.is-upright.has-video { width: calc(157.5px * var(--ar)); } .vc-grid > .vc-tile.is-upright.has-video video { object-fit: contain; } .vc-grid > .vc-tile.is-upright.has-video .vc-label { max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; } /* ...and the other way round on a phone held upright: a widescreen camera gets a wide tile at the same height as the tall ones (all of it, nothing cut down to a strip) - as wide as the screen at most */ .vc-grid.is-tall > .vc-tile.has-video:not(.is-upright) { aspect-ratio: var(--ar, 16 / 9); width: min(100%, calc(var(--tw, 240px) / var(--gar, 0.75) * var(--ar, 1.7778))); } .vc-grid.is-tall > .vc-tile.has-video:not(.is-upright) video { object-fit: contain; } html.m-nav .vc { position: relative; } /* phones: the call's buttons fit in one row small (two at most, big) */ html.m-nav .vc-controls { gap: 6px; } html.m-nav .vc:not(.is-docked) .vc-btn { min-width: 58px; padding: 8px 9px; border-radius: 12px; font-size: 11px; } html.m-nav .vc:not(.is-docked) .vc-btn svg { width: 20px; height: 20px; } html.m-nav .vc-quality-btn { padding-left: 7px; padding-right: 7px; font-size: 10.5px; } html.m-nav .vc.is-docked .vc-controls { gap: 5px; } html.m-nav .vc.is-docked .vc-btn { min-width: 40px; padding: 7px 8px; } html.m-nav .vc.is-docked .vc-quality-btn > span { font-size: 10px; } /* ...and the green "in a call" pill up top is gone while the call (or its corner player) is on screen */ html.m-nav.vc-onscreen .voice-dock { display: none !important; } html.m-nav .vc-bar { position: static; } html.m-nav .vc .vc-size { position: absolute; top: 4px; right: 8px; bottom: auto; width: 32px; height: 32px; border-radius: 9px; z-index: 5; } html.m-nav .vc .vc-top { min-height: 40px; box-sizing: border-box; } /* (the full screen button sits inside it) */ html.m-nav .vc .vc-top { padding-right: 52px !important; } /* (nothing under the full screen button) */ html.m-nav .vc .vc-status { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- the Windows app's title bar: the site's dark colour, Back / Forward on the left (the app draws its own minimize / maximize / close over the right end). Dragging the empty part moves the window. ---------- */ .app-titlebar { flex: none; display: flex; align-items: center; gap: 2px; height: 32px; padding: 0 6px; padding-right: calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw) + 6px); background: var(--bg); -webkit-app-region: drag; app-region: drag; user-select: none; } .app-tb-btn { -webkit-app-region: no-drag; app-region: no-drag; width: 36px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--text); cursor: pointer; } .app-tb-btn svg { width: 17px; height: 17px; fill: currentColor; display: block; } .app-tb-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .08); } .app-tb-btn:disabled { color: var(--muted); opacity: .45; cursor: default; } html.app-fullscreen .app-titlebar, html:fullscreen .app-titlebar { display: none; } /* things pinned near the top of the window sit below the strip, not under the top bar */ html.has-titlebar:not(.app-fullscreen):not(:fullscreen) .qa-fab { top: 106px; } html.has-titlebar:not(.app-fullscreen):not(:fullscreen) .qa-drawer { top: 32px; } html.has-titlebar:not(.app-fullscreen):not(:fullscreen) .mbx { top: 98px; } html.has-titlebar:not(.app-fullscreen):not(:fullscreen) .toast, html.has-titlebar:not(.app-fullscreen):not(:fullscreen) .zp-conn { top: 102px; } html.has-titlebar:not(.app-fullscreen):not(:fullscreen).vc-immersive body.page-shell .topbar { top: 42px; } /* ---------- the Android app's picture-in-picture during a call: just the call's video, filling the small window ---------- */ html.app-pip-call #vc { display: flex !important; position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; z-index: 2147482000 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; transform: none !important; background: #000 !important; } html.app-pip-call #vc .vc-top, html.app-pip-call #vc .vc-bar, html.app-pip-call #vc .vc-resize, html.app-pip-call #vc .vc-overlay, html.app-pip-call #vc .vc-fs, html.app-pip-call .toast { display: none !important; } html.app-pip-call #vc .vc-stage { padding: 4px; gap: 4px; } html.app-pip-call #vc .vc-grid { gap: 4px; } /* one person in it (voice.js picks: who you'd clicked on, else the last to talk), filling it - never your own camera */ html.app-pip-call #vc.has-app-pip .vc-tile:not(.is-app-pip) { display: none !important; } html.app-pip-call #vc.has-app-pip .vc-stage { padding: 0 !important; gap: 0 !important; } html.app-pip-call #vc.has-app-pip .vc-stage > :not(:has(.is-app-pip)):not(.is-app-pip) { display: none !important; } html.app-pip-call #vc.has-app-pip .vc-stage > :has(.is-app-pip) { display: flex !important; flex: 1 1 auto !important; height: 100% !important; max-height: none !important; padding: 0 !important; overflow: hidden !important; align-items: stretch; justify-content: center; } html.app-pip-call #vc.has-app-pip .vc-tile.is-app-pip { width: 100% !important; height: 100% !important; max-width: none !important; aspect-ratio: auto !important; border-radius: 0 !important; outline: 0; box-shadow: none; flex: 1 1 auto !important; } html.app-pip-call #vc.has-app-pip .vc-tile.is-app-pip video { object-fit: contain; } html.app-pip-call #vc.has-app-pip .vc-tile.is-app-pip .vc-more, html.app-pip-call #vc.has-app-pip .vc-tile.is-app-pip .vc-pip, html.app-pip-call #vc.has-app-pip .vc-tile.is-app-pip .vc-watch { display: none !important; } /* ---------- Holiday sounds: Admin > Holiday Sounds, and Settings' list during a holiday ---------- */ .al-holiday { border: 1px solid var(--line); border-radius: 12px; padding: 12px 12px 6px; margin-bottom: 14px; } .al-hol-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .al-btn.al-publish { background: var(--accent); color: #fff; border-color: var(--accent); } .al-btn.al-publish:disabled { background: transparent; color: var(--muted); border-color: var(--line); } .al-btn:disabled { opacity: .45; cursor: default; } .al-row.is-festive small { color: #f5a524; } /* Admin: sections that fold up like Minecraft / ARK (closed each time the Admin tab opens) */ .admin-fold.is-collapsed > :not(.section-head) { display: none; } .admin-fold.is-collapsed > .section-head { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; } .admin-fold.is-collapsed .chev { transform: rotate(-45deg); margin: 0 2px; } /* ---------- Home Assistant tab (the owner only): Home Assistant itself, filling the page ---------- */ body.page-ha { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; } .ha-page { flex: 1; min-height: 0; display: flex; } .ha-frame { flex: 1; width: 100%; height: 100%; border: 0; display: block; background: #111; } /* the Home Assistant button, just left of your name */ .ha-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; flex: none; white-space: nowrap; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: 600 13px var(--sans); text-decoration: none; } .ha-btn svg { width: 16px; height: 16px; fill: #41bdf5; flex: none; } .ha-btn:hover, .ha-btn:focus-visible { border-color: #41bdf5; color: var(--text); } .ha-btn.is-on { border-color: #41bdf5; box-shadow: 0 0 0 2px rgba(65, 189, 245, .2); } @media (max-width: 1180px) { .ha-btn { padding: 7px; } .ha-btn .ha-btn-text { display: none; } } html.m-nav .topbar .ha-btn { display: none; } /* (phones: in the side menu, under Restricted - mnav.js) */ .mn-ha .mn-ico svg { fill: #41bdf5; } /* can't reach it: says why, over the empty frame */ .ha-page { position: relative; } .ha-help { position: absolute; inset: 0; display: grid; place-items: center; background: var(--bg); padding: 24px; } .ha-help[hidden] { display: none; } .ha-help-card { max-width: 560px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; } .ha-help-card h2 { margin: 0 0 8px; font-size: 18px; } .ha-help-card p { color: var(--muted); margin: 0 0 12px; } .ha-checks { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; } .ha-checks li { display: flex; gap: 10px; align-items: baseline; } .ha-checks li::before { content: "\2022"; color: var(--muted); } .ha-checks li.is-ok::before { content: "\2713"; color: var(--green); } .ha-checks li.is-bad::before { content: "\2715"; color: #f23f43; } .ha-checks small { display: block; color: var(--muted); } html.on-ha .qa-fab { display: none !important; } /* ---------- Calls on an upright phone: every button the same size, all in one row (Leave too); Voice Isolation, Deafen and Stream Quality stay off the bar. The Soundboard and More Options pop-ups open over the whole row (not centred on their button), so they never run off the screen. ---------- */ html.m-nav .vc-bar { padding: 8px 8px calc(10px + env(safe-area-inset-bottom, 0px)); } html.m-nav .vc-controls { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; gap: 5px; } html.m-nav .vc-controls > .vc-share, html.m-nav .vc-controls > .vc-popwrap { min-width: 0; } html.m-nav .vc .vc-controls .vc-btn { flex: 1 1 0; min-width: 0; padding: 7px 1px; gap: 3px; border-radius: 12px; } html.m-nav .vc .vc-controls .vc-btn svg { width: 20px; height: 20px; flex: none; } html.m-nav .vc .vc-controls .vc-btn > span { font-size: clamp(8.5px, 2.3vw, 10.5px); letter-spacing: -.1px; line-height: 1.15; text-align: center; max-width: 100%; overflow: hidden; } html.m-nav #btn-nc, html.m-nav #btn-deaf, html.m-nav .vc-share .vc-quality-btn { display: none; } html.m-nav .vc-share #btn-screen { border-radius: 12px; } html.m-nav .vc.is-docked .vc-share #btn-screen { border-radius: 11px; } html.m-nav .vc-popwrap, html.m-nav .vc-share { position: static; } html.m-nav .vc-pop { left: 0; right: 0; transform: none; width: auto; max-height: 62vh; overflow-y: auto; } html.m-nav .vc-opts { left: auto; width: min(300px, 100%); } @media (max-width: 440px) { html.m-nav .vc-sb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- Settings / Admin sound lists: the download button next to each sound ---------- */ a.al-btn.al-dl { width: 30px; padding: 5px; display: grid; place-items: center; color: var(--text); text-decoration: none; } a.al-btn.al-dl svg { width: 15px; height: 15px; fill: currentColor; } a.al-btn.al-dl.is-off { opacity: .45; pointer-events: none; } /* ---------- A call notice under the top bar ("In a Call on Another Device", "X Is Waiting for You in a Call", "X Is Calling"): the page moves down to make room for it (callbar.js sets --callbar-room), on every tab ---------- */ html.has-callbar-room .shell-main > #app-frame, html.has-callbar-room .shell-main > iframe.vf-full { top: var(--callbar-room); height: calc(100% - var(--callbar-room)); } /* ---------- Messages fills the whole page (no title or box around it), on every screen - a minimized call has the most room it can, and the people in it stay inside it ---------- */ body.page-messages { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; } body.page-messages main.msgs { flex: 1 1 auto; min-height: 0; width: 100%; max-width: none; margin: 0; padding: 0 !important; display: flex; flex-direction: column; } body.page-messages .msgs-row { flex: 1 1 auto; min-height: 0; margin: 0; gap: 0; grid-template-rows: minmax(0, 1fr); } body.page-messages .im-panel { display: flex; flex-direction: column; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; } body.page-messages .im-body { flex: 1 1 auto; height: auto; min-height: 0; border: 0; border-radius: 0; } /* (the site's Quick Access button sits in the top-left corner on a computer: the icon column starts just under it) */ html.qa-over body.page-messages .im-rail { padding-top: 69px; } /* (10px under it - the gap between the bubbles) */ /* Messages Window: a plain icon at the bottom of the column */ .im-rail-btn.im-popout { all: unset; box-sizing: border-box; cursor: pointer; width: 44px; height: 44px; border-radius: 50%; flex: none; margin-top: auto; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); transition: border-radius .15s, background .15s, color .15s; } .im-rail-btn.im-popout svg { width: 19px; height: 19px; fill: currentColor; } .im-rail-btn.im-popout:hover, .im-rail-btn.im-popout:focus-visible { border-radius: 14px; background: var(--accent); color: #fff; } .im-rail-btn.im-popout[hidden] { display: none; } /* phones: the side menu open - a call notice ("In a Call on Another Device"...) waits behind it instead of sitting on top of it (its space stays, so the page doesn't jump) */ html.m-nav body:has(.qa-drawer.is-open) .topbar-center:has(.callbar.has-call) { visibility: hidden; } /* ---------- Calls on phones: a Flip Camera button between Camera and Share Screen; the Soundboard lives in More Options instead of on the bar (still the same six buttons in one row) ---------- */ .vc-btn.vc-flip { display: none; } html.m-nav .vc .vc-controls .vc-btn.vc-flip { display: flex; } .vc-btn.vc-flip:disabled { opacity: .45; cursor: default; } .vc-opt-row.vc-opt-sb { display: none; } html.m-nav #btn-sb { display: none; } html.m-nav .vc-popwrap:has(> #btn-sb) { display: contents; } /* (no column of its own; its pop-up still opens) */ html.m-nav .vc-opt-row.vc-opt-sb { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 9px; cursor: pointer; color: var(--text); font: 500 14px var(--sans); } html.m-nav .vc-opt-row.vc-opt-sb:hover, html.m-nav .vc-opt-row.vc-opt-sb:focus-visible { background: var(--surface-2); } html.m-nav .vc-opt-row.vc-opt-sb svg { width: 20px; height: 20px; fill: currentColor; flex: none; } /* (phones: the minimized call hands its swipes to the chat under it - voice.js - so the browser mustn't take them) */ html.m-nav .vc.is-docked { touch-action: none; } /* minimized and focused on someone: an upright video in the row under the big tile is as tall as the others there (190 wide = 107 tall) - it was the full screen call's 158, too tall for the minimized call, and ran over its header */ .vc.is-docked.has-focus .vc-grid > .vc-tile.is-upright.has-video { width: calc(106.875px * var(--ar)); } /* ===================== the NAS file explorer, Windows Explorer style: back / forward / up, the address bar, search, the preview pane, the status bar, Icons views ===================== */ .nas-nav { display: flex; gap: 4px; flex: none; } .nas-nav-btn:disabled { opacity: .35; cursor: default; } .nas-nav-btn:disabled:hover { color: var(--muted); border-color: var(--line); } .nas-address { flex: 1 1 260px; min-width: 0; display: flex; align-items: center; min-height: 34px; padding: 0 4px; cursor: text; border: 1px solid var(--line); border-radius: 9px; background: rgba(0, 0, 0, .18); } .nas-address:hover { border-color: rgba(255, 255, 255, .22); } .nas-address.is-editing { border-color: var(--accent); } .nas-address .nas-crumbs { flex: 1 1 auto; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .nas-address .nas-crumbs::-webkit-scrollbar { display: none; } .nas-address .nas-crumb { flex: none; } .nas-address .nas-crumbs[hidden], .nas-path-input[hidden] { display: none; } .nas-path-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--text); font: 14px var(--sans); padding: 6px 4px; } button.nas-sep { flex: none; background: none; border: 0; cursor: pointer; color: var(--muted); font: 16px var(--sans); line-height: 1; padding: 4px 5px; border-radius: 6px; } button.nas-sep:hover, button.nas-sep:focus-visible { background: var(--surface-2); color: var(--text); } .nas-search { display: flex; align-items: center; gap: 6px; flex: 0 1 230px; min-width: 130px; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(0, 0, 0, .18); cursor: text; } .nas-search:focus-within { border-color: var(--accent); } .nas-search svg { width: 16px; height: 16px; fill: var(--muted); flex: none; } .nas-search input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--text); font: 14px var(--sans); } #nas.is-search-busy .nas-search svg { animation: nas-searching 1s ease-in-out infinite; } @keyframes nas-searching { 50% { fill: var(--accent-text); } } .nas-icon-btn.is-on { color: var(--accent-text); border-color: var(--accent-dim); } .nas-menu { max-height: min(70vh, 560px); overflow-y: auto; } .nas-menu .qa-menu-item:disabled { opacity: .55; cursor: default; } /* where the keyboard is (arrow keys, type-to-find) */ .nas-row { outline: none; } .nas-row.is-focus { box-shadow: inset 0 0 0 1px var(--accent); } .nas-row.is-filtered { display: none; } .nas-loc { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nas-search-head .nas-sec-name { font-size: 14px; } /* ---------- the preview pane: beside the list, staying in view as the list scrolls ---------- */ .nas-split { display: flex; align-items: stretch; } .nas-main { flex: 1 1 auto; min-width: 0; } .nas-preview { flex: none; align-self: flex-start; width: 340px; margin: 10px 10px 10px 0; position: sticky; top: 10px; max-height: calc(100vh - 20px); overflow-y: auto; background: rgba(0, 0, 0, .2); border: 1px solid var(--line); border-radius: 12px; animation: nas-pv-in .18s ease-out; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; } .nas-preview[hidden] { display: none; } @keyframes nas-pv-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } } @media (max-width: 1180px) { .nas-preview { width: 290px; } } .nas-pv-top { display: flex; align-items: center; padding: 8px 8px 2px 14px; } .nas-pv-head { flex: 1; color: var(--muted); font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: .06em; } .nas-pv-close { width: 30px; height: 30px; border-color: transparent; } .nas-pv-body { padding: 6px 14px 16px; } .nas-pv-media { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); } .nas-pv-media.is-square { aspect-ratio: 1; max-width: 240px; margin: 0 auto; } .nas-pv-media.is-tall { aspect-ratio: 2 / 3; max-width: 200px; margin: 0 auto; } .nas-pv-media img { width: 100%; height: 100%; object-fit: cover; display: block; animation: nas-thumb-in .2s ease-out; } .nas-pv-media.is-image img { object-fit: contain; } .nas-pv-media.is-icon { background: var(--surface-2); aspect-ratio: 16 / 10; } .nas-pv-media.is-icon svg { width: 64px; height: 64px; fill: var(--muted); } .nas-pv-media.is-folder.is-icon svg { fill: var(--accent-text); } .nas-pv-media.is-video.is-icon svg { fill: #ff8fc7; } .nas-pv-media.is-audio.is-icon svg { fill: #a78bfa; } .nas-pv-media.is-book.is-icon svg { fill: var(--amber); } .nas-pv-media.is-text { aspect-ratio: auto; place-items: stretch; background: rgba(0, 0, 0, .35); cursor: default; } .nas-pv-media.is-icon svg.nas-logo { width: 78px; height: 78px; } /* a PDF / Word document: its pages, to scroll through right here (docpreview.js), and a button for a bigger look */ .nas-pv-media.is-doc { aspect-ratio: auto; display: block; place-items: normal; background: #3a4048; cursor: default; } .nas-pv-doc { width: 100%; height: min(460px, 60vh); overflow: auto; overscroll-behavior: contain; } .nas-pv-big { position: absolute; top: 8px; right: 8px; z-index: 2; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .18); background: rgba(20, 24, 30, .82); color: #fff; cursor: pointer; transition: background .12s; } .nas-pv-big:hover, .nas-pv-big:focus-visible { background: var(--accent); outline: none; } .nas-pv-big svg { width: 18px; height: 18px; fill: currentColor; } .nas-pv-text { margin: 0; padding: 10px 12px; max-height: 280px; overflow: auto; font: 11.5px/1.5 var(--mono); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; } .nas-pv-play { position: absolute; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .55); box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); transition: transform .12s, background .12s; } .nas-pv-play svg { width: 26px; height: 26px; fill: #fff; margin-left: 3px; } .nas-pv-media:hover .nas-pv-play { transform: scale(1.06); background: var(--accent); } .nas-pv-name { margin: 12px 0 3px; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; } .nas-pv-sub { color: var(--muted); font-size: 12.5px; } .nas-pv-prog { margin-top: 8px; } .nas-pv-prog .nas-prog-bar { flex: 1; width: auto; } .nas-pv-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .nas-pv-acts .btn-small { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; } .nas-pv-acts svg { width: 16px; height: 16px; fill: currentColor; flex: none; } .nas-pv-acts .btn-primary { padding-left: 14px; padding-right: 16px; } .nas-pv-more { margin-top: 8px; } .nas-pv-more .btn-small { font-size: 12.5px; padding-top: 5px; padding-bottom: 5px; } .nas-pv-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 7px 14px; margin: 16px 0 0; font-size: 13px; line-height: 1.4; } .nas-pv-dl dt { color: var(--muted); } .nas-pv-dl dd { margin: 0; overflow-wrap: anywhere; } .nas-pv-wait { color: var(--muted); font-size: 12.5px; margin: 10px 0 0; } .nas-pv-stack { display: flex; justify-content: center; padding: 14px 0 4px; } .nas-pv-stack .nas-ico { width: 64px; height: 64px; margin: 0 -10px; border: 2px solid var(--surface); } .nas-pv-stack .nas-ico svg { width: 28px; height: 28px; } .nas-pv-names { margin: 10px 0 0; padding-left: 18px; font-size: 13px; color: var(--muted); } .nas-pv-names li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- the status bar ---------- */ .nas-status { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 4px 10px 4px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; } .nas-status-text { flex: 1; min-width: 0; white-space: pre; overflow: hidden; text-overflow: ellipsis; } .nas-status-views { display: flex; gap: 2px; } .nas-sv { display: grid; place-items: center; width: 28px; height: 26px; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; } .nas-sv:hover { background: var(--surface-2); color: var(--text); } .nas-sv.is-on { color: var(--accent-text); background: rgba(0, 125, 255, .14); } .nas-sv svg { width: 16px; height: 16px; fill: currentColor; } .nas-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 3000; padding: 9px 16px; border-radius: 10px; background: #1b2330; border: 1px solid var(--accent-dim); color: var(--text); font-size: 13.5px; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); animation: nas-pane-in .18s ease-out; transition: opacity .35s; } .nas-toast.is-out { opacity: 0; } /* ---------- Large / Medium Icons: the files as tiles, their pictures big ---------- */ #nas.view-grid .nas-cols { display: none; } #nas.view-grid .nas-table { display: block; } #nas.view-grid .nas-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--nas-tile, 200px), 1fr)); gap: 8px; padding: 10px; } #nas.view-large { --nas-tile: 210px; } #nas.view-icons { --nas-tile: 150px; } #nas.view-grid .nas-list > :not(.nas-row) { grid-column: 1 / -1; } #nas.view-grid .nas-row { grid-column: auto; display: flex; flex-direction: column; align-items: stretch; gap: 7px; position: relative; padding: 7px; min-height: 0; } #nas.view-grid .nas-row > .nas-ico { width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 8px; margin: 0; } #nas.view-grid .nas-row > .nas-ico > svg { width: 42px; height: 42px; } #nas.view-icons .nas-row > .nas-ico > svg { width: 34px; height: 34px; } #nas.view-grid .nas-row > .nas-ico .nas-ico-badge { width: 24px; height: 24px; left: 6px; bottom: 6px; } #nas.view-grid .nas-row > .nas-check { position: absolute; top: 12px; left: 12px; z-index: 2; opacity: 0; transition: opacity .12s; } #nas.view-grid .nas-row:hover > .nas-check, #nas.view-grid .nas-row.is-selected > .nas-check { opacity: 1; } #nas.view-grid .nas-row > .nas-check input { width: 18px; height: 18px; } #nas.view-grid .nas-namebox { padding: 0 3px; } #nas.view-grid .nas-name { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.3; font-size: 13.5px; } #nas.view-grid .nas-prog-bar { width: 100%; flex: 1; } #nas.view-grid .nas-prog-text { display: none; } #nas.view-grid .nas-row > .nas-col-size, #nas.view-grid .nas-row > .nas-col-date, #nas.view-grid .nas-row > .nas-col-by, #nas.view-grid .nas-row > .nas-acts { display: none; } #nas.view-grid .nas-row > .nas-ico > svg.nas-logo { width: 54px; height: 54px; } #nas.view-icons .nas-row > .nas-ico > svg.nas-logo { width: 42px; height: 42px; } #nas.view-grid .nas-sec, #nas.view-grid .nas-sec-note { border-radius: 9px; } /* ---------- a phone (or a narrow window): the preview slides in from the right, over the list ---------- */ @media (max-width: 860px) { .nas-preview { position: fixed; top: 0; right: 0; bottom: auto; height: 100vh; height: 100dvh; width: min(440px, 100vw); max-height: none; margin: 0; z-index: 70; border-radius: 16px 0 0 16px; border-width: 0 0 0 1px; background: var(--surface); box-shadow: -14px 0 44px rgba(0, 0, 0, .6); animation: nas-pv-slide .24s cubic-bezier(.2, .8, .2, 1); overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom, 0px); } @keyframes nas-pv-slide { from { transform: translateX(100%); } to { transform: none; } } .nas-pv-backdrop { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100dvh; z-index: 69; background: rgba(0, 0, 0, .5); animation: nas-thumb-in .2s ease-out; } html.nas-pv-lock, html.nas-pv-lock body { overflow: hidden; } .nas-pv-top { padding: 12px 10px 4px 16px; } .nas-pv-close { width: 40px; height: 40px; } .nas-pv-body { padding: 6px 16px 22px; } .nas-pv-acts .btn-primary { flex: 1 1 100%; justify-content: center; padding: 12px; font-size: 15px; } .nas-pv-acts .btn-small { padding-top: 9px; padding-bottom: 9px; } #nas.view-grid .nas-list { gap: 6px; padding: 8px; } #nas.view-large { --nas-tile: 150px; } #nas.view-icons { --nas-tile: 104px; } #nas.view-grid .nas-row > .nas-check { opacity: 1; } } @media (max-width: 640px) { /* the top of the box: back / forward / up and where you are on one line, search and the buttons under it */ .nas-address { flex: 1 1 calc(100% - 132px); order: 0; } .nas-search { flex: 1 1 140px; order: 1; height: 36px; } .nas-search input { font-size: 16px; } /* (16px: the phone doesn't zoom in on it) */ .nas-path-input { font-size: 16px; } .nas-tools { order: 2; } .nas-nav .nas-icon-btn { width: 34px; height: 34px; } .nas-status { padding-left: 12px; } } /* (the status bar at the bottom of the box, like Explorer's - however few files there are) */ #nas-box { display: flex; flex-direction: column; } #nas-box > .nas-split { flex: 1 1 auto; } /* ---------- the Navigation Pane (wide screens): the tab's folders as a tree ---------- */ .nas-tree { flex: none; align-self: flex-start; width: 230px; position: sticky; top: 0; max-height: 100vh; overflow: auto; padding: 8px 4px 12px; border-right: 1px solid var(--line); scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; } .nas-tree[hidden] { display: none; } @media (max-width: 1180px) { .nas-tree { width: 200px; } } .nas-tree-head { color: var(--muted); font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: .06em; padding: 4px 10px 6px; } .nas-tree-list, .nas-tree-kids { list-style: none; margin: 0; padding: 0; } .nas-tree-none { color: var(--muted); font-size: 13px; padding: 4px 10px; } .nas-tree-row { display: flex; align-items: center; gap: 2px; border-radius: 7px; padding-right: 6px; min-height: 30px; } .nas-tree-row:hover { background: var(--surface-2); } .nas-tree-row.is-here { background: rgba(0, 125, 255, .14); } .nas-tree-row.is-here .nas-tree-name { color: var(--text); font-weight: 600; } .nas-tree-twist { flex: none; width: 20px; height: 22px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; color: var(--muted); border-radius: 5px; padding: 0; } .nas-tree-twist .chev { margin: 0; transform: rotate(-45deg) scale(.8); } .nas-tree-twist[aria-expanded="true"] .chev { transform: rotate(45deg) scale(.8); } .nas-tree-twist.is-empty { visibility: hidden; } .nas-tree-name { display: flex; align-items: center; gap: 7px; min-width: 0; flex: 1; color: var(--muted); text-decoration: none; font-size: 13.5px; padding: 4px 2px; border-radius: 6px; border: 1px dashed transparent; } .nas-tree-name:hover { color: var(--text); } .nas-tree-name svg { width: 16px; height: 16px; fill: var(--accent-text); flex: none; } .nas-tree-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nas-tree-name.is-drop { background: rgba(0, 125, 255, .18); border-color: var(--accent); } @media (max-width: 860px) { .nas-tree { display: none !important; } } /* ---------- a tab's AI Search box (beside its name search): sparkles, greyed out while the AI can't answer ---------- */ .nas-search.nas-aisearch { flex: 0 1 250px; } .nas-search.nas-aisearch svg { fill: #a78bfa; } .nas-search.nas-aisearch:focus-within { border-color: #a78bfa; } .nas-search.nas-aisearch.is-off { opacity: .5; cursor: not-allowed; background: transparent; border-style: dashed; } .nas-search.nas-aisearch.is-off svg { fill: var(--muted); } .nas-search.nas-aisearch input:disabled { cursor: not-allowed; color: var(--muted); } .nas-search.nas-aisearch input:disabled::placeholder { color: var(--muted); } @media (max-width: 640px) { .nas-search.nas-aisearch { flex: 1 1 140px; } } /* (a phone: the two side by side) */ /* ---------- AI Search: a wide search box, what kind of file, the method (admins only), and why each one matched ---------- */ .nas-search.ai-search { flex: 1 1 340px; min-width: 200px; } .ai-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 14px 8px 16px; border-bottom: 1px solid var(--line); } .ai-kinds { display: flex; flex-wrap: wrap; gap: 6px; } .ai-chip { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font: 13px var(--sans); cursor: pointer; } .ai-chip:hover { color: var(--text); } .ai-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .ai-chip.is-on { color: #fff; background: var(--accent); border-color: var(--accent); } .ai-mode { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; } .ai-mode select { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; font: 13px var(--sans); } .ai-status, .ai-note { margin: 0; padding: 6px 16px; font-size: 12.5px; color: var(--muted); border-bottom: 1px solid var(--line); } .ai-status:empty { display: none; } .ai-status.is-bad { color: var(--amber); } .ai-note code { font-size: 12px; word-break: break-word; } .nas-why { color: var(--accent-text); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* the AI's match %: green when it's sure, blue when fairly sure, amber for a weak match */ .nas-whyline { display: flex; align-items: center; gap: 7px; min-width: 0; margin-top: 2px; } .nas-whyline .nas-why { min-width: 0; } .nas-match { flex: none; font: 700 10.5px/1 var(--sans); padding: 3px 7px; border-radius: 999px; white-space: nowrap; letter-spacing: .01em; color: var(--accent-text); background: var(--accent-dim); } .nas-match.is-high { color: #7ee2a0; background: rgba(59, 165, 93, .18); } .nas-match.is-low { color: var(--amber); background: rgba(245, 165, 36, .15); } @media (max-width: 640px) { .nas-search.ai-search { flex-basis: 100%; min-width: 0; } /* (its own line: it never shrinks to nothing) */ .ai-bar { padding: 8px 12px; } .ai-kinds { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px; } .ai-kinds::-webkit-scrollbar { display: none; } .ai-chip { flex: none; padding: 6px 13px; font-size: 14px; } .ai-mode { margin-left: 0; } .ai-mode select { font-size: 16px; } .ai-status, .ai-note { padding: 6px 12px; } } /* ---------- Switch Account (the menu under your name): the other accounts signed in in this browser ---------- */ #usermenu-list:has(#switch-btn) { min-width: 230px; } .usermenu-switch, .usermenu-add { white-space: nowrap; } .usermenu-switch[aria-expanded="true"]:not(:hover):not(:focus-visible) { background: rgba(0, 125, 255, .14); } .usermenu-switch .usermenu-caret { margin-left: 4px; } .usermenu-switch .usermenu-sub { margin-left: auto; } .usermenu-switch[aria-expanded="true"] .usermenu-caret { transform: rotate(180deg); } .usermenu-accounts { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 4px 14px; padding-left: 8px; border-left: 2px solid var(--line); } .usermenu-accounts[hidden] { display: none; } .usermenu-acct { display: flex; align-items: center; gap: 2px; } .usermenu-acct .usermenu-form { display: block; } .usermenu-acct .usermenu-form:first-child { flex: 1; min-width: 0; } .usermenu-acct-btn { min-width: 0; } .usermenu-acct-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .usermenu-av { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; overflow: hidden; background: var(--accent-dim); color: #fff; font: 600 12px var(--sans); } .usermenu-av img { width: 100%; height: 100%; object-fit: cover; } .usermenu-x { flex: none; width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: 18px/1 var(--sans); cursor: pointer; } .usermenu-x:hover, .usermenu-x:focus-visible { background: var(--red-dim); color: #fff; outline: none; } .usermenu-note { margin: 4px 8px 6px; font-size: 12px; color: var(--muted); max-width: 220px; } /* the test account's Settings: just one setting, so a small box */ .settings.settings-basic { width: min(560px, calc(100vw - 24px)); height: min(260px, calc(100vh - 40px)); } /* ---------- Show Folder/File Size (like TreeSize): each folder's size, with a bar for its share of the folder it's in ---------- */ .nas-sizes-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 0 4px; color: var(--muted); font-size: 13px; white-space: nowrap; cursor: pointer; user-select: none; } .nas-sizes-toggle input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; } .nas-sizes-toggle:hover, #nas.show-sizes .nas-sizes-toggle { color: var(--text); } .ai-all:has(input:checked) { color: var(--text); } .nas-col-size.has-size { min-width: 72px; } .nas-size-num { display: block; white-space: nowrap; } .nas-size-bar { display: block; width: 84px; height: 4px; margin: 4px 0 0 auto; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; } .nas-size-bar i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--ark)); transition: width .3s; } .nas-tree-size { flex: none; margin-left: 4px; color: var(--muted); font: 11px var(--mono); white-space: nowrap; } .nas-tree-size:empty { display: none; } @media (max-width: 860px) { /* a list of folders on a phone: their sizes too (not the dates) */ #nas.show-sizes:not(.has-files):not(.view-grid) .nas-box .nas-main > .nas-table { grid-template-columns: 20px 36px minmax(0, 1fr) max-content max-content; } #nas.show-sizes.no-checks:not(.has-files):not(.view-grid) .nas-box .nas-main > .nas-table { grid-template-columns: 0 50px minmax(0, 1fr) max-content max-content; } #nas.show-sizes:not(.has-files) .nas-box .nas-main > .nas-table > .nas-list > .nas-row > .nas-col-size { display: block; } #nas.show-sizes:not(.has-files) .nas-box .nas-main > .nas-table > .nas-cols > .nas-col-size { display: inline-flex; } .nas-col-size.has-size { min-width: 0; } .nas-size-bar { width: 52px; } } /* ---------- Admin > Uploads & Deletions ---------- */ .filelog-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; } .filelog-find { margin-left: auto; flex: 0 1 260px; min-width: 160px; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(0, 0, 0, .18); color: var(--text); font: 13.5px var(--sans); outline: none; } .filelog-find:focus { border-color: var(--accent); } .filelog-list { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; } .filelog-row { display: grid; grid-template-columns: 118px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; padding: 8px 12px; } .filelog-row + .filelog-row { border-top: 1px solid rgba(39, 49, 61, .6); } .filelog-act { grid-row: span 2; align-self: center; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--green); } .filelog-row.is-delete .filelog-act { color: #f0a49b; } .filelog-path { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .filelog-meta { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .filelog-none { padding: 14px 12px; color: var(--muted); font-size: 13.5px; } .filelog-more { margin-top: 10px; } @media (max-width: 640px) { .filelog-find { margin-left: 0; flex-basis: 100%; } .filelog-row { grid-template-columns: 1fr; } .filelog-act { grid-row: auto; } } /* ---------- Search History (yours only) ---------- */ .sh-note { margin: -6px 0 12px; color: var(--muted); font-size: 13px; } .sh-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .sh-bar .hist-filters { margin: 0; } .sh-clear { margin-left: auto; } .sh-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; } .sh-list > .empty { padding: 18px; margin: 0; } .sh-row { display: flex; align-items: center; gap: 12px; padding: 4px 8px 4px 4px; } .sh-row + .sh-row { border-top: 1px solid rgba(39, 49, 61, .6); } .sh-go { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; color: var(--text); text-decoration: none; } .sh-go:hover { background: var(--surface-2); } .sh-go svg { width: 17px; height: 17px; flex: none; fill: var(--muted); } .sh-q { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; } .sh-meta { flex: none; color: var(--muted); font-size: 12.5px; white-space: nowrap; } .sh-x { flex: none; width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 18px; cursor: pointer; } .sh-x:hover { color: var(--text); background: var(--surface-2); } @media (max-width: 640px) { .sh-row { flex-wrap: wrap; row-gap: 0; } .sh-meta { order: 3; flex-basis: 100%; padding: 0 0 8px 41px; } } /* ---------- your recent searches, under a tab's search box ---------- */ .nas-recent { position: absolute; z-index: 40; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 40px rgba(0, 0, 0, .5); } .nas-recent[hidden] { display: none; } .nas-recent-head { padding: 4px 8px 6px; color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; } .nas-recent-row { display: flex; align-items: center; border-radius: 8px; } .nas-recent-row:hover { background: var(--surface-2); } .nas-recent-go { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 7px 8px; border: 0; background: none; color: var(--text); font: 13.5px var(--sans); text-align: left; cursor: pointer; } .nas-recent-go svg { width: 15px; height: 15px; flex: none; fill: var(--muted); } .nas-recent-go span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nas-recent-x { flex: none; width: 26px; height: 26px; border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: 16px; cursor: pointer; } .nas-recent-x:hover { color: var(--text); background: rgba(255, 255, 255, .06); } .nas-recent-all { display: block; margin-top: 4px; padding: 7px 8px; border-top: 1px solid var(--line); color: var(--accent-text); font-size: 12.5px; text-decoration: none; } .nas-recent-all:hover { text-decoration: underline; } /* ===================== PDF / Word previews (docpreview.js): the pane's, and the bigger popup ===================== */ .zd-scroll { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px; box-sizing: border-box; } .zd-page { flex: none; background: #fff; color: #000; box-shadow: 0 2px 10px rgba(0, 0, 0, .45); box-sizing: border-box; } .zd-pdf { width: 100%; max-width: 920px; display: grid; place-items: center; } .zd-pdf canvas { display: block; width: 100%; height: 100%; } .zd-pdf.is-bad::after { content: "This page couldn't be shown"; color: #666; font: 13px var(--sans); } .zd-flow, .zd-word { font-family: Calibri, Carlito, "Segoe UI", Arial, sans-serif; font-size: 14.67px; line-height: 1.15; color: #000; text-align: left; white-space: pre-wrap; overflow-wrap: break-word; box-sizing: border-box; } .zd-flow { position: relative; flex: none; } .zd-word { overflow: hidden; } .zd-p { margin: 0; } .zd-mark { display: inline-block; text-indent: 0; padding-right: 6px; white-space: nowrap; } .zd-tab { display: inline-block; width: 48px; } .zd-link { color: #0563c1; text-decoration: underline; } .zd-pic { display: inline-block; max-width: 100%; height: auto; vertical-align: bottom; } .zd-pic-none { display: inline-block; max-width: 100%; background: #e6e8eb; vertical-align: bottom; } .zd-txbx { display: block; border: 1px solid #a6a6a6; padding: 6px 8px; margin: 4px 0; white-space: pre-wrap; } .zd-tbl { border-collapse: collapse; margin: 4px 0; max-width: 100%; white-space: pre-wrap; } .zd-tbl td { padding: 2px 7px; vertical-align: top; } .zd-tbl.has-lines td { border: 1px solid #000; } .zd-note { margin: 0; padding: 28px 14px; text-align: center; color: var(--muted); font: 13px/1.5 var(--sans); white-space: normal; } .zd-note-in { color: #666; } .zd-pop { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(0, 0, 0, .62); animation: nas-thumb-in .16s ease-out; } .zd-pop-box { width: min(1000px, calc(100vw - 32px)); height: calc(100vh - 40px); height: calc(100dvh - 40px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 24px 70px rgba(0, 0, 0, .6); } .zd-pop-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--line); } .zd-pop-logo { flex: none; display: grid; place-items: center; } .zd-pop-logo svg { width: 32px; height: 32px; } .zd-pop-words { flex: 1; min-width: 0; display: flex; flex-direction: column; } .zd-pop-name { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zd-pop-type { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zd-pop-head .btn-small { flex: none; text-decoration: none; } .zd-pop-x { flex: none; width: 34px; height: 34px; border-color: transparent; } .zd-pop-body { flex: 1; min-height: 0; overflow: auto; background: #2f343c; overscroll-behavior: contain; } html.zd-lock, html.zd-lock body { overflow: hidden; } @media (max-width: 640px) { .zd-pop-box { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; border: 0; } .zd-pop-head { padding: 8px 6px 8px 10px; gap: 6px; padding-top: calc(8px + env(safe-area-inset-top, 0px)); } .zd-scroll { padding: 8px; gap: 8px; } } /* a folder download: "Downloading..." with how far, then "Downloaded" (media.js watchDownload) */ .nas-dlnote { display: flex; flex-direction: column; gap: 7px; min-width: min(360px, calc(100vw - 32px)); max-width: calc(100vw - 32px); } .nas-dlnote-text { overflow-wrap: anywhere; } .nas-dlnote-bar { display: block; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; } .nas-dlnote-bar i { display: block; height: 100%; width: 3%; background: var(--accent); border-radius: inherit; transition: width .4s; } .nas-dlnote.is-done { border-color: rgba(59, 165, 93, .6); } .nas-dlnote.is-done .nas-dlnote-bar i { background: var(--green); } .nas-dlnote.is-bad { border-color: rgba(237, 66, 69, .6); } .nas-dlnote.is-bad .nas-dlnote-bar i { background: var(--red); } /* ---------- Servers: Add Server, just left of the section's "N of M Online" (it moves with that text) ---------- */ .section-end { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; } .section-add { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 9px; border-radius: 999px; cursor: pointer; font: 600 13px var(--sans); color: var(--game, var(--accent-text)); background: color-mix(in srgb, var(--game, var(--accent)) 12%, transparent); border: 1px solid color-mix(in srgb, var(--game, var(--accent)) 55%, transparent); transition: background .15s, color .15s; } .section-add:hover, .section-add:focus-visible { background: var(--game, var(--accent)); color: #0b1016; outline: none; } .section-add svg { width: 16px; height: 16px; fill: currentColor; flex: none; } @media (max-width: 520px) { .section-add span { display: none; } .section-add { padding: 6px; } } .addsrv-dlg input[type="text"] { margin-bottom: 12px; } .addsrv-dlg input::placeholder { color: var(--muted); opacity: .7; } .addsrv-hint { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; } .addsrv-dlg[data-game="minecraft"] .btn-primary { background: var(--green); color: #0b1016; } .addsrv-dlg[data-game="ark"] .btn-primary { background: var(--ark); color: #0b1016; } .card-remove { margin-left: 6px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; border: 0; cursor: pointer; background: none; color: var(--muted); opacity: .6; transition: opacity .12s, background .12s; } .card:hover .card-remove, .card-remove:focus-visible { opacity: 1; } .card-remove:hover { background: rgba(237, 66, 69, .15); color: var(--red); } .card-remove svg { width: 15px; height: 15px; fill: currentColor; } .card.is-active-copy .card-remove { display: none; } /* ===================== The document viewer window (docview.html) ===================== */ .page-docview { overflow: hidden; } .dv { height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: #262b33; } .dv-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--line); } .dv-logo { flex: none; display: grid; place-items: center; } .dv-logo svg { width: 34px; height: 34px; fill: none; } .dv-words { flex: 1; min-width: 0; } .dv-name { margin: 0; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dv-sub { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dv-head .btn-small { flex: none; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; } .dv-head .btn-small svg { width: 16px; height: 16px; fill: currentColor; } .dv-exact.is-on { border-color: var(--accent); color: var(--accent-text); } .dv-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; } .dv-body.is-sheet, .dv-body.zd-scroll.is-sheet { padding: 0; display: block; } /* text and code: as they are */ .zd-text { margin: 0; width: 100%; max-width: 1100px; box-sizing: border-box; padding: 18px 22px; background: #fff; color: #1d1f23; font: 13px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; border-radius: 4px; box-shadow: 0 2px 10px rgba(0, 0, 0, .45); } /* Excel: the grid, letters across the top, numbers down the side, the sheets as tabs at the bottom */ .zd-sheetview { display: flex; flex-direction: column; height: 100%; min-height: 300px; background: #fff; } .zd-sheet { flex: 1; min-height: 0; overflow: auto; } .zd-grid { border-collapse: collapse; font: 12.5px Calibri, Carlito, "Segoe UI", Arial, sans-serif; color: #111; background: #fff; } .zd-grid th, .zd-grid td { border: 1px solid #d4d4d4; padding: 2px 6px; height: 20px; white-space: pre; max-width: 360px; overflow: hidden; text-overflow: ellipsis; } .zd-grid thead th { position: sticky; top: 0; z-index: 2; background: #f0f0f0; color: #444; font-weight: 400; text-align: center; min-width: 64px; } .zd-grid tbody th { position: sticky; left: 0; z-index: 1; background: #f0f0f0; color: #444; font-weight: 400; text-align: center; min-width: 38px; } .zd-grid .zd-corner { left: 0; z-index: 3; } .zd-grid td.is-num { text-align: right; } .zd-tabs { flex: none; display: flex; gap: 2px; padding: 4px 8px 6px; background: #e9e9e9; border-top: 1px solid #c8c8c8; overflow-x: auto; } .zd-tab { flex: none; width: auto; min-width: max-content; white-space: nowrap; border: 1px solid #c8c8c8; border-top: 0; border-radius: 0 0 6px 6px; padding: 4px 14px; background: #f5f5f5; color: #333; cursor: pointer; font: 12.5px var(--sans); } .zd-tab.is-on { background: #fff; color: #107c41; font-weight: 700; border-bottom: 2px solid #107c41; } .zd-sheetview .zd-note { color: #666; } /* PowerPoint: each slide at its own size, shrunk to fit, its number under it */ .zd-slidewrap { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; } .zd-slide { position: relative; overflow: hidden; font-family: Calibri, Carlito, "Segoe UI", Arial, sans-serif; color: #000; } .zd-slide-n { color: #b6bfca; font: 12px var(--sans); } .zd-shape { position: absolute; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; padding: 4px 8px; } img.zd-spic { padding: 0; object-fit: fill; } .zd-sp { margin: 0 0 4px; line-height: 1.15; white-space: pre-wrap; overflow-wrap: break-word; } .zd-bu { display: inline-block; min-width: 1.1em; } .zd-stbl { border-collapse: collapse; width: 100%; } .zd-stbl td { border: 1px solid #9aa4b1; padding: 4px 8px; vertical-align: top; } .zd-stbl .zd-sp { font-size: 16px; } @media (max-width: 640px) { .dv-head { gap: 8px; padding: 8px 10px; } .dv-sub { display: none; } } /* the bubbles down the side of Messages / Discord: pressed (and held), only the bubble itself lights up - its own rounded shape - instead of the phone's square tap highlight; and a picture an admin gave it fills it */ .im-rail-item, .im-rail-add, .im-rail-btn { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; } .im-rail-item .im-avatar { transition: border-radius .15s, box-shadow .15s, filter .12s; } .im-rail-item:active .im-avatar { filter: brightness(1.22); border-radius: 14px; } .im-rail-item .im-avatar.has-icon { background: var(--surface-2); overflow: hidden; } .im-rail-item .im-avatar.has-icon img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; } /* ---------- Admin: drag a box by its title (on a phone, by the dotted grip) into your own order (adminorder.js) ---------- */ .admin > section[aria-labelledby] > .section-head { cursor: grab; } .admin > section[aria-labelledby] > .section-head { position: relative; padding-right: 40px; } /* (always in the title bar's top-right corner, level with the title - a long description can't push it onto its own line) */ .admin > section[aria-labelledby] > .section-head .admin-grip { position: absolute; right: 0; top: -2px; margin: 0; touch-action: none; } /* (a finger on it drags the box, not the page) */ .admin > section[aria-labelledby] > .section-head .admin-grip:hover { opacity: 1; background: rgba(255, 255, 255, .05); } .admin > section.is-lifted { position: relative; z-index: 30; box-shadow: 0 24px 60px rgba(0, 0, 0, .6); will-change: transform; } html.admin-grabbing, html.admin-grabbing * { cursor: grabbing !important; user-select: none !important; } /* ---------- Admin: every box folds up (click its title); boxes that hold several parts (adminorder.js) ---------- */ .admin > section[aria-labelledby] > .section-head { cursor: pointer; user-select: none; } .admin > section[aria-labelledby] > .section-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; } .admin-chev { display: inline-block; margin: 0 12px 0 2px; vertical-align: 3px; } .admin > section.is-shut > :not(.section-head) { display: none !important; } .admin > section.is-shut > .section-head { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; } .admin > section.is-shut .admin-chev { transform: rotate(-45deg); margin: 0 14px 0 2px; } /* the parts inside a box that holds several: no box of their own, a line between them, smaller titles */ .admin-group > section.admin-panel { border: 0; border-radius: 0; background: none; padding: 0; margin: 18px 0 0; } .admin-group > section.admin-panel + section.admin-panel, .admin-group > .section-head + section.admin-panel { border-top: 1px solid var(--line); padding-top: 16px; } .admin-group > .section-head + section.admin-panel { border-top: 0; padding-top: 0; margin-top: 4px; } .admin-group > section.admin-panel > .section-head h2 { font-size: 16px; } .admin-group > section.admin-panel > .section-head { border-bottom: 0; padding-bottom: 6px; margin-bottom: 8px; } /* ---------- the Vault: Shared With You, the shared-view bar, the Share dialog, Settings > Vault Sharing ---------- */ .vault-incoming { margin-bottom: 16px; } .vault-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; } .vault-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); text-align: left; cursor: pointer; font: inherit; min-width: 0; } .vault-card:hover { border-color: var(--accent-dim); } .vault-card-ico { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--surface); } .vault-card-ico svg { width: 20px; height: 20px; fill: var(--accent-text); } .vault-card-ico.is-vault svg { fill: var(--amber); } .vault-card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .vault-card-text strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vault-card-text small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vault-shared-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--accent-dim); background: var(--surface-2); } .vault-shared-bar .btn-small { flex: none; display: inline-flex; align-items: center; gap: 6px; } .vault-shared-bar .btn-small svg { width: 16px; height: 16px; fill: currentColor; } .vault-share-all svg { width: 16px; height: 16px; fill: currentColor; } .vshare-dlg { width: min(460px, calc(100vw - 32px)); } .vshare-label { margin: 14px 0 6px; font-size: 13px; font-weight: 600; color: var(--muted); } .vshare-find { margin-bottom: 6px; } .vshare-people { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; } .vshare-people label { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: var(--surface-2); cursor: pointer; font-size: 14px; } .vshare-people label[hidden] { display: none; } .vshare-none { margin: 0; color: var(--muted); font-size: 13px; } .vshare-for { margin-bottom: 0; } .vshare-now[hidden] { display: none; } .vshare-list, .vs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .vshare-list li, .vs-list li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: var(--surface-2); } .vshare-list li span { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vshare-list li small { color: var(--muted); font-size: 12px; flex: none; } .vs-list { margin: 12px 0; } .vs-list li > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .vs-list li strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vs-list li small { color: var(--muted); font-size: 12.5px; } .vs-list li .btn-small, .vshare-list li .btn-small { flex: none; }