/* OpenTube plugin pages. Colors come from PeerTube's CSS variables so the
pages follow whichever theme the instance runs, including the OpenTube
fork's dark lime default. */
.opentube-page { max-width: 1200px; }
.opentube-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 8px 0 18px; }
.opentube-heading h1 { margin: 2px 0 0; font-family: Georgia, serif; font-size: clamp(1.7rem, 2.6vw, 2.6rem); font-weight: 400; letter-spacing: -0.03em; }
.opentube-eyebrow { margin: 0; color: var(--primary); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.opentube-lead { color: var(--fg-300, inherit); max-width: 70ch; }
.opentube-h2 { margin: 28px 0 12px; font-size: 1.15rem; }
.opentube-status { color: var(--fg-300, inherit); margin: 10px 0; }
.opentube-error { padding: 14px 16px; border-radius: 9px; background: var(--bg-secondary-400, rgba(128, 128, 128, 0.15)); }
.opentube-footnote { margin-top: 14px; color: var(--fg-300, inherit); font-size: 0.85em; }
/* Discover */
.opentube-chips { display: flex; gap: 9px; overflow-x: auto; padding: 4px 0 14px; scrollbar-width: none; }
.opentube-chips::-webkit-scrollbar { display: none; }
.opentube-chip { flex: 0 0 auto; border: 0; border-radius: 9px; padding: 7px 13px; font-weight: 600; color: var(--fg); background: var(--bg-secondary-400, rgba(128, 128, 128, 0.15)); cursor: pointer; }
.opentube-chip.active { color: var(--on-primary, #111); background: var(--primary); }
.opentube-select { padding: 6px 10px; border-radius: 9px; border: 1px solid var(--input-border-color, currentColor); background: var(--input-bg, transparent); color: var(--fg); }
.opentube-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 30px 16px; }
.opentube-card { min-width: 0; }
.opentube-thumb { display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--bg-secondary-400, rgba(128, 128, 128, 0.15)); }
.opentube-thumb img { width: 100%; height: 100%; object-fit: cover; }
.opentube-card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 9px; font-weight: 600; line-height: 1.3; color: var(--fg); text-decoration: none; }
.opentube-card-meta { margin-top: 4px; color: var(--fg-300, inherit); font-size: 0.85em; }
.opentube-card-channel { display: flex; align-items: center; gap: 8px; margin-top: 7px; min-width: 0; }
.opentube-card-avatar { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
/* Stand-in for a channel with no picture: the initial on a flat ground, sized
identically so the row does not reflow when a picture is added later. */
.opentube-card-avatar-blank { display: flex; align-items: center; justify-content: center; background: var(--bg-secondary-450, rgba(128, 128, 128, 0.3)); color: var(--fg-300, inherit); font-size: 0.7rem; font-weight: 700; }
.opentube-card-channel-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-300, inherit); font-size: 0.85em; text-decoration: none; }
.opentube-card-channel-name:hover { color: var(--fg); }
.opentube-card-reason { margin-top: 3px; color: var(--primary); font-size: 0.8em; }
/* Algorithm list */
.opentube-algo-list { display: grid; gap: 10px; }
.opentube-algo { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-radius: 10px; background: var(--bg-secondary-400, rgba(128, 128, 128, 0.12)); }
.opentube-algo.selected { outline: 2px solid var(--primary); }
.opentube-algo-name { font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.opentube-algo-desc { color: var(--fg-300, inherit); font-size: 0.9em; }
.opentube-algo-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.opentube-tag { font-size: 0.7em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 2px 7px; border-radius: 999px; background: var(--bg-secondary-450, rgba(128, 128, 128, 0.25)); }
.opentube-tag.active { background: var(--primary); color: var(--on-primary, #111); }
.opentube-button { border: 0; border-radius: 9px; padding: 8px 14px; font-weight: 600; cursor: pointer; background: var(--primary); color: var(--on-primary, #111); }
.opentube-button.ghost { background: transparent; color: var(--fg); outline: 1px solid var(--bg-secondary-450, currentColor); }
/* Why section */
.opentube-why-video { padding: 12px 0; border-bottom: 1px solid var(--bg-secondary-450, rgba(128, 128, 128, 0.2)); }
.opentube-why-title { font-weight: 600; color: var(--fg); text-decoration: none; }
.opentube-why-score { color: var(--fg-300, inherit); font-size: 0.8em; margin: 2px 0 6px; }
.opentube-term { display: grid; grid-template-columns: 130px 1fr 60px; align-items: center; gap: 10px; margin: 3px 0; font-size: 0.85em; }
.opentube-term-name { color: var(--fg-300, inherit); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opentube-term-track { height: 8px; border-radius: 4px; background: var(--bg-secondary-400, rgba(128, 128, 128, 0.15)); overflow: hidden; }
.opentube-term-bar { height: 100%; border-radius: 4px; background: var(--primary); }
.opentube-term-bar.negative { background: var(--red, #c0392b); }
.opentube-term-value { text-align: right; font-variant-numeric: tabular-nums; }
.opentube-preview-note { margin: 8px 0; padding: 8px 12px; border-radius: 8px; background: var(--primary); color: var(--on-primary, #111); font-weight: 600; }
/* Editor */
.opentube-editor { display: grid; gap: 18px; padding: 16px; border-radius: 10px; background: var(--bg-secondary-400, rgba(128, 128, 128, 0.1)); }
.opentube-editor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px 22px; }
.opentube-field { display: grid; gap: 4px; font-size: 0.85em; }
.opentube-field-label { display: flex; justify-content: space-between; color: var(--fg-300, inherit); }
.opentube-readout { font-variant-numeric: tabular-nums; color: var(--fg); }
.opentube-editor-save { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.opentube-input { flex: 1 1 220px; padding: 8px 12px; border-radius: 9px; border: 1px solid var(--input-border-color, currentColor); background: var(--input-bg, transparent); color: var(--fg); }
.opentube-checkbox { display: flex; align-items: center; gap: 6px; }
/* Studio */
.opentube-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.opentube-stat { padding: 14px 16px; border-radius: 10px; background: var(--bg-secondary-400, rgba(128, 128, 128, 0.12)); }
.opentube-stat-value { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.opentube-stat-label { color: var(--fg-300, inherit); font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.08em; }
.opentube-table-wrap { overflow-x: auto; }
.opentube-table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
.opentube-table th { text-align: left; padding: 8px 10px; color: var(--fg-300, inherit); font-weight: 600; border-bottom: 2px solid var(--bg-secondary-450, rgba(128, 128, 128, 0.25)); }
.opentube-table td { padding: 8px 10px; border-bottom: 1px solid var(--bg-secondary-400, rgba(128, 128, 128, 0.15)); font-variant-numeric: tabular-nums; }
.opentube-td-title a { color: var(--fg); font-weight: 600; text-decoration: none; }
.opentube-td-title { max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Studio charts and panels */
.opentube-heading-actions { display: flex; gap: 10px; align-items: center; }
.opentube-stat-sub { margin-top: 3px; color: var(--primary); font-size: 0.75em; font-variant-numeric: tabular-nums; }
.opentube-panels { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; margin: 4px 0 18px; }
.opentube-panels:has(> :only-child) { grid-template-columns: 1fr; }
/* Cards are usually rendered straight into the page as siblings, where there
is no grid gap to separate them — consecutive ones shared an edge and read
as one long block rather than as separate cards. Spacing belongs on the card
for that reason, and is dropped again inside .opentube-panels, which has its
own gap and would otherwise double it. */
.opentube-panel { padding: 14px 16px; border-radius: 10px; background: var(--bg-secondary-400, rgba(128, 128, 128, 0.12)); min-width: 0; margin-bottom: 12px; }
.opentube-panels > .opentube-panel { margin-bottom: 0; }
.opentube-panel.wide { grid-column: auto; }
.opentube-panel-title { font-weight: 700; margin-bottom: 2px; }
.opentube-panel-big { font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.opentube-panel-sub { color: var(--fg-300, inherit); font-size: 0.8em; margin-bottom: 8px; }
.opentube-panel-axis { display: flex; justify-content: space-between; color: var(--fg-300, inherit); font-size: 0.72em; margin-top: 4px; }
.opentube-chart { width: 100%; height: auto; display: block; }
.opentube-chart-line { fill: none; stroke: var(--primary); stroke-width: 2; vector-effect: non-scaling-stroke; }
.opentube-chart-area { fill: var(--primary); opacity: 0.16; }
.opentube-bar { fill: var(--primary); }
.opentube-bar.empty { fill: var(--bg-secondary-450, rgba(128, 128, 128, 0.3)); }
.opentube-row-link { cursor: pointer; }
.opentube-row-link:hover td { background: var(--bg-secondary-400, rgba(128, 128, 128, 0.1)); }
@media (max-width: 900px) { .opentube-panels { grid-template-columns: 1fr; } }
/* Studio tabs and the Earn tab */
.opentube-tabs { display: flex; gap: 18px; margin: -4px 0 16px; border-bottom: 1px solid var(--bg-secondary-450, rgba(128, 128, 128, 0.25)); }
.opentube-tab { border: 0; background: transparent; padding: 8px 2px; font-weight: 600; color: var(--fg-300, inherit); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.opentube-tab.active { color: var(--fg); border-bottom-color: var(--primary); }
.opentube-earn-card { padding: 16px; border-radius: 10px; background: var(--bg-secondary-400, rgba(128, 128, 128, 0.12)); margin-bottom: 14px; }
.opentube-earn-card .opentube-panel { background: var(--bg-secondary-450, rgba(128, 128, 128, 0.18)); }
.opentube-earn-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.opentube-earn-name { font-weight: 700; font-size: 1.05em; }
.opentube-earn-handle { color: var(--fg-300, inherit); font-size: 0.85em; }
.opentube-earn-note { color: var(--fg-300, inherit); margin: 6px 0 12px; }
/* A pill has a rounded outline drawn around a single run of text; letting it
wrap breaks the shape into two half-pills and the state becomes unreadable.
Better for the cell to scroll than for the badge to come apart. */
.opentube-badge { flex: 0 0 auto; white-space: nowrap; font-size: 0.72em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 10px; border-radius: 999px; background: var(--bg-secondary-450, rgba(128, 128, 128, 0.25)); }
.opentube-badge.approved { background: var(--primary); color: var(--on-primary, #111); }
.opentube-badge.pending { background: transparent; outline: 1px solid var(--primary); color: var(--primary); }
.opentube-badge.revoked, .opentube-badge.rejected { background: var(--red, #c0392b); color: #fff; }
.opentube-code { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 0 0 12px; border-radius: 9px; background: var(--bg, rgba(0, 0, 0, 0.25)); outline: 1px dashed var(--bg-secondary-450, rgba(128, 128, 128, 0.45)); }
.opentube-code code { flex: 1; overflow-x: auto; white-space: nowrap; user-select: all; font-variant-ligatures: none; }
/* Premium */
.opentube-join-panel { max-width: 640px; padding: 16px; border-radius: 10px; background: var(--bg-secondary-400, rgba(128, 128, 128, 0.12)); margin: 4px 0 10px; }
.opentube-join-title { font-weight: 700; margin-bottom: 4px; }
.opentube-thumb-premium { position: relative; }
.opentube-premium-flag { position: absolute; top: 8px; left: 8px; padding: 3px 9px; border-radius: 999px; background: var(--primary); color: var(--on-primary, #111); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.opentube-premium-panel { margin-bottom: 18px; }
/* Watch-page lock overlay */
.opentube-premium-overlay { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; text-align: center; background: rgba(0, 0, 0, 0.82); }
.opentube-premium-overlay-inner { display: grid; gap: 10px; justify-items: center; max-width: 440px; padding: 24px; color: #fff; }
.opentube-premium-overlay-title { font-family: Georgia, serif; font-size: 1.5rem; letter-spacing: -0.02em; }
.opentube-premium-overlay-text { margin: 0; color: rgba(255, 255, 255, 0.8); }
.opentube-premium-overlay-hint { margin: 4px 0 0; font-size: 0.85em; color: rgba(255, 255, 255, 0.65); }
.opentube-premium-overlay-hint a { color: var(--primary, #9ce200); }
.opentube-premium-overlay .opentube-button { text-decoration: none; }
/* Interactive chart chrome */
.opentube-chart-wrap { position: relative; }
.opentube-grid-line { stroke: var(--bg-secondary-450, rgba(128, 128, 128, 0.3)); stroke-dasharray: 2 4; }
.opentube-tick { fill: var(--fg-300, #999); font-size: 10.5px; }
.opentube-crosshair { stroke: var(--fg-300, #999); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.opentube-dot { fill: var(--primary); pointer-events: none; }
.opentube-tip { position: absolute; z-index: 5; pointer-events: none; padding: 6px 10px; border-radius: 8px; background: var(--bg, #111); outline: 1px solid var(--bg-secondary-450, rgba(128, 128, 128, 0.4)); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); font-size: 0.78em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.opentube-tip div:first-child { color: var(--fg-300, inherit); }
/* Reach funnel and key moments */
.opentube-funnel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 6px; }
.opentube-funnel-step { padding: 8px 12px; border-radius: 9px; background: var(--bg-secondary-450, rgba(128, 128, 128, 0.18)); min-width: 88px; }
.opentube-funnel-value { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.opentube-funnel-label { color: var(--fg-300, inherit); font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.07em; }
.opentube-funnel-arrow { color: var(--primary); font-size: 0.8em; font-weight: 700; white-space: nowrap; }
.opentube-moments { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 2px; }
.opentube-moment-chip { font-size: 0.75em; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--bg-secondary-450, rgba(128, 128, 128, 0.22)); }
.opentube-callout { color: var(--primary); font-weight: 600; margin: 6px 0 8px; }
.opentube-panel-stats { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 10px; }
.opentube-ministat-value { font-weight: 700; font-variant-numeric: tabular-nums; }
.opentube-ministat-label { color: var(--fg-300, inherit); font-size: 0.72em; }
/* Source bars */
.opentube-barlist { display: grid; gap: 6px; margin-top: 8px; }
.opentube-barrow { display: grid; grid-template-columns: 120px 1fr 110px; align-items: center; gap: 10px; font-size: 0.85em; }
.opentube-barrow-label { color: var(--fg-300, inherit); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opentube-barrow-value { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Comparison line and publish markers on charts */
.opentube-chart-line2 { fill: none; stroke: var(--fg-300, #999); stroke-width: 1.5; stroke-dasharray: 4 3; opacity: 0.75; vector-effect: non-scaling-stroke; }
.opentube-marker { fill: var(--primary); stroke: var(--bg, #111); stroke-width: 1; }
/* When-viewers-watch heatmap */
.opentube-heatmap { display: grid; grid-template-columns: 36px repeat(24, 1fr); gap: 2px; align-items: center; margin-top: 8px; }
.opentube-heatmap-cell { display: block; aspect-ratio: 1 / 1; min-width: 5px; border-radius: 2px; background: var(--primary); }
.opentube-heatmap-hour, .opentube-heatmap-day { font-size: 0.65em; color: var(--fg-300, inherit); }
.opentube-heatmap-day { padding-right: 4px; }
/* Subscribed vs not */
.opentube-split-bar { height: 14px; border-radius: 7px; background: var(--bg-secondary-450, rgba(128, 128, 128, 0.25)); overflow: hidden; margin: 10px 0 6px; }
.opentube-split-fill { height: 100%; background: var(--primary); }
/* Explore tab */
.opentube-explore-controls { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.opentube-metrics { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.9em; }
.opentube-share { color: var(--fg-300, inherit); font-size: 0.78em; }
.opentube-th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.opentube-panels.thirds { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 900px) { .opentube-panels.thirds { grid-template-columns: 1fr; } }
/* Feed tuning: topic tree, muted words, reference channels */
.opentube-tune-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0 14px; color: var(--fg-300, inherit); font-size: 0.9em; }
.opentube-tune-hidden { padding: 2px 10px; border-radius: 999px; background: var(--bg-secondary-450, rgba(128, 128, 128, 0.25)); font-weight: 600; cursor: help; }
.opentube-tune-side { display: grid; gap: 12px; align-content: start; }
.opentube-panel-note { color: var(--fg-300, inherit); font-size: 0.82em; margin: 4px 0 10px; }
.opentube-tune-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.opentube-topic-tree { max-height: 460px; overflow-y: auto; display: grid; gap: 2px; padding-right: 4px; }
.opentube-topic { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 8px; border-radius: 8px; }
.opentube-topic:hover { background: var(--bg-secondary-450, rgba(128, 128, 128, 0.16)); }
.opentube-topic.has-stance.blocked { box-shadow: inset 3px 0 0 var(--red, #d9534f); }
.opentube-topic.has-stance.less { box-shadow: inset 3px 0 0 var(--fg-300, #999); }
.opentube-topic.has-stance.more,
.opentube-topic.has-stance.loved { box-shadow: inset 3px 0 0 var(--primary); }
.opentube-topic-name { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 0.9em; }
.opentube-topic-count { color: var(--fg-300, inherit); font-size: 0.8em; font-variant-numeric: tabular-nums; }
.opentube-caret { flex: 0 0 auto; width: 18px; height: 18px; border: 0; padding: 0; border-radius: 5px; background: transparent; color: var(--fg-300, inherit); cursor: pointer; transition: transform 0.12s ease-in-out; }
.opentube-caret.open { transform: rotate(90deg); }
.opentube-caret.placeholder { cursor: default; }
.opentube-stances { display: flex; gap: 3px; flex: 0 0 auto; }
.opentube-stance { border: 0; border-radius: 6px; padding: 3px 8px; font-size: 0.72em; font-weight: 600; cursor: pointer; color: var(--fg-300, inherit); background: var(--bg-secondary-450, rgba(128, 128, 128, 0.2)); }
.opentube-stance:hover:not(:disabled) { color: var(--fg); }
.opentube-stance:disabled { cursor: not-allowed; opacity: 0.5; }
.opentube-stance.active { color: var(--on-primary, #111); background: var(--primary); }
.opentube-stance.active.blocked { background: var(--red, #d9534f); color: #fff; }
.opentube-stance.active.less { background: var(--fg-300, #999); color: var(--bg, #111); }
.opentube-chipset { display: flex; flex-wrap: wrap; gap: 6px; }
.opentube-chip-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 999px; font-size: 0.82em; background: var(--bg-secondary-450, rgba(128, 128, 128, 0.22)); }
.opentube-chip-tag.blocked { box-shadow: inset 0 0 0 1px var(--red, #d9534f); }
.opentube-chip-tag.like { box-shadow: inset 0 0 0 1px var(--primary); }
.opentube-chip-role { font-size: 0.75em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-300, inherit); }
.opentube-chip-x { border: 0; width: 18px; height: 18px; border-radius: 50%; line-height: 1; cursor: pointer; color: var(--fg); background: var(--bg-secondary-500, rgba(128, 128, 128, 0.35)); }
/* Who your subscription supports */
.opentube-support-list { display: grid; gap: 6px; max-width: 720px; }
.opentube-support-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; padding: 8px 12px; border-radius: 9px; background: var(--bg-secondary-400, rgba(128, 128, 128, 0.12)); }
.opentube-support-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.opentube-support-share { font-variant-numeric: tabular-nums; color: var(--fg-300, inherit); min-width: 3.5ch; text-align: right; }
.opentube-support-controls { display: flex; gap: 3px; }
@media (max-width: 560px) { .opentube-support-row { grid-template-columns: 1fr auto; } .opentube-support-controls { grid-column: 1 / 3; } }
/* Your Premium modal */
.opentube-modal-overlay { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, 0.65); }
.opentube-modal { width: min(520px, 100%); max-height: 85vh; overflow-y: auto; padding: 24px 26px; border-radius: 14px; background: var(--bg-secondary-400, #1b1b1b); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
.opentube-modal-title { margin: 0 0 14px; font-family: Georgia, serif; font-size: 1.6rem; font-weight: 400; letter-spacing: -0.02em; }
.opentube-benefits { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 12px; }
.opentube-benefit { display: grid; gap: 2px; padding-left: 20px; position: relative; }
.opentube-benefit::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--primary); font-weight: 700; }
.opentube-benefit-title { font-weight: 600; }
.opentube-benefit-detail { color: var(--fg-300, inherit); font-size: 0.87em; line-height: 1.45; }
.opentube-modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.opentube-modal-actions .opentube-button { text-decoration: none; display: inline-flex; align-items: center; }
/* Checkout method picker */
.opentube-methods { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }
.opentube-method { border: 0; border-radius: 9px; padding: 8px 16px; font-weight: 600; cursor: pointer; color: var(--fg); background: var(--bg-secondary-450, rgba(128, 128, 128, 0.22)); }
.opentube-method.active { color: var(--on-primary, #111); background: var(--primary); }
.opentube-method.unavailable { opacity: 0.45; cursor: not-allowed; text-decoration: line-through; }
/* Tier and payment-method choice */
.opentube-choice-label { font-size: 0.72em; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-300, inherit); margin: 14px 0 6px; }
.opentube-tiers { display: flex; flex-wrap: wrap; gap: 8px; }
.opentube-tier { position: relative; display: grid; gap: 1px; min-width: 116px; padding: 12px 14px; border: 0; border-radius: 11px; text-align: left; cursor: pointer; color: var(--fg); background: var(--bg-secondary-450, rgba(128, 128, 128, 0.2)); }
.opentube-tier.active { outline: 2px solid var(--primary); background: var(--bg-secondary-500, rgba(128, 128, 128, 0.3)); }
.opentube-tier-flag { position: absolute; top: -8px; right: 8px; font-size: 0.6em; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; color: var(--on-primary, #111); background: var(--primary); }
.opentube-tier-label { font-weight: 600; font-size: 0.9em; }
.opentube-tier-price { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.opentube-tier-rate { font-size: 0.75em; color: var(--fg-300, inherit); font-variant-numeric: tabular-nums; }
/* Admin members list */
.opentube-admin-members { display: grid; gap: 6px; margin-top: 8px; }
.opentube-admin-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 12px; border-radius: 9px; background: var(--bg-secondary-450, rgba(128, 128, 128, 0.16)); }
.opentube-admin-row.expired { opacity: 0.55; }
.opentube-admin-who { display: grid; gap: 1px; min-width: 0; }
.opentube-admin-handle { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opentube-admin-meta { font-size: 0.78em; color: var(--fg-300, inherit); }
.opentube-admin-actions { display: flex; gap: 6px; flex: 0 0 auto; }
/* Decided applications are reference, not work: set off from the live queue so
the eye does not read one long undifferentiated list of people. */
/* A count of work waiting on the operator, carried on the tab itself so it is
visible without opening it. Sized off the chip's own text so it stays put
when the strip wraps. */
.opentube-chip-count {
display: inline-block; margin-left: 6px; padding: 0 6px;
border-radius: 999px; background: var(--primary); color: var(--on-primary, #111);
font-size: 0.78em; font-weight: 700; line-height: 1.5; white-space: nowrap;
}
.opentube-chip.active .opentube-chip-count { background: var(--on-primary, #fff); color: var(--primary); }
/* The two disclosures sit together under the queue; wrapping them keeps the
pair on one row until the page is genuinely too narrow for it. */
.opentube-disclosures { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.opentube-archive { margin-top: 18px; padding-top: 4px; border-top: 1px solid var(--bg-secondary-450, currentColor); }
/* Operations console */
.opentube-field-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin: 12px 0; }
.opentube-field-row .opentube-choice-label { display: grid; gap: 5px; }
.opentube-audit-detail { display: block; max-width: 34ch; overflow-x: auto; white-space: nowrap; font-size: 0.85em; color: var(--fg-300, inherit); }
/* An armed button has to look different from the one you meant to press once. */
.opentube-button.opentube-armed { background: var(--red, #d9534f); color: #fff; }
@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;
}
/*# sourceMappingURL=style.css.map */