kate522
9375b1c30c
- assets/vendor 全量迁移: fontawesome5→assets/fontawesome5, css→assets/css, js→assets/js/runtime(避开 14 个同名自有文件), img 合并去重→assets/img, fonts→assets/fonts; 删除 assets/vendor - libs 五个与 widgets/third-party 字节相同的库不重复入库, loader paths 改指向 - 运行时切换: _win.uri=assets 根, loader baseUrl=/js/runtime, enlighter 注入 路径同步; PHP 7 个引用文件切换并改名 $zibll_*→$runtime_* - 去品牌: Qinver 头注释/品牌 console.log/演示链接清除, 默认文案中性化 - 功能标识符改名: zib__→aksrt__, zib_ajax→aksrt_ajax, window.zib→ window.aksrtLegacy, zibllblock/*→aksrtblock/*, .zib-widget→.aksrt-panel, .zib-slider→.aksrt-slider, zib_menu_options meta 键等 - 自有 CSS 改名: legacy-utilities/compat-vars/footer shell - admin SPA 重建; 契约测试同步(路径/断言/文件更名) - 例外保留: tests/visual 对照环境与 fixtures 前缀(外部 Zibll 产品引用) 验证: php -l 133 个改动文件通过; runtime 86 个 JS node --check 通过; 契约测试 68/70(2 个失败经 stash 对照确认为存量问题)
1033 lines
25 KiB
Plaintext
1033 lines
25 KiB
Plaintext
/**
|
||
* AKSRT Design Tokens v7 — 1:1 legacy Alignment
|
||
* ------------------------------------------------------------
|
||
* 单一真理源（Single Source of Truth）
|
||
* 所有颜色、字体、间距、动效都从此处读取，禁止在组件内硬编码。
|
||
* 严格对齐 legacy main.css 的视觉值。
|
||
*/
|
||
|
||
:root {
|
||
/* ===== Primary — legacy theme-color (#f04494 pink) ===== */
|
||
--color-primary: #f04494;
|
||
--color-primary-hover: #e0307e;
|
||
--color-primary-active: #c9206d;
|
||
--color-primary-soft: rgba(240, 68, 148, 0.10);
|
||
--color-primary-softer: rgba(240, 68, 148, 0.05);
|
||
--color-on-primary: #FFFFFF;
|
||
|
||
/* ===== Ink (text) — 对齐 legacy --key-color / --main-color / --muted-color ===== */
|
||
--color-ink: #333333; /* legacy --key-color */
|
||
--color-ink-2: #4e5358; /* legacy --main-color */
|
||
--color-ink-3: #777777; /* legacy --muted-color */
|
||
--color-ink-4: #999999; /* legacy --muted-2-color */
|
||
|
||
/* ===== Surface — 对齐 legacy --body-bg-color / --main-bg-color / --muted-bg-color ===== */
|
||
--surface-page: #f5f6f7; /* legacy --body-bg-color */
|
||
--surface-1: #FFFFFF; /* legacy --main-bg-color */
|
||
--surface-2: #eeeeee; /* legacy --muted-bg-color */
|
||
--surface-3: #e8e8e8; /* 输入框 / code */
|
||
|
||
/* ===== Borders — 对齐 legacy --main-border-color ===== */
|
||
--color-line: rgba(50, 50, 50, 0.06);
|
||
--color-line-soft: rgba(0, 0, 0, 0.03);
|
||
|
||
/* ===== State colors ===== */
|
||
--color-success: #10B981;
|
||
--color-warning: #F59E0B;
|
||
--color-error: #EF4444;
|
||
--color-info: #3B82F6;
|
||
|
||
/* ===== Accent (action green — legacy tabbar/CTA) ===== */
|
||
--color-accent: #18a058;
|
||
--color-accent-soft: rgba(24, 160, 88, 0.12);
|
||
--color-accent-shadow: rgba(24, 160, 88, 0.28);
|
||
|
||
/* ===== Fonts — 对齐 legacy（系统默认字体栈）===== */
|
||
--font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||
--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||
--font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||
--font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||
|
||
/* ===== Type scale ===== */
|
||
--text-xs: 0.75rem; /* 12 */
|
||
--text-sm: 0.875rem; /* 14 */
|
||
--text-base: 1rem; /* 16 */
|
||
--text-md: 1.125rem; /* 18 */
|
||
--text-lg: 1.25rem; /* 20 */
|
||
--text-xl: 1.5rem; /* 24 */
|
||
--text-2xl: 1.875rem; /* 30 */
|
||
--text-3xl: 2.25rem; /* 36 */
|
||
--text-4xl: 3rem; /* 48 */
|
||
--text-5xl: 3.75rem; /* 60 */
|
||
--leading-tight: 1.2;
|
||
--leading-snug: 1.4;
|
||
--leading-normal: 1.6; /* legacy body line-height */
|
||
--leading-relaxed: 1.6;
|
||
|
||
/* ===== Spacing (4px base) ===== */
|
||
--space-1: 4px;
|
||
--space-2: 8px;
|
||
--space-3: 12px;
|
||
--space-4: 16px;
|
||
--space-5: 20px;
|
||
--space-6: 24px;
|
||
--space-7: 32px;
|
||
--space-8: 40px;
|
||
--space-9: 48px;
|
||
--space-10: 64px;
|
||
--space-11: 80px;
|
||
--space-12: 96px;
|
||
|
||
/* ===== Radius — 对齐 legacy --main-radius: 8px ===== */
|
||
--radius-sm: 4px;
|
||
--radius: 8px;
|
||
--radius-lg: 8px;
|
||
--radius-xl: 12px;
|
||
--radius-pill: 100px;
|
||
--radius-avatar: 50%;
|
||
|
||
/* ===== Shadows — 对齐 legacy --main-shadow: rgba(116,116,116,0.08) ===== */
|
||
--shadow-sm: 0 0 10px rgba(116, 116, 116, 0.08);
|
||
--shadow: 0 0 10px rgba(116, 116, 116, 0.08);
|
||
--shadow-lg: 0 0 10px rgba(116, 116, 116, 0.12);
|
||
--shadow-drawer: 0 8px 40px rgba(0, 0, 0, 0.20);
|
||
|
||
/* ===== Layout — 对齐 legacy --mian-max-width: 1200px ===== */
|
||
--nav-height: 60px;
|
||
--container: 1200px;
|
||
--container-wide: 1440px;
|
||
--container-read: 720px;
|
||
--container-page: 860px;
|
||
--sidebar-width: 300px;
|
||
--content-gap: 48px;
|
||
--sidebar-bp: 1024px;
|
||
|
||
/* ===== Motion ===== */
|
||
--ease: cubic-bezier(.4, 0, .2, 1);
|
||
--ease-out: cubic-bezier(.16, 1, .3, 1);
|
||
--ease-spring: cubic-bezier(.34, 1.56, .64, 1);
|
||
--dur-fast: 0.15s;
|
||
--dur: 0.25s;
|
||
--dur-slow: 0.4s;
|
||
|
||
/* ===== Focus Ring — 对齐 legacy focus-shadow-color ===== */
|
||
--focus-ring: 0 0 2px 3px rgba(253, 83, 161, 0.4);
|
||
|
||
/* ===== Z-index layers ===== */
|
||
--z-dropdown: 100;
|
||
--z-sticky: 200;
|
||
--z-fixed: 300;
|
||
--z-overlay: 400;
|
||
--z-modal: 500;
|
||
--z-popover: 600;
|
||
--z-toast: 700;
|
||
--z-tooltip: 800;
|
||
|
||
/* ===== Button sizes — 对齐 legacy ===== */
|
||
--radius-btn: 4px;
|
||
--btn-sm-h: 28px;
|
||
--btn-md-h: 34px;
|
||
--btn-lg-h: 44px;
|
||
|
||
/* ===== Card density — 对齐 legacy .box-body { padding: 15px } ===== */
|
||
--card-padding: 15px;
|
||
--card-padding-sm: 10px;
|
||
--card-gap: 16px;
|
||
|
||
/* ===== Skeleton loader ===== */
|
||
--skeleton-base: var(--surface-2);
|
||
--skeleton-shine: var(--surface-1);
|
||
|
||
/* ===== Extended tokens (used by components) ===== */
|
||
--color-primary-light: var(--color-primary-soft);
|
||
--color-surface: var(--surface-1);
|
||
--color-line-strong: var(--color-line);
|
||
--color-bg-hover: var(--surface-2);
|
||
--color-border-light: var(--color-line-soft);
|
||
--color-fill: var(--surface-2);
|
||
--color-warning-bg: #fffbe6;
|
||
--color-warning-text: #ad6800;
|
||
|
||
--text-secondary: var(--color-ink-3);
|
||
--text-tertiary: var(--color-ink-4);
|
||
|
||
--surface-active: var(--surface-2);
|
||
--surface-card: var(--surface-1);
|
||
--surface-hover: var(--surface-2);
|
||
--surface-secondary: var(--surface-2);
|
||
|
||
--radius-code: var(--radius);
|
||
--radius-full: 100px;
|
||
--shadow-xl: 0 0 10px rgba(116, 116, 116, 0.12);
|
||
--space-16: 64px;
|
||
--z-floating: 900;
|
||
|
||
--transition-fast: 0.15s ease;
|
||
--transition-base: 0.25s ease;
|
||
|
||
/* ===== Composite / Context tokens — 对齐 legacy ===== */
|
||
--header-bg: var(--blur-bg);
|
||
--header-color: var(--color-ink-2);
|
||
--footer-bg: var(--surface-1);
|
||
--footer-color: var(--color-ink-4);
|
||
--blur-bg: rgba(255, 255, 255, 0.80);
|
||
--float-btn-bg: rgba(200, 200, 200, 0.40);
|
||
|
||
/* ===== AKSRT-to-AKSRT canonical aliases ===== */
|
||
--content-max: var(--container);
|
||
--font-heading: var(--font-ui);
|
||
--radius-card: var(--radius);
|
||
--radius-md: var(--radius);
|
||
--color-primary-50: var(--color-primary-soft);
|
||
--color-primary-dark: var(--color-primary-active);
|
||
--shadow-md: var(--shadow);
|
||
--mini-radius: calc(var(--radius) / 1.4);
|
||
--single-cover-scale: 35%;
|
||
|
||
/* ===== Avatar size system — legacy --this-size 等价 ===== */
|
||
--aksrt-avatar-size-xs: 24px;
|
||
--aksrt-avatar-size-sm: 32px;
|
||
--aksrt-avatar-size: 40px;
|
||
--aksrt-avatar-size-lg: 56px;
|
||
--aksrt-avatar-size-xl: 80px;
|
||
|
||
/* ===== Post card thumbnail scale ===== */
|
||
--aksrt-card-thumb-scale: 56.25%; /* 16:9 */
|
||
|
||
/* ===== Multi-color palette (for buttons / badges / gradients) ===== */
|
||
--aksrt-rose: #f43f5e;
|
||
--aksrt-rose-soft: rgba(244, 63, 94, 0.12);
|
||
--aksrt-blue: #3b82f6;
|
||
--aksrt-blue-soft: rgba(59, 130, 246, 0.12);
|
||
--aksrt-green: #10b981;
|
||
--aksrt-green-soft: rgba(16, 185, 129, 0.12);
|
||
--aksrt-orange: #f97316;
|
||
--aksrt-orange-soft:rgba(249, 115, 22, 0.12);
|
||
--aksrt-purple: #8b5cf6;
|
||
--aksrt-purple-soft:rgba(139, 92, 246, 0.12);
|
||
--aksrt-cyan: #06b6d4;
|
||
--aksrt-cyan-soft: rgba(6, 182, 212, 0.12);
|
||
--aksrt-yellow: #eab308;
|
||
--aksrt-yellow-soft:rgba(234, 179, 8, 0.12);
|
||
--aksrt-red: #ef4444;
|
||
--aksrt-red-soft: rgba(239, 68, 68, 0.12);
|
||
--aksrt-teal: #14b8a6;
|
||
--aksrt-teal-soft: rgba(20, 184, 166, 0.12);
|
||
--aksrt-indigo: #6366f1;
|
||
--aksrt-indigo-soft:rgba(99, 102, 241, 0.12);
|
||
--aksrt-pink: #ec4899;
|
||
--aksrt-pink-soft: rgba(236, 72, 153, 0.12);
|
||
|
||
/* ===== VIP / special gradients ===== */
|
||
--aksrt-vip-gold-1: #f6d365;
|
||
--aksrt-vip-gold-2: #fda085;
|
||
--aksrt-grad-sunset-1: #f093fb;
|
||
--aksrt-grad-sunset-2: #f5576c;
|
||
--aksrt-grad-ocean-1: #4facfe;
|
||
--aksrt-grad-ocean-2: #00f2fe;
|
||
--aksrt-grad-forest-1: #43e97b;
|
||
--aksrt-grad-forest-2: #38f9d7;
|
||
--aksrt-grad-night-1: #a18cd1;
|
||
--aksrt-grad-night-2: #fbc2eb;
|
||
--aksrt-grad-fire-1: #f83600;
|
||
--aksrt-grad-fire-2: #f9d423;
|
||
|
||
/* ===== Component sizing ===== */
|
||
--aksrt-toggle-w: 44px;
|
||
--aksrt-toggle-h: 24px;
|
||
--aksrt-stepper-h: 36px;
|
||
--aksrt-badge-h: 22px;
|
||
|
||
/* ===== Legacy name bridge ===== */
|
||
--text-1: var(--color-ink);
|
||
--text-2: var(--color-ink-2);
|
||
--text-3: var(--color-ink-3);
|
||
--border: var(--color-line);
|
||
--color-text-1: var(--color-ink);
|
||
--color-text-2: var(--color-ink-2);
|
||
--color-text-3: var(--color-ink-3);
|
||
--color-primary-bg: var(--color-primary-softer);
|
||
--color-danger: var(--color-error);
|
||
}
|
||
|
||
/* ============================================================
|
||
* Blur-bg fallback cascade (mirrors legacy behaviour)
|
||
* ============================================================ */
|
||
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
|
||
:root {
|
||
--blur-bg: var(--surface-1);
|
||
--header-bg: var(--surface-1);
|
||
}
|
||
}
|
||
|
||
body.modal-open,
|
||
body.dialog-open {
|
||
--blur-bg: var(--surface-1);
|
||
--header-bg: var(--surface-1);
|
||
}
|
||
|
||
body.modal-open .site-nav,
|
||
body.modal-open .footer-tabbar,
|
||
body.modal-open .float-right .float-btn,
|
||
body.dialog-open .site-nav,
|
||
body.dialog-open .footer-tabbar,
|
||
body.dialog-open .float-right .float-btn {
|
||
backdrop-filter: none !important;
|
||
-webkit-backdrop-filter: none !important;
|
||
}
|
||
|
||
/* ============================================================
|
||
* Dark Theme — 对齐 legacy .dark-theme (#292a2d 范围)
|
||
* ============================================================ */
|
||
html.dark {
|
||
--color-ink: #f8fafc;
|
||
--color-ink-2: #e5eef7;
|
||
--color-ink-3: #b4b6bb;
|
||
--color-ink-4: #888a8f;
|
||
|
||
--surface-page: #292a2d;
|
||
--surface-1: #323335;
|
||
--surface-2: #2d2e31;
|
||
--surface-3: #3a3b3e;
|
||
|
||
--color-line: rgba(114, 114, 114, 0.1);
|
||
--color-line-soft: rgba(184, 184, 184, 0.02);
|
||
|
||
--color-primary-soft: rgba(240, 68, 148, 0.16);
|
||
--color-primary-softer: rgba(240, 68, 148, 0.08);
|
||
|
||
--color-primary-light: var(--color-primary-soft);
|
||
--color-surface: var(--surface-1);
|
||
--color-line-strong: var(--color-line);
|
||
--color-bg-hover: var(--surface-2);
|
||
--color-border-light: var(--color-line-soft);
|
||
--color-fill: var(--surface-2);
|
||
|
||
--text-secondary: var(--color-ink-3);
|
||
--text-tertiary: var(--color-ink-4);
|
||
|
||
--surface-active: var(--surface-2);
|
||
--surface-card: var(--surface-1);
|
||
--surface-hover: var(--surface-2);
|
||
--surface-secondary: var(--surface-2);
|
||
|
||
--shadow-xl: 0 0 10px rgba(24, 24, 24, 0.15);
|
||
|
||
--shadow-sm: 0 0 10px rgba(24, 24, 24, 0.1);
|
||
--shadow: 0 0 10px rgba(24, 24, 24, 0.1);
|
||
--shadow-lg: 0 0 10px rgba(24, 24, 24, 0.15);
|
||
--shadow-drawer: 0 8px 40px rgba(0, 0, 0, 0.55);
|
||
|
||
--blur-bg: rgba(50, 51, 53, 0.80);
|
||
--float-btn-bg: rgba(70, 70, 70, 0.40);
|
||
--header-bg: var(--blur-bg);
|
||
--footer-bg: var(--surface-1);
|
||
--footer-color: var(--color-ink-4);
|
||
--shadow-md: var(--shadow);
|
||
|
||
--skeleton-base: #3a3b3e;
|
||
--skeleton-shine: #444548;
|
||
|
||
/* Multi-color palette — dark mode: same hue, softer tint backgrounds */
|
||
--aksrt-rose-soft: rgba(244, 63, 94, 0.18);
|
||
--aksrt-blue-soft: rgba(59, 130, 246, 0.18);
|
||
--aksrt-green-soft: rgba(16, 185, 129, 0.18);
|
||
--aksrt-orange-soft:rgba(249, 115, 22, 0.18);
|
||
--aksrt-purple-soft:rgba(139, 92, 246, 0.18);
|
||
--aksrt-cyan-soft: rgba(6, 182, 212, 0.18);
|
||
--aksrt-yellow-soft:rgba(234, 179, 8, 0.18);
|
||
--aksrt-red-soft: rgba(239, 68, 68, 0.18);
|
||
--aksrt-teal-soft: rgba(20, 184, 166, 0.18);
|
||
--aksrt-indigo-soft:rgba(99, 102, 241, 0.18);
|
||
--aksrt-pink-soft: rgba(236, 72, 153, 0.18);
|
||
}
|
||
|
||
/* Dark mode component refinements */
|
||
html.dark .site-nav {
|
||
border-bottom-color: var(--color-line);
|
||
box-shadow: none;
|
||
}
|
||
|
||
html.dark .footer-tabbar {
|
||
background: rgba(50, 51, 53, 0.80);
|
||
box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.20);
|
||
}
|
||
|
||
html.dark .n-drawer,
|
||
html.dark .n-modal,
|
||
html.dark .n-dialog {
|
||
background: var(--surface-1);
|
||
}
|
||
|
||
html.dark .post-card,
|
||
html.dark .widget,
|
||
html.dark .aksrt-theme-box,
|
||
html.dark .theme-box {
|
||
border-color: var(--color-line);
|
||
}
|
||
/**
|
||
* AKSRT Reset
|
||
* 现代精简 reset，结合 box-sizing 与 a11y 友好的默认值。
|
||
*/
|
||
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html {
|
||
font-size: 16px;
|
||
scroll-behavior: smooth;
|
||
-webkit-text-size-adjust: 100%;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
overflow-x: hidden;
|
||
text-rendering: optimizeLegibility;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
font-family: var(--font-body);
|
||
font-size: var(--text-base);
|
||
line-height: var(--leading-normal);
|
||
background-color: var(--surface-page);
|
||
color: var(--color-ink-2);
|
||
transition: background-color 0.25s ease, color 0.25s ease;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* 媒体元素 */
|
||
img,
|
||
picture,
|
||
video,
|
||
canvas,
|
||
svg {
|
||
display: block;
|
||
max-width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
/* 表单元素继承字体 */
|
||
input,
|
||
button,
|
||
textarea,
|
||
select {
|
||
font: inherit;
|
||
color: inherit;
|
||
}
|
||
|
||
button {
|
||
background: none;
|
||
border: 0;
|
||
padding: 0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* 链接 */
|
||
a {
|
||
color: inherit;
|
||
text-decoration: none;
|
||
transition: color var(--dur-fast) var(--ease);
|
||
}
|
||
|
||
a:hover {
|
||
color: var(--color-primary);
|
||
}
|
||
|
||
/* 焦点环：a11y 关键 */
|
||
:focus {
|
||
outline: none;
|
||
}
|
||
|
||
:focus-visible {
|
||
outline: none;
|
||
box-shadow: var(--focus-ring);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
/* 选区色 */
|
||
::selection {
|
||
background: var(--color-primary-soft);
|
||
color: var(--color-ink);
|
||
}
|
||
|
||
/* 屏幕阅读器隐藏 */
|
||
.screen-reader-text,
|
||
.sr-only {
|
||
position: absolute !important;
|
||
width: 1px;
|
||
height: 1px;
|
||
padding: 0;
|
||
margin: -1px;
|
||
overflow: hidden;
|
||
clip: rect(0, 0, 0, 0);
|
||
white-space: nowrap;
|
||
border: 0;
|
||
}
|
||
|
||
.screen-reader-text:focus,
|
||
.sr-only:focus {
|
||
position: fixed !important;
|
||
top: 16px;
|
||
left: 16px;
|
||
width: auto;
|
||
height: auto;
|
||
padding: 8px 16px;
|
||
background: var(--surface-1);
|
||
color: var(--color-ink);
|
||
z-index: 100000;
|
||
clip: auto;
|
||
box-shadow: var(--shadow-lg);
|
||
border-radius: var(--radius);
|
||
}
|
||
|
||
/* 减少动效偏好 */
|
||
@media (prefers-reduced-motion: reduce) {
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
animation-duration: 0.01ms !important;
|
||
animation-iteration-count: 1 !important;
|
||
transition-duration: 0.01ms !important;
|
||
scroll-behavior: auto !important;
|
||
}
|
||
}
|
||
/**
|
||
* AKSRT Typography — 1:1 legacy Alignment
|
||
*
|
||
* 对齐 legacy main.css 的排版系统
|
||
*/
|
||
|
||
/* ===== 全局标题 — 对齐 legacy line 8947 ===== */
|
||
h1, h2, h3, h4, h5, h6 {
|
||
font-weight: 700;
|
||
margin: 20px 0 10px;
|
||
color: var(--key-color, #333);
|
||
}
|
||
|
||
h1 { font-size: 22px; }
|
||
h2 { font-size: 20px; }
|
||
h3 { font-size: 18px; }
|
||
h4 { font-size: 16px; }
|
||
h5 { font-size: 15px; }
|
||
h6 { font-size: 14px; }
|
||
|
||
/* ===== 文章正文 — 对齐 legacy line 8740 ===== */
|
||
.wp-posts-content,
|
||
.entry-content,
|
||
.prose {
|
||
font-size: 16px;
|
||
line-height: 2;
|
||
color: var(--main-color, #4e5358);
|
||
min-height: 90px;
|
||
}
|
||
|
||
/* ===== 文章内标题 — 对齐 legacy line 8947 ===== */
|
||
.wp-posts-content h1,
|
||
.wp-posts-content h2,
|
||
.wp-posts-content h3,
|
||
.wp-posts-content h4,
|
||
.wp-posts-content h5,
|
||
.entry-content h1,
|
||
.entry-content h2,
|
||
.entry-content h3,
|
||
.entry-content h4,
|
||
.entry-content h5,
|
||
.prose h1,
|
||
.prose h2,
|
||
.prose h3,
|
||
.prose h4,
|
||
.prose h5 {
|
||
font-weight: 700;
|
||
margin: 20px 0 10px;
|
||
color: var(--key-color, #333);
|
||
}
|
||
|
||
.wp-posts-content h1,
|
||
.entry-content h1,
|
||
.prose h1 { font-size: 22px; }
|
||
|
||
.wp-posts-content h2,
|
||
.entry-content h2,
|
||
.prose h2 { font-size: 20px; }
|
||
|
||
.wp-posts-content h3,
|
||
.entry-content h3,
|
||
.prose h3 { font-size: 18px; }
|
||
|
||
.wp-posts-content h4,
|
||
.entry-content h4,
|
||
.prose h4 { font-size: 16px; }
|
||
|
||
/* ===== 段落 — 对齐 legacy line 8999 ===== */
|
||
.wp-posts-content p,
|
||
.entry-content p,
|
||
.prose p {
|
||
margin: 0 0 20px;
|
||
word-wrap: break-word;
|
||
}
|
||
|
||
/* ===== 链接 — 对齐 legacy line 8836 ===== */
|
||
.wp-posts-content a,
|
||
.entry-content a,
|
||
.prose a {
|
||
color: var(--focus-color, #f04494);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.wp-posts-content a:hover,
|
||
.entry-content a:hover,
|
||
.prose a:hover {
|
||
color: var(--focus-color, #f04494);
|
||
}
|
||
|
||
/* ===== 图片 — 对齐 legacy line 8850 ===== */
|
||
.wp-posts-content img,
|
||
.entry-content img,
|
||
.prose img {
|
||
max-width: 100%;
|
||
height: auto;
|
||
display: block;
|
||
margin: auto;
|
||
}
|
||
|
||
/* ===== 内联代码 — 对齐 legacy line 8844 ===== */
|
||
.wp-posts-content code:not(pre code),
|
||
.entry-content code:not(pre code),
|
||
.prose code:not(pre code) {
|
||
color: #ff3c98;
|
||
background: rgba(253, 153, 153, 0.2);
|
||
font-family: var(--font-mono, monospace);
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
/* ===== 代码块 — 对齐 legacy ===== */
|
||
.wp-posts-content pre,
|
||
.entry-content pre,
|
||
.prose pre {
|
||
position: relative;
|
||
background: #282c34;
|
||
color: #abb2bf;
|
||
padding: 15px;
|
||
border-radius: var(--main-radius, 8px);
|
||
overflow-x: auto;
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
margin: 0 0 20px;
|
||
}
|
||
|
||
.wp-posts-content pre code,
|
||
.entry-content pre code,
|
||
.prose pre code {
|
||
color: inherit;
|
||
background: none;
|
||
padding: 0;
|
||
font-size: inherit;
|
||
}
|
||
|
||
/* ===== 表格 — 对齐 legacy line 8897 ===== */
|
||
.wp-posts-content table,
|
||
.entry-content table,
|
||
.prose table {
|
||
font-size: 14px;
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin: 0 0 20px;
|
||
}
|
||
|
||
.wp-posts-content th,
|
||
.wp-posts-content td,
|
||
.entry-content th,
|
||
.entry-content td,
|
||
.prose th,
|
||
.prose td {
|
||
border: 1px solid var(--main-border-color, rgba(50, 50, 50, 0.06));
|
||
padding: 8px;
|
||
}
|
||
|
||
.wp-posts-content th,
|
||
.entry-content th,
|
||
.prose th {
|
||
background: var(--muted-border-color, rgba(0, 0, 0, 0.03));
|
||
font-weight: 700;
|
||
}
|
||
|
||
.wp-posts-content tr:hover,
|
||
.entry-content tr:hover,
|
||
.prose tr:hover {
|
||
background-color: rgba(240, 68, 148, 0.05);
|
||
}
|
||
|
||
/* ===== 列表 — 对齐 legacy line 8977 ===== */
|
||
.wp-posts-content ul,
|
||
.wp-posts-content ol,
|
||
.entry-content ul,
|
||
.entry-content ol,
|
||
.prose ul,
|
||
.prose ol {
|
||
margin: 10px 0 20px 15px;
|
||
padding-left: 15px;
|
||
}
|
||
|
||
.wp-posts-content li,
|
||
.entry-content li,
|
||
.prose li {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
/* ===== 引用 — 对齐 legacy line 680 ===== */
|
||
.wp-posts-content blockquote,
|
||
.entry-content blockquote,
|
||
.prose blockquote {
|
||
padding: 15px 20px;
|
||
margin: 0 0 20px;
|
||
border-left: 4px solid var(--main-border-color, rgba(50, 50, 50, 0.06));
|
||
background: var(--muted-border-color, rgba(0, 0, 0, 0.03));
|
||
font-size: 16px;
|
||
color: var(--muted-color, #777);
|
||
border-radius: 0;
|
||
}
|
||
|
||
.wp-posts-content blockquote p:last-child,
|
||
.entry-content blockquote p:last-child,
|
||
.prose blockquote p:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
/* ===== 水平分割线 — 对齐 legacy line 676 ===== */
|
||
hr {
|
||
border-color: var(--main-border-color, rgba(50, 50, 50, 0.06));
|
||
}
|
||
|
||
/* ===== Strong / Bold ===== */
|
||
strong, b {
|
||
font-weight: 700;
|
||
}
|
||
/**
|
||
* AKSRT Buttons — 1:1 legacy Alignment
|
||
*
|
||
* 对齐 legacy .but 系统：
|
||
* - 正常字重 (normal)
|
||
* - 4px 圆角
|
||
* - 灰色默认背景
|
||
* - opacity hover
|
||
*/
|
||
|
||
.btn,
|
||
.btn-primary,
|
||
.btn-outline,
|
||
.btn-ghost,
|
||
.btn-danger {
|
||
--btn-h: 34px;
|
||
--btn-px: 12px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 6px;
|
||
height: var(--btn-h);
|
||
padding: 0 var(--btn-px);
|
||
font-size: var(--text-sm);
|
||
font-weight: normal;
|
||
line-height: 1.44;
|
||
border: 1px solid transparent;
|
||
border-radius: var(--radius-btn);
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
user-select: none;
|
||
text-decoration: none;
|
||
transition: opacity var(--dur-fast) var(--ease),
|
||
background var(--dur-fast) var(--ease),
|
||
border-color var(--dur-fast) var(--ease),
|
||
color var(--dur-fast) var(--ease);
|
||
}
|
||
|
||
/* 尺寸变体 */
|
||
.btn-sm { --btn-h: 28px; --btn-px: 8px; font-size: var(--text-xs); }
|
||
.btn-lg { --btn-h: 44px; --btn-px: 18px; font-size: var(--text-base); }
|
||
|
||
/* === Default (gray background, like legacy .but default) === */
|
||
.btn {
|
||
background: rgba(136, 136, 136, 0.1);
|
||
color: #888;
|
||
}
|
||
|
||
.btn:hover {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* === Primary === */
|
||
.btn-primary {
|
||
background: var(--color-primary);
|
||
color: var(--color-on-primary);
|
||
border-color: var(--color-primary);
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
opacity: 0.85;
|
||
color: var(--color-on-primary);
|
||
}
|
||
|
||
.btn-primary:active {
|
||
opacity: 1;
|
||
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
/* === Outline === */
|
||
.btn-outline {
|
||
background: transparent;
|
||
color: var(--color-ink-2);
|
||
border-color: var(--color-line);
|
||
}
|
||
|
||
.btn-outline:hover {
|
||
border-color: var(--color-primary);
|
||
color: var(--color-primary);
|
||
opacity: 1;
|
||
}
|
||
|
||
/* === Ghost === */
|
||
.btn-ghost {
|
||
background: transparent;
|
||
color: var(--color-ink-2);
|
||
border-color: transparent;
|
||
}
|
||
|
||
.btn-ghost:hover {
|
||
background: rgba(136, 136, 136, 0.1);
|
||
opacity: 1;
|
||
}
|
||
|
||
/* === Danger === */
|
||
.btn-danger {
|
||
background: var(--color-error);
|
||
color: #fff;
|
||
border-color: var(--color-error);
|
||
}
|
||
|
||
.btn-danger:hover {
|
||
opacity: 0.85;
|
||
color: #fff;
|
||
}
|
||
|
||
/* === Disabled === */
|
||
.btn:disabled,
|
||
.btn-primary:disabled,
|
||
.btn-outline:disabled,
|
||
.btn-ghost:disabled,
|
||
.btn-danger:disabled {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* === Icon button === */
|
||
.btn-icon {
|
||
width: var(--btn-h);
|
||
padding: 0;
|
||
justify-content: center;
|
||
}
|
||
|
||
.btn-icon.btn-sm { width: 28px; }
|
||
.btn-icon.btn-lg { width: 44px; }
|
||
|
||
/* === Full width === */
|
||
.btn-block {
|
||
width: 100%;
|
||
}
|
||
/**
|
||
* AKSRT Forms — 1:1 legacy Alignment
|
||
*
|
||
* 对齐 legacy .form-control：
|
||
* - 灰色背景 (#f5f6f7)
|
||
* - 透明边框
|
||
* - 34px 高度
|
||
* - 8px 圆角
|
||
* - focus 时粉色边框 + 光晕
|
||
*/
|
||
|
||
/* ===== Field Wrapper ===== */
|
||
.field {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
|
||
.field-label {
|
||
font-size: var(--text-sm);
|
||
font-weight: 600;
|
||
color: var(--color-ink);
|
||
}
|
||
|
||
.field-help {
|
||
font-size: var(--text-xs);
|
||
color: var(--color-ink-3);
|
||
}
|
||
|
||
.field-error {
|
||
font-size: var(--text-xs);
|
||
color: var(--color-error);
|
||
}
|
||
|
||
/* ===== Input / Textarea / Select — 对齐 legacy .form-control ===== */
|
||
.input,
|
||
.textarea,
|
||
.select,
|
||
input[type="text"].form-input,
|
||
input[type="email"].form-input,
|
||
input[type="password"].form-input,
|
||
input[type="search"].form-input,
|
||
input[type="url"].form-input,
|
||
input[type="tel"].form-input,
|
||
textarea.form-textarea,
|
||
select.form-select {
|
||
width: 100%;
|
||
height: 34px;
|
||
padding: 6px 12px;
|
||
font-size: 14px;
|
||
color: var(--color-ink);
|
||
background: var(--surface-page);
|
||
border: 1px solid transparent;
|
||
border-radius: var(--radius);
|
||
transition: border-color var(--dur-fast) var(--ease),
|
||
box-shadow var(--dur-fast) var(--ease);
|
||
}
|
||
|
||
.textarea,
|
||
textarea.form-textarea {
|
||
height: auto;
|
||
min-height: 120px;
|
||
padding: 12px;
|
||
line-height: var(--leading-snug);
|
||
resize: vertical;
|
||
}
|
||
|
||
.input:hover,
|
||
.textarea:hover,
|
||
.select:hover {
|
||
border-color: var(--color-primary);
|
||
}
|
||
|
||
.input:focus,
|
||
.textarea:focus,
|
||
.select:focus {
|
||
outline: none;
|
||
border-color: var(--color-primary);
|
||
box-shadow: 0 0 2px 3px rgba(253, 83, 161, 0.4);
|
||
}
|
||
|
||
.input::placeholder,
|
||
.textarea::placeholder {
|
||
color: var(--color-ink-4);
|
||
}
|
||
|
||
/* ===== Select ===== */
|
||
.select,
|
||
select.form-select {
|
||
appearance: none;
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23777' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
|
||
background-repeat: no-repeat;
|
||
background-position: right 12px center;
|
||
padding-right: 32px;
|
||
}
|
||
|
||
/* ===== Checkbox / Radio ===== */
|
||
.checkbox,
|
||
.radio {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
cursor: pointer;
|
||
font-size: var(--text-sm);
|
||
color: var(--color-ink-2);
|
||
}
|
||
|
||
.checkbox input,
|
||
.radio input {
|
||
width: 16px;
|
||
height: 16px;
|
||
accent-color: var(--color-primary);
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* ===== Input Group ===== */
|
||
.input-group {
|
||
display: flex;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.input-group .input {
|
||
border-radius: var(--radius) 0 0 var(--radius);
|
||
}
|
||
|
||
.input-group .btn {
|
||
border-radius: 0 var(--radius) var(--radius) 0;
|
||
}
|
||
|
||
/* ===== Form Layout ===== */
|
||
.form-row {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: var(--space-4);
|
||
}
|
||
|
||
.form-actions {
|
||
display: flex;
|
||
gap: var(--space-3);
|
||
margin-top: var(--space-5);
|
||
}
|
||
/**
|
||
* AKSRT Alerts
|
||
* 统一提示组件：error / warning / info / success
|
||
* 用于替代各页面 inline 的 .login-error / .bind-error 等
|
||
*/
|
||
|
||
.alert {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 10px;
|
||
padding: 12px 14px;
|
||
margin-bottom: var(--space-4);
|
||
font-size: var(--text-sm);
|
||
line-height: var(--leading-snug);
|
||
border-radius: var(--radius);
|
||
border: 1px solid transparent;
|
||
}
|
||
|
||
.alert > svg {
|
||
flex-shrink: 0;
|
||
width: 18px;
|
||
height: 18px;
|
||
margin-top: 1px;
|
||
}
|
||
|
||
.alert--error {
|
||
color: #B91C1C;
|
||
background: rgba(239, 68, 68, 0.08);
|
||
border-color: rgba(239, 68, 68, 0.3);
|
||
}
|
||
|
||
.alert--warning {
|
||
color: #B45309;
|
||
background: rgba(245, 158, 11, 0.08);
|
||
border-color: rgba(245, 158, 11, 0.3);
|
||
}
|
||
|
||
.alert--success {
|
||
color: #047857;
|
||
background: rgba(16, 185, 129, 0.08);
|
||
border-color: rgba(16, 185, 129, 0.3);
|
||
}
|
||
|
||
.alert--info {
|
||
color: #1D4ED8;
|
||
background: rgba(59, 130, 246, 0.08);
|
||
border-color: rgba(59, 130, 246, 0.3);
|
||
}
|
||
|
||
html.dark .alert--error { color: #FCA5A5; }
|
||
html.dark .alert--warning { color: #FCD34D; }
|
||
html.dark .alert--success { color: #6EE7B7; }
|
||
html.dark .alert--info { color: #93C5FD; }
|