sky-ui-kit 0.1.6 → 0.1.8

package/dist/model-workspace.css

@@ -0,0 +1,47 @@
+/* 四个模型工作区的共同主题，仅在显式容器内生效。 */
+.sky-model-workspace {
+  --color-bg: #f3f7fb; --color-panel: #fff; --color-surface: #f7f9fc;
+  --color-primary: #1677ff; --color-on-primary: #fff; --color-text: #172b4d;
+  --color-muted: #66758a; --color-border: #dce5ef; --color-soft-border: #e6effa;
+  --color-hover: #e8f2ff; --color-danger: #d9363e; --surface-subtle: #f3f7fb;
+  --surface-control: #fff; --surface-control-hover: #e8f2ff; --surface-control-active: #e8f2ff;
+  --input-bg: #fff; --dropdown-bg: #fff; --input-placeholder: #8c9bae;
+  --focus-ring: #1677ff26; --workspace-title: #0c2559;
+  --workspace-hero: linear-gradient(110deg,#edf6ff,#e1efff 56%,#f5faff);
+  --shadow-panel: 0 8px 28px #15375b0d; --radius-s: 6px; --radius-m: 7px; --radius-l: 8px;
+  --scrollbar-thumb: #bdccdf;
+  color-scheme: light; color: var(--color-text); background: var(--color-bg);
+  font-family: "Segoe UI","Microsoft YaHei",sans-serif; font-size: 14px; line-height: 1.65;
+  min-width: 0;
+}
+.sky-model-workspace[data-theme="dark"] {
+  --color-bg: #0d1420; --color-panel: #151f2e; --color-surface: #101a28;
+  --color-primary: #36cbb7; --color-on-primary: #072b2b; --color-text: #e3ecf5;
+  --color-muted: #99abc0; --color-border: #35485f; --color-soft-border: #2b3c50;
+  --color-hover: #193a3f; --color-danger: #f3a2ad; --surface-subtle: #0d1420;
+  --surface-control: #151f2e; --surface-control-hover: #193a3f; --surface-control-active: #193a3f;
+  --input-bg: #151f2e; --dropdown-bg: #1b293b; --input-placeholder: #99abc0;
+  --focus-ring: #36cbb726; --workspace-title: #f1f6fc;
+  --workspace-hero: linear-gradient(110deg,#172b40,#17363f 56%,#142333);
+  --shadow-panel: 0 8px 28px #00000030; --scrollbar-thumb: #425a72; color-scheme: dark;
+}
+.sky-model-workspace *, .sky-model-workspace *::before, .sky-model-workspace *::after { box-sizing: border-box; }
+.sky-model-workspace__content { padding: var(--workspace-padding, 20px); min-width: 0; }
+.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; }
+.sky-model-header__title { margin: 0; display: flex; align-items: center; gap: 12px; color: var(--workspace-title); font-size: 22px; font-weight: 650; }
+.sky-model-header__title::before { content: ''; width: 7px; height: 25px; border-radius: 4px; background: var(--color-primary); flex-shrink: 0; }
+.sky-model-header__description { margin: 8px 0 0; color: var(--color-muted); }
+.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; }
+.sky-model-panel__header, .sky-model-panel__footer { padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
+.sky-model-panel__header { border-bottom: 1px solid var(--color-border); }
+.sky-model-panel__header h2 { margin: 0; font-size: 15px; color: var(--workspace-title); }
+.sky-model-panel__body { padding: 16px; min-width: 0; }
+.sky-model-panel__footer { border-top: 1px solid var(--color-border); }
+/* 原生表单适配必须显式开启，不覆盖容器外的 Element Plus。 */
+.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; }
+.sky-model-workspace[data-native-controls] :where(button:not([class*="el-"])) { cursor: pointer; }
+.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); }
+.sky-model-workspace[data-native-controls] :where(button:not([class*="el-"]):hover:not(:disabled)) { border-color: var(--color-primary); }
+.sky-model-workspace[data-native-controls] :where(button:disabled, input:disabled, select:disabled, textarea:disabled) { opacity: .55; cursor: not-allowed; }
+.sky-model-workspace[data-native-controls] :where(button, input, select, textarea):focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
+@media(max-width:768px) { .sky-model-header { padding: 18px 16px; } .sky-model-workspace__content { padding: 12px; } }