@gardenerim/css 1.0.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 +121 -0
- package/LICENSE +21 -0
- package/README.md +591 -0
- package/dist/components/ai-compositions.min.css +2 -0
- package/dist/components/ai-extended.min.css +2 -0
- package/dist/components/ai.min.css +2 -0
- package/dist/components/auth-compositions.min.css +2 -0
- package/dist/components/basic.min.css +2 -0
- package/dist/components/catalog.min.css +2 -0
- package/dist/components/commerce-compositions.min.css +2 -0
- package/dist/components/content-compositions.min.css +2 -0
- package/dist/components/data-compositions.min.css +2 -0
- package/dist/components/data.min.css +2 -0
- package/dist/components/desktop-compositions.min.css +2 -0
- package/dist/components/desktop.min.css +2 -0
- package/dist/components/extended.min.css +2 -0
- package/dist/components/feedback.min.css +2 -0
- package/dist/components/form-compositions.min.css +2 -0
- package/dist/components/forms.min.css +2 -0
- package/dist/components/grid.min.css +2 -0
- package/dist/components/help.min.css +2 -0
- package/dist/components/layouts.min.css +2 -0
- package/dist/components/mobile-compositions.min.css +2 -0
- package/dist/components/navigation-compositions.min.css +2 -0
- package/dist/components/navigation.min.css +2 -0
- package/dist/components/page.min.css +2 -0
- package/dist/components/primitives.min.css +2 -0
- package/dist/components/recipes.min.css +2 -0
- package/dist/components/regions.min.css +2 -0
- package/dist/components/selection-compositions.min.css +2 -0
- package/dist/components/solution-compositions.min.css +2 -0
- package/dist/gardener.ai.css +236 -0
- package/dist/gardener.ai.min.css +3 -0
- package/dist/gardener.ai.min.css.map +7 -0
- package/dist/gardener.builds.json +7491 -0
- package/dist/gardener.capabilities.json +3784 -0
- package/dist/gardener.compatibility.json +1209 -0
- package/dist/gardener.components.css +3496 -0
- package/dist/gardener.components.min.css +3 -0
- package/dist/gardener.components.min.css.map +7 -0
- package/dist/gardener.core.css +1486 -0
- package/dist/gardener.core.min.css +3 -0
- package/dist/gardener.core.min.css.map +7 -0
- package/dist/gardener.css +7153 -0
- package/dist/gardener.d.ts +42 -0
- package/dist/gardener.electron.d.ts +5 -0
- package/dist/gardener.electron.js +24 -0
- package/dist/gardener.electron.min.js +3 -0
- package/dist/gardener.electron.min.js.map +7 -0
- package/dist/gardener.manifest.json +14557 -0
- package/dist/gardener.min.css +3 -0
- package/dist/gardener.min.css.map +7 -0
- package/dist/gardener.performance.json +1628 -0
- package/dist/gardener.public-api.json +2169 -0
- package/dist/gardener.recipes.json +1444 -0
- package/dist/gardener.runtime.js +2224 -0
- package/dist/gardener.runtime.min.js +3 -0
- package/dist/gardener.runtime.min.js.map +7 -0
- package/dist/gardener.tauri.d.ts +5 -0
- package/dist/gardener.tauri.js +28 -0
- package/dist/gardener.tauri.min.js +3 -0
- package/dist/gardener.tauri.min.js.map +7 -0
- package/dist/gardener.themes.css +1415 -0
- package/dist/gardener.themes.min.css +3 -0
- package/dist/gardener.themes.min.css.map +7 -0
- package/dist/gardener.utilities.css +1940 -0
- package/dist/gardener.utilities.json +92279 -0
- package/dist/gardener.utilities.min.css +3 -0
- package/dist/gardener.utilities.min.css.map +7 -0
- package/dist/platforms/gardener.desktop.min.css +2 -0
- package/dist/platforms/gardener.electron.min.css +2 -0
- package/dist/platforms/gardener.mobile.min.css +2 -0
- package/dist/platforms/gardener.tauri.min.css +2 -0
- package/dist/platforms/gardener.web.min.css +2 -0
- package/metadata/builds.schema.json +148 -0
- package/metadata/capabilities.json +3784 -0
- package/metadata/capabilities.schema.json +61 -0
- package/metadata/compatibility.json +1209 -0
- package/metadata/compatibility.schema.json +85 -0
- package/metadata/components.json +9082 -0
- package/metadata/components.schema.json +58 -0
- package/metadata/custom-build.schema.json +46 -0
- package/metadata/manifest.schema.json +47 -0
- package/metadata/performance-budgets.schema.json +103 -0
- package/metadata/performance-report.schema.json +194 -0
- package/metadata/public-api.json +2169 -0
- package/metadata/public-api.schema.json +165 -0
- package/metadata/recipes.json +1444 -0
- package/metadata/recipes.schema.json +39 -0
- package/metadata/schema.json +7 -0
- package/metadata/utilities.schema.json +29 -0
- package/package.json +177 -0
|
@@ -0,0 +1,3496 @@
|
|
|
1
|
+
/* Gardener v1.0.0 | MIT License | gardener.css */
|
|
2
|
+
@layer gardener.reset, gardener.tokens, gardener.base, gardener.components, gardener.utilities, gardener.overrides;
|
|
3
|
+
|
|
4
|
+
@layer gardener.components {
|
|
5
|
+
.g-container { width: min(100% - 2 * var(--g-space-page-x), var(--g-content-max)); margin-inline: auto; }
|
|
6
|
+
.g-container-fluid { width: 100%; padding-inline: var(--g-space-page-x); }
|
|
7
|
+
.g-sticky-top { position: sticky; inset-block-start: 0; z-index: var(--g-z-sticky); }
|
|
8
|
+
|
|
9
|
+
.g-app-shell { display: grid; min-height: 100dvh; grid-template: "sidebar header" var(--g-header-height) "sidebar main" 1fr / var(--g-sidebar-width) minmax(0, 1fr); background: var(--g-color-canvas); }
|
|
10
|
+
.g-app-shell-sidebar { grid-area: sidebar; position: sticky; inset-block-start: 0; height: 100dvh; overflow: auto; border-inline-end: 1px solid var(--g-color-border); background: var(--g-color-surface); }
|
|
11
|
+
.g-app-shell-header { grid-area: header; position: sticky; inset-block-start: 0; z-index: var(--g-z-sticky); display: flex; align-items: center; min-width: 0; padding-inline: var(--g-space-page-x); border-bottom: 1px solid var(--g-color-border); background: color-mix(in srgb, var(--g-color-surface) 92%, transparent); backdrop-filter: blur(12px); }
|
|
12
|
+
.g-app-shell-main { grid-area: main; min-width: 0; padding: var(--g-space-page-x); }
|
|
13
|
+
.g-app-shell.is-collapsed { grid-template-columns: var(--g-sidebar-collapsed-width) minmax(0, 1fr); }
|
|
14
|
+
|
|
15
|
+
.g-dashboard { display: grid; gap: var(--g-space-6); }
|
|
16
|
+
.g-dashboard-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--g-space-4); }
|
|
17
|
+
.g-dashboard-grid > * { grid-column: span 12; }
|
|
18
|
+
|
|
19
|
+
.g-mobile-shell { min-height: 100dvh; padding-block: var(--g-mobile-header-height, 3.5rem) calc(var(--g-mobile-nav-height, 4rem) + env(safe-area-inset-bottom)); }
|
|
20
|
+
.g-mobile-header { position: fixed; inset: 0 0 auto; z-index: var(--g-z-sticky); height: calc(var(--g-mobile-header-height, 3.5rem) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) var(--g-space-4) 0; display: flex; align-items: center; background: var(--g-color-surface); border-bottom: 1px solid var(--g-color-border); }
|
|
21
|
+
.g-mobile-bottom-nav { position: fixed; inset: auto 0 0; z-index: var(--g-z-sticky); min-height: calc(var(--g-mobile-nav-height, 4rem) + env(safe-area-inset-bottom)); padding: var(--g-space-1) var(--g-space-2) env(safe-area-inset-bottom); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--g-color-surface); border-top: 1px solid var(--g-color-border); }
|
|
22
|
+
|
|
23
|
+
@media (min-width: 768px) {
|
|
24
|
+
.g-dashboard-grid > .g-span-3 { grid-column: span 3; }
|
|
25
|
+
.g-dashboard-grid > .g-span-4 { grid-column: span 4; }
|
|
26
|
+
.g-dashboard-grid > .g-span-6 { grid-column: span 6; }
|
|
27
|
+
.g-dashboard-grid > .g-span-8 { grid-column: span 8; }
|
|
28
|
+
.g-dashboard-grid > .g-span-9 { grid-column: span 9; }
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
@media (max-width: 767.98px) {
|
|
32
|
+
.g-app-shell { display: block; padding-block-start: var(--g-header-height); }
|
|
33
|
+
.g-app-shell-sidebar { position: fixed; inset: var(--g-header-height) auto 0 0; z-index: var(--g-z-overlay); width: min(86vw, var(--g-sidebar-width)); height: auto; transform: translateX(-105%); transition: transform var(--g-duration-normal) var(--g-ease-standard); box-shadow: var(--g-shadow-lg); }
|
|
34
|
+
[dir="rtl"] .g-app-shell-sidebar { inset-inline: auto 0; transform: translateX(105%); }
|
|
35
|
+
.g-app-shell-sidebar.is-open { transform: translateX(0); }
|
|
36
|
+
.g-app-shell-header { position: fixed; inset: 0 0 auto; height: var(--g-header-height); }
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
@layer gardener.components {
|
|
41
|
+
/* Shared region contracts */
|
|
42
|
+
:where(
|
|
43
|
+
.g-region-stack, .g-region-inline, .g-region-frame, .g-holy-grail,
|
|
44
|
+
.g-sidebar-shell, .g-double-sidebar-layout, .g-master-detail,
|
|
45
|
+
.g-list-detail-inspector, .g-sticky-footer-layout, .g-sticky-aside-layout,
|
|
46
|
+
.g-fixed-header-layout, .g-fixed-sidebar-layout, .g-dock-layout,
|
|
47
|
+
.g-split-view, .g-fullscreen-workspace, .g-mobile-layout
|
|
48
|
+
) { min-inline-size: 0; min-block-size: 0; background: var(--g-color-canvas); }
|
|
49
|
+
|
|
50
|
+
:where(
|
|
51
|
+
.g-region-top, .g-region-start, .g-region-main, .g-region-center, .g-region-end, .g-region-bottom,
|
|
52
|
+
.g-master, .g-detail, .g-region-list, .g-region-inspector,
|
|
53
|
+
.g-dock-top, .g-dock-start, .g-dock-main, .g-dock-end, .g-dock-bottom,
|
|
54
|
+
.g-split-view-primary, .g-split-view-secondary,
|
|
55
|
+
.g-workspace-toolbar, .g-workspace-main, .g-workspace-status,
|
|
56
|
+
.g-mobile-layout-header, .g-mobile-layout-content, .g-mobile-layout-bottom
|
|
57
|
+
) { min-inline-size: 0; min-block-size: 0; }
|
|
58
|
+
|
|
59
|
+
.g-region-top { grid-area: top; }
|
|
60
|
+
.g-region-start { grid-area: start; }
|
|
61
|
+
:is(.g-region-main, .g-region-center) { grid-area: main; }
|
|
62
|
+
.g-region-end { grid-area: end; }
|
|
63
|
+
.g-region-bottom { grid-area: bottom; }
|
|
64
|
+
|
|
65
|
+
/* Top / main / bottom */
|
|
66
|
+
.g-region-stack {
|
|
67
|
+
display: grid;
|
|
68
|
+
min-block-size: var(--g-region-min-block-size, 100%);
|
|
69
|
+
grid-template: "top" auto "main" minmax(0, 1fr) "bottom" auto / minmax(0, 1fr);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/* Start / main / end */
|
|
73
|
+
.g-region-inline {
|
|
74
|
+
display: grid;
|
|
75
|
+
grid-template: "start main end" minmax(0, 1fr) / var(--g-region-start-size, minmax(12rem, 18rem)) minmax(0, 1fr) var(--g-region-end-size, minmax(12rem, 18rem));
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/* Top / start / main / end / bottom and Holy Grail */
|
|
79
|
+
:is(.g-region-frame, .g-holy-grail) {
|
|
80
|
+
display: grid;
|
|
81
|
+
min-block-size: var(--g-region-min-block-size, 100dvh);
|
|
82
|
+
grid-template:
|
|
83
|
+
"top top top" auto
|
|
84
|
+
"start main end" minmax(0, 1fr)
|
|
85
|
+
"bottom bottom bottom" auto /
|
|
86
|
+
var(--g-region-start-size, minmax(12rem, 17rem)) minmax(0, 1fr) var(--g-region-end-size, minmax(12rem, 17rem));
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
/* Header / sidebar / main and double-sidebar application shells */
|
|
90
|
+
.g-sidebar-shell {
|
|
91
|
+
display: grid;
|
|
92
|
+
min-block-size: var(--g-region-min-block-size, 100dvh);
|
|
93
|
+
grid-template:
|
|
94
|
+
"top top" var(--g-region-header-size, auto)
|
|
95
|
+
"start main" minmax(0, 1fr) /
|
|
96
|
+
var(--g-region-start-size, var(--g-sidebar-width)) minmax(0, 1fr);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.g-double-sidebar-layout {
|
|
100
|
+
display: grid;
|
|
101
|
+
min-block-size: var(--g-region-min-block-size, 100%);
|
|
102
|
+
grid-template: "start main end" minmax(0, 1fr) / var(--g-region-start-size, 16rem) minmax(0, 1fr) var(--g-region-end-size, 18rem);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
/* Master/detail and list/detail/inspector */
|
|
106
|
+
.g-master-detail {
|
|
107
|
+
display: grid;
|
|
108
|
+
grid-template: "master detail" minmax(0, 1fr) / var(--g-master-size, minmax(16rem, 0.4fr)) minmax(0, 1fr);
|
|
109
|
+
}
|
|
110
|
+
.g-master { grid-area: master; }
|
|
111
|
+
.g-detail { grid-area: detail; }
|
|
112
|
+
|
|
113
|
+
.g-list-detail-inspector {
|
|
114
|
+
display: grid;
|
|
115
|
+
grid-template: "list detail inspector" minmax(0, 1fr) / var(--g-list-size, minmax(14rem, 0.32fr)) minmax(0, 1fr) var(--g-inspector-size, minmax(16rem, 0.36fr));
|
|
116
|
+
}
|
|
117
|
+
.g-region-list { grid-area: list; }
|
|
118
|
+
.g-region-inspector { grid-area: inspector; }
|
|
119
|
+
|
|
120
|
+
/* Sticky footer */
|
|
121
|
+
.g-sticky-footer-layout {
|
|
122
|
+
display: grid;
|
|
123
|
+
min-block-size: var(--g-region-min-block-size, 100dvh);
|
|
124
|
+
grid-template: "top" auto "main" minmax(0, 1fr) "bottom" auto / minmax(0, 1fr);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
/* Fixed header */
|
|
128
|
+
.g-fixed-header-layout {
|
|
129
|
+
position: relative;
|
|
130
|
+
min-block-size: var(--g-region-min-block-size, 100dvh);
|
|
131
|
+
padding-block-start: var(--g-fixed-header-size, var(--g-header-height));
|
|
132
|
+
}
|
|
133
|
+
.g-fixed-header-bar {
|
|
134
|
+
position: fixed;
|
|
135
|
+
z-index: var(--g-z-sticky);
|
|
136
|
+
inset: 0 0 auto;
|
|
137
|
+
block-size: var(--g-fixed-header-size, var(--g-header-height));
|
|
138
|
+
background: var(--g-color-surface);
|
|
139
|
+
}
|
|
140
|
+
.g-fixed-header-main { min-block-size: calc(var(--g-region-min-block-size, 100dvh) - var(--g-fixed-header-size, var(--g-header-height))); }
|
|
141
|
+
.g-fixed-header-layout.is-contained .g-fixed-header-bar { position: absolute; }
|
|
142
|
+
|
|
143
|
+
/* Fixed sidebar */
|
|
144
|
+
.g-fixed-sidebar-layout {
|
|
145
|
+
position: relative;
|
|
146
|
+
min-block-size: var(--g-region-min-block-size, 100dvh);
|
|
147
|
+
padding-inline-start: var(--g-fixed-sidebar-size, var(--g-sidebar-width));
|
|
148
|
+
}
|
|
149
|
+
.g-fixed-sidebar {
|
|
150
|
+
position: fixed;
|
|
151
|
+
z-index: var(--g-z-sticky);
|
|
152
|
+
inset-block: 0;
|
|
153
|
+
inset-inline-start: 0;
|
|
154
|
+
inline-size: var(--g-fixed-sidebar-size, var(--g-sidebar-width));
|
|
155
|
+
overflow: auto;
|
|
156
|
+
background: var(--g-color-surface);
|
|
157
|
+
border-inline-end: 1px solid var(--g-color-border);
|
|
158
|
+
}
|
|
159
|
+
.g-fixed-sidebar-main { min-inline-size: 0; }
|
|
160
|
+
.g-fixed-sidebar-layout.is-contained .g-fixed-sidebar { position: absolute; }
|
|
161
|
+
|
|
162
|
+
/* Content with sticky aside */
|
|
163
|
+
.g-sticky-aside-layout {
|
|
164
|
+
display: grid;
|
|
165
|
+
grid-template-columns: minmax(0, 1fr) var(--g-sticky-aside-size, minmax(14rem, 20rem));
|
|
166
|
+
gap: var(--g-sticky-aside-gap, var(--g-space-6));
|
|
167
|
+
align-items: start;
|
|
168
|
+
}
|
|
169
|
+
.g-sticky-aside { position: sticky; inset-block-start: var(--g-sticky-aside-offset, calc(var(--g-header-height) + var(--g-space-4))); }
|
|
170
|
+
|
|
171
|
+
/* Dock layout */
|
|
172
|
+
.g-dock-layout {
|
|
173
|
+
display: grid;
|
|
174
|
+
block-size: var(--g-dock-block-size, 100dvh);
|
|
175
|
+
grid-template:
|
|
176
|
+
"dock-top dock-top dock-top" var(--g-dock-top-size, auto)
|
|
177
|
+
"dock-start dock-main dock-end" minmax(0, 1fr)
|
|
178
|
+
"dock-bottom dock-bottom dock-bottom" var(--g-dock-bottom-size, auto) /
|
|
179
|
+
var(--g-dock-start-size, 16rem) minmax(0, 1fr) var(--g-dock-end-size, 18rem);
|
|
180
|
+
overflow: hidden;
|
|
181
|
+
}
|
|
182
|
+
.g-dock-layout.is-contained { block-size: var(--g-dock-block-size, 36rem); }
|
|
183
|
+
.g-dock-top { grid-area: dock-top; }
|
|
184
|
+
.g-dock-start { grid-area: dock-start; }
|
|
185
|
+
.g-dock-main { grid-area: dock-main; overflow: auto; }
|
|
186
|
+
.g-dock-end { grid-area: dock-end; }
|
|
187
|
+
.g-dock-bottom { grid-area: dock-bottom; }
|
|
188
|
+
.g-dock-layout.is-start-collapsed { grid-template-columns: 0 minmax(0, 1fr) var(--g-dock-end-size, 18rem); }
|
|
189
|
+
.g-dock-layout.is-end-collapsed { grid-template-columns: var(--g-dock-start-size, 16rem) minmax(0, 1fr) 0; }
|
|
190
|
+
.g-dock-layout.is-start-collapsed > .g-dock-start,
|
|
191
|
+
.g-dock-layout.is-end-collapsed > .g-dock-end,
|
|
192
|
+
.g-region-panel.is-collapsed { display: none; }
|
|
193
|
+
|
|
194
|
+
/* Split view reuses the existing split-pane runtime contract */
|
|
195
|
+
:is(.g-split-view, .g-split-pane) { display: flex; min-inline-size: 0; min-block-size: 0; }
|
|
196
|
+
.g-split-view[data-g-orientation="vertical"], .g-split-view.is-vertical { flex-direction: column; }
|
|
197
|
+
:is(.g-split-view-primary, .g-split-view-secondary) { flex: 1 1 0; overflow: auto; }
|
|
198
|
+
|
|
199
|
+
/* Fullscreen workspace */
|
|
200
|
+
.g-fullscreen-workspace {
|
|
201
|
+
position: fixed;
|
|
202
|
+
z-index: var(--g-z-overlay);
|
|
203
|
+
inset: 0;
|
|
204
|
+
display: grid;
|
|
205
|
+
grid-template: "workspace-toolbar" auto "workspace-main" minmax(0, 1fr) "workspace-status" auto / minmax(0, 1fr);
|
|
206
|
+
overflow: hidden;
|
|
207
|
+
}
|
|
208
|
+
.g-fullscreen-workspace.is-contained { position: relative; z-index: auto; min-block-size: var(--g-workspace-min-block-size, 32rem); }
|
|
209
|
+
.g-workspace-toolbar { grid-area: workspace-toolbar; }
|
|
210
|
+
.g-workspace-main { grid-area: workspace-main; min-block-size: 0; overflow: auto; }
|
|
211
|
+
.g-workspace-status { grid-area: workspace-status; }
|
|
212
|
+
|
|
213
|
+
/* Mobile top / content / bottom shell */
|
|
214
|
+
.g-mobile-layout {
|
|
215
|
+
display: grid;
|
|
216
|
+
min-block-size: var(--g-region-min-block-size, 100dvh);
|
|
217
|
+
grid-template:
|
|
218
|
+
"mobile-header" auto
|
|
219
|
+
"mobile-content" minmax(0, 1fr)
|
|
220
|
+
"mobile-bottom" auto /
|
|
221
|
+
minmax(0, 1fr);
|
|
222
|
+
padding-block-start: env(safe-area-inset-top);
|
|
223
|
+
padding-block-end: env(safe-area-inset-bottom);
|
|
224
|
+
}
|
|
225
|
+
.g-mobile-layout-header { grid-area: mobile-header; position: sticky; inset-block-start: env(safe-area-inset-top); z-index: var(--g-z-sticky); }
|
|
226
|
+
.g-mobile-layout-content { grid-area: mobile-content; min-block-size: 0; overflow: auto; }
|
|
227
|
+
.g-mobile-layout-bottom { grid-area: mobile-bottom; position: sticky; inset-block-end: env(safe-area-inset-bottom); z-index: var(--g-z-sticky); }
|
|
228
|
+
|
|
229
|
+
/* Region-level container queries */
|
|
230
|
+
.g-region-container { container-name: g-region; container-type: inline-size; }
|
|
231
|
+
|
|
232
|
+
@container g-region (max-width: 47.999rem) {
|
|
233
|
+
:is(.g-region-inline, .g-region-frame, .g-holy-grail, .g-double-sidebar-layout) {
|
|
234
|
+
grid-template:
|
|
235
|
+
"top" auto
|
|
236
|
+
"start" auto
|
|
237
|
+
"main" minmax(0, 1fr)
|
|
238
|
+
"end" auto
|
|
239
|
+
"bottom" auto /
|
|
240
|
+
minmax(0, 1fr);
|
|
241
|
+
}
|
|
242
|
+
.g-master-detail { grid-template: "master" auto "detail" minmax(0, 1fr) / minmax(0, 1fr); }
|
|
243
|
+
.g-list-detail-inspector { grid-template: "list" auto "detail" minmax(0, 1fr) "inspector" auto / minmax(0, 1fr); }
|
|
244
|
+
.g-sticky-aside-layout { grid-template-columns: minmax(0, 1fr); }
|
|
245
|
+
.g-sticky-aside { position: static; }
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
@media (max-width: 47.999rem) {
|
|
249
|
+
:is(.g-region-inline, .g-region-frame, .g-holy-grail, .g-double-sidebar-layout) {
|
|
250
|
+
grid-template:
|
|
251
|
+
"top" auto
|
|
252
|
+
"start" auto
|
|
253
|
+
"main" minmax(0, 1fr)
|
|
254
|
+
"end" auto
|
|
255
|
+
"bottom" auto /
|
|
256
|
+
minmax(0, 1fr);
|
|
257
|
+
}
|
|
258
|
+
.g-sidebar-shell { grid-template: "top" auto "start" auto "main" minmax(0, 1fr) / minmax(0, 1fr); }
|
|
259
|
+
.g-master-detail { grid-template: "master" auto "detail" minmax(0, 1fr) / minmax(0, 1fr); }
|
|
260
|
+
.g-list-detail-inspector { grid-template: "list" auto "detail" minmax(0, 1fr) "inspector" auto / minmax(0, 1fr); }
|
|
261
|
+
.g-sticky-aside-layout { grid-template-columns: minmax(0, 1fr); }
|
|
262
|
+
.g-sticky-aside { position: static; }
|
|
263
|
+
.g-fixed-sidebar-layout { padding-inline-start: 0; }
|
|
264
|
+
.g-fixed-sidebar-layout:not(.is-open) > .g-fixed-sidebar { transform: translateX(-100%); visibility: hidden; }
|
|
265
|
+
[dir="rtl"] .g-fixed-sidebar-layout:not(.is-open) > .g-fixed-sidebar { transform: translateX(100%); }
|
|
266
|
+
.g-fixed-sidebar { inline-size: min(86vw, var(--g-fixed-sidebar-size, var(--g-sidebar-width))); transition: transform var(--g-duration-normal) var(--g-ease-standard), visibility var(--g-duration-normal); }
|
|
267
|
+
.g-dock-layout {
|
|
268
|
+
grid-template:
|
|
269
|
+
"dock-top" auto
|
|
270
|
+
"dock-main" minmax(0, 1fr)
|
|
271
|
+
"dock-bottom" auto /
|
|
272
|
+
minmax(0, 1fr);
|
|
273
|
+
}
|
|
274
|
+
.g-dock-layout > :is(.g-dock-start, .g-dock-end) { display: none; }
|
|
275
|
+
.g-dock-layout.is-start-open { grid-template: "dock-top" auto "dock-start" minmax(0, 1fr) "dock-bottom" auto / minmax(0, 1fr); }
|
|
276
|
+
.g-dock-layout.is-end-open { grid-template: "dock-top" auto "dock-end" minmax(0, 1fr) "dock-bottom" auto / minmax(0, 1fr); }
|
|
277
|
+
.g-dock-layout.is-start-open > .g-dock-start,
|
|
278
|
+
.g-dock-layout.is-end-open > .g-dock-end { display: block; }
|
|
279
|
+
.g-split-view:not([data-g-collapse="false"]) { flex-direction: column; }
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
@media print {
|
|
283
|
+
:is(
|
|
284
|
+
.g-region-stack, .g-region-inline, .g-region-frame, .g-holy-grail,
|
|
285
|
+
.g-sidebar-shell, .g-double-sidebar-layout, .g-master-detail,
|
|
286
|
+
.g-list-detail-inspector, .g-sticky-footer-layout, .g-sticky-aside-layout,
|
|
287
|
+
.g-dock-layout, .g-fullscreen-workspace, .g-mobile-layout
|
|
288
|
+
) { position: static; display: block; min-block-size: 0; block-size: auto; overflow: visible; background: #fff; }
|
|
289
|
+
:is(.g-fixed-header-layout, .g-fixed-sidebar-layout) { min-block-size: 0; padding: 0; }
|
|
290
|
+
:is(.g-fixed-header-bar, .g-fixed-sidebar, .g-sticky-aside, .g-mobile-layout-header, .g-mobile-layout-bottom) { position: static; inline-size: auto; block-size: auto; }
|
|
291
|
+
:is(.g-split-view, .g-split-pane) { display: block; }
|
|
292
|
+
.g-split-handle { display: none !important; }
|
|
293
|
+
}
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
@layer gardener.components {
|
|
297
|
+
/* 01 Stack: vertical rhythm, with an optional split point. */
|
|
298
|
+
.g-stack { display: flex; min-inline-size: 0; flex-direction: column; gap: var(--g-stack-gap, var(--g-space-4)); }
|
|
299
|
+
.g-stack.is-split > :where(.g-stack-split, :last-child) { margin-block-start: auto; }
|
|
300
|
+
|
|
301
|
+
/* 02 Cluster: wrapping inline groups such as tags and actions. */
|
|
302
|
+
.g-cluster { display: flex; min-inline-size: 0; flex-wrap: wrap; align-items: var(--g-cluster-align, center); justify-content: var(--g-cluster-justify, flex-start); gap: var(--g-cluster-gap, var(--g-space-3)); }
|
|
303
|
+
|
|
304
|
+
/* 03 Center: readable measure plus optional intrinsic centering. */
|
|
305
|
+
.g-center { box-sizing: content-box; max-inline-size: var(--g-center-max, var(--g-content-max)); margin-inline: auto; padding-inline: var(--g-center-gutter, var(--g-space-page-x)); }
|
|
306
|
+
.g-center.is-intrinsic { display: flex; flex-direction: column; align-items: center; text-align: center; }
|
|
307
|
+
|
|
308
|
+
/* 04 Sidebar: start/end side content without viewport breakpoints. */
|
|
309
|
+
:is(.g-sidebar-layout, .g-sidebar-pattern) { display: flex; min-inline-size: 0; flex-wrap: wrap; gap: var(--g-sidebar-gap, var(--g-space-6)); align-items: var(--g-sidebar-align, stretch); }
|
|
310
|
+
:is(.g-sidebar-layout, .g-sidebar-pattern) > :first-child { flex: 1 1 var(--g-sidebar-pattern-size, var(--g-sidebar-width)); }
|
|
311
|
+
:is(.g-sidebar-layout, .g-sidebar-pattern) > :last-child { min-inline-size: min(100%, var(--g-sidebar-content-min, 32rem)); flex: 999 1 0; }
|
|
312
|
+
:is(.g-sidebar-layout, .g-sidebar-pattern).is-end > :first-child { min-inline-size: min(100%, var(--g-sidebar-content-min, 32rem)); flex: 999 1 0; }
|
|
313
|
+
:is(.g-sidebar-layout, .g-sidebar-pattern).is-end > :last-child { min-inline-size: 0; flex: 1 1 var(--g-sidebar-pattern-size, var(--g-sidebar-width)); }
|
|
314
|
+
|
|
315
|
+
/* 05 Switcher: horizontal until the available space becomes too small. */
|
|
316
|
+
.g-switcher { display: flex; min-inline-size: 0; flex-wrap: wrap; gap: var(--g-switcher-gap, var(--g-space-4)); }
|
|
317
|
+
.g-switcher > * { min-inline-size: 0; flex-grow: 1; flex-basis: calc((var(--g-switcher-threshold, 48rem) - 100%) * 999); }
|
|
318
|
+
|
|
319
|
+
/* 06 Cover: a centered hero or state between optional header/footer. */
|
|
320
|
+
.g-cover { display: flex; min-block-size: var(--g-cover-min, 100dvh); flex-direction: column; padding: var(--g-cover-padding, var(--g-space-page-x)); }
|
|
321
|
+
.g-cover > :where(.g-cover-center, :nth-child(2)) { margin-block: auto; }
|
|
322
|
+
|
|
323
|
+
/* 07 Reel: a keyboard-scrollable horizontal sequence. */
|
|
324
|
+
.g-reel { display: flex; max-inline-size: 100%; gap: var(--g-reel-gap, var(--g-space-4)); padding-block-end: var(--g-reel-scrollbar-space, var(--g-space-2)); overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scrollbar-gutter: stable; }
|
|
325
|
+
.g-reel > * { flex: 0 0 var(--g-reel-item-size, auto); }
|
|
326
|
+
.g-reel > img { block-size: 100%; flex-basis: auto; inline-size: auto; }
|
|
327
|
+
|
|
328
|
+
/* 08 Frame: media cropping with a stable aspect ratio. */
|
|
329
|
+
.g-frame { display: grid; place-items: center; overflow: hidden; aspect-ratio: var(--g-frame-ratio, 16 / 9); }
|
|
330
|
+
.g-frame > :is(img, picture, video, iframe, canvas, svg) { inline-size: 100%; block-size: 100%; }
|
|
331
|
+
.g-frame > :is(img, video, canvas, svg) { object-fit: var(--g-frame-fit, cover); object-position: var(--g-frame-position, center); }
|
|
332
|
+
|
|
333
|
+
/* 09 Media Object: image/avatar plus body and optional trailing action. */
|
|
334
|
+
.g-media-object { display: grid; min-inline-size: 0; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "media body action"; gap: var(--g-media-object-gap, var(--g-space-4)); align-items: var(--g-media-object-align, start); }
|
|
335
|
+
.g-media-object-media { grid-area: media; }
|
|
336
|
+
.g-media-object-body { grid-area: body; min-inline-size: 0; }
|
|
337
|
+
.g-media-object-action { grid-area: action; }
|
|
338
|
+
.g-media-object.is-end { grid-template-areas: "action body media"; grid-template-columns: auto minmax(0, 1fr) auto; }
|
|
339
|
+
.g-media-object.is-stacked { grid-template: "media" auto "body" auto "action" auto / minmax(0, 1fr); }
|
|
340
|
+
|
|
341
|
+
/* 10/11 Auto Fit and Auto Fill grids. .g-grid-auto remains the fit alias. */
|
|
342
|
+
:is(.g-grid-auto, .g-grid-auto-fit) { display: grid; min-inline-size: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--g-grid-min, 16rem)), 1fr)); gap: var(--g-grid-gap, var(--g-space-4)); }
|
|
343
|
+
.g-grid-auto-fill { display: grid; min-inline-size: 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--g-grid-min, 16rem)), 1fr)); gap: var(--g-grid-gap, var(--g-space-4)); }
|
|
344
|
+
|
|
345
|
+
/* 12 Bleed: escape a centered reading measure. */
|
|
346
|
+
.g-bleed { inline-size: min(var(--g-bleed-max, 100vw), calc(100% + 2 * var(--g-bleed-size, var(--g-space-page-x)))); max-inline-size: var(--g-bleed-max, 100vw); margin-inline: max(calc(-1 * var(--g-bleed-size, var(--g-space-page-x))), calc((100% - var(--g-bleed-max, 100vw)) / 2)); }
|
|
347
|
+
.g-bleed.is-full { inline-size: 100vw; max-inline-size: none; margin-inline: calc(50% - 50vw); }
|
|
348
|
+
|
|
349
|
+
/* 13 Repel: title/action or metadata pairs that wrap safely. */
|
|
350
|
+
.g-repel { display: flex; min-inline-size: 0; flex-wrap: wrap; align-items: var(--g-repel-align, center); justify-content: space-between; gap: var(--g-repel-gap, var(--g-space-3)); }
|
|
351
|
+
|
|
352
|
+
/* 14 Imposter: centered dialog-like content, absolute or fixed. */
|
|
353
|
+
.g-imposter { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; max-inline-size: min(calc(100% - 2 * var(--g-imposter-margin, var(--g-space-4))), var(--g-imposter-max, 40rem)); max-block-size: calc(100% - 2 * var(--g-imposter-margin, var(--g-space-4))); transform: translate(-50%, -50%); overflow: auto; }
|
|
354
|
+
[dir="rtl"] .g-imposter { transform: translate(50%, -50%); }
|
|
355
|
+
.g-imposter.is-fixed { position: fixed; max-inline-size: min(calc(100vw - 2 * var(--g-imposter-margin, var(--g-space-4))), var(--g-imposter-max, 40rem)); max-block-size: calc(100dvh - 2 * var(--g-imposter-margin, var(--g-space-4))); }
|
|
356
|
+
.g-imposter-container { position: relative; isolation: isolate; }
|
|
357
|
+
|
|
358
|
+
/* 15 Overlay: base content plus named layers. */
|
|
359
|
+
.g-overlay-layout { display: grid; min-inline-size: 0; min-block-size: 0; }
|
|
360
|
+
.g-overlay-layout > * { grid-area: 1 / 1; min-inline-size: 0; min-block-size: 0; }
|
|
361
|
+
.g-overlay-base { z-index: 0; }
|
|
362
|
+
.g-overlay-layer { z-index: 1; align-self: var(--g-overlay-align, end); justify-self: var(--g-overlay-justify, stretch); margin: var(--g-overlay-margin, var(--g-space-4)); pointer-events: none; }
|
|
363
|
+
.g-overlay-layer > * { pointer-events: auto; }
|
|
364
|
+
|
|
365
|
+
/* 16 Masonry: broad column fallback. */
|
|
366
|
+
.g-masonry { columns: var(--g-masonry-columns, 3) var(--g-masonry-min, 16rem); column-gap: var(--g-masonry-gap, var(--g-space-4)); }
|
|
367
|
+
.g-masonry > * { break-inside: avoid; margin-block: 0 var(--g-masonry-gap, var(--g-space-4)); }
|
|
368
|
+
|
|
369
|
+
/* 17 Bento: twelve-track editorial/dashboard tiles. */
|
|
370
|
+
.g-bento { display: grid; min-inline-size: 0; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: dense; grid-auto-rows: minmax(var(--g-bento-row-min, 8rem), auto); gap: var(--g-bento-gap, var(--g-space-4)); }
|
|
371
|
+
.g-bento > * { grid-column: span var(--g-bento-span, 4); }
|
|
372
|
+
.g-bento-wide { grid-column: span 8; }
|
|
373
|
+
.g-bento-full { grid-column: 1 / -1; }
|
|
374
|
+
.g-bento-tall { grid-row: span 2; }
|
|
375
|
+
.g-bento-featured { grid-column: span 8; grid-row: span 2; }
|
|
376
|
+
|
|
377
|
+
/* 18 Aspect Ratio: non-cropping generic ratio box. */
|
|
378
|
+
.g-aspect-ratio { position: relative; inline-size: 100%; aspect-ratio: var(--g-aspect-ratio, 16 / 9); }
|
|
379
|
+
.g-aspect-ratio > :only-child { inline-size: 100%; block-size: 100%; }
|
|
380
|
+
.g-aspect-square { --g-aspect-ratio: 1; }
|
|
381
|
+
.g-aspect-portrait { --g-aspect-ratio: 3 / 4; }
|
|
382
|
+
.g-aspect-landscape { --g-aspect-ratio: 4 / 3; }
|
|
383
|
+
.g-aspect-video { --g-aspect-ratio: 16 / 9; }
|
|
384
|
+
.g-aspect-cinema { --g-aspect-ratio: 21 / 9; }
|
|
385
|
+
|
|
386
|
+
/* 19 Scroll Area: controlled independent scrolling. */
|
|
387
|
+
.g-scroll-area { min-inline-size: 0; min-block-size: 0; max-block-size: var(--g-scroll-area-max, none); overflow: auto; overscroll-behavior: var(--g-scroll-overscroll, contain); scrollbar-gutter: stable; }
|
|
388
|
+
.g-scroll-area.is-block { overflow-x: hidden; overflow-y: auto; }
|
|
389
|
+
.g-scroll-area.is-inline { overflow-x: auto; overflow-y: hidden; }
|
|
390
|
+
|
|
391
|
+
/* 20 Scroll Snap: inline by default, block with .is-block. */
|
|
392
|
+
.g-scroll-snap { display: flex; max-inline-size: 100%; gap: var(--g-scroll-snap-gap, var(--g-space-4)); overflow-x: auto; overscroll-behavior-inline: contain; scroll-padding-inline: var(--g-scroll-snap-padding, var(--g-space-4)); scroll-snap-type: inline var(--g-scroll-snap-strictness, mandatory); }
|
|
393
|
+
.g-scroll-snap > * { flex: 0 0 var(--g-scroll-snap-item-size, min(85%, 28rem)); scroll-snap-align: var(--g-scroll-snap-align, start); scroll-snap-stop: normal; }
|
|
394
|
+
.g-scroll-snap-item { min-inline-size: 0; }
|
|
395
|
+
.g-scroll-snap.is-block { display: block; max-block-size: var(--g-scroll-snap-block-size, 30rem); overflow-x: hidden; overflow-y: auto; scroll-snap-type: block var(--g-scroll-snap-strictness, mandatory); }
|
|
396
|
+
.g-scroll-snap.is-block > * { min-block-size: var(--g-scroll-snap-item-block-size, 80%); }
|
|
397
|
+
|
|
398
|
+
/* 21 Safe Area: all four device insets plus an application gutter. */
|
|
399
|
+
.g-safe-area { padding-block-start: max(var(--g-safe-area-top, 0px), env(safe-area-inset-top)); padding-inline-end: max(var(--g-safe-area-end, 0px), env(safe-area-inset-right)); padding-block-end: max(var(--g-safe-area-bottom, 0px), env(safe-area-inset-bottom)); padding-inline-start: max(var(--g-safe-area-start, 0px), env(safe-area-inset-left)); }
|
|
400
|
+
.g-safe-area.is-padded { padding-block-start: max(var(--g-safe-area-padding, var(--g-space-4)), env(safe-area-inset-top)); padding-inline-end: max(var(--g-safe-area-padding, var(--g-space-4)), env(safe-area-inset-right)); padding-block-end: max(var(--g-safe-area-padding, var(--g-space-4)), env(safe-area-inset-bottom)); padding-inline-start: max(var(--g-safe-area-padding, var(--g-space-4)), env(safe-area-inset-left)); }
|
|
401
|
+
|
|
402
|
+
/* 22 Sticky Region: logical top/bottom attachment inside a scroll owner. */
|
|
403
|
+
.g-sticky-region { position: sticky; z-index: var(--g-sticky-region-z, var(--g-z-sticky)); inset-block-start: var(--g-sticky-region-offset, 0); }
|
|
404
|
+
.g-sticky-region.is-bottom { inset-block: auto var(--g-sticky-region-offset, 0); }
|
|
405
|
+
.g-sticky-region.is-surface { background: var(--g-color-surface); }
|
|
406
|
+
|
|
407
|
+
.g-layout-container { container-name: g-layout; container-type: inline-size; }
|
|
408
|
+
|
|
409
|
+
@container g-layout (max-width: 39.999rem) {
|
|
410
|
+
.g-media-object:not([data-g-collapse="false"]) { grid-template: "media" auto "body" auto "action" auto / minmax(0, 1fr); }
|
|
411
|
+
.g-bento > * { grid-column: 1 / -1; }
|
|
412
|
+
.g-bento-tall, .g-bento-featured { grid-row: auto; }
|
|
413
|
+
.g-masonry { columns: 1; }
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
@media (max-width: 39.999rem) {
|
|
417
|
+
.g-media-object:not([data-g-collapse="false"]) { grid-template: "media" auto "body" auto "action" auto / minmax(0, 1fr); }
|
|
418
|
+
.g-bento > * { grid-column: 1 / -1; }
|
|
419
|
+
.g-bento-tall, .g-bento-featured { grid-row: auto; }
|
|
420
|
+
.g-masonry { columns: 1; }
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
@media (prefers-reduced-motion: reduce) {
|
|
424
|
+
:is(.g-reel, .g-scroll-area, .g-scroll-snap) { scroll-behavior: auto; }
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
@media print {
|
|
428
|
+
:is(.g-reel, .g-scroll-area, .g-scroll-snap) { display: block; max-block-size: none; overflow: visible; }
|
|
429
|
+
:is(.g-reel, .g-scroll-snap) > * { break-inside: avoid; margin-block-end: var(--g-space-4); }
|
|
430
|
+
.g-masonry { columns: 1; }
|
|
431
|
+
.g-imposter, .g-imposter.is-fixed { position: static; max-inline-size: none; max-block-size: none; transform: none; overflow: visible; }
|
|
432
|
+
.g-overlay-layout { display: block; }
|
|
433
|
+
.g-overlay-layout > * { margin-block-end: var(--g-space-4); }
|
|
434
|
+
.g-overlay-layer { margin: 0; }
|
|
435
|
+
.g-sticky-region, .g-sticky-region.is-bottom { position: static; }
|
|
436
|
+
}
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
@layer gardener.components {
|
|
440
|
+
:where(.g-row,.g-grid-24,.g-grid-12){--g-grid-columns:24;--g-grid-gutter-x:var(--g-space-4);--g-grid-gutter-y:var(--g-space-4);display:grid;grid-template-columns:repeat(var(--g-grid-columns),minmax(0,1fr));column-gap:var(--g-grid-gutter-x);row-gap:var(--g-grid-gutter-y);align-items:stretch;min-inline-size:0}
|
|
441
|
+
.g-grid-12{--g-grid-columns:12}
|
|
442
|
+
:where(.g-row,.g-grid-24,.g-grid-12)>*{min-inline-size:0}
|
|
443
|
+
.g-row-dense{grid-auto-flow:row dense}
|
|
444
|
+
.g-row-no-gutter{--g-grid-gutter-x:0;--g-grid-gutter-y:0}
|
|
445
|
+
.g-row-top{align-items:start}
|
|
446
|
+
.g-row-middle{align-items:center}
|
|
447
|
+
.g-row-bottom{align-items:end}
|
|
448
|
+
.g-row-stretch{align-items:stretch}
|
|
449
|
+
.g-col-self-start{align-self:start}
|
|
450
|
+
.g-col-self-center{align-self:center}
|
|
451
|
+
.g-col-self-end{align-self:end}
|
|
452
|
+
.g-col-self-stretch{align-self:stretch}
|
|
453
|
+
.g-grid-container{container-name:g-grid;container-type:inline-size}
|
|
454
|
+
.g-col{grid-column:1/-1;min-inline-size:0}
|
|
455
|
+
.g-col-auto{grid-column:auto;min-inline-size:0}
|
|
456
|
+
.g-col-fill{grid-column:1/-1;min-inline-size:0}
|
|
457
|
+
.g-col-full{grid-column:1/-1;min-inline-size:0}
|
|
458
|
+
.g-col-hidden{display:none}
|
|
459
|
+
.g-col-visible{display:revert}
|
|
460
|
+
.g-offset-0{grid-column-start:auto}
|
|
461
|
+
.g-col-start-auto{grid-column-start:auto}
|
|
462
|
+
.g-col-end-auto{grid-column-end:auto}
|
|
463
|
+
.g-col-1{grid-column:span 1/span 1;min-inline-size:0}
|
|
464
|
+
.g-col-fill-from-1{grid-column:1/-1;min-inline-size:0}
|
|
465
|
+
.g-col-2{grid-column:span 2/span 2;min-inline-size:0}
|
|
466
|
+
.g-col-fill-from-2{grid-column:2/-1;min-inline-size:0}
|
|
467
|
+
.g-col-3{grid-column:span 3/span 3;min-inline-size:0}
|
|
468
|
+
.g-col-fill-from-3{grid-column:3/-1;min-inline-size:0}
|
|
469
|
+
.g-col-4{grid-column:span 4/span 4;min-inline-size:0}
|
|
470
|
+
.g-col-fill-from-4{grid-column:4/-1;min-inline-size:0}
|
|
471
|
+
.g-col-5{grid-column:span 5/span 5;min-inline-size:0}
|
|
472
|
+
.g-col-fill-from-5{grid-column:5/-1;min-inline-size:0}
|
|
473
|
+
.g-col-6{grid-column:span 6/span 6;min-inline-size:0}
|
|
474
|
+
.g-col-fill-from-6{grid-column:6/-1;min-inline-size:0}
|
|
475
|
+
.g-col-7{grid-column:span 7/span 7;min-inline-size:0}
|
|
476
|
+
.g-col-fill-from-7{grid-column:7/-1;min-inline-size:0}
|
|
477
|
+
.g-col-8{grid-column:span 8/span 8;min-inline-size:0}
|
|
478
|
+
.g-col-fill-from-8{grid-column:8/-1;min-inline-size:0}
|
|
479
|
+
.g-col-9{grid-column:span 9/span 9;min-inline-size:0}
|
|
480
|
+
.g-col-fill-from-9{grid-column:9/-1;min-inline-size:0}
|
|
481
|
+
.g-col-10{grid-column:span 10/span 10;min-inline-size:0}
|
|
482
|
+
.g-col-fill-from-10{grid-column:10/-1;min-inline-size:0}
|
|
483
|
+
.g-col-11{grid-column:span 11/span 11;min-inline-size:0}
|
|
484
|
+
.g-col-fill-from-11{grid-column:11/-1;min-inline-size:0}
|
|
485
|
+
.g-col-12{grid-column:span 12/span 12;min-inline-size:0}
|
|
486
|
+
.g-col-fill-from-12{grid-column:12/-1;min-inline-size:0}
|
|
487
|
+
.g-col-13{grid-column:span 13/span 13;min-inline-size:0}
|
|
488
|
+
.g-col-fill-from-13{grid-column:13/-1;min-inline-size:0}
|
|
489
|
+
.g-col-14{grid-column:span 14/span 14;min-inline-size:0}
|
|
490
|
+
.g-col-fill-from-14{grid-column:14/-1;min-inline-size:0}
|
|
491
|
+
.g-col-15{grid-column:span 15/span 15;min-inline-size:0}
|
|
492
|
+
.g-col-fill-from-15{grid-column:15/-1;min-inline-size:0}
|
|
493
|
+
.g-col-16{grid-column:span 16/span 16;min-inline-size:0}
|
|
494
|
+
.g-col-fill-from-16{grid-column:16/-1;min-inline-size:0}
|
|
495
|
+
.g-col-17{grid-column:span 17/span 17;min-inline-size:0}
|
|
496
|
+
.g-col-fill-from-17{grid-column:17/-1;min-inline-size:0}
|
|
497
|
+
.g-col-18{grid-column:span 18/span 18;min-inline-size:0}
|
|
498
|
+
.g-col-fill-from-18{grid-column:18/-1;min-inline-size:0}
|
|
499
|
+
.g-col-19{grid-column:span 19/span 19;min-inline-size:0}
|
|
500
|
+
.g-col-fill-from-19{grid-column:19/-1;min-inline-size:0}
|
|
501
|
+
.g-col-20{grid-column:span 20/span 20;min-inline-size:0}
|
|
502
|
+
.g-col-fill-from-20{grid-column:20/-1;min-inline-size:0}
|
|
503
|
+
.g-col-21{grid-column:span 21/span 21;min-inline-size:0}
|
|
504
|
+
.g-col-fill-from-21{grid-column:21/-1;min-inline-size:0}
|
|
505
|
+
.g-col-22{grid-column:span 22/span 22;min-inline-size:0}
|
|
506
|
+
.g-col-fill-from-22{grid-column:22/-1;min-inline-size:0}
|
|
507
|
+
.g-col-23{grid-column:span 23/span 23;min-inline-size:0}
|
|
508
|
+
.g-col-fill-from-23{grid-column:23/-1;min-inline-size:0}
|
|
509
|
+
.g-col-24{grid-column:span 24/span 24;min-inline-size:0}
|
|
510
|
+
.g-col-fill-from-24{grid-column:24/-1;min-inline-size:0}
|
|
511
|
+
.g-offset-1{grid-column-start:2}
|
|
512
|
+
.g-offset-2{grid-column-start:3}
|
|
513
|
+
.g-offset-3{grid-column-start:4}
|
|
514
|
+
.g-offset-4{grid-column-start:5}
|
|
515
|
+
.g-offset-5{grid-column-start:6}
|
|
516
|
+
.g-offset-6{grid-column-start:7}
|
|
517
|
+
.g-offset-7{grid-column-start:8}
|
|
518
|
+
.g-offset-8{grid-column-start:9}
|
|
519
|
+
.g-offset-9{grid-column-start:10}
|
|
520
|
+
.g-offset-10{grid-column-start:11}
|
|
521
|
+
.g-offset-11{grid-column-start:12}
|
|
522
|
+
.g-offset-12{grid-column-start:13}
|
|
523
|
+
.g-offset-13{grid-column-start:14}
|
|
524
|
+
.g-offset-14{grid-column-start:15}
|
|
525
|
+
.g-offset-15{grid-column-start:16}
|
|
526
|
+
.g-offset-16{grid-column-start:17}
|
|
527
|
+
.g-offset-17{grid-column-start:18}
|
|
528
|
+
.g-offset-18{grid-column-start:19}
|
|
529
|
+
.g-offset-19{grid-column-start:20}
|
|
530
|
+
.g-offset-20{grid-column-start:21}
|
|
531
|
+
.g-offset-21{grid-column-start:22}
|
|
532
|
+
.g-offset-22{grid-column-start:23}
|
|
533
|
+
.g-offset-23{grid-column-start:24}
|
|
534
|
+
.g-col-start-1{grid-column-start:1}
|
|
535
|
+
.g-col-end-1{grid-column-end:1}
|
|
536
|
+
.g-col-start-2{grid-column-start:2}
|
|
537
|
+
.g-col-end-2{grid-column-end:2}
|
|
538
|
+
.g-col-start-3{grid-column-start:3}
|
|
539
|
+
.g-col-end-3{grid-column-end:3}
|
|
540
|
+
.g-col-start-4{grid-column-start:4}
|
|
541
|
+
.g-col-end-4{grid-column-end:4}
|
|
542
|
+
.g-col-start-5{grid-column-start:5}
|
|
543
|
+
.g-col-end-5{grid-column-end:5}
|
|
544
|
+
.g-col-start-6{grid-column-start:6}
|
|
545
|
+
.g-col-end-6{grid-column-end:6}
|
|
546
|
+
.g-col-start-7{grid-column-start:7}
|
|
547
|
+
.g-col-end-7{grid-column-end:7}
|
|
548
|
+
.g-col-start-8{grid-column-start:8}
|
|
549
|
+
.g-col-end-8{grid-column-end:8}
|
|
550
|
+
.g-col-start-9{grid-column-start:9}
|
|
551
|
+
.g-col-end-9{grid-column-end:9}
|
|
552
|
+
.g-col-start-10{grid-column-start:10}
|
|
553
|
+
.g-col-end-10{grid-column-end:10}
|
|
554
|
+
.g-col-start-11{grid-column-start:11}
|
|
555
|
+
.g-col-end-11{grid-column-end:11}
|
|
556
|
+
.g-col-start-12{grid-column-start:12}
|
|
557
|
+
.g-col-end-12{grid-column-end:12}
|
|
558
|
+
.g-col-start-13{grid-column-start:13}
|
|
559
|
+
.g-col-end-13{grid-column-end:13}
|
|
560
|
+
.g-col-start-14{grid-column-start:14}
|
|
561
|
+
.g-col-end-14{grid-column-end:14}
|
|
562
|
+
.g-col-start-15{grid-column-start:15}
|
|
563
|
+
.g-col-end-15{grid-column-end:15}
|
|
564
|
+
.g-col-start-16{grid-column-start:16}
|
|
565
|
+
.g-col-end-16{grid-column-end:16}
|
|
566
|
+
.g-col-start-17{grid-column-start:17}
|
|
567
|
+
.g-col-end-17{grid-column-end:17}
|
|
568
|
+
.g-col-start-18{grid-column-start:18}
|
|
569
|
+
.g-col-end-18{grid-column-end:18}
|
|
570
|
+
.g-col-start-19{grid-column-start:19}
|
|
571
|
+
.g-col-end-19{grid-column-end:19}
|
|
572
|
+
.g-col-start-20{grid-column-start:20}
|
|
573
|
+
.g-col-end-20{grid-column-end:20}
|
|
574
|
+
.g-col-start-21{grid-column-start:21}
|
|
575
|
+
.g-col-end-21{grid-column-end:21}
|
|
576
|
+
.g-col-start-22{grid-column-start:22}
|
|
577
|
+
.g-col-end-22{grid-column-end:22}
|
|
578
|
+
.g-col-start-23{grid-column-start:23}
|
|
579
|
+
.g-col-end-23{grid-column-end:23}
|
|
580
|
+
.g-col-start-24{grid-column-start:24}
|
|
581
|
+
.g-col-end-24{grid-column-end:24}
|
|
582
|
+
.g-col-start-25{grid-column-start:25}
|
|
583
|
+
.g-col-end-25{grid-column-end:25}
|
|
584
|
+
.g-gutter-0{--g-grid-gutter-x:var(--g-space-0);--g-grid-gutter-y:var(--g-space-0)}
|
|
585
|
+
.g-gutter-x-0{--g-grid-gutter-x:var(--g-space-0)}
|
|
586
|
+
.g-gutter-y-0{--g-grid-gutter-y:var(--g-space-0)}
|
|
587
|
+
.g-gutter-1{--g-grid-gutter-x:var(--g-space-1);--g-grid-gutter-y:var(--g-space-1)}
|
|
588
|
+
.g-gutter-x-1{--g-grid-gutter-x:var(--g-space-1)}
|
|
589
|
+
.g-gutter-y-1{--g-grid-gutter-y:var(--g-space-1)}
|
|
590
|
+
.g-gutter-2{--g-grid-gutter-x:var(--g-space-2);--g-grid-gutter-y:var(--g-space-2)}
|
|
591
|
+
.g-gutter-x-2{--g-grid-gutter-x:var(--g-space-2)}
|
|
592
|
+
.g-gutter-y-2{--g-grid-gutter-y:var(--g-space-2)}
|
|
593
|
+
.g-gutter-3{--g-grid-gutter-x:var(--g-space-3);--g-grid-gutter-y:var(--g-space-3)}
|
|
594
|
+
.g-gutter-x-3{--g-grid-gutter-x:var(--g-space-3)}
|
|
595
|
+
.g-gutter-y-3{--g-grid-gutter-y:var(--g-space-3)}
|
|
596
|
+
.g-gutter-4{--g-grid-gutter-x:var(--g-space-4);--g-grid-gutter-y:var(--g-space-4)}
|
|
597
|
+
.g-gutter-x-4{--g-grid-gutter-x:var(--g-space-4)}
|
|
598
|
+
.g-gutter-y-4{--g-grid-gutter-y:var(--g-space-4)}
|
|
599
|
+
.g-gutter-5{--g-grid-gutter-x:var(--g-space-5);--g-grid-gutter-y:var(--g-space-5)}
|
|
600
|
+
.g-gutter-x-5{--g-grid-gutter-x:var(--g-space-5)}
|
|
601
|
+
.g-gutter-y-5{--g-grid-gutter-y:var(--g-space-5)}
|
|
602
|
+
.g-gutter-6{--g-grid-gutter-x:var(--g-space-6);--g-grid-gutter-y:var(--g-space-6)}
|
|
603
|
+
.g-gutter-x-6{--g-grid-gutter-x:var(--g-space-6)}
|
|
604
|
+
.g-gutter-y-6{--g-grid-gutter-y:var(--g-space-6)}
|
|
605
|
+
.g-gutter-8{--g-grid-gutter-x:var(--g-space-8);--g-grid-gutter-y:var(--g-space-8)}
|
|
606
|
+
.g-gutter-x-8{--g-grid-gutter-x:var(--g-space-8)}
|
|
607
|
+
.g-gutter-y-8{--g-grid-gutter-y:var(--g-space-8)}
|
|
608
|
+
.g-gutter-10{--g-grid-gutter-x:var(--g-space-10);--g-grid-gutter-y:var(--g-space-10)}
|
|
609
|
+
.g-gutter-x-10{--g-grid-gutter-x:var(--g-space-10)}
|
|
610
|
+
.g-gutter-y-10{--g-grid-gutter-y:var(--g-space-10)}
|
|
611
|
+
.g-gutter-12{--g-grid-gutter-x:var(--g-space-12);--g-grid-gutter-y:var(--g-space-12)}
|
|
612
|
+
.g-gutter-x-12{--g-grid-gutter-x:var(--g-space-12)}
|
|
613
|
+
.g-gutter-y-12{--g-grid-gutter-y:var(--g-space-12)}
|
|
614
|
+
@media (min-width:480px){.g-sm-col{grid-column:1/-1;min-inline-size:0}.g-sm-col-auto{grid-column:auto;min-inline-size:0}.g-sm-col-fill{grid-column:1/-1;min-inline-size:0}.g-sm-col-full{grid-column:1/-1;min-inline-size:0}.g-sm-col-hidden{display:none}.g-sm-col-visible{display:revert}.g-sm-offset-0{grid-column-start:auto}.g-sm-col-start-auto{grid-column-start:auto}.g-sm-col-end-auto{grid-column-end:auto}.g-sm-col-1{grid-column:span 1/span 1;min-inline-size:0}.g-sm-col-fill-from-1{grid-column:1/-1;min-inline-size:0}.g-sm-col-2{grid-column:span 2/span 2;min-inline-size:0}.g-sm-col-fill-from-2{grid-column:2/-1;min-inline-size:0}.g-sm-col-3{grid-column:span 3/span 3;min-inline-size:0}.g-sm-col-fill-from-3{grid-column:3/-1;min-inline-size:0}.g-sm-col-4{grid-column:span 4/span 4;min-inline-size:0}.g-sm-col-fill-from-4{grid-column:4/-1;min-inline-size:0}.g-sm-col-5{grid-column:span 5/span 5;min-inline-size:0}.g-sm-col-fill-from-5{grid-column:5/-1;min-inline-size:0}.g-sm-col-6{grid-column:span 6/span 6;min-inline-size:0}.g-sm-col-fill-from-6{grid-column:6/-1;min-inline-size:0}.g-sm-col-7{grid-column:span 7/span 7;min-inline-size:0}.g-sm-col-fill-from-7{grid-column:7/-1;min-inline-size:0}.g-sm-col-8{grid-column:span 8/span 8;min-inline-size:0}.g-sm-col-fill-from-8{grid-column:8/-1;min-inline-size:0}.g-sm-col-9{grid-column:span 9/span 9;min-inline-size:0}.g-sm-col-fill-from-9{grid-column:9/-1;min-inline-size:0}.g-sm-col-10{grid-column:span 10/span 10;min-inline-size:0}.g-sm-col-fill-from-10{grid-column:10/-1;min-inline-size:0}.g-sm-col-11{grid-column:span 11/span 11;min-inline-size:0}.g-sm-col-fill-from-11{grid-column:11/-1;min-inline-size:0}.g-sm-col-12{grid-column:span 12/span 12;min-inline-size:0}.g-sm-col-fill-from-12{grid-column:12/-1;min-inline-size:0}.g-sm-col-13{grid-column:span 13/span 13;min-inline-size:0}.g-sm-col-fill-from-13{grid-column:13/-1;min-inline-size:0}.g-sm-col-14{grid-column:span 14/span 14;min-inline-size:0}.g-sm-col-fill-from-14{grid-column:14/-1;min-inline-size:0}.g-sm-col-15{grid-column:span 15/span 15;min-inline-size:0}.g-sm-col-fill-from-15{grid-column:15/-1;min-inline-size:0}.g-sm-col-16{grid-column:span 16/span 16;min-inline-size:0}.g-sm-col-fill-from-16{grid-column:16/-1;min-inline-size:0}.g-sm-col-17{grid-column:span 17/span 17;min-inline-size:0}.g-sm-col-fill-from-17{grid-column:17/-1;min-inline-size:0}.g-sm-col-18{grid-column:span 18/span 18;min-inline-size:0}.g-sm-col-fill-from-18{grid-column:18/-1;min-inline-size:0}.g-sm-col-19{grid-column:span 19/span 19;min-inline-size:0}.g-sm-col-fill-from-19{grid-column:19/-1;min-inline-size:0}.g-sm-col-20{grid-column:span 20/span 20;min-inline-size:0}.g-sm-col-fill-from-20{grid-column:20/-1;min-inline-size:0}.g-sm-col-21{grid-column:span 21/span 21;min-inline-size:0}.g-sm-col-fill-from-21{grid-column:21/-1;min-inline-size:0}.g-sm-col-22{grid-column:span 22/span 22;min-inline-size:0}.g-sm-col-fill-from-22{grid-column:22/-1;min-inline-size:0}.g-sm-col-23{grid-column:span 23/span 23;min-inline-size:0}.g-sm-col-fill-from-23{grid-column:23/-1;min-inline-size:0}.g-sm-col-24{grid-column:span 24/span 24;min-inline-size:0}.g-sm-col-fill-from-24{grid-column:24/-1;min-inline-size:0}.g-sm-offset-1{grid-column-start:2}.g-sm-offset-2{grid-column-start:3}.g-sm-offset-3{grid-column-start:4}.g-sm-offset-4{grid-column-start:5}.g-sm-offset-5{grid-column-start:6}.g-sm-offset-6{grid-column-start:7}.g-sm-offset-7{grid-column-start:8}.g-sm-offset-8{grid-column-start:9}.g-sm-offset-9{grid-column-start:10}.g-sm-offset-10{grid-column-start:11}.g-sm-offset-11{grid-column-start:12}.g-sm-offset-12{grid-column-start:13}.g-sm-offset-13{grid-column-start:14}.g-sm-offset-14{grid-column-start:15}.g-sm-offset-15{grid-column-start:16}.g-sm-offset-16{grid-column-start:17}.g-sm-offset-17{grid-column-start:18}.g-sm-offset-18{grid-column-start:19}.g-sm-offset-19{grid-column-start:20}.g-sm-offset-20{grid-column-start:21}.g-sm-offset-21{grid-column-start:22}.g-sm-offset-22{grid-column-start:23}.g-sm-offset-23{grid-column-start:24}.g-sm-col-start-1{grid-column-start:1}.g-sm-col-end-1{grid-column-end:1}.g-sm-col-start-2{grid-column-start:2}.g-sm-col-end-2{grid-column-end:2}.g-sm-col-start-3{grid-column-start:3}.g-sm-col-end-3{grid-column-end:3}.g-sm-col-start-4{grid-column-start:4}.g-sm-col-end-4{grid-column-end:4}.g-sm-col-start-5{grid-column-start:5}.g-sm-col-end-5{grid-column-end:5}.g-sm-col-start-6{grid-column-start:6}.g-sm-col-end-6{grid-column-end:6}.g-sm-col-start-7{grid-column-start:7}.g-sm-col-end-7{grid-column-end:7}.g-sm-col-start-8{grid-column-start:8}.g-sm-col-end-8{grid-column-end:8}.g-sm-col-start-9{grid-column-start:9}.g-sm-col-end-9{grid-column-end:9}.g-sm-col-start-10{grid-column-start:10}.g-sm-col-end-10{grid-column-end:10}.g-sm-col-start-11{grid-column-start:11}.g-sm-col-end-11{grid-column-end:11}.g-sm-col-start-12{grid-column-start:12}.g-sm-col-end-12{grid-column-end:12}.g-sm-col-start-13{grid-column-start:13}.g-sm-col-end-13{grid-column-end:13}.g-sm-col-start-14{grid-column-start:14}.g-sm-col-end-14{grid-column-end:14}.g-sm-col-start-15{grid-column-start:15}.g-sm-col-end-15{grid-column-end:15}.g-sm-col-start-16{grid-column-start:16}.g-sm-col-end-16{grid-column-end:16}.g-sm-col-start-17{grid-column-start:17}.g-sm-col-end-17{grid-column-end:17}.g-sm-col-start-18{grid-column-start:18}.g-sm-col-end-18{grid-column-end:18}.g-sm-col-start-19{grid-column-start:19}.g-sm-col-end-19{grid-column-end:19}.g-sm-col-start-20{grid-column-start:20}.g-sm-col-end-20{grid-column-end:20}.g-sm-col-start-21{grid-column-start:21}.g-sm-col-end-21{grid-column-end:21}.g-sm-col-start-22{grid-column-start:22}.g-sm-col-end-22{grid-column-end:22}.g-sm-col-start-23{grid-column-start:23}.g-sm-col-end-23{grid-column-end:23}.g-sm-col-start-24{grid-column-start:24}.g-sm-col-end-24{grid-column-end:24}.g-sm-col-start-25{grid-column-start:25}.g-sm-col-end-25{grid-column-end:25}.g-sm-gutter-0{--g-grid-gutter-x:var(--g-space-0);--g-grid-gutter-y:var(--g-space-0)}.g-sm-gutter-x-0{--g-grid-gutter-x:var(--g-space-0)}.g-sm-gutter-y-0{--g-grid-gutter-y:var(--g-space-0)}.g-sm-gutter-1{--g-grid-gutter-x:var(--g-space-1);--g-grid-gutter-y:var(--g-space-1)}.g-sm-gutter-x-1{--g-grid-gutter-x:var(--g-space-1)}.g-sm-gutter-y-1{--g-grid-gutter-y:var(--g-space-1)}.g-sm-gutter-2{--g-grid-gutter-x:var(--g-space-2);--g-grid-gutter-y:var(--g-space-2)}.g-sm-gutter-x-2{--g-grid-gutter-x:var(--g-space-2)}.g-sm-gutter-y-2{--g-grid-gutter-y:var(--g-space-2)}.g-sm-gutter-3{--g-grid-gutter-x:var(--g-space-3);--g-grid-gutter-y:var(--g-space-3)}.g-sm-gutter-x-3{--g-grid-gutter-x:var(--g-space-3)}.g-sm-gutter-y-3{--g-grid-gutter-y:var(--g-space-3)}.g-sm-gutter-4{--g-grid-gutter-x:var(--g-space-4);--g-grid-gutter-y:var(--g-space-4)}.g-sm-gutter-x-4{--g-grid-gutter-x:var(--g-space-4)}.g-sm-gutter-y-4{--g-grid-gutter-y:var(--g-space-4)}.g-sm-gutter-5{--g-grid-gutter-x:var(--g-space-5);--g-grid-gutter-y:var(--g-space-5)}.g-sm-gutter-x-5{--g-grid-gutter-x:var(--g-space-5)}.g-sm-gutter-y-5{--g-grid-gutter-y:var(--g-space-5)}.g-sm-gutter-6{--g-grid-gutter-x:var(--g-space-6);--g-grid-gutter-y:var(--g-space-6)}.g-sm-gutter-x-6{--g-grid-gutter-x:var(--g-space-6)}.g-sm-gutter-y-6{--g-grid-gutter-y:var(--g-space-6)}.g-sm-gutter-8{--g-grid-gutter-x:var(--g-space-8);--g-grid-gutter-y:var(--g-space-8)}.g-sm-gutter-x-8{--g-grid-gutter-x:var(--g-space-8)}.g-sm-gutter-y-8{--g-grid-gutter-y:var(--g-space-8)}.g-sm-gutter-10{--g-grid-gutter-x:var(--g-space-10);--g-grid-gutter-y:var(--g-space-10)}.g-sm-gutter-x-10{--g-grid-gutter-x:var(--g-space-10)}.g-sm-gutter-y-10{--g-grid-gutter-y:var(--g-space-10)}.g-sm-gutter-12{--g-grid-gutter-x:var(--g-space-12);--g-grid-gutter-y:var(--g-space-12)}.g-sm-gutter-x-12{--g-grid-gutter-x:var(--g-space-12)}.g-sm-gutter-y-12{--g-grid-gutter-y:var(--g-space-12)}}
|
|
615
|
+
@media (min-width:768px){.g-md-col{grid-column:1/-1;min-inline-size:0}.g-md-col-auto{grid-column:auto;min-inline-size:0}.g-md-col-fill{grid-column:1/-1;min-inline-size:0}.g-md-col-full{grid-column:1/-1;min-inline-size:0}.g-md-col-hidden{display:none}.g-md-col-visible{display:revert}.g-md-offset-0{grid-column-start:auto}.g-md-col-start-auto{grid-column-start:auto}.g-md-col-end-auto{grid-column-end:auto}.g-md-col-1{grid-column:span 1/span 1;min-inline-size:0}.g-md-col-fill-from-1{grid-column:1/-1;min-inline-size:0}.g-md-col-2{grid-column:span 2/span 2;min-inline-size:0}.g-md-col-fill-from-2{grid-column:2/-1;min-inline-size:0}.g-md-col-3{grid-column:span 3/span 3;min-inline-size:0}.g-md-col-fill-from-3{grid-column:3/-1;min-inline-size:0}.g-md-col-4{grid-column:span 4/span 4;min-inline-size:0}.g-md-col-fill-from-4{grid-column:4/-1;min-inline-size:0}.g-md-col-5{grid-column:span 5/span 5;min-inline-size:0}.g-md-col-fill-from-5{grid-column:5/-1;min-inline-size:0}.g-md-col-6{grid-column:span 6/span 6;min-inline-size:0}.g-md-col-fill-from-6{grid-column:6/-1;min-inline-size:0}.g-md-col-7{grid-column:span 7/span 7;min-inline-size:0}.g-md-col-fill-from-7{grid-column:7/-1;min-inline-size:0}.g-md-col-8{grid-column:span 8/span 8;min-inline-size:0}.g-md-col-fill-from-8{grid-column:8/-1;min-inline-size:0}.g-md-col-9{grid-column:span 9/span 9;min-inline-size:0}.g-md-col-fill-from-9{grid-column:9/-1;min-inline-size:0}.g-md-col-10{grid-column:span 10/span 10;min-inline-size:0}.g-md-col-fill-from-10{grid-column:10/-1;min-inline-size:0}.g-md-col-11{grid-column:span 11/span 11;min-inline-size:0}.g-md-col-fill-from-11{grid-column:11/-1;min-inline-size:0}.g-md-col-12{grid-column:span 12/span 12;min-inline-size:0}.g-md-col-fill-from-12{grid-column:12/-1;min-inline-size:0}.g-md-col-13{grid-column:span 13/span 13;min-inline-size:0}.g-md-col-fill-from-13{grid-column:13/-1;min-inline-size:0}.g-md-col-14{grid-column:span 14/span 14;min-inline-size:0}.g-md-col-fill-from-14{grid-column:14/-1;min-inline-size:0}.g-md-col-15{grid-column:span 15/span 15;min-inline-size:0}.g-md-col-fill-from-15{grid-column:15/-1;min-inline-size:0}.g-md-col-16{grid-column:span 16/span 16;min-inline-size:0}.g-md-col-fill-from-16{grid-column:16/-1;min-inline-size:0}.g-md-col-17{grid-column:span 17/span 17;min-inline-size:0}.g-md-col-fill-from-17{grid-column:17/-1;min-inline-size:0}.g-md-col-18{grid-column:span 18/span 18;min-inline-size:0}.g-md-col-fill-from-18{grid-column:18/-1;min-inline-size:0}.g-md-col-19{grid-column:span 19/span 19;min-inline-size:0}.g-md-col-fill-from-19{grid-column:19/-1;min-inline-size:0}.g-md-col-20{grid-column:span 20/span 20;min-inline-size:0}.g-md-col-fill-from-20{grid-column:20/-1;min-inline-size:0}.g-md-col-21{grid-column:span 21/span 21;min-inline-size:0}.g-md-col-fill-from-21{grid-column:21/-1;min-inline-size:0}.g-md-col-22{grid-column:span 22/span 22;min-inline-size:0}.g-md-col-fill-from-22{grid-column:22/-1;min-inline-size:0}.g-md-col-23{grid-column:span 23/span 23;min-inline-size:0}.g-md-col-fill-from-23{grid-column:23/-1;min-inline-size:0}.g-md-col-24{grid-column:span 24/span 24;min-inline-size:0}.g-md-col-fill-from-24{grid-column:24/-1;min-inline-size:0}.g-md-offset-1{grid-column-start:2}.g-md-offset-2{grid-column-start:3}.g-md-offset-3{grid-column-start:4}.g-md-offset-4{grid-column-start:5}.g-md-offset-5{grid-column-start:6}.g-md-offset-6{grid-column-start:7}.g-md-offset-7{grid-column-start:8}.g-md-offset-8{grid-column-start:9}.g-md-offset-9{grid-column-start:10}.g-md-offset-10{grid-column-start:11}.g-md-offset-11{grid-column-start:12}.g-md-offset-12{grid-column-start:13}.g-md-offset-13{grid-column-start:14}.g-md-offset-14{grid-column-start:15}.g-md-offset-15{grid-column-start:16}.g-md-offset-16{grid-column-start:17}.g-md-offset-17{grid-column-start:18}.g-md-offset-18{grid-column-start:19}.g-md-offset-19{grid-column-start:20}.g-md-offset-20{grid-column-start:21}.g-md-offset-21{grid-column-start:22}.g-md-offset-22{grid-column-start:23}.g-md-offset-23{grid-column-start:24}.g-md-col-start-1{grid-column-start:1}.g-md-col-end-1{grid-column-end:1}.g-md-col-start-2{grid-column-start:2}.g-md-col-end-2{grid-column-end:2}.g-md-col-start-3{grid-column-start:3}.g-md-col-end-3{grid-column-end:3}.g-md-col-start-4{grid-column-start:4}.g-md-col-end-4{grid-column-end:4}.g-md-col-start-5{grid-column-start:5}.g-md-col-end-5{grid-column-end:5}.g-md-col-start-6{grid-column-start:6}.g-md-col-end-6{grid-column-end:6}.g-md-col-start-7{grid-column-start:7}.g-md-col-end-7{grid-column-end:7}.g-md-col-start-8{grid-column-start:8}.g-md-col-end-8{grid-column-end:8}.g-md-col-start-9{grid-column-start:9}.g-md-col-end-9{grid-column-end:9}.g-md-col-start-10{grid-column-start:10}.g-md-col-end-10{grid-column-end:10}.g-md-col-start-11{grid-column-start:11}.g-md-col-end-11{grid-column-end:11}.g-md-col-start-12{grid-column-start:12}.g-md-col-end-12{grid-column-end:12}.g-md-col-start-13{grid-column-start:13}.g-md-col-end-13{grid-column-end:13}.g-md-col-start-14{grid-column-start:14}.g-md-col-end-14{grid-column-end:14}.g-md-col-start-15{grid-column-start:15}.g-md-col-end-15{grid-column-end:15}.g-md-col-start-16{grid-column-start:16}.g-md-col-end-16{grid-column-end:16}.g-md-col-start-17{grid-column-start:17}.g-md-col-end-17{grid-column-end:17}.g-md-col-start-18{grid-column-start:18}.g-md-col-end-18{grid-column-end:18}.g-md-col-start-19{grid-column-start:19}.g-md-col-end-19{grid-column-end:19}.g-md-col-start-20{grid-column-start:20}.g-md-col-end-20{grid-column-end:20}.g-md-col-start-21{grid-column-start:21}.g-md-col-end-21{grid-column-end:21}.g-md-col-start-22{grid-column-start:22}.g-md-col-end-22{grid-column-end:22}.g-md-col-start-23{grid-column-start:23}.g-md-col-end-23{grid-column-end:23}.g-md-col-start-24{grid-column-start:24}.g-md-col-end-24{grid-column-end:24}.g-md-col-start-25{grid-column-start:25}.g-md-col-end-25{grid-column-end:25}.g-md-gutter-0{--g-grid-gutter-x:var(--g-space-0);--g-grid-gutter-y:var(--g-space-0)}.g-md-gutter-x-0{--g-grid-gutter-x:var(--g-space-0)}.g-md-gutter-y-0{--g-grid-gutter-y:var(--g-space-0)}.g-md-gutter-1{--g-grid-gutter-x:var(--g-space-1);--g-grid-gutter-y:var(--g-space-1)}.g-md-gutter-x-1{--g-grid-gutter-x:var(--g-space-1)}.g-md-gutter-y-1{--g-grid-gutter-y:var(--g-space-1)}.g-md-gutter-2{--g-grid-gutter-x:var(--g-space-2);--g-grid-gutter-y:var(--g-space-2)}.g-md-gutter-x-2{--g-grid-gutter-x:var(--g-space-2)}.g-md-gutter-y-2{--g-grid-gutter-y:var(--g-space-2)}.g-md-gutter-3{--g-grid-gutter-x:var(--g-space-3);--g-grid-gutter-y:var(--g-space-3)}.g-md-gutter-x-3{--g-grid-gutter-x:var(--g-space-3)}.g-md-gutter-y-3{--g-grid-gutter-y:var(--g-space-3)}.g-md-gutter-4{--g-grid-gutter-x:var(--g-space-4);--g-grid-gutter-y:var(--g-space-4)}.g-md-gutter-x-4{--g-grid-gutter-x:var(--g-space-4)}.g-md-gutter-y-4{--g-grid-gutter-y:var(--g-space-4)}.g-md-gutter-5{--g-grid-gutter-x:var(--g-space-5);--g-grid-gutter-y:var(--g-space-5)}.g-md-gutter-x-5{--g-grid-gutter-x:var(--g-space-5)}.g-md-gutter-y-5{--g-grid-gutter-y:var(--g-space-5)}.g-md-gutter-6{--g-grid-gutter-x:var(--g-space-6);--g-grid-gutter-y:var(--g-space-6)}.g-md-gutter-x-6{--g-grid-gutter-x:var(--g-space-6)}.g-md-gutter-y-6{--g-grid-gutter-y:var(--g-space-6)}.g-md-gutter-8{--g-grid-gutter-x:var(--g-space-8);--g-grid-gutter-y:var(--g-space-8)}.g-md-gutter-x-8{--g-grid-gutter-x:var(--g-space-8)}.g-md-gutter-y-8{--g-grid-gutter-y:var(--g-space-8)}.g-md-gutter-10{--g-grid-gutter-x:var(--g-space-10);--g-grid-gutter-y:var(--g-space-10)}.g-md-gutter-x-10{--g-grid-gutter-x:var(--g-space-10)}.g-md-gutter-y-10{--g-grid-gutter-y:var(--g-space-10)}.g-md-gutter-12{--g-grid-gutter-x:var(--g-space-12);--g-grid-gutter-y:var(--g-space-12)}.g-md-gutter-x-12{--g-grid-gutter-x:var(--g-space-12)}.g-md-gutter-y-12{--g-grid-gutter-y:var(--g-space-12)}}
|
|
616
|
+
@media (min-width:1024px){.g-lg-col{grid-column:1/-1;min-inline-size:0}.g-lg-col-auto{grid-column:auto;min-inline-size:0}.g-lg-col-fill{grid-column:1/-1;min-inline-size:0}.g-lg-col-full{grid-column:1/-1;min-inline-size:0}.g-lg-col-hidden{display:none}.g-lg-col-visible{display:revert}.g-lg-offset-0{grid-column-start:auto}.g-lg-col-start-auto{grid-column-start:auto}.g-lg-col-end-auto{grid-column-end:auto}.g-lg-col-1{grid-column:span 1/span 1;min-inline-size:0}.g-lg-col-fill-from-1{grid-column:1/-1;min-inline-size:0}.g-lg-col-2{grid-column:span 2/span 2;min-inline-size:0}.g-lg-col-fill-from-2{grid-column:2/-1;min-inline-size:0}.g-lg-col-3{grid-column:span 3/span 3;min-inline-size:0}.g-lg-col-fill-from-3{grid-column:3/-1;min-inline-size:0}.g-lg-col-4{grid-column:span 4/span 4;min-inline-size:0}.g-lg-col-fill-from-4{grid-column:4/-1;min-inline-size:0}.g-lg-col-5{grid-column:span 5/span 5;min-inline-size:0}.g-lg-col-fill-from-5{grid-column:5/-1;min-inline-size:0}.g-lg-col-6{grid-column:span 6/span 6;min-inline-size:0}.g-lg-col-fill-from-6{grid-column:6/-1;min-inline-size:0}.g-lg-col-7{grid-column:span 7/span 7;min-inline-size:0}.g-lg-col-fill-from-7{grid-column:7/-1;min-inline-size:0}.g-lg-col-8{grid-column:span 8/span 8;min-inline-size:0}.g-lg-col-fill-from-8{grid-column:8/-1;min-inline-size:0}.g-lg-col-9{grid-column:span 9/span 9;min-inline-size:0}.g-lg-col-fill-from-9{grid-column:9/-1;min-inline-size:0}.g-lg-col-10{grid-column:span 10/span 10;min-inline-size:0}.g-lg-col-fill-from-10{grid-column:10/-1;min-inline-size:0}.g-lg-col-11{grid-column:span 11/span 11;min-inline-size:0}.g-lg-col-fill-from-11{grid-column:11/-1;min-inline-size:0}.g-lg-col-12{grid-column:span 12/span 12;min-inline-size:0}.g-lg-col-fill-from-12{grid-column:12/-1;min-inline-size:0}.g-lg-col-13{grid-column:span 13/span 13;min-inline-size:0}.g-lg-col-fill-from-13{grid-column:13/-1;min-inline-size:0}.g-lg-col-14{grid-column:span 14/span 14;min-inline-size:0}.g-lg-col-fill-from-14{grid-column:14/-1;min-inline-size:0}.g-lg-col-15{grid-column:span 15/span 15;min-inline-size:0}.g-lg-col-fill-from-15{grid-column:15/-1;min-inline-size:0}.g-lg-col-16{grid-column:span 16/span 16;min-inline-size:0}.g-lg-col-fill-from-16{grid-column:16/-1;min-inline-size:0}.g-lg-col-17{grid-column:span 17/span 17;min-inline-size:0}.g-lg-col-fill-from-17{grid-column:17/-1;min-inline-size:0}.g-lg-col-18{grid-column:span 18/span 18;min-inline-size:0}.g-lg-col-fill-from-18{grid-column:18/-1;min-inline-size:0}.g-lg-col-19{grid-column:span 19/span 19;min-inline-size:0}.g-lg-col-fill-from-19{grid-column:19/-1;min-inline-size:0}.g-lg-col-20{grid-column:span 20/span 20;min-inline-size:0}.g-lg-col-fill-from-20{grid-column:20/-1;min-inline-size:0}.g-lg-col-21{grid-column:span 21/span 21;min-inline-size:0}.g-lg-col-fill-from-21{grid-column:21/-1;min-inline-size:0}.g-lg-col-22{grid-column:span 22/span 22;min-inline-size:0}.g-lg-col-fill-from-22{grid-column:22/-1;min-inline-size:0}.g-lg-col-23{grid-column:span 23/span 23;min-inline-size:0}.g-lg-col-fill-from-23{grid-column:23/-1;min-inline-size:0}.g-lg-col-24{grid-column:span 24/span 24;min-inline-size:0}.g-lg-col-fill-from-24{grid-column:24/-1;min-inline-size:0}.g-lg-offset-1{grid-column-start:2}.g-lg-offset-2{grid-column-start:3}.g-lg-offset-3{grid-column-start:4}.g-lg-offset-4{grid-column-start:5}.g-lg-offset-5{grid-column-start:6}.g-lg-offset-6{grid-column-start:7}.g-lg-offset-7{grid-column-start:8}.g-lg-offset-8{grid-column-start:9}.g-lg-offset-9{grid-column-start:10}.g-lg-offset-10{grid-column-start:11}.g-lg-offset-11{grid-column-start:12}.g-lg-offset-12{grid-column-start:13}.g-lg-offset-13{grid-column-start:14}.g-lg-offset-14{grid-column-start:15}.g-lg-offset-15{grid-column-start:16}.g-lg-offset-16{grid-column-start:17}.g-lg-offset-17{grid-column-start:18}.g-lg-offset-18{grid-column-start:19}.g-lg-offset-19{grid-column-start:20}.g-lg-offset-20{grid-column-start:21}.g-lg-offset-21{grid-column-start:22}.g-lg-offset-22{grid-column-start:23}.g-lg-offset-23{grid-column-start:24}.g-lg-col-start-1{grid-column-start:1}.g-lg-col-end-1{grid-column-end:1}.g-lg-col-start-2{grid-column-start:2}.g-lg-col-end-2{grid-column-end:2}.g-lg-col-start-3{grid-column-start:3}.g-lg-col-end-3{grid-column-end:3}.g-lg-col-start-4{grid-column-start:4}.g-lg-col-end-4{grid-column-end:4}.g-lg-col-start-5{grid-column-start:5}.g-lg-col-end-5{grid-column-end:5}.g-lg-col-start-6{grid-column-start:6}.g-lg-col-end-6{grid-column-end:6}.g-lg-col-start-7{grid-column-start:7}.g-lg-col-end-7{grid-column-end:7}.g-lg-col-start-8{grid-column-start:8}.g-lg-col-end-8{grid-column-end:8}.g-lg-col-start-9{grid-column-start:9}.g-lg-col-end-9{grid-column-end:9}.g-lg-col-start-10{grid-column-start:10}.g-lg-col-end-10{grid-column-end:10}.g-lg-col-start-11{grid-column-start:11}.g-lg-col-end-11{grid-column-end:11}.g-lg-col-start-12{grid-column-start:12}.g-lg-col-end-12{grid-column-end:12}.g-lg-col-start-13{grid-column-start:13}.g-lg-col-end-13{grid-column-end:13}.g-lg-col-start-14{grid-column-start:14}.g-lg-col-end-14{grid-column-end:14}.g-lg-col-start-15{grid-column-start:15}.g-lg-col-end-15{grid-column-end:15}.g-lg-col-start-16{grid-column-start:16}.g-lg-col-end-16{grid-column-end:16}.g-lg-col-start-17{grid-column-start:17}.g-lg-col-end-17{grid-column-end:17}.g-lg-col-start-18{grid-column-start:18}.g-lg-col-end-18{grid-column-end:18}.g-lg-col-start-19{grid-column-start:19}.g-lg-col-end-19{grid-column-end:19}.g-lg-col-start-20{grid-column-start:20}.g-lg-col-end-20{grid-column-end:20}.g-lg-col-start-21{grid-column-start:21}.g-lg-col-end-21{grid-column-end:21}.g-lg-col-start-22{grid-column-start:22}.g-lg-col-end-22{grid-column-end:22}.g-lg-col-start-23{grid-column-start:23}.g-lg-col-end-23{grid-column-end:23}.g-lg-col-start-24{grid-column-start:24}.g-lg-col-end-24{grid-column-end:24}.g-lg-col-start-25{grid-column-start:25}.g-lg-col-end-25{grid-column-end:25}.g-lg-gutter-0{--g-grid-gutter-x:var(--g-space-0);--g-grid-gutter-y:var(--g-space-0)}.g-lg-gutter-x-0{--g-grid-gutter-x:var(--g-space-0)}.g-lg-gutter-y-0{--g-grid-gutter-y:var(--g-space-0)}.g-lg-gutter-1{--g-grid-gutter-x:var(--g-space-1);--g-grid-gutter-y:var(--g-space-1)}.g-lg-gutter-x-1{--g-grid-gutter-x:var(--g-space-1)}.g-lg-gutter-y-1{--g-grid-gutter-y:var(--g-space-1)}.g-lg-gutter-2{--g-grid-gutter-x:var(--g-space-2);--g-grid-gutter-y:var(--g-space-2)}.g-lg-gutter-x-2{--g-grid-gutter-x:var(--g-space-2)}.g-lg-gutter-y-2{--g-grid-gutter-y:var(--g-space-2)}.g-lg-gutter-3{--g-grid-gutter-x:var(--g-space-3);--g-grid-gutter-y:var(--g-space-3)}.g-lg-gutter-x-3{--g-grid-gutter-x:var(--g-space-3)}.g-lg-gutter-y-3{--g-grid-gutter-y:var(--g-space-3)}.g-lg-gutter-4{--g-grid-gutter-x:var(--g-space-4);--g-grid-gutter-y:var(--g-space-4)}.g-lg-gutter-x-4{--g-grid-gutter-x:var(--g-space-4)}.g-lg-gutter-y-4{--g-grid-gutter-y:var(--g-space-4)}.g-lg-gutter-5{--g-grid-gutter-x:var(--g-space-5);--g-grid-gutter-y:var(--g-space-5)}.g-lg-gutter-x-5{--g-grid-gutter-x:var(--g-space-5)}.g-lg-gutter-y-5{--g-grid-gutter-y:var(--g-space-5)}.g-lg-gutter-6{--g-grid-gutter-x:var(--g-space-6);--g-grid-gutter-y:var(--g-space-6)}.g-lg-gutter-x-6{--g-grid-gutter-x:var(--g-space-6)}.g-lg-gutter-y-6{--g-grid-gutter-y:var(--g-space-6)}.g-lg-gutter-8{--g-grid-gutter-x:var(--g-space-8);--g-grid-gutter-y:var(--g-space-8)}.g-lg-gutter-x-8{--g-grid-gutter-x:var(--g-space-8)}.g-lg-gutter-y-8{--g-grid-gutter-y:var(--g-space-8)}.g-lg-gutter-10{--g-grid-gutter-x:var(--g-space-10);--g-grid-gutter-y:var(--g-space-10)}.g-lg-gutter-x-10{--g-grid-gutter-x:var(--g-space-10)}.g-lg-gutter-y-10{--g-grid-gutter-y:var(--g-space-10)}.g-lg-gutter-12{--g-grid-gutter-x:var(--g-space-12);--g-grid-gutter-y:var(--g-space-12)}.g-lg-gutter-x-12{--g-grid-gutter-x:var(--g-space-12)}.g-lg-gutter-y-12{--g-grid-gutter-y:var(--g-space-12)}}
|
|
617
|
+
@media (min-width:1280px){.g-xl-col{grid-column:1/-1;min-inline-size:0}.g-xl-col-auto{grid-column:auto;min-inline-size:0}.g-xl-col-fill{grid-column:1/-1;min-inline-size:0}.g-xl-col-full{grid-column:1/-1;min-inline-size:0}.g-xl-col-hidden{display:none}.g-xl-col-visible{display:revert}.g-xl-offset-0{grid-column-start:auto}.g-xl-col-start-auto{grid-column-start:auto}.g-xl-col-end-auto{grid-column-end:auto}.g-xl-col-1{grid-column:span 1/span 1;min-inline-size:0}.g-xl-col-fill-from-1{grid-column:1/-1;min-inline-size:0}.g-xl-col-2{grid-column:span 2/span 2;min-inline-size:0}.g-xl-col-fill-from-2{grid-column:2/-1;min-inline-size:0}.g-xl-col-3{grid-column:span 3/span 3;min-inline-size:0}.g-xl-col-fill-from-3{grid-column:3/-1;min-inline-size:0}.g-xl-col-4{grid-column:span 4/span 4;min-inline-size:0}.g-xl-col-fill-from-4{grid-column:4/-1;min-inline-size:0}.g-xl-col-5{grid-column:span 5/span 5;min-inline-size:0}.g-xl-col-fill-from-5{grid-column:5/-1;min-inline-size:0}.g-xl-col-6{grid-column:span 6/span 6;min-inline-size:0}.g-xl-col-fill-from-6{grid-column:6/-1;min-inline-size:0}.g-xl-col-7{grid-column:span 7/span 7;min-inline-size:0}.g-xl-col-fill-from-7{grid-column:7/-1;min-inline-size:0}.g-xl-col-8{grid-column:span 8/span 8;min-inline-size:0}.g-xl-col-fill-from-8{grid-column:8/-1;min-inline-size:0}.g-xl-col-9{grid-column:span 9/span 9;min-inline-size:0}.g-xl-col-fill-from-9{grid-column:9/-1;min-inline-size:0}.g-xl-col-10{grid-column:span 10/span 10;min-inline-size:0}.g-xl-col-fill-from-10{grid-column:10/-1;min-inline-size:0}.g-xl-col-11{grid-column:span 11/span 11;min-inline-size:0}.g-xl-col-fill-from-11{grid-column:11/-1;min-inline-size:0}.g-xl-col-12{grid-column:span 12/span 12;min-inline-size:0}.g-xl-col-fill-from-12{grid-column:12/-1;min-inline-size:0}.g-xl-col-13{grid-column:span 13/span 13;min-inline-size:0}.g-xl-col-fill-from-13{grid-column:13/-1;min-inline-size:0}.g-xl-col-14{grid-column:span 14/span 14;min-inline-size:0}.g-xl-col-fill-from-14{grid-column:14/-1;min-inline-size:0}.g-xl-col-15{grid-column:span 15/span 15;min-inline-size:0}.g-xl-col-fill-from-15{grid-column:15/-1;min-inline-size:0}.g-xl-col-16{grid-column:span 16/span 16;min-inline-size:0}.g-xl-col-fill-from-16{grid-column:16/-1;min-inline-size:0}.g-xl-col-17{grid-column:span 17/span 17;min-inline-size:0}.g-xl-col-fill-from-17{grid-column:17/-1;min-inline-size:0}.g-xl-col-18{grid-column:span 18/span 18;min-inline-size:0}.g-xl-col-fill-from-18{grid-column:18/-1;min-inline-size:0}.g-xl-col-19{grid-column:span 19/span 19;min-inline-size:0}.g-xl-col-fill-from-19{grid-column:19/-1;min-inline-size:0}.g-xl-col-20{grid-column:span 20/span 20;min-inline-size:0}.g-xl-col-fill-from-20{grid-column:20/-1;min-inline-size:0}.g-xl-col-21{grid-column:span 21/span 21;min-inline-size:0}.g-xl-col-fill-from-21{grid-column:21/-1;min-inline-size:0}.g-xl-col-22{grid-column:span 22/span 22;min-inline-size:0}.g-xl-col-fill-from-22{grid-column:22/-1;min-inline-size:0}.g-xl-col-23{grid-column:span 23/span 23;min-inline-size:0}.g-xl-col-fill-from-23{grid-column:23/-1;min-inline-size:0}.g-xl-col-24{grid-column:span 24/span 24;min-inline-size:0}.g-xl-col-fill-from-24{grid-column:24/-1;min-inline-size:0}.g-xl-offset-1{grid-column-start:2}.g-xl-offset-2{grid-column-start:3}.g-xl-offset-3{grid-column-start:4}.g-xl-offset-4{grid-column-start:5}.g-xl-offset-5{grid-column-start:6}.g-xl-offset-6{grid-column-start:7}.g-xl-offset-7{grid-column-start:8}.g-xl-offset-8{grid-column-start:9}.g-xl-offset-9{grid-column-start:10}.g-xl-offset-10{grid-column-start:11}.g-xl-offset-11{grid-column-start:12}.g-xl-offset-12{grid-column-start:13}.g-xl-offset-13{grid-column-start:14}.g-xl-offset-14{grid-column-start:15}.g-xl-offset-15{grid-column-start:16}.g-xl-offset-16{grid-column-start:17}.g-xl-offset-17{grid-column-start:18}.g-xl-offset-18{grid-column-start:19}.g-xl-offset-19{grid-column-start:20}.g-xl-offset-20{grid-column-start:21}.g-xl-offset-21{grid-column-start:22}.g-xl-offset-22{grid-column-start:23}.g-xl-offset-23{grid-column-start:24}.g-xl-col-start-1{grid-column-start:1}.g-xl-col-end-1{grid-column-end:1}.g-xl-col-start-2{grid-column-start:2}.g-xl-col-end-2{grid-column-end:2}.g-xl-col-start-3{grid-column-start:3}.g-xl-col-end-3{grid-column-end:3}.g-xl-col-start-4{grid-column-start:4}.g-xl-col-end-4{grid-column-end:4}.g-xl-col-start-5{grid-column-start:5}.g-xl-col-end-5{grid-column-end:5}.g-xl-col-start-6{grid-column-start:6}.g-xl-col-end-6{grid-column-end:6}.g-xl-col-start-7{grid-column-start:7}.g-xl-col-end-7{grid-column-end:7}.g-xl-col-start-8{grid-column-start:8}.g-xl-col-end-8{grid-column-end:8}.g-xl-col-start-9{grid-column-start:9}.g-xl-col-end-9{grid-column-end:9}.g-xl-col-start-10{grid-column-start:10}.g-xl-col-end-10{grid-column-end:10}.g-xl-col-start-11{grid-column-start:11}.g-xl-col-end-11{grid-column-end:11}.g-xl-col-start-12{grid-column-start:12}.g-xl-col-end-12{grid-column-end:12}.g-xl-col-start-13{grid-column-start:13}.g-xl-col-end-13{grid-column-end:13}.g-xl-col-start-14{grid-column-start:14}.g-xl-col-end-14{grid-column-end:14}.g-xl-col-start-15{grid-column-start:15}.g-xl-col-end-15{grid-column-end:15}.g-xl-col-start-16{grid-column-start:16}.g-xl-col-end-16{grid-column-end:16}.g-xl-col-start-17{grid-column-start:17}.g-xl-col-end-17{grid-column-end:17}.g-xl-col-start-18{grid-column-start:18}.g-xl-col-end-18{grid-column-end:18}.g-xl-col-start-19{grid-column-start:19}.g-xl-col-end-19{grid-column-end:19}.g-xl-col-start-20{grid-column-start:20}.g-xl-col-end-20{grid-column-end:20}.g-xl-col-start-21{grid-column-start:21}.g-xl-col-end-21{grid-column-end:21}.g-xl-col-start-22{grid-column-start:22}.g-xl-col-end-22{grid-column-end:22}.g-xl-col-start-23{grid-column-start:23}.g-xl-col-end-23{grid-column-end:23}.g-xl-col-start-24{grid-column-start:24}.g-xl-col-end-24{grid-column-end:24}.g-xl-col-start-25{grid-column-start:25}.g-xl-col-end-25{grid-column-end:25}.g-xl-gutter-0{--g-grid-gutter-x:var(--g-space-0);--g-grid-gutter-y:var(--g-space-0)}.g-xl-gutter-x-0{--g-grid-gutter-x:var(--g-space-0)}.g-xl-gutter-y-0{--g-grid-gutter-y:var(--g-space-0)}.g-xl-gutter-1{--g-grid-gutter-x:var(--g-space-1);--g-grid-gutter-y:var(--g-space-1)}.g-xl-gutter-x-1{--g-grid-gutter-x:var(--g-space-1)}.g-xl-gutter-y-1{--g-grid-gutter-y:var(--g-space-1)}.g-xl-gutter-2{--g-grid-gutter-x:var(--g-space-2);--g-grid-gutter-y:var(--g-space-2)}.g-xl-gutter-x-2{--g-grid-gutter-x:var(--g-space-2)}.g-xl-gutter-y-2{--g-grid-gutter-y:var(--g-space-2)}.g-xl-gutter-3{--g-grid-gutter-x:var(--g-space-3);--g-grid-gutter-y:var(--g-space-3)}.g-xl-gutter-x-3{--g-grid-gutter-x:var(--g-space-3)}.g-xl-gutter-y-3{--g-grid-gutter-y:var(--g-space-3)}.g-xl-gutter-4{--g-grid-gutter-x:var(--g-space-4);--g-grid-gutter-y:var(--g-space-4)}.g-xl-gutter-x-4{--g-grid-gutter-x:var(--g-space-4)}.g-xl-gutter-y-4{--g-grid-gutter-y:var(--g-space-4)}.g-xl-gutter-5{--g-grid-gutter-x:var(--g-space-5);--g-grid-gutter-y:var(--g-space-5)}.g-xl-gutter-x-5{--g-grid-gutter-x:var(--g-space-5)}.g-xl-gutter-y-5{--g-grid-gutter-y:var(--g-space-5)}.g-xl-gutter-6{--g-grid-gutter-x:var(--g-space-6);--g-grid-gutter-y:var(--g-space-6)}.g-xl-gutter-x-6{--g-grid-gutter-x:var(--g-space-6)}.g-xl-gutter-y-6{--g-grid-gutter-y:var(--g-space-6)}.g-xl-gutter-8{--g-grid-gutter-x:var(--g-space-8);--g-grid-gutter-y:var(--g-space-8)}.g-xl-gutter-x-8{--g-grid-gutter-x:var(--g-space-8)}.g-xl-gutter-y-8{--g-grid-gutter-y:var(--g-space-8)}.g-xl-gutter-10{--g-grid-gutter-x:var(--g-space-10);--g-grid-gutter-y:var(--g-space-10)}.g-xl-gutter-x-10{--g-grid-gutter-x:var(--g-space-10)}.g-xl-gutter-y-10{--g-grid-gutter-y:var(--g-space-10)}.g-xl-gutter-12{--g-grid-gutter-x:var(--g-space-12);--g-grid-gutter-y:var(--g-space-12)}.g-xl-gutter-x-12{--g-grid-gutter-x:var(--g-space-12)}.g-xl-gutter-y-12{--g-grid-gutter-y:var(--g-space-12)}}
|
|
618
|
+
@media (min-width:1536px){.g-2xl-col{grid-column:1/-1;min-inline-size:0}.g-2xl-col-auto{grid-column:auto;min-inline-size:0}.g-2xl-col-fill{grid-column:1/-1;min-inline-size:0}.g-2xl-col-full{grid-column:1/-1;min-inline-size:0}.g-2xl-col-hidden{display:none}.g-2xl-col-visible{display:revert}.g-2xl-offset-0{grid-column-start:auto}.g-2xl-col-start-auto{grid-column-start:auto}.g-2xl-col-end-auto{grid-column-end:auto}.g-2xl-col-1{grid-column:span 1/span 1;min-inline-size:0}.g-2xl-col-fill-from-1{grid-column:1/-1;min-inline-size:0}.g-2xl-col-2{grid-column:span 2/span 2;min-inline-size:0}.g-2xl-col-fill-from-2{grid-column:2/-1;min-inline-size:0}.g-2xl-col-3{grid-column:span 3/span 3;min-inline-size:0}.g-2xl-col-fill-from-3{grid-column:3/-1;min-inline-size:0}.g-2xl-col-4{grid-column:span 4/span 4;min-inline-size:0}.g-2xl-col-fill-from-4{grid-column:4/-1;min-inline-size:0}.g-2xl-col-5{grid-column:span 5/span 5;min-inline-size:0}.g-2xl-col-fill-from-5{grid-column:5/-1;min-inline-size:0}.g-2xl-col-6{grid-column:span 6/span 6;min-inline-size:0}.g-2xl-col-fill-from-6{grid-column:6/-1;min-inline-size:0}.g-2xl-col-7{grid-column:span 7/span 7;min-inline-size:0}.g-2xl-col-fill-from-7{grid-column:7/-1;min-inline-size:0}.g-2xl-col-8{grid-column:span 8/span 8;min-inline-size:0}.g-2xl-col-fill-from-8{grid-column:8/-1;min-inline-size:0}.g-2xl-col-9{grid-column:span 9/span 9;min-inline-size:0}.g-2xl-col-fill-from-9{grid-column:9/-1;min-inline-size:0}.g-2xl-col-10{grid-column:span 10/span 10;min-inline-size:0}.g-2xl-col-fill-from-10{grid-column:10/-1;min-inline-size:0}.g-2xl-col-11{grid-column:span 11/span 11;min-inline-size:0}.g-2xl-col-fill-from-11{grid-column:11/-1;min-inline-size:0}.g-2xl-col-12{grid-column:span 12/span 12;min-inline-size:0}.g-2xl-col-fill-from-12{grid-column:12/-1;min-inline-size:0}.g-2xl-col-13{grid-column:span 13/span 13;min-inline-size:0}.g-2xl-col-fill-from-13{grid-column:13/-1;min-inline-size:0}.g-2xl-col-14{grid-column:span 14/span 14;min-inline-size:0}.g-2xl-col-fill-from-14{grid-column:14/-1;min-inline-size:0}.g-2xl-col-15{grid-column:span 15/span 15;min-inline-size:0}.g-2xl-col-fill-from-15{grid-column:15/-1;min-inline-size:0}.g-2xl-col-16{grid-column:span 16/span 16;min-inline-size:0}.g-2xl-col-fill-from-16{grid-column:16/-1;min-inline-size:0}.g-2xl-col-17{grid-column:span 17/span 17;min-inline-size:0}.g-2xl-col-fill-from-17{grid-column:17/-1;min-inline-size:0}.g-2xl-col-18{grid-column:span 18/span 18;min-inline-size:0}.g-2xl-col-fill-from-18{grid-column:18/-1;min-inline-size:0}.g-2xl-col-19{grid-column:span 19/span 19;min-inline-size:0}.g-2xl-col-fill-from-19{grid-column:19/-1;min-inline-size:0}.g-2xl-col-20{grid-column:span 20/span 20;min-inline-size:0}.g-2xl-col-fill-from-20{grid-column:20/-1;min-inline-size:0}.g-2xl-col-21{grid-column:span 21/span 21;min-inline-size:0}.g-2xl-col-fill-from-21{grid-column:21/-1;min-inline-size:0}.g-2xl-col-22{grid-column:span 22/span 22;min-inline-size:0}.g-2xl-col-fill-from-22{grid-column:22/-1;min-inline-size:0}.g-2xl-col-23{grid-column:span 23/span 23;min-inline-size:0}.g-2xl-col-fill-from-23{grid-column:23/-1;min-inline-size:0}.g-2xl-col-24{grid-column:span 24/span 24;min-inline-size:0}.g-2xl-col-fill-from-24{grid-column:24/-1;min-inline-size:0}.g-2xl-offset-1{grid-column-start:2}.g-2xl-offset-2{grid-column-start:3}.g-2xl-offset-3{grid-column-start:4}.g-2xl-offset-4{grid-column-start:5}.g-2xl-offset-5{grid-column-start:6}.g-2xl-offset-6{grid-column-start:7}.g-2xl-offset-7{grid-column-start:8}.g-2xl-offset-8{grid-column-start:9}.g-2xl-offset-9{grid-column-start:10}.g-2xl-offset-10{grid-column-start:11}.g-2xl-offset-11{grid-column-start:12}.g-2xl-offset-12{grid-column-start:13}.g-2xl-offset-13{grid-column-start:14}.g-2xl-offset-14{grid-column-start:15}.g-2xl-offset-15{grid-column-start:16}.g-2xl-offset-16{grid-column-start:17}.g-2xl-offset-17{grid-column-start:18}.g-2xl-offset-18{grid-column-start:19}.g-2xl-offset-19{grid-column-start:20}.g-2xl-offset-20{grid-column-start:21}.g-2xl-offset-21{grid-column-start:22}.g-2xl-offset-22{grid-column-start:23}.g-2xl-offset-23{grid-column-start:24}.g-2xl-col-start-1{grid-column-start:1}.g-2xl-col-end-1{grid-column-end:1}.g-2xl-col-start-2{grid-column-start:2}.g-2xl-col-end-2{grid-column-end:2}.g-2xl-col-start-3{grid-column-start:3}.g-2xl-col-end-3{grid-column-end:3}.g-2xl-col-start-4{grid-column-start:4}.g-2xl-col-end-4{grid-column-end:4}.g-2xl-col-start-5{grid-column-start:5}.g-2xl-col-end-5{grid-column-end:5}.g-2xl-col-start-6{grid-column-start:6}.g-2xl-col-end-6{grid-column-end:6}.g-2xl-col-start-7{grid-column-start:7}.g-2xl-col-end-7{grid-column-end:7}.g-2xl-col-start-8{grid-column-start:8}.g-2xl-col-end-8{grid-column-end:8}.g-2xl-col-start-9{grid-column-start:9}.g-2xl-col-end-9{grid-column-end:9}.g-2xl-col-start-10{grid-column-start:10}.g-2xl-col-end-10{grid-column-end:10}.g-2xl-col-start-11{grid-column-start:11}.g-2xl-col-end-11{grid-column-end:11}.g-2xl-col-start-12{grid-column-start:12}.g-2xl-col-end-12{grid-column-end:12}.g-2xl-col-start-13{grid-column-start:13}.g-2xl-col-end-13{grid-column-end:13}.g-2xl-col-start-14{grid-column-start:14}.g-2xl-col-end-14{grid-column-end:14}.g-2xl-col-start-15{grid-column-start:15}.g-2xl-col-end-15{grid-column-end:15}.g-2xl-col-start-16{grid-column-start:16}.g-2xl-col-end-16{grid-column-end:16}.g-2xl-col-start-17{grid-column-start:17}.g-2xl-col-end-17{grid-column-end:17}.g-2xl-col-start-18{grid-column-start:18}.g-2xl-col-end-18{grid-column-end:18}.g-2xl-col-start-19{grid-column-start:19}.g-2xl-col-end-19{grid-column-end:19}.g-2xl-col-start-20{grid-column-start:20}.g-2xl-col-end-20{grid-column-end:20}.g-2xl-col-start-21{grid-column-start:21}.g-2xl-col-end-21{grid-column-end:21}.g-2xl-col-start-22{grid-column-start:22}.g-2xl-col-end-22{grid-column-end:22}.g-2xl-col-start-23{grid-column-start:23}.g-2xl-col-end-23{grid-column-end:23}.g-2xl-col-start-24{grid-column-start:24}.g-2xl-col-end-24{grid-column-end:24}.g-2xl-col-start-25{grid-column-start:25}.g-2xl-col-end-25{grid-column-end:25}.g-2xl-gutter-0{--g-grid-gutter-x:var(--g-space-0);--g-grid-gutter-y:var(--g-space-0)}.g-2xl-gutter-x-0{--g-grid-gutter-x:var(--g-space-0)}.g-2xl-gutter-y-0{--g-grid-gutter-y:var(--g-space-0)}.g-2xl-gutter-1{--g-grid-gutter-x:var(--g-space-1);--g-grid-gutter-y:var(--g-space-1)}.g-2xl-gutter-x-1{--g-grid-gutter-x:var(--g-space-1)}.g-2xl-gutter-y-1{--g-grid-gutter-y:var(--g-space-1)}.g-2xl-gutter-2{--g-grid-gutter-x:var(--g-space-2);--g-grid-gutter-y:var(--g-space-2)}.g-2xl-gutter-x-2{--g-grid-gutter-x:var(--g-space-2)}.g-2xl-gutter-y-2{--g-grid-gutter-y:var(--g-space-2)}.g-2xl-gutter-3{--g-grid-gutter-x:var(--g-space-3);--g-grid-gutter-y:var(--g-space-3)}.g-2xl-gutter-x-3{--g-grid-gutter-x:var(--g-space-3)}.g-2xl-gutter-y-3{--g-grid-gutter-y:var(--g-space-3)}.g-2xl-gutter-4{--g-grid-gutter-x:var(--g-space-4);--g-grid-gutter-y:var(--g-space-4)}.g-2xl-gutter-x-4{--g-grid-gutter-x:var(--g-space-4)}.g-2xl-gutter-y-4{--g-grid-gutter-y:var(--g-space-4)}.g-2xl-gutter-5{--g-grid-gutter-x:var(--g-space-5);--g-grid-gutter-y:var(--g-space-5)}.g-2xl-gutter-x-5{--g-grid-gutter-x:var(--g-space-5)}.g-2xl-gutter-y-5{--g-grid-gutter-y:var(--g-space-5)}.g-2xl-gutter-6{--g-grid-gutter-x:var(--g-space-6);--g-grid-gutter-y:var(--g-space-6)}.g-2xl-gutter-x-6{--g-grid-gutter-x:var(--g-space-6)}.g-2xl-gutter-y-6{--g-grid-gutter-y:var(--g-space-6)}.g-2xl-gutter-8{--g-grid-gutter-x:var(--g-space-8);--g-grid-gutter-y:var(--g-space-8)}.g-2xl-gutter-x-8{--g-grid-gutter-x:var(--g-space-8)}.g-2xl-gutter-y-8{--g-grid-gutter-y:var(--g-space-8)}.g-2xl-gutter-10{--g-grid-gutter-x:var(--g-space-10);--g-grid-gutter-y:var(--g-space-10)}.g-2xl-gutter-x-10{--g-grid-gutter-x:var(--g-space-10)}.g-2xl-gutter-y-10{--g-grid-gutter-y:var(--g-space-10)}.g-2xl-gutter-12{--g-grid-gutter-x:var(--g-space-12);--g-grid-gutter-y:var(--g-space-12)}.g-2xl-gutter-x-12{--g-grid-gutter-x:var(--g-space-12)}.g-2xl-gutter-y-12{--g-grid-gutter-y:var(--g-space-12)}}
|
|
619
|
+
@container g-grid (min-width:480px){.g-cq-sm-col{grid-column:1/-1;min-inline-size:0}.g-cq-sm-col-auto{grid-column:auto;min-inline-size:0}.g-cq-sm-col-fill{grid-column:1/-1;min-inline-size:0}.g-cq-sm-col-full{grid-column:1/-1;min-inline-size:0}.g-cq-sm-col-hidden{display:none}.g-cq-sm-col-visible{display:revert}.g-cq-sm-offset-0{grid-column-start:auto}.g-cq-sm-col-start-auto{grid-column-start:auto}.g-cq-sm-col-end-auto{grid-column-end:auto}.g-cq-sm-col-1{grid-column:span 1/span 1;min-inline-size:0}.g-cq-sm-col-fill-from-1{grid-column:1/-1;min-inline-size:0}.g-cq-sm-col-2{grid-column:span 2/span 2;min-inline-size:0}.g-cq-sm-col-fill-from-2{grid-column:2/-1;min-inline-size:0}.g-cq-sm-col-3{grid-column:span 3/span 3;min-inline-size:0}.g-cq-sm-col-fill-from-3{grid-column:3/-1;min-inline-size:0}.g-cq-sm-col-4{grid-column:span 4/span 4;min-inline-size:0}.g-cq-sm-col-fill-from-4{grid-column:4/-1;min-inline-size:0}.g-cq-sm-col-5{grid-column:span 5/span 5;min-inline-size:0}.g-cq-sm-col-fill-from-5{grid-column:5/-1;min-inline-size:0}.g-cq-sm-col-6{grid-column:span 6/span 6;min-inline-size:0}.g-cq-sm-col-fill-from-6{grid-column:6/-1;min-inline-size:0}.g-cq-sm-col-7{grid-column:span 7/span 7;min-inline-size:0}.g-cq-sm-col-fill-from-7{grid-column:7/-1;min-inline-size:0}.g-cq-sm-col-8{grid-column:span 8/span 8;min-inline-size:0}.g-cq-sm-col-fill-from-8{grid-column:8/-1;min-inline-size:0}.g-cq-sm-col-9{grid-column:span 9/span 9;min-inline-size:0}.g-cq-sm-col-fill-from-9{grid-column:9/-1;min-inline-size:0}.g-cq-sm-col-10{grid-column:span 10/span 10;min-inline-size:0}.g-cq-sm-col-fill-from-10{grid-column:10/-1;min-inline-size:0}.g-cq-sm-col-11{grid-column:span 11/span 11;min-inline-size:0}.g-cq-sm-col-fill-from-11{grid-column:11/-1;min-inline-size:0}.g-cq-sm-col-12{grid-column:span 12/span 12;min-inline-size:0}.g-cq-sm-col-fill-from-12{grid-column:12/-1;min-inline-size:0}.g-cq-sm-col-13{grid-column:span 13/span 13;min-inline-size:0}.g-cq-sm-col-fill-from-13{grid-column:13/-1;min-inline-size:0}.g-cq-sm-col-14{grid-column:span 14/span 14;min-inline-size:0}.g-cq-sm-col-fill-from-14{grid-column:14/-1;min-inline-size:0}.g-cq-sm-col-15{grid-column:span 15/span 15;min-inline-size:0}.g-cq-sm-col-fill-from-15{grid-column:15/-1;min-inline-size:0}.g-cq-sm-col-16{grid-column:span 16/span 16;min-inline-size:0}.g-cq-sm-col-fill-from-16{grid-column:16/-1;min-inline-size:0}.g-cq-sm-col-17{grid-column:span 17/span 17;min-inline-size:0}.g-cq-sm-col-fill-from-17{grid-column:17/-1;min-inline-size:0}.g-cq-sm-col-18{grid-column:span 18/span 18;min-inline-size:0}.g-cq-sm-col-fill-from-18{grid-column:18/-1;min-inline-size:0}.g-cq-sm-col-19{grid-column:span 19/span 19;min-inline-size:0}.g-cq-sm-col-fill-from-19{grid-column:19/-1;min-inline-size:0}.g-cq-sm-col-20{grid-column:span 20/span 20;min-inline-size:0}.g-cq-sm-col-fill-from-20{grid-column:20/-1;min-inline-size:0}.g-cq-sm-col-21{grid-column:span 21/span 21;min-inline-size:0}.g-cq-sm-col-fill-from-21{grid-column:21/-1;min-inline-size:0}.g-cq-sm-col-22{grid-column:span 22/span 22;min-inline-size:0}.g-cq-sm-col-fill-from-22{grid-column:22/-1;min-inline-size:0}.g-cq-sm-col-23{grid-column:span 23/span 23;min-inline-size:0}.g-cq-sm-col-fill-from-23{grid-column:23/-1;min-inline-size:0}.g-cq-sm-col-24{grid-column:span 24/span 24;min-inline-size:0}.g-cq-sm-col-fill-from-24{grid-column:24/-1;min-inline-size:0}.g-cq-sm-offset-1{grid-column-start:2}.g-cq-sm-offset-2{grid-column-start:3}.g-cq-sm-offset-3{grid-column-start:4}.g-cq-sm-offset-4{grid-column-start:5}.g-cq-sm-offset-5{grid-column-start:6}.g-cq-sm-offset-6{grid-column-start:7}.g-cq-sm-offset-7{grid-column-start:8}.g-cq-sm-offset-8{grid-column-start:9}.g-cq-sm-offset-9{grid-column-start:10}.g-cq-sm-offset-10{grid-column-start:11}.g-cq-sm-offset-11{grid-column-start:12}.g-cq-sm-offset-12{grid-column-start:13}.g-cq-sm-offset-13{grid-column-start:14}.g-cq-sm-offset-14{grid-column-start:15}.g-cq-sm-offset-15{grid-column-start:16}.g-cq-sm-offset-16{grid-column-start:17}.g-cq-sm-offset-17{grid-column-start:18}.g-cq-sm-offset-18{grid-column-start:19}.g-cq-sm-offset-19{grid-column-start:20}.g-cq-sm-offset-20{grid-column-start:21}.g-cq-sm-offset-21{grid-column-start:22}.g-cq-sm-offset-22{grid-column-start:23}.g-cq-sm-offset-23{grid-column-start:24}.g-cq-sm-col-start-1{grid-column-start:1}.g-cq-sm-col-end-1{grid-column-end:1}.g-cq-sm-col-start-2{grid-column-start:2}.g-cq-sm-col-end-2{grid-column-end:2}.g-cq-sm-col-start-3{grid-column-start:3}.g-cq-sm-col-end-3{grid-column-end:3}.g-cq-sm-col-start-4{grid-column-start:4}.g-cq-sm-col-end-4{grid-column-end:4}.g-cq-sm-col-start-5{grid-column-start:5}.g-cq-sm-col-end-5{grid-column-end:5}.g-cq-sm-col-start-6{grid-column-start:6}.g-cq-sm-col-end-6{grid-column-end:6}.g-cq-sm-col-start-7{grid-column-start:7}.g-cq-sm-col-end-7{grid-column-end:7}.g-cq-sm-col-start-8{grid-column-start:8}.g-cq-sm-col-end-8{grid-column-end:8}.g-cq-sm-col-start-9{grid-column-start:9}.g-cq-sm-col-end-9{grid-column-end:9}.g-cq-sm-col-start-10{grid-column-start:10}.g-cq-sm-col-end-10{grid-column-end:10}.g-cq-sm-col-start-11{grid-column-start:11}.g-cq-sm-col-end-11{grid-column-end:11}.g-cq-sm-col-start-12{grid-column-start:12}.g-cq-sm-col-end-12{grid-column-end:12}.g-cq-sm-col-start-13{grid-column-start:13}.g-cq-sm-col-end-13{grid-column-end:13}.g-cq-sm-col-start-14{grid-column-start:14}.g-cq-sm-col-end-14{grid-column-end:14}.g-cq-sm-col-start-15{grid-column-start:15}.g-cq-sm-col-end-15{grid-column-end:15}.g-cq-sm-col-start-16{grid-column-start:16}.g-cq-sm-col-end-16{grid-column-end:16}.g-cq-sm-col-start-17{grid-column-start:17}.g-cq-sm-col-end-17{grid-column-end:17}.g-cq-sm-col-start-18{grid-column-start:18}.g-cq-sm-col-end-18{grid-column-end:18}.g-cq-sm-col-start-19{grid-column-start:19}.g-cq-sm-col-end-19{grid-column-end:19}.g-cq-sm-col-start-20{grid-column-start:20}.g-cq-sm-col-end-20{grid-column-end:20}.g-cq-sm-col-start-21{grid-column-start:21}.g-cq-sm-col-end-21{grid-column-end:21}.g-cq-sm-col-start-22{grid-column-start:22}.g-cq-sm-col-end-22{grid-column-end:22}.g-cq-sm-col-start-23{grid-column-start:23}.g-cq-sm-col-end-23{grid-column-end:23}.g-cq-sm-col-start-24{grid-column-start:24}.g-cq-sm-col-end-24{grid-column-end:24}.g-cq-sm-col-start-25{grid-column-start:25}.g-cq-sm-col-end-25{grid-column-end:25}}
|
|
620
|
+
@container g-grid (min-width:768px){.g-cq-md-col{grid-column:1/-1;min-inline-size:0}.g-cq-md-col-auto{grid-column:auto;min-inline-size:0}.g-cq-md-col-fill{grid-column:1/-1;min-inline-size:0}.g-cq-md-col-full{grid-column:1/-1;min-inline-size:0}.g-cq-md-col-hidden{display:none}.g-cq-md-col-visible{display:revert}.g-cq-md-offset-0{grid-column-start:auto}.g-cq-md-col-start-auto{grid-column-start:auto}.g-cq-md-col-end-auto{grid-column-end:auto}.g-cq-md-col-1{grid-column:span 1/span 1;min-inline-size:0}.g-cq-md-col-fill-from-1{grid-column:1/-1;min-inline-size:0}.g-cq-md-col-2{grid-column:span 2/span 2;min-inline-size:0}.g-cq-md-col-fill-from-2{grid-column:2/-1;min-inline-size:0}.g-cq-md-col-3{grid-column:span 3/span 3;min-inline-size:0}.g-cq-md-col-fill-from-3{grid-column:3/-1;min-inline-size:0}.g-cq-md-col-4{grid-column:span 4/span 4;min-inline-size:0}.g-cq-md-col-fill-from-4{grid-column:4/-1;min-inline-size:0}.g-cq-md-col-5{grid-column:span 5/span 5;min-inline-size:0}.g-cq-md-col-fill-from-5{grid-column:5/-1;min-inline-size:0}.g-cq-md-col-6{grid-column:span 6/span 6;min-inline-size:0}.g-cq-md-col-fill-from-6{grid-column:6/-1;min-inline-size:0}.g-cq-md-col-7{grid-column:span 7/span 7;min-inline-size:0}.g-cq-md-col-fill-from-7{grid-column:7/-1;min-inline-size:0}.g-cq-md-col-8{grid-column:span 8/span 8;min-inline-size:0}.g-cq-md-col-fill-from-8{grid-column:8/-1;min-inline-size:0}.g-cq-md-col-9{grid-column:span 9/span 9;min-inline-size:0}.g-cq-md-col-fill-from-9{grid-column:9/-1;min-inline-size:0}.g-cq-md-col-10{grid-column:span 10/span 10;min-inline-size:0}.g-cq-md-col-fill-from-10{grid-column:10/-1;min-inline-size:0}.g-cq-md-col-11{grid-column:span 11/span 11;min-inline-size:0}.g-cq-md-col-fill-from-11{grid-column:11/-1;min-inline-size:0}.g-cq-md-col-12{grid-column:span 12/span 12;min-inline-size:0}.g-cq-md-col-fill-from-12{grid-column:12/-1;min-inline-size:0}.g-cq-md-col-13{grid-column:span 13/span 13;min-inline-size:0}.g-cq-md-col-fill-from-13{grid-column:13/-1;min-inline-size:0}.g-cq-md-col-14{grid-column:span 14/span 14;min-inline-size:0}.g-cq-md-col-fill-from-14{grid-column:14/-1;min-inline-size:0}.g-cq-md-col-15{grid-column:span 15/span 15;min-inline-size:0}.g-cq-md-col-fill-from-15{grid-column:15/-1;min-inline-size:0}.g-cq-md-col-16{grid-column:span 16/span 16;min-inline-size:0}.g-cq-md-col-fill-from-16{grid-column:16/-1;min-inline-size:0}.g-cq-md-col-17{grid-column:span 17/span 17;min-inline-size:0}.g-cq-md-col-fill-from-17{grid-column:17/-1;min-inline-size:0}.g-cq-md-col-18{grid-column:span 18/span 18;min-inline-size:0}.g-cq-md-col-fill-from-18{grid-column:18/-1;min-inline-size:0}.g-cq-md-col-19{grid-column:span 19/span 19;min-inline-size:0}.g-cq-md-col-fill-from-19{grid-column:19/-1;min-inline-size:0}.g-cq-md-col-20{grid-column:span 20/span 20;min-inline-size:0}.g-cq-md-col-fill-from-20{grid-column:20/-1;min-inline-size:0}.g-cq-md-col-21{grid-column:span 21/span 21;min-inline-size:0}.g-cq-md-col-fill-from-21{grid-column:21/-1;min-inline-size:0}.g-cq-md-col-22{grid-column:span 22/span 22;min-inline-size:0}.g-cq-md-col-fill-from-22{grid-column:22/-1;min-inline-size:0}.g-cq-md-col-23{grid-column:span 23/span 23;min-inline-size:0}.g-cq-md-col-fill-from-23{grid-column:23/-1;min-inline-size:0}.g-cq-md-col-24{grid-column:span 24/span 24;min-inline-size:0}.g-cq-md-col-fill-from-24{grid-column:24/-1;min-inline-size:0}.g-cq-md-offset-1{grid-column-start:2}.g-cq-md-offset-2{grid-column-start:3}.g-cq-md-offset-3{grid-column-start:4}.g-cq-md-offset-4{grid-column-start:5}.g-cq-md-offset-5{grid-column-start:6}.g-cq-md-offset-6{grid-column-start:7}.g-cq-md-offset-7{grid-column-start:8}.g-cq-md-offset-8{grid-column-start:9}.g-cq-md-offset-9{grid-column-start:10}.g-cq-md-offset-10{grid-column-start:11}.g-cq-md-offset-11{grid-column-start:12}.g-cq-md-offset-12{grid-column-start:13}.g-cq-md-offset-13{grid-column-start:14}.g-cq-md-offset-14{grid-column-start:15}.g-cq-md-offset-15{grid-column-start:16}.g-cq-md-offset-16{grid-column-start:17}.g-cq-md-offset-17{grid-column-start:18}.g-cq-md-offset-18{grid-column-start:19}.g-cq-md-offset-19{grid-column-start:20}.g-cq-md-offset-20{grid-column-start:21}.g-cq-md-offset-21{grid-column-start:22}.g-cq-md-offset-22{grid-column-start:23}.g-cq-md-offset-23{grid-column-start:24}.g-cq-md-col-start-1{grid-column-start:1}.g-cq-md-col-end-1{grid-column-end:1}.g-cq-md-col-start-2{grid-column-start:2}.g-cq-md-col-end-2{grid-column-end:2}.g-cq-md-col-start-3{grid-column-start:3}.g-cq-md-col-end-3{grid-column-end:3}.g-cq-md-col-start-4{grid-column-start:4}.g-cq-md-col-end-4{grid-column-end:4}.g-cq-md-col-start-5{grid-column-start:5}.g-cq-md-col-end-5{grid-column-end:5}.g-cq-md-col-start-6{grid-column-start:6}.g-cq-md-col-end-6{grid-column-end:6}.g-cq-md-col-start-7{grid-column-start:7}.g-cq-md-col-end-7{grid-column-end:7}.g-cq-md-col-start-8{grid-column-start:8}.g-cq-md-col-end-8{grid-column-end:8}.g-cq-md-col-start-9{grid-column-start:9}.g-cq-md-col-end-9{grid-column-end:9}.g-cq-md-col-start-10{grid-column-start:10}.g-cq-md-col-end-10{grid-column-end:10}.g-cq-md-col-start-11{grid-column-start:11}.g-cq-md-col-end-11{grid-column-end:11}.g-cq-md-col-start-12{grid-column-start:12}.g-cq-md-col-end-12{grid-column-end:12}.g-cq-md-col-start-13{grid-column-start:13}.g-cq-md-col-end-13{grid-column-end:13}.g-cq-md-col-start-14{grid-column-start:14}.g-cq-md-col-end-14{grid-column-end:14}.g-cq-md-col-start-15{grid-column-start:15}.g-cq-md-col-end-15{grid-column-end:15}.g-cq-md-col-start-16{grid-column-start:16}.g-cq-md-col-end-16{grid-column-end:16}.g-cq-md-col-start-17{grid-column-start:17}.g-cq-md-col-end-17{grid-column-end:17}.g-cq-md-col-start-18{grid-column-start:18}.g-cq-md-col-end-18{grid-column-end:18}.g-cq-md-col-start-19{grid-column-start:19}.g-cq-md-col-end-19{grid-column-end:19}.g-cq-md-col-start-20{grid-column-start:20}.g-cq-md-col-end-20{grid-column-end:20}.g-cq-md-col-start-21{grid-column-start:21}.g-cq-md-col-end-21{grid-column-end:21}.g-cq-md-col-start-22{grid-column-start:22}.g-cq-md-col-end-22{grid-column-end:22}.g-cq-md-col-start-23{grid-column-start:23}.g-cq-md-col-end-23{grid-column-end:23}.g-cq-md-col-start-24{grid-column-start:24}.g-cq-md-col-end-24{grid-column-end:24}.g-cq-md-col-start-25{grid-column-start:25}.g-cq-md-col-end-25{grid-column-end:25}}
|
|
621
|
+
@container g-grid (min-width:1024px){.g-cq-lg-col{grid-column:1/-1;min-inline-size:0}.g-cq-lg-col-auto{grid-column:auto;min-inline-size:0}.g-cq-lg-col-fill{grid-column:1/-1;min-inline-size:0}.g-cq-lg-col-full{grid-column:1/-1;min-inline-size:0}.g-cq-lg-col-hidden{display:none}.g-cq-lg-col-visible{display:revert}.g-cq-lg-offset-0{grid-column-start:auto}.g-cq-lg-col-start-auto{grid-column-start:auto}.g-cq-lg-col-end-auto{grid-column-end:auto}.g-cq-lg-col-1{grid-column:span 1/span 1;min-inline-size:0}.g-cq-lg-col-fill-from-1{grid-column:1/-1;min-inline-size:0}.g-cq-lg-col-2{grid-column:span 2/span 2;min-inline-size:0}.g-cq-lg-col-fill-from-2{grid-column:2/-1;min-inline-size:0}.g-cq-lg-col-3{grid-column:span 3/span 3;min-inline-size:0}.g-cq-lg-col-fill-from-3{grid-column:3/-1;min-inline-size:0}.g-cq-lg-col-4{grid-column:span 4/span 4;min-inline-size:0}.g-cq-lg-col-fill-from-4{grid-column:4/-1;min-inline-size:0}.g-cq-lg-col-5{grid-column:span 5/span 5;min-inline-size:0}.g-cq-lg-col-fill-from-5{grid-column:5/-1;min-inline-size:0}.g-cq-lg-col-6{grid-column:span 6/span 6;min-inline-size:0}.g-cq-lg-col-fill-from-6{grid-column:6/-1;min-inline-size:0}.g-cq-lg-col-7{grid-column:span 7/span 7;min-inline-size:0}.g-cq-lg-col-fill-from-7{grid-column:7/-1;min-inline-size:0}.g-cq-lg-col-8{grid-column:span 8/span 8;min-inline-size:0}.g-cq-lg-col-fill-from-8{grid-column:8/-1;min-inline-size:0}.g-cq-lg-col-9{grid-column:span 9/span 9;min-inline-size:0}.g-cq-lg-col-fill-from-9{grid-column:9/-1;min-inline-size:0}.g-cq-lg-col-10{grid-column:span 10/span 10;min-inline-size:0}.g-cq-lg-col-fill-from-10{grid-column:10/-1;min-inline-size:0}.g-cq-lg-col-11{grid-column:span 11/span 11;min-inline-size:0}.g-cq-lg-col-fill-from-11{grid-column:11/-1;min-inline-size:0}.g-cq-lg-col-12{grid-column:span 12/span 12;min-inline-size:0}.g-cq-lg-col-fill-from-12{grid-column:12/-1;min-inline-size:0}.g-cq-lg-col-13{grid-column:span 13/span 13;min-inline-size:0}.g-cq-lg-col-fill-from-13{grid-column:13/-1;min-inline-size:0}.g-cq-lg-col-14{grid-column:span 14/span 14;min-inline-size:0}.g-cq-lg-col-fill-from-14{grid-column:14/-1;min-inline-size:0}.g-cq-lg-col-15{grid-column:span 15/span 15;min-inline-size:0}.g-cq-lg-col-fill-from-15{grid-column:15/-1;min-inline-size:0}.g-cq-lg-col-16{grid-column:span 16/span 16;min-inline-size:0}.g-cq-lg-col-fill-from-16{grid-column:16/-1;min-inline-size:0}.g-cq-lg-col-17{grid-column:span 17/span 17;min-inline-size:0}.g-cq-lg-col-fill-from-17{grid-column:17/-1;min-inline-size:0}.g-cq-lg-col-18{grid-column:span 18/span 18;min-inline-size:0}.g-cq-lg-col-fill-from-18{grid-column:18/-1;min-inline-size:0}.g-cq-lg-col-19{grid-column:span 19/span 19;min-inline-size:0}.g-cq-lg-col-fill-from-19{grid-column:19/-1;min-inline-size:0}.g-cq-lg-col-20{grid-column:span 20/span 20;min-inline-size:0}.g-cq-lg-col-fill-from-20{grid-column:20/-1;min-inline-size:0}.g-cq-lg-col-21{grid-column:span 21/span 21;min-inline-size:0}.g-cq-lg-col-fill-from-21{grid-column:21/-1;min-inline-size:0}.g-cq-lg-col-22{grid-column:span 22/span 22;min-inline-size:0}.g-cq-lg-col-fill-from-22{grid-column:22/-1;min-inline-size:0}.g-cq-lg-col-23{grid-column:span 23/span 23;min-inline-size:0}.g-cq-lg-col-fill-from-23{grid-column:23/-1;min-inline-size:0}.g-cq-lg-col-24{grid-column:span 24/span 24;min-inline-size:0}.g-cq-lg-col-fill-from-24{grid-column:24/-1;min-inline-size:0}.g-cq-lg-offset-1{grid-column-start:2}.g-cq-lg-offset-2{grid-column-start:3}.g-cq-lg-offset-3{grid-column-start:4}.g-cq-lg-offset-4{grid-column-start:5}.g-cq-lg-offset-5{grid-column-start:6}.g-cq-lg-offset-6{grid-column-start:7}.g-cq-lg-offset-7{grid-column-start:8}.g-cq-lg-offset-8{grid-column-start:9}.g-cq-lg-offset-9{grid-column-start:10}.g-cq-lg-offset-10{grid-column-start:11}.g-cq-lg-offset-11{grid-column-start:12}.g-cq-lg-offset-12{grid-column-start:13}.g-cq-lg-offset-13{grid-column-start:14}.g-cq-lg-offset-14{grid-column-start:15}.g-cq-lg-offset-15{grid-column-start:16}.g-cq-lg-offset-16{grid-column-start:17}.g-cq-lg-offset-17{grid-column-start:18}.g-cq-lg-offset-18{grid-column-start:19}.g-cq-lg-offset-19{grid-column-start:20}.g-cq-lg-offset-20{grid-column-start:21}.g-cq-lg-offset-21{grid-column-start:22}.g-cq-lg-offset-22{grid-column-start:23}.g-cq-lg-offset-23{grid-column-start:24}.g-cq-lg-col-start-1{grid-column-start:1}.g-cq-lg-col-end-1{grid-column-end:1}.g-cq-lg-col-start-2{grid-column-start:2}.g-cq-lg-col-end-2{grid-column-end:2}.g-cq-lg-col-start-3{grid-column-start:3}.g-cq-lg-col-end-3{grid-column-end:3}.g-cq-lg-col-start-4{grid-column-start:4}.g-cq-lg-col-end-4{grid-column-end:4}.g-cq-lg-col-start-5{grid-column-start:5}.g-cq-lg-col-end-5{grid-column-end:5}.g-cq-lg-col-start-6{grid-column-start:6}.g-cq-lg-col-end-6{grid-column-end:6}.g-cq-lg-col-start-7{grid-column-start:7}.g-cq-lg-col-end-7{grid-column-end:7}.g-cq-lg-col-start-8{grid-column-start:8}.g-cq-lg-col-end-8{grid-column-end:8}.g-cq-lg-col-start-9{grid-column-start:9}.g-cq-lg-col-end-9{grid-column-end:9}.g-cq-lg-col-start-10{grid-column-start:10}.g-cq-lg-col-end-10{grid-column-end:10}.g-cq-lg-col-start-11{grid-column-start:11}.g-cq-lg-col-end-11{grid-column-end:11}.g-cq-lg-col-start-12{grid-column-start:12}.g-cq-lg-col-end-12{grid-column-end:12}.g-cq-lg-col-start-13{grid-column-start:13}.g-cq-lg-col-end-13{grid-column-end:13}.g-cq-lg-col-start-14{grid-column-start:14}.g-cq-lg-col-end-14{grid-column-end:14}.g-cq-lg-col-start-15{grid-column-start:15}.g-cq-lg-col-end-15{grid-column-end:15}.g-cq-lg-col-start-16{grid-column-start:16}.g-cq-lg-col-end-16{grid-column-end:16}.g-cq-lg-col-start-17{grid-column-start:17}.g-cq-lg-col-end-17{grid-column-end:17}.g-cq-lg-col-start-18{grid-column-start:18}.g-cq-lg-col-end-18{grid-column-end:18}.g-cq-lg-col-start-19{grid-column-start:19}.g-cq-lg-col-end-19{grid-column-end:19}.g-cq-lg-col-start-20{grid-column-start:20}.g-cq-lg-col-end-20{grid-column-end:20}.g-cq-lg-col-start-21{grid-column-start:21}.g-cq-lg-col-end-21{grid-column-end:21}.g-cq-lg-col-start-22{grid-column-start:22}.g-cq-lg-col-end-22{grid-column-end:22}.g-cq-lg-col-start-23{grid-column-start:23}.g-cq-lg-col-end-23{grid-column-end:23}.g-cq-lg-col-start-24{grid-column-start:24}.g-cq-lg-col-end-24{grid-column-end:24}.g-cq-lg-col-start-25{grid-column-start:25}.g-cq-lg-col-end-25{grid-column-end:25}}
|
|
622
|
+
@media print{.g-print-col{grid-column:1/-1;min-inline-size:0}.g-print-col-auto{grid-column:auto;min-inline-size:0}.g-print-col-fill{grid-column:1/-1;min-inline-size:0}.g-print-col-full{grid-column:1/-1;min-inline-size:0}.g-print-col-hidden{display:none}.g-print-col-visible{display:revert}.g-print-offset-0{grid-column-start:auto}.g-print-col-start-auto{grid-column-start:auto}.g-print-col-end-auto{grid-column-end:auto}.g-print-col-1{grid-column:span 1/span 1;min-inline-size:0}.g-print-col-fill-from-1{grid-column:1/-1;min-inline-size:0}.g-print-col-2{grid-column:span 2/span 2;min-inline-size:0}.g-print-col-fill-from-2{grid-column:2/-1;min-inline-size:0}.g-print-col-3{grid-column:span 3/span 3;min-inline-size:0}.g-print-col-fill-from-3{grid-column:3/-1;min-inline-size:0}.g-print-col-4{grid-column:span 4/span 4;min-inline-size:0}.g-print-col-fill-from-4{grid-column:4/-1;min-inline-size:0}.g-print-col-5{grid-column:span 5/span 5;min-inline-size:0}.g-print-col-fill-from-5{grid-column:5/-1;min-inline-size:0}.g-print-col-6{grid-column:span 6/span 6;min-inline-size:0}.g-print-col-fill-from-6{grid-column:6/-1;min-inline-size:0}.g-print-col-7{grid-column:span 7/span 7;min-inline-size:0}.g-print-col-fill-from-7{grid-column:7/-1;min-inline-size:0}.g-print-col-8{grid-column:span 8/span 8;min-inline-size:0}.g-print-col-fill-from-8{grid-column:8/-1;min-inline-size:0}.g-print-col-9{grid-column:span 9/span 9;min-inline-size:0}.g-print-col-fill-from-9{grid-column:9/-1;min-inline-size:0}.g-print-col-10{grid-column:span 10/span 10;min-inline-size:0}.g-print-col-fill-from-10{grid-column:10/-1;min-inline-size:0}.g-print-col-11{grid-column:span 11/span 11;min-inline-size:0}.g-print-col-fill-from-11{grid-column:11/-1;min-inline-size:0}.g-print-col-12{grid-column:span 12/span 12;min-inline-size:0}.g-print-col-fill-from-12{grid-column:12/-1;min-inline-size:0}.g-print-col-13{grid-column:span 13/span 13;min-inline-size:0}.g-print-col-fill-from-13{grid-column:13/-1;min-inline-size:0}.g-print-col-14{grid-column:span 14/span 14;min-inline-size:0}.g-print-col-fill-from-14{grid-column:14/-1;min-inline-size:0}.g-print-col-15{grid-column:span 15/span 15;min-inline-size:0}.g-print-col-fill-from-15{grid-column:15/-1;min-inline-size:0}.g-print-col-16{grid-column:span 16/span 16;min-inline-size:0}.g-print-col-fill-from-16{grid-column:16/-1;min-inline-size:0}.g-print-col-17{grid-column:span 17/span 17;min-inline-size:0}.g-print-col-fill-from-17{grid-column:17/-1;min-inline-size:0}.g-print-col-18{grid-column:span 18/span 18;min-inline-size:0}.g-print-col-fill-from-18{grid-column:18/-1;min-inline-size:0}.g-print-col-19{grid-column:span 19/span 19;min-inline-size:0}.g-print-col-fill-from-19{grid-column:19/-1;min-inline-size:0}.g-print-col-20{grid-column:span 20/span 20;min-inline-size:0}.g-print-col-fill-from-20{grid-column:20/-1;min-inline-size:0}.g-print-col-21{grid-column:span 21/span 21;min-inline-size:0}.g-print-col-fill-from-21{grid-column:21/-1;min-inline-size:0}.g-print-col-22{grid-column:span 22/span 22;min-inline-size:0}.g-print-col-fill-from-22{grid-column:22/-1;min-inline-size:0}.g-print-col-23{grid-column:span 23/span 23;min-inline-size:0}.g-print-col-fill-from-23{grid-column:23/-1;min-inline-size:0}.g-print-col-24{grid-column:span 24/span 24;min-inline-size:0}.g-print-col-fill-from-24{grid-column:24/-1;min-inline-size:0}.g-print-offset-1{grid-column-start:2}.g-print-offset-2{grid-column-start:3}.g-print-offset-3{grid-column-start:4}.g-print-offset-4{grid-column-start:5}.g-print-offset-5{grid-column-start:6}.g-print-offset-6{grid-column-start:7}.g-print-offset-7{grid-column-start:8}.g-print-offset-8{grid-column-start:9}.g-print-offset-9{grid-column-start:10}.g-print-offset-10{grid-column-start:11}.g-print-offset-11{grid-column-start:12}.g-print-offset-12{grid-column-start:13}.g-print-offset-13{grid-column-start:14}.g-print-offset-14{grid-column-start:15}.g-print-offset-15{grid-column-start:16}.g-print-offset-16{grid-column-start:17}.g-print-offset-17{grid-column-start:18}.g-print-offset-18{grid-column-start:19}.g-print-offset-19{grid-column-start:20}.g-print-offset-20{grid-column-start:21}.g-print-offset-21{grid-column-start:22}.g-print-offset-22{grid-column-start:23}.g-print-offset-23{grid-column-start:24}.g-print-col-start-1{grid-column-start:1}.g-print-col-end-1{grid-column-end:1}.g-print-col-start-2{grid-column-start:2}.g-print-col-end-2{grid-column-end:2}.g-print-col-start-3{grid-column-start:3}.g-print-col-end-3{grid-column-end:3}.g-print-col-start-4{grid-column-start:4}.g-print-col-end-4{grid-column-end:4}.g-print-col-start-5{grid-column-start:5}.g-print-col-end-5{grid-column-end:5}.g-print-col-start-6{grid-column-start:6}.g-print-col-end-6{grid-column-end:6}.g-print-col-start-7{grid-column-start:7}.g-print-col-end-7{grid-column-end:7}.g-print-col-start-8{grid-column-start:8}.g-print-col-end-8{grid-column-end:8}.g-print-col-start-9{grid-column-start:9}.g-print-col-end-9{grid-column-end:9}.g-print-col-start-10{grid-column-start:10}.g-print-col-end-10{grid-column-end:10}.g-print-col-start-11{grid-column-start:11}.g-print-col-end-11{grid-column-end:11}.g-print-col-start-12{grid-column-start:12}.g-print-col-end-12{grid-column-end:12}.g-print-col-start-13{grid-column-start:13}.g-print-col-end-13{grid-column-end:13}.g-print-col-start-14{grid-column-start:14}.g-print-col-end-14{grid-column-end:14}.g-print-col-start-15{grid-column-start:15}.g-print-col-end-15{grid-column-end:15}.g-print-col-start-16{grid-column-start:16}.g-print-col-end-16{grid-column-end:16}.g-print-col-start-17{grid-column-start:17}.g-print-col-end-17{grid-column-end:17}.g-print-col-start-18{grid-column-start:18}.g-print-col-end-18{grid-column-end:18}.g-print-col-start-19{grid-column-start:19}.g-print-col-end-19{grid-column-end:19}.g-print-col-start-20{grid-column-start:20}.g-print-col-end-20{grid-column-end:20}.g-print-col-start-21{grid-column-start:21}.g-print-col-end-21{grid-column-end:21}.g-print-col-start-22{grid-column-start:22}.g-print-col-end-22{grid-column-end:22}.g-print-col-start-23{grid-column-start:23}.g-print-col-end-23{grid-column-end:23}.g-print-col-start-24{grid-column-start:24}.g-print-col-end-24{grid-column-end:24}.g-print-col-start-25{grid-column-start:25}.g-print-col-end-25{grid-column-end:25}:where(.g-row,.g-grid-24,.g-grid-12){--g-grid-gutter-x:var(--g-space-3);--g-grid-gutter-y:var(--g-space-3)}.g-print-grid-12{--g-grid-columns:12}.g-print-grid-24{--g-grid-columns:24}}
|
|
623
|
+
@supports (grid-template-columns:subgrid){.g-subgrid-cols{display:grid;grid-template-columns:subgrid}.g-subgrid-rows{display:grid;grid-template-rows:subgrid}.g-subgrid{display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid}}
|
|
624
|
+
}
|
|
625
|
+
|
|
626
|
+
@layer gardener.components {
|
|
627
|
+
.g-btn {
|
|
628
|
+
--g-btn-bg: var(--g-color-surface);
|
|
629
|
+
--g-btn-color: var(--g-color-text);
|
|
630
|
+
--g-btn-border: var(--g-color-border-strong);
|
|
631
|
+
display: inline-flex;
|
|
632
|
+
min-height: var(--g-control-height-md);
|
|
633
|
+
align-items: center;
|
|
634
|
+
justify-content: center;
|
|
635
|
+
gap: var(--g-space-2);
|
|
636
|
+
padding: var(--g-space-control-y) var(--g-space-control-x);
|
|
637
|
+
border: var(--g-border-width) solid var(--g-btn-border);
|
|
638
|
+
border-radius: var(--g-radius-md);
|
|
639
|
+
background: var(--g-btn-bg);
|
|
640
|
+
color: var(--g-btn-color);
|
|
641
|
+
font-weight: 600;
|
|
642
|
+
line-height: 1.2;
|
|
643
|
+
text-decoration: none;
|
|
644
|
+
cursor: pointer;
|
|
645
|
+
transition: background var(--g-duration-fast), border-color var(--g-duration-fast), color var(--g-duration-fast), box-shadow var(--g-duration-fast), transform var(--g-duration-fast);
|
|
646
|
+
}
|
|
647
|
+
.g-btn:hover:not(:disabled, [aria-disabled="true"]) { filter: brightness(0.97); }
|
|
648
|
+
.g-btn:active:not(:disabled, [aria-disabled="true"]) { transform: translateY(1px); }
|
|
649
|
+
.g-btn:disabled, .g-btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }
|
|
650
|
+
.g-btn-primary { --g-btn-bg: var(--g-color-primary); --g-btn-border: var(--g-color-primary); --g-btn-color: var(--g-color-on-primary); }
|
|
651
|
+
.g-btn-primary:hover:not(:disabled) { --g-btn-bg: var(--g-color-primary-hover); --g-btn-border: var(--g-color-primary-hover); }
|
|
652
|
+
.g-btn-outline { --g-btn-bg: transparent; --g-btn-border: var(--g-color-primary-text); --g-btn-color: var(--g-color-primary-text); }
|
|
653
|
+
.g-btn-ghost { --g-btn-bg: transparent; --g-btn-border: transparent; }
|
|
654
|
+
.g-btn-danger { --g-btn-bg: var(--g-color-danger); --g-btn-border: var(--g-color-danger); --g-btn-color: #fff; }
|
|
655
|
+
.g-btn-link { --g-btn-bg: transparent; --g-btn-border: transparent; --g-btn-color: var(--g-color-primary-text); padding-inline: 0; }
|
|
656
|
+
.g-btn-sm { min-height: var(--g-control-height-sm); padding: var(--g-space-1) var(--g-space-3); font-size: var(--g-font-size-sm); }
|
|
657
|
+
.g-btn-lg { min-height: var(--g-control-height-lg); padding-inline: var(--g-space-5); font-size: var(--g-font-size-lg); }
|
|
658
|
+
.g-btn-icon { inline-size: var(--g-control-height-md); padding: 0; }
|
|
659
|
+
.g-btn-block { width: 100%; }
|
|
660
|
+
.g-btn.is-loading { color: transparent; pointer-events: none; position: relative; }
|
|
661
|
+
.g-btn.is-loading::after { content: ""; position: absolute; inline-size: 1rem; block-size: 1rem; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; color: var(--g-btn-color); animation: g-spin 0.7s linear infinite; }
|
|
662
|
+
.g-btn-group { display: inline-flex; }
|
|
663
|
+
.g-btn-group > .g-btn { border-radius: 0; margin-inline-start: calc(-1 * var(--g-border-width)); }
|
|
664
|
+
.g-btn-group > .g-btn:first-child { border-start-start-radius: var(--g-radius-md); border-end-start-radius: var(--g-radius-md); margin-inline-start: 0; }
|
|
665
|
+
.g-btn-group > .g-btn:last-child { border-start-end-radius: var(--g-radius-md); border-end-end-radius: var(--g-radius-md); }
|
|
666
|
+
|
|
667
|
+
.g-card { border: var(--g-border-width) solid var(--g-color-border); border-radius: var(--g-radius-lg); background: var(--g-color-surface); color: var(--g-color-text); box-shadow: var(--g-shadow-xs); overflow: hidden; }
|
|
668
|
+
.g-card-interactive { transition: border-color var(--g-duration-normal), box-shadow var(--g-duration-normal), transform var(--g-duration-normal); }
|
|
669
|
+
.g-card-interactive:hover { border-color: var(--g-primary-300); box-shadow: var(--g-shadow-md); transform: translateY(-2px); }
|
|
670
|
+
.g-card-header, .g-card-body, .g-card-footer { padding: var(--g-space-5); }
|
|
671
|
+
.g-card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-4); border-bottom: 1px solid var(--g-color-border); }
|
|
672
|
+
.g-card-footer { border-top: 1px solid var(--g-color-border); background: var(--g-color-surface-subtle); }
|
|
673
|
+
.g-card-title { font-size: var(--g-font-size-lg); font-weight: 650; }
|
|
674
|
+
.g-card-subtitle { margin-block-start: var(--g-space-1); color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); }
|
|
675
|
+
|
|
676
|
+
.g-badge, .g-tag, .g-chip { display: inline-flex; width: fit-content; align-items: center; gap: var(--g-space-1); max-width: 100%; border-radius: var(--g-radius-full); font-size: var(--g-font-size-xs); font-weight: 650; line-height: 1; vertical-align: middle; }
|
|
677
|
+
.g-badge { padding: 0.25rem 0.5rem; background: var(--g-color-primary-soft); color: var(--g-color-on-primary-soft); }
|
|
678
|
+
.g-badge-success { background: var(--g-color-success-soft); color: var(--g-color-success); }
|
|
679
|
+
.g-badge-warning { background: var(--g-color-warning-soft); color: var(--g-color-warning); }
|
|
680
|
+
.g-badge-danger { background: var(--g-color-danger-soft); color: var(--g-color-danger); }
|
|
681
|
+
.g-badge-info { background: var(--g-color-info-soft); color: var(--g-color-info); }
|
|
682
|
+
.g-tag, .g-chip { min-height: 1.75rem; padding: 0.25rem 0.65rem; border: 1px solid var(--g-color-border); background: var(--g-color-surface); color: var(--g-color-text); }
|
|
683
|
+
.g-chip[aria-selected="true"] { border-color: var(--g-color-primary); background: var(--g-color-primary-soft); color: var(--g-color-primary-text); }
|
|
684
|
+
|
|
685
|
+
.g-avatar { display: inline-grid; inline-size: var(--g-avatar-size, 2.5rem); block-size: var(--g-avatar-size, 2.5rem); flex: 0 0 auto; place-items: center; overflow: hidden; border-radius: var(--g-radius-full); background: var(--g-color-primary-soft); color: var(--g-color-primary-text); font-weight: 650; }
|
|
686
|
+
.g-avatar > img { width: 100%; height: 100%; object-fit: cover; }
|
|
687
|
+
.g-avatar-sm { --g-avatar-size: 2rem; font-size: var(--g-font-size-xs); }
|
|
688
|
+
.g-avatar-lg { --g-avatar-size: 3.5rem; font-size: var(--g-font-size-lg); }
|
|
689
|
+
.g-avatar-xl { --g-avatar-size: 5rem; font-size: var(--g-font-size-2xl); }
|
|
690
|
+
.g-avatar-group { display: flex; }
|
|
691
|
+
.g-avatar-group > .g-avatar { border: 2px solid var(--g-color-surface); margin-inline-start: -0.65rem; }
|
|
692
|
+
.g-avatar-group > .g-avatar:first-child { margin-inline-start: 0; }
|
|
693
|
+
|
|
694
|
+
.g-alert { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--g-space-3); padding: var(--g-space-4); border: 1px solid var(--g-color-border); border-inline-start: 0.25rem solid var(--g-color-primary); border-radius: var(--g-radius-md); background: var(--g-color-surface); }
|
|
695
|
+
.g-alert-title { font-weight: 650; }
|
|
696
|
+
.g-alert-description { margin-block-start: var(--g-space-1); color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); }
|
|
697
|
+
.g-alert-success { border-inline-start-color: var(--g-color-success); background: var(--g-color-success-soft); }
|
|
698
|
+
.g-alert-warning { border-inline-start-color: var(--g-color-warning); background: var(--g-color-warning-soft); }
|
|
699
|
+
.g-alert-danger { border-inline-start-color: var(--g-color-danger); background: var(--g-color-danger-soft); }
|
|
700
|
+
.g-alert-info { border-inline-start-color: var(--g-color-info); background: var(--g-color-info-soft); }
|
|
701
|
+
|
|
702
|
+
.g-progress { position: relative; overflow: hidden; width: 100%; height: var(--g-progress-height, 0.5rem); border-radius: var(--g-radius-full); background: var(--g-color-surface-sunken); }
|
|
703
|
+
.g-progress-bar { height: 100%; width: var(--g-progress-value, 0%); border-radius: inherit; background: var(--g-color-primary); transition: width var(--g-duration-slow) var(--g-ease-standard); }
|
|
704
|
+
.g-progress-indeterminate .g-progress-bar { width: 40%; animation: g-progress 1.2s ease-in-out infinite; }
|
|
705
|
+
.g-meter { display: flex; overflow: hidden; height: 0.75rem; border-radius: var(--g-radius-full); background: var(--g-color-surface-sunken); }
|
|
706
|
+
.g-meter > * { height: 100%; }
|
|
707
|
+
|
|
708
|
+
.g-spinner { display: inline-block; inline-size: var(--g-spinner-size, 1.25rem); block-size: var(--g-spinner-size, 1.25rem); border: 2px solid var(--g-color-border); border-inline-end-color: var(--g-color-primary); border-radius: 50%; animation: g-spin 0.7s linear infinite; }
|
|
709
|
+
.g-skeleton { color: transparent !important; border-radius: var(--g-radius-sm); background: linear-gradient(100deg, var(--g-color-surface-sunken) 25%, var(--g-color-surface-subtle) 40%, var(--g-color-surface-sunken) 60%); background-size: 200% 100%; animation: g-shimmer 1.4s ease infinite; }
|
|
710
|
+
.g-skeleton-text { height: 0.9em; margin-block: 0.35em; }
|
|
711
|
+
.g-skeleton-circle { aspect-ratio: 1; border-radius: 50%; }
|
|
712
|
+
|
|
713
|
+
.g-empty { display: grid; place-items: center; min-height: 14rem; padding: var(--g-space-8); text-align: center; color: var(--g-color-text-muted); }
|
|
714
|
+
.g-empty-title { color: var(--g-color-text); font-size: var(--g-font-size-lg); font-weight: 650; }
|
|
715
|
+
.g-empty-actions { display: flex; justify-content: center; gap: var(--g-space-2); margin-block-start: var(--g-space-4); }
|
|
716
|
+
.g-divider { display: flex; align-items: center; gap: var(--g-space-3); color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); }
|
|
717
|
+
.g-divider::before, .g-divider::after { content: ""; flex: 1; border-top: 1px solid var(--g-color-border); }
|
|
718
|
+
.g-status-dot { display: inline-block; inline-size: 0.625rem; block-size: 0.625rem; border-radius: 50%; background: var(--g-color-text-subtle); }
|
|
719
|
+
.g-status-dot.is-online { background: var(--g-color-success); box-shadow: 0 0 0 3px var(--g-color-success-soft); }
|
|
720
|
+
.g-status-dot.is-busy { background: var(--g-color-danger); }
|
|
721
|
+
.g-status-dot.is-away { background: var(--g-color-warning); }
|
|
722
|
+
|
|
723
|
+
@keyframes g-spin { to { transform: rotate(1turn); } }
|
|
724
|
+
@keyframes g-shimmer { to { background-position-x: -200%; } }
|
|
725
|
+
@keyframes g-progress { from { transform: translateX(-120%); } to { transform: translateX(280%); } }
|
|
726
|
+
}
|
|
727
|
+
|
|
728
|
+
@layer gardener.components {
|
|
729
|
+
.g-field { display: grid; gap: var(--g-space-2); }
|
|
730
|
+
.g-label { color: var(--g-color-text); font-size: var(--g-font-size-sm); font-weight: 600; }
|
|
731
|
+
.g-label-required::after { content: " *"; color: var(--g-color-danger); }
|
|
732
|
+
.g-help, .g-error { color: var(--g-color-text-muted); font-size: var(--g-font-size-xs); }
|
|
733
|
+
.g-error { color: var(--g-color-danger); }
|
|
734
|
+
.g-input, .g-textarea, .g-select {
|
|
735
|
+
width: 100%; min-height: var(--g-control-height-md); padding: var(--g-space-control-y) var(--g-space-control-x);
|
|
736
|
+
border: var(--g-border-width) solid var(--g-color-border-strong); border-radius: var(--g-radius-md);
|
|
737
|
+
background: var(--g-color-surface); color: var(--g-color-text); line-height: 1.35;
|
|
738
|
+
transition: border-color var(--g-duration-fast), box-shadow var(--g-duration-fast), background var(--g-duration-fast);
|
|
739
|
+
}
|
|
740
|
+
.g-input::placeholder, .g-textarea::placeholder { color: var(--g-color-text-subtle); }
|
|
741
|
+
.g-input:hover, .g-textarea:hover, .g-select:hover { border-color: var(--g-primary-400); }
|
|
742
|
+
.g-input:focus, .g-textarea:focus, .g-select:focus { border-color: var(--g-color-primary); outline: 0; box-shadow: 0 0 0 var(--g-focus-ring-width) var(--g-focus-ring); }
|
|
743
|
+
.g-input:disabled, .g-textarea:disabled, .g-select:disabled { opacity: 0.65; background: var(--g-color-surface-subtle); }
|
|
744
|
+
.g-input[aria-invalid="true"], .g-textarea[aria-invalid="true"], .g-select[aria-invalid="true"] { border-color: var(--g-color-danger); }
|
|
745
|
+
.g-input-sm, .g-select-sm { min-height: var(--g-control-height-sm); padding: var(--g-space-1) var(--g-space-3); font-size: var(--g-font-size-sm); }
|
|
746
|
+
.g-input-lg, .g-select-lg { min-height: var(--g-control-height-lg); font-size: var(--g-font-size-lg); }
|
|
747
|
+
.g-textarea { resize: vertical; }
|
|
748
|
+
.g-select { appearance: none; padding-inline-end: 2.5rem; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 1rem) 50%, calc(100% - 0.75rem) 50%; background-size: 0.3rem 0.3rem; background-repeat: no-repeat; }
|
|
749
|
+
[dir="rtl"] .g-select { background-position: 1rem 50%, 0.75rem 50%; }
|
|
750
|
+
|
|
751
|
+
.g-input-group { display: flex; align-items: stretch; }
|
|
752
|
+
.g-input-group > * { border-radius: 0; margin-inline-start: -1px; }
|
|
753
|
+
.g-input-group > :first-child { margin-inline-start: 0; border-start-start-radius: var(--g-radius-md); border-end-start-radius: var(--g-radius-md); }
|
|
754
|
+
.g-input-group > :last-child { border-start-end-radius: var(--g-radius-md); border-end-end-radius: var(--g-radius-md); }
|
|
755
|
+
.g-input-addon { display: inline-flex; align-items: center; padding-inline: var(--g-space-3); border: 1px solid var(--g-color-border-strong); background: var(--g-color-surface-subtle); color: var(--g-color-text-muted); }
|
|
756
|
+
|
|
757
|
+
.g-check, .g-radio, .g-switch { display: inline-flex; align-items: center; gap: var(--g-space-2); min-height: var(--g-touch-target); cursor: pointer; }
|
|
758
|
+
.g-check > input, .g-radio > input { inline-size: 1.1rem; block-size: 1.1rem; margin: 0; accent-color: var(--g-color-primary); }
|
|
759
|
+
.g-switch > input { position: absolute; opacity: 0; pointer-events: none; }
|
|
760
|
+
.g-switch-track { position: relative; display: inline-flex; inline-size: 2.5rem; block-size: 1.4rem; flex: 0 0 auto; border-radius: var(--g-radius-full); background: var(--g-color-border-strong); transition: background var(--g-duration-normal); }
|
|
761
|
+
.g-switch-track::after { content: ""; position: absolute; inset-block-start: 0.2rem; inset-inline-start: 0.2rem; inline-size: 1rem; block-size: 1rem; border-radius: 50%; background: #fff; box-shadow: var(--g-shadow-sm); transition: transform var(--g-duration-normal) var(--g-ease-standard); }
|
|
762
|
+
.g-switch > input:checked + .g-switch-track { background: var(--g-color-primary); }
|
|
763
|
+
.g-switch > input:checked + .g-switch-track::after { transform: translateX(1.1rem); }
|
|
764
|
+
[dir="rtl"] .g-switch > input:checked + .g-switch-track::after { transform: translateX(-1.1rem); }
|
|
765
|
+
.g-switch > input:focus-visible + .g-switch-track { box-shadow: 0 0 0 var(--g-focus-ring-width) var(--g-focus-ring); }
|
|
766
|
+
|
|
767
|
+
.g-range { width: 100%; accent-color: var(--g-color-primary); }
|
|
768
|
+
.g-color-input { inline-size: var(--g-control-height-md); block-size: var(--g-control-height-md); padding: 0.2rem; border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); }
|
|
769
|
+
.g-file-drop { display: grid; place-items: center; min-height: 9rem; padding: var(--g-space-6); border: 2px dashed var(--g-color-border-strong); border-radius: var(--g-radius-lg); background: var(--g-color-surface-subtle); color: var(--g-color-text-muted); text-align: center; transition: border-color var(--g-duration-fast), background var(--g-duration-fast); }
|
|
770
|
+
.g-file-drop:is(:hover, .is-dragging) { border-color: var(--g-color-primary); background: var(--g-color-primary-soft); }
|
|
771
|
+
.g-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--g-space-4); }
|
|
772
|
+
.g-form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--g-space-2); padding-block-start: var(--g-space-4); }
|
|
773
|
+
|
|
774
|
+
.g-combobox { position: relative; }
|
|
775
|
+
.g-combobox-list { position: absolute; z-index: var(--g-z-dropdown); inset: calc(100% + var(--g-space-1)) 0 auto; max-height: 18rem; overflow: auto; padding: var(--g-space-1); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface-raised); box-shadow: var(--g-shadow-lg); }
|
|
776
|
+
.g-combobox-option { display: flex; align-items: center; gap: var(--g-space-2); padding: var(--g-space-2) var(--g-space-3); border-radius: var(--g-radius-sm); cursor: pointer; }
|
|
777
|
+
.g-combobox-option:is(:hover, [aria-selected="true"]) { background: var(--g-color-primary-soft); color: var(--g-color-primary-text); }
|
|
778
|
+
}
|
|
779
|
+
|
|
780
|
+
@layer gardener.components {
|
|
781
|
+
/* Form foundations and layout */
|
|
782
|
+
.g-form { --g-form-gap: var(--g-space-5); display: grid; align-content: start; gap: var(--g-form-gap); min-width: 0; }
|
|
783
|
+
.g-form.is-bordered { padding: var(--g-space-5); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); }
|
|
784
|
+
.g-form-section { display: grid; gap: var(--g-space-4); min-width: 0; padding-block: var(--g-space-2) var(--g-space-6); border-block-end: 1px solid var(--g-color-border); }
|
|
785
|
+
.g-form-section:last-child { padding-block-end: 0; border-block-end: 0; }
|
|
786
|
+
.g-form-section-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--g-space-3); }
|
|
787
|
+
.g-form-section-title { font-size: var(--g-font-size-lg); font-weight: 700; }
|
|
788
|
+
.g-form-section-description { margin-block-start: var(--g-space-1); color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); line-height: 1.55; }
|
|
789
|
+
.g-field { min-width: 0; }
|
|
790
|
+
.g-field-header, .g-field-meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--g-space-3); }
|
|
791
|
+
.g-field-meta { color: var(--g-color-text-muted); font-size: var(--g-font-size-xs); }
|
|
792
|
+
.g-field-required { color: var(--g-color-danger); font-size: var(--g-font-size-xs); }
|
|
793
|
+
.g-field-optional { color: var(--g-color-text-subtle); font-size: var(--g-font-size-xs); font-weight: 400; }
|
|
794
|
+
.g-fieldset { min-width: 0; margin: 0; padding: var(--g-space-4); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); }
|
|
795
|
+
.g-fieldset-legend { padding-inline: var(--g-space-2); color: var(--g-color-text); font-weight: 700; }
|
|
796
|
+
.g-fieldset-description { margin-block-end: var(--g-space-3); color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); }
|
|
797
|
+
.g-form-row, .g-form-grid { --g-form-columns: 2; --g-form-column-min: 13rem; display: grid; grid-template-columns: repeat(var(--g-form-columns), minmax(0, 1fr)); gap: var(--g-space-4); min-width: 0; }
|
|
798
|
+
.g-form-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--g-form-column-min)), 1fr)); }
|
|
799
|
+
.g-form-grid.is-three { --g-form-columns: 3; }
|
|
800
|
+
.g-form-grid.is-four { --g-form-columns: 4; }
|
|
801
|
+
.g-field-span-full { grid-column: 1 / -1; }
|
|
802
|
+
.g-form-horizontal { display: grid; grid-template-columns: minmax(8rem, var(--g-form-label-width, 13rem)) minmax(0, 1fr); gap: var(--g-space-4) var(--g-space-5); align-items: start; }
|
|
803
|
+
.g-form-horizontal > .g-label, .g-form-horizontal > .g-field-header { padding-block-start: calc(var(--g-space-control-y) + .1rem); }
|
|
804
|
+
.g-form-inline { display: flex; flex-wrap: wrap; align-items: end; gap: var(--g-space-3); }
|
|
805
|
+
.g-form-inline > .g-field { flex: 1 1 var(--g-inline-field-min, 12rem); }
|
|
806
|
+
.g-form-inline > .g-form-actions { flex: 0 0 auto; padding: 0; }
|
|
807
|
+
.g-form-compact { --g-form-gap: var(--g-space-3); --g-space-control-y: var(--g-space-1); --g-space-control-x: var(--g-space-3); --g-control-height-md: var(--g-control-height-sm); font-size: var(--g-font-size-sm); }
|
|
808
|
+
.g-form-container { container: gardener-form / inline-size; }
|
|
809
|
+
|
|
810
|
+
/* Input groups, affixes and common interactive fields */
|
|
811
|
+
.g-input-group { min-width: 0; }
|
|
812
|
+
.g-input-group > :is(.g-input, .g-select) { min-width: 0; }
|
|
813
|
+
.g-input-affix, .g-search-field, .g-password-field, .g-clearable-field, .g-character-field { position: relative; min-width: 0; }
|
|
814
|
+
.g-input-affix-start, .g-input-affix-end, .g-search-field-icon { position: absolute; z-index: 1; inset-block-start: 50%; display: inline-flex; align-items: center; color: var(--g-color-text-subtle); font-size: var(--g-font-size-sm); transform: translateY(-50%); pointer-events: none; }
|
|
815
|
+
.g-input-affix-start, .g-search-field-icon { inset-inline-start: var(--g-space-3); }
|
|
816
|
+
.g-input-affix-end { inset-inline-end: var(--g-space-3); }
|
|
817
|
+
.g-input-affix.has-start > .g-input, .g-search-field > .g-input { padding-inline-start: var(--g-affix-space-start, 2.4rem); }
|
|
818
|
+
.g-input-affix.has-end > .g-input { padding-inline-end: var(--g-affix-space-end, 2.4rem); }
|
|
819
|
+
.g-search-field-action, .g-password-field-action, .g-clearable-field-action { position: absolute; z-index: 1; inset-block-start: 50%; inset-inline-end: var(--g-space-1); display: inline-grid; min-inline-size: 2rem; min-block-size: 2rem; place-items: center; padding: 0; border: 0; border-radius: var(--g-radius-sm); background: transparent; color: var(--g-color-text-muted); transform: translateY(-50%); cursor: pointer; }
|
|
820
|
+
.g-search-field-action:hover, .g-password-field-action:hover, .g-clearable-field-action:hover { background: var(--g-color-surface-subtle); color: var(--g-color-text); }
|
|
821
|
+
:is(.g-search-field, .g-password-field, .g-clearable-field):has(> :last-child:is(button, .g-search-field-action, .g-password-field-action, .g-clearable-field-action)) > .g-input { padding-inline-end: 2.75rem; }
|
|
822
|
+
.g-character-field > .g-textarea { padding-block-end: 2rem; }
|
|
823
|
+
.g-character-count { position: absolute; inset-block-end: var(--g-space-2); inset-inline-end: var(--g-space-3); color: var(--g-color-text-subtle); font-size: var(--g-font-size-xs); font-variant-numeric: tabular-nums; pointer-events: none; }
|
|
824
|
+
.g-character-count.is-near-limit { color: var(--g-color-warning); }
|
|
825
|
+
.g-character-count.is-over-limit { color: var(--g-color-danger); font-weight: 700; }
|
|
826
|
+
|
|
827
|
+
/* Validation and grouped choices */
|
|
828
|
+
.g-validation-state { display: grid; gap: var(--g-space-2); }
|
|
829
|
+
.g-validation-state.is-success { --g-validation-color: var(--g-color-success); }
|
|
830
|
+
.g-validation-state.is-warning { --g-validation-color: var(--g-color-warning); }
|
|
831
|
+
.g-validation-state.is-danger, .g-validation-state.is-error { --g-validation-color: var(--g-color-danger); }
|
|
832
|
+
.g-validation-state[class*="is-"] :is(.g-input, .g-textarea, .g-select) { border-color: var(--g-validation-color); }
|
|
833
|
+
.g-validation-message { color: var(--g-validation-color, var(--g-color-text-muted)); font-size: var(--g-font-size-xs); }
|
|
834
|
+
.g-validation-summary { display: grid; gap: var(--g-space-2); border: 1px solid color-mix(in srgb, var(--g-color-danger) 35%, var(--g-color-border)); border-inline-start-width: 3px; border-radius: var(--g-radius-sm); }
|
|
835
|
+
.g-validation-summary-title { font-weight: 700; }
|
|
836
|
+
.g-validation-summary-list { display: grid; gap: var(--g-space-1); margin: 0; padding-inline-start: 1.2rem; font-size: var(--g-font-size-sm); }
|
|
837
|
+
.g-check-group, .g-radio-group { display: grid; gap: var(--g-space-2); }
|
|
838
|
+
.g-check-group.is-inline, .g-radio-group.is-inline { display: flex; flex-wrap: wrap; gap: var(--g-space-2) var(--g-space-5); }
|
|
839
|
+
.g-switch-row { display: flex; min-height: 3.25rem; align-items: center; justify-content: space-between; gap: var(--g-space-4); padding-block: var(--g-space-2); border-block-end: 1px solid var(--g-color-border); }
|
|
840
|
+
.g-switch-row-content { min-width: 0; }
|
|
841
|
+
.g-switch-row-title { font-weight: 650; }
|
|
842
|
+
.g-switch-row-description { margin-block-start: var(--g-space-1); color: var(--g-color-text-muted); font-size: var(--g-font-size-xs); }
|
|
843
|
+
.g-choice-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--g-choice-min, 13rem)), 1fr)); gap: var(--g-space-3); }
|
|
844
|
+
.g-choice-card { position: relative; display: grid; gap: var(--g-space-2); padding: var(--g-space-4); border: 1px solid var(--g-color-border-strong); border-radius: var(--g-radius-md); background: var(--g-color-surface); cursor: pointer; }
|
|
845
|
+
.g-choice-card:hover { border-color: var(--g-color-primary); }
|
|
846
|
+
.g-choice-card:has(input:checked) { border-color: var(--g-color-primary); background: var(--g-color-primary-soft); box-shadow: 0 0 0 1px var(--g-color-primary); }
|
|
847
|
+
.g-choice-card:has(input:checked) .g-choice-card-description { color: var(--g-color-text); }
|
|
848
|
+
.g-choice-card > input { position: absolute; inset-block-start: var(--g-space-3); inset-inline-end: var(--g-space-3); inline-size: 1rem; block-size: 1rem; accent-color: var(--g-color-primary); }
|
|
849
|
+
.g-choice-card-title { padding-inline-end: 1.5rem; font-weight: 700; }
|
|
850
|
+
.g-choice-card-description { color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); line-height: 1.5; }
|
|
851
|
+
|
|
852
|
+
/* Stable business field compositions */
|
|
853
|
+
.g-name-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g-space-3); }
|
|
854
|
+
.g-address-group { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--g-space-3); }
|
|
855
|
+
.g-address-line { grid-column: 1 / -1; }
|
|
856
|
+
.g-address-city, .g-address-region { grid-column: span 2; }
|
|
857
|
+
.g-address-postal { grid-column: span 2; }
|
|
858
|
+
.g-phone-group { display: grid; grid-template-columns: minmax(6rem, .35fr) minmax(0, 1fr) minmax(5rem, .3fr); gap: var(--g-space-2); }
|
|
859
|
+
.g-money-group { display: grid; grid-template-columns: minmax(5rem, .3fr) minmax(0, 1fr); }
|
|
860
|
+
.g-money-group > * { border-radius: 0; }
|
|
861
|
+
.g-money-group > :first-child { border-start-start-radius: var(--g-radius-md); border-end-start-radius: var(--g-radius-md); }
|
|
862
|
+
.g-money-group > :last-child { margin-inline-start: -1px; border-start-end-radius: var(--g-radius-md); border-end-end-radius: var(--g-radius-md); }
|
|
863
|
+
.g-date-range-group, .g-time-range-group { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--g-space-2); }
|
|
864
|
+
.g-range-separator { color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); text-align: center; }
|
|
865
|
+
.g-unit-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
|
|
866
|
+
.g-unit-field > * { border-radius: 0; }
|
|
867
|
+
.g-unit-field > :first-child { border-start-start-radius: var(--g-radius-md); border-end-start-radius: var(--g-radius-md); }
|
|
868
|
+
.g-unit-field > :last-child { margin-inline-start: -1px; border-start-end-radius: var(--g-radius-md); border-end-end-radius: var(--g-radius-md); }
|
|
869
|
+
.g-range-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--g-space-3); }
|
|
870
|
+
.g-range-field-output { min-width: 4ch; color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); font-variant-numeric: tabular-nums; text-align: end; }
|
|
871
|
+
.g-file-field { display: grid; gap: var(--g-space-2); }
|
|
872
|
+
.g-file-field-control { display: flex; min-width: 0; align-items: center; gap: var(--g-space-2); }
|
|
873
|
+
.g-file-field-name { min-width: 0; overflow: hidden; color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); text-overflow: ellipsis; white-space: nowrap; }
|
|
874
|
+
|
|
875
|
+
/* Dynamic and workflow form compositions */
|
|
876
|
+
.g-repeatable-field { display: grid; gap: var(--g-space-3); }
|
|
877
|
+
.g-repeatable-list { display: grid; gap: var(--g-space-3); }
|
|
878
|
+
.g-repeatable-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--g-space-3); align-items: end; padding: var(--g-space-3); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-sm); background: var(--g-color-surface); }
|
|
879
|
+
.g-repeatable-content { min-width: 0; }
|
|
880
|
+
.g-repeatable-actions { display: flex; gap: var(--g-space-2); }
|
|
881
|
+
.g-conditional-field { display: grid; gap: var(--g-space-3); padding: var(--g-space-3); border-inline-start: 2px solid var(--g-color-primary); background: var(--g-color-surface-subtle); }
|
|
882
|
+
.g-conditional-field[hidden] { display: none; }
|
|
883
|
+
.g-form-actions { align-items: center; }
|
|
884
|
+
.g-form-actions.is-start { justify-content: flex-start; }
|
|
885
|
+
.g-form-actions.is-between { justify-content: space-between; }
|
|
886
|
+
.g-form-actions.is-sticky { position: sticky; z-index: var(--g-z-sticky); inset-block-end: 0; margin-inline: calc(var(--g-space-4) * -1); padding: var(--g-space-3) var(--g-space-4) calc(var(--g-space-3) + env(safe-area-inset-bottom)); border-block-start: 1px solid var(--g-color-border); background: color-mix(in srgb, var(--g-color-surface) 94%, transparent); backdrop-filter: blur(10px); }
|
|
887
|
+
.g-autosave-status { display: inline-flex; align-items: center; gap: var(--g-space-2); color: var(--g-color-text-muted); font-size: var(--g-font-size-xs); }
|
|
888
|
+
.g-autosave-status::before { content: ""; inline-size: .55rem; block-size: .55rem; border-radius: 50%; background: var(--g-color-border-strong); }
|
|
889
|
+
.g-autosave-status.is-saving::before { border: 2px solid var(--g-color-border); border-block-start-color: var(--g-color-primary); background: transparent; animation: g-form-spin .75s linear infinite; }
|
|
890
|
+
.g-autosave-status.is-saved::before { background: var(--g-color-success); }
|
|
891
|
+
.g-autosave-status.is-error::before { background: var(--g-color-danger); }
|
|
892
|
+
.g-form-progress { display: grid; gap: var(--g-space-2); }
|
|
893
|
+
.g-form-progress-meta { display: flex; justify-content: space-between; gap: var(--g-space-3); color: var(--g-color-text-muted); font-size: var(--g-font-size-xs); }
|
|
894
|
+
.g-form-progress-track { block-size: .35rem; overflow: hidden; background: var(--g-color-border); }
|
|
895
|
+
.g-form-progress-value { inline-size: var(--g-form-progress, 0%); block-size: 100%; background: var(--g-color-primary); transition: inline-size var(--g-duration-normal); }
|
|
896
|
+
.g-form-review { display: grid; border-block-start: 1px solid var(--g-color-border); }
|
|
897
|
+
.g-form-review-row { display: grid; grid-template-columns: minmax(8rem, .4fr) minmax(0, 1fr) auto; gap: var(--g-space-3); padding-block: var(--g-space-3); border-block-end: 1px solid var(--g-color-border); }
|
|
898
|
+
.g-form-review-label { color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); }
|
|
899
|
+
.g-form-review-value { min-width: 0; overflow-wrap: anywhere; }
|
|
900
|
+
.g-consent-group { display: grid; gap: var(--g-space-3); padding: var(--g-space-4); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-sm); background: var(--g-color-surface-subtle); }
|
|
901
|
+
.g-consent-group-title { font-weight: 700; }
|
|
902
|
+
.g-consent-group-description { color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); line-height: 1.55; }
|
|
903
|
+
|
|
904
|
+
@keyframes g-form-spin { to { transform: rotate(360deg); } }
|
|
905
|
+
|
|
906
|
+
@container gardener-form (max-width: 639.98px) {
|
|
907
|
+
.g-form-grid, .g-form-grid.is-three, .g-form-grid.is-four, .g-form-horizontal, .g-name-group { grid-template-columns: 1fr; }
|
|
908
|
+
.g-form-horizontal > .g-label, .g-form-horizontal > .g-field-header { padding-block-start: 0; }
|
|
909
|
+
.g-address-group { grid-template-columns: 1fr 1fr; }
|
|
910
|
+
.g-address-group > * { grid-column: 1 / -1; }
|
|
911
|
+
.g-phone-group { grid-template-columns: minmax(6rem, .4fr) minmax(0, 1fr); }
|
|
912
|
+
.g-phone-group > :last-child { grid-column: 1 / -1; }
|
|
913
|
+
}
|
|
914
|
+
|
|
915
|
+
@media (max-width: 639.98px) {
|
|
916
|
+
.g-form-grid, .g-form-grid.is-three, .g-form-grid.is-four, .g-form-horizontal, .g-name-group { grid-template-columns: 1fr; }
|
|
917
|
+
.g-form-horizontal > .g-label, .g-form-horizontal > .g-field-header { padding-block-start: 0; }
|
|
918
|
+
.g-address-group { grid-template-columns: 1fr 1fr; }
|
|
919
|
+
.g-address-group > * { grid-column: 1 / -1; }
|
|
920
|
+
.g-phone-group { grid-template-columns: minmax(6rem, .4fr) minmax(0, 1fr); }
|
|
921
|
+
.g-phone-group > :last-child { grid-column: 1 / -1; }
|
|
922
|
+
.g-date-range-group, .g-time-range-group { grid-template-columns: 1fr; }
|
|
923
|
+
.g-range-separator { text-align: start; }
|
|
924
|
+
.g-repeatable-item { grid-template-columns: 1fr; }
|
|
925
|
+
.g-form-actions:not(.is-between) > .g-btn { flex: 1 1 auto; }
|
|
926
|
+
.g-form-review-row { grid-template-columns: 1fr auto; }
|
|
927
|
+
.g-form-review-value { grid-column: 1 / -1; grid-row: 2; }
|
|
928
|
+
}
|
|
929
|
+
|
|
930
|
+
@media (prefers-reduced-motion: reduce) {
|
|
931
|
+
.g-autosave-status.is-saving::before { animation-duration: 1.5s; }
|
|
932
|
+
.g-form-progress-value { transition: none; }
|
|
933
|
+
}
|
|
934
|
+
|
|
935
|
+
@media print {
|
|
936
|
+
.g-form-actions, .g-repeatable-actions, [data-g-password-button], [data-g-clear-button], [data-g-repeatable-add], [data-g-repeatable-remove] { display: none !important; }
|
|
937
|
+
.g-form, .g-form-section, .g-fieldset, .g-consent-group { break-inside: avoid; }
|
|
938
|
+
.g-form-actions.is-sticky { position: static; }
|
|
939
|
+
.g-input, .g-textarea, .g-select { border-color: var(--g-color-border); background: transparent; }
|
|
940
|
+
}
|
|
941
|
+
}
|
|
942
|
+
|
|
943
|
+
@layer gardener.components {
|
|
944
|
+
.g-navbar { display: flex; min-height: var(--g-header-height); align-items: center; gap: var(--g-space-4); padding-inline: var(--g-space-page-x); border-bottom: 1px solid var(--g-color-border); background: var(--g-color-surface); }
|
|
945
|
+
.g-navbar-brand { display: inline-flex; align-items: center; gap: var(--g-space-2); color: var(--g-color-text); font-size: var(--g-font-size-lg); font-weight: 700; text-decoration: none; }
|
|
946
|
+
.g-navbar-nav { display: flex; align-items: center; gap: var(--g-space-1); margin: 0; padding: 0; list-style: none; }
|
|
947
|
+
.g-nav-link { display: inline-flex; min-height: var(--g-control-height-md); align-items: center; gap: var(--g-space-2); padding: var(--g-space-2) var(--g-space-3); border-radius: var(--g-radius-md); color: var(--g-color-text-muted); text-decoration: none; }
|
|
948
|
+
.g-nav-link:hover { background: var(--g-color-surface-subtle); color: var(--g-color-text); }
|
|
949
|
+
.g-nav-link:is(.is-active, [aria-current="page"]) { background: var(--g-color-primary-soft); color: var(--g-color-primary-text); font-weight: 600; }
|
|
950
|
+
|
|
951
|
+
.g-sidebar { display: flex; flex-direction: column; min-height: 100%; padding: var(--g-space-3); background: var(--g-color-surface); }
|
|
952
|
+
.g-sidebar-header, .g-sidebar-footer { padding: var(--g-space-3); }
|
|
953
|
+
.g-sidebar-nav { display: grid; gap: var(--g-space-1); margin: 0; padding: 0; list-style: none; }
|
|
954
|
+
.g-sidebar-section { margin-block-start: var(--g-space-5); padding: var(--g-space-2) var(--g-space-3); color: var(--g-color-text-subtle); font-size: var(--g-font-size-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
|
|
955
|
+
.g-sidebar-link { display: flex; min-height: var(--g-control-height-md); align-items: center; gap: var(--g-space-3); padding: var(--g-space-2) var(--g-space-3); border-radius: var(--g-radius-md); color: var(--g-color-text-muted); text-decoration: none; }
|
|
956
|
+
.g-sidebar-link:hover { background: var(--g-color-surface-subtle); color: var(--g-color-text); }
|
|
957
|
+
.g-sidebar-link:is(.is-active, [aria-current="page"]) { background: var(--g-color-primary-soft); color: var(--g-color-primary-text); font-weight: 600; }
|
|
958
|
+
.g-sidebar-badge { margin-inline-start: auto; }
|
|
959
|
+
|
|
960
|
+
.g-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-2); margin: 0; padding: 0; list-style: none; color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); }
|
|
961
|
+
.g-breadcrumb-item { display: inline-flex; align-items: center; gap: var(--g-space-2); }
|
|
962
|
+
.g-breadcrumb-item + .g-breadcrumb-item::before { content: "/"; color: var(--g-color-text-subtle); }
|
|
963
|
+
[dir="rtl"] .g-breadcrumb-item + .g-breadcrumb-item::before { content: "\\"; }
|
|
964
|
+
|
|
965
|
+
.g-tabs { border-bottom: 1px solid var(--g-color-border); }
|
|
966
|
+
.g-tab-list { display: flex; gap: var(--g-space-1); overflow-x: auto; scrollbar-width: none; }
|
|
967
|
+
.g-tab { position: relative; display: inline-flex; min-height: var(--g-control-height-lg); flex: 0 0 auto; align-items: center; gap: var(--g-space-2); padding: var(--g-space-2) var(--g-space-4); border: 0; background: transparent; color: var(--g-color-text-muted); cursor: pointer; }
|
|
968
|
+
.g-tab:hover { color: var(--g-color-text); }
|
|
969
|
+
.g-tab[aria-selected="true"] { color: var(--g-color-primary-text); font-weight: 600; }
|
|
970
|
+
.g-tab[aria-selected="true"]::after { content: ""; position: absolute; inset: auto 0 -1px; height: 2px; background: var(--g-color-primary); }
|
|
971
|
+
.g-tab-panel { padding-block: var(--g-space-4); }
|
|
972
|
+
|
|
973
|
+
.g-segmented { display: inline-flex; gap: var(--g-space-1); padding: var(--g-space-1); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-lg); background: var(--g-color-surface-subtle); }
|
|
974
|
+
.g-segmented-item { min-height: var(--g-control-height-sm); padding-inline: var(--g-space-3); border: 0; border-radius: var(--g-radius-md); background: transparent; color: var(--g-color-text-muted); cursor: pointer; }
|
|
975
|
+
.g-segmented-item[aria-pressed="true"] { background: var(--g-color-surface); color: var(--g-color-text); box-shadow: var(--g-shadow-xs); }
|
|
976
|
+
|
|
977
|
+
.g-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-1); margin: 0; padding: 0; list-style: none; }
|
|
978
|
+
.g-page-link { display: inline-grid; min-width: var(--g-control-height-md); min-height: var(--g-control-height-md); place-items: center; padding-inline: var(--g-space-2); border: 1px solid transparent; border-radius: var(--g-radius-md); color: var(--g-color-text-muted); text-decoration: none; }
|
|
979
|
+
.g-page-link:hover { border-color: var(--g-color-border); background: var(--g-color-surface-subtle); color: var(--g-color-text); }
|
|
980
|
+
.g-page-link:is(.is-active, [aria-current="page"]) { border-color: var(--g-color-primary); background: var(--g-color-primary); color: var(--g-color-on-primary); }
|
|
981
|
+
.g-page-link[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
|
|
982
|
+
|
|
983
|
+
.g-menu { min-width: 12rem; margin: 0; padding: var(--g-space-1); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-lg); background: var(--g-color-surface-raised); box-shadow: var(--g-shadow-lg); list-style: none; }
|
|
984
|
+
.g-menu-item { display: flex; width: 100%; min-height: var(--g-control-height-md); align-items: center; gap: var(--g-space-3); padding: var(--g-space-2) var(--g-space-3); border: 0; border-radius: var(--g-radius-md); background: transparent; color: var(--g-color-text); text-align: start; text-decoration: none; cursor: pointer; }
|
|
985
|
+
.g-menu-item:is(:hover, :focus-visible, [aria-selected="true"]) { background: var(--g-color-primary-soft); color: var(--g-color-primary-text); outline: 0; }
|
|
986
|
+
.g-menu-item-danger { color: var(--g-color-danger); }
|
|
987
|
+
.g-menu-label { padding: var(--g-space-2) var(--g-space-3); color: var(--g-color-text-subtle); font-size: var(--g-font-size-xs); font-weight: 650; }
|
|
988
|
+
.g-menu-divider { height: 1px; margin: var(--g-space-1) 0; background: var(--g-color-border); }
|
|
989
|
+
.g-menu-shortcut { margin-inline-start: auto; color: var(--g-color-text-subtle); font-size: var(--g-font-size-xs); }
|
|
990
|
+
.g-dropdown { position: relative; display: inline-block; }
|
|
991
|
+
.g-dropdown-menu { position: absolute; z-index: var(--g-z-dropdown); inset-block-start: calc(100% + var(--g-space-1)); inset-inline-start: 0; }
|
|
992
|
+
.g-dropdown-menu[data-g-align="end"] { inset-inline: auto 0; }
|
|
993
|
+
|
|
994
|
+
.g-stepper { display: flex; align-items: flex-start; counter-reset: g-step; }
|
|
995
|
+
.g-step { position: relative; flex: 1; display: grid; justify-items: center; gap: var(--g-space-2); color: var(--g-color-text-muted); text-align: center; counter-increment: g-step; }
|
|
996
|
+
.g-step::before { content: counter(g-step); z-index: 1; display: grid; inline-size: 2rem; block-size: 2rem; place-items: center; border: 1px solid var(--g-color-border-strong); border-radius: 50%; background: var(--g-color-surface); font-size: var(--g-font-size-sm); }
|
|
997
|
+
.g-step:not(:last-child)::after { content: ""; position: absolute; inset-block-start: 1rem; inset-inline-start: 50%; inline-size: 100%; border-top: 1px solid var(--g-color-border); }
|
|
998
|
+
.g-step:is(.is-active, .is-complete) { color: var(--g-color-primary-text); font-weight: 600; }
|
|
999
|
+
.g-step:is(.is-active, .is-complete)::before { border-color: var(--g-color-primary); background: var(--g-color-primary); color: var(--g-color-on-primary); }
|
|
1000
|
+
.g-step.is-complete:not(:last-child)::after { border-color: var(--g-color-primary); }
|
|
1001
|
+
|
|
1002
|
+
.g-command-palette { width: min(42rem, calc(100vw - 2rem)); overflow: hidden; border: 1px solid var(--g-color-border); border-radius: var(--g-radius-lg); background: var(--g-color-surface-raised); box-shadow: var(--g-shadow-xl); }
|
|
1003
|
+
.g-command-input { width: 100%; min-height: 3.5rem; padding-inline: var(--g-space-5); border: 0; border-bottom: 1px solid var(--g-color-border); background: transparent; color: var(--g-color-text); outline: 0; }
|
|
1004
|
+
.g-command-results { max-height: min(60vh, 30rem); overflow-y: auto; padding: var(--g-space-2); }
|
|
1005
|
+
|
|
1006
|
+
@media (max-width: 767.98px) {
|
|
1007
|
+
.g-navbar-nav { display: none; }
|
|
1008
|
+
.g-step-label { font-size: var(--g-font-size-xs); }
|
|
1009
|
+
}
|
|
1010
|
+
}
|
|
1011
|
+
|
|
1012
|
+
@layer gardener.components {
|
|
1013
|
+
/* Shared navigation contract */
|
|
1014
|
+
.g-nav-group { display: grid; gap: var(--g-space-1); margin: 0; padding: 0; list-style: none; }
|
|
1015
|
+
.g-nav-group-title { padding: var(--g-space-2) var(--g-space-3); color: var(--g-color-text-subtle); font-size: var(--g-font-size-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
|
|
1016
|
+
.g-nav-item { display: flex; min-width: 0; min-height: var(--g-control-height-md); align-items: center; gap: var(--g-space-2); padding: var(--g-space-2) var(--g-space-3); border: 0; border-radius: var(--g-radius-md); background: transparent; color: var(--g-color-text-muted); text-align: start; text-decoration: none; cursor: pointer; }
|
|
1017
|
+
.g-nav-item:is(:hover, :focus-visible) { background: var(--g-color-surface-subtle); color: var(--g-color-text); }
|
|
1018
|
+
.g-nav-item:is(.is-active, [aria-current="page"], [aria-current="location"], [aria-selected="true"]) { background: var(--g-color-primary-soft); color: var(--g-color-primary-text); font-weight: 600; }
|
|
1019
|
+
.g-nav-item[aria-disabled="true"], .g-nav-item:disabled { opacity: .45; pointer-events: none; }
|
|
1020
|
+
.g-nav-icon { display: inline-grid; flex: 0 0 auto; inline-size: 1.25rem; block-size: 1.25rem; place-items: center; }
|
|
1021
|
+
.g-nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
1022
|
+
.g-nav-badge { min-width: 1.25rem; margin-inline-start: auto; padding-inline: var(--g-space-1); border-radius: var(--g-radius-sm); background: var(--g-color-surface-subtle); color: var(--g-color-text-muted); font-size: var(--g-font-size-xs); text-align: center; }
|
|
1023
|
+
.g-nav-separator { flex: 0 0 1px; align-self: stretch; min-block-size: 1px; margin: var(--g-space-1); background: var(--g-color-border); }
|
|
1024
|
+
|
|
1025
|
+
/* Site, enterprise and product bars */
|
|
1026
|
+
.g-navbar-start, .g-navbar-center, .g-navbar-end { display: flex; min-width: 0; align-items: center; gap: var(--g-space-2); }
|
|
1027
|
+
.g-navbar-center { flex: 1; justify-content: center; }
|
|
1028
|
+
.g-navbar-end { margin-inline-start: auto; }
|
|
1029
|
+
.g-navbar-toggle { display: none; }
|
|
1030
|
+
.g-primary-nav, .g-utility-nav, .g-subnav { display: flex; min-width: 0; align-items: center; gap: var(--g-space-1); margin: 0; padding: 0; list-style: none; }
|
|
1031
|
+
.g-primary-nav { flex: 1; }
|
|
1032
|
+
.g-primary-nav-link, .g-utility-nav-link, .g-subnav-link { display: inline-flex; min-height: var(--g-control-height-md); flex: 0 0 auto; align-items: center; gap: var(--g-space-2); padding: var(--g-space-2) var(--g-space-3); border-radius: var(--g-radius-md); color: var(--g-color-text-muted); text-decoration: none; }
|
|
1033
|
+
.g-primary-nav-link:is(:hover, [aria-current="page"]), .g-utility-nav-link:is(:hover, [aria-current="page"]), .g-subnav-link:is(:hover, [aria-current="page"]) { background: var(--g-color-surface-subtle); color: var(--g-color-text); }
|
|
1034
|
+
.g-primary-nav-link[aria-current="page"], .g-subnav-link[aria-current="page"] { color: var(--g-color-primary-text); font-weight: 600; }
|
|
1035
|
+
.g-utility-nav { margin-inline-start: auto; font-size: var(--g-font-size-sm); }
|
|
1036
|
+
.g-subnav { overflow-x: auto; padding: var(--g-space-2) var(--g-space-page-x); border-block-end: 1px solid var(--g-color-border); background: var(--g-color-surface); scrollbar-width: thin; }
|
|
1037
|
+
|
|
1038
|
+
/* Side navigation, rail and hierarchy */
|
|
1039
|
+
.g-collapsible-nav { display: grid; align-content: start; min-width: 0; background: var(--g-color-surface); }
|
|
1040
|
+
.g-collapsible-nav-header { display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-2); min-height: var(--g-control-height-lg); padding: var(--g-space-2) var(--g-space-3); border-block-end: 1px solid var(--g-color-border); }
|
|
1041
|
+
.g-collapsible-nav-body { min-width: 0; overflow: auto; padding: var(--g-space-2); }
|
|
1042
|
+
.g-collapsible-nav-body[hidden] { display: none; }
|
|
1043
|
+
.g-collapsible-nav.is-collapsed .g-nav-label, .g-collapsible-nav.is-collapsed .g-nav-group-title, .g-collapsible-nav.is-collapsed .g-nav-badge { display: none; }
|
|
1044
|
+
.g-collapsible-nav.is-collapsed .g-nav-item { justify-content: center; padding-inline: var(--g-space-2); }
|
|
1045
|
+
.g-nav-rail { display: flex; inline-size: var(--g-nav-rail-width, 4.5rem); flex-direction: column; align-items: stretch; gap: var(--g-space-1); padding: var(--g-space-2); border-inline-end: 1px solid var(--g-color-border); background: var(--g-color-surface); }
|
|
1046
|
+
.g-nav-rail-item { position: relative; display: grid; min-height: 3.5rem; place-items: center; gap: var(--g-space-1); padding: var(--g-space-1); border: 0; border-radius: var(--g-radius-md); background: transparent; color: var(--g-color-text-muted); font-size: var(--g-font-size-xs); text-align: center; text-decoration: none; cursor: pointer; }
|
|
1047
|
+
.g-nav-rail-item:is(:hover, :focus-visible, [aria-current="page"]) { background: var(--g-color-surface-subtle); color: var(--g-color-text); }
|
|
1048
|
+
.g-nav-rail-item[aria-current="page"]::before { content: ""; position: absolute; inset-block: .5rem; inset-inline-start: calc(var(--g-space-2) * -1); inline-size: 2px; background: var(--g-color-primary); }
|
|
1049
|
+
.g-tree-nav { display: grid; gap: var(--g-space-1); margin: 0; padding: 0; list-style: none; }
|
|
1050
|
+
.g-tree-nav-group { display: grid; gap: var(--g-space-1); margin: 0; padding-inline-start: var(--g-space-5); list-style: none; }
|
|
1051
|
+
.g-tree-nav-row { display: flex; min-width: 0; align-items: center; gap: var(--g-space-1); }
|
|
1052
|
+
.g-tree-nav-toggle { display: inline-grid; flex: 0 0 auto; inline-size: var(--g-control-height-sm); block-size: var(--g-control-height-sm); place-items: center; border: 0; border-radius: var(--g-radius-sm); background: transparent; color: var(--g-color-text-muted); cursor: pointer; }
|
|
1053
|
+
.g-tree-nav-toggle[aria-expanded="true"] { rotate: 90deg; }
|
|
1054
|
+
.g-tree-nav [role="treeitem"][aria-expanded="true"] > .g-tree-nav-row .g-tree-nav-toggle { rotate: 90deg; }
|
|
1055
|
+
.g-tree-nav [role="treeitem"][aria-expanded="false"] > .g-tree-nav-group { display: none; }
|
|
1056
|
+
.g-tree-nav-row > .g-nav-item { flex: 1; }
|
|
1057
|
+
|
|
1058
|
+
/* Menus */
|
|
1059
|
+
.g-context-menu { position: fixed; z-index: var(--g-z-dropdown); min-width: 13rem; max-width: min(22rem, calc(100vw - 1rem)); max-height: min(28rem, calc(100vh - 1rem)); overflow: auto; margin: 0; padding: var(--g-space-1); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface-raised); box-shadow: var(--g-shadow-lg); list-style: none; }
|
|
1060
|
+
.g-context-menu[hidden] { display: none; }
|
|
1061
|
+
.g-mega-menu-section { min-width: 0; }
|
|
1062
|
+
.g-mega-menu-title { margin-block-end: var(--g-space-2); color: var(--g-color-text); font-size: var(--g-font-size-sm); }
|
|
1063
|
+
.g-mega-menu-list { display: grid; gap: var(--g-space-1); margin: 0; padding: 0; list-style: none; }
|
|
1064
|
+
|
|
1065
|
+
/* Selection navigation */
|
|
1066
|
+
.g-vertical-tabs { display: grid; grid-template-columns: minmax(10rem, var(--g-vertical-tabs-width, 14rem)) minmax(0, 1fr); min-width: 0; }
|
|
1067
|
+
.g-vertical-tab-list { display: grid; align-content: start; gap: var(--g-space-1); padding-inline-end: var(--g-space-3); border-inline-end: 1px solid var(--g-color-border); }
|
|
1068
|
+
.g-vertical-tab { display: flex; min-height: var(--g-control-height-md); align-items: center; gap: var(--g-space-2); padding: var(--g-space-2) var(--g-space-3); border: 0; border-inline-end: 2px solid transparent; border-radius: var(--g-radius-md) 0 0 var(--g-radius-md); background: transparent; color: var(--g-color-text-muted); text-align: start; cursor: pointer; }
|
|
1069
|
+
.g-vertical-tab:is(:hover, [aria-selected="true"]) { background: var(--g-color-surface-subtle); color: var(--g-color-text); }
|
|
1070
|
+
.g-vertical-tab[aria-selected="true"] { border-inline-end-color: var(--g-color-primary); color: var(--g-color-primary-text); font-weight: 600; }
|
|
1071
|
+
.g-vertical-tab-panel { min-width: 0; padding-inline-start: var(--g-space-5); }
|
|
1072
|
+
.g-pill-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-1); margin: 0; padding: 0; list-style: none; }
|
|
1073
|
+
.g-pill-nav-link { display: inline-flex; min-height: var(--g-control-height-sm); align-items: center; gap: var(--g-space-2); padding-inline: var(--g-space-3); border: 1px solid transparent; border-radius: var(--g-radius-md); color: var(--g-color-text-muted); text-decoration: none; }
|
|
1074
|
+
.g-pill-nav-link:is(:hover, [aria-current="page"]) { border-color: var(--g-color-border); background: var(--g-color-surface-subtle); color: var(--g-color-text); }
|
|
1075
|
+
.g-pill-nav-link[aria-current="page"] { border-color: var(--g-color-primary); background: var(--g-color-primary-soft); color: var(--g-color-primary-text); }
|
|
1076
|
+
|
|
1077
|
+
/* In-page navigation */
|
|
1078
|
+
.g-scrollspy-nav { position: sticky; inset-block-start: var(--g-space-4); display: grid; gap: var(--g-space-1); padding-inline-start: var(--g-space-3); border-inline-start: 1px solid var(--g-color-border); }
|
|
1079
|
+
.g-scrollspy-link { padding: var(--g-space-1) var(--g-space-2); border-inline-start: 2px solid transparent; color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); text-decoration: none; }
|
|
1080
|
+
.g-scrollspy-link[aria-current="location"] { border-inline-start-color: var(--g-color-primary); color: var(--g-color-primary-text); font-weight: 600; }
|
|
1081
|
+
.g-jump-nav { display: flex; align-items: end; gap: var(--g-space-2); }
|
|
1082
|
+
.g-jump-nav .g-field { flex: 1; }
|
|
1083
|
+
|
|
1084
|
+
/* Pagination and continuation */
|
|
1085
|
+
.g-cursor-pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-3); }
|
|
1086
|
+
.g-cursor-pagination-info { color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); text-align: center; }
|
|
1087
|
+
.g-cursor-pagination-actions { display: flex; gap: var(--g-space-2); }
|
|
1088
|
+
.g-load-more-nav { display: grid; justify-items: center; gap: var(--g-space-3); padding-block: var(--g-space-4); }
|
|
1089
|
+
.g-load-more-status { color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); }
|
|
1090
|
+
|
|
1091
|
+
/* Workflow navigation */
|
|
1092
|
+
.g-wizard-nav { display: grid; grid-template-columns: minmax(10rem, var(--g-wizard-nav-width, 15rem)) minmax(0, 1fr); min-width: 0; }
|
|
1093
|
+
.g-wizard-nav-steps { display: grid; align-content: start; gap: var(--g-space-2); margin: 0; padding: 0 var(--g-space-4) 0 0; border-inline-end: 1px solid var(--g-color-border); list-style: none; counter-reset: g-wizard; }
|
|
1094
|
+
.g-wizard-nav-step { position: relative; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--g-space-2); align-items: start; color: var(--g-color-text-muted); counter-increment: g-wizard; }
|
|
1095
|
+
.g-wizard-nav-step::before { content: counter(g-wizard); display: grid; inline-size: 1.75rem; block-size: 1.75rem; place-items: center; border: 1px solid var(--g-color-border-strong); border-radius: 50%; background: var(--g-color-surface); font-size: var(--g-font-size-xs); }
|
|
1096
|
+
.g-wizard-nav-step:is(.is-active, .is-complete) { color: var(--g-color-text); }
|
|
1097
|
+
.g-wizard-nav-step:is(.is-active, .is-complete)::before { border-color: var(--g-color-primary); background: var(--g-color-primary); color: var(--g-color-on-primary); }
|
|
1098
|
+
.g-wizard-nav-label { padding-block-start: var(--g-space-1); }
|
|
1099
|
+
.g-wizard-nav-content { min-width: 0; padding-inline-start: var(--g-space-6); }
|
|
1100
|
+
.g-back-nav { display: inline-flex; min-height: var(--g-control-height-md); align-items: center; gap: var(--g-space-2); color: var(--g-color-text-muted); text-decoration: none; }
|
|
1101
|
+
.g-back-nav:hover { color: var(--g-color-primary-text); }
|
|
1102
|
+
.g-prev-next-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g-space-3); padding-block: var(--g-space-5); border-block-start: 1px solid var(--g-color-border); }
|
|
1103
|
+
.g-prev-next-link { display: grid; gap: var(--g-space-1); min-width: 0; padding: var(--g-space-3); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); color: var(--g-color-text); text-decoration: none; }
|
|
1104
|
+
.g-prev-next-link:last-child { text-align: end; }
|
|
1105
|
+
.g-prev-next-direction { color: var(--g-color-text-muted); font-size: var(--g-font-size-xs); }
|
|
1106
|
+
.g-skip-nav { position: fixed; z-index: var(--g-z-tooltip); inset-block-start: var(--g-space-2); inset-inline-start: var(--g-space-2); display: flex; gap: var(--g-space-2); transform: translateY(calc(-100% - var(--g-space-4))); }
|
|
1107
|
+
.g-skip-nav:focus-within { transform: translateY(0); }
|
|
1108
|
+
.g-skip-nav-link { padding: var(--g-space-2) var(--g-space-3); border: 2px solid var(--g-color-primary); border-radius: var(--g-radius-md); background: var(--g-color-surface); color: var(--g-color-primary-text); box-shadow: var(--g-shadow-md); }
|
|
1109
|
+
|
|
1110
|
+
/* Mobile navigation */
|
|
1111
|
+
.g-mobile-top-nav { display: none; min-height: var(--g-header-height); align-items: center; justify-content: space-between; gap: var(--g-space-2); padding-inline: var(--g-space-3); border-block-end: 1px solid var(--g-color-border); background: var(--g-color-surface); }
|
|
1112
|
+
.g-mobile-top-nav-title { min-width: 0; overflow: hidden; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
|
|
1113
|
+
.g-bottom-nav, .g-mobile-tab-bar { position: fixed; z-index: var(--g-z-sticky); inset: auto 0 0; display: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: var(--g-space-1) var(--g-space-2) calc(var(--g-space-1) + env(safe-area-inset-bottom)); border-block-start: 1px solid var(--g-color-border); background: color-mix(in srgb, var(--g-color-surface) 94%, transparent); box-shadow: 0 -2px 8px rgb(15 23 42 / .06); }
|
|
1114
|
+
.g-bottom-nav-item, .g-mobile-tab-item { position: relative; display: grid; min-width: 0; min-height: 3.25rem; place-items: center; align-content: center; gap: 2px; padding: var(--g-space-1); border: 0; border-radius: var(--g-radius-md); background: transparent; color: var(--g-color-text-muted); font-size: var(--g-font-size-xs); text-decoration: none; }
|
|
1115
|
+
.g-bottom-nav-item:is([aria-current="page"], .is-active), .g-mobile-tab-item:is([aria-selected="true"], .is-active) { color: var(--g-color-primary-text); font-weight: 600; }
|
|
1116
|
+
.g-bottom-nav-item:is([aria-current="page"], .is-active)::before, .g-mobile-tab-item:is([aria-selected="true"], .is-active)::before { content: ""; position: absolute; inset-block-start: 0; inline-size: 1.5rem; block-size: 2px; background: var(--g-color-primary); }
|
|
1117
|
+
.g-drawer-nav { position: fixed; z-index: var(--g-z-overlay); inset-block: 0; inset-inline-start: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; inline-size: min(20rem, calc(100vw - 3rem)); padding: var(--g-space-3); background: var(--g-color-surface); box-shadow: var(--g-shadow-xl); transform: translateX(-105%); transition: transform var(--g-duration-normal) var(--g-ease-standard); }
|
|
1118
|
+
[dir="rtl"] .g-drawer-nav { transform: translateX(105%); }
|
|
1119
|
+
.g-drawer-nav.is-open { transform: translateX(0); }
|
|
1120
|
+
.g-drawer-nav[hidden] { display: none; }
|
|
1121
|
+
.g-drawer-nav-header, .g-drawer-nav-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-2); padding: var(--g-space-2); }
|
|
1122
|
+
.g-drawer-nav-body { min-height: 0; overflow: auto; padding-block: var(--g-space-2); }
|
|
1123
|
+
|
|
1124
|
+
/* Command, quick, locale and account navigation */
|
|
1125
|
+
.g-command-nav { display: grid; gap: var(--g-space-1); margin: 0; padding: var(--g-space-2); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); list-style: none; }
|
|
1126
|
+
.g-command-nav-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--g-space-3); align-items: center; min-height: var(--g-control-height-md); padding: var(--g-space-2) var(--g-space-3); border-radius: var(--g-radius-md); color: var(--g-color-text); text-decoration: none; }
|
|
1127
|
+
.g-command-nav-item:is(:hover, :focus-visible, [aria-selected="true"]) { background: var(--g-color-primary-soft); color: var(--g-color-primary-text); outline: 0; }
|
|
1128
|
+
.g-command-nav-key { color: var(--g-color-text-subtle); font-size: var(--g-font-size-xs); }
|
|
1129
|
+
.g-quick-nav { display: flex; flex-wrap: wrap; gap: var(--g-space-2); }
|
|
1130
|
+
.g-quick-nav-item { display: inline-flex; min-height: var(--g-control-height-sm); align-items: center; gap: var(--g-space-2); padding-inline: var(--g-space-3); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); color: var(--g-color-text); text-decoration: none; }
|
|
1131
|
+
.g-quick-nav-item:hover { border-color: var(--g-color-border-strong); background: var(--g-color-surface-subtle); }
|
|
1132
|
+
.g-locale-nav, .g-account-nav { position: relative; display: inline-flex; }
|
|
1133
|
+
.g-locale-nav-trigger, .g-account-nav-trigger { display: inline-flex; min-height: var(--g-control-height-md); align-items: center; gap: var(--g-space-2); padding-inline: var(--g-space-3); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); color: var(--g-color-text); cursor: pointer; }
|
|
1134
|
+
.g-locale-nav-menu, .g-account-nav-menu { position: absolute; z-index: var(--g-z-dropdown); inset-block-start: calc(100% + var(--g-space-1)); inset-inline-end: 0; }
|
|
1135
|
+
|
|
1136
|
+
@container (max-width: 40rem) {
|
|
1137
|
+
.g-nav-container .g-primary-nav, .g-nav-container .g-utility-nav { display: none; }
|
|
1138
|
+
.g-nav-container .g-navbar-toggle { display: inline-grid; }
|
|
1139
|
+
.g-nav-container .g-vertical-tabs, .g-nav-container .g-wizard-nav { grid-template-columns: minmax(0, 1fr); }
|
|
1140
|
+
.g-nav-container .g-vertical-tab-list, .g-nav-container .g-wizard-nav-steps { display: flex; overflow-x: auto; padding: 0 0 var(--g-space-2); border: 0; border-block-end: 1px solid var(--g-color-border); }
|
|
1141
|
+
.g-nav-container .g-vertical-tab-panel, .g-nav-container .g-wizard-nav-content { padding: var(--g-space-4) 0 0; }
|
|
1142
|
+
}
|
|
1143
|
+
.g-nav-container { container-type: inline-size; }
|
|
1144
|
+
|
|
1145
|
+
@media (max-width: 767.98px) {
|
|
1146
|
+
.g-navbar-toggle, .g-mobile-top-nav { display: flex; }
|
|
1147
|
+
.g-primary-nav, .g-utility-nav { display: none; }
|
|
1148
|
+
.g-bottom-nav, .g-mobile-tab-bar { display: grid; }
|
|
1149
|
+
.g-vertical-tabs, .g-wizard-nav { grid-template-columns: minmax(0, 1fr); }
|
|
1150
|
+
.g-vertical-tab-list, .g-wizard-nav-steps { display: flex; overflow-x: auto; padding: 0 0 var(--g-space-2); border: 0; border-block-end: 1px solid var(--g-color-border); }
|
|
1151
|
+
.g-vertical-tab, .g-wizard-nav-step { flex: 0 0 auto; }
|
|
1152
|
+
.g-vertical-tab-panel, .g-wizard-nav-content { padding: var(--g-space-4) 0 0; }
|
|
1153
|
+
.g-prev-next-nav { grid-template-columns: minmax(0, 1fr); }
|
|
1154
|
+
.g-cursor-pagination { align-items: stretch; flex-direction: column; }
|
|
1155
|
+
.g-cursor-pagination-actions { justify-content: space-between; }
|
|
1156
|
+
}
|
|
1157
|
+
|
|
1158
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1159
|
+
.g-drawer-nav, .g-tree-nav-toggle, .g-skip-nav { transition: none; }
|
|
1160
|
+
}
|
|
1161
|
+
|
|
1162
|
+
@media (forced-colors: active) {
|
|
1163
|
+
.g-nav-item:is(.is-active, [aria-current]), .g-primary-nav-link[aria-current], .g-subnav-link[aria-current], .g-pill-nav-link[aria-current], .g-bottom-nav-item[aria-current] { outline: 2px solid Highlight; }
|
|
1164
|
+
}
|
|
1165
|
+
|
|
1166
|
+
@media print {
|
|
1167
|
+
.g-primary-nav, .g-utility-nav, .g-subnav, .g-sidebar, .g-collapsible-nav, .g-nav-rail, .g-activitybar, .g-menubar, .g-mega-menu, .g-dropdown, .g-context-menu, .g-pagination, .g-cursor-pagination, .g-load-more-nav, .g-skip-nav, .g-mobile-top-nav, .g-bottom-nav, .g-mobile-tab-bar, .g-drawer-nav, .g-command-nav, .g-jump-nav, .g-quick-nav, .g-locale-nav, .g-account-nav { display: none !important; }
|
|
1168
|
+
.g-breadcrumb, .g-anchor-nav, .g-scrollspy-nav, .g-prev-next-nav, .g-stepper, .g-wizard-nav { break-inside: avoid; }
|
|
1169
|
+
}
|
|
1170
|
+
}
|
|
1171
|
+
|
|
1172
|
+
@layer gardener.components {
|
|
1173
|
+
.g-dialog-backdrop, .g-drawer-backdrop { position: fixed; z-index: var(--g-z-overlay); inset: 0; display: grid; place-items: center; padding: var(--g-space-4); background: var(--g-color-overlay); opacity: 0; transition: opacity var(--g-duration-normal); }
|
|
1174
|
+
.g-dialog-backdrop.is-open, .g-drawer-backdrop.is-open { opacity: 1; }
|
|
1175
|
+
.g-dialog { width: min(100%, var(--g-dialog-width, 34rem)); max-height: min(90dvh, 52rem); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--g-color-border); border-radius: var(--g-radius-lg); background: var(--g-color-surface-raised); box-shadow: var(--g-shadow-xl); transform: translateY(0.5rem) scale(0.99); transition: transform var(--g-duration-normal) var(--g-ease-standard); }
|
|
1176
|
+
.is-open > .g-dialog, .g-dialog.is-open { transform: none; }
|
|
1177
|
+
.g-dialog-sm { --g-dialog-width: 24rem; }
|
|
1178
|
+
.g-dialog-lg { --g-dialog-width: 52rem; }
|
|
1179
|
+
.g-dialog-xl { --g-dialog-width: 72rem; }
|
|
1180
|
+
.g-dialog-header, .g-dialog-body, .g-dialog-footer { padding: var(--g-space-5); }
|
|
1181
|
+
.g-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--g-space-4); border-bottom: 1px solid var(--g-color-border); }
|
|
1182
|
+
.g-dialog-title { font-size: var(--g-font-size-xl); font-weight: 650; }
|
|
1183
|
+
.g-dialog-body { flex: 1; min-height: 0; overflow-y: auto; }
|
|
1184
|
+
.g-dialog-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--g-space-2); border-top: 1px solid var(--g-color-border); background: var(--g-color-surface-subtle); }
|
|
1185
|
+
|
|
1186
|
+
.g-drawer-backdrop { place-items: stretch start; padding: 0; }
|
|
1187
|
+
.g-drawer { width: min(90vw, var(--g-drawer-width, 24rem)); height: 100%; display: flex; flex-direction: column; background: var(--g-color-surface-raised); box-shadow: var(--g-shadow-xl); transform: translateX(-101%); transition: transform var(--g-duration-normal) var(--g-ease-standard); }
|
|
1188
|
+
.g-drawer-backdrop[data-g-side="end"] { place-items: stretch end; }
|
|
1189
|
+
.g-drawer-backdrop[data-g-side="end"] .g-drawer { transform: translateX(101%); }
|
|
1190
|
+
[dir="rtl"] .g-drawer { transform: translateX(101%); }
|
|
1191
|
+
[dir="rtl"] .g-drawer-backdrop[data-g-side="end"] .g-drawer { transform: translateX(-101%); }
|
|
1192
|
+
.g-drawer-backdrop.is-open .g-drawer { transform: none; }
|
|
1193
|
+
.g-drawer-header, .g-drawer-body, .g-drawer-footer { padding: var(--g-space-4); }
|
|
1194
|
+
.g-drawer-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--g-color-border); }
|
|
1195
|
+
.g-drawer-body { flex: 1; min-height: 0; overflow-y: auto; }
|
|
1196
|
+
.g-drawer-footer { border-top: 1px solid var(--g-color-border); }
|
|
1197
|
+
|
|
1198
|
+
.g-popover, .g-tooltip { position: absolute; z-index: var(--g-z-dropdown); }
|
|
1199
|
+
.g-popover { width: min(20rem, calc(100vw - 2rem)); padding: var(--g-space-4); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-lg); background: var(--g-color-surface-raised); box-shadow: var(--g-shadow-lg); }
|
|
1200
|
+
.g-tooltip { z-index: var(--g-z-tooltip); max-width: 18rem; padding: var(--g-space-1) var(--g-space-2); border-radius: var(--g-radius-sm); background: #111827; color: #fff; font-size: var(--g-font-size-xs); line-height: 1.35; pointer-events: none; }
|
|
1201
|
+
|
|
1202
|
+
.g-toast-region { position: fixed; z-index: var(--g-z-toast); inset-block-start: var(--g-space-4); inset-inline-end: var(--g-space-4); display: grid; width: min(24rem, calc(100vw - 2rem)); gap: var(--g-space-2); pointer-events: none; }
|
|
1203
|
+
.g-toast { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--g-space-3); padding: var(--g-space-4); border: 1px solid var(--g-color-border); border-inline-start: 3px solid var(--g-color-primary); border-radius: var(--g-radius-lg); background: var(--g-color-surface-raised); box-shadow: var(--g-shadow-lg); pointer-events: auto; animation: g-toast-in var(--g-duration-normal) var(--g-ease-standard); }
|
|
1204
|
+
.g-toast-success { border-inline-start-color: var(--g-color-success); }
|
|
1205
|
+
.g-toast-danger { border-inline-start-color: var(--g-color-danger); }
|
|
1206
|
+
.g-toast-warning { border-inline-start-color: var(--g-color-warning); }
|
|
1207
|
+
.g-toast-title { font-weight: 650; }
|
|
1208
|
+
.g-toast-message { margin-block-start: var(--g-space-1); color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); }
|
|
1209
|
+
|
|
1210
|
+
.g-accordion { border-block-start: 1px solid var(--g-color-border); }
|
|
1211
|
+
.g-accordion-item { border-block-end: 1px solid var(--g-color-border); }
|
|
1212
|
+
.g-accordion-trigger { display: flex; width: 100%; min-height: 3rem; align-items: center; justify-content: space-between; gap: var(--g-space-4); padding: var(--g-space-3) 0; border: 0; background: transparent; color: var(--g-color-text); font-weight: 600; text-align: start; cursor: pointer; }
|
|
1213
|
+
.g-accordion-trigger::after { content: "+"; color: var(--g-color-text-muted); font-size: var(--g-font-size-xl); font-weight: 400; }
|
|
1214
|
+
.g-accordion-trigger[aria-expanded="true"]::after { content: "−"; }
|
|
1215
|
+
.g-accordion-panel { padding-block: 0 var(--g-space-4); color: var(--g-color-text-muted); }
|
|
1216
|
+
|
|
1217
|
+
.g-banner { display: flex; align-items: center; justify-content: center; gap: var(--g-space-3); padding: var(--g-space-2) var(--g-space-page-x); background: var(--g-color-primary); color: var(--g-color-on-primary); font-size: var(--g-font-size-sm); text-align: center; }
|
|
1218
|
+
.g-backdrop { position: fixed; z-index: var(--g-z-overlay); inset: 0; background: var(--g-color-overlay); }
|
|
1219
|
+
|
|
1220
|
+
@keyframes g-toast-in { from { opacity: 0; transform: translateX(1rem); } }
|
|
1221
|
+
@keyframes g-toast-in-rtl { from { opacity: 0; transform: translateX(-1rem); } }
|
|
1222
|
+
[dir="rtl"] .g-toast { animation-name: g-toast-in-rtl; }
|
|
1223
|
+
|
|
1224
|
+
@media (max-width: 575.98px) {
|
|
1225
|
+
.g-dialog-backdrop { align-items: end; padding: 0; }
|
|
1226
|
+
.g-dialog { width: 100%; max-height: calc(100dvh - env(safe-area-inset-top)); border-radius: var(--g-radius-xl) var(--g-radius-xl) 0 0; }
|
|
1227
|
+
.g-dialog-footer { padding-bottom: calc(var(--g-space-4) + env(safe-area-inset-bottom)); }
|
|
1228
|
+
.g-toast-region { inset: auto var(--g-space-3) calc(var(--g-space-3) + env(safe-area-inset-bottom)); width: auto; }
|
|
1229
|
+
}
|
|
1230
|
+
}
|
|
1231
|
+
|
|
1232
|
+
@layer gardener.components {
|
|
1233
|
+
.g-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--g-color-border); border-radius: var(--g-radius-lg); background: var(--g-color-surface); }
|
|
1234
|
+
.g-table { width: 100%; color: var(--g-color-text); font-size: var(--g-font-size-sm); }
|
|
1235
|
+
.g-table th, .g-table td { padding: var(--g-table-cell-y, var(--g-space-3)) var(--g-table-cell-x, var(--g-space-4)); border-bottom: 1px solid var(--g-color-border); text-align: start; vertical-align: middle; }
|
|
1236
|
+
.g-table th { background: var(--g-color-surface-subtle); color: var(--g-color-text-muted); font-size: var(--g-font-size-xs); font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; }
|
|
1237
|
+
.g-table tbody tr:last-child > * { border-bottom: 0; }
|
|
1238
|
+
.g-table-striped tbody tr:nth-child(even) { background: color-mix(in srgb, var(--g-color-surface-subtle) 55%, transparent); }
|
|
1239
|
+
.g-table-hover tbody tr:hover { background: var(--g-color-primary-soft); }
|
|
1240
|
+
.g-table-compact { --g-table-cell-y: var(--g-space-2); --g-table-cell-x: var(--g-space-3); }
|
|
1241
|
+
.g-table-cell-actions { width: 1%; white-space: nowrap; text-align: end !important; }
|
|
1242
|
+
.g-sort-button { display: inline-flex; align-items: center; gap: var(--g-space-1); padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
|
|
1243
|
+
|
|
1244
|
+
.g-data-grid { display: grid; min-height: 0; overflow: hidden; border: 1px solid var(--g-color-border); border-radius: var(--g-radius-lg); background: var(--g-color-surface); }
|
|
1245
|
+
.g-data-grid-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--g-space-3); padding: var(--g-space-3) var(--g-space-4); border-bottom: 1px solid var(--g-color-border); }
|
|
1246
|
+
.g-data-grid-body { min-height: 0; overflow: auto; }
|
|
1247
|
+
.g-data-grid-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-3); padding: var(--g-space-2) var(--g-space-4); border-top: 1px solid var(--g-color-border); color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); }
|
|
1248
|
+
|
|
1249
|
+
.g-kpi { padding: var(--g-space-5); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-lg); background: var(--g-color-surface); }
|
|
1250
|
+
.g-kpi-label { color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); font-weight: 600; }
|
|
1251
|
+
.g-kpi-value { margin-block-start: var(--g-space-2); font-size: clamp(1.75rem, 4vw, 2.25rem); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
|
|
1252
|
+
.g-kpi-change { display: inline-flex; align-items: center; gap: var(--g-space-1); margin-block-start: var(--g-space-3); font-size: var(--g-font-size-sm); }
|
|
1253
|
+
.g-kpi-change.is-up { color: var(--g-color-success); }
|
|
1254
|
+
.g-kpi-change.is-down { color: var(--g-color-danger); }
|
|
1255
|
+
|
|
1256
|
+
.g-stat-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-lg); background: var(--g-color-surface); }
|
|
1257
|
+
.g-stat { padding: var(--g-space-4); border-inline-end: 1px solid var(--g-color-border); }
|
|
1258
|
+
.g-stat:last-child { border-inline-end: 0; }
|
|
1259
|
+
.g-stat-value { font-size: var(--g-font-size-2xl); font-weight: 700; font-variant-numeric: tabular-nums; }
|
|
1260
|
+
.g-stat-label { color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); }
|
|
1261
|
+
|
|
1262
|
+
.g-description-list { display: grid; grid-template-columns: minmax(8rem, 0.35fr) minmax(0, 1fr); }
|
|
1263
|
+
.g-description-list dt, .g-description-list dd { padding: var(--g-space-3) var(--g-space-4); border-bottom: 1px solid var(--g-color-border); }
|
|
1264
|
+
.g-description-list dt { color: var(--g-color-text-muted); font-weight: 600; }
|
|
1265
|
+
|
|
1266
|
+
.g-list-group { margin: 0; padding: 0; border: 1px solid var(--g-color-border); border-radius: var(--g-radius-lg); background: var(--g-color-surface); list-style: none; overflow: hidden; }
|
|
1267
|
+
.g-list-item { display: flex; align-items: center; gap: var(--g-space-3); padding: var(--g-space-3) var(--g-space-4); border-bottom: 1px solid var(--g-color-border); }
|
|
1268
|
+
.g-list-item:last-child { border-bottom: 0; }
|
|
1269
|
+
.g-list-item-interactive:hover { background: var(--g-color-surface-subtle); }
|
|
1270
|
+
.g-list-item-content { flex: 1; min-width: 0; }
|
|
1271
|
+
.g-list-item-title { font-weight: 600; }
|
|
1272
|
+
.g-list-item-meta { color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); }
|
|
1273
|
+
|
|
1274
|
+
.g-tree, .g-tree ul { margin: 0; padding: 0; list-style: none; }
|
|
1275
|
+
.g-tree ul { padding-inline-start: var(--g-space-5); }
|
|
1276
|
+
[role="treeitem"][aria-expanded="false"] > [role="group"] { display: none; }
|
|
1277
|
+
.g-tree-item { display: flex; min-height: var(--g-control-height-md); align-items: center; gap: var(--g-space-2); padding: var(--g-space-1) var(--g-space-2); border-radius: var(--g-radius-md); }
|
|
1278
|
+
.g-tree-item:is(:hover, [aria-selected="true"]) { background: var(--g-color-primary-soft); color: var(--g-color-primary-text); }
|
|
1279
|
+
|
|
1280
|
+
.g-timeline { position: relative; display: grid; gap: var(--g-space-5); margin: 0; padding: 0; list-style: none; }
|
|
1281
|
+
.g-timeline::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0.4375rem; border-inline-start: 1px solid var(--g-color-border); }
|
|
1282
|
+
.g-timeline-item { position: relative; padding-inline-start: var(--g-space-8); }
|
|
1283
|
+
.g-timeline-marker { position: absolute; z-index: 1; inset-block-start: 0.25rem; inset-inline-start: 0; inline-size: 0.9375rem; block-size: 0.9375rem; border: 3px solid var(--g-color-surface); border-radius: 50%; background: var(--g-color-primary); box-shadow: 0 0 0 1px var(--g-color-border); }
|
|
1284
|
+
.g-timeline-time { color: var(--g-color-text-muted); font-size: var(--g-font-size-xs); }
|
|
1285
|
+
|
|
1286
|
+
.g-filter-bar { display: flex; flex-wrap: wrap; align-items: end; gap: var(--g-space-3); padding: var(--g-space-3); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-lg); background: var(--g-color-surface); }
|
|
1287
|
+
.g-filter-chip { display: inline-flex; min-height: var(--g-control-height-sm); align-items: center; gap: var(--g-space-2); padding-inline: var(--g-space-3); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface-subtle); font-size: var(--g-font-size-sm); }
|
|
1288
|
+
|
|
1289
|
+
.g-code-block { overflow: hidden; border: 1px solid var(--g-color-border); border-radius: var(--g-radius-lg); background: #0d1420; color: #e6edf5; }
|
|
1290
|
+
.g-code-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-3); min-height: 2.5rem; padding-inline: var(--g-space-4); border-bottom: 1px solid #273449; color: #9cacbf; font-size: var(--g-font-size-xs); }
|
|
1291
|
+
.g-code-block pre { margin: 0; padding: var(--g-space-4); overflow: auto; font-size: var(--g-font-size-sm); line-height: 1.65; }
|
|
1292
|
+
.g-terminal { overflow: hidden; border: 1px solid #263248; border-radius: var(--g-radius-lg); background: #080d14; color: #d8e1ed; box-shadow: var(--g-shadow-md); }
|
|
1293
|
+
.g-terminal-header { display: flex; min-height: 2.25rem; align-items: center; gap: var(--g-space-2); padding-inline: var(--g-space-3); border-bottom: 1px solid #263248; background: #111a28; }
|
|
1294
|
+
.g-terminal-dot { inline-size: 0.65rem; block-size: 0.65rem; border-radius: 50%; background: #64748b; }
|
|
1295
|
+
.g-terminal-body { max-height: 30rem; overflow: auto; padding: var(--g-space-4); font: var(--g-font-size-sm)/1.6 var(--g-font-mono); white-space: pre-wrap; }
|
|
1296
|
+
|
|
1297
|
+
.g-diff { overflow: auto; border: 1px solid var(--g-color-border); border-radius: var(--g-radius-lg); font: var(--g-font-size-sm)/1.5 var(--g-font-mono); }
|
|
1298
|
+
.g-diff-line { display: grid; grid-template-columns: 3rem minmax(0, 1fr); min-width: max-content; }
|
|
1299
|
+
.g-diff-number { padding-inline: var(--g-space-2); border-inline-end: 1px solid var(--g-color-border); color: var(--g-color-text-subtle); text-align: end; user-select: none; }
|
|
1300
|
+
.g-diff-code { padding-inline: var(--g-space-3); white-space: pre; }
|
|
1301
|
+
.g-diff-add { background: var(--g-color-success-soft); }
|
|
1302
|
+
.g-diff-remove { background: var(--g-color-danger-soft); }
|
|
1303
|
+
|
|
1304
|
+
.g-chart { position: relative; min-height: var(--g-chart-height, 18rem); padding: var(--g-space-4); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-lg); background: var(--g-color-surface); }
|
|
1305
|
+
.g-chart-legend { display: flex; flex-wrap: wrap; gap: var(--g-space-3); color: var(--g-color-text-muted); font-size: var(--g-font-size-xs); }
|
|
1306
|
+
.g-chart-legend-item { display: inline-flex; align-items: center; gap: var(--g-space-1); }
|
|
1307
|
+
.g-chart-legend-swatch { inline-size: 0.75rem; block-size: 0.75rem; background: var(--g-chart-color, var(--g-color-primary)); }
|
|
1308
|
+
|
|
1309
|
+
@media (max-width: 575.98px) {
|
|
1310
|
+
.g-stat-list { grid-template-columns: 1fr 1fr; }
|
|
1311
|
+
.g-stat { border-bottom: 1px solid var(--g-color-border); }
|
|
1312
|
+
.g-description-list { grid-template-columns: 1fr; }
|
|
1313
|
+
.g-description-list dt { padding-bottom: 0; border-bottom: 0; }
|
|
1314
|
+
}
|
|
1315
|
+
}
|
|
1316
|
+
|
|
1317
|
+
@layer gardener.components {
|
|
1318
|
+
/* Shared data composition contract */
|
|
1319
|
+
.g-data-title { min-width: 0; color: var(--g-color-text); font-weight: 650; }
|
|
1320
|
+
.g-data-subtitle, .g-data-meta { color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); }
|
|
1321
|
+
.g-data-number { font-variant-numeric: tabular-nums; text-align: end; }
|
|
1322
|
+
.g-data-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--g-space-2); }
|
|
1323
|
+
.g-data-status { display: inline-flex; align-items: center; gap: var(--g-space-1); color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); }
|
|
1324
|
+
.g-data-status::before { content: ""; inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: currentColor; }
|
|
1325
|
+
.g-data-status.is-success { color: var(--g-color-success); }
|
|
1326
|
+
.g-data-status.is-warning { color: var(--g-color-warning); }
|
|
1327
|
+
.g-data-status.is-danger, .g-data-status.is-error { color: var(--g-color-danger); }
|
|
1328
|
+
|
|
1329
|
+
/* Table family */
|
|
1330
|
+
.g-responsive-table { max-width: 100%; overflow: auto; border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); -webkit-overflow-scrolling: touch; }
|
|
1331
|
+
.g-responsive-table > .g-table { min-width: var(--g-table-min-width, 42rem); }
|
|
1332
|
+
.g-responsive-table.is-stacked > .g-table { min-width: 0; }
|
|
1333
|
+
.g-table-caption { padding: var(--g-space-3) var(--g-space-4); color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); text-align: start; }
|
|
1334
|
+
.g-table-row:is(.is-selected, [aria-selected="true"]) { background: var(--g-color-primary-soft); }
|
|
1335
|
+
.g-table-row.is-disabled { opacity: .55; }
|
|
1336
|
+
.g-table-cell-primary { min-width: 12rem; font-weight: 600; }
|
|
1337
|
+
.g-table-cell-secondary { color: var(--g-color-text-muted); }
|
|
1338
|
+
.g-table-cell-sticky-start { position: sticky; z-index: 1; inset-inline-start: 0; background: var(--g-color-surface); }
|
|
1339
|
+
.g-table-cell-sticky-end { position: sticky; z-index: 1; inset-inline-end: 0; background: var(--g-color-surface); box-shadow: -1px 0 var(--g-color-border); }
|
|
1340
|
+
[dir="rtl"] .g-table-cell-sticky-end { box-shadow: 1px 0 var(--g-color-border); }
|
|
1341
|
+
.g-table-checkbox { inline-size: 1%; white-space: nowrap; }
|
|
1342
|
+
.g-table-sort-indicator { inline-size: .75rem; color: var(--g-color-text-subtle); text-align: center; }
|
|
1343
|
+
[aria-sort="ascending"] .g-table-sort-indicator::before { content: "↑"; }
|
|
1344
|
+
[aria-sort="descending"] .g-table-sort-indicator::before { content: "↓"; }
|
|
1345
|
+
[aria-sort="none"] .g-table-sort-indicator::before { content: "↕"; }
|
|
1346
|
+
|
|
1347
|
+
.g-editable-grid { display: grid; max-width: 100%; min-width: 0; overflow: auto; border-block-start: 1px solid var(--g-color-border); border-inline-start: 1px solid var(--g-color-border); background: var(--g-color-surface); }
|
|
1348
|
+
.g-editable-grid-row { display: grid; grid-template-columns: var(--g-editable-columns, repeat(4, minmax(8rem, 1fr))); min-width: var(--g-editable-grid-min-width, 38rem); }
|
|
1349
|
+
.g-editable-grid-cell { min-width: 0; min-height: var(--g-control-height-md); padding: var(--g-space-2) var(--g-space-3); border-inline-end: 1px solid var(--g-color-border); border-block-end: 1px solid var(--g-color-border); }
|
|
1350
|
+
.g-editable-grid-cell[role="columnheader"] { background: var(--g-color-surface-subtle); color: var(--g-color-text-muted); font-size: var(--g-font-size-xs); font-weight: 700; }
|
|
1351
|
+
.g-editable-grid-cell:is([contenteditable="true"], .is-editing) { background: var(--g-color-surface); outline: 2px solid var(--g-color-primary); outline-offset: -2px; }
|
|
1352
|
+
.g-editable-grid-cell.is-invalid { background: var(--g-color-danger-soft); outline-color: var(--g-color-danger); }
|
|
1353
|
+
|
|
1354
|
+
.g-tree-table { min-width: 42rem; }
|
|
1355
|
+
.g-tree-table-toggle { display: inline-grid; inline-size: 1.5rem; block-size: 1.5rem; place-items: center; margin-inline-end: var(--g-space-1); border: 0; border-radius: var(--g-radius-sm); background: transparent; color: var(--g-color-text-muted); cursor: pointer; }
|
|
1356
|
+
.g-tree-table-toggle[aria-expanded="true"] { rotate: 90deg; }
|
|
1357
|
+
.g-tree-table-row { --g-tree-level: 0; }
|
|
1358
|
+
.g-tree-table-row > :first-child { padding-inline-start: calc(var(--g-space-3) + var(--g-tree-level) * var(--g-space-5)); }
|
|
1359
|
+
.g-tree-table-row[hidden] { display: none; }
|
|
1360
|
+
|
|
1361
|
+
.g-grouped-table tbody + tbody { border-block-start: 2px solid var(--g-color-border-strong); }
|
|
1362
|
+
.g-table-group-row > * { padding-block: var(--g-space-2); background: var(--g-color-surface-subtle); color: var(--g-color-text-muted); font-size: var(--g-font-size-xs); font-weight: 700; }
|
|
1363
|
+
.g-table-group-title { display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-3); }
|
|
1364
|
+
|
|
1365
|
+
.g-expandable-table { width: 100%; }
|
|
1366
|
+
.g-expandable-table-detail > td { padding: 0; background: var(--g-color-surface-subtle); }
|
|
1367
|
+
.g-expandable-table-detail[hidden] { display: none; }
|
|
1368
|
+
.g-table-detail-content { padding: var(--g-space-4) var(--g-space-6); border-block-end: 1px solid var(--g-color-border); }
|
|
1369
|
+
.g-row-disclosure { display: inline-grid; inline-size: var(--g-control-height-sm); block-size: var(--g-control-height-sm); place-items: center; border: 0; border-radius: var(--g-radius-sm); background: transparent; color: var(--g-color-text-muted); cursor: pointer; }
|
|
1370
|
+
.g-row-disclosure[aria-expanded="true"] { rotate: 90deg; }
|
|
1371
|
+
|
|
1372
|
+
.g-comparison-table { width: 100%; border-collapse: separate; border-spacing: 0; }
|
|
1373
|
+
.g-comparison-table th, .g-comparison-table td { min-width: 10rem; padding: var(--g-space-3); border-inline-end: 1px solid var(--g-color-border); border-block-end: 1px solid var(--g-color-border); text-align: center; }
|
|
1374
|
+
.g-comparison-table th:first-child, .g-comparison-table td:first-child { position: sticky; z-index: 1; inset-inline-start: 0; min-width: 12rem; background: var(--g-color-surface); text-align: start; }
|
|
1375
|
+
.g-comparison-table .is-highlighted { background: var(--g-color-primary-soft); }
|
|
1376
|
+
|
|
1377
|
+
/* Records, lists and streams */
|
|
1378
|
+
.g-key-value { display: grid; gap: 0; margin: 0; border-block-start: 1px solid var(--g-color-border); }
|
|
1379
|
+
.g-key-value-row { display: grid; grid-template-columns: minmax(8rem, .35fr) minmax(0, 1fr) auto; align-items: start; gap: var(--g-space-3); padding: var(--g-space-3); border-block-end: 1px solid var(--g-color-border); }
|
|
1380
|
+
.g-key-value-key { color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); }
|
|
1381
|
+
.g-key-value-value { min-width: 0; overflow-wrap: anywhere; }
|
|
1382
|
+
.g-key-value-action { align-self: center; }
|
|
1383
|
+
|
|
1384
|
+
.g-record-detail { display: grid; align-content: start; gap: var(--g-space-5); min-width: 0; }
|
|
1385
|
+
.g-record-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--g-space-4); padding-block-end: var(--g-space-4); border-block-end: 1px solid var(--g-color-border); }
|
|
1386
|
+
.g-record-detail-main { min-width: 0; }
|
|
1387
|
+
.g-record-detail-title { margin: 0; font-size: var(--g-font-size-xl); }
|
|
1388
|
+
.g-record-detail-sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--g-space-5); }
|
|
1389
|
+
.g-record-detail-section { min-width: 0; }
|
|
1390
|
+
.g-record-detail-section-title { margin-block-end: var(--g-space-3); font-size: var(--g-font-size-sm); }
|
|
1391
|
+
|
|
1392
|
+
.g-media-list, .g-dense-list { display: grid; margin: 0; padding: 0; border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); list-style: none; }
|
|
1393
|
+
.g-media-list-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--g-space-3); padding: var(--g-space-3); border-block-end: 1px solid var(--g-color-border); }
|
|
1394
|
+
.g-media-list-item:last-child, .g-dense-list-item:last-child { border-block-end: 0; }
|
|
1395
|
+
.g-media-list-media { inline-size: var(--g-media-list-size, 3rem); block-size: var(--g-media-list-size, 3rem); overflow: hidden; border-radius: var(--g-radius-md); background: var(--g-color-surface-subtle); object-fit: cover; }
|
|
1396
|
+
.g-media-list-content { min-width: 0; }
|
|
1397
|
+
.g-dense-list-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--g-space-2); min-height: var(--g-control-height-sm); padding: var(--g-space-1) var(--g-space-2); border-block-end: 1px solid var(--g-color-border); font-size: var(--g-font-size-sm); }
|
|
1398
|
+
|
|
1399
|
+
.g-audit-log { display: grid; align-content: start; border-block-start: 1px solid var(--g-color-border); }
|
|
1400
|
+
.g-audit-log-date { position: sticky; z-index: 1; inset-block-start: 0; padding: var(--g-space-2) var(--g-space-3); border-block-end: 1px solid var(--g-color-border); background: var(--g-color-surface-subtle); color: var(--g-color-text-muted); font-size: var(--g-font-size-xs); font-weight: 700; }
|
|
1401
|
+
.g-audit-log .g-audit-event { padding-inline: var(--g-space-3); }
|
|
1402
|
+
|
|
1403
|
+
/* Metrics and compact visualization */
|
|
1404
|
+
.g-metric-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--g-space-3); padding: var(--g-space-4); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); }
|
|
1405
|
+
.g-metric-card-main { min-width: 0; }
|
|
1406
|
+
.g-metric-card-label { color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); }
|
|
1407
|
+
.g-metric-card-value { margin-block-start: var(--g-space-1); font-size: var(--g-font-size-2xl); font-weight: 700; font-variant-numeric: tabular-nums; }
|
|
1408
|
+
.g-metric-card-trend { align-self: end; min-width: 5rem; }
|
|
1409
|
+
|
|
1410
|
+
.g-sparkline { display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(2px, 1fr); align-items: end; gap: 2px; inline-size: var(--g-sparkline-width, 6rem); block-size: var(--g-sparkline-height, 2.25rem); color: var(--g-chart-color, var(--g-color-primary)); }
|
|
1411
|
+
.g-sparkline-bar { block-size: var(--g-sparkline-value, 50%); min-block-size: 2px; background: currentColor; }
|
|
1412
|
+
.g-sparkline-svg { inline-size: 100%; block-size: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; }
|
|
1413
|
+
|
|
1414
|
+
.g-progress-stats { display: grid; gap: var(--g-space-3); }
|
|
1415
|
+
.g-progress-stat { display: grid; grid-template-columns: minmax(7rem, .3fr) minmax(8rem, 1fr) auto; align-items: center; gap: var(--g-space-3); }
|
|
1416
|
+
.g-progress-stat-label { min-width: 0; overflow: hidden; color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); text-overflow: ellipsis; white-space: nowrap; }
|
|
1417
|
+
.g-progress-stat-track { block-size: .5rem; overflow: hidden; background: var(--g-color-surface-subtle); }
|
|
1418
|
+
.g-progress-stat-value { inline-size: var(--g-progress-value, 0%); block-size: 100%; background: var(--g-color-primary); }
|
|
1419
|
+
.g-progress-stat-number { font-size: var(--g-font-size-sm); font-variant-numeric: tabular-nums; }
|
|
1420
|
+
|
|
1421
|
+
.g-data-legend { display: flex; flex-wrap: wrap; gap: var(--g-space-2) var(--g-space-4); margin: 0; padding: 0; list-style: none; }
|
|
1422
|
+
.g-data-legend-item { display: inline-flex; align-items: center; gap: var(--g-space-2); color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); }
|
|
1423
|
+
.g-data-legend-swatch { inline-size: .75rem; block-size: .75rem; border: 1px solid color-mix(in srgb, currentColor 20%, transparent); border-radius: var(--g-radius-sm); background: var(--g-legend-color, var(--g-color-primary)); }
|
|
1424
|
+
|
|
1425
|
+
.g-ranking { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: g-rank; }
|
|
1426
|
+
.g-ranking-item { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: var(--g-space-3); padding: var(--g-space-3); border-block-end: 1px solid var(--g-color-border); counter-increment: g-rank; }
|
|
1427
|
+
.g-ranking-item::before { content: counter(g-rank); display: grid; inline-size: 1.5rem; block-size: 1.5rem; place-items: center; color: var(--g-color-text-muted); font-size: var(--g-font-size-xs); font-weight: 700; }
|
|
1428
|
+
.g-ranking-item:nth-child(-n + 3)::before { background: var(--g-color-primary-soft); color: var(--g-color-primary-text); }
|
|
1429
|
+
.g-ranking-value { font-variant-numeric: tabular-nums; font-weight: 650; }
|
|
1430
|
+
|
|
1431
|
+
.g-status-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); }
|
|
1432
|
+
.g-status-summary-item { display: grid; gap: var(--g-space-1); padding: var(--g-space-3); border-inline-end: 1px solid var(--g-color-border); }
|
|
1433
|
+
.g-status-summary-item:last-child { border-inline-end: 0; }
|
|
1434
|
+
.g-status-summary-value { font-size: var(--g-font-size-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
|
|
1435
|
+
.g-status-summary-label { color: var(--g-color-text-muted); font-size: var(--g-font-size-xs); }
|
|
1436
|
+
|
|
1437
|
+
/* Matrix views */
|
|
1438
|
+
.g-data-matrix { max-width: 100%; overflow: auto; border: 1px solid var(--g-color-border); }
|
|
1439
|
+
.g-data-matrix-grid { display: grid; grid-template-columns: minmax(8rem, auto) repeat(var(--g-matrix-columns, 5), minmax(6rem, 1fr)); min-width: max-content; }
|
|
1440
|
+
.g-data-matrix-cell { display: grid; min-height: var(--g-control-height-md); place-items: center; padding: var(--g-space-2); border-inline-end: 1px solid var(--g-color-border); border-block-end: 1px solid var(--g-color-border); font-size: var(--g-font-size-sm); }
|
|
1441
|
+
.g-data-matrix-cell:is(.is-row-header, .is-column-header) { position: sticky; z-index: 1; background: var(--g-color-surface-subtle); color: var(--g-color-text-muted); font-size: var(--g-font-size-xs); font-weight: 700; }
|
|
1442
|
+
.g-data-matrix-cell.is-row-header { inset-inline-start: 0; justify-items: start; }
|
|
1443
|
+
.g-data-matrix-cell.is-column-header { inset-block-start: 0; }
|
|
1444
|
+
|
|
1445
|
+
.g-heatmap { display: grid; grid-template-columns: repeat(var(--g-heatmap-columns, 12), minmax(.75rem, 1fr)); gap: var(--g-heatmap-gap, 3px); }
|
|
1446
|
+
.g-heatmap-cell { aspect-ratio: 1; min-inline-size: .75rem; border-radius: var(--g-radius-sm); background: color-mix(in srgb, var(--g-heatmap-color, var(--g-color-primary)) var(--g-heatmap-value, 10%), var(--g-color-surface-subtle)); }
|
|
1447
|
+
.g-heatmap-cell:focus-visible { outline: 2px solid var(--g-color-primary); outline-offset: 1px; }
|
|
1448
|
+
|
|
1449
|
+
/* Data operations */
|
|
1450
|
+
.g-data-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--g-space-3); padding: var(--g-space-3); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); }
|
|
1451
|
+
.g-data-toolbar-start, .g-data-toolbar-center, .g-data-toolbar-end { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--g-space-2); }
|
|
1452
|
+
.g-data-toolbar-center { flex: 1; justify-content: center; }
|
|
1453
|
+
.g-data-toolbar-end { margin-inline-start: auto; }
|
|
1454
|
+
.g-data-toolbar-result { color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); white-space: nowrap; }
|
|
1455
|
+
|
|
1456
|
+
.g-column-chooser { display: grid; gap: var(--g-space-1); min-width: 15rem; max-height: 22rem; overflow: auto; padding: var(--g-space-2); }
|
|
1457
|
+
.g-column-chooser-item { display: flex; min-height: var(--g-control-height-sm); align-items: center; gap: var(--g-space-2); padding: var(--g-space-1) var(--g-space-2); border-radius: var(--g-radius-md); }
|
|
1458
|
+
.g-column-chooser-item:hover { background: var(--g-color-surface-subtle); }
|
|
1459
|
+
|
|
1460
|
+
.g-saved-views { display: flex; flex-wrap: wrap; gap: var(--g-space-2); }
|
|
1461
|
+
.g-saved-view { display: inline-flex; min-height: var(--g-control-height-sm); align-items: center; gap: var(--g-space-2); padding-inline: var(--g-space-3); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); color: var(--g-color-text-muted); cursor: pointer; }
|
|
1462
|
+
.g-saved-view:is(:hover, .is-active, [aria-pressed="true"]) { border-color: var(--g-color-primary); background: var(--g-color-primary-soft); color: var(--g-color-primary-text); }
|
|
1463
|
+
|
|
1464
|
+
.g-export-panel { display: grid; gap: var(--g-space-4); padding: var(--g-space-4); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); }
|
|
1465
|
+
.g-export-panel-header { display: flex; align-items: start; justify-content: space-between; gap: var(--g-space-3); }
|
|
1466
|
+
.g-export-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--g-space-2); }
|
|
1467
|
+
.g-export-option { display: grid; gap: var(--g-space-1); padding: var(--g-space-3); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); }
|
|
1468
|
+
.g-export-option:has(input:checked) { border-color: var(--g-color-primary); background: var(--g-color-primary-soft); }
|
|
1469
|
+
|
|
1470
|
+
.g-data-state { display: grid; min-height: var(--g-data-state-min, 12rem); place-items: center; align-content: center; gap: var(--g-space-3); padding: var(--g-space-6); border: 1px dashed var(--g-color-border-strong); background: var(--g-color-surface); color: var(--g-color-text-muted); text-align: center; }
|
|
1471
|
+
.g-data-state-visual { display: grid; inline-size: 3rem; block-size: 3rem; place-items: center; border-radius: var(--g-radius-md); background: var(--g-color-surface-subtle); color: var(--g-color-primary-text); font-size: var(--g-font-size-xl); }
|
|
1472
|
+
.g-data-state-title { color: var(--g-color-text); font-weight: 650; }
|
|
1473
|
+
.g-data-state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--g-space-2); }
|
|
1474
|
+
|
|
1475
|
+
.g-data-view-switcher, .g-table-density { display: inline-flex; gap: var(--g-space-1); padding: var(--g-space-1); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface-subtle); }
|
|
1476
|
+
.g-data-view-button, .g-table-density-button { display: inline-grid; min-width: var(--g-control-height-sm); min-height: var(--g-control-height-sm); place-items: center; padding-inline: var(--g-space-2); border: 0; border-radius: var(--g-radius-sm); background: transparent; color: var(--g-color-text-muted); cursor: pointer; }
|
|
1477
|
+
.g-data-view-button[aria-pressed="true"], .g-table-density-button[aria-pressed="true"] { background: var(--g-color-surface); color: var(--g-color-text); box-shadow: var(--g-shadow-xs); }
|
|
1478
|
+
|
|
1479
|
+
.g-selection-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--g-space-3); min-height: var(--g-control-height-lg); padding: var(--g-space-2) var(--g-space-3); border: 1px solid var(--g-color-primary); border-radius: var(--g-radius-md); background: var(--g-color-primary-soft); color: var(--g-color-primary-text); }
|
|
1480
|
+
.g-selection-summary[hidden] { display: none; }
|
|
1481
|
+
.g-selection-summary-count { font-weight: 650; }
|
|
1482
|
+
.g-selection-summary-actions { display: flex; flex-wrap: wrap; gap: var(--g-space-2); }
|
|
1483
|
+
|
|
1484
|
+
.g-filter-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-2); }
|
|
1485
|
+
.g-filter-summary-label { color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); }
|
|
1486
|
+
.g-filter-summary-chip { display: inline-flex; min-height: var(--g-control-height-sm); align-items: center; gap: var(--g-space-2); padding-inline: var(--g-space-2); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface-subtle); font-size: var(--g-font-size-sm); }
|
|
1487
|
+
.g-filter-summary-clear { margin-inline-start: auto; }
|
|
1488
|
+
|
|
1489
|
+
.g-sort-builder { display: grid; gap: var(--g-space-2); }
|
|
1490
|
+
.g-sort-rule { display: grid; grid-template-columns: auto minmax(8rem, 1fr) minmax(7rem, .6fr) auto; align-items: center; gap: var(--g-space-2); padding: var(--g-space-2); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); }
|
|
1491
|
+
.g-sort-rule-handle { color: var(--g-color-text-subtle); cursor: grab; }
|
|
1492
|
+
|
|
1493
|
+
.g-data-inspector { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 18rem; border: 1px solid var(--g-color-border); background: var(--g-color-surface); }
|
|
1494
|
+
.g-data-inspector-header, .g-data-inspector-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-3); padding: var(--g-space-3); }
|
|
1495
|
+
.g-data-inspector-header { border-block-end: 1px solid var(--g-color-border); }
|
|
1496
|
+
.g-data-inspector-footer { border-block-start: 1px solid var(--g-color-border); }
|
|
1497
|
+
.g-data-inspector-body { min-height: 0; overflow: auto; padding: var(--g-space-3); }
|
|
1498
|
+
|
|
1499
|
+
@container (max-width: 40rem) {
|
|
1500
|
+
.g-data-container .g-key-value-row { grid-template-columns: 1fr auto; }
|
|
1501
|
+
.g-data-container .g-key-value-value { grid-column: 1 / -1; }
|
|
1502
|
+
.g-data-container .g-record-detail-header, .g-data-container .g-data-toolbar { align-items: stretch; flex-direction: column; }
|
|
1503
|
+
.g-data-container .g-data-toolbar-end { margin-inline-start: 0; }
|
|
1504
|
+
.g-data-container .g-progress-stat { grid-template-columns: minmax(0, 1fr) auto; }
|
|
1505
|
+
.g-data-container .g-progress-stat-track { grid-column: 1 / -1; }
|
|
1506
|
+
}
|
|
1507
|
+
.g-data-container { container-type: inline-size; }
|
|
1508
|
+
|
|
1509
|
+
@media (max-width: 639.98px) {
|
|
1510
|
+
.g-responsive-table.is-stacked { overflow: visible; border: 0; }
|
|
1511
|
+
.g-responsive-table.is-stacked .g-table, .g-responsive-table.is-stacked tbody, .g-responsive-table.is-stacked tr, .g-responsive-table.is-stacked td { display: block; width: 100%; }
|
|
1512
|
+
.g-responsive-table.is-stacked .g-table-caption { display: block; width: 100%; }
|
|
1513
|
+
.g-responsive-table.is-stacked thead { position: absolute; overflow: hidden; inline-size: 1px; block-size: 1px; clip-path: inset(50%); white-space: nowrap; }
|
|
1514
|
+
.g-responsive-table.is-stacked tr { margin-block-end: var(--g-space-3); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); }
|
|
1515
|
+
.g-responsive-table.is-stacked td { display: grid; grid-template-columns: minmax(6rem, .4fr) minmax(0, 1fr); gap: var(--g-space-3); padding: var(--g-space-2) var(--g-space-3); text-align: start !important; }
|
|
1516
|
+
.g-responsive-table.is-stacked td::before { content: attr(data-g-label); color: var(--g-color-text-muted); font-size: var(--g-font-size-xs); font-weight: 650; }
|
|
1517
|
+
.g-key-value-row { grid-template-columns: 1fr auto; }
|
|
1518
|
+
.g-key-value-value { grid-column: 1 / -1; }
|
|
1519
|
+
.g-record-detail-header, .g-data-toolbar { align-items: stretch; flex-direction: column; }
|
|
1520
|
+
.g-data-toolbar-center { justify-content: flex-start; }
|
|
1521
|
+
.g-data-toolbar-end { margin-inline-start: 0; }
|
|
1522
|
+
.g-progress-stat { grid-template-columns: minmax(0, 1fr) auto; }
|
|
1523
|
+
.g-progress-stat-track { grid-column: 1 / -1; }
|
|
1524
|
+
.g-status-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
1525
|
+
.g-status-summary-item:nth-child(2n) { border-inline-end: 0; }
|
|
1526
|
+
.g-sort-rule { grid-template-columns: auto minmax(0, 1fr) auto; }
|
|
1527
|
+
.g-sort-rule > :nth-child(3) { grid-column: 2; }
|
|
1528
|
+
}
|
|
1529
|
+
|
|
1530
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1531
|
+
.g-tree-table-toggle, .g-row-disclosure, .g-progress-stat-value { transition: none; }
|
|
1532
|
+
}
|
|
1533
|
+
|
|
1534
|
+
@media (forced-colors: active) {
|
|
1535
|
+
.g-table-row:is(.is-selected, [aria-selected="true"]), .g-saved-view[aria-pressed="true"], .g-data-view-button[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
|
|
1536
|
+
.g-heatmap-cell { border: 1px solid CanvasText; }
|
|
1537
|
+
}
|
|
1538
|
+
|
|
1539
|
+
@media print {
|
|
1540
|
+
.g-data-toolbar, .g-column-chooser, .g-saved-views, .g-export-panel, .g-data-view-switcher, .g-table-density, .g-selection-summary, .g-filter-summary-clear, .g-sort-builder, .g-data-actions, .g-table-cell-actions, .g-row-disclosure { display: none !important; }
|
|
1541
|
+
.g-responsive-table, .g-data-grid-body, .g-data-matrix, .g-pivot, .g-virtual-list { overflow: visible !important; max-height: none !important; border-color: #999; }
|
|
1542
|
+
.g-table, .g-editable-grid, .g-tree-table, .g-comparison-table { min-width: 0 !important; font-size: 9pt; }
|
|
1543
|
+
.g-expandable-table-detail[hidden], .g-tree-table-row[hidden] { display: table-row; }
|
|
1544
|
+
.g-chart, .g-data-state, .g-record-detail, .g-audit-log { break-inside: avoid; }
|
|
1545
|
+
}
|
|
1546
|
+
}
|
|
1547
|
+
|
|
1548
|
+
@layer gardener.components {
|
|
1549
|
+
/* Category 09: selection, pickers and reusable batch-operation compositions. */
|
|
1550
|
+
.g-selection-container { container-type: inline-size; min-inline-size: 0; }
|
|
1551
|
+
.g-selection-control, .g-select-all-control, .g-invert-selection-control, .g-range-selection-control { display: flex; min-height: var(--g-control-height-md); align-items: center; gap: var(--g-space-2); color: var(--g-color-text); }
|
|
1552
|
+
.g-selection-control-meta { margin-inline-start: auto; color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); font-variant-numeric: tabular-nums; }
|
|
1553
|
+
.g-selection-scope { display: grid; gap: var(--g-space-2); padding: var(--g-space-3); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); }
|
|
1554
|
+
.g-selection-scope-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--g-space-2); }
|
|
1555
|
+
.g-selection-scope-title { font-weight: 650; }
|
|
1556
|
+
.g-selection-scope-list { display: grid; gap: 1px; overflow: auto; max-block-size: 22rem; }
|
|
1557
|
+
.g-selection-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--g-space-3); min-height: var(--g-control-height-lg); padding: var(--g-space-2) var(--g-space-3); border: 1px solid transparent; border-radius: var(--g-radius-md); cursor: pointer; }
|
|
1558
|
+
.g-selection-item:hover { background: var(--g-color-surface-subtle); }
|
|
1559
|
+
.g-selection-item:is(.is-selected, [aria-selected="true"]), .g-picker-option:is(.is-selected, [aria-selected="true"]) { border-color: var(--g-color-primary); background: var(--g-color-primary-soft); }
|
|
1560
|
+
.g-selection-item-content { min-inline-size: 0; }
|
|
1561
|
+
.g-selection-item-title { display: block; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
|
|
1562
|
+
.g-selection-item-description { display: block; overflow: hidden; color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); text-overflow: ellipsis; white-space: nowrap; }
|
|
1563
|
+
.g-selection-item-meta { color: var(--g-color-text-muted); font-size: var(--g-font-size-xs); }
|
|
1564
|
+
|
|
1565
|
+
.g-batch-toolbar { display: flex; position: sticky; z-index: var(--g-z-sticky); inset-block-end: calc(var(--g-space-3) + env(safe-area-inset-bottom)); flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--g-space-3); min-height: var(--g-control-height-lg); padding: var(--g-space-2) var(--g-space-3); border: 1px solid var(--g-color-primary); border-radius: var(--g-radius-md); background: var(--g-color-surface-raised); box-shadow: var(--g-shadow-lg); }
|
|
1566
|
+
.g-batch-toolbar[hidden] { display: none; }
|
|
1567
|
+
.g-batch-toolbar-summary { display: flex; align-items: center; gap: var(--g-space-2); color: var(--g-color-primary-text); font-weight: 650; }
|
|
1568
|
+
.g-batch-toolbar-actions { display: flex; flex-wrap: wrap; gap: var(--g-space-2); }
|
|
1569
|
+
|
|
1570
|
+
.g-transfer, .g-dual-list { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: var(--g-space-3); min-inline-size: 0; }
|
|
1571
|
+
.g-transfer-pane, .g-dual-list-pane { display: grid; grid-template-rows: auto auto minmax(10rem, 1fr) auto; min-inline-size: 0; overflow: hidden; border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); }
|
|
1572
|
+
.g-transfer-header { display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-2); padding: var(--g-space-3); border-block-end: 1px solid var(--g-color-border); }
|
|
1573
|
+
.g-transfer-title { font-weight: 650; }
|
|
1574
|
+
.g-transfer-count { color: var(--g-color-text-muted); font-size: var(--g-font-size-xs); font-variant-numeric: tabular-nums; }
|
|
1575
|
+
.g-transfer-search { padding: var(--g-space-2); border-block-end: 1px solid var(--g-color-border); }
|
|
1576
|
+
.g-transfer-list, .g-dual-list-list { min-height: 10rem; max-height: 24rem; overflow: auto; border: 0; border-radius: 0; background: transparent; }
|
|
1577
|
+
.g-transfer-option { display: flex; min-height: var(--g-control-height-md); align-items: center; gap: var(--g-space-2); padding: var(--g-space-2) var(--g-space-3); cursor: pointer; }
|
|
1578
|
+
.g-transfer-option:hover { background: var(--g-color-surface-subtle); }
|
|
1579
|
+
.g-transfer-option[hidden] { display: none; }
|
|
1580
|
+
.g-transfer-footer { padding: var(--g-space-2) var(--g-space-3); border-block-start: 1px solid var(--g-color-border); color: var(--g-color-text-muted); font-size: var(--g-font-size-xs); }
|
|
1581
|
+
.g-transfer-actions { display: flex; flex-direction: column; align-self: center; gap: var(--g-space-2); }
|
|
1582
|
+
.g-transfer-empty { display: grid; min-height: 8rem; place-items: center; padding: var(--g-space-4); color: var(--g-color-text-muted); text-align: center; }
|
|
1583
|
+
|
|
1584
|
+
.g-picker, .g-entity-picker, .g-user-picker, .g-organization-picker, .g-resource-picker, .g-media-picker, .g-mention-picker, .g-tag-picker, .g-relation-picker, .g-tree-select { position: relative; min-inline-size: 0; }
|
|
1585
|
+
.g-picker-control { display: flex; min-height: var(--g-control-height-md); flex-wrap: wrap; align-items: center; gap: var(--g-space-1); width: 100%; padding: var(--g-space-1) var(--g-space-2); border: 1px solid var(--g-color-border-strong); border-radius: var(--g-radius-md); background: var(--g-color-surface); }
|
|
1586
|
+
.g-picker-control:focus-within { border-color: var(--g-color-primary); box-shadow: 0 0 0 var(--g-focus-ring-width) var(--g-focus-ring); }
|
|
1587
|
+
.g-picker-input { min-width: 7rem; flex: 1 1 8rem; border: 0; outline: 0; background: transparent; color: var(--g-color-text); }
|
|
1588
|
+
.g-picker-value, .g-picker-chip { display: inline-flex; max-width: 100%; min-height: 1.75rem; align-items: center; gap: var(--g-space-1); padding-inline: var(--g-space-2); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface-subtle); font-size: var(--g-font-size-sm); }
|
|
1589
|
+
.g-picker-value-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
1590
|
+
.g-picker-value-remove { display: grid; width: 1.25rem; height: 1.25rem; place-items: center; padding: 0; border: 0; background: transparent; color: var(--g-color-text-muted); cursor: pointer; }
|
|
1591
|
+
.g-picker-panel { position: absolute; z-index: var(--g-z-dropdown); inset: calc(100% + var(--g-space-1)) 0 auto; max-height: min(24rem, calc(100vh - 4rem)); overflow: auto; padding: var(--g-space-2); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface-raised); box-shadow: var(--g-shadow-lg); }
|
|
1592
|
+
.g-picker-panel[hidden] { display: none; }
|
|
1593
|
+
.g-picker-header, .g-picker-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-2); padding: var(--g-space-2); }
|
|
1594
|
+
.g-picker-title { font-weight: 650; }
|
|
1595
|
+
.g-picker-results { display: grid; gap: 1px; }
|
|
1596
|
+
.g-picker-option { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--g-space-3); min-height: var(--g-control-height-lg); padding: var(--g-space-2); border: 1px solid transparent; border-radius: var(--g-radius-md); background: transparent; color: var(--g-color-text); text-align: start; cursor: pointer; }
|
|
1597
|
+
.g-picker-option[hidden] { display: none; }
|
|
1598
|
+
.g-picker-option:hover { background: var(--g-color-surface-subtle); }
|
|
1599
|
+
.g-picker-option-main { min-width: 0; }
|
|
1600
|
+
.g-picker-option-title { display: block; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
|
|
1601
|
+
.g-picker-option-description { display: block; overflow: hidden; color: var(--g-color-text-muted); font-size: var(--g-font-size-xs); text-overflow: ellipsis; white-space: nowrap; }
|
|
1602
|
+
.g-picker-option-check { color: var(--g-color-primary-text); }
|
|
1603
|
+
.g-picker-empty { padding: var(--g-space-6) var(--g-space-3); color: var(--g-color-text-muted); text-align: center; }
|
|
1604
|
+
.g-picker-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--g-space-2); margin-block-start: var(--g-space-2); color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); }
|
|
1605
|
+
.g-picker-summary-values { display: flex; flex-wrap: wrap; gap: var(--g-space-1); }
|
|
1606
|
+
|
|
1607
|
+
.g-user-picker .g-picker-option, .g-mention-picker .g-picker-option { grid-template-columns: auto minmax(0, 1fr) auto; }
|
|
1608
|
+
.g-picker-avatar { display: grid; width: 2rem; height: 2rem; place-items: center; overflow: hidden; border-radius: 50%; background: var(--g-color-primary-soft); color: var(--g-color-primary-text); font-size: var(--g-font-size-xs); font-weight: 700; }
|
|
1609
|
+
.g-organization-picker .g-picker-option, .g-resource-picker .g-picker-option, .g-relation-picker .g-picker-option { padding-inline-start: calc(var(--g-space-2) + var(--g-picker-level, 0) * var(--g-space-4)); }
|
|
1610
|
+
.g-media-picker .g-picker-results { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: var(--g-space-2); }
|
|
1611
|
+
.g-media-picker .g-picker-option { display: grid; grid-template-columns: 1fr; align-content: start; padding: var(--g-space-1); }
|
|
1612
|
+
.g-media-picker-thumb { display: grid; aspect-ratio: 4 / 3; place-items: center; overflow: hidden; border-radius: var(--g-radius-sm); background: var(--g-color-surface-subtle); color: var(--g-color-text-muted); }
|
|
1613
|
+
.g-media-picker-thumb > img { width: 100%; height: 100%; object-fit: cover; }
|
|
1614
|
+
|
|
1615
|
+
.g-icon-picker { display: grid; gap: var(--g-space-3); }
|
|
1616
|
+
.g-icon-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr)); gap: var(--g-space-1); max-height: 20rem; overflow: auto; }
|
|
1617
|
+
.g-icon-picker-item { display: grid; aspect-ratio: 1; min-width: 2.75rem; place-items: center; padding: var(--g-space-1); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); cursor: pointer; }
|
|
1618
|
+
.g-icon-picker-item:is(:hover, [aria-pressed="true"]) { border-color: var(--g-color-primary); background: var(--g-color-primary-soft); color: var(--g-color-primary-text); }
|
|
1619
|
+
.g-color-picker { display: grid; gap: var(--g-space-3); }
|
|
1620
|
+
.g-color-picker-current { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--g-space-3); }
|
|
1621
|
+
.g-color-picker-preview { width: var(--g-control-height-lg); height: var(--g-control-height-lg); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-picker-color, currentColor); }
|
|
1622
|
+
.g-color-picker-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(2rem, 1fr)); gap: var(--g-space-2); }
|
|
1623
|
+
.g-color-swatch { position: relative; aspect-ratio: 1; min-width: 2rem; border: 1px solid var(--g-color-border-strong); border-radius: var(--g-radius-md); background: var(--g-swatch, transparent); cursor: pointer; }
|
|
1624
|
+
.g-color-swatch[aria-pressed="true"]::after { position: absolute; inset: 25%; border: 2px solid CanvasText; border-radius: 50%; content: ""; }
|
|
1625
|
+
|
|
1626
|
+
.g-cascader { display: grid; min-inline-size: 0; }
|
|
1627
|
+
.g-cascader-path { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-1); margin-block-end: var(--g-space-2); color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); }
|
|
1628
|
+
.g-cascader-columns { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(11rem, 1fr); max-width: 100%; overflow-x: auto; border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); }
|
|
1629
|
+
.g-cascader-column { min-height: 12rem; max-height: 22rem; overflow: auto; padding: var(--g-space-1); border-inline-end: 1px solid var(--g-color-border); }
|
|
1630
|
+
.g-cascader-column:last-child { border-inline-end: 0; }
|
|
1631
|
+
.g-cascader-option { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--g-space-2); width: 100%; min-height: var(--g-control-height-md); padding: var(--g-space-2); border: 0; border-radius: var(--g-radius-md); background: transparent; color: var(--g-color-text); text-align: start; cursor: pointer; }
|
|
1632
|
+
.g-cascader-option:is(:hover, [aria-current="true"], [aria-selected="true"]) { background: var(--g-color-primary-soft); color: var(--g-color-primary-text); }
|
|
1633
|
+
|
|
1634
|
+
.g-date-range-picker, .g-time-range-picker { display: grid; gap: var(--g-space-3); min-inline-size: 0; padding: var(--g-space-3); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); }
|
|
1635
|
+
.g-range-picker-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: var(--g-space-2); }
|
|
1636
|
+
.g-range-picker-presets { display: flex; flex-wrap: wrap; gap: var(--g-space-2); }
|
|
1637
|
+
.g-range-picker-calendar { display: grid; grid-template-columns: repeat(2, minmax(15rem, 1fr)); gap: var(--g-space-3); overflow-x: auto; }
|
|
1638
|
+
.g-range-picker-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--g-space-2); padding-block-start: var(--g-space-2); border-block-start: 1px solid var(--g-color-border); }
|
|
1639
|
+
|
|
1640
|
+
.g-saved-filters, .g-saved-views { display: flex; flex-wrap: wrap; gap: var(--g-space-2); }
|
|
1641
|
+
.g-saved-filter, .g-saved-view { display: inline-flex; min-height: var(--g-control-height-sm); align-items: center; gap: var(--g-space-2); padding-inline: var(--g-space-3); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); color: var(--g-color-text-muted); cursor: pointer; }
|
|
1642
|
+
.g-saved-filter:is(:hover, [aria-pressed="true"]), .g-saved-view:is(:hover, [aria-pressed="true"]) { border-color: var(--g-color-primary); background: var(--g-color-primary-soft); color: var(--g-color-primary-text); }
|
|
1643
|
+
.g-saved-choice-meta { font-size: var(--g-font-size-xs); }
|
|
1644
|
+
|
|
1645
|
+
.g-builder, .g-sort-builder, .g-group-builder { display: grid; gap: var(--g-space-2); }
|
|
1646
|
+
.g-builder-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--g-space-2); }
|
|
1647
|
+
.g-builder-list { display: grid; gap: var(--g-space-2); }
|
|
1648
|
+
.g-builder-rule, .g-sort-rule, .g-group-rule { display: grid; grid-template-columns: auto minmax(8rem, 1fr) minmax(7rem, auto) auto; align-items: center; gap: var(--g-space-2); padding: var(--g-space-2); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); }
|
|
1649
|
+
.g-builder-handle, .g-sort-rule-handle, .g-group-rule-handle { color: var(--g-color-text-muted); cursor: grab; touch-action: none; }
|
|
1650
|
+
.g-column-chooser { min-width: 15rem; }
|
|
1651
|
+
.g-column-chooser-actions { display: flex; justify-content: space-between; gap: var(--g-space-2); padding: var(--g-space-2); border-block-end: 1px solid var(--g-color-border); }
|
|
1652
|
+
|
|
1653
|
+
.g-bulk-confirmation { display: grid; gap: var(--g-space-3); padding: var(--g-space-4); border: 1px solid var(--g-color-warning); border-radius: var(--g-radius-md); background: var(--g-color-warning-soft); }
|
|
1654
|
+
.g-bulk-confirmation-title { font-weight: 700; }
|
|
1655
|
+
.g-bulk-confirmation-summary { color: var(--g-color-text-muted); }
|
|
1656
|
+
.g-bulk-confirmation-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--g-space-2); }
|
|
1657
|
+
.g-bulk-progress { display: grid; gap: var(--g-space-2); padding: var(--g-space-3); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); }
|
|
1658
|
+
.g-bulk-progress-header { display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-2); }
|
|
1659
|
+
.g-bulk-progress-list { display: grid; gap: var(--g-space-1); max-height: 16rem; overflow: auto; }
|
|
1660
|
+
.g-bulk-progress-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--g-space-2); padding: var(--g-space-2); border-radius: var(--g-radius-md); background: var(--g-color-surface-subtle); }
|
|
1661
|
+
|
|
1662
|
+
@container (max-width: 40rem) {
|
|
1663
|
+
.g-transfer, .g-dual-list { grid-template-columns: 1fr; }
|
|
1664
|
+
.g-transfer-actions { flex-direction: row; justify-content: center; }
|
|
1665
|
+
.g-range-picker-fields, .g-builder-rule, .g-sort-rule, .g-group-rule { grid-template-columns: 1fr; }
|
|
1666
|
+
.g-range-picker-calendar { grid-template-columns: minmax(15rem, 1fr); }
|
|
1667
|
+
}
|
|
1668
|
+
|
|
1669
|
+
@media (max-width: 40rem) {
|
|
1670
|
+
.g-transfer:not(.is-desktop), .g-dual-list:not(.is-desktop) { grid-template-columns: 1fr; }
|
|
1671
|
+
.g-transfer-actions { flex-direction: row; justify-content: center; }
|
|
1672
|
+
.g-picker-panel { position: fixed; inset: auto var(--g-space-2) calc(var(--g-space-2) + env(safe-area-inset-bottom)); max-height: min(70dvh, 36rem); }
|
|
1673
|
+
.g-range-picker-fields, .g-builder-rule, .g-sort-rule, .g-group-rule { grid-template-columns: 1fr; }
|
|
1674
|
+
.g-batch-toolbar { inset-block-end: env(safe-area-inset-bottom); }
|
|
1675
|
+
}
|
|
1676
|
+
|
|
1677
|
+
[dir="rtl"] .g-picker-option, [dir="rtl"] .g-cascader-option { text-align: start; }
|
|
1678
|
+
@media (prefers-reduced-motion: reduce) { .g-picker-panel { scroll-behavior: auto; } }
|
|
1679
|
+
@media (forced-colors: active) {
|
|
1680
|
+
.g-selection-item[aria-selected="true"], .g-picker-option[aria-selected="true"], .g-icon-picker-item[aria-pressed="true"], .g-color-swatch[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
|
|
1681
|
+
}
|
|
1682
|
+
@media print {
|
|
1683
|
+
.g-batch-toolbar, .g-transfer-actions, .g-picker-panel, .g-column-chooser, .g-builder, .g-sort-builder, .g-group-builder, .g-range-picker-actions, .g-bulk-confirmation-actions { display: none !important; }
|
|
1684
|
+
.g-transfer, .g-dual-list { grid-template-columns: 1fr 1fr; }
|
|
1685
|
+
.g-transfer-pane, .g-dual-list-pane, .g-bulk-progress { break-inside: avoid; box-shadow: none; }
|
|
1686
|
+
}
|
|
1687
|
+
}
|
|
1688
|
+
|
|
1689
|
+
@layer gardener.components {
|
|
1690
|
+
/* Category 10: files, uploads, viewers and reusable content-authoring compositions. */
|
|
1691
|
+
.g-content-container { container-type: inline-size; min-inline-size: 0; }
|
|
1692
|
+
.g-file-drop { display: grid; min-height: 10rem; place-items: center; gap: var(--g-space-2); padding: var(--g-space-6); border: 1px dashed var(--g-color-border-strong); border-radius: var(--g-radius-md); background: var(--g-color-surface); color: var(--g-color-text-muted); text-align: center; cursor: pointer; }
|
|
1693
|
+
.g-file-drop:is(:hover, :focus-visible, .is-dragging) { border-color: var(--g-color-primary); background: var(--g-color-primary-soft); color: var(--g-color-primary-text); }
|
|
1694
|
+
.g-file-drop-icon { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: var(--g-radius-md); background: var(--g-color-surface-subtle); font-size: var(--g-font-size-xl); }
|
|
1695
|
+
.g-file-drop-title { color: var(--g-color-text); font-weight: 700; }
|
|
1696
|
+
.g-file-drop-rules { font-size: var(--g-font-size-xs); }
|
|
1697
|
+
|
|
1698
|
+
.g-file-list, .g-upload-queue { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-border); }
|
|
1699
|
+
.g-file-list-header, .g-upload-queue-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--g-space-2); padding: var(--g-space-3); background: var(--g-color-surface-subtle); }
|
|
1700
|
+
.g-file-row, .g-upload-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--g-space-3); min-height: var(--g-control-height-lg); padding: var(--g-space-2) var(--g-space-3); background: var(--g-color-surface); }
|
|
1701
|
+
.g-file-row:is(:hover, [aria-selected="true"]), .g-upload-item:hover { background: var(--g-color-surface-subtle); }
|
|
1702
|
+
.g-file-icon { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: var(--g-radius-sm); background: var(--g-color-primary-soft); color: var(--g-color-primary-text); font-size: var(--g-font-size-xs); font-weight: 750; text-transform: uppercase; }
|
|
1703
|
+
.g-file-main { min-inline-size: 0; }
|
|
1704
|
+
.g-file-name { display: block; overflow: hidden; color: var(--g-color-text); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
|
|
1705
|
+
.g-file-meta { display: flex; flex-wrap: wrap; gap: var(--g-space-2); color: var(--g-color-text-muted); font-size: var(--g-font-size-xs); }
|
|
1706
|
+
.g-file-actions, .g-upload-actions { display: flex; align-items: center; gap: var(--g-space-1); }
|
|
1707
|
+
|
|
1708
|
+
.g-upload-summary { display: flex; flex-wrap: wrap; gap: var(--g-space-3); color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); font-variant-numeric: tabular-nums; }
|
|
1709
|
+
.g-upload-item { grid-template-columns: auto minmax(0, 1fr) minmax(7rem, 20%) auto; }
|
|
1710
|
+
.g-upload-item[data-g-status="error"] { box-shadow: inset 0.2rem 0 var(--g-color-danger); }
|
|
1711
|
+
.g-upload-item[data-g-status="success"] { box-shadow: inset 0.2rem 0 var(--g-color-success); }
|
|
1712
|
+
.g-upload-progress, .g-storage-track { position: relative; height: 0.4rem; overflow: hidden; border-radius: var(--g-radius-sm); background: var(--g-color-surface-sunken); }
|
|
1713
|
+
.g-upload-progress-bar, .g-storage-value { display: block; width: var(--g-progress, 0%); height: 100%; background: var(--g-color-primary); transition: width var(--g-duration-normal) var(--g-ease-standard); }
|
|
1714
|
+
.g-upload-status { color: var(--g-color-text-muted); font-size: var(--g-font-size-xs); }
|
|
1715
|
+
.g-failed-upload :is(.g-file-meta, .g-upload-status) { color: var(--g-color-text); }
|
|
1716
|
+
.g-chunk-upload { display: grid; gap: var(--g-space-3); padding: var(--g-space-3); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); }
|
|
1717
|
+
.g-chunk-map { display: grid; grid-template-columns: repeat(auto-fit, minmax(0.5rem, 1fr)); gap: 2px; }
|
|
1718
|
+
.g-chunk { height: 0.5rem; border-radius: 1px; background: var(--g-color-surface-sunken); }
|
|
1719
|
+
.g-chunk:is(.is-complete, [data-g-status="success"]) { background: var(--g-color-success); }
|
|
1720
|
+
.g-chunk:is(.is-active, [data-g-status="uploading"]) { background: var(--g-color-primary); }
|
|
1721
|
+
.g-failed-upload { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--g-space-3); padding: var(--g-space-3); border: 1px solid var(--g-color-danger); border-radius: var(--g-radius-md); background: var(--g-color-danger-soft); }
|
|
1722
|
+
|
|
1723
|
+
.g-file-card { display: grid; min-inline-size: 0; overflow: hidden; border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); }
|
|
1724
|
+
.g-file-card-preview { display: grid; aspect-ratio: 4 / 3; place-items: center; overflow: hidden; background: var(--g-color-surface-subtle); color: var(--g-color-text-muted); }
|
|
1725
|
+
.g-file-card-preview > :is(img, video, canvas) { width: 100%; height: 100%; object-fit: cover; }
|
|
1726
|
+
.g-file-card-body { min-inline-size: 0; padding: var(--g-space-3); }
|
|
1727
|
+
.g-file-card-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-2); padding: 0 var(--g-space-3) var(--g-space-3); }
|
|
1728
|
+
.g-file-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: var(--g-space-3); }
|
|
1729
|
+
|
|
1730
|
+
.g-folder-tree { display: grid; gap: 1px; min-inline-size: 12rem; padding: var(--g-space-2); }
|
|
1731
|
+
.g-folder-tree-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--g-space-2); min-height: var(--g-control-height-sm); padding: var(--g-space-1) var(--g-space-2); padding-inline-start: calc(var(--g-space-2) + var(--g-tree-level, 0) * var(--g-space-4)); border-radius: var(--g-radius-md); color: var(--g-color-text); cursor: pointer; }
|
|
1732
|
+
.g-folder-tree-item:is(:hover, [aria-current="page"], [aria-selected="true"]) { background: var(--g-color-primary-soft); color: var(--g-color-primary-text); }
|
|
1733
|
+
.g-folder-tree-count { color: var(--g-color-text-muted); font-size: var(--g-font-size-xs); font-variant-numeric: tabular-nums; }
|
|
1734
|
+
.g-folder-tree-item:is([aria-current="page"], [aria-selected="true"]) .g-folder-tree-count { color: var(--g-color-primary-text); }
|
|
1735
|
+
|
|
1736
|
+
.g-file-browser { display: grid; grid-template: "head head" auto "tree main" minmax(20rem, 1fr) "status status" auto / minmax(12rem, 15rem) minmax(0, 1fr); min-height: 28rem; overflow: hidden; border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); }
|
|
1737
|
+
.g-file-browser-header { grid-area: head; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--g-space-2); padding: var(--g-space-2) var(--g-space-3); border-block-end: 1px solid var(--g-color-border); }
|
|
1738
|
+
.g-file-browser-tree { grid-area: tree; overflow: auto; border-inline-end: 1px solid var(--g-color-border); background: var(--g-color-surface-subtle); }
|
|
1739
|
+
.g-file-browser-main { grid-area: main; min-width: 0; overflow: auto; padding: var(--g-space-3); }
|
|
1740
|
+
.g-file-browser-status { grid-area: status; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--g-space-2); padding: var(--g-space-1) var(--g-space-3); border-block-start: 1px solid var(--g-color-border); color: var(--g-color-text-muted); font-size: var(--g-font-size-xs); }
|
|
1741
|
+
.g-file-browser[data-g-view="list"] .g-file-card-grid { display: grid; grid-template-columns: 1fr; gap: 1px; border: 1px solid var(--g-color-border); background: var(--g-color-border); }
|
|
1742
|
+
.g-file-browser[data-g-view="list"] .g-file-card { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; border: 0; border-radius: 0; }
|
|
1743
|
+
.g-file-browser[data-g-view="list"] .g-file-card-preview { width: 3rem; aspect-ratio: 1; }
|
|
1744
|
+
.g-file-browser[data-g-view="list"] .g-file-card-footer { padding: var(--g-space-2); }
|
|
1745
|
+
[data-g-file-item][hidden] { display: none !important; }
|
|
1746
|
+
|
|
1747
|
+
.g-file-preview { display: grid; grid-template: "toolbar" auto "stage" minmax(18rem, 1fr) "meta" auto / minmax(0, 1fr); min-height: 26rem; overflow: hidden; border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); }
|
|
1748
|
+
.g-file-preview-toolbar, .g-viewer-toolbar, .g-editor-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--g-space-2); padding: var(--g-space-2); border-block-end: 1px solid var(--g-color-border); background: var(--g-color-surface-subtle); }
|
|
1749
|
+
.g-file-preview-stage { display: grid; min-width: 0; place-items: center; overflow: auto; padding: var(--g-space-5); background: var(--g-color-canvas); }
|
|
1750
|
+
.g-file-preview-stage > :is(img, video, canvas, iframe) { max-width: 100%; max-height: 70vh; }
|
|
1751
|
+
.g-file-preview-meta { display: flex; flex-wrap: wrap; gap: var(--g-space-3); padding: var(--g-space-2) var(--g-space-3); border-block-start: 1px solid var(--g-color-border); color: var(--g-color-text-muted); font-size: var(--g-font-size-xs); }
|
|
1752
|
+
|
|
1753
|
+
.g-media-library { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem); min-height: 28rem; overflow: hidden; border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); }
|
|
1754
|
+
.g-media-library-main { min-width: 0; padding: var(--g-space-3); }
|
|
1755
|
+
.g-media-library-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--g-space-2); margin-block-end: var(--g-space-3); }
|
|
1756
|
+
.g-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: var(--g-space-2); }
|
|
1757
|
+
.g-media-item { position: relative; overflow: hidden; padding: var(--g-space-1); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); text-align: start; cursor: pointer; }
|
|
1758
|
+
.g-media-item:is(:hover, [aria-selected="true"]) { border-color: var(--g-color-primary); background: var(--g-color-primary-soft); }
|
|
1759
|
+
.g-media-thumb { display: grid; aspect-ratio: 4 / 3; place-items: center; overflow: hidden; border-radius: var(--g-radius-sm); background: var(--g-color-surface-subtle); color: var(--g-color-text-muted); }
|
|
1760
|
+
.g-media-thumb > :is(img, video) { width: 100%; height: 100%; object-fit: cover; }
|
|
1761
|
+
.g-media-label { display: block; overflow: hidden; padding: var(--g-space-2) var(--g-space-1) var(--g-space-1); color: var(--g-color-text); font-size: var(--g-font-size-sm); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
|
|
1762
|
+
.g-media-details { overflow: auto; padding: var(--g-space-3); border-inline-start: 1px solid var(--g-color-border); background: var(--g-color-surface-subtle); }
|
|
1763
|
+
.g-media-details-preview { display: grid; aspect-ratio: 4 / 3; place-items: center; overflow: hidden; margin-block-end: var(--g-space-3); border-radius: var(--g-radius-md); background: var(--g-color-surface-sunken); }
|
|
1764
|
+
|
|
1765
|
+
.g-image-crop, .g-image-crop.g-content-image-crop, .g-image-annotation { display: grid; grid-template: "tools stage inspector" minmax(22rem, 1fr) / auto minmax(0, 1fr) minmax(13rem, 17rem); min-height: 24rem; overflow: hidden; border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); }
|
|
1766
|
+
.g-image-tools { grid-area: tools; display: flex; flex-direction: column; gap: var(--g-space-1); padding: var(--g-space-2); border-inline-end: 1px solid var(--g-color-border); background: var(--g-color-surface-subtle); }
|
|
1767
|
+
.g-image-stage { grid-area: stage; display: grid; min-width: 0; place-items: center; overflow: auto; padding: var(--g-space-5); background-image: linear-gradient(45deg, var(--g-color-surface-sunken) 25%, transparent 25%), linear-gradient(-45deg, var(--g-color-surface-sunken) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--g-color-surface-sunken) 75%), linear-gradient(-45deg, transparent 75%, var(--g-color-surface-sunken) 75%); background-position: 0 0, 0 0.5rem, 0.5rem -0.5rem, -0.5rem 0; background-size: 1rem 1rem; }
|
|
1768
|
+
.g-crop-frame { position: relative; width: min(90%, 34rem); aspect-ratio: var(--g-crop-ratio, 16 / 9); border: 1px solid var(--g-color-primary); background: color-mix(in srgb, var(--g-color-primary) 8%, transparent); box-shadow: 0 0 0 999rem rgb(0 0 0 / 0.25); }
|
|
1769
|
+
.g-crop-frame::before, .g-crop-frame::after { position: absolute; content: ""; inset: 33.333% 0; border-block: 1px dashed rgb(255 255 255 / 0.7); }
|
|
1770
|
+
.g-crop-frame::after { inset: 0 33.333%; border: 0; border-inline: 1px dashed rgb(255 255 255 / 0.7); }
|
|
1771
|
+
.g-image-inspector { grid-area: inspector; overflow: auto; padding: var(--g-space-3); border-inline-start: 1px solid var(--g-color-border); }
|
|
1772
|
+
.g-annotation-pin { display: grid; position: absolute; width: 1.75rem; height: 1.75rem; place-items: center; border: 2px solid white; border-radius: 50%; background: var(--g-color-primary); color: white; font-size: var(--g-font-size-xs); font-weight: 700; }
|
|
1773
|
+
|
|
1774
|
+
.g-document-viewer, .g-document-viewer.g-content-document-viewer, .g-pdf-viewer { display: grid; grid-template: "toolbar toolbar" auto "thumbs page" minmax(24rem, 1fr) "status status" auto / minmax(8rem, 11rem) minmax(0, 1fr); min-height: 32rem; overflow: hidden; border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); }
|
|
1775
|
+
.g-document-viewer .g-viewer-toolbar, .g-pdf-viewer .g-viewer-toolbar { grid-area: toolbar; }
|
|
1776
|
+
.g-viewer-thumbnails { grid-area: thumbs; overflow: auto; padding: var(--g-space-2); border-inline-end: 1px solid var(--g-color-border); background: var(--g-color-surface-subtle); }
|
|
1777
|
+
.g-viewer-thumbnail { display: grid; aspect-ratio: 3 / 4; place-items: center; margin-block-end: var(--g-space-2); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-sm); background: white; color: #4b5563; font-size: var(--g-font-size-xs); }
|
|
1778
|
+
.g-viewer-thumbnail[aria-current="page"] { border-color: var(--g-color-primary); box-shadow: 0 0 0 1px var(--g-color-primary); }
|
|
1779
|
+
.g-viewer-page { grid-area: page; display: grid; place-items: start center; overflow: auto; padding: var(--g-space-6); background: var(--g-color-canvas); }
|
|
1780
|
+
.g-document-page { width: min(100%, 44rem); min-height: 54rem; padding: clamp(2rem, 7vw, 5rem); background: white; color: #1f2937; box-shadow: var(--g-shadow-md); }
|
|
1781
|
+
.g-viewer-status { grid-area: status; display: flex; justify-content: space-between; gap: var(--g-space-2); padding: var(--g-space-1) var(--g-space-3); border-block-start: 1px solid var(--g-color-border); color: var(--g-color-text); font-size: var(--g-font-size-xs); }
|
|
1782
|
+
|
|
1783
|
+
.g-video-player, .g-audio-player { overflow: hidden; border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); }
|
|
1784
|
+
.g-video-stage { display: grid; aspect-ratio: 16 / 9; place-items: center; overflow: hidden; background: #111827; color: white; }
|
|
1785
|
+
.g-video-stage > video { width: 100%; height: 100%; object-fit: contain; }
|
|
1786
|
+
.g-media-controls { display: flex; align-items: center; gap: var(--g-space-2); padding: var(--g-space-2); background: var(--g-color-surface); }
|
|
1787
|
+
.g-media-timeline { min-width: 4rem; flex: 1; }
|
|
1788
|
+
.g-media-time { color: var(--g-color-text); font-size: var(--g-font-size-xs); font-variant-numeric: tabular-nums; }
|
|
1789
|
+
.g-video-player .g-media-controls, .g-video-player .g-media-controls .g-btn, .g-video-player .g-media-time { color: #fff; }
|
|
1790
|
+
.g-audio-player { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--g-space-3); padding: var(--g-space-3); }
|
|
1791
|
+
.g-audio-art { display: grid; width: 3.5rem; height: 3.5rem; place-items: center; border-radius: var(--g-radius-md); background: var(--g-color-primary-soft); color: var(--g-color-primary-text); }
|
|
1792
|
+
|
|
1793
|
+
.g-code-editor, .g-rich-text-editor, .g-markdown-editor, .g-block-editor { display: grid; grid-template-rows: auto minmax(18rem, 1fr) auto; min-width: 0; overflow: hidden; border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); }
|
|
1794
|
+
.g-editor-toolbar { justify-content: flex-start; }
|
|
1795
|
+
.g-editor-toolbar-group { display: flex; align-items: center; gap: 1px; }
|
|
1796
|
+
.g-editor-tool[aria-pressed="true"] { border-color: var(--g-color-primary); background: var(--g-color-primary-soft); color: var(--g-color-primary-text); }
|
|
1797
|
+
.g-editor-surface { min-width: 0; overflow: auto; padding: var(--g-space-4); outline: 0; background: var(--g-color-surface); color: var(--g-color-text); line-height: var(--g-line-height-relaxed); }
|
|
1798
|
+
.g-editor-surface:focus { box-shadow: inset 0 0 0 var(--g-focus-ring-width) var(--g-focus-ring); }
|
|
1799
|
+
.g-code-editor-body { display: grid; grid-template-columns: auto minmax(0, 1fr); min-height: 18rem; overflow: auto; background: #f8fafc; color: #1f2937; font-family: var(--g-font-mono); font-size: var(--g-font-size-sm); }
|
|
1800
|
+
.g-code-gutter { padding: var(--g-space-3) var(--g-space-2); background: #eef2f7; color: #475569; text-align: end; user-select: none; }
|
|
1801
|
+
.g-code-content { margin: 0; padding: var(--g-space-3); overflow: visible; white-space: pre; }
|
|
1802
|
+
.g-editor-status { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--g-space-2); padding: var(--g-space-1) var(--g-space-3); border-block-start: 1px solid var(--g-color-border); color: var(--g-color-text-muted); font-size: var(--g-font-size-xs); font-variant-numeric: tabular-nums; }
|
|
1803
|
+
.g-markdown-editor { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(18rem, 1fr) auto; }
|
|
1804
|
+
.g-markdown-editor .g-editor-toolbar, .g-markdown-editor .g-editor-status { grid-column: 1 / -1; }
|
|
1805
|
+
.g-markdown-source, .g-markdown-preview { min-width: 0; overflow: auto; padding: var(--g-space-4); }
|
|
1806
|
+
.g-markdown-source { resize: none; border: 0; border-inline-end: 1px solid var(--g-color-border); outline: 0; background: var(--g-color-surface); color: var(--g-color-text); font-family: var(--g-font-mono); }
|
|
1807
|
+
.g-markdown-preview { background: var(--g-color-surface-subtle); }
|
|
1808
|
+
.g-block-editor { gap: 1px; background: var(--g-color-border); }
|
|
1809
|
+
.g-block { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--g-space-2); padding: var(--g-space-3); background: var(--g-color-surface); }
|
|
1810
|
+
.g-block:is(:hover, :focus-within, [aria-selected="true"]) { box-shadow: inset 0.2rem 0 var(--g-color-primary); }
|
|
1811
|
+
.g-block-handle { color: var(--g-color-text-muted); cursor: grab; touch-action: none; }
|
|
1812
|
+
.g-block-content { min-width: 0; outline: 0; }
|
|
1813
|
+
|
|
1814
|
+
.g-content-outline { display: grid; gap: 1px; padding: var(--g-space-2); }
|
|
1815
|
+
.g-content-outline-item { display: block; overflow: hidden; padding: var(--g-space-1) var(--g-space-2); padding-inline-start: calc(var(--g-space-2) + var(--g-outline-level, 0) * var(--g-space-3)); border-radius: var(--g-radius-md); color: var(--g-color-text-muted); text-overflow: ellipsis; white-space: nowrap; }
|
|
1816
|
+
.g-content-outline-item:is(:hover, [aria-current="location"]) { background: var(--g-color-primary-soft); color: var(--g-color-primary-text); }
|
|
1817
|
+
.g-find-replace { display: grid; gap: var(--g-space-2); width: min(100%, 28rem); padding: var(--g-space-3); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface-raised); box-shadow: var(--g-shadow-md); }
|
|
1818
|
+
.g-find-replace-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--g-space-2); }
|
|
1819
|
+
.g-comment-thread, .g-comment-thread.g-content-comment-thread { display: grid; gap: var(--g-space-3); }
|
|
1820
|
+
.g-comment { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--g-space-3); }
|
|
1821
|
+
.g-comment-avatar { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; background: var(--g-color-primary-soft); color: var(--g-color-primary-text); font-size: var(--g-font-size-xs); font-weight: 700; }
|
|
1822
|
+
.g-comment-body { min-width: 0; padding: var(--g-space-3); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); }
|
|
1823
|
+
.g-comment-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--g-space-2); margin-block-end: var(--g-space-2); color: var(--g-color-text-muted); font-size: var(--g-font-size-xs); }
|
|
1824
|
+
|
|
1825
|
+
.g-revision-compare { display: grid; gap: var(--g-space-3); min-width: 0; }
|
|
1826
|
+
.g-revision-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--g-space-2); }
|
|
1827
|
+
.g-revision-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); }
|
|
1828
|
+
.g-revision-panel { min-width: 0; overflow: auto; background: var(--g-color-surface); }
|
|
1829
|
+
.g-revision-panel + .g-revision-panel { border-inline-start: 1px solid var(--g-color-border); }
|
|
1830
|
+
.g-revision-header { position: sticky; z-index: 1; inset-block-start: 0; padding: var(--g-space-2) var(--g-space-3); border-block-end: 1px solid var(--g-color-border); background: var(--g-color-surface-subtle); font-weight: 650; }
|
|
1831
|
+
.g-diff { margin: 0; padding: var(--g-space-3); overflow: auto; font-family: var(--g-font-mono); font-size: var(--g-font-size-sm); white-space: pre-wrap; }
|
|
1832
|
+
.g-diff-line { display: block; padding-inline: var(--g-space-2); }
|
|
1833
|
+
.g-diff-line-add { background: var(--g-color-success-soft); color: var(--g-color-success); }
|
|
1834
|
+
.g-diff-line-remove { background: var(--g-color-danger-soft); color: var(--g-color-danger); text-decoration: line-through; }
|
|
1835
|
+
.g-revision-compare[data-g-revision-view="unified"] .g-revision-panels { grid-template-columns: 1fr; }
|
|
1836
|
+
.g-revision-compare[data-g-revision-view="unified"] .g-revision-panel[data-g-revision-panel="old"] { display: none; }
|
|
1837
|
+
|
|
1838
|
+
.g-version-history { display: grid; gap: 1px; }
|
|
1839
|
+
.g-version-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--g-space-3); padding: var(--g-space-3); border-block-end: 1px solid var(--g-color-border); }
|
|
1840
|
+
.g-version-dot { width: 0.7rem; height: 0.7rem; margin-block-start: 0.35rem; border: 2px solid var(--g-color-primary); border-radius: 50%; background: var(--g-color-surface); }
|
|
1841
|
+
.g-version-item[aria-current="true"] .g-version-dot { background: var(--g-color-primary); }
|
|
1842
|
+
.g-file-properties { display: grid; gap: var(--g-space-2); }
|
|
1843
|
+
.g-file-property { display: grid; grid-template-columns: minmax(6rem, 35%) minmax(0, 1fr); gap: var(--g-space-2); padding-block: var(--g-space-1); border-block-end: 1px solid var(--g-color-border); }
|
|
1844
|
+
.g-file-property dt { color: var(--g-color-text-muted); }
|
|
1845
|
+
.g-file-property dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
|
|
1846
|
+
.g-storage-meter { display: grid; gap: var(--g-space-2); padding: var(--g-space-3); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); }
|
|
1847
|
+
.g-storage-header { display: flex; justify-content: space-between; gap: var(--g-space-2); font-size: var(--g-font-size-sm); }
|
|
1848
|
+
.g-storage-legend { display: flex; flex-wrap: wrap; gap: var(--g-space-3); color: var(--g-color-text-muted); font-size: var(--g-font-size-xs); }
|
|
1849
|
+
.g-autosave-indicator { display: inline-flex; min-height: var(--g-control-height-sm); align-items: center; gap: var(--g-space-2); color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); }
|
|
1850
|
+
.g-autosave-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: currentColor; }
|
|
1851
|
+
.g-autosave-indicator[data-g-autosave-state="dirty"], .g-autosave-indicator[data-g-autosave-state="saving"] { color: var(--g-color-warning); }
|
|
1852
|
+
.g-autosave-indicator[data-g-autosave-state="saved"] { color: var(--g-color-success); }
|
|
1853
|
+
.g-autosave-indicator[data-g-autosave-state="error"] { color: var(--g-color-danger); }
|
|
1854
|
+
|
|
1855
|
+
@container (max-width: 44rem) {
|
|
1856
|
+
.g-file-browser { grid-template: "head" auto "main" minmax(18rem, 1fr) "status" auto / 1fr; }
|
|
1857
|
+
.g-file-browser-tree { display: none; }
|
|
1858
|
+
.g-media-library { grid-template-columns: 1fr; }
|
|
1859
|
+
.g-media-details { border-block-start: 1px solid var(--g-color-border); border-inline-start: 0; }
|
|
1860
|
+
.g-image-crop, .g-image-crop.g-content-image-crop, .g-image-annotation { grid-template: "tools" auto "stage" minmax(18rem, 1fr) "inspector" auto / 1fr; }
|
|
1861
|
+
.g-image-tools { flex-direction: row; overflow-x: auto; border-block-end: 1px solid var(--g-color-border); border-inline-end: 0; }
|
|
1862
|
+
.g-image-inspector { border-block-start: 1px solid var(--g-color-border); border-inline-start: 0; }
|
|
1863
|
+
.g-document-viewer, .g-pdf-viewer { grid-template: "toolbar" auto "page" minmax(20rem, 1fr) "status" auto / 1fr; }
|
|
1864
|
+
.g-viewer-thumbnails { display: none; }
|
|
1865
|
+
.g-revision-panels, .g-markdown-editor { grid-template-columns: 1fr; }
|
|
1866
|
+
.g-markdown-source { min-height: 14rem; border-block-end: 1px solid var(--g-color-border); border-inline-end: 0; }
|
|
1867
|
+
}
|
|
1868
|
+
|
|
1869
|
+
@media (max-width: 40rem) {
|
|
1870
|
+
.g-upload-item { grid-template-columns: auto minmax(0, 1fr) auto; }
|
|
1871
|
+
.g-upload-item > .g-upload-progress { grid-column: 2 / -1; width: 100%; }
|
|
1872
|
+
.g-file-row { grid-template-columns: auto minmax(0, 1fr); }
|
|
1873
|
+
.g-file-row > .g-file-actions { grid-column: 1 / -1; justify-content: flex-end; }
|
|
1874
|
+
.g-audio-player { grid-template-columns: auto minmax(0, 1fr); }
|
|
1875
|
+
.g-audio-player > :last-child { grid-column: 1 / -1; }
|
|
1876
|
+
.g-revision-panels { grid-template-columns: 1fr; }
|
|
1877
|
+
.g-revision-panel + .g-revision-panel { border-block-start: 1px solid var(--g-color-border); border-inline-start: 0; }
|
|
1878
|
+
}
|
|
1879
|
+
|
|
1880
|
+
[dir="rtl"] .g-upload-item[data-g-status="error"] { box-shadow: inset -0.2rem 0 var(--g-color-danger); }
|
|
1881
|
+
[dir="rtl"] .g-upload-item[data-g-status="success"] { box-shadow: inset -0.2rem 0 var(--g-color-success); }
|
|
1882
|
+
[dir="rtl"] .g-block:is(:hover, :focus-within, [aria-selected="true"]) { box-shadow: inset -0.2rem 0 var(--g-color-primary); }
|
|
1883
|
+
|
|
1884
|
+
@media (prefers-reduced-motion: reduce) { .g-upload-progress-bar, .g-storage-value { transition: none; } }
|
|
1885
|
+
@media (forced-colors: active) {
|
|
1886
|
+
.g-file-drop, .g-file-card, .g-media-item, .g-crop-frame, .g-document-page, .g-comment-body { forced-color-adjust: auto; }
|
|
1887
|
+
.g-upload-progress-bar, .g-storage-value, .g-version-dot, .g-autosave-dot { background: Highlight; }
|
|
1888
|
+
}
|
|
1889
|
+
@media print {
|
|
1890
|
+
.g-file-drop, .g-upload-actions, .g-file-actions, .g-file-browser-tree, .g-editor-toolbar, .g-viewer-toolbar, .g-media-controls, .g-image-tools, .g-image-inspector, .g-find-replace { display: none !important; }
|
|
1891
|
+
.g-file-browser, .g-file-preview, .g-media-library, .g-document-viewer, .g-document-viewer.g-content-document-viewer, .g-pdf-viewer, .g-code-editor, .g-rich-text-editor, .g-markdown-editor, .g-block-editor { display: block; min-height: 0; overflow: visible; border: 0; }
|
|
1892
|
+
.g-file-browser-main, .g-file-preview-stage, .g-viewer-page, .g-editor-surface, .g-code-editor-body, .g-markdown-source, .g-markdown-preview { overflow: visible; padding: 0; background: white; color: black; }
|
|
1893
|
+
.g-document-page { width: 100%; min-height: 0; padding: 0; box-shadow: none; }
|
|
1894
|
+
.g-revision-panels { display: block; border: 0; }
|
|
1895
|
+
.g-revision-panel { break-inside: avoid; border: 1px solid #999 !important; }
|
|
1896
|
+
}
|
|
1897
|
+
}
|
|
1898
|
+
|
|
1899
|
+
@layer gardener.components {
|
|
1900
|
+
/* Category 11: reusable authentication and account-lifecycle compositions. */
|
|
1901
|
+
:where(.g-auth-centered, .g-auth-split) { min-block-size: 100svh; background: var(--g-color-canvas); container: g-auth / inline-size; }
|
|
1902
|
+
.g-auth-centered { display: grid; place-items: center; padding: max(var(--g-space-4), env(safe-area-inset-top)) max(var(--g-space-4), env(safe-area-inset-right)) max(var(--g-space-4), env(safe-area-inset-bottom)) max(var(--g-space-4), env(safe-area-inset-left)); }
|
|
1903
|
+
.g-auth-split { display: grid; grid-template-columns: minmax(20rem, 1.1fr) minmax(26rem, .9fr); }
|
|
1904
|
+
.g-auth-split-aside { display: grid; align-content: space-between; gap: var(--g-space-8); padding: clamp(2rem, 6vw, 5rem); border-inline-end: 1px solid var(--g-color-border); background: var(--g-color-surface-subtle); }
|
|
1905
|
+
.g-auth-split-main { display: grid; place-items: center; padding: clamp(1rem, 5vw, 4rem); background: var(--g-color-surface); }
|
|
1906
|
+
.g-auth-container { width: min(100%, 30rem); container: g-auth-card / inline-size; }
|
|
1907
|
+
.g-auth-card { border-radius: var(--g-radius-md); }
|
|
1908
|
+
.g-auth-panel { display: grid; gap: var(--g-space-5); width: 100%; padding: clamp(1.25rem, 5cqi, 2rem); border: var(--g-border-width) solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); box-shadow: var(--g-shadow-sm); }
|
|
1909
|
+
:where(.g-auth-brand-row, .g-auth-header, .g-auth-form, .g-auth-footer, .g-auth-actions, .g-auth-provider-list, .g-auth-choice-list, .g-auth-benefit-list, .g-auth-status, .g-auth-legal, .g-auth-method-list) { display: grid; gap: var(--g-space-3); }
|
|
1910
|
+
.g-auth-brand-row { grid-template-columns: auto minmax(0, 1fr); align-items: center; color: var(--g-color-text); font-weight: 700; }
|
|
1911
|
+
.g-auth-brand-mark { display: inline-grid; inline-size: 2rem; block-size: 2rem; place-items: center; border: 1px solid var(--g-color-primary); border-radius: var(--g-radius-md); color: var(--g-color-primary-text); background: var(--g-color-primary-soft); }
|
|
1912
|
+
.g-auth-header { gap: var(--g-space-2); }
|
|
1913
|
+
.g-auth-title { margin: 0; color: var(--g-color-text); font-size: clamp(1.45rem, 5cqi, 2rem); line-height: 1.2; letter-spacing: -.025em; }
|
|
1914
|
+
.g-auth-description, .g-auth-help, .g-auth-meta, .g-auth-legal { color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); line-height: 1.6; }
|
|
1915
|
+
.g-auth-form { gap: var(--g-space-4); }
|
|
1916
|
+
.g-auth-form-row { display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-3); flex-wrap: wrap; }
|
|
1917
|
+
.g-auth-footer { justify-items: center; text-align: center; }
|
|
1918
|
+
.g-auth-actions { grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); }
|
|
1919
|
+
.g-auth-actions > :only-child { grid-column: 1 / -1; }
|
|
1920
|
+
.g-auth-divider { margin-block: var(--g-space-1); }
|
|
1921
|
+
.g-auth-provider { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--g-space-3); min-block-size: 2.75rem; padding: var(--g-space-2) var(--g-space-3); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); color: var(--g-color-text); text-align: start; }
|
|
1922
|
+
.g-auth-provider:hover { border-color: var(--g-color-border-strong); background: var(--g-color-surface-subtle); }
|
|
1923
|
+
.g-auth-provider-icon { display: inline-grid; inline-size: 1.5rem; block-size: 1.5rem; place-items: center; border-radius: var(--g-radius-sm); background: var(--g-color-primary-soft); color: var(--g-color-primary-text); font-size: var(--g-font-size-xs); font-weight: 700; }
|
|
1924
|
+
.g-auth-notice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--g-space-3); padding: var(--g-space-3); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface-subtle); }
|
|
1925
|
+
.g-auth-notice.is-info { border-color: color-mix(in srgb, var(--g-color-info) 38%, var(--g-color-border)); background: var(--g-color-info-soft); }
|
|
1926
|
+
.g-auth-notice.is-warning { border-color: color-mix(in srgb, var(--g-color-warning) 45%, var(--g-color-border)); background: var(--g-color-warning-soft); }
|
|
1927
|
+
.g-auth-notice.is-danger { border-color: color-mix(in srgb, var(--g-color-danger) 40%, var(--g-color-border)); background: var(--g-color-danger-soft); }
|
|
1928
|
+
.g-auth-user { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--g-space-3); padding: var(--g-space-3); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); }
|
|
1929
|
+
.g-auth-avatar { display: inline-grid; inline-size: 2.5rem; block-size: 2.5rem; place-items: center; overflow: hidden; border-radius: 50%; background: var(--g-color-primary-soft); color: var(--g-color-primary-text); font-weight: 700; }
|
|
1930
|
+
.g-auth-avatar > img { inline-size: 100%; block-size: 100%; object-fit: cover; }
|
|
1931
|
+
.g-auth-user-main { min-width: 0; }
|
|
1932
|
+
.g-auth-user-name, .g-auth-choice-title { display: block; overflow: hidden; color: var(--g-color-text); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
|
|
1933
|
+
.g-auth-user-meta, .g-auth-choice-meta { display: block; overflow: hidden; color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); text-overflow: ellipsis; white-space: nowrap; }
|
|
1934
|
+
.g-auth-choice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--g-space-3); width: 100%; padding: var(--g-space-3); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); color: var(--g-color-text); text-align: start; cursor: pointer; }
|
|
1935
|
+
.g-auth-choice:hover { border-color: var(--g-color-border-strong); background: var(--g-color-surface-subtle); }
|
|
1936
|
+
.g-auth-choice[aria-selected="true"], .g-auth-choice.is-selected { border-color: var(--g-color-primary); box-shadow: 0 0 0 1px var(--g-color-primary); }
|
|
1937
|
+
.g-auth-choice-check { color: var(--g-color-primary-text); font-weight: 700; }
|
|
1938
|
+
|
|
1939
|
+
:where(.g-sign-in, .g-registration, .g-password-recovery, .g-password-reset, .g-email-verification, .g-phone-verification, .g-mfa-challenge, .g-passkey, .g-sso, .g-qr-login, .g-magic-link, .g-invitation, .g-first-time-setup, .g-profile-setup, .g-account-security, .g-auth-consent, .g-auth-result) { display: grid; gap: var(--g-space-5); }
|
|
1940
|
+
.g-sign-in-options, .g-registration-terms { display: flex; align-items: start; justify-content: space-between; gap: var(--g-space-3); flex-wrap: wrap; font-size: var(--g-font-size-sm); }
|
|
1941
|
+
.g-password-recovery-methods, .g-mfa-methods { display: grid; gap: var(--g-space-2); }
|
|
1942
|
+
.g-verification-address { overflow-wrap: anywhere; color: var(--g-color-text); font-weight: 650; }
|
|
1943
|
+
.g-verification-icon, .g-auth-result-icon, .g-security-alert-icon { display: inline-grid; inline-size: 3rem; block-size: 3rem; place-items: center; border-radius: var(--g-radius-md); background: var(--g-color-primary-soft); color: var(--g-color-primary-text); font-size: 1.25rem; font-weight: 800; }
|
|
1944
|
+
.g-auth-status { justify-items: center; text-align: center; }
|
|
1945
|
+
|
|
1946
|
+
.g-otp-input { display: grid; grid-template-columns: repeat(var(--g-otp-length, 6), minmax(2.25rem, 1fr)); gap: var(--g-space-2); direction: ltr; }
|
|
1947
|
+
.g-otp-cell { min-width: 0; block-size: 3rem; padding: 0; border: 1px solid var(--g-color-border-strong); border-radius: var(--g-radius-md); background: var(--g-color-surface); color: var(--g-color-text); font: 650 1.25rem/1 var(--g-font-mono); text-align: center; caret-color: var(--g-color-primary); }
|
|
1948
|
+
.g-otp-cell:focus-visible { border-color: var(--g-color-primary); outline: var(--g-focus-ring-width) solid var(--g-focus-ring); outline-offset: 1px; }
|
|
1949
|
+
.g-otp-input.is-complete .g-otp-cell { border-color: var(--g-color-success); }
|
|
1950
|
+
.g-otp-input.is-invalid .g-otp-cell { border-color: var(--g-color-danger); }
|
|
1951
|
+
|
|
1952
|
+
.g-password-strength { display: grid; gap: var(--g-space-2); }
|
|
1953
|
+
.g-password-strength-header { display: flex; justify-content: space-between; gap: var(--g-space-3); color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); }
|
|
1954
|
+
.g-password-strength-meter { block-size: .35rem; overflow: hidden; border-radius: var(--g-radius-sm); background: var(--g-color-surface-sunken); }
|
|
1955
|
+
.g-password-strength-value { display: block; inline-size: var(--g-password-strength, 0%); block-size: 100%; background: var(--g-password-strength-color, var(--g-color-danger)); transition: inline-size var(--g-duration-normal) var(--g-ease-standard); }
|
|
1956
|
+
.g-password-strength[data-g-strength="2"] { --g-password-strength-color: var(--g-color-warning); }
|
|
1957
|
+
.g-password-strength[data-g-strength="3"], .g-password-strength[data-g-strength="4"] { --g-password-strength-color: var(--g-color-success); }
|
|
1958
|
+
.g-password-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g-space-1) var(--g-space-3); margin: 0; padding: 0; list-style: none; color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); }
|
|
1959
|
+
.g-password-rule::before { content: "○"; margin-inline-end: var(--g-space-1); }
|
|
1960
|
+
.g-password-rule.is-valid { color: var(--g-color-success); }
|
|
1961
|
+
.g-password-rule.is-valid::before { content: "✓"; }
|
|
1962
|
+
|
|
1963
|
+
.g-auth-timer { display: inline-flex; align-items: center; gap: var(--g-space-2); color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); font-variant-numeric: tabular-nums; }
|
|
1964
|
+
.g-auth-timer[data-g-timer-state="active"] [data-g-auth-timer-reset] { display: none; }
|
|
1965
|
+
.g-auth-timer[data-g-timer-state="expired"] [data-g-auth-time] { color: var(--g-color-danger); }
|
|
1966
|
+
.g-auth-timer-button { padding: 0; border: 0; background: transparent; color: var(--g-color-primary-text); cursor: pointer; }
|
|
1967
|
+
|
|
1968
|
+
.g-passkey-graphic { display: grid; grid-template-columns: repeat(3, 2rem); justify-content: center; gap: var(--g-space-2); padding: var(--g-space-5); border: 1px dashed var(--g-color-border-strong); border-radius: var(--g-radius-md); background: var(--g-color-surface-subtle); }
|
|
1969
|
+
.g-passkey-device { block-size: 2.75rem; border: 1px solid var(--g-color-border-strong); border-radius: var(--g-radius-md); background: var(--g-color-surface); }
|
|
1970
|
+
.g-qr-login-layout { display: grid; grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr); align-items: center; gap: var(--g-space-5); }
|
|
1971
|
+
.g-qr-code { aspect-ratio: 1; display: grid; place-items: center; padding: var(--g-space-3); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: #fff; color: #111; }
|
|
1972
|
+
.g-qr-code > :where(img, svg, canvas) { max-width: 100%; }
|
|
1973
|
+
.g-invitation-details { display: grid; gap: var(--g-space-2); padding: var(--g-space-4); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface-subtle); }
|
|
1974
|
+
.g-invitation-row { display: grid; grid-template-columns: minmax(6rem, .35fr) minmax(0, 1fr); gap: var(--g-space-3); font-size: var(--g-font-size-sm); }
|
|
1975
|
+
.g-invitation-label { color: var(--g-color-text-muted); }
|
|
1976
|
+
|
|
1977
|
+
:where(.g-lock-screen, .g-session-expired) { min-block-size: 100svh; display: grid; place-items: center; padding: max(var(--g-space-4), env(safe-area-inset-top)) max(var(--g-space-4), env(safe-area-inset-right)) max(var(--g-space-4), env(safe-area-inset-bottom)) max(var(--g-space-4), env(safe-area-inset-left)); background: var(--g-color-surface-subtle); }
|
|
1978
|
+
.g-lock-screen-panel, .g-session-expired-panel { width: min(100%, 28rem); display: grid; justify-items: center; gap: var(--g-space-4); padding: clamp(1.5rem, 5vw, 2.5rem); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); box-shadow: var(--g-shadow-sm); text-align: center; }
|
|
1979
|
+
.g-lock-screen-time { font-size: clamp(2rem, 8vw, 4rem); font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
|
|
1980
|
+
|
|
1981
|
+
:where(.g-account-chooser, .g-tenant-chooser, .g-identity-switcher) { display: grid; gap: var(--g-space-4); }
|
|
1982
|
+
.g-identity-switcher { position: relative; }
|
|
1983
|
+
.g-identity-switcher-trigger { width: 100%; }
|
|
1984
|
+
.g-identity-switcher-menu { position: absolute; z-index: var(--g-z-dropdown); inset-block-start: calc(100% + var(--g-space-2)); inset-inline: 0; display: grid; gap: var(--g-space-2); max-block-size: min(24rem, 70vh); padding: var(--g-space-2); overflow: auto; border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); box-shadow: var(--g-shadow-md); }
|
|
1985
|
+
|
|
1986
|
+
.g-account-security { gap: var(--g-space-4); }
|
|
1987
|
+
.g-security-section { display: grid; gap: var(--g-space-3); padding-block: var(--g-space-4); border-block-start: 1px solid var(--g-color-border); }
|
|
1988
|
+
.g-security-section:first-child { padding-block-start: 0; border-block-start: 0; }
|
|
1989
|
+
.g-security-section-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--g-space-3); }
|
|
1990
|
+
:where(.g-device-management, .g-login-activity, .g-connected-accounts, .g-recovery-codes) { display: grid; gap: var(--g-space-3); }
|
|
1991
|
+
.g-device-item, .g-login-event, .g-connected-account { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--g-space-3); padding: var(--g-space-3); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); }
|
|
1992
|
+
.g-device-icon, .g-login-event-icon, .g-connected-account-icon { display: inline-grid; inline-size: 2.5rem; block-size: 2.5rem; place-items: center; border-radius: var(--g-radius-md); background: var(--g-color-surface-subtle); color: var(--g-color-text-muted); }
|
|
1993
|
+
.g-device-main, .g-login-event-main, .g-connected-account-main { min-width: 0; }
|
|
1994
|
+
.g-device-current { color: var(--g-color-success); font-size: var(--g-font-size-sm); font-weight: 650; }
|
|
1995
|
+
.g-login-event.is-risk { border-color: color-mix(in srgb, var(--g-color-danger) 38%, var(--g-color-border)); background: var(--g-color-danger-soft); }
|
|
1996
|
+
.g-login-event.is-risk .g-auth-choice-meta { color: var(--g-color-text); }
|
|
1997
|
+
.g-security-alert { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--g-space-4); padding: var(--g-space-4); border: 1px solid color-mix(in srgb, var(--g-color-warning) 45%, var(--g-color-border)); border-radius: var(--g-radius-md); background: var(--g-color-warning-soft); }
|
|
1998
|
+
.g-security-alert-actions { grid-column: 2; display: flex; gap: var(--g-space-2); flex-wrap: wrap; }
|
|
1999
|
+
.g-recovery-code-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g-space-2); }
|
|
2000
|
+
.g-recovery-code { padding: var(--g-space-2) var(--g-space-3); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-sm); background: var(--g-color-surface-subtle); font-family: var(--g-font-mono); text-align: center; user-select: all; }
|
|
2001
|
+
.g-trusted-device { display: flex; align-items: start; gap: var(--g-space-3); padding: var(--g-space-3); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface-subtle); }
|
|
2002
|
+
.g-auth-consent-scopes { display: grid; gap: var(--g-space-2); padding: var(--g-space-3); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); }
|
|
2003
|
+
.g-auth-consent-scope { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--g-space-2); }
|
|
2004
|
+
.g-auth-result.is-success .g-auth-result-icon { background: var(--g-color-success-soft); color: var(--g-color-success); }
|
|
2005
|
+
.g-auth-result.is-error .g-auth-result-icon { background: var(--g-color-danger-soft); color: var(--g-color-danger); }
|
|
2006
|
+
|
|
2007
|
+
@container g-auth (max-width: 44rem) {
|
|
2008
|
+
.g-auth-split { grid-template-columns: 1fr; }
|
|
2009
|
+
.g-auth-split-aside { display: none; }
|
|
2010
|
+
}
|
|
2011
|
+
@container g-auth-card (max-width: 24rem) {
|
|
2012
|
+
.g-qr-login-layout { grid-template-columns: 1fr; justify-items: center; text-align: center; }
|
|
2013
|
+
.g-password-rules, .g-recovery-code-grid { grid-template-columns: 1fr; }
|
|
2014
|
+
}
|
|
2015
|
+
@media (max-width: 44rem) {
|
|
2016
|
+
.g-auth-split { grid-template-columns: 1fr; }
|
|
2017
|
+
.g-auth-split-aside { display: none; }
|
|
2018
|
+
.g-auth-panel { box-shadow: none; }
|
|
2019
|
+
.g-device-item, .g-login-event, .g-connected-account { grid-template-columns: auto minmax(0, 1fr); }
|
|
2020
|
+
:where(.g-device-item, .g-login-event, .g-connected-account) > :last-child { grid-column: 2; justify-self: start; }
|
|
2021
|
+
}
|
|
2022
|
+
[dir="rtl"] .g-otp-input { direction: ltr; }
|
|
2023
|
+
@media (prefers-reduced-motion: reduce) { .g-password-strength-value { transition: none; } }
|
|
2024
|
+
@media (forced-colors: active) {
|
|
2025
|
+
:where(.g-auth-choice[aria-selected="true"], .g-auth-choice.is-selected, .g-otp-input.is-complete .g-otp-cell, .g-otp-input.is-invalid .g-otp-cell) { outline: 2px solid CanvasText; outline-offset: 1px; }
|
|
2026
|
+
.g-password-strength-value { background: Highlight; }
|
|
2027
|
+
}
|
|
2028
|
+
@media print {
|
|
2029
|
+
:where(.g-auth-centered, .g-auth-split, .g-lock-screen, .g-session-expired) { min-block-size: auto; display: block; padding: 0; background: #fff; }
|
|
2030
|
+
.g-auth-split-aside, .g-auth-actions, .g-auth-provider-list, .g-auth-timer, .g-security-alert-actions, :where(.g-device-item, .g-login-event, .g-connected-account) > button { display: none !important; }
|
|
2031
|
+
:where(.g-auth-panel, .g-lock-screen-panel, .g-session-expired-panel) { width: 100%; max-width: none; border-color: #000; box-shadow: none; }
|
|
2032
|
+
:where(.g-recovery-code, .g-device-item, .g-login-event, .g-connected-account, .g-security-alert) { break-inside: avoid; }
|
|
2033
|
+
}
|
|
2034
|
+
}
|
|
2035
|
+
|
|
2036
|
+
@layer gardener.components {
|
|
2037
|
+
.g-commerce-container { container: g-commerce / inline-size; min-inline-size: 0; }
|
|
2038
|
+
.g-commerce-panel { padding: var(--g-space-5); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); }
|
|
2039
|
+
.g-commerce-header, .g-commerce-row, .g-product-card-actions, .g-price-display, .g-stock-status, .g-cart-item-actions, .g-coupon-row, .g-payment-method-header, .g-order-detail-header, .g-billing-history-header, .g-refund-status-header, .g-tax-summary-row { display: flex; align-items: center; gap: var(--g-space-3); }
|
|
2040
|
+
.g-commerce-header, .g-order-detail-header, .g-billing-history-header, .g-refund-status-header, .g-tax-summary-row { justify-content: space-between; }
|
|
2041
|
+
.g-commerce-list, .g-product-list, .g-cart, .g-cart-summary, .g-checkout-main, .g-address-selector, .g-shipping-method, .g-pickup-selector, .g-promotion-list, .g-payment-method, .g-order-detail, .g-billing-history, .g-refund-status, .g-tax-summary { display: grid; gap: var(--g-space-4); }
|
|
2042
|
+
|
|
2043
|
+
.g-commerce-product-card { display: grid; overflow: hidden; border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); }
|
|
2044
|
+
.g-commerce-product-card .g-product-media { position: relative; aspect-ratio: 4 / 3; }
|
|
2045
|
+
.g-product-card-badge { position: absolute; inset-block-start: var(--g-space-3); inset-inline-start: var(--g-space-3); }
|
|
2046
|
+
.g-product-card-body { display: grid; gap: var(--g-space-3); padding: var(--g-space-4); }
|
|
2047
|
+
.g-product-card-title { margin: 0; font-size: var(--g-font-size-lg); }
|
|
2048
|
+
.g-product-card-meta, .g-product-vendor, .g-product-sku, .g-price-note, .g-stock-note, .g-order-meta, .g-billing-period { color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); }
|
|
2049
|
+
.g-product-card-actions { flex-wrap: wrap; justify-content: space-between; }
|
|
2050
|
+
|
|
2051
|
+
.g-commerce-product-list { display: grid; gap: 0; border-block: 1px solid var(--g-color-border); }
|
|
2052
|
+
.g-product-list-item { display: grid; grid-template-columns: 6rem minmax(0, 1fr) auto; gap: var(--g-space-4); align-items: center; padding-block: var(--g-space-4); border-block-end: 1px solid var(--g-color-border); }
|
|
2053
|
+
.g-product-list-item:last-child { border-block-end: 0; }
|
|
2054
|
+
.g-product-list-media { aspect-ratio: 1; overflow: hidden; border-radius: var(--g-radius-sm); background: var(--g-color-surface-subtle); }
|
|
2055
|
+
.g-product-list-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
|
|
2056
|
+
.g-product-list-main { min-inline-size: 0; }
|
|
2057
|
+
.g-product-list-action { text-align: end; }
|
|
2058
|
+
|
|
2059
|
+
.g-commerce-product-detail { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(19rem, .92fr); gap: clamp(1.5rem, 5vw, 4rem); }
|
|
2060
|
+
.g-commerce-product-gallery { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--g-space-3); }
|
|
2061
|
+
.g-product-gallery-thumbs { display: grid; align-content: start; gap: var(--g-space-2); }
|
|
2062
|
+
.g-product-gallery-thumb { overflow: hidden; aspect-ratio: 1; padding: 0; border: 1px solid var(--g-color-border); border-radius: var(--g-radius-sm); background: var(--g-color-surface); cursor: pointer; }
|
|
2063
|
+
.g-product-gallery-thumb[aria-current="true"] { border-color: var(--g-color-primary); box-shadow: 0 0 0 2px var(--g-focus-ring); }
|
|
2064
|
+
.g-product-gallery-stage { overflow: hidden; aspect-ratio: 1; border-radius: var(--g-radius-md); background: var(--g-color-surface-subtle); }
|
|
2065
|
+
.g-product-gallery-stage .g-carousel-track { block-size: 100%; }
|
|
2066
|
+
.g-product-gallery-stage :is(.g-carousel-slide, [data-g-carousel-slide]) { display: grid; place-items: center; block-size: 100%; }
|
|
2067
|
+
.g-product-gallery-stage img, .g-product-gallery-thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
|
|
2068
|
+
.g-product-detail-summary { align-self: start; display: grid; gap: var(--g-space-5); }
|
|
2069
|
+
.g-product-detail-title { margin: 0; font-size: clamp(1.65rem, 4vw, 2.4rem); }
|
|
2070
|
+
|
|
2071
|
+
.g-price-display { flex-wrap: wrap; align-items: baseline; }
|
|
2072
|
+
.g-price-current { color: var(--g-color-text); font-size: clamp(1.35rem, 3vw, 1.85rem); font-weight: 700; }
|
|
2073
|
+
.g-price-original { color: var(--g-color-text-muted); text-decoration: line-through; }
|
|
2074
|
+
.g-price-discount { color: var(--g-color-danger); font-size: var(--g-font-size-sm); font-weight: 650; }
|
|
2075
|
+
.g-stock-status::before { inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: var(--g-color-success); content: ""; }
|
|
2076
|
+
.g-stock-status.is-low::before { background: var(--g-color-warning); }
|
|
2077
|
+
.g-stock-status.is-out::before { background: var(--g-color-danger); }
|
|
2078
|
+
|
|
2079
|
+
.g-sku-selector { display: grid; gap: var(--g-space-4); }
|
|
2080
|
+
.g-sku-group { display: grid; gap: var(--g-space-2); }
|
|
2081
|
+
.g-sku-group-header { display: flex; justify-content: space-between; gap: var(--g-space-3); }
|
|
2082
|
+
.g-sku-options { display: flex; flex-wrap: wrap; gap: var(--g-space-2); }
|
|
2083
|
+
.g-sku-option { min-block-size: 2.5rem; padding: var(--g-space-2) var(--g-space-3); border: 1px solid var(--g-color-border-strong); border-radius: var(--g-radius-sm); background: var(--g-color-surface); color: var(--g-color-text); cursor: pointer; }
|
|
2084
|
+
.g-sku-option[aria-pressed="true"], .g-sku-option.is-selected { border-color: var(--g-color-primary); background: var(--g-color-primary-soft); color: var(--g-color-on-primary-soft); box-shadow: 0 0 0 1px var(--g-color-primary); }
|
|
2085
|
+
.g-sku-option:disabled, .g-sku-option[aria-disabled="true"] { opacity: .46; cursor: not-allowed; text-decoration: line-through; }
|
|
2086
|
+
.g-sku-selection { color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); }
|
|
2087
|
+
|
|
2088
|
+
.g-quantity-stepper { display: inline-grid; grid-template-columns: 2.5rem minmax(3rem, auto) 2.5rem; align-items: stretch; }
|
|
2089
|
+
.g-quantity-button, .g-quantity-input { min-block-size: 2.5rem; border: 1px solid var(--g-color-border-strong); background: var(--g-color-surface); color: var(--g-color-text); }
|
|
2090
|
+
.g-quantity-button { display: grid; place-items: center; padding: 0; border-radius: var(--g-radius-sm); cursor: pointer; }
|
|
2091
|
+
.g-quantity-button:first-child { border-start-end-radius: 0; border-end-end-radius: 0; }
|
|
2092
|
+
.g-quantity-button:last-child { border-start-start-radius: 0; border-end-start-radius: 0; }
|
|
2093
|
+
.g-quantity-input { inline-size: 3.75rem; padding-inline: var(--g-space-2); border-inline: 0; border-radius: 0; text-align: center; appearance: textfield; }
|
|
2094
|
+
.g-quantity-input::-webkit-inner-spin-button { appearance: none; }
|
|
2095
|
+
|
|
2096
|
+
.g-commerce-cart-item { display: grid; grid-template-columns: 5rem minmax(0, 1fr) auto; gap: var(--g-space-4); align-items: start; padding-block: var(--g-space-4); border-block-end: 1px solid var(--g-color-border); }
|
|
2097
|
+
.g-cart-item-media { overflow: hidden; aspect-ratio: 1; border-radius: var(--g-radius-sm); background: var(--g-color-surface-subtle); }
|
|
2098
|
+
.g-cart-item-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
|
|
2099
|
+
.g-cart-item-main { display: grid; gap: var(--g-space-2); min-inline-size: 0; }
|
|
2100
|
+
.g-cart-item-title { margin: 0; font-size: var(--g-font-size-md); }
|
|
2101
|
+
.g-cart-item-variant { color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); }
|
|
2102
|
+
.g-cart-item-side { display: grid; gap: var(--g-space-3); justify-items: end; }
|
|
2103
|
+
.g-cart-item-actions { flex-wrap: wrap; }
|
|
2104
|
+
.g-cart-empty { padding: var(--g-space-10) var(--g-space-4); text-align: center; }
|
|
2105
|
+
.g-cart-empty[hidden] { display: none; }
|
|
2106
|
+
.g-mini-cart { inline-size: min(100%, 24rem); padding: var(--g-space-4); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); box-shadow: var(--g-shadow-lg); }
|
|
2107
|
+
.g-mini-cart-list { display: grid; gap: var(--g-space-3); max-block-size: 22rem; overflow: auto; }
|
|
2108
|
+
.g-mini-cart-item { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto; gap: var(--g-space-3); align-items: center; }
|
|
2109
|
+
.g-mini-cart-footer { display: grid; gap: var(--g-space-3); margin-block-start: var(--g-space-4); padding-block-start: var(--g-space-4); border-block-start: 1px solid var(--g-color-border); }
|
|
2110
|
+
.g-cart-summary-row, .g-order-summary-row { display: flex; justify-content: space-between; gap: var(--g-space-4); }
|
|
2111
|
+
.g-cart-summary-total, .g-order-summary-total { padding-block-start: var(--g-space-3); border-block-start: 1px solid var(--g-color-border); font-size: var(--g-font-size-lg); font-weight: 700; }
|
|
2112
|
+
|
|
2113
|
+
.g-commerce-checkout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem); gap: clamp(1.5rem, 4vw, 3rem); }
|
|
2114
|
+
.g-checkout-section { display: grid; gap: var(--g-space-4); padding: var(--g-space-5); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); }
|
|
2115
|
+
.g-checkout-section-header { display: flex; align-items: start; justify-content: space-between; gap: var(--g-space-4); }
|
|
2116
|
+
.g-checkout-sidebar { align-self: start; position: sticky; inset-block-start: var(--g-space-4); }
|
|
2117
|
+
.g-checkout-mobile-actions { position: sticky; z-index: var(--g-z-sticky); inset-block-end: 0; display: none; gap: var(--g-space-3); padding: var(--g-space-3) var(--g-space-4) max(var(--g-space-3), env(safe-area-inset-bottom)); border-block-start: 1px solid var(--g-color-border); background: color-mix(in srgb, var(--g-color-surface) 94%, transparent); backdrop-filter: blur(12px); }
|
|
2118
|
+
.g-checkout-mobile-actions .g-btn { flex: 1; }
|
|
2119
|
+
.g-checkout-steps { isolation: isolate; display: grid; grid-template-columns: repeat(var(--g-checkout-step-count, 4), minmax(0, 1fr)); margin-block-end: var(--g-space-5); }
|
|
2120
|
+
.g-checkout-step { position: relative; display: grid; justify-items: center; gap: var(--g-space-2); color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); text-align: center; }
|
|
2121
|
+
.g-checkout-step::before { position: absolute; inset-block-start: .7rem; inset-inline-start: -50%; inset-inline-end: 50%; block-size: 2px; background: var(--g-color-border); content: ""; z-index: -1; }
|
|
2122
|
+
.g-checkout-step:first-child::before { display: none; }
|
|
2123
|
+
.g-checkout-step-marker { display: grid; place-items: center; inline-size: 1.5rem; block-size: 1.5rem; border: 1px solid var(--g-color-border-strong); border-radius: 50%; background: var(--g-color-surface); }
|
|
2124
|
+
.g-checkout-step.is-complete, .g-checkout-step[aria-current="step"] { color: var(--g-color-primary-text); }
|
|
2125
|
+
.g-checkout-step.is-complete::before, .g-checkout-step.is-complete .g-checkout-step-marker, .g-checkout-step[aria-current="step"] .g-checkout-step-marker { border-color: var(--g-color-primary); background: var(--g-color-primary); color: var(--g-color-on-primary); }
|
|
2126
|
+
|
|
2127
|
+
.g-address-card, .g-shipping-option, .g-pickup-option, .g-payment-option { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--g-space-3); align-items: start; padding: var(--g-space-4); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); cursor: pointer; }
|
|
2128
|
+
.g-address-card:has(:checked), .g-shipping-option:has(:checked), .g-pickup-option:has(:checked), .g-payment-option:has(:checked), .g-address-card.is-selected, .g-shipping-option.is-selected, .g-pickup-option.is-selected, .g-payment-option.is-selected { border-color: var(--g-color-primary); background: var(--g-color-primary-soft); box-shadow: 0 0 0 1px var(--g-color-primary); }
|
|
2129
|
+
:is(.g-address-card, .g-shipping-option, .g-pickup-option, .g-payment-option):is(:has(:checked), .is-selected) :is(.g-address-meta, .g-shipping-meta, .g-pickup-meta, .g-payment-meta) { color: var(--g-color-text); }
|
|
2130
|
+
.g-address-main, .g-shipping-main, .g-pickup-main, .g-payment-main { display: grid; gap: var(--g-space-1); min-inline-size: 0; }
|
|
2131
|
+
.g-address-meta, .g-shipping-meta, .g-pickup-meta, .g-payment-meta { color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); }
|
|
2132
|
+
.g-shipping-price, .g-payment-mark { white-space: nowrap; font-weight: 650; }
|
|
2133
|
+
|
|
2134
|
+
.g-coupon { display: grid; gap: var(--g-space-2); }
|
|
2135
|
+
.g-coupon-row { align-items: stretch; }
|
|
2136
|
+
.g-coupon-row .g-input { flex: 1; min-inline-size: 8rem; }
|
|
2137
|
+
.g-coupon-status { min-block-size: 1.25rem; color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); }
|
|
2138
|
+
.g-coupon.is-applied .g-coupon-status { color: var(--g-color-success); }
|
|
2139
|
+
.g-coupon.is-invalid .g-coupon-status { color: var(--g-color-danger); }
|
|
2140
|
+
.g-promotion-item { display: flex; gap: var(--g-space-3); padding: var(--g-space-3); border-inline-start: 3px solid var(--g-color-primary); background: var(--g-color-primary-soft); }
|
|
2141
|
+
.g-promotion-code { flex: none; font-family: var(--g-font-mono); font-weight: 650; }
|
|
2142
|
+
|
|
2143
|
+
.g-invoice-information { display: grid; gap: var(--g-space-4); }
|
|
2144
|
+
.g-invoice-type { display: flex; flex-wrap: wrap; gap: var(--g-space-2); }
|
|
2145
|
+
.g-invoice-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g-space-4); }
|
|
2146
|
+
|
|
2147
|
+
.g-payment-method { gap: var(--g-space-3); }
|
|
2148
|
+
.g-payment-method-header { justify-content: space-between; }
|
|
2149
|
+
.g-payment-brand { display: inline-grid; place-items: center; min-inline-size: 2.8rem; min-block-size: 1.75rem; padding-inline: var(--g-space-2); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-sm); background: var(--g-color-surface); font-size: var(--g-font-size-xs); font-weight: 700; }
|
|
2150
|
+
.g-payment-sheet { display: grid; gap: var(--g-space-4); max-inline-size: 32rem; padding: var(--g-space-5); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); }
|
|
2151
|
+
.g-payment-sheet-total { display: flex; justify-content: space-between; align-items: baseline; padding-block-end: var(--g-space-4); border-block-end: 1px solid var(--g-color-border); }
|
|
2152
|
+
.g-payment-result { display: grid; justify-items: center; gap: var(--g-space-4); max-inline-size: 38rem; margin-inline: auto; padding: clamp(2rem, 6vw, 4rem) var(--g-space-5); text-align: center; }
|
|
2153
|
+
.g-payment-result-icon { display: grid; place-items: center; inline-size: 3.5rem; block-size: 3.5rem; border-radius: 50%; background: var(--g-color-success-soft); color: var(--g-color-success); font-size: 1.5rem; font-weight: 700; }
|
|
2154
|
+
.g-payment-result.is-error .g-payment-result-icon { background: var(--g-color-danger-soft); color: var(--g-color-danger); }
|
|
2155
|
+
.g-payment-result.is-pending .g-payment-result-icon { background: var(--g-color-warning-soft); color: var(--g-color-warning); }
|
|
2156
|
+
.g-payment-result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--g-space-3); }
|
|
2157
|
+
|
|
2158
|
+
.g-commerce-order-summary { display: grid; gap: var(--g-space-3); padding: var(--g-space-5); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); }
|
|
2159
|
+
.g-commerce-order-timeline { display: grid; gap: 0; }
|
|
2160
|
+
.g-order-timeline-item { position: relative; display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: var(--g-space-3); padding-block-end: var(--g-space-5); }
|
|
2161
|
+
.g-order-timeline-item::before { position: absolute; inset-block: 1.25rem 0; inset-inline-start: .57rem; inline-size: 2px; background: var(--g-color-border); content: ""; }
|
|
2162
|
+
.g-order-timeline-item:last-child::before { display: none; }
|
|
2163
|
+
.g-order-timeline-dot { inline-size: 1.25rem; block-size: 1.25rem; border: 3px solid var(--g-color-surface); border-radius: 50%; background: var(--g-color-border-strong); box-shadow: 0 0 0 1px var(--g-color-border); }
|
|
2164
|
+
.g-order-timeline-item.is-complete .g-order-timeline-dot, .g-order-timeline-item[aria-current="step"] .g-order-timeline-dot { background: var(--g-color-primary); box-shadow: 0 0 0 1px var(--g-color-primary); }
|
|
2165
|
+
.g-order-timeline-content { display: grid; gap: var(--g-space-1); }
|
|
2166
|
+
.g-order-detail-section { padding-block: var(--g-space-4); border-block-start: 1px solid var(--g-color-border); }
|
|
2167
|
+
|
|
2168
|
+
.g-subscription-plan { display: grid; align-content: start; gap: var(--g-space-4); padding: var(--g-space-5); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); }
|
|
2169
|
+
.g-subscription-plan.is-featured { border-color: var(--g-color-primary); box-shadow: 0 0 0 1px var(--g-color-primary); }
|
|
2170
|
+
.g-plan-price { display: flex; align-items: baseline; gap: var(--g-space-2); }
|
|
2171
|
+
.g-plan-price-value { font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 700; }
|
|
2172
|
+
.g-plan-features { display: grid; gap: var(--g-space-2); padding: 0; list-style: none; }
|
|
2173
|
+
.g-pricing-comparison { inline-size: 100%; border-collapse: separate; border-spacing: 0; }
|
|
2174
|
+
.g-pricing-comparison th, .g-pricing-comparison td { padding: var(--g-space-3); border-block-end: 1px solid var(--g-color-border); text-align: center; }
|
|
2175
|
+
.g-pricing-comparison th:first-child, .g-pricing-comparison td:first-child { position: sticky; inset-inline-start: 0; background: var(--g-color-surface); text-align: start; z-index: 1; }
|
|
2176
|
+
.g-commerce-usage-meter { display: grid; gap: var(--g-space-2); }
|
|
2177
|
+
.g-usage-meter-header { display: flex; justify-content: space-between; gap: var(--g-space-4); }
|
|
2178
|
+
.g-usage-meter-track { overflow: hidden; block-size: .55rem; border-radius: var(--g-radius-sm); background: var(--g-color-surface-subtle); }
|
|
2179
|
+
.g-usage-meter-value { inline-size: min(100%, var(--g-usage, 0%)); block-size: 100%; background: var(--g-color-primary); }
|
|
2180
|
+
.g-usage-meter.is-warning .g-usage-meter-value { background: var(--g-color-warning); }
|
|
2181
|
+
.g-usage-meter.is-danger .g-usage-meter-value { background: var(--g-color-danger); }
|
|
2182
|
+
.g-billing-history-item { display: grid; grid-template-columns: minmax(6rem, 1fr) minmax(6rem, 1fr) auto auto; gap: var(--g-space-3); align-items: center; padding-block: var(--g-space-3); border-block-end: 1px solid var(--g-color-border); }
|
|
2183
|
+
.g-refund-status-progress { display: grid; grid-template-columns: repeat(var(--g-refund-step-count, 3), minmax(0, 1fr)); gap: var(--g-space-2); }
|
|
2184
|
+
.g-refund-status-step { block-size: .4rem; border-radius: var(--g-radius-sm); background: var(--g-color-border); }
|
|
2185
|
+
.g-refund-status-step.is-complete { background: var(--g-color-primary); }
|
|
2186
|
+
.g-tax-summary-row { padding-block: var(--g-space-2); }
|
|
2187
|
+
.g-tax-summary-row + .g-tax-summary-row { border-block-start: 1px solid var(--g-color-border); }
|
|
2188
|
+
|
|
2189
|
+
@container g-commerce (max-width: 704px) {
|
|
2190
|
+
.g-commerce-product-detail, .g-commerce-checkout { grid-template-columns: minmax(0, 1fr); }
|
|
2191
|
+
.g-checkout-sidebar { position: static; }
|
|
2192
|
+
.g-checkout-mobile-actions { display: flex; }
|
|
2193
|
+
}
|
|
2194
|
+
@container g-commerce (max-width: 480px) {
|
|
2195
|
+
.g-product-list-item, .g-commerce-cart-item { grid-template-columns: 4rem minmax(0, 1fr); }
|
|
2196
|
+
.g-product-list-action, .g-cart-item-side { grid-column: 2; justify-items: start; text-align: start; }
|
|
2197
|
+
.g-commerce-product-gallery { grid-template-columns: 1fr; }
|
|
2198
|
+
.g-product-gallery-thumbs { grid-row: 2; grid-template-columns: repeat(4, 1fr); }
|
|
2199
|
+
.g-invoice-fields { grid-template-columns: 1fr; }
|
|
2200
|
+
.g-address-card, .g-shipping-option, .g-pickup-option, .g-payment-option { grid-template-columns: auto minmax(0, 1fr); }
|
|
2201
|
+
.g-address-card > :last-child, .g-shipping-option > :last-child, .g-pickup-option > :last-child, .g-payment-option > :last-child { grid-column: 2; }
|
|
2202
|
+
.g-billing-history-item { grid-template-columns: 1fr auto; }
|
|
2203
|
+
}
|
|
2204
|
+
@media (max-width: 704px) {
|
|
2205
|
+
.g-commerce-product-detail, .g-commerce-checkout { grid-template-columns: minmax(0, 1fr); }
|
|
2206
|
+
.g-checkout-sidebar { position: static; }
|
|
2207
|
+
.g-checkout-mobile-actions { display: flex; }
|
|
2208
|
+
}
|
|
2209
|
+
@media (max-width: 480px) {
|
|
2210
|
+
.g-checkout-steps { overflow-x: auto; grid-template-columns: repeat(var(--g-checkout-step-count, 4), minmax(5.5rem, 1fr)); padding-block-end: var(--g-space-2); }
|
|
2211
|
+
.g-coupon-row { flex-wrap: wrap; }
|
|
2212
|
+
.g-coupon-row .g-btn { flex: 1; }
|
|
2213
|
+
.g-payment-result-actions { inline-size: 100%; }
|
|
2214
|
+
.g-payment-result-actions .g-btn { flex: 1; }
|
|
2215
|
+
}
|
|
2216
|
+
[dir="rtl"] .g-product-list-action { text-align: start; }
|
|
2217
|
+
@media (prefers-reduced-motion: reduce) { .g-usage-meter-value { transition: none; } }
|
|
2218
|
+
@media (forced-colors: active) {
|
|
2219
|
+
.g-sku-option[aria-pressed="true"], .g-address-card:has(:checked), .g-shipping-option:has(:checked), .g-pickup-option:has(:checked), .g-payment-option:has(:checked) { outline: 2px solid Highlight; }
|
|
2220
|
+
.g-stock-status::before, .g-order-timeline-dot, .g-usage-meter-value { forced-color-adjust: none; }
|
|
2221
|
+
}
|
|
2222
|
+
@media print {
|
|
2223
|
+
.g-product-card-actions, .g-cart-item-actions, .g-coupon, .g-payment-result-actions, .g-checkout-steps, .g-checkout-mobile-actions { display: none !important; }
|
|
2224
|
+
.g-commerce-checkout, .g-commerce-product-detail { grid-template-columns: 1fr; }
|
|
2225
|
+
.g-checkout-sidebar { position: static; }
|
|
2226
|
+
.g-commerce-panel, .g-checkout-section, .g-commerce-order-summary, .g-subscription-plan { break-inside: avoid; box-shadow: none; }
|
|
2227
|
+
}
|
|
2228
|
+
}
|
|
2229
|
+
|
|
2230
|
+
@layer gardener.components {
|
|
2231
|
+
:where(.g-mobile-safe-shell, .g-mobile-app-bar, .g-mobile-bottom-navigation, .g-mobile-bottom-sheet, .g-mobile-action-sheet, .g-mobile-pull-refresh, .g-mobile-infinite-load, .g-mobile-swipe-actions, .g-mobile-swipe-tabs, .g-mobile-category-view, .g-mobile-filter-sheet, .g-mobile-purchase-bar, .g-mobile-search, .g-mobile-picker, .g-mobile-wheel-picker, .g-mobile-fab, .g-mobile-fullscreen-dialog, .g-mobile-keyboard-avoidance, .g-mobile-gesture-hint, .g-mobile-offline-banner, .g-mobile-segmented-control, .g-mobile-feed, .g-mobile-card-carousel, .g-mobile-form, .g-mobile-auth, .g-mobile-checkout, .g-mobile-media-viewer, .g-mobile-keyboard-toolbar, .g-mobile-selection-mode, .g-mobile-snackbar, .g-mobile-permission-prompt, .g-mobile-state) { box-sizing: border-box; }
|
|
2232
|
+
|
|
2233
|
+
.g-mobile-safe-shell { --g-mobile-bar-size: 3.5rem; position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; inline-size: min(100%, var(--g-mobile-max-width, 32rem)); min-block-size: 100svh; min-block-size: 100dvh; margin-inline: auto; overflow: clip; background: var(--g-color-canvas); color: var(--g-color-text); container: g-mobile-shell / inline-size; }
|
|
2234
|
+
.g-mobile-safe-shell.is-contained { min-block-size: var(--g-mobile-contained-size, 42rem); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); }
|
|
2235
|
+
.g-mobile-safe-content { min-block-size: 0; overflow: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; padding: var(--g-mobile-content-padding, var(--g-space-4)); }
|
|
2236
|
+
|
|
2237
|
+
.g-mobile-app-bar { position: sticky; z-index: var(--g-z-sticky); inset-block-start: 0; display: grid; grid-template-columns: minmax(2.75rem, auto) minmax(0, 1fr) minmax(2.75rem, auto); align-items: center; min-block-size: calc(var(--g-mobile-bar-size, 3.5rem) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) var(--g-space-2) 0; border-block-end: 1px solid var(--g-color-border); background: color-mix(in srgb, var(--g-color-surface) 94%, transparent); backdrop-filter: blur(12px); }
|
|
2238
|
+
.g-mobile-app-bar-start, .g-mobile-app-bar-actions { display: flex; min-inline-size: 2.75rem; align-items: center; gap: var(--g-space-1); }
|
|
2239
|
+
.g-mobile-app-bar-actions { justify-content: end; }
|
|
2240
|
+
.g-mobile-app-bar-title { min-inline-size: 0; margin: 0; overflow: hidden; font-size: var(--g-font-size-md); font-weight: 650; line-height: 1.25; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
|
|
2241
|
+
.g-mobile-app-bar.is-large { grid-template-rows: auto auto; }
|
|
2242
|
+
.g-mobile-app-bar.is-large .g-mobile-app-bar-title { grid-column: 1 / -1; padding: var(--g-space-3) var(--g-space-2); font-size: var(--g-font-size-2xl); text-align: start; }
|
|
2243
|
+
|
|
2244
|
+
.g-mobile-bottom-navigation { position: sticky; z-index: var(--g-z-sticky); inset-block-end: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: var(--g-space-1) var(--g-space-2) calc(var(--g-space-1) + env(safe-area-inset-bottom)); border-block-start: 1px solid var(--g-color-border); background: color-mix(in srgb, var(--g-color-surface) 96%, transparent); backdrop-filter: blur(12px); }
|
|
2245
|
+
.g-mobile-bottom-navigation-item { position: relative; display: grid; min-inline-size: 0; min-block-size: 3.25rem; place-items: center; align-content: center; gap: 2px; padding: var(--g-space-1); border: 0; border-radius: var(--g-radius-md); background: transparent; color: var(--g-color-text-muted); font-size: var(--g-font-size-xs); text-decoration: none; }
|
|
2246
|
+
.g-mobile-bottom-navigation-item:is(.is-active, [aria-current="page"]) { color: var(--g-color-primary-text); font-weight: 650; }
|
|
2247
|
+
.g-mobile-bottom-navigation-item:is(.is-active, [aria-current="page"])::before { content: ""; position: absolute; inset-block-start: 0; inline-size: 1.5rem; block-size: 2px; background: var(--g-color-primary); }
|
|
2248
|
+
|
|
2249
|
+
.g-mobile-bottom-sheet, .g-mobile-action-sheet, .g-mobile-filter-sheet { position: fixed; z-index: var(--g-z-dialog); inset: 0; display: grid; align-items: end; padding-block-start: max(var(--g-space-8), env(safe-area-inset-top)); background: rgb(15 23 42 / .38); opacity: 0; transition: opacity var(--g-duration-fast) var(--g-ease-standard); }
|
|
2250
|
+
:where(.g-mobile-bottom-sheet, .g-mobile-action-sheet, .g-mobile-filter-sheet).is-open { opacity: 1; }
|
|
2251
|
+
:where(.g-mobile-bottom-sheet, .g-mobile-action-sheet, .g-mobile-filter-sheet)[hidden] { display: none; }
|
|
2252
|
+
.g-mobile-sheet-panel { inline-size: min(100%, var(--g-mobile-sheet-max-width, 42rem)); max-block-size: min(90dvh, var(--g-mobile-sheet-max-height, 48rem)); margin-inline: auto; overflow: auto; overscroll-behavior: contain; padding: var(--g-space-4) var(--g-space-4) max(var(--g-space-4), env(safe-area-inset-bottom)); border: 1px solid var(--g-color-border); border-block-end: 0; border-radius: var(--g-radius-md) var(--g-radius-md) 0 0; background: var(--g-color-surface); box-shadow: var(--g-shadow-lg); transform: translateY(100%); transition: transform var(--g-duration-fast) var(--g-ease-standard); }
|
|
2253
|
+
.is-open > .g-mobile-sheet-panel { transform: translateY(0); }
|
|
2254
|
+
.g-mobile-sheet-handle { inline-size: 2.5rem; block-size: .25rem; margin: 0 auto var(--g-space-4); border-radius: var(--g-radius-full); background: var(--g-color-border-strong); }
|
|
2255
|
+
.g-mobile-sheet-header, .g-mobile-sheet-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-3); }
|
|
2256
|
+
.g-mobile-sheet-footer { position: sticky; inset-block-end: calc(-1 * var(--g-space-4)); margin: var(--g-space-4) calc(-1 * var(--g-space-4)) calc(-1 * max(var(--g-space-4), env(safe-area-inset-bottom))); padding: var(--g-space-3) var(--g-space-4) max(var(--g-space-3), env(safe-area-inset-bottom)); border-block-start: 1px solid var(--g-color-border); background: var(--g-color-surface); }
|
|
2257
|
+
.g-mobile-action-list { display: grid; gap: var(--g-space-1); }
|
|
2258
|
+
.g-mobile-action-item { display: flex; min-block-size: 3rem; align-items: center; gap: var(--g-space-3); inline-size: 100%; padding: var(--g-space-3); border: 0; border-radius: var(--g-radius-md); background: transparent; color: inherit; text-align: start; }
|
|
2259
|
+
.g-mobile-action-item:is(:hover, :focus-visible) { background: var(--g-color-surface-subtle); }
|
|
2260
|
+
|
|
2261
|
+
.g-mobile-pull-refresh { position: relative; min-block-size: 100%; overscroll-behavior-y: contain; touch-action: pan-y; }
|
|
2262
|
+
.g-mobile-pull-refresh-indicator { position: absolute; inset-block-start: 0; inset-inline: 0; display: flex; min-block-size: 3rem; align-items: center; justify-content: center; gap: var(--g-space-2); color: var(--g-color-text-muted); transform: translateY(calc(-100% + var(--g-pull-distance, 0px))); }
|
|
2263
|
+
.g-mobile-pull-refresh-content { transform: translateY(var(--g-pull-distance, 0px)); transition: transform var(--g-duration-fast) var(--g-ease-standard); }
|
|
2264
|
+
.g-mobile-pull-refresh.is-pulling .g-mobile-pull-refresh-content, .g-mobile-pull-refresh.is-pulling .g-mobile-pull-refresh-indicator { transition: none; }
|
|
2265
|
+
.g-mobile-infinite-load { display: grid; justify-items: center; gap: var(--g-space-2); min-block-size: 3.5rem; padding: var(--g-space-3); color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); }
|
|
2266
|
+
.g-mobile-infinite-load.is-done [data-g-infinite-load-more], .g-mobile-infinite-load:not(.is-loading) .g-spinner { display: none; }
|
|
2267
|
+
|
|
2268
|
+
.g-mobile-swipe-actions { overflow: hidden; border-block-end: 1px solid var(--g-color-border); background: var(--g-color-surface); touch-action: pan-y; }
|
|
2269
|
+
.g-mobile-swipe-actions-track { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; inline-size: calc(100% + var(--g-swipe-actions-width, 9rem)); transform: translateX(var(--g-swipe-offset, 0)); transition: transform var(--g-duration-fast) var(--g-ease-standard); }
|
|
2270
|
+
.g-mobile-swipe-actions.is-revealed .g-mobile-swipe-actions-track { --g-swipe-offset: calc(-1 * var(--g-swipe-actions-width, 9rem)); }
|
|
2271
|
+
[dir="rtl"] .g-mobile-swipe-actions.is-revealed .g-mobile-swipe-actions-track { --g-swipe-offset: var(--g-swipe-actions-width, 9rem); }
|
|
2272
|
+
.g-mobile-swipe-actions-main, .g-mobile-swipe-actions-buttons { display: flex; min-inline-size: 0; align-items: center; }
|
|
2273
|
+
.g-mobile-swipe-actions-main { padding: var(--g-space-3) var(--g-space-4); background: var(--g-color-surface); }
|
|
2274
|
+
.g-mobile-swipe-action { min-inline-size: 4.5rem; align-self: stretch; border: 0; color: var(--g-color-on-primary); background: var(--g-color-primary); }
|
|
2275
|
+
.g-mobile-swipe-action.is-danger { background: var(--g-color-danger); color: var(--g-color-on-danger, #fff); }
|
|
2276
|
+
|
|
2277
|
+
.g-mobile-swipe-tabs, .g-mobile-segmented-control { display: flex; gap: var(--g-space-1); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
|
|
2278
|
+
.g-mobile-swipe-tab { flex: 0 0 auto; min-block-size: 2.75rem; padding: var(--g-space-2) var(--g-space-3); border: 0; border-block-end: 2px solid transparent; background: transparent; color: var(--g-color-text-muted); scroll-snap-align: start; }
|
|
2279
|
+
.g-mobile-swipe-tab[aria-selected="true"] { border-block-end-color: var(--g-color-primary); color: var(--g-color-primary-text); font-weight: 650; }
|
|
2280
|
+
.g-mobile-segmented-control { padding: 2px; border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface-subtle); }
|
|
2281
|
+
.g-mobile-segmented-item { flex: 1 0 auto; min-block-size: 2.5rem; padding: var(--g-space-2) var(--g-space-3); border: 0; border-radius: calc(var(--g-radius-md) - 1px); background: transparent; color: var(--g-color-text-muted); }
|
|
2282
|
+
.g-mobile-segmented-item[aria-pressed="true"] { background: var(--g-color-surface); color: var(--g-color-text); box-shadow: var(--g-shadow-xs); }
|
|
2283
|
+
|
|
2284
|
+
.g-mobile-category-view { display: grid; grid-template-columns: minmax(5.5rem, 28%) minmax(0, 1fr); min-block-size: 100%; background: var(--g-color-surface); }
|
|
2285
|
+
.g-mobile-category-rail { overflow-y: auto; border-inline-end: 1px solid var(--g-color-border); background: var(--g-color-surface-subtle); }
|
|
2286
|
+
.g-mobile-category-link { display: grid; min-block-size: 3.25rem; place-items: center; padding: var(--g-space-2); border-inline-start: 3px solid transparent; color: var(--g-color-text); font-size: var(--g-font-size-sm); text-align: center; text-decoration: none; }
|
|
2287
|
+
.g-mobile-category-link:is(.is-active, [aria-current="page"]) { border-inline-start-color: var(--g-color-primary); background: var(--g-color-surface); color: var(--g-color-primary-text); font-weight: 650; }
|
|
2288
|
+
.g-mobile-category-content { min-inline-size: 0; padding: var(--g-space-4); }
|
|
2289
|
+
.g-mobile-category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g-space-4) var(--g-space-2); }
|
|
2290
|
+
.g-mobile-category-item { display: grid; min-inline-size: 0; justify-items: center; gap: var(--g-space-2); font-size: var(--g-font-size-xs); text-align: center; }
|
|
2291
|
+
|
|
2292
|
+
.g-mobile-purchase-bar, .g-mobile-keyboard-toolbar, .g-mobile-selection-mode { position: sticky; z-index: var(--g-z-sticky); inset-block-end: 0; display: flex; align-items: center; gap: var(--g-space-3); padding: var(--g-space-3) var(--g-space-4) max(var(--g-space-3), env(safe-area-inset-bottom)); border-block-start: 1px solid var(--g-color-border); background: color-mix(in srgb, var(--g-color-surface) 96%, transparent); backdrop-filter: blur(12px); }
|
|
2293
|
+
.g-mobile-purchase-main, .g-mobile-selection-main { min-inline-size: 0; flex: 1; }
|
|
2294
|
+
.g-mobile-purchase-actions, .g-mobile-selection-actions { display: flex; gap: var(--g-space-2); }
|
|
2295
|
+
.g-mobile-keyboard-toolbar { inset-block-end: var(--g-keyboard-offset, 0px); justify-content: space-between; padding-block-end: var(--g-space-2); }
|
|
2296
|
+
|
|
2297
|
+
.g-mobile-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--g-space-2); padding: var(--g-space-2) var(--g-space-3); }
|
|
2298
|
+
.g-mobile-search-field { position: relative; min-inline-size: 0; }
|
|
2299
|
+
.g-mobile-search-field > .g-input { min-block-size: 2.75rem; padding-inline-start: 2.5rem; border-radius: var(--g-radius-md); background: var(--g-color-surface-subtle); }
|
|
2300
|
+
.g-mobile-search-icon { position: absolute; inset-block-start: 50%; inset-inline-start: var(--g-space-3); color: var(--g-color-text-muted); transform: translateY(-50%); pointer-events: none; }
|
|
2301
|
+
.g-mobile-search-field > [data-g-clear] { position: absolute; inset-block-start: 50%; inset-inline-end: var(--g-space-1); min-inline-size: 2.25rem; min-block-size: 2.25rem; transform: translateY(-50%); }
|
|
2302
|
+
.g-mobile-search-field:has(> [data-g-clear]) > .g-input { padding-inline-end: 2.75rem; }
|
|
2303
|
+
|
|
2304
|
+
.g-mobile-picker { display: grid; gap: var(--g-space-3); }
|
|
2305
|
+
.g-mobile-picker-grid { display: grid; grid-template-columns: repeat(var(--g-mobile-picker-columns, 3), minmax(0, 1fr)); gap: var(--g-space-2); }
|
|
2306
|
+
.g-mobile-picker-option { min-block-size: 2.75rem; padding: var(--g-space-2); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); color: inherit; }
|
|
2307
|
+
.g-mobile-picker-option[aria-pressed="true"] { border-color: var(--g-color-primary); background: var(--g-color-primary-soft); color: var(--g-color-primary-text); }
|
|
2308
|
+
.g-mobile-wheel-picker { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); block-size: var(--g-wheel-height, 12rem); overflow: hidden; border-block: 1px solid var(--g-color-border); }
|
|
2309
|
+
.g-mobile-wheel-picker::before { content: ""; position: absolute; z-index: 1; inset: calc(50% - 1.5rem) 0 auto; block-size: 3rem; border-block: 1px solid var(--g-color-border-strong); background: var(--g-color-primary-soft); pointer-events: none; }
|
|
2310
|
+
.g-mobile-wheel-column { position: relative; z-index: 2; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; padding-block: calc(50% - 1.5rem); }
|
|
2311
|
+
.g-mobile-wheel-option { display: grid; block-size: 3rem; place-items: center; border: 0; background: transparent; color: var(--g-color-text-muted); scroll-snap-align: center; }
|
|
2312
|
+
.g-mobile-wheel-option[aria-selected="true"] { color: var(--g-color-text); font-weight: 650; }
|
|
2313
|
+
|
|
2314
|
+
.g-mobile-fab { position: fixed; z-index: var(--g-z-sticky); inset-inline-end: max(var(--g-space-4), env(safe-area-inset-right)); inset-block-end: max(var(--g-space-4), calc(env(safe-area-inset-bottom) + var(--g-mobile-bottom-offset, 0px))); display: inline-grid; min-inline-size: 3.5rem; min-block-size: 3.5rem; place-items: center; padding: var(--g-space-3); border: 0; border-radius: var(--g-radius-md); background: var(--g-color-primary); color: var(--g-color-on-primary); box-shadow: var(--g-shadow-md); }
|
|
2315
|
+
.g-mobile-fullscreen-dialog { position: fixed; z-index: var(--g-z-dialog); inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; inline-size: 100%; block-size: 100dvh; background: var(--g-color-surface); }
|
|
2316
|
+
.g-mobile-fullscreen-dialog[hidden] { display: none; }
|
|
2317
|
+
.g-mobile-keyboard-avoidance { min-block-size: 0; padding-block-end: var(--g-keyboard-offset, 0px); scroll-padding-block-end: calc(var(--g-keyboard-offset, 0px) + 5rem); transition: padding-block-end var(--g-duration-fast) var(--g-ease-standard); }
|
|
2318
|
+
.g-mobile-gesture-hint { display: flex; align-items: center; justify-content: center; gap: var(--g-space-2); padding: var(--g-space-2) max(var(--g-space-3), env(safe-area-inset-right)) max(var(--g-space-2), env(safe-area-inset-bottom)) max(var(--g-space-3), env(safe-area-inset-left)); color: var(--g-color-text-muted); font-size: var(--g-font-size-xs); }
|
|
2319
|
+
.g-mobile-gesture-hint-line { inline-size: 4rem; block-size: .25rem; border-radius: var(--g-radius-full); background: var(--g-color-border-strong); }
|
|
2320
|
+
|
|
2321
|
+
.g-mobile-offline-banner, .g-mobile-snackbar { display: flex; align-items: center; gap: var(--g-space-2); padding: var(--g-space-3) var(--g-space-4); border: 1px solid var(--g-color-border); background: var(--g-color-surface); color: var(--g-color-text); }
|
|
2322
|
+
.g-mobile-offline-banner { position: sticky; z-index: var(--g-z-sticky); inset-block-start: 0; justify-content: center; border-inline: 0; background: var(--g-color-warning-soft); color: var(--g-color-warning); font-size: var(--g-font-size-sm); }
|
|
2323
|
+
.g-mobile-snackbar { position: fixed; z-index: var(--g-z-toast); inset-inline: max(var(--g-space-3), env(safe-area-inset-left)) max(var(--g-space-3), env(safe-area-inset-right)); inset-block-end: max(var(--g-space-3), calc(env(safe-area-inset-bottom) + var(--g-mobile-bottom-offset, 0px))); inline-size: min(calc(100% - 1.5rem), 30rem); margin-inline: auto; box-shadow: var(--g-shadow-md); }
|
|
2324
|
+
.g-mobile-snackbar-main { min-inline-size: 0; flex: 1; }
|
|
2325
|
+
|
|
2326
|
+
.g-mobile-feed { display: grid; gap: var(--g-mobile-feed-gap, var(--g-space-3)); }
|
|
2327
|
+
.g-mobile-feed-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--g-space-3); padding: var(--g-space-3) var(--g-space-4); border-block-end: 1px solid var(--g-color-border); background: var(--g-color-surface); }
|
|
2328
|
+
.g-mobile-feed-main { min-inline-size: 0; }
|
|
2329
|
+
.g-mobile-card-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: min(84%, 20rem); gap: var(--g-space-3); overflow-x: auto; padding-inline: var(--g-space-4); scroll-padding-inline: var(--g-space-4); scroll-snap-type: x mandatory; scrollbar-width: none; }
|
|
2330
|
+
.g-mobile-card-carousel > * { scroll-snap-align: start; }
|
|
2331
|
+
|
|
2332
|
+
.g-mobile-form, .g-mobile-auth, .g-mobile-checkout { display: grid; gap: var(--g-space-4); inline-size: 100%; padding: var(--g-space-4); background: var(--g-color-surface); }
|
|
2333
|
+
.g-mobile-form-actions, .g-mobile-auth-actions, .g-mobile-checkout-actions { display: grid; gap: var(--g-space-2); }
|
|
2334
|
+
.g-mobile-form-actions > .g-btn, .g-mobile-auth-actions > .g-btn, .g-mobile-checkout-actions > .g-btn { inline-size: 100%; min-block-size: 3rem; }
|
|
2335
|
+
.g-mobile-auth { min-block-size: 100dvh; align-content: center; padding-block: max(var(--g-space-8), env(safe-area-inset-top)) max(var(--g-space-8), env(safe-area-inset-bottom)); }
|
|
2336
|
+
.g-mobile-checkout-summary { position: sticky; inset-block-end: 0; margin-inline: calc(-1 * var(--g-space-4)); padding: var(--g-space-3) var(--g-space-4) max(var(--g-space-3), env(safe-area-inset-bottom)); border-block-start: 1px solid var(--g-color-border); background: var(--g-color-surface); }
|
|
2337
|
+
|
|
2338
|
+
.g-mobile-media-viewer { position: fixed; z-index: var(--g-z-dialog); inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--g-color-canvas); }
|
|
2339
|
+
.g-mobile-media-viewer-stage { display: grid; min-block-size: 0; place-items: center; overflow: auto; overscroll-behavior: contain; touch-action: pan-x pan-y pinch-zoom; }
|
|
2340
|
+
.g-mobile-media-viewer-stage > :is(img, video, canvas) { max-inline-size: 100%; max-block-size: 100%; object-fit: contain; }
|
|
2341
|
+
.g-mobile-media-viewer-tools { display: flex; justify-content: center; gap: var(--g-space-2); padding: var(--g-space-2) var(--g-space-3) max(var(--g-space-2), env(safe-area-inset-bottom)); border-block-start: 1px solid var(--g-color-border); background: var(--g-color-surface); }
|
|
2342
|
+
|
|
2343
|
+
.g-mobile-permission-prompt, .g-mobile-state { display: grid; justify-items: center; align-content: center; gap: var(--g-space-3); min-block-size: var(--g-mobile-state-min-height, 18rem); padding: var(--g-space-6) var(--g-space-4); text-align: center; }
|
|
2344
|
+
.g-mobile-permission-icon, .g-mobile-state-icon { display: grid; inline-size: 3.5rem; block-size: 3.5rem; place-items: center; border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface-subtle); color: var(--g-color-primary-text); }
|
|
2345
|
+
.g-mobile-permission-actions, .g-mobile-state-actions { display: grid; gap: var(--g-space-2); inline-size: min(100%, 22rem); }
|
|
2346
|
+
|
|
2347
|
+
@container g-mobile-shell (max-width: 22rem) {
|
|
2348
|
+
.g-mobile-app-bar { grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem; }
|
|
2349
|
+
.g-mobile-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
2350
|
+
.g-mobile-purchase-bar { align-items: stretch; flex-direction: column; }
|
|
2351
|
+
.g-mobile-purchase-actions > .g-btn { flex: 1; }
|
|
2352
|
+
}
|
|
2353
|
+
|
|
2354
|
+
@media (hover: none), (pointer: coarse) {
|
|
2355
|
+
:where(.g-mobile-app-bar, .g-mobile-bottom-navigation, .g-mobile-action-sheet, .g-mobile-picker, .g-mobile-selection-mode) :where(button, a, input, select) { min-block-size: 2.75rem; min-height: 2.75rem; }
|
|
2356
|
+
:where(.g-mobile-app-bar, .g-mobile-bottom-navigation, .g-mobile-action-sheet, .g-mobile-picker, .g-mobile-selection-mode) :where(button, a) { min-inline-size: 2.75rem; min-width: 2.75rem; }
|
|
2357
|
+
.g-mobile-app-bar .g-btn-icon { min-block-size: 2.75rem; min-inline-size: 2.75rem; min-height: 2.75rem; min-width: 2.75rem; }
|
|
2358
|
+
}
|
|
2359
|
+
@media (prefers-reduced-motion: reduce) {
|
|
2360
|
+
.g-mobile-sheet-panel, .g-mobile-bottom-sheet, .g-mobile-action-sheet, .g-mobile-filter-sheet, .g-mobile-pull-refresh-content, .g-mobile-swipe-actions-track, .g-mobile-keyboard-avoidance { transition: none; }
|
|
2361
|
+
}
|
|
2362
|
+
@media (forced-colors: active) {
|
|
2363
|
+
.g-mobile-bottom-navigation-item[aria-current="page"], .g-mobile-swipe-tab[aria-selected="true"], .g-mobile-segmented-item[aria-pressed="true"], .g-mobile-picker-option[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
|
|
2364
|
+
.g-mobile-sheet-handle, .g-mobile-gesture-hint-line { background: CanvasText; }
|
|
2365
|
+
}
|
|
2366
|
+
@media print {
|
|
2367
|
+
.g-mobile-app-bar, .g-mobile-bottom-navigation, .g-mobile-purchase-bar, .g-mobile-keyboard-toolbar, .g-mobile-selection-mode, .g-mobile-fab, .g-mobile-gesture-hint, .g-mobile-snackbar, .g-mobile-offline-banner { display: none !important; }
|
|
2368
|
+
.g-mobile-safe-shell, .g-mobile-fullscreen-dialog, .g-mobile-media-viewer { position: static; display: block; inline-size: auto; min-block-size: 0; block-size: auto; overflow: visible; border: 0; }
|
|
2369
|
+
.g-mobile-safe-content { overflow: visible; padding: 0; }
|
|
2370
|
+
.g-mobile-card-carousel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; padding: 0; }
|
|
2371
|
+
}
|
|
2372
|
+
}
|
|
2373
|
+
|
|
2374
|
+
@layer gardener.components {
|
|
2375
|
+
/* Date, time and structured form controls */
|
|
2376
|
+
.g-date-picker { width: min(21rem, calc(100vw - 2rem)); padding: var(--g-space-3); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-lg); background: var(--g-color-surface-raised); box-shadow: var(--g-shadow-lg); }
|
|
2377
|
+
.g-calendar-header { display: flex; min-height: var(--g-control-height-md); align-items: center; justify-content: space-between; gap: var(--g-space-2); margin-block-end: var(--g-space-2); }
|
|
2378
|
+
.g-calendar-title { font-weight: 650; }
|
|
2379
|
+
.g-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
|
|
2380
|
+
.g-calendar-weekday { display: grid; min-height: 2rem; place-items: center; color: var(--g-color-text-muted); font-size: var(--g-font-size-xs); font-weight: 600; }
|
|
2381
|
+
.g-calendar-day { display: grid; aspect-ratio: 1; min-width: 2rem; place-items: center; border: 0; border-radius: var(--g-radius-md); background: transparent; color: var(--g-color-text); cursor: pointer; }
|
|
2382
|
+
.g-calendar-day:hover { background: var(--g-color-surface-subtle); }
|
|
2383
|
+
.g-calendar-day:is([aria-selected="true"], .is-selected) { background: var(--g-color-primary); color: var(--g-color-on-primary); }
|
|
2384
|
+
.g-calendar-day.is-in-range { border-radius: 0; background: var(--g-color-primary-soft); color: var(--g-color-primary-text); }
|
|
2385
|
+
.g-calendar-day.is-outside { color: var(--g-color-text-subtle); }
|
|
2386
|
+
.g-calendar-day:disabled { opacity: 0.35; }
|
|
2387
|
+
.g-time-picker { display: flex; align-items: center; gap: var(--g-space-2); }
|
|
2388
|
+
.g-pin-input { display: flex; gap: var(--g-space-2); }
|
|
2389
|
+
.g-pin-input > .g-input { inline-size: 2.75rem; padding-inline: 0; text-align: center; font-size: var(--g-font-size-xl); font-variant-numeric: tabular-nums; }
|
|
2390
|
+
.g-rating { display: inline-flex; gap: var(--g-space-1); color: var(--g-color-warning); }
|
|
2391
|
+
.g-rating-item { padding: 0; border: 0; background: transparent; color: inherit; font-size: var(--g-font-size-xl); cursor: pointer; }
|
|
2392
|
+
.g-transfer { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--g-space-3); align-items: center; }
|
|
2393
|
+
.g-transfer-list { min-height: 14rem; overflow: auto; border: 1px solid var(--g-color-border); border-radius: var(--g-radius-lg); background: var(--g-color-surface); }
|
|
2394
|
+
.g-validation-summary { padding: var(--g-space-4); border-inline-start: 3px solid var(--g-color-danger); background: var(--g-color-danger-soft); color: var(--g-color-danger); }
|
|
2395
|
+
|
|
2396
|
+
/* Advanced navigation and onboarding */
|
|
2397
|
+
.g-mega-menu { position: absolute; z-index: var(--g-z-dropdown); inset: 100% 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--g-space-6); padding: var(--g-space-6) var(--g-space-page-x); border-block: 1px solid var(--g-color-border); background: var(--g-color-surface-raised); box-shadow: var(--g-shadow-lg); }
|
|
2398
|
+
.g-anchor-nav { position: sticky; inset-block-start: calc(var(--g-header-height) + var(--g-space-4)); display: grid; gap: var(--g-space-1); border-inline-start: 1px solid var(--g-color-border); }
|
|
2399
|
+
.g-anchor-link { padding: var(--g-space-1) var(--g-space-3); border-inline-start: 2px solid transparent; color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); text-decoration: none; }
|
|
2400
|
+
.g-anchor-link[aria-current="true"] { border-inline-start-color: var(--g-color-primary); color: var(--g-color-primary-text); }
|
|
2401
|
+
.g-back-to-top { position: fixed; z-index: var(--g-z-sticky); inset-block: auto calc(var(--g-space-4) + env(safe-area-inset-bottom)); inset-inline: auto var(--g-space-4); }
|
|
2402
|
+
.g-back-to-top[hidden] { display: none; }
|
|
2403
|
+
|
|
2404
|
+
.g-fullscreen-target:fullscreen { width: 100%; height: 100%; overflow: auto; background: var(--g-color-canvas); }
|
|
2405
|
+
.g-image-crop { display: grid; grid-template-rows: minmax(16rem, 1fr) auto; min-height: 24rem; overflow: hidden; border: 1px solid var(--g-color-border); background: var(--g-color-surface-sunken); }
|
|
2406
|
+
.g-image-crop-stage { position: relative; display: grid; place-items: center; min-height: 0; overflow: hidden; background-image: linear-gradient(45deg, var(--g-color-surface-subtle) 25%, transparent 25%), linear-gradient(-45deg, var(--g-color-surface-subtle) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--g-color-surface-subtle) 75%), linear-gradient(-45deg, transparent 75%, var(--g-color-surface-subtle) 75%); background-size: 1rem 1rem; background-position: 0 0, 0 .5rem, .5rem -.5rem, -.5rem 0; }
|
|
2407
|
+
.g-image-crop-selection { position: absolute; border: 2px solid #fff; outline: 9999px solid rgb(0 0 0 / .55); box-shadow: 0 0 0 1px rgb(0 0 0 / .5); }
|
|
2408
|
+
.g-image-crop-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--g-space-3); padding: var(--g-space-3); background: var(--g-color-surface); border-top: 1px solid var(--g-color-border); }
|
|
2409
|
+
.g-tour { position: fixed; z-index: var(--g-z-tooltip); width: min(22rem, calc(100vw - 2rem)); padding: var(--g-space-4); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-lg); background: var(--g-color-surface-raised); box-shadow: var(--g-shadow-xl); }
|
|
2410
|
+
.g-tour-progress { color: var(--g-color-text-muted); font-size: var(--g-font-size-xs); }
|
|
2411
|
+
.g-spotlight { position: fixed; z-index: var(--g-z-overlay); border-radius: var(--g-radius-lg); box-shadow: 0 0 0 9999px var(--g-color-overlay); pointer-events: none; }
|
|
2412
|
+
|
|
2413
|
+
/* Planning and high-density data shells */
|
|
2414
|
+
.g-virtual-list { position: relative; min-height: 0; overflow: auto; contain: strict; }
|
|
2415
|
+
.g-virtual-list-content { position: relative; height: var(--g-virtual-height, auto); }
|
|
2416
|
+
.g-virtual-list-item { position: absolute; inset-inline: 0; transform: translateY(var(--g-item-offset, 0)); }
|
|
2417
|
+
.g-kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(17rem, 21rem); gap: var(--g-space-4); min-height: 0; overflow-x: auto; align-items: start; }
|
|
2418
|
+
.g-kanban-column { display: grid; gap: var(--g-space-3); padding: var(--g-space-3); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-lg); background: var(--g-color-surface-subtle); }
|
|
2419
|
+
.g-kanban-header { display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-2); font-weight: 650; }
|
|
2420
|
+
.g-kanban-card { padding: var(--g-space-3); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); box-shadow: var(--g-shadow-xs); }
|
|
2421
|
+
.g-kanban-card.is-dragging { opacity: 0.65; box-shadow: var(--g-shadow-lg); transform: rotate(1deg); }
|
|
2422
|
+
.g-gantt { display: grid; min-width: 48rem; border: 1px solid var(--g-color-border); background: var(--g-color-surface); }
|
|
2423
|
+
.g-gantt-row { display: grid; grid-template-columns: 14rem minmax(34rem, 1fr); min-height: 2.5rem; border-bottom: 1px solid var(--g-color-border); }
|
|
2424
|
+
.g-gantt-label { padding: var(--g-space-2) var(--g-space-3); border-inline-end: 1px solid var(--g-color-border); }
|
|
2425
|
+
.g-gantt-track { position: relative; background-image: linear-gradient(to right, var(--g-color-border) 1px, transparent 1px); background-size: var(--g-gantt-unit, 3rem) 100%; }
|
|
2426
|
+
[dir="rtl"] .g-gantt-track { background-image: linear-gradient(to left, var(--g-color-border) 1px, transparent 1px); }
|
|
2427
|
+
.g-gantt-bar { position: absolute; inset-block: 0.5rem; inset-inline-start: var(--g-gantt-start, 0); width: var(--g-gantt-width, 20%); border-radius: var(--g-radius-sm); background: var(--g-color-primary); }
|
|
2428
|
+
.g-query-builder { display: grid; gap: var(--g-space-3); padding: var(--g-space-4); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-lg); background: var(--g-color-surface); }
|
|
2429
|
+
.g-query-rule { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(7rem, 0.7fr) minmax(10rem, 1fr) auto; gap: var(--g-space-2); align-items: center; }
|
|
2430
|
+
|
|
2431
|
+
/* Media and document presentation */
|
|
2432
|
+
.g-carousel { position: relative; overflow: hidden; }
|
|
2433
|
+
.g-carousel-track { display: flex; transition: transform var(--g-duration-slow) var(--g-ease-standard); transform: translateX(calc(var(--g-slide-index, 0) * -100%)); }
|
|
2434
|
+
[dir="rtl"] .g-carousel-track { transform: translateX(calc(var(--g-slide-index, 0) * 100%)); }
|
|
2435
|
+
.g-carousel-slide { min-width: 100%; }
|
|
2436
|
+
.g-carousel-control { position: absolute; z-index: 1; inset-block-start: 50%; transform: translateY(-50%); }
|
|
2437
|
+
.g-carousel-prev { inset-inline-start: var(--g-space-3); }
|
|
2438
|
+
.g-carousel-next { inset-inline-end: var(--g-space-3); }
|
|
2439
|
+
.g-carousel-dots { position: absolute; inset: auto 0 var(--g-space-3); display: flex; justify-content: center; gap: var(--g-space-2); }
|
|
2440
|
+
.g-carousel-dot { position: relative; inline-size: 1.5rem; block-size: 1.5rem; padding: 0.5rem; border: 0; border-radius: 50%; background: transparent; }
|
|
2441
|
+
.g-carousel-dot::before { content: ""; display: block; inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: var(--g-color-border-strong); }
|
|
2442
|
+
.g-carousel-dot[aria-current="true"]::before { background: var(--g-color-primary); }
|
|
2443
|
+
.g-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--g-space-2); }
|
|
2444
|
+
.g-gallery-item { overflow: hidden; aspect-ratio: 1; border-radius: var(--g-radius-md); background: var(--g-color-surface-subtle); }
|
|
2445
|
+
.g-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--g-duration-slow); }
|
|
2446
|
+
.g-gallery-item:hover img { transform: scale(1.035); }
|
|
2447
|
+
.g-lightbox { position: fixed; z-index: var(--g-z-dialog); inset: 0; display: grid; place-items: center; padding: var(--g-space-4); background: rgb(0 0 0 / 0.9); }
|
|
2448
|
+
.g-lightbox-media { max-width: 100%; max-height: 90dvh; object-fit: contain; }
|
|
2449
|
+
.g-media-player { overflow: hidden; border: 1px solid var(--g-color-border); border-radius: var(--g-radius-lg); background: #080d14; color: #fff; }
|
|
2450
|
+
.g-media-controls { display: flex; align-items: center; gap: var(--g-space-3); min-height: 3rem; padding-inline: var(--g-space-3); background: rgb(0 0 0 / 0.78); }
|
|
2451
|
+
.g-document-viewer { display: grid; min-height: 30rem; grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr); border: 1px solid var(--g-color-border); background: var(--g-color-surface-sunken); }
|
|
2452
|
+
.g-document-thumbnails { overflow-y: auto; border-inline-end: 1px solid var(--g-color-border); background: var(--g-color-surface); }
|
|
2453
|
+
.g-document-page { width: min(100% - 2rem, 52rem); margin: var(--g-space-4) auto; background: #fff; box-shadow: var(--g-shadow-md); }
|
|
2454
|
+
|
|
2455
|
+
/* Direct manipulation */
|
|
2456
|
+
.g-split-pane { display: flex; min-width: 0; min-height: 0; }
|
|
2457
|
+
.g-split-pane[data-g-orientation="vertical"] { flex-direction: column; }
|
|
2458
|
+
.g-split-panel { min-width: 0; min-height: 0; overflow: auto; }
|
|
2459
|
+
.g-split-handle { flex: 0 0 5px; background: var(--g-color-border); cursor: col-resize; touch-action: none; }
|
|
2460
|
+
.g-split-pane[data-g-orientation="vertical"] > .g-split-handle { cursor: row-resize; }
|
|
2461
|
+
.g-split-handle:hover, .g-split-handle.is-dragging { background: var(--g-color-primary); }
|
|
2462
|
+
.g-sortable-item { position: relative; touch-action: manipulation; }
|
|
2463
|
+
.g-sortable-item.is-dragging { z-index: 1; opacity: 0.7; box-shadow: var(--g-shadow-lg); }
|
|
2464
|
+
.g-drop-zone.is-over { outline: 2px dashed var(--g-color-primary); outline-offset: -3px; background: var(--g-color-primary-soft); }
|
|
2465
|
+
.g-infinite-status, .g-pull-refresh { display: flex; min-height: 3rem; align-items: center; justify-content: center; gap: var(--g-space-2); color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); }
|
|
2466
|
+
.g-resizable { resize: both; overflow: auto; }
|
|
2467
|
+
|
|
2468
|
+
/* Commerce primitives */
|
|
2469
|
+
.g-price { display: inline-flex; align-items: baseline; gap: var(--g-space-2); font-variant-numeric: tabular-nums; }
|
|
2470
|
+
.g-price-current { color: var(--g-color-text); font-size: var(--g-font-size-2xl); font-weight: 700; }
|
|
2471
|
+
.g-price-original { color: var(--g-color-text-muted); text-decoration: line-through; }
|
|
2472
|
+
.g-product-card { display: grid; overflow: hidden; border: 1px solid var(--g-color-border); border-radius: var(--g-radius-lg); background: var(--g-color-surface); }
|
|
2473
|
+
.g-product-media { aspect-ratio: 1; overflow: hidden; background: var(--g-color-surface-subtle); }
|
|
2474
|
+
.g-product-media img { width: 100%; height: 100%; object-fit: cover; }
|
|
2475
|
+
.g-product-body { display: grid; gap: var(--g-space-2); padding: var(--g-space-4); }
|
|
2476
|
+
.g-cart-item { display: grid; grid-template-columns: 5rem minmax(0, 1fr) auto; gap: var(--g-space-4); padding-block: var(--g-space-4); border-bottom: 1px solid var(--g-color-border); }
|
|
2477
|
+
.g-quantity { display: inline-flex; align-items: stretch; }
|
|
2478
|
+
.g-quantity-value { inline-size: 3rem; border: 1px solid var(--g-color-border-strong); border-inline-width: 0; text-align: center; }
|
|
2479
|
+
.g-order-status { display: inline-flex; align-items: center; gap: var(--g-space-2); color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); }
|
|
2480
|
+
|
|
2481
|
+
@media (max-width: 767.98px) {
|
|
2482
|
+
.g-transfer { grid-template-columns: 1fr; }
|
|
2483
|
+
.g-transfer-actions { display: flex; justify-content: center; }
|
|
2484
|
+
.g-query-rule { grid-template-columns: 1fr; }
|
|
2485
|
+
.g-document-viewer { grid-template-columns: 1fr; }
|
|
2486
|
+
.g-document-thumbnails { display: none; }
|
|
2487
|
+
.g-cart-item { grid-template-columns: 4rem minmax(0, 1fr); }
|
|
2488
|
+
.g-cart-item > :last-child { grid-column: 2; }
|
|
2489
|
+
}
|
|
2490
|
+
}
|
|
2491
|
+
|
|
2492
|
+
@layer gardener.components {
|
|
2493
|
+
/* Shared page-heading contract */
|
|
2494
|
+
:is(.g-page-header, .g-section-header, .g-subheader) { min-inline-size: 0; color: var(--g-color-text); }
|
|
2495
|
+
.g-page-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main actions" "meta actions"; gap: var(--g-space-3) var(--g-space-6); align-items: start; padding-block: var(--g-page-header-padding, var(--g-space-6)); border-block-end: 1px solid var(--g-color-border); }
|
|
2496
|
+
.g-page-header-main { grid-area: main; min-inline-size: 0; }
|
|
2497
|
+
.g-page-header-eyebrow { margin-block-end: var(--g-space-2); color: var(--g-color-primary-text); font-size: var(--g-font-size-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
|
|
2498
|
+
.g-page-header-title { margin: 0; font-size: clamp(var(--g-font-size-2xl), 4vw, var(--g-font-size-4xl)); line-height: 1.15; text-wrap: balance; }
|
|
2499
|
+
.g-page-header-description { max-inline-size: var(--g-page-description-max, 52rem); margin-block-start: var(--g-space-2); color: var(--g-color-text-muted); line-height: 1.65; }
|
|
2500
|
+
.g-page-header-meta { grid-area: meta; display: flex; min-inline-size: 0; flex-wrap: wrap; align-items: center; gap: var(--g-space-2) var(--g-space-4); color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); }
|
|
2501
|
+
.g-page-header-actions { grid-area: actions; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--g-space-2); }
|
|
2502
|
+
.g-page-header.is-compact { --g-page-header-padding: var(--g-space-4); }
|
|
2503
|
+
.g-page-header.is-centered { grid-template: "main" auto "meta" auto "actions" auto / minmax(0, 1fr); text-align: center; }
|
|
2504
|
+
.g-page-header.is-centered :is(.g-page-header-description, .g-page-header-meta, .g-page-header-actions) { margin-inline: auto; justify-content: center; }
|
|
2505
|
+
.g-page-header.is-sticky { position: sticky; z-index: var(--g-z-sticky); inset-block-start: var(--g-page-header-offset, 0); padding-inline: var(--g-space-page-x); background: color-mix(in srgb, var(--g-color-surface) 94%, transparent); backdrop-filter: blur(10px); }
|
|
2506
|
+
|
|
2507
|
+
.g-section-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--g-space-3) var(--g-space-5); padding-block: var(--g-section-header-padding, var(--g-space-4)); border-block-end: 1px solid var(--g-color-border); }
|
|
2508
|
+
.g-section-header-main { min-inline-size: min(100%, 18rem); flex: 1 1 24rem; }
|
|
2509
|
+
.g-section-header-title { margin: 0; font-size: var(--g-font-size-xl); line-height: 1.3; text-wrap: balance; }
|
|
2510
|
+
.g-section-header-description { margin-block-start: var(--g-space-1); color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); }
|
|
2511
|
+
.g-section-header-actions { display: flex; flex-wrap: wrap; gap: var(--g-space-2); }
|
|
2512
|
+
.g-section-header.is-borderless { border-block-end: 0; }
|
|
2513
|
+
|
|
2514
|
+
.g-subheader { display: flex; min-block-size: var(--g-subheader-height, 2.75rem); flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--g-space-2) var(--g-space-4); padding: var(--g-space-2) var(--g-space-4); border-block: 1px solid var(--g-color-border); background: var(--g-color-surface-subtle); color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); }
|
|
2515
|
+
.g-subheader-title { color: var(--g-color-text); font-weight: 650; }
|
|
2516
|
+
.g-subheader-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-2); }
|
|
2517
|
+
|
|
2518
|
+
/* Toolbars and application bars */
|
|
2519
|
+
:is(.g-toolbar, .g-action-bar, .g-status-bar, .g-command-bar, .g-context-bar, .g-filter-bar, .g-bulk-action-bar, .g-footer-bar) { min-inline-size: 0; }
|
|
2520
|
+
.g-toolbar { display: flex; min-block-size: var(--g-toolbar-height, var(--g-control-height-lg)); flex-wrap: wrap; align-items: center; gap: var(--g-toolbar-gap, var(--g-space-2)); padding: var(--g-toolbar-padding-y, var(--g-space-2)) var(--g-toolbar-padding-x, var(--g-space-3)); border: 1px solid var(--g-color-border); background: var(--g-color-surface); }
|
|
2521
|
+
.g-toolbar-start, .g-toolbar-center, .g-toolbar-end { display: flex; min-inline-size: 0; flex-wrap: wrap; align-items: center; gap: var(--g-toolbar-gap, var(--g-space-2)); }
|
|
2522
|
+
.g-toolbar-center { flex: 1 1 auto; justify-content: center; }
|
|
2523
|
+
.g-toolbar-end { margin-inline-start: auto; justify-content: flex-end; }
|
|
2524
|
+
.g-toolbar-title { overflow: hidden; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
|
|
2525
|
+
.g-toolbar-separator { align-self: stretch; inline-size: 1px; min-block-size: 1.5rem; background: var(--g-color-border); }
|
|
2526
|
+
.g-toolbar.is-compact { --g-toolbar-height: var(--g-control-height-md); --g-toolbar-padding-y: var(--g-space-1); }
|
|
2527
|
+
.g-toolbar.is-sticky { position: sticky; z-index: var(--g-z-sticky); inset-block-start: var(--g-toolbar-offset, 0); }
|
|
2528
|
+
.g-toolbar.is-scrollable { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-inline: contain; }
|
|
2529
|
+
.g-toolbar.is-scrollable > * { flex: 0 0 auto; }
|
|
2530
|
+
|
|
2531
|
+
.g-action-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--g-space-2); padding-block: var(--g-space-3); border-block-start: 1px solid var(--g-color-border); }
|
|
2532
|
+
.g-action-bar-main { margin-inline-end: auto; color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); }
|
|
2533
|
+
.g-action-bar.is-surface { padding-inline: var(--g-space-4); background: var(--g-color-surface); }
|
|
2534
|
+
|
|
2535
|
+
.g-status-bar { display: flex; min-block-size: var(--g-status-bar-height, 1.75rem); align-items: center; gap: var(--g-space-3); padding-inline: var(--g-space-3); overflow: hidden; border-block-start: 1px solid var(--g-color-border); background: var(--g-color-surface-subtle); color: var(--g-color-text-muted); font-size: var(--g-font-size-xs); white-space: nowrap; }
|
|
2536
|
+
.g-status-bar-section { display: inline-flex; min-inline-size: 0; align-items: center; gap: var(--g-space-1); }
|
|
2537
|
+
.g-status-bar-section.is-end { margin-inline-start: auto; }
|
|
2538
|
+
.g-status-bar-text { overflow: hidden; text-overflow: ellipsis; }
|
|
2539
|
+
|
|
2540
|
+
.g-command-bar { display: flex; min-block-size: var(--g-command-bar-height, var(--g-control-height-md)); align-items: center; gap: var(--g-space-1); padding: var(--g-space-1) var(--g-space-2); overflow-x: auto; border-block: 1px solid var(--g-color-border); background: var(--g-color-surface); }
|
|
2541
|
+
.g-command-bar-group { display: inline-flex; align-items: center; gap: var(--g-space-1); }
|
|
2542
|
+
.g-command-bar-group + .g-command-bar-group { margin-inline-start: var(--g-space-2); padding-inline-start: var(--g-space-2); border-inline-start: 1px solid var(--g-color-border); }
|
|
2543
|
+
.g-command-bar-item { display: inline-flex; min-block-size: var(--g-control-height-sm); align-items: center; gap: var(--g-space-1); padding-inline: var(--g-space-2); border: 0; border-radius: var(--g-radius-sm); background: transparent; color: inherit; font: inherit; white-space: nowrap; cursor: pointer; }
|
|
2544
|
+
.g-command-bar-item:is(:hover, [aria-expanded="true"], [aria-pressed="true"]) { background: var(--g-color-primary-soft); color: var(--g-color-primary-text); }
|
|
2545
|
+
.g-command-bar-shortcut { color: var(--g-color-text-subtle); font-size: var(--g-font-size-xs); }
|
|
2546
|
+
|
|
2547
|
+
.g-context-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--g-space-3); padding: var(--g-space-2) var(--g-space-4); border: 1px solid var(--g-color-border); border-inline-start: .2rem solid var(--g-color-primary); background: var(--g-color-primary-soft); color: var(--g-color-text); font-size: var(--g-font-size-sm); }
|
|
2548
|
+
.g-context-bar-content { min-inline-size: 0; }
|
|
2549
|
+
.g-context-bar-actions { display: flex; flex-wrap: wrap; gap: var(--g-space-2); }
|
|
2550
|
+
.g-context-bar.is-info { border-inline-start-color: var(--g-color-info); background: var(--g-color-info-soft); }
|
|
2551
|
+
.g-context-bar.is-success { border-inline-start-color: var(--g-color-success); background: var(--g-color-success-soft); }
|
|
2552
|
+
.g-context-bar.is-warning { border-inline-start-color: var(--g-color-warning); background: var(--g-color-warning-soft); }
|
|
2553
|
+
.g-context-bar.is-danger { border-inline-start-color: var(--g-color-danger); background: var(--g-color-danger-soft); }
|
|
2554
|
+
|
|
2555
|
+
.g-filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--g-space-3); padding: var(--g-space-3); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); }
|
|
2556
|
+
.g-filter-bar-main { display: flex; min-inline-size: min(100%, 16rem); flex: 1 1 auto; flex-wrap: wrap; align-items: flex-end; gap: var(--g-space-3); }
|
|
2557
|
+
.g-filter-bar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-2); }
|
|
2558
|
+
.g-filter-bar.is-sticky { position: sticky; z-index: var(--g-z-sticky); inset-block-start: var(--g-filter-bar-offset, 0); }
|
|
2559
|
+
|
|
2560
|
+
.g-bulk-action-bar { display: flex; min-block-size: var(--g-control-height-lg); flex-wrap: wrap; align-items: center; gap: var(--g-space-3); padding: var(--g-space-2) var(--g-space-4); border: 1px solid var(--g-color-primary); background: var(--g-color-primary-soft); color: var(--g-color-primary-text); }
|
|
2561
|
+
.g-bulk-action-bar.is-empty, .g-bulk-action-bar[hidden] { display: none; }
|
|
2562
|
+
.g-bulk-action-count { font-weight: 700; }
|
|
2563
|
+
.g-bulk-action-actions { display: flex; flex-wrap: wrap; gap: var(--g-space-2); margin-inline-start: auto; }
|
|
2564
|
+
|
|
2565
|
+
.g-footer-bar { display: flex; min-block-size: var(--g-footer-bar-height, var(--g-control-height-lg)); flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--g-space-3); padding: var(--g-space-3) var(--g-space-4); border-block-start: 1px solid var(--g-color-border); background: var(--g-color-surface); color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); }
|
|
2566
|
+
.g-footer-bar-actions { display: flex; flex-wrap: wrap; gap: var(--g-space-2); }
|
|
2567
|
+
|
|
2568
|
+
.g-floating-action-bar { position: fixed; z-index: var(--g-z-sticky); inset-inline-start: 50%; inset-block-end: max(var(--g-space-4), env(safe-area-inset-bottom)); display: flex; max-inline-size: calc(100vw - 2 * var(--g-space-4)); flex-wrap: wrap; align-items: center; gap: var(--g-space-2); padding: var(--g-space-2); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-lg); background: var(--g-color-surface-raised); box-shadow: var(--g-shadow-lg); transform: translateX(-50%); }
|
|
2569
|
+
[dir="rtl"] .g-floating-action-bar { transform: translateX(50%); }
|
|
2570
|
+
.g-floating-action-bar.is-end { inset-inline: auto max(var(--g-space-4), env(safe-area-inset-right)); transform: none; }
|
|
2571
|
+
.g-floating-action-bar.is-contained { position: absolute; }
|
|
2572
|
+
|
|
2573
|
+
.g-sticky-actions { position: sticky; z-index: var(--g-z-sticky); inset-block-end: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--g-space-2); padding: var(--g-space-3) var(--g-space-4); border-block-start: 1px solid var(--g-color-border); background: color-mix(in srgb, var(--g-color-surface) 94%, transparent); backdrop-filter: blur(10px); }
|
|
2574
|
+
.g-sticky-actions-main { margin-inline-end: auto; color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); }
|
|
2575
|
+
|
|
2576
|
+
/* Divider with text extends the existing divider. */
|
|
2577
|
+
.g-divider-text { flex: 0 0 auto; }
|
|
2578
|
+
.g-divider.is-start::before, .g-divider.is-end::after { flex: 0 0 var(--g-divider-edge, var(--g-space-8)); }
|
|
2579
|
+
.g-divider.is-vertical { display: inline-flex; min-block-size: var(--g-divider-height, 1.5rem); flex-direction: column; align-self: stretch; }
|
|
2580
|
+
.g-divider.is-vertical::before, .g-divider.is-vertical::after { border-block-start: 0; border-inline-start: 1px solid var(--g-color-border); }
|
|
2581
|
+
|
|
2582
|
+
/* Back to top keeps the existing runtime contract. */
|
|
2583
|
+
.g-back-to-top { inset-block: auto max(var(--g-space-4), env(safe-area-inset-bottom)); inset-inline: auto max(var(--g-space-4), env(safe-area-inset-right)); }
|
|
2584
|
+
.g-back-to-top.is-contained { position: absolute; }
|
|
2585
|
+
|
|
2586
|
+
/* Loading, empty and error/result pages */
|
|
2587
|
+
.g-page-loading { display: grid; min-block-size: var(--g-page-state-min, 18rem); place-items: center; padding: var(--g-space-8); text-align: center; }
|
|
2588
|
+
.g-page-loading-content { display: grid; max-inline-size: 28rem; justify-items: center; gap: var(--g-space-3); }
|
|
2589
|
+
.g-page-loading-title { font-weight: 650; }
|
|
2590
|
+
.g-page-loading-description { color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); }
|
|
2591
|
+
.g-page-loading.is-full { min-block-size: 100dvh; }
|
|
2592
|
+
.g-page-loading.is-overlay { position: absolute; z-index: var(--g-z-overlay); inset: 0; min-block-size: 0; background: color-mix(in srgb, var(--g-color-surface) 88%, transparent); backdrop-filter: blur(3px); }
|
|
2593
|
+
|
|
2594
|
+
:is(.g-page-state, .g-page-empty, .g-page-error, .g-page-forbidden, .g-page-not-found, .g-page-server-error, .g-page-offline, .g-page-maintenance) { display: grid; min-block-size: var(--g-page-state-min, 24rem); place-items: center; padding: var(--g-space-8) var(--g-space-page-x); text-align: center; }
|
|
2595
|
+
.g-page-state-content { display: grid; inline-size: min(100%, var(--g-page-state-max, 36rem)); justify-items: center; gap: var(--g-space-3); }
|
|
2596
|
+
.g-page-state-visual { display: grid; inline-size: var(--g-page-state-visual-size, 5rem); block-size: var(--g-page-state-visual-size, 5rem); place-items: center; border: 1px solid var(--g-color-border); border-radius: var(--g-radius-lg); background: var(--g-color-surface-subtle); color: var(--g-color-primary-text); font-size: var(--g-font-size-2xl); font-weight: 750; }
|
|
2597
|
+
.g-page-state-code { color: var(--g-color-primary-text); font: 750 clamp(2.5rem, 10vw, 5rem)/1 var(--g-font-mono); letter-spacing: -.06em; }
|
|
2598
|
+
.g-page-state-title { margin: 0; font-size: clamp(var(--g-font-size-xl), 4vw, var(--g-font-size-3xl)); text-wrap: balance; }
|
|
2599
|
+
.g-page-state-description { max-inline-size: 48ch; color: var(--g-color-text-muted); line-height: 1.65; }
|
|
2600
|
+
.g-page-state-details { inline-size: 100%; margin-block-start: var(--g-space-2); padding: var(--g-space-3); border: 1px solid var(--g-color-border); background: var(--g-color-surface-subtle); color: var(--g-color-text-muted); font: var(--g-font-size-xs)/1.6 var(--g-font-mono); text-align: start; overflow-wrap: anywhere; }
|
|
2601
|
+
.g-page-state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--g-space-2); margin-block-start: var(--g-space-2); }
|
|
2602
|
+
.g-page-state-help { color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); }
|
|
2603
|
+
:is(.g-page-error, .g-page-server-error) .g-page-state-visual { background: var(--g-color-danger-soft); color: var(--g-color-danger); }
|
|
2604
|
+
.g-page-forbidden .g-page-state-visual { background: var(--g-color-warning-soft); color: var(--g-color-warning); }
|
|
2605
|
+
.g-page-offline .g-page-state-visual { background: var(--g-color-info-soft); color: var(--g-color-info); }
|
|
2606
|
+
.g-page-maintenance .g-page-state-visual { background: var(--g-color-primary-soft); }
|
|
2607
|
+
|
|
2608
|
+
.g-page-component-container { container-name: g-page-component; container-type: inline-size; }
|
|
2609
|
+
@container g-page-component (max-width: 39.999rem) {
|
|
2610
|
+
.g-page-header { grid-template: "main" auto "meta" auto "actions" auto / minmax(0, 1fr); }
|
|
2611
|
+
.g-page-header-actions { justify-content: flex-start; }
|
|
2612
|
+
.g-toolbar-center { order: 3; flex-basis: 100%; justify-content: flex-start; }
|
|
2613
|
+
.g-context-bar { grid-template-columns: auto minmax(0, 1fr); }
|
|
2614
|
+
.g-context-bar-actions { grid-column: 1 / -1; }
|
|
2615
|
+
}
|
|
2616
|
+
|
|
2617
|
+
@media (max-width: 39.999rem) {
|
|
2618
|
+
.g-page-header { grid-template: "main" auto "meta" auto "actions" auto / minmax(0, 1fr); }
|
|
2619
|
+
.g-page-header-actions { justify-content: flex-start; }
|
|
2620
|
+
.g-toolbar-center { order: 3; flex-basis: 100%; justify-content: flex-start; }
|
|
2621
|
+
.g-context-bar { grid-template-columns: auto minmax(0, 1fr); }
|
|
2622
|
+
.g-context-bar-actions { grid-column: 1 / -1; }
|
|
2623
|
+
.g-floating-action-bar { inline-size: calc(100% - 2 * var(--g-space-4)); justify-content: center; }
|
|
2624
|
+
.g-sticky-actions > .g-btn, .g-footer-bar-actions { flex: 1 1 auto; }
|
|
2625
|
+
.g-page-state-actions { inline-size: 100%; }
|
|
2626
|
+
.g-page-state-actions > :is(.g-btn, a) { flex: 1 1 auto; }
|
|
2627
|
+
}
|
|
2628
|
+
|
|
2629
|
+
@media print {
|
|
2630
|
+
:is(.g-toolbar, .g-action-bar, .g-status-bar, .g-command-bar, .g-context-bar, .g-filter-bar, .g-bulk-action-bar, .g-footer-bar, .g-floating-action-bar, .g-sticky-actions, .g-back-to-top, .g-page-loading) { display: none !important; }
|
|
2631
|
+
:is(.g-page-header, .g-section-header, .g-subheader) { position: static; display: block; padding: 0 0 var(--g-space-4); background: #fff; backdrop-filter: none; }
|
|
2632
|
+
:is(.g-page-header-actions, .g-section-header-actions, .g-subheader-actions, .g-page-state-actions) { display: none; }
|
|
2633
|
+
:is(.g-page-state, .g-page-empty, .g-page-error, .g-page-forbidden, .g-page-not-found, .g-page-server-error, .g-page-offline, .g-page-maintenance) { display: block; min-block-size: 0; padding: var(--g-space-6) 0; text-align: start; }
|
|
2634
|
+
.g-page-state-content { display: block; inline-size: 100%; }
|
|
2635
|
+
}
|
|
2636
|
+
}
|
|
2637
|
+
|
|
2638
|
+
@layer gardener.components {
|
|
2639
|
+
/* Compact tips and inline explanations */
|
|
2640
|
+
.g-tip, .g-inline-hint, .g-help-text { color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); line-height: 1.55; }
|
|
2641
|
+
.g-tip { display: flex; align-items: flex-start; gap: var(--g-space-2); padding: var(--g-space-2) var(--g-space-3); border-inline-start: 3px solid var(--g-color-primary); border-radius: var(--g-radius-sm); background: var(--g-color-primary-soft); color: var(--g-color-primary-text); }
|
|
2642
|
+
.g-tip::before { content: "TIP"; flex: none; margin-block-start: .12em; color: currentColor; font: 750 .65rem/1.35 var(--g-font-mono); letter-spacing: .06em; }
|
|
2643
|
+
.g-tip.is-info { border-inline-start-color: var(--g-color-info); background: var(--g-color-info-soft); color: var(--g-color-info); }
|
|
2644
|
+
.g-tip.is-success { border-inline-start-color: var(--g-color-success); background: var(--g-color-success-soft); color: var(--g-color-success); }
|
|
2645
|
+
.g-tip.is-warning { border-inline-start-color: var(--g-color-warning); background: var(--g-color-warning-soft); color: var(--g-color-warning); }
|
|
2646
|
+
.g-tip.is-danger { border-inline-start-color: var(--g-color-danger); background: var(--g-color-danger-soft); color: var(--g-color-danger); }
|
|
2647
|
+
.g-inline-hint { display: inline-flex; align-items: baseline; gap: var(--g-space-1); }
|
|
2648
|
+
.g-inline-hint::before { content: "i"; display: inline-grid; inline-size: 1rem; block-size: 1rem; flex: none; place-items: center; border: 1px solid currentColor; border-radius: 50%; font: 700 .65rem/1 var(--g-font-serif); }
|
|
2649
|
+
.g-help-text { display: block; margin-block-start: var(--g-space-1); }
|
|
2650
|
+
.g-help-text.is-success { color: var(--g-color-success); }
|
|
2651
|
+
.g-help-text.is-warning { color: var(--g-color-warning); }
|
|
2652
|
+
.g-help-text.is-danger { color: var(--g-color-danger); }
|
|
2653
|
+
|
|
2654
|
+
/* Tooltip, rich tooltip, definition and interactive help popover */
|
|
2655
|
+
.g-help-trigger { display: inline-grid; inline-size: 1.35rem; block-size: 1.35rem; place-items: center; padding: 0; border: 1px solid var(--g-color-border-strong); border-radius: 50%; background: transparent; color: var(--g-color-text-muted); font: 700 var(--g-font-size-xs)/1 var(--g-font-sans); cursor: help; }
|
|
2656
|
+
.g-help-trigger:hover { border-color: var(--g-color-primary); color: var(--g-color-primary-text); }
|
|
2657
|
+
.g-help-trigger:focus-visible { outline: 2px solid var(--g-color-primary); outline-offset: 2px; }
|
|
2658
|
+
.g-tooltip, .g-tooltip-rich, .g-help-popover { --g-floating-arrow-size: .42rem; }
|
|
2659
|
+
.g-tooltip::after, .g-tooltip-rich::after, .g-help-popover::after { content: ""; position: absolute; inline-size: calc(var(--g-floating-arrow-size) * 2); block-size: calc(var(--g-floating-arrow-size) * 2); border: inherit; background: inherit; transform: rotate(45deg); }
|
|
2660
|
+
:is(.g-tooltip, .g-tooltip-rich, .g-help-popover)[data-g-placement^="bottom"]::after { inset-block-start: calc(var(--g-floating-arrow-size) * -1); inset-inline-start: var(--g-floating-arrow-inline, 1rem); border-inline-end: 0; border-block-end: 0; }
|
|
2661
|
+
:is(.g-tooltip, .g-tooltip-rich, .g-help-popover)[data-g-placement^="top"]::after { inset-block-end: calc(var(--g-floating-arrow-size) * -1); inset-inline-start: var(--g-floating-arrow-inline, 1rem); border-inline-start: 0; border-block-start: 0; }
|
|
2662
|
+
:is(.g-tooltip, .g-tooltip-rich, .g-help-popover)[data-g-placement^="left"]::after { inset-block-start: var(--g-floating-arrow-block, 1rem); inset-inline-end: calc(var(--g-floating-arrow-size) * -1); border-inline-start: 0; border-block-end: 0; }
|
|
2663
|
+
:is(.g-tooltip, .g-tooltip-rich, .g-help-popover)[data-g-placement^="right"]::after { inset-block-start: var(--g-floating-arrow-block, 1rem); inset-inline-start: calc(var(--g-floating-arrow-size) * -1); border-inline-end: 0; border-block-start: 0; }
|
|
2664
|
+
.g-tooltip-rich { position: absolute; z-index: var(--g-z-tooltip); width: min(18rem, calc(100vw - 1rem)); padding: var(--g-space-3); border: 1px solid #263244; border-radius: var(--g-radius-sm); background: #111827; color: #fff; box-shadow: var(--g-shadow-md); font-size: var(--g-font-size-xs); line-height: 1.5; pointer-events: none; }
|
|
2665
|
+
.g-tooltip-title { display: block; margin-block-end: var(--g-space-1); font-size: var(--g-font-size-sm); font-weight: 700; }
|
|
2666
|
+
.g-tooltip-description { color: rgb(255 255 255 / .78); }
|
|
2667
|
+
.g-help-popover { position: absolute; z-index: var(--g-z-tooltip); width: min(22rem, calc(100vw - 1rem)); padding: var(--g-space-4); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface-raised); box-shadow: var(--g-shadow-lg); }
|
|
2668
|
+
.g-help-popover-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--g-space-3); }
|
|
2669
|
+
.g-help-popover-title { font-size: var(--g-font-size-md); font-weight: 700; }
|
|
2670
|
+
.g-help-popover-body { margin-block-start: var(--g-space-2); color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); line-height: 1.6; }
|
|
2671
|
+
.g-help-popover-actions { display: flex; flex-wrap: wrap; gap: var(--g-space-2); margin-block-start: var(--g-space-3); }
|
|
2672
|
+
.g-definition { border-block-end: 1px dotted currentColor; color: var(--g-color-primary-text); text-decoration: none; cursor: help; }
|
|
2673
|
+
|
|
2674
|
+
/* Notes, callouts, guidance and shortcuts */
|
|
2675
|
+
.g-callout, .g-note { --g-help-accent: var(--g-color-primary); --g-help-soft: var(--g-color-primary-soft); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--g-space-3); padding: var(--g-space-4); border: 1px solid var(--g-color-border); border-inline-start: 3px solid var(--g-help-accent); border-radius: var(--g-radius-md); background: var(--g-help-soft); }
|
|
2676
|
+
.g-callout.is-neutral, .g-note { --g-help-accent: var(--g-color-border-strong); --g-help-soft: var(--g-color-surface-subtle); }
|
|
2677
|
+
.g-callout.is-info { --g-help-accent: var(--g-color-info); --g-help-soft: var(--g-color-info-soft); }
|
|
2678
|
+
.g-callout.is-success { --g-help-accent: var(--g-color-success); --g-help-soft: var(--g-color-success-soft); }
|
|
2679
|
+
.g-callout.is-warning { --g-help-accent: var(--g-color-warning); --g-help-soft: var(--g-color-warning-soft); }
|
|
2680
|
+
.g-callout.is-danger { --g-help-accent: var(--g-color-danger); --g-help-soft: var(--g-color-danger-soft); }
|
|
2681
|
+
.g-callout-icon, .g-note-label { color: var(--g-help-accent); font-weight: 750; }
|
|
2682
|
+
.g-callout-title, .g-note-title { font-weight: 700; }
|
|
2683
|
+
.g-callout-content, .g-note-content { min-width: 0; color: var(--g-color-text); font-size: var(--g-font-size-sm); line-height: 1.65; }
|
|
2684
|
+
.g-note .g-note-label { color: var(--g-color-text); }
|
|
2685
|
+
.g-callout-content > :first-child, .g-note-content > :first-child { margin-block-start: 0; }
|
|
2686
|
+
.g-callout-content > :last-child, .g-note-content > :last-child { margin-block-end: 0; }
|
|
2687
|
+
.g-guidance-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g-space-3); }
|
|
2688
|
+
.g-guidance-do, .g-guidance-dont { padding: var(--g-space-4); border: 1px solid var(--g-color-border); border-block-start: 3px solid var(--g-color-success); border-radius: var(--g-radius-md); background: var(--g-color-surface); }
|
|
2689
|
+
.g-guidance-dont { border-block-start-color: var(--g-color-danger); }
|
|
2690
|
+
.g-guidance-label { color: var(--g-color-success); font-size: var(--g-font-size-xs); font-weight: 750; text-transform: uppercase; }
|
|
2691
|
+
.g-guidance-dont .g-guidance-label { color: var(--g-color-danger); }
|
|
2692
|
+
.g-key-hint, kbd.g-key-hint { display: inline-grid; min-inline-size: 1.65rem; min-block-size: 1.45rem; place-items: center; padding-inline: var(--g-space-1); border: 1px solid var(--g-color-border-strong); border-block-end-width: 2px; border-radius: var(--g-radius-sm); background: var(--g-color-surface); color: var(--g-color-text); font: 650 var(--g-font-size-xs)/1 var(--g-font-mono); white-space: nowrap; }
|
|
2693
|
+
.g-shortcut-list { display: grid; margin: 0; padding: 0; list-style: none; }
|
|
2694
|
+
.g-shortcut-item { display: flex; min-height: 2.5rem; align-items: center; justify-content: space-between; gap: var(--g-space-4); border-block-end: 1px solid var(--g-color-border); color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); }
|
|
2695
|
+
.g-shortcut-keys { display: inline-flex; align-items: center; gap: var(--g-space-1); color: var(--g-color-text-subtle); }
|
|
2696
|
+
|
|
2697
|
+
/* Help cards, panels, centers, topics and FAQ */
|
|
2698
|
+
.g-help-card { display: grid; gap: var(--g-space-3); padding: var(--g-space-4); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); }
|
|
2699
|
+
.g-help-card-icon { display: grid; inline-size: 2.25rem; block-size: 2.25rem; place-items: center; border-radius: var(--g-radius-sm); background: var(--g-color-primary-soft); color: var(--g-color-primary-text); font-weight: 750; }
|
|
2700
|
+
.g-help-card-title { font-weight: 700; }
|
|
2701
|
+
.g-help-card-description { color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); line-height: 1.55; }
|
|
2702
|
+
.g-help-card-actions { display: flex; flex-wrap: wrap; gap: var(--g-space-2); }
|
|
2703
|
+
.g-help-panel { display: flex; min-height: 0; flex-direction: column; border-inline-start: 1px solid var(--g-color-border); background: var(--g-color-surface); }
|
|
2704
|
+
.g-help-panel-header, .g-help-panel-body, .g-help-panel-footer { padding: var(--g-space-4); }
|
|
2705
|
+
.g-help-panel-header { display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-3); border-block-end: 1px solid var(--g-color-border); }
|
|
2706
|
+
.g-help-panel-title { font-weight: 700; }
|
|
2707
|
+
.g-help-panel-body { flex: 1; min-height: 0; overflow: auto; }
|
|
2708
|
+
.g-help-panel-footer { border-block-start: 1px solid var(--g-color-border); }
|
|
2709
|
+
.g-help-center { display: grid; gap: var(--g-space-5); padding: clamp(var(--g-space-5), 4vw, var(--g-space-10)); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); }
|
|
2710
|
+
.g-help-center-header { max-width: 44rem; }
|
|
2711
|
+
.g-help-center-title { font-size: clamp(var(--g-font-size-xl), 4vw, var(--g-font-size-3xl)); }
|
|
2712
|
+
.g-help-center-description { margin-block-start: var(--g-space-2); color: var(--g-color-text-muted); }
|
|
2713
|
+
.g-help-search { position: relative; max-width: 42rem; }
|
|
2714
|
+
.g-help-search .g-input { padding-inline-start: 2.5rem; }
|
|
2715
|
+
.g-help-search-icon { position: absolute; inset-block-start: 50%; inset-inline-start: var(--g-space-3); color: var(--g-color-text-subtle); transform: translateY(-50%); pointer-events: none; }
|
|
2716
|
+
.g-help-topics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--g-space-3); }
|
|
2717
|
+
.g-help-topic { display: grid; gap: var(--g-space-1); padding: var(--g-space-4); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-sm); background: var(--g-color-surface); color: inherit; text-decoration: none; }
|
|
2718
|
+
.g-help-topic:hover { border-color: var(--g-color-primary); background: var(--g-color-primary-soft); }
|
|
2719
|
+
.g-help-topic-title { font-weight: 700; }
|
|
2720
|
+
.g-help-topic-meta { color: var(--g-color-text-muted); font-size: var(--g-font-size-xs); }
|
|
2721
|
+
.g-faq { border-block-start: 1px solid var(--g-color-border); }
|
|
2722
|
+
.g-faq-item { border-block-end: 1px solid var(--g-color-border); }
|
|
2723
|
+
.g-faq-question { display: flex; inline-size: 100%; min-block-size: 3rem; align-items: center; justify-content: space-between; gap: var(--g-space-4); padding: var(--g-space-3) 0; border: 0; background: transparent; color: var(--g-color-text); font-weight: 700; text-align: start; cursor: pointer; }
|
|
2724
|
+
.g-faq-question::after { content: "+"; color: var(--g-color-text-muted); font-size: var(--g-font-size-xl); font-weight: 400; }
|
|
2725
|
+
.g-faq-question[aria-expanded="true"]::after { content: "−"; }
|
|
2726
|
+
.g-faq-answer { padding-block: 0 var(--g-space-4); color: var(--g-color-text-muted); line-height: 1.65; }
|
|
2727
|
+
.g-contextual-help { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--g-space-3); padding: var(--g-space-3); border: 1px dashed var(--g-color-border-strong); border-radius: var(--g-radius-sm); background: var(--g-color-surface-subtle); }
|
|
2728
|
+
.g-contextual-help-content { min-width: 0; color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); line-height: 1.55; }
|
|
2729
|
+
|
|
2730
|
+
/* Guided discovery: coach marks, tours, hotspots and releases */
|
|
2731
|
+
.g-coach-mark, .g-tour { width: min(22rem, calc(100vw - 1rem)); padding: var(--g-space-4); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface-raised); box-shadow: var(--g-shadow-xl); }
|
|
2732
|
+
.g-coach-mark { position: absolute; z-index: var(--g-z-tooltip); }
|
|
2733
|
+
.g-coach-mark-title, .g-tour-title { font-size: var(--g-font-size-md); font-weight: 700; }
|
|
2734
|
+
.g-coach-mark-description, .g-tour-description { margin-block-start: var(--g-space-2); color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); line-height: 1.6; }
|
|
2735
|
+
.g-coach-mark-actions, .g-tour-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--g-space-2); margin-block-start: var(--g-space-4); }
|
|
2736
|
+
.g-tour { position: fixed; z-index: calc(var(--g-z-tooltip) + 1); }
|
|
2737
|
+
.g-tour-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--g-space-3); }
|
|
2738
|
+
.g-tour-progress { color: var(--g-color-text-muted); font-size: var(--g-font-size-xs); font-variant-numeric: tabular-nums; }
|
|
2739
|
+
.g-tour-step[hidden] { display: none; }
|
|
2740
|
+
.g-spotlight { position: fixed; z-index: var(--g-z-overlay); border: 2px solid var(--g-color-primary); border-radius: var(--g-radius-md); box-shadow: 0 0 0 9999px var(--g-color-overlay); pointer-events: none; transition: inset var(--g-duration-normal) var(--g-ease-standard), inline-size var(--g-duration-normal) var(--g-ease-standard), block-size var(--g-duration-normal) var(--g-ease-standard); }
|
|
2741
|
+
.g-hotspot { position: relative; display: inline-grid; inline-size: 1rem; block-size: 1rem; place-items: center; border: 2px solid var(--g-color-surface); border-radius: 50%; background: var(--g-color-primary); box-shadow: 0 0 0 1px var(--g-color-primary); }
|
|
2742
|
+
.g-hotspot::after { content: ""; position: absolute; inset: -.45rem; border: 2px solid var(--g-color-primary); border-radius: 50%; animation: g-hotspot-pulse 1.8s ease-out infinite; }
|
|
2743
|
+
.g-hotspot-label { position: absolute; inset-block-start: 50%; inset-inline-start: calc(100% + var(--g-space-2)); width: max-content; max-width: 12rem; padding: var(--g-space-1) var(--g-space-2); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-sm); background: var(--g-color-surface-raised); color: var(--g-color-text); box-shadow: var(--g-shadow-sm); font-size: var(--g-font-size-xs); transform: translateY(-50%); }
|
|
2744
|
+
.g-feature-hint { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--g-space-3); padding: var(--g-space-3); border: 1px solid var(--g-color-primary); border-radius: var(--g-radius-md); background: var(--g-color-primary-soft); }
|
|
2745
|
+
.g-feature-hint-badge { padding: .15rem .4rem; border-radius: var(--g-radius-sm); background: var(--g-color-primary); color: var(--g-color-on-primary); font-size: .65rem; font-weight: 750; text-transform: uppercase; }
|
|
2746
|
+
.g-feature-hint-title { font-weight: 700; }
|
|
2747
|
+
.g-feature-hint-description { margin-block-start: var(--g-space-1); color: var(--g-color-text); font-size: var(--g-font-size-sm); }
|
|
2748
|
+
.g-whats-new { display: grid; gap: var(--g-space-4); }
|
|
2749
|
+
.g-whats-new-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--g-space-3); }
|
|
2750
|
+
.g-whats-new-marker { display: grid; inline-size: 2rem; block-size: 2rem; place-items: center; border-radius: var(--g-radius-sm); background: var(--g-color-primary-soft); color: var(--g-color-primary-text); font-size: var(--g-font-size-xs); font-weight: 750; }
|
|
2751
|
+
.g-whats-new-title { font-weight: 700; }
|
|
2752
|
+
.g-whats-new-description { margin-block-start: var(--g-space-1); color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); line-height: 1.55; }
|
|
2753
|
+
|
|
2754
|
+
/* Task help, troubleshooting and feedback loop */
|
|
2755
|
+
.g-help-checklist { display: grid; gap: var(--g-space-2); margin: 0; padding: 0; list-style: none; }
|
|
2756
|
+
.g-help-checklist-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--g-space-2); align-items: start; color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); }
|
|
2757
|
+
.g-help-checklist-marker { display: grid; inline-size: 1.25rem; block-size: 1.25rem; place-items: center; border: 1px solid var(--g-color-border-strong); border-radius: 50%; font-size: .65rem; }
|
|
2758
|
+
.g-help-checklist-item.is-complete { color: var(--g-color-text-subtle); text-decoration: line-through; }
|
|
2759
|
+
.g-help-checklist-item.is-complete .g-help-checklist-marker { border-color: var(--g-color-success); background: var(--g-color-success); color: #fff; }
|
|
2760
|
+
.g-troubleshooting { display: grid; gap: var(--g-space-3); }
|
|
2761
|
+
.g-troubleshooting-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--g-space-3); }
|
|
2762
|
+
.g-troubleshooting-number { display: grid; inline-size: 1.75rem; block-size: 1.75rem; place-items: center; border: 1px solid var(--g-color-border-strong); border-radius: 50%; font-size: var(--g-font-size-xs); font-weight: 750; }
|
|
2763
|
+
.g-troubleshooting-title { font-weight: 700; }
|
|
2764
|
+
.g-troubleshooting-description { margin-block-start: var(--g-space-1); color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); line-height: 1.55; }
|
|
2765
|
+
.g-help-feedback { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--g-space-3); padding-block: var(--g-space-3); border-block-start: 1px solid var(--g-color-border); color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); }
|
|
2766
|
+
.g-help-feedback-actions { display: inline-flex; gap: var(--g-space-2); }
|
|
2767
|
+
|
|
2768
|
+
@keyframes g-hotspot-pulse { from { opacity: .75; transform: scale(.45); } to { opacity: 0; transform: scale(1.25); } }
|
|
2769
|
+
|
|
2770
|
+
@media (max-width: 639.98px) {
|
|
2771
|
+
.g-guidance-pair { grid-template-columns: 1fr; }
|
|
2772
|
+
.g-help-panel { border-inline-start: 0; border-block-start: 1px solid var(--g-color-border); }
|
|
2773
|
+
.g-contextual-help, .g-feature-hint { grid-template-columns: auto minmax(0, 1fr); }
|
|
2774
|
+
.g-contextual-help > :last-child, .g-feature-hint > :last-child { grid-column: 1 / -1; }
|
|
2775
|
+
}
|
|
2776
|
+
|
|
2777
|
+
@media (prefers-reduced-motion: reduce) {
|
|
2778
|
+
.g-hotspot::after { animation: none; opacity: .35; }
|
|
2779
|
+
.g-spotlight { transition: none; }
|
|
2780
|
+
}
|
|
2781
|
+
|
|
2782
|
+
@media (forced-colors: active) {
|
|
2783
|
+
.g-tip, .g-callout, .g-note, .g-feature-hint, .g-hotspot { border: 1px solid CanvasText; }
|
|
2784
|
+
.g-spotlight { border-color: Highlight; box-shadow: 0 0 0 9999px Canvas; }
|
|
2785
|
+
}
|
|
2786
|
+
|
|
2787
|
+
@media print {
|
|
2788
|
+
.g-tooltip, .g-tooltip-rich, .g-help-popover, .g-coach-mark, .g-tour, .g-spotlight, .g-hotspot, .g-help-trigger, .g-help-feedback { display: none !important; }
|
|
2789
|
+
.g-help-panel { border: 1px solid var(--g-color-border); }
|
|
2790
|
+
.g-help-center { padding: 0; border: 0; }
|
|
2791
|
+
.g-callout, .g-note, .g-tip, .g-feature-hint { break-inside: avoid; box-shadow: none; }
|
|
2792
|
+
}
|
|
2793
|
+
}
|
|
2794
|
+
|
|
2795
|
+
@layer gardener.components {
|
|
2796
|
+
/* Authentication and identity */
|
|
2797
|
+
.g-auth-shell { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--g-color-canvas); }
|
|
2798
|
+
.g-auth-shell--split { grid-template-columns: minmax(20rem, 1.15fr) minmax(26rem, .85fr); }
|
|
2799
|
+
.g-auth-visual { display: grid; align-content: end; padding: clamp(2rem, 6vw, 6rem); color: white; background: linear-gradient(145deg, var(--g-primary-800), var(--g-primary-500)); }
|
|
2800
|
+
.g-auth-visual :where(h1, h2, h3, p, a) { color: inherit; }
|
|
2801
|
+
.g-auth-main { display: grid; place-items: center; padding: clamp(1rem, 5vw, 4rem); }
|
|
2802
|
+
.g-auth-card { width: min(100%, 28rem); display: grid; gap: var(--g-space-5); padding: clamp(1.25rem, 4vw, 2rem); background: var(--g-color-surface); border: var(--g-border-width) solid var(--g-color-border); border-radius: var(--g-radius-lg); box-shadow: var(--g-shadow-sm); }
|
|
2803
|
+
.g-auth-brand, .g-auth-heading, .g-auth-actions, .g-auth-sso { display: grid; gap: var(--g-space-3); }
|
|
2804
|
+
.g-auth-brand { grid-template-columns: auto 1fr; align-items: center; }
|
|
2805
|
+
.g-auth-divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--g-space-3); color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); }
|
|
2806
|
+
.g-auth-divider::before, .g-auth-divider::after { content: ""; height: 1px; background: var(--g-color-border); }
|
|
2807
|
+
.g-auth-otp { display: grid; grid-template-columns: repeat(var(--g-otp-length, 6), minmax(2.5rem, 1fr)); gap: var(--g-space-2); }
|
|
2808
|
+
.g-auth-otp > input { min-width: 0; height: 3rem; text-align: center; font: 600 1.25rem/1 var(--g-font-mono); }
|
|
2809
|
+
.g-auth-method { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--g-space-3); min-height: 3.25rem; padding: var(--g-space-3); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); }
|
|
2810
|
+
.g-auth-status { text-align: center; display: grid; justify-items: center; gap: var(--g-space-4); }
|
|
2811
|
+
|
|
2812
|
+
/* Mobile storefront/category and native-like screens */
|
|
2813
|
+
.g-mobile-page { min-height: 100svh; padding-bottom: env(safe-area-inset-bottom); background: var(--g-color-canvas); }
|
|
2814
|
+
.g-mobile-page--with-nav, .g-mobile-page:has(.g-mobile-bottom-nav) { padding-bottom: calc(var(--g-mobile-nav-height, 4rem) + env(safe-area-inset-bottom)); }
|
|
2815
|
+
.g-mobile-topbar { position: sticky; top: 0; z-index: var(--g-z-sticky); min-height: calc(3.5rem + env(safe-area-inset-top)); padding: env(safe-area-inset-top) var(--g-space-4) 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--g-space-3); background: color-mix(in srgb, var(--g-color-surface) 94%, transparent); border-bottom: 1px solid var(--g-color-border); backdrop-filter: blur(12px); }
|
|
2816
|
+
.g-mobile-category { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); min-height: calc(100svh - 3.5rem); background: var(--g-color-surface); }
|
|
2817
|
+
.g-mobile-category-rail { position: sticky; top: 3.5rem; align-self: start; max-height: calc(100svh - 3.5rem - env(safe-area-inset-bottom)); overflow-y: auto; background: var(--g-color-surface-subtle); border-inline-end: 1px solid var(--g-color-border); }
|
|
2818
|
+
.g-mobile-category-link { width: 100%; min-height: 3.25rem; padding: var(--g-space-2) var(--g-space-3); display: grid; place-items: center; color: var(--g-color-text); text-align: center; font-size: var(--g-font-size-sm); border-inline-start: 3px solid transparent; }
|
|
2819
|
+
.g-mobile-category-link[aria-current="page"], .g-mobile-category-link.is-active { color: var(--g-color-primary-text); background: var(--g-color-surface); border-inline-start-color: var(--g-color-primary); font-weight: 600; }
|
|
2820
|
+
.g-mobile-category-content { min-width: 0; padding: var(--g-space-4); overflow: hidden; }
|
|
2821
|
+
.g-mobile-category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g-space-4) var(--g-space-2); }
|
|
2822
|
+
.g-mobile-category-item { min-width: 0; display: grid; justify-items: center; gap: var(--g-space-2); text-align: center; font-size: var(--g-font-size-xs); }
|
|
2823
|
+
.g-mobile-category-item > img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--g-radius-md); background: var(--g-color-surface-subtle); }
|
|
2824
|
+
.g-mobile-filterbar { position: sticky; top: calc(3.5rem + env(safe-area-inset-top)); z-index: calc(var(--g-z-sticky) - 1); display: flex; gap: var(--g-space-2); padding: var(--g-space-2) var(--g-space-4); overflow-x: auto; scrollbar-width: none; background: var(--g-color-surface); border-bottom: 1px solid var(--g-color-border); }
|
|
2825
|
+
.g-mobile-sheet-actions { position: sticky; bottom: 0; display: grid; grid-template-columns: 1fr 2fr; gap: var(--g-space-3); padding: var(--g-space-3) var(--g-space-4) calc(var(--g-space-3) + env(safe-area-inset-bottom)); background: var(--g-color-surface); border-top: 1px solid var(--g-color-border); }
|
|
2826
|
+
|
|
2827
|
+
/* Super CMS: editing, media, workflow, localization */
|
|
2828
|
+
.g-cms-shell { height: 100dvh; min-height: 32rem; display: grid; grid-template: "top top top" auto "tree main inspect" minmax(0, 1fr) "status status status" auto / minmax(13rem, 17rem) minmax(24rem, 1fr) minmax(15rem, 20rem); overflow: hidden; background: var(--g-color-canvas); }
|
|
2829
|
+
.g-cms-topbar { grid-area: top; display: flex; align-items: center; gap: var(--g-space-3); min-width: 0; padding: var(--g-space-2) var(--g-space-3); background: var(--g-color-surface); border-bottom: 1px solid var(--g-color-border); }
|
|
2830
|
+
.g-cms-tree { grid-area: tree; overflow: auto; background: var(--g-color-surface); border-inline-end: 1px solid var(--g-color-border); }
|
|
2831
|
+
.g-cms-main { grid-area: main; min-width: 0; overflow: auto; }
|
|
2832
|
+
.g-cms-inspector { grid-area: inspect; overflow: auto; background: var(--g-color-surface); border-inline-start: 1px solid var(--g-color-border); }
|
|
2833
|
+
.g-cms-statusbar { grid-area: status; min-height: 1.75rem; display: flex; align-items: center; gap: var(--g-space-4); padding-inline: var(--g-space-3); font-size: var(--g-font-size-xs); color: var(--g-color-text-muted); background: var(--g-color-surface); border-top: 1px solid var(--g-color-border); }
|
|
2834
|
+
.g-cms-panel-header { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; min-height: 2.75rem; padding: var(--g-space-2) var(--g-space-3); background: var(--g-color-surface); border-bottom: 1px solid var(--g-color-border); }
|
|
2835
|
+
.g-cms-canvas { min-height: 100%; padding: clamp(1rem, 3vw, 3rem); background-color: var(--g-color-surface-sunken); background-image: radial-gradient(var(--g-color-border) 1px, transparent 1px); background-size: 16px 16px; }
|
|
2836
|
+
.g-cms-device { width: min(100%, var(--g-preview-width, 76rem)); min-height: 42rem; margin-inline: auto; background: var(--g-color-surface); border: 1px solid var(--g-color-border-strong); border-radius: var(--g-radius-lg); box-shadow: var(--g-shadow-md); overflow: hidden; }
|
|
2837
|
+
.g-cms-device[data-g-device="tablet"] { --g-preview-width: 48rem; }
|
|
2838
|
+
.g-cms-device[data-g-device="mobile"] { --g-preview-width: 24rem; }
|
|
2839
|
+
.g-cms-block { position: relative; min-height: 2rem; outline: 1px solid transparent; }
|
|
2840
|
+
.g-cms-block:hover { outline-color: var(--g-primary-300); }
|
|
2841
|
+
.g-cms-block[aria-selected="true"], .g-cms-block.is-selected { outline: 2px solid var(--g-color-primary); }
|
|
2842
|
+
.g-cms-block-handle { position: absolute; inset-block-start: 0; inset-inline-start: 0; transform: translateY(-100%); display: none; padding: .15rem .35rem; font-size: .6875rem; color: var(--g-color-on-primary); background: var(--g-color-primary); }
|
|
2843
|
+
.g-cms-block[aria-selected="true"] > .g-cms-block-handle, .g-cms-block.is-selected > .g-cms-block-handle { display: flex; }
|
|
2844
|
+
.g-cms-palette { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g-space-2); padding: var(--g-space-3); }
|
|
2845
|
+
.g-cms-palette-item { display: grid; justify-items: center; gap: var(--g-space-2); padding: var(--g-space-3); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); cursor: grab; }
|
|
2846
|
+
.g-editor { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 30rem; background: var(--g-color-surface); border: 1px solid var(--g-color-border); }
|
|
2847
|
+
.g-editor-toolbar { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: var(--g-space-1); padding: var(--g-space-2); background: var(--g-color-surface); border-bottom: 1px solid var(--g-color-border); }
|
|
2848
|
+
.g-editor-content { width: min(100%, 76ch); min-height: 24rem; margin-inline: auto; padding: clamp(1rem, 5vw, 4rem); outline: 0; }
|
|
2849
|
+
.g-media-library { display: grid; grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr) minmax(14rem, 18rem); min-height: 34rem; border: 1px solid var(--g-color-border); background: var(--g-color-surface); }
|
|
2850
|
+
.g-media-sidebar, .g-media-inspector { padding: var(--g-space-3); overflow: auto; }
|
|
2851
|
+
.g-media-sidebar { border-inline-end: 1px solid var(--g-color-border); }
|
|
2852
|
+
.g-media-inspector { border-inline-start: 1px solid var(--g-color-border); }
|
|
2853
|
+
.g-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); align-content: start; gap: var(--g-space-3); padding: var(--g-space-4); overflow: auto; }
|
|
2854
|
+
.g-media-item { min-width: 0; padding: var(--g-space-1); border: 2px solid transparent; border-radius: var(--g-radius-md); }
|
|
2855
|
+
.g-media-item[aria-selected="true"] { border-color: var(--g-color-primary); background: var(--g-color-primary-soft); }
|
|
2856
|
+
.g-media-item img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--g-color-surface-subtle); }
|
|
2857
|
+
.g-workflow { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--g-space-3); overflow-x: auto; }
|
|
2858
|
+
.g-workflow-column { min-width: 13rem; padding: var(--g-space-3); background: var(--g-color-surface-subtle); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); }
|
|
2859
|
+
.g-revision { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--g-space-3); padding-block: var(--g-space-3); border-bottom: 1px solid var(--g-color-border); }
|
|
2860
|
+
.g-localization-grid { display: grid; grid-template-columns: minmax(10rem, .6fr) repeat(var(--g-locale-count, 2), minmax(15rem, 1fr)); overflow: auto; }
|
|
2861
|
+
.g-localization-grid > * { padding: var(--g-space-3); border-inline-end: 1px solid var(--g-color-border); border-bottom: 1px solid var(--g-color-border); }
|
|
2862
|
+
.g-publish-bar { position: sticky; bottom: 0; z-index: var(--g-z-sticky); display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-3); padding: var(--g-space-3); background: var(--g-color-surface); border-top: 1px solid var(--g-color-border); box-shadow: 0 -4px 12px rgb(15 23 42 / .06); }
|
|
2863
|
+
|
|
2864
|
+
/* Public sites and content publishing */
|
|
2865
|
+
.g-site-header { position: relative; z-index: var(--g-z-sticky); display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-6); min-height: var(--g-header-height); padding-inline: var(--g-space-page-x); background: var(--g-color-surface); border-bottom: 1px solid var(--g-color-border); }
|
|
2866
|
+
.g-site-nav { display: flex; align-items: center; gap: clamp(.75rem, 2vw, 2rem); }
|
|
2867
|
+
.g-hero { display: grid; align-items: center; gap: clamp(2rem, 6vw, 6rem); min-height: min(48rem, 80svh); padding: clamp(3rem, 9vw, 8rem) var(--g-space-page-x); }
|
|
2868
|
+
.g-hero--split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
2869
|
+
.g-hero--center { justify-items: center; text-align: center; }
|
|
2870
|
+
.g-hero-copy { max-width: 44rem; display: grid; gap: var(--g-space-6); }
|
|
2871
|
+
.g-section { padding: clamp(3rem, 7vw, 7rem) var(--g-space-page-x); }
|
|
2872
|
+
.g-section--tight { padding-block: clamp(2rem, 4vw, 4rem); }
|
|
2873
|
+
.g-section--subtle { background: var(--g-color-surface-subtle); }
|
|
2874
|
+
.g-section-heading { max-width: 46rem; margin-inline: auto; margin-bottom: clamp(2rem, 5vw, 4rem); text-align: center; }
|
|
2875
|
+
.g-logo-cloud { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.5rem, 5vw, 4rem); color: var(--g-color-text-muted); }
|
|
2876
|
+
.g-feature-grid, .g-testimonial-grid, .g-pricing-grid, .g-blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--g-space-6); }
|
|
2877
|
+
.g-feature { display: grid; align-content: start; gap: var(--g-space-3); }
|
|
2878
|
+
.g-testimonial { display: grid; grid-template-rows: 1fr auto; gap: var(--g-space-5); padding: var(--g-space-6); background: var(--g-color-surface); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-lg); }
|
|
2879
|
+
.g-pricing-card { position: relative; display: grid; align-content: start; gap: var(--g-space-5); padding: var(--g-space-6); background: var(--g-color-surface); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-lg); }
|
|
2880
|
+
.g-pricing-card.is-featured { border: 2px solid var(--g-color-primary); box-shadow: var(--g-shadow-md); }
|
|
2881
|
+
.g-pricing-features { display: grid; gap: var(--g-space-3); padding: 0; list-style: none; }
|
|
2882
|
+
.g-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--g-space-6); padding: clamp(2rem, 6vw, 5rem); color: var(--g-color-on-primary); background: var(--g-color-primary); border-radius: var(--g-radius-lg); }
|
|
2883
|
+
.g-article-shell { width: min(100% - 2rem, 76rem); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 17rem); gap: clamp(2rem, 5vw, 5rem); padding-block: clamp(2rem, 7vw, 6rem); }
|
|
2884
|
+
.g-article { min-width: 0; max-width: 75ch; }
|
|
2885
|
+
.g-article > * + * { margin-top: 1.25em; }
|
|
2886
|
+
.g-article-aside { position: sticky; top: calc(var(--g-header-height) + var(--g-space-4)); align-self: start; }
|
|
2887
|
+
.g-site-footer { display: grid; grid-template-columns: minmax(14rem, 2fr) repeat(var(--g-footer-columns, 3), minmax(8rem, 1fr)); gap: var(--g-space-8); padding: clamp(3rem, 6vw, 6rem) var(--g-space-page-x); background: var(--g-color-surface-subtle); border-top: 1px solid var(--g-color-border); }
|
|
2888
|
+
|
|
2889
|
+
/* Commerce recipes */
|
|
2890
|
+
.g-product-detail { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(20rem, .8fr); gap: clamp(2rem, 5vw, 5rem); }
|
|
2891
|
+
.g-product-gallery { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--g-space-3); }
|
|
2892
|
+
.g-product-thumbs { display: grid; align-content: start; gap: var(--g-space-2); }
|
|
2893
|
+
.g-product-summary { align-self: start; display: grid; gap: var(--g-space-5); }
|
|
2894
|
+
.g-cart-layout, .g-checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem); gap: clamp(1.5rem, 4vw, 4rem); }
|
|
2895
|
+
.g-order-summary { position: sticky; top: var(--g-space-4); align-self: start; display: grid; gap: var(--g-space-4); padding: var(--g-space-5); background: var(--g-color-surface); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); }
|
|
2896
|
+
.g-order-tracker { display: grid; grid-template-columns: repeat(var(--g-order-steps, 4), 1fr); }
|
|
2897
|
+
.g-order-step { position: relative; display: grid; justify-items: center; gap: var(--g-space-2); text-align: center; color: var(--g-color-text-muted); }
|
|
2898
|
+
.g-order-step::before { content: ""; position: absolute; top: .6rem; inset-inline: -50%; height: 2px; background: var(--g-color-border); z-index: -1; }
|
|
2899
|
+
.g-order-step:first-child::before { display: none; }
|
|
2900
|
+
.g-order-step.is-complete, .g-order-step[aria-current="step"] { color: var(--g-color-primary-text); }
|
|
2901
|
+
.g-order-step.is-complete::before { background: var(--g-color-primary); }
|
|
2902
|
+
|
|
2903
|
+
/* Enterprise administration */
|
|
2904
|
+
.g-org-switcher { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--g-space-3); min-width: 0; }
|
|
2905
|
+
.g-settings-shell { display: grid; grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); }
|
|
2906
|
+
.g-settings-nav { position: sticky; top: var(--g-space-4); align-self: start; }
|
|
2907
|
+
.g-settings-section { max-width: 56rem; padding-block: var(--g-space-6); border-bottom: 1px solid var(--g-color-border); }
|
|
2908
|
+
.g-permission-matrix { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--g-font-size-sm); }
|
|
2909
|
+
.g-permission-matrix th { position: sticky; top: 0; z-index: 1; background: var(--g-color-surface); }
|
|
2910
|
+
.g-permission-matrix th, .g-permission-matrix td { padding: var(--g-space-3); text-align: center; border-bottom: 1px solid var(--g-color-border); }
|
|
2911
|
+
.g-permission-matrix th:first-child, .g-permission-matrix td:first-child { position: sticky; inset-inline-start: 0; text-align: start; background: var(--g-color-surface); }
|
|
2912
|
+
.g-audit-event { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--g-space-3); padding-block: var(--g-space-3); border-bottom: 1px solid var(--g-color-border); }
|
|
2913
|
+
.g-usage-meter { display: grid; gap: var(--g-space-2); }
|
|
2914
|
+
.g-api-key { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--g-space-3); padding: var(--g-space-3); border: 1px solid var(--g-color-border); }
|
|
2915
|
+
.g-approval-route { display: flex; align-items: center; gap: var(--g-space-2); overflow-x: auto; }
|
|
2916
|
+
.g-approval-node { flex: 0 0 auto; min-width: 8rem; padding: var(--g-space-3); border: 1px solid var(--g-color-border); background: var(--g-color-surface); }
|
|
2917
|
+
.g-approval-route > :not(:last-child)::after { content: "→"; margin-inline-start: var(--g-space-3); color: var(--g-color-text-muted); }
|
|
2918
|
+
[dir="rtl"] .g-approval-route > :not(:last-child)::after { content: "←"; }
|
|
2919
|
+
|
|
2920
|
+
@media (max-width: 63.999rem) {
|
|
2921
|
+
.g-auth-shell--split { grid-template-columns: 1fr; }
|
|
2922
|
+
.g-auth-visual { display: none; }
|
|
2923
|
+
.g-cms-shell { grid-template: "top top" auto "main inspect" minmax(0, 1fr) "status status" auto / minmax(0, 1fr) minmax(14rem, 18rem); }
|
|
2924
|
+
.g-cms-tree { display: none; }
|
|
2925
|
+
.g-media-library { grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr); }
|
|
2926
|
+
.g-media-inspector { display: none; }
|
|
2927
|
+
.g-site-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
2928
|
+
}
|
|
2929
|
+
|
|
2930
|
+
@media (max-width: 47.999rem) {
|
|
2931
|
+
.g-hero--split, .g-product-detail, .g-cart-layout, .g-checkout-layout, .g-article-shell, .g-settings-shell { grid-template-columns: minmax(0, 1fr); }
|
|
2932
|
+
.g-site-nav { display: none; }
|
|
2933
|
+
.g-hero { min-height: auto; }
|
|
2934
|
+
.g-article-aside, .g-settings-nav { position: static; }
|
|
2935
|
+
.g-cta { grid-template-columns: 1fr; }
|
|
2936
|
+
.g-cms-shell { grid-template: "top" auto "main" minmax(0, 1fr) "status" auto / minmax(0, 1fr); }
|
|
2937
|
+
.g-cms-inspector { display: none; }
|
|
2938
|
+
.g-media-library { grid-template-columns: minmax(0, 1fr); }
|
|
2939
|
+
.g-media-sidebar { display: none; }
|
|
2940
|
+
.g-product-gallery { grid-template-columns: 1fr; }
|
|
2941
|
+
.g-product-thumbs { grid-template-columns: repeat(5, 1fr); grid-row: 2; }
|
|
2942
|
+
.g-order-summary { position: static; }
|
|
2943
|
+
.g-site-footer { grid-template-columns: 1fr; }
|
|
2944
|
+
}
|
|
2945
|
+
|
|
2946
|
+
@media print {
|
|
2947
|
+
.g-site-header, .g-site-footer, .g-cms-topbar, .g-cms-tree, .g-cms-inspector, .g-cms-statusbar, .g-publish-bar { display: none !important; }
|
|
2948
|
+
.g-cms-shell { height: auto; display: block; overflow: visible; }
|
|
2949
|
+
.g-cms-main, .g-editor { overflow: visible; border: 0; }
|
|
2950
|
+
}
|
|
2951
|
+
}
|
|
2952
|
+
|
|
2953
|
+
@layer gardener.components {
|
|
2954
|
+
.g-desktop-shell { height: 100dvh; min-width: 20rem; display: grid; grid-template: "title title title" var(--g-titlebar-height, 2.25rem) "activity main side" minmax(0, 1fr) "status status status" 1.5rem / auto minmax(0, 1fr) auto; overflow: hidden; background: var(--g-color-canvas); user-select: none; }
|
|
2955
|
+
.g-titlebar { grid-area: title; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; min-height: var(--g-titlebar-height, 2.25rem); color: var(--g-color-text); background: var(--g-color-surface); border-bottom: 1px solid var(--g-color-border); -webkit-app-region: drag; app-region: drag; }
|
|
2956
|
+
.g-titlebar-start, .g-titlebar-end { min-width: 0; display: flex; align-items: center; }
|
|
2957
|
+
.g-titlebar-end { justify-content: flex-end; }
|
|
2958
|
+
.g-titlebar-title { overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; font-size: var(--g-font-size-xs); }
|
|
2959
|
+
.g-no-drag, .g-titlebar button, .g-titlebar a, .g-titlebar input, .g-window-controls { -webkit-app-region: no-drag; app-region: no-drag; }
|
|
2960
|
+
.g-window-controls { height: 100%; display: flex; margin-inline-start: auto; }
|
|
2961
|
+
.g-window-button { width: 2.875rem; height: 100%; display: grid; place-items: center; border: 0; border-radius: 0; background: transparent; color: inherit; }
|
|
2962
|
+
.g-window-button:hover { background: var(--g-color-surface-subtle); }
|
|
2963
|
+
.g-window-button[data-g-window-action="close"]:hover { color: #fff; background: #c42b1c; }
|
|
2964
|
+
.g-activitybar { grid-area: activity; width: var(--g-activitybar-width, 3rem); display: flex; flex-direction: column; align-items: center; gap: var(--g-space-1); overflow: hidden; background: var(--g-color-surface-subtle); border-inline-end: 1px solid var(--g-color-border); }
|
|
2965
|
+
.g-activitybar-item { position: relative; width: 100%; min-height: 3rem; display: grid; place-items: center; color: var(--g-color-text-muted); }
|
|
2966
|
+
.g-activitybar-item[aria-current="page"], .g-activitybar-item.is-active { color: var(--g-color-text); }
|
|
2967
|
+
.g-activitybar-item[aria-current="page"]::before, .g-activitybar-item.is-active::before { content: ""; position: absolute; inset-block: .45rem; inset-inline-start: 0; width: 2px; background: var(--g-color-primary); }
|
|
2968
|
+
.g-workbench { grid-area: main; min-width: 0; min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); overflow: hidden; }
|
|
2969
|
+
.g-workbench-sidebar { width: var(--g-workbench-sidebar-width, 16rem); min-width: 10rem; max-width: 35rem; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; background: var(--g-color-surface); border-inline-end: 1px solid var(--g-color-border); }
|
|
2970
|
+
.g-workbench-editor { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; background: var(--g-color-surface); }
|
|
2971
|
+
.g-editor-tabs { display: flex; min-width: 0; overflow-x: auto; background: var(--g-color-surface-subtle); border-bottom: 1px solid var(--g-color-border); }
|
|
2972
|
+
.g-editor-tab { flex: 0 0 auto; max-width: 14rem; min-height: 2.25rem; display: flex; align-items: center; gap: var(--g-space-2); padding-inline: var(--g-space-3); color: var(--g-color-text); border-inline-end: 1px solid var(--g-color-border); }
|
|
2973
|
+
.g-editor-tab[aria-selected="true"], .g-editor-tab.is-active { color: var(--g-color-text); background: var(--g-color-surface); }
|
|
2974
|
+
.g-editor-pane { min-width: 0; min-height: 0; overflow: auto; }
|
|
2975
|
+
.g-bottom-panel { min-height: 6rem; max-height: 70%; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border-top: 1px solid var(--g-color-border); }
|
|
2976
|
+
.g-desktop-inspector { grid-area: side; width: var(--g-inspector-width, 18rem); min-width: 12rem; max-width: 36rem; overflow: auto; background: var(--g-color-surface); border-inline-start: 1px solid var(--g-color-border); }
|
|
2977
|
+
.g-desktop-statusbar { grid-area: status; display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-3); padding-inline: var(--g-space-2); font-size: .6875rem; color: var(--g-color-on-primary); background: var(--g-color-primary); }
|
|
2978
|
+
.g-desktop-status-group { min-width: 0; height: 100%; display: flex; align-items: center; }
|
|
2979
|
+
.g-desktop-status-item { height: 100%; display: flex; align-items: center; gap: .3rem; padding-inline: var(--g-space-2); white-space: nowrap; }
|
|
2980
|
+
.g-desktop-status-item:hover { background: rgb(255 255 255 / .12); }
|
|
2981
|
+
.g-menubar { display: flex; align-items: center; height: 100%; }
|
|
2982
|
+
.g-menubar-item { height: 100%; padding-inline: var(--g-space-2); border: 0; background: transparent; color: inherit; font-size: var(--g-font-size-xs); }
|
|
2983
|
+
.g-menubar-item:hover, .g-menubar-item[aria-expanded="true"] { background: var(--g-color-surface-subtle); }
|
|
2984
|
+
.g-splitter { flex: 0 0 4px; position: relative; z-index: 2; background: transparent; touch-action: none; }
|
|
2985
|
+
.g-splitter:hover, .g-splitter:focus-visible, .g-splitter.is-dragging { background: var(--g-color-primary); }
|
|
2986
|
+
.g-splitter[aria-orientation="vertical"] { cursor: col-resize; }
|
|
2987
|
+
.g-splitter[aria-orientation="horizontal"] { cursor: row-resize; }
|
|
2988
|
+
:is([data-g-os="macos"], [data-g-platform="macos"]) .g-titlebar { grid-template-columns: auto minmax(0, 1fr) auto; }
|
|
2989
|
+
:is([data-g-os="macos"], [data-g-platform="macos"]) .g-window-controls { order: -1; flex-direction: row-reverse; gap: .45rem; padding-inline: .75rem; }
|
|
2990
|
+
:is([data-g-os="macos"], [data-g-platform="macos"]) .g-window-button { width: .75rem; height: .75rem; border-radius: 50%; font-size: 0; }
|
|
2991
|
+
:is([data-g-os="macos"], [data-g-platform="macos"]) .g-window-button[data-g-window-action="close"] { background: #ff5f57; }
|
|
2992
|
+
:is([data-g-os="macos"], [data-g-platform="macos"]) .g-window-button[data-g-window-action="minimize"] { background: #febc2e; }
|
|
2993
|
+
:is([data-g-os="macos"], [data-g-platform="macos"]) .g-window-button[data-g-window-action="maximize"] { background: #28c840; }
|
|
2994
|
+
@media (max-width: 55rem) { .g-desktop-inspector { display: none; } }
|
|
2995
|
+
@media (max-width: 40rem) { .g-workbench-sidebar { display: none; } .g-titlebar { grid-template-columns: minmax(0, 1fr) auto; } .g-titlebar-title { text-align: start; padding-inline: var(--g-space-3); } .g-titlebar-start { display: none; } }
|
|
2996
|
+
}
|
|
2997
|
+
|
|
2998
|
+
@layer gardener.components {
|
|
2999
|
+
:where(.g-native-titlebar, .g-desktop-window-controls, .g-desktop-menubar, .g-desktop-activity-bar, .g-desktop-dock-panel, .g-desktop-split-pane, .g-desktop-inspector-panel, .g-desktop-status-bar, .g-desktop-command-palette, .g-shortcut-recorder, .g-desktop-context-menu, .g-desktop-document-tabs, .g-desktop-drag-region, .g-window-loading, .g-update-available, .g-desktop-permission-request, .g-native-file-picker, .g-tray-menu, .g-multi-window-placeholder, .g-desktop-workspace, .g-desktop-window-switcher, .g-recent-documents, .g-desktop-toolbar, .g-desktop-bottom-panel, .g-background-task-center, .g-desktop-notification-center, .g-sync-status, .g-update-progress, .g-crash-recovery, .g-single-instance-notice, .g-deep-link-handler, .g-about-dialog) { box-sizing: border-box; }
|
|
3000
|
+
|
|
3001
|
+
.g-desktop-workspace { --g-desktop-titlebar-size: 2.25rem; --g-desktop-status-size: 1.5rem; display: grid; grid-template: "title title title" var(--g-desktop-titlebar-size) "activity main inspector" minmax(0, 1fr) "status status status" var(--g-desktop-status-size) / auto minmax(0, 1fr) auto; inline-size: 100%; block-size: 100dvh; min-inline-size: 20rem; overflow: hidden; background: var(--g-color-canvas); color: var(--g-color-text); user-select: none; container: g-desktop-workspace / inline-size; }
|
|
3002
|
+
.g-desktop-workspace.is-contained { block-size: var(--g-desktop-contained-height, 38rem); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); }
|
|
3003
|
+
.g-desktop-workspace-main { grid-area: main; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-inline-size: 0; min-block-size: 0; overflow: hidden; background: var(--g-color-surface); }
|
|
3004
|
+
|
|
3005
|
+
.g-native-titlebar { grid-area: title; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; min-block-size: var(--g-desktop-titlebar-size, 2.25rem); border-block-end: 1px solid var(--g-color-border); background: var(--g-color-surface); -webkit-app-region: drag; app-region: drag; }
|
|
3006
|
+
.g-native-titlebar-start, .g-native-titlebar-end { display: flex; min-inline-size: 0; block-size: 100%; align-items: center; }
|
|
3007
|
+
.g-native-titlebar-end { justify-content: end; }
|
|
3008
|
+
.g-native-titlebar-title { min-inline-size: 0; overflow: hidden; font-size: var(--g-font-size-xs); font-weight: 600; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
|
|
3009
|
+
.g-desktop-drag-region { -webkit-app-region: drag; app-region: drag; user-select: none; }
|
|
3010
|
+
:where(.g-desktop-no-drag, .g-native-titlebar button, .g-native-titlebar a, .g-native-titlebar input, .g-desktop-window-controls) { -webkit-app-region: no-drag; app-region: no-drag; }
|
|
3011
|
+
|
|
3012
|
+
.g-desktop-window-controls { display: flex; block-size: 100%; margin-inline-start: auto; }
|
|
3013
|
+
.g-desktop-window-button { display: grid; inline-size: 2.875rem; block-size: 100%; place-items: center; border: 0; border-radius: 0; background: transparent; color: inherit; }
|
|
3014
|
+
.g-desktop-window-button:is(:hover, :focus-visible) { background: var(--g-color-surface-subtle); }
|
|
3015
|
+
.g-desktop-window-button[data-g-window-action="close"]:hover { background: #c42b1c; color: #fff; }
|
|
3016
|
+
|
|
3017
|
+
.g-desktop-menubar, .g-desktop-toolbar { display: flex; min-inline-size: 0; align-items: center; gap: var(--g-space-1); border-block-end: 1px solid var(--g-color-border); background: var(--g-color-surface); }
|
|
3018
|
+
.g-desktop-menubar { block-size: 100%; border: 0; }
|
|
3019
|
+
.g-desktop-menubar-item { display: inline-flex; block-size: 100%; align-items: center; padding-inline: var(--g-space-2); border: 0; border-radius: 0; background: transparent; color: inherit; font-size: var(--g-font-size-xs); }
|
|
3020
|
+
.g-desktop-menubar-item:is(:hover, :focus-visible, [aria-expanded="true"]) { background: var(--g-color-surface-subtle); }
|
|
3021
|
+
.g-desktop-toolbar { min-block-size: 2.5rem; padding: var(--g-space-1) var(--g-space-2); }
|
|
3022
|
+
.g-desktop-toolbar-group { display: flex; align-items: center; gap: var(--g-space-1); }
|
|
3023
|
+
.g-desktop-toolbar-separator { inline-size: 1px; block-size: 1.25rem; margin-inline: var(--g-space-1); background: var(--g-color-border); }
|
|
3024
|
+
|
|
3025
|
+
.g-desktop-activity-bar { grid-area: activity; display: flex; flex-direction: column; align-items: center; gap: var(--g-space-1); inline-size: var(--g-desktop-activity-size, 3rem); overflow: hidden; border-inline-end: 1px solid var(--g-color-border); background: var(--g-color-surface-subtle); }
|
|
3026
|
+
.g-desktop-activity-item { position: relative; display: grid; inline-size: 100%; min-block-size: 3rem; place-items: center; border: 0; border-radius: 0; background: transparent; color: var(--g-color-text-muted); }
|
|
3027
|
+
.g-desktop-activity-item:is(.is-active, [aria-current="page"]) { color: var(--g-color-text); }
|
|
3028
|
+
.g-desktop-activity-item:is(.is-active, [aria-current="page"])::before { content: ""; position: absolute; inset-block: .45rem; inset-inline-start: 0; inline-size: 2px; background: var(--g-color-primary); }
|
|
3029
|
+
|
|
3030
|
+
.g-desktop-dock-panel, .g-desktop-inspector-panel, .g-desktop-bottom-panel { display: grid; grid-template-rows: auto minmax(0, 1fr); min-inline-size: 0; min-block-size: 0; overflow: hidden; border-color: var(--g-color-border); background: var(--g-color-surface); }
|
|
3031
|
+
.g-desktop-dock-panel { inline-size: var(--g-desktop-dock-size, 16rem); border-inline-end: 1px solid var(--g-color-border); }
|
|
3032
|
+
.g-desktop-inspector-panel { grid-area: inspector; inline-size: var(--g-desktop-inspector-size, 18rem); border-inline-start: 1px solid var(--g-color-border); }
|
|
3033
|
+
.g-desktop-bottom-panel { block-size: var(--g-desktop-bottom-panel-size, 12rem); border-block-start: 1px solid var(--g-color-border); }
|
|
3034
|
+
.g-desktop-panel-header { display: flex; min-block-size: 2.25rem; align-items: center; justify-content: space-between; gap: var(--g-space-2); padding-inline: var(--g-space-3); border-block-end: 1px solid var(--g-color-border); background: var(--g-color-surface-subtle); font-size: var(--g-font-size-xs); font-weight: 650; }
|
|
3035
|
+
.g-desktop-panel-body { min-inline-size: 0; min-block-size: 0; overflow: auto; padding: var(--g-desktop-panel-padding, var(--g-space-3)); }
|
|
3036
|
+
:where(.g-desktop-dock-panel, .g-desktop-inspector-panel, .g-desktop-bottom-panel).is-collapsed { display: none; }
|
|
3037
|
+
|
|
3038
|
+
.g-desktop-split-pane { display: flex; min-inline-size: 0; min-block-size: 0; overflow: hidden; }
|
|
3039
|
+
.g-desktop-split-pane[data-g-orientation="vertical"] { flex-direction: column; }
|
|
3040
|
+
.g-desktop-split-pane > .g-split-panel { min-inline-size: 0; min-block-size: 0; overflow: auto; }
|
|
3041
|
+
.g-desktop-split-pane .g-split-handle { position: relative; z-index: 2; flex: 0 0 4px; background: transparent; touch-action: none; }
|
|
3042
|
+
.g-desktop-split-pane .g-split-handle:is(:hover, :focus-visible, .is-dragging) { background: var(--g-color-primary); }
|
|
3043
|
+
|
|
3044
|
+
.g-desktop-status-bar { grid-area: status; display: flex; min-inline-size: 0; align-items: center; justify-content: space-between; gap: var(--g-space-2); padding-inline: var(--g-space-2); overflow: hidden; background: var(--g-color-primary); color: var(--g-color-on-primary); font-size: .6875rem; }
|
|
3045
|
+
.g-desktop-status-group { display: flex; min-inline-size: 0; block-size: 100%; align-items: center; }
|
|
3046
|
+
.g-desktop-status-item { display: flex; block-size: 100%; align-items: center; gap: .3rem; padding-inline: var(--g-space-2); border: 0; border-radius: 0; background: transparent; color: inherit; white-space: nowrap; }
|
|
3047
|
+
.g-desktop-status-item:hover { background: rgb(255 255 255 / .14); }
|
|
3048
|
+
|
|
3049
|
+
.g-desktop-command-palette { position: fixed; z-index: var(--g-z-dialog); inset: 0; display: grid; align-items: start; justify-items: center; padding-block-start: min(18vh, 9rem); background: rgb(15 23 42 / .28); }
|
|
3050
|
+
.g-desktop-command-palette[hidden] { display: none; }
|
|
3051
|
+
.g-desktop-command-panel { inline-size: min(calc(100% - 2rem), 38rem); overflow: hidden; border: 1px solid var(--g-color-border-strong); border-radius: var(--g-radius-md); background: var(--g-color-surface); box-shadow: var(--g-shadow-lg); }
|
|
3052
|
+
.g-desktop-command-input { inline-size: 100%; min-block-size: 3rem; padding-inline: var(--g-space-4); border: 0; border-block-end: 1px solid var(--g-color-border); outline: 0; background: transparent; color: inherit; }
|
|
3053
|
+
.g-desktop-command-results { max-block-size: min(50vh, 24rem); overflow: auto; padding: var(--g-space-1); }
|
|
3054
|
+
.g-desktop-command-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--g-space-3); min-block-size: 2.5rem; padding: var(--g-space-2) var(--g-space-3); border-radius: var(--g-radius-md); }
|
|
3055
|
+
.g-desktop-command-item:is(.is-active, [aria-selected="true"]) { background: var(--g-color-primary-soft); color: var(--g-color-primary-text); }
|
|
3056
|
+
|
|
3057
|
+
.g-shortcut-recorder { display: grid; gap: var(--g-space-2); }
|
|
3058
|
+
.g-shortcut-recorder-control { display: flex; min-block-size: 2.5rem; align-items: center; justify-content: space-between; gap: var(--g-space-3); padding: var(--g-space-2) var(--g-space-3); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); color: inherit; text-align: start; }
|
|
3059
|
+
.g-shortcut-recorder-control.is-recording { border-color: var(--g-color-primary); outline: var(--g-focus-ring-width) solid var(--g-focus-ring); }
|
|
3060
|
+
.g-shortcut-recorder-keys { display: flex; align-items: center; gap: var(--g-space-1); }
|
|
3061
|
+
.g-shortcut-recorder-status { color: var(--g-color-text-muted); font-size: var(--g-font-size-xs); }
|
|
3062
|
+
|
|
3063
|
+
.g-desktop-context-menu, .g-tray-menu { inline-size: min(var(--g-desktop-menu-width, 17rem), calc(100vw - 1rem)); padding: var(--g-space-1); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); box-shadow: var(--g-shadow-md); }
|
|
3064
|
+
.g-desktop-context-menu[hidden], .g-tray-menu[hidden] { display: none; }
|
|
3065
|
+
.g-desktop-menu-item { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto; align-items: center; gap: var(--g-space-2); inline-size: 100%; min-block-size: 2rem; padding: var(--g-space-1) var(--g-space-2); border: 0; border-radius: calc(var(--g-radius-md) - 1px); background: transparent; color: inherit; font-size: var(--g-font-size-sm); text-align: start; }
|
|
3066
|
+
.g-desktop-menu-item:is(:hover, :focus-visible) { background: var(--g-color-surface-subtle); }
|
|
3067
|
+
.g-desktop-menu-item[aria-disabled="true"] { opacity: .5; pointer-events: none; }
|
|
3068
|
+
.g-desktop-menu-separator { block-size: 1px; margin: var(--g-space-1); background: var(--g-color-border); }
|
|
3069
|
+
|
|
3070
|
+
.g-desktop-document-tabs { display: flex; min-inline-size: 0; overflow-x: auto; border-block-end: 1px solid var(--g-color-border); background: var(--g-color-surface-subtle); scrollbar-width: thin; }
|
|
3071
|
+
.g-desktop-document-tab { position: relative; display: flex; flex: 0 0 auto; max-inline-size: 16rem; min-block-size: 2.25rem; align-items: center; gap: var(--g-space-2); padding-inline: var(--g-space-3); border: 0; border-inline-end: 1px solid var(--g-color-border); border-radius: 0; background: transparent; color: var(--g-color-text-muted); }
|
|
3072
|
+
.g-desktop-document-tab:is(.is-active, [aria-selected="true"]) { background: var(--g-color-surface); color: var(--g-color-text); }
|
|
3073
|
+
.g-desktop-document-tab.is-dirty::after { content: ""; inline-size: .45rem; block-size: .45rem; border-radius: var(--g-radius-full); background: currentColor; }
|
|
3074
|
+
.g-desktop-document-tab-close { display: grid; inline-size: 1.25rem; block-size: 1.25rem; place-items: center; border: 0; border-radius: var(--g-radius-sm); background: transparent; color: inherit; }
|
|
3075
|
+
.g-desktop-document-tab-close:hover { background: var(--g-color-surface-subtle); }
|
|
3076
|
+
|
|
3077
|
+
.g-window-loading, .g-multi-window-placeholder, .g-crash-recovery, .g-about-dialog { display: grid; justify-items: center; align-content: center; gap: var(--g-space-3); min-block-size: var(--g-desktop-state-min-height, 18rem); padding: var(--g-space-6); text-align: center; background: var(--g-color-surface); }
|
|
3078
|
+
.g-about-dialog[hidden] { display: none; }
|
|
3079
|
+
.g-window-loading-icon, .g-desktop-state-icon, .g-about-dialog-icon { display: grid; inline-size: 3.5rem; block-size: 3.5rem; place-items: center; border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface-subtle); color: var(--g-color-primary-text); }
|
|
3080
|
+
.g-window-loading-progress { inline-size: min(100%, 18rem); }
|
|
3081
|
+
.g-desktop-state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--g-space-2); }
|
|
3082
|
+
|
|
3083
|
+
.g-update-available, .g-desktop-permission-request, .g-single-instance-notice, .g-deep-link-handler { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--g-space-3); padding: var(--g-space-4); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); }
|
|
3084
|
+
.g-desktop-notice-icon { display: grid; inline-size: 2.5rem; block-size: 2.5rem; place-items: center; border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface-subtle); color: var(--g-color-primary-text); }
|
|
3085
|
+
.g-desktop-notice-main { min-inline-size: 0; }
|
|
3086
|
+
.g-desktop-notice-actions { display: flex; align-items: center; gap: var(--g-space-2); }
|
|
3087
|
+
|
|
3088
|
+
.g-native-file-picker { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--g-space-2); }
|
|
3089
|
+
.g-native-file-picker-value { min-inline-size: 0; min-block-size: 2.5rem; padding: var(--g-space-2) var(--g-space-3); overflow: hidden; border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); color: var(--g-color-text-muted); text-overflow: ellipsis; white-space: nowrap; }
|
|
3090
|
+
.g-native-file-picker input[type="file"] { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
|
|
3091
|
+
|
|
3092
|
+
.g-desktop-window-switcher { position: fixed; z-index: var(--g-z-dialog); inset: 0; display: grid; place-items: center; background: rgb(15 23 42 / .24); }
|
|
3093
|
+
.g-desktop-window-switcher[hidden] { display: none; }
|
|
3094
|
+
.g-desktop-window-switcher-panel { inline-size: min(calc(100% - 2rem), 42rem); padding: var(--g-space-3); border: 1px solid var(--g-color-border-strong); border-radius: var(--g-radius-md); background: var(--g-color-surface); box-shadow: var(--g-shadow-lg); }
|
|
3095
|
+
.g-desktop-window-list, .g-recent-documents { display: grid; gap: var(--g-space-1); }
|
|
3096
|
+
.g-desktop-window-item, .g-recent-document { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--g-space-3); min-block-size: 2.75rem; padding: var(--g-space-2) var(--g-space-3); border: 0; border-radius: var(--g-radius-md); background: transparent; color: inherit; text-align: start; }
|
|
3097
|
+
:where(.g-desktop-window-item, .g-recent-document):is(:hover, :focus-visible, [aria-selected="true"]) { background: var(--g-color-surface-subtle); }
|
|
3098
|
+
.g-recent-document-main, .g-desktop-window-main { min-inline-size: 0; }
|
|
3099
|
+
.g-recent-document-path { display: block; overflow: hidden; color: var(--g-color-text-muted); font-size: var(--g-font-size-xs); text-overflow: ellipsis; white-space: nowrap; }
|
|
3100
|
+
|
|
3101
|
+
.g-background-task-center, .g-desktop-notification-center { display: grid; gap: var(--g-space-2); inline-size: min(100%, 24rem); }
|
|
3102
|
+
.g-background-task, .g-desktop-notification { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--g-space-3); padding: var(--g-space-3); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); }
|
|
3103
|
+
.g-background-task-main, .g-desktop-notification-main { min-inline-size: 0; }
|
|
3104
|
+
.g-background-task-progress { grid-column: 2 / -1; inline-size: 100%; }
|
|
3105
|
+
.g-desktop-notification.is-unread { border-inline-start: 3px solid var(--g-color-primary); }
|
|
3106
|
+
|
|
3107
|
+
.g-sync-status { display: inline-flex; align-items: center; gap: var(--g-space-2); color: var(--g-color-text-muted); font-size: var(--g-font-size-xs); }
|
|
3108
|
+
.g-sync-status-dot { inline-size: .5rem; block-size: .5rem; border-radius: var(--g-radius-full); background: var(--g-color-success); }
|
|
3109
|
+
.g-sync-status.is-syncing .g-sync-status-dot { background: var(--g-color-info); animation: g-desktop-pulse 1.2s ease-in-out infinite; }
|
|
3110
|
+
.g-sync-status.is-error .g-sync-status-dot { background: var(--g-color-danger); }
|
|
3111
|
+
.g-update-progress { display: grid; gap: var(--g-space-3); padding: var(--g-space-4); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); }
|
|
3112
|
+
.g-update-progress-header { display: flex; justify-content: space-between; gap: var(--g-space-3); }
|
|
3113
|
+
.g-update-progress-track { block-size: .4rem; overflow: hidden; background: var(--g-color-surface-subtle); }
|
|
3114
|
+
.g-update-progress-value { inline-size: var(--g-update-progress, 0%); block-size: 100%; background: var(--g-color-primary); }
|
|
3115
|
+
|
|
3116
|
+
@keyframes g-desktop-pulse { 50% { opacity: .35; } }
|
|
3117
|
+
|
|
3118
|
+
:is([data-g-os="macos"], [data-g-platform="macos"]) .g-native-titlebar { grid-template-columns: auto minmax(0, 1fr) auto; }
|
|
3119
|
+
:is([data-g-os="macos"], [data-g-platform="macos"]) .g-desktop-window-controls { order: -1; flex-direction: row-reverse; gap: .45rem; padding-inline: .75rem; }
|
|
3120
|
+
:is([data-g-os="macos"], [data-g-platform="macos"]) .g-desktop-window-button { inline-size: .75rem; block-size: .75rem; border-radius: var(--g-radius-full); font-size: 0; }
|
|
3121
|
+
:is([data-g-os="macos"], [data-g-platform="macos"]) .g-desktop-window-button[data-g-window-action="close"] { background: #ff5f57; }
|
|
3122
|
+
:is([data-g-os="macos"], [data-g-platform="macos"]) .g-desktop-window-button[data-g-window-action="minimize"] { background: #febc2e; }
|
|
3123
|
+
:is([data-g-os="macos"], [data-g-platform="macos"]) .g-desktop-window-button[data-g-window-action="maximize"] { background: #28c840; }
|
|
3124
|
+
|
|
3125
|
+
@container g-desktop-workspace (max-width: 56rem) { .g-desktop-inspector-panel { display: none; } }
|
|
3126
|
+
@container g-desktop-workspace (max-width: 40rem) { .g-desktop-dock-panel { display: none; } .g-native-titlebar { grid-template-columns: minmax(0, 1fr) auto; } .g-native-titlebar-start { display: none; } .g-native-titlebar-title { padding-inline: var(--g-space-3); text-align: start; } }
|
|
3127
|
+
@media (prefers-reduced-motion: reduce) { .g-sync-status.is-syncing .g-sync-status-dot { animation: none; } }
|
|
3128
|
+
@media (forced-colors: active) { .g-desktop-activity-item[aria-current], .g-desktop-document-tab[aria-selected="true"], .g-desktop-command-item[aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -2px; } .g-update-progress-value, .g-sync-status-dot { background: Highlight; } }
|
|
3129
|
+
@media print { .g-native-titlebar, .g-desktop-window-controls, .g-desktop-menubar, .g-desktop-activity-bar, .g-desktop-status-bar, .g-desktop-toolbar, .g-desktop-bottom-panel, .g-desktop-command-palette, .g-desktop-context-menu, .g-tray-menu, .g-desktop-window-switcher { display: none !important; } .g-desktop-workspace { display: block; block-size: auto; overflow: visible; } .g-desktop-workspace-main, .g-desktop-dock-panel, .g-desktop-inspector-panel { display: block; inline-size: auto; overflow: visible; border: 0; } }
|
|
3130
|
+
}
|
|
3131
|
+
|
|
3132
|
+
@layer gardener.components {
|
|
3133
|
+
/* Category 16: complete pages and industry solution compositions. */
|
|
3134
|
+
:where(
|
|
3135
|
+
.g-product-landing, .g-corporate-home, .g-personal-home, .g-portfolio-page,
|
|
3136
|
+
.g-blog-index, .g-article-page, .g-docs-portal, .g-help-center-page,
|
|
3137
|
+
.g-search-results-page, .g-contact-page, .g-pricing-page, .g-dashboard-overview,
|
|
3138
|
+
.g-admin-list-page, .g-record-detail-page, .g-settings-center, .g-user-center,
|
|
3139
|
+
.g-notification-center-page, .g-onboarding-flow, .g-crm-workspace, .g-project-workspace,
|
|
3140
|
+
.g-support-center, .g-approval-center, .g-knowledge-base, .g-learning-portal,
|
|
3141
|
+
.g-event-portal, .g-booking-portal, .g-healthcare-portal, .g-finance-portal,
|
|
3142
|
+
.g-public-service-portal, .g-marketplace-page, .g-community-page, .g-status-center-page
|
|
3143
|
+
) {
|
|
3144
|
+
container: g-solution / inline-size;
|
|
3145
|
+
min-width: 0;
|
|
3146
|
+
color: var(--g-color-text);
|
|
3147
|
+
background: var(--g-color-canvas);
|
|
3148
|
+
}
|
|
3149
|
+
|
|
3150
|
+
.g-solution-container { width: min(100% - 2rem, 80rem); margin-inline: auto; }
|
|
3151
|
+
.g-solution-header { display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-4); min-width: 0; padding-block: var(--g-space-4); }
|
|
3152
|
+
.g-solution-header-main, .g-solution-item-main { min-width: 0; }
|
|
3153
|
+
.g-solution-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-2); }
|
|
3154
|
+
.g-solution-section { padding-block: clamp(2.5rem, 6vw, 6rem); }
|
|
3155
|
+
.g-solution-section-header { max-width: 46rem; margin-bottom: clamp(1.5rem, 4vw, 3rem); }
|
|
3156
|
+
.g-solution-section-title { margin: 0; font-size: clamp(1.5rem, 3vw, 2.25rem); }
|
|
3157
|
+
.g-solution-section-description { margin: var(--g-space-2) 0 0; color: var(--g-color-text-muted); }
|
|
3158
|
+
.g-solution-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--g-space-4); }
|
|
3159
|
+
.g-solution-card { min-width: 0; padding: var(--g-space-5); background: var(--g-color-surface); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); }
|
|
3160
|
+
.g-solution-card > :first-child { margin-top: 0; }
|
|
3161
|
+
.g-solution-card > :last-child { margin-bottom: 0; }
|
|
3162
|
+
.g-solution-shell { display: grid; grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr); min-height: 38rem; background: var(--g-color-surface); border: 1px solid var(--g-color-border); }
|
|
3163
|
+
.g-solution-rail { min-width: 0; padding: var(--g-space-4); background: var(--g-color-surface-subtle); border-inline-end: 1px solid var(--g-color-border); }
|
|
3164
|
+
.g-solution-main { min-width: 0; padding: clamp(1rem, 3vw, 2rem); }
|
|
3165
|
+
.g-solution-main-with-aside { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem); gap: var(--g-space-5); }
|
|
3166
|
+
.g-solution-aside { min-width: 0; align-self: start; padding: var(--g-space-4); background: var(--g-color-surface); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); }
|
|
3167
|
+
.g-solution-list { display: grid; padding: 0; margin: 0; list-style: none; }
|
|
3168
|
+
.g-solution-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--g-space-3); min-width: 0; padding: var(--g-space-3); border-bottom: 1px solid var(--g-color-border); }
|
|
3169
|
+
.g-solution-item[aria-current="page"], .g-solution-item.is-active { background: var(--g-color-primary-soft); }
|
|
3170
|
+
.g-solution-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-2) var(--g-space-4); color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); }
|
|
3171
|
+
.g-solution-stat { display: grid; gap: var(--g-space-1); }
|
|
3172
|
+
.g-solution-stat-value { font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 700; line-height: 1.1; }
|
|
3173
|
+
.g-solution-stat-label { color: var(--g-color-text-muted); font-size: var(--g-font-size-sm); }
|
|
3174
|
+
.g-solution-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--g-space-3); margin-bottom: var(--g-space-4); }
|
|
3175
|
+
.g-solution-empty { display: grid; place-items: center; min-height: 16rem; padding: var(--g-space-6); text-align: center; border: 1px dashed var(--g-color-border-strong); border-radius: var(--g-radius-md); }
|
|
3176
|
+
|
|
3177
|
+
/* Public, editorial and personal pages. */
|
|
3178
|
+
:where(.g-product-landing, .g-corporate-home, .g-personal-home, .g-portfolio-page, .g-blog-index, .g-contact-page, .g-pricing-page) {
|
|
3179
|
+
min-height: 100svh;
|
|
3180
|
+
}
|
|
3181
|
+
.g-landing-hero, .g-corporate-hero, .g-personal-intro, .g-portfolio-hero {
|
|
3182
|
+
display: grid;
|
|
3183
|
+
grid-template-columns: minmax(0, 1.1fr) minmax(18rem, .9fr);
|
|
3184
|
+
align-items: center;
|
|
3185
|
+
gap: clamp(2rem, 6vw, 6rem);
|
|
3186
|
+
min-height: min(42rem, 78svh);
|
|
3187
|
+
padding-block: clamp(3rem, 8vw, 7rem);
|
|
3188
|
+
}
|
|
3189
|
+
.g-landing-copy, .g-corporate-copy, .g-personal-copy, .g-portfolio-copy { display: grid; gap: var(--g-space-5); max-width: 44rem; }
|
|
3190
|
+
.g-landing-title, .g-corporate-title, .g-personal-title, .g-portfolio-title { margin: 0; font-size: clamp(2.25rem, 6vw, 5rem); line-height: 1.02; letter-spacing: -.035em; }
|
|
3191
|
+
.g-landing-visual, .g-corporate-visual, .g-personal-portrait, .g-portfolio-featured { min-height: 20rem; background: var(--g-color-surface-subtle); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); overflow: hidden; }
|
|
3192
|
+
.g-landing-proof, .g-corporate-trust { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-6); padding-block: var(--g-space-5); border-block: 1px solid var(--g-color-border); }
|
|
3193
|
+
.g-corporate-home .g-solution-section:nth-of-type(even), .g-product-landing .g-solution-section:nth-of-type(even) { background: var(--g-color-surface-subtle); }
|
|
3194
|
+
|
|
3195
|
+
.g-personal-home { --g-solution-measure: 68rem; }
|
|
3196
|
+
.g-personal-home .g-solution-container { width: min(100% - 2rem, var(--g-solution-measure)); }
|
|
3197
|
+
.g-personal-links { display: flex; flex-wrap: wrap; gap: var(--g-space-3); }
|
|
3198
|
+
.g-personal-timeline { display: grid; gap: var(--g-space-5); border-inline-start: 1px solid var(--g-color-border); padding-inline-start: var(--g-space-5); }
|
|
3199
|
+
.g-personal-timeline-item { position: relative; }
|
|
3200
|
+
.g-personal-timeline-item::before { content: ""; position: absolute; inset-inline-start: calc(-1 * var(--g-space-5) - .3rem); inset-block-start: .45rem; width: .55rem; aspect-ratio: 1; border-radius: 50%; background: var(--g-color-primary); }
|
|
3201
|
+
|
|
3202
|
+
.g-portfolio-grid, .g-blog-grid-page { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--g-space-5); }
|
|
3203
|
+
.g-portfolio-project, .g-blog-entry { min-width: 0; background: var(--g-color-surface); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); overflow: hidden; }
|
|
3204
|
+
.g-portfolio-project-media, .g-blog-entry-media { aspect-ratio: 16 / 10; background: var(--g-color-surface-subtle); overflow: hidden; }
|
|
3205
|
+
.g-portfolio-project-body, .g-blog-entry-body { padding: var(--g-space-5); }
|
|
3206
|
+
.g-blog-index-header { display: grid; gap: var(--g-space-4); padding-block: clamp(3rem, 8vw, 7rem); border-bottom: 1px solid var(--g-color-border); }
|
|
3207
|
+
.g-blog-categories { display: flex; flex-wrap: wrap; gap: var(--g-space-2); }
|
|
3208
|
+
|
|
3209
|
+
.g-article-page { min-height: 100svh; }
|
|
3210
|
+
.g-article-page-layout { width: min(100% - 2rem, 78rem); margin-inline: auto; display: grid; grid-template-columns: minmax(10rem, 14rem) minmax(0, 46rem) minmax(10rem, 14rem); justify-content: center; gap: clamp(1.5rem, 4vw, 4rem); padding-block: clamp(2rem, 6vw, 5rem); }
|
|
3211
|
+
.g-article-page-body { min-width: 0; }
|
|
3212
|
+
.g-article-page-body > * + * { margin-top: 1.25em; }
|
|
3213
|
+
.g-article-page-toc, .g-article-page-meta { position: sticky; top: var(--g-space-5); align-self: start; }
|
|
3214
|
+
|
|
3215
|
+
.g-docs-portal, .g-help-center-page, .g-knowledge-base { min-height: 100svh; }
|
|
3216
|
+
.g-docs-layout, .g-help-center-layout, .g-knowledge-layout { display: grid; grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr) minmax(11rem, 15rem); min-height: 100svh; }
|
|
3217
|
+
.g-docs-sidebar, .g-help-center-sidebar, .g-knowledge-sidebar { padding: var(--g-space-4); border-inline-end: 1px solid var(--g-color-border); background: var(--g-color-surface); }
|
|
3218
|
+
.g-docs-main, .g-help-center-main, .g-knowledge-main { min-width: 0; padding: clamp(1.25rem, 4vw, 3rem); }
|
|
3219
|
+
.g-docs-toc, .g-help-center-aside, .g-knowledge-aside { padding: var(--g-space-4); border-inline-start: 1px solid var(--g-color-border); background: var(--g-color-surface-subtle); }
|
|
3220
|
+
.g-help-center-hero, .g-knowledge-hero { padding: clamp(2.5rem, 7vw, 6rem); text-align: center; background: var(--g-color-surface-subtle); border-bottom: 1px solid var(--g-color-border); }
|
|
3221
|
+
.g-help-center-search, .g-knowledge-search { width: min(100%, 42rem); margin: var(--g-space-5) auto 0; }
|
|
3222
|
+
|
|
3223
|
+
.g-search-results-page { min-height: 100svh; }
|
|
3224
|
+
.g-search-results-layout { display: grid; grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); gap: var(--g-space-6); padding-block: var(--g-space-6); }
|
|
3225
|
+
.g-search-filters { align-self: start; padding: var(--g-space-4); background: var(--g-color-surface); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); }
|
|
3226
|
+
.g-search-results-list { display: grid; gap: var(--g-space-3); }
|
|
3227
|
+
.g-search-result { padding: var(--g-space-5); background: var(--g-color-surface); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); }
|
|
3228
|
+
|
|
3229
|
+
.g-contact-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(20rem, 1.15fr); gap: clamp(2rem, 6vw, 6rem); padding-block: clamp(3rem, 8vw, 7rem); }
|
|
3230
|
+
.g-contact-details { display: grid; align-content: start; gap: var(--g-space-5); }
|
|
3231
|
+
.g-contact-form { padding: clamp(1.25rem, 4vw, 2rem); background: var(--g-color-surface); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); }
|
|
3232
|
+
.g-pricing-page-header { max-width: 50rem; margin-inline: auto; padding-block: clamp(3rem, 8vw, 7rem); text-align: center; }
|
|
3233
|
+
.g-pricing-page-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); align-items: stretch; gap: var(--g-space-4); }
|
|
3234
|
+
.g-pricing-page-card { display: grid; align-content: start; gap: var(--g-space-4); padding: var(--g-space-6); background: var(--g-color-surface); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); }
|
|
3235
|
+
.g-pricing-page-card.is-featured { border-color: var(--g-color-primary); box-shadow: 0 0 0 1px var(--g-color-primary); }
|
|
3236
|
+
|
|
3237
|
+
/* Product administration and account pages. */
|
|
3238
|
+
.g-dashboard-overview, .g-admin-list-page, .g-record-detail-page, .g-settings-center,
|
|
3239
|
+
.g-user-center, .g-notification-center-page, .g-crm-workspace, .g-project-workspace,
|
|
3240
|
+
.g-support-center, .g-approval-center, .g-healthcare-portal, .g-finance-portal,
|
|
3241
|
+
.g-public-service-portal {
|
|
3242
|
+
min-height: 100%;
|
|
3243
|
+
padding: clamp(1rem, 3vw, 2rem);
|
|
3244
|
+
}
|
|
3245
|
+
.g-dashboard-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--g-space-4); }
|
|
3246
|
+
.g-dashboard-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); gap: var(--g-space-4); margin-top: var(--g-space-4); }
|
|
3247
|
+
.g-dashboard-panel { min-width: 0; padding: var(--g-space-5); background: var(--g-color-surface); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); }
|
|
3248
|
+
|
|
3249
|
+
.g-dashboard-overview-header, .g-admin-list-header, .g-record-detail-header, .g-settings-center-header, .g-user-center-header,
|
|
3250
|
+
.g-notification-center-header, .g-crm-header, .g-project-header, .g-support-header,
|
|
3251
|
+
.g-approval-header, .g-industry-portal-header {
|
|
3252
|
+
display: flex; align-items: center; justify-content: space-between; gap: var(--g-space-4); margin-bottom: var(--g-space-5);
|
|
3253
|
+
}
|
|
3254
|
+
.g-admin-list-content { min-width: 0; background: var(--g-color-surface); border: 1px solid var(--g-color-border); }
|
|
3255
|
+
.g-admin-list-filters { padding: var(--g-space-4); border-bottom: 1px solid var(--g-color-border); }
|
|
3256
|
+
.g-record-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 21rem); gap: var(--g-space-5); }
|
|
3257
|
+
.g-record-detail-main, .g-record-detail-aside { display: grid; align-content: start; gap: var(--g-space-4); }
|
|
3258
|
+
.g-record-detail-section { padding: var(--g-space-5); background: var(--g-color-surface); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); }
|
|
3259
|
+
|
|
3260
|
+
.g-settings-center-layout, .g-user-center-layout { display: grid; grid-template-columns: minmax(12rem, 16rem) minmax(0, 52rem); gap: var(--g-space-6); }
|
|
3261
|
+
.g-settings-center-nav, .g-user-center-nav { align-self: start; position: sticky; top: var(--g-space-4); }
|
|
3262
|
+
.g-settings-center-content, .g-user-center-content { min-width: 0; }
|
|
3263
|
+
.g-settings-center-section, .g-user-center-section { padding-block: var(--g-space-5); border-bottom: 1px solid var(--g-color-border); }
|
|
3264
|
+
.g-notification-groups { display: grid; gap: var(--g-space-5); }
|
|
3265
|
+
.g-notification-group { background: var(--g-color-surface); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); overflow: hidden; }
|
|
3266
|
+
.g-notification-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--g-space-3); padding: var(--g-space-4); border-bottom: 1px solid var(--g-color-border); }
|
|
3267
|
+
.g-notification-row:last-child { border-bottom: 0; }
|
|
3268
|
+
|
|
3269
|
+
.g-onboarding-flow { min-height: 100svh; display: grid; grid-template-columns: minmax(15rem, .75fr) minmax(0, 1.25fr); }
|
|
3270
|
+
.g-onboarding-aside { display: grid; align-content: space-between; gap: var(--g-space-6); padding: clamp(1.5rem, 5vw, 4rem); background: var(--g-color-surface-subtle); border-inline-end: 1px solid var(--g-color-border); }
|
|
3271
|
+
.g-onboarding-main { display: grid; place-items: center; padding: clamp(1rem, 5vw, 4rem); }
|
|
3272
|
+
.g-onboarding-step { width: min(100%, 38rem); }
|
|
3273
|
+
.g-onboarding-progress { display: grid; gap: var(--g-space-3); }
|
|
3274
|
+
.g-onboarding-progress-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--g-space-3); color: var(--g-color-text-muted); }
|
|
3275
|
+
.g-onboarding-progress-item[aria-current="step"], .g-onboarding-progress-item.is-complete { color: var(--g-color-primary-text); }
|
|
3276
|
+
|
|
3277
|
+
/* Operational workspaces. */
|
|
3278
|
+
.g-crm-layout, .g-project-layout, .g-support-layout, .g-approval-layout {
|
|
3279
|
+
display: grid; grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr) minmax(15rem, 20rem); min-height: 38rem; background: var(--g-color-surface); border: 1px solid var(--g-color-border);
|
|
3280
|
+
}
|
|
3281
|
+
.g-crm-nav, .g-project-nav, .g-support-nav, .g-approval-nav { padding: var(--g-space-4); border-inline-end: 1px solid var(--g-color-border); background: var(--g-color-surface-subtle); }
|
|
3282
|
+
.g-crm-main, .g-project-main, .g-support-main, .g-approval-main { min-width: 0; padding: var(--g-space-5); }
|
|
3283
|
+
.g-crm-inspector, .g-project-inspector, .g-support-inspector, .g-approval-inspector { min-width: 0; padding: var(--g-space-4); border-inline-start: 1px solid var(--g-color-border); }
|
|
3284
|
+
.g-crm-pipeline, .g-project-board, .g-approval-queue { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--g-space-3); overflow-x: auto; }
|
|
3285
|
+
.g-crm-stage, .g-project-column, .g-approval-column { min-width: 13rem; padding: var(--g-space-3); background: var(--g-color-surface-subtle); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); }
|
|
3286
|
+
.g-support-thread { display: grid; min-height: 28rem; grid-template-rows: minmax(0, 1fr) auto; }
|
|
3287
|
+
.g-support-messages { min-height: 0; overflow: auto; }
|
|
3288
|
+
.g-support-reply { padding-top: var(--g-space-4); border-top: 1px solid var(--g-color-border); }
|
|
3289
|
+
|
|
3290
|
+
/* Education, events, bookings and vertical portals. */
|
|
3291
|
+
.g-learning-portal, .g-event-portal, .g-booking-portal, .g-marketplace-page, .g-community-page { min-height: 100svh; }
|
|
3292
|
+
.g-learning-layout { display: grid; grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr); min-height: 38rem; }
|
|
3293
|
+
.g-learning-sidebar { padding: var(--g-space-4); border-inline-end: 1px solid var(--g-color-border); background: var(--g-color-surface-subtle); }
|
|
3294
|
+
.g-learning-main { min-width: 0; padding: clamp(1rem, 4vw, 3rem); }
|
|
3295
|
+
.g-course-grid, .g-event-grid, .g-marketplace-grid, .g-community-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--g-space-4); }
|
|
3296
|
+
.g-course-card, .g-event-card, .g-marketplace-card, .g-community-card { min-width: 0; background: var(--g-color-surface); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); overflow: hidden; }
|
|
3297
|
+
.g-course-card-body, .g-event-card-body, .g-marketplace-card-body, .g-community-card-body { padding: var(--g-space-4); }
|
|
3298
|
+
.g-event-hero, .g-marketplace-hero, .g-community-hero { padding: clamp(3rem, 8vw, 7rem) var(--g-space-page-x); background: var(--g-color-surface-subtle); border-bottom: 1px solid var(--g-color-border); }
|
|
3299
|
+
.g-booking-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem); gap: var(--g-space-6); padding-block: clamp(2rem, 6vw, 5rem); }
|
|
3300
|
+
.g-booking-results { display: grid; gap: var(--g-space-4); }
|
|
3301
|
+
.g-booking-summary { position: sticky; top: var(--g-space-4); align-self: start; padding: var(--g-space-5); background: var(--g-color-surface); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); }
|
|
3302
|
+
|
|
3303
|
+
.g-healthcare-layout, .g-finance-layout, .g-public-service-layout { display: grid; grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); min-height: 40rem; }
|
|
3304
|
+
.g-industry-portal-nav { padding: var(--g-space-4); border-inline-end: 1px solid var(--g-color-border); background: var(--g-color-surface-subtle); }
|
|
3305
|
+
.g-industry-portal-main { min-width: 0; padding: clamp(1rem, 4vw, 3rem); }
|
|
3306
|
+
.g-healthcare-summary, .g-finance-summary, .g-public-service-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--g-space-4); }
|
|
3307
|
+
.g-healthcare-record, .g-finance-account, .g-public-service-item { padding: var(--g-space-4); background: var(--g-color-surface); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); }
|
|
3308
|
+
.g-industry-alert { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--g-space-3); padding: var(--g-space-4); border: 1px solid var(--g-color-warning); border-radius: var(--g-radius-md); background: var(--g-color-warning-soft); }
|
|
3309
|
+
|
|
3310
|
+
.g-marketplace-layout, .g-community-layout { width: min(100% - 2rem, 80rem); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem); gap: var(--g-space-6); padding-block: var(--g-space-6); }
|
|
3311
|
+
.g-marketplace-filters, .g-community-sidebar { align-self: start; padding: var(--g-space-4); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); background: var(--g-color-surface); }
|
|
3312
|
+
.g-community-feed { display: grid; gap: var(--g-space-4); }
|
|
3313
|
+
.g-community-post { padding: var(--g-space-5); background: var(--g-color-surface); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); }
|
|
3314
|
+
|
|
3315
|
+
.g-status-center-page { min-height: 100svh; }
|
|
3316
|
+
.g-status-center-header { padding-block: clamp(2.5rem, 7vw, 5rem); text-align: center; }
|
|
3317
|
+
.g-status-overall { display: inline-flex; align-items: center; gap: var(--g-space-2); padding: var(--g-space-2) var(--g-space-4); color: var(--g-color-success); background: var(--g-color-success-soft); border: 1px solid currentColor; border-radius: var(--g-radius-md); }
|
|
3318
|
+
.g-status-services { display: grid; margin-block: var(--g-space-5); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); overflow: hidden; }
|
|
3319
|
+
.g-status-service { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--g-space-4); padding: var(--g-space-4); background: var(--g-color-surface); border-bottom: 1px solid var(--g-color-border); }
|
|
3320
|
+
.g-status-service:last-child { border-bottom: 0; }
|
|
3321
|
+
.g-status-history { display: grid; gap: var(--g-space-4); }
|
|
3322
|
+
.g-status-incident { padding: var(--g-space-5); background: var(--g-color-surface); border: 1px solid var(--g-color-border); border-radius: var(--g-radius-md); }
|
|
3323
|
+
|
|
3324
|
+
@container g-solution (max-width: 60rem) {
|
|
3325
|
+
.g-article-page-layout { grid-template-columns: minmax(0, 1fr) minmax(10rem, 14rem); }
|
|
3326
|
+
.g-article-page-toc { display: none; }
|
|
3327
|
+
.g-docs-layout, .g-help-center-layout, .g-knowledge-layout, .g-crm-layout, .g-project-layout, .g-support-layout, .g-approval-layout { grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); }
|
|
3328
|
+
.g-docs-toc, .g-help-center-aside, .g-knowledge-aside, .g-crm-inspector, .g-project-inspector, .g-support-inspector, .g-approval-inspector { display: none; }
|
|
3329
|
+
.g-dashboard-layout, .g-solution-main-with-aside { grid-template-columns: minmax(0, 1fr); }
|
|
3330
|
+
}
|
|
3331
|
+
|
|
3332
|
+
@container g-solution (max-width: 44rem) {
|
|
3333
|
+
.g-landing-hero, .g-corporate-hero, .g-personal-intro, .g-portfolio-hero, .g-contact-layout,
|
|
3334
|
+
.g-search-results-layout, .g-record-detail-layout, .g-settings-center-layout, .g-user-center-layout,
|
|
3335
|
+
.g-onboarding-flow, .g-learning-layout, .g-booking-layout, .g-healthcare-layout, .g-finance-layout,
|
|
3336
|
+
.g-public-service-layout, .g-marketplace-layout, .g-community-layout, .g-solution-shell,
|
|
3337
|
+
.g-docs-layout, .g-help-center-layout, .g-knowledge-layout, .g-crm-layout, .g-project-layout,
|
|
3338
|
+
.g-support-layout, .g-approval-layout { grid-template-columns: minmax(0, 1fr); }
|
|
3339
|
+
.g-solution-rail, .g-docs-sidebar, .g-help-center-sidebar, .g-knowledge-sidebar, .g-crm-nav,
|
|
3340
|
+
.g-project-nav, .g-support-nav, .g-approval-nav, .g-learning-sidebar, .g-industry-portal-nav,
|
|
3341
|
+
.g-onboarding-aside { display: none; }
|
|
3342
|
+
.g-article-page-layout { grid-template-columns: minmax(0, 1fr); }
|
|
3343
|
+
.g-article-page-meta { position: static; order: -1; }
|
|
3344
|
+
.g-booking-summary { position: static; }
|
|
3345
|
+
}
|
|
3346
|
+
|
|
3347
|
+
@media (max-width: 43.999rem) {
|
|
3348
|
+
.g-landing-hero, .g-corporate-hero, .g-personal-intro, .g-portfolio-hero, .g-contact-layout,
|
|
3349
|
+
.g-search-results-layout, .g-record-detail-layout, .g-settings-center-layout, .g-user-center-layout,
|
|
3350
|
+
.g-onboarding-flow, .g-learning-layout, .g-booking-layout, .g-healthcare-layout, .g-finance-layout,
|
|
3351
|
+
.g-public-service-layout, .g-marketplace-layout, .g-community-layout { grid-template-columns: minmax(0, 1fr); }
|
|
3352
|
+
.g-settings-center-nav, .g-user-center-nav, .g-article-page-toc { display: none; }
|
|
3353
|
+
.g-solution-header, .g-dashboard-overview-header, .g-admin-list-header, .g-record-detail-header, .g-settings-center-header,
|
|
3354
|
+
.g-user-center-header, .g-notification-center-header, .g-crm-header, .g-project-header,
|
|
3355
|
+
.g-support-header, .g-approval-header, .g-industry-portal-header { align-items: flex-start; flex-direction: column; }
|
|
3356
|
+
}
|
|
3357
|
+
|
|
3358
|
+
@media (prefers-reduced-motion: reduce) {
|
|
3359
|
+
:where(.g-solution-card, .g-portfolio-project, .g-blog-entry, .g-course-card, .g-event-card, .g-marketplace-card, .g-community-card) { scroll-behavior: auto; }
|
|
3360
|
+
}
|
|
3361
|
+
|
|
3362
|
+
@media (forced-colors: active) {
|
|
3363
|
+
.g-solution-card, .g-dashboard-panel, .g-record-detail-section, .g-pricing-page-card,
|
|
3364
|
+
.g-course-card, .g-event-card, .g-marketplace-card, .g-community-card, .g-status-incident { forced-color-adjust: auto; border-color: CanvasText; }
|
|
3365
|
+
.g-solution-item[aria-current="page"], .g-solution-item.is-active { outline: 2px solid Highlight; }
|
|
3366
|
+
}
|
|
3367
|
+
|
|
3368
|
+
@media print {
|
|
3369
|
+
:where(
|
|
3370
|
+
.g-product-landing, .g-corporate-home, .g-personal-home, .g-portfolio-page,
|
|
3371
|
+
.g-blog-index, .g-article-page, .g-docs-portal, .g-help-center-page,
|
|
3372
|
+
.g-search-results-page, .g-contact-page, .g-pricing-page, .g-dashboard-overview,
|
|
3373
|
+
.g-admin-list-page, .g-record-detail-page, .g-settings-center, .g-user-center,
|
|
3374
|
+
.g-notification-center-page, .g-onboarding-flow, .g-crm-workspace, .g-project-workspace,
|
|
3375
|
+
.g-support-center, .g-approval-center, .g-knowledge-base, .g-learning-portal,
|
|
3376
|
+
.g-event-portal, .g-booking-portal, .g-healthcare-portal, .g-finance-portal,
|
|
3377
|
+
.g-public-service-portal, .g-marketplace-page, .g-community-page, .g-status-center-page
|
|
3378
|
+
) { display: block; min-height: auto; padding: 0; background: white; color: black; }
|
|
3379
|
+
.g-solution-rail, .g-solution-actions, .g-docs-sidebar, .g-docs-toc, .g-help-center-sidebar,
|
|
3380
|
+
.g-help-center-aside, .g-knowledge-sidebar, .g-knowledge-aside, .g-search-filters,
|
|
3381
|
+
.g-settings-center-nav, .g-user-center-nav, .g-onboarding-aside, .g-crm-nav, .g-project-nav,
|
|
3382
|
+
.g-support-nav, .g-approval-nav, .g-crm-inspector, .g-project-inspector, .g-support-inspector,
|
|
3383
|
+
.g-approval-inspector, .g-learning-sidebar, .g-industry-portal-nav, .g-marketplace-filters,
|
|
3384
|
+
.g-community-sidebar { display: none !important; }
|
|
3385
|
+
.g-solution-card, .g-dashboard-panel, .g-record-detail-section, .g-status-incident { break-inside: avoid; box-shadow: none; }
|
|
3386
|
+
}
|
|
3387
|
+
}
|
|
3388
|
+
|
|
3389
|
+
@layer gardener.components {
|
|
3390
|
+
/* High-frequency application recipes kept ready for direct AI composition. */
|
|
3391
|
+
.g-onboarding { width: min(100%, 48rem); margin-inline: auto; display: grid; gap: var(--g-space-6); }
|
|
3392
|
+
.g-onboarding-progress { display: grid; grid-template-columns: repeat(var(--g-onboarding-steps, 4), 1fr); gap: var(--g-space-2); }
|
|
3393
|
+
.g-onboarding-progress > * { height: .25rem; background: var(--g-color-border); }
|
|
3394
|
+
.g-onboarding-progress > .is-complete, .g-onboarding-progress > [aria-current="step"] { background: var(--g-color-primary); }
|
|
3395
|
+
.g-wizard-layout { display: grid; grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); }
|
|
3396
|
+
.g-wizard-nav { display: grid; align-content: start; gap: var(--g-space-1); }
|
|
3397
|
+
.g-wizard-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--g-space-3); padding: var(--g-space-3); color: var(--g-color-text-muted); border-inline-start: 2px solid var(--g-color-border); }
|
|
3398
|
+
.g-wizard-step[aria-current="step"] { color: var(--g-color-primary-text); border-inline-start-color: var(--g-color-primary); background: var(--g-color-primary-soft); }
|
|
3399
|
+
|
|
3400
|
+
.g-notification-center { width: min(100%, 30rem); display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; background: var(--g-color-surface); border: 1px solid var(--g-color-border); }
|
|
3401
|
+
.g-notification-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--g-space-3); padding: var(--g-space-4); border-bottom: 1px solid var(--g-color-border); }
|
|
3402
|
+
.g-notification-item.is-unread { background: color-mix(in srgb, var(--g-color-primary-soft) 55%, var(--g-color-surface)); }
|
|
3403
|
+
.g-notification-time { color: var(--g-color-text-muted); font-size: var(--g-font-size-xs); white-space: nowrap; }
|
|
3404
|
+
|
|
3405
|
+
.g-inbox { min-height: 34rem; display: grid; grid-template-columns: minmax(13rem, 17rem) minmax(18rem, .75fr) minmax(24rem, 1.25fr); overflow: hidden; border: 1px solid var(--g-color-border); background: var(--g-color-surface); }
|
|
3406
|
+
.g-inbox-folders, .g-inbox-list, .g-inbox-reader { min-width: 0; overflow: auto; }
|
|
3407
|
+
.g-inbox-folders, .g-inbox-list { border-inline-end: 1px solid var(--g-color-border); }
|
|
3408
|
+
.g-inbox-item { display: grid; gap: var(--g-space-1); padding: var(--g-space-3); border-bottom: 1px solid var(--g-color-border); }
|
|
3409
|
+
.g-inbox-item.is-unread { font-weight: 600; }
|
|
3410
|
+
.g-inbox-item[aria-current="true"] { background: var(--g-color-primary-soft); }
|
|
3411
|
+
|
|
3412
|
+
.g-search-page { display: grid; grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); }
|
|
3413
|
+
.g-search-facets { align-self: start; display: grid; gap: var(--g-space-5); }
|
|
3414
|
+
.g-search-results { min-width: 0; display: grid; align-content: start; gap: var(--g-space-4); }
|
|
3415
|
+
.g-search-result { display: grid; gap: var(--g-space-2); padding-bottom: var(--g-space-4); border-bottom: 1px solid var(--g-color-border); }
|
|
3416
|
+
.g-search-highlight { padding-inline: .12em; background: var(--g-color-warning-soft); color: var(--g-color-text); }
|
|
3417
|
+
|
|
3418
|
+
.g-calendar { min-width: 42rem; display: grid; grid-template-columns: 4rem repeat(7, minmax(6rem, 1fr)); border-top: 1px solid var(--g-color-border); border-inline-start: 1px solid var(--g-color-border); background: var(--g-color-surface); }
|
|
3419
|
+
.g-calendar > * { min-width: 0; min-height: var(--g-calendar-cell-height, 6rem); padding: var(--g-space-2); border-inline-end: 1px solid var(--g-color-border); border-bottom: 1px solid var(--g-color-border); }
|
|
3420
|
+
.g-calendar-heading { min-height: auto; text-align: center; color: var(--g-color-text-muted); font-size: var(--g-font-size-xs); font-weight: 600; }
|
|
3421
|
+
.g-calendar-event { min-height: auto; margin-bottom: 2px; padding: .2rem .35rem; overflow: hidden; color: var(--g-color-primary-text); background: var(--g-color-primary-soft); border-inline-start: 2px solid var(--g-color-primary); font-size: var(--g-font-size-xs); text-overflow: ellipsis; white-space: nowrap; }
|
|
3422
|
+
.g-agenda { display: grid; gap: var(--g-space-2); }
|
|
3423
|
+
.g-agenda-item { display: grid; grid-template-columns: 5rem auto minmax(0, 1fr) auto; align-items: start; gap: var(--g-space-3); padding-block: var(--g-space-3); border-bottom: 1px solid var(--g-color-border); }
|
|
3424
|
+
|
|
3425
|
+
.g-file-manager { min-height: 32rem; display: grid; grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr); overflow: hidden; border: 1px solid var(--g-color-border); background: var(--g-color-surface); }
|
|
3426
|
+
.g-file-manager-sidebar { overflow: auto; border-inline-end: 1px solid var(--g-color-border); }
|
|
3427
|
+
.g-file-manager-main { min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }
|
|
3428
|
+
.g-file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); align-content: start; gap: var(--g-space-3); padding: var(--g-space-4); overflow: auto; }
|
|
3429
|
+
.g-file-card { min-width: 0; display: grid; justify-items: center; gap: var(--g-space-2); padding: var(--g-space-4); text-align: center; border: 1px solid var(--g-color-border); background: var(--g-color-surface); }
|
|
3430
|
+
.g-file-card[aria-selected="true"] { border-color: var(--g-color-primary); background: var(--g-color-primary-soft); }
|
|
3431
|
+
.g-upload-queue { display: grid; gap: var(--g-space-2); }
|
|
3432
|
+
.g-upload-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--g-space-3); padding: var(--g-space-3); border: 1px solid var(--g-color-border); }
|
|
3433
|
+
|
|
3434
|
+
.g-form-builder { min-height: 32rem; display: grid; grid-template-columns: minmax(12rem, 16rem) minmax(20rem, 1fr) minmax(14rem, 18rem); overflow: hidden; border: 1px solid var(--g-color-border); }
|
|
3435
|
+
.g-form-builder-palette, .g-form-builder-inspector { overflow: auto; padding: var(--g-space-3); background: var(--g-color-surface); }
|
|
3436
|
+
.g-form-builder-palette { border-inline-end: 1px solid var(--g-color-border); }
|
|
3437
|
+
.g-form-builder-inspector { border-inline-start: 1px solid var(--g-color-border); }
|
|
3438
|
+
.g-form-builder-canvas { padding: clamp(1rem, 4vw, 3rem); overflow: auto; background: var(--g-color-surface-sunken); }
|
|
3439
|
+
.g-form-builder-field { position: relative; padding: var(--g-space-4); border: 1px solid transparent; background: var(--g-color-surface); }
|
|
3440
|
+
.g-form-builder-field:hover, .g-form-builder-field[aria-selected="true"] { border-color: var(--g-color-primary); }
|
|
3441
|
+
.g-filter-builder { display: grid; gap: var(--g-space-2); }
|
|
3442
|
+
.g-filter-rule { display: grid; grid-template-columns: minmax(8rem, .8fr) minmax(7rem, .6fr) minmax(10rem, 1fr) auto; gap: var(--g-space-2); padding: var(--g-space-2); border-inline-start: 2px solid var(--g-color-border); }
|
|
3443
|
+
.g-filter-group { display: grid; gap: var(--g-space-2); padding: var(--g-space-3); border: 1px solid var(--g-color-border); background: var(--g-color-surface-subtle); }
|
|
3444
|
+
|
|
3445
|
+
.g-pivot { max-width: 100%; overflow: auto; border: 1px solid var(--g-color-border); }
|
|
3446
|
+
.g-pivot table { min-width: 44rem; border-collapse: separate; border-spacing: 0; }
|
|
3447
|
+
.g-pivot th, .g-pivot td { padding: var(--g-space-2) var(--g-space-3); text-align: end; border-inline-end: 1px solid var(--g-color-border); border-bottom: 1px solid var(--g-color-border); }
|
|
3448
|
+
.g-pivot th { background: var(--g-color-surface-subtle); }
|
|
3449
|
+
.g-pivot th:first-child, .g-pivot td:first-child { position: sticky; inset-inline-start: 0; text-align: start; background: var(--g-color-surface); }
|
|
3450
|
+
|
|
3451
|
+
.g-org-chart { display: flex; justify-content: center; min-width: max-content; padding: var(--g-space-8); }
|
|
3452
|
+
.g-org-node { min-width: 11rem; padding: var(--g-space-3); text-align: center; border: 1px solid var(--g-color-border); background: var(--g-color-surface); box-shadow: var(--g-shadow-xs); }
|
|
3453
|
+
.g-map-shell { position: relative; min-height: var(--g-map-height, 30rem); overflow: hidden; background: var(--g-color-surface-sunken); border: 1px solid var(--g-color-border); }
|
|
3454
|
+
.g-map-tools { position: absolute; z-index: 1; inset-block-start: var(--g-space-3); inset-inline-start: var(--g-space-3); display: grid; gap: var(--g-space-2); }
|
|
3455
|
+
.g-map-panel { position: absolute; z-index: 1; inset-block: var(--g-space-3); inset-inline-end: var(--g-space-3); width: min(22rem, calc(100% - 2rem)); overflow: auto; background: var(--g-color-surface); border: 1px solid var(--g-color-border); box-shadow: var(--g-shadow-md); }
|
|
3456
|
+
|
|
3457
|
+
.g-comment-thread { display: grid; gap: var(--g-space-5); }
|
|
3458
|
+
.g-comment { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--g-space-3); }
|
|
3459
|
+
.g-comment-body { min-width: 0; }
|
|
3460
|
+
.g-comment-replies { display: grid; gap: var(--g-space-4); margin-block-start: var(--g-space-4); padding-inline-start: var(--g-space-5); border-inline-start: 2px solid var(--g-color-border); }
|
|
3461
|
+
.g-activity-feed { display: grid; gap: var(--g-space-1); }
|
|
3462
|
+
.g-activity-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--g-space-3); padding-block: var(--g-space-3); }
|
|
3463
|
+
|
|
3464
|
+
.g-report { width: min(100%, 70rem); margin-inline: auto; background: var(--g-color-surface); }
|
|
3465
|
+
.g-report-header { display: flex; align-items: start; justify-content: space-between; gap: var(--g-space-6); margin-bottom: var(--g-space-8); }
|
|
3466
|
+
.g-invoice-lines { width: 100%; }
|
|
3467
|
+
.g-invoice-total { width: min(100%, 24rem); margin-inline-start: auto; display: grid; grid-template-columns: 1fr auto; gap: var(--g-space-2) var(--g-space-6); }
|
|
3468
|
+
.g-signature-line { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--g-space-8); margin-top: var(--g-space-12); }
|
|
3469
|
+
|
|
3470
|
+
.g-cookie-banner { position: fixed; z-index: var(--g-z-toast); inset-inline: var(--g-space-4); inset-block-end: calc(var(--g-space-4) + env(safe-area-inset-bottom)); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--g-space-4); width: min(calc(100% - 2rem), 64rem); margin-inline: auto; padding: var(--g-space-4); background: var(--g-color-surface-raised); border: 1px solid var(--g-color-border); box-shadow: var(--g-shadow-lg); }
|
|
3471
|
+
.g-consent-preferences { display: grid; gap: var(--g-space-3); }
|
|
3472
|
+
.g-consent-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--g-space-4); padding-block: var(--g-space-3); border-bottom: 1px solid var(--g-color-border); }
|
|
3473
|
+
|
|
3474
|
+
@media (max-width: 63.999rem) {
|
|
3475
|
+
.g-inbox { grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr); }
|
|
3476
|
+
.g-inbox-reader { display: none; }
|
|
3477
|
+
.g-form-builder { grid-template-columns: minmax(11rem, 14rem) minmax(0, 1fr); }
|
|
3478
|
+
.g-form-builder-inspector { display: none; }
|
|
3479
|
+
}
|
|
3480
|
+
@media (max-width: 47.999rem) {
|
|
3481
|
+
.g-wizard-layout, .g-search-page { grid-template-columns: 1fr; }
|
|
3482
|
+
.g-wizard-nav { grid-auto-flow: column; overflow-x: auto; }
|
|
3483
|
+
.g-wizard-step { min-width: 9rem; }
|
|
3484
|
+
.g-search-facets { display: none; }
|
|
3485
|
+
.g-inbox, .g-file-manager, .g-form-builder { grid-template-columns: minmax(0, 1fr); }
|
|
3486
|
+
.g-inbox-folders, .g-file-manager-sidebar, .g-form-builder-palette { display: none; }
|
|
3487
|
+
.g-filter-rule { grid-template-columns: 1fr; }
|
|
3488
|
+
.g-agenda-item { grid-template-columns: 4rem minmax(0, 1fr); }
|
|
3489
|
+
.g-cookie-banner { grid-template-columns: 1fr; }
|
|
3490
|
+
}
|
|
3491
|
+
@media print {
|
|
3492
|
+
.g-report { width: 100%; }
|
|
3493
|
+
.g-report .g-btn, .g-cookie-banner { display: none !important; }
|
|
3494
|
+
.g-report, .g-report * { box-shadow: none !important; }
|
|
3495
|
+
}
|
|
3496
|
+
}
|