sky-ui-kit 0.1.9 → 0.1.10
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/README.md +6 -0
- package/components.json +1 -1
- package/dist/html/button.css +12 -0
- package/dist/html/input.css +39 -0
- package/dist/html/number.css +8 -0
- package/dist/html/number.js +31 -0
- package/dist/html/panel.css +12 -0
- package/dist/html/theme.css +218 -0
- package/dist/model-workspace.css +252 -15
- package/dist/style.css +254 -17
- package/docs/AI-CHANGELOG.md +36 -0
- package/docs/AI-GUIDE.md +8 -0
- package/docs/CSS-THEME.md +28 -0
- package/docs/HTML-FORM-CATALOG.md +225 -0
- package/docs/HTML-INTEGRATION.md +69 -0
- package/docs/INTEGRATION.md +8 -0
- package/docs/ON-DEMAND.md +8 -0
- package/examples/html/index.html +41 -0
- package/llms-full.txt +426 -1
- package/llms.txt +5 -1
- package/package.json +102 -93
package/dist/model-workspace.css
CHANGED
|
@@ -1,3 +1,182 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
/* 库默认主题放在低优先级层，项目未分层的变量声明始终优先。 */
|
|
4
|
+
@layer userssite-defaults {
|
|
5
|
+
|
|
6
|
+
:where(.userssite-theme, .sky-html, .sky-model-workspace[data-native-controls]) {
|
|
7
|
+
--userssite-color-bg: var(--color-bg, #ffffff);
|
|
8
|
+
--userssite-color-text: var(--color-text, #1f2937);
|
|
9
|
+
--userssite-color-primary: var(--color-primary, #1677ff);
|
|
10
|
+
--userssite-color-on-primary: var(--color-on-primary, #ffffff);
|
|
11
|
+
--userssite-color-border: var(--color-border, #dbe3ef99);
|
|
12
|
+
--userssite-color-hover: var(--color-hover, color-mix(in oklab, var(--userssite-color-primary) 9%, transparent));
|
|
13
|
+
--userssite-color-surface: var(--color-surface, #ffffffd9);
|
|
14
|
+
--userssite-color-surface-strong: var(--color-surface-strong, color-mix(in oklab, var(--userssite-color-surface) 72%, var(--userssite-color-bg)));
|
|
15
|
+
--userssite-color-panel: var(--color-panel, #ffffff);
|
|
16
|
+
--userssite-shadow-color: var(--shadow-color, color-mix(in oklab, var(--userssite-color-text) 10%, transparent));
|
|
17
|
+
--userssite-color-white: var(--color-white, #ffffff);
|
|
18
|
+
--userssite-color-danger: var(--color-danger, #e5484d);
|
|
19
|
+
--userssite-map-empty-bg: var(--map-empty-bg, #d7e2ea);
|
|
20
|
+
--userssite-timeline-observed: var(--timeline-observed, #b8e7ff);
|
|
21
|
+
--userssite-timeline-observed-strong: var(--timeline-observed-strong, #4aa3df);
|
|
22
|
+
--userssite-timeline-forecast: var(--timeline-forecast, #60a5fa);
|
|
23
|
+
--userssite-timeline-forecast-strong: var(--timeline-forecast-strong, #2f8bd6);
|
|
24
|
+
--userssite-timeline-forecast-text: var(--timeline-forecast-text, #2563a7);
|
|
25
|
+
--userssite-color-muted: var(--color-muted, color-mix(in oklab, var(--userssite-color-text) 62%, transparent));
|
|
26
|
+
--userssite-color-subtle: var(--color-subtle, color-mix(in oklab, var(--userssite-color-text) 48%, transparent));
|
|
27
|
+
--userssite-color-soft-border: var(--color-soft-border, color-mix(in oklab, var(--userssite-color-border) 78%, transparent));
|
|
28
|
+
--userssite-color-inset-highlight: var(--color-inset-highlight, color-mix(in oklab, var(--userssite-color-white) 64%, transparent));
|
|
29
|
+
--userssite-surface-glass: var(--surface-glass, color-mix(in oklab, var(--userssite-color-bg) 86%, transparent));
|
|
30
|
+
--userssite-surface-raised: var(--surface-raised, color-mix(in oklab, var(--userssite-color-surface) 86%, transparent));
|
|
31
|
+
--userssite-surface-subtle: var(--surface-subtle, color-mix(in oklab, var(--userssite-color-bg) 92%, var(--userssite-color-primary)));
|
|
32
|
+
--userssite-surface-control: var(--surface-control, color-mix(in oklab, var(--userssite-color-panel) 88%, transparent));
|
|
33
|
+
--userssite-surface-control-hover: var(--surface-control-hover, color-mix(in oklab, var(--userssite-color-primary) 12%, transparent));
|
|
34
|
+
--userssite-surface-control-active: var(--surface-control-active, color-mix(in oklab, var(--userssite-color-primary) 18%, transparent));
|
|
35
|
+
--userssite-focus-ring: var(--focus-ring, color-mix(in oklab, var(--userssite-color-primary) 14%, transparent));
|
|
36
|
+
--userssite-shadow-header: var(--shadow-header, 0 calc(var(--cp-font-1) * 10) calc(var(--cp-font-1) * 28) var(--userssite-shadow-color));
|
|
37
|
+
--userssite-shadow-panel: var(--shadow-panel, 0 calc(var(--cp-font-1) * 8) calc(var(--cp-font-1) * 22) var(--userssite-shadow-color));
|
|
38
|
+
--userssite-shadow-dropdown: var(--shadow-dropdown, 0 calc(var(--cp-font-1) * 18) calc(var(--cp-font-1) * 42) var(--userssite-shadow-color));
|
|
39
|
+
--userssite-app-shell-bg: var(--app-shell-bg, linear-gradient(180deg, color-mix(in oklab, var(--userssite-color-primary) 7%, var(--userssite-surface-subtle)), transparent 34%), var(--userssite-color-bg));
|
|
40
|
+
--userssite-app-header-bg: var(--app-header-bg, var(--userssite-surface-glass));
|
|
41
|
+
--userssite-app-content-bg: var(--app-content-bg, linear-gradient(90deg, color-mix(in oklab, var(--userssite-color-text) 4%, transparent) 0, transparent calc(var(--cp-font-1) * 16)), color-mix(in oklab, var(--userssite-color-bg) 96%, var(--userssite-surface-subtle)));
|
|
42
|
+
--userssite-app-sidebar-bg: var(--app-sidebar-bg, linear-gradient(180deg, color-mix(in oklab, var(--userssite-color-panel) 78%, transparent), color-mix(in oklab, var(--userssite-color-bg) 88%, var(--userssite-color-white))));
|
|
43
|
+
--userssite-app-rightpanel-bg: var(--app-rightpanel-bg, color-mix(in oklab, var(--userssite-color-bg) 94%, var(--userssite-color-white)));
|
|
44
|
+
--userssite-map-title-text: var(--map-title-text, color-mix(in oklab, var(--userssite-color-text) 86%, transparent));
|
|
45
|
+
--userssite-ranking-header-bg: var(--ranking-header-bg, #2f8bd6);
|
|
46
|
+
--userssite-brand-mark-bg: var(--brand-mark-bg, color-mix(in oklab, var(--userssite-color-panel) 86%, transparent));
|
|
47
|
+
--userssite-nav-bg: var(--nav-bg, color-mix(in oklab, var(--userssite-color-bg) 72%, var(--userssite-color-white)));
|
|
48
|
+
--userssite-nav-highlight-bg: var(--nav-highlight-bg, linear-gradient(180deg, var(--userssite-color-panel), color-mix(in oklab, var(--userssite-color-primary) 10%, var(--userssite-color-panel))));
|
|
49
|
+
--userssite-nav-highlight-shadow: var(--nav-highlight-shadow, 0 calc(var(--cp-font-1) * 10) calc(var(--cp-font-1) * 24) color-mix(in oklab, var(--userssite-color-primary) 18%, transparent), inset 0 calc(var(--cp-font-1) * 1) 0 color-mix(in oklab, var(--userssite-color-panel) 92%, transparent));
|
|
50
|
+
--userssite-dropdown-bg: var(--dropdown-bg, color-mix(in oklab, var(--userssite-color-bg) 94%, var(--userssite-color-white)));
|
|
51
|
+
--userssite-input-bg: var(--input-bg, color-mix(in oklab, var(--userssite-color-bg) 88%, var(--userssite-color-white)));
|
|
52
|
+
--userssite-input-placeholder: var(--input-placeholder, var(--userssite-color-subtle));
|
|
53
|
+
--userssite-scrollbar-track: var(--scrollbar-track, transparent);
|
|
54
|
+
--userssite-scrollbar-thumb: var(--scrollbar-thumb, color-mix(in oklab, var(--userssite-color-primary) 34%, var(--userssite-color-border)));
|
|
55
|
+
--userssite-scrollbar-thumb-hover: var(--scrollbar-thumb-hover, color-mix(in oklab, var(--userssite-color-primary) 52%, var(--userssite-color-border)));
|
|
56
|
+
--userssite-tree-trigger-bg: var(--tree-trigger-bg, color-mix(in oklab, var(--userssite-color-panel) 96%, var(--userssite-color-primary) 4%));
|
|
57
|
+
--userssite-tree-trigger-hover-bg: var(--tree-trigger-hover-bg, var(--userssite-color-panel));
|
|
58
|
+
--userssite-tree-type-bg: var(--tree-type-bg, linear-gradient(180deg, color-mix(in oklab, var(--userssite-color-primary) 18%, var(--userssite-color-panel)), color-mix(in oklab, var(--userssite-color-primary) 10%, var(--userssite-color-panel))));
|
|
59
|
+
--userssite-tree-panel-bg: var(--tree-panel-bg, color-mix(in oklab, var(--userssite-color-bg) 96%, transparent));
|
|
60
|
+
--userssite-tree-tabs-bg: var(--tree-tabs-bg, color-mix(in oklab, var(--userssite-color-hover) 58%, transparent));
|
|
61
|
+
--userssite-map-menu-parent-bg: var(--map-menu-parent-bg, #00000080);
|
|
62
|
+
--userssite-map-menu-parent-active: var(--map-menu-parent-active, #f6a313);
|
|
63
|
+
--userssite-map-menu-child-bg: var(--map-menu-child-bg, color-mix(in oklab, #ffffff 86%, #d7f6ff));
|
|
64
|
+
--userssite-map-menu-child-border: var(--map-menu-child-border, #26b6ef);
|
|
65
|
+
--userssite-map-menu-child-text: var(--map-menu-child-text, #148cc8);
|
|
66
|
+
--userssite-map-menu-child-active: var(--map-menu-child-active, #2d9cf0);
|
|
67
|
+
--userssite-right-panel-header-bg: var(--right-panel-header-bg, #2f8bd6);
|
|
68
|
+
--userssite-right-panel-header-text: var(--right-panel-header-text, #ffffff);
|
|
69
|
+
--userssite-map-float-bg: var(--map-float-bg, color-mix(in oklab, var(--userssite-color-panel) 96%, var(--userssite-color-bg)));
|
|
70
|
+
--userssite-map-float-border: var(--map-float-border, color-mix(in oklab, var(--userssite-color-border) 82%, transparent));
|
|
71
|
+
--userssite-map-float-control-bg: var(--map-float-control-bg, color-mix(in oklab, var(--userssite-color-panel) 94%, var(--userssite-color-bg)));
|
|
72
|
+
--userssite-map-float-control-hover-bg: var(--map-float-control-hover-bg, color-mix(in oklab, var(--userssite-color-primary) 12%, var(--userssite-color-panel)));
|
|
73
|
+
--userssite-map-float-shadow: var(--map-float-shadow, 0 calc(var(--cp-font-1) * 12) calc(var(--cp-font-1) * 28) var(--userssite-shadow-color));
|
|
74
|
+
--userssite-header-height: var(--header-height, calc(var(--cp-font-1) * 58));
|
|
75
|
+
--userssite-sidebar-width: var(--sidebar-width, calc(var(--cp-font-1) * 244));
|
|
76
|
+
--userssite-rightpanel-width: var(--rightpanel-width, calc(var(--cp-font-1) * 320));
|
|
77
|
+
--userssite-layout-gutter: var(--layout-gutter, calc(var(--cp-font-1) * 10));
|
|
78
|
+
--userssite-font-family-sans: var(--font-family-sans, "HarmonyOS Sans SC", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", "PingFang SC", Arial, sans-serif);
|
|
79
|
+
--userssite-font-size-micro: var(--font-size-micro, var(--cp-font-10));
|
|
80
|
+
--userssite-font-size-caption: var(--font-size-caption, var(--cp-font-13));
|
|
81
|
+
--userssite-font-size-body: var(--font-size-body, var(--cp-font-14));
|
|
82
|
+
--userssite-font-size-title: var(--font-size-title, var(--cp-font-16));
|
|
83
|
+
--userssite-font-size-heading: var(--font-size-heading, var(--cp-font-18));
|
|
84
|
+
--userssite-radius-s: var(--radius-s, var(--cp-font-4));
|
|
85
|
+
--userssite-radius-m: var(--radius-m, var(--cp-font-8));
|
|
86
|
+
--userssite-radius-l: var(--radius-l, var(--cp-font-12));
|
|
87
|
+
--userssite-radius-pill: var(--radius-pill, calc(var(--cp-font-1) * 999));
|
|
88
|
+
--userssite-space-s: var(--space-s, var(--cp-font-6));
|
|
89
|
+
--userssite-space-m: var(--space-m, var(--cp-font-10));
|
|
90
|
+
--userssite-space-l: var(--space-l, var(--cp-font-16));
|
|
91
|
+
--userssite-control-height-s: var(--control-height-s, var(--cp-font-28));
|
|
92
|
+
--userssite-control-height-m: var(--control-height-m, var(--cp-font-32));
|
|
93
|
+
--userssite-control-height-l: var(--control-height-l, var(--cp-font-36));
|
|
94
|
+
--userssite-font-size-l1: var(--font-size-l1, var(--cp-font-16));
|
|
95
|
+
--userssite-font-size-l2: var(--font-size-l2, var(--cp-font-14));
|
|
96
|
+
--userssite-font-size-l3: var(--font-size-l3, var(--cp-font-13));
|
|
97
|
+
--userssite-menu-level-1-color: var(--menu-level-1-color, var(--userssite-color-text));
|
|
98
|
+
--userssite-menu-level-2-color: var(--menu-level-2-color, color-mix(in oklab, var(--userssite-color-text) 82%, transparent));
|
|
99
|
+
--userssite-menu-level-3-color: var(--menu-level-3-color, color-mix(in oklab, var(--userssite-color-text) 68%, transparent));
|
|
100
|
+
--userssite-button-primary-bg: var(--button-primary-bg, var(--userssite-color-primary));
|
|
101
|
+
--userssite-button-primary-text: var(--button-primary-text, var(--userssite-color-on-primary));
|
|
102
|
+
--userssite-button-secondary-bg: var(--button-secondary-bg, var(--userssite-surface-control));
|
|
103
|
+
--userssite-button-secondary-text: var(--button-secondary-text, var(--userssite-color-text));
|
|
104
|
+
--userssite-button-ghost-bg: var(--button-ghost-bg, transparent);
|
|
105
|
+
--userssite-button-ghost-text: var(--button-ghost-text, var(--userssite-color-primary));
|
|
106
|
+
--userssite-button-danger-bg: var(--button-danger-bg, var(--userssite-color-danger));
|
|
107
|
+
--userssite-button-danger-text: var(--button-danger-text, var(--userssite-color-white));
|
|
108
|
+
--userssite-motion-fast: var(--motion-fast, 160ms);
|
|
109
|
+
--userssite-motion-base: var(--motion-base, 240ms);
|
|
110
|
+
--userssite-motion-ease: var(--motion-ease, cubic-bezier(0.2, 0.8, 0.2, 1));
|
|
111
|
+
--el-color-primary: var(--userssite-color-primary);
|
|
112
|
+
--el-bg-color: var(--userssite-color-bg);
|
|
113
|
+
--el-bg-color-overlay: var(--userssite-color-panel);
|
|
114
|
+
--el-fill-color-blank: var(--userssite-color-panel);
|
|
115
|
+
--el-text-color-primary: var(--userssite-color-text);
|
|
116
|
+
--el-text-color-regular: var(--userssite-color-muted);
|
|
117
|
+
--el-border-color: var(--userssite-color-border);
|
|
118
|
+
--el-border-radius-base: var(--userssite-radius-s);
|
|
119
|
+
--el-component-size: var(--userssite-control-height-m);
|
|
120
|
+
--el-font-size-base: var(--userssite-font-size-body);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
:where(.theme-dark .userssite-theme, .userssite-theme.theme-dark, .sky-html[data-theme="dark"], .sky-model-workspace[data-native-controls][data-theme="dark"]) {
|
|
124
|
+
--userssite-color-bg: var(--color-bg, #08111f);
|
|
125
|
+
--userssite-color-text: var(--color-text, #e6edf7);
|
|
126
|
+
--userssite-color-primary: var(--color-primary, #4da3ff);
|
|
127
|
+
--userssite-color-on-primary: var(--color-on-primary, #ffffff);
|
|
128
|
+
--userssite-color-border: var(--color-border, #39506f99);
|
|
129
|
+
--userssite-color-hover: var(--color-hover, color-mix(in oklab, var(--userssite-color-primary) 18%, transparent));
|
|
130
|
+
--userssite-color-surface: var(--color-surface, #101b2dee);
|
|
131
|
+
--userssite-color-surface-strong: var(--color-surface-strong, color-mix(in oklab, var(--userssite-color-surface) 70%, var(--userssite-color-bg)));
|
|
132
|
+
--userssite-color-panel: var(--color-panel, #0c1525);
|
|
133
|
+
--userssite-shadow-color: var(--shadow-color, color-mix(in oklab, #020617 62%, transparent));
|
|
134
|
+
--userssite-color-inset-highlight: var(--color-inset-highlight, color-mix(in oklab, var(--userssite-color-white) 12%, transparent));
|
|
135
|
+
--userssite-surface-subtle: var(--surface-subtle, color-mix(in oklab, var(--userssite-color-surface-strong) 76%, var(--userssite-color-bg)));
|
|
136
|
+
--userssite-surface-glass: var(--surface-glass, color-mix(in oklab, var(--userssite-color-surface-strong) 84%, transparent));
|
|
137
|
+
--userssite-surface-control: var(--surface-control, color-mix(in oklab, var(--userssite-color-surface-strong) 84%, transparent));
|
|
138
|
+
--userssite-surface-control-hover: var(--surface-control-hover, color-mix(in oklab, var(--userssite-color-primary) 18%, transparent));
|
|
139
|
+
--userssite-surface-control-active: var(--surface-control-active, color-mix(in oklab, var(--userssite-color-primary) 26%, transparent));
|
|
140
|
+
--userssite-focus-ring: var(--focus-ring, color-mix(in oklab, var(--userssite-color-primary) 20%, transparent));
|
|
141
|
+
--userssite-shadow-header: var(--shadow-header, 0 calc(var(--cp-font-1) * 12) calc(var(--cp-font-1) * 30) var(--userssite-shadow-color), inset 0 calc(var(--cp-font-1) * 1) 0 var(--userssite-color-inset-highlight));
|
|
142
|
+
--userssite-shadow-panel: var(--shadow-panel, 0 calc(var(--cp-font-1) * 10) calc(var(--cp-font-1) * 24) var(--userssite-shadow-color));
|
|
143
|
+
--userssite-shadow-dropdown: var(--shadow-dropdown, 0 calc(var(--cp-font-1) * 18) calc(var(--cp-font-1) * 42) var(--userssite-shadow-color));
|
|
144
|
+
--userssite-app-shell-bg: var(--app-shell-bg, radial-gradient(circle at 18% 0, color-mix(in oklab, var(--userssite-color-primary) 18%, transparent), transparent 30%), linear-gradient(180deg, color-mix(in oklab, var(--userssite-color-primary) 8%, var(--userssite-color-bg)) 0, var(--userssite-color-bg) 42%));
|
|
145
|
+
--userssite-app-header-bg: var(--app-header-bg, linear-gradient(180deg, color-mix(in oklab, var(--userssite-color-surface-strong) 86%, transparent), color-mix(in oklab, var(--userssite-color-surface) 86%, transparent)));
|
|
146
|
+
--userssite-app-content-bg: var(--app-content-bg, linear-gradient(90deg, color-mix(in oklab, var(--userssite-shadow-color) 58%, transparent) 0, transparent calc(var(--cp-font-1) * 18)), radial-gradient(circle at 64% 0, color-mix(in oklab, var(--userssite-color-primary) 12%, transparent), transparent 34%), var(--userssite-color-bg));
|
|
147
|
+
--userssite-app-sidebar-bg: var(--app-sidebar-bg, linear-gradient(180deg, color-mix(in oklab, var(--userssite-color-surface) 92%, transparent), color-mix(in oklab, var(--userssite-color-bg) 92%, transparent)));
|
|
148
|
+
--userssite-app-rightpanel-bg: var(--app-rightpanel-bg, linear-gradient(180deg, color-mix(in oklab, var(--userssite-color-surface) 92%, transparent), color-mix(in oklab, var(--userssite-color-bg) 92%, transparent)));
|
|
149
|
+
--userssite-map-title-text: var(--map-title-text, #1f2937);
|
|
150
|
+
--userssite-ranking-header-bg: var(--ranking-header-bg, transparent);
|
|
151
|
+
--userssite-brand-mark-bg: var(--brand-mark-bg, color-mix(in oklab, var(--userssite-color-white) 92%, var(--userssite-color-primary)));
|
|
152
|
+
--userssite-nav-bg: var(--nav-bg, color-mix(in oklab, var(--userssite-color-panel) 76%, transparent));
|
|
153
|
+
--userssite-nav-highlight-bg: var(--nav-highlight-bg, linear-gradient(180deg, color-mix(in oklab, var(--userssite-color-primary) 36%, var(--userssite-color-inset-highlight)), color-mix(in oklab, var(--userssite-color-primary) 18%, var(--userssite-color-bg))));
|
|
154
|
+
--userssite-nav-highlight-shadow: var(--nav-highlight-shadow, 0 calc(var(--cp-font-1) * 8) calc(var(--cp-font-1) * 24) color-mix(in oklab, var(--userssite-color-primary) 26%, transparent), inset 0 calc(var(--cp-font-1) * 1) 0 var(--userssite-color-inset-highlight));
|
|
155
|
+
--userssite-dropdown-bg: var(--dropdown-bg, color-mix(in oklab, var(--userssite-color-surface) 94%, transparent));
|
|
156
|
+
--userssite-input-bg: var(--input-bg, color-mix(in oklab, var(--userssite-color-surface-strong) 88%, transparent));
|
|
157
|
+
--userssite-input-placeholder: var(--input-placeholder, color-mix(in oklab, var(--userssite-color-text) 44%, transparent));
|
|
158
|
+
--userssite-scrollbar-thumb: var(--scrollbar-thumb, color-mix(in oklab, var(--userssite-color-primary) 46%, var(--userssite-color-border)));
|
|
159
|
+
--userssite-scrollbar-thumb-hover: var(--scrollbar-thumb-hover, color-mix(in oklab, var(--userssite-color-primary) 64%, var(--userssite-color-border)));
|
|
160
|
+
--userssite-tree-trigger-bg: var(--tree-trigger-bg, linear-gradient(180deg, color-mix(in oklab, var(--userssite-color-surface-strong) 84%, var(--userssite-color-primary) 16%), var(--userssite-color-panel)));
|
|
161
|
+
--userssite-tree-trigger-hover-bg: var(--tree-trigger-hover-bg, linear-gradient(180deg, color-mix(in oklab, var(--userssite-color-surface-strong) 80%, var(--userssite-color-primary) 20%), color-mix(in oklab, var(--userssite-color-panel) 82%, var(--userssite-color-primary) 18%)));
|
|
162
|
+
--userssite-tree-type-bg: var(--tree-type-bg, linear-gradient(180deg, color-mix(in oklab, var(--userssite-color-primary) 28%, var(--userssite-color-inset-highlight)), color-mix(in oklab, var(--userssite-color-primary) 12%, transparent)));
|
|
163
|
+
--userssite-tree-panel-bg: var(--tree-panel-bg, color-mix(in oklab, var(--userssite-color-panel) 94%, transparent));
|
|
164
|
+
--userssite-tree-tabs-bg: var(--tree-tabs-bg, color-mix(in oklab, var(--userssite-color-surface-strong) 78%, transparent));
|
|
165
|
+
--userssite-map-float-bg: var(--map-float-bg, linear-gradient(180deg, color-mix(in oklab, var(--userssite-color-surface) 82%, var(--userssite-color-panel)), color-mix(in oklab, var(--userssite-color-panel) 88%, #020617)));
|
|
166
|
+
--userssite-map-float-border: var(--map-float-border, color-mix(in oklab, var(--userssite-color-primary) 24%, var(--userssite-color-border)));
|
|
167
|
+
--userssite-map-float-control-bg: var(--map-float-control-bg, color-mix(in oklab, var(--userssite-color-panel) 86%, #020617));
|
|
168
|
+
--userssite-map-float-control-hover-bg: var(--map-float-control-hover-bg, color-mix(in oklab, var(--userssite-color-primary) 18%, var(--userssite-color-panel)));
|
|
169
|
+
--userssite-map-float-shadow: var(--map-float-shadow, 0 calc(var(--cp-font-1) * 14) calc(var(--cp-font-1) * 30) color-mix(in oklab, #020617 64%, transparent));
|
|
170
|
+
--userssite-menu-level-1-color: var(--menu-level-1-color, #e6edf7);
|
|
171
|
+
--userssite-menu-level-2-color: var(--menu-level-2-color, #c8d4e4);
|
|
172
|
+
--userssite-menu-level-3-color: var(--menu-level-3-color, #aebed2);
|
|
173
|
+
--userssite-right-panel-header-bg: var(--right-panel-header-bg, transparent);
|
|
174
|
+
--userssite-right-panel-header-text: var(--right-panel-header-text, #e6edf7);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
}
|
|
179
|
+
|
|
1
180
|
/* 四个模型工作区的共同主题，仅在显式容器内生效。 */
|
|
2
181
|
.sky-model-workspace {
|
|
3
182
|
--color-bg: #f3f7fb; --color-panel: #fff; --color-surface: #f7f9fc;
|
|
@@ -26,22 +205,80 @@
|
|
|
26
205
|
--shadow-panel: 0 8px 28px #00000030; --scrollbar-thumb: #425a72; color-scheme: dark;
|
|
27
206
|
}
|
|
28
207
|
.sky-model-workspace *, .sky-model-workspace *::before, .sky-model-workspace *::after { box-sizing: border-box; }
|
|
208
|
+
|
|
209
|
+
/* HTML 与 Vue 控件直接消费同一 userssite 主题，不再维护另一套控件色值。 */
|
|
210
|
+
.sky-html { color:var(--userssite-color-text); background:var(--userssite-color-bg); font-family:var(--userssite-font-family-sans); font-size:var(--font-size-body,14px); line-height:1.5; }
|
|
211
|
+
:where(.sky-html, .sky-model-workspace[data-native-controls]) { --cp-font-1:calc(var(--cp-vfit-scale,1) * 1px); }
|
|
212
|
+
:where(.sky-html, .sky-model-workspace[data-native-controls]) { --cp-font-4:calc(var(--cp-vfit-scale,1) * 4px); }
|
|
213
|
+
:where(.sky-html, .sky-model-workspace[data-native-controls]) { --cp-font-8:calc(var(--cp-vfit-scale,1) * 8px); }
|
|
214
|
+
:where(.sky-html, .sky-model-workspace[data-native-controls]) { --cp-font-12:calc(var(--cp-vfit-scale,1) * 12px); }
|
|
215
|
+
:where(.sky-html, .sky-model-workspace[data-native-controls]) { --cp-font-14:calc(var(--cp-vfit-scale,1) * 14px); }
|
|
216
|
+
:where(.sky-html, .sky-model-workspace[data-native-controls]) { --cp-font-28:calc(var(--cp-vfit-scale,1) * 28px); }
|
|
217
|
+
:where(.sky-html, .sky-model-workspace[data-native-controls]) { --cp-font-32:calc(var(--cp-vfit-scale,1) * 32px); }
|
|
218
|
+
:where(.sky-html, .sky-model-workspace[data-native-controls]) { --cp-font-36:calc(var(--cp-vfit-scale,1) * 36px); }
|
|
219
|
+
|
|
29
220
|
.sky-model-workspace__content { padding: var(--workspace-padding, 20px); min-width: 0; }
|
|
30
|
-
.sky-model-header { padding: 24px 28px; background: var(--workspace-hero); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
|
|
31
|
-
.sky-model-header__title { margin: 0; display: flex; align-items: center; gap: 12px; color: var(--workspace-title); font-size: 22px; font-weight: 650; }
|
|
32
|
-
.sky-model-header__title::before { content: ''; width: 7px; height: 25px; border-radius: 4px; background: var(--color-primary); flex-shrink: 0; }
|
|
33
|
-
.sky-model-header__description { margin: 8px 0 0; color: var(--color-muted); }
|
|
34
|
-
.sky-model-panel { min-width: 0; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-panel); box-shadow: var(--shadow-panel); overflow: hidden; }
|
|
221
|
+
.sky-model-header { padding: 24px 28px; background: var(--workspace-hero, var(--userssite-color-panel)); border-bottom: 1px solid var(--color-border, var(--userssite-color-border)); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
|
|
222
|
+
.sky-model-header__title { margin: 0; display: flex; align-items: center; gap: 12px; color: var(--workspace-title, var(--userssite-color-text)); font-size: 22px; font-weight: 650; }
|
|
223
|
+
.sky-model-header__title::before { content: ''; width: 7px; height: 25px; border-radius: 4px; background: var(--color-primary, var(--userssite-color-primary)); flex-shrink: 0; }
|
|
224
|
+
.sky-model-header__description { margin: 8px 0 0; color: var(--color-muted, var(--userssite-color-muted)); }
|
|
225
|
+
.sky-model-panel { min-width: 0; border: 1px solid var(--color-border, var(--userssite-color-border)); border-radius: 8px; background: var(--color-panel, var(--userssite-color-panel)); box-shadow: var(--shadow-panel, var(--userssite-shadow-panel)); overflow: hidden; }
|
|
35
226
|
.sky-model-panel__header, .sky-model-panel__footer { padding: var(--panel-header-padding, calc(var(--cp-font-1, 1px) * 12) calc(var(--cp-font-1, 1px) * 16)); display: flex; align-items: center; justify-content: space-between; gap: var(--panel-gap, calc(var(--cp-font-1, 1px) * 12)); flex-wrap: wrap; }
|
|
36
|
-
.sky-model-panel__header { border-bottom: 1px solid var(--color-border); }
|
|
37
|
-
.sky-model-panel__header h2 { margin: 0; font-size: 15px; color: var(--workspace-title); }
|
|
227
|
+
.sky-model-panel__header { border-bottom: 1px solid var(--color-border, var(--userssite-color-border)); }
|
|
228
|
+
.sky-model-panel__header h2 { margin: 0; font-size: 15px; color: var(--workspace-title, var(--userssite-color-text)); }
|
|
38
229
|
.sky-model-panel__body { padding: var(--panel-body-padding, calc(var(--cp-font-1, 1px) * 16)); min-width: 0; }
|
|
39
|
-
.sky-model-panel__footer { padding: var(--panel-footer-padding, calc(var(--cp-font-1, 1px) * 12) calc(var(--cp-font-1, 1px) * 16)); border-top: 1px solid var(--color-border); }
|
|
40
|
-
/* 原生表单适配必须显式开启，不覆盖容器外的 Element Plus。 */
|
|
41
|
-
.sky-model-workspace[data-native-controls] :where(button:not([class*="el-"]), input:not([class*="el-"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select:not([class*="el-"]), textarea:not([class*="el-"])) { font: inherit; color: var(--color-text); background: var(--color-panel); border: 1px solid var(--color-border); border-radius: 6px; padding: 7px 12px; }
|
|
42
|
-
.sky-model-workspace[data-native-controls] :where(button:not([class*="el-"])) { cursor: pointer; }
|
|
43
|
-
.sky-model-workspace[data-native-controls] :where(button.primary, button.accent) { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
|
|
44
|
-
.sky-model-workspace[data-native-controls] :where(button:not([class*="el-"]):hover:not(:disabled)) { border-color: var(--color-primary); }
|
|
45
|
-
.sky-model-workspace[data-native-controls] :where(button:disabled, input:disabled, select:disabled, textarea:disabled) { opacity: .55; cursor: not-allowed; }
|
|
46
|
-
.sky-model-workspace[data-native-controls] :where(button, input, select, textarea):focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
|
|
230
|
+
.sky-model-panel__footer { padding: var(--panel-footer-padding, calc(var(--cp-font-1, 1px) * 12) calc(var(--cp-font-1, 1px) * 16)); border-top: 1px solid var(--color-border, var(--userssite-color-border)); }
|
|
47
231
|
@media(max-width:768px) { .sky-model-header { padding: 18px 16px; } .sky-model-workspace__content { padding: 12px; } }
|
|
232
|
+
|
|
233
|
+
/* 原生按钮，显式 opt-in；不提供业务交互。保留旧工作区入口。 */
|
|
234
|
+
:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(button, input[type="button"], input[type="submit"], input[type="reset"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)) { box-sizing: border-box; font-family:var(--userssite-font-family-sans); font-size:var(--userssite-font-size-body); line-height:1; color: var(--userssite-color-text); background: var(--userssite-color-panel); border: 1px solid var(--userssite-color-border); border-radius: var(--userssite-radius-s); height:var(--userssite-control-height-m); padding:8px 15px; font-weight:500; cursor: pointer; }
|
|
235
|
+
:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(button, input[type="button"], input[type="submit"], input[type="reset"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):where(.primary, .accent, [data-variant="primary"]) { background: var(--userssite-color-primary); border-color: var(--userssite-color-primary); color: var(--userssite-color-on-primary); }
|
|
236
|
+
:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(button, input[type="button"], input[type="submit"], input[type="reset"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *))[data-variant="danger"] { background: var(--userssite-color-danger); color: var(--userssite-color-white); border-color: var(--userssite-color-danger); }
|
|
237
|
+
:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(button, input[type="button"], input[type="submit"], input[type="reset"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):hover:not(:disabled) { color:var(--userssite-color-primary); background:color-mix(in oklab,var(--userssite-color-primary) 10%,var(--userssite-color-panel)); border-color:color-mix(in oklab,var(--userssite-color-primary) 30%,var(--userssite-color-panel)); }
|
|
238
|
+
:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(button, input[type="button"], input[type="submit"], input[type="reset"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):active:not(:disabled) { filter: brightness(.94); }
|
|
239
|
+
:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(button, input[type="button"], input[type="submit"], input[type="reset"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):disabled { color:var(--userssite-color-subtle); background:var(--userssite-surface-subtle); border-color:var(--userssite-color-soft-border); cursor:not-allowed; }
|
|
240
|
+
:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(button, input[type="button"], input[type="submit"], input[type="reset"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):focus-visible { outline: 2px solid var(--userssite-color-primary); outline-offset: 2px; }
|
|
241
|
+
:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(button, input[type="button"], input[type="submit"], input[type="reset"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):where([data-variant="primary"],.primary,.accent):hover:not(:disabled) { background:color-mix(in oklab,var(--userssite-color-primary) 70%,var(--userssite-color-panel)); border-color:color-mix(in oklab,var(--userssite-color-primary) 70%,var(--userssite-color-panel)); color:var(--userssite-color-on-primary); }
|
|
242
|
+
:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(button, input[type="button"], input[type="submit"], input[type="reset"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):where([data-variant="primary"],.primary,.accent):disabled { background:color-mix(in oklab,var(--userssite-color-primary) 50%,var(--userssite-color-panel)); border-color:color-mix(in oklab,var(--userssite-color-primary) 50%,var(--userssite-color-panel)); color:var(--userssite-color-white); }
|
|
243
|
+
:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(button, input[type="button"], input[type="submit"], input[type="reset"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *))[data-variant="danger"]:hover:not(:disabled) { background:color-mix(in oklab,var(--userssite-color-danger) 70%,var(--userssite-color-panel)); border-color:color-mix(in oklab,var(--userssite-color-danger) 70%,var(--userssite-color-panel)); color:var(--userssite-color-white); }
|
|
244
|
+
:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(button, input[type="button"], input[type="submit"], input[type="reset"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *))[data-variant="danger"]:disabled { background:color-mix(in oklab,var(--userssite-color-danger) 50%,var(--userssite-color-panel)); border-color:color-mix(in oklab,var(--userssite-color-danger) 50%,var(--userssite-color-panel)); color:var(--userssite-color-white); }
|
|
245
|
+
|
|
246
|
+
/* 文本输入、select、textarea；复选框、单选、滑块、文件沿用浏览器。 */
|
|
247
|
+
:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="image"]), select, textarea):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)) { box-sizing: border-box; max-width: 100%; font-family:var(--userssite-font-family-sans); font-size:var(--userssite-font-size-body); line-height:1; color: var(--userssite-color-text); background: var(--userssite-input-bg); border: 1px solid var(--userssite-color-border); border-radius: var(--userssite-radius-s); height:var(--userssite-control-height-m); padding:1px 11px; }
|
|
248
|
+
:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="image"]), select, textarea):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *))::placeholder { color: var(--userssite-input-placeholder); opacity: 1; }
|
|
249
|
+
:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="image"]), select, textarea):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):hover:not(:disabled):not([readonly]):not(:where([aria-invalid="true"], :user-invalid)) { border-color: var(--userssite-color-primary); }
|
|
250
|
+
:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="image"]), select, textarea):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):focus { outline: none; outline-offset: 0; box-shadow: none; border-color: var(--userssite-color-primary); }
|
|
251
|
+
:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="image"]), select, textarea):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):disabled { color:var(--userssite-color-subtle); background:var(--userssite-surface-subtle); border-color:var(--userssite-color-soft-border); cursor:not-allowed; }
|
|
252
|
+
:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="image"]), select, textarea):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *))[readonly] { background: var(--userssite-color-surface); }
|
|
253
|
+
:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="image"]), select, textarea):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):is([aria-invalid="true"], :user-invalid) { border-color: var(--userssite-color-danger); }
|
|
254
|
+
:where(.sky-html, .sky-model-workspace[data-native-controls]) :where(input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="image"]), select, textarea):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):where(textarea) { height:auto; min-height:var(--userssite-control-height-m); padding:5px 11px; line-height:1.5; }
|
|
255
|
+
:where(.sky-html,.sky-model-workspace[data-native-controls]) :where(input[type="checkbox"],input[type="radio"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)) { appearance:none; box-sizing:border-box; display:inline-grid; place-content:center; vertical-align:middle; width:14px; height:14px; margin:0 6px 0 0; border:1px solid var(--userssite-color-border); border-radius:2px; background:var(--userssite-input-bg); cursor:pointer; }
|
|
256
|
+
:where(.sky-html,.sky-model-workspace[data-native-controls]) :where(input[type="checkbox"],input[type="radio"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):checked { background:var(--userssite-color-primary); border-color:var(--userssite-color-primary); }
|
|
257
|
+
:where(.sky-html,.sky-model-workspace[data-native-controls]) :where(input[type="checkbox"],input[type="radio"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *))::after { content:''; width:3px; height:7px; border:solid var(--userssite-color-on-primary); border-width:0 1px 1px 0; transform:rotate(45deg) scale(0); }
|
|
258
|
+
:where(.sky-html,.sky-model-workspace[data-native-controls]) :where(input[type="checkbox"],input[type="radio"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):checked::after { transform:rotate(45deg) scale(1); }
|
|
259
|
+
:where(.sky-html,.sky-model-workspace[data-native-controls]) :where(input[type="checkbox"],input[type="radio"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *))[type="radio"] { border-radius:50%; }
|
|
260
|
+
:where(.sky-html,.sky-model-workspace[data-native-controls]) :where(input[type="checkbox"],input[type="radio"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *))[type="radio"]::after { width:4px; height:4px; border:0; border-radius:50%; background:var(--userssite-color-on-primary); }
|
|
261
|
+
:where(.sky-html,.sky-model-workspace[data-native-controls]) :where(input[type="checkbox"],input[type="radio"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):disabled { cursor:not-allowed; opacity:.5; }
|
|
262
|
+
:where(.sky-html,.sky-model-workspace[data-native-controls]) :where(input[type="checkbox"],input[type="radio"]):not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):focus-visible { outline:2px solid var(--userssite-color-primary); outline-offset:2px; }
|
|
263
|
+
|
|
264
|
+
:where(.sky-html) [data-sky-error]:not([data-sky-native="off"]):not([data-sky-native="off"] *) { color:var(--userssite-color-danger); font-size:12px; line-height:1; }
|
|
265
|
+
|
|
266
|
+
/* 多选列表使用原生 size 行数，不继承单行输入高度。 */
|
|
267
|
+
:where(.sky-html,.sky-model-workspace[data-native-controls]) select:not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):where([multiple], [size]:not([size="1"]):not([size="0"])) { appearance:none; box-sizing:border-box; width:var(--sky-select-list-width, 220px); max-width:100%; height:auto; min-height:calc(var(--userssite-control-height-m) * 3 + 12px); padding:6px; line-height:1.5; vertical-align:top; overflow:auto; background:var(--userssite-input-bg); scrollbar-width:thin; scrollbar-color:var(--userssite-scrollbar-thumb) transparent; }
|
|
268
|
+
:where(.sky-html,.sky-model-workspace[data-native-controls]) select:not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):where([multiple], [size]:not([size="1"]):not([size="0"])) option { box-sizing:border-box; min-height:var(--userssite-control-height-m); padding:7px 10px; margin:2px 0; border-radius:var(--userssite-radius-s); color:var(--userssite-color-text); cursor:pointer; }
|
|
269
|
+
:where(.sky-html,.sky-model-workspace[data-native-controls]) input[type="file"]:not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)) { max-width:100%; font-family:var(--userssite-font-family-sans); font-size:var(--userssite-font-size-body); color:var(--userssite-color-text); line-height:1.5; }
|
|
270
|
+
:where(.sky-html,.sky-model-workspace[data-native-controls]) input[type="file"]:not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *))::file-selector-button { box-sizing:border-box; height:var(--userssite-control-height-m); margin-inline-end:10px; padding:8px 15px; font:inherit; font-weight:500; line-height:1; border:1px solid var(--userssite-color-border); border-radius:var(--userssite-radius-s); background:var(--userssite-color-panel); color:var(--userssite-color-text); cursor:pointer; }
|
|
271
|
+
:where(.sky-html,.sky-model-workspace[data-native-controls]) input[type="file"]:not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):hover:not(:disabled)::file-selector-button { color:var(--userssite-color-primary); border-color:var(--userssite-color-primary); background:var(--userssite-surface-control-hover); }
|
|
272
|
+
:where(.sky-html,.sky-model-workspace[data-native-controls]) input[type="file"]:not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):disabled { color:var(--userssite-color-subtle); cursor:not-allowed; }
|
|
273
|
+
:where(.sky-html,.sky-model-workspace[data-native-controls]) input[type="file"]:not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):disabled::file-selector-button { color:var(--userssite-color-subtle); border-color:var(--userssite-color-soft-border); background:var(--userssite-surface-subtle); cursor:not-allowed; }
|
|
274
|
+
:where(.sky-html,.sky-model-workspace[data-native-controls]) input[type="file"]:not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):focus-visible { outline:2px solid var(--userssite-color-primary); outline-offset:2px; border-radius:var(--userssite-radius-s); }
|
|
275
|
+
|
|
276
|
+
/* 保留原生多选语义，仅统一列表表面；不触碰单选系统弹层。 */
|
|
277
|
+
:where(.sky-html,.sky-model-workspace[data-native-controls]) select:not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):where([multiple], [size]:not([size="1"]):not([size="0"])):not(:disabled) option:hover:not(:disabled):not(:checked) { background:var(--userssite-surface-control-hover); }
|
|
278
|
+
:where(.sky-html,.sky-model-workspace[data-native-controls]) select:not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):where([multiple], [size]:not([size="1"]):not([size="0"])) option:checked { color:var(--userssite-color-primary); background:linear-gradient(var(--userssite-surface-control-active),var(--userssite-surface-control-active)); font-weight:600; }
|
|
279
|
+
:where(.sky-html,.sky-model-workspace[data-native-controls]) select:not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):where([multiple], [size]:not([size="1"]):not([size="0"])) option:disabled { color:var(--userssite-color-subtle); cursor:not-allowed; }
|
|
280
|
+
:where(.sky-html,.sky-model-workspace[data-native-controls]) select:not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):where([multiple], [size]:not([size="1"]):not([size="0"])):disabled { color:var(--userssite-color-subtle); background:var(--userssite-surface-subtle); cursor:not-allowed; }
|
|
281
|
+
:where(.sky-html,.sky-model-workspace[data-native-controls]) select:not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):where([multiple], [size]:not([size="1"]):not([size="0"])):disabled option { color:var(--userssite-color-subtle); cursor:not-allowed; }
|
|
282
|
+
@media (forced-colors: active) {
|
|
283
|
+
:where(.sky-html,.sky-model-workspace[data-native-controls]) select:not(:where([data-sky-native="off"], [data-sky-native="off"] *, [class^="el-"], [class^="el-"] *, [class*=" el-"], [class*=" el-"] *, .maplibregl-map *, .mapboxgl-map *)):where([multiple], [size]:not([size="1"]):not([size="0"])) option:checked { background:Highlight; color:HighlightText; }
|
|
284
|
+
}
|