feat: edit groups

2026-09-10 00:29:41 +00:00 · 2025-06-25 06:10:12 +02:00
parent 4c08482258
commit 473f50b493
75 changed files with 916 additions and 511 deletions
@@ -0,0 +1,226 @@
+@use '../blockMixins' as *;
+
+$skip-opacity: 0.2;
+
+.rundownEvent {
+  @include block-styling;
+  background-color: $block-bg;
+  margin-block: 0.25rem;
+
+  display: grid;
+  grid-template-areas:
+    'binder ...        ...     ...'
+    'binder pb-actions times   chip'
+    'binder pb-actions title   title'
+    'binder pb-actions estatus estatus'
+    'binder ...        ...     ...';
+
+  grid-template-columns: $block-binder-width 3rem 1fr auto;
+  grid-template-rows: 0.125rem 2rem 2rem auto 0.125rem;
+  align-items: center;
+  padding-right: $block-clearance;
+  gap: 2px;
+  row-gap: 0.25rem;
+
+  transition-property: background-color;
+  transition-duration: $transition-time-feedback;
+
+  @mixin declare-overrides() {
+    --status-color-override: #{$gray-200};
+    --status-color-active-override: #{$green-400};
+  }
+
+  &.loaded {
+    background-color: $gray-1325;
+  }
+
+  &.play {
+    background-color: $active-green;
+    @include declare-overrides;
+  }
+
+  &.roll {
+    background-color: $blue-700;
+    @include declare-overrides;
+  }
+
+  &.pause {
+    background-color: rgba($ontime-paused, 0.6);
+    @include declare-overrides;
+  }
+
+  &.selected {
+    outline: 1px solid $block-selected-color;
+  }
+
+  &.hasCursor {
+    outline: 1px solid $block-cursor-color;
+  }
+
+  &.past:not(.skip) {
+    .timerNote,
+    .statusElements,
+    .eventTitle,
+    .eventNote,
+    .eventTimers,
+    .eventStatus,
+    .playbackActions,
+    .binder {
+      opacity: 0.4;
+    }
+  }
+
+  &.skip {
+    border: 1px solid $white-3;
+
+    .timerNote,
+    .eventTitle,
+    .eventNote,
+    .binder,
+    .eventTimers,
+    .eventStatus {
+      opacity: $skip-opacity;
+    }
+  }
+}
+
+.binder {
+  grid-area: binder;
+  height: 100%;
+  display: grid;
+  place-content: center;
+  position: relative;
+  cursor: pointer;
+
+  border-radius: $block-border-radius 0 0 $block-border-radius;
+
+  background-color: $gray-1050; // to override inline
+  color: $section-white;
+  font-size: 1rem;
+
+  .drag {
+    @include drag-style;
+    position: absolute;
+    margin-top: 0.25rem;
+  }
+
+  .cue {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 5.5rem;
+    text-align: center;
+
+    font-weight: 600;
+    letter-spacing: 0.5px;
+    rotate: -90deg;
+  }
+}
+
+.playbackActions {
+  grid-area: pb-actions;
+  align-self: flex-start;
+  display: flex;
+  flex-direction: column;
+  margin: 0 0.5rem;
+  gap: 0.25rem;
+}
+
+.eventTimers {
+  grid-area: times;
+  display: flex;
+  align-items: center;
+  gap: $block-clearance;
+  height: 100%;
+}
+
+.chipSection {
+  grid-area: chip;
+}
+
+.titleSection {
+  grid-area: title;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .nextTag {
+    font-size: 1rem;
+    color: $orange-500;
+    letter-spacing: 0.03px;
+    font-weight: 600;
+  }
+
+  .eventTitle {
+    overflow: hidden;
+    max-height: calc(2.5em + 2px);
+    line-height: 1.25em;
+    flex: 1;
+  }
+}
+
+.progressBg {
+  grid-area: progb;
+  border-radius: 1px;
+  background-color: $gray-1100;
+  opacity: 1;
+  height: 100%;
+  overflow: hidden; /* clip foreground border radius*/
+}
+
+.progressBg.hidden {
+  opacity: 0;
+}
+
+.flip {
+  transform: rotateY(180deg);
+}
+
+.statusElements {
+  grid-area: estatus;
+  display: grid;
+  grid-template-areas:
+    'notes status'
+    'progb progb';
+  gap: 2px;
+  grid-template-rows: auto 0.25rem;
+  align-items: center;
+  height: 100%;
+  padding: 2px 0;
+}
+
+.eventNote {
+  grid-area: notes;
+  display: block;
+  font-size: calc(1rem - 3px);
+  line-height: 1em;
+  color: $block-text-color;
+
+  max-width: 35rem;
+
+  // allow multi-line text but trim before
+  white-space: pre-line;
+}
+
+.eventStatus {
+  grid-area: status;
+  align-self: flex-end;
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-end;
+  gap: 0.5rem;
+  color: var(--status-color-override, $gray-500);
+
+  .statusIcon {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .statusIcon.active {
+    color: var(--status-color-active-override, $active-indicator);
+  }
+
+  .statusIcon.disabled {
+    color: $gray-1000;
+  }
+}