@ebay/skin 19.21.3 → 19.23.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/dist/accordion/accordion.css +8 -3
- package/dist/details/details.css +1 -3
- package/dist/skeleton/skeleton.css +4 -4
- package/dist/svg/icon/icon-arrows-expand-16.svg +2 -2
- package/dist/svg/icon/icon-arrows-expand-24.svg +2 -2
- package/dist/svg/icon/icon-feedback-error-16.svg +2 -2
- package/dist/svg/icon/icon-feedback-error-24.svg +2 -2
- package/dist/svg/icons.svg +8 -8
- package/dist/tokens/evo-dark-class.css +4 -0
- package/dist/tokens/evo-dark.css +4 -0
- package/dist/tokens/evo-light-class.css +4 -0
- package/dist/tokens/evo-light.css +4 -0
- package/dist/tokens/evo-live-dark-class.css +4 -0
- package/dist/tokens/evo-live-dark.css +4 -0
- package/dist/tokens/evo-live-light-class.css +4 -0
- package/dist/tokens/evo-live-light.css +4 -0
- package/dist/video/video.css +20 -69
- package/package.json +4 -4
|
@@ -16,18 +16,23 @@ ul.accordion summary.details__summary {
|
|
|
16
16
|
border-radius: 0;
|
|
17
17
|
display: flex;
|
|
18
18
|
font-size: var(--font-size-medium);
|
|
19
|
-
justify-content: space-between;
|
|
20
19
|
min-height: 48px;
|
|
21
20
|
padding: 12px 16px;
|
|
22
21
|
}
|
|
23
22
|
|
|
23
|
+
ul.accordion .details__label {
|
|
24
|
+
flex: 1;
|
|
25
|
+
min-width: 0;
|
|
26
|
+
}
|
|
27
|
+
|
|
24
28
|
ul.accordion details {
|
|
25
29
|
overflow: hidden;
|
|
26
30
|
}
|
|
27
31
|
|
|
28
32
|
ul.accordion details .details__content {
|
|
29
|
-
margin: 0 16px
|
|
33
|
+
margin: 0 16px;
|
|
30
34
|
overflow: hidden;
|
|
35
|
+
padding-block-end: 6px;
|
|
31
36
|
}
|
|
32
37
|
|
|
33
38
|
ul.accordion
|
|
@@ -82,7 +87,7 @@ ul.accordion--large summary.details__summary {
|
|
|
82
87
|
overflow: clip;
|
|
83
88
|
transition:
|
|
84
89
|
height var(--motion-duration-medium-3) var(--motion-easing-standard),
|
|
85
|
-
content-visibility var(--motion-duration-medium-
|
|
90
|
+
content-visibility var(--motion-duration-medium-3)
|
|
86
91
|
var(--motion-easing-continuous) allow-discrete,
|
|
87
92
|
opacity var(--motion-duration-medium-2)
|
|
88
93
|
var(--motion-easing-continuous);
|
package/dist/details/details.css
CHANGED
|
@@ -39,6 +39,7 @@ summary.details__summary {
|
|
|
39
39
|
display: inline-flex;
|
|
40
40
|
font-size: var(--font-size-body);
|
|
41
41
|
font-weight: var(--font-weight-600);
|
|
42
|
+
gap: var(--spacing-100);
|
|
42
43
|
list-style-position: inside;
|
|
43
44
|
list-style-type: none;
|
|
44
45
|
padding: 12px 8px;
|
|
@@ -57,9 +58,6 @@ summary.details__summary--small {
|
|
|
57
58
|
font-size: var(--font-size-small);
|
|
58
59
|
padding: 4px 8px;
|
|
59
60
|
}
|
|
60
|
-
span.details__icon {
|
|
61
|
-
margin-inline-start: 8px;
|
|
62
|
-
}
|
|
63
61
|
span.details__icon[hidden] {
|
|
64
62
|
display: inline-flex;
|
|
65
63
|
}
|
|
@@ -137,18 +137,18 @@ div.skeleton__textbox:not(:last-child) {
|
|
|
137
137
|
@media (prefers-reduced-motion: no-preference) {
|
|
138
138
|
@keyframes on-primary {
|
|
139
139
|
0% {
|
|
140
|
-
background-color: var(--color-loading-
|
|
140
|
+
background-color: var(--color-loading-on-primary-state-1);
|
|
141
141
|
}
|
|
142
142
|
to {
|
|
143
|
-
background-color: var(--color-loading-
|
|
143
|
+
background-color: var(--color-loading-on-primary-state-2);
|
|
144
144
|
}
|
|
145
145
|
}
|
|
146
146
|
@keyframes on-secondary {
|
|
147
147
|
0% {
|
|
148
|
-
background-color: var(--color-loading-on-secondary-
|
|
148
|
+
background-color: var(--color-loading-on-secondary-state-1);
|
|
149
149
|
}
|
|
150
150
|
to {
|
|
151
|
-
background-color: var(--color-loading-on-secondary-
|
|
151
|
+
background-color: var(--color-loading-on-secondary-state-2);
|
|
152
152
|
}
|
|
153
153
|
}
|
|
154
154
|
.skeleton__avatar,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
<svg viewBox="0 0
|
|
1
|
+
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
|
2
2
|
<path
|
|
3
3
|
fill-rule="evenodd"
|
|
4
4
|
clip-rule="evenodd"
|
|
5
|
-
d="M1
|
|
5
|
+
d="M1 14a1 1 0 0 0 1 1h4a1 1 0 1 0 0-2H4.414l2.793-2.793a1 1 0 0 0-1.414-1.414L3 11.586V10a1 1 0 0 0-2 0v4Zm7.793-6.793a1 1 0 0 0 1.414 0L13 4.414V6a1 1 0 1 0 2 0V2a1 1 0 0 0-1-1h-4a1 1 0 1 0 0 2h1.586L8.793 5.793a1 1 0 0 0 0 1.414Z"
|
|
6
6
|
/>
|
|
7
7
|
</svg>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
<svg viewBox="0 0
|
|
1
|
+
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
2
2
|
<path
|
|
3
3
|
fill-rule="evenodd"
|
|
4
4
|
clip-rule="evenodd"
|
|
5
|
-
d="M1
|
|
5
|
+
d="M1 22a1 1 0 0 0 1 1h7a1 1 0 1 0 0-2H4.414l6.293-6.293a1 1 0 0 0-1.414-1.414L3 19.586V15a1 1 0 1 0-2 0v7Zm12.293-11.293a1 1 0 0 0 1.414 0L21 4.414V9a1 1 0 1 0 2 0V2a1 1 0 0 0-1-1h-7a1 1 0 1 0 0 2h4.586l-6.293 6.293a1 1 0 0 0 0 1.414Z"
|
|
6
6
|
/>
|
|
7
7
|
</svg>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
<svg viewBox="0 0
|
|
1
|
+
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
|
2
2
|
<path
|
|
3
3
|
fill-rule="evenodd"
|
|
4
4
|
clip-rule="evenodd"
|
|
5
|
-
d="
|
|
5
|
+
d="M0 2.5A2.5 2.5 0 0 1 2.5 0h8A2.5 2.5 0 0 1 13 2.5V5a1 1 0 1 1-2 0V2.5a.5.5 0 0 0-.5-.5h-8a.5.5 0 0 0-.5.5v11a.5.5 0 0 0 .5.5H6a1 1 0 1 1 0 2H2.5A2.5 2.5 0 0 1 0 13.5v-11ZM4 4a1 1 0 0 0 0 2h4a1 1 0 0 0 0-2H4ZM3 8a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2H4a1 1 0 0 1-1-1Zm9 0a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm.665 2.5a.665.665 0 1 0-1.33 0v1.16a.665.665 0 1 0 1.33 0V10.5ZM12 14.33A.665.665 0 1 0 12 13a.665.665 0 0 0 0 1.33Z"
|
|
6
6
|
/>
|
|
7
7
|
</svg>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
<svg viewBox="0 0
|
|
1
|
+
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
2
2
|
<path
|
|
3
3
|
fill-rule="evenodd"
|
|
4
4
|
clip-rule="evenodd"
|
|
5
|
-
d="
|
|
5
|
+
d="M5 1a3 3 0 0 0-3 3v16a3 3 0 0 0 3 3h6a1 1 0 1 0 0-2H5a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v5a1 1 0 1 0 2 0V4a3 3 0 0 0-3-3H5Zm1 6a1 1 0 0 1 1-1h7a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1Zm1 3a1 1 0 1 0 0 2h5a1 1 0 1 0 0-2H7Zm-1 5a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1Zm18 2.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0Zm-4.8-2.235a.7.7 0 1 0-1.4 0V17.3a.7.7 0 1 0 1.4 0v-2.035Zm-.7 5.185a.725.725 0 1 0 0-1.45.725.725 0 0 0 0 1.45Z"
|
|
6
6
|
/>
|
|
7
7
|
</svg>
|
package/dist/svg/icons.svg
CHANGED
|
@@ -891,18 +891,18 @@
|
|
|
891
891
|
fill="#191919"
|
|
892
892
|
/>
|
|
893
893
|
</symbol>
|
|
894
|
-
<symbol viewBox="0 0
|
|
894
|
+
<symbol viewBox="0 0 16 16" id="icon-arrows-expand-16">
|
|
895
895
|
<path
|
|
896
896
|
fill-rule="evenodd"
|
|
897
897
|
clip-rule="evenodd"
|
|
898
|
-
d="M1
|
|
898
|
+
d="M1 14a1 1 0 0 0 1 1h4a1 1 0 1 0 0-2H4.414l2.793-2.793a1 1 0 0 0-1.414-1.414L3 11.586V10a1 1 0 0 0-2 0v4Zm7.793-6.793a1 1 0 0 0 1.414 0L13 4.414V6a1 1 0 1 0 2 0V2a1 1 0 0 0-1-1h-4a1 1 0 1 0 0 2h1.586L8.793 5.793a1 1 0 0 0 0 1.414Z"
|
|
899
899
|
/>
|
|
900
900
|
</symbol>
|
|
901
|
-
<symbol viewBox="0 0
|
|
901
|
+
<symbol viewBox="0 0 24 24" id="icon-arrows-expand-24">
|
|
902
902
|
<path
|
|
903
903
|
fill-rule="evenodd"
|
|
904
904
|
clip-rule="evenodd"
|
|
905
|
-
d="M1
|
|
905
|
+
d="M1 22a1 1 0 0 0 1 1h7a1 1 0 1 0 0-2H4.414l6.293-6.293a1 1 0 0 0-1.414-1.414L3 19.586V15a1 1 0 1 0-2 0v7Zm12.293-11.293a1 1 0 0 0 1.414 0L21 4.414V9a1 1 0 1 0 2 0V2a1 1 0 0 0-1-1h-7a1 1 0 1 0 0 2h4.586l-6.293 6.293a1 1 0 0 0 0 1.414Z"
|
|
906
906
|
/>
|
|
907
907
|
</symbol>
|
|
908
908
|
<symbol viewBox="0 0 16 16" id="icon-article-16">
|
|
@@ -4427,18 +4427,18 @@
|
|
|
4427
4427
|
d="M5 1a3 3 0 0 0-3 3v16a3 3 0 0 0 3 3h2a1 1 0 1 0 0-2H5a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3a1 1 0 1 0 2 0V4a3 3 0 0 0-3-3H5Zm1 6a1 1 0 0 1 1-1h7a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1Zm1 3a1 1 0 1 0 0 2h5a1 1 0 1 0 0-2H7Zm-1 5a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1Zm17.195-4.999a2.75 2.75 0 0 0-3.889 0l-7.344 7.344a2 2 0 0 0-.433.648l-1.217 2.93c-.512 1.236.726 2.474 1.96 1.961l2.932-1.217c.242-.1.462-.247.647-.433l7.344-7.344a2.75 2.75 0 0 0 0-3.889Zm-2.474 1.414a.75.75 0 0 1 1.06 1.06l-7.344 7.345-1.814.753.753-1.813 7.345-7.345Z"
|
|
4428
4428
|
/>
|
|
4429
4429
|
</symbol>
|
|
4430
|
-
<symbol viewBox="0 0
|
|
4430
|
+
<symbol viewBox="0 0 16 16" id="icon-feedback-error-16">
|
|
4431
4431
|
<path
|
|
4432
4432
|
fill-rule="evenodd"
|
|
4433
4433
|
clip-rule="evenodd"
|
|
4434
|
-
d="
|
|
4434
|
+
d="M0 2.5A2.5 2.5 0 0 1 2.5 0h8A2.5 2.5 0 0 1 13 2.5V5a1 1 0 1 1-2 0V2.5a.5.5 0 0 0-.5-.5h-8a.5.5 0 0 0-.5.5v11a.5.5 0 0 0 .5.5H6a1 1 0 1 1 0 2H2.5A2.5 2.5 0 0 1 0 13.5v-11ZM4 4a1 1 0 0 0 0 2h4a1 1 0 0 0 0-2H4ZM3 8a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2H4a1 1 0 0 1-1-1Zm9 0a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm.665 2.5a.665.665 0 1 0-1.33 0v1.16a.665.665 0 1 0 1.33 0V10.5ZM12 14.33A.665.665 0 1 0 12 13a.665.665 0 0 0 0 1.33Z"
|
|
4435
4435
|
/>
|
|
4436
4436
|
</symbol>
|
|
4437
|
-
<symbol viewBox="0 0
|
|
4437
|
+
<symbol viewBox="0 0 24 24" id="icon-feedback-error-24">
|
|
4438
4438
|
<path
|
|
4439
4439
|
fill-rule="evenodd"
|
|
4440
4440
|
clip-rule="evenodd"
|
|
4441
|
-
d="
|
|
4441
|
+
d="M5 1a3 3 0 0 0-3 3v16a3 3 0 0 0 3 3h6a1 1 0 1 0 0-2H5a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v5a1 1 0 1 0 2 0V4a3 3 0 0 0-3-3H5Zm1 6a1 1 0 0 1 1-1h7a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1Zm1 3a1 1 0 1 0 0 2h5a1 1 0 1 0 0-2H7Zm-1 5a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1Zm18 2.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0Zm-4.8-2.235a.7.7 0 1 0-1.4 0V17.3a.7.7 0 1 0 1.4 0v-2.035Zm-.7 5.185a.725.725 0 1 0 0-1.45.725.725 0 0 0 0 1.45Z"
|
|
4442
4442
|
/>
|
|
4443
4443
|
</symbol>
|
|
4444
4444
|
<symbol viewBox="0 0 16 16" id="icon-feedback-negative-16">
|
|
@@ -125,6 +125,10 @@
|
|
|
125
125
|
);
|
|
126
126
|
--color-loading-fill-on-secondary: #353535;
|
|
127
127
|
--color-loading-fill: #2d2d2d;
|
|
128
|
+
--color-loading-on-primary-state-1: var(--color-neutral-800);
|
|
129
|
+
--color-loading-on-primary-state-2: var(--color-neutral-700);
|
|
130
|
+
--color-loading-on-secondary-state-1: var(--color-neutral-700);
|
|
131
|
+
--color-loading-on-secondary-state-2: var(--color-neutral-600);
|
|
128
132
|
--color-scrim-background: rgba(0, 0, 0, 0.64);
|
|
129
133
|
--color-state-layer-focus-on-strong: rgba(0, 0, 0, 0.08);
|
|
130
134
|
--color-state-layer-focus: rgba(255, 255, 255, 0.08);
|
package/dist/tokens/evo-dark.css
CHANGED
|
@@ -125,6 +125,10 @@
|
|
|
125
125
|
);
|
|
126
126
|
--color-loading-fill-on-secondary: #353535;
|
|
127
127
|
--color-loading-fill: #2d2d2d;
|
|
128
|
+
--color-loading-on-primary-state-1: var(--color-neutral-800);
|
|
129
|
+
--color-loading-on-primary-state-2: var(--color-neutral-700);
|
|
130
|
+
--color-loading-on-secondary-state-1: var(--color-neutral-700);
|
|
131
|
+
--color-loading-on-secondary-state-2: var(--color-neutral-600);
|
|
128
132
|
--color-scrim-background: rgba(0, 0, 0, 0.64);
|
|
129
133
|
--color-state-layer-focus-on-strong: rgba(0, 0, 0, 0.08);
|
|
130
134
|
--color-state-layer-focus: rgba(255, 255, 255, 0.08);
|
|
@@ -124,6 +124,10 @@
|
|
|
124
124
|
);
|
|
125
125
|
--color-loading-fill-on-secondary: #e4e4e4;
|
|
126
126
|
--color-loading-fill: #ededed;
|
|
127
|
+
--color-loading-on-primary-state-1: var(--color-neutral-200);
|
|
128
|
+
--color-loading-on-primary-state-2: var(--color-neutral-300);
|
|
129
|
+
--color-loading-on-secondary-state-1: var(--color-neutral-300);
|
|
130
|
+
--color-loading-on-secondary-state-2: var(--color-neutral-400);
|
|
127
131
|
--color-scrim-background: rgba(0, 0, 0, 0.3);
|
|
128
132
|
--color-state-layer-focus-on-strong: rgba(255, 255, 255, 0.12);
|
|
129
133
|
--color-state-layer-focus: rgba(0, 0, 0, 0.04);
|
|
@@ -124,6 +124,10 @@
|
|
|
124
124
|
);
|
|
125
125
|
--color-loading-fill-on-secondary: #e4e4e4;
|
|
126
126
|
--color-loading-fill: #ededed;
|
|
127
|
+
--color-loading-on-primary-state-1: var(--color-neutral-200);
|
|
128
|
+
--color-loading-on-primary-state-2: var(--color-neutral-300);
|
|
129
|
+
--color-loading-on-secondary-state-1: var(--color-neutral-300);
|
|
130
|
+
--color-loading-on-secondary-state-2: var(--color-neutral-400);
|
|
127
131
|
--color-scrim-background: rgba(0, 0, 0, 0.3);
|
|
128
132
|
--color-state-layer-focus-on-strong: rgba(255, 255, 255, 0.12);
|
|
129
133
|
--color-state-layer-focus: rgba(0, 0, 0, 0.04);
|
|
@@ -124,6 +124,10 @@
|
|
|
124
124
|
);
|
|
125
125
|
--color-loading-fill-on-secondary: #353535;
|
|
126
126
|
--color-loading-fill: #2d2d2d;
|
|
127
|
+
--color-loading-on-primary-state-1: var(--color-neutral-800);
|
|
128
|
+
--color-loading-on-primary-state-2: var(--color-neutral-700);
|
|
129
|
+
--color-loading-on-secondary-state-1: var(--color-neutral-700);
|
|
130
|
+
--color-loading-on-secondary-state-2: var(--color-neutral-600);
|
|
127
131
|
--color-scrim-background: rgba(0, 0, 0, 0.64);
|
|
128
132
|
--color-state-layer-focus-on-strong: rgba(0, 0, 0, 0.08);
|
|
129
133
|
--color-state-layer-focus: rgba(255, 255, 255, 0.08);
|
|
@@ -124,6 +124,10 @@
|
|
|
124
124
|
);
|
|
125
125
|
--color-loading-fill-on-secondary: #353535;
|
|
126
126
|
--color-loading-fill: #2d2d2d;
|
|
127
|
+
--color-loading-on-primary-state-1: var(--color-neutral-800);
|
|
128
|
+
--color-loading-on-primary-state-2: var(--color-neutral-700);
|
|
129
|
+
--color-loading-on-secondary-state-1: var(--color-neutral-700);
|
|
130
|
+
--color-loading-on-secondary-state-2: var(--color-neutral-600);
|
|
127
131
|
--color-scrim-background: rgba(0, 0, 0, 0.64);
|
|
128
132
|
--color-state-layer-focus-on-strong: rgba(0, 0, 0, 0.08);
|
|
129
133
|
--color-state-layer-focus: rgba(255, 255, 255, 0.08);
|
|
@@ -125,6 +125,10 @@
|
|
|
125
125
|
);
|
|
126
126
|
--color-loading-fill-on-secondary: #353535;
|
|
127
127
|
--color-loading-fill: #2d2d2d;
|
|
128
|
+
--color-loading-on-primary-state-1: var(--color-neutral-800);
|
|
129
|
+
--color-loading-on-primary-state-2: var(--color-neutral-700);
|
|
130
|
+
--color-loading-on-secondary-state-1: var(--color-neutral-700);
|
|
131
|
+
--color-loading-on-secondary-state-2: var(--color-neutral-600);
|
|
128
132
|
--color-scrim-background: rgba(0, 0, 0, 0.64);
|
|
129
133
|
--color-state-layer-focus-on-strong: rgba(0, 0, 0, 0.08);
|
|
130
134
|
--color-state-layer-focus: rgba(255, 255, 255, 0.08);
|
|
@@ -125,6 +125,10 @@
|
|
|
125
125
|
);
|
|
126
126
|
--color-loading-fill-on-secondary: #353535;
|
|
127
127
|
--color-loading-fill: #2d2d2d;
|
|
128
|
+
--color-loading-on-primary-state-1: var(--color-neutral-800);
|
|
129
|
+
--color-loading-on-primary-state-2: var(--color-neutral-700);
|
|
130
|
+
--color-loading-on-secondary-state-1: var(--color-neutral-700);
|
|
131
|
+
--color-loading-on-secondary-state-2: var(--color-neutral-600);
|
|
128
132
|
--color-scrim-background: rgba(0, 0, 0, 0.64);
|
|
129
133
|
--color-state-layer-focus-on-strong: rgba(0, 0, 0, 0.08);
|
|
130
134
|
--color-state-layer-focus: rgba(255, 255, 255, 0.08);
|
package/dist/video/video.css
CHANGED
|
@@ -38,54 +38,18 @@
|
|
|
38
38
|
margin-right: 10px;
|
|
39
39
|
width: 24px;
|
|
40
40
|
}
|
|
41
|
-
.video-player .shaka-play-button {
|
|
42
|
-
background: none;
|
|
43
|
-
box-shadow: none;
|
|
44
|
-
height: auto;
|
|
45
|
-
padding: 0;
|
|
46
|
-
width: auto;
|
|
47
|
-
}
|
|
48
|
-
.video-player .icon--video-play,
|
|
49
|
-
.video-player .shaka-play-button svg {
|
|
50
|
-
height: 48px;
|
|
51
|
-
width: 48px;
|
|
52
|
-
}
|
|
53
|
-
.video-player .shaka-bottom-controls {
|
|
54
|
-
box-sizing: border-box;
|
|
55
|
-
margin-bottom: 3%;
|
|
56
|
-
padding-bottom: 0;
|
|
57
|
-
position: relative;
|
|
58
|
-
width: 94%;
|
|
59
|
-
}
|
|
60
|
-
.video-player .shaka-controls-button-panel {
|
|
61
|
-
background-color: rgba(0, 0, 0, 0.7);
|
|
62
|
-
border-radius: 8px;
|
|
63
|
-
bottom: 0;
|
|
64
|
-
height: 40px;
|
|
65
|
-
position: absolute;
|
|
66
|
-
width: 100%;
|
|
67
|
-
}
|
|
68
|
-
.video-player .shaka-controls-button-panel :first-child {
|
|
69
|
-
margin-left: 8px;
|
|
70
|
-
}
|
|
71
|
-
.video-player .shaka-controls-button-panel :last-child {
|
|
72
|
-
margin-right: 8px;
|
|
73
|
-
}
|
|
74
|
-
.video-player--poster .shaka-scrim-container {
|
|
75
|
-
visibility: hidden;
|
|
76
|
-
}
|
|
77
41
|
.video-player .shaka-range-container {
|
|
78
|
-
|
|
79
|
-
margin:
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
display: none;
|
|
42
|
+
margin-bottom: -25px;
|
|
43
|
+
margin-left: 105px;
|
|
44
|
+
margin-right: 133px;
|
|
45
|
+
z-index: 3;
|
|
83
46
|
}
|
|
84
|
-
.video-player .shaka-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
47
|
+
.video-player .shaka-controls-container .shaka-play-button-container {
|
|
48
|
+
align-items: center;
|
|
49
|
+
display: flex;
|
|
50
|
+
height: 100%;
|
|
51
|
+
justify-content: center;
|
|
52
|
+
width: 100%;
|
|
89
53
|
}
|
|
90
54
|
.video-player--with-nav .shaka-controls-container {
|
|
91
55
|
pointer-events: none;
|
|
@@ -100,36 +64,23 @@
|
|
|
100
64
|
}
|
|
101
65
|
.video-player--compact .shaka-controls-button-panel {
|
|
102
66
|
background-color: initial;
|
|
103
|
-
|
|
104
|
-
pointer-events: none;
|
|
105
|
-
}
|
|
106
|
-
.video-player--compact .shaka-controls-button-panel > :first-child {
|
|
107
|
-
border-radius: 16px;
|
|
108
|
-
font-size: var(--font-size-medium);
|
|
109
|
-
margin-right: auto;
|
|
110
|
-
min-width: 80px;
|
|
111
|
-
padding: var(--spacing-200) var(--spacing-100);
|
|
112
|
-
width: auto;
|
|
113
|
-
}
|
|
114
|
-
.video-player--compact .shaka-controls-button-panel button * {
|
|
115
|
-
margin: 0;
|
|
67
|
+
margin-bottom: 10px;
|
|
116
68
|
}
|
|
117
69
|
.video-player--compact .shaka-controls-button-panel button {
|
|
118
|
-
align-items: center;
|
|
119
70
|
background-color: rgba(0, 0, 0, 0.32);
|
|
120
71
|
border-radius: 50%;
|
|
121
|
-
justify-content: center;
|
|
122
72
|
margin: 0 5px;
|
|
123
73
|
}
|
|
124
|
-
.video-player--compact
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
74
|
+
.video-player--compact
|
|
75
|
+
.shaka-controls-button-panel
|
|
76
|
+
button.shaka-remaining-time {
|
|
77
|
+
border-radius: 16px;
|
|
78
|
+
font-size: var(--font-size-medium);
|
|
79
|
+
min-width: 80px;
|
|
80
|
+
padding: var(--spacing-200) var(--spacing-100);
|
|
130
81
|
}
|
|
131
|
-
.video-player--compact .shaka-
|
|
132
|
-
|
|
82
|
+
.video-player--with-nav.video-player--compact .shaka-big-buttons-container {
|
|
83
|
+
display: none;
|
|
133
84
|
}
|
|
134
85
|
@container (inline-size < 320px) {
|
|
135
86
|
.video-player--compact video {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ebay/skin",
|
|
3
|
-
"version": "19.
|
|
3
|
+
"version": "19.23.0",
|
|
4
4
|
"description": "Skin - CSS modules that represent the brand eBay",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"eBay",
|
|
@@ -35,8 +35,8 @@
|
|
|
35
35
|
],
|
|
36
36
|
"scripts": {
|
|
37
37
|
"prebuild": "npm run clean",
|
|
38
|
-
"build": "npm run build:css && npm run lint:js && npm run build:icons && npm run copy && tsx scripts gen-build",
|
|
39
|
-
"build:css": "
|
|
38
|
+
"build": "npm run lint:sass && npm run build:css && npm run lint:js && npm run build:icons && npm run copy && tsx scripts gen-build",
|
|
39
|
+
"build:css": "rimraf dist && npm run bundle && npm run postcss && tsx scripts/add-y-comments && prettier dist --write && npm run lint:css",
|
|
40
40
|
"build:icons": "tsx scripts genSVG && prettier ../../src/data/icons.json --write",
|
|
41
41
|
"build:storybook": "npm run copy:assetsToStorybook && storybook build -o ./_site/public/storybook",
|
|
42
42
|
"bundle": "sass src/sass:dist src/tokens:dist/tokens --no-source-map -I \"../../node_modules\"",
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
"snapshots:all": "npm run copy:assetsToStorybook && percy storybook:start --include '.*'",
|
|
62
62
|
"snapshots:all:dry": "percy storybook:start --dry-run --include '.*'",
|
|
63
63
|
"snapshots:dry": "percy storybook:start --dry-run --include \"$(echo $STORIES)\"",
|
|
64
|
-
"start": "
|
|
64
|
+
"start": "npm run storybook",
|
|
65
65
|
"storybook": "npm run copy:assetsToStorybook && storybook dev -c .storybook --no-open",
|
|
66
66
|
"test": "npm run build",
|
|
67
67
|
"verify": "tsx scripts verify"
|