From fb91d15607a9addfbf0c1137eb9c453d2abb137f Mon Sep 17 00:00:00 2001 From: Clove Twilight Date: Tue, 16 Jun 2026 09:47:29 +0100 Subject: [PATCH] Rework Discord: dedicated /discord page + Lanyard friend cards, top-left nav, drop corner badges, merge player.css (#2) --- 88x31/index.html | 24 +- cool-people/index.html | 98 +-- css/main.css | 1332 +++++++++++++++++++++++++++------------ css/player.css | 511 --------------- dev-info/index.html | 66 +- discord-bots/index.html | 26 +- index.html | 23 +- js/dev-mode.js | 33 +- js/flavors.js | 4 +- js/now-playing.js | 79 +++ music/index.html | 1 + 11 files changed, 1056 insertions(+), 1141 deletions(-) delete mode 100644 css/player.css diff --git a/88x31/index.html b/88x31/index.html index a23230f..80d7e16 100644 --- a/88x31/index.html +++ b/88x31/index.html @@ -47,14 +47,13 @@ Link Center Cool People Dev Info + Discord Discord Bots Music 88x31 -
-

88x31 Buttons

@@ -80,29 +79,8 @@
- - - - diff --git a/cool-people/index.html b/cool-people/index.html index d2aff9e..92be40e 100644 --- a/cool-people/index.html +++ b/cool-people/index.html @@ -47,116 +47,30 @@ Link Center Cool People Dev Info + Discord Discord Bots Music 88x31 -
- -
+

Cool People

This is where people I know can be put up on my site, click their profiles for their pages

- -
-

Fiancée

-
- - - Aria - -
-
- - -
-

Close Friends

-
- - - Ria - - - - Camilla - - - - Saphie - - - - Ari - -
-
- -
-

Friends

-
- - - Memeancia - - - - N - - - - Lylla - - - - Simon - -
-
- -
-

Other Peeps

-

You can request to be added here!

- - - Aureal - -
- - + +
- - - - - + - \ No newline at end of file + diff --git a/css/main.css b/css/main.css index 1f8149d..753c3e5 100644 --- a/css/main.css +++ b/css/main.css @@ -23,7 +23,6 @@ @import url(/css/themes/latte.css); @import url(/css/themes/mocha.css); @import url(/css/themes/macchiato.css); -@import url(/css/player.css); /* ============================================================ 1. BASE & RESET @@ -277,267 +276,12 @@ body::before { /* ============================================================ - 4. NOW-PLAYING WIDGET (shared, pinned top-left) - Discord presence + Spotify via Lanyard. The album-art accent - colour is exposed as --np-accent (r, g, b) while .has-accent set. - ============================================================ */ -.now-playing { - --np-accent: 245, 194, 231; - /* fallback ~ Catppuccin pink */ - position: fixed; - top: 1rem; - left: 1rem; - z-index: 6; - display: flex; - align-items: center; - gap: 0.55rem; - max-width: 260px; - padding: 0.4rem 0.7rem 0.4rem 0.4rem; - border-radius: 999px; - background: var(--surface-0); - border: 1px solid var(--surface-1); - color: var(--text); - text-decoration: none; - transition: transform 0.15s ease, border-color 0.2s ease, - border-radius 0.25s ease, box-shadow 0.2s ease; -} - -.now-playing[hidden] { - display: none; -} - -.now-playing:hover { - transform: translateY(2px); - border-color: var(--pink); -} - -/* While a track is live the pill grows and squares off for the - progress bar, picking up a faint album-art glow. */ -.now-playing.is-live { - align-items: stretch; - border-radius: 16px; -} - -.now-playing.is-live.has-accent { - border-color: rgba(var(--np-accent), 0.55); - box-shadow: 0 6px 22px -10px rgba(var(--np-accent), 0.6); -} - -.now-playing.is-live:hover.has-accent { - border-color: rgba(var(--np-accent), 0.85); -} - -/* Head row: status dot + status word, always visible */ -.np-head { - display: flex; - align-items: center; - gap: 0.35rem; -} - -.np-status { - width: 8px; - height: 8px; - border-radius: 50%; - flex-shrink: 0; - background: var(--overlay-0); -} - -.now-playing[data-status="online"] .np-status { - background: var(--green); -} - -.now-playing[data-status="idle"] .np-status { - background: var(--yellow); -} - -.now-playing[data-status="dnd"] .np-status { - background: var(--red); -} - -.now-playing[data-status="offline"] .np-status { - background: var(--overlay-0); -} - -.np-status-label { - font-size: 0.6rem; - text-transform: uppercase; - letter-spacing: 0.04em; - color: var(--subtext-0); - white-space: nowrap; -} - -.np-art { - width: 34px; - height: 34px; - border-radius: 50%; - object-fit: cover; - flex-shrink: 0; - align-self: center; - display: none; -} - -.now-playing.is-live .np-art { - display: block; - border-radius: 8px; -} - -/* Equalizer bars (only animate while live) */ -.np-bars { - display: none; - align-items: flex-end; - gap: 2px; - height: 16px; - flex-shrink: 0; -} - -.now-playing.is-live .np-bars { - display: flex; -} - -.np-bars i { - width: 3px; - height: 100%; - border-radius: 2px; - background: var(--pink); - transform-origin: bottom; - animation: np-eq 0.9s ease-in-out infinite; -} - -.now-playing.has-accent .np-bars i { - background: rgb(var(--np-accent)); -} - -.np-bars i:nth-child(2) { - animation-delay: 0.15s; -} - -.np-bars i:nth-child(3) { - animation-delay: 0.3s; -} - -.np-bars i:nth-child(4) { - animation-delay: 0.45s; -} - -@keyframes np-eq { - - 0%, - 100% { - transform: scaleY(0.3); - } - - 50% { - transform: scaleY(1); - } -} - -@media (prefers-reduced-motion: reduce) { - .np-bars i { - animation: none; - transform: scaleY(0.6); - } -} - -.np-text { - display: flex; - flex-direction: column; - min-width: 0; - line-height: 1.25; -} - -/* "Now playing" tag — only while a track is live, pushed right */ -.np-label { - display: none; - font-size: 0.6rem; - text-transform: uppercase; - letter-spacing: 0.05em; - color: var(--pink); -} - -.now-playing.is-live .np-label { - display: inline; - margin-left: auto; - padding-left: 0.5rem; -} - -.now-playing.is-live.has-accent .np-label { - color: rgb(var(--np-accent)); -} - -.np-track { - font-size: 0.8rem; - font-weight: 500; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.np-track:empty { - display: none; -} - -.np-artist { - font-size: 0.72rem; - color: var(--subtext-0); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.np-artist:empty { - display: none; -} - -/* Spotify progress bar — only shown while a track has timestamps */ -.np-progress { - display: none; - flex-direction: column; - gap: 3px; - margin-top: 4px; -} - -.now-playing.is-live.has-progress .np-progress { - display: flex; -} - -.np-bar { - height: 3px; - width: 100%; - border-radius: 999px; - background: var(--surface-2); - overflow: hidden; -} - -.np-fill { - display: block; - height: 100%; - width: 0%; - border-radius: 999px; - background: var(--pink); - transition: width 0.3s linear; -} - -.now-playing.has-accent .np-fill { - background: rgb(var(--np-accent)); - box-shadow: 0 0 8px 1px rgba(var(--np-accent), 0.55); -} - -.np-times { - display: flex; - justify-content: space-between; - font-size: 0.58rem; - font-variant-numeric: tabular-nums; - color: var(--subtext-0); -} - - -/* ============================================================ - 5. PAGE NAV (shared, pinned bottom-left) + 5. PAGE NAV (shared, pinned top-left) ============================================================ */ .nav { position: fixed; left: 1rem; - bottom: 1rem; + top: 1rem; z-index: 6; } @@ -824,95 +568,6 @@ body:has(.dev-info) .hub { } -/* ============================================================ - 9. CHANGELOG PAGE - ============================================================ */ -html:has(.changelog), -body:has(.changelog) { - height: auto; - min-height: 100dvh; - overflow-y: auto; -} - -body:has(.changelog) { - align-items: flex-start; -} - -body:has(.changelog) .hub { - max-width: 540px; -} - -.changelog { - display: flex; - flex-direction: column; - gap: 1rem; - padding-bottom: 4.5rem; -} - -.release { - background: var(--surface-0); - border: 1px solid var(--surface-1); - border-radius: 14px; - padding: 1rem 1.15rem; -} - -.release-head { - display: flex; - align-items: baseline; - justify-content: space-between; - gap: 0.5rem; - margin-bottom: 0.6rem; -} - -.release-version { - font-weight: 700; - font-size: 1.05rem; - color: var(--pink); -} - -.release-date { - font-size: 0.78rem; - color: var(--subtext-0); -} - -.release-notes { - list-style: none; - margin: 0; - padding: 0; - display: flex; - flex-direction: column; - gap: 0.45rem; -} - -.release-notes li { - font-size: 0.88rem; - line-height: 1.4; - color: var(--text); -} - -.tag { - display: inline-block; - margin-right: 0.4rem; - padding: 0.05rem 0.45rem; - border-radius: 6px; - font-size: 0.68rem; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.03em; - vertical-align: 1px; -} - -.tag-add { - background: rgba(166, 227, 161, 0.18); - color: var(--green); -} - -.tag-change { - background: rgba(137, 180, 250, 0.18); - color: var(--blue); -} - - /* ============================================================ 10. SECRET CAT MODES (toast + picker modal) ============================================================ */ @@ -1276,7 +931,6 @@ body:has(.friend-grid) { body, body:has(.dev-info), - body:has(.changelog), body:has(.bot-grid), body:has(.friend-grid) { flex-direction: column; @@ -1306,7 +960,6 @@ body:has(.friend-grid) { with .presence-card (position:fixed by default in api.css). Inside .topbar on mobile it must flow normally. */ .topbar .presence-card, - .topbar .now-playing, .topbar .beta-bar { position: static; inset: auto; @@ -1318,14 +971,9 @@ body:has(.friend-grid) { width: 100%; } - .now-playing { - max-width: 100%; - } - /* 2 — Main content */ .hub, body:has(.dev-info) .hub, - body:has(.changelog) .hub, body:has(.bot-grid) .hub, body:has(.friend-grid) .hub { order: 2; @@ -1383,10 +1031,9 @@ body:has(.friend-grid) { margin-bottom: 1.5rem; } - /* Keep the dev-info / changelog / bots / friends content from butting up + /* Keep the dev-info / bots / friends content from butting up against the nav below it */ .dev-info, - .changelog, .bot-grid, .friend-grid { padding-bottom: 1rem; @@ -1421,20 +1068,17 @@ body:has(.friend-grid) { font-size: 0.66rem; } - .bot-grid, - .friend-grid { + .bot-grid { gap: 1.5rem 1rem; } - /* Shrink avatar grids slightly on very small screens */ - .bot-pfp, - .friend-pfp { + /* Shrink the bot avatar grid slightly on very small screens */ + .bot-pfp { width: 80px; height: 80px; } - .bot, - .friend { + .bot { width: 80px; height: 80px; } @@ -1795,6 +1439,30 @@ details.waka-section[open]>summary.section-title::after { justify-content: flex-start; } +/* ---- about / setup + badges section ---- */ +.about-badges { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin-bottom: 1rem; +} + +/* The .badge chips are reused here in normal page flow (the fixed-position + .badges container is gone); make sure they stay interactive + visible. */ +.about-badges .badge { + pointer-events: auto; +} + +.about-list { + margin-top: 0.25rem; +} + +/* hidden pokéball now lives inside the dev-info Setup section */ +.about-setup #pokeball-secret { + display: block; + margin: 0.9rem auto 0; +} + /* ---- hardware spec list ---- */ .hw-item { text-decoration: none; @@ -2262,81 +1930,151 @@ body:has(.friend-grid) .hub-header { .friend-grid { display: grid; - grid-template-columns: repeat(auto-fit, 96px); + /* fixed-width columns + centered: a lone card stays card-sized (not + stretched), and as many as fit sit centered as a group */ + grid-template-columns: repeat(auto-fit, 210px); justify-content: center; margin-bottom: 1.5rem; - gap: 3rem 1.5rem; - max-width: 560px; + gap: 1.1rem; + width: 100%; } -.friend { +/* allow the cool-people page to scroll even before friends.js injects the + .friend-grid elements that the :has() rule keys on */ +html:has(.friends-wrap), +body:has(.friends-wrap) { + height: auto; + min-height: 100dvh; + overflow-y: auto; +} +body:has(.friends-wrap) { + align-items: flex-start; +} +body:has(.friends-wrap) .hub { + max-width: 960px; +} +#friends-root { + display: flex; + flex-direction: column; + gap: 2rem; + padding-bottom: 4.5rem; +} + +/* ---- Lanyard friend cards ---- */ +.friend-card { position: relative; display: flex; flex-direction: column; - align-items: center; - justify-content: flex-start; - - width: 96px; - height: auto; - - color: var(--text); - text-decoration: none; - transition: transform 0.15s ease, border-color 0.15s ease, - background 0.15s ease, box-shadow 0.15s ease; + border-radius: 14px; + background: var(--surface-0); + border: 1px solid var(--surface-1); + overflow: hidden; + transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; +} +.friend-card:hover { + transform: translateY(-3px); + border-color: rgb(var(--accent-rgb)); + box-shadow: 0 8px 22px -12px rgba(var(--accent-rgb), 0.5); } -.friend-name { - margin-top: 0.5rem; - font-size: 0.8rem; - color: var(--subtext-0); - text-align: center; +/* banner strip — Nitro banner image / accent colour / default wash */ +.fc-banner { + height: 54px; + background: + linear-gradient(135deg, rgba(var(--accent-rgb), 0.45), rgba(var(--accent-rgb), 0.12)); + background-size: cover; + background-position: center; +} +.friend-card.has-banner .fc-banner { + background-size: cover; + background-position: center; } -.friend-name::before { - content: "🩵 "; +.fc-main { + display: flex; + align-items: flex-start; + gap: 0.7rem; + padding: 0.6rem 0.85rem 0.85rem; } -.friend-name.known::before { - content: "💛 "; +.fc-avatar { + position: relative; + flex-shrink: 0; + width: 56px; + height: 56px; + margin-top: -30px; } - -.friend-name.wife::before { - content: "🖤 "; -} - -.friend-name.close::before { - content: "🤍 "; -} - -.friend-pfp { - width: 96px; - height: 96px; +.fc-pfp { + width: 56px; + height: 56px; border-radius: 50%; object-fit: cover; - border: 3px solid var(--yellow); - box-shadow: 0 4px 18px rgba(var(--accent-rgb), 0.25); + border: 3px solid var(--surface-0); + background: var(--surface-0); + display: block; } -.friend-pfp.wife { - border: 3px solid var(--lavender); +/* status dot — colour driven by data-status on the card */ +.fc-status { + position: absolute; + right: -1px; + bottom: -1px; + width: 15px; + height: 15px; + border-radius: 50%; + border: 3px solid var(--surface-0); + background: var(--blue); +} +.friend-card[data-status="online"] .fc-status { background: var(--green); } +.friend-card[data-status="idle"] .fc-status { background: var(--yellow); } +.friend-card[data-status="dnd"] .fc-status { background: var(--red); } +.friend-card[data-status="offline"] .fc-status { background: var(--overlay-0); } +.friend-card[data-status="unconnected"] .fc-status { background: var(--blue); } + +.fc-id { + display: flex; + flex-direction: column; + gap: 0.15rem; + min-width: 0; + padding-top: 0.1rem; } -.friend-pfp.close { - border: 3px solid var(--red); +.fc-name { + font-size: 0.95rem; + font-weight: 700; + color: var(--text); + text-decoration: none; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } +a.fc-name:hover { color: rgb(var(--accent-rgb)); } -.friend-pfp.known { - border: 3px solid var(--saphire); +/* tier hearts (match the old friend-name prefixes) */ +.fc-name::before { content: "🩵 "; } +.fc-name.known::before { content: "💛 "; } +.fc-name.wife::before { content: "🖤 "; } +.fc-name.close::before { content: "🤍 "; } + +.fc-user { + font-size: 0.72rem; + color: var(--subtext-0); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } +.fc-user:empty { display: none; } -.friend:hover { - transform: translateY(-3px); +.fc-badges { + display: inline-flex; + align-items: center; + flex-wrap: wrap; + gap: 0.2rem; + margin-top: 0.1rem; } - -.friend:hover .friend-pfp { - filter: none; -} - +.fc-badges:empty { display: none; } +.fc-badge { width: 16px; height: 16px; display: block; } +.fc-badge-link { display: inline-flex; line-height: 0; } /* ===================================================================== * MUSIC PAGE (/music) — merged in from music.css. @@ -2346,7 +2084,7 @@ body:has(.friend-grid) .hub-header { * ===================================================================== */ /* Let the music page scroll; the link hub stays locked (same pattern as - .dev-info / .changelog above). Without this, html,body{overflow:hidden} + .dev-info above). Without this, html,body{overflow:hidden} from the homepage layout traps the page. */ html:has(.music-wrap), body:has(.music-wrap) { @@ -2927,4 +2665,768 @@ body.term-chrome-in #visitor-counter { .topbar #visitor-counter { order: 2; } -} \ No newline at end of file +} + + +/* ============================================================ + 16. PRESENCE CARD + /discord + /api EMBED (merged from player.css) + ============================================================ */ +html[data-theme="mocha"] { + color-scheme: dark; + --rosewater: #f5e0dc; --flamingo: #f2cdcd; --pink: #f5c2e7; + --accent-rgb: 245, 194, 231; + --mauve: #cba6f7; --red: #f38ba8; --maroon: #eba0ac; --peach: #fab387; + --yellow: #f9e2af; --green: #a6e3a1; --teal: #94e2d5; --sky: #89dceb; + --saphire: #74c7ec; --blue: #89b4fa; --lavender: #b4befe; + --text: #cdd6f4; --subtext-0: #a6adc8; --subtext-1: #bac2de; + --overlay-0: #6c7086; --overlay-1: #7f849c; --overlay-2: #9399b2; + --surface-0: #313244; --surface-1: #45475a; --surface-2: #585b70; + --base: #1e1e2e; --mantle: #181825; --crust: #11111b; +} + +html[data-theme="macchiato"] { + color-scheme: dark; + --rosewater: #f4dbd6; --flamingo: #f0c6c6; --pink: #f5bde6; + --accent-rgb: 245, 189, 230; + --mauve: #c6a0f6; --red: #ed8796; --maroon: #ee99a0; --peach: #f5a97f; + --yellow: #eed49f; --green: #a6da95; --teal: #8bd5ca; --sky: #91d7e3; + --saphire: #7dc4e4; --blue: #8aadf4; --lavender: #b7bdf8; + --text: #cad3f5; --subtext-0: #a5adcb; --subtext-1: #b8c0e0; + --overlay-0: #6e738d; --overlay-1: #8087a2; --overlay-2: #939ab7; + --surface-0: #363a4f; --surface-1: #494d64; --surface-2: #5b6078; + --base: #24273a; --mantle: #1e2030; --crust: #181926; +} + +html[data-theme="frappe"] { + color-scheme: dark; + --rosewater: #f2d5cf; --flamingo: #eebebe; --pink: #f4b8e4; + --accent-rgb: 244, 184, 228; + --mauve: #ca9ee6; --red: #e78284; --maroon: #ea999c; --peach: #ef9f76; + --yellow: #e5c890; --green: #a6d189; --teal: #81c8be; --sky: #99d1db; + --saphire: #85c1dc; --blue: #8caaee; --lavender: #babbf1; + --text: #c6d0f5; --subtext-0: #a5adce; --subtext-1: #b5bfe2; + --overlay-0: #737994; --overlay-1: #838ba7; --overlay-2: #949cbb; + --surface-0: #414559; --surface-1: #51576d; --surface-2: #626880; + --base: #303446; --mantle: #292c3c; --crust: #232634; +} + +html[data-theme="latte"] { + color-scheme: light; + --rosewater: #dc8a78; --flamingo: #dd7878; --pink: #ea76cb; + --accent-rgb: 234, 118, 203; + --mauve: #8839ef; --red: #d20f39; --maroon: #e64553; --peach: #fe640b; + --yellow: #df8e1d; --green: #40a02b; --teal: #179299; --sky: #04a5e5; + --saphire: #209fb5; --blue: #1e66f5; --lavender: #7287fd; + --text: #4c4f69; --subtext-0: #6c6f85; --subtext-1: #5c5f77; + --overlay-0: #9ca0b0; --overlay-1: #8c8fa1; --overlay-2: #7c7f93; + --surface-0: #ccd0da; --surface-1: #bcc0cc; --surface-2: #acb0be; + --base: #eff1f5; --mantle: #e6e9ef; --crust: #dce0e8; +} + + +/* ===================================================================== + * 2. STANDALONE PAGE STAGE + * Only the dedicated /api pages use .api-stage; it centers a single + * card on a Catppuccin gradient. The homepage never sets data-theme + * or .api-stage, so its fixed top-left card is untouched. + * ===================================================================== */ +html[data-theme] body.api-body { + margin: 0; + min-height: 100vh; + font-family: 'Comic Code', ui-monospace, system-ui, sans-serif; + color: var(--text); + background: linear-gradient(135deg, var(--base) 0%, var(--mantle) 60%, var(--crust) 100%); +} + +.api-stage { + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + padding: 1.5rem; +} + +/* On the stage, the card sits in flow & centered instead of fixed. */ +.api-stage .presence-card { + position: static; + margin: 0; + max-width: 320px; + width: 100%; +} + +.api-empty { + text-align: center; + color: var(--subtext-0); + font-size: 0.9rem; + max-width: 420px; + line-height: 1.5; +} +.api-empty a { color: rgb(var(--accent-rgb)); } + + +/* ===================================================================== + * 3. PRESENCE CARD (unified Discord-style profile pill) + * Lifted verbatim from main.css §13 so the card is self-contained. + * ===================================================================== */ +.presence-card { + --np-accent: 245, 194, 231; + position: fixed; + top: 1rem; + left: 1rem; + z-index: 6; + width: max-content; + max-width: 280px; + background: var(--surface-0); + border: 1px solid var(--surface-1); + border-radius: 16px; + box-shadow: 0 8px 26px -12px rgba(17, 17, 27, 0.7); + overflow: hidden; + transition: border-color 0.2s ease, box-shadow 0.2s ease; +} + +.presence-card[hidden] { display: none; } + +.presence-card.has-accent { + border-color: rgba(var(--np-accent), 0.5); + box-shadow: 0 8px 26px -12px rgba(var(--np-accent), 0.6); +} + +/* ---- header (always visible) ---- */ +.pc-head { + display: flex; + align-items: center; + gap: 0.6rem; + padding: 0.5rem 0.7rem; +} + +.pc-avatar { + position: relative; + width: 40px; + height: 40px; + flex-shrink: 0; +} + +.pc-av-img { + width: 40px; + height: 40px; + border-radius: 50%; + object-fit: cover; + display: block; + /* solid fill behind the avatar — many PFPs (incl. Clove's) are partly + transparent, and Discord shows a solid backdrop rather than the banner. */ + background: var(--crust); +} + +/* avatar decoration / frame overlay (Discord cosmetic) */ +.pc-av-deco { + position: absolute; + top: 50%; + left: 50%; + width: 54px; + height: 54px; + transform: translate(-50%, -50%); + pointer-events: none; +} +.pc-av-deco[hidden] { display: none; } + +.pc-status { + position: absolute; + right: -1px; + bottom: -1px; + width: 12px; + height: 12px; + border-radius: 50%; + border: 2.5px solid var(--surface-0); + background: var(--overlay-0); +} +.presence-card[data-status="online"] .pc-status { background: var(--green); } +.presence-card[data-status="idle"] .pc-status { background: var(--yellow); } +.presence-card[data-status="dnd"] .pc-status { background: var(--red); } +.presence-card[data-status="offline"] .pc-status { background: var(--overlay-0); } + +.pc-id { + display: flex; + flex-direction: column; + gap: 0.05rem; + min-width: 0; +} +.pc-name { + font-size: 0.92rem; + font-weight: 700; + color: rgb(var(--accent-rgb)); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + transition: color 0.5s ease; +} +.pc-user { + font-size: 0.7rem; + color: var(--subtext-0); + white-space: nowrap; +} +.pc-user:empty { display: none; } + +/* ---- expandable sections ---- */ +.pc-sections { + display: flex; + flex-direction: column; + gap: 0.4rem; + padding: 0 0.6rem 0.6rem; + transition: opacity 0.2s ease; +} +.presence-card:not(.has-sections) .pc-sections { display: none; } + +.pc-row { + display: flex; + align-items: center; + gap: 0.55rem; + padding: 0.4rem 0.5rem; + border-radius: 10px; + background: var(--mantle); + border: 1px solid transparent; + color: var(--text); + text-decoration: none; + transition: border-color 0.15s ease, transform 0.15s ease; +} +a.pc-row:hover, +.pc-row--stack:hover { + border-color: rgba(var(--np-accent), 0.55); + transform: translateX(2px); +} + +.pc-row-text { + display: flex; + flex-direction: column; + gap: 0.04rem; + min-width: 0; +} +.pc-row-kind { + font-size: 0.6rem; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--subtext-0); +} +.pc-row-title { + font-size: 0.8rem; + font-weight: 500; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 200px; +} +.pc-row-sub { + font-size: 0.7rem; + color: var(--subtext-0); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 200px; +} +.pc-row-title:empty, .pc-row-sub:empty { display: none; } + +.pc-row-elapsed { + font-size: 0.62rem; + color: var(--subtext-0); + margin-top: 0.1rem; +} +.pc-row-elapsed:empty { display: none; } + +/* artwork / icons */ +.pc-art, +.pc-row-ic-img { + width: 38px; + height: 38px; + border-radius: 7px; + object-fit: cover; + flex-shrink: 0; +} +.pc-row-ic.pc-dot { + width: 9px; + height: 9px; + border-radius: 50%; + flex-shrink: 0; + margin: 0 0.5rem; + background: rgb(var(--accent-rgb)); +} +.pc-dev .pc-row-ic.pc-dot { background: var(--blue); border-radius: 2px; } +.pc-game .pc-row-ic.pc-dot { background: var(--green); } +.pc-stream .pc-row-ic.pc-dot{ background: var(--mauve); } + +/* custom status */ +.pc-custom { + background: transparent; + border: none; + padding: 0.1rem 0.5rem; + gap: 0.4rem; + align-items: flex-start; +} +.pc-emoji { width: 18px; height: 18px; flex-shrink: 0; margin-top: 0.05rem; } +.pc-custom-text { + font-size: 0.74rem; + color: var(--subtext-0); + max-width: 230px; + white-space: normal; + overflow-wrap: anywhere; + line-height: 1.35; +} + +/* spotify progress */ +.pc-spotify .pc-row-title { color: var(--green); } +.pc-progress { + display: flex; + flex-direction: column; + gap: 0.15rem; + margin-top: 0.25rem; + width: 180px; +} +.pc-bar { + height: 4px; + border-radius: 999px; + background: var(--surface-1); + overflow: hidden; +} +.pc-fill { + display: block; + height: 100%; + width: 0; + border-radius: 999px; + background: rgb(var(--np-accent)); +} +.pc-times { + display: flex; + justify-content: space-between; + font-size: 0.58rem; + color: var(--subtext-0); + font-variant-numeric: tabular-nums; +} + +@media (max-width: 640px) { + .presence-card { max-width: calc(100vw - 2rem); } + .api-stage .presence-card { max-width: 100%; } +} + +/* ---- extended Lanyard fields ---- */ +.pc-name-row { + display: flex; + align-items: center; + gap: 0.35rem; + min-width: 0; +} +.pc-name-row .pc-name { min-width: 0; } + +/* gradient display name (display_name_styles) */ +.pc-name.is-gradient { + -webkit-background-clip: text; + background-clip: text; + color: transparent; + -webkit-text-fill-color: transparent; +} + +/* server tag chip (primary_guild) */ +.pc-tag { + display: inline-flex; + align-items: center; + gap: 0.2rem; + flex-shrink: 0; + padding: 0.05rem 0.35rem; + border-radius: 6px; + background: var(--surface-2); + font-size: 0.58rem; + font-weight: 700; + letter-spacing: 0.03em; + color: var(--text); +} +.pc-tag[hidden] { display: none; } +.pc-tag-badge { width: 14px; height: 14px; display: block; } + +/* username + active-platform indicators */ +.pc-sub-row { + display: flex; + align-items: center; + gap: 0.35rem; +} +.pc-platforms { + display: inline-flex; + align-items: center; + gap: 0.2rem; + color: var(--subtext-0); +} +.pc-plat { width: 12px; height: 12px; display: inline-flex; } +.pc-plat svg { width: 12px; height: 12px; display: block; } + +/* KV meta line (location, etc.) */ +.pc-meta { + display: flex; + align-items: center; + gap: 0.25rem; + margin-top: 0.1rem; + font-size: 0.66rem; + color: var(--subtext-0); +} +.pc-meta[hidden] { display: none; } +.pc-pin { font-size: 0.7rem; line-height: 1; } + +/* stacked rows (activity rows that carry buttons) */ +.pc-row--stack { + flex-direction: column; + align-items: stretch; + gap: 0.4rem; +} +.pc-row-link { + display: flex; + align-items: center; + gap: 0.55rem; + min-width: 0; + color: var(--text); + text-decoration: none; +} + +/* activity icon with small corner badge (assets.small_image) */ +.pc-ic-wrap { + position: relative; + flex-shrink: 0; + width: 38px; + height: 38px; +} +.pc-ic-wrap .pc-row-ic-img { width: 38px; height: 38px; } +.pc-ic-badge { + position: absolute; + right: -3px; + bottom: -3px; + width: 16px; + height: 16px; + border-radius: 50%; + border: 2px solid var(--mantle); + object-fit: cover; +} + +/* activity buttons (labels from presence) */ +.pc-buttons { + display: flex; + flex-wrap: wrap; + gap: 0.35rem; +} +.pc-btn { + font-size: 0.66rem; + padding: 0.22rem 0.55rem; + border-radius: 6px; + background: var(--surface-1); + color: var(--text); + text-decoration: none; + border: 1px solid transparent; + transition: border-color 0.15s ease, background 0.15s ease; +} +.pc-btn:hover { + border-color: rgb(var(--np-accent)); + background: var(--surface-2); +} + +/* profile badges */ +.pc-badges { + display: inline-flex; + align-items: center; + gap: 0.2rem; + flex-wrap: wrap; + margin-top: 0.15rem; +} +.pc-badges:empty { display: none; } +.pc-badge { width: 16px; height: 16px; display: block; } +.pc-badge-link { display: inline-flex; line-height: 0; } + +/* wishlist star + panel */ +.pc-star { + margin-left: auto; + align-self: flex-start; + background: none; + border: none; + cursor: pointer; + font-size: 0.95rem; + line-height: 1; + color: var(--subtext-0); + padding: 0.1rem 0.15rem; + transition: color 0.15s ease, transform 0.15s ease; +} +.pc-star:hover { color: rgb(var(--accent-rgb)); transform: scale(1.12); } +.pc-star.on { color: var(--yellow); } + +.pc-wishlist { display: none; } +.presence-card.show-wishlist .pc-wishlist { + display: block; + border-top: 1px solid var(--surface-1); + margin: 0 0.6rem; + padding: 0.6rem 0 0.7rem; +} +.pc-wishlist-title { + font-size: 0.62rem; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--subtext-0); + margin-bottom: 0.45rem; +} +.pc-wl-item { + display: flex; + align-items: center; + gap: 0.45rem; + padding: 0.25rem 0.4rem; + border-radius: 8px; + text-decoration: none; + color: var(--text); +} +a.pc-wl-item:hover { background: var(--mantle); } +.pc-wl-ic { width: 22px; height: 22px; border-radius: 5px; object-fit: cover; } +.pc-wl-name { font-size: 0.8rem; } +.pc-wl-empty { font-size: 0.78rem; color: var(--subtext-0); margin: 0; } + +/* Discord profile gradient (Catppuccin is the fallback) */ +.presence-card.has-profile-grad { + background: linear-gradient(180deg, rgb(var(--pc-grad-1-rgb)) 0%, rgb(var(--pc-grad-2-rgb)) 100%); +} +.presence-card.has-profile-grad:not(.has-accent) { + border-color: rgba(var(--pc-grad-1-rgb), 0.6); +} +.presence-card.has-profile-grad .pc-row { background: rgba(17, 17, 27, 0.55); } + + +/* ===================================================================== + * 4. EXTRAS (banner, bio, connected accounts — used on the /discord page) + * ===================================================================== */ +.pc-banner { + display: block; + width: 100%; + height: 96px; + object-fit: cover; + margin: 0; +} +.pc-banner[hidden] { display: none; } + +/* solid/accent banner fallback when there's no Nitro banner image */ +.presence-card.has-banner-color::before { + content: ""; + display: block; + height: 64px; + background: var(--pc-banner-color, var(--surface-1)); +} + +/* when a banner is present, lift the avatar up over it */ +.presence-card.has-banner .pc-head, +.presence-card.has-banner-color .pc-head { + margin-top: -22px; +} +.presence-card.has-banner .pc-avatar, +.presence-card.has-banner-color .pc-avatar { + width: 56px; + height: 56px; +} +.presence-card.has-banner .pc-av-img, +.presence-card.has-banner-color .pc-av-img { + width: 56px; + height: 56px; + border: 3px solid var(--surface-0); +} +.presence-card.has-banner .pc-av-deco, +.presence-card.has-banner-color .pc-av-deco { + width: 72px; + height: 72px; +} + +.pc-bio { + margin: 0 0.7rem 0.5rem; + padding: 0.5rem 0.6rem; + border-radius: 10px; + background: var(--mantle); + font-size: 0.74rem; + line-height: 1.4; + color: var(--subtext-1); + white-space: pre-wrap; + overflow-wrap: anywhere; +} +.pc-bio[hidden] { display: none; } + +.pc-connections { + display: flex; + flex-wrap: wrap; + gap: 0.35rem; + margin: 0 0.7rem 0.6rem; +} +.pc-connections[hidden] { display: none; } + +.pc-conn { + display: inline-flex; + align-items: center; + gap: 0.3rem; + padding: 0.2rem 0.5rem; + border-radius: 999px; + background: var(--surface-1); + border: 1px solid transparent; + color: var(--text); + font-size: 0.66rem; + text-decoration: none; + transition: border-color 0.15s ease, background 0.15s ease; +} +a.pc-conn:hover { + border-color: rgb(var(--accent-rgb)); + background: var(--surface-2); +} +.pc-conn-type { + text-transform: uppercase; + letter-spacing: 0.04em; + font-size: 0.56rem; + color: var(--subtext-0); +} +.pc-conn-check { color: var(--green); font-weight: 700; } + + +/* ===================================================================== + * 5. /discord PAGE STAGE (centered, slightly wider card) + * ===================================================================== */ +html:has(.presence-stage), +body:has(.presence-stage) { + height: auto; + min-height: 100dvh; + overflow-y: auto; +} +body:has(.presence-stage) { + padding: 0; +} +.presence-stage { + min-height: 100dvh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 1.5rem; +} +.presence-intro { + text-align: center; + margin: 0 0 1.25rem; +} +.presence-intro h1 { + margin: 0; + font-size: 1.8rem; + color: rgb(var(--accent-rgb)); +} +.presence-intro p { + margin: 0.3rem 0 0; + font-size: 0.9rem; + color: var(--subtext-0); +} + +/* pronouns chip (shown on the card sub-row) */ +.pc-pronouns { + padding: 0.05rem 0.4rem; + border-radius: 6px; + background: var(--surface-2); + font-size: 0.6rem; + font-weight: 600; + color: var(--subtext-1); + white-space: nowrap; +} +.pc-pronouns[hidden] { display: none; } + + +/* ===================================================================== + * 6. /discord PAGE — big "fills the page" presence card + * ===================================================================== */ +.presence-stage .presence-card { + position: static; + margin: 0; + width: 100%; + max-width: 680px; + border-radius: 20px; +} + +/* tall Nitro banner */ +.presence-stage .pc-banner { + height: 220px; +} +.presence-stage .presence-card.has-banner-color::before { + height: 150px; +} + +/* header — roomier, big overlapping avatar */ +.presence-stage .pc-head { + gap: 1rem; + padding: 0.9rem 1.4rem; + align-items: flex-end; +} +.presence-stage .presence-card.has-banner .pc-head, +.presence-stage .presence-card.has-banner-color .pc-head { + /* only the avatar pokes into the banner; the name/identity block clears it */ + margin-top: -38px; +} +.presence-stage .pc-avatar, +.presence-stage .presence-card.has-banner .pc-avatar, +.presence-stage .presence-card.has-banner-color .pc-avatar { + width: 120px; + height: 120px; +} +.presence-stage .pc-av-img, +.presence-stage .presence-card.has-banner .pc-av-img, +.presence-stage .presence-card.has-banner-color .pc-av-img { + width: 120px; + height: 120px; + border: 5px solid var(--surface-0); +} +.presence-stage .pc-av-deco, +.presence-stage .presence-card.has-banner .pc-av-deco, +.presence-stage .presence-card.has-banner-color .pc-av-deco { + width: 152px; + height: 152px; +} +.presence-stage .pc-status { + width: 24px; + height: 24px; + border-width: 5px; +} + +/* identity block — bigger type */ +.presence-stage .pc-name { font-size: 1.5rem; } +.presence-stage .pc-user { font-size: 0.9rem; } +.presence-stage .pc-badges { margin-top: 0.3rem; } +.presence-stage .pc-badge { width: 22px; height: 22px; } + +/* bio + connections — wider, padded to match */ +.presence-stage .pc-bio { + margin: 0 1.4rem 0.8rem; + padding: 0.7rem 0.9rem; + font-size: 0.88rem; +} +.presence-stage .pc-connections { + margin: 0 1.4rem 0.9rem; + gap: 0.5rem; +} +.presence-stage .pc-conn { font-size: 0.74rem; padding: 0.3rem 0.65rem; } + +/* activity rows — larger artwork + text */ +.presence-stage .pc-sections { + gap: 0.6rem; + padding: 0 1.4rem 1.1rem; +} +.presence-stage .pc-row { padding: 0.7rem 0.8rem; border-radius: 14px; } +.presence-stage .pc-art, +.presence-stage .pc-row-ic-img, +.presence-stage .pc-ic-wrap, +.presence-stage .pc-ic-wrap .pc-row-ic-img { width: 56px; height: 56px; } +.presence-stage .pc-row-title { font-size: 0.95rem; max-width: none; } +.presence-stage .pc-row-sub { font-size: 0.82rem; max-width: none; } +.presence-stage .pc-progress { width: 100%; } +.presence-stage .pc-custom-text { font-size: 0.86rem; max-width: none; } + +/* wishlist + star scale up a touch */ +.presence-stage .pc-star { font-size: 1.2rem; } + +@media (max-width: 720px) { + .presence-stage .presence-card { max-width: 100%; } +} +@media (max-width: 480px) { + .presence-stage .pc-banner { height: 150px; } + .presence-stage .pc-avatar, + .presence-stage .presence-card.has-banner .pc-avatar, + .presence-stage .presence-card.has-banner-color .pc-avatar { width: 92px; height: 92px; } + .presence-stage .pc-av-img, + .presence-stage .presence-card.has-banner .pc-av-img, + .presence-stage .presence-card.has-banner-color .pc-av-img { width: 92px; height: 92px; } + .presence-stage .presence-card.has-banner .pc-head, + .presence-stage .presence-card.has-banner-color .pc-head { margin-top: -30px; } + .presence-stage .pc-name { font-size: 1.25rem; } +} diff --git a/css/player.css b/css/player.css deleted file mode 100644 index f4b7fdf..0000000 --- a/css/player.css +++ /dev/null @@ -1,511 +0,0 @@ -html[data-theme="mocha"] { - color-scheme: dark; - --rosewater: #f5e0dc; --flamingo: #f2cdcd; --pink: #f5c2e7; - --accent-rgb: 245, 194, 231; - --mauve: #cba6f7; --red: #f38ba8; --maroon: #eba0ac; --peach: #fab387; - --yellow: #f9e2af; --green: #a6e3a1; --teal: #94e2d5; --sky: #89dceb; - --saphire: #74c7ec; --blue: #89b4fa; --lavender: #b4befe; - --text: #cdd6f4; --subtext-0: #a6adc8; --subtext-1: #bac2de; - --overlay-0: #6c7086; --overlay-1: #7f849c; --overlay-2: #9399b2; - --surface-0: #313244; --surface-1: #45475a; --surface-2: #585b70; - --base: #1e1e2e; --mantle: #181825; --crust: #11111b; -} - -html[data-theme="macchiato"] { - color-scheme: dark; - --rosewater: #f4dbd6; --flamingo: #f0c6c6; --pink: #f5bde6; - --accent-rgb: 245, 189, 230; - --mauve: #c6a0f6; --red: #ed8796; --maroon: #ee99a0; --peach: #f5a97f; - --yellow: #eed49f; --green: #a6da95; --teal: #8bd5ca; --sky: #91d7e3; - --saphire: #7dc4e4; --blue: #8aadf4; --lavender: #b7bdf8; - --text: #cad3f5; --subtext-0: #a5adcb; --subtext-1: #b8c0e0; - --overlay-0: #6e738d; --overlay-1: #8087a2; --overlay-2: #939ab7; - --surface-0: #363a4f; --surface-1: #494d64; --surface-2: #5b6078; - --base: #24273a; --mantle: #1e2030; --crust: #181926; -} - -html[data-theme="frappe"] { - color-scheme: dark; - --rosewater: #f2d5cf; --flamingo: #eebebe; --pink: #f4b8e4; - --accent-rgb: 244, 184, 228; - --mauve: #ca9ee6; --red: #e78284; --maroon: #ea999c; --peach: #ef9f76; - --yellow: #e5c890; --green: #a6d189; --teal: #81c8be; --sky: #99d1db; - --saphire: #85c1dc; --blue: #8caaee; --lavender: #babbf1; - --text: #c6d0f5; --subtext-0: #a5adce; --subtext-1: #b5bfe2; - --overlay-0: #737994; --overlay-1: #838ba7; --overlay-2: #949cbb; - --surface-0: #414559; --surface-1: #51576d; --surface-2: #626880; - --base: #303446; --mantle: #292c3c; --crust: #232634; -} - -html[data-theme="latte"] { - color-scheme: light; - --rosewater: #dc8a78; --flamingo: #dd7878; --pink: #ea76cb; - --accent-rgb: 234, 118, 203; - --mauve: #8839ef; --red: #d20f39; --maroon: #e64553; --peach: #fe640b; - --yellow: #df8e1d; --green: #40a02b; --teal: #179299; --sky: #04a5e5; - --saphire: #209fb5; --blue: #1e66f5; --lavender: #7287fd; - --text: #4c4f69; --subtext-0: #6c6f85; --subtext-1: #5c5f77; - --overlay-0: #9ca0b0; --overlay-1: #8c8fa1; --overlay-2: #7c7f93; - --surface-0: #ccd0da; --surface-1: #bcc0cc; --surface-2: #acb0be; - --base: #eff1f5; --mantle: #e6e9ef; --crust: #dce0e8; -} - - -/* ===================================================================== - * 2. STANDALONE PAGE STAGE - * Only the dedicated /api pages use .api-stage; it centers a single - * card on a Catppuccin gradient. The homepage never sets data-theme - * or .api-stage, so its fixed top-left card is untouched. - * ===================================================================== */ -html[data-theme] body.api-body { - margin: 0; - min-height: 100vh; - font-family: 'Comic Code', ui-monospace, system-ui, sans-serif; - color: var(--text); - background: linear-gradient(135deg, var(--base) 0%, var(--mantle) 60%, var(--crust) 100%); -} - -.api-stage { - min-height: 100vh; - display: flex; - align-items: center; - justify-content: center; - padding: 1.5rem; -} - -/* On the stage, the card sits in flow & centered instead of fixed. */ -.api-stage .presence-card { - position: static; - margin: 0; - max-width: 320px; - width: 100%; -} - -.api-empty { - text-align: center; - color: var(--subtext-0); - font-size: 0.9rem; - max-width: 420px; - line-height: 1.5; -} -.api-empty a { color: rgb(var(--accent-rgb)); } - - -/* ===================================================================== - * 3. PRESENCE CARD (unified Discord-style profile pill) - * Lifted verbatim from main.css §13 so the card is self-contained. - * ===================================================================== */ -.presence-card { - --np-accent: 245, 194, 231; - position: fixed; - top: 1rem; - left: 1rem; - z-index: 6; - width: max-content; - max-width: 280px; - background: var(--surface-0); - border: 1px solid var(--surface-1); - border-radius: 16px; - box-shadow: 0 8px 26px -12px rgba(17, 17, 27, 0.7); - overflow: hidden; - transition: border-color 0.2s ease, box-shadow 0.2s ease; -} - -.presence-card[hidden] { display: none; } - -.presence-card.has-accent { - border-color: rgba(var(--np-accent), 0.5); - box-shadow: 0 8px 26px -12px rgba(var(--np-accent), 0.6); -} - -/* ---- header (always visible) ---- */ -.pc-head { - display: flex; - align-items: center; - gap: 0.6rem; - padding: 0.5rem 0.7rem; -} - -.pc-avatar { - position: relative; - width: 40px; - height: 40px; - flex-shrink: 0; -} - -.pc-av-img { - width: 40px; - height: 40px; - border-radius: 50%; - object-fit: cover; - display: block; -} - -/* avatar decoration / frame overlay (Discord cosmetic) */ -.pc-av-deco { - position: absolute; - top: 50%; - left: 50%; - width: 54px; - height: 54px; - transform: translate(-50%, -50%); - pointer-events: none; -} -.pc-av-deco[hidden] { display: none; } - -.pc-status { - position: absolute; - right: -1px; - bottom: -1px; - width: 12px; - height: 12px; - border-radius: 50%; - border: 2.5px solid var(--surface-0); - background: var(--overlay-0); -} -.presence-card[data-status="online"] .pc-status { background: var(--green); } -.presence-card[data-status="idle"] .pc-status { background: var(--yellow); } -.presence-card[data-status="dnd"] .pc-status { background: var(--red); } -.presence-card[data-status="offline"] .pc-status { background: var(--overlay-0); } - -.pc-id { - display: flex; - flex-direction: column; - gap: 0.05rem; - min-width: 0; -} -.pc-name { - font-size: 0.92rem; - font-weight: 700; - color: rgb(var(--accent-rgb)); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - transition: color 0.5s ease; -} -.pc-user { - font-size: 0.7rem; - color: var(--subtext-0); - white-space: nowrap; -} -.pc-user:empty { display: none; } - -/* ---- expandable sections ---- */ -.pc-sections { - display: flex; - flex-direction: column; - gap: 0.4rem; - padding: 0 0.6rem 0.6rem; - transition: opacity 0.2s ease; -} -.presence-card:not(.has-sections) .pc-sections { display: none; } - -.pc-row { - display: flex; - align-items: center; - gap: 0.55rem; - padding: 0.4rem 0.5rem; - border-radius: 10px; - background: var(--mantle); - border: 1px solid transparent; - color: var(--text); - text-decoration: none; - transition: border-color 0.15s ease, transform 0.15s ease; -} -a.pc-row:hover, -.pc-row--stack:hover { - border-color: rgba(var(--np-accent), 0.55); - transform: translateX(2px); -} - -.pc-row-text { - display: flex; - flex-direction: column; - gap: 0.04rem; - min-width: 0; -} -.pc-row-kind { - font-size: 0.6rem; - text-transform: uppercase; - letter-spacing: 0.05em; - color: var(--subtext-0); -} -.pc-row-title { - font-size: 0.8rem; - font-weight: 500; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 200px; -} -.pc-row-sub { - font-size: 0.7rem; - color: var(--subtext-0); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 200px; -} -.pc-row-title:empty, .pc-row-sub:empty { display: none; } - -.pc-row-elapsed { - font-size: 0.62rem; - color: var(--subtext-0); - margin-top: 0.1rem; -} -.pc-row-elapsed:empty { display: none; } - -/* artwork / icons */ -.pc-art, -.pc-row-ic-img { - width: 38px; - height: 38px; - border-radius: 7px; - object-fit: cover; - flex-shrink: 0; -} -.pc-row-ic.pc-dot { - width: 9px; - height: 9px; - border-radius: 50%; - flex-shrink: 0; - margin: 0 0.5rem; - background: rgb(var(--accent-rgb)); -} -.pc-dev .pc-row-ic.pc-dot { background: var(--blue); border-radius: 2px; } -.pc-game .pc-row-ic.pc-dot { background: var(--green); } -.pc-stream .pc-row-ic.pc-dot{ background: var(--mauve); } - -/* custom status */ -.pc-custom { - background: transparent; - border: none; - padding: 0.1rem 0.5rem; - gap: 0.4rem; - align-items: flex-start; -} -.pc-emoji { width: 18px; height: 18px; flex-shrink: 0; margin-top: 0.05rem; } -.pc-custom-text { - font-size: 0.74rem; - color: var(--subtext-0); - max-width: 230px; - white-space: normal; - overflow-wrap: anywhere; - line-height: 1.35; -} - -/* spotify progress */ -.pc-spotify .pc-row-title { color: var(--green); } -.pc-progress { - display: flex; - flex-direction: column; - gap: 0.15rem; - margin-top: 0.25rem; - width: 180px; -} -.pc-bar { - height: 4px; - border-radius: 999px; - background: var(--surface-1); - overflow: hidden; -} -.pc-fill { - display: block; - height: 100%; - width: 0; - border-radius: 999px; - background: rgb(var(--np-accent)); -} -.pc-times { - display: flex; - justify-content: space-between; - font-size: 0.58rem; - color: var(--subtext-0); - font-variant-numeric: tabular-nums; -} - -@media (max-width: 640px) { - .presence-card { max-width: calc(100vw - 2rem); } - .api-stage .presence-card { max-width: 100%; } -} - -/* ---- extended Lanyard fields ---- */ -.pc-name-row { - display: flex; - align-items: center; - gap: 0.35rem; - min-width: 0; -} -.pc-name-row .pc-name { min-width: 0; } - -/* gradient display name (display_name_styles) */ -.pc-name.is-gradient { - -webkit-background-clip: text; - background-clip: text; - color: transparent; - -webkit-text-fill-color: transparent; -} - -/* server tag chip (primary_guild) */ -.pc-tag { - display: inline-flex; - align-items: center; - gap: 0.2rem; - flex-shrink: 0; - padding: 0.05rem 0.35rem; - border-radius: 6px; - background: var(--surface-2); - font-size: 0.58rem; - font-weight: 700; - letter-spacing: 0.03em; - color: var(--text); -} -.pc-tag[hidden] { display: none; } -.pc-tag-badge { width: 14px; height: 14px; display: block; } - -/* username + active-platform indicators */ -.pc-sub-row { - display: flex; - align-items: center; - gap: 0.35rem; -} -.pc-platforms { - display: inline-flex; - align-items: center; - gap: 0.2rem; - color: var(--subtext-0); -} -.pc-plat { width: 12px; height: 12px; display: inline-flex; } -.pc-plat svg { width: 12px; height: 12px; display: block; } - -/* KV meta line (location, etc.) */ -.pc-meta { - display: flex; - align-items: center; - gap: 0.25rem; - margin-top: 0.1rem; - font-size: 0.66rem; - color: var(--subtext-0); -} -.pc-meta[hidden] { display: none; } -.pc-pin { font-size: 0.7rem; line-height: 1; } - -/* stacked rows (activity rows that carry buttons) */ -.pc-row--stack { - flex-direction: column; - align-items: stretch; - gap: 0.4rem; -} -.pc-row-link { - display: flex; - align-items: center; - gap: 0.55rem; - min-width: 0; - color: var(--text); - text-decoration: none; -} - -/* activity icon with small corner badge (assets.small_image) */ -.pc-ic-wrap { - position: relative; - flex-shrink: 0; - width: 38px; - height: 38px; -} -.pc-ic-wrap .pc-row-ic-img { width: 38px; height: 38px; } -.pc-ic-badge { - position: absolute; - right: -3px; - bottom: -3px; - width: 16px; - height: 16px; - border-radius: 50%; - border: 2px solid var(--mantle); - object-fit: cover; -} - -/* activity buttons (labels from presence) */ -.pc-buttons { - display: flex; - flex-wrap: wrap; - gap: 0.35rem; -} -.pc-btn { - font-size: 0.66rem; - padding: 0.22rem 0.55rem; - border-radius: 6px; - background: var(--surface-1); - color: var(--text); - text-decoration: none; - border: 1px solid transparent; - transition: border-color 0.15s ease, background 0.15s ease; -} -.pc-btn:hover { - border-color: rgb(var(--np-accent)); - background: var(--surface-2); -} - -/* profile badges */ -.pc-badges { - display: inline-flex; - align-items: center; - gap: 0.2rem; - flex-wrap: wrap; - margin-top: 0.15rem; -} -.pc-badges:empty { display: none; } -.pc-badge { width: 16px; height: 16px; display: block; } -.pc-badge-link { display: inline-flex; line-height: 0; } - -/* wishlist star + panel */ -.pc-star { - margin-left: auto; - align-self: flex-start; - background: none; - border: none; - cursor: pointer; - font-size: 0.95rem; - line-height: 1; - color: var(--subtext-0); - padding: 0.1rem 0.15rem; - transition: color 0.15s ease, transform 0.15s ease; -} -.pc-star:hover { color: rgb(var(--accent-rgb)); transform: scale(1.12); } -.pc-star.on { color: var(--yellow); } - -.pc-wishlist { display: none; } -.presence-card.show-wishlist .pc-wishlist { - display: block; - border-top: 1px solid var(--surface-1); - margin: 0 0.6rem; - padding: 0.6rem 0 0.7rem; -} -.pc-wishlist-title { - font-size: 0.62rem; - text-transform: uppercase; - letter-spacing: 0.05em; - color: var(--subtext-0); - margin-bottom: 0.45rem; -} -.pc-wl-item { - display: flex; - align-items: center; - gap: 0.45rem; - padding: 0.25rem 0.4rem; - border-radius: 8px; - text-decoration: none; - color: var(--text); -} -a.pc-wl-item:hover { background: var(--mantle); } -.pc-wl-ic { width: 22px; height: 22px; border-radius: 5px; object-fit: cover; } -.pc-wl-name { font-size: 0.8rem; } -.pc-wl-empty { font-size: 0.78rem; color: var(--subtext-0); margin: 0; } - -/* Discord profile gradient (Catppuccin is the fallback) */ -.presence-card.has-profile-grad { - background: linear-gradient(180deg, rgb(var(--pc-grad-1-rgb)) 0%, rgb(var(--pc-grad-2-rgb)) 100%); -} -.presence-card.has-profile-grad:not(.has-accent) { - border-color: rgba(var(--pc-grad-1-rgb), 0.6); -} -.presence-card.has-profile-grad .pc-row { background: rgba(17, 17, 27, 0.55); } diff --git a/dev-info/index.html b/dev-info/index.html index 798484d..ea011ac 100644 --- a/dev-info/index.html +++ b/dev-info/index.html @@ -42,13 +42,12 @@ -
-