@mjsz-vbr-elements/shared 2.37.0 → 2.38.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/assets/css/base/sizes.css +0 -7
- package/assets/css/components/button.css +21 -0
- package/assets/css/components/game-center-game-data.css +9 -3
- package/assets/css/components/game-center-timeline.css +8 -1
- package/assets/css/components/link.css +29 -0
- package/assets/css/components/playoffs.css +1 -1
- package/assets/css/components/table.css +6 -3
- package/assets/css/components/tabs.css +3 -3
- package/assets/css/components/timezone-selector.css +2 -2
- package/assets/css/core.css +1 -0
- package/assets/css/theme.css +0 -14
- package/package.json +1 -1
|
@@ -3,19 +3,12 @@
|
|
|
3
3
|
--size-00: -0.25rem; */
|
|
4
4
|
--size-1: 1px;
|
|
5
5
|
--size-2: 0.125rem;
|
|
6
|
-
/* --size-3: 3px; */
|
|
7
6
|
--size-4: 0.25rem;
|
|
8
|
-
/* --size-5: 5px; */
|
|
9
7
|
--size-6: 0.375rem;
|
|
10
|
-
/* --size-7: 7px; */
|
|
11
8
|
--size-8: 0.5rem;
|
|
12
|
-
/* --size-9: 9px; */
|
|
13
9
|
--size-10: 0.625rem;
|
|
14
|
-
/* --size-11: 11px; */
|
|
15
10
|
--size-12: 0.75rem;
|
|
16
|
-
/* --size-13: 13px; */
|
|
17
11
|
--size-16: 1rem;
|
|
18
|
-
/* --size-20: 20px; */
|
|
19
12
|
--size-24: 1.5rem;
|
|
20
13
|
--size-32: 2rem;
|
|
21
14
|
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
@layer components {
|
|
2
|
+
:where(button) {
|
|
3
|
+
--_lighten: oklch(from var(--mvw-link-color) calc(l * 1.15) c h);
|
|
4
|
+
--_darken: oklch(from var(--mvw-link-color) calc(l * 0.85) c h);
|
|
5
|
+
|
|
6
|
+
&[data-variant='link'] {
|
|
7
|
+
padding: 0;
|
|
8
|
+
color: var(--mvw-link-color);
|
|
9
|
+
cursor: pointer;
|
|
10
|
+
|
|
11
|
+
&:hover {
|
|
12
|
+
color: light-dark(var(--_darken), var(--_lighten));
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
&.is-active {
|
|
16
|
+
font-weight: 700;
|
|
17
|
+
color: light-dark(var(--_darken), var(--_lighten));
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
}
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
--mvw-gamecenter-periodresults-color: var(--mvw-text-dimmed);
|
|
7
7
|
--mvw-gamecenter-periodresults-size: var(--font-size-700);
|
|
8
8
|
--mvw-gamecenter-teamname-size: var(--font-size-700);
|
|
9
|
-
--mvw-gamecenter-teamname-color:
|
|
9
|
+
--mvw-gamecenter-teamname-color: var(--mvw-text-highlighted);
|
|
10
10
|
--mvw-gamecenter-teamname-weight: 700;
|
|
11
11
|
--mvw-gamecenter-gamestatus-color: var(--mvw-text-muted);
|
|
12
12
|
--mvw-gamecenter-gamestatus-size: var(--font-size-400);
|
|
@@ -22,10 +22,16 @@
|
|
|
22
22
|
display: grid;
|
|
23
23
|
justify-items: center;
|
|
24
24
|
align-items: end;
|
|
25
|
+
gap: var(--size-16);
|
|
25
26
|
|
|
26
27
|
@media (width > 500px) {
|
|
27
28
|
grid-template-columns: repeat(3, 1fr);
|
|
28
29
|
}
|
|
30
|
+
|
|
31
|
+
> div {
|
|
32
|
+
display: grid;
|
|
33
|
+
justify-items: center;
|
|
34
|
+
}
|
|
29
35
|
}
|
|
30
36
|
|
|
31
37
|
.game-result {
|
|
@@ -70,12 +76,12 @@
|
|
|
70
76
|
align-items: center;
|
|
71
77
|
/* font-size: var(--mvw-gamecenter-local-gamedate-size); */
|
|
72
78
|
|
|
73
|
-
&:
|
|
79
|
+
&:before {
|
|
74
80
|
content: '/';
|
|
75
81
|
margin: 0 5px;
|
|
76
82
|
}
|
|
77
83
|
|
|
78
|
-
&:
|
|
84
|
+
&:first-of-type:before {
|
|
79
85
|
content: '';
|
|
80
86
|
}
|
|
81
87
|
}
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
--mvw-gamecenter-card-title-color: var(--mvw-text-highlighted);
|
|
7
7
|
--mvw-gamecenter-card-secondary-color: var(--mvw-text-muted);
|
|
8
8
|
--mvw-gamecenter-card-tertiary-color: var(--mvw-text-faded);
|
|
9
|
-
--mvw-gamecenter-card-border-color:
|
|
9
|
+
--mvw-gamecenter-card-border-color: var(--mvw-border-muted);
|
|
10
10
|
--mvw-gamecenter-card-bg-color: light-dark(var(--mvw-color-white), var(--mvw-color-primary-950));
|
|
11
11
|
|
|
12
12
|
--mvw-gamecenter-team-container-title-color: light-dark(var(--mvw-color-primary-800), var(--mvw-color-primary-200));
|
|
@@ -35,6 +35,8 @@
|
|
|
35
35
|
|
|
36
36
|
.gamecenter-timeline-game-data {
|
|
37
37
|
.is-goal-scorers {
|
|
38
|
+
--mvw-link-color: var(--mvw-text-muted);
|
|
39
|
+
|
|
38
40
|
font-size: var(--font-size-200);
|
|
39
41
|
font-weight: 700;
|
|
40
42
|
line-height: var(--lineheight-200);
|
|
@@ -305,6 +307,8 @@
|
|
|
305
307
|
color: var(--mvw-text-muted);
|
|
306
308
|
}
|
|
307
309
|
li:nth-child(3) {
|
|
310
|
+
--mvw-link-color: var(--mvw-text-default);
|
|
311
|
+
|
|
308
312
|
grid-area: name;
|
|
309
313
|
font-weight: 600;
|
|
310
314
|
color: var(--mvw-text-default);
|
|
@@ -319,6 +323,7 @@
|
|
|
319
323
|
display: inline-flex;
|
|
320
324
|
gap: var(--size-2);
|
|
321
325
|
vertical-align: middle;
|
|
326
|
+
margin-inline-start: var(--size-4);
|
|
322
327
|
}
|
|
323
328
|
|
|
324
329
|
svg {
|
|
@@ -460,6 +465,7 @@
|
|
|
460
465
|
}
|
|
461
466
|
|
|
462
467
|
.is-evented-person {
|
|
468
|
+
--mvw-link-color: var(--mvw-gamecenter-card-secondary-color);
|
|
463
469
|
font-weight: var(--mvw-gamecenter-events-evented-person-weight);
|
|
464
470
|
color: var(--mvw-gamecenter-card-secondary-color);
|
|
465
471
|
}
|
|
@@ -550,6 +556,7 @@
|
|
|
550
556
|
}
|
|
551
557
|
|
|
552
558
|
.is-evented-person {
|
|
559
|
+
--mvw-link-color: var(--mvw-text-pale);
|
|
553
560
|
color: var(--mvw-text-pale);
|
|
554
561
|
}
|
|
555
562
|
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
@layer components {
|
|
2
|
+
:where(a[href]) {
|
|
3
|
+
--_lighten: oklch(from var(--mvw-link-color) calc(l * 1.15) c h);
|
|
4
|
+
--_darken: oklch(from var(--mvw-link-color) calc(l * 0.85) c h);
|
|
5
|
+
|
|
6
|
+
color: var(--mvw-link-color);
|
|
7
|
+
text-decoration: none;
|
|
8
|
+
|
|
9
|
+
&:hover {
|
|
10
|
+
color: light-dark(var(--_darken), var(--_lighten));
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
:where(a[target='_blank']) {
|
|
15
|
+
position: relative;
|
|
16
|
+
|
|
17
|
+
&:hover:after {
|
|
18
|
+
transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
|
|
19
|
+
content: '';
|
|
20
|
+
display: inline-block;
|
|
21
|
+
margin-inline-start: var(--size-2);
|
|
22
|
+
background-color: currentColor;
|
|
23
|
+
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3C!-- Icon from Lucide by Lucide Contributors - https://github.com/lucide-icons/lucide/blob/main/LICENSE --%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 3h6v6m-11 5L21 3m-3 10v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");
|
|
24
|
+
mask-repeat: no-repeat;
|
|
25
|
+
inline-size: 0.8em;
|
|
26
|
+
block-size: 0.8em;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
}
|
|
@@ -146,9 +146,12 @@
|
|
|
146
146
|
align-items: center;
|
|
147
147
|
}
|
|
148
148
|
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
149
|
+
a[target='_blank']:after {
|
|
150
|
+
content: '';
|
|
151
|
+
position: absolute;
|
|
152
|
+
left: 100%;
|
|
153
|
+
top: calc(50% - 0.4em);
|
|
154
|
+
}
|
|
152
155
|
|
|
153
156
|
.is-logo-image {
|
|
154
157
|
display: inline-block;
|
|
@@ -3,13 +3,13 @@
|
|
|
3
3
|
/* Tabs */
|
|
4
4
|
--mvw-tab-btn-font-size: var(--font-size-500);
|
|
5
5
|
--mvw-tab-btn-font-weight: 500;
|
|
6
|
-
--mvw-tab-btn-color:
|
|
6
|
+
--mvw-tab-btn-color: var(--mvw-text-dimmed);
|
|
7
7
|
--mvw-tab-btn-border-style: solid;
|
|
8
8
|
--mvw-tab-btn-border-width: 0 0 3px 0;
|
|
9
9
|
--mvw-tab-btn-text-transform: uppercase;
|
|
10
|
-
--mvw-tab-btn-hover-color:
|
|
10
|
+
--mvw-tab-btn-hover-color: var(--mvw-text-muted);
|
|
11
11
|
--mvw-tab-btn-hover-border-color: transparent;
|
|
12
|
-
--mvw-tab-btn-active-color:
|
|
12
|
+
--mvw-tab-btn-active-color: var(--mvw-text-highlighted);
|
|
13
13
|
--mvw-tab-btn-active-border-color: var(--mvw-border-highlighted);
|
|
14
14
|
--mvw-tab-btn-group-separator-color: var(--mvw-border-muted);
|
|
15
15
|
|
package/assets/css/core.css
CHANGED
package/assets/css/theme.css
CHANGED
|
@@ -22,7 +22,6 @@
|
|
|
22
22
|
|
|
23
23
|
/* Link */
|
|
24
24
|
--mvw-link-color: light-dark(var(--mvw-color-secondary-700), var(--mvw-color-secondary-400));
|
|
25
|
-
--mvw-link-hover-color: light-dark(var(--mvw-color-secondary-900), var(--mvw-color-secondary-200));
|
|
26
25
|
|
|
27
26
|
/* Text */
|
|
28
27
|
--mvw-text-pale: light-dark(var(--mvw-color-primary-100), var(--mvw-color-primary-700));
|
|
@@ -47,17 +46,4 @@
|
|
|
47
46
|
--mvw-border-muted: light-dark(var(--mvw-color-primary-200), var(--mvw-color-primary-700));
|
|
48
47
|
--mvw-border-highlighted: var(--mvw-color-secondary-500);
|
|
49
48
|
}
|
|
50
|
-
|
|
51
|
-
:where(a[href]) {
|
|
52
|
-
color: var(--mvw-link-color);
|
|
53
|
-
text-decoration: none;
|
|
54
|
-
|
|
55
|
-
&:hover {
|
|
56
|
-
color: var(--mvw-link-hover-color);
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
&:visited {
|
|
60
|
-
color: var(--mvw-link-color);
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
49
|
}
|