Skip to content

Commit 7750561

Browse files
olzzonolzzon
committed
wip: add AUTO and NEXT icons - further css improvements
1 parent 02c418f commit 7750561

File tree

3 files changed

+77
-96
lines changed

3 files changed

+77
-96
lines changed

‎packages/webui/src/client/styles/countdown/director.scss‎

Lines changed: 42 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -15,27 +15,28 @@ $hold-status-color: $liveline-timecode-color;
1515

1616
.director-screen {
1717
font-family: Roboto Flex;
18+
font-style: normal;
1819

1920
.director-screen__top {
2021
position: fixed;
2122
top: 0;
2223
left: 0;
2324
right: 0;
24-
height: 14vh;
25+
height: 16vh;
2526
padding-left: 10px;
2627
display: flex;
2728
flex-direction: row;
2829
justify-content: space-between;
2930
align-items: center;
30-
background-color: #3F3F3F;
31+
background-color: #3f3f3f;
3132
color: #888;
3233
font-size: 2em;
3334
padding: 0 0.2em;
3435

3536
.director-screen__top__planned-end {
3637
text-align: left;
3738
}
38-
39+
3940
.director-screen__top__planned-to {
4041
text-align: left;
4142
}
@@ -46,14 +47,11 @@ $hold-status-color: $liveline-timecode-color;
4647
.director-screen__top__over-under {
4748
margin-left: 120px;
4849
}
49-
50-
5150
}
5251

53-
5452
.director-screen__body {
5553
position: fixed;
56-
top: 14vh;
54+
top: 16vh;
5755
bottom: 0;
5856
left: 0;
5957
right: 0;
@@ -83,45 +81,54 @@ $hold-status-color: $liveline-timecode-color;
8381
vertical-align: middle;
8482
color: #fff;
8583
position: relative;
86-
/* PartNameWide */
87-
font-family: 'Roboto Flex';
88-
font-style: normal;
8984
font-weight: 700;
9085
font-size: 90px;
9186
line-height: 110%;
9287
/* or 110px */
9388
letter-spacing: 0.01em;
9489
font-feature-settings: 'pnum' on, 'lnum' on;
9590

96-
color: #FFFFFF;
91+
color: #ffffff;
9792
font-stretch: 100;
98-
font-variation-settings: 'GRAD' -90, 'XOPQ' 96, 'XTRA' 372, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 514, 'YTUC' 712, 'slnt' 0, 'opsz' 38;
93+
font-variation-settings: 'GRAD' -90, 'XOPQ' 96, 'XTRA' 372, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738,
94+
'YTLC' 514, 'YTUC' 712, 'slnt' 0, 'opsz' 38;
9995

10096
text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
10197
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
102-
z-index: 1;
98+
z-index: 1;
10399

104100
&.live {
105101
background: $general-live-color;
106102
text-shadow: 0px 0px 6px #000000;
107103
}
108-
104+
109105
&.next {
110106
background: $general-next-color;
111107
text-shadow: 0px 0px 6px #000000;
112108
}
109+
&.notext {
110+
background: $general-next-color;
111+
height: 20px;
112+
text-shadow: 0px 0px 6px #000000;
113+
}
113114
.director-screen__body__segment__countdown {
114115
position: absolute;
115-
font-size: 120px;
116+
font-size: 110px;
116117
top: 0;
117118
right: 0;
118119
height: 100%;
119120
width: 20vw;
120-
color: #FF5218;
121+
color: #ff5218;
121122
float: right;
122123
text-align: right;
123124
padding-right: 10px;
124-
background: linear-gradient(90deg, rgba(223, 0, 0, 0) 0%, #DF0000 7.86%, rgba(116, 0, 0, 0.808) 16.21%, rgba(0, 0, 0, 0.6) 24.94%);
125+
background: linear-gradient(
126+
90deg,
127+
rgba(223, 0, 0, 0) 0%,
128+
#df0000 7.86%,
129+
rgba(116, 0, 0, 0.808) 16.21%,
130+
rgba(0, 0, 0, 0.6) 24.94%
131+
);
125132
}
126133
}
127134

@@ -219,29 +226,33 @@ $hold-status-color: $liveline-timecode-color;
219226
}
220227
}
221228

