1
+ @use ' sass:color' ;
2
+ @use ' sass:list' ;
3
+
1
4
$segment-timeline-background-color : #1f1f1f ;
2
5
3
- $segment-layer-border-unknown : darken (#4b4b4b , 10% );
6
+ $segment-layer-border-unknown : color . scale (#4b4b4b , $lightness : - 10% );
4
7
$segment-layer-background-unknown : #4b4b4b ;
5
8
$segment-layer-background-camera : #18791c ;
6
- $segment-layer-background-camera--second : darken ($segment-layer-background-camera , 10% );
9
+ $segment-layer-background-camera--second : color . scale ($segment-layer-background-camera , $lightness : - 10% );
7
10
$segment-layer-background-lower-third : #ed7200 ;
8
- $segment-layer-background-lower-third--second : darken ($segment-layer-background-lower-third , 10% );
11
+ $segment-layer-background-lower-third--second : color . scale ($segment-layer-background-lower-third , $lightness : - 10% );
9
12
$segment-layer-background-graphics : #dc5c00 ;
10
- $segment-layer-background-graphics--second : darken ($segment-layer-background-graphics , 10% );
13
+ $segment-layer-background-graphics--second : color . scale ($segment-layer-background-graphics , $lightness : - 10% );
11
14
$segment-layer-border-live-speak : #2f74ff ;
12
15
/* * Gradients need to be defined with each color separately, so that they can be applied in SVG **/
13
16
$segment-layer-background-gradient-divider : rgba (0 , 0 , 0 , 0.5 ) 1px ;
@@ -19,8 +22,8 @@ $segment-layer-background-live-speak: linear-gradient(
19
22
$segment-layer-background-gradient-divider ,
20
23
$segment-layer-background-live-speak-2 72%
21
24
);
22
- $segment-layer-background-live-speak--second-1 : darken (#2f74ff , 10% );
23
- $segment-layer-background-live-speak--second-2 : darken (#39762b , 10% );
25
+ $segment-layer-background-live-speak--second-1 : color . scale (#2f74ff , $lightness : - 10% );
26
+ $segment-layer-background-live-speak--second-2 : color . scale (#39762b , $lightness : - 10% );
24
27
$segment-layer-background-live-speak--second : linear-gradient (
25
28
to bottom ,
26
29
$segment-layer-background-live-speak--second-1 70% ,
@@ -36,23 +39,23 @@ $segment-layer-background-remote-speak: linear-gradient(
36
39
$segment-layer-background-gradient-divider ,
37
40
$segment-layer-background-remote-speak-2 72%
38
41
);
39
- $segment-layer-background-remote-speak--second-1 : darken (#e80064 , 10% );
40
- $segment-layer-background-remote-speak--second-2 : darken (#39762b , 10% );
42
+ $segment-layer-background-remote-speak--second-1 : color . scale (#e80064 , $lightness : - 10% );
43
+ $segment-layer-background-remote-speak--second-2 : color . scale (#39762b , $lightness : - 10% );
41
44
$segment-layer-background-remote-speak--second : linear-gradient (
42
45
to bottom ,
43
46
$segment-layer-background-remote-speak--second-1 70% ,
44
47
$segment-layer-background-gradient-divider ,
45
48
$segment-layer-background-remote-speak--second-2 72%
46
49
);
47
50
$segment-layer-background-remote : #e80064 ;
48
- $segment-layer-background-remote--second : darken ($segment-layer-background-remote , 10% );
51
+ $segment-layer-background-remote--second : color . scale ($segment-layer-background-remote , $lightness : - 10% );
49
52
$segment-layer-background-vt : #0a20ed ;
50
- $segment-layer-background-vt--second : darken ($segment-layer-background-vt , 10% );
53
+ $segment-layer-background-vt--second : color . scale ($segment-layer-background-vt , $lightness : - 10% );
51
54
$segment-layer-background-script : #003600 ;
52
55
$segment-layer-background-mic : #1e6820 ;
53
56
$segment-layer-background-guest : #008a92 ;
54
57
$segment-layer-background-local : #9a2bd8 ;
55
- $segment-layer-background-local--second : darken ($segment-layer-background-local , 10% );
58
+ $segment-layer-background-local--second : color . scale ($segment-layer-background-local , $lightness : - 10% );
56
59
$segment-layer-background-studio-screen : #641fb3 ;
57
60
58
61
$step-counter-background-studio-screen : #2a005b ;
@@ -64,7 +67,7 @@ $layer-types-solid:
64
67
' unknown' , ' camera' , ' lower-third' , ' graphics' , ' remote' , ' vt' , ' local' , ' script' , ' mic' , ' guest' , ' studio-screen' ;
65
68
$layer-types-gradient : ' live-speak' , ' remote-speak' ; //
66
69
67
- $layer-types : join ($layer-types-solid , $layer-types-gradient );
70
+ $layer-types : list . join ($layer-types-solid , $layer-types-gradient );
68
71
69
72
@mixin item-type-text-outline ($selectors ) {
70
73
@each $layer-type in $layer-types {
@@ -400,8 +403,8 @@ $layer-types: join($layer-types-solid, $layer-types-gradient);
400
403
-45deg ,
401
404
transparent 0% ,
402
405
transparent 8px ,
403
- darken ($part-start-color , 50% ) 8px ,
404
- darken ($part-start-color , 50% ) 10px
406
+ color . scale ($part-start-color , $lightness : - 50% ) 8px ,
407
+ color . scale ($part-start-color , $lightness : - 50% ) 10px
405
408
);
406
409
backdrop-filter : saturate (0% ) brightness (50% );
407
410
}
0 commit comments