refactor: 增强代码可读性 - 添加结构化注释

style.css:
- 添加 CSS 变量定义区块注释
- 添加主题色系统、动画系统分区
- 添加夜间模式、沉浸式主题色分区
- 添加框架样式覆盖、基础样式分区

argontheme.js:
- 添加文件头目录索引
- 添加 10 个功能模块的分区注释
- 为工具函数添加 JSDoc 注释
- 统一注释风格
This commit is contained in:
2026-01-16 11:38:28 +08:00
parent a042165401
commit ab02c51822
2 changed files with 101 additions and 31 deletions

View File

@@ -11,6 +11,11 @@
@charset "utf-8";
/* ==========================================================================
CSS 变量定义 (CSS Custom Properties)
========================================================================== */
/* ---------- 主题色系统 ---------- */
:root {
--themecolor: #5e72e4;
--themecolor-R: 94;
@@ -99,31 +104,36 @@
--color-border-on-foreground-deeper: #eee;
--color-text-deeper: #212529;
--color-selection: #cce2ff;
/* ========== 统一动画系统 - 桌面端和移动端一致 ========== */
/* 动画时长 - 基于 Material Design 3 规范 */
/* ---------- 动画系统 (Material Design 3) ---------- */
/* 动画时长 */
--animation-instant: 100ms;
--animation-fast: 150ms;
--animation-normal: 250ms;
--animation-slow: 400ms;
--animation-slower: 600ms;
/* 缓动函数 - Material 3 标准曲线 */
/* 缓动函数 - 标准曲线 */
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--ease-standard-decelerate: cubic-bezier(0, 0, 0, 1);
--ease-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
--ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
--ease-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
--ease-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
/* 弹性缓动 - 用于交互反馈 */
/* 缓动函数 - 弹性曲线 */
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
/* 状态层透明度 - Material 3 */
/* 状态层透明度 */
--state-hover-opacity: 0.08;
--state-focus-opacity: 0.12;
--state-pressed-opacity: 0.12;
--state-dragged-opacity: 0.16;
}
/* ---------- 夜间模式配色 ---------- */
html.darkmode body {
--color-background: #282828;
--color-foreground: #424242;
@@ -138,8 +148,8 @@ html.darkmode body {
--color-selection: #607799;
}
/* ---------- AMOLED 夜间模式 ---------- */
html.darkmode.amoled-dark body,
html.darkmode.amoled-dark.immersion-color body {
--color-background: #111;
--color-foreground: #000;
@@ -150,10 +160,11 @@ html.darkmode.amoled-dark.immersion-color body {
--color-border-on-foreground-deeper: #252525;
--color-text-deeper: #eee;
--color-selection: #607799;
--color-darkmode-toolbar: 0, 0, 0;
--color-darkmode-toolbar: 0, 0, 0;
--color-darkmode-banner: #131313;
}
/* ---------- 沉浸式主题色 (日间) ---------- */
html.immersion-color body {
--color-background: rgb(var(--color-tint-86));
--color-foreground: rgb(var(--color-tint-92));
@@ -166,6 +177,7 @@ html.immersion-color body {
--color-selection: rgb(var(--color-tint-70));
}
/* ---------- 沉浸式主题色 (夜间) ---------- */
html.immersion-color.darkmode body {
--color-background: rgb(var(--color-shade-94));
--color-foreground: rgb(var(--color-shade-90));
@@ -176,11 +188,13 @@ html.immersion-color.darkmode body {
--color-border-on-foreground-deeper: rgb(var(--color-shade-75));
--color-text-deeper: rgb(var(--color-tint-82));
--color-selection: rgb(var(--color-shade-70));
--color-darkmode-toolbar: var(--color-shade-90);
--color-darkmode-toolbar: var(--color-shade-90);
--color-darkmode-banner: rgb(var(--color-shade-96));
}
/* 主题切换过渡效果 (Dark/Light Mode Transition) */
/* ==========================================================================
主题切换过渡效果
========================================================================== */
html {
transition: none;
}
@@ -197,8 +211,9 @@ html.theme-transitioning *::after {
stroke 200ms var(--ease-standard) !important;
}
/*Argon CSS Override*/
/* ==========================================================================
Argon 框架样式覆盖
========================================================================== */
.bg-white,
.card,
@@ -249,7 +264,9 @@ html.theme-transitioning *::after {
background-color: var(--color-widgets-disabled);
}
/* Main CSS */
/* ==========================================================================
基础样式
========================================================================== */
:root {
--card-radius: 4px;