128 lines
1.9 KiB
CSS
128 lines
1.9 KiB
CSS
.page-heading {
|
||
margin-bottom: 22px;
|
||
}
|
||
|
||
.page-heading h2 {
|
||
margin: 0;
|
||
font-size: 1.8rem;
|
||
}
|
||
|
||
.page-heading p {
|
||
color: var(--muted);
|
||
margin: 6px 0 0;
|
||
}
|
||
|
||
.day-toolbar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 16px;
|
||
align-items: center;
|
||
margin-bottom: 22px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.day-nav {
|
||
display: flex;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.button-link {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: var(--panel-2);
|
||
color: var(--text);
|
||
border: 1px solid var(--border);
|
||
border-radius: 10px;
|
||
padding: 10px 14px;
|
||
text-decoration: none;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.button-link:hover {
|
||
background: var(--accent-soft);
|
||
}
|
||
|
||
.day-filter {
|
||
display: flex;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.day-filter input,
|
||
.day-filter select {
|
||
background: #020617;
|
||
color: var(--text);
|
||
border: 1px solid var(--border);
|
||
border-radius: 10px;
|
||
padding: 10px 12px;
|
||
}
|
||
|
||
.day-list {
|
||
display: grid;
|
||
gap: 20px;
|
||
}
|
||
|
||
.day-channel {
|
||
background: var(--panel);
|
||
border: 1px solid var(--border);
|
||
border-radius: 18px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.day-channel-header {
|
||
background: var(--panel-2);
|
||
padding: 15px 18px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.day-programme {
|
||
display: grid;
|
||
grid-template-columns: 92px 1fr;
|
||
gap: 16px;
|
||
padding: 16px 18px;
|
||
border-top: 1px solid var(--border);
|
||
}
|
||
|
||
.day-programme.is-past {
|
||
opacity: 0.55;
|
||
}
|
||
|
||
.day-time {
|
||
color: var(--muted);
|
||
font-weight: 800;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
|
||
.day-programme-body h3 {
|
||
margin: 0;
|
||
font-size: 1.08rem;
|
||
}
|
||
|
||
.day-programme-body p {
|
||
color: #cbd5e1;
|
||
margin: 10px 0 0;
|
||
line-height: 1.45;
|
||
}
|
||
|
||
@media (max-width: 700px) {
|
||
.day-programme {
|
||
grid-template-columns: 1fr;
|
||
gap: 8px;
|
||
}
|
||
|
||
.day-time {
|
||
flex-direction: row;
|
||
}
|
||
|
||
.day-time span:first-child::after {
|
||
content: "–";
|
||
margin-left: 8px;
|
||
}
|
||
}
|