Spaces:
Running
Running
| /* ============================================================================ | |
| PulseLive — Twitch-style design system (shared across all live/ pages) | |
| Palette and layout mirror Twitch's dark theme. | |
| ========================================================================== */ | |
| :root { | |
| --bg: #0e0e10; | |
| --surface: #18181b; /* topnav, sidebar, cards, chat */ | |
| --surface-2: #1f1f23; /* hover, inputs */ | |
| --surface-3: #26262c; | |
| --border: #2f2f35; | |
| --purple: #9147ff; | |
| --purple-hover:#772ce8; | |
| --purple-2: #bf94ff; /* links / accents */ | |
| --text: #efeff1; | |
| --text-alt: #adadb8; | |
| --text-dim: #737380; | |
| --red: #eb0400; | |
| --font: 'Inter', 'Roobert', 'Helvetica Neue', Helvetica, Arial, -apple-system, BlinkMacSystemFont, sans-serif; | |
| --topnav-h: 50px; | |
| --side-w: 240px; | |
| } | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| html, body { height: 100%; } | |
| body { font-family: var(--font); background: var(--bg); color: var(--text); font-size: 14px; } | |
| a { text-decoration: none; color: inherit; } | |
| button { font-family: var(--font); cursor: pointer; } | |
| ::-webkit-scrollbar { width: 10px; height: 10px; } | |
| ::-webkit-scrollbar-thumb { background: #3a3a40; border-radius: 5px; } | |
| ::-webkit-scrollbar-track { background: transparent; } | |
| /* -- Buttons ---------------------------------------------------------------- */ | |
| .tw-btn { background: var(--purple); color: #fff; border: none; padding: .5rem .9rem; border-radius: .28rem; font-size: .82rem; font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; line-height: 1; } | |
| .tw-btn:hover { background: var(--purple-hover); } | |
| .tw-btn-2 { background: var(--surface-3); color: var(--text); border: none; padding: .5rem .9rem; border-radius: .28rem; font-size: .82rem; font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; line-height: 1; } | |
| .tw-btn-2:hover { background: #34343b; } | |
| .tw-btn-sm { padding: .35rem .7rem; font-size: .78rem; } | |
| /* -- Top navigation --------------------------------------------------------- */ | |
| .tw-topnav { position: sticky; top: 0; z-index: 200; height: var(--topnav-h); background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 1rem; padding: 0 1rem; } | |
| .tw-topnav-left { display: flex; align-items: center; gap: .3rem; } | |
| .tw-logo { display: flex; align-items: center; gap: .5rem; padding: 0 .5rem; font-weight: 800; font-size: 1.1rem; color: #fff; letter-spacing: -.3px; } | |
| .tw-logo svg { width: 26px; height: 26px; display: block; } | |
| .tw-navlink { padding: .45rem .7rem; border-radius: .28rem; font-weight: 700; font-size: .9rem; color: var(--text); } | |
| .tw-navlink:hover { background: var(--surface-2); color: var(--purple-2); } | |
| .tw-navlink.active { color: var(--purple-2); } | |
| .tw-search { flex: 0 1 400px; margin: 0 auto; display: flex; } | |
| .tw-search input { flex: 1; background: var(--surface-2); border: 1px solid var(--border); border-right: none; color: var(--text); padding: .5rem .8rem; border-radius: .28rem 0 0 .28rem; font-size: .88rem; outline: none; } | |
| .tw-search input:focus { border-color: var(--purple); } | |
| .tw-search button { background: var(--surface-3); border: 1px solid var(--border); border-radius: 0 .28rem .28rem 0; color: var(--text-alt); padding: 0 .8rem; display: flex; align-items: center; } | |
| .tw-search button:hover { background: #34343b; } | |
| .tw-topnav-right { display: flex; align-items: center; gap: .6rem; margin-left: auto; } | |
| .tw-user { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .85rem; } | |
| .tw-avatar { border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; flex-shrink: 0; } | |
| /* -- App shell (sidebar + content) ------------------------------------------ */ | |
| .tw-shell { display: flex; min-height: calc(100vh - var(--topnav-h)); } | |
| .tw-sidebar { width: var(--side-w); flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); padding: .6rem 0; overflow-y: auto; } | |
| .tw-side-head { display: flex; align-items: center; justify-content: space-between; padding: .3rem 1rem .6rem; } | |
| .tw-side-head span:first-child { font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text); } | |
| .tw-side-head .chev { color: var(--text-alt); font-size: 1rem; } | |
| .tw-side-ch { display: flex; align-items: center; gap: .55rem; padding: .4rem 1rem; } | |
| .tw-side-ch:hover { background: var(--surface-2); } | |
| .tw-side-av { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; color: #fff; flex-shrink: 0; } | |
| .tw-side-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; } | |
| .tw-side-name { font-weight: 700; font-size: .84rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } | |
| .tw-side-cat { font-size: .76rem; color: var(--text-alt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } | |
| .tw-side-live { display: flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 600; color: var(--text); white-space: nowrap; } | |
| .tw-side-live.off { color: var(--text-dim); font-weight: 500; } | |
| .tw-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex-shrink: 0; } | |
| .tw-main { flex: 1; min-width: 0; overflow-x: hidden; } | |
| .tw-content { max-width: 1600px; margin: 0 auto; padding: 1.5rem 2rem; } | |
| /* -- Browse header / filters ------------------------------------------------ */ | |
| .tw-page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; } | |
| .tw-page-head h1 { font-size: 1.5rem; font-weight: 800; } | |
| .tw-filters { display: flex; gap: .8rem; flex-wrap: wrap; align-items: flex-end; } | |
| .tw-fg { display: flex; flex-direction: column; gap: .25rem; } | |
| .tw-fg label { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--text-alt); } | |
| .tw-fg select, .tw-fg input[type="text"] { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); padding: .45rem .6rem; border-radius: .28rem; font-size: .84rem; outline: none; } | |
| .tw-fg select:focus, .tw-fg input:focus { border-color: var(--purple); } | |
| /* -- Category / channel tabs ------------------------------------------------ */ | |
| .tw-tabs { display: flex; gap: 1.5rem; border-bottom: 1px solid var(--border); margin-bottom: 1.3rem; } | |
| .tw-tabs a { padding: .7rem .1rem; font-weight: 700; font-size: .92rem; color: var(--text-alt); border-bottom: 2px solid transparent; margin-bottom: -1px; } | |
| .tw-tabs a:hover { color: var(--purple-2); } | |
| .tw-tabs a.active { color: var(--purple-2); border-bottom-color: var(--purple); } | |
| /* -- Stream card grid (browse) ---------------------------------------------- */ | |
| .tw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.2rem 1.1rem; } | |
| .tw-card { position: relative; } | |
| .tw-thumb-wrap { position: relative; margin-bottom: .6rem; } | |
| /* signature Twitch hover-lift: purple offset appears behind, thumb slides up-left */ | |
| .tw-thumb-wrap::before { content: ''; position: absolute; inset: 0; background: var(--purple); border-radius: .3rem; opacity: 0; transition: opacity .1s ease; } | |
| .tw-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: .3rem; overflow: hidden; background: var(--surface-3); transition: transform .1s ease; } | |
| .tw-card:hover .tw-thumb { transform: translate(-.4rem, -.4rem); } | |
| .tw-card:hover .tw-thumb-wrap::before { opacity: 1; } | |
| .tw-thumb .play-glyph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; color: rgba(255,255,255,.5); text-shadow: 0 2px 8px rgba(0,0,0,.5); } | |
| .tw-live-pill { position: absolute; top: .5rem; left: .5rem; background: var(--red); color: #fff; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; padding: .12rem .4rem; border-radius: .25rem; z-index: 2; } | |
| .tw-vod-pill { position: absolute; top: .5rem; left: .5rem; background: rgba(0,0,0,.75); color: #fff; font-size: .68rem; font-weight: 700; text-transform: uppercase; padding: .12rem .4rem; border-radius: .25rem; z-index: 2; } | |
| .tw-viewers { position: absolute; bottom: .5rem; left: .5rem; background: rgba(0,0,0,.75); color: #fff; font-size: .72rem; font-weight: 500; padding: .1rem .4rem; border-radius: .25rem; display: flex; align-items: center; gap: .3rem; z-index: 2; } | |
| .tw-dur { position: absolute; bottom: .5rem; right: .5rem; background: rgba(0,0,0,.75); color: #fff; font-size: .72rem; padding: .1rem .4rem; border-radius: .25rem; z-index: 2; } | |
| .tw-card-body { display: flex; gap: .6rem; } | |
| .tw-card-av { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 700; color: #fff; flex-shrink: 0; } | |
| .tw-card-info { min-width: 0; flex: 1; } | |
| .tw-card-title { display: block; font-weight: 700; font-size: .92rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } | |
| .tw-card-title:hover { color: var(--purple-2); } | |
| .tw-card-chan { display: block; font-size: .84rem; color: var(--text-alt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } | |
| .tw-card-chan:hover { color: var(--purple-2); } | |
| .tw-card-cat { display: block; font-size: .84rem; color: var(--text-alt); margin-top: .05rem; } | |
| .tw-card-cat:hover { color: var(--purple-2); } | |
| .tw-pills { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .45rem; } | |
| .tw-pill { background: var(--surface-3); color: var(--text-alt); font-size: .72rem; font-weight: 600; padding: .18rem .55rem; border-radius: 1rem; } | |
| .tw-pill:hover { background: #3a3446; color: var(--purple-2); } | |
| /* -- Featured hero (front page) --------------------------------------------- */ | |
| .tw-hero { display: flex; gap: 0; background: #000; border-radius: .5rem; overflow: hidden; margin-bottom: 1.6rem; border: 1px solid var(--border); } | |
| .tw-hero-player { flex: 1; min-width: 0; position: relative; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; } | |
| .tw-hero-player .live-tag { position: absolute; top: 1rem; left: 1rem; display: inline-flex; align-items: center; gap: .4rem; background: var(--red); color: #fff; font-size: .74rem; font-weight: 700; text-transform: uppercase; padding: .25rem .55rem; border-radius: .25rem; } | |
| .tw-hero-player .live-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: blink 1.4s infinite; } | |
| @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.35} } | |
| .tw-hero-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.2rem 1.3rem; background: linear-gradient(to top, rgba(0,0,0,.85), transparent); } | |
| .tw-hero-overlay .h-title { font-size: 1.2rem; font-weight: 800; margin-bottom: .5rem; } | |
| .tw-hero-overlay .h-row { display: flex; align-items: center; gap: .6rem; } | |
| .tw-hero-overlay .h-chan { color: var(--purple-2); font-weight: 700; } | |
| .tw-hero-overlay .h-view { color: #fff; font-size: .82rem; display: inline-flex; align-items: center; gap: .3rem; } | |
| .tw-hero-chat { width: 340px; flex-shrink: 0; background: var(--surface); border-left: 1px solid var(--border); display: flex; flex-direction: column; } | |
| /* -- Chat panel (shared: hero + stream page) -------------------------------- */ | |
| .tw-chat { display: flex; flex-direction: column; background: var(--surface); } | |
| .tw-chat-head { padding: .7rem 1rem; border-bottom: 1px solid var(--border); font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-alt); text-align: center; position: relative; } | |
| .tw-chat-head .live-badge { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); background: var(--red); color: #fff; font-size: .6rem; padding: .1rem .35rem; border-radius: .2rem; letter-spacing: 0; } | |
| .tw-chat-msgs { flex: 1; overflow-y: auto; padding: .5rem .8rem; } | |
| .tw-msg { padding: .28rem 0; font-size: .86rem; line-height: 1.45; word-wrap: break-word; } | |
| .tw-msg .ts { color: var(--text-dim); font-size: .7rem; margin-right: .35rem; } | |
| .tw-msg .badge { font-size: .58rem; padding: .06rem .28rem; border-radius: .2rem; font-weight: 700; text-transform: uppercase; margin-right: .25rem; vertical-align: middle; } | |
| .tw-msg .badge.broadcaster { background: var(--red); color: #fff; } | |
| .tw-msg .badge.subscriber { background: var(--purple); color: #fff; } | |
| .tw-msg .badge.moderator, .tw-msg .badge.mod { background: #00ad03; color: #fff; } | |
| .tw-msg .badge.cheer { background: linear-gradient(90deg,#9147ff,#b47aff); color: #fff; } | |
| .tw-msg .u { font-weight: 700; } | |
| .tw-msg .t { color: var(--text); } | |
| .tw-msg.cheer { background: linear-gradient(90deg, rgba(145,71,255,.28), rgba(145,71,255,.05)); border-left: 3px solid var(--purple); border-radius: .2rem; padding-left: .4rem; } | |
| .tw-chat-input { padding: .8rem; border-top: 1px solid var(--border); } | |
| .tw-chat-input .box { display: flex; gap: .4rem; } | |
| .tw-chat-input input { flex: 1; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); padding: .55rem .7rem; border-radius: .28rem; font-size: .86rem; outline: none; } | |
| .tw-chat-input input:focus { border-color: var(--purple); } | |
| .tw-chat-input .bottom { display: flex; align-items: center; justify-content: space-between; margin-top: .5rem; } | |
| .tw-chat-input .hint { font-size: .78rem; color: var(--text-dim); } | |
| .tw-chat-input .hint a { color: var(--purple-2); } | |
| .tw-cheer-row { display: flex; gap: .4rem; align-items: center; } | |
| .tw-cheer-row select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); padding: .35rem .4rem; border-radius: .28rem; font-size: .76rem; outline: none; } | |
| /* -- Stream page ------------------------------------------------------------ */ | |
| .tw-stream-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } | |
| .tw-player { background: #000; position: relative; aspect-ratio: 16 / 9; max-height: 72vh; } | |
| .tw-player .poster { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; } | |
| .tw-player .poster .play-glyph { font-size: 4rem; color: var(--purple); } | |
| .tw-player.playing .play-glyph { display: none; } | |
| .tw-player .status-badge { position: absolute; top: 1rem; left: 1rem; padding: .25rem .6rem; border-radius: .25rem; font-size: .74rem; font-weight: 700; text-transform: uppercase; z-index: 3; } | |
| .tw-player .status-badge.live { background: var(--red); color: #fff; } | |
| .tw-player .status-badge.completed { background: rgba(0,0,0,.7); color: var(--text-alt); } | |
| .tw-player .uptime-badge { position: absolute; top: 1rem; right: 1rem; z-index: 3; display: inline-flex; align-items: center; gap: .35rem; background: rgba(0,0,0,.75); color: #fff; font-size: .78rem; font-weight: 600; padding: .22rem .55rem; border-radius: .25rem; font-variant-numeric: tabular-nums; } | |
| .tw-player .uptime-badge .tw-dot { animation: blink 1.4s infinite; } | |
| .tw-under { padding: 1rem 1.3rem 2rem; } | |
| .tw-seek { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; } | |
| .tw-seek .t { font-size: .78rem; color: var(--text-alt); font-variant-numeric: tabular-nums; white-space: nowrap; } | |
| .tw-seek input[type="range"] { flex: 1; accent-color: var(--purple); cursor: pointer; } | |
| .tw-jump { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.2rem; } | |
| .tw-jump label { font-size: .8rem; color: var(--text-alt); } | |
| .tw-jump input { width: 90px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); padding: .35rem .5rem; border-radius: .28rem; font-size: .82rem; outline: none; } | |
| .tw-info-bar { display: flex; align-items: flex-start; gap: .8rem; } | |
| .tw-info-av { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 700; color: #fff; flex-shrink: 0; } | |
| .tw-info-main { flex: 1; min-width: 0; } | |
| .tw-info-chan { font-size: 1.05rem; font-weight: 800; } | |
| .tw-info-chan a { color: var(--text); } | |
| .tw-info-chan a:hover { color: var(--purple-2); } | |
| .tw-info-title { font-size: .95rem; color: var(--text); margin-top: .2rem; } | |
| .tw-info-cat { font-size: .86rem; color: var(--purple-2); margin-top: .2rem; } | |
| .tw-info-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; } | |
| .tw-stat-row { display: flex; gap: 1.5rem; margin: 1.1rem 0; } | |
| .tw-stat .v { font-size: 1.1rem; font-weight: 800; } | |
| .tw-stat .l { font-size: .72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .03em; } | |
| .tw-about { background: var(--surface); border-radius: .5rem; padding: 1.1rem 1.3rem; margin-top: 1.2rem; } | |
| .tw-about h3 { font-size: .95rem; font-weight: 800; margin-bottom: .5rem; } | |
| .tw-about p { color: var(--text-alt); font-size: .88rem; line-height: 1.5; } | |
| /* -- Ad strip --------------------------------------------------------------- */ | |
| .tw-ad { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: linear-gradient(120deg,#1f1147,#2a1a5e); border: 1px solid #3a2a6e; border-radius: .5rem; padding: .85rem 1.2rem; margin-bottom: 1.4rem; } | |
| .tw-ad:hover { border-color: var(--purple); } | |
| .tw-ad .l { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; } | |
| .tw-ad .brand { font-size: 1rem; font-weight: 800; color: #fff; } | |
| .tw-ad .tag { font-size: .84rem; color: #c9b8ff; } | |
| .tw-ad .label { font-size: .58rem; text-transform: uppercase; letter-spacing: .12em; color: #7a7a90; margin-right: .3rem; } | |
| /* -- Login-required modal --------------------------------------------------- */ | |
| .tw-modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: none; align-items: center; justify-content: center; z-index: 1000; } | |
| .tw-modal-bg.show { display: flex; } | |
| .tw-modal { background: var(--surface); border: 1px solid var(--border); border-radius: .6rem; padding: 1.6rem 1.8rem; max-width: 340px; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,.5); } | |
| .tw-modal h3 { font-size: 1.1rem; margin-bottom: .5rem; } | |
| .tw-modal p { font-size: .88rem; color: var(--text-alt); margin-bottom: 1.2rem; line-height: 1.5; } | |
| .tw-modal .acts { display: flex; gap: .6rem; justify-content: center; } | |
| /* -- Auth pages (login / register) ------------------------------------------ */ | |
| .tw-auth-wrap { display: flex; align-items: center; justify-content: center; padding: 3rem 1rem; } | |
| .tw-auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: .7rem; padding: 2rem 2.2rem; width: 100%; max-width: 380px; } | |
| .tw-auth-card h2 { text-align: center; font-size: 1.4rem; font-weight: 800; margin-bottom: 1.4rem; } | |
| .tw-field { margin-bottom: 1rem; } | |
| .tw-field label { display: block; font-size: .78rem; font-weight: 700; color: var(--text-alt); margin-bottom: .3rem; text-transform: uppercase; letter-spacing: .03em; } | |
| .tw-field input { width: 100%; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); padding: .6rem .7rem; border-radius: .28rem; font-size: .9rem; outline: none; } | |
| .tw-field input:focus { border-color: var(--purple); } | |
| .tw-auth-card .tw-btn { width: 100%; justify-content: center; padding: .65rem; font-size: .95rem; margin-top: .5rem; } | |
| .tw-auth-alt { text-align: center; font-size: .84rem; color: var(--text-alt); margin-top: 1.1rem; } | |
| .tw-auth-alt a { color: var(--purple-2); font-weight: 600; } | |
| .tw-error { background: rgba(235,4,0,.12); border: 1px solid rgba(235,4,0,.4); color: #ff8a85; font-size: .82rem; padding: .6rem .8rem; border-radius: .3rem; margin-bottom: 1rem; } | |
| .tw-empty { text-align: center; padding: 4rem 1rem; color: var(--text-dim); } | |
| @media (max-width: 1100px) { | |
| .tw-sidebar { display: none; } | |
| } | |
| @media (max-width: 860px) { | |
| .tw-hero { flex-direction: column; } | |
| .tw-hero-chat { width: 100%; height: 300px; border-left: none; border-top: 1px solid var(--border); } | |
| .tw-search { display: none; } | |
| } | |