/* ========================================================================== subject.css — 学科主题化作用：根据自动切换全站主色、辅色与学科图标。 - 教师/学生登录后，其任教学科决定整套配色（按钮、链接、导航高亮、卡片强调条）。 - 全局 --primary 会被学科色覆盖，因此「新旧页面」都会带上学科气息。 - 学科图标用 emoji（离线可用，无需外部图片资源）。说明：如需换成自定义图片/插画，可把 .subj-icon / .subj-badge 的 ::before 改为 background-image: url('/static/img/.svg') 即可。 ========================================================================== */ /* 统一主题：所有学科共用同一套主色与图标（不再区分学科特色，按统一模板美化） */ body[data-subject], body[data-subject=""], body:not([data-subject]) { --subject: #4f46e5; --subject-2: #4338ca; --subject-light: #eef2ff; --subj-icon: "📚"; } /* -------------------------------------------------------------------------- 1. 全局主色接管：覆盖 style.css 的 --primary，所有页面按钮/链接/导航即时变色 -------------------------------------------------------------------------- */ body[data-subject] { --primary: var(--subject); --primary-light: var(--subject-light); --primary-dark: var(--subject-2); /* 让 .pp-hero / .pp-* 组件即使不在 .pretty-page 包裹内也能拿到学科色 */ --pp-accent: var(--subject); --pp-accent-2: var(--subject-2); --pp-ring: rgba(79, 70, 229, .16); --pp-ring: color-mix(in srgb, var(--subject) 16%, transparent); } /* 导航栏激活态与悬停用学科色 */ body[data-subject] .nav-link.active { color: var(--subject); background: var(--subject-light); } body[data-subject] .nav-link:hover { color: var(--subject); background: var(--subject-light); } /* 导航 logo 圆角底色也带学科色 */ body[data-subject] .logo-icon { background: var(--subject-light); color: var(--subject); border-radius: 10px; padding: 2px 6px; } /* -------------------------------------------------------------------------- 2. pretty-page 强调色接管：考试/作业/题库/导入页按学科变色 -------------------------------------------------------------------------- */ body[data-subject] .pretty-page { --pp-accent: var(--subject); --pp-accent-2: var(--subject-2); --pp-ring: rgba(79, 70, 229, .16); --pp-ring: color-mix(in srgb, var(--subject) 16%, transparent); } /* -------------------------------------------------------------------------- 3. 学科图标徽章（导航栏、页头等位置复用） -------------------------------------------------------------------------- */ .subj-icon::before, .subj-badge .subj-icon::before { content: var(--subj-icon, "📚"); } .subj-icon { display: inline-flex; align-items: center; justify-content: center; font-style: normal; } /* 导航栏学科徽章 */ .subj-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px 3px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--subject); background: var(--subject-light); border: 1px solid rgba(79, 70, 229, .30); border: 1px solid color-mix(in srgb, var(--subject) 30%, transparent); white-space: nowrap; } .subj-badge .subj-icon { font-size: 14px; line-height: 1; } /* pretty 页头图标：默认显示学科图标（不强制 .pretty-page 包裹也能生效） */ body[data-subject] .pp-hero-icon::before { content: var(--subj-icon, "📚"); } /* 打印时隐藏装饰性徽章 */ @media print { .subj-badge { display: none; } } /* -------------------------------------------------------------------------- 4. 登录页品牌墙：品牌主色走学科变量（不再展示全学科图标墙） -------------------------------------------------------------------------- */ .auth-brand { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); background: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 55%, #ffffff) 100%); } .subj-hero-logo { background: rgba(255,255,255,.2); color: #fff; border-radius: 12px; padding: 2px 8px; } .auth-card-head { display: flex; align-items: center; gap: 12px; } .auth-card-badge { flex: none; width: 46px; height: 46px; border-radius: 13px; background: var(--primary-light, #eff6ff); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 24px; } .auth-card-badge::before { content: var(--subj-icon, "📚"); }