/* ============================================================ RuoGuang Code Platform · 若光科技品牌主题 深空蓝黑背景 + 玻璃拟态卡片 + 蓝色渐变光晕 + 网格背景 ============================================================ */ /* ---------- 字体 ---------- 备注：不再使用 Google Fonts @import（国内不可达会导致首屏阻塞， 破坏 Semantic UI 布局，造成“文字竖排/塌陷”问题）。 统一改用系统字体栈，保证稳定加载。 */ :root { --rg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; /* 若光品牌蓝 */ --rg-brand-1: #2563eb; --rg-brand-2: #3d81e3; --rg-brand-3: #5b9ffb; --rg-brand-4: #38bdf8; --rg-purple: #6366f1; /* 深空背景 */ --rg-bg-0: #05070d; --rg-bg-1: #06080f; --rg-bg-2: #0a0e1a; --rg-bg-3: #121624; --rg-line: #ffffff1a; --rg-text-1: #e5e7eb; --rg-text-2: #b9c2d0; --rg-text-3: #9aa6b6; font-family: var(--rg-font); } /* ============================================================ Gitea 深色主题变量 —— 强制覆盖 说明：Gitea 前端 JS 会根据系统偏好把 翻转为 gitea-auto（浅色），导致大量未覆盖变量变为浅色值， 于是在深色背景下出现浅色文字看不清的问题。 这里对全部关键 --color-* 变量用 !important 强制为深色品系， 无论 data-theme 如何翻转都保持可读。 ============================================================ */ :root { /* 主色（若光蓝） */ --color-primary: #3d81e3 !important; --color-primary-contrast: #ffffff !important; --color-primary-dark-1: #346fca !important; --color-primary-dark-2: #2c5fb0 !important; --color-primary-dark-3: #24509a !important; --color-primary-dark-4: #1c4080 !important; --color-primary-dark-5: #142b54 !important; --color-primary-light-1: #548fca !important; --color-primary-light-2: #6aa0e8 !important; --color-primary-light-3: #8db5ec !important; --color-primary-light-4: #2b5c8b !important; --color-primary-light-5: #193450 !important; --color-primary-alpha-10: #3d81e319 !important; --color-primary-alpha-20: #3d81e333 !important; --color-primary-alpha-30: #3d81e34b !important; --color-primary-alpha-40: #3d81e366 !important; --color-primary-alpha-50: #3d81e380 !important; --color-primary-alpha-60: #3d81e399 !important; --color-primary-alpha-70: #3d81e3b3 !important; --color-primary-alpha-80: #3d81e3cc !important; --color-primary-alpha-90: #3d81e3e1 !important; --color-primary-hover: var(--color-primary-dark-1) !important; --color-primary-active: var(--color-primary-dark-2) !important; /* 强调色 */ --color-accent: #5b9ffb !important; --color-blue: #3d81e3 !important; --color-blue-dark-1: #346fca !important; --color-blue-dark-2: #2c5fb0 !important; --color-blue-light: #8db5ec !important; --color-red: #e05252 !important; --color-red-light: #e56a6a !important; --color-green: #7fb069 !important; --color-green-light: #8fbe7a !important; --color-yellow: #d9a514 !important; --color-orange: #e0701a !important; --color-teal: #23a8a0 !important; --color-violet: #906ae1 !important; --color-purple: #b259d0 !important; --color-pink: #d22e8b !important; --color-grey: #4a5160 !important; --color-grey-light: #8a93a3 !important; --color-gold: #bfa345 !important; /* 次要色系（用于按钮、边框、菜单背景） */ --color-secondary: #3f4656 !important; --color-secondary-dark-1: #4a5263 !important; --color-secondary-dark-2: #535c6f !important; --color-secondary-dark-3: #5e6879 !important; --color-secondary-dark-4: #6a7486 !important; --color-secondary-dark-5: #76809a !important; --color-secondary-dark-6: #828ca4 !important; --color-secondary-dark-7: #8f97ad !important; --color-secondary-dark-8: #9aa0b4 !important; --color-secondary-dark-9: #a5aab9 !important; --color-secondary-dark-10: #b0b4c2 !important; --color-secondary-dark-11: #babdca !important; --color-secondary-dark-12: #c3c5d1 !important; --color-secondary-dark-13: #cbccd7 !important; --color-secondary-light-1: #343b4d !important; --color-secondary-light-2: #2a303f !important; --color-secondary-light-3: #212733 !important; --color-secondary-light-4: #181d28 !important; --color-secondary-bg: #262c3a !important; --color-secondary-alpha-10: #3f465619 !important; --color-secondary-alpha-20: #3f465633 !important; --color-secondary-alpha-30: #3f46564b !important; --color-secondary-alpha-40: #3f465666 !important; --color-secondary-alpha-50: #3f465680 !important; --color-secondary-alpha-60: #3f465699 !important; --color-secondary-alpha-70: #3f4656b3 !important; --color-secondary-alpha-80: #3f4656cc !important; --color-secondary-alpha-90: #3f4656e1 !important; --color-secondary-button: var(--color-secondary-dark-4) !important; --color-secondary-hover: var(--color-secondary-dark-3) !important; --color-secondary-active: var(--color-secondary-dark-2) !important; /* 文本 */ --color-text: #d7dce5 !important; --color-text-dark: #f6f8fb !important; --color-text-light: #c3cad6 !important; --color-text-light-1: #aab2c0 !important; --color-text-light-2: #969fae !important; --color-text-light-3: #808a99 !important; /* 画布 / 表面 */ --color-body: #101319 !important; --color-card: #161a23 !important; --color-menu: #151a24 !important; --color-button: #161a23 !important; --color-box-header: #1a1f2a !important; --color-box-body: #141823 !important; --color-box-body-highlight: #1d2230 !important; --color-nav-bg: #121826 !important; --color-nav-hover-bg: var(--color-secondary-light-1) !important; --color-nav-text: var(--color-text) !important; --color-secondary-nav-bg: #171c27 !important; --color-footer: var(--color-nav-bg) !important; --color-timeline: #383b40 !important; --color-expand-button: #333539 !important; /* 输入控件 */ --color-input-background: #161b26 !important; --color-input-border: var(--color-secondary-dark-1) !important; --color-input-text: var(--color-text-dark) !important; --color-input-toggle-background: #323438 !important; /* 边框 / 悬浮 / 阴影 */ --color-light: #0b0b0c28 !important; --color-light-border: #f3f3f428 !important; --color-hover: #f3f3f419 !important; --color-hover-opaque: #232528 !important; --color-active: #f3f3f424 !important; --color-border: #3f4656 !important; --color-shadow: #0b0b0c4d !important; --color-shadow-opaque: #0b0b0c !important; --color-code-bg: #12151c !important; --color-markup-code-block: #f3f3f412 !important; --color-markup-code-inline: #f3f3f428 !important; --color-markup-table-row: #f3f3f40f !important; --color-console-fg: #f8f8f8 !important; --color-console-bg: #12151c !important; --color-console-border: #313338 !important; --color-console-menu-bg: #1a1d24 !important; --color-tooltip-text: #fafafa !important; --color-tooltip-bg: #0b0b0cf0 !important; --color-placeholder-text: var(--color-text-light-3) !important; /* 差异 / 状态色 */ --color-error-text: #f85149 !important; --color-error-bg: #2a1a1d !important; --color-error-border: #763232 !important; --color-success-text: #3fb950 !important; --color-success-bg: #16241b !important; --color-success-border: #225633 !important; --color-warning-text: #d29922 !important; --color-warning-bg: #241f16 !important; --color-warning-border: #5f481a !important; --color-info-text: #2f81f7 !important; --color-info-bg: #15202d !important; --color-info-border: #254a7e !important; /* Label 标签 */ --color-label-text: var(--color-text) !important; --color-label-bg: #7a7f8a4b !important; --color-label-hover-bg: #7a7f8aa0 !important; --color-label-active-bg: #7a7f8aff !important; } /* ---------- 全局字体 ---------- */ body, .ui, button, input, select, textarea { font-family: var(--rg-font); } body, .ui, [class^="ui"] { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 全局深色基调：登录后页面（代码管理/列表/设置等）默认可读 */ body { background-color: var(--color-body); color: var(--color-text); } .page-content { background-color: var(--color-body); color: var(--color-text); } /* ============================================================ 未登录首页 / 登录 / 注册 / 欢迎页 —— 深空玻璃拟态 ============================================================ */ /* 登录/注册页背景：深空渐变 + 网格（并入 background 图层， 避免 ::before + mask-image 在 Edge/Chrome 上的合成闪烁/塌陷） */ body .page-content.user.signin, body .page-content.user.signup, body .page-content.user.forgot-password, body .page-content.user.reset-password, body .page-content.user.sign-in, body .page-content.user.auth { background-color: transparent; position: relative; min-height: calc(100vh - 60px); background-image: linear-gradient(#ffffff08 1px, #0000 1px), linear-gradient(90deg, #ffffff08 1px, #0000 1px), radial-gradient(1200px at 50% -20%, #2563eb52, #0000 55%), radial-gradient(800px at 88% 72%, #06b6d429, #0000 50%), radial-gradient(800px at 8% 82%, #7c3aed2e, #0000 52%), linear-gradient(#05070d 0%, #0a0e1a 72%, #06080f 100%); background-size: 56px 56px, 56px 56px, auto, auto, auto, auto; background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat; color: var(--rg-text-1); } /* 登录卡：限制宽度并居中，防止在 Edge/Chrome 下被挤压塌陷 */ body .page-content.user.signin .ui.container.fluid, body .page-content.user.signup .ui.container.fluid, body .page-content.user.forgot-password .ui.container.fluid, body .page-content.user.reset-password .ui.container.fluid, body .page-content.user.sign-in .ui.container.fluid { width: 100%; padding-left: 1rem; padding-right: 1rem; } body .page-content.user.signin h4.ui.top.attached.header, body .page-content.user.signin .ui.attached.segment { max-width: 460px; margin-left: auto; margin-right: auto; width: 100%; } body .page-content.user.signup h4.ui.top.attached.header, body .page-content.user.signup .ui.attached.segment, body .page-content.user.forgot-password h4.ui.top.attached.header, body .page-content.user.forgot-password .ui.attached.segment { max-width: 460px; margin-left: auto; margin-right: auto; width: 100%; } /* 登录卡（header + segment 组合成玻璃卡片） */ body .page-content.user.signin .ui.top.attached.header, body .page-content.user.signin .ui.attached.segment, body .page-content.user.signup .ui.top.attached.header, body .page-content.user.signup .ui.attached.segment, body .page-content.user.forgot-password .ui.top.attached.header, body .page-content.user.forgot-password .ui.attached.segment { background: linear-gradient(135deg, #ffffff1a, #ffffff05 38%, #ffffff0d), #1216249e; border: 1px solid var(--rg-line); color: var(--rg-text-1); box-shadow: inset 0 1px 1px #ffffff29, inset 0 -1px 1px #0000004d, 0 24px 80px #00000073; } body .page-content.user.signin .ui.top.attached.header { border-radius: 20px 20px 0 0; border-bottom: none; } body .page-content.user.signin .ui.attached.segment { border-radius: 0 0 20px 20px; border-top: none; } /* 独立出现的底部卡片（如“忘记密码/注册”区块）也玻璃化 */ body .page-content.user.signin .ui.attached.segment.header.top, body .page-content.user.signup .ui.attached.segment.header.top { border-radius: 20px; border: 1px solid var(--rg-line); margin-top: 1em; } /* 品牌 logo 标题 */ body .page-content.user.signin .ui.header, body .page-content.user.signup .ui.header, body .page-content.user.forgot-password .ui.header { color: var(--rg-text-1); font-weight: 600; letter-spacing: -0.01em; } body .page-content.user.signin .ui.header .sub.header { color: var(--rg-text-2); } /* 登录表单内的文字与输入框 */ body .page-content.user.signin .ui.form label, body .page-content.user.signup .ui.form label, body .page-content.user.forgot-password .ui.form label { color: var(--rg-text-2); } body .page-content.user.signin .ui.form .field input, body .page-content.user.signup .ui.form input, body .page-content.user.forgot-password .ui.form input { background: linear-gradient(135deg, #ffffff14, #ffffff08 45%, #ffffff0d), #121624f5; border: 1px solid #ffffff1f; color: #f9fafb; border-radius: 10px; } body .page-content.user.signin .ui.form .field input:focus, body .page-content.user.signup .ui.form input:focus, body .page-content.user.forgot-password .ui.form input:focus { border-color: #5b9ffb; box-shadow: 0 0 0 2px #3d81e340; } body .page-content.user.signin a, body .page-content.user.signup a, body .page-content.user.forgot-password a, body .page-content.user.reset-password a { color: var(--rg-brand-3); } body .page-content.user.signin a:hover, body .page-content.user.signup a:hover, body .page-content.user.forgot-password a:hover { color: #fff; } /* 登录/注册主按钮 */ body .page-content.user.signin .ui.primary.button, body .page-content.user.signup .ui.primary.button, body .page-content.user.forgot-password .ui.primary.button { background: linear-gradient(135deg, #5b9ffb 0%, #2563eb 55%, #1e4fc0 100%); color: #fff; border: none; border-radius: 12px; font-weight: 600; letter-spacing: 0.01em; box-shadow: inset 0 1px 1px #ffffff57, 0 8px 20px #2563eb40; transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1); } body .page-content.user.signin .ui.primary.button:hover, body .page-content.user.signup .ui.primary.button:hover, body .page-content.user.forgot-password .ui.primary.button:hover { transform: translateY(-1px); box-shadow: inset 0 1px 1px #ffffff57, 0 12px 28px #2563eb55; background: linear-gradient(135deg, #6aa0e8 0%, #2c5fb0 55%, #1e4fc0 100%); } /* 次要登录按钮（OpenID 等）玻璃化 */ body .page-content.user.signin .ui.external-login-link, body .page-content.user.signin .ui.button.external-login-link, body .page-content.user.signin .ui.secondary.button { background: linear-gradient(135deg, #ffffff14, #ffffff08 45%, #ffffff0d), #121624b8; color: var(--rg-text-1); border: 1px solid var(--rg-line); box-shadow: inset 0 1px 1px #ffffff29; } body .page-content.user.signin .ui.external-login-link:hover, body .page-content.user.signin .ui.button.external-login-link:hover, body .page-content.user.signin .ui.secondary.button:hover { background: linear-gradient(135deg, #ffffff1f, #ffffff0d 45%, #ffffff14), #121624d9; color: #fff; } /* ---------- 顶部导航栏：玻璃化 ---------- */ #navbar, body #navbar { background: #0a0e1acc; backdrop-filter: blur(12px) saturate(1.08); -webkit-backdrop-filter: blur(12px) saturate(1.08); border-bottom: 1px solid var(--rg-line); } #navbar .item, #navbar a.item, #navbar .navbar-left .item, #navbar .navbar-right .item, #navbar .menu .item, #navbar .navbar-brand, body .ui.navbar .logo, body .ui.navbar .navbar-brand { color: var(--rg-text-1); } #navbar .item:hover, #navbar a.item:hover { color: #fff; background: #ffffff14; } /* ---------- 站点标题字体渲染 ---------- */ .ui.grid.login, .sign-in a, .login a { color: var(--rg-brand-3); } /* ============================================================ 未登录首页（/）—— hero + 功能玻璃卡片 DOM：div.page-content.home 版面：内容整体限宽居中；功能卡片按窗口宽度自适应—— 桌面两列等分、窄屏自动堆叠为单列，保证占比均匀。 ============================================================ */ body .page-content.home { background: linear-gradient(#ffffff08 1px, #0000 1px), linear-gradient(90deg, #ffffff08 1px, #0000 1px), radial-gradient(1200px at 50% -20%, #2563eb52, #0000 55%), radial-gradient(800px at 88% 72%, #06b6d429, #0000 50%), radial-gradient(800px at 8% 82%, #7c3aed2e, #0000 52%), linear-gradient(#05070d 0%, #0a0e1a 72%, #06080f 100%); background-size: 56px 56px, 56px 56px, auto, auto, auto, auto; background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat; color: var(--rg-text-1); min-height: calc(100vh - 60px); position: relative; padding: 3rem 1.25rem 4rem; } /* 顶部 hero：限宽居中 */ body .page-content.home .center { max-width: 760px; margin: 0 auto 2rem; text-align: center; } body .page-content.home .logo { width: min(200px, 42vw); height: auto; filter: drop-shadow(0 12px 40px #2563eb55); } /* 功能卡片网格：整体限宽居中；CSS Grid 自适应 —— 桌面 2 列、窄屏 1 列 */ body .page-content.home .ui.stackable.middle.very.relaxed.page.grid { width: 100%; max-width: 1040px; margin: 0 auto 2rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } body .page-content.home .ui.stackable.middle.very.relaxed.page.grid > .column { margin: 0; /* 覆盖 Semantic UI 的 .eight.wide.column { width: 50% !important }， 让每张卡片填满所在网格列，避免版面左右留白不均 */ width: 100% !important; max-width: 100% !important; padding: 2.25rem 2rem; background: linear-gradient(135deg, #ffffff14, #ffffff05 38%, #ffffff0d), #1216249e; border: 1px solid var(--rg-line); border-radius: 20px; box-shadow: inset 0 1px 1px #ffffff29, 0 24px 80px #00000059; } body .page-content.home a { color: var(--rg-brand-3); } body .page-content.home a:hover { color: #fff; } body .page-content.home .hero h1, body .page-content.home h1.hero { color: #fff; font-weight: 700; letter-spacing: -0.01em; font-size: clamp(1.6rem, 3.4vw, 2.4rem); } body .page-content.home .hero h2, body .page-content.home h2 { color: var(--rg-text-2); font-weight: 500; } body .page-content.home p.large { color: var(--rg-text-2); } /* 窄屏：卡片堆叠为单列，优化留白 */ @media (max-width: 767px) { body .page-content.home .ui.stackable.middle.very.relaxed.page.grid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; } body .page-content.home .ui.stackable.middle.very.relaxed.page.grid > .column { padding: 1.75rem 1.25rem; } } /* ============================================================ 页脚 —— 品牌化，深色玻璃底 ============================================================ */ .page-footer { background: #0a0e1ab3; backdrop-filter: blur(10px) saturate(1.05); -webkit-backdrop-filter: blur(10px) saturate(1.05); border-top: 1px solid var(--rg-line); color: var(--rg-text-3); text-align: center; } .page-footer a { color: var(--rg-brand-3); } .page-footer a:hover { color: #fff; }