首页
最近更改
MediaWiki帮助
中文社区
模组
人物
团体
群聊
历史
外网社区
模组
发帖交流
论坛
聊天
博客
快捷访问
分类
文件列表
用户列表
用户通知
礼物列表
随机页面
聊天中的在线用户
系统消息
讨论
查看源代码
查看历史
刷新
创建账号
登录
查看“︁MediaWiki:Common.css”︁的源代码
来自Age Of History 2 Chinese Wiki
←
Common.css
跳转至:
导航
、
搜索
因为以下原因,您没有权限编辑该页面:
您请求的操作仅限属于该用户组的用户执行:
用户
此页面为本wiki上的软件提供界面文本,并受到保护以防止滥用。 如欲修改所有wiki的翻译,请访问
translatewiki.net
上的MediaWiki本地化项目。
您无权编辑此CSS页面,因为编辑此页面可能会影响所有访问者。
您可以查看和复制此页面的源代码。
/* 这里放置的CSS将应用于所有皮肤 */ @import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"); @import url("https://fastly.jsdelivr.net/gh/hoah2333/Fonts@main/Typeface-VonwaonBitmap-16px.css"); @import url("https://fastly.jsdelivr.net/gh/hoah2333/Fonts@main/Typeface-VonwaonBitmap-12px.css"); /* 引入12px字体 */ :root { --link-color: #0645ad; --link-color-active: #faa700; --custom-background-blue: #ccf; --custom-background-cyan: #cef; --custom-background-green: #cfc; --custom-background-gray: #d2d2d2; --custom-background-grey: var(--custom-background-gray); --custom-background-magenta: #fdf; --custom-background-orange: #fdb; --custom-background-purple: #ecf; --custom-background-red: #fcc; --custom-background-yellow: #ffc; --custom-border-blue: #36e; --custom-border-cyan: #9df; --custom-border-green: #5d5; --custom-border-gray: #bbb; --custom-border-grey: var(--custom-border-gray); --custom-border-magenta: #f9f; --custom-border-orange: #f90; --custom-border-purple: #96c; --custom-border-red: #e44; --custom-border-yellow: #fc3; --custom-closed-topic-neutral: #eef; --custom-closed-topic-no: #fee; --custom-closed-topic-yes: #efe; --custom-code-background: #f8f9fa; --custom-load-page-button-color: #fff8; --custom-main-page-background: #fcfcfc; --custom-main-page-border: var(--custom-border-gray); --custom-main-page-edition-subheader: #333; --custom-mcwiki-header-color: #bcd4f5; --custom-navbox-background: #fff; --custom-navbox-top: #ccc; --custom-navbox-middle: #ddd; --custom-navbox-thru: #eee; --custom-nbt-inherit-color: #e6e6fa; --custom-table-background: #f8f9fa; --custom-table-alternate-background: #f0f1f2; --custom-table-choice-always: #003600; --custom-table-choice-always-background: #80d080; --custom-table-choice-default: #fff; --custom-table-choice-in-off-background: #060; --custom-table-choice-in-on-background: #0c0; --custom-table-choice-na: #000; --custom-table-choice-na-background: #fff; --custom-table-choice-neutral: #634800; --custom-table-choice-neutral-background: #ffeb9c; --custom-table-choice-never: #3c0404; --custom-table-choice-never-background: #ff8080; --custom-table-choice-no: #840606; --custom-table-choice-no-background: #ffc7ce; --custom-table-choice-out-off-background: #900; --custom-table-choice-out-on-background: #f00; --custom-table-choice-partial: #665400; --custom-table-choice-partial-background: #ffd; --custom-table-choice-planned: #0131b7; --custom-table-choice-planned-background: #dfdfff; --custom-table-choice-rarely: #533400; --custom-table-choice-rarely-background: #fdce5e; --custom-table-choice-unknown: #222; --custom-table-choice-unknown-background: #ccc; --custom-table-choice-yes: #005600; --custom-table-choice-yes-background: #c6efce; --custom-table-header-background: #e8ebee; --custom-topic-30-days: #bbb; --custom-topic-7-days: #ddd; /* CRT效果相关变量 - 进一步调整 */ --crt-scanline-main-alpha: 0.12; --crt-scanline-secondary-alpha: 0.06; --crt-scanline-fast-alpha: 0.04; --crt-flicker-alpha: 0.025; --crt-noise-alpha: 0.03; --crt-glow-radius: 0.1em; --crt-glow-color: rgba(90, 255, 150, 0.2); /* 调整辉光 */ --crt-text-shadow: 0 0 var(--crt-glow-radius) var(--crt-glow-color); --crt-static-noise-opacity: 0.05; /* 网格背景相关变量 */ --grid-color: rgba(0, 0, 0, 0.07); --grid-size: 35px; --grid-line-width: 1px; /* 字体设置 - 使用VonwaonBitmap 16px/12px */ --font-body: 'VonwaonBitmap 16px', monospace; --font-title: 'VonwaonBitmap 12px', 'Press Start 2P', monospace; /* 12px优先,Press Start备用 */ --font-ui: 'VonwaonBitmap 12px', monospace; /* 基础大小 - Vonwaon是像素字体,直接用16px/12px */ --base-font-size-px: 16; --ui-font-size-px: 12; --code-font-size-px: 14; /* 代码可以用16px或稍小 */ /* 边框和质感 */ --main-border-color: rgba(0, 0, 0, 0.2); --inner-highlight-color: rgba(255, 255, 255, 0.3); --inner-shadow-color: rgba(0, 0, 0, 0.1); /* 启用/禁用扫描线效果 */ --scanlines-display: block; /* 保持block */ } /* 基础CRT效果动画 */ @keyframes flicker { 0%, 100% { opacity: 0.99; filter: brightness(1.0); } 25% { opacity: 0.97; filter: brightness(0.98); } 50% { opacity: 0.98; filter: brightness(1.01); } 75% { opacity: 0.96; filter: brightness(0.97); } } @keyframes scanline-main { 0% { background-position: 0 0; } 100% { background-position: 0 6px; } } @keyframes scanline-secondary { 0% { background-position: 0 1px; } /* 起始偏移 */ 100% { background-position: 0 7px; } } @keyframes scanline-fast { 0% { background-position: 0 0; } 100% { background-position: 0 20px; } } @keyframes subtle-noise { 0%, 100% { opacity: var(--crt-static-noise-opacity); } 50% { opacity: calc(var(--crt-static-noise-opacity) * 0.7); } } @keyframes crt-on { 0% { opacity: 0; filter: brightness(5) saturate(0) contrast(3); } 25% { opacity: 0.6; filter: brightness(1.5) saturate(0.5) contrast(1.2); } 100% { opacity: 1; filter: brightness(1) saturate(1) contrast(1); } } /* 全局和背景样式 - 增加质感 */ html { min-height: 100%; background-color: #2a2a2e; /* 深色背景,模拟CRT关闭时的屏幕 */ background-image: /* 网格线 */ linear-gradient(var(--grid-color) var(--grid-line-width), transparent var(--grid-line-width)), linear-gradient(90deg, var(--grid-color) var(--grid-line-width), transparent var(--grid-line-width)), /* 静态噪点 */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5' viewBox='0 0 5 5'%3E%3Cpath fill='%23ffffff' fill-opacity='0.06' d='M0 0h1v1H0V0zm1 1h1v1H1V1zm1 1h1v1H2V2zm1 1h1v1H3V3zm1 1h1v1H4V4z'/%3E%3C/svg%3E"); background-size: var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size), auto; background-position: center center; font-smooth: never; /* 尝试禁用字体平滑 */ -webkit-font-smoothing: none; } body { font-family: var(--font-body); font-size: calc(var(--base-font-size-px) * 1px); line-height: 1.7; color: #ddd; /* CRT亮色文本 */ position: relative; min-height: calc(100vh - 2rem); margin: 1rem; padding: 1.8rem; background-color: rgba(30, 45, 35, 0.96); /* 深绿色调CRT背景 */ border: 1px solid var(--main-border-color); border-radius: 6px; /* 轻微增加圆角 */ box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 var(--inner-highlight-color), /* 模拟顶部高光 */ inset 0 -1px 0 var(--inner-shadow-color), /* 模拟底部阴影 */ inset 0 0 50px rgba(90, 255, 150, 0.08); /* 更深的内部辉光 */ animation: crt-on 1.2s cubic-bezier(0.25, 1, 0.5, 1), /* 调整启动动画 */ flicker 80s infinite alternate ease-in-out; overflow: hidden; /* 必须,确保伪元素在内部 */ } /* 复合扫描线效果 */ body::before, body::after { content: ""; display: var(--scanlines-display); position: absolute; /* 改为absolute相对body */ top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; /* 降低z-index让内容可见 */ } /* ::before 用于主扫描线和快速扫描线 */ body::before { background: /* 快速扫描线 */ repeating-linear-gradient( to bottom, transparent 0px, transparent 1px, rgba(200, 255, 220, var(--crt-scanline-fast-alpha)) 1px, rgba(200, 255, 220, var(--crt-scanline-fast-alpha)) 2px ), /* 主扫描线 */ repeating-linear-gradient( to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 3px, /* 透明区域 */ rgba(0, 0, 0, var(--crt-scanline-main-alpha)) 4px, /* 主线 */ rgba(0, 0, 0, var(--crt-scanline-main-alpha)) 6px /* 主线宽度 */ ); background-size: 100% 20px, 100% 6px; mix-blend-mode: overlay; /* 主线用overlay */ animation: scanline-fast 0.8s linear infinite, scanline-main 8s linear infinite; opacity: 0.7; } /* ::after 用于次扫描线和动态噪点 */ body::after { background: /* 动态噪点 */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.08'%3E%3Cpath d='M14 18h1v1h-1zM21 20h1v1h-1zM24 11h1v1h-1zM40 15h1v1h-1zM15 4h1v1h-1zM6 13h1v1H6zM49 42h1v1h-1zM42 55h1v1h-1zM31 54h1v1h-1zM17 48h1v1h-1z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), /* 次扫描线 */ repeating-linear-gradient( to bottom, transparent 0px, transparent 4px, rgba(50, 150, 100, var(--crt-scanline-secondary-alpha)) 5px, /* 次线 */ rgba(50, 150, 100, var(--crt-scanline-secondary-alpha)) 6px /* 次线宽度 */ ); background-size: 60px 60px, 100% 7px; /* 噪点大小,次线重复 */ mix-blend-mode: screen; /* 次线和噪点尝试screen */ animation: subtle-noise 4s infinite alternate, /* 噪点动画 */ scanline-secondary 12s linear infinite; /* 次线动画 */ opacity: 0.8; } /* CRT启动动画 (移除,如果之前添加了.crt-startup div) */ .crt-startup { display: none; } /* 标题样式 - 使用12px字体,增加细节 */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-title); font-size: calc(var(--ui-font-size-px) * 1px); /* 直接使用12px */ font-weight: normal; text-shadow: var(--crt-text-shadow), 0 0 5px rgba(255,255,255,0.1); /* 增加一点白色辉光 */ letter-spacing: 0.05em; text-transform: uppercase; /* 标题大写 */ position: relative; margin-top: 2.2em; margin-bottom: 1.2em; padding-bottom: 0.5em; padding-left: 0.5em; border-bottom: 1px solid rgba(90, 255, 150, 0.2); /* 辉光色边框 */ border-left: 3px solid rgba(90, 255, 150, 0.3); color: #e8f8ef; /* 标题亮色 */ } /* 移除之前添加的标题:after伪元素 */ h1::after, h2::after, h3::after { content: none; } /* 标题大小现在由font-size控制,不再需要额外调整 */ /* 链接样式 - 更复古 */ a { color: #7bf0a0; /* 亮绿色链接 */ text-decoration: none; /* 移除下划线 */ position: relative; transition: color 0.2s ease, background-color 0.2s ease, text-shadow 0.2s ease; padding: 0px 2px; /* 微调padding */ border-radius: 1px; text-shadow: var(--crt-text-shadow); background-color: transparent; /* 默认无背景 */ } a:hover { color: #fff; /* 悬停变白 */ background-color: rgba(123, 240, 160, 0.2); /* 悬停背景 */ text-shadow: 0 0 5px #fff, 0 0 10px var(--crt-glow-color); /* 更强辉光 */ } a.new { color: #ff8080; /* 红色新链接 */ text-shadow: 0 0 3px rgba(255, 128, 128, 0.4); } a.new:hover { color: #fff; background-color: rgba(255, 128, 128, 0.2); text-shadow: 0 0 5px #fff, 0 0 10px rgba(255, 128, 128, 0.5); } /* Infobox样式 - 增强质感 */ .notaninfobox { position: relative; clear: right; margin: 0 0 1em 1em; width: 350px; font-size: calc(var(--ui-font-size-px) * 1px); /* UI字体大小 */ background: linear-gradient(to bottom, rgba(40, 60, 45, 0.95), rgba(30, 50, 35, 0.95)); /* 深色渐变背景 */ float: right; border: 1px solid rgba(90, 255, 150, 0.3); /* 辉光色边框 */ padding: 2px; overflow: auto; z-index: 1; overflow-wrap: anywhere; box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(90, 255, 150, 0.15), /* 内部高光 */ inset 0 0 15px rgba(90, 255, 150, 0.06); /* 内部辉光 */ animation: flicker 60s infinite alternate; border-radius: 4px; color: #c0e0d0; /* Infobox内文本颜色 */ } @media all and (max-width: 511px) { .notaninfobox { float: none; margin-left: 0; width: auto; } } @media all and (max-width: 337px) { .notaninfobox { margin-left: -16px; margin-right: -16px; border-left: none; border-right: none; } } .notaninfobox > .infobox-title { font-family: var(--font-title); font-size: calc(var(--ui-font-size-px) * 1px); /* 标题字体 */ font-weight: normal; text-align: center; background: linear-gradient(to bottom, rgba(90, 255, 150, 0.18), rgba(90, 255, 150, 0.08)); color: #e8f8ef; /* 亮色标题 */ text-shadow: var(--crt-text-shadow); padding: 7px 5px; border-bottom: 1px solid rgba(90, 255, 150, 0.25); text-transform: uppercase; } .infobox-imagearea { text-align: center; padding: 4px; } .infobox-imagearea > div:not(:first-child) { padding-top: 1em; } /* Horizontally centre animated images */ .infobox-imagearea .animated { display: inline-flex; align-items: center; } .notaninfobox .infobox-rows { display: grid; grid-template-columns: max-content 1fr; gap: 1px; } .notaninfobox .infobox-rows .infobox-row { display: contents; } .notaninfobox .infobox-row .infobox-row-label, .notaninfobox .infobox-row .infobox-row-field { padding: 4px; } .notaninfobox .infobox-row .infobox-row-label { font-family: var(--font-ui); font-weight: normal; /* UI字体本身可能较粗 */ color: #90c0a0; /* 标签颜色 */ text-shadow: none; padding-right: 0.8em; } .notaninfobox .infobox-rows .infobox-row:nth-child(2n) .infobox-row-label, .notaninfobox .infobox-rows .infobox-row:nth-child(2n) .infobox-row-field { background-color: rgba(90, 255, 150, 0.04); /* 非常淡的隔行背景 */ } .notaninfobox .infobox-row .infobox-row-field { color: #d0f0e0; /* 字段值颜色 */ } /* Infoboxes with tabber */ .tabber-container-infobox .tabber .tabbertab, .tabber-container-infobox ul.tabbernav li a, .tabber-container-infobox ul.tabbernav li.tabberactive a { background: none; border: none; } .tabber-container-infobox .tabber .tabbertab { padding: 0; } .tabber-container-infobox ul.tabbernav { font: inherit; font-size: 100%; } .tabber-container-infobox ul.tabbernav li a:hover { color: #000; } .tabber-container-infobox ul.tabbernav > li { margin-bottom: 5px; padding: 0; } .tabber-container-infobox ul.tabbernav > li > a { color: #595959; padding-bottom: 1px; display: block; font-family: var(--font-body); } .tabber-container-infobox ul.tabbernav > li > a::before { display: block; content: attr(alt); font-weight: bold; height: 0; color: transparent; overflow: hidden; visibility: hidden; } .tabber-container-infobox ul.tabbernav > li.tabberactive { border: none; } .modulebox { border: 1px solid #ccc; padding: 10px; margin: 10px 0; background-color: #f9f9f9; box-shadow: 0 0 var(--crt-glow-radius) var(--crt-glow-color); } .tabber-container-infobox ul.tabbernav > li.tabberactive > a { font-weight: bold; color: var(--link-color); border-bottom: 2px solid var(--custom-mcwiki-header-color); } .infobox-rows p { margin: 0; } .infobox-rows dl + dl { margin-top: -0.4em; } .infobox-rows dl:last-child { margin-bottom: 0.2em; } .infobox-footer { text-align: center; font-family: var(--font-body); text-shadow: 0 0 var(--crt-glow-radius) var(--crt-glow-color); } /* 页面底部导航框 - 调整 */ table.navbox{ border: 1px solid rgba(90, 255, 150, 0.25); background-color: rgba(35, 55, 40, 0.94); box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2); } .navbox-title, table.navbox th{ font-family: var(--font-title); background: linear-gradient(to bottom, rgba(90, 255, 150, 0.18), rgba(90, 255, 150, 0.08)); color: #d8f8e8; text-shadow: var(--crt-text-shadow); } .navbox-abovebelow, .navbox-group, .navbox-subgroup .navbox-title{ font-family: var(--font-ui); background: linear-gradient(to bottom, rgba(90, 255, 150, 0.12), rgba(90, 255, 150, 0.06)); color: #b0e0c0; text-shadow: var(--crt-text-shadow); } .navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow{ background: linear-gradient(to bottom, rgba(90, 255, 150, 0.08), rgba(90, 255, 150, 0.04)); } .navbox-list { font-family: var(--font-body); font-size: calc(var(--base-font-size-px) * 1px); } .navbox-even{ background-color: rgba(90, 255, 150, 0.03); } .navbox-odd{ background-color: transparent; } /* 按钮样式 - 增强复古感 */ .collapseButton { font-family: var(--font-ui); font-size: calc(var(--ui-font-size-px) * 1px); padding: 4px 10px; border: 1px solid rgba(90, 255, 150, 0.4); /* 辉光边框 */ border-radius: 3px; background: linear-gradient(to bottom, rgba(60, 80, 65, 0.9), rgba(40, 60, 45, 0.9)); /* 深色按钮背景 */ color: #b0e0c0; /* 按钮文字颜色 */ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); /* 文字底部阴影 */ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(90, 255, 150, 0.15); /* 外阴影和内高光 */ cursor: pointer; transition: all 0.15s ease; float: right; font-weight: normal; text-align: right; width: auto; margin: 3px 5px; } .collapseButton:hover { background: linear-gradient(to bottom, rgba(70, 90, 75, 0.9), rgba(50, 70, 55, 0.9)); border-color: rgba(120, 255, 180, 0.6); color: #d8f8e8; /* 悬停文字变亮 */ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(120, 255, 180, 0.2); } .collapseButton:active { background: linear-gradient(to bottom, rgba(40, 60, 45, 0.9), rgba(60, 80, 65, 0.9)); /* 按下反转渐变 */ box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); /* 按下内阴影 */ text-shadow: none; color: #a0d0b0; } .navbox .collapseButton { width: 6em; } /* 黑幕效果 */ .heimu, .heimu rt{ --heimu-color: #252525; --heimu-text-color: #fff; --heimu-link-color: #add8e6; --heimu-visited-link-color: #c5cae9; --heimu-new-link-color: #fcc; --heimu-new-visited-link-color: #ef9a9a; --heimu-extiw-visited-link-color: #d1c4e9; background-color: var(--heimu-color); } .heimu, .heimu a, a .heimu, a.new .heimu, span.heimu a:visited, span.heimu a.new, span.heimu a.external, span.heimu a.external:visited, span.heimu a.extiw, span.heimu a.extiw:visited, span.heimu a.mw-disambig, span.heimu a.mw-redirect{ transition: color 0.13s linear; color: var(--heimu-color); text-shadow: none; } span.heimu:hover, span.heimu:active{ color: var(--heimu-text-color); } span.heimu:hover a, a:hover span.heimu{ color: var(--heimu-link-color); } span.heimu:hover a:visited, a:visited:hover span.heimu{ color: var(--heimu-visited-link-color); } span.heimu:hover a.new, a.new:hover span.heimu{ color: var(--heimu-new-link-color); } span.heimu a.new:hover:visited, a.new:hover:visited span.heimu{ color: var(--heimu-new-visited-link-color); } span.heimu:hover a.extiw:visited, a.extiw:visited:hover span.heimu{ color: var(--heimu-extiw-visited-link-color); } [color-mode="dark"] .heimu, [color-mode="dark"] .heimu rt{ --heimu-color: #5e6272; } /* 彩幕效果 */ .colormu-drk { color: #FFF; } .colormu-bri { color: #000; } .colormu-drk:not(.colormu_toggle_on) a { color: #add8e6; } .colormu-drk:not(.colormu_toggle_on) a.new { color: #FCC; } .colormu>span, .colormu a, .colormu a>span { transition: color 0.2s; } .colormu:not(:hover):not(:active):not(.colormu_toggle_on)>span, .colormu:not(:hover):not(:active):not(.colormu_toggle_on) a { color: transparent; } .colormu:not(:hover):not(:active):not(.colormu_toggle_on) a>span { color: transparent !important; } a .colormu-bri { color: inherit; } a:hover .colormu>span, a:active .colormu>span, .colormu-drk.colormu_toggle_on, .colormu_toggle_on>span, .colormu-drk.colormu_toggle_on a>span { color: inherit !important; } /* 表格样式 - 调整 */ table { border: 1px solid rgba(90, 255, 150, 0.3); background-color: rgba(40, 60, 45, 0.92); box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2); border-radius: 4px; margin: 1.5em 0; } table th { font-family: var(--font-ui); font-size: calc(var(--ui-font-size-px) * 1px); background: linear-gradient(to bottom, rgba(90, 255, 150, 0.15), rgba(90, 255, 150, 0.08)); color: #d0f0e0; font-weight: normal; text-shadow: var(--crt-text-shadow); padding: 10px 14px; text-transform: uppercase; border-bottom: 1px solid rgba(90, 255, 150, 0.25); } table td, table th { border: 1px solid rgba(90, 255, 150, 0.15); padding: 9px 13px; transition: background-color 0.2s ease; font-family: var(--font-body); font-size: calc(var(--base-font-size-px) * 1px); } table tr:nth-child(even) td { background-color: rgba(90, 255, 150, 0.04); } table tr:hover td { background-color: rgba(90, 255, 150, 0.1); color: #fff; } /* 代码样式 - 调整 */ pre, code { font-family: var(--font-body); /* 或指定等宽字体 */ font-size: calc(var(--code-font-size-px) * 1px); background-color: rgba(10, 20, 15, 0.85); /* 更深的背景 */ border: 1px solid rgba(90, 255, 150, 0.2); padding: 0.4em 0.6em; text-shadow: none; border-radius: 3px; color: #a8d8b8; /* 代码文本颜色 */ } pre { padding: 1.2em; overflow-x: auto; background: repeating-linear-gradient( -45deg, rgba(10, 20, 15, 0.85), rgba(10, 20, 15, 0.85) 5px, rgba(15, 25, 20, 0.85) 5px, rgba(15, 25, 20, 0.85) 10px ), /* 斜纹背景 */ rgba(10, 20, 15, 0.9); box-shadow: inset 0 2px 5px rgba(0,0,0,0.3); } /* 确保文本内容在荧光字体下清晰可读 */ p, li, td, th, figcaption, blockquote, cite { /* 字体和大小已分别设置 */ line-height: 1.7; letter-spacing: 0.02em; /* 像素字体可能需要调整间距 */ position: relative; text-shadow: var(--crt-text-shadow); } /* 图片效果 - 增加边框效果 */ img { max-width: 100%; height: auto; transition: all 0.25s ease; border-radius: 2px; border: 1px solid rgba(90, 255, 150, 0.2); box-shadow: 0 1px 2px rgba(0,0,0,0.15), inset 0 0 3px rgba(0,0,0,0.2); } img:hover { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 0 10px var(--crt-glow-color), /* 调整悬停辉光 */ inset 0 0 5px rgba(90, 255, 150, 0.1); transform: scale(1.01); border-color: rgba(120, 255, 180, 0.4); } /* 滚动条样式 - 适配暗色主题 */ ::-webkit-scrollbar { width: 13px; height: 13px; } ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); border-radius: 6px; box-shadow: inset 0 0 4px rgba(0,0,0,0.4); } ::-webkit-scrollbar-thumb { background: linear-gradient(to bottom, rgba(90, 255, 150, 0.4), rgba(90, 255, 150, 0.2)); border-radius: 6px; border: 1px solid rgba(0, 0, 0, 0.4); box-shadow: inset 0 1px 0 rgba(90, 255, 150, 0.2); } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(to bottom, rgba(110, 255, 170, 0.5), rgba(110, 255, 170, 0.3)); } /* 打印样式覆盖 - 保持不变 */ @media print { :root { --scanlines-display: none; } body::before, body::after, body .scanlines { display: none !important; } * { text-shadow: none !important; box-shadow: none !important; animation: none !important; } body, p, li, td, th { font-family: serif !important; } h1, h2, h3, h4, h5, h6 { font-family: sans-serif !important; font-weight: bold !important; } a { color: #000 !important; text-decoration: underline !important; } html { background: none !important; } body { background: #fff !important; box-shadow: none !important; } } /* 媒体查询,适应不同设备 - 调整基础字号 */ @media screen and (max-width: 768px) { :root { --base-font-size-px: 15; /* 小屏幕也用16px */ --ui-font-size-px: 12; } body { padding: 1rem; margin: 0.5rem; min-height: calc(100vh - 1rem); } } @media screen and (min-width: 1440px) { :root { --base-font-size-px: 16; --ui-font-size-px: 12; } } /* 边栏样式 - 增强质感 */ .side-block { background: linear-gradient(135deg, rgba(45, 65, 50, 0.92), rgba(35, 55, 40, 0.95)); /* 对角渐变 */ border: 1px solid rgba(90, 255, 150, 0.35); border-radius: 5px; margin: 0.5rem 0.5rem 1rem 0; padding: 0.6rem; box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(90, 255, 150, 0.1), inset 0 0 20px rgba(90, 255, 150, 0.07); font-family: var(--font-ui); } .side-block .heading { font-family: var(--font-title); font-size: calc(var(--ui-font-size-px) * 1px); color: #e0f8e8; text-shadow: var(--crt-text-shadow); padding: 0.6rem 0.8rem; margin: -0.6rem -0.6rem 0.6rem -0.6rem; border-bottom: 1px solid rgba(90, 255, 150, 0.3); background: linear-gradient(to bottom, rgba(90, 255, 150, 0.15), rgba(90, 255, 150, 0.08)); border-top-left-radius: 4px; border-top-right-radius: 4px; letter-spacing: 0.08em; text-transform: uppercase; } .side-block div.menu-item { margin: 0 -0.6rem; border-bottom: 1px solid rgba(90, 255, 150, 0.1); } .side-block div.menu-item:last-child { border-bottom: none; border-bottom-left-radius: 4px; /* 匹配容器圆角 */ border-bottom-right-radius: 4px; overflow: hidden; /* 隐藏溢出 */ } .side-block div.menu-item a { display: block; padding: 0.6rem 1.2rem; color: #a8d8b8; /* 菜单项颜色 */ text-decoration: none; font-size: calc(var(--ui-font-size-px) * 1px); transition: background-color 0.15s ease, color 0.15s ease, text-shadow 0.15s ease; text-shadow: none; position: relative; } .side-block div.menu-item a::before { /* 添加悬停指示器 */ content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background-color: #7bf0a0; opacity: 0; transition: opacity 0.2s ease; } .side-block div.menu-item a:hover { background-color: rgba(90, 255, 150, 0.08); color: #e8f8e8; /* 悬停变亮 */ text-shadow: 0 0 5px rgba(120, 255, 180, 0.4); } .side-block div.menu-item a:hover::before { opacity: 1; } /* 移除hovers库样式 - 如果不再需要 */ /* [class*='hovers-'] { display: none; } */
返回
Common.css
。
工具
链入页面
相关更改
特殊页面
页面信息
Cargo数据