@stream-io/video-styling 1.14.1 → 1.15.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.
- package/CHANGELOG.md +12 -0
- package/dist/css/embedded.css +70 -0
- package/dist/css/embedded.css.map +1 -1
- package/dist/css/styles.css +70 -0
- package/dist/css/styles.css.map +1 -1
- package/index.scss +1 -0
- package/package.json +1 -1
- package/project.json +2 -2
- package/src/AudioBlockedNotification/AudioBlockedNotification-layout.scss +51 -0
- package/src/AudioBlockedNotification/AudioBlockedNotification-theme.scss +23 -0
- package/src/AudioBlockedNotification/index.scss +2 -0
- package/src/DeviceSettings/DeviceSettings-layout.scss +2 -0
- package/src/_global-theme-variables.scss +2 -0
package/index.scss
CHANGED
package/package.json
CHANGED
package/project.json
CHANGED
|
@@ -12,10 +12,10 @@
|
|
|
12
12
|
"types": [
|
|
13
13
|
{ "type": "feat", "section": "Features" },
|
|
14
14
|
{ "type": "fix", "section": "Bug Fixes" },
|
|
15
|
-
{ "type": "chore", "
|
|
15
|
+
{ "type": "chore", "section": "Chores" },
|
|
16
16
|
{ "type": "docs", "section": "Documentation" },
|
|
17
17
|
{ "type": "style", "hidden": true },
|
|
18
|
-
{ "type": "refactor", "
|
|
18
|
+
{ "type": "refactor", "section": "Refactors" },
|
|
19
19
|
{ "type": "perf", "section": "Features" },
|
|
20
20
|
{ "type": "test", "hidden": true }
|
|
21
21
|
]
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
.str-video__audio-blocked-notification {
|
|
2
|
+
position: absolute;
|
|
3
|
+
inset: 0;
|
|
4
|
+
z-index: 4;
|
|
5
|
+
display: flex;
|
|
6
|
+
align-items: center;
|
|
7
|
+
justify-content: center;
|
|
8
|
+
padding: 0;
|
|
9
|
+
border: none;
|
|
10
|
+
cursor: pointer;
|
|
11
|
+
|
|
12
|
+
.str-video__audio-blocked-notification__message {
|
|
13
|
+
display: inline-flex;
|
|
14
|
+
align-items: center;
|
|
15
|
+
gap: 0.625rem;
|
|
16
|
+
padding: 0.625rem;
|
|
17
|
+
max-width: calc(100% - 1.6rem);
|
|
18
|
+
|
|
19
|
+
.str-video__icon {
|
|
20
|
+
width: 1.5rem;
|
|
21
|
+
height: 1.5rem;
|
|
22
|
+
flex-shrink: 0;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.str-video__audio-blocked-notification__text {
|
|
27
|
+
display: flex;
|
|
28
|
+
flex-direction: column;
|
|
29
|
+
align-items: flex-start;
|
|
30
|
+
min-width: 0;
|
|
31
|
+
line-height: 1.25;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.str-video__audio-blocked-notification__title {
|
|
35
|
+
font-size: 0.75rem;
|
|
36
|
+
font-weight: 600;
|
|
37
|
+
max-width: 100%;
|
|
38
|
+
white-space: nowrap;
|
|
39
|
+
overflow: hidden;
|
|
40
|
+
text-overflow: ellipsis;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.str-video__audio-blocked-notification__subtitle {
|
|
44
|
+
font-size: 0.75rem;
|
|
45
|
+
font-weight: 400;
|
|
46
|
+
max-width: 100%;
|
|
47
|
+
white-space: nowrap;
|
|
48
|
+
overflow: hidden;
|
|
49
|
+
text-overflow: ellipsis;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
.str-video__audio-blocked-notification {
|
|
2
|
+
background: var(--str-video__audio-blocked-overlay-color);
|
|
3
|
+
border-radius: inherit;
|
|
4
|
+
transition: background-color 0.15s ease;
|
|
5
|
+
|
|
6
|
+
&:hover {
|
|
7
|
+
background: var(--str-video__audio-blocked-overlay-color-hovered);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.str-video__audio-blocked-notification__message {
|
|
11
|
+
background-color: var(--str-video__background-color1);
|
|
12
|
+
border-radius: var(--str-video__border-radius-xs);
|
|
13
|
+
color: var(--str-video__text-color1);
|
|
14
|
+
|
|
15
|
+
.str-video__icon {
|
|
16
|
+
background-color: var(--str-video__text-color1);
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.str-video__audio-blocked-notification__subtitle {
|
|
21
|
+
color: var(--str-video__text-color2);
|
|
22
|
+
}
|
|
23
|
+
}
|
|
@@ -129,6 +129,8 @@
|
|
|
129
129
|
background: var(--str-video__primary-color);
|
|
130
130
|
border-radius: var(--str-video__border-radius-xs);
|
|
131
131
|
transform-origin: left center;
|
|
132
|
+
// resting state; the live level is written inline by AudioVolumeIndicator
|
|
133
|
+
transform: scaleX(0);
|
|
132
134
|
}
|
|
133
135
|
}
|
|
134
136
|
|
|
@@ -115,6 +115,8 @@
|
|
|
115
115
|
--str-video__overlay-color: rgba(39, 42, 48, 0.75);
|
|
116
116
|
--str-video__livestream-overlay-color: rgba(39, 42, 48, 0.25);
|
|
117
117
|
--str-video__livestream-overlay-color-hovered: rgba(39, 42, 48, 0.5);
|
|
118
|
+
--str-video__audio-blocked-overlay-color: rgba(39, 42, 48, 0.35);
|
|
119
|
+
--str-video__audio-blocked-overlay-color-hovered: rgba(39, 42, 48, 0.45);
|
|
118
120
|
|
|
119
121
|
// Icons - base64 encoded SVGs
|
|
120
122
|
|