/* TodayTV streamer plugin pages */
.tt-streamer:not(a) { display: grid; gap: 16px; padding-block: 24px; }
.tt-streamer h1 { font-size: 24px; font-weight: 700; margin: 0; }
.tt-streamer p { margin: 0; word-break: keep-all; }
.tt-streamer .tt-muted { color: var(--fg-300); font-size: 14px; }
.tt-streamer .tt-error { color: #c5221f; font-size: 14px; }
.tt-streamer .tt-card { display: grid; gap: 10px; justify-items: start; padding: 18px 20px; border: 1px solid var(--bg-secondary-450); border-radius: 12px; background: var(--bg); }
.tt-streamer .tt-form { display: grid; gap: 10px; max-width: 640px; }
.tt-streamer .tt-form label { font-weight: 600; }
.tt-streamer .tt-form button { justify-self: start; }
.tt-streamer .tt-pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.tt-streamer .tt-pending { color: #a95f00; background: color-mix(in srgb, #d08700 16%, transparent); }
.tt-streamer .tt-approved { color: #0a8a43; background: color-mix(in srgb, #00a63e 14%, transparent); }
.tt-streamer .tt-rejected { color: #c5221f; background: color-mix(in srgb, #e7000b 12%, transparent); }
.tt-streamer .tt-table-box { overflow-x: auto; border: 1px solid var(--bg-secondary-450); border-radius: 12px; }
.tt-streamer .tt-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14px; }
.tt-streamer .tt-table th, .tt-streamer .tt-table td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--bg-secondary-450); }
.tt-streamer .tt-table thead th { background: var(--bg-secondary-350); font-size: 12px; color: var(--fg-300); font-weight: 500; }
.tt-streamer .tt-table tbody tr:last-child td { border-bottom: 0; }
.tt-streamer .tt-message { max-width: 360px; white-space: pre-wrap; }
.tt-streamer .tt-actions { display: flex; gap: 6px; flex-wrap: wrap; }
/* 초대 링크 (/p/join) */
.tt-join { display: grid; place-items: center; padding-block: 32px 56px; }
.tt-join-card {
width: min(460px, 100%); display: grid; justify-items: center; gap: 10px; padding: 32px 28px 26px;
border: 1px solid var(--bg-secondary-450); border-radius: 22px; background: var(--bg); text-align: center;
box-shadow: 0 20px 50px rgb(20 40 120 / 10%);
}
.tt-join-avatar { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--primary); }
.tt-join-avatar-empty { display: grid; place-items: center; background: var(--primary); color: #fff; font-size: 34px; font-weight: 800; }
.tt-join-kicker { margin: 8px 0 0; color: var(--primary); font-size: 13px; font-weight: 800; letter-spacing: .04em; }
.tt-join-card h1 { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.4; }
.tt-join-card h1 b { font-weight: 800; }
.tt-join-card p { margin: 0; }
.tt-join-live { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: color-mix(in srgb, #ef4444 10%, var(--bg)); color: #dc2626; font-weight: 700; font-size: 14px; text-decoration: none; }
.tt-join-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; animation: tt-join-pulse 1.4s infinite; }
@keyframes tt-join-pulse { 50% { opacity: .3; } }
.tt-join-next { font-size: 14px; color: var(--fg-300); }
.tt-join-benefits { display: grid; gap: 8px; width: 100%; margin: 8px 0 6px; padding: 14px 16px; border-radius: 14px; background: var(--bg-secondary-350); list-style: none; text-align: left; font-size: 14px; }
.tt-join-benefits li::before { content: "✓"; margin-right: 8px; color: var(--primary); font-weight: 800; }
.tt-join-main { width: 100%; height: 48px; display: inline-grid !important; place-items: center; border-radius: 12px !important; font-size: 16px !important; font-weight: 800 !important; }
.tt-join-card .tt-link { color: var(--fg-300); font-size: 14px; font-weight: 600; }
.tt-join-fine { font-size: 12px !important; }
@media (prefers-reduced-motion: reduce) { .tt-join-dot { animation: none; } }
/* 회원가입 화면 위 초대 띠 */
.tt-invite-banner { margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; background: color-mix(in srgb, var(--primary) 9%, var(--bg)); color: var(--fg); font-size: 14px; text-align: center; }
.tt-invite-banner b { color: var(--primary); }
/* 추천 가입 관리 */
.tt-referral-admin .tt-subhead { margin: 12px 0 0; font-size: 17px; }
.tt-referral-admin .tt-subhead .tt-muted { font-size: 13px; font-weight: 500; }
.tt-referral-admin .tt-table { min-width: 640px; }
.tt-referral-admin .tt-col-num { text-align: right; white-space: nowrap; }
.tt-referral-admin .tt-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--bg-secondary-400); color: var(--fg-300); font-size: 11px; font-weight: 700; }
.tt-referral-admin .tt-badge-ok { background: color-mix(in srgb, #16a34a 14%, transparent); color: #15803d; }
/* TodayTV community boards */
.tt-board { display: grid; gap: 16px; padding-block: 24px; }
.tt-board h1 { font-size: 24px; font-weight: 700; margin: 0; }
.tt-board h2 { font-size: 17px; font-weight: 700; margin: 0; }
.tt-board p { margin: 0; word-break: keep-all; }
.tt-board .tt-muted { color: var(--fg-300); font-size: 13px; }
.tt-board .tt-error { color: #c5221f; font-size: 14px; }
.tt-board .tt-spacer { flex: 1; }
.tt-board .tt-card { padding: 18px 20px; border: 1px solid var(--bg-secondary-450); border-radius: 12px; }
.tt-board .tt-link { color: var(--fg-300); font-size: 13px; }
.tt-board .tt-link:hover { color: var(--fg); text-decoration: underline; }
.tt-board .tt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tt-board .tt-crumb a { color: var(--primary); font-weight: 600; font-size: 14px; text-decoration: none; }
.tt-board .tt-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tt-board .tt-tabs a { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--bg-secondary-450); color: var(--fg); text-decoration: none; font-size: 14px; }
.tt-board .tt-tabs a.active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 600; }
.tt-board .tt-table-box { overflow-x: auto; border-top: 2px solid var(--fg); }
.tt-board .tt-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tt-board .tt-table th, .tt-board .tt-table td { padding: 11px 10px; border-bottom: 1px solid var(--bg-secondary-450); text-align: left; vertical-align: top; }
.tt-board .tt-table thead th { font-size: 12px; color: var(--fg-300); font-weight: 500; white-space: nowrap; }
.tt-board .tt-col-no, .tt-board .tt-col-num { width: 64px; text-align: center !important; color: var(--fg-300); font-variant-numeric: tabular-nums; }
.tt-board .tt-col-cat { width: 64px; color: var(--fg-300); white-space: nowrap; }
.tt-board .tt-col-author { width: 130px; white-space: nowrap; }
.tt-board .tt-col-date { width: 80px; color: var(--fg-300); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tt-board .tt-col-title a { color: var(--fg); text-decoration: none; }
.tt-board .tt-col-title a:hover { text-decoration: underline; }
.tt-board .tt-row-meta { display: none; color: var(--fg-300); font-size: 12px; margin-top: 4px; }
.tt-board .tt-pinned { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.tt-board .tt-pinned .tt-col-title a { font-weight: 600; }
.tt-board .tt-count { color: var(--primary); font-size: 12px; font-weight: 600; margin-left: 4px; }
.tt-board .tt-new { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 4px; border-radius: 4px; background: #e7000b; color: #fff; font-size: 10px; font-weight: 700; vertical-align: 1px; }
.tt-board .tt-empty { text-align: center !important; color: var(--fg-300); padding: 48px 0 !important; }
.tt-board .tt-pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--bg-secondary-400); color: var(--fg-400); white-space: nowrap; }
.tt-board .tt-pill-notice { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); }
.tt-board .tt-pill-muted { background: var(--bg-secondary-400); color: var(--fg-300); }
.tt-board .tt-list-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tt-board .tt-pages { display: flex; gap: 4px; flex-wrap: wrap; }
.tt-board .tt-pages a { min-width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: 8px; color: var(--fg); text-decoration: none; font-variant-numeric: tabular-nums; }
.tt-board .tt-pages a.active { background: var(--fg); color: var(--bg); font-weight: 700; }
.tt-board .tt-search { display: flex; gap: 6px; }
.tt-board .tt-search select { width: auto; }
.tt-board .tt-search input { width: 200px; }
.tt-board .tt-post { display: grid; gap: 18px; border-top: 2px solid var(--fg); padding-top: 18px; }
.tt-board .tt-post-head { display: grid; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--bg-secondary-450); }
.tt-board .tt-post-head h1 { font-size: 22px; word-break: keep-all; }
.tt-board .tt-post-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--fg-300); font-size: 13px; }
.tt-board .tt-post-body { font-size: 15px; line-height: 1.75; min-height: 120px; overflow-wrap: anywhere; }
.tt-board .tt-post-actions { display: flex; justify-content: center; }
.tt-board .tt-post-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--bg-secondary-450); }
.tt-board .tt-comments { display: grid; gap: 12px; }
.tt-board .tt-comment-list { list-style: none; margin: 0; padding: 0; display: grid; }
.tt-board .tt-comment { padding: 12px 0; border-bottom: 1px solid var(--bg-secondary-450); display: grid; gap: 4px; }
.tt-board .tt-comment-head { display: flex; gap: 8px; align-items: baseline; }
.tt-board .tt-comment-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.tt-board .tt-comment-form { display: grid; gap: 8px; }
.tt-board .tt-comment-form button { justify-self: end; }
.tt-board .tt-write { display: grid; gap: 8px; max-width: 820px; }
.tt-board .tt-write label { font-weight: 600; margin-top: 6px; }
.tt-board .tt-write select { width: auto; }
.tt-board .tt-write-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.tt-board .tt-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tt-board .tt-actions select { width: auto; }
.tt-board .tt-report-target a { color: var(--fg); }
@media screen and (max-width: 700px) {
.tt-board .tt-col-cat, .tt-board .tt-col-author, .tt-board .tt-col-date, .tt-board .tt-col-num { display: none; }
.tt-board .tt-row-meta { display: block; }
.tt-board .tt-search { width: 100%; }
.tt-board .tt-search input { flex: 1; width: auto; }
}
/* Category chips: same colors as the home page community box */
.tt-board .tt-cat { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--fg-300); background: var(--bg-secondary-400); }
.tt-board .tt-cat-review { color: #0d9488; background: color-mix(in srgb, #0d9488 12%, transparent); }
.tt-board .tt-cat-notice, .tt-board .tt-cat-event { color: #1447e6; background: color-mix(in srgb, #1447e6 12%, transparent); }
/* TodayTV policy pages */
.tt-policy { max-width: 860px; display: grid; gap: 18px; padding-block: 24px; }
.tt-policy-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.tt-policy-nav a { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--bg-secondary-450); color: var(--fg); text-decoration: none; font-size: 14px; }
.tt-policy-nav a.active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 600; }
.tt-policy-draft { margin: 0; padding: 10px 14px; border-radius: 8px; font-size: 14px; background: color-mix(in srgb, #d08700 14%, transparent); color: var(--fg); }
.tt-policy-body { line-height: 1.8; word-break: keep-all; overflow-wrap: anywhere; }
.tt-policy-body h1 { font-size: 26px; font-weight: 700; margin: 0 0 16px; }
.tt-policy-body h2 { font-size: 18px; font-weight: 700; margin: 28px 0 8px; }
.tt-policy-body h3 { font-size: 16px; font-weight: 700; margin: 20px 0 6px; }
.tt-policy-body ul, .tt-policy-body ol { padding-left: 1.3em; }
.tt-policy-body table { border-collapse: collapse; margin: 8px 0; }
.tt-policy-body th, .tt-policy-body td { border: 1px solid var(--bg-secondary-450); padding: 6px 10px; text-align: left; }
.tt-policy-body p { margin: 0 0 12px; }
.tt-policy-table { overflow-x: auto; }
/* Site footer (every page) */
.tt-footer { margin-top: 56px; padding-top: 22px; padding-bottom: 36px; border-top: 1px solid var(--bg-secondary-450); display: grid; gap: 10px; color: var(--fg-200); font-size: 12.5px; line-height: 1.7; }
.tt-footer-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.tt-footer-links a { color: var(--fg-300); text-decoration: none; font-weight: 600; }
.tt-footer-links a:hover { color: var(--fg); }
.tt-footer-links a.is-strong { color: var(--fg); font-weight: 800; }
.tt-footer-info { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; }
.tt-footer-info b { font-weight: 600; color: var(--fg-300); }
.tt-footer-copy { margin: 0; color: var(--fg-100); }
.tt-footer-source { margin: 0; color: var(--fg-100); font-size: 11.5px; }
.tt-footer-source a { color: inherit; text-decoration: underline; }
/* TodayTV shorts and clips */
.tt-shorts { max-width: 1280px; display: grid; gap: 16px; padding-block: 24px; }
.tt-shorts h1 { font-size: 24px; font-weight: 700; margin: 0; }
.tt-shorts .tt-head { display: flex; align-items: baseline; gap: 12px; }
.tt-shorts .tt-head-channel { color: var(--fg-300); font-weight: 500; font-size: 18px; }
.tt-shorts .tt-muted, .tt-feed .tt-muted { color: var(--fg-300); font-size: 13px; }
.tt-shorts .tt-error, .tt-clip-panel .tt-error { color: #c5221f; font-size: 14px; margin: 0; }
.tt-shorts .tt-link { color: var(--fg-300); font-size: 13px; }
.tt-shorts .tt-tabs { display: flex; gap: 6px; }
.tt-shorts .tt-tabs a { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--bg-secondary-450); color: var(--fg); text-decoration: none; font-size: 14px; }
.tt-shorts .tt-tabs a.active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 600; }
.tt-shorts .tt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px 16px; }
.tt-shorts .tt-grid-vertical { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.tt-shorts .tt-card-video { display: grid; gap: 8px; align-content: start; min-width: 0; }
.tt-shorts .tt-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--bg-secondary-400); }
.tt-shorts .tt-thumb-vertical { aspect-ratio: 9 / 16; }
.tt-shorts .tt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s ease; }
.tt-shorts .tt-thumb:hover img { transform: scale(1.03); }
.tt-shorts .tt-badge { position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: 6px; background: #4f39f6; color: #fff; font-size: 11px; font-weight: 700; }
.tt-shorts .tt-duration { position: absolute; right: 8px; bottom: 8px; padding: 1px 6px; border-radius: 4px; background: rgb(0 0 0 / 70%); color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; }
.tt-shorts .tt-card-body { display: grid; gap: 2px; min-width: 0; }
.tt-shorts .tt-card-title { color: var(--fg); font-weight: 600; text-decoration: none; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: keep-all; }
.tt-shorts .tt-card-channel { color: var(--fg-300); font-size: 13px; text-decoration: none; }
.tt-shorts .tt-card-tools { display: flex; gap: 10px; }
.tt-shorts .tt-empty-box { padding: 48px 20px; text-align: center; color: var(--fg-300); border: 1px dashed var(--bg-secondary-450); border-radius: 12px; }
.tt-shorts .tt-pages { display: flex; gap: 14px; align-items: center; justify-content: center; }
.tt-shorts .tt-pages a { color: var(--primary); font-weight: 600; text-decoration: none; }
/* Swipe feed */
.tt-feed { position: relative; height: calc(100vh - var(--header-height, 72px)); }
/* The feed fills the screen: no site footer or page padding under it */
body:has(.tt-feed) .tt-footer { display: none; }
body:has(.tt-feed) .peertube-container { padding-bottom: 0; }
.tt-feed-scroll { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; outline: none; scrollbar-width: none; }
.tt-feed-scroll::-webkit-scrollbar { display: none; }
.tt-feed-item { height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 12px; box-sizing: border-box; }
.tt-feed-frame { position: relative; height: 100%; aspect-ratio: 9 / 16; max-width: 100%; border-radius: 16px; overflow: hidden; background: #000; }
.tt-feed-frame iframe, .tt-feed-poster { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.tt-feed-info { align-self: flex-end; display: grid; gap: 4px; max-width: 220px; padding-bottom: 24px; font-size: 13px; color: var(--fg-300); }
.tt-feed-title { color: var(--fg); font-weight: 700; font-size: 15px; text-decoration: none; word-break: keep-all; }
.tt-feed-channel { color: var(--fg); text-decoration: none; }
.tt-feed-close { position: absolute; right: 16px; top: 12px; z-index: 2; width: 40px; height: 40px; transition: background-color .15s; display: grid; place-items: center; border-radius: 50%; background: var(--bg-secondary-400); color: var(--fg); text-decoration: none; }
.tt-feed .tt-empty-box { margin: 48px auto; max-width: 420px; text-align: center; color: var(--fg-300); }
@media screen and (max-width: 700px) {
.tt-feed-item { position: relative; padding: 0; }
.tt-feed-frame { border-radius: 0; height: 100%; width: 100%; aspect-ratio: auto; }
.tt-feed-info { position: absolute; left: 12px; bottom: 16px; z-index: 1; color: #fff; text-shadow: 0 1px 3px rgb(0 0 0 / 80%); padding: 0; pointer-events: auto; }
.tt-feed-title, .tt-feed-channel { color: #fff; }
}
/* Clip panel on the watch page */
.tt-clip-button { display: inline-flex; align-items: center; }
.tt-clip-button .tt-icon { margin-right: 6px; color: var(--secondary-icon-color, currentColor); }
.tt-clip-button:hover .tt-icon { color: currentColor; }
.tt-icon { flex: none; display: inline-block; vertical-align: middle; }
.tt-clip-panel { display: grid; gap: 8px; max-width: 560px; margin: 12px 0 0 auto; padding: 16px; border: 1px solid var(--bg-secondary-450); border-radius: 12px; background: var(--bg); }
.tt-clip-panel p { margin: 0; }
.tt-clip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tt-clip-row input { width: 90px; font-variant-numeric: tabular-nums; }
.tt-clip-row select { width: auto; }
.tt-clip-actions { display: flex; gap: 8px; justify-content: flex-end; }
.tt-feed-like { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 8px 14px; border: 1px solid var(--bg-secondary-450); border-radius: 999px; background: var(--bg); color: var(--fg); font-size: 14px; cursor: pointer; }
.tt-feed-like span { color: var(--fg-300); }
.tt-feed-like[aria-pressed="true"] { border-color: #e60076; background: color-mix(in srgb, #e60076 12%, transparent); }
.tt-feed-like[aria-pressed="true"] span { color: #e60076; }
.tt-feed-like .tt-icon { transition: transform .15s; }
.tt-feed-like:hover .tt-icon { transform: scale(1.1); }
.tt-feed-like[aria-pressed="true"] .tt-icon { color: #e60076; fill: #e60076; }
@media screen and (max-width: 700px) {
.tt-feed-like { background: rgb(0 0 0 / 45%); border-color: transparent; color: #fff; }
}
/* TodayTV station features */
.tt-station { display: grid; gap: 16px; padding-block: 24px; }
.tt-station h1 { font-size: 24px; font-weight: 700; margin: 0; }
.tt-station p { margin: 0; }
.tt-station .tt-muted { color: var(--fg-300); font-size: 13px; }
.tt-station .tt-error { color: #c5221f; font-size: 14px; }
.tt-station .tt-spacer { flex: 1; }
.tt-station .tt-link { color: var(--fg-300); font-size: 13px; }
.tt-station .tt-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.tt-station .tt-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tt-station .tt-tabs-sub a { font-size: 13px; padding: 4px 12px; }
.tt-station .tt-empty-box { padding: 40px 20px; text-align: center; color: var(--fg-300); border: 1px dashed var(--bg-secondary-450); border-radius: 12px; }
.tt-station .tt-pill { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--bg-secondary-400); color: var(--fg-400); vertical-align: 1px; }
.tt-station .tt-pill-new { background: color-mix(in srgb, #00a63e 14%, transparent); color: #00a63e; }
/* Same LIVE badge as the home page: red, small dot */
.tt-station .tt-pill-live { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 6px; background: #ef4444; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.02em; }
.tt-station .tt-pill-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.tt-station .tt-pill-muted { background: var(--bg-secondary-400); color: var(--fg-200); }
.tt-station .tt-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; display: inline-grid; place-items: center; }
.tt-station .tt-avatar-empty { background: var(--primary); color: var(--on-primary); font-weight: 700; }
.tt-station .tt-avatar-wrap { position: relative; display: inline-flex; border-radius: 50%; padding: 2px; }
.tt-station .tt-avatar-wrap.is-live { box-shadow: 0 0 0 2px #e7000b; }
.tt-station .tt-table-box { overflow-x: auto; border-top: 2px solid var(--fg); }
.tt-station .tt-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tt-station .tt-table th, .tt-station .tt-table td { padding: 12px 10px; border-bottom: 1px solid var(--bg-secondary-450); text-align: left; vertical-align: middle; }
.tt-station .tt-table thead th { font-size: 12px; color: var(--fg-300); font-weight: 500; white-space: nowrap; }
.tt-station .tt-col-rank { width: 64px; text-align: center !important; }
.tt-station .tt-col-num { width: 110px; text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tt-station .tt-col-state { width: 96px; text-align: center !important; }
.tt-station .tt-streamer { display: flex; align-items: center; gap: 12px; color: var(--fg); text-decoration: none; }
.tt-station a.tt-streamer { padding: 0; }
/* Name and badge on one line, numbers below */
.tt-station .tt-streamer > span:last-child { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; }
.tt-station .tt-streamer .tt-detail { flex-basis: 100%; }
.tt-station .tt-rank { color: var(--fg-300); font-weight: 600; font-variant-numeric: tabular-nums; }
.tt-station .tt-medal { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 13px; }
.tt-station .tt-medal-1 { background: #d4a106; }
.tt-station .tt-medal-2 { background: #8f99a8; }
.tt-station .tt-medal-3 { background: #b06a33; }
.tt-station-head { display: flex; align-items: center; gap: 14px; }
.tt-station-head .tt-avatar { width: 64px; height: 64px; font-size: 24px; }
.tt-station .tt-news-form { display: grid; gap: 8px; }
.tt-station .tt-news-form button { justify-self: end; }
.tt-station .tt-news-list { display: grid; gap: 12px; }
.tt-station .tt-news { padding: 16px 18px; border: 1px solid var(--bg-secondary-450); border-radius: 12px; display: grid; gap: 8px; }
.tt-station .tt-news-head { display: flex; gap: 8px; align-items: baseline; }
.tt-station .tt-news-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; }
.tt-station .tt-pages { display: flex; gap: 14px; justify-content: center; align-items: center; }
.tt-station .tt-pages a { color: var(--primary); font-weight: 600; text-decoration: none; }
.tt-station .tt-fan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tt-station .tt-fan { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--bg-secondary-450); border-radius: 12px; }
.tt-station .tt-fan.is-me { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, transparent); }
.tt-station .tt-fan-rank { width: 32px; text-align: center; font-weight: 700; color: var(--fg-300); font-variant-numeric: tabular-nums; }
.tt-station .tt-fan-name { flex: 1; display: grid; gap: 2px; min-width: 0; }
.tt-station .tt-fan-score { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media screen and (max-width: 700px) {
.tt-station .tt-detail, .tt-station .tt-col-state { display: none; }
.tt-station .tt-ranking-table th:nth-child(4), .tt-station .tt-ranking-table td:nth-child(4) { display: none; }
.tt-station .tt-col-rank { width: 40px; }
.tt-station .tt-col-num { width: auto; }
.tt-station .tt-table th, .tt-station .tt-table td { padding-inline: 8px; }
}
.tt-station .tt-streamer .tt-pill { justify-self: start; }
/* 편성표 */
.tt-sched-day { display: grid; gap: 8px; }
.tt-sched-day h2 { margin: 6px 0 0; font-size: 16px; }
.tt-sched-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tt-sched-item {
display: grid; grid-template-columns: 92px minmax(140px, 200px) minmax(0, 1fr) auto; gap: 14px; align-items: center;
padding: 12px 16px; border: 1px solid var(--bg-secondary-450); border-radius: 14px; background: var(--bg);
}
.tt-sched-time { display: grid; font-variant-numeric: tabular-nums; }
.tt-sched-time b { font-size: 17px; }
.tt-sched-time .tt-muted { font-size: 12px; }
.tt-sched-channel { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--fg); font-weight: 700; text-decoration: none; }
.tt-sched-channel span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-sched-channel:hover { color: var(--primary); }
.tt-sched-title { display: grid; gap: 2px; min-width: 0; }
.tt-sched-title .tt-muted { font-size: 13px; }
.tt-sched-channel .tt-avatar { width: 32px; height: 32px; font-size: 13px; }
@media screen and (max-width: 700px) {
.tt-sched-item { grid-template-columns: 64px minmax(0, 1fr); gap: 6px 12px; }
.tt-sched-channel, .tt-sched-title, .tt-sched-state { grid-column: 2; }
.tt-sched-time { grid-row: 1 / span 3; align-self: start; }
}
/* 스튜디오 */
.tt-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.tt-kpi { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--bg-secondary-450); border-radius: 14px; background: var(--bg); }
.tt-kpi .tt-muted { font-size: 13px; }
.tt-kpi b { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tt-trend { font-size: 12px; color: var(--fg-200); }
.tt-trend.up { color: #16a34a; }
.tt-trend.down { color: #dc2626; }
.tt-bars { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; align-items: end; height: 160px; margin-top: 12px; }
.tt-bar { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 6px; }
.tt-bar span { align-self: end; display: block; width: 100%; border-radius: 6px 6px 2px 2px; background: color-mix(in srgb, var(--primary) 75%, transparent); }
.tt-bar:hover span { background: var(--primary); }
.tt-bar em { font-style: normal; font-size: 11px; color: var(--fg-200); text-align: center; white-space: nowrap; }
/* Phones: thinner gaps and every other date, so 14 bars fit without widening the page */
@media screen and (max-width: 700px) {
.tt-bars { gap: 3px; }
.tt-bar em { font-size: 9px; overflow: hidden; }
.tt-bar:nth-child(even) em { visibility: hidden; }
}
.tt-studio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.tt-top-list { display: grid; gap: 8px; margin: 10px 0 0; padding-left: 18px; }
.tt-top-list li { display: grid; }
.tt-top-list a { color: var(--fg); font-weight: 600; text-decoration: none; }
.tt-top-list a:hover { color: var(--primary); }
.tt-top-list .tt-muted { font-size: 12px; }
.tt-live-banner { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: color-mix(in srgb, #ef4444 8%, var(--bg)); color: var(--fg); font-weight: 700; text-decoration: none; }
.tt-live-banner .tt-link { margin-left: auto; }
.tt-apply-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.tt-apply-hint a { margin-left: auto; }
.tt-sched-form { display: grid; gap: 12px; }
.tt-sched-form label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; }
.tt-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
/* 스튜디오 → 초대 링크 */
.tt-invite-box { display: grid; gap: 10px; }
.tt-invite-link { display: flex; gap: 8px; }
.tt-invite-link .form-control { flex: 1; min-width: 0; font-weight: 700; }
.tt-invite-box .tt-inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tt-invite-box .tt-inline-form .form-control { width: 180px; }
.tt-station .tt-small { font-size: 12px; }
.tt-station .tt-fan-name .tt-pill { justify-self: start; width: auto; }
/* 편성표 알림 받기 */
.tt-sched-state { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.tt-remind {
display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px;
border: 1px solid var(--bg-secondary-500); border-radius: 999px; background: var(--bg);
color: var(--fg-300); font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.tt-remind:hover { color: var(--fg); border-color: var(--fg-200); }
.tt-remind.on { color: var(--primary); border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }
.tt-remind:disabled { opacity: .6; cursor: default; }
.tt-sched-reminders { font-size: 12px; white-space: nowrap; }
@media screen and (max-width: 700px) {
.tt-sched-state { justify-content: flex-start; }
}
.tt-reminders { position: fixed; right: 16px; bottom: 16px; z-index: 2000; display: grid; gap: 10px; width: min(380px, calc(100vw - 32px)); }
.tt-reminder {
display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
padding: 12px 12px 12px 14px; border: 1px solid var(--bg-secondary-450); border-radius: 14px;
background: var(--bg); color: var(--fg); box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
animation: tt-reminder-in .3s ease-out both;
}
.tt-reminder .tt-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; display: inline-grid; place-items: center; font-weight: 800; }
.tt-reminder .tt-avatar-empty { background: var(--primary); color: var(--on-primary); }
.tt-reminder-text { display: grid; gap: 2px; font-size: 14px; line-height: 1.35; min-width: 0; }
.tt-reminder-text .tt-muted { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-reminder .peertube-button-link { padding: 6px 12px; font-size: 13px; white-space: nowrap; }
.tt-reminder-x { width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--fg-200); font-size: 20px; line-height: 1; cursor: pointer; }
.tt-reminder-x:hover { background: var(--bg-secondary-400); color: var(--fg); }
@keyframes tt-reminder-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tt-reminder { animation: none; } }
/* TodayTV home page. Colors come from the theme variables so light and dark both work. */
.tth {
--tth-line: var(--bg-secondary-450);
--tth-soft: var(--bg-secondary-350);
--tth-muted: var(--fg-200);
--tth-live: #e5133a;
max-width: 1240px;
padding: 24px var(--tt-page-x, 32px) 72px;
display: flex;
flex-direction: column;
gap: 48px;
color: var(--fg);
box-sizing: border-box;
}
.tth a { color: inherit; text-decoration: none; }
.tth [hidden] { display: none !important; }
/* Section heads */
.tth-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.tth-head h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; }
.tth-head-sub { color: var(--tth-muted); font-size: 14px; }
.tth-more { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--primary) !important; }
.tth-more:hover { text-decoration: underline !important; }
.tth-live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tth-live); box-shadow: 0 0 0 5px color-mix(in srgb, var(--tth-live) 18%, transparent); animation: tth-pulse 2s ease-in-out infinite; }
@keyframes tth-pulse { 50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--tth-live) 0%, transparent); } }
.tth-tabs { margin-left: auto; display: flex; gap: 6px; }
.tth-tabs button { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--tth-line); background: transparent; color: var(--fg); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color .15s, border-color .15s; }
.tth-tabs button:hover { border-color: var(--fg-200); }
.tth-tabs button[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
/* Hero */
.tth-hero { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; }
.tth-hero-main {
position: relative; min-height: 340px; border-radius: 22px; overflow: hidden; display: flex; align-items: center; gap: 28px;
padding: 32px 36px; box-sizing: border-box;
background: radial-gradient(110% 90% at 90% 0%, rgba(255,255,255,0.22), rgba(255,255,255,0) 55%), linear-gradient(135deg, #1447e6, #5b21b6 62%, #be185d);
color: #fff !important;
}
.tth-hero-copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.tth-hero-screen { position: relative; flex: 0 0 46%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: rgba(10,14,28,0.35); box-shadow: 0 24px 48px rgba(10,14,28,0.35), 0 0 0 1px rgba(255,255,255,0.18); }
.tth-hero-screen img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.tth-hero-main:hover .tth-hero-screen img { transform: scale(1.03); }
.tth-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,0.16); font-size: 13px; font-weight: 700; }
.tth-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff4d6d; box-shadow: 0 0 0 3px rgba(255,77,109,0.3); }
.tth-hero-title { font-size: 40px; line-height: 1.2; font-weight: 800; letter-spacing: -0.03em; word-break: keep-all; }
.tth-hero-text { font-size: 16px; opacity: 0.9; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tth-hero-actions { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.tth-hero-meta { font-size: 14px; opacity: 0.85; }
.tth-hero-avatar { flex: none; width: 168px; height: 168px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 6px rgba(255,255,255,0.25); margin-right: 24px; }
.tth-btn { height: 46px; padding: 0 22px; border-radius: 999px; display: inline-flex; align-items: center; font-weight: 700; font-size: 15px; transition: transform .15s; }
.tth-btn-white { background: #fff; color: #1447e6; }
.tth-hero-main:hover .tth-btn { transform: translateY(-1px); }
.tth-hero-side { display: flex; flex-direction: column; gap: 10px; }
.tth-side-item { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 16px; border: 1px solid var(--tth-line); background: var(--bg); transition: border-color .15s, transform .15s; flex: 1; }
.tth-side-item:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--tth-line)); background: var(--bg-secondary-350); }
.tth-side-icon { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center; color: var(--tth-tone); background: color-mix(in srgb, var(--tth-tone) 12%, transparent); }
.tth-side-notice { --tth-tone: #f97316; }
.tth-side-event { --tth-tone: #8b5cf6; }
.tth-side-apply { --tth-tone: var(--primary); }
.tth-side-arrow { margin-left: auto; flex: none; color: var(--tth-muted); opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; }
.tth-side-item:hover .tth-side-arrow { opacity: 1; transform: none; }
.tth-icon { display: block; flex: none; }
.tth-badge-dark { display: inline-flex; align-items: center; gap: 4px; }
.tth-side-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tth-side-text b { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tth-side-text span { font-size: 12px; color: var(--tth-muted); }
/* Grids and cards */
.tth-grid { display: grid; gap: 22px 18px; }
.tth-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tth-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.tth-video { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tth-thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--tth-soft); display: block; }
.tth-thumb img, .tth-short img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.tth-video:hover .tth-thumb img, .tth-short-card:hover img { transform: scale(1.04); }
.tth-badges { position: absolute; left: 10px; top: 10px; display: flex; gap: 6px; }
.tth-badge-live, .tth-badge-dark, .tth-badge-clip { padding: 3px 8px; border-radius: 6px; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.02em; line-height: 1.4; }
.tth-badge-live { background: var(--tth-live); display: inline-flex; align-items: center; gap: 5px; }
.tth-badge-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: tth-pulse 1.6s ease-in-out infinite; }
.tth-badge-sm::before { display: none; }
@keyframes tth-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .tth-badge-live::before { animation: none; } }
.tth-badge-dark { background: rgba(10,14,28,0.62); font-weight: 600; }
.tth-badge-clip { background: #4f46e5; }
.tth-badge-sm { font-size: 10px; padding: 1px 6px; margin-left: 8px; vertical-align: 2px; }
.tth-duration { position: absolute; right: 10px; bottom: 10px; padding: 2px 6px; border-radius: 5px; background: rgba(10,14,28,0.72); color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; }
.tth-video-meta { display: flex; gap: 10px; align-items: flex-start; }
.tth-video-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tth-title { font-size: 15px; font-weight: 700; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: keep-all; }
.tth-video:hover .tth-title { color: var(--primary); }
.tth-sub { font-size: 13px; color: var(--tth-muted); }
.tth-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none; display: inline-grid; place-items: center; }
.tth-avatar-empty { background: var(--primary); color: var(--on-primary); font-weight: 800; }
.tth-avatar-live { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--tth-live); }
.tth-short { position: relative; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; display: block; background: var(--tth-soft); }
.tth-short-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tth-short-card .tth-short { margin-bottom: 4px; }
.tth-short-card .tth-title { font-size: 14px; }
.tth-short-card:hover .tth-title { color: var(--primary); }
.tth-short-card .tth-sub { font-size: 12px; }
/* Ranking and community panels */
.tth-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.tth-panel { border: 1px solid var(--tth-line); border-radius: 20px; padding: 22px 24px; background: var(--bg); }
.tth-panel .tth-head { margin-bottom: 8px; }
.tth-rank, .tth-posts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tth-rank-row { display: flex; align-items: center; gap: 14px; padding: 9px 6px; border-radius: 12px; transition: background-color .15s; }
.tth-rank-row:hover { background: var(--tth-soft); }
.tth-rank-no { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; flex: none; color: var(--tth-muted); background: var(--tth-soft); }
.tth-rank-1 { background: #d4a106; color: #fff; }
.tth-rank-2 { background: #8f99a8; color: #fff; }
.tth-rank-3 { background: #b06a33; color: #fff; }
.tth-rank .tth-avatar { width: 40px; height: 40px; }
.tth-rank-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.tth-rank-name { font-size: 15px; font-weight: 700; }
.tth-rank-bar { height: 6px; border-radius: 3px; background: var(--tth-soft); overflow: hidden; }
.tth-rank-bar span { display: block; height: 100%; border-radius: 3px; background: var(--primary); }
.tth-rank-score { font-size: 14px; font-variant-numeric: tabular-nums; }
.tth-post { display: flex; align-items: center; gap: 10px; padding: 11px 4px; border-bottom: 1px solid var(--tth-soft); font-size: 14px; }
.tth-posts li:last-child .tth-post { border-bottom: 0; }
.tth-post:hover .tth-post-title { color: var(--primary); }
.tth-post-badge { flex: none; padding: 3px 9px; border-radius: 6px; font-size: 12px; font-weight: 700; color: var(--fg-300); background: var(--tth-soft); }
.tth-tone-notice { color: #1447e6; background: color-mix(in srgb, #1447e6 12%, transparent); }
.tth-tone-review { color: #0d9488; background: color-mix(in srgb, #0d9488 12%, transparent); }
.tth-post-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tth-post-title b { color: var(--primary); font-size: 12px; }
.tth-post-time { flex: none; font-size: 12px; color: var(--tth-muted); font-variant-numeric: tabular-nums; }
/* Empty and loading states */
.tth-empty { grid-column: 1 / -1; padding: 36px 20px; text-align: center; color: var(--tth-muted); font-size: 14px; border: 1px dashed var(--tth-line); border-radius: 16px; list-style: none; }
.tth-skeleton { background: linear-gradient(90deg, var(--tth-soft) 25%, var(--bg-secondary-400) 50%, var(--tth-soft) 75%); background-size: 200% 100%; animation: tth-shimmer 1.4s ease-in-out infinite; border-radius: 14px; list-style: none; }
.tth-skeleton-video { aspect-ratio: 16 / 11; }
.tth-skeleton-short { aspect-ratio: 9 / 16; }
.tth-skeleton-row { height: 76px; border-radius: 16px; }
.tth-skeleton-line { height: 40px; margin: 6px 0; border-radius: 10px; }
.tth-hero-main.tth-skeleton { min-height: 340px; border-radius: 22px; }
@keyframes tth-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
.tth-skeleton, .tth-live-dot { animation: none; }
.tth-thumb img, .tth-short img, .tth-btn, .tth-side-item { transition: none; }
}
/* Narrower screens */
@media screen and (max-width: 1200px) {
.tth-grid-6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tth-grid-6 > :nth-child(n + 5) { display: none; }
}
@media screen and (max-width: 1000px) {
.tth-hero { grid-template-columns: minmax(0, 1fr); }
.tth-hero-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tth-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tth-split { grid-template-columns: minmax(0, 1fr); }
}
@media screen and (max-width: 600px) {
.tth { padding: 16px 16px 48px; gap: 36px; }
.tth-hero-main { min-height: 0; flex-direction: column-reverse; align-items: stretch; padding: 18px; gap: 16px; }
.tth-hero-screen { flex: none; width: 100%; }
.tth-hero-title { font-size: 28px; }
.tth-hero-avatar { display: none; }
.tth-hero-side { grid-template-columns: minmax(0, 1fr); }
.tth-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tth-grid-6 > :nth-child(n + 4) { display: none; }
.tth-tabs { margin-left: 0; width: 100%; }
.tth-panel { padding: 18px; }
}
/* TodayTV ads */
/* Banner slots: empty until an ad loads, so pages never show a hole */
[data-ad-slot]:empty { display: none; }
.tt-ad { position: relative; display: block; }
.tt-ad > a, .tt-ad > div { position: relative; display: block; overflow: hidden; border-radius: 14px; background: var(--bg-secondary-400); }
.tt-ad img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.tt-ad > a:hover img { transform: scale(1.02); }
.tt-ad-wide > a, .tt-ad-wide > div { aspect-ratio: 8 / 1; }
.tt-ad-box > a, .tt-ad-box > div { aspect-ratio: 6 / 5; }
.tt-ad-label { position: absolute; right: 8px; top: 8px; padding: 1px 6px; border-radius: 4px; background: rgba(10, 14, 28, 0.55); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; }
/* Where slots sit */
.tt-ad-watch { margin: 14px 0 6px; }
.tt-ad-sidebar { margin: 12px var(--co-menu-x-padding, 1.5rem) 0; }
.tt-ad-sidebar.tt-ad > a, .tt-ad-sidebar.tt-ad > div { border-radius: 12px; }
.collapsed .tt-ad-sidebar { display: none; }
/* Phones keep the same 8:1 box: banner text is drawn in the image, so cropping cuts words off */
/* Phones: the banner is only ~45px tall, so the AD tag would sit on the banner's own button.
Show a small "광고" line under the banner instead. */
@media screen and (max-width: 700px) {
.tt-ad-wide .tt-ad-label { display: none; }
.tt-ad-wide::after { content: "광고"; display: block; margin-top: 3px; text-align: right; color: var(--fg-200); font-size: 10px; font-weight: 600; }
}
/* Pre-roll over the player */
.tt-preroll { position: absolute; inset: 0; z-index: 100; background: #000; display: block; }
.tt-preroll-video { width: 100%; height: 100%; object-fit: contain; display: block; }
.tt-preroll-badge { position: absolute; left: 14px; top: 14px; padding: 3px 9px; border-radius: 6px; background: #facc15; color: #111; font-size: 12px; font-weight: 800; }
.tt-preroll-sound { position: absolute; left: 14px; bottom: 16px; width: 40px; height: 40px; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, 0.55); color: #fff; cursor: pointer; }
.tt-preroll-more { position: absolute; left: 64px; bottom: 20px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: #fff !important; font-size: 13px; font-weight: 700; text-decoration: none !important; }
.tt-preroll-skip { position: absolute; right: 0; bottom: 18px; display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border: 1px solid rgba(255, 255, 255, 0.35); border-right: 0; border-radius: 10px 0 0 10px; background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
.tt-preroll-skip:disabled { cursor: default; color: rgba(255, 255, 255, 0.75); font-weight: 600; }
.tt-preroll-skip:not(:disabled):hover { background: rgba(0, 0, 0, 0.85); }
/* Admin page */
.tt-ads { display: grid; gap: 18px; }
.tt-ads-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.tt-ads-head p { margin: 6px 0 0; }
.tt-ads-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tt-ads-stats > div { padding: 16px 18px; border: 1px solid var(--bg-secondary-450); border-radius: 16px; background: var(--bg); display: grid; gap: 4px; }
.tt-ads-stats span { font-size: 13px; color: var(--fg-200); }
.tt-ads-stats b { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tt-ads .tt-num { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tt-ad-cell { display: flex; align-items: center; gap: 12px; min-width: 220px; }
.tt-ad-cell > span { display: grid; gap: 2px; }
.tt-ad-thumb { width: 96px; height: 54px; flex: none; border-radius: 8px; object-fit: cover; background: var(--bg-secondary-400); }
.tt-ad-actions { white-space: nowrap; text-align: right !important; }
.tt-ad-actions .peertube-button { padding: 4px 10px; font-size: 13px; margin-left: 4px; }
.tt-ads .tt-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.tt-ad-on { background: color-mix(in srgb, #16a34a 14%, transparent); color: #16a34a; }
.tt-ad-off { background: var(--bg-secondary-400); color: var(--fg-200); }
.tt-ad-soon { background: color-mix(in srgb, #3b82f6 14%, transparent); color: #3b82f6; }
.tt-ad-ended { background: color-mix(in srgb, #f97316 14%, transparent); color: #ea580c; }
.tt-ad-form { display: grid; gap: 16px; }
.tt-ad-form h2 { margin: 0; font-size: 18px; }
.tt-ad-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tt-ad-kinds label { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--bg-secondary-450); border-radius: 12px; cursor: pointer; }
.tt-ad-kinds label:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, transparent); }
.tt-ad-kinds span { display: grid; }
.tt-ad-kinds small { color: var(--fg-200); font-size: 12px; }
.tt-ad-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.tt-field { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--fg-300); }
.tt-field small { font-weight: 400; }
.tt-field-wide { grid-column: 1 / -1; }
.tt-field[hidden] { display: none; }
.tt-ad-upload { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tt-ad-preview { width: 240px; aspect-ratio: 16 / 9; border: 1px dashed var(--bg-secondary-500); border-radius: 12px; display: grid; place-items: center; overflow: hidden; background: var(--bg-secondary-350); }
.tt-ad-preview img, .tt-ad-preview video { width: 100%; height: 100%; object-fit: contain; }
.tt-ad-file-btn { cursor: pointer; margin: 0; }
.tt-ad-enabled { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.tt-ad-form-actions { display: flex; justify-content: flex-end; gap: 8px; }
@media screen and (max-width: 800px) {
.tt-ads-stats { grid-template-columns: 1fr 1fr; }
.tt-ad-grid, .tt-ad-kinds { grid-template-columns: 1fr; }
.tt-ads-head { flex-direction: column; }
}
/* Admin table (own rules: the board/station table styles are scoped to their pages) */
.tt-ads .tt-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tt-ads .tt-table th, .tt-ads .tt-table td { padding: 12px 14px; border-bottom: 1px solid var(--bg-secondary-450); text-align: left; vertical-align: middle; }
.tt-ads .tt-table thead th { white-space: nowrap; }
.tt-ads .tt-table-box { overflow-x: auto; }
.tt-ads .tt-table td:nth-child(2), .tt-ads .tt-table td:nth-child(3) { white-space: nowrap; }
/* TodayTV donations */
.tt-donate { display: grid; gap: 16px; }
.tt-donate .tt-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.tt-donate .tt-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tt-donate .tt-col-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tt-donate .tt-plus { color: #16a34a; font-weight: 700; }
.tt-donate .tt-minus { color: var(--fg-300); font-weight: 700; }
.tt-donate .tt-small { font-size: 12px; }
.tt-donate .tt-empty-box { text-align: center; }
.tt-donate .tt-link { color: var(--primary); font-weight: 600; text-decoration: none; }
.tt-donate .tt-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.tt-donate .tt-kpi, .tt-wallet-cards .tt-kpi {
display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--bg-secondary-450); border-radius: 14px;
background: var(--bg); color: var(--fg); text-decoration: none;
}
.tt-donate .tt-kpi b { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tt-donate .tt-kpi .tt-muted { font-size: 13px; }
.tt-wallet-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.tt-donate .tt-kpi-main { background: linear-gradient(135deg, #1447e6, #7c3aed); border: 0; color: #fff; }
#custom-css .tt-donate .tt-kpi-main .tt-muted { color: rgb(255 255 255 / 82%); }
.tt-donate .tt-kpi-main b { font-size: 30px; }
.tt-donate .tt-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.tt-pill-wait { background: color-mix(in srgb, #f59e0b 16%, transparent); color: #b45309; }
.tt-pill-ok { background: color-mix(in srgb, #16a34a 14%, transparent); color: #15803d; }
.tt-pill-no { background: color-mix(in srgb, #ef4444 12%, transparent); color: #dc2626; }
.tt-donate .tt-pill-muted { background: var(--bg-secondary-400); color: var(--fg-200); }
.tt-steps-inline { display: grid; gap: 4px; margin: 6px 0 10px; padding-left: 20px; color: var(--fg-300); font-size: 14px; }
.tt-bank { margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; background: var(--bg-secondary-350); font-size: 15px; }
.tt-charge-form { display: grid; gap: 12px; }
.tt-charge-form label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; }
.tt-charge-form > button[type=submit] { justify-self: start; min-width: 140px; }
.tt-donate .tt-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.tt-amounts { display: flex; flex-wrap: wrap; gap: 6px; }
.tt-amounts button {
height: 36px; padding: 0 14px; border: 1px solid var(--bg-secondary-450); border-radius: 999px; background: var(--bg);
color: var(--fg); font-size: 14px; font-weight: 700; cursor: pointer; font-variant-numeric: tabular-nums;
}
.tt-amounts button:hover { border-color: var(--primary); }
.tt-amounts button[aria-checked="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
/* Donate dialog */
.tt-donate-form { display: grid; gap: 8px; }
.tt-donate-form label { margin-top: 4px; font-size: 13px; font-weight: 700; }
/* Amount buttons in the dialog: even grid instead of a ragged second line */
.tt-donate-form .tt-amounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.tt-donate-form .tt-muted { margin: 4px 0 0; color: var(--fg-200); font-size: 12px; }
.tt-donate-form .tt-link { color: var(--primary); font-weight: 600; font-size: 13px; margin-left: 6px; }
.tt-donate-balance { display: flex; align-items: baseline; gap: 6px; margin: 0 0 6px; padding: 10px 12px; border-radius: 10px; background: var(--bg-secondary-350); }
.tt-donate-balance b { font-size: 18px; }
/* Watch page button */
.tt-donate-button { color: #e11d48 !important; }
.tt-donate-button .tt-icon { color: inherit; }
/* Donation alerts over the player */
.tt-donation-alerts {
position: absolute; top: 14px; left: 50%; z-index: 20; transform: translateX(-50%);
display: grid; gap: 8px; width: min(520px, calc(100% - 24px)); pointer-events: none;
}
.tt-donation-alert {
display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 14px;
background: linear-gradient(135deg, rgb(225 29 72 / 92%), rgb(124 58 237 / 92%)); color: #fff;
font-size: 15px; line-height: 1.4; box-shadow: 0 10px 30px rgb(0 0 0 / 35%);
animation: tt-donation-in .45s cubic-bezier(.2, .9, .3, 1.3);
}
.tt-donation-alert.big { font-size: 18px; padding: 14px 18px; background: linear-gradient(135deg, rgb(245 158 11 / 95%), rgb(225 29 72 / 95%)); }
.tt-donation-alert.out { opacity: 0; transform: translateY(-8px); transition: opacity .4s, transform .4s; }
.tt-donation-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: rgb(255 255 255 / 20%); }
.tt-donation-icon svg { width: 20px; height: 20px; }
.tt-donation-amount { color: #fde68a; }
.tt-donation-message { display: block; font-size: 13px; opacity: .92; }
@keyframes tt-donation-in { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
.tt-donation-alert { animation: none; }
.tt-donation-alert.out { transition: none; }
}
/* Tables */
.tt-donate .tt-table-box { overflow-x: auto; }
.tt-donate .tt-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tt-donate .tt-table th, .tt-donate .tt-table td { padding: 11px 12px; border-bottom: 1px solid var(--bg-secondary-450); text-align: left; vertical-align: top; }
.tt-donate .tt-table tbody tr:last-child td { border-bottom: 0; }
.tt-donate .tt-table thead th { font-size: 12px; font-weight: 600; white-space: nowrap; }
.tt-donate .tt-table .tt-col-num { text-align: right; }
.tt-donate .tt-table td .tt-muted { font-size: 12px; }
.tt-donate .tt-actions { display: flex; flex-wrap: wrap; gap: 6px; }
/* Copy buttons, OBS alert address, member lookup, export */
.tt-copy-button { margin-left: 8px; padding: 2px 10px !important; min-height: 0 !important; font-size: 13px !important; vertical-align: middle; }
.tt-bank { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tt-bank .tt-copy-button { margin-left: auto; }
.tt-send-as { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tt-copy-row { display: flex; gap: 8px; margin: 8px 0; }
.tt-copy-row input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.tt-copy-row button { flex: none; }
.tt-donate .tt-check { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 6px; font-size: 14px; font-weight: 500; cursor: pointer; }
.tt-donate .tt-check input {
appearance: none; flex: none; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--bg-secondary-500); border-radius: 5px;
background: var(--bg) center / 12px no-repeat; cursor: pointer;
}
.tt-donate .tt-check input:checked {
border-color: var(--primary);
background-color: var(--primary);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.tt-donate .tt-check input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.tt-overlay-card .tt-actions { margin-top: 8px; }
.tt-export-form, .tt-member-search { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.tt-export-form .tt-subhead { flex-basis: 100%; margin: 0; }
.tt-export-form label, .tt-member-search label { display: grid; gap: 4px; font-size: 13px; color: var(--fg-300); }
.tt-member-search label { flex: 1; min-width: 200px; }
.tt-member-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.tt-member-head .tt-pill { margin-left: 6px; }
.tt-member-name { font-size: 18px; }
@media (max-width: 600px) {
.tt-copy-row { flex-direction: column; }
.tt-export-form label { flex: 1 1 140px; }
}
@charset "UTF-8";
/*
* SPDX-FileCopyrightText: 2024-2025 John Livingston
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
/*
* SPDX-FileCopyrightText: 2024-2025 John Livingston
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
/*
Here we are getting some Peertube variables (see _variables.scss in Peertube source code):
*/
/*
* SPDX-FileCopyrightText: 2024-2025 John Livingston
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
/*
* SPDX-FileCopyrightText: 2024-2025 John Livingston
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
.peertube-plugin-livechat-experimental,
.peertube-plugin-livechat-warning {
color: orange;
}
.peertube-plugin-livechat-error {
color: red;
}
.peertube-plugin-livechat-error-message {
/* display an error block (page not found, ...) */
display: block;
font-size: 20px;
padding-top: 50px;
text-align: center;
width: 100%;
}
.peertube-plugin-livechat-container .peertube-plugin-livechat-error-message {
max-width: 30vw;
}
/*
* SPDX-FileCopyrightText: 2024-2025 John Livingston
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
/*
* SPDX-FileCopyrightText: 2024-2025 John Livingston
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
/*
* SPDX-FileCopyrightText: 2024 Mehdi Benadel
* SPDX-FileCopyrightText: 2024-2025 John Livingston
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
/* We are disabling stylelint-disable custom-property-pattern so we can use Peertube var without warnings. */
/* stylelint-disable custom-property-pattern */
/*
* SPDX-FileCopyrightText: 2024-2025 John Livingston
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
/*
* SPDX-FileCopyrightText: 2024 Mehdi Benadel
* SPDX-FileCopyrightText: 2024-2025 John Livingston
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
/* We are disabling stylelint-disable custom-property-pattern so we can use Peertube var without warnings. */
/* stylelint-disable custom-property-pattern */
/*
* SPDX-FileCopyrightText: 2024 Mehdi Benadel
* SPDX-FileCopyrightText: 2024-2025 John Livingston
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
/* We are disabling stylelint-disable custom-property-pattern so we can use Peertube var without warnings. */
/* stylelint-disable custom-property-pattern */
livechat-dynamic-table-form {
display: block;
margin-bottom: 3rem;
}
livechat-dynamic-table-form table {
table-layout: fixed;
text-align: center;
}
livechat-dynamic-table-form table tr {
border: 1px var(--bg-secondary-400, var(--greyBackgroundColor)) solid;
}
livechat-dynamic-table-form table td,
livechat-dynamic-table-form table th {
word-wrap: break-word;
vertical-align: top;
padding: 5px 7px;
}
livechat-dynamic-table-form table td:last-child {
vertical-align: middle;
min-width: 28px;
}
livechat-dynamic-table-form table td:last-child > input:not([type=checkbox]),
livechat-dynamic-table-form table td:last-child textarea {
min-width: 150px;
}
livechat-dynamic-table-form table tbody tr:nth-child(odd) {
background-color: var(--bg-secondary-300, var(--greySecondaryBackgroundColor));
}
livechat-dynamic-table-form table .livechat-dynamic-table-form-description-header {
font-size: small;
font-weight: lighter;
}
livechat-dynamic-table-form .dynamic-table-add-row-cell {
text-align: left;
}
livechat-dynamic-table-form .dynamic-table-add-row {
line-height: 19px;
padding: 4px;
border: 0;
font-weight: 600;
border-radius: 3px !important;
text-align: center;
cursor: pointer;
font-size: 15px;
background-color: var(--bs-green);
}
livechat-dynamic-table-form .dynamic-table-add-row, livechat-dynamic-table-form .dynamic-table-add-row:active, livechat-dynamic-table-form .dynamic-table-add-row:focus {
color: #fff;
background-color: rgb(63.7604651163, 228.1953488372, 12.3046511628);
}
livechat-dynamic-table-form .dynamic-table-add-row:focus, livechat-dynamic-table-form .dynamic-table-add-row.focus-visible {
box-shadow: 0 0 0 0.2rem rgb(113.1674418605, 245.1255813953, 71.8744186047);
}
livechat-dynamic-table-form .dynamic-table-add-row:hover {
color: #fff;
background-color: rgb(75.688372093, 242.5162790698, 23.4837209302);
}
livechat-dynamic-table-form .dynamic-table-add-row[disabled], livechat-dynamic-table-form .dynamic-table-add-row.disabled {
cursor: default;
color: #fff;
background-color: var(--input-border-color, var(--inputBorderColor));
}
livechat-dynamic-table-form .dynamic-table-remove-row {
line-height: 19px;
padding: 4px;
border: 0;
font-weight: 600;
border-radius: 3px !important;
text-align: center;
cursor: pointer;
font-size: 15px;
background-color: var(--bs-orange);
}
livechat-dynamic-table-form .dynamic-table-remove-row, livechat-dynamic-table-form .dynamic-table-remove-row:active, livechat-dynamic-table-form .dynamic-table-remove-row:focus {
color: #fff;
background-color: var(--primary, var(--mainColor));
}
livechat-dynamic-table-form .dynamic-table-remove-row:focus, livechat-dynamic-table-form .dynamic-table-remove-row.focus-visible {
box-shadow: 0 0 0 0.2rem var(--mainHoverColor);
}
livechat-dynamic-table-form .dynamic-table-remove-row:hover {
color: #fff;
background-color: var(--fg-400, var(--mainHoverColor));
}
livechat-dynamic-table-form .dynamic-table-remove-row[disabled], livechat-dynamic-table-form .dynamic-table-remove-row.disabled {
cursor: default;
color: #fff;
background-color: var(--input-border-color, var(--inputBorderColor));
}
/*
* SPDX-FileCopyrightText: 2024-2025 John Livingston
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
/*
* SPDX-FileCopyrightText: 2024-2025 John Livingston
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
livechat-error {
color: red;
display: block;
padding: 50px;
text-align: center;
}
/*
* SPDX-FileCopyrightText: 2024-2025 John Livingston
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
livechat-help-button a {
height: 18px !important;
margin: 2px !important;
padding: 1px !important;
vertical-align: middle;
}
livechat-help-button svg {
display: block;
height: auto;
}
/*
* SPDX-FileCopyrightText: 2024 Mehdi Benadel
* SPDX-FileCopyrightText: 2024-2025 John Livingston
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
/* stylelint-disable custom-property-pattern */
livechat-image-file-input img {
cursor: pointer;
max-height: 3em !important;
}
/*
* SPDX-FileCopyrightText: 2024-2025 John Livingston
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
livechat-share-chat {
display: block;
text-align: start;
}
livechat-share-chat > * {
margin-top: 10px;
}
livechat-share-chat .sub-menu-entry {
cursor: pointer;
}
livechat-share-chat .livechat-shareurl-copy {
display: flex;
flex-wrap: wrap;
}
livechat-share-chat .livechat-shareurl-copy button {
white-space: nowrap;
}
livechat-share-chat .livechat-shareurl-copy input {
flex-grow: 2;
width: auto !important;
}
livechat-share-chat .livechat-shareurl-block {
height: 300px;
overflow-y: scroll;
}
livechat-share-chat .livechat-shareurl-options input[type=checkbox],
livechat-share-chat .livechat-shareurl-options input[type=radio] {
margin-right: 20px;
}
livechat-share-chat .livechat-shareurl-options label {
display: block;
}
livechat-share-chat .livechat-shareurl-options .livechat-shareurl-suboptions {
margin-left: 40px;
}
livechat-share-chat .livechat-shareurl-options .livechat-shareurl-suboptions > * {
display: block;
}
livechat-share-chat .livechat-shareurl-options .livechat-shareurl-suboptions.livechat-shareurl-suboptions-disabled label {
/* stylelint-disable-next-line custom-property-pattern */
color: var(--fg-400, var(--greyForegroundColor));
}
livechat-share-chat .livechat-shareurl-protocol {
display: flex;
flex-flow: row wrap;
column-gap: 30px;
}
livechat-share-chat .livechat-shareurl-protocol input[type=radio] {
margin-right: 10px;
}
livechat-share-chat .livechat-shareurl-tips {
margin-bottom: 1rem;
margin-top: 1rem;
}
/*
* SPDX-FileCopyrightText: 2024-2025 John Livingston
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
livechat-spinner,
.livechat-spinner {
display: flex;
flex-direction: row;
justify-content: center;
}
livechat-spinner div,
.livechat-spinner div {
width: 48px;
height: 48px;
margin: 20px;
/* stylelint-disable-next-line custom-property-pattern */
border: 5px solid var(--bg-secondary-400, var(--greyBackgroundColor)) !important;
/* stylelint-disable-next-line custom-property-pattern */
border-bottom-color: var(--primary, var(--mainColor)) !important;
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: livechatrotating 1s linear infinite;
}
@keyframes livechatrotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/*
* SPDX-FileCopyrightText: 2024 Mehdi Benadel
* SPDX-FileCopyrightText: 2024-2025 John Livingston
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
/* stylelint-disable custom-property-pattern */
livechat-tags-input {
--tag-padding-vertical: 3px;
--tag-padding-horizontal: 6px;
display: flex;
align-items: flex-start;
flex-wrap: wrap;
max-width: 320px;
/* stylelint-disable-next-line no-descending-specificity */
}
livechat-tags-input .livechat-tags-container {
align-items: center;
display: flex;
flex-flow: row;
justify-content: space-between;
}
livechat-tags-input input {
flex: 1;
border: none;
padding: 0;
color: inherit;
background-color: inherit;
width: 100%;
/* stylelint-disable-next-line no-descending-specificity */
}
livechat-tags-input input:focus {
outline: transparent;
}
livechat-tags-input .livechat-tags,
livechat-tags-input .livechat-tags-searched {
display: flex;
flex-wrap: wrap;
padding: 0;
margin: var(--tag-padding-vertical) 0;
max-height: 150px;
overflow-y: auto;
transition-property: height, margin;
transition-duration: 0.3s;
}
@supports (scrollbar-width: auto) {
livechat-tags-input .livechat-tags,
livechat-tags-input .livechat-tags-searched {
scrollbar-color: var(--fg-400, var(--greyForegroundColor)) transparent;
scrollbar-width: thin;
}
}
livechat-tags-input .livechat-tags-container,
livechat-tags-input .livechat-tags-searched {
border-bottom: 1px dashed var(--fg-400, var(--greyForegroundColor));
}
livechat-tags-input .livechat-tags-container.livechat-empty,
livechat-tags-input .livechat-tags-searched.livechat-empty {
height: 0;
margin: 0;
border: none;
}
livechat-tags-input .livechat-tags-searched::after {
content: "🔍";
flex-grow: 1;
text-align: right;
}
livechat-tags-input .livechat-tags-searched.livechat-empty::after {
display: none;
}
livechat-tags-input .livechat-tag,
livechat-tags-input .livechat-tag-searched {
width: auto;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
padding: 0 var(--tag-padding-horizontal);
font-size: 14px;
list-style: none;
border-radius: 3px;
margin: 0 3px 3px 0;
transition: 0.3s filter;
}
livechat-tags-input .livechat-tag .livechat-tag-close,
livechat-tags-input .livechat-tag-searched .livechat-tag-close {
display: block;
width: 12px;
height: 12px;
line-height: 12px;
text-align: center;
font-size: 10px;
margin-left: var(--tag-padding-horizontal);
color: var(--primary, var(--mainColor));
border-radius: 50%;
background: #fff;
cursor: pointer;
}
livechat-tags-input .livechat-tag .livechat-tag-close::before,
livechat-tags-input .livechat-tag-searched .livechat-tag-close::before {
content: "✕";
}
livechat-tags-input .livechat-tag, livechat-tags-input .livechat-tag:active, livechat-tags-input .livechat-tag:focus,
livechat-tags-input .livechat-tag-searched,
livechat-tags-input .livechat-tag-searched:active,
livechat-tags-input .livechat-tag-searched:focus {
color: #fff;
background-color: var(--primary, var(--mainColor));
}
livechat-tags-input .livechat-tag .livechat-tag-close, livechat-tags-input .livechat-tag:active .livechat-tag-close, livechat-tags-input .livechat-tag:focus .livechat-tag-close,
livechat-tags-input .livechat-tag-searched .livechat-tag-close,
livechat-tags-input .livechat-tag-searched:active .livechat-tag-close,
livechat-tags-input .livechat-tag-searched:focus .livechat-tag-close {
color: var(--primary, var(--mainColor));
}
livechat-tags-input .livechat-tag:hover,
livechat-tags-input .livechat-tag-searched:hover {
color: #fff;
background-color: var(--fg-400, var(--mainHoverColor));
}
livechat-tags-input .livechat-tag:hover .livechat-tag-close,
livechat-tags-input .livechat-tag-searched:hover .livechat-tag-close {
color: var(--fg-400, var(--mainHoverColor));
}
livechat-tags-input .livechat-tag[disabled], livechat-tags-input .livechat-tag.disabled,
livechat-tags-input .livechat-tag-searched[disabled],
livechat-tags-input .livechat-tag-searched.disabled {
cursor: default;
color: #fff;
background-color: var(--input-border-color, var(--inputBorderColor));
}
livechat-tags-input .livechat-tag[disabled] .livechat-tag-close, livechat-tags-input .livechat-tag.disabled .livechat-tag-close,
livechat-tags-input .livechat-tag-searched[disabled] .livechat-tag-close,
livechat-tags-input .livechat-tag-searched.disabled .livechat-tag-close {
color: var(--input-border-color, var(--inputBorderColor));
}
livechat-tags-input .livechat-tag .livechat-tag-name,
livechat-tags-input .livechat-tag-searched .livechat-tag-name {
margin-top: 3px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 250px;
}
livechat-tags-input .livechat-tags.livechat-unfocused .livechat-tag {
filter: opacity(50%) grayscale(80%);
}
/*
* SPDX-FileCopyrightText: 2024 Mehdi Benadel
* SPDX-FileCopyrightText: 2024-2025 John Livingston
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
/* We are disabling stylelint-disable custom-property-pattern so we can use Peertube var without warnings. */
/* stylelint-disable custom-property-pattern */
/*
* SPDX-FileCopyrightText: 2024-2025 John Livingston
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
livechat-token-list table {
width: 100%;
table-layout: fixed;
text-align: center;
}
livechat-token-list table tr {
border: 1px var(--bg-secondary-400, var(--greyBackgroundColor)) solid;
}
livechat-token-list table td,
livechat-token-list table th {
word-wrap: break-word;
vertical-align: top;
padding: 5px 7px;
}
livechat-token-list table td:last-child {
vertical-align: middle;
min-width: 28px;
}
livechat-token-list table td:last-child > input:not([type=checkbox]),
livechat-token-list table td:last-child textarea {
min-width: 150px;
}
livechat-token-list table tbody tr:nth-child(odd) {
background-color: var(--bg-secondary-300, var(--greySecondaryBackgroundColor));
}
livechat-token-list table tr th:first-child,
livechat-token-list table tr th:last-child {
width: 50px;
}
livechat-token-list table label {
font-weight: inherit;
}
livechat-token-list .livechat-create-token {
line-height: 19px;
padding: 4px;
border: 0;
font-weight: 600;
border-radius: 3px !important;
text-align: center;
cursor: pointer;
font-size: 15px;
background-color: var(--bs-green);
}
livechat-token-list .livechat-create-token, livechat-token-list .livechat-create-token:active, livechat-token-list .livechat-create-token:focus {
color: #fff;
background-color: rgb(63.7604651163, 228.1953488372, 12.3046511628);
}
livechat-token-list .livechat-create-token:focus, livechat-token-list .livechat-create-token.focus-visible {
box-shadow: 0 0 0 0.2rem rgb(113.1674418605, 245.1255813953, 71.8744186047);
}
livechat-token-list .livechat-create-token:hover {
color: #fff;
background-color: rgb(75.688372093, 242.5162790698, 23.4837209302);
}
livechat-token-list .livechat-create-token[disabled], livechat-token-list .livechat-create-token.disabled {
cursor: default;
color: #fff;
background-color: var(--input-border-color, var(--inputBorderColor));
}
livechat-token-list .livechat-revoke-token {
line-height: 19px;
padding: 4px;
border: 0;
font-weight: 600;
border-radius: 3px !important;
text-align: center;
cursor: pointer;
font-size: 15px;
background-color: var(--bs-orange);
}
livechat-token-list .livechat-revoke-token, livechat-token-list .livechat-revoke-token:active, livechat-token-list .livechat-revoke-token:focus {
color: #fff;
background-color: var(--primary, var(--mainColor));
}
livechat-token-list .livechat-revoke-token:focus, livechat-token-list .livechat-revoke-token.focus-visible {
box-shadow: 0 0 0 0.2rem var(--mainHoverColor);
}
livechat-token-list .livechat-revoke-token:hover {
color: #fff;
background-color: var(--fg-400, var(--mainHoverColor));
}
livechat-token-list .livechat-revoke-token[disabled], livechat-token-list .livechat-revoke-token.disabled {
cursor: default;
color: #fff;
background-color: var(--input-border-color, var(--inputBorderColor));
}
/*
* SPDX-FileCopyrightText: 2024-2025 John Livingston
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
/*
* SPDX-FileCopyrightText: 2024-2025 John Livingston
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
#peertube-plugin-livechat-container {
display: flex;
flex-direction: column;
height: 100%;
}
#peertube-plugin-livechat-container .chatroom .box-flyout .chatroom-body .occupants {
min-width: min(200px, 50%);
}
/* Note: livechat-viewer-mode-content (the form where anonymous users can
choose nickname or log in with external account), can be something like
~180px height (at time of writing).
We must ensure that the px height limit for converse-muc and converse-root is
always higher than livechat-viewer-mode-content max size.
Note: We also must ensure that when the user has choosen its nickname, and there is an
ongoing poll, the user can see the chat when the poll is folded.
*/
#peertube-plugin-livechat-container converse-root {
display: block;
border: 1px solid black;
min-height: max(30vh, 300px);
height: 100%;
min-width: min(400px, 25vw);
}
#peertube-plugin-livechat-container converse-root converse-muc {
min-height: max(30vh, 300px);
}
@media screen and (orientation: portrait) and (width <= 767px) {
#peertube-plugin-livechat-container converse-root {
/* On small screen, and when portrait mode, we are giving the chat more vertical space.
It should go under the video.
*/
min-height: max(50vh, 300px);
}
#peertube-plugin-livechat-container converse-root converse-muc {
min-height: max(50vh, 300px);
}
}
/*
* SPDX-FileCopyrightText: 2024-2025 John Livingston
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
.peertube-plugin-livechat-buttons,
.livechat-mini-muc-bar-buttons {
align-items: center;
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
padding-right: 12px !important;
}
.peertube-plugin-livechat-button {
align-items: center;
display: flex;
flex-direction: row;
height: 36px !important;
margin: 5px !important;
padding: 2px !important;
}
.peertube-plugin-livechat-button svg {
height: auto;
}
.peertube-plugin-livechat-buttons-open .peertube-plugin-livechat-button,
.livechat-mini-muc-bar-buttons .peertube-plugin-livechat-button {
height: 18px !important;
margin: 2px !important;
padding: 1px !important;
}
.peertube-plugin-livechat-buttons-cloned {
display: none;
}
[peertube-plugin-livechat-state=initializing] {
display: none;
}
[peertube-plugin-livechat-state=open] .peertube-plugin-livechat-button-open {
display: none;
}
[peertube-plugin-livechat-state=closed] .peertube-plugin-livechat-button-promote,
[peertube-plugin-livechat-state=closed] .peertube-plugin-livechat-button-close {
display: none;
}
[peertube-plugin-livechat-state]:not([peertube-plugin-livechat-state=open]) .peertube-plugin-livechat-multi-button-main {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
margin-right: 0 !important;
}
[peertube-plugin-livechat-state]:not([peertube-plugin-livechat-state=open]) .peertube-plugin-livechat-multi-button-secondary {
border-radius: 0 !important;
margin-right: 0 !important;
margin-left: 0 !important;
border-left: 1px solid currentcolor;
}
[peertube-plugin-livechat-state]:not([peertube-plugin-livechat-state=open]) .peertube-plugin-livechat-multi-button-last-secondary {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
margin-left: 0 !important;
border-left: 1px solid currentcolor;
}
/*
* SPDX-FileCopyrightText: 2024-2025 John Livingston
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
/* stylelint-disable custom-property-pattern */
/*
* SPDX-FileCopyrightText: 2024-2025 John Livingston
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
/*
* SPDX-FileCopyrightText: 2024-2025 John Livingston
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
/*
* SPDX-FileCopyrightText: 2024-2025 John Livingston
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
livechat-channel-tabs {
display: block;
/* See Peertube sub-menu-h1 mixin */
margin-bottom: 30px;
}
/*
* SPDX-FileCopyrightText: 2024-2025 John Livingston
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
/* stylelint-disable custom-property-pattern */
livechat-configuration-section-header {
margin-top: 3rem;
}
/*
* SPDX-FileCopyrightText: 2024-2025 John Livingston
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
/*
These are styles to apply for the channel configuration pages.
*/
.peertube-plugin-livechat-configuration {
/* Channel configuration page */
/* Channel selection page */
}
.peertube-plugin-livechat-configuration h1 {
padding-top: 40px;
/* See Peertube sub-menu-h1 mixin */
font-size: 1.3rem;
border-bottom: 2px solid var(--bg-secondary-400, var(--greyBackgroundColor));
padding-bottom: 15px;
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-configuration-channel-info {
/* stylelint-disable-next-line value-keyword-case */
color: var(--fg, var(--mainForegroundColor));
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-configuration-channel-info span:first-child {
/* See Peertube .video-channel-display-name */
font-weight: 600;
font-size: 18px;
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-configuration-channel-info span:not(:first-child) {
/* See Peertube .video-channel-name */
margin-left: 5px;
font-size: 14px;
color: #777272;
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel h2 {
text-transform: uppercase;
color: var(--primary, var(--mainColor));
font-weight: 700;
font-size: 1rem;
margin-bottom: 10px;
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=submit],
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=reset],
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=submit],
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=reset],
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-configuration-actions button,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-tags-input-copy {
line-height: 19px;
padding: 4px 13px;
border: 0;
font-weight: 600;
border-radius: 3px !important;
text-align: center;
cursor: pointer;
font-size: 15px;
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=submit], .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=submit]:active, .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=submit]:focus,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=submit],
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=submit]:active,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=submit]:focus,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-configuration-actions button,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-configuration-actions button:active,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-configuration-actions button:focus,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-tags-input-copy,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-tags-input-copy:active,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-tags-input-copy:focus {
color: #fff;
background-color: var(--primary, var(--mainColor));
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=submit]:hover,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=submit]:hover,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-configuration-actions button:hover,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-tags-input-copy:hover {
color: #fff;
background-color: var(--fg-400, var(--mainHoverColor));
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=submit][disabled], .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=submit].disabled,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=submit][disabled],
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=submit].disabled,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-configuration-actions button[disabled],
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-configuration-actions button.disabled,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-tags-input-copy[disabled],
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel .peertube-plugin-livechat-tags-input-copy.disabled {
cursor: default;
color: #fff;
background-color: var(--input-border-color, var(--inputBorderColor));
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=reset],
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=reset] {
background-color: var(--bg-secondary-400, var(--greyBackgroundColor));
color: var(--fg-400, var(--greyForegroundColor));
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=reset]:hover, .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=reset]:active, .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=reset]:focus, .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=reset][disabled], .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=reset].disabled,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=reset]:hover,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=reset]:active,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=reset]:focus,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=reset][disabled],
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=reset].disabled {
color: var(--fg-400, var(--greyForegroundColor));
background-color: var(--bg-secondary-300, var(--greySecondaryBackgroundColor));
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=reset][disabled], .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel input[type=reset].disabled,
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=reset][disabled],
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-channel button[type=reset].disabled {
cursor: default;
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels {
list-style-type: none;
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li {
align-items: center;
gap: 15px;
/* See Peertube row-blocks mixin, used in video-channel */
display: flex;
min-height: 130px;
padding-bottom: 20px;
margin-bottom: 20px;
/* stylelint-disable-next-line value-keyword-case */
border-bottom: 1px solid var(--inputBorderColor);
}
@media screen and (max-width: 800px) {
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li {
flex-direction: column;
height: auto;
align-items: center;
}
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .avatar {
/* See Peertube CSS, class avatar and avatar-80 */
width: 80px;
height: 80px;
min-width: 80px;
min-height: 80px;
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .avatar.channel {
border-radius: 5px;
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .avatar.initial {
/* See Peertube actor-avatar.component.scss */
background-color: #3c2109;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--initialFontSize);
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .avatar.initial.gray {
background-color: #939393;
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .peertube-plugin-livechat-configuration-home-info {
flex-grow: 1;
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .peertube-plugin-livechat-configuration-home-info a {
/* See Peertube .video-channel-names */
width: fit-content;
display: flex;
align-items: baseline;
/* stylelint-disable-next-line value-keyword-case */
color: var(--fg, var(--mainForegroundColor));
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .peertube-plugin-livechat-configuration-home-info a:hover, .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .peertube-plugin-livechat-configuration-home-info a:focus, .peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .peertube-plugin-livechat-configuration-home-info a:active {
text-decoration: none !important;
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .peertube-plugin-livechat-configuration-home-info a:focus:not(.focus-visible) {
outline: none !important;
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .peertube-plugin-livechat-configuration-home-info a div:first-child {
/* See Peertube .video-channel-display-name */
font-weight: 600;
font-size: 18px;
}
.peertube-plugin-livechat-configuration.peertube-plugin-livechat-configuration-home ul.peertube-plugin-livechat-configuration-home-channels li .peertube-plugin-livechat-configuration-home-info a div:not(:first-child) {
/* See Peertube .video-channel-name */
margin-left: 5px;
font-size: 14px;
color: #777272;
}
.peertube-plugin-livechat-configuration .peertube-livechat-emojis-col-sn {
width: 30%;
}
.peertube-plugin-livechat-configuration .peertube-livechat-emojis-col-file {
width: 65%;
}
.peertube-plugin-livechat-configuration .peertube-plugin-livechat-configuration-actions {
margin-bottom: 1rem;
text-align: right;
}
/*
* SPDX-FileCopyrightText: 2024-2025 John Livingston
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
/*
* SPDX-FileCopyrightText: 2024-2025 John Livingston
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
/* stylelint-disable custom-property-pattern */
.peertube-plugin-livechat-admin-firewall h1 {
padding-top: 40px;
/* See Peertube sub-menu-h1 mixin */
font-size: 1.3rem;
border-bottom: 2px solid var(--bg-secondary-400, var(--greyBackgroundColor));
padding-bottom: 15px;
}
.peertube-plugin-livechat-admin-firewall textarea[name^=_content_] {
min-height: 10rem;
}
.peertube-plugin-livechat-admin-firewall input[type=submit],
.peertube-plugin-livechat-admin-firewall input[type=reset],
.peertube-plugin-livechat-admin-firewall button[type=submit],
.peertube-plugin-livechat-admin-firewall button[type=reset] {
line-height: 19px;
padding: 4px 13px;
border: 0;
font-weight: 600;
border-radius: 3px !important;
text-align: center;
cursor: pointer;
font-size: 15px;
}
.peertube-plugin-livechat-admin-firewall input[type=submit], .peertube-plugin-livechat-admin-firewall input[type=submit]:active, .peertube-plugin-livechat-admin-firewall input[type=submit].active, .peertube-plugin-livechat-admin-firewall input[type=submit]:focus,
.peertube-plugin-livechat-admin-firewall button[type=submit],
.peertube-plugin-livechat-admin-firewall button[type=submit]:active,
.peertube-plugin-livechat-admin-firewall button[type=submit].active,
.peertube-plugin-livechat-admin-firewall button[type=submit]:focus {
color: var(--on-primary, #fff);
background-color: var(--primary, var(--mainColor));
border: 1px solid var(--primary, var(--mainColor));
}
.peertube-plugin-livechat-admin-firewall input[type=submit]:hover,
.peertube-plugin-livechat-admin-firewall button[type=submit]:hover {
color: var(--on-primary, #fff);
background-color: var(--primary-400, var(--mainHoverColor));
}
.peertube-plugin-livechat-admin-firewall input[type=submit][disabled],
.peertube-plugin-livechat-admin-firewall button[type=submit][disabled] {
pointer-events: none;
opacity: 0.6;
}
.peertube-plugin-livechat-admin-firewall input[type=reset],
.peertube-plugin-livechat-admin-firewall button[type=reset] {
color: var(--fg, var(--mainForegroundColor));
background-color: transparent;
border: 1px solid var(--bg-secondary-500, var(--inputBorderColor)) !important;
}
.peertube-plugin-livechat-admin-firewall input[type=reset]:active, .peertube-plugin-livechat-admin-firewall input[type=reset].active, .peertube-plugin-livechat-admin-firewall input[type=reset]:focus, .peertube-plugin-livechat-admin-firewall input[type=reset]:focus-visible,
.peertube-plugin-livechat-admin-firewall button[type=reset]:active,
.peertube-plugin-livechat-admin-firewall button[type=reset].active,
.peertube-plugin-livechat-admin-firewall button[type=reset]:focus,
.peertube-plugin-livechat-admin-firewall button[type=reset]:focus-visible {
color: var(--fg, var(--mainForegroundColor));
background-color: var(--bg-secondary-500, var(--inputBorderColor));
border-color: var(--bg-secondary-500, var(--inputBorderColor));
}
.peertube-plugin-livechat-admin-firewall input[type=reset]:hover,
.peertube-plugin-livechat-admin-firewall button[type=reset]:hover {
color: var(--fg, var(--mainForegroundColor));
background-color: var(--bg-secondary-450, var(--inputBorderColor));
}
.peertube-plugin-livechat-admin-firewall input[type=reset][disabled],
.peertube-plugin-livechat-admin-firewall button[type=reset][disabled] {
pointer-events: none;
opacity: 0.8;
}
.peertube-plugin-livechat-admin-firewall .peertube-livechat-admin-firewall-col-name {
width: 25%;
}
.peertube-plugin-livechat-admin-firewall .peertube-livechat-admin-firewall-col-content {
width: 65%;
}
/*
* SPDX-FileCopyrightText: 2024-2025 John Livingston
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
table.peertube-plugin-livechat-prosody-list-rooms {
border: 1px solid black;
margin: 5px 0;
}
table.peertube-plugin-livechat-prosody-list-rooms tr:nth-child(odd) {
background-color: #eee;
}
table.peertube-plugin-livechat-prosody-list-rooms tr:nth-child(even) {
background-color: #fff;
}
table.peertube-plugin-livechat-prosody-list-rooms th {
/* stylelint-disable-next-line custom-property-pattern */
background-color: var(--fg-400, var(--mainHoverColor));
border: 1px solid black;
/* stylelint-disable-next-line custom-property-pattern */
color: var(--mainBackgroundColor);
padding: 4px 5px;
}
table.peertube-plugin-livechat-prosody-list-rooms td {
border: 1px solid #555;
color: black;
padding: 4px 5px;
}
/* TodayTV real-time (WebRTC) picture inside the player box */
.tt-rt {
position: absolute; inset: 0; z-index: 5; background: #000; display: none;
font-family: inherit; color: #fff;
}
.tt-rt-on .tt-rt { display: block; }
.tt-rt video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
/* PeerTube's own controls and picture are hidden while real-time plays (donation alerts stay on top) */
.tt-rt-on > .vjs-tech,
.tt-rt-on > .vjs-control-bar,
.tt-rt-on > .vjs-big-play-button,
.tt-rt-on > .vjs-loading-spinner,
.tt-rt-on > .vjs-poster,
.tt-rt-on > .vjs-text-track-display,
.tt-rt-on > .vjs-error-display { visibility: hidden !important; }
/* Some control bar children set their own visibility: take the bars out completely */
.tt-rt-on > .vjs-control-bar,
.tt-rt-on > .vjs-big-play-button,
.tt-rt-on > .vjs-title-bar,
.tt-rt-on > .vjs-upnext-content { display: none !important; }
.tt-rt-badge {
position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px;
padding: 3px 8px; border-radius: 6px; background: #e5133a; font-size: 12px; font-weight: 800; letter-spacing: .02em;
}
.tt-rt-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: tt-rt-pulse 1.6s ease-in-out infinite; }
.tt-rt-now { font-weight: 600; opacity: .9; padding-left: 6px; border-left: 1px solid rgba(255, 255, 255, .45); }
@keyframes tt-rt-pulse { 50% { opacity: .35; } }
.tt-rt-unmute {
position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%);
padding: 8px 16px 8px 36px; border: 0; border-radius: 999px; cursor: pointer;
background: rgba(10, 14, 28, .78) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4.7a.7.7 0 0 0-1.2-.5L6.4 7.6A1.4 1.4 0 0 1 5.4 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.4a1.4 1.4 0 0 1 1 .4l3.4 3.4a.7.7 0 0 0 1.2-.5z'/%3E%3Cline x1='22' x2='16' y1='9' y2='15'/%3E%3Cline x1='16' x2='22' y1='9' y2='15'/%3E%3C/svg%3E") 12px center / 18px no-repeat;
color: #fff; font-size: 14px; font-weight: 700;
}
.tt-rt-unmute[hidden] { display: none; }
.tt-rt-bar {
position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px;
padding: 28px 14px 12px; background: linear-gradient(to top, rgba(0, 0, 0, .65), transparent);
opacity: 0; transition: opacity .2s ease;
}
.tt-rt:hover .tt-rt-bar, .tt-rt.tt-rt-show .tt-rt-bar, .tt-rt-bar:focus-within { opacity: 1; }
.tt-rt-gap { flex: 1; }
.tt-rt-btn {
width: 32px; height: 32px; border: 0; border-radius: 8px; cursor: pointer; background: transparent center / 22px no-repeat;
}
.tt-rt-btn:hover, .tt-rt-text:hover { background-color: rgba(255, 255, 255, .14); }
.tt-rt-btn[data-mute] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4.7a.7.7 0 0 0-1.2-.5L6.4 7.6A1.4 1.4 0 0 1 5.4 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.4a1.4 1.4 0 0 1 1 .4l3.4 3.4a.7.7 0 0 0 1.2-.5z'/%3E%3Cpath d='M16 9a5 5 0 0 1 0 6'/%3E%3Cpath d='M19.4 18.4a9 9 0 0 0 0-12.7'/%3E%3C/svg%3E"); }
.tt-rt-btn[data-mute].is-muted { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4.7a.7.7 0 0 0-1.2-.5L6.4 7.6A1.4 1.4 0 0 1 5.4 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.4a1.4 1.4 0 0 1 1 .4l3.4 3.4a.7.7 0 0 0 1.2-.5z'/%3E%3Cline x1='22' x2='16' y1='9' y2='15'/%3E%3Cline x1='16' x2='22' y1='9' y2='15'/%3E%3C/svg%3E"); }
.tt-rt-btn[data-full] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3'/%3E%3Cpath d='M21 8V5a2 2 0 0 0-2-2h-3'/%3E%3Cpath d='M3 16v3a2 2 0 0 0 2 2h3'/%3E%3Cpath d='M16 21h3a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E"); }
.tt-rt-volume { width: 90px; accent-color: #fff; }
.tt-rt-text {
height: 30px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 8px; cursor: pointer;
background: transparent; color: #fff; font-size: 12px; font-weight: 600;
}
@media (hover: none) {
.tt-rt-volume { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.tt-rt-dot { animation: none; }
.tt-rt-bar { transition: none; }
}