/* ============================================================ GrMine UI — 精致极简组件库（本地最小实现） 默认亮色；暗色模式： 仅 CSS，无 JavaScript 依赖。所有组件以 `gm-` 前缀命名。 ============================================================ */ /* ---- 基础重置 ---- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; font-family: 'Noto Sans SC', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; font-size: 0.95rem; line-height: 1.6; background-color: var(--gm-bg); color: var(--gm-fg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color var(--gm-transition), color var(--gm-transition); } h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em; font-weight: 600; line-height: 1.3; color: var(--gm-fg); } p { margin: 0 0 1em; } a { color: var(--gm-primary); text-decoration: none; transition: color var(--gm-transition); } a:hover { color: var(--gm-primary-strong); } ul, ol { margin: 0; padding: 0; } img, svg { vertical-align: middle; } button { font: inherit; color: inherit; } /* ============================================================ 主题变量：亮色（默认） ============================================================ */ :root { --gm-bg: #f6f7f9; --gm-bg-soft: #eef0f3; --gm-fg: #181a1f; --gm-muted: #6b7280; --gm-faint: #9aa0aa; --gm-primary: #2563eb; --gm-primary-strong: #1d4ed8; --gm-primary-fg: #ffffff; --gm-primary-soft: rgba(37, 99, 235, 0.10); --gm-border: #e4e6ea; --gm-border-strong: #d4d7dd; --gm-card-bg: #ffffff; --gm-card-border: #e6e8ec; --gm-accent: #2563eb; --gm-success: #16a34a; --gm-warning: #d97706; --gm-danger: #dc2626; --gm-info: #2563eb; --gm-success-bg: rgba(22, 163, 74, 0.10); --gm-warning-bg: rgba(217, 119, 6, 0.10); --gm-danger-bg: rgba(220, 38, 38, 0.10); --gm-info-bg: rgba(37, 99, 235, 0.10); --gm-nav-bg: rgba(255, 255, 255, 0.82); --gm-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06); --gm-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.10); --gm-radius-sm: 6px; --gm-radius: 10px; --gm-radius-lg: 14px; --gm-transition: 0.18s ease; } /* ============================================================ 主题变量：暗色覆盖 ============================================================ */ :root[data-theme="dark"] { --gm-bg: #0e1014; --gm-bg-soft: #15181e; --gm-fg: #e9eaec; --gm-muted: #9aa0aa; --gm-faint: #6b7280; --gm-primary: #5b8def; --gm-primary-strong: #7aa2f7; --gm-primary-fg: #0b0d12; --gm-primary-soft: rgba(91, 141, 239, 0.16); --gm-border: #23262e; --gm-border-strong: #30343d; --gm-card-bg: #16191f; --gm-card-border: #23262e; --gm-accent: #5b8def; --gm-success: #4ade80; --gm-warning: #fbbf24; --gm-danger: #f87171; --gm-info: #5b8def; --gm-success-bg: rgba(74, 222, 128, 0.12); --gm-warning-bg: rgba(251, 191, 36, 0.12); --gm-danger-bg: rgba(248, 113, 113, 0.12); --gm-info-bg: rgba(91, 141, 239, 0.14); --gm-nav-bg: rgba(22, 25, 31, 0.82); --gm-shadow: 0 1px 2px rgba(0, 0, 0, 0.40), 0 1px 3px rgba(0, 0, 0, 0.50); --gm-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.50); } /* ============================================================ 容器与栅格 ============================================================ */ .gm-container { width: 100%; max-width: 1140px; margin-inline: auto; padding-inline: 1.25rem; } .gm-container--narrow { max-width: 760px; } .gm-container--fluid { max-width: 100%; } .gm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1.25rem; } .gm-col { min-width: 0; } /* ============================================================ 按钮 ============================================================ */ .gm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 1rem; font-size: 0.95rem; font-weight: 500; line-height: 1.4; border: 1px solid transparent; border-radius: var(--gm-radius-sm); background-color: transparent; color: var(--gm-fg); cursor: pointer; text-decoration: none; white-space: nowrap; user-select: none; transition: background-color var(--gm-transition), border-color var(--gm-transition), color var(--gm-transition), box-shadow var(--gm-transition), transform var(--gm-transition); } .gm-btn:hover { text-decoration: none; } .gm-btn:focus-visible { outline: 2px solid var(--gm-primary); outline-offset: 2px; } .gm-btn--primary { background-color: var(--gm-primary); border-color: var(--gm-primary); color: var(--gm-primary-fg); } .gm-btn--primary:hover { background-color: var(--gm-primary-strong); border-color: var(--gm-primary-strong); color: var(--gm-primary-fg); box-shadow: var(--gm-shadow); transform: translateY(-1px); } .gm-btn--secondary { background-color: var(--gm-bg-soft); border-color: var(--gm-border); color: var(--gm-fg); } .gm-btn--secondary:hover { background-color: var(--gm-border); border-color: var(--gm-border-strong); color: var(--gm-fg); } .gm-btn--ghost { background-color: transparent; border-color: transparent; color: var(--gm-muted); } .gm-btn--ghost:hover { background-color: var(--gm-bg-soft); color: var(--gm-fg); } .gm-btn--lg { padding: 0.7rem 1.5rem; font-size: 1.05rem; } .gm-btn--block { width: 100%; display: flex; } /* ============================================================ 卡片 ============================================================ */ .gm-card { background-color: var(--gm-card-bg); border: 1px solid var(--gm-card-border); border-radius: var(--gm-radius); box-shadow: var(--gm-shadow); overflow: hidden; } .gm-card__header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--gm-card-border); font-weight: 600; } .gm-card__body { padding: 1.25rem; } .gm-card__footer { padding: 0.9rem 1.25rem; border-top: 1px solid var(--gm-card-border); display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; } .gm-card--accent { border-left: 3px solid var(--gm-accent); } /* ============================================================ 导航栏 ============================================================ */ .gm-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1rem; padding: 0.75rem 1.25rem; background-color: var(--gm-nav-bg); border-bottom: 1px solid var(--gm-border); backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px); position: sticky; top: 0; z-index: 50; } .gm-nav__brand { margin-right: auto; font-weight: 700; font-size: 1.1rem; color: var(--gm-fg); } .gm-nav__brand:hover { color: var(--gm-primary); } .gm-nav__items { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; } .gm-nav__item { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.85rem; border-radius: var(--gm-radius-sm); color: var(--gm-muted); font-weight: 500; text-decoration: none; transition: background-color var(--gm-transition), color var(--gm-transition); } .gm-nav__item:hover { color: var(--gm-fg); background-color: var(--gm-bg-soft); } .gm-nav__item.is-active { color: var(--gm-primary); background-color: var(--gm-primary-soft); } /* 主题切换按钮：根据主题显示对应图标 */ .gm-theme-toggle .gm-icon-sun { display: none; } .gm-theme-toggle .gm-icon-moon { display: inline-flex; } [data-theme="dark"] .gm-theme-toggle .gm-icon-sun { display: inline-flex; } [data-theme="dark"] .gm-theme-toggle .gm-icon-moon { display: none; } /* 移动端：导航项堆叠 */ @media (max-width: 640px) { .gm-nav { padding: 0.75rem 1rem; } .gm-nav__brand { margin-right: 0; } .gm-nav__items { width: 100%; } } /* ============================================================ 提示框 ============================================================ */ .gm-alert { border: 1px solid var(--gm-border); border-left-width: 3px; border-radius: var(--gm-radius-sm); padding: 0.85rem 1rem; background-color: var(--gm-card-bg); margin-bottom: 1rem; } .gm-alert:last-child { margin-bottom: 0; } .gm-alert--info { border-left-color: var(--gm-info); background-color: var(--gm-info-bg); } .gm-alert--success { border-left-color: var(--gm-success); background-color: var(--gm-success-bg); } .gm-alert--warning { border-left-color: var(--gm-warning); background-color: var(--gm-warning-bg); } .gm-alert--danger { border-left-color: var(--gm-danger); background-color: var(--gm-danger-bg); } /* ============================================================ 列表 ============================================================ */ .gm-list { list-style: none; margin: 0; padding: 0; } .gm-list__item { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.7rem 0; border-bottom: 1px solid var(--gm-card-border); color: var(--gm-fg); } .gm-list__item:last-child { border-bottom: none; } /* ============================================================ 徽标 ============================================================ */ .gm-badge { display: inline-flex; align-items: center; padding: 0.15rem 0.55rem; font-size: 0.75rem; font-weight: 600; line-height: 1.5; border-radius: 999px; background-color: var(--gm-bg-soft); color: var(--gm-muted); } .gm-badge--primary { background-color: var(--gm-primary-soft); color: var(--gm-primary); } /* ============================================================ 图标与空状态 ============================================================ */ .gm-icon { display: inline-flex; flex-shrink: 0; vertical-align: middle; } .gm-empty { text-align: center; padding: 3rem 1.25rem; } .gm-empty__icon { display: inline-flex; margin-bottom: 1rem; color: var(--gm-faint); } .gm-empty__title { margin: 0 0 0.35rem; font-size: 1.1rem; font-weight: 600; } .gm-empty__text { margin: 0; color: var(--gm-muted); } /* ============================================================ 链接 ============================================================ */ .gm-link { color: var(--gm-primary); font-weight: 500; text-decoration: none; } .gm-link:hover { color: var(--gm-primary-strong); text-decoration: underline; }