feat: edit groups

apps/client/src/features/rundown/entry-editor/EntryEditor.module.scss

@@ -0,0 +1,106 @@
+.entryEditor {
+  max-height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow-x: auto;
+
+  &.inModal {
+    max-height: 80vh;
+  }
+}
+
+.content {
+  padding-inline: 0.5rem 1.5rem;
+  padding-bottom: 4rem;
+
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  overflow-y: auto;
+}
+
+.timeSettings {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  h3 {
+    margin-bottom: -0.5rem; // bring the title closer to the section elements
+  }
+}
+
+.decorated {
+  color: var(--decorator-color, $ui-white);
+  background-color: var(--decorator-bg, $gray-1100);
+  width: fit-content;
+  padding-inline: 0.5rem;
+  border-radius: $component-border-radius-sm;
+}
+
+.delayLabel {
+  font-size: $aux-text-size;
+  color: $ontime-delay-text;
+
+  &::after {
+    content: '\200b';
+  }
+}
+
+.switchLabel {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  max-width: max-content;
+  cursor: pointer;
+  height: 2rem; // manually match the height of a text input
+  margin-bottom: 0; // reset margin from label component
+}
+
+.inline {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.splitTwo {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  column-gap: 1rem;
+  row-gap: 1rem;
+}
+
+.tooltipIcon {
+  color: $blue-500;
+  display: inline-block;
+  font-size: 1.25em;
+  margin-left: 0.25em;
+}
+
+.customImage {
+  display: grid;
+  grid-template-columns: 1fr 72px;
+  gap: 1rem;
+}
+
+/* approximating the style of a disabled input */
+.textLikeInput {
+  background-color: rgba($gray-1200, 0.4);
+  font-weight: 400;
+  color: $gray-200;
+  border: 1px solid transparent;
+
+  justify-content: center;
+
+  width: 7.5em;
+
+  &:hover {
+    background-color: rgba($gray-1200, 0.4);
+  }
+}