cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-16 04:43:35 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

Custom add (#889)

Browse Source
This commit is contained in:
Carlos Valente
2024-04-14 21:52:12 +02:00
committed by GitHub
parent 0ef1b44d9e
commit 70c93a69fe
7 changed files with 155 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/features/control/playback/playback-timer/PlaybackTimer.module.scss
+30 -55
View File
@@ -1,16 +1,17 @@
.timeContainer {
display: grid;
grid-template-areas:
'ind clk clk btn'
'... sta fin btn';
'indicators timer addtime'
'status status addtime';
grid-template-rows: 1fr auto;
grid-template-columns: 1.25rem 1fr 1fr 5rem;
grid-template-columns: 1.25rem 1fr 6.5rem;
gap: $element-inner-spacing;
justify-items: start;
}
// ---------> INDICATORS
.indicators {
grid-area: ind;
grid-area: indicators;
width: 100%;
height: 100%;
display: flex;
@@ -18,72 +19,46 @@
justify-content: space-evenly;
}
.indRoll,
.indDelay,
.indNegative {
.indicatorRoll,
.indicatorDelay,
.indicatorNegative {
background-color: $black-10;
}
.indRoll,
.indRollActive,
.indDelay,
.indDelayActive {
.indicatorRoll,
.indicatorDelay {
margin: 0 auto;
border-radius: 6px;
width: 12px;
height: 12px;
border-radius: 5px;
width: 10px;
height: 10px;
}
.indRollActive {
.indicatorRoll[data-active='true'] {
background-color: $ontime-roll;
}
.indNegative,
.indNegativeActive {
margin: 0 auto;
width: 90%;
height: 0.25rem;
}
.indNegativeActive {
background-color: $playback-negative;
}
.indDelayActive {
.indicatorDelay[data-active='true'] {
background-color: $ontime-delay;
}
.btn {
grid-area: btn;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
width: 100%;
gap: $element-inner-spacing;
.indicatorNegative {
margin: 0 auto;
width: 90%;
height: 0.25rem;
&[data-active='true'] {
background-color: $playback-negative;
}
}
.minus {
grid-area: min;
display: flex;
flex-direction: column;
}
// ---------> LABELS
.start,
.finish,
.roll {
.status {
grid-area: status;
height: 1.5rem;
}
.start {
grid-area: sta;
}
.finish {
grid-area: fin;
}
.roll {
grid-area: 2 / 2 / 2 / 4 ;
display: flex;
gap: $section-spacing;
margin-left: 1.5rem;
}
.tag {