Add public OBS overlay modes, themes and token protection
This commit is contained in:
larssand
289
src/styles.css
289
src/styles.css
@@ -1289,6 +1289,295 @@ select:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.overlay-shell-public {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.overlay-shell-obs .overlay-header {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.overlay-obs-layout {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.overlay-obs-config {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.overlay-obs-config .panel-header-inline {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.overlay-obs-config .panel-header-inline span {
|
||||
color: var(--muted);
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.overlay-obs-main {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 8px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.overlay-obs-brandline,
|
||||
.overlay-obs-feature,
|
||||
.overlay-obs-standings,
|
||||
.overlay-obs-clockblock {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
background: color-mix(in srgb, var(--panel) 90%, transparent);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.overlay-obs-brandline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.overlay-obs-logo {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.overlay-obs-brandline h2 {
|
||||
margin: 0;
|
||||
font-family: Orbitron, sans-serif;
|
||||
font-size: clamp(1rem, 1.65vw, 1.45rem);
|
||||
line-height: 1.05;
|
||||
}
|
||||
|
||||
.overlay-obs-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px 8px;
|
||||
margin-top: 4px;
|
||||
color: var(--muted);
|
||||
font-size: 0.58rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.overlay-obs-clockblock {
|
||||
min-width: 190px;
|
||||
padding: 8px 12px;
|
||||
display: grid;
|
||||
align-content: center;
|
||||
justify-items: end;
|
||||
}
|
||||
|
||||
.overlay-obs-clockblock strong {
|
||||
font-family: Orbitron, sans-serif;
|
||||
font-size: clamp(1.4rem, 2.2vw, 2.15rem);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.overlay-obs-clockblock span {
|
||||
color: var(--muted);
|
||||
font-size: 0.62rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.overlay-obs-content {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(240px, 0.78fr) minmax(0, 1.42fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.overlay-obs-feature,
|
||||
.overlay-obs-standings {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.overlay-fastest-banner-obs {
|
||||
min-height: 112px;
|
||||
}
|
||||
|
||||
.overlay-obs-gridhint {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
margin-top: 8px;
|
||||
color: var(--muted);
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
.overlay-obs-gridhint strong {
|
||||
color: var(--text);
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
.overlay-obs-standings {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.overlay-obs-row {
|
||||
display: grid;
|
||||
grid-template-columns: 26px minmax(150px, 1.5fr) repeat(4, minmax(66px, 0.44fr));
|
||||
gap: 5px;
|
||||
align-items: center;
|
||||
padding: 5px 6px;
|
||||
border: 1px solid color-mix(in srgb, var(--line) 84%, white 16%);
|
||||
border-radius: 8px;
|
||||
background: var(--surface-card);
|
||||
}
|
||||
|
||||
.overlay-obs-row-leader {
|
||||
border-color: color-mix(in srgb, var(--accent) 58%, var(--line) 42%);
|
||||
background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), var(--surface-card));
|
||||
}
|
||||
|
||||
.overlay-obs-driver strong,
|
||||
.overlay-obs-metric strong {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.overlay-obs-driver strong {
|
||||
font-size: clamp(0.76rem, 0.95vw, 0.9rem);
|
||||
line-height: 1.05;
|
||||
}
|
||||
|
||||
.overlay-obs-driver span,
|
||||
.overlay-obs-metric label {
|
||||
color: var(--muted);
|
||||
font-size: 0.54rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.overlay-shell-obs-layout-grid .overlay-header,
|
||||
.overlay-shell-obs-layout-lowerthird .overlay-header {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.overlay-obs-feature-gridonly {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.overlay-obs-lowerthird {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
align-content: end;
|
||||
min-height: calc(100vh - 32px);
|
||||
}
|
||||
|
||||
.overlay-obs-lowerthird-head,
|
||||
.overlay-obs-lowerthird-rows {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
background: color-mix(in srgb, var(--panel) 92%, transparent);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.overlay-obs-lowerthird-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: end;
|
||||
gap: 12px;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.overlay-obs-lowerthird-head h2 {
|
||||
margin: 0;
|
||||
font-family: Orbitron, sans-serif;
|
||||
font-size: clamp(1rem, 1.6vw, 1.4rem);
|
||||
}
|
||||
|
||||
.overlay-obs-lowerthird-clock {
|
||||
font-family: Orbitron, sans-serif;
|
||||
font-size: clamp(1.1rem, 1.8vw, 1.6rem);
|
||||
}
|
||||
|
||||
.overlay-obs-lowerthird-rows {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.overlay-obs-lowerthird-row {
|
||||
display: grid;
|
||||
grid-template-columns: 24px minmax(180px, 1fr) repeat(3, auto);
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
padding: 6px 8px;
|
||||
border-radius: 8px;
|
||||
background: var(--surface-card);
|
||||
}
|
||||
|
||||
.overlay-obs-lowerthird-row strong {
|
||||
font-size: 0.92rem;
|
||||
line-height: 1.05;
|
||||
}
|
||||
|
||||
.overlay-obs-lowerthird-row span {
|
||||
color: var(--muted);
|
||||
font-size: 0.68rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.overlay-shell-obs-theme-transparent {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.overlay-shell-obs-theme-transparent .overlay-obs-brandline,
|
||||
.overlay-shell-obs-theme-transparent .overlay-obs-feature,
|
||||
.overlay-shell-obs-theme-transparent .overlay-obs-standings,
|
||||
.overlay-shell-obs-theme-transparent .overlay-obs-clockblock,
|
||||
.overlay-shell-obs-theme-transparent .overlay-obs-lowerthird-head,
|
||||
.overlay-shell-obs-theme-transparent .overlay-obs-lowerthird-rows {
|
||||
background: color-mix(in srgb, var(--panel) 72%, transparent);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.overlay-shell-obs-theme-chroma {
|
||||
background: #00ff00;
|
||||
}
|
||||
|
||||
.overlay-shell-obs-theme-chroma .overlay-header,
|
||||
.overlay-shell-obs-theme-chroma .overlay-kicker,
|
||||
.overlay-shell-obs-theme-chroma .overlay-header-sub,
|
||||
.overlay-shell-obs-theme-chroma .overlay-status {
|
||||
color: #101010;
|
||||
}
|
||||
|
||||
.overlay-shell-obs-theme-chroma .overlay-obs-brandline,
|
||||
.overlay-shell-obs-theme-chroma .overlay-obs-feature,
|
||||
.overlay-shell-obs-theme-chroma .overlay-obs-standings,
|
||||
.overlay-shell-obs-theme-chroma .overlay-obs-clockblock,
|
||||
.overlay-shell-obs-theme-chroma .overlay-obs-lowerthird-head,
|
||||
.overlay-shell-obs-theme-chroma .overlay-obs-lowerthird-rows,
|
||||
.overlay-shell-obs-theme-chroma .overlay-fastest-banner-obs {
|
||||
background: rgba(9, 10, 18, 0.92);
|
||||
border-color: rgba(255, 255, 255, 0.14);
|
||||
}
|
||||
|
||||
.overlay-shell-obs-theme-chroma .overlay-obs-row,
|
||||
.overlay-shell-obs-theme-chroma .overlay-obs-lowerthird-row {
|
||||
background: rgba(20, 22, 33, 0.94);
|
||||
}
|
||||
|
||||
.overlay-shell-obs-theme-chroma .overlay-fullscreen-btn {
|
||||
background: rgba(20, 22, 33, 0.9);
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.overlay-obs-content {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.overlay-obs-row {
|
||||
grid-template-columns: 24px minmax(120px, 1.3fr) repeat(4, minmax(60px, 0.44fr));
|
||||
}
|
||||
}
|
||||
|
||||
.overlay-speaker {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
|
||||
|
||||
Reference in New Issue
Block a user