mirror of
https://github.com/cpvalente/ontime.git
synced 2026-09-10 08:39:34 +00:00
feat(countdown): allow counting down to a group
This commit is contained in:
Claude
Carlos Valente
@@ -59,6 +59,7 @@ $item-height: 3.5rem;
|
||||
right: $view-inline-padding;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
gap: 2rem;
|
||||
|
||||
@@ -72,14 +73,27 @@ $item-height: 3.5rem;
|
||||
}
|
||||
|
||||
/* ========================= LIST ========================*/
|
||||
.empty-container {
|
||||
.empty-state {
|
||||
min-height: min(56vh, 36rem);
|
||||
padding-top: clamp(4rem, 14vh, 9rem);
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
button {
|
||||
margin-top: 2rem;
|
||||
margin-top: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-state__content {
|
||||
max-width: none;
|
||||
|
||||
span {
|
||||
max-width: none;
|
||||
white-space: nowrap;
|
||||
font-size: clamp(1.5rem, 4vw, 2.25rem);
|
||||
line-height: 1.1;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -88,7 +102,7 @@ $item-height: 3.5rem;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
|
||||
padding-bottom: 60vh;
|
||||
padding-bottom: max(8rem, calc(5rem + env(safe-area-inset-bottom)));
|
||||
}
|
||||
|
||||
/* ====================== LIST-ITEM ======================*/
|
||||
@@ -104,6 +118,7 @@ $item-height: 3.5rem;
|
||||
column-gap: 1rem;
|
||||
background-color: var(--card-background-color-override, $viewer-card-bg-color);
|
||||
padding-right: 1rem;
|
||||
border: 1px solid transparent;
|
||||
border-radius: $element-border-radius;
|
||||
|
||||
&:hover {
|
||||
@@ -115,18 +130,41 @@ $item-height: 3.5rem;
|
||||
|
||||
.sub--selected {
|
||||
background: $blue-700;
|
||||
box-shadow: inset 0 0 0 1px $blue-500;
|
||||
}
|
||||
|
||||
.sub--live {
|
||||
background-color: $active-green;
|
||||
box-shadow: inset 0 0 0 1px color-mix(in srgb, $active-green 75%, $ui-white);
|
||||
}
|
||||
|
||||
.sub--armed {
|
||||
background-color: $gray-1325;
|
||||
}
|
||||
|
||||
.sub--in-group {
|
||||
position: relative;
|
||||
margin-left: 1rem;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -0.5rem;
|
||||
top: -0.25rem;
|
||||
bottom: -0.25rem;
|
||||
width: 2px;
|
||||
border-radius: 1px;
|
||||
background: var(--group-color, transparent);
|
||||
}
|
||||
|
||||
.sub__binder {
|
||||
box-shadow: inset 3px 0 0 var(--group-color, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
.sub__binder {
|
||||
background: var(--user-color, var(--card-background-color-override, $viewer-card-bg-color));
|
||||
border-radius: $element-border-radius 0 0 $element-border-radius;
|
||||
grid-area: binder;
|
||||
}
|
||||
|
||||
@@ -138,6 +176,8 @@ $item-height: 3.5rem;
|
||||
gap: 0.25em;
|
||||
font-size: $timer-label-size;
|
||||
color: var(--label-color-override, $viewer-label-color);
|
||||
white-space: nowrap;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.sub__schedule--delayed {
|
||||
@@ -156,22 +196,73 @@ $item-height: 3.5rem;
|
||||
color: $playback-under;
|
||||
}
|
||||
|
||||
.sub--group {
|
||||
box-shadow: inset 0 0 0 1px var(--user-color, $gray-1325);
|
||||
background:
|
||||
linear-gradient(90deg, color-mix(in srgb, var(--user-color, transparent) 18%, transparent), transparent 42%),
|
||||
var(--card-background-color-override, $viewer-card-bg-color);
|
||||
|
||||
.sub__binder {
|
||||
background: var(--user-color, var(--card-background-color-override, $viewer-card-bg-color));
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.sub__title {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.sub__schedule,
|
||||
.sub__status,
|
||||
.sub__label {
|
||||
color: var(--secondary-color-override, $viewer-secondary-color);
|
||||
}
|
||||
}
|
||||
|
||||
.sub--group.sub--selected {
|
||||
box-shadow: inset 0 0 0 1px $blue-500;
|
||||
background:
|
||||
linear-gradient(90deg, color-mix(in srgb, var(--user-color, transparent) 22%, transparent), transparent 42%),
|
||||
$blue-700;
|
||||
|
||||
.sub__schedule,
|
||||
.sub__status,
|
||||
.sub__label,
|
||||
.sub__eyebrow {
|
||||
color: $ui-white;
|
||||
}
|
||||
}
|
||||
|
||||
.sub__title {
|
||||
grid-area: title;
|
||||
padding-bottom: 0.5rem;
|
||||
min-width: 0;
|
||||
|
||||
font-size: $title-font-size;
|
||||
line-height: 1.1em;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.sub__eyebrow {
|
||||
display: block;
|
||||
margin-bottom: 0.15rem;
|
||||
color: var(--secondary-color-override, $viewer-secondary-color);
|
||||
font-size: $timer-label-size;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.sub__secondary {
|
||||
grid-area: secondary;
|
||||
padding-bottom: 0.5rem;
|
||||
min-width: 0;
|
||||
|
||||
font-size: $base-font-size;
|
||||
line-height: 1.1em;
|
||||
color: var(--label-color-override, $viewer-label-color);
|
||||
// allow multi-line text but trim before
|
||||
white-space: pre-line;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.sub__status {
|
||||
@@ -181,6 +272,7 @@ $item-height: 3.5rem;
|
||||
font-size: $timer-label-size;
|
||||
text-align: right;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sub__label {
|
||||
@@ -190,6 +282,7 @@ $item-height: 3.5rem;
|
||||
font-size: $timer-label-size;
|
||||
color: var(--label-color-override, $viewer-label-color);
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sub__timer {
|
||||
@@ -199,6 +292,16 @@ $item-height: 3.5rem;
|
||||
line-height: 1.1em;
|
||||
font-weight: 600;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.selection-count {
|
||||
color: var(--label-color-override, $viewer-label-color);
|
||||
font-size: $timer-label-size;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ====================== MODIFIERS ======================*/
|
||||
|
||||
Reference in New Issue
Block a user