/* ========================================== 导入其他CSS文件 ========================================== 通过导入以下三个CSS文件，实现样式模块化管理 1. standard-selectors.css - 标准选择器和基础样式 2. responsive.css - 响应式布局样式 3. dark-theme.css - 黑暗模式样式 ========================================== */ @import url('common/common-selectors.css'); @import url('common/common-responsive.css'); @import url('common/common-dark-theme.css'); /* ========================================== CSS变量系统 - 全局样式统一管理 ========================================== 此部分定义了网站所有共享样式值，便于全局维护和主题切换 包含颜色系统、尺寸系统、间距系统、边框阴影和过渡效果 ========================================== */ :root { /* 默认使用日间模式颜色变量 */ --theme: light; /* 通用变量 - 两种主题共用 */ --secondary-color: #3498db; --accent-color: #9b59b6; --danger-color: #e74c3c; --success-color: #2ecc71; /* 间距、尺寸、边框、阴影等通用变量 */ --spacing-xs: 5px; --spacing-sm: 10px; --spacing-md: 15px; --spacing-lg: 20px; --spacing-xl: 30px; --spacing-xxl: 40px; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 0.8rem; --font-size-sm: 0.9rem; --font-size-base: 1rem; --font-size-lg: 1.1rem; --border-radius-sm: 4px; --border-radius-md: 6px; --border-radius-lg: 8px; --border-radius: var(--border-radius-md); --transition-default: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease, opacity 0.3s ease; --transition-fast: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out, border-color 0.2s ease-in-out; /* 日间模式颜色 */ --light-primary-color: #2c3e50; --light-primary-hover-color: #1a252f; --light-light-accent: rgba(167, 170, 215, 0.3); --light-text-color: #333; --light-light-text: #7f8c8d; --light-text-muted: #7f8c8d; --light-white: #ffffff; --light-background-light: rgba(255, 255, 255, 0.7); --light-background-accent: rgba(52, 152, 219, 0.15); --light-card-bg-color: #f8f9fa; --light-heading-color: #34495e; --light-border-color: #e0e0e0; --light-table-border-color: #000000; --light-code-bg-color: #f5f5f5; --light-shadow-light: 0 2px 10px rgba(0, 0, 0, 0.1); --light-shadow-medium: 0 4px 15px rgba(0, 0, 0, 0.15); --light-shadow-heavy: 0px 0px 20px rgba(35, 35, 35, 0.9); --light-header-bg-color: #2c3e50; --light-header-text-color: #ffffff; --light-nav-link-color: #ffffff; --light-nav-link-hover-color: #3498db; --light-nav-bg-color: #2c3e50; --light-nav-a-bg-color: transparent; --light-nav-a-hover-bg-color: rgba(52, 152, 219, 0.3); --light-footer-bg-color: #2c3e50; --light-footer-text-color: #ffffff; --light-background-color: #ffffff; --light-card-background: #f8f9fa; --light-hover-background: rgba(52, 152, 219, 0.1); --light-primary-text-color: #333; --light-secondary-text-color: #7f8c8d; /* 夜间模式颜色 */ --dark-primary-color: #1a252f; --dark-primary-hover-color: #2c3e50; --dark-light-accent: rgba(167, 170, 215, 0.15); --dark-text-color: #ecf0f1; --dark-light-text: #bdc3c7; --dark-text-muted: #bdc3c7; --dark-white: #ffffff; --dark-background-light: rgba(44, 62, 80, 0.9); --dark-background-accent: rgba(52, 152, 219, 0.2); --dark-card-bg-color: #2c3e50; --dark-heading-color: #ecf0f1; --dark-border-color: #34495e; --dark-table-border-color: #ffffff; --dark-code-bg-color: #1a252f; --dark-shadow-light: 0 2px 10px rgba(0, 0, 0, 0.3); --dark-shadow-medium: 0 4px 15px rgba(0, 0, 0, 0.4); --dark-shadow-heavy: 0px 0px 20px rgba(0, 0, 0, 0.8); --dark-header-bg-color: #1a252f; --dark-header-text-color: #ecf0f1; --dark-nav-link-color: #ecf0f1; --dark-nav-link-hover-color: #3498db; --dark-nav-bg-color: #1a252f; --dark-nav-a-bg-color: transparent; --dark-nav-a-hover-bg-color: rgba(52, 152, 219, 0.3); --dark-footer-bg-color: #1a252f; --dark-footer-text-color: #ecf0f1; --dark-background-color: #1a252f; --dark-card-background: #2c3e50; --dark-hover-background: #2c3e50; --dark-primary-text-color: #ecf0f1; --dark-secondary-text-color: #bdc3c7; /* 默认使用日间模式 */ --primary-color: var(--light-primary-color); --primary-hover-color: var(--light-primary-hover-color); --light-accent: var(--light-light-accent); --text-color: var(--light-text-color); --light-text: var(--light-light-text); --text-muted: var(--light-text-muted); --white: var(--light-white); --card-bg-color: var(--light-card-bg-color); --heading-color: var(--light-heading-color); --border-color: var(--light-border-color); --table-border-color: var(--light-table-border-color); --code-bg: var(--light-code-bg-color); --shadow-light: var(--light-shadow-light); --shadow-medium: var(--light-shadow-medium); --shadow-heavy: var(--light-shadow-heavy); --card-shadow: var(--shadow-light); --header-bg-color: var(--light-header-bg-color); --header-text-color: var(--light-header-text-color); --nav-link-color: var(--light-nav-link-color); --nav-link-hover-color: var(--light-nav-link-hover-color); --nav-bg-color: var(--light-nav-bg-color); --nav-a-bg-color: var(--light-nav-a-bg-color); --nav-a-hover-bg-color: var(--light-nav-a-hover-bg-color); --footer-bg-color: var(--light-footer-bg-color); --footer-text-color: var(--light-footer-text-color); --background-color: var(--light-background-color); --card-background: var(--light-card-background); --hover-background: var(--light-hover-background); --primary-text-color: var(--light-primary-text-color); --secondary-text-color: var(--light-secondary-text-color); --accent-hover: #2980b9; --dark-accent: #8e44ad; /* 夜间模式对应变量 */ --heading-dark-color: var(--dark-heading-color); --text-dark-color: var(--dark-text-color); --border-dark-color: var(--dark-border-color); --shadow-dark-light: var(--dark-shadow-light); --shadow-dark-medium: var(--dark-shadow-medium); --header-dark-bg-color: var(--dark-header-bg-color); --header-dark-text-color: var(--dark-header-text-color); --nav-dark-link-color: var(--dark-nav-link-color); --nav-dark-link-hover-color: var(--dark-nav-link-hover-color); --nav-dark-bg-color: var(--dark-nav-bg-color); --nav-dark-a-bg-color: var(--dark-nav-a-bg-color); --nav-dark-a-hover-bg-color: var(--dark-nav-a-hover-bg-color); --footer-dark-bg-color: var(--dark-footer-bg-color); --footer-dark-text-color: var(--dark-footer-text-color); /* 尺寸系统 */ --header-height: 60px; --footer-height: 80px; --main-min-height: calc(100vh - var(--header-height) - var(--footer-height) - 40px); }