222-
.director-screen__body__part__next {
223-
background-color: $general-next-color;
224-
position: relative;
229+
.director-screen__body__part__next-icon {
225230
clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%);
231+
font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738,
232+
'YTLC' 548, 'YTUC' 712, 'slnt' 0, 'opsz' 3;
226233
}
227-
.director-screen__body__part__auto {
228-
background-color: #DF0000;
229-
position: relative;
234+
.director-screen__body__part__auto-icon {
230235
border-radius: 0 25px 25px 0;
236+
font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738,
237+
'YTLC' 548, 'YTUC' 712, 'slnt' -7, 'opsz' 3;
231238
}
232-
233-
.director-screen__body__part__next,
234-
.director-screen__body__part__auto {
239+
.director-screen__body__part__next-icon,
240+
.director-screen__body__part__auto-icon {
241+
background-color: $general-next-color;
242+
position: relative;
235243
grid-row: 1;
236244
grid-column: 1;
237245
margin-top: -50px;
238-
text-align: center;
239-
font-size: 1.5rem;
246+
text-align: left;
247+
font-size: 2.2rem;
248+
font-weight: 900;
240249
color: #000;
241-
padding-top: 10px;
242-
max-width: 100px;
250+
padding-top: 5px;
251+
padding-left: 8px;
252+
max-width: 120px;
243253
max-height: 50px;
244254
z-index: 1;
255+
font-stretch: 25;
245256
}
246257
}
247258

@@ -253,4 +264,4 @@ $hold-status-color: $liveline-timecode-color;
253264
font-weight: 600;
254265
}
255266
}
256-
}
267+
}

‎packages/webui/src/client/styles/counterComponents.scss‎

Lines changed: 30 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,24 @@
1+
.counter-component__planned-end,
2+
.counter-component__time-to-planned-end,
3+
.counter-component__time-since-planned-end,
14
.counter-component__over-under {
2-
color: black;
35
font-family: 'Roboto Flex';
4-
margin-top: 4px;
5-
margin-bottom: 4px;
66
font-style: normal;
7-
font-weight: 500;
87
font-size: 90px;
8+
font-weight: 500;
99
line-height: 100%;
10-
/* identical to box height, or 120px */
11-
text-align: right;
1210
font-feature-settings: 'liga' off;
11+
margin-top: 4px;
12+
margin-bottom: 4px;
13+
}
1314

