Refine live control and show overview
This commit is contained in:
hnzio committed
1 parent
ec596d442e
commit
b1474bc33d
16 files changed
+1580
-405
No files matched your search
+562
-109
@@ -1002,11 +1002,9 @@ textarea:focus {
|
||||
display: grid;
|
||||
position: relative;
|
||||
z-index: 60;
|
||||
grid-template-columns: minmax(12rem, 1fr) auto minmax(8rem, 0.55fr) auto;
|
||||
align-items: center;
|
||||
gap: 0.65rem;
|
||||
gap: 0.4rem;
|
||||
min-width: 0;
|
||||
padding: 0.55rem 0.65rem;
|
||||
padding: 0.45rem 0.55rem;
|
||||
border: 1px solid color-mix(in srgb, var(--gold) 24%, var(--line));
|
||||
border-radius: 0.9rem;
|
||||
background: var(--glass);
|
||||
@@ -1014,22 +1012,41 @@ textarea:focus {
|
||||
backdrop-filter: blur(20px) saturate(1.08);
|
||||
}
|
||||
|
||||
.live-section-context,
|
||||
.live-output-state {
|
||||
.live-context-row,
|
||||
.live-status-row {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.live-context-row {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.live-status-row {
|
||||
grid-template-columns: minmax(12rem, 1fr) auto auto;
|
||||
gap: 0.45rem;
|
||||
padding-top: 0.35rem;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.live-output-state,
|
||||
.live-context-summary,
|
||||
.live-next-inline {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
}
|
||||
|
||||
.live-section-context > div,
|
||||
.live-output-state > div {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.live-section-context small,
|
||||
.live-output-state small,
|
||||
.live-next-inline small,
|
||||
.section-countdown span {
|
||||
color: var(--text-faint);
|
||||
font-size: 0.59rem;
|
||||
@@ -1038,7 +1055,6 @@ textarea:focus {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.live-section-context strong,
|
||||
.live-output-state strong {
|
||||
overflow: hidden;
|
||||
font-size: 0.75rem;
|
||||
@@ -1046,6 +1062,67 @@ textarea:focus {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.live-context-summary {
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.live-context-title {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
max-width: min(34rem, 42vw);
|
||||
padding: 0.28rem 0.34rem;
|
||||
border: 0;
|
||||
border-radius: 0.42rem;
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 760;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.live-context-title span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.live-context-title:hover,
|
||||
.live-context-title:focus-visible,
|
||||
.live-context-title.expanded {
|
||||
background: var(--panel-soft);
|
||||
}
|
||||
|
||||
.live-context-title:focus-visible {
|
||||
outline: 2px solid var(--focus);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.live-context-title.expanded span {
|
||||
overflow: visible;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.live-next-inline {
|
||||
flex: 1 1 20rem;
|
||||
gap: 0.2rem;
|
||||
padding-left: 0.45rem;
|
||||
border-left: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.live-next-inline small {
|
||||
flex: 0 0 auto;
|
||||
letter-spacing: 0;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.live-next-inline .live-context-title {
|
||||
flex: 1 1 auto;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.live-pulse {
|
||||
width: 0.48rem;
|
||||
height: 0.48rem;
|
||||
@@ -1089,23 +1166,69 @@ textarea:focus {
|
||||
background: var(--text-faint);
|
||||
}
|
||||
|
||||
.live-output-state.active > span {
|
||||
.live-output-control.active .live-output-state > span {
|
||||
background: var(--accent);
|
||||
box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent) 12%, transparent);
|
||||
}
|
||||
|
||||
.live-mobile-run-button {
|
||||
display: none;
|
||||
.live-output-control {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.55rem;
|
||||
}
|
||||
|
||||
.live-menu {
|
||||
position: relative;
|
||||
z-index: 40;
|
||||
width: fit-content;
|
||||
justify-self: end;
|
||||
.live-output-control .live-output-state {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.live-menu > summary {
|
||||
.live-output-control form {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.live-output-control button {
|
||||
padding: 0.32rem 0.48rem;
|
||||
font-size: 0.62rem;
|
||||
}
|
||||
|
||||
.live-run-button {
|
||||
display: flex;
|
||||
min-height: 2rem;
|
||||
align-items: center;
|
||||
gap: 0.38rem;
|
||||
padding: 0.35rem 0.55rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 0.6rem;
|
||||
background: var(--panel-soft);
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
font-size: 0.67rem;
|
||||
font-weight: 740;
|
||||
}
|
||||
|
||||
.live-run-button:hover,
|
||||
.live-run-button.active {
|
||||
border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
|
||||
background: color-mix(in srgb, var(--accent) 9%, var(--panel-soft));
|
||||
color: var(--accent-strong);
|
||||
}
|
||||
|
||||
.live-run-button:focus-visible {
|
||||
outline: 2px solid var(--focus);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.live-run-button .app-icon:last-child {
|
||||
transition: transform 140ms ease;
|
||||
}
|
||||
|
||||
.live-run-button.active .app-icon:last-child {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.live-menu-trigger {
|
||||
width: fit-content;
|
||||
padding: 0.48rem 0.65rem;
|
||||
border: 1px solid var(--line);
|
||||
@@ -1114,17 +1237,27 @@ textarea:focus {
|
||||
cursor: pointer;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 750;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.live-menu-trigger:hover,
|
||||
.live-menu-trigger[aria-expanded='true'] {
|
||||
border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
|
||||
background: color-mix(in srgb, var(--accent) 9%, var(--panel-soft));
|
||||
}
|
||||
|
||||
.live-menu-trigger:focus-visible {
|
||||
outline: 2px solid var(--focus);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.live-menu-popover {
|
||||
position: absolute;
|
||||
z-index: 50;
|
||||
top: calc(100% + 0.4rem);
|
||||
right: 0;
|
||||
position: fixed;
|
||||
z-index: 200;
|
||||
top: max(3.5rem, calc(env(safe-area-inset-top) + 3rem));
|
||||
right: max(0.65rem, env(safe-area-inset-right));
|
||||
display: grid;
|
||||
width: min(22rem, calc(100vw - 1.3rem));
|
||||
max-height: calc(100dvh - 5rem);
|
||||
max-height: calc(100dvh - 4rem - env(safe-area-inset-top));
|
||||
overflow-y: auto;
|
||||
padding: 0.7rem;
|
||||
border: 1px solid var(--line-strong);
|
||||
@@ -1132,6 +1265,29 @@ textarea:focus {
|
||||
background: var(--glass-strong);
|
||||
box-shadow: var(--shadow-large);
|
||||
backdrop-filter: blur(24px);
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
.live-menu-show small,
|
||||
.live-menu-show strong {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.live-menu-show small {
|
||||
color: var(--text-faint);
|
||||
font-size: 0.6rem;
|
||||
font-weight: 720;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.live-menu-popover .live-menu-show > strong {
|
||||
margin-top: 0.15rem;
|
||||
color: var(--text);
|
||||
font-size: 0.78rem;
|
||||
letter-spacing: normal;
|
||||
overflow-wrap: anywhere;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.live-menu-popover section {
|
||||
@@ -1231,39 +1387,42 @@ textarea:focus {
|
||||
}
|
||||
|
||||
.live-piece-heading {
|
||||
padding-bottom: 0.85rem;
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
align-items: baseline;
|
||||
gap: 0.35rem 0.65rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.live-kicker {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
.live-piece-position {
|
||||
color: var(--accent);
|
||||
font-size: 0.65rem;
|
||||
font-weight: 750;
|
||||
letter-spacing: 0.055em;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.live-kicker strong {
|
||||
.live-piece-time {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.68rem;
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.live-current h1 {
|
||||
max-width: 30ch;
|
||||
margin: 0.45rem 0 0;
|
||||
font-size: clamp(1.45rem, 2.7vw, 2.55rem);
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
font-size: clamp(1.2rem, 2.2vw, 1.9rem);
|
||||
font-weight: 690;
|
||||
letter-spacing: -0.045em;
|
||||
line-height: 1.04;
|
||||
letter-spacing: -0.035em;
|
||||
line-height: 1.08;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.live-script-section {
|
||||
max-width: 58rem;
|
||||
padding: 1rem 0;
|
||||
padding: 0.75rem 0;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
@@ -1510,6 +1669,14 @@ textarea:focus {
|
||||
background: color-mix(in srgb, var(--gold) 10%, var(--panel));
|
||||
}
|
||||
|
||||
.live-run-item.selected .live-run-select {
|
||||
background: color-mix(in srgb, var(--accent) 8%, transparent);
|
||||
}
|
||||
|
||||
.live-run-item.presented {
|
||||
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 65%, transparent);
|
||||
}
|
||||
|
||||
.live-run-item.done {
|
||||
opacity: 0.68;
|
||||
}
|
||||
@@ -1519,7 +1686,7 @@ textarea:focus {
|
||||
opacity: 0.62;
|
||||
}
|
||||
|
||||
.live-run-item > form:first-child {
|
||||
.live-run-item > .live-run-select {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@@ -1602,6 +1769,15 @@ textarea:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.live-run-select:not(:disabled):hover {
|
||||
background: color-mix(in srgb, var(--accent) 10%, var(--panel-soft));
|
||||
}
|
||||
|
||||
.live-run-select:focus-visible {
|
||||
outline: 2px solid var(--focus);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.live-run-select strong,
|
||||
.live-reserve-item strong {
|
||||
font-size: 0.67rem;
|
||||
@@ -1673,9 +1849,8 @@ textarea:focus {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.8rem;
|
||||
padding: 0.55rem 0.65rem;
|
||||
justify-content: flex-end;
|
||||
padding: 0.4rem 0.55rem;
|
||||
border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line));
|
||||
border-radius: 0.9rem;
|
||||
background: var(--glass-strong);
|
||||
@@ -1683,30 +1858,12 @@ textarea:focus {
|
||||
backdrop-filter: blur(22px) saturate(1.08);
|
||||
}
|
||||
|
||||
.live-next-summary {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.live-next-summary span {
|
||||
color: var(--accent);
|
||||
font-size: 0.58rem;
|
||||
font-weight: 760;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.live-next-summary strong {
|
||||
overflow: hidden;
|
||||
font-size: 0.72rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.live-footer-actions {
|
||||
display: flex;
|
||||
display: grid;
|
||||
width: min(100%, 42rem);
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
grid-template-columns: repeat(4, minmax(0, auto));
|
||||
justify-content: end;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
@@ -1715,6 +1872,7 @@ textarea:focus {
|
||||
}
|
||||
|
||||
.live-footer-actions button {
|
||||
min-height: 2.2rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@@ -1748,7 +1906,7 @@ textarea:focus {
|
||||
}
|
||||
|
||||
.live-piece-heading {
|
||||
padding-bottom: 0.55rem;
|
||||
padding-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.live-script-section {
|
||||
@@ -1764,50 +1922,54 @@ textarea:focus {
|
||||
}
|
||||
|
||||
.live-command-header {
|
||||
grid-template-areas:
|
||||
'context menu'
|
||||
'countdown output'
|
||||
'run run';
|
||||
gap: 0.2rem;
|
||||
padding: 0.32rem 0.4rem;
|
||||
}
|
||||
|
||||
.live-context-row {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 0.4rem;
|
||||
padding: 0.45rem;
|
||||
}
|
||||
|
||||
.live-section-context {
|
||||
grid-area: context;
|
||||
.live-context-summary {
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.section-countdown {
|
||||
grid-area: countdown;
|
||||
min-width: 0;
|
||||
text-align: left;
|
||||
.live-context-title {
|
||||
max-width: 34vw;
|
||||
padding-inline: 0.25rem;
|
||||
}
|
||||
|
||||
.live-output-state {
|
||||
grid-area: output;
|
||||
min-width: 0;
|
||||
.live-next-inline {
|
||||
gap: 0.12rem;
|
||||
padding-left: 0.25rem;
|
||||
}
|
||||
|
||||
.live-status-row {
|
||||
grid-template-columns: minmax(0, 1fr) auto auto;
|
||||
gap: 0.3rem;
|
||||
padding-top: 0.2rem;
|
||||
}
|
||||
|
||||
.live-output-state strong {
|
||||
max-width: 8rem;
|
||||
}
|
||||
|
||||
.live-output-control {
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.live-output-control button {
|
||||
padding-inline: 0.35rem;
|
||||
}
|
||||
|
||||
.live-menu {
|
||||
grid-area: menu;
|
||||
.section-countdown {
|
||||
min-width: 5.5rem;
|
||||
padding: 0.28rem 0.4rem;
|
||||
}
|
||||
|
||||
.live-mobile-run-button {
|
||||
display: block;
|
||||
grid-area: run;
|
||||
width: 100%;
|
||||
padding: 0.42rem 0.55rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 0.6rem;
|
||||
background: var(--panel-soft);
|
||||
color: var(--text);
|
||||
font-size: 0.67rem;
|
||||
font-weight: 740;
|
||||
}
|
||||
|
||||
.live-desktop-rail-toggle {
|
||||
display: none;
|
||||
.live-run-button {
|
||||
padding-inline: 0.45rem;
|
||||
}
|
||||
|
||||
.live-workspace,
|
||||
@@ -1855,7 +2017,11 @@ textarea:focus {
|
||||
}
|
||||
|
||||
.live-current h1 {
|
||||
font-size: clamp(1.35rem, 7vw, 2rem);
|
||||
font-size: clamp(1.15rem, 5.5vw, 1.65rem);
|
||||
}
|
||||
|
||||
.live-piece-heading {
|
||||
gap: 0.3rem 0.45rem;
|
||||
}
|
||||
|
||||
.live-support-actions {
|
||||
@@ -1869,18 +2035,13 @@ textarea:focus {
|
||||
}
|
||||
|
||||
.live-action-bar {
|
||||
display: grid;
|
||||
gap: 0.4rem;
|
||||
padding: 0.45rem;
|
||||
}
|
||||
|
||||
.live-next-summary strong {
|
||||
font-size: 0.68rem;
|
||||
padding: 0.35rem;
|
||||
}
|
||||
|
||||
.live-footer-actions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
width: 100%;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
justify-content: stretch;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
@@ -1897,16 +2058,41 @@ textarea:focus {
|
||||
font-size: 0.64rem;
|
||||
}
|
||||
|
||||
.live-clear-form {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.live-finished-label {
|
||||
grid-column: 1 / -1;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 23rem) {
|
||||
.live-context-summary {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.live-context-title {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.live-next-inline {
|
||||
grid-column: 2;
|
||||
padding-left: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.live-status-row {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
}
|
||||
|
||||
.live-output-control {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.live-footer-actions {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
.heinzlive-output {
|
||||
min-height: 100vh;
|
||||
padding: clamp(2rem, 6vw, 6rem);
|
||||
@@ -3941,6 +4127,42 @@ textarea:focus {
|
||||
max-width: 78rem;
|
||||
}
|
||||
|
||||
.shows-heading {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.show-view-toggle {
|
||||
display: flex;
|
||||
padding: 0.2rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 0.75rem;
|
||||
background: var(--panel-soft);
|
||||
}
|
||||
|
||||
.show-view-toggle button {
|
||||
display: flex;
|
||||
min-height: 2.2rem;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.4rem 0.65rem;
|
||||
border: 0;
|
||||
border-radius: 0.58rem;
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 740;
|
||||
}
|
||||
|
||||
.show-view-toggle button[aria-pressed='true'] {
|
||||
background: var(--panel);
|
||||
box-shadow: var(--shadow-soft);
|
||||
color: var(--gold-strong);
|
||||
}
|
||||
|
||||
.show-create-panel,
|
||||
.show-library,
|
||||
.show-settings {
|
||||
@@ -4157,6 +4379,237 @@ textarea:focus {
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.show-month-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
margin-bottom: 0.7rem;
|
||||
}
|
||||
|
||||
.show-month-toolbar h3 {
|
||||
margin: 0.15rem 0 0;
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.show-month-navigation {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.show-month-navigation a {
|
||||
display: grid;
|
||||
min-width: 2.2rem;
|
||||
min-height: 2.2rem;
|
||||
place-items: center;
|
||||
padding: 0.35rem 0.55rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 0.6rem;
|
||||
background: var(--panel-soft);
|
||||
font-size: 0.68rem;
|
||||
font-weight: 730;
|
||||
}
|
||||
|
||||
.show-calendar-weekdays,
|
||||
.show-calendar-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.show-calendar-weekdays {
|
||||
border: 1px solid var(--line);
|
||||
border-bottom: 0;
|
||||
border-radius: 0.8rem 0.8rem 0 0;
|
||||
background: var(--panel-soft);
|
||||
}
|
||||
|
||||
.show-calendar-weekdays span {
|
||||
padding: 0.45rem;
|
||||
color: var(--text-faint);
|
||||
font-size: 0.62rem;
|
||||
font-weight: 750;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.show-calendar-grid {
|
||||
overflow: hidden;
|
||||
border-top: 1px solid var(--line);
|
||||
border-left: 1px solid var(--line);
|
||||
border-radius: 0 0 0.8rem 0.8rem;
|
||||
}
|
||||
|
||||
.show-calendar-day {
|
||||
min-width: 0;
|
||||
min-height: 7.5rem;
|
||||
padding: 0.4rem;
|
||||
border-right: 1px solid var(--line);
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: color-mix(in srgb, var(--panel-soft) 75%, transparent);
|
||||
}
|
||||
|
||||
.show-calendar-day.outside {
|
||||
min-height: 3.25rem;
|
||||
background: color-mix(in srgb, var(--panel-soft) 32%, transparent);
|
||||
color: var(--text-faint);
|
||||
}
|
||||
|
||||
.show-calendar-day > strong {
|
||||
display: grid;
|
||||
width: 1.55rem;
|
||||
height: 1.55rem;
|
||||
place-items: center;
|
||||
border-radius: 50%;
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
.show-calendar-day.today > strong {
|
||||
background: var(--gold);
|
||||
color: #152238;
|
||||
}
|
||||
|
||||
.show-calendar-events {
|
||||
display: grid;
|
||||
gap: 0.3rem;
|
||||
margin-top: 0.35rem;
|
||||
}
|
||||
|
||||
.show-calendar-event {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 0.08rem;
|
||||
padding: 0.38rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 0.5rem;
|
||||
background: var(--panel);
|
||||
}
|
||||
|
||||
.show-calendar-event:hover {
|
||||
border-color: var(--accent);
|
||||
background: var(--panel-strong);
|
||||
}
|
||||
|
||||
.show-calendar-event.live,
|
||||
.show-calendar-event.ready {
|
||||
border-left: 0.2rem solid var(--accent);
|
||||
}
|
||||
|
||||
.show-calendar-event time,
|
||||
.show-calendar-event small {
|
||||
color: var(--text-faint);
|
||||
font-size: 0.54rem;
|
||||
}
|
||||
|
||||
.show-calendar-event span {
|
||||
font-size: 0.65rem;
|
||||
font-weight: 730;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.show-calendar-event small {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.show-agenda {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.show-undated {
|
||||
margin-top: 0.8rem;
|
||||
}
|
||||
|
||||
@media (max-width: 52rem) {
|
||||
.shows-heading {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.show-view-toggle,
|
||||
.show-view-toggle button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.show-view-toggle button {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.show-calendar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.show-agenda {
|
||||
display: grid;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.show-agenda-day {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(7rem, 0.35fr) minmax(0, 1fr);
|
||||
gap: 0.65rem;
|
||||
padding: 0.65rem 0;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.show-agenda-day h3 {
|
||||
margin: 0;
|
||||
font-size: 0.78rem;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.show-agenda-day > div {
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.show-agenda-event {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
gap: 0.6rem;
|
||||
padding: 0.65rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 0.65rem;
|
||||
background: var(--panel-soft);
|
||||
}
|
||||
|
||||
.show-agenda-event time {
|
||||
color: var(--accent-text);
|
||||
font-size: 0.7rem;
|
||||
font-weight: 740;
|
||||
}
|
||||
|
||||
.show-agenda-event span,
|
||||
.show-agenda-event small {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.show-agenda-event strong {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.show-agenda-event small {
|
||||
margin-top: 0.15rem;
|
||||
color: var(--text-faint);
|
||||
font-size: 0.58rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 32rem) {
|
||||
.show-month-toolbar {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.show-month-navigation {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.show-agenda-day {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.show-settings {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user