@norskvideo/norsk-studio-built-ins 1.10.1 → 1.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,164 +0,0 @@
1
- .audio-level-container {
2
- height: 210px;
3
- width: 200px;
4
- grid-template-columns: 1fr 1fr;
5
- grid-template-rows: 150px 40px 25px;
6
- }
7
-
8
- .audio-level-container-inline {
9
- height: 108px;
10
- width: 180px;
11
- display: flex;
12
- flex-direction: row-reverse;
13
- }
14
-
15
- .audio-level-container div {
16
- float: left;
17
- }
18
-
19
- .preview-levels-inline {
20
- height: 100%;
21
- width: 30px;
22
- background-color: #333;
23
- border-radius: 2px;
24
- display: flex;
25
- grid-template-columns: 30px 30px;
26
- padding: 4px 3px;
27
- margin: auto;
28
- margin-top: 0px;
29
- grid-column-gap: 5px;
30
- }
31
-
32
- .preview-levels-summary {
33
- height: 100%;
34
- width: 30px;
35
- background-color: #333;
36
- border-radius: 2px;
37
- display: grid;
38
- grid-template-columns: 30px 30px;
39
- padding: 4px 3px;
40
- margin: auto;
41
- margin-top: 0px;
42
- grid-column-gap: 5px;
43
- }
44
-
45
- /* paint not glowing LEDs */
46
- .preview-level {
47
- position: relative;
48
- margin: 0 2px;
49
- flex-grow: 1;
50
- z-index: 3;
51
- background-color: transparent;
52
- background-repeat: repeat-y;
53
- background-image: linear-gradient(to bottom, #666 3px, transparent 1px);
54
- background-size: 100% 4px;
55
- }
56
-
57
- /* paint glowing LEDs */
58
- .preview-level:before {
59
- width: 100%;
60
- height: 100%;
61
- content: ' ';
62
- position: absolute;
63
- top: 0px;
64
- left: 0px;
65
- z-index: 1;
66
- background-repeat: no-repeat;
67
- background-image: linear-gradient(to top, green 0%, yellow 80%, red 100%);
68
- background-size: 100% 100%;
69
- }
70
-
71
- .clip-0:before {
72
- clip-path: inset(0% 0 0 0);
73
- -webkit-clip-path: inset(100% 0 0 0);
74
- }
75
-
76
- .clip-10:before {
77
- clip-path: inset(10% 0 0 0);
78
- -webkit-clip-path: inset(90% 0 0 0);
79
- }
80
-
81
- .clip-20:before {
82
- clip-path: inset(80% 0 0 0);
83
- -webkit-clip-path: inset(80% 0 0 0);
84
- }
85
-
86
- .clip-30:before {
87
- clip-path: inset(70% 0 0 0);
88
- -webkit-clip-path: inset(70% 0 0 0);
89
- }
90
-
91
- .clip-40:before {
92
- clip-path: inset(60% 0 0 0);
93
- -webkit-clip-path: inset(60% 0 0 0);
94
- }
95
-
96
- .clip-50:before {
97
- clip-path: inset(50% 0 0 0);
98
- -webkit-clip-path: inset(50% 0 0 0);
99
- }
100
-
101
- .clip-60:before {
102
- clip-path: inset(40% 0 0 0);
103
- -webkit-clip-path: inset(40% 0 0 0);
104
- }
105
-
106
- .clip-70:before {
107
- clip-path: inset(30% 0 0 0);
108
- -webkit-clip-path: inset(30% 0 0 0);
109
- }
110
-
111
-
112
- .clip-80:before {
113
- clip-path: inset(20% 0 0 0);
114
- -webkit-clip-path: inset(20% 0 0 0);
115
- }
116
-
117
- .clip-90:before {
118
- clip-path: inset(10% 0 0 0);
119
- -webkit-clip-path: inset(10% 0 0 0);
120
- }
121
-
122
- .clip-100:before {
123
- clip-path: inset(0% 0 0 0);
124
- -webkit-clip-path: inset(0% 0 0 0);
125
- }
126
-
127
-
128
-
129
- /* paint gap lines of LEDs */
130
- .preview-level::after {
131
- width: 100%;
132
- height: 100%;
133
- content: ' ';
134
- position: absolute;
135
- top: 0px;
136
- left: 0px;
137
- z-index: 2;
138
- margin-top: 3px;
139
- background-image: linear-gradient(to bottom, #333 1px
140
- /* space between leds*/
141
- , transparent 1px);
142
- background-repeat: repeat-y;
143
- background-size: 100% 4px;
144
- /* 4px LED height */
145
- background-color: transparent;
146
- }
147
-
148
- #audio-slider {
149
- width: 150px;
150
- }
151
-
152
- #db-level-max {
153
- right: 36px;
154
- top: 0;
155
- }
156
-
157
- #db-level-min {
158
- right: 23px;
159
- bottom: 26px;
160
- }
161
-
162
- #node-gain-level {
163
- align-self: end;
164
- }
@@ -1,249 +0,0 @@
1
- .audio-mixer {
2
- height: 100%;
3
- }
4
-
5
- .channel-container {
6
- height: 100%;
7
- width: 150px;
8
- grid-template-rows: 2em 35% 3em 1fr 2em;
9
- grid-template-columns: 100px;
10
- }
11
-
12
- .mixer-level-db {
13
- justify-content: space-evenly;
14
- }
15
-
16
- .mixer-gain-db {
17
- height: calc(55vh - 15px);
18
- right: -10px;
19
- }
20
-
21
- .mute-icon {
22
- cursor: pointer;
23
- }
24
-
25
- .level-muted {
26
- border: 2px solid;
27
- border-color: #ff3366;
28
- }
29
-
30
- .audio-mixer-fader-container {
31
- height: 55vh;
32
- }
33
-
34
- .audio-mixer-fader {
35
- width: 55vh;
36
- height: 1em;
37
- }
38
-
39
- .audio-level-container {
40
- height: 210px;
41
- width: 200px;
42
- grid-template-columns: 1fr 1fr;
43
- grid-template-rows: 150px 40px 25px;
44
- }
45
-
46
- .audio-level-container-inline {
47
- height: 108px;
48
- width: 180px;
49
- display: flex;
50
- flex-direction: row-reverse;
51
- }
52
-
53
- .audio-level-container div {
54
- float: left;
55
- }
56
-
57
- .preview-levels-mixer {
58
- width: 30px;
59
- background-color: #333;
60
- border-radius: 2px;
61
- display: grid;
62
- grid-template-columns: 30px 30px;
63
- padding: 4px 3px;
64
- margin: auto;
65
- margin-top: 0px;
66
- grid-column-gap: 5px;
67
- height: 100%;
68
- }
69
-
70
- /* paint not glowing LEDs */
71
- .preview-level-mixer {
72
- position: relative;
73
- margin: 0 2px;
74
- flex-grow: 1;
75
- z-index: 3;
76
- background-color: transparent;
77
- background-repeat: repeat-y;
78
- background-image: linear-gradient(to bottom, #666 3px, transparent 1px);
79
- background-size: 100% 4px;
80
- }
81
-
82
- /* paint glowing LEDs */
83
- .preview-level-mixer:before {
84
- width: 100%;
85
- height: 100%;
86
- content: ' ';
87
- position: absolute;
88
- top: 0px;
89
- left: 0px;
90
- z-index: 1;
91
- background-repeat: no-repeat;
92
- background-image: linear-gradient(to top, green 0%, yellow 80%, red 100%);
93
- background-size: 100% 100%;
94
- }
95
-
96
- .clip-0:before {
97
- clip-path: inset(0% 0 0 0);
98
- -webkit-clip-path: inset(100% 0 0 0);
99
- }
100
-
101
- .clip-10:before {
102
- clip-path: inset(10% 0 0 0);
103
- -webkit-clip-path: inset(90% 0 0 0);
104
- }
105
-
106
- .clip-20:before {
107
- clip-path: inset(80% 0 0 0);
108
- -webkit-clip-path: inset(80% 0 0 0);
109
- }
110
-
111
- .clip-30:before {
112
- clip-path: inset(70% 0 0 0);
113
- -webkit-clip-path: inset(70% 0 0 0);
114
- }
115
-
116
- .clip-40:before {
117
- clip-path: inset(60% 0 0 0);
118
- -webkit-clip-path: inset(60% 0 0 0);
119
- }
120
-
121
- .clip-50:before {
122
- clip-path: inset(50% 0 0 0);
123
- -webkit-clip-path: inset(50% 0 0 0);
124
- }
125
-
126
- .clip-60:before {
127
- clip-path: inset(40% 0 0 0);
128
- -webkit-clip-path: inset(40% 0 0 0);
129
- }
130
-
131
- .clip-70:before {
132
- clip-path: inset(30% 0 0 0);
133
- -webkit-clip-path: inset(30% 0 0 0);
134
- }
135
-
136
-
137
- .clip-80:before {
138
- clip-path: inset(20% 0 0 0);
139
- -webkit-clip-path: inset(20% 0 0 0);
140
- }
141
-
142
- .clip-90:before {
143
- clip-path: inset(10% 0 0 0);
144
- -webkit-clip-path: inset(10% 0 0 0);
145
- }
146
-
147
- .clip-100:before {
148
- clip-path: inset(0% 0 0 0);
149
- -webkit-clip-path: inset(0% 0 0 0);
150
- }
151
-
152
-
153
-
154
- /* paint gap lines of LEDs */
155
- .preview-level::after {
156
- width: 100%;
157
- height: 100%;
158
- content: ' ';
159
- position: absolute;
160
- top: 0px;
161
- left: 0px;
162
- z-index: 2;
163
- margin-top: 3px;
164
- background-image: linear-gradient(to bottom, #333 1px
165
- /* space between leds*/
166
- , transparent 1px);
167
- background-repeat: repeat-y;
168
- background-size: 100% 4px;
169
- /* 4px LED height */
170
- background-color: transparent;
171
- }
172
-
173
- #audio-slider {
174
- width: 150px;
175
- }
176
-
177
- #db-level-max {
178
- right: 36px;
179
- top: 0;
180
- }
181
-
182
- #db-level-min {
183
- right: 23px;
184
- bottom: 26px;
185
- }
186
-
187
- #node-gain-level {
188
- align-self: end;
189
- }
190
-
191
- #mixer-level-container-inline {
192
- grid-template-columns: 60px 60px 60px 60px;
193
- grid-row-gap: 10px;
194
- }
195
-
196
- .preview-levels {
197
- height: 100%;
198
- width: 30px;
199
- background-color: #333;
200
- border-radius: 2px;
201
- display: flex;
202
- flex-direction: row;
203
- padding: 4px 3px;
204
- margin: auto;
205
- margin-top: 0px;
206
- writing-mode: vertical-rl;
207
- }
208
-
209
- /* paint not glowing LEDs */
210
- .preview-level {
211
- position: relative;
212
- margin: 0 2px;
213
- flex-grow: 1;
214
- z-index: 3;
215
- background-color: transparent;
216
- background-repeat: repeat-y;
217
- background-image: linear-gradient(to bottom, #666 3px, transparent 1px);
218
- background-size: 100% 4px;
219
- }
220
-
221
- /* paint glowing LEDs */
222
- .preview-level:before {
223
- width: 100%;
224
- height: 100%;
225
- content: ' ';
226
- position: absolute;
227
- top: 0px;
228
- left: 0px;
229
- z-index: 1;
230
- background-repeat: no-repeat;
231
- background-image: linear-gradient(to top, green 0%, yellow 80%, red 100%);
232
- background-size: 100% 100%;
233
- }
234
-
235
- .inline-channel-name {
236
- left: 27px;
237
- }
238
-
239
- .inline-master-channel {
240
- grid-row-start: 1;
241
- grid-column-start: 4;
242
- grid-row-end: 5;
243
- height: 108px;
244
- }
245
-
246
- .inline-master-border {
247
- border: 1px solid;
248
- border-color: cyan;
249
- }