14-
font-stretch: 57;
15-
font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 548, 'YTUC' 712, 'slnt' 0, 'opsz' 44;
15+
.counter-component__over-under {
16+
color: black;
17+
text-align: right;
1618

19+
font-stretch: 57;
20+
font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 548,
21+
'YTUC' 712, 'slnt' 0, 'opsz' 44;
1722

1823
.under {
1924
background-color: #ff0;
@@ -25,7 +30,7 @@
2530
padding-right: 22px;
2631
}
2732
.over {
28-
background-color: #FF5218;
33+
background-color: #ff5218;
2934
border-radius: 139px;
3035
align-self: stretch;
3136
gap: 10px;
@@ -36,67 +41,31 @@
3641
}
3742

3843
.counter-component__planned-end {
39-
/* TimeOfDay */
40-
font-family: 'Roboto Flex';
41-
font-style: normal;
4244
font-weight: 400;
43-
font-size: 90px;
44-
line-height: 100%;
45-
letter-spacing: 0%;
46-
/* identical to box height, or 120px */
47-
font-feature-settings: 'liga' off;
45+
letter-spacing: 0%;
4846

49-
color: #FFFFFF;
47+
color: #ffffff;
5048
font-stretch: 70;
51-
font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 548, 'YTUC' 712, 'slnt' -7, 'opsz' 44;
52-
53-
54-
/* Inside auto layout */
55-
flex: none;
56-
order: 0;
57-
flex-grow: 0;
58-
49+
font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 548,
50+
'YTUC' 712, 'slnt' -7, 'opsz' 44;
5951
}
6052

6153
.counter-component__time-to-planned-end {
62-
color:#ff0;
54+
color: #ff0;
6355
letter-spacing: 0%;
64-
/* CounterUnder */
65-
font-family: 'Roboto Flex';
66-
font-style: normal;
67-
font-weight: 500;
68-
font-size: 90px;
69-
line-height: 100%;
70-
/* identical to box height, or 120px */
71-
text-align: right;
72-
font-feature-settings: 'liga' off;
73-
74-
color: #000000;
75-
font-stretch: 57;
76-
font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 548, 'YTUC' 712, 'slnt' 0, 'opsz' 44;
77-
78-
79-
/* Inside auto layout */
80-
flex: none;
81-
order: 0;
82-
flex-grow: 0;
56+
text-align: right;
8357

58+
color: #000000;
59+
font-stretch: 57;
60+
font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 548,
61+
'YTUC' 712, 'slnt' 0, 'opsz' 44;
8462
}
8563

8664
.counter-component__time-since-planned-end {
87-
color: #FF5218;
88-
89-
font-family: 'Roboto Flex';
90-
font-style: normal;
91-
font-weight: 500;
92-
font-size: 90px;
93-
line-height: 100%;
94-
/* identical to box height, or 120px */
95-
text-align: right;
96-
font-feature-settings: 'liga' off;
97-
98-
font-stretch: 57;
99-
font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 548, 'YTUC' 712, 'slnt' 0, 'opsz' 44;
100-
65+
color: #ff5218;
66+
text-align: right;
10167

102-
}
68+
font-stretch: 57;
69+
font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 548,
70+
'YTUC' 712, 'slnt' 0, 'opsz' 44;
71+
}

‎packages/webui/src/client/ui/ClockView/DirectorScreen.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -436,7 +436,7 @@ function DirectorScreenRender({
436436
label: '',
437437
width: '90vw',
438438
fontFamily: 'Roboto Flex',
439-
fontSize: '2em',
439+
fontSize: '1.6em',
440440
minFontWidth: 20,
441441
maxFontWidth: 90,
442442
minLetterSpacing: 2,
@@ -477,6 +477,7 @@ function DirectorScreenRender({
477477
<div
478478
className={ClassNames('director-screen__body__segment-name', {
479479
next: nextSegment !== undefined && nextSegment?._id !== currentSegment?._id,
480+
notext: nextSegment === undefined || nextSegment?._id === currentSegment?._id,
480481
})}
481482
>
482483
{nextSegment?._id !== currentSegment?._id ? (
@@ -495,9 +496,9 @@ function DirectorScreenRender({
495496
{nextPartInstance && nextShowStyleBaseId ? (
496497
<>
497498
{currentPartInstance && currentPartInstance.instance.part.autoNext ? (
498-
<span className="director-screen__body__part__auto">AUTO</span>
499+
<span className="director-screen__body__part__auto-icon">AUTO</span>
499500
) : (
500-
<span className="director-screen__body__part__next">NEXT</span>
501+
<span className="director-screen__body__part__next-icon">NEXT</span>
501502
)}
502503
<div className="director-screen__body__part__piece-icon">
503504
<PieceIconContainer
@@ -519,7 +520,7 @@ function DirectorScreenRender({
519520
label: '',
520521
width: '90vw',
521522
fontFamily: 'Roboto Flex',
522-
fontSize: '2em',
523+
fontSize: '1.6em',
523524
minFontWidth: 20,
524525
maxFontWidth: 90,
525526
minLetterSpacing: 2,

0 commit comments

Comments
 (0)