@unopsitg/ux 21.0.2 → 21.0.19
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/_card.scss +89 -2
- package/assets/_config.scss +3 -3
- package/assets/_content.scss +39 -5
- package/assets/_footer.scss +59 -3
- package/assets/_main.scss +6 -8
- package/assets/_responsive.scss +15 -3
- package/assets/_sass_variables.scss +8 -2
- package/assets/_search.scss +3 -3
- package/assets/_tabs.scss +44 -0
- package/assets/_tags.scss +1 -1
- package/assets/_topbar.scss +45 -17
- package/assets/_utils.scss +0 -12
- package/assets/layout.scss +1 -0
- package/assets/sidebar/_sidebar_compact.scss +1 -6
- package/assets/sidebar/_sidebar_horizontal.scss +97 -76
- package/assets/sidebar/_sidebar_slim.scss +1 -6
- package/assets/sidebar/_sidebar_theme_core.scss +19 -19
- package/assets/sidebar/themes/_dark.scss +5 -5
- package/assets/sidebar/themes/_light.scss +2 -2
- package/assets/sidebar/themes/_primary.scss +8 -8
- package/assets/tailwind.css +54 -25
- package/assets/variables/_common.scss +1 -0
- package/assets/variables/_light.scss +2 -2
- package/fesm2022/unopsitg-ux.mjs +1568 -207
- package/fesm2022/unopsitg-ux.mjs.map +1 -1
- package/package.json +1 -1
- package/types/unopsitg-ux.d.ts +277 -185
- package/assets/opp/AppLogo/AppLogo-onDark_V.svg +0 -55
- package/assets/opp/AppLogo/AppLogo-onLight_V.svg +0 -55
- package/assets/opp/AppLogo-dark-vertical.svg +0 -55
- package/assets/opp/drive-download-20260421T141232Z-3-001.zip +0 -0
- package/assets/opp/favicon/favicon.svg +0 -17
- package/assets/opp/logo-dark-horizontal.svg +0 -55
- package/assets/opp/logo-light-horizontal.svg +0 -55
|
@@ -5,69 +5,29 @@
|
|
|
5
5
|
flex-direction: column;
|
|
6
6
|
width: 100%;
|
|
7
7
|
|
|
8
|
+
.layout-body {
|
|
9
|
+
flex-direction: column;
|
|
10
|
+
}
|
|
11
|
+
|
|
8
12
|
.layout-content {
|
|
9
13
|
.layout-breadcrumb {
|
|
10
14
|
display: flex;
|
|
11
15
|
margin-bottom: 1rem;
|
|
12
16
|
}
|
|
13
17
|
}
|
|
14
|
-
.layout-topbar {
|
|
15
|
-
width: auto;
|
|
16
|
-
background: transparent;
|
|
17
|
-
border: none;
|
|
18
|
-
padding: 1rem;
|
|
19
|
-
.topbar-left {
|
|
20
|
-
display: none;
|
|
21
|
-
.horizontal-logo {
|
|
22
|
-
display: block;
|
|
23
|
-
height: 2rem;
|
|
24
|
-
cursor: pointer;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.menu-button {
|
|
28
|
-
display: none;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.viewname {
|
|
32
|
-
display: none;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
.topbar-separator {
|
|
36
|
-
display: block;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
.layout-breadcrumb {
|
|
40
|
-
display: none;
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
18
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
justify-content: flex-end;
|
|
47
|
-
|
|
48
|
-
.topbar-menu {
|
|
49
|
-
.profile-item {
|
|
50
|
-
> a {
|
|
51
|
-
padding: 0;
|
|
52
|
-
|
|
53
|
-
img {
|
|
54
|
-
margin: 0;
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
.profile-name {
|
|
58
|
-
display: none;
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
}
|
|
19
|
+
> [app-topbar] {
|
|
20
|
+
display: none;
|
|
63
21
|
}
|
|
22
|
+
|
|
64
23
|
.layout-content-wrapper .layout-topbar {
|
|
65
24
|
display: none;
|
|
66
25
|
}
|
|
67
26
|
|
|
68
27
|
.layout-sidebar {
|
|
69
28
|
width: 100%;
|
|
70
|
-
height:
|
|
29
|
+
height: 3.5rem;
|
|
30
|
+
flex-shrink: 0;
|
|
71
31
|
overflow: visible;
|
|
72
32
|
flex-direction: row;
|
|
73
33
|
align-items: center;
|
|
@@ -76,18 +36,98 @@
|
|
|
76
36
|
border: 0 none;
|
|
77
37
|
transition: none;
|
|
78
38
|
padding: 0 1rem;
|
|
79
|
-
border-radius: 0 0 1.5rem 1.5rem;
|
|
80
39
|
border-right: none;
|
|
81
|
-
border-bottom: var(--
|
|
40
|
+
border-bottom: 1px solid var(--surface-border);
|
|
41
|
+
background: transparent;
|
|
82
42
|
|
|
83
43
|
.layout-menu-container {
|
|
84
|
-
overflow: auto;
|
|
44
|
+
overflow-x: auto;
|
|
45
|
+
overflow-y: clip;
|
|
85
46
|
flex: 1;
|
|
47
|
+
min-width: 0;
|
|
48
|
+
order: 0;
|
|
49
|
+
scrollbar-width: none;
|
|
86
50
|
|
|
87
51
|
&::-webkit-scrollbar {
|
|
88
52
|
display: none;
|
|
89
53
|
}
|
|
90
54
|
}
|
|
55
|
+
|
|
56
|
+
> [app-topbar] {
|
|
57
|
+
display: contents;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.layout-topbar {
|
|
61
|
+
display: contents;
|
|
62
|
+
|
|
63
|
+
.mobile-menu-button {
|
|
64
|
+
display: none;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.mobile-logo {
|
|
68
|
+
display: none;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.topbar-left {
|
|
72
|
+
display: flex;
|
|
73
|
+
align-items: center;
|
|
74
|
+
flex-shrink: 0;
|
|
75
|
+
order: -1;
|
|
76
|
+
padding-right: 1rem;
|
|
77
|
+
|
|
78
|
+
.topbar-sidebar-section {
|
|
79
|
+
display: flex;
|
|
80
|
+
align-items: center;
|
|
81
|
+
gap: 0.75rem;
|
|
82
|
+
padding-left: 0.375rem;
|
|
83
|
+
width: auto;
|
|
84
|
+
|
|
85
|
+
.topbar-menu-toggle {
|
|
86
|
+
display: none;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.topbar-logo-separator {
|
|
91
|
+
display: block;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.topbar-main {
|
|
96
|
+
display: flex;
|
|
97
|
+
align-items: center;
|
|
98
|
+
justify-content: flex-end;
|
|
99
|
+
order: 1;
|
|
100
|
+
flex-shrink: 0;
|
|
101
|
+
flex: none;
|
|
102
|
+
padding: 0;
|
|
103
|
+
padding-left: 1rem;
|
|
104
|
+
|
|
105
|
+
> [app-breadcrumb],
|
|
106
|
+
> .layout-breadcrumb {
|
|
107
|
+
display: none;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.topbar-right {
|
|
111
|
+
display: flex;
|
|
112
|
+
justify-content: flex-end;
|
|
113
|
+
|
|
114
|
+
.topbar-menu {
|
|
115
|
+
.profile-item {
|
|
116
|
+
> a {
|
|
117
|
+
padding: 0;
|
|
118
|
+
|
|
119
|
+
img {
|
|
120
|
+
margin: 0;
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
.profile-name {
|
|
124
|
+
display: none;
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
}
|
|
91
131
|
}
|
|
92
132
|
|
|
93
133
|
.layout-content-wrapper {
|
|
@@ -128,6 +168,10 @@
|
|
|
128
168
|
border-radius: var(--border-radius);
|
|
129
169
|
position: relative;
|
|
130
170
|
|
|
171
|
+
&:first-child {
|
|
172
|
+
display: none;
|
|
173
|
+
}
|
|
174
|
+
|
|
131
175
|
> .layout-menuitem-root-text {
|
|
132
176
|
display: none;
|
|
133
177
|
}
|
|
@@ -167,12 +211,7 @@
|
|
|
167
211
|
min-width: 15rem;
|
|
168
212
|
background: var(--popover-background) !important;
|
|
169
213
|
border: 1px solid var(--popover-border-color);
|
|
170
|
-
box-shadow:
|
|
171
|
-
0px 56px 16px 0px rgba(0, 0, 0, 0),
|
|
172
|
-
0px 36px 14px 0px rgba(0, 0, 0, 0.01),
|
|
173
|
-
0px 20px 12px 0px rgba(0, 0, 0, 0.02),
|
|
174
|
-
0px 9px 9px 0px rgba(0, 0, 0, 0.03),
|
|
175
|
-
0px 2px 5px 0px rgba(0, 0, 0, 0.04);
|
|
214
|
+
box-shadow: $flyoutShadow;
|
|
176
215
|
border-radius: 1rem;
|
|
177
216
|
padding: 0.5rem;
|
|
178
217
|
overflow: auto;
|
|
@@ -199,22 +238,4 @@
|
|
|
199
238
|
}
|
|
200
239
|
}
|
|
201
240
|
}
|
|
202
|
-
.layout-sidebar-primary.layout-horizontal {
|
|
203
|
-
.layout-topbar .topbar-right .topbar-menu .app-config-button {
|
|
204
|
-
color: var(--p-surface-0);
|
|
205
|
-
&::after,
|
|
206
|
-
&::before {
|
|
207
|
-
border-color: var(--p-surface-0);
|
|
208
|
-
}
|
|
209
|
-
}
|
|
210
|
-
}
|
|
211
|
-
.layout-sidebar-dark.layout-horizontal {
|
|
212
|
-
.layout-topbar .topbar-right .topbar-menu .app-config-button {
|
|
213
|
-
color: var(--p-surface-0);
|
|
214
|
-
&::after,
|
|
215
|
-
&::before {
|
|
216
|
-
border-color: var(--p-surface-0);
|
|
217
|
-
}
|
|
218
|
-
}
|
|
219
|
-
}
|
|
220
241
|
}
|
|
@@ -81,12 +81,7 @@
|
|
|
81
81
|
min-width: 15rem;
|
|
82
82
|
background: var(--popover-background);
|
|
83
83
|
border: 1px solid var(--popover-border-color);
|
|
84
|
-
box-shadow:
|
|
85
|
-
0px 56px 16px 0px rgba(0, 0, 0, 0),
|
|
86
|
-
0px 36px 14px 0px rgba(0, 0, 0, 0.01),
|
|
87
|
-
0px 20px 12px 0px rgba(0, 0, 0, 0.02),
|
|
88
|
-
0px 9px 9px 0px rgba(0, 0, 0, 0.03),
|
|
89
|
-
0px 2px 5px 0px rgba(0, 0, 0, 0.04);
|
|
84
|
+
box-shadow: $flyoutShadow;
|
|
90
85
|
border-radius: 1rem;
|
|
91
86
|
padding: 0.5rem;
|
|
92
87
|
max-height: 20rem;
|
|
@@ -67,11 +67,11 @@
|
|
|
67
67
|
@media screen and (min-width: $breakpoint) {
|
|
68
68
|
.layout-horizontal {
|
|
69
69
|
.layout-topbar {
|
|
70
|
-
background:
|
|
71
|
-
color: var(--
|
|
70
|
+
background: transparent;
|
|
71
|
+
color: var(--text-color);
|
|
72
72
|
|
|
73
73
|
.topbar-separator {
|
|
74
|
-
border-left: var(--
|
|
74
|
+
border-left: 1px solid var(--surface-border);
|
|
75
75
|
}
|
|
76
76
|
|
|
77
77
|
.topbar-menu {
|
|
@@ -79,27 +79,27 @@
|
|
|
79
79
|
&.right-sidebar-item {
|
|
80
80
|
> a {
|
|
81
81
|
background: transparent;
|
|
82
|
-
color: var(--
|
|
82
|
+
color: var(--text-color);
|
|
83
83
|
|
|
84
84
|
&:hover {
|
|
85
|
-
background: var(--
|
|
85
|
+
background: var(--surface-hover);
|
|
86
86
|
}
|
|
87
87
|
|
|
88
88
|
&:focus {
|
|
89
|
-
box-shadow: var(--
|
|
89
|
+
box-shadow: var(--focus-ring-shadow);
|
|
90
90
|
}
|
|
91
91
|
}
|
|
92
92
|
}
|
|
93
93
|
|
|
94
94
|
> a {
|
|
95
|
-
color: var(--
|
|
95
|
+
color: var(--text-color);
|
|
96
96
|
|
|
97
97
|
&:hover {
|
|
98
|
-
background: var(--
|
|
98
|
+
background: var(--surface-hover);
|
|
99
99
|
}
|
|
100
100
|
|
|
101
101
|
&:focus {
|
|
102
|
-
box-shadow: var(--
|
|
102
|
+
box-shadow: var(--focus-ring-shadow);
|
|
103
103
|
}
|
|
104
104
|
|
|
105
105
|
.topbar-badge {
|
|
@@ -107,26 +107,26 @@
|
|
|
107
107
|
color: var(--primary-contrast-color);
|
|
108
108
|
}
|
|
109
109
|
}
|
|
110
|
-
|
|
111
|
-
> ul {
|
|
112
|
-
&.notifications-menu {
|
|
113
|
-
.notification-detail {
|
|
114
|
-
color: var(--d-menuitem-root-text-color);
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
110
|
}
|
|
119
111
|
}
|
|
120
112
|
}
|
|
121
113
|
|
|
122
114
|
.layout-sidebar {
|
|
115
|
+
background: transparent;
|
|
123
116
|
background-image: none;
|
|
124
117
|
|
|
125
118
|
.layout-menu {
|
|
126
119
|
.layout-root-menuitem {
|
|
120
|
+
> a {
|
|
121
|
+
color: var(--text-color);
|
|
122
|
+
|
|
123
|
+
&:hover {
|
|
124
|
+
background: var(--surface-hover);
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
|
|
127
128
|
> ul {
|
|
128
|
-
background: var(--
|
|
129
|
-
background-image: linear-gradient(180deg, var(--d-sidebar-bg-color) 10%, var(--d-sidebar-bg-color-alt) 100%);
|
|
129
|
+
background: var(--popover-background);
|
|
130
130
|
}
|
|
131
131
|
}
|
|
132
132
|
}
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
--d-menuitem-text-color: var(--p-text-color);
|
|
9
9
|
--d-menuitem-icon-color: var(--p-primary-700);
|
|
10
10
|
--d-menuitem-hover-bg: var(--surface-hover);
|
|
11
|
-
--d-menuitem-active-bg:
|
|
11
|
+
--d-menuitem-active-bg: color-mix(in srgb, var(--color-midnight-600) 39%, transparent);
|
|
12
12
|
--d-menuitem-active-text-color: var(--p-primary-600);
|
|
13
13
|
--d-menuitem-active-route-text-color: var(--p-primary-700);
|
|
14
14
|
--d-menuitem-active-border: 0.5px solid var(--surface-border);
|
|
@@ -18,14 +18,14 @@
|
|
|
18
18
|
.app-dark .layout-sidebar-dark {
|
|
19
19
|
--d-sidebar-border: 1px solid var(--p-surface-700);
|
|
20
20
|
--d-app-name-color: var(--p-surface-0);
|
|
21
|
-
--d-menu-separator-border: 1px solid
|
|
21
|
+
--d-menu-separator-border: 1px solid color-mix(in srgb, var(--p-surface-0) 15%, transparent);
|
|
22
22
|
--d-menuitem-root-text-color: var(--p-surface-0);
|
|
23
23
|
--d-menuitem-text-color: var(--p-surface-0);
|
|
24
24
|
--d-menuitem-icon-color: var(--color-ocean-300);
|
|
25
|
-
--d-menuitem-hover-bg:
|
|
26
|
-
--d-menuitem-active-bg:
|
|
25
|
+
--d-menuitem-hover-bg: color-mix(in srgb, var(--color-ocean-700) 30%, transparent);
|
|
26
|
+
--d-menuitem-active-bg: color-mix(in srgb, var(--color-midnight-600) 39%, transparent);
|
|
27
27
|
--d-menuitem-active-text-color: var(--p-surface-0);
|
|
28
28
|
--d-menuitem-active-route-text-color: var(--p-surface-0);
|
|
29
29
|
--d-menuitem-active-border: 0.5px solid var(--p-surface-700);
|
|
30
|
-
--d-menuitem-focus-shadow: 0 0 0 0.2rem
|
|
30
|
+
--d-menuitem-focus-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-midnight-800) 45%, transparent);
|
|
31
31
|
}
|
|
@@ -8,9 +8,9 @@
|
|
|
8
8
|
--d-menuitem-text-color: var(--p-primary-700);
|
|
9
9
|
--d-menuitem-icon-color: var(--p-primary-700);
|
|
10
10
|
--d-menuitem-hover-bg: var(--surface-hover);
|
|
11
|
-
--d-menuitem-active-bg:
|
|
11
|
+
--d-menuitem-active-bg: color-mix(in srgb, var(--color-midnight-700) 18%, transparent);
|
|
12
12
|
--d-menuitem-active-text-color: var(--p-primary-600);
|
|
13
13
|
--d-menuitem-active-route-text-color: var(--p-primary-700);
|
|
14
14
|
--d-menuitem-active-border: 0.5px solid var(--p-primary-200);
|
|
15
|
-
--d-menuitem-focus-shadow: 0 0 0 0.2rem
|
|
15
|
+
--d-menuitem-focus-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-blue-400) 22%, transparent);
|
|
16
16
|
}
|
|
@@ -7,12 +7,12 @@
|
|
|
7
7
|
--d-menuitem-root-text-color: var(--p-surface-500);
|
|
8
8
|
--d-menuitem-text-color: var(--p-surface-700);
|
|
9
9
|
--d-menuitem-icon-color: var(--p-primary-700);
|
|
10
|
-
--d-menuitem-hover-bg:
|
|
11
|
-
--d-menuitem-active-bg:
|
|
10
|
+
--d-menuitem-hover-bg: color-mix(in srgb, var(--color-ocean-300) 30%, transparent);
|
|
11
|
+
--d-menuitem-active-bg: color-mix(in srgb, var(--color-ocean-300) 30%, transparent);
|
|
12
12
|
--d-menuitem-active-text-color: var(--p-surface-900);
|
|
13
13
|
--d-menuitem-active-route-text-color: var(--p-surface-900);
|
|
14
14
|
--d-menuitem-active-border: 0.5px solid var(--p-primary-200);
|
|
15
|
-
--d-menuitem-focus-shadow: 0 0 0 0.2rem
|
|
15
|
+
--d-menuitem-focus-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-midnight-800) 45%, transparent);
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
:root[class*='app-dark'] .layout-sidebar-primary {
|
|
@@ -20,19 +20,19 @@
|
|
|
20
20
|
--d-sidebar-bg-color-alt: var(--color-blue-600);
|
|
21
21
|
--d-sidebar-border: 1px solid transparent;
|
|
22
22
|
--d-app-name-color: var(--p-surface-0);
|
|
23
|
-
--d-menu-separator-border: 1px solid
|
|
23
|
+
--d-menu-separator-border: 1px solid color-mix(in srgb, var(--p-surface-0) 15%, transparent);
|
|
24
24
|
--d-menuitem-root-text-color: var(--p-primary-100);
|
|
25
25
|
--d-menuitem-text-color: var(--p-primary-50);
|
|
26
26
|
--d-menuitem-icon-color: var(--color-ocean-300);
|
|
27
|
-
--d-menuitem-hover-bg:
|
|
28
|
-
--d-menuitem-active-bg:
|
|
27
|
+
--d-menuitem-hover-bg: color-mix(in srgb, var(--color-midnight-950) 52%, transparent);
|
|
28
|
+
--d-menuitem-active-bg: color-mix(in srgb, var(--color-midnight-600) 39%, transparent);
|
|
29
29
|
--d-menuitem-active-text-color: var(--p-surface-0);
|
|
30
30
|
--d-menuitem-active-route-text-color: var(--p-surface-0);
|
|
31
31
|
--d-menuitem-active-border: 0.5px solid var(--p-primary-500);
|
|
32
|
-
--d-menuitem-focus-shadow: 0 0 0 0.2rem
|
|
32
|
+
--d-menuitem-focus-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-midnight-800) 45%, transparent);
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
-
@media screen and (min-width:
|
|
35
|
+
@media screen and (min-width: 1024px) {
|
|
36
36
|
:root .layout-sidebar-primary .layout-sidebar,
|
|
37
37
|
:root .layout-sidebar-dark .layout-sidebar,
|
|
38
38
|
:root .layout-sidebar-light .layout-sidebar {
|
package/assets/tailwind.css
CHANGED
|
@@ -39,9 +39,9 @@
|
|
|
39
39
|
|
|
40
40
|
--radius-circle: 50%;
|
|
41
41
|
|
|
42
|
-
--breakpoint-sm:
|
|
42
|
+
--breakpoint-sm: 640px;
|
|
43
43
|
--breakpoint-md: 768px;
|
|
44
|
-
--breakpoint-lg:
|
|
44
|
+
--breakpoint-lg: 1024px;
|
|
45
45
|
--breakpoint-xl: 1200px;
|
|
46
46
|
--breakpoint-2xl: 1920px;
|
|
47
47
|
|
|
@@ -175,19 +175,19 @@
|
|
|
175
175
|
@keyframes ai-bg-move {
|
|
176
176
|
0%,
|
|
177
177
|
100% {
|
|
178
|
-
background-color: #
|
|
178
|
+
background-color: var(--color-ai-50, #f0edff);
|
|
179
179
|
}
|
|
180
180
|
50% {
|
|
181
|
-
background-color: #
|
|
181
|
+
background-color: var(--color-cherry-50, #e6c7d9);
|
|
182
182
|
}
|
|
183
183
|
}
|
|
184
184
|
@keyframes ai-fg-move {
|
|
185
185
|
0%,
|
|
186
186
|
100% {
|
|
187
|
-
fill: #
|
|
187
|
+
fill: var(--color-ai-200, #cdc2ff);
|
|
188
188
|
}
|
|
189
189
|
50% {
|
|
190
|
-
fill: #
|
|
190
|
+
fill: var(--color-cherry-100, #d6a5c2);
|
|
191
191
|
}
|
|
192
192
|
}
|
|
193
193
|
}
|
|
@@ -208,17 +208,17 @@
|
|
|
208
208
|
--color-deepsea-900: #050c13;
|
|
209
209
|
--color-deepsea-950: #03080c;
|
|
210
210
|
|
|
211
|
-
--color-gray-50: #
|
|
212
|
-
--color-gray-100: #
|
|
213
|
-
--color-gray-200: #
|
|
214
|
-
--color-gray-300: #
|
|
215
|
-
--color-gray-400: #
|
|
216
|
-
--color-gray-500: #
|
|
217
|
-
--color-gray-600: #
|
|
218
|
-
--color-gray-700: #
|
|
219
|
-
--color-gray-800: #
|
|
220
|
-
--color-gray-900: #
|
|
221
|
-
--color-gray-950: #
|
|
211
|
+
--color-gray-50: #f8fafc;
|
|
212
|
+
--color-gray-100: #f1f5f9;
|
|
213
|
+
--color-gray-200: #e2e8f0;
|
|
214
|
+
--color-gray-300: #cbd5e1;
|
|
215
|
+
--color-gray-400: #94a3b8;
|
|
216
|
+
--color-gray-500: #64748b;
|
|
217
|
+
--color-gray-600: #475569;
|
|
218
|
+
--color-gray-700: #334155;
|
|
219
|
+
--color-gray-800: #1e293b;
|
|
220
|
+
--color-gray-900: #0f172a;
|
|
221
|
+
--color-gray-950: #020617;
|
|
222
222
|
|
|
223
223
|
--color-red-50: #f6cac6;
|
|
224
224
|
--color-red-100: #f0a9a4;
|
|
@@ -378,6 +378,18 @@
|
|
|
378
378
|
--color-midnight-900: #001d2f;
|
|
379
379
|
--color-midnight-950: #00121e;
|
|
380
380
|
|
|
381
|
+
--color-ai-50: #f0edff;
|
|
382
|
+
--color-ai-100: #e4deff;
|
|
383
|
+
--color-ai-200: #cdc2ff;
|
|
384
|
+
--color-ai-300: #b0a0ff;
|
|
385
|
+
--color-ai-400: #9378ff;
|
|
386
|
+
--color-ai-500: #7c5cfc;
|
|
387
|
+
--color-ai-600: #6a44f0;
|
|
388
|
+
--color-ai-700: #5835d4;
|
|
389
|
+
--color-ai-800: #482dac;
|
|
390
|
+
--color-ai-900: #3b278a;
|
|
391
|
+
--color-ai-950: #24185e;
|
|
392
|
+
|
|
381
393
|
--color-cherry-50: #e6c7d9;
|
|
382
394
|
--color-cherry-100: #d6a5c2;
|
|
383
395
|
--color-cherry-200: #c783ab;
|
|
@@ -391,6 +403,23 @@
|
|
|
391
403
|
--color-cherry-950: #26081a;
|
|
392
404
|
}
|
|
393
405
|
|
|
406
|
+
@utility shadow-flyout {
|
|
407
|
+
box-shadow:
|
|
408
|
+
0px 56px 16px 0px color-mix(in srgb, var(--p-surface-950) 0%, transparent),
|
|
409
|
+
0px 36px 14px 0px color-mix(in srgb, var(--p-surface-950) 1%, transparent),
|
|
410
|
+
0px 20px 12px 0px color-mix(in srgb, var(--p-surface-950) 2%, transparent),
|
|
411
|
+
0px 9px 9px 0px color-mix(in srgb, var(--p-surface-950) 3%, transparent),
|
|
412
|
+
0px 2px 5px 0px color-mix(in srgb, var(--p-surface-950) 4%, transparent);
|
|
413
|
+
}
|
|
414
|
+
|
|
415
|
+
@utility shadow-subtle {
|
|
416
|
+
box-shadow: 0px 1px 2px 0px color-mix(in srgb, var(--p-surface-950) 5%, transparent);
|
|
417
|
+
}
|
|
418
|
+
|
|
419
|
+
@utility shadow-tooltip {
|
|
420
|
+
box-shadow: 0px 16px 32px -12px color-mix(in srgb, var(--p-surface-950) 10%, transparent);
|
|
421
|
+
}
|
|
422
|
+
|
|
394
423
|
@utility landing-container {
|
|
395
424
|
@apply px-6 w-full max-w-248 mx-auto;
|
|
396
425
|
@media (width >= theme(--breakpoint-md)) {
|
|
@@ -440,7 +469,7 @@
|
|
|
440
469
|
|
|
441
470
|
@utility title-h4 {
|
|
442
471
|
@apply font-semibold text-surface-900 dark:text-surface-0 leading-tight text-center;
|
|
443
|
-
font-size: var(--font-size-
|
|
472
|
+
font-size: var(--font-size-lg);
|
|
444
473
|
font-family: "Noto Sans", sans-serif;
|
|
445
474
|
font-feature-settings:
|
|
446
475
|
"cv01" on,
|
|
@@ -499,7 +528,7 @@
|
|
|
499
528
|
}
|
|
500
529
|
|
|
501
530
|
@utility body-large {
|
|
502
|
-
@apply text-xl text-center text-surface-700 dark:text-surface-
|
|
531
|
+
@apply text-xl text-center text-surface-700 dark:text-surface-100;
|
|
503
532
|
font-family: "Noto Sans", sans-serif;
|
|
504
533
|
font-feature-settings:
|
|
505
534
|
"cv09" on,
|
|
@@ -513,7 +542,7 @@
|
|
|
513
542
|
}
|
|
514
543
|
|
|
515
544
|
@utility body-medium {
|
|
516
|
-
@apply text-lg text-center text-surface-700 dark:text-surface-
|
|
545
|
+
@apply text-lg text-center text-surface-700 dark:text-surface-100;
|
|
517
546
|
font-family: "Noto Sans", sans-serif;
|
|
518
547
|
font-feature-settings:
|
|
519
548
|
"cv09" on,
|
|
@@ -527,7 +556,7 @@
|
|
|
527
556
|
}
|
|
528
557
|
|
|
529
558
|
@utility body-small {
|
|
530
|
-
@apply text-base text-center text-surface-700 dark:text-surface-
|
|
559
|
+
@apply text-base text-center text-surface-700 dark:text-surface-100;
|
|
531
560
|
font-family: "Noto Sans", sans-serif;
|
|
532
561
|
font-feature-settings:
|
|
533
562
|
"cv09" on,
|
|
@@ -541,7 +570,7 @@
|
|
|
541
570
|
}
|
|
542
571
|
|
|
543
572
|
@utility body-xsmall {
|
|
544
|
-
@apply text-sm text-center text-surface-700 dark:text-surface-
|
|
573
|
+
@apply text-sm text-center text-surface-700 dark:text-surface-100;
|
|
545
574
|
font-family: "Noto Sans", sans-serif;
|
|
546
575
|
font-feature-settings:
|
|
547
576
|
"cv09" on,
|
|
@@ -585,7 +614,7 @@
|
|
|
585
614
|
}
|
|
586
615
|
|
|
587
616
|
@utility label-small {
|
|
588
|
-
@apply text-surface-700 dark:text-surface-
|
|
617
|
+
@apply text-surface-700 dark:text-surface-100 font-medium text-sm text-center;
|
|
589
618
|
font-family: "Noto Sans", sans-serif;
|
|
590
619
|
font-feature-settings:
|
|
591
620
|
"cv11" on,
|
|
@@ -600,7 +629,7 @@
|
|
|
600
629
|
}
|
|
601
630
|
|
|
602
631
|
@utility label-xsmall {
|
|
603
|
-
@apply text-surface-700 dark:text-surface-
|
|
632
|
+
@apply text-surface-700 dark:text-surface-100 font-medium text-xs text-center;
|
|
604
633
|
font-family: "Noto Sans", sans-serif;
|
|
605
634
|
font-feature-settings:
|
|
606
635
|
"cv01" on,
|
|
@@ -644,7 +673,7 @@
|
|
|
644
673
|
}
|
|
645
674
|
|
|
646
675
|
@utility social-button {
|
|
647
|
-
@apply w-full py-2 flex items-center justify-center gap-2 rounded-lg border border-surface-200 dark:border-surface-800 hover:bg-surface-100 dark:hover:bg-surface-800 transition-all text-center text-surface-700 dark:text-surface-
|
|
676
|
+
@apply w-full py-2 flex items-center justify-center gap-2 rounded-lg border border-surface-200 dark:border-surface-800 hover:bg-surface-100 dark:hover:bg-surface-800 transition-all text-center text-surface-700 dark:text-surface-100 font-medium leading-normal;
|
|
648
677
|
font-family: "Noto Sans", sans-serif;
|
|
649
678
|
font-feature-settings:
|
|
650
679
|
"cv08" on,
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
--transition-duration: var(--p-transition-duration);
|
|
10
10
|
--border-radius: var(--p-content-border-radius);
|
|
11
11
|
--border-radius-circle: 50%;
|
|
12
|
+
--_sidebar-w: 16rem;
|
|
12
13
|
--focus-ring-shadow: var(--p-focus-ring-shadow);
|
|
13
14
|
--font-size-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.75rem);
|
|
14
15
|
--font-size-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
--surface-ground:
|
|
2
|
+
--surface-ground: var(--p-surface-0);
|
|
3
3
|
--surface-card: var(--p-surface-50);
|
|
4
|
-
--popover-background:
|
|
4
|
+
--popover-background: var(--p-surface-0);
|
|
5
5
|
--popover-border-color: var(--surface-border);
|
|
6
6
|
--popover-item-active-background-color: var(--p-surface-100);
|
|
7
7
|
--popover-item-hover-background-color: var(--p-content-hover-background);
|