/* ---------- 图标 ---------- */ /* 图标是DevExpress包sprite或内联兼容性sprite中的引用且从其周围文本继承其颜色。 在调用站点处以em而非px调大小所以标题中的图标随之增长。 */ .atlas-icon { display: inline-block; vertical-align: text-bottom; flex: 0 0 auto; } /* ---------- 应用栏 ---------- */ /* 栏是我们的而非组件的：三个插槽和一个flex行。拥有它意味着shell的几何在一个 地方活而不是通过组件套件的section/spacer词汇表达。 其自己的规则在shell部分上而非这里 — 这个块曾用不同高度重新声明.atlas-appbar， 所以栏的几何依赖于哪个声明在文件中最后来。 */ .atlas-appbar-section { display: flex; align-items: center; gap: 0.25rem; } .atlas-appbar-spacer { flex: 1 1 auto; } /* ---------- 状态徽章 ---------- */ /* 徽章是着色标签，不是组件。手工写所以重要的一件事 — 饱和填充上可读文本， 在两个样本中 — 在这里陈述一次而不是反对主题自己的颜色配对而战。 */ .atlas-badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.75rem; line-height: 1.5; white-space: nowrap; color: #fff; background-color: #6b7280; } .atlas-badge--success { background-color: #15803d; } .atlas-badge--info { background-color: #0369a1; } .atlas-badge--warning { background-color: #b45309; } .atlas-badge--error { background-color: #b91c1c; } .atlas-badge--primary { background-color: #1d4ed8; } /* 状态指示器 — 着色点 + 标签（参见AtlasStatusDot），DevExpress网格演示的状态风格。 同样的颜色坡道作为徽章所以两个读作一个系统。 */ .atlas-status { display: inline-flex; align-items: center; gap: 0.4rem; } .atlas-status-dot { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background-color: #6b7280; } .atlas-status-dot--success { background-color: #15803d; } .atlas-status-dot--info { background-color: #0369a1; } .atlas-status-dot--warning { background-color: #b45309; } .atlas-status-dot--error { background-color: #b91c1c; } .atlas-status-dot--neutral { background-color: #6b7280; } /* ---------- 仪表板瓷砖 ---------- */ .atlas-tile, .atlas-next-steps { padding: 1rem; border: 1px solid var(--dxds-color-border-neutral-default-rest); border-radius: 6px; /* 白卡，由其边框而非灰色填充描述 — 参见no-grey-panels规则。 */ background-color: var(--dxds-color-surface-neutral-default-rest); } .atlas-tile-header { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; } .atlas-tile-value { margin-top: 0.75rem; font-size: 1.75rem; font-weight: 600; line-height: 1.2; } .atlas-tile-caption { margin-top: 0.25rem; font-size: 0.8125rem; color: var(--dxds-color-content-neutral-subdued-rest); } .atlas-next-steps h2 { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 600; } /* 一个读作按钮的锚 — 用于动作是导航（下载）且真实按钮会是错元素的地方。 */ .atlas-linkbutton { display: inline-flex; align-items: center; padding: 0.3rem 0.9rem; border-radius: 4px; background-color: var(--dxds-color-surface-primary-default-rest); color: var(--dxds-color-content-neutral-compound-on-surface-rest); font-size: 0.875rem; text-decoration: none; } /* ---------- 登录 ---------- */ /* 登录页静态呈现且使用原生输入，所以它无法借用组件的样式 — 它必须自己带。 针对纯颜色而非主题的自定义属性写：此页在任何主题样式表被注入前呈现， 所以变量会在第一次绘制时解析为无且表单会闪烁无样式。 */ .atlas-input-wrap { display: block; width: 100%; border: 1px solid rgb(0 0 0 / 20%); border-radius: 4px; /* 声明为变量，不仅仅是颜色：包装器绘制字段，但必须匹配它的自动填充掩码在内部输入上设置。 */ --atlas-field-bg: #fff; background-color: var(--atlas-field-bg); } .atlas-input { width: 100%; padding: 0.45rem 0.6rem; border: 0; border-radius: 4px; background: transparent; color: #111; font: inherit; } .atlas-input:focus { outline: none; } .atlas-checkbox { width: 1rem; height: 1rem; accent-color: #1d4ed8; } .atlas-login-submit { width: 100%; /*padding: 0.5rem 1rem;*/ border: 0; border-radius: 4px; color: #fff; font: inherit; font-weight: 600; cursor: pointer; } /* data-theme，不是prefers-color-scheme。 登录页静态呈现，但theme.js仍从在它如每其他页，所以解析的样本在表单 绘制前在上。改为从OS键控意味着深色模式的机器获深色登录页无论应用 设置为什么 — 且"跟随系统"是偏好theme.js已在此点解析，所以这也跟随OS 当那是用户要求的时。 */ :root[data-theme="dark"] .atlas-input-wrap { --atlas-field-bg: #1f1f1f; border-color: rgb(255 255 255 / 25%); } :root[data-theme="dark"] .atlas-input { color: #f5f5f5; }