.cdl-live-box {
--cdl-live-ok-bg: #e8f5e9;
--cdl-live-ok-fg: #1b5e20;
--cdl-live-err-bg: #ffebee;
--cdl-live-err-fg: #b71c1c;
margin: 1.5rem 0;
padding: 1.25rem 1.5rem;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 12px;
background: #fafafa;
scroll-margin-top: 1rem;
}
.cdl-live-box__toast {
margin: 0 0 0.75rem;
padding: 0.5rem 0.75rem;
border-radius: 8px;
font-size: 0.9rem;
}
.cdl-live-box__toast:not([hidden]) {
animation: cdl-live-toast-in 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
.cdl-live-box__toast--ok {
background: var(--cdl-live-ok-bg);
color: var(--cdl-live-ok-fg);
}
.cdl-live-box__toast--err {
background: var(--cdl-live-err-bg);
color: var(--cdl-live-err-fg);
}
@keyframes cdl-live-toast-in {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.cdl-is-busy {
opacity: 0.65;
pointer-events: none;
transition: opacity 0.2s ease;
}
.cdl-live-box__title {
margin: 0 0 0.35rem;
font-size: 1.25rem;
}
.cdl-live-box__sub {
margin: 0 0 1rem;
font-size: 0.9rem;
color: #555;
}
.cdl-live-box__stats {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 0.75rem;
margin-bottom: 1rem;
}
.cdl-live-stat {
background: #fff;
padding: 0.6rem 0.75rem;
border-radius: 8px;
border: 1px solid #eee;
}
.cdl-live-stat__label {
display: block;
font-size: 0.75rem;
color: #666;
}
.cdl-live-stat__val {
font-size: 1.2rem;
}
.cdl-live-box .cdl-btn {
min-height: 44px;
min-width: 44px;
padding: 0.5rem 1rem;
box-sizing: border-box;
}
.cdl-live-box .cdl-btn--small {
min-height: 40px;
min-width: auto;
padding: 0.35rem 0.65rem;
font-size: 0.875rem;
}
.cdl-live-box__actions .cdl-btn {
margin-right: 0.5rem;
margin-bottom: 0.5rem;
}
.cdl-live-rate {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem;
margin-bottom: 0.5rem;
}
.cdl-live-toggles label {
margin-right: 1rem;
}
.cdl-live-tags .button {
margin: 0.2rem 0.35rem 0.2rem 0;
}
.cdl-live-comment textarea {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.cdl-live-feed {
list-style: none;
margin: 0;
padding: 0;
}
.cdl-live-feed li,
.cdl-live-feed__item {
padding: 0.35rem 0;
border-bottom: 1px solid #eee;
font-size: 0.9rem;
}
.cdl-live-feed__report {
margin-top: 0.35rem;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem;
}
.cdl-js-report-menu[hidden] {
display: none !important;
}
.cdl-js-report-menu:not([hidden]) {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
align-items: center;
}
.cdl-live-feed__report-msg {
font-size: 0.8rem;
color: #1b5e20;
flex-basis: 100%;
}
.cdl-live-nearby__err {
color: #b71c1c;
font-size: 0.9rem;
margin-top: 0.5rem;
}
.cdl-live-feed__type {
font-weight: 600;
margin-right: 0.35rem;
}
.cdl-live-muted {
color: #666;
font-size: 0.95rem;
}
.cdl-live-badge {
display: inline-block;
margin-left: 0.35rem;
font-size: 0.78rem;
font-weight: 600;
color: #b00020;
white-space: nowrap;
}
.cdl-live-nearby {
padding: 1rem;
border-radius: 12px;
border: 1px dashed #ccc;
margin: 1rem 0;
}
.cdl-live-nearby__rgpd {
font-size: 0.85rem;
line-height: 1.45;
color: #6b6b6b;
margin: 0.65rem 0 0;
}
.cdl-live-now-ul {
list-style: disc;
padding-left: 1.25rem;
}
.cdl-org-dash__event {
border-bottom: 1px solid #ddd;
padding: 1rem 0;
}
.cdl-org-dash__mod-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem;
margin-top: 0.35rem;
}
.cdl-org-dash__mod-actions .button {
margin: 0;
}
.cdl-live-mod-msg {
display: inline-block;
margin-left: 0.5rem;
font-size: 0.85rem;
color: #b00020;
}
.cdl-live-mod-msg.cdl-live-mod-msg--ok {
color: #1e4620;
}
.cdl-live-box__gate,
.cdl-live-box__confirm,
.cdl-live-box__mismatch {
margin: 0.75rem 0;
padding: 0.75rem 1rem;
border-radius: 10px;
font-size: 0.95rem;
}
.cdl-live-box__gate {
background: #fff8e1;
border: 1px solid #ffe082;
}
.cdl-live-box__confirm {
background: #e8f5e9;
border: 1px solid #a5d6a7;
}
.cdl-live-box__mismatch {
background: #fff3e0;
border: 1px solid #ffcc80;
}
.cdl-live-box__live-on {
margin: 0 0 0.5rem;
font-weight: 700;
color: #b71c1c;
}
.cdl-live-box__votes[hidden],
.cdl-live-box__gate[hidden],
.cdl-live-box__confirm[hidden],
.cdl-live-box__mismatch[hidden],
.cdl-live-hub-tools[hidden],
.cdl-sound-live[hidden],
.cdl-sound-meter__result[hidden],
.cdl-sound-meter__bar[hidden],
.cdl-sound-meter__status[hidden],
.cdl-sound-meter__feel[hidden],
.cdl-live-box__live-badge[hidden] {
display: none !important;
}
.cdl-live-box__live-badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin: 0 0 0.35rem;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #b71c1c;
}
.cdl-live-box__dot {
width: 0.55rem;
height: 0.55rem;
border-radius: 50%;
background: #e53935;
box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.5);
animation: cdl-live-pulse 1.6s ease-out infinite;
}
@keyframes cdl-live-pulse {
70% { box-shadow: 0 0 0 8px rgba(229, 57, 53, 0); }
100% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0); }
}
.cdl-live-invite {
margin: 0 0 0.5rem;
font-weight: 600;
}
.cdl-live-hub-tools {
margin: 1rem 0;
padding: 0.75rem 0 0;
border-top: 1px solid #eee;
}
.cdl-live-hub-tools__title {
margin: 0 0 0.75rem;
font-size: 1.05rem;
}
.cdl-sound-live,
.cdl-sound-meter {
background: #fff;
border: 1px solid #eee;
border-radius: 10px;
padding: 0.85rem 1rem;
margin: 0 0 0.85rem;
max-width: 100%;
box-sizing: border-box;
}
.cdl-sound-live__kicker,
.cdl-sound-meter__title {
margin: 0 0 0.25rem;
font-weight: 700;
}
.cdl-sound-live__cat,
.cdl-sound-meter__cat {
margin: 0.15rem 0;
font-size: 1.35rem;
font-weight: 700;
}
.cdl-sound-live__meta,
.cdl-sound-live__feel,
.cdl-sound-live__disc,
.cdl-sound-meter__consent,
.cdl-sound-meter__detail,
.cdl-sound-meter__note,
.cdl-sound-meter__contrib {
margin: 0.25rem 0 0;
font-size: 0.875rem;
color: #555;
line-height: 1.4;
}
.cdl-sound-meter__bar {
height: 8px;
border-radius: 999px;
background: #eee;
margin: 0.6rem 0;
overflow: hidden;
}
.cdl-sound-meter__bar-fill {
display: block;
height: 100%;
width: 0;
background: #5c6bc0;
transition: width 0.12s linear;
}
.cdl-sound-meter__feel {
border: 0;
margin: 0.65rem 0;
padding: 0;
min-width: 0;
}
.cdl-sound-meter__feel legend {
font-weight: 600;
margin-bottom: 0.4rem;
}
.cdl-sound-meter .cdl-btn,
.cdl-sound-meter__feel .cdl-btn {
margin: 0.25rem 0.35rem 0.25rem 0;
min-height: 44px;
}
.cdl-sound-meter__feel-btn.is-selected {
background: #e8f5e9;
border-color: #a5d6a7;
}
@media (max-width: 430px) {
.cdl-live-box {
padding: 1rem;
margin: 1rem 0;
}
.cdl-live-box__stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cdl-live-rate {
flex-direction: column;
align-items: stretch;
}
.cdl-live-rate select,
.cdl-live-rate .button {
width: 100%;
}
}
@media (min-width: 1024px) {
.cdl-live-hub-tools {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.75rem;
}
}
@media (prefers-reduced-motion: reduce) {
.cdl-live-box__dot {
animation: none;
}
.cdl-sound-meter__bar-fill {
transition: none;
}
}
@media (prefers-reduced-motion: reduce) {
.cdl-live-box__toast:not([hidden]) {
animation: none;
}
.cdl-live-box .cdl-btn {
transition: none;
}
.cdl-live-box .cdl-btn:active:not(:disabled) {
transform: none;
filter: none;
}
.cdl-is-busy {
transition: none;
}
} .cdl-live-access {
list-style: none;
margin: 0.75rem 0 1rem;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.4rem 0.6rem;
}
.cdl-live-access__item {
font-size: 0.9rem;
line-height: 1.35;
padding: 0.35rem 0.55rem;
border: 1px solid rgba(0, 0, 0, 0.12);
background: rgba(255, 255, 255, 0.55);
}
.cdl-live-access__item--unknown {
border-color: rgba(160, 100, 0, 0.35);
}
.cdl-live-access__item--full {
border-color: rgba(160, 0, 0, 0.35);
}
.cdl-live-insights {
margin: 0 0 1rem;
}
.cdl-live-insights__kicker {
margin: 0 0 0.35rem;
font-size: 0.75rem;
letter-spacing: 0.04em;
text-transform: uppercase;
opacity: 0.75;
}
.cdl-live-insights ul {
list-style: none;
margin: 0 0 0.85rem;
padding: 0;
}
.cdl-live-insights li {
margin: 0.25rem 0;
font-size: 0.98rem;
}
.cdl-live-insights__empty {
opacity: 0.75;
font-style: italic;
}
.cdl-class-form {
margin-top: 0.75rem;
}
.cdl-class-form__q {
font-weight: 600;
margin: 0 0 0.65rem;
}
.cdl-class-form__set {
border: 0;
margin: 0 0 0.85rem;
padding: 0;
}
.cdl-class-form__set legend {
font-size: 0.92rem;
margin-bottom: 0.4rem;
padding: 0;
}
.cdl-class-form__chips {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.cdl-chip {
appearance: none;
border: 1px solid rgba(0, 0, 0, 0.18);
background: #fff;
color: inherit;
min-height: 44px;
padding: 0.45rem 0.75rem;
font: inherit;
cursor: pointer;
border-radius: 2px;
}
.cdl-chip:focus-visible {
outline: 2px solid #1a5f7a;
outline-offset: 2px;
}
.cdl-chip.is-selected,
.cdl-chip[aria-pressed="true"] {
border-color: #1a5f7a;
background: rgba(26, 95, 122, 0.1);
font-weight: 600;
}
.cdl-class-form__more {
margin: 0.5rem 0 0.85rem;
}
.cdl-class-form__more summary {
cursor: pointer;
min-height: 44px;
display: flex;
align-items: center;
}
.cdl-class-form__msg {
margin: 0.5rem 0;
}
.cdl-sound-meter--secondary {
margin: 0.75rem 0;
}
@media (max-width: 390px) {
.cdl-chip {
flex: 1 1 calc(50% - 0.4rem);
}
}
.cdl-moments {
margin-top: 1rem;
}
.cdl-moments__title {
margin: 0 0 0.5rem;
font-size: 1.05rem;
}
.cdl-moments__empty,
.cdl-moments__gate {
margin: 0.35rem 0 0.75rem;
color: #555;
font-size: 0.92rem;
}
.cdl-moments__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 0.6rem;
}
.cdl-moments__item img,
.cdl-moments__item video {
width: 100%;
height: auto;
border-radius: 10px;
display: block;
background: #111;
}
.cdl-moments__age,
.cdl-moments__actions {
margin: 0.25rem 0 0;
font-size: 0.8rem;
}
.cdl-moments__del,
.cdl-moments__report {
background: none;
border: 0;
color: #c62828;
cursor: pointer;
min-height: 44px;
padding: 0 0.4rem;
}
.cdl-live-space {
padding: 0.25rem 0 1.5rem;
}
.cdl-live-space__head {
margin: 0 0 0.85rem;
}
.cdl-live-space__title {
margin: 0;
font-size: 1.25rem;
line-height: 1.2;
}
.cdl-live-space__meta {
margin: 0.25rem 0 0;
font-size: 0.88rem;
color: #555;
}
.cdl-live-space__head--here {
margin-bottom: 0.55rem;
}
.cdl-live-space__kicker {
margin: 0 0 0.15rem;
font-size: 0.86rem;
font-weight: 700;
color: #1b5e20;
}
.cdl-live-space__secondary {
margin-top: 1.15rem;
padding-top: 0.85rem;
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.cdl-contrib {
margin: 1.1rem 0 0.75rem;
padding: 0.9rem 0 0;
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.cdl-contrib h3 {
margin: 0 0 0.55rem;
font-size: 1.05rem;
}
.cdl-contrib--broadcast {
border-top: 0;
padding-top: 0.4rem;
scroll-margin-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
}
.cdl-contrib__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.55rem;
}
.cdl-contrib__cta,
.cdl-moment-sheet__cta {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.2rem;
width: 100%;
min-height: 56px;
padding: 0.55rem 0.45rem;
border: 1px solid #c5c5c5;
border-radius: 12px;
background: #fff;
color: #1a1a1a;
font-size: 0.82rem;
font-weight: 600;
line-height: 1.2;
text-align: center;
white-space: normal;
overflow: visible;
cursor: pointer;
}
.cdl-contrib__ico {
display: block;
font-size: 1.25rem;
line-height: 1;
}
.cdl-contrib__lab {
display: block;
color: #1a1a1a;
}
.cdl-contrib__cta--stream {
background: #8e0000;
color: #fff;
border: 0;
font-weight: 700;
min-height: 56px;
flex-direction: row;
font-size: 1rem;
}
.cdl-moment-sheet {
margin-top: 0.75rem;
padding: 0.85rem;
border-radius: 12px;
background: #fff;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.cdl-moment-sheet--overlay {
position: fixed;
inset: 0;
z-index: 100000;
margin: 0;
padding: 1rem 1rem 1.4rem;
background: #120c0a;
color: #f4ebe1;
border-radius: 0;
overflow: auto;
}
.cdl-moment-sheet__opt {
display: flex;
align-items: stretch;
gap: 0.5rem;
min-height: 44px;
position: relative;
}
.cdl-moment-sheet__file {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.cdl-moment-sheet__cta:focus-visible,
.cdl-live-space__back:focus-visible,
.cdl-stream-viewer__report:focus-visible,
.cdl-contrib__cta:focus-visible {
outline: 2px solid #111;
outline-offset: 2px;
}
.cdl-live-space__back {
min-height: 44px;
margin-bottom: 0.5rem;
background: none;
border: 0;
padding: 0.4rem 0;
cursor: pointer;
text-align: left;
font-weight: 600;
}
.cdl-live-space__here {
font-weight: 600;
}
.cdl-live-space__far {
font-size: 0.9rem;
color: #444;
}
.cdl-stream-viewer {
margin: 0.5rem 0 1rem;
border-radius: 16px;
overflow: hidden;
background: #120c0a;
color: #f4ebe1;
}
.cdl-stream-viewer__player {
position: relative;
aspect-ratio: 16 / 9;
background: #000;
overflow: hidden;
}
.cdl-stream-viewer__player video,
.cdl-stream-viewer__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-height: none;
object-fit: cover;
background: #000;
display: block;
}
.cdl-stream-viewer__player audio,
.cdl-stream-viewer__player [data-cdl-live-audio] {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.cdl-stream-viewer__player--empty {
min-height: 180px;
display: flex;
align-items: center;
justify-content: center;
}
.cdl-stream-viewer__hud {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.65rem 0.85rem 0.2rem;
gap: 0.5rem;
}
.cdl-stream-viewer__badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-weight: 800;
letter-spacing: 0.06em;
margin: 0;
font-size: 0.78rem;
}
.cdl-stream-viewer__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #d32f2f;
}
.cdl-stream-viewer__meta {
padding: 0.35rem 0.85rem 0.5rem;
}
.cdl-stream-viewer__meta h3 {
margin: 0;
font-size: 1.05rem;
}
.cdl-stream-viewer__meta p,
.cdl-stream-viewer__count {
margin: 0.15rem 0 0;
color: #cbb9a6;
font-size: 0.85rem;
}
.cdl-stream-viewer__actions {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
padding: 0 0.85rem 0.9rem;
margin: 0;
}
.cdl-stream-viewer__actions a,
.cdl-stream-viewer__actions button {
min-height: 44px;
background: none;
border: 0;
color: inherit;
text-decoration: underline;
cursor: pointer;
padding: 0.3rem 0;
}
.cdl-stream-viewer__ended {
padding: 2rem 1rem;
text-align: center;
}
.cdl-stream-broadcaster {
position: fixed;
inset: 0;
z-index: 100150;
background: #0b0908;
color: #fff8f0;
display: flex;
flex-direction: column;
height: 100vh;
height: 100dvh;
height: 100svh;
height: var(--cdl-vvh, 100svh);
max-height: 100vh;
max-height: 100dvh;
max-height: 100svh;
max-height: var(--cdl-vvh, 100svh);
overflow: hidden;
overflow-x: hidden;
padding-bottom: 0;
padding-left: env(safe-area-inset-left, 0px);
padding-right: env(safe-area-inset-right, 0px);
box-sizing: border-box;
overscroll-behavior: none;
}
html.cdl-golive-active {
overflow: hidden;
}
html.cdl-golive-active .cdsn-bottom-nav,
html.cdl-golive-active .cdl-global-live--float,
html.cdl-golive-active #cdl-global-live-toggle,
html.cdl-golive-active .cdl-sound-meter-fab {
display: none !important;
pointer-events: none !important;
}
.cdl-stream-broadcaster__stage {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 0.4rem;
}
.cdl-stream-broadcaster__actionbar {
flex-shrink: 0;
z-index: 6;
display: grid;
gap: 0.45rem;
padding: 0.55rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
padding-left: max(1rem, env(safe-area-inset-left, 0px));
padding-right: max(1rem, env(safe-area-inset-right, 0px));
background: #0b0908;
border-top: 1px solid rgba(255, 248, 240, 0.12);
box-shadow: 0 -16px 28px rgba(0, 0, 0, 0.45);
}
@media (display-mode: standalone), html.cdl-standalone-sim {
.cdl-stream-broadcaster__actionbar {
padding-bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
}
}
@media (orientation: landscape) {
.cdl-stream-broadcaster__preview {
height: min(28svh, 180px);
max-height: 28svh;
min-height: 64px;
}
}
.cdl-stream-broadcaster__start-reason {
margin: 0;
min-height: 1.1em;
font-size: 0.88rem;
color: #ffe08a;
}
.cdl-stream-broadcaster__tools {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.cdl-stream-broadcaster__tools button {
min-height: 44px;
}
.cdl-stream-broadcaster h1,
.cdl-stream-broadcaster h2,
.cdl-stream-broadcaster h3,
.cdl-stream-broadcaster h4,
.cdl-stream-broadcaster p,
.cdl-stream-broadcaster .cdl-stream-broadcaster__copy,
.cdl-stream-broadcaster .cdl-stream-broadcaster__copy h2 {
color: #fff8f0 !important;
}
.cdl-stream-broadcaster__preview {
flex: 0 0 auto;
width: 100%;
min-height: 88px;
height: min(34svh, 240px);
object-fit: cover;
background: #000;
max-height: 34svh;
} .cdl-stream-broadcaster.is-live .cdl-stream-broadcaster__stage {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
padding-bottom: 0;
background: #000;
}
.cdl-stream-broadcaster.is-live .cdl-stream-broadcaster__preview {
flex: 1 1 auto;
width: 100%;
height: 100%;
min-height: 0;
max-height: none;
object-fit: cover;
position: absolute;
inset: 0;
z-index: 0;
}
.cdl-stream-broadcaster.is-live .cdl-stream-broadcaster__copy,
.cdl-stream-broadcaster.is-live .cdl-stream-preflight,
.cdl-stream-broadcaster.is-live .cdl-stream-broadcaster__rights,
.cdl-stream-broadcaster.is-live .cdl-stream-broadcaster__audio-mode {
display: none !important;
}
.cdl-stream-broadcaster.is-live .cdl-stream-broadcaster__warn {
position: absolute;
top: max(0.5rem, env(safe-area-inset-top, 0px));
left: 50%;
transform: translateX(-50%);
z-index: 8;
margin: 0;
padding: 0.28rem 0.65rem;
max-width: min(92%, 18rem);
font-size: 0.75rem;
border-radius: 999px;
background: rgba(12, 10, 28, 0.72);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 224, 138, 0.35);
color: #ffe08a !important;
pointer-events: auto;
}
.cdl-stream-broadcaster.is-live .cdl-stream-broadcaster__warn--toast {
display: inline-flex;
align-items: center;
gap: 0.35rem;
z-index: 25;
max-width: min(94%, 22rem);
padding: 0.32rem 0.35rem 0.32rem 0.7rem;
border-radius: 999px;
font-size: 0.72rem;
line-height: 1.25;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); bottom: auto;
}
.cdl-stream-broadcaster.is-live .cdl-stream-broadcaster__warn--toast .cdl-stream-broadcaster__warn-text {
flex: 1 1 auto;
min-width: 0;
}
.cdl-stream-broadcaster.is-live .cdl-stream-broadcaster__warn-dismiss {
flex: 0 0 auto;
width: 28px;
height: 28px;
min-width: 28px;
border: 0;
border-radius: 999px;
background: rgba(255, 248, 240, 0.12);
color: #fff8f0;
font-size: 1rem;
line-height: 1;
cursor: pointer;
padding: 0;
}
.cdl-stream-broadcaster.is-live .cdl-social-live-root {
position: absolute;
inset: 0;
z-index: 6;
pointer-events: none;
padding: 0;
background: transparent;
}
.cdl-stream-broadcaster.is-live .cdl-stream-broadcaster__actionbar {
background: rgba(11, 9, 8, 0.92);
backdrop-filter: blur(10px);
z-index: 40;
gap: 0.35rem;
padding: 0.45rem 0.65rem calc(0.55rem + env(safe-area-inset-bottom, 0px));
}
.cdl-stream-broadcaster.is-live .cdl-stream-broadcaster__tools {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 0.3rem;
width: 100%;
}
.cdl-stream-broadcaster.is-live .cdl-stream-broadcaster__tools button {
min-width: 0;
width: 100%;
padding: 0.35rem 0.2rem;
font-size: 0.78rem;
border-radius: 12px;
background: rgba(255, 248, 240, 0.1);
border: 1px solid rgba(255, 248, 240, 0.14);
color: #fff8f0;
}
.cdl-creator-livebar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem;
width: 100%;
position: relative;
z-index: 12;
flex-shrink: 0;
}
.cdl-creator-livebar__meta {
margin: 0;
flex: 1 1 100%;
font-weight: 700;
font-size: 0.84rem;
color: #fff8f0 !important;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cdl-creator-livebar__actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.4rem;
width: 100%;
flex: 1 1 100%;
}
.cdl-stream-broadcaster.is-live .cdl-creator-livebar .cdl-stream-broadcaster__end,
.cdl-stream-broadcaster.is-live .cdl-creator-livebar .cdl-stream-broadcaster__pause {
flex: none;
width: 100%;
max-width: none;
min-width: 0;
min-height: 48px;
padding: 0 0.5rem;
font-size: 0.92rem;
border-radius: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cdl-stream-broadcaster__audio-compact {
display: none;
}
.cdl-stream-broadcaster.is-live .cdl-stream-broadcaster__audio-compact {
display: inline-flex;
align-items: center;
gap: 0.25rem;
min-height: 36px;
padding: 0 0.65rem;
border-radius: 999px;
border: 1px solid rgba(255, 248, 240, 0.2);
background: rgba(12, 10, 28, 0.55);
color: #fff8f0;
font-size: 0.78rem;
cursor: pointer;
}
.cdl-stream-broadcaster__more-menu {
position: absolute;
right: 0;
bottom: calc(100% + 0.4rem);
left: auto;
min-width: 12rem;
max-width: min(18rem, calc(100vw - 1.5rem - env(safe-area-inset-right, 0px)));
max-height: min(36vh, 12rem);
overflow: auto;
padding: 0.35rem;
border-radius: 12px;
background: rgba(12, 10, 28, 0.96);
border: 1px solid rgba(255, 248, 240, 0.16);
z-index: 30;
display: grid;
gap: 0.2rem;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.cdl-stream-broadcaster__more-menu[hidden] {
display: none !important;
}
.cdl-stream-broadcaster.is-live .cdl-creator-livebar {
position: relative;
z-index: 50;
}
.cdl-stream-broadcaster.is-live .cdl-stream-broadcaster__tools {
z-index: 8;
}
.cdl-creator-livebar {
z-index: 20;
overflow: visible;
}
.cdl-qa-florent-code {
margin: 0.25rem 0 0.6rem;
font-size: 1.85rem;
font-weight: 800;
letter-spacing: 0.22em;
font-variant-numeric: tabular-nums;
}
.cdl-stream-broadcaster__more-menu button {
min-height: 44px;
border: 0;
border-radius: 10px;
background: transparent;
color: #fff8f0;
text-align: left;
padding: 0 0.7rem;
cursor: pointer;
font: inherit;
}
.cdl-stream-broadcaster__more-menu button:hover,
.cdl-stream-broadcaster__more-menu button:focus {
background: rgba(255, 248, 240, 0.08);
}
.cdl-qa-florent-phone {
margin: 0.75rem 0;
padding: 0.85rem 1rem;
border-radius: 14px;
background: rgba(196, 164, 232, 0.08);
border: 1px solid rgba(196, 164, 232, 0.28);
}
.cdl-qa-florent-phone h2 {
margin: 0 0 0.35rem;
font-size: 1.05rem;
}
.cdl-qa-florent-url {
word-break: break-all;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.82rem;
opacity: 0.9;
}
.cdl-qa-florent-qr {
margin-top: 0.5rem;
display: inline-block;
padding: 0.5rem;
background: #fff;
border-radius: 8px;
}
.cdl-stream-broadcaster__hud {
position: absolute;
top: max(0.75rem, env(safe-area-inset-top, 0px));
left: 0.75rem;
right: 0.75rem;
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1rem;
align-items: center;
pointer-events: none;
font-weight: 700;
color: #fff8f0;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
}
.cdl-stream-broadcaster__hud[hidden],
.cdl-stream-broadcaster.is-live .cdl-stream-broadcaster__hud {
display: none !important;
} .cdl-stream-broadcaster.is-live .cdl-stream-broadcaster__hud[hidden],
.cdl-stream-broadcaster.is-live .cdl-stream-broadcaster__hud {
display: none !important;
}
.cdl-stream-broadcaster__copy {
padding: 0.75rem 1rem 0;
flex-shrink: 0;
}
.cdl-stream-broadcaster__copy h2 {
margin: 0 0 0.25rem;
font-size: 1.2rem;
color: #fff8f0 !important;
}
.cdl-stream-broadcaster__status {
margin: 0.35rem 1rem 0;
min-height: 1.2em;
color: #fff8f0;
flex-shrink: 0;
}
.cdl-stream-preflight {
list-style: none;
margin: 0.4rem 1rem 0;
padding: 0.6rem 0.75rem;
background: rgba(7, 6, 20, 0.55);
border: 1px solid rgba(255, 248, 240, 0.18);
border-radius: 10px;
color: #fff8f0;
font-size: 0.88rem;
line-height: 1.45;
max-width: none;
}
.cdl-stream-preflight li { margin: 0.15rem 0; }
.cdl-stream-viewer--state {
padding: 1.5rem 1.2rem 2rem;
min-height: 180px;
}
.cdl-stream-broadcaster__rights {
font-size: 0.82rem;
color: #e8d7c4 !important;
}
.cdl-stream-broadcaster__controls {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
flex-shrink: 0;
padding: 0.35rem 0 0;
}
.cdl-stream-broadcaster__controls button {
min-height: 48px;
padding: 0.45rem 0.9rem;
border-radius: 999px;
border: 0;
cursor: pointer;
}
.cdl-stream-broadcaster__go {
background: #c62828;
color: #fff;
font-weight: 800;
flex: 1 1 100%;
min-height: 56px;
width: 100%;
}
.cdl-stream-broadcaster__go:disabled {
opacity: 0.55;
color: #fff;
}
.cdl-stream-broadcaster__end {
background: #fff;
color: #8e0000;
font-weight: 800;
flex: 1 1 100%;
min-height: 56px;
}
.cdl-creator-livebar {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 0.4rem 0.55rem;
width: 100%;
position: relative;
z-index: 12;
flex-shrink: 0;
}
.cdl-creator-livebar[hidden] {
display: none !important;
} .cdl-stream-broadcaster.is-live .cdl-stream-broadcaster__go,
.cdl-stream-broadcaster.is-live .cdl-stream-broadcaster__start-reason {
display: none !important;
}
.cdl-stream-broadcaster__pause {
background: rgba(255, 248, 240, 0.14);
color: #fff8f0;
font-weight: 800;
border: 1px solid rgba(255, 248, 240, 0.28);
border-radius: 12px;
cursor: pointer;
}
.cdl-stream-broadcaster.is-paused .cdl-stream-broadcaster__pause {
background: #fff8f0;
color: #1a1410;
}
.cdl-stream-broadcaster__actionbar {
z-index: 12;
position: relative;
}
.cdl-stream-broadcaster__confirm {
position: absolute;
left: 0.75rem;
right: 0.75rem;
bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
z-index: 20;
background: #1a1410;
border: 1px solid rgba(255, 248, 240, 0.22);
border-radius: 14px;
padding: 0.85rem 0.9rem;
display: flex;
flex-direction: column;
gap: 0.45rem;
box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.45);
}
.cdl-stream-broadcaster__confirm p {
margin: 0;
font-weight: 700;
}
.cdl-stream-viewer__unmute {
position: absolute;
right: 0.75rem;
bottom: 0.75rem;
z-index: 4;
min-height: 44px;
padding: 0 0.9rem;
border: 0;
border-radius: 999px;
background: #fff8f0;
color: #1a1410;
font-weight: 700;
cursor: pointer;
}
.cdl-stream-viewer__player {
position: relative;
}
.cdl-stream-studio-end {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.75rem;
padding: 1.25rem 1.1rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
color: #fff8f0;
}
.cdl-stream-studio-end h2,
.cdl-stream-studio-end p {
color: #fff8f0 !important;
margin: 0;
}
.cdl-stream-studio-end__steps {
list-style: none;
margin: 0.4rem 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.cdl-stream-studio-end__note {
font-size: 0.92rem;
color: #e8d7c4 !important;
}
.cdl-stream-studio-end__cta,
.cdl-stream-studio-end__close {
display: flex;
align-items: center;
justify-content: center;
min-height: 56px;
padding: 0.55rem 0.9rem;
border-radius: 12px;
border: 0;
font-weight: 700;
text-decoration: none;
cursor: pointer;
background: #fff;
color: #1a1a1a;
}
.cdl-stream-studio-end__cta--ghost,
.cdl-stream-studio-end__close {
background: transparent;
color: #fff8f0;
border: 1px solid rgba(255, 248, 240, 0.45);
}
a.cdl-stream-studio-end__close--hub {
background: #fff8f0;
color: #1a1410;
border: 0;
}
.cdl-moment-sheet__preview img,
.cdl-moment-sheet__preview video {
width: 100%;
max-height: 68vh;
object-fit: contain;
border-radius: 8px;
background: #000;
}
.cdl-moment-sheet__preview-actions {
display: flex;
gap: 0.5rem;
margin-top: auto;
}
.cdl-moment-sheet__preview-actions button {
flex: 1;
min-height: 48px;
}
.cdl-moment-sheet progress {
width: 100%;
}
.cdl-event-media {
margin: 1rem 0 5.5rem;
font-family: system-ui, sans-serif;
}
.cdl-event-media__live {
background: #12102a;
color: #f4eef8;
border-radius: 16px;
padding: 1rem 1rem 1.15rem;
margin-bottom: 0.85rem;
border: 1px solid rgba(229, 57, 53, 0.35);
}
.cdl-event-media__strip {
background: #16132c;
color: #f4eef8;
border-radius: 16px;
padding: 1rem;
}
.cdl-event-media__live-badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin: 0;
font-weight: 800;
letter-spacing: 0.08em;
font-size: 0.75rem;
}
.cdl-event-media__live h2 {
margin: 0.35rem 0 0.3rem;
font-size: 1.2rem;
}
.cdl-event-media__title {
margin: 0 0 0.35rem;
font-size: 1.15rem;
}
.cdl-event-media__counts {
margin: 0 0 0.7rem;
color: #cbb9a6;
font-size: 0.9rem;
}
.cdl-event-media__thumbs {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 0.45rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.cdl-event-media__thumb {
padding: 0;
border: 0;
background: none;
border-radius: 10px;
overflow: hidden;
width: 92px;
height: 92px;
flex: 0 0 auto;
cursor: pointer;
}
.cdl-event-media__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.cdl-event-media__all {
margin-top: 0.75rem;
min-height: 44px;
border: 0;
border-radius: 999px;
padding: 0 1rem;
background: #e84c9a;
color: #fff;
font-weight: 700;
cursor: pointer;
}
.cdl-event-media__overlay {
position: fixed;
inset: 0;
z-index: 99990;
background: rgba(8, 6, 5, 0.55);
display: flex;
align-items: flex-end;
}
.cdl-event-media__overlay[hidden] { display: none !important; }
.cdl-event-media__sheet {
width: 100%;
max-height: 94vh;
overflow: auto;
background: #120c0a;
color: #f4ebe1;
border-radius: 18px 16px 0 0;
padding: 0.85rem 1rem 1.4rem;
}
.cdl-event-media__sheet-head {
display: flex;
align-items: center;
gap: 0.7rem;
}
.cdl-event-media__close {
min-height: 44px;
background: none;
border: 0;
color: inherit;
cursor: pointer;
}
.cdl-event-media__tabs {
display: flex;
gap: 0.4rem;
overflow-x: auto;
padding: 0.6rem 0;
}
.cdl-event-media__tabs button {
min-height: 40px;
padding: 0 0.8rem;
border: 0;
border-radius: 999px;
background: rgba(255,255,255,0.08);
color: inherit;
cursor: pointer;
}
.cdl-event-media__tabs button.is-active { background: #c62828; font-weight: 700; }
.cdl-event-media__viewer img,
.cdl-event-media__viewer video {
width: 100%;
max-height: 70vh;
border-radius: 12px;
background: #000;
display: block;
margin: 0.4rem 0 0.8rem;
}
.cdl-event-media__grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 0.55rem;
}
.cdl-event-media__open {
padding: 0;
border: 0;
background: none;
width: 100%;
cursor: pointer;
border-radius: 10px;
overflow: hidden;
}
.cdl-event-media__item img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
display: block;
}
.cdl-event-media__hub {
margin: 0.9rem 0 0;
font-size: 0.9rem;
}
.cdl-event-media__hub a { color: #e4c48a; }
.cdl-espace-od {
border: 1px solid rgba(232, 76, 154, 0.22);
box-shadow: 0 8px 22px rgba(42, 16, 48, 0.08);
}
.cdl-espace-od .cdm-h2 { margin: 0; }
.cdl-espace-od .cdm-btn--pink { min-height: 44px; }
@media (min-width: 782px) {
.cdl-event-media {
margin-bottom: 1.5rem;
}
.cdl-event-media__overlay {
align-items: center;
justify-content: center;
padding: 2rem;
}
.cdl-event-media__sheet {
max-width: 920px;
max-height: 88vh;
border-radius: 18px;
}
}
@media (max-width: 319px) {
.cdl-contrib__grid {
grid-template-columns: 1fr;
}
}
.cdl-stream-broadcaster__audio-mode {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
padding: 0.35rem 1rem 0;
flex-shrink: 0;
}
.cdl-stream-broadcaster__audio-mode button {
min-height: 44px;
padding: 0.35rem 0.85rem;
border-radius: 999px;
border: 1px solid rgba(255, 248, 240, 0.28);
background: rgba(7, 6, 20, 0.45);
color: #fff8f0;
cursor: pointer;
}
.cdl-stream-broadcaster__audio-mode button[aria-pressed="true"] {
background: rgba(232, 76, 154, 0.55);
border-color: transparent;
}
.cdl-stream-broadcaster__vu {
display: flex;
align-items: center;
gap: 0.55rem;
padding: 0.25rem 1rem 0;
font-size: 0.8rem;
color: #efe6f6;
flex-shrink: 0;
}
.cdl-stream-broadcaster__vu meter {
flex: 1 1 auto;
height: 8px;
max-width: 12rem;
}
.cdl-stream-broadcaster__warn {
margin: 0.25rem 1rem 0;
padding: 0.45rem 0.7rem;
border-radius: 10px;
background: rgba(18, 10, 36, 0.72);
color: #ffe7c2;
font-size: 0.85rem;
flex-shrink: 0;
}
.cdl-stream-broadcaster__camera-fail {
margin: 0.5rem 1rem;
padding: 0.85rem 1rem;
border-radius: 14px;
background: rgba(12, 8, 28, 0.92);
display: flex;
flex-direction: column;
gap: 0.55rem;
flex-shrink: 0;
}
.cdl-stream-broadcaster__camera-fail p {
margin: 0;
font-weight: 600;
}
.cdl-live-diag {
margin: 0.5rem 1rem 1rem;
padding: 0.7rem 0.85rem;
border-radius: 12px;
background: rgba(8, 7, 22, 0.9);
color: #efe8f6;
font-size: 0.72rem;
max-height: 36vh;
overflow: auto;
flex-shrink: 0;
}
.cdl-live-diag pre {
white-space: pre-wrap;
margin: 0 0 0.45rem;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.cdl-live-match__search {
margin-top: 0.85rem;
}
.cdl-live-match__search-label {
display: block;
font-size: 0.85rem;
margin-bottom: 0.3rem;
}
.cdl-live-match__search-input {
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: 0.55rem 0.7rem;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(8, 7, 22, 0.35);
color: inherit;
font: inherit;
}
.cdl-live-match__org {
display: block;
font-size: 0.8rem;
opacity: 0.82;
margin: 0.15rem 0 0;
}
.cdl-live-match__card {
display: block;
width: 100%;
text-align: left;
margin: 0.4rem 0 0.7rem;
} .cdl-stream-image-panel {
position: absolute;
left: 0.5rem;
right: 0.5rem;
bottom: calc(5.2rem + env(safe-area-inset-bottom, 0px));
z-index: 55;
max-height: min(62svh, 26rem);
overflow: auto;
padding: 0.75rem 0.85rem;
border-radius: 14px;
background: rgba(10, 8, 20, 0.96);
border: 1px solid rgba(255, 248, 240, 0.14);
display: grid;
gap: 0.45rem;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}
.cdl-stream-image-panel h3 {
margin: 0;
font-size: 0.95rem;
color: #fff8f0;
}
.cdl-stream-image-panel__note {
margin: 0;
font-size: 0.75rem;
opacity: 0.75;
color: #fff8f0;
}
.cdl-stream-image-panel__row {
display: grid;
gap: 0.25rem;
font-size: 0.8rem;
color: #fff8f0;
}
.cdl-stream-image-panel__row input[type="range"] {
width: 100%;
accent-color: #e84c9a;
}
.cdl-stream-image-panel__acts {
display: flex;
gap: 0.4rem;
justify-content: flex-end;
flex-wrap: wrap;
}
.cdl-stream-image-panel__acts button {
min-height: 44px;
padding: 0 0.85rem;
border-radius: 10px;
border: 1px solid rgba(255, 248, 240, 0.18);
background: rgba(255, 248, 240, 0.08);
color: #fff8f0;
cursor: pointer;
font: inherit;
}
.cdl-stream-broadcaster__warn-cta {
margin-left: 0.45rem;
min-height: 32px;
padding: 0 0.55rem;
border-radius: 999px;
border: 1px solid rgba(255, 224, 138, 0.45);
background: rgba(12, 10, 28, 0.55);
color: #ffe08a;
font: inherit;
font-size: 0.72rem;
cursor: pointer;
}
@media (min-width: 900px) {
.cdl-stream-image-panel {
left: auto;
right: calc(clamp(320px, 28vw, 400px) + 0.75rem);
width: min(22rem, 36vw);
bottom: 1.25rem;
}
.cdl-stream-broadcaster.is-live .cdl-stream-broadcaster__tools {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
} .cdl-stream-broadcaster.is-live .cdl-stream-broadcaster__preview {
z-index: 0;
}
.cdl-stream-broadcaster.is-live .cdl-social-live-root {
z-index: 20;
}
.cdl-stream-broadcaster.is-live .cdl-stream-broadcaster__warn--toast,
.cdl-stream-broadcaster.is-live .cdl-stream-broadcaster__warn--dark {
z-index: 55;
pointer-events: auto;
}
.cdl-stream-broadcaster.is-live .cdl-stream-broadcaster__actionbar {
z-index: 70 !important;
position: relative;
}
.cdl-stream-broadcaster.is-live .cdl-creator-livebar {
z-index: 71 !important;
}
.cdl-stream-broadcaster__confirm,
.cdl-stream-broadcaster__confirm--priority {
position: fixed !important;
left: 0.75rem !important;
right: 0.75rem !important;
bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)) !important;
top: auto !important;
z-index: 90 !important;
max-height: min(70dvh, 24rem);
overflow: auto;
background: rgba(18, 14, 28, 0.98) !important;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}
.cdl-stream-broadcaster__confirm-keep,
.cdl-stream-broadcaster__confirm-stop {
min-height: 48px !important;
width: 100%;
pointer-events: auto !important;
}
.cdl-stream-image-panel {
z-index: 48 !important;
bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
}
.cdl-stream-broadcaster.is-live .cdl-stream-broadcaster__warn--dark {
position: absolute;
top: max(0.5rem, env(safe-area-inset-top, 0px));
left: 50%;
transform: translateX(-50%);
max-width: min(92%, 16rem);
font-size: 0.72rem;
padding: 0.28rem 0.55rem;
border-radius: 999px;
}
.cdl-stream-broadcaster.is-live .cdl-stream-broadcaster__warn--dark .cdl-stream-broadcaster__warn-cta {
display: none; }
.cdl-stream-broadcaster:not(.is-live) .cdl-stream-broadcaster__warn--dark .cdl-stream-broadcaster__warn-cta {
display: inline-flex;
}
.cdl-stream-broadcaster.is-live .cdl-stream-broadcaster__tools button {
min-height: 44px;
min-width: 44px;
}