Files
ontime/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-settings/CuesheetTableSettings.module.scss
T
Carlos Valente 0e6d6cd416 refactor: allow secondary rundowns (#2086)
* refactor: allow secondary rundowns

* ui: move dropdown

* feat: follow loaded

* ui: background edit warning

ui: fix disable radio button

* feat(ui): add loaded sufix in the rundown list

* feat(ui): add direct link to background edit from rundown manager

* fix: better fallback

* fix: default to is isCurrentRundown for nav bar colour

* chore: rename navigate to cuesheet

---------

Co-authored-by: alex-arc <ac@omnivox.dk>
2026-06-07 13:33:38 +02:00

121 lines
2.0 KiB
SCSS

.tableSettings {
margin-top: 1rem;
grid-area: settings;
background-color: $gray-1250;
padding: 0.5rem 1rem;
display: flex;
align-items: center;
gap: 1rem;
font-size: $inner-section-text-size;
border-radius: 3px 3px 0 0;
transition: background-color 0.2s ease-in-out;
&[data-background-rundown='true'] {
background-color: rgba($ontime-color, 0.5);
.apart::before {
content: 'BACKGROUND EDIT';
color: $ui-white;
animation: blinker 2s ease-in-out infinite;
}
}
}
@keyframes blinker {
50% {
color: transparent;
}
}
.sectionTitle {
text-transform: uppercase;
}
.row {
display: flex;
flex-wrap: wrap;
column-gap: 1rem;
row-gap: 0.25em;
}
.option {
cursor: pointer;
display: flex;
align-items: center;
gap: 0.5rem;
}
.column {
display: flex;
flex-direction: column;
gap: 0.5rem;
align-self: start;
}
.inline {
display: flex;
align-items: center;
gap: 1rem;
}
.apart {
margin-left: auto;
display: flex;
align-items: center;
gap: 1rem;
}
/** styles should match RundownHeader.module.scss */
.group {
display: flex;
align-items: center;
gap: 2px;
padding-inline: 2px;
background: $gray-1100;
border-radius: $component-border-radius-md;
height: 2rem;
}
/** styles should match RundownHeader.module.scss */
.radioButton {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
height: calc(2rem - 4px); // padding inline * 2
padding-inline: 1em;
border: 1px solid transparent;
border-radius: $component-border-radius-md;
color: $gray-400;
font-size: calc(1rem - 2px);
font-weight: 600;
&[data-disabled] {
cursor: not-allowed;
opacity: 0.4;
}
&:focus-visible {
background: transparent;
outline: 1px solid $blue-500;
}
&:hover:not([data-disabled]):not(:active) {
background: $gray-1000;
}
&:active {
background: $gray-1100;
}
&[data-pressed] {
background: $blue-700;
color: $ui-white;
&:hover:not([data-disabled]):not(:active) {
background: $blue-600;
}
}
}