182 lines
2.7 KiB
CSS
182 lines
2.7 KiB
CSS
:root {
|
|
color-scheme: light;
|
|
font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
|
|
background: #eef3f1;
|
|
color: #16211f;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
background:
|
|
linear-gradient(135deg, rgba(23, 86, 77, 0.12), transparent 38%),
|
|
linear-gradient(315deg, rgba(222, 128, 74, 0.16), transparent 44%),
|
|
#eef3f1;
|
|
}
|
|
|
|
.shell {
|
|
display: grid;
|
|
min-height: 100vh;
|
|
place-items: center;
|
|
padding: 32px;
|
|
}
|
|
|
|
.panel {
|
|
width: min(1040px, 100%);
|
|
padding: 24px;
|
|
border: 1px solid rgba(28, 48, 44, 0.16);
|
|
border-radius: 8px;
|
|
background: rgba(255, 255, 255, 0.86);
|
|
box-shadow: 0 24px 70px rgba(41, 57, 52, 0.16);
|
|
}
|
|
|
|
.title-row {
|
|
display: flex;
|
|
align-items: start;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.eyebrow {
|
|
margin: 0 0 6px;
|
|
color: #66736f;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
h1 {
|
|
margin: 0;
|
|
font-size: clamp(28px, 5vw, 54px);
|
|
font-weight: 800;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.video-stage {
|
|
position: relative;
|
|
}
|
|
|
|
video {
|
|
display: block;
|
|
width: 100%;
|
|
aspect-ratio: 16 / 9;
|
|
border-radius: 6px;
|
|
background: #101817;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.play-overlay {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
min-width: 132px;
|
|
transform: translate(-50%, -50%);
|
|
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
|
|
}
|
|
|
|
.play-overlay[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
margin-top: 18px;
|
|
}
|
|
|
|
button,
|
|
.link-button {
|
|
min-height: 42px;
|
|
padding: 0 18px;
|
|
border: 1px solid #1f5f55;
|
|
border-radius: 6px;
|
|
background: #1f5f55;
|
|
color: #fff;
|
|
font: inherit;
|
|
font-weight: 700;
|
|
line-height: 42px;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.55;
|
|
}
|
|
|
|
.secondary {
|
|
border-color: rgba(31, 95, 85, 0.28);
|
|
background: #fff;
|
|
color: #1f5f55;
|
|
}
|
|
|
|
.metric {
|
|
align-items: center;
|
|
display: inline-flex;
|
|
min-height: 42px;
|
|
padding: 0 12px;
|
|
border: 1px solid rgba(31, 95, 85, 0.2);
|
|
border-radius: 6px;
|
|
background: rgba(255, 255, 255, 0.72);
|
|
color: #40504c;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.badge {
|
|
flex: 0 0 auto;
|
|
border-radius: 999px;
|
|
padding: 8px 12px;
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.idle {
|
|
background: #e5e9e7;
|
|
color: #576560;
|
|
}
|
|
|
|
.connecting {
|
|
background: #fff2d7;
|
|
color: #8c5814;
|
|
}
|
|
|
|
.live {
|
|
background: #dff4e8;
|
|
color: #17613b;
|
|
}
|
|
|
|
.message {
|
|
margin: 14px 0 0;
|
|
color: #5f6c68;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
@media (max-width: 680px) {
|
|
.shell {
|
|
padding: 14px;
|
|
}
|
|
|
|
.panel {
|
|
padding: 16px;
|
|
}
|
|
|
|
.title-row {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
}
|
|
|
|
button,
|
|
.link-button,
|
|
.metric {
|
|
width: 100%;
|
|
text-align: center;
|
|
justify-content: center;
|
|
}
|
|
} |