MediaWiki:Common.css：修订间差异
来自Age Of History 2 Chinese Wiki
无编辑摘要 标签：已被回退 |
无编辑摘要 |
||
| （未显示同一用户的84个中间版本） | |||
| 第1行： | 第1行： | ||
/* | /* Windows XP风格MediaWiki主题 - 完整迁移自Wikidot */ | ||
/* 导入所需字体 */ | |||
@import url("https://fonts.googleapis.com/css2?family=Microsoft+Sans+Serif&display=swap"); | |||
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"); | @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-16px.css"); | ||
@import url("https://fastly.jsdelivr.net/gh/hoah2333/Fonts@main/Typeface-VonwaonBitmap-12px.css"); | @import url("https://fastly.jsdelivr.net/gh/hoah2333/Fonts@main/Typeface-VonwaonBitmap-12px.css"); | ||
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap'); | |||
:root { | :root { | ||
/* 主题基础设置 */ | |||
--fade-in-delay: 0.1s; | |||
--theme-base: "xp-style"; | |||
--theme-id: "windows-xp"; | |||
--theme-name: "Windows XP Theme"; | |||
/* 字体设置 - 保持原有字体 */ | |||
--body-font: "VonwaonBitmap 16px", VT323, monospace; | |||
--header-font: "VonwaonBitmap 16px", VT323, monospace; | |||
--title-font: "VonwaonBitmap 16px", VT323, monospace; | |||
--mono-font: "VonwaonBitmap 16px", VT323, monospace; | |||
--pixel-font-16: 'VonwaonBitmap 16px', VT323, monospace; | |||
--pixel-font-12: 'VonwaonBitmap 12px', VT323, monospace; | |||
--base-font-size: 14px; | |||
/* Windows XP 颜色方案 */ | |||
--xp-blue: 49, 106, 197; | |||
--xp-blue-light: 82, 153, 235; | |||
--xp-blue-dark: 16, 35, 85; | |||
--xp-green: 57, 154, 48; | |||
--xp-button: 192, 192, 192; | |||
--xp-window-border: 0, 0, 0; | |||
--xp-window-bg: 236, 233, 216; | |||
--xp-text: 0, 0, 0; | |||
/* 颜色方案 - 迁移并适配XP风格 */ | |||
--white-monochrome: 255, 255, 255; | |||
--pale-gray-monochrome: 236, 233, 216; | |||
--light-gray-monochrome: 192, 192, 192; | |||
--gray-monochrome: 128, 128, 128; | |||
--black-monochrome: 0, 0, 0; | |||
--bright-accent: var(--xp-blue); | |||
--medium-accent: var(--xp-blue); | |||
--dark-accent: var(--xp-blue-dark); | |||
--pale-accent: var(--xp-blue-light); | |||
/* 链接颜色 */ | |||
--link-color: 0, 0, 255; | |||
--visited-link-color: 128, 0, 128; | |||
--hover-link-color: 0, 0, 255; | |||
/* 文本阴影 */ | |||
--text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); | |||
/* 边框和阴影 */ | |||
--window-border: 1px solid rgb(var(--xp-window-border)); | |||
--window-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); | |||
} | |||
/* 应用全局字体 */ | |||
body { | |||
font-family: var(--body-font) !important; | |||
font-size: var(--base-font-size) !important; | |||
line-height: 1.5 !important; | |||
background-color: #3a6ea5; /* 经典XP桌面蓝色背景 */ | |||
background-image: url("/aoh2wiki/images/b/be/Microsoft_Nostalgic_Windows_Wallpaper_4k.jpg"); | |||
background-size: cover; | |||
background-position: center; | |||
background-repeat: no-repeat; | |||
background-attachment: fixed; | |||
color: rgb(var(--xp-text)); | |||
} | } | ||
/* | /* 标题字体 */ | ||
h1, h2, h3, h4, h5, h6, #firstHeading { | |||
font-family: var(--title-font); | |||
color: rgb(var(--white-monochrome)); | |||
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light))); | |||
padding: 5px 10px; | |||
margin-top: 10px; | |||
border-bottom: 1px solid rgb(var(--xp-window-border)); | |||
position: relative; | |||
text-shadow: var(--text-shadow); | |||
} | } | ||
/* | /* 窗口操作按钮 - 关闭、最大化、最小化 */ | ||
h1::after, | |||
h2::after, | |||
h3::after, | |||
h4::after, | |||
h5::after, | |||
h6::after, | |||
#firstHeading::after { | |||
content: "×"; | |||
position: absolute; | |||
top: 2px; | |||
right: 5px; | |||
width: 16px; | |||
height: 16px; | |||
background-color: #ff6347; | |||
border: 1px solid rgb(var(--xp-window-border)); | |||
text-align: center; | |||
line-height: 16px; | |||
font-size: 12px; | |||
color: white; | |||
cursor: pointer; | |||
} | } | ||
h1::before, | |||
h2::before, | |||
h3::before, | |||
h4::before, | |||
h5::before, | |||
h6::before, | |||
#firstHeading::before { | |||
content: "□"; | |||
position: absolute; | |||
top: 2px; | |||
right: 25px; | |||
width: 16px; | |||
height: 16px; | |||
background-color: rgb(var(--light-gray-monochrome)); | |||
border: 1px solid rgb(var(--xp-window-border)); | |||
text-align: center; | |||
line-height: 16px; | |||
font-size: 12px; | |||
color: black; | |||
cursor: pointer; | |||
} | } | ||
h1 span::before, | |||
h2 span::before, | |||
h3 span::before, | |||
h4 span::before, | |||
h5 span::before, | |||
h6 span::before, | |||
#firstHeading span::before { | |||
content: "_"; | |||
position: absolute; | |||
top: 2px; | |||
right: 45px; | |||
width: 16px; | |||
height: 16px; | |||
background-color: rgb(var(--light-gray-monochrome)); | |||
border: 1px solid rgb(var(--xp-window-border)); | |||
text-align: center; | |||
line-height: 14px; | |||
font-size: 12px; | |||
color: black; | |||
font-weight: bold; | |||
cursor: pointer; | |||
} | } | ||
/* | /* 链接样式 */ | ||
a { | |||
color: rgb(var(--link-color)); | |||
text-decoration: none; | |||
} | } | ||
a:visited { | |||
color: rgb(var(--visited-link-color)); | |||
} | } | ||
a:hover { | |||
color: rgb(var(--hover-link-color)); | |||
text-decoration: underline; | |||
} | |||
/* ">" 箭头指示符 - 保留原样 */ | |||
a:hover::before { | |||
content: "> "; | |||
text- | |||
} | } | ||
/* 背景样式 */ | |||
html, body { | |||
background-color: #3a6ea5 !important; /* 保留XP桌面风格 */ | |||
} | } | ||
/* | /* 搜索框和搜索按钮样式 */ | ||
#searchButton, | |||
.searchButton, | |||
input[type="submit"], | |||
input[type="button"], | |||
.mw-ui-button, | |||
button[name="go"], | |||
button[name="fulltext"], | |||
.mw-ui-button.mw-ui-progressive { | |||
background: linear-gradient(to bottom, #f6f6f6, #e0e0e0) !important; | |||
border: 1px solid #ababab !important; | |||
color: black !important; | |||
font-family: var(--body-font) !important; | |||
padding: 3px 8px !important; | |||
cursor: pointer !important; | |||
transition: all 0.2s ease !important; | |||
border-radius: 0 !important; | |||
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2) !important; | |||
} | } | ||
#searchButton:hover, | |||
.searchButton:hover, | |||
input[type="submit"]:hover, | |||
input[type="button"]:hover, | |||
.mw-ui-button:hover, | |||
button[name="go"]:hover, | |||
button[name="fulltext"]:hover, | |||
.mw-ui-button.mw-ui-progressive:hover { | |||
background: linear-gradient(to bottom, #f9f9f9, #e9e9e9) !important; | |||
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3) !important; | |||
} | } | ||
/* | /* 分类条样式 */ | ||
#catlinks, | |||
.catlinks { | |||
background-color: rgb(var(--xp-window-bg)) !important; | |||
border: 1px solid rgb(var(--xp-window-border)) !important; | |||
padding: 0.5em !important; | |||
margin-top: 1em !important; | |||
font-family: var(--body-font) !important; | |||
box-shadow: var(--window-shadow) !important; | |||
} | } | ||
#catlinks a, | |||
.catlinks a { | |||
color: rgb(var(--link-color)) !important; | |||
text-decoration: none !important; | |||
} | } | ||
#catlinks a:hover, | |||
.catlinks a:hover { | |||
color: rgb(var(--hover-link-color)) !important; | |||
text-decoration: underline !important; | |||
} | } | ||
/* | /* 工具栏样式 */ | ||
. | #footer-info, | ||
#footer-places, | |||
.footer-places, | |||
.footer-info { | |||
background-color: rgb(var(--xp-window-bg)) !important; | |||
border-top: 1px solid rgb(var(--xp-window-border)) !important; | |||
color: rgb(var(--xp-text)) !important; | |||
padding: 0.5em 1em !important; | |||
font-family: var(--body-font) !important; | |||
} | } | ||
#footer-info a, | |||
#footer-places a { | |||
color: rgb(var(--link-color)) !important; | |||
} | } | ||
#footer-info a:hover, | |||
#footer-places a:hover { | |||
color: rgb(var(--hover-link-color)) !important; | |||
} | } | ||
/* | /* 主内容区背景 */ | ||
#content { | |||
background-color: rgb(var(--xp-window-bg)); | |||
position: relative; | |||
border: 2px solid rgb(var(--xp-window-border)); | |||
box-shadow: var(--window-shadow); | |||
margin: 10px auto; | |||
padding: 0; | |||
border-radius: 0; | |||
} | } | ||
/* | /* 导航栏 */ | ||
.navbar, | |||
.navbar.navbar-default, | |||
.navbar-light { | |||
background-color: rgb(var(--xp-window-bg)) !important; | |||
border: 1px solid rgb(var(--xp-window-border)) !important; | |||
box-shadow: var(--window-shadow) !important; | |||
border-radius: 0 !important; | |||
} | } | ||
.navbar .navbar-brand, | |||
.navbar .nav-link, | |||
.navbar-light .navbar-nav .nav-link { | |||
color: rgb(var(--link-color)) !important; | |||
font-family: var(--header-font) !important; | |||
} | } | ||
. | |||
.navbar .nav-link:hover, | |||
.navbar-light .navbar-nav .nav-link:hover { | |||
color: rgb(var(--hover-link-color)) !important; | |||
background-color: rgba(var(--xp-blue), 0.1) !important; | |||
} | } | ||
. | /* 下拉菜单 */ | ||
.dropdown-menu { | |||
background-color: rgb(var(--xp-window-bg)) !important; | |||
border: 1px solid rgb(var(--xp-window-border)) !important; | |||
box-shadow: var(--window-shadow) !important; | |||
border-radius: 0 !important; | |||
} | } | ||
. | .dropdown-item { | ||
color: rgb(var(--link-color)) !important; | |||
font-family: var(--body-font) !important; | |||
} | } | ||
. | .dropdown-item:hover { | ||
background-color: rgba(var(--xp-blue), 0.1) !important; | |||
color: rgb(var(--hover-link-color)) !important; | |||
} | } | ||
/* | /* 侧边栏 */ | ||
#mw-navigation, #mw-panel, .sidebar { | |||
background-color: rgb(var(--xp-window-bg)) !important; | |||
border: 2px solid rgb(var(--xp-window-border)) !important; | |||
box-shadow: var(--window-shadow) !important; | |||
border-radius: 0 !important; | |||
} | } | ||
#mw-navigation h2, #mw-panel h3, .sidebar h3 { | |||
. | background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light))) !important; | ||
color: rgb(var(--white-monochrome)) !important; | |||
font-family: var(--header-font) !important; | |||
border-bottom: 1px solid rgb(var(--xp-window-border)) !important; | |||
padding: 5px 10px !important; | |||
text-shadow: var(--text-shadow) !important; | |||
position: relative !important; | |||
} | } | ||
/* | /* 工具栏 */ | ||
. | #p-tb, .tools-menu { | ||
background-color: rgb(var(--xp-window-bg)) !important; | |||
border: 2px solid rgb(var(--xp-window-border)) !important; | |||
box-shadow: var(--window-shadow) !important; | |||
border-radius: 0 !important; | |||
} | } | ||
/* | /* 内容区域 */ | ||
. | #content, .mw-body { | ||
background-color: rgb(var(--xp-window-bg)) !important; | |||
border: 2px solid rgb(var(--xp-window-border)) !important; | |||
box-shadow: var(--window-shadow) !important; | |||
border-radius: 0 !important; | |||
} | } | ||
/* | /* 页脚 */ | ||
#footer, .footer { | |||
background-color: rgb(var(--xp-window-bg)) !important; | |||
border: 2px solid rgb(var(--xp-window-border)) !important; | |||
border-top: 1px solid rgb(var(--xp-window-border)) !important; | |||
color: rgb(var(--xp-text)) !important; | |||
box-shadow: var(--window-shadow) !important; | |||
border-radius: 0 !important; | |||
margin: 10px auto !important; | |||
padding: 10px !important; | |||
} | } | ||
/* | /* 搜索框 */ | ||
#searchInput, .form-control { | |||
background-color: white !important; | |||
border: 1px solid #7f9db9 !important; | |||
color: rgb(var(--xp-text)) !important; | |||
font-family: var(--body-font) !important; | |||
padding: 3px 5px !important; | |||
var(-- | |||
} | } | ||
/* | /* 按钮 */ | ||
.btn, .mw-ui-button { | |||
background: linear-gradient(to bottom, #f6f6f6, #e0e0e0) !important; | |||
border: 1px solid #ababab !important; | |||
color: black !important; | |||
font-family: var(--body-font) !important; | |||
padding: 3px 8px !important; | |||
border-radius: 0 !important; | |||
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2) !important; | |||
} | } | ||
.btn:hover, .mw-ui-button:hover { | |||
background: linear-gradient(to bottom, #f9f9f9, #e9e9e9) !important; | |||
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3) !important; | |||
} | } | ||
/* 表格 */ | |||
.wikitable, table.wikitable { | |||
background-color: rgb(var(--xp-window-bg)) !important; | |||
border: 2px solid rgb(var(--xp-window-border)) !important; | |||
border-collapse: separate !important; | |||
border-spacing: 0 !important; | |||
box-shadow: var(--window-shadow) !important; | |||
} | } | ||
.wikitable th { | |||
background: linear-gradient(to bottom, #e3e3e3, #d0d0d0) !important; | |||
border: 1px solid #ababab !important; | |||
color: black !important; | |||
padding: 5px !important; | |||
} | } | ||
.wikitable td { | |||
border: 1px solid #ababab !important; | |||
background-color: white !important; | |||
color: black !important; | |||
padding: 5px !important; | |||
} | } | ||
/* 代码块和预格式文本 */ | |||
pre, code, .mw-code { | |||
background-color: white !important; | |||
border: 1px solid #ababab !important; | |||
color: black !important; | |||
font-family: var(--mono-font) !important; | |||
padding: 5px !important; | |||
} | } | ||
/* | /* 链接颜色 */ | ||
a { | a { | ||
color: rgb(var(--link-color)) !important; | |||
} | |||
a:visited { | |||
color: rgb(var(--visited-link-color)) !important; | |||
} | } | ||
a:hover { | a:hover { | ||
color: rgb(var(--hover-link-color)) !important; | |||
text-decoration: underline !important; | |||
} | |||
/* 扫描线动画 - 修改为半透明灰色 */ | |||
.scan-animation { | |||
position: fixed; | |||
width: 100%; | |||
height: 100%; | |||
top: 0; | |||
left: 0; | |||
pointer-events: none; | |||
z-index: 9999; | |||
} | |||
/* 主扫描线 - 较宽较慢 */ | |||
.scan-animation::before { | |||
content: ""; | |||
position: absolute; | |||
width: 100%; | |||
height: 6px; | |||
top: 0; | |||
background: linear-gradient( | |||
to bottom, | |||
rgba(128, 128, 128, 0) 0%, | |||
rgba(128, 128, 128, 0.1) 20%, | |||
rgba(128, 128, 128, 0.2) 50%, | |||
rgba(128, 128, 128, 0.1) 80%, | |||
rgba(128, 128, 128, 0) 100% | |||
); | |||
box-shadow: | |||
0 0 8px rgba(128, 128, 128, 0.15), | |||
0 0 15px rgba(128, 128, 128, 0.1); | |||
animation: scanMain 12s linear infinite; | |||
opacity: 0.4; | |||
} | |||
/* 副扫描线 - 中等速度 */ | |||
.scan-animation::after { | |||
content: ""; | |||
position: absolute; | |||
width: 100%; | |||
height: 3px; | |||
top: 0; | |||
background: linear-gradient( | |||
to bottom, | |||
rgba(128, 128, 128, 0) 0%, | |||
rgba(128, 128, 128, 0.3) 50%, | |||
rgba(128, 128, 128, 0) 100% | |||
); | |||
box-shadow: 0 0 6px rgba(128, 128, 128, 0.2); | |||
animation: scanSecondary 7s linear infinite; | |||
animation-delay: -3s; | |||
opacity: 0.25; | |||
} | |||
/* 快速扫描线 - 细小快速 */ | |||
.scan-animation .fast-scan { | |||
position: absolute; | |||
width: 100%; | |||
height: 1px; | |||
top: 0; | |||
background: rgba(128, 128, 128, 0.6); | |||
box-shadow: 0 0 3px rgba(128, 128, 128, 0.3); | |||
animation: scanFast 3s linear infinite; | |||
animation-delay: -1.5s; | |||
opacity: 0.15; | |||
} | |||
/* 各个扫描线的动画 */ | |||
@keyframes scanMain { | |||
0% { | |||
top: -2rem; | |||
opacity: 0.6; | |||
} | |||
50% { | |||
opacity: 0.3; | |||
} | |||
100% { | |||
top: 100vh; | |||
opacity: 0.6; | |||
} | |||
} | |||
@keyframes scanSecondary { | |||
0% { | |||
top: -1rem; | |||
opacity: 0.4; | |||
} | |||
35% { | |||
opacity: 0.2; | |||
} | |||
70% { | |||
opacity: 0.5; | |||
} | |||
100% { | |||
top: 100vh; | |||
opacity: 0.4; | |||
} | |||
} | } | ||
@keyframes scanFast { | |||
0% { | |||
top: -0.3rem; | |||
opacity: 0.3; | |||
} | |||
50% { | |||
opacity: 0.6; | |||
} | |||
100% { | |||
top: 100vh; | |||
opacity: 0.3; | |||
} | |||
} | } | ||
/* | /* 保留原始的淡入效果 */ | ||
@keyframes fadeIn { | |||
from { | |||
opacity: 0; | |||
transform: translateY(20px); | |||
} | |||
to { | |||
opacity: 1; | |||
transform: translateY(0); | |||
} | |||
} | } | ||
/* 应用动画到内容 */ | |||
.mw-parser-output > * { | |||
animation: fadeIn 0.5s ease-out forwards; | |||
opacity: 0; | |||
} | } | ||
/* | /* 延迟动画 */ | ||
.mw-parser-output > *:nth-child(1) { animation-delay: 0.1s; } | |||
.mw-parser-output > *:nth-child(2) { animation-delay: 0.2s; } | |||
.mw-parser-output > *:nth-child(3) { animation-delay: 0.3s; } | |||
.mw-parser-output > *:nth-child(4) { animation-delay: 0.4s; } | |||
.mw-parser-output > *:nth-child(5) { animation-delay: 0.5s; } | |||
.mw-parser-output > *:nth-child(n+6) { animation-delay: 0.6s; } | |||
/* 修复代码区域样式 */ | |||
.mw-highlight pre { | |||
background-color: white !important; | |||
border: 1px solid #ababab !important; | |||
padding: 1em !important; | |||
overflow: auto !important; | |||
} | } | ||
/* 语法高亮颜色 - 保持原有值 */ | |||
.mw-highlight .k { color: #0000AA !important; } /* 关键字 */ | |||
.mw-highlight .s { color: #006600 !important; } /* 字符串 */ | |||
.mw-highlight .c { color: #666666 !important; } /* 注释 */ | |||
.mw-highlight .n { color: #000000 !important; } /* 名称 */ | |||
.mw-highlight .o { color: #000000 !important; } /* 运算符 */ | |||
/* 引用样式 - Windows XP风格 */ | |||
.lightstyled-quote, .darkstyled-quote { | |||
background-color: rgb(var(--xp-window-bg)); | |||
color: rgb(var(--xp-text)); | |||
border: 1px solid #ababab; | |||
padding: 10px; | |||
margin: 10px 0; | |||
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); | |||
border-left: 4px solid rgb(var(--xp-blue)); | |||
position: relative; | |||
} | } | ||
.lightstyled-quote::before, .darkstyled-quote::before { | |||
content: "Information"; | |||
position: absolute; | |||
top: -22px; | |||
left: 0; | |||
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light))); | |||
color: white; | |||
padding: 2px 10px; | |||
font-weight: bold; | |||
font-size: 0.9em; | |||
text-shadow: var(--text-shadow); | |||
} | } | ||
/* 块样式 - Windows XP风格 */ | |||
.lightblock, .darkblock { | |||
background-color: rgb(var(--xp-window-bg)); | |||
color: rgb(var(--xp-text)); | |||
border: 2px solid rgb(var(--xp-window-border)); | |||
box-shadow: var(--window-shadow); | |||
padding: 10px; | |||
margin: 10px 0; | |||
position: relative; | |||
border-radius: 0; | |||
} | } | ||
.lightblock::before, .darkblock::before { | |||
content: "Message"; | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
right: 0; | |||
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light))); | |||
color: white; | |||
padding: 5px 10px; | |||
font-weight: bold; | |||
text-align: left; | |||
text-shadow: var(--text-shadow); | |||
border-bottom: 1px solid rgb(var(--xp-window-border)); | |||
} | } | ||
.lightblock::after, .darkblock::after { | |||
. | content: "×"; | ||
position: absolute; | |||
top: 2px; | |||
right: 5px; | |||
width: 16px; | |||
height: 16px; | |||
background-color: #ff6347; | |||
border: 1px solid rgb(var(--xp-window-border)); | |||
text-align: center; | |||
line-height: 16px; | |||
font-size: 12px; | |||
color: white; | |||
cursor: pointer; | |||
z-index: 1; | |||
} | } | ||
/* | /* 保留黑幕效果 - 行826-947 */ | ||
. | .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; | |||
} | } | ||
/* | /* 保留彩幕效果 - 行1778-1838 */ | ||
.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; | |||
} | |||
/* for T:Coloredlink in T:彩幕 */ | |||
.colormu:not(:hover):not(:active):not(.colormu_toggle_on) a>span { | |||
color: transparent !important; | |||
} | |||
/* for T:彩幕 in link */ | |||
a .colormu-bri { | |||
color: inherit; | |||
} | |||
a:hover .colormu>span, a:active .colormu>span, | |||
/* and for MediaWiki:Gadget-heimu-toggle.js */ | |||
.colormu-drk.colormu_toggle_on, .colormu_toggle_on>span, .colormu-drk.colormu_toggle_on a>span { | |||
color: inherit !important; | |||
} | } | ||
/* | /* 橙幕效果 - 修改为Windows XP样式 */ | ||
.blackmu, | |||
.blackmu rt { | |||
--blackmu-color: var(--xp-blue); | |||
--blackmu-text-color: 255, 255, 255; | |||
--blackmu-link-color: 173, 216, 230; | |||
--blackmu-visited-link-color: 197, 202, 233; | |||
--blackmu-new-link-color: 255, 204, 204; | |||
--blackmu-new-visited-link-color: 239, 154, 154; | |||
--blackmu-extiw-visited-link-color: 209, 196, 233; | |||
background-color: rgb(var(--blackmu-color)); | |||
} | } | ||
.blackmu, | |||
.blackmu a, | |||
a .blackmu, | |||
a.new .blackmu, | |||
span.blackmu a:visited, | |||
span.blackmu a.new, | |||
span.blackmu a.external, | |||
span.blackmu a.external:visited, | |||
span.blackmu a.extiw, | |||
span.blackmu a.extiw:visited, | |||
span.blackmu a.mw-disambig, | |||
span.blackmu a.mw-redirect { | |||
transition: color 0.13s linear; | |||
color: rgb(var(--blackmu-color)); | |||
text-shadow: none; | |||
} | } | ||
span.blackmu:hover, | |||
span.blackmu:active { | |||
color: rgb(var(--blackmu-text-color)); | |||
} | } | ||
span.blackmu:hover a, | |||
a:hover span.blackmu { | |||
color: rgb(var(--blackmu-link-color)); | |||
} | } | ||
/* | /* 保留特效库代码 - 行949-1777 */ | ||
/* | |||
该文档为一个hover特效库，由一些常用的效果以及GitHub上的开源项目“Hover.css”的一些部分构成。 | |||
请使用hovers在页面中进行载入。 | |||
*/ | |||
/* hover状态切换 */ | |||
.hover-change, | |||
.hover-remote { | |||
position: relative; | position: relative; | ||
display: inline-block; | |||
transition: opacity 0.5s linear; | |||
} | } | ||
.hover-change-before, | |||
.hover-change-after, | |||
.hover-remote-target { | |||
transition: inherit; | |||
} | } | ||
.hover-change-after, | |||
.hover-remote-target { | |||
opacity: 0; | |||
position: absolute; | position: absolute; | ||
top: 0; | top: 0; | ||
left: 0; | left: 0; | ||
} | |||
.hover-remote-target { | |||
left: 100%; | |||
} | } | ||
.hover-change-after[style^='right:'], | |||
.hover-change-after[style*=' right:'], | |||
.hover-remote-after[style^='right:'], | |||
.hover-remote-after[style*=' right:'] { | |||
left: initial; | |||
} | } | ||
.hover-change-after[style^='bottom:'], | |||
.hover-change-after[style*=' bottom:'], | |||
.hover-remote-after[style^='bottom:'], | |||
.hover-remote-after[style*=' bottom:'] { | |||
top: initial; | |||
} | } | ||
.hover-change-after:hover, | |||
.hover-remote-target { | |||
opacity: 0; | |||
margin | margin-left: -9999px; | ||
} | } | ||
/* | /* 主要用于制作hover形式的标签页(tab)切换 */ | ||
. | .hover-tab-mode { | ||
position: relative; | position: relative; | ||
transition: none; | |||
} | |||
.hover-tab-mode .hover-remote { | |||
transition: inherit; | |||
position: static; | |||
} | |||
/* 闪烁效果 */ | |||
.hover-change.flash:hover .hover-change-before { | |||
margin-left: -9999px; | |||
} | |||
.hover-change:hover > .hover-change-before, | |||
.hover-remote > .hover-remote-target, | |||
.hover-change:hover > a > .hover-change-before, | |||
.hover-remote > a > .hover-remote-target { | |||
opacity: 0; | |||
} | } | ||
.hover-change:hover > .hover-change-after, | |||
. | .hover-remote:hover > .hover-remote-target, | ||
.hover-change:hover > a > .hover-change-after, | |||
.hover-remote:hover > a > .hover-remote-target { | |||
opacity: 1; | |||
margin-left: initial; | |||
margin- | |||
} | } | ||
/* | /* 基类 */ | ||
[class*='hovers-'] { | |||
display: inline-block; | display: inline-block; | ||
box-shadow: 0 0 1px rgba(0, 0, 0, 0); | |||
transform: perspective(1px) translateZ(0); | |||
vertical-align: middle; | vertical-align: middle; | ||
transition-duration: 0.25s; | |||
transition-property: all; | |||
} | } | ||
/* | /* 旋转放大 */ | ||
.hovers-rotate-shrink { | |||
transition-duration: 0.5s; | |||
transform: rotate(0) scale(0.75); | |||
} | |||
.hovers-rotate-shrink:hover { | |||
transform: rotate(360deg) scale(1); | |||
} | |||
.hovers-rotate-shrink-reverse { | |||
transition-duration: 0.5s; | |||
transform: rotate(360deg) scale(0.75); | |||
} | |||
.hovers-rotate-shrink-reverse:hover { | |||
transform: rotate(0) scale(1); | |||
} | |||
/* 旋转 */ | |||
.hovers-rotate, | |||
.hovers-rotate-reverse:hover { | |||
transition-duration: 0.5s; | |||
transform: rotate(0); | |||
} | |||
.hovers-rotate-reverse, | |||
.hovers-rotate:hover { | |||
transition-duration: 0.5s; | |||
transform: rotate(360deg); | |||
} | |||
/* 正常 => 浅 */ | |||
.hovers-fade-deep, | |||
.hovers-fade, | |||
.hovers-fade-shallow { | |||
opacity: 1; | |||
} | |||
.hovers-fade-deep:hover, | |||
.hovers-fade-deep.active { | |||
opacity: 0.35; | |||
} | |||
.hovers-fade:hover, | |||
.hovers-fade.active { | |||
opacity: 0.5; | |||
} | |||
.hovers-fade-shallow:hover, | |||
.hovers-fade-shallow.active { | |||
opacity: 0.75; | |||
} | |||
/* 浅 => 正常 */ | |||
.hovers-bloom-deep { | |||
opacity: 0.35; | |||
} | |||
.hovers-bloom { | |||
opacity: 0.5; | |||
} | |||
.hovers-bloom-shallow { | |||
opacity: 0.75; | |||
} | |||
.hovers-bloom-deep:hover, | |||
.hovers-bloom-deep.active, | |||
.hovers-bloom:hover, | |||
.hovers-bloom.active, | |||
.hovers-bloom-shallow:hover, | |||
.hovers-bloom-shallow.active { | |||
opacity: 1; | |||
} | |||
/* 正常 => 大 */ | |||
.hovers-grow-deep, | |||
.hovers-grow, | |||
.hovers-grow-shallow { | |||
transform: scale(1); | |||
} | |||
.hovers-grow-deep:hover, | |||
.hovers-grow-deep.active { | |||
transform: scale(1.5); | |||
} | |||
.hovers-grow:hover, | |||
.hovers-grow.active { | |||
transform: scale(1.25); | |||
} | |||
.hovers-grow-shallow:hover, | |||
.hovers-grow-shallow.active { | |||
transform: scale(1.1); | |||
} | |||
/* 正常 => 小 */ | |||
.hovers-shrink-deep:hover, | |||
.hovers-shrink-deep.active, | |||
.hovers-shrink:hover, | |||
.hovers-shrink.active, | |||
.hovers-shrink-shallow:hover, | |||
.hovers-shrink-shallow.active { | |||
transform: scale(1); | |||
} | |||
.hovers-shrink-deep { | |||
transform: scale(0.5); | |||
} | |||
.hovers-shrink { | |||
transform: scale(0.75); | |||
} | |||
.hovers-shrink-shallow { | |||
transform: scale(0.9); | |||
} | |||
/* 左右抖动 */ | |||
@keyframes shake-flexible { | |||
25% { | |||
transform: translateX(-0.0625em); | |||
} | |||
50% { | |||
transform: translateX(0.0625em); | |||
} | |||
75% { | |||
transform: translateX(-0.0625em); | |||
} | |||
} | |||
.hovers-shake-flexible:hover, | |||
.hovers-shake-flexible.active { | |||
animation: shake-flexible 0.5s ease-out; | |||
} | |||
@keyframes shake { | |||
25% { | |||
transform: translateX(-8px); | |||
} | |||
50% { | |||
transform: translateX(8px); | |||
} | |||
75% { | |||
transform: translateX(-8px); | |||
} | |||
} | |||
.hovers-shake:hover, | |||
.hovers-shake.active { | |||
animation: shake 0.5s ease-out; | |||
} | |||
/* 上下抖动 */ | |||
@keyframes bounce-flexible { | |||
25% { | |||
transform: translateY(-0.0625em); | |||
} | |||
50% { | |||
transform: translateY(0.0625em); | |||
} | |||
75% { | |||
transform: translateY(-0.0625em); | |||
} | |||
} | } | ||
.hovers-bounce-flexible:hover, | |||
. | .hovers-bounce-flexible.active { | ||
animation: bounce-flexible 0.5s ease-out; | |||
} | } | ||
@keyframes bounce { | |||
. | 25% { | ||
transform: translateY(-8px); | |||
} | |||
50% { | |||
transform: translateY(8px); | |||
} | |||
75% { | |||
transform: translateY(-8px); | |||
} | |||
} | |||
.hovers-bounce:hover, | |||
.hovers-bounce.active { | |||
position: relative; | position: relative; | ||
left: 0; | |||
animation: bounce 0.5s ease-out; | |||
} | |||
/* 绕顶端中点抖动 */ | |||
@keyframes swing { | |||
20% { | |||
transform: rotate3d(0, 0, 1, 10deg); | |||
} | |||
40% { | |||
transform: rotate3d(0, 0, 1, -10deg); | |||
} | |||
60% { | |||
transform: rotate3d(0, 0, 1, 5deg); | |||
} | |||
80% { | |||
transform: rotate3d(0, 0, 1, -5deg); | |||
} | |||
to { | |||
transform: rotate3d(0, 0, 1, 0deg); | |||
} | |||
} | } | ||
. | .hovers-swing { | ||
transform-origin: top center; | |||
} | |||
.hovers-swing:hover, | |||
.hovers-swing.active { | |||
animation: swing 0.75s ease-out; | |||
} | } | ||
/* | /* 正常 => 大 */ | ||
@keyframes pulse-grow { | |||
to { | |||
transform: scale(1.1); | |||
} | |||
} | } | ||
. | .hovers-pulse-grow:hover, | ||
.hovers-pulse-grow.active { | |||
animation: pulse-grow 0.5s linear infinite alternate; | |||
} | } | ||
/* | /* 正常 => 小 */ | ||
@keyframes pulse-shrink { | |||
to { | |||
transform: scale(0.9); | |||
} | |||
} | } | ||
. | .hovers-pulse-shrink:hover, | ||
.hovers-pulse-shrink.active { | |||
animation: pulse-shrink 0.5s linear infinite alternate; | |||
} | } | ||
/* | /* 正常 => 小 */ | ||
@keyframes push { | |||
50% { | |||
transform: scale(0.8); | |||
} | |||
} | } | ||
. | .hovers-push:hover, | ||
.hovers-push.active { | |||
animation: push 0.3s linear; | |||
} | } | ||
/* | /* 正常 => 大 */ | ||
@keyframes pop { | |||
50% { | |||
transform: scale(1.2); | |||
} | |||
} | } | ||
. | .hovers-pop:hover, | ||
.hovers-pop.active { | |||
animation: pop 0.3s linear; | |||
} | } | ||
/* | /* 正常 => 大 => 正常 => 大 */ | ||
.hovers-bounce-in:hover, | |||
.hovers-bounce-in.active { | |||
transform: scale(1.2); | |||
transition-duration: 0.5s; | |||
transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); | |||
} | } | ||
/* | /* 正常 => 小 => 正常 => 小 */ | ||
.hovers-bounce-out:hover, | |||
.hovers-bounce-out.active { | |||
transform: scale(0.8); | |||
transition-duration: 0.5s; | |||
transform: scale( | transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); | ||
} | } | ||
/* | /* 倾斜 */ | ||
.hovers-tilt:hover, | |||
.hovers-tilt.active { | |||
transition-duration: 0.3s; | |||
transform: rotate(4deg); | |||
} | } | ||
/* | /* 倾斜 + 放大 */ | ||
.hovers-grow-rotate:hover, | |||
.hovers-grow-rotate.active { | |||
transition-duration: 0.3s; | |||
transform: scale(1.1) rotate(4deg); | |||
} | } | ||
/* | /* 升起 */ | ||
: | .hovers-float:hover, | ||
.hovers-float.active { | |||
transition-duration: 0.3s; | |||
transition-timing-function: ease-out; | |||
transform: translateY(-8px); | |||
} | } | ||
: | /* 下沉 */ | ||
.hovers-sink:hover, | |||
.hovers-sink.active { | |||
transition-duration: 0.3s; | |||
transition-timing-function: ease-out; | |||
transform: translateY(8px); | |||
} | } | ||
/* 飘浮 */ | |||
@keyframes bob { | |||
0% { | |||
transform: translateY(-10px); | |||
} | |||
50% { | |||
transform: translateY(-5px); | |||
} | |||
100% { | |||
transform: translateY(-10px); | |||
} | |||
} | |||
@keyframes bob-float { | |||
100% { | |||
transform: translateY(-10px); | |||
} | |||
} | } | ||
.hovers-bob:hover, | |||
.hovers-bob.active { | |||
animation-name: bob-float, bob; | |||
animation-duration: 0.3s, 1.5s; | |||
animation-delay: 0s, 0.3s; | |||
animation-timing-function: ease-out, ease-in-out; | |||
animation-iteration-count: 1, infinite; | |||
animation-fill-mode: forwards; | |||
animation-direction: normal, alternate; | |||
} | } | ||
/* 悬挂 */ | |||
@keyframes hang { | |||
0% { | |||
transform: translateY(10px); | |||
} | |||
50% { | |||
transform: translateY(5px); | |||
} | |||
100% { | |||
transform: translateY(10px); | |||
} | |||
} | |||
@keyframes hang-sink { | |||
100% { | |||
transform: translateY(10px); | |||
} | |||
} | } | ||
: | .hovers-hang:hover, | ||
.hovers-hang.active { | |||
animation-name: hang-sink, hang; | |||
animation-duration: 0.3s, 1.5s; | |||
animation-delay: 0s, 0.3s; | |||
animation-timing-function: ease-out, ease-in-out; | |||
animation-iteration-count: 1, infinite; | |||
animation-fill-mode: forwards; | |||
animation-direction: normal, alternate; | |||
} | } | ||
: | /* 非对称 */ | ||
.hovers-skew:hover, | |||
.hovers-skew.active { | |||
transform: skew(-10deg); | |||
} | } | ||
/* 非对称-左 */ | |||
.hovers-skew-forward { | |||
transform-origin: 0 100%; | |||
} | |||
.hovers-skew-forward:hover, | |||
.hovers-skew-forward.active { | |||
transform: skew(-10deg); | |||
} | } | ||
/* 非对称-右 */ | |||
.hovers-skew-backward { | |||
transform-origin: 0 100%; | |||
} | |||
.hovers-skew-backward:hover, | |||
.hovers-skew-backward.active { | |||
transform: skew(10deg); | |||
} | } | ||
/* | /* 垂直抖动 */ | ||
::- | @keyframes wobble-vertical { | ||
16.65% { | |||
transform: translateY(8px); | |||
} | |||
33.3% { | |||
transform: translateY(-6px); | |||
} | |||
49.95% { | |||
transform: translateY(4px); | |||
} | |||
66.6% { | |||
transform: translateY(-2px); | |||
} | |||
83.25% { | |||
transform: translateY(1px); | |||
} | |||
100% { | |||
transform: translateY(0); | |||
} | |||
} | } | ||
.hovers-wobble-vertical:hover, | |||
.hovers-wobble-vertical.active { | |||
animation-name: wobble-vertical; | |||
animation-duration: 1s; | |||
animation-timing-function: ease-in-out; | |||
animation-iteration-count: 1; | |||
} | } | ||
/* 水平抖动 */ | |||
@keyframes wobble-horizontal { | |||
16.65% { | |||
transform: translateX(8px); | |||
} | |||
33.3% { | |||
transform: translateX(-6px); | |||
} | |||
49.95% { | |||
transform: translateX(4px); | |||
} | |||
66.6% { | |||
transform: translateX(-2px); | |||
} | |||
83.25% { | |||
transform: translateX(1px); | |||
} | |||
100% { | |||
transform: translateX(0); | |||
} | |||
} | |||
.hovers-wobble-horizontal:hover, | |||
.hovers-wobble-horizontal.active { | |||
animation-name: wobble-horizontal; | |||
animation-duration: 1s; | |||
animation-timing-function: ease-in-out; | |||
animation-iteration-count: 1; | |||
} | } | ||
/* 右下弹回 */ | |||
@keyframes wobble-to-bottom-right { | |||
16.65% { | |||
transform: translate(8px, 8px); | |||
} | |||
33.3% { | |||
transform: translate(-6px, -6px); | |||
} | |||
49.95% { | |||
transform: translate(4px, 4px); | |||
} | |||
66.6% { | |||
transform: translate(-2px, -2px); | |||
} | |||
83.25% { | |||
transform: translate(1px, 1px); | |||
} | |||
100% { | |||
transform: translate(0, 0); | |||
} | |||
} | } | ||
.hovers-wobble-to-bottom-right:hover, | |||
.hovers-wobble-to-bottom-right.active { | |||
animation-name: wobble-to-bottom-right; | |||
animation-duration: 1s; | |||
animation-timing-function: ease-in-out; | |||
animation-iteration-count: 1; | |||
} | } | ||
/* | /* 右上弹回 */ | ||
@keyframes wobble-to-top-right { | |||
16.65% { | |||
transform: translate(8px, -8px) | |||
} | |||
33.3% { | |||
transform: translate(-6px, 6px); | |||
} | |||
49.95% { | |||
transform: translate(4px, -4px); | |||
} | |||
66.6% { | |||
transform: translate(-2px, 2px); | |||
} | |||
83.25% { | |||
transform: translate(1px, -1px); | |||
} | |||
100% { | |||
transform: translate(0); | |||
} | |||
} | } | ||
.hovers-wobble-to-top-right:hover, | |||
.hovers-wobble-to-top-right.active { | |||
animation-name: wobble-to-top-right; | |||
animation-duration: 1s; | |||
animation-timing-function: ease-in-out; | |||
animation-iteration-count: 1; | |||
} | } | ||
/* | /* 果冻 */ | ||
@keyframes wobble-top { | |||
16.65% { | |||
transform: skew(-12deg); | |||
} | |||
33.3% { | |||
transform: skew(10deg); | |||
} | |||
49.95% { | |||
transform: skew(-6deg); | |||
} | |||
66.6% { | |||
transform: skew(4deg); | |||
} | |||
83.25% { | |||
transform: skew(-2deg); | |||
} | |||
100% { | |||
transform: skew(0); | |||
} | |||
} | } | ||
/* | /* 赘肉 */ | ||
. | .hovers-wobble-top { | ||
transform-origin: 0 100%; | |||
} | |||
.hovers-wobble-top:hover, | |||
.hovers-wobble-top.active { | |||
animation-name: wobble-top; | |||
animation-duration: 1s; | |||
animation-timing-function: ease-in-out; | |||
animation-iteration-count: 1; | |||
} | } | ||
@keyframes wobble-bottom { | |||
. | 16.65% { | ||
transform: skew(-12deg); | |||
} | |||
33.3% { | |||
transform: skew(10deg); | |||
transform: | } | ||
49.95% { | |||
transform: skew(-6deg); | |||
} | |||
66.6% { | |||
transform: skew(4deg); | |||
} | |||
83.25% { | |||
transform: skew(-2deg); | |||
} | |||
100% { | |||
transform: skew(0); | |||
} | |||
} | } | ||
.hovers-wobble-bottom { | |||
transform-origin: 100% 0; | |||
} | |||
.hovers-wobble-bottom:hover, | |||
.hovers-wobble-bottom.active { | |||
animation-name: wobble-bottom; | |||
animation-duration: 1s; | |||
animation-timing-function: ease-in-out; | |||
animation-iteration-count: 1; | |||
} | } | ||
. | /* 颤动 */ | ||
@keyframes wobble-skew { | |||
16.65% { | |||
transform: skew(-12deg); | |||
} | |||
33.3% { | |||
transform: skew(10deg); | |||
} | |||
49.95% { | |||
transform: skew(-6deg); | |||
} | |||
66.6% { | |||
transform: skew(4deg); | |||
} | |||
83.25% { | |||
transform: skew(-2deg); | |||
} | |||
100% { | |||
transform: skew(0); | |||
} | |||
} | |||
.hovers-wobble-skew:hover, | |||
.hovers-wobble-skew.active { | |||
animation-name: wobble-skew; | |||
animation-duration: 1s; | |||
animation-timing-function: ease-in-out; | |||
animation-iteration-count: 1; | |||
} | } | ||
/* | /* 振动 */ | ||
@keyframes buzz { | |||
50% { | |||
transform: translateX(3px) rotate(2deg); | |||
} | |||
100% { | |||
transform: translateX(-3px) rotate(-2deg); | |||
} | |||
} | } | ||
. | .hovers-buzz:hover, | ||
.hovers-buzz.active { | |||
animation-name: buzz; | |||
animation-duration: 0.15s; | |||
animation-timing-function: linear; | |||
animation-iteration-count: infinite; | |||
} | } | ||
/* | /* 振出 */ | ||
@keyframes buzz-out { | |||
10% { | |||
transform: translateX(3px) rotate(2deg); | |||
} | |||
20% { | |||
transform: translateX(-3px) rotate(-2deg); | |||
} | |||
30% { | |||
transform: translateX(3px) rotate(2deg); | |||
} | |||
40% { | |||
transform: translateX(-3px) rotate(-2deg); | |||
} | |||
50% { | |||
transform: translateX(2px) rotate(1deg); | |||
} | |||
60% { | |||
transform: translateX(-2px) rotate(-1deg); | |||
} | |||
70% { | |||
transform: translateX(2px) rotate(1deg); | |||
} | |||
80% { | |||
transform: translateX(-2px) rotate(-1deg); | |||
} | |||
90% { | |||
transform: translateX(1px) rotate(0); | |||
} | |||
100% { | |||
transform: translateX(-1px) rotate(0); | |||
} | |||
} | |||
. | .hovers-buzz-out:hover, | ||
.hovers-buzz-out.active { | |||
animation-name: buzz-out; | |||
animation-duration: 0.75s; | |||
animation-timing-function: linear; | |||
animation-iteration-count: 1; | |||
} | } | ||
/* | /* 右移 */ | ||
. | .hovers-forward:hover, | ||
.hovers-forward.active { | |||
transform: translateX(8px); | |||
} | } | ||
/* | /* 左移 */ | ||
. | .hovers-backward:hover, | ||
.hovers-backward.active { | |||
transform: translateX(-8px); | |||
} | } | ||
/* | /* 自由移动 */ | ||
. | .hovers-top, | ||
.hovers-left, | |||
.hovers-bottom, | |||
.hovers-right { | |||
transition: all 0.5s; | |||
} | } | ||
.hovers-top:hover, | |||
. | .hovers-top.active { | ||
transform: translateY(-0.0625em); | |||
} | } | ||
.hovers-left:hover, | |||
. | .hovers-left.active { | ||
transform: translateX(-0.0625em); | |||
} | } | ||
.hovers-bottom:hover, | |||
. | .hovers-bottom.active { | ||
transform: translateY(0.0625em); | |||
} | } | ||
.hovers-right:hover, | |||
.hovers-right.active { | |||
transform: translateX(0.0625em); | |||
} | } | ||
. | /* 滤镜 */ | ||
.hovers-blur, | |||
.hovers-blur-reverse, | |||
.hovers-brightness, | |||
.hovers-brightness-reverse, | |||
.hovers-contrast, | |||
.hovers-contrast-reverse, | |||
.hovers-grayscale, | |||
.hovers-grayscale-reverse, | |||
.hovers-invert, | |||
.hovers-invert-reverse, | |||
.hovers-saturate, | |||
.hovers-saturate-reverse, | |||
.hovers-sepia, | |||
.hovers-sepia-reverse, | |||
.hovers-hue-rotate, | |||
.hovers-hue-rotate-reverse { | |||
transition-duration: 0.75s; | |||
} | } | ||
.hovers-blur:hover, | |||
. | .hovers-blur.active, | ||
.hovers-brightness:hover, | |||
.hovers-brightness.active, | |||
.hovers-contrast:hover, | |||
.hovers-contrast.active, | |||
.hovers-grayscale:hover, | |||
.hovers-grayscale.active, | |||
.hovers-invert:hover, | |||
.hovers-invert.active, | |||
.hovers-saturate:hover, | |||
.hovers-saturate.active, | |||
.hovers-sepia:hover, | |||
.hovers-sepia.active, | |||
.hovers-hue-rotate:hover, | |||
.hovers-hue-rotate.active { | |||
filter: initial; | |||
} | } | ||
. | .hovers-blur { | ||
filter: blur(5px); | |||
} | } | ||
.hovers-blur-reverse:hover, | |||
. | .hovers-blur-reverse.active { | ||
filter: blur(5px); | |||
} | } | ||
. | .hovers-brightness { | ||
filter: brightness(50%); | |||
} | } | ||
.hovers-brightness-reverse:hover, | |||
. | .hovers-brightness-reverse.active { | ||
filter: brightness(50%); | |||
} | } | ||
. | .hovers-contrast { | ||
filter: contrast(50%); | |||
} | } | ||
.hovers-contrast-reverse:hover, | |||
. | .hovers-contrast-reverse.active { | ||
filter: contrast(50%); | |||
} | } | ||
. | .hovers-grayscale { | ||
filter: grayscale(100%); | |||
} | } | ||
.hovers-grayscale-reverse:hover, | |||
.hovers-grayscale-reverse.active { | |||
filter: grayscale(100%); | |||
} | } | ||
.hovers-invert { | |||
filter: invert(100%); | |||
} | } | ||
.hovers-invert-reverse:hover, | |||
.hovers-invert-reverse.active { | |||
filter: invert(100%); | |||
} | } | ||
.hovers-saturate { | |||
filter: saturate(200%); | |||
} | } | ||
.hovers-saturate-reverse:hover, | |||
.hovers-saturate-reverse.active { | |||
filter: saturate(200%); | |||
} | } | ||
.hovers-sepia { | |||
filter: sepia(100%); | |||
} | } | ||
.hovers-sepia-reverse:hover, | |||
.hovers-sepia-reverse.acitve { | |||
filter: sepia(100%); | |||
} | } | ||
.hovers-hue-rotate { | |||
filter: hue-rotate(180deg); | |||
} | } | ||
.hovers-hue-rotate-reverse:hover, | |||
.hovers-hue-rotate-reverse.active { | |||
filter: hue-rotate(180deg); | |||
} | } | ||
/* | /* 背景滑动 */ | ||
.hovers-sweep-to-right, | |||
.hovers-sweep-to-left, | |||
.hovers-sweep-to-bottom, | |||
.hovers-sweep-to-top, | |||
.hovers-radial-out, | |||
.hovers-radial-in { | |||
position: relative; | |||
transition-duration: 0.3s; | |||
transition-timing-function: ease-out; | |||
overflow: hidden; | |||
} | } | ||
.hovers-sweep-to-right:before, | |||
.hovers-sweep-to-left:before, | |||
content: | .hovers-sweep-to-bottom:before, | ||
.hovers-sweep-to-top:before, | |||
.hovers-radial-out:before, | |||
.hovers-radial-in:before { | |||
content: ''; | |||
position: absolute; | position: absolute; | ||
left: | z-index: 10; | ||
top: 0; | |||
left: 0; | |||
right: 0; | |||
bottom: 0; | |||
background: inherit; | |||
transform: scaleX(0); | |||
transition: inherit; | |||
} | |||
.hovers-sweep-to-bottom:before, | |||
.hovers-sweep-to-top:before { | |||
transform: scaleY(0); | |||
} | |||
.hovers-radial-out:before, | |||
.hovers-radial-in:before { | |||
border-radius: 50%; | border-radius: 50%; | ||
transform: scale(0); | |||
} | |||
.hovers-radial-in:before { | |||
transform: scale(2); | |||
} | } | ||
.hovers-sweep-to-right:before { | |||
transform-origin: 0 50%; | |||
} | |||
.hovers-sweep-to-left:before { | |||
transform-origin: 100% 50%; | |||
} | |||
.hovers-sweep-to-bottom:before { | |||
transform-origin: 50% 0; | |||
} | |||
.hovers-sweep-to-top:before { | |||
transform-origin: 50% 100%; | |||
} | |||
.hovers-radial-out:hover:before, | |||
.hovers-radial-out.active:before { | |||
transform: scale(2); | |||
} | |||
.hovers-radial-in:hover:before, | |||
.hovers-radial-in.active:before { | |||
transform: scale(0); | |||
} | } | ||
.hovers-sweep-to-right .hovers-content.center, | |||
. | .hovers-sweep-to-left .hovers-content.center, | ||
.hovers-sweep-to-bottom .hovers-content.center, | |||
.hovers-sweep-to-top .hovers-content.center, | |||
.hovers-radial-out .hovers-content.center, | |||
.hovers-radial-in .hovers-content.center { | |||
display: flex; | display: flex; | ||
align-items: center; | |||
justify-content: center; | justify-content: center; | ||
word-break: break-all; | |||
} | |||
.hovers-sweep-to-right:hover:before, | |||
.hovers-sweep-to-left:hover:before, | |||
.hovers-sweep-to-bottom:hover:before, | |||
.hovers-sweep-to-top:hover:before, | |||
.hovers-sweep-to-right.active:before, | |||
.hovers-sweep-to-left:hover:before, | |||
.hovers-sweep-to-bottom:hover:before, | |||
.hovers-sweep-to-top:hover:before { | |||
transform: scaleX(1); | |||
} | |||
.hovers-sweep-to-right .hovers-content, | |||
.hovers-sweep-to-left .hovers-content, | |||
.hovers-sweep-to-bottom .hovers-content, | |||
.hovers-sweep-to-top .hovers-content, | |||
.hovers-radial-out .hovers-content, | |||
.hovers-radial-in .hovers-content { | |||
width: 100%; | |||
height: 100%; | |||
position: absolute; | |||
transition-property: all; | |||
transition-duration: inherit; | |||
top: 0; | |||
left: 0; | |||
z-index: 11; | |||
} | |||
.hovers-sweep-to-right .hovers-content { | |||
left: initial; | |||
right: 100%; | |||
} | |||
.hovers-sweep-to-right:hover .hovers-content, | |||
.hovers-sweep-to-right.active .hovers-content { | |||
right: 0; | |||
} | |||
.hovers-sweep-to-left .hovers-content { | |||
left: 100%; | |||
} | |||
.hovers-sweep-to-left:hover .hovers-content, | |||
.hovers-sweep-to-left.active .hovers-content { | |||
left: 0; | |||
} | |||
.hovers-sweep-to-bottom .hovers-content { | |||
top: initial; | |||
bottom: 100%; | |||
} | |||
.hovers-sweep-to-bottom:hover .hovers-content, | |||
.hovers-sweep-to-bottom.active .hovers-content { | |||
bottom: 0; | |||
} | |||
.hovers-sweep-to-top .hovers-content { | |||
top: 100%; | |||
} | |||
.hovers-sweep-to-top:hover .hovers-content, | |||
.hovers-sweep-to-top.active .hovers-content { | |||
top: 0; | |||
} | } | ||
. | .hovers-radial-out .hovers-content, | ||
. | .hovers-radial-in:hover .hovers-content, | ||
.hovers-radial-in.active .hovers-content { | |||
opacity: 0; | |||
} | } | ||
.hovers-radial-in .hovers-content, | |||
. | .hovers-radial-out:hover .hovers-content, | ||
.hovers-radial-out.active .hovers-content { | |||
opacity: 1; | |||
} | } | ||
/* | /* 默认em */ | ||
. | .hovers-border, | ||
.hovers-trim, | |||
.hovers-ripple-out, | |||
.hovers-ripple-in, | |||
font- | .hovers-outline-out, | ||
.hovers-outline-in, | |||
.hovers-reveal { | |||
font-size: 160px; | |||
line-height: 16px; | |||
} | } | ||
/* | /* 内边框滑出 */ | ||
. | .hovers-border, | ||
.hovers-trim { | |||
position: relative; | position: relative; | ||
top: 0; | |||
left: 0; | |||
transition: all 0.3s; | |||
} | } | ||
. | .hovers-border:before { | ||
content: ''; | |||
width: 100%; | |||
height: 100%; | |||
position: absolute; | |||
border: | top: 0; | ||
border- | left: 0; | ||
box-sizing: border-box; | |||
transition: inherit; | |||
border-width: calc(0.0625em * 0.6); | |||
border-color: inherit; | |||
border-style: solid; | |||
border-radius: inherit; | |||
opacity: 0; | |||
} | } | ||
. | .hovers-border:hover:before, | ||
.hovers-border.active:before { | |||
opacity: 1; | |||
} | } | ||
. | /* 带边距内边框 */ | ||
.hovers-trim:before { | |||
border-color: | content: ''; | ||
position: absolute; | |||
top: calc(0.0625em * 0.4); | |||
left: calc(0.0625em * 0.4); | |||
bottom: calc(0.0625em * 0.4); | |||
right: calc(0.0625em * 0.4); | |||
transition: inherit; | |||
border-width: calc(0.0625em * 0.6); | |||
border-color: inherit; | |||
border-style: solid; | |||
opacity: 0; | |||
border-radius: inherit; | |||
} | } | ||
. | .hovers-trim:hover:before, | ||
.hovers-trim.active:before { | |||
opacity: 1; | |||
} | } | ||
. | /* 边框飞出与飞入 */ | ||
.hovers-ripple-out, | |||
.hovers-ripple-in, | |||
.hovers-outline-out, | |||
.hovers-outline-in, | |||
.hovers-reveal { | |||
animation-duration: 0.7s; | |||
animation-timing-function: ease-out; | |||
transition: all 0.3s; | |||
} | |||
.hovers-ripple-out:before, | |||
.hovers-ripple-in:before, | |||
.hovers-outline-out:before, | |||
.hovers-outline-in:before, | |||
.hovers-reveal:before { | |||
content: ''; | |||
position: absolute; | position: absolute; | ||
top: | top: 0; | ||
right: 0; | |||
bottom: 0; | |||
left: 0; | left: 0; | ||
animation: inherit; | |||
transition: inherit; | |||
border-width: calc(0.0625em * 0.6); | |||
border-color: inherit; | |||
border-style: solid; | |||
border-radius: inherit; | |||
} | |||
.hovers-ripple-out:before { | |||
opacity: 0; | |||
} | |||
.hovers-ripple-in:before { | |||
top: calc(-0.0625em * 1.2); | |||
right: calc(-0.0625em * 1.2); | |||
bottom: calc(-0.0625em * 1.2); | |||
left: calc(-0.0625em * 1.2); | |||
opacity: 0; | |||
} | |||
.hovers-outline-out:before { | |||
opacity: 0; | |||
} | |||
.hovers-outline-out:before { | |||
top: calc(-0.0625em * 1.6); | |||
right: calc(-0.0625em * 1.6); | |||
bottom: calc(-0.0625em * 1.6); | |||
left: calc(-0.0625em * 1.6); | |||
opacity: 0; | |||
} | |||
.hovers-reveal:before { | |||
border-width: 0; | |||
opacity: 0; | |||
} | } | ||
@keyframes ripple-out { | |||
50% { | |||
opacity: 1; | |||
} | } | ||
100% { | |||
top: calc(-0.0625em * 1.2); | |||
right: calc(-0.0625em * 1.2); | |||
bottom: calc(-0.0625em * 1.2); | |||
left: calc(-0.0625em * 1.2); | |||
opacity: 0; | opacity: 0; | ||
} | } | ||
} | |||
.hovers-ripple-out:hover:before, | |||
.hovers-ripple-out.active:before { | |||
animation-name: ripple-out; | |||
} | |||
@keyframes ripple-in { | |||
50% { | |||
opacity: 1; | opacity: 1; | ||
} | |||
100% { | |||
top: 0; | |||
right: 0; | |||
bottom: 0; | |||
left: 0; | |||
opacity: 0; | |||
} | } | ||
} | |||
.hovers-ripple-in:hover:before, | |||
.hovers-ripple-in.active:before { | |||
animation-name: ripple-in; | |||
} | } | ||
. | .hovers-outline-out:hover:before, | ||
.hovers-outline-in:hover:before, | |||
.hovers-outline-out.active:before, | |||
.hovers-outline-in:hover:before { | |||
top: calc(-0.0625em * 0.8); | |||
right: calc(-0.0625em * 0.8); | |||
bottom: calc(-0.0625em * 0.8); | |||
left: calc(-0.0625em * 0.8); | |||
opacity: 1; | |||
} | } | ||
. | .hovers-reveal:hover:before, | ||
.hovers-reveal.active:before { | |||
transform: translateY(0); | |||
border-width: calc(0.0625em * 0.4); | |||
opacity: 1; | |||
} | } | ||
. | /* 圆角化 */ | ||
.hovers-round-corners { | |||
overflow: hidden; | |||
} | |||
.hovers-round-corners:hover, | |||
.hovers-round-corners.active { | |||
border-radius: 0.0625em; | |||
} | } | ||
/* | /* 重叠：翻转切换 */ | ||
.hover-turn { | |||
position: relative; | position: relative; | ||
transform: translateZ(1px); | |||
} | } | ||
.hover-turn-before, | |||
. | .hover-turn-after { | ||
position: absolute; | position: absolute; | ||
top: 0; | top: 0; | ||
left: 0; | left: 0; | ||
} | } | ||
/* | @keyframes hover-turn { | ||
. | from { | ||
transform: rotateY(-90deg); | |||
} | |||
50% { | |||
transform: scale(1.2); | |||
} | |||
to { | |||
transform: rotateY(0); | |||
} | |||
} | |||
.hover-turn:not(:hover) .hover-turn-before, | |||
.hover-turn:hover .hover-turn-after { | |||
animation: hover-turn 0.5s; | |||
} | |||
.hover-turn:hover .hover-turn-before, | |||
.hover-turn:not(:hover) .hover-turn-after { | |||
opacity: 0; | |||
} | |||
/* [[Category:在模板名字空间下的CSS页面]] */ | |||
/* 信息框样式 - Windows XP风格 */ | |||
.infobox, | |||
.notaninfobox { | |||
position: relative; | |||
clear: right; | |||
float: right; | |||
margin: 0 0 1em 1em; | |||
width: 350px; | |||
font-size: 90%; | |||
background-color: rgb(var(--xp-window-bg)); | |||
border: 2px solid rgb(var(--xp-window-border)); | |||
padding: 0; | |||
overflow: auto; | |||
z-index: 1; | |||
box-shadow: var(--window-shadow); | |||
border-radius: 0; | |||
} | |||
@media all and (max-width: 511px) { | |||
.notaninfobox { | |||
float: none; | |||
margin-left: 0; | |||
width: auto; | |||
} | |||
} | |||
.infobox tr:not(:first-child) td { | |||
border-bottom: 1px solid #ababab; | |||
} | |||
@media all and (max-width: 337px) { | |||
.notaninfobox { | |||
margin-left: -16px; | |||
margin-right: -16px; | |||
border-left: none; | |||
border-right: none; | |||
} | |||
} | |||
.notaninfobox > .infobox-title, | |||
.infobox th { | |||
position: relative; | |||
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light))); | |||
color: white; | |||
font-weight: bold; | |||
text-align: center; | |||
font-size: 120%; | |||
padding: 5px; | |||
text-shadow: var(--text-shadow); | |||
border-bottom: 1px solid rgb(var(--xp-window-border)); | |||
} | |||
.notaninfobox > .infobox-title::after, | |||
.infobox th::after { | |||
content: "×"; | |||
position: absolute; | |||
top: 2px; | |||
right: 5px; | |||
width: 16px; | |||
height: 16px; | |||
background-color: #ff6347; | |||
border: 1px solid rgb(var(--xp-window-border)); | |||
text-align: center; | |||
line-height: 16px; | |||
font-size: 12px; | |||
color: white; | |||
cursor: pointer; | |||
z-index: 1; | |||
} | |||
.infobox-imagearea { | |||
text-align: center; | |||
padding: 8px; | |||
background-color: white; | |||
} | |||
.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; | |||
background-color: white; | |||
} | |||
.infobox .plainlinks a { | |||
color: rgb(var(--link-color)) !important; | |||
text-decoration: underline; | |||
} | |||
.infobox .plainlinks a:visited { | |||
color: rgb(var(--visited-link-color)) !important; | |||
} | |||
.notaninfobox .infobox-rows .infobox-row { | |||
display: contents; | |||
} | |||
.notaninfobox .infobox-row .infobox-row-label, | |||
.notaninfobox .infobox-row .infobox-row-field { | |||
padding: 4px 8px; | |||
border: 1px solid #ababab; | |||
} | |||
.notaninfobox .infobox-row .infobox-row-label { | |||
font-weight: bold; | |||
display: flex; | |||
align-items: center; | |||
background-color: #f0f0f0; | |||
} | |||
.notaninfobox .infobox-rows .infobox-row:nth-child(2n) .infobox-row-label, | |||
.notaninfobox .infobox-rows .infobox-row:nth-child(2n) .infobox-row-field { | |||
background-color: #f9f9f9; | |||
} | |||
/* Community Updates - Windows XP风格 */ | |||
.community-updates { | |||
background: rgb(var(--xp-window-bg)); | |||
padding: 15px; | |||
border: 2px solid rgb(var(--xp-window-border)); | |||
margin-top: 20px; | |||
box-shadow: var(--window-shadow); | |||
position: relative; | |||
border-radius: 0; | |||
} | |||
.community-updates::before { | |||
content: "Community Updates"; | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
right: 0; | |||
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light))); | |||
color: white; | |||
padding: 5px 10px; | |||
font-weight: bold; | |||
text-shadow: var(--text-shadow); | |||
border-bottom: 1px solid rgb(var(--xp-window-border)); | |||
} | |||
.community-updates ul { | |||
margin-top: 30px; | |||
} | |||
.community-updates ul li { | |||
list-style: none; | |||
padding: 10px; | |||
background: white; | |||
margin: 5px 0; | |||
border: 1px solid #ababab; | |||
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); | |||
} | |||
.community-updates ul li a { | |||
color: rgb(var(--link-color)); | |||
text-decoration: none; | |||
font-weight: bold; | |||
} | |||
/* 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%; | |||
border-bottom: 1px solid #ababab; | |||
} | |||
.tabber-container-infobox ul.tabbernav li a:hover { | |||
color: rgb(var(--hover-link-color)); | |||
} | |||
.tabber-container-infobox ul.tabbernav > li { | |||
margin-bottom: 5px; | |||
padding: 0; | |||
} | |||
.announcement-content span { | |||
display: inline-block; | |||
white-space: nowrap; | |||
animation: marquee 15s linear infinite; | |||
} | |||
@keyframes marquee { | |||
0% { transform: translate(100%, 0); } | |||
100% { transform: translate(-100%, 0); } | |||
} | |||
/* 主页头部样式 - Windows XP风格 */ | |||
.mw-mainpage-header { | |||
background-color: rgb(var(--xp-window-bg)); | |||
border: 2px solid rgb(var(--xp-window-border)); | |||
box-shadow: var(--window-shadow); | |||
color: rgb(var(--xp-text)); | |||
font-size: 1.5em; | |||
padding: 30px 20px 20px; | |||
text-align: center; | |||
position: relative; | |||
border-radius: 0; | |||
} | |||
.mw-mainpage-header::before { | |||
content: "Welcome"; | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
right: 0; | |||
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light))); | |||
color: white; | |||
padding: 5px 10px; | |||
font-weight: bold; | |||
text-shadow: var(--text-shadow); | |||
border-bottom: 1px solid rgb(var(--xp-window-border)); | |||
text-align: left; | |||
} | |||
.mw-mainpage-header h1 { | |||
font-size: 2.5em; | |||
margin-bottom: 10px; | |||
background: none; | |||
color: rgb(var(--xp-text)); | |||
text-shadow: none; | |||
} | |||
.mw-mainpage-header p { | |||
font-size: 1.2em; | |||
margin: 5px 0; | |||
} | |||
.tabber-container-infobox ul.tabbernav > li > a { | |||
color: rgb(var(--link-color)); | |||
padding: 5px 10px; | |||
display: block; | |||
background: linear-gradient(to bottom, #f6f6f6, #e0e0e0); | |||
border: 1px solid #ababab; | |||
border-bottom: none; | |||
border-radius: 3px 3px 0 0; | |||
} | |||
/* To prevent the tabs from jumping around when they become active or inactive */ | |||
.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 - Windows XP风格 */ | |||
.modulebox { | |||
border: 2px solid rgb(var(--xp-window-border)); | |||
padding: 30px 10px 10px; | |||
margin: 10px 0; | |||
background-color: rgb(var(--xp-window-bg)); | |||
position: relative; | |||
box-shadow: var(--window-shadow); | |||
border-radius: 0; | |||
} | |||
.modulebox::before { | |||
content: "Module"; | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
right: 0; | |||
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light))); | |||
color: white; | |||
padding: 5px 10px; | |||
font-weight: bold; | |||
text-shadow: var(--text-shadow); | |||
border-bottom: 1px solid rgb(var(--xp-window-border)); | |||
text-align: left; | |||
} | |||
.tabber-container-infobox ul.tabbernav > li.tabberactive > a { | |||
font-weight: bold; | |||
color: rgb(var(--hover-link-color)); | |||
background: linear-gradient(to bottom, #ffffff, #f6f6f6); | |||
border-bottom: 1px solid #ffffff; | |||
position: relative; | |||
z-index: 1; | |||
} | |||
.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; | |||
padding: 5px; | |||
background-color: #f0f0f0; | |||
border-top: 1px solid #ababab; | |||
} | |||
/* 导航框（查论编）- Windows XP风格 */ | |||
table.navbox { | |||
border: 2px solid rgb(var(--xp-window-border)); | |||
clear: both; | |||
margin: 1em auto; | |||
padding: 0; | |||
text-align: center; | |||
width: 100%; | |||
background-color: rgb(var(--xp-window-bg)); | |||
box-shadow: var(--window-shadow); | |||
border-collapse: separate; | |||
border-spacing: 0; | |||
border-radius: 0; | |||
} | |||
table.navbox + table.navbox { | |||
margin-top: 5px; | |||
} | |||
.navbox-title, | |||
.navbox-abovebelow, | |||
table.navbox th { | |||
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light))); | |||
color: white; | |||
padding: 5px 10px; | |||
text-align: center; | |||
font-weight: bold; | |||
text-shadow: var(--text-shadow); | |||
border-bottom: 1px solid rgb(var(--xp-window-border)); | |||
position: relative; | |||
} | |||
.navbox-title::after, | |||
table.navbox th::after { | |||
content: "×"; | |||
position: absolute; | |||
top: 2px; | |||
right: 5px; | |||
width: 16px; | |||
height: 16px; | |||
background-color: #ff6347; | |||
border: 1px solid rgb(var(--xp-window-border)); | |||
text-align: center; | |||
line-height: 16px; | |||
font-size: 12px; | |||
color: white; | |||
cursor: pointer; | |||
z-index: 1; | |||
} | |||
.navbox-group { | |||
background-color: #f0f0f0; | |||
border: 1px solid #ababab; | |||
color: black; | |||
font-weight: bold; | |||
padding: 5px; | |||
text-align: right; | |||
white-space: nowrap; | |||
} | |||
.navbox-list { | |||
background-color: white; | |||
border: 1px solid #ababab; | |||
padding: 5px; | |||
text-align: left; | |||
} | |||
.navbox, | |||
.navbox-subgroup { | |||
background-color: rgb(var(--xp-window-bg)); | |||
} | |||
.navbox-subgroup .navbox-title { | |||
background-color: #c0d8f0; | |||
color: black; | |||
text-shadow: none; | |||
} | |||
.navbox-subgroup .navbox-group, | |||
.navbox-subgroup .navbox-abovebelow { | |||
background-color: #e6f0f9; | |||
} | |||
.navbox-even { | |||
background-color: #f9f9f9; | |||
} | |||
.navbox-odd { | |||
background-color: white; | |||
} | |||
.collapseButton { | |||
float: right; | |||
font-weight: 400; | |||
text-align: right; | |||
width: auto; | |||
} | |||
.navbox .collapseButton { | |||
width: 6em; | |||
} | |||
.navbar { | |||
position: relative; | |||
min-height: 23px !important; | |||
margin-bottom: 0px !important; | |||
border: 1px solid transparent; | |||
} | |||
.navbox-title .Wikiplus-Edit-EveryWhereBtn { | |||
display: none; | |||
} | |||
@media only screen and (max-width:759px) { | |||
.infotable { | |||
width: 90%; | |||
float: none; | |||
margin: 0 auto; | |||
} | |||
.navbox-title>div { | |||
display: none; | |||
} | |||
.navbox-group, | |||
.navbox-group >div { | |||
padding-left: 0 !important; | |||
padding-right: 0 !important; | |||
text-align: center; | |||
} | |||
} | |||
/* 主页Windows XP风格布局 */ | |||
.main-page-banner { | |||
position: relative; | |||
display: grid; | |||
grid-template-areas: | |||
"welcome welcome welcome" | |||
"discord faq join"; | |||
grid-template-columns: 1fr 1fr 1fr; | |||
grid-column-gap: 3%; | |||
margin-bottom: 2rem; | |||
width: 100%; | |||
box-sizing: border-box; | |||
border: 2px solid rgb(var(--xp-window-border)); | |||
box-shadow: var(--window-shadow); | |||
background-color: rgb(var(--xp-window-bg)); | |||
z-index: 1; | |||
border-radius: 0; | |||
} | |||
/* 欢迎文本区域 - Windows XP样式 */ | |||
.main-page-banner .welcome-text { | |||
grid-area: welcome; | |||
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light))); | |||
color: white; | |||
padding: 30px 20px 20px; | |||
margin: 0; | |||
width: 100%; | |||
position: relative; | |||
overflow: hidden; | |||
border-bottom: 1px solid rgb(var(--xp-window-border)); | |||
border-radius: 0; | |||
z-index: 2; | |||
text-shadow: var(--text-shadow); | |||
} | |||
/* 添加标题栏 */ | |||
.main-page-banner .welcome-text::before { | |||
content: "Welcome"; | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
right: 0; | |||
height: 25px; | |||
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light))); | |||
color: white; | |||
padding: 5px 10px; | |||
font-weight: bold; | |||
font-size: 14px; | |||
text-shadow: var(--text-shadow); | |||
text-align: left; | |||
line-height: 25px; | |||
border-bottom: 1px solid rgba(0, 0, 0, 0.2); | |||
z-index: 3; | |||
} | |||
/* 添加XP窗口控制按钮 */ | |||
.main-page-banner .welcome-text::after { | |||
content: "×"; | |||
position: absolute; | |||
top: 7px; | |||
right: 5px; | |||
width: 16px; | |||
height: 16px; | |||
background-color: #ff6347; | |||
border: 1px solid rgb(var(--xp-window-border)); | |||
text-align: center; | |||
line-height: 16px; | |||
font-size: 12px; | |||
color: white; | |||
cursor: pointer; | |||
z-index: 4; | |||
} | |||
/* 添加最小化、最大化按钮 */ | |||
.main-page-banner .welcome-text .min-button, | |||
.main-page-banner .welcome-text .max-button { | |||
position: absolute; | |||
top: 7px; | |||
width: 16px; | |||
height: 16px; | |||
border: 1px solid rgb(var(--xp-window-border)); | |||
text-align: center; | |||
line-height: 16px; | |||
font-size: 12px; | |||
color: black; | |||
background-color: rgb(var(--light-gray-monochrome)); | |||
cursor: pointer; | |||
z-index: 4; | |||
} | |||
.main-page-banner .welcome-text .min-button { | |||
right: 45px; | |||
content: "_"; | |||
line-height: 13px; | |||
} | |||
.main-page-banner .welcome-text .max-button { | |||
right: 25px; | |||
content: "□"; | |||
} | |||
.main-page-banner .welcome-text p { | |||
position: relative; | |||
z-index: 2; | |||
margin: 0; | |||
font-size: 1.1em; | |||
} | |||
/* 导航按钮 - Windows XP风格 */ | |||
.main-page-banner .navigation-links { | |||
display: grid; | |||
grid-template-columns: 1fr 1fr 1fr; | |||
grid-column-gap: 3%; | |||
grid-area: discord / discord / join / join; | |||
width: 100%; | |||
padding: 10px; | |||
background-color: rgb(var(--xp-window-bg)); | |||
} | |||
.main-page-banner .nav-button { | |||
background: linear-gradient(to bottom, #f6f6f6, #e0e0e0); | |||
border: 1px solid #ababab; | |||
border-radius: 3px; | |||
margin: 0 0 10px 0; | |||
transition: all 0.3s ease; | |||
height: min-content; | |||
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); | |||
position: relative; | |||
overflow: hidden; | |||
} | |||
.main-page-banner .nav-button:hover { | |||
background: linear-gradient(to bottom, #f9f9f9, #e9e9e9); | |||
transform: translateY(-3px); | |||
box-shadow: 2px 3px 4px rgba(0, 0, 0, 0.3); | |||
} | |||
.main-page-banner .nav-button:active { | |||
background: linear-gradient(to bottom, #e0e0e0, #f0f0f0); | |||
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2); | |||
transform: translateY(0); | |||
} | |||
.main-page-banner .nav-button a { | |||
display: block; | |||
padding: 8px 0; | |||
width: 100%; | |||
text-align: center; | |||
color: black; | |||
font-size: 1.1rem; | |||
font-weight: bold; | |||
text-decoration: none !important; | |||
position: relative; | |||
z-index: 1; | |||
} | |||
/* 响应式布局 */ | |||
@media (max-width: 767px) { | |||
.main-page-banner { | |||
grid-template-areas: | |||
"welcome" | |||
"navigation"; | |||
grid-template-columns: 1fr; | |||
} | |||
.main-page-banner .welcome-text { | |||
width: 100%; | |||
margin-bottom: 0; | |||
box-sizing: border-box; | |||
} | |||
.main-page-banner .navigation-links { | |||
grid-area: navigation; | |||
display: flex; | |||
flex-wrap: wrap; | |||
width: 100%; | |||
} | |||
.main-page-banner .nav-button { | |||
flex: 1; | |||
min-width: 30%; | |||
margin: 0 5px 10px; | |||
} | |||
} | |||
/* 公告容器 - Windows XP风格 */ | |||
.announcement-container { | |||
background-color: rgb(var(--xp-window-bg)); | |||
border: 2px solid rgb(var(--xp-window-border)); | |||
box-shadow: var(--window-shadow); | |||
margin-bottom: 2rem; | |||
display: flex; | |||
flex-wrap: wrap; | |||
align-content: space-between; | |||
position: relative; | |||
border-radius: 0; | |||
} | |||
.announcement-container .section-title { | |||
width: 100%; | |||
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light))); | |||
color: white; | |||
padding: 5px 10px; | |||
font-family: var(--title-font); | |||
font-size: 1.3rem; | |||
text-align: left; | |||
border-left: none; | |||
border-bottom: 1px solid rgb(var(--xp-window-border)); | |||
text-shadow: var(--text-shadow); | |||
position: relative; | |||
} | |||
.announcement-container .section-title::after { | |||
content: "×"; | |||
position: absolute; | |||
top: 7px; | |||
right: 5px; | |||
width: 16px; | |||
height: 16px; | |||
background-color: #ff6347; | |||
border: 1px solid rgb(var(--xp-window-border)); | |||
text-align: center; | |||
line-height: 16px; | |||
font-size: 12px; | |||
color: white; | |||
cursor: pointer; | |||
z-index: 1; | |||
} | |||
.announcement-container .announcement-content { | |||
background-color: white; | |||
color: black; | |||
padding: 10px; | |||
width: 100%; | |||
} | |||
.announcement-container .more-content { | |||
width: 100%; | |||
border-top: 1px solid #ababab; | |||
padding: 5px; | |||
background-color: #f0f0f0; | |||
text-align: right; | |||
} | |||
/* 最近页面容器 - Windows XP风格 */ | |||
.recent-pages-container { | |||
display: flex; | |||
flex-wrap: wrap; | |||
justify-content: space-between; | |||
width: 100%; | |||
margin-bottom: 1rem; | |||
} | |||
.recent-pages-container .page-section { | |||
flex-basis: 48%; | |||
background-color: rgb(var(--xp-window-bg)); | |||
border: 2px solid rgb(var(--xp-window-border)); | |||
box-shadow: var(--window-shadow); | |||
margin-bottom: 1rem; | |||
display: grid; | |||
grid-template-areas: "title" "page" "more"; | |||
grid-template-rows: auto 1fr auto; | |||
position: relative; | |||
border-radius: 0; | |||
} | |||
.recent-pages-container .section-title { | |||
grid-area: title; | |||
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light))); | |||
color: white; | |||
padding: 5px 30px 5px 10px; | |||
font-weight: bold; | |||
text-shadow: var(--text-shadow); | |||
border-bottom: 1px solid rgb(var(--xp-window-border)); | |||
position: relative; | |||
text-align: left; | |||
height: 25px; | |||
line-height: 25px; | |||
border-left: none; | |||
} | |||
.recent-pages-container .section-title::after { | |||
content: "×"; | |||
position: absolute; | |||
top: 5px; | |||
right: 5px; | |||
width: 16px; | |||
height: 16px; | |||
background-color: #ff6347; | |||
border: 1px solid rgb(var(--xp-window-border)); | |||
text-align: center; | |||
line-height: 16px; | |||
font-size: 12px; | |||
color: white; | |||
cursor: pointer; | |||
z-index: 1; | |||
} | |||
.recent-pages-container .page-list { | |||
grid-area: page; | |||
background-color: white; | |||
padding: 10px; | |||
max-height: 200px; | |||
overflow-y: auto; | |||
border-bottom: 1px solid #ababab; | |||
} | |||
.recent-pages-container .page-list a { | |||
display: block; | |||
padding: 3px 0; | |||
border-bottom: 1px solid #e0e0e0; | |||
color: rgb(var(--link-color)); | |||
white-space: nowrap; | |||
overflow: hidden; | |||
text-overflow: ellipsis; | |||
} | |||
.recent-pages-container .page-list a:last-child { | |||
border-bottom: none; | |||
} | |||
.recent-pages-container .see-more { | |||
grid-area: more; | |||
background-color: #f0f0f0; | |||
padding: 5px 10px; | |||
text-align: right; | |||
} | } | ||
.recent-pages-container .see-more a { | |||
. | color: rgb(var(--link-color)); | ||
} | } | ||
/* | /* 特色内容容器 - Windows XP风格 */ | ||
. | .featured-content-container .feature-content .featured-description { | ||
font-style: italic; | |||
color: #444; | |||
} | } | ||
.featured-content-container .see-more { | |||
. | grid-area: more; | ||
background-color: #f0f0f0; | |||
padding: 5px 10px; | |||
text-align: right; | |||
} | } | ||
.featured-content-container .see-more a { | |||
. | color: rgb(var(--link-color)); | ||
} | } | ||
. | /* 工具和资源容器 - Windows XP风格 */ | ||
.tools-and-resources { | |||
margin-bottom: 2rem; | |||
} | } | ||
. | .tools-container { | ||
display: grid; | |||
grid-template-columns: 1fr 1fr; | |||
grid-gap: 1rem; | |||
} | } | ||
. | .tools-container .tool-item { | ||
background-color: rgb(var(--xp-window-bg)); | |||
border: 2px solid rgb(var(--xp-window-border)); | |||
box-shadow: var(--window-shadow); | |||
padding: 30px 10px 10px; | |||
display: grid; | |||
grid-template-areas: | |||
"icon content" | |||
"title content"; | |||
grid-template-columns: max-content 1fr; | |||
grid-template-rows: auto auto; | |||
grid-gap: 0.5rem 1rem; | |||
position: relative; | |||
border-radius: 0; | |||
} | } | ||
. | .tools-container .tool-item::before { | ||
content: "Tool"; | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
right: 0; | |||
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light))); | |||
color: white; | |||
padding: 5px 10px; | |||
font-weight: bold; | |||
text-shadow: var(--text-shadow); | |||
border-bottom: 1px solid rgb(var(--xp-window-border)); | |||
text-align: left; | |||
height: 15px; | |||
line-height: 15px; | |||
font-size: 12px; | |||
} | } | ||
.tools-container .tool-item::after { | |||
content: "×"; | |||
position: absolute; | |||
top: 2px; | |||
right: 5px; | |||
width: 16px; | |||
height: 16px; | |||
background-color: | background-color: #ff6347; | ||
border: 1px solid rgb(var(--xp-window-border)); | |||
text-align: center; | |||
line-height: 16px; | |||
font-size: 12px; | |||
color: white; | |||
cursor: pointer; | |||
z-index: 1; | |||
} | } | ||
.tools-container .tool-item .tool-icon { | |||
. | grid-area: icon; | ||
justify-self: center; | |||
align-self: center; | |||
background-color: white; | |||
border: 1px solid #ababab; | |||
padding: 5px; | |||
} | } | ||
. | .tools-container .tool-item .tool-title { | ||
grid-area: title; | |||
text-align: center; | |||
} | } | ||
.tools-container .tool-item .tool-title a { | |||
. | color: rgb(var(--link-color)); | ||
font-weight: bold; | |||
} | } | ||
.tools-container .tool-item .tool-description { | |||
. | grid-area: content; | ||
background-color: white; | |||
border: 1px solid #ababab; | |||
padding: 8px; | |||
} | } | ||
/* | /* 新闻容器 - Windows XP风格 */ | ||
. | .news-container { | ||
background-color: rgb(var(--xp-window-bg)); | |||
border: 2px solid rgb(var(--xp-window-border)); | |||
box-shadow: var(--window-shadow); | |||
margin-bottom: 2rem; | |||
position: relative; | |||
border-radius: 0; | |||
} | } | ||
. | .news-container .section-title { | ||
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light))); | |||
color: white; | |||
padding: 5px 30px 5px 10px; | |||
font-weight: bold; | |||
text-shadow: var(--text-shadow); | |||
border-bottom: 1px solid rgb(var(--xp-window-border)); | |||
position: relative; | |||
text-align: left; | |||
width: 100%; | |||
border-left: none; | |||
} | } | ||
. | .news-container .section-title::after { | ||
content: "×"; | |||
position: absolute; | |||
top: 5px; | |||
right: 5px; | |||
width: 16px; | |||
height: 16px; | |||
background-color: #ff6347; | |||
border: 1px solid rgb(var(--xp-window-border)); | |||
text-align: center; | |||
line-height: 16px; | |||
font-size: 12px; | |||
color: white; | |||
cursor: pointer; | |||
z-index: 1; | |||
} | } | ||
. | .news-container .news-content { | ||
background-color: white; | |||
padding: 10px; | |||
width: 100%; | |||
border-bottom: 1px solid #ababab; | |||
} | } | ||
. | .news-container .news-content .news-item { | ||
border-bottom: 1px solid #e0e0e0; | |||
padding: 5px 0; | |||
} | } | ||
. | .news-container .news-content .news-item:last-child { | ||
border-bottom: none; | |||
} | } | ||
.news-container .news-content .news-title { | |||
. | font-weight: bold; | ||
margin-bottom: 3px; | |||
color: rgb(var(--xp-blue-dark)); | |||
} | } | ||
. | .news-container .news-content .news-date { | ||
font-size: 0.8rem; | |||
color: #666; | |||
margin-bottom: 3px; | |||
} | } | ||
.news-container .news-archive { | |||
background-color: #f0f0f0; | |||
background- | padding: 5px 10px; | ||
text-align: right; | |||
width: 100%; | |||
} | } | ||
. | .news-container .news-archive a { | ||
color: rgb(var(--link-color)); | |||
} | } | ||
/* | /* 轮播图容器 - Windows XP风格 */ | ||
. | .mw-carousel { | ||
position: relative; | |||
width: 100%; | |||
max-width: 960px; | |||
margin: 20px auto; | |||
overflow: hidden; | |||
border: 2px solid rgb(var(--xp-window-border)); | |||
box-shadow: var(--window-shadow); | |||
aspect-ratio: 16 / 9; | |||
background-color: rgb(var(--xp-window-bg)); | |||
border-radius: 0; | |||
} | } | ||
. | .mw-carousel::before { | ||
content: "Slideshow"; | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
right: 0; | |||
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light))); | |||
color: white; | |||
padding: 5px 10px; | |||
font-weight: bold; | |||
text-shadow: var(--text-shadow); | |||
border-bottom: 1px solid rgb(var(--xp-window-border)); | |||
text-align: left; | |||
height: 15px; | |||
line-height: 15px; | |||
font-size: 12px; | |||
z-index: 10; | |||
} | } | ||
. | .mw-carousel::after { | ||
content: "×"; | |||
position: absolute; | |||
top: 2px; | |||
right: 5px; | |||
width: 16px; | |||
height: 16px; | |||
background-color: #ff6347; | |||
border: 1px solid rgb(var(--xp-window-border)); | |||
text-align: center; | |||
line-height: 16px; | |||
font-size: 12px; | |||
color: white; | |||
cursor: pointer; | |||
z-index: 10; | |||
} | } | ||
. | .mw-carousel .carousel-image { | ||
width: 100%; | |||
height: 100%; | |||
position: relative; | |||
margin-top: 25px; | |||
} | } | ||
. | .mw-carousel .carousel-image img { | ||
width: 100%; | |||
height: calc(100% - 25px); | |||
object-fit: cover; | |||
display: block; | |||
border: 1px solid #ababab; | |||
} | } | ||
. | .mw-carousel .carousel-caption { | ||
position: absolute; | |||
bottom: 0; | |||
left: 0; | |||
width: 100%; | |||
background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0)); | |||
color: white; | |||
padding: 20px 15px 12px; | |||
text-align: left; | |||
transition: all 0.4s ease; | |||
z-index: 2; | |||
} | } | ||
. | .mw-carousel:hover .carousel-caption { | ||
top: 25px; | |||
left: 0; | |||
bottom: 0; | |||
width: 100%; | |||
height: calc(100% - 25px); | |||
background: rgba(0, 0, 0, 0.6); | |||
display: flex; | |||
flex-direction: column; | |||
justify-content: center; | |||
align-items: center; | |||
text-align: center; | |||
padding: 20px; | |||
backdrop-filter: blur(3px); | |||
} | } | ||
. | .mw-carousel .carousel-caption h3 { | ||
margin: 0 0 5px; | |||
font-size: 1.6em; | |||
font-weight: 600; | |||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); | |||
transition: transform 0.4s ease; | |||
background: none; | |||
padding: 0; | |||
border: none; | |||
} | } | ||
. | .mw-carousel .carousel-caption p { | ||
margin: 0; | |||
font-size: 1.1em; | |||
line-height: 1.4; | |||
max-width: 80%; | |||
transition: all 0.4s ease 0.1s; | |||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); | |||
} | } | ||
.mw-carousel .carousel-navigation { | |||
position: absolute; | |||
top: 50%; | |||
left: 0; | |||
width: 100%; | |||
display: flex; | |||
justify-content: space-between; | |||
transform: translateY(-50%); | |||
z-index: 3; | |||
padding: 0 15px; | |||
opacity: 0; | opacity: 0; | ||
transition: opacity 0.3s ease; | |||
} | |||
.mw-carousel:hover .carousel-navigation { | |||
opacity: 1; | opacity: 1; | ||
} | } | ||
.mw-carousel .carousel-prev, | |||
. | .mw-carousel .carousel-next { | ||
background: linear-gradient(to bottom, #f6f6f6, #e0e0e0); | |||
border: 1px solid #ababab; | |||
width: 32px; | |||
height: 32px; | |||
font-size: 18px; | |||
cursor: pointer; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
transition: all 0.3s; | |||
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); | |||
} | |||
.mw-carousel .carousel-prev:hover, | |||
.mw-carousel .carousel-next:hover { | |||
background: linear-gradient(to bottom, #f9f9f9, #e9e9e9); | |||
} | |||
.mw-carousel .carousel-indicators { | |||
position: absolute; | |||
bottom: 15px; | |||
right: 20px; | |||
left: auto; | |||
display: flex; | |||
gap: 5px; | |||
z-index: 4; | |||
padding: 5px 10px; | |||
background-color: rgba(0, 0, 0, 0.3); | |||
} | |||
.mw-carousel .carousel-indicators .indicator { | |||
width: 10px; | |||
height: 10px; | |||
background-color: rgba(255, 255, 255, 0.5); | |||
border: 1px solid rgba(0, 0, 0, 0.2); | |||
cursor: pointer; | |||
transition: all 0.3s; | |||
} | |||
.mw-carousel .carousel-indicators .indicator.active { | |||
background-color: #ffffff; | |||
transform: scale(1.2); | |||
box-shadow: 0 0 8px rgba(255, 255, 255, 0.5); | |||
} | |||
/* 图片全局样式 */ | |||
img { | |||
max-width: 100%; | |||
height: auto; | |||
display: block; | |||
border: 1px solid #ababab; | |||
} | |||
/* 添加图片过渡效果 */ | |||
.mw-carousel .carousel-image img { | |||
transition: transform 0.5s ease; | |||
} | |||
.mw-carousel:hover .carousel-image img { | |||
transform: scale(1.03); | |||
} | |||
/* 目录框样式 - Windows XP风格 */ | |||
#toc, .toc { | |||
background-color: rgb(var(--xp-window-bg)); | |||
border: 2px solid rgb(var(--xp-window-border)); | |||
box-shadow: var(--window-shadow); | |||
padding: 30px 10px 10px; | |||
margin: 1em 0; | |||
position: relative; | |||
border-radius: 0; | |||
} | |||
#toc::before, .toc::before { | |||
content: "Contents"; | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
right: 0; | |||
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light))); | |||
color: white; | |||
padding: 5px 10px; | |||
font-weight: bold; | |||
text-shadow: var(--text-shadow); | |||
border-bottom: 1px solid rgb(var(--xp-window-border)); | |||
text-align: left; | |||
height: 15px; | |||
line-height: 15px; | |||
font-size: 12px; | |||
} | } | ||
. | #toc::after, .toc::after { | ||
content: "×"; | |||
position: absolute; | |||
top: 2px; | |||
right: 5px; | |||
width: 16px; | |||
height: 16px; | |||
background-color: #ff6347; | |||
border: 1px solid rgb(var(--xp-window-border)); | |||
text-align: center; | |||
line-height: 16px; | |||
font-size: 12px; | |||
color: white; | |||
cursor: pointer; | |||
z-index: 1; | |||
} | } | ||
. | .toc .toctitle, #toc .toctitle { | ||
display: none; | |||
} | } | ||
. | .toc ul, #toc ul { | ||
margin: 0; | |||
padding: 0 0 0 1.5em; | |||
} | } | ||
. | .toc li, #toc li { | ||
margin: 5px 0; | |||
} | } | ||
. | .toc a, #toc a { | ||
color: rgb(var(--link-color)); | |||
text-decoration: none; | |||
} | } | ||
.toc a:hover, #toc a:hover { | |||
. | color: rgb(var(--hover-link-color)); | ||
text-decoration: underline; | |||
} | } | ||
. | .tocnumber { | ||
color: #666; | |||
margin-right: 5px; | |||
} | } | ||
. | /* 变色龙皮肤特定修复 */ | ||
.chameleon-toc { | |||
background-color: rgb(var(--xp-window-bg)); | |||
border: 2px solid rgb(var(--xp-window-border)); | |||
box-shadow: var(--window-shadow); | |||
padding: 30px 10px 10px; | |||
position: relative; | |||
border-radius: 0; | |||
} | } | ||
. | .chameleon-toc::before { | ||
content: "Contents"; | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
right: 0; | |||
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light))); | |||
color: white; | |||
padding: 5px 10px; | |||
font-weight: bold; | |||
text-shadow: var(--text-shadow); | |||
border-bottom: 1px solid rgb(var(--xp-window-border)); | |||
text-align: left; | |||
height: 15px; | |||
line-height: 15px; | |||
font-size: 12px; | |||
} | } | ||
. | .chameleon-toc::after { | ||
content: "×"; | |||
position: absolute; | |||
top: 2px; | |||
right: 5px; | |||
width: 16px; | |||
height: 16px; | |||
background-color: #ff6347; | |||
border: 1px solid rgb(var(--xp-window-border)); | |||
text-align: center; | |||
line-height: 16px; | |||
font-size: 12px; | |||
color: white; | |||
cursor: pointer; | |||
z-index: 1; | |||
} | } | ||
. | .chameleon-toc .toctitle { | ||
display: none; | |||
} | } | ||
/* Windows XP启动栏和任务栏 */ | |||
body::after { | |||
content: "开始"; | |||
position: fixed; | |||
left: 0; | |||
bottom: 30px; | |||
width: 100px; | |||
height: 30px; | |||
background: linear-gradient(to bottom, #4cae4c, #398439); | |||
color: white; | |||
text-align: center; | |||
line-height: 30px; | |||
font-weight: bold; | |||
border-radius: 0 5px 5px 0; | |||
z-index: 9999; | |||
cursor: pointer; | |||
border: 1px solid #366; | |||
border-left: none; | |||
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3); | |||
padding-left: 30px; | |||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M0 0h11v11H0V0zm13 0h11v11H13V0zM0 13h11v11H0V13zm13 0h11v11H13V13z'/%3E%3C/svg%3E"); | |||
background-repeat: no-repeat; | |||
background-position: 5px center; | |||
background-size: 20px 20px; | |||
} | } | ||
body::before { | |||
content: ""; | |||
position: fixed; | |||
left: 0; | |||
bottom: 0; | |||
width: 100%; | |||
height: 30px; | |||
background: linear-gradient(to bottom, #4581c8, #2f5b9d); | |||
border-top: 1px solid #223f6f; | |||
z-index: 9998; | |||
} | } | ||
. | /* 响应式调整 */ | ||
@media (max-width: 767px) { | |||
.tools-container { | |||
grid-template-columns: 1fr; | |||
} | |||
.recent-pages-container .page-section, | |||
.featured-content-container .feature-item { | |||
flex-basis: 100%; | |||
margin-bottom: 15px; | |||
} | |||
body::after { | |||
width: 80px; | |||
font-size: 12px; | |||
} | |||
} | } | ||
. | /* Windows XP蓝屏风格 */ | ||
.bluescreen { | |||
background-color: #0000aa; | |||
color: #ffffff; | |||
font-family: "Courier New", monospace; | |||
padding: 20px; | |||
margin: 10px 0; | |||
border: 2px solid #000055; | |||
box-shadow: var(--window-shadow); | |||
position: relative; | |||
} | } | ||
. | .bluescreen h2 { | ||
color: #ffffff; | |||
background: none; | |||
border: none; | |||
margin-top: 10px; | |||
margin-bottom: 20px; | |||
font-size: 1.5em; | |||
text-shadow: none; | |||
} | } | ||
.bluescreen p { | |||
. | margin: 10px 0; | ||
line-height: 1.5; | |||
} | } | ||
. | .bluescreen code { | ||
background-color: #0000aa; | |||
border: none; | |||
color: #ffffff; | |||
display: block; | |||
margin: 10px 0; | |||
font-family: "Courier New", monospace; | |||
} | } | ||
. | /* 标题栏文本 */ | ||
.titlebox { | |||
color: white; | |||
position: relative; | |||
top: -16px; | |||
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light))); | |||
padding: 5px 20px; | |||
line-height: 10px; | |||
font-weight: bold; | |||
text-shadow: var(--text-shadow); | |||
border: 1px solid rgb(var(--xp-window-border)); | |||
display: inline-block; | |||
} | } | ||
. | /* Windows XP Logo风格块 */ | ||
.logoblock { | |||
padding: 30px 10px 10px; | |||
color: black; | |||
box-shadow: var(--window-shadow); | |||
margin: 10px 0; | |||
display: block; | |||
position: relative; | |||
background-color: rgb(var(--xp-window-bg)); | |||
border: 2px solid rgb(var(--xp-window-border)); | |||
border-radius: 0; | |||
} | } | ||
. | .logoblock::before { | ||
content: "Windows"; | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
right: 0; | |||
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light))); | |||
color: white; | |||
padding: 5px 10px; | |||
font-weight: bold; | |||
text-shadow: var(--text-shadow); | |||
border-bottom: 1px solid rgb(var(--xp-window-border)); | |||
text-align: left; | |||
height: 15px; | |||
line-height: 15px; | |||
font-size: 12px; | |||
} | } | ||
. | .logoblock::after { | ||
content: ""; | |||
float: center; | |||
border: solid 2px #0000; | |||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230078d7' d='M0 0h11v11H0V0zm13 0h11v11H13V0zM0 13h11v11H0V13zm13 0h11v11H13V13z'/%3E%3C/svg%3E") center/70% no-repeat; | |||
opacity: 0.7; | |||
top: 0; | |||
left: 0; | |||
bottom: 0; | |||
right: 0; | |||
position: absolute; | |||
z-index: 1; | |||
} | } | ||
. | /* Windows XP错误对话框 */ | ||
.error-dialog { | |||
background-color: rgb(var(--xp-window-bg)); | |||
border: 2px solid rgb(var(--xp-window-border)); | |||
padding: 30px 10px 10px; | |||
margin: 10px 0; | |||
position: relative; | |||
box-shadow: var(--window-shadow); | |||
border-radius: 0; | |||
} | } | ||
. | .error-dialog::before { | ||
content: "Error"; | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
right: 0; | |||
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light))); | |||
color: white; | |||
padding: 5px 10px; | |||
font-weight: bold; | |||
text-shadow: var(--text-shadow); | |||
border-bottom: 1px solid rgb(var(--xp-window-border)); | |||
text-align: left; | |||
height: 15px; | |||
line-height: 15px; | |||
font-size: 12px; | |||
} | } | ||
. | .error-dialog::after { | ||
content: "×"; | |||
position: absolute; | |||
top: 2px; | |||
right: 5px; | |||
width: 16px; | |||
height: 16px; | |||
background-color: #ff6347; | |||
border: 1px solid rgb(var(--xp-window-border)); | |||
text-align: center; | |||
line-height: 16px; | |||
font-size: 12px; | |||
color: white; | |||
cursor: pointer; | |||
z-index: 1; | |||
} | } | ||
. | .error-dialog .icon { | ||
float: left; | |||
margin-right: 10px; | |||
width: 32px; | |||
height: 32px; | |||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23ff0000'/%3E%3Cpath d='M12 6v8M12 16v2' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); | |||
background-repeat: no-repeat; | |||
background-size: contain; | |||
} | } | ||
. | .error-dialog .message { | ||
margin-left: 50px; | |||
font-weight: bold; | |||
} | } | ||
.error-dialog .buttons { | |||
. | text-align: right; | ||
margin-top: 15px; | |||
} | } | ||
. | .error-dialog .buttons button { | ||
background: linear-gradient(to bottom, #f6f6f6, #e0e0e0); | |||
border: 1px solid #ababab; | |||
padding: 3px 10px; | |||
margin-left: 5px; | |||
cursor: pointer; | |||
} | } | ||
. | .error-dialog .buttons button:hover { | ||
background: linear-gradient(to bottom, #f9f9f9, #e9e9e9); | |||
} | } | ||
. | /* JS添加功能 */ | ||
.JS-added-button { | |||
display: none; /* 由JS控制显示 */ | |||
position: fixed; | |||
right: 10px; | |||
# | bottom: 40px; | ||
background: linear-gradient(to bottom, #f6f6f6, #e0e0e0); | |||
border: 1px solid #ababab; | |||
padding: 5px 10px; | |||
cursor: pointer; | |||
z-index: 9999; | |||
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); | |||
} | } | ||
.JS-added-button:hover { | |||
. | background: linear-gradient(to bottom, #f9f9f9, #e9e9e9); | ||
} | } | ||
/* 创建一个窗口最小化图标，显示在任务栏中 */ | |||
.minimized-window { | |||
position: fixed; | |||
left: 110px; | |||
bottom: 0; | |||
height: 30px; | |||
padding: 0 10px; | |||
background: linear-gradient(to bottom, #67a9e0, #3a84c5); | |||
color: white; | |||
line-height: 30px; | |||
font-size: 12px; | |||
z-index: 9999; | |||
cursor: pointer; | |||
border-top: 1px solid #81bdeb; | |||
border-left: 1px solid #81bdeb; | |||
border-right: 1px solid #25619a; | |||
max-width: 150px; | |||
white-space: nowrap; | |||
overflow: hidden; | |||
text-overflow: ellipsis; | |||
} | } | ||
.minimized-window:hover { | |||
background: linear-gradient(to bottom, #81bdeb, #67a9e0); | |||
} | } | ||
/* | /* 添加系统时钟到任务栏 */ | ||
. | .taskbar-clock { | ||
position: fixed; | |||
right: 10px; | |||
bottom: 0; | |||
height: 30px; | |||
padding: 0 10px; | |||
background: transparent; | |||
color: white; | |||
line-height: 30px; | |||
font-size: 12px; | |||
z-index: 9999; | |||
} | } | ||
/* CommonJS功能 */ | |||
/* 这些样式将由JavaScript功能使用 */d-content-container { | |||
display: flex; | |||
flex-wrap: wrap; | |||
justify-content: space-between; | |||
width: 100%; | |||
} | } | ||
. | .featured-content-container .feature-item { | ||
flex-basis: 48%; | |||
background-color: rgb(var(--xp-window-bg)); | |||
border: 2px solid rgb(var(--xp-window-border)); | |||
box-shadow: var(--window-shadow); | |||
margin-bottom: 1rem; | |||
display: grid; | |||
grid-template-areas: "title" "content" "more"; | |||
grid-template-rows: auto 1fr auto; | |||
position: relative; | |||
border-radius: 0; | |||
} | } | ||
. | .featured-content-container .section-title { | ||
grid-area: title; | |||
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light))); | |||
color: white; | |||
padding: 5px 30px 5px 10px; | |||
font-weight: bold; | |||
text-shadow: var(--text-shadow); | |||
border-bottom: 1px solid rgb(var(--xp-window-border)); | |||
position: relative; | |||
text-align: left; | |||
height: 25px; | |||
line-height: 25px; | |||
border-left: none; | |||
} | } | ||
. | .featured-content-container .section-title::after { | ||
content: "×"; | |||
position: absolute; | |||
top: 5px; | |||
right: 5px; | |||
width: 16px; | |||
height: 16px; | |||
background-color: #ff6347; | |||
border: 1px solid rgb(var(--xp-window-border)); | |||
text-align: center; | |||
line-height: 16px; | |||
font-size: 12px; | |||
color: white; | |||
cursor: pointer; | |||
z-index: 1; | |||
} | } | ||
. | .featured-content-container .feature-content { | ||
grid-area: content; | |||
background-color: white; | |||
padding: 10px; | |||
border-bottom: 1px solid #ababab; | |||
} | } | ||
. | .featured-content-container .feature-content .featured-title { | ||
font-size: 1.2rem; | |||
font-weight: bold; | |||
margin-bottom: 5px; | |||
color: rgb(var(--xp-blue-dark)); | |||
} | } | ||
. | .featured-content-container .feature-content .featured-author { | ||
font-size: 0.9rem; | |||
color: #666; | |||
margin-bottom: 5px; | |||
} | } | ||
. | .featured-content-container .feature-content .featured-description { | ||
font-style: italic; | |||
color: #444; | |||
} | } | ||
. | .featured-content-container .see-more { | ||
grid-area: more; | |||
background-color: #f0f0f0; | |||
padding: 5px 10px; | |||
text-align: right; | |||
} | } | ||
.featured-content-container .see-more a { | |||
. | color: rgb(var(--link-color)); | ||
} | } | ||
. | /* 工具和资源容器 - Windows XP风格 */ | ||
.tools-and-resources { | |||
margin-bottom: 2rem; | |||
} | } | ||
. | .tools-container { | ||
display: grid; | |||
grid-template-columns: 1fr 1fr; | |||
grid-gap: 1rem; | |||
} | } | ||
. | .tools-container .tool-item { | ||
background-color: rgb(var(--xp-window-bg)); | |||
border: 2px solid rgb(var(--xp-window-border)); | |||
box-shadow: var(--window-shadow); | |||
padding: 30px 10px 10px; | |||
display: grid; | |||
grid-template-areas: | |||
"icon content" | |||
"title content"; | |||
grid-template-columns: max-content 1fr; | |||
grid-template-rows: auto auto; | |||
grid-gap: 0.5rem 1rem; | |||
position: relative; | |||
border-radius: 0; | |||
} | } | ||
. | .tools-container .tool-item::before { | ||
content: "Tool"; | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
right: 0; | |||
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light))); | |||
color: white; | |||
padding: 5px 10px; | |||
font-weight: bold; | |||
text-shadow: var(--text-shadow); | |||
border-bottom: 1px solid rgb(var(--xp-window-border)); | |||
text-align: left; | |||
height: 15px; | |||
line-height: 15px; | |||
font-size: 12px; | |||
} | } | ||
. | .tools-container .tool-item::after { | ||
content: "×"; | |||
position: absolute; | |||
top: 2px; | |||
right: 5px; | |||
width: 16px; | |||
height: 16px; | |||
background-color: #ff6347; | |||
border: 1px solid rgb(var(--xp-window-border)); | |||
text-align: center; | |||
line-height: 16px; | |||
font-size: 12px; | |||
color: white; | |||
cursor: pointer; | |||
z-index: 1; | |||
} | } | ||
. | .tools-container .tool-item .tool-icon { | ||
grid-area: icon; | |||
justify-self: center; | |||
align-self: center; | |||
background-color: white; | |||
border: 1px solid #ababab; | |||
padding: 5px; | |||
} | } | ||
. | .tools-container .tool-item .tool-title { | ||
grid-area: title; | |||
text-align: center; | |||
} | } | ||
. | .tools-container .tool-item .tool-title a { | ||
color: rgb(var(--link-color)); | |||
font-weight: bold; | |||
} | } | ||
. | .tools-container .tool-item .tool-description { | ||
grid-area: content; | |||
background-color: white; | |||
border: 1px solid #ababab; | |||
padding: 8px; | |||
} | } | ||
. | /* 新闻容器 - Windows XP风格 */ | ||
.news-container { | |||
background-color: rgb(var(--xp-window-bg)); | |||
border: 2px solid rgb(var(--xp-window-border)); | |||
box-shadow: var(--window-shadow); | |||
margin-bottom: 2rem; | |||
position: relative; | |||
border-radius: 0; | |||
} | } | ||
. | .news-container .section-title { | ||
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light))); | |||
color: white; | |||
padding: 5px 30px 5px 10px; | |||
font-weight: bold; | |||
text-shadow: var(--text-shadow); | |||
border-bottom: 1px solid rgb(var(--xp-window-border)); | |||
position: relative; | |||
text-align: left; | |||
width: 100%; | |||
border-left: none; | |||
} | } | ||
. | .news-container .section-title::after { | ||
content: "×"; | |||
position: absolute; | |||
top: 5px; | |||
right: 5px; | |||
width: 16px; | |||
height: 16px; | |||
background-color: #ff6347; | |||
border: 1px solid rgb(var(--xp-window-border)); | |||
text-align: center; | |||
line-height: 16px; | |||
font-size: 12px; | |||
color: white; | |||
cursor: pointer; | |||
z-index: 1; | |||
} | } | ||
. | .news-container .news-content { | ||
background-color: white; | |||
padding: 10px; | |||
width: 100%; | |||
border-bottom: 1px solid #ababab; | |||
} | } | ||
.news-container .news-content .news-item { | |||
. | border-bottom: 1px solid #e0e0e0; | ||
padding: 5px 0; | |||
} | } | ||
. | .news-container .news-content .news-item:last-child { | ||
border-bottom: none; | |||
} | } | ||
. | .news-container .news-content .news-title { | ||
font-weight: bold; | |||
margin-bottom: 3px; | |||
color: rgb(var(--xp-blue-dark)); | |||
} | } | ||
. | .news-container .news-content .news-date { | ||
font-size: 0.8rem; | |||
color: #666; | |||
margin-bottom: 3px; | |||
} | } | ||
. | .news-container .news-archive { | ||
background-color: #f0f0f0; | |||
padding: 5px 10px; | |||
text-align: right; | |||
width: 100%; | |||
} | } | ||
.news-container .news-archive a { | |||
. | color: rgb(var(--link-color)); | ||
} | } | ||
. | /* 响应式调整 */ | ||
@media (max-width: 767px) { | |||
.tools-container { | |||
grid-template-columns: 1fr; | |||
} | |||
.recent-pages-container .page-section, | |||
.featured-content-container .feature-item { | |||
flex-basis: 100%; | |||
margin-bottom: 15px; | |||
} | |||
body::after { | |||
width: 80px; | |||
font-size: 12px; | |||
} | |||
} | } | ||
. | /* Windows XP蓝屏风格 */ | ||
.bluescreen { | |||
background-color: #0000aa; | |||
color: #ffffff; | |||
font-family: "Courier New", monospace; | |||
padding: 20px; | |||
margin: 10px 0; | |||
border: 2px solid #000055; | |||
box-shadow: var(--window-shadow); | |||
position: relative; | |||
} | } | ||
. | .bluescreen h2 { | ||
color: #ffffff; | |||
background: none; | |||
border: none; | |||
margin-top: 10px; | |||
margin-bottom: 20px; | |||
font-size: 1.5em; | |||
text-shadow: none; | |||
} | } | ||
. | .bluescreen p { | ||
margin: 10px 0; | |||
line-height: 1.5; | |||
} | } | ||
.bluescreen code { | |||
. | background-color: #0000aa; | ||
border: none; | |||
color: #ffffff; | |||
display: block; | |||
margin: 10px 0; | |||
font-family: "Courier New", monospace; | |||
} | } | ||
. | /* 标题栏文本 */ | ||
.titlebox { | |||
color: white; | |||
position: relative; | |||
top: -16px; | |||
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light))); | |||
padding: 5px 20px; | |||
line-height: 10px; | |||
font-weight: bold; | |||
text-shadow: var(--text-shadow); | |||
border: 1px solid rgb(var(--xp-window-border)); | |||
display: inline-block; | |||
} | } | ||
. | /* Windows XP Logo风格块 */ | ||
.logoblock { | |||
padding: 30px 10px 10px; | |||
color: black; | |||
box-shadow: var(--window-shadow); | |||
margin: 10px 0; | |||
display: block; | |||
position: relative; | |||
background-color: rgb(var(--xp-window-bg)); | |||
border: 2px solid rgb(var(--xp-window-border)); | |||
border-radius: 0; | |||
} | } | ||
. | .logoblock::before { | ||
content: "Windows"; | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
right: 0; | |||
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light))); | |||
color: white; | |||
padding: 5px 10px; | |||
font-weight: bold; | |||
text-shadow: var(--text-shadow); | |||
border-bottom: 1px solid rgb(var(--xp-window-border)); | |||
text-align: left; | |||
height: 15px; | |||
line-height: 15px; | |||
font-size: 12px; | |||
} | } | ||
. | .logoblock::after { | ||
content: ""; | |||
float: center; | |||
border: solid 2px #0000; | |||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230078d7' d='M0 0h11v11H0V0zm13 0h11v11H13V0zM0 13h11v11H0V13zm13 0h11v11H13V13z'/%3E%3C/svg%3E") center/70% no-repeat; | |||
opacity: 0.7; | |||
top: 0; | |||
left: 0; | |||
bottom: 0; | |||
right: 0; | |||
position: absolute; | |||
z-index: 1; | |||
} | } | ||
. | /* Windows XP错误对话框 */ | ||
.error-dialog { | |||
background-color: rgb(var(--xp-window-bg)); | |||
border: 2px solid rgb(var(--xp-window-border)); | |||
padding: 30px 10px 10px; | |||
margin: 10px 0; | |||
position: relative; | |||
box-shadow: var(--window-shadow); | |||
border-radius: 0; | |||
} | } | ||
. | .error-dialog::before { | ||
content: "Error"; | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
right: 0; | |||
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light))); | |||
color: white; | |||
padding: 5px 10px; | |||
font-weight: bold; | |||
text-shadow: var(--text-shadow); | |||
border-bottom: 1px solid rgb(var(--xp-window-border)); | |||
text-align: left; | |||
height: 15px; | |||
line-height: 15px; | |||
font-size: 12px; | |||
} | } | ||
. | .error-dialog::after { | ||
content: "×"; | |||
position: absolute; | |||
top: 2px; | |||
right: 5px; | |||
width: 16px; | |||
height: 16px; | |||
background-color: #ff6347; | |||
border: 1px solid rgb(var(--xp-window-border)); | |||
text-align: center; | |||
line-height: 16px; | |||
font-size: 12px; | |||
color: white; | |||
cursor: pointer; | |||
z-index: 1; | |||
} | } | ||
.error-dialog .icon { | |||
. | float: left; | ||
margin-right: 10px; | |||
width: 32px; | |||
height: 32px; | |||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23ff0000'/%3E%3Cpath d='M12 6v8M12 16v2' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); | |||
background-repeat: no-repeat; | |||
background-size: contain; | |||
} | } | ||
. | .error-dialog .message { | ||
margin-left: 50px; | |||
font-weight: bold; | |||
} | } | ||
. | .error-dialog .buttons { | ||
text-align: right; | |||
margin-top: 15px; | |||
} | } | ||
.error-dialog .buttons button { | |||
. | background: linear-gradient(to bottom, #f6f6f6, #e0e0e0); | ||
border: 1px solid #ababab; | |||
padding: 3px 10px; | |||
margin-left: 5px; | |||
cursor: pointer; | |||
} | } | ||
. | .error-dialog .buttons button:hover { | ||
background: linear-gradient(to bottom, #f9f9f9, #e9e9e9); | |||
} | } | ||
. | /* JS添加功能 */ | ||
.JS-added-button { | |||
display: none; /* 由JS控制显示 */ | |||
position: fixed; | |||
right: 10px; | |||
bottom: 40px; | |||
background: linear-gradient(to bottom, #f6f6f6, #e0e0e0); | |||
border: 1px solid #ababab; | |||
padding: 5px 10px; | |||
cursor: pointer; | |||
z-index: 9999; | |||
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); | |||
} | } | ||
. | .JS-added-button:hover { | ||
background: linear-gradient(to bottom, #f9f9f9, #e9e9e9); | |||
} | } | ||
. | /* 创建一个窗口最小化图标，显示在任务栏中 */ | ||
.minimized-window { | |||
position: fixed; | |||
left: 110px; | |||
bottom: 0; | |||
height: 30px; | |||
padding: 0 10px; | |||
background: linear-gradient(to bottom, #67a9e0, #3a84c5); | |||
color: white; | |||
line-height: 30px; | |||
font-size: 12px; | |||
z-index: 9999; | |||
cursor: pointer; | |||
border-top: 1px solid #81bdeb; | |||
border-left: 1px solid #81bdeb; | |||
border-right: 1px solid #25619a; | |||
max-width: 150px; | |||
white-space: nowrap; | |||
overflow: hidden; | |||
text-overflow: ellipsis; | |||
} | } | ||
. | .minimized-window:hover { | ||
background: linear-gradient(to bottom, #81bdeb, #67a9e0); | |||
} | } | ||
/* | /* 添加系统时钟到任务栏 */ | ||
.taskbar-clock { | |||
position: fixed; | |||
- | right: 10px; | ||
- | bottom: 0; | ||
height: 30px; | |||
padding: 0 10px; | |||
background: transparent; | |||
color: white; | |||
margin: 0 | line-height: 30px; | ||
font-size: 12px; | |||
z-index: 9999; | |||
} | |||
/* 导航框（查论编）- Windows XP风格 */ | |||
table.navbox { | |||
border: 2px solid rgb(var(--xp-window-border)); | |||
clear: both; | |||
margin: 1em auto; | |||
padding: 0; | |||
text-align: center; | |||
width: 100%; | width: 100%; | ||
background-color: rgb(var(--xp-window-bg)); | |||
box-shadow: var(--window-shadow); | |||
position: | border-collapse: separate; | ||
border-spacing: 0; | |||
border-radius: 0; | |||
} | |||
.navbox-title, | |||
.navbox-abovebelow, | |||
table.navbox th { | |||
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light))); | |||
width: | color: white; | ||
padding: 5px 10px; | |||
text-align: center; | |||
font-weight: bold; | |||
text-shadow: var(--text-shadow); | |||
border-bottom: 1px solid rgb(var(--xp-window-border)); | |||
position: relative; | |||
} | |||
.navbox-title::after, | |||
table.navbox th::after { | |||
content: "×"; | |||
position: absolute; | |||
top: 2px; | |||
right: 5px; | |||
width: 16px; | |||
height: 16px; | |||
background-color: #ff6347; | |||
border: 1px solid rgb(var(--xp-window-border)); | |||
text-align: center; | |||
line-height: 16px; | |||
font-size: 12px; | |||
color: white; | |||
cursor: pointer; | |||
z-index: 1; | |||
} | |||
.navbox-group { | |||
background-color: #f0f0f0; | |||
border: 1px solid #ababab; | |||
color: black; | |||
font-weight: bold; | |||
padding: 5px; | |||
text-align: right; | |||
white-space: nowrap; | |||
} | |||
.navbox-list { | |||
background-color: white; | |||
border: 1px solid #ababab; | |||
padding: 5px; | |||
text-align: left; | |||
} | |||
/* 修复开始按钮 - 实际元素而非伪元素 */ | |||
.start-button { | |||
position: fixed; | |||
left: 0; | |||
bottom: 30px; | |||
width: 100px; | |||
height: 30px; | |||
background: linear-gradient(to bottom, #4cae4c, #398439); | |||
color: white; | |||
text-align: center; | |||
line-height: 30px; | |||
font-weight: bold; | |||
border-radius: 0 5px 5px 0; | |||
z-index: 9999; | |||
cursor: pointer; | |||
border: 1px solid #366; | |||
border-left: none; | |||
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3); | |||
padding-left: 30px; | |||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M0 0h11v11H0V0zm13 0h11v11H13V0zM0 13h11v11H0V13zm13 0h11v11H13V13z'/%3E%3C/svg%3E"); | |||
background-repeat: no-repeat; | |||
background-position: 5px center; | |||
background-size: 20px 20px; | |||
} | |||
/* 修复开始菜单样式 */ | |||
#xp-start-menu { | |||
position: fixed !important; | |||
left: 0 !important; | |||
bottom: 60px !important; | |||
width: 250px !important; | |||
background-color: white !important; | |||
border: 2px solid #0054e3 !important; | |||
box-shadow: 2px -2px 5px rgba(0, 0, 0, 0.3) !important; | |||
z-index: 10000 !important; | |||
display: none; | |||
} | |||
.start-menu-top { | |||
height: 60px !important; | |||
background: linear-gradient(to bottom, #235ddc, #225ada 50%, #214fbb) !important; | |||
color: white !important; | |||
padding: 10px !important; | |||
font-weight: bold !important; | |||
display: flex !important; | |||
align-items: center !important; | |||
} | |||
.start-menu-items { | |||
background-color: white !important; | |||
padding: 5px 0 !important; | |||
} | |||
.start-menu-item { | |||
padding: 5px 10px !important; | |||
display: flex !important; | |||
align-items: center !important; | |||
cursor: pointer !important; | |||
} | |||
.start-menu-item:hover { | |||
background-color: #e0ecff !important; | |||
} | |||
/* 修复下拉菜单 */ | |||
.dropdown-menu { | |||
display: none; | |||
position: absolute; | |||
background-color: rgb(var(--xp-window-bg)) !important; | |||
border: 1px solid rgb(var(--xp-window-border)) !important; | |||
box-shadow: var(--window-shadow) !important; | |||
border-radius: 0 !important; | |||
z-index: 1000; | |||
} | |||
.dropdown.open .dropdown-menu, | |||
.dropdown:hover .dropdown-menu, | |||
.nav-item.dropdown:hover .dropdown-menu { | |||
display: block !important; | |||
} | |||
/* 修复2: 下拉菜单位置 */ | |||
#p-personal .vector-menu-content, | |||
.vector-user-menu .vector-menu-content, | |||
.vector-menu-dropdown .vector-menu-content { | |||
right: 0 !important; | |||
left: auto !important; | |||
} | |||
/* 确保下拉菜单不会超出屏幕 */ | |||
.dropdown-menu { | |||
right: 0 !important; | |||
left: auto !important; | |||
} | |||
#p-personal { | |||
position: relative !important; | |||
} | |||
/* 修复3: 时钟显示问题 */ | |||
/* 隐藏时钟图标 */ | |||
.oo-ui-icon-clock:before, | |||
.mw-ui-icon-clock:before, | |||
#pt-watchlist .mw-ui-icon:before { | |||
display: none !important; | |||
} | |||
/* 重新设置时钟样式，确保不会重叠 */ | |||
.taskbar-clock { | |||
position: fixed !important; | |||
right: 10px !important; | |||
bottom: 5px !important; | |||
height: 20px !important; | |||
padding: 0 8px !important; | |||
background-color: rgba(0, 0, 0, 0.1) !important; | |||
color: white !important; | |||
font-weight: bold !important; | |||
line-height: 20px !important; | |||
font-size: 14px !important; | |||
z-index: 10000 !important; | |||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important; | |||
border-radius: 3px !important; | |||
font-family: "Segoe UI", Tahoma, sans-serif !important; | |||
} | |||
/* 修复4: 开始按钮背景 */ | |||
.start-button { | |||
position: fixed !important; | |||
left: 0 !important; | |||
bottom: 30px !important; | |||
width: 100px !important; | |||
height: 30px !important; | |||
background: linear-gradient(to bottom, #4cae4c, #398439) !important; | |||
color: white !important; | |||
text-align: center !important; | |||
line-height: 30px !important; | |||
font-weight: bold !important; | |||
border-radius: 0 5px 5px 0 !important; | |||
z-index: 9999 !important; | |||
cursor: pointer !important; | |||
border: 1px solid #366 !important; | |||
border-left: none !important; | |||
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3) !important; | |||
padding-left: 30px !important; | |||
font-family: "Segoe UI", Tahoma, sans-serif !important; | |||
} | |||
.start-button::before { | |||
content: "" !important; | |||
position: absolute !important; | |||
left: 5px !important; | |||
top: 50% !important; | |||
transform: translateY(-50%) !important; | |||
width: 20px !important; | |||
height: 20px !important; | |||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M0 0h11v11H0V0zm13 0h11v11H13V0zM0 13h11v11H0V13zm13 0h11v11H13V13z'/%3E%3C/svg%3E") !important; | |||
background-repeat: no-repeat !important; | |||
background-position: center !important; | |||
background-size: contain !important; | |||
} | } | ||
/* 修复底部任务栏，使开始按钮正确显示 */ | |||
body::before { | |||
content: "" !important; | |||
position: fixed !important; | |||
left: 0 !important; | |||
bottom: 0 !important; | |||
width: 100% !important; | |||
height: 30px !important; | |||
background: linear-gradient(to bottom, #3367d1, #2851a3) !important; | |||
border-top: 1px solid #4a78d8 !important; | |||
z-index: 9998 !important; | |||
} | } | ||
/* | |||
/* 修复3: 移除之前的开始按钮伪元素 */ | |||
body::after { | |||
display: none !important; | display: none !important; | ||
} | |||
/* 修复4: 时钟样式完善 */ | |||
.taskbar-clock { | |||
position: fixed !important; | |||
right: 10px !important; | |||
bottom: 5px !important; | |||
height: 20px !important; | |||
line-height: 20px !important; | |||
padding: 0 8px !important; | |||
background-color: transparent !important; | |||
color: white !important; | |||
font-weight: normal !important; | |||
font-size: 13px !important; | |||
font-family: "Tahoma", "Microsoft Sans Serif", sans-serif !important; | |||
z-index: 10000 !important; | |||
text-shadow: none !important; | text-shadow: none !important; | ||
} | |||
/* 完全隐藏时钟图标 */ | |||
.oo-ui-icon-clock, | |||
.mw-ui-icon-clock, | |||
#pt-watchlist .mw-ui-icon, | |||
.mw-watchlink .mw-ui-icon::before { | |||
display: none !important; | display: none !important; | ||
} | } | ||
/* | /* 修复5: 完善底部任务栏 */ | ||
. | .taskbar { | ||
position: fixed !important; | |||
left: 0 !important; | |||
bottom: 0 !important; | |||
width: 100% !important; | |||
height: 30px !important; | |||
background: linear-gradient(to bottom, #3367d1, #2851a3) !important; | |||
border-top: 1px solid #4a78d8 !important; | |||
z-index: 9998 !important; | |||
display: flex !important; | |||
align-items: center !important; | |||
} | |||
/* 任务栏内容区域 */ | |||
.taskbar-content { | |||
flex: 1 !important; | |||
display: flex !important; | |||
align-items: center !important; | |||
padding: 0 10px !important; | |||
} | |||
/* 快速启动栏 */ | |||
.quick-launch { | |||
display: flex !important; | |||
align-items: center !important; | |||
padding: 0 5px !important; | |||
border-right: 1px solid rgba(255, 255, 255, 0.2) !important; | |||
margin-right: 5px !important; | |||
} | |||
.quick-launch-icon { | |||
width: 22px !important; | |||
height: 22px !important; | |||
margin: 0 2px !important; | |||
cursor: pointer !important; | |||
opacity: 0.8 !important; | |||
transition: opacity 0.2s !important; | |||
} | |||
.quick-launch-icon:hover { | |||
opacity: 1 !important; | |||
} | |||
/* 系统托盘区域 */ | |||
.system-tray { | |||
display: flex !important; | |||
align-items: center !important; | |||
padding: 0 5px !important; | |||
border-left: 1px solid rgba(255, 255, 255, 0.2) !important; | |||
margin-left: auto !important; | |||
} | } | ||
. | |||
//* 修复系统托盘布局 */ | |||
.system-tray { | |||
position: fixed !important; | |||
right: 10px !important; | |||
bottom: 0 !important; | |||
height: 30px !important; | |||
display: flex !important; | |||
align-items: center !important; | |||
gap: 10px !important; | |||
padding: 0 5px !important; | |||
z-index: 10000 !important; | |||
} | } | ||
. | /* 单独设置时钟样式 */ | ||
.taskbar-clock { | |||
position: static !important; | |||
color: white !important; | |||
font-family: "Tahoma", sans-serif !important; | |||
font-size: 13px !important; | |||
line-height: 30px !important; | |||
} | } | ||
. | /* 移除重复的系统图标 */ | ||
.tray-icon { | |||
display: none !important; | |||
} | |||
/* 强制应用指定字体 */ | |||
* { | |||
font-family: var(--body-font) !important; | |||
} | } | ||
body, html { | |||
font-family: "VonwaonBitmap 16px", VT323, monospace !important; | |||
} | } | ||
/* | /* 特别设置任务栏字体 */ | ||
.taskbar, .start-button, .taskbar-clock { | |||
font-family: "Tahoma", "Microsoft Sans Serif", sans-serif !important; | |||
} | |||
/* 修复媒体查询 */ | |||
@media (max-width: 767px) { | |||
.navbar-toggle, .navbar-toggler { | |||
display: block !important; | |||
} | |||
.navbar-collapse { | |||
position: absolute !important; | |||
top: 100% !important; | |||
} | left: 0 !important; | ||
right: 0 !important; | |||
background: rgb(var(--xp-window-bg)) !important; | |||
border: 1px solid rgb(var(--xp-window-border)) !important; | |||
z-index: 1000 !important; | |||
} | |||
} | |||
/* 确保任务栏不与页面内容重叠 */ | |||
body { | |||
padding-bottom: 40px !important; | |||
} | |||
#content { | |||
margin-bottom: 40px !important; | |||
} | |||
/* 在顶栏显示用户头像 - 针对变色龙皮肤 */ | |||
.navbar-userloggedin, | |||
#personal-inner, | |||
#p-personal .vector-menu-content-list > li:first-child, | |||
.navbar-personaltools > li:first-child { | |||
position: relative; | |||
padding-left: 30px !important; | |||
} | |||
.navbar-userloggedin::before, | |||
#personal-inner::before, | |||
#p-personal .vector-menu-content-list > li:first-child > a::before, | |||
.navbar-personaltools > li:first-child > a::before { | |||
content: ""; | |||
position: absolute; | |||
left: 5px; | |||
top: 50%; | |||
transform: translateY(-50%); | |||
width: 24px; | |||
height: 24px; | |||
border-radius: 50%; | |||
background-size: cover; | |||
background-position: center; | |||
border: 1px solid rgb(var(--bright-accent)); | |||
z-index: 100; | |||
} | |||
/* 头像悬停效果 */ | |||
.navbar-userloggedin:hover::before, | |||
#personal-inner:hover::before, | |||
#p-personal .vector-menu-content-list > li:first-child > a:hover::before, | |||
.navbar-personaltools > li:first-child > a:hover::before { | |||
transform: translateY(-50%) scale(1.2) !important; | |||
box-shadow: 0 0 10px rgba(var(--bright-accent), 0.6) !important; | |||
border-color: rgb(var(--white-monochrome)) !important; | |||
} | |||
/* Echo扩展通知图标修复 */ | |||
#pt-notifications-alert, | |||
#pt-notifications-notice, | |||
.mw-echo-notifications-badge, | |||
.mw-echo-notification-badge-nojs { | |||
background-color: transparent !important; | |||
border: none !important; | |||
} | |||
#pt-notifications-alert .mw-echo-notifications-badge:before, | |||
#pt-notifications-notice .mw-echo-notifications-badge:before, | |||
.mw-echo-notifications-badge:before { | |||
color: rgb(var(--bright-accent)) !important; | |||
filter: none !important; | |||
opacity: 1 !important; | |||
} | |||
.mw-echo-notifications-badge:after, | |||
.mw-echo-notification-badge-nojs:after { | |||
background-color: rgb(var(--bright-accent)) !important; | |||
color: rgb(var(--black-monochrome)) !important; | |||
border: 1px solid rgb(var(--black-monochrome)) !important; | |||
opacity: 1 !important; | |||
} | |||
/* 只修改通知图标的颜色 */ | |||
/* Echo图标蓝色风格 - Windows XP主题 */ | |||
#pt-notifications-alert .oo-ui-icon-bell, | |||
#pt-notifications-notice .oo-ui-icon-tray { | |||
filter: invert(34%) sepia(37%) saturate(2476%) hue-rotate(201deg) brightness(97%) contrast(85%); | |||
} | |||
/* 或者更直接的方式，使用颜色而不是filter */ | |||
#pt-notifications-alert .mw-echo-notifications-badge:before, | |||
#pt-notifications-notice .mw-echo-notifications-badge:before, | |||
.mw-echo-notifications-badge:before { | |||
color: rgb(49, 106, 197) !important; /* 使用XP蓝色 */ | |||
filter: none !important; | |||
opacity: 1 !important; | |||
} | |||
/* 悬停时变亮 */ | |||
#pt-notifications-alert:hover .mw-echo-notifications-badge:before, | |||
#pt-notifications-notice:hover .mw-echo-notifications-badge:before { | |||
color: rgb(82, 153, 235) !important; /* 使用XP浅蓝色 */ | |||
} | |||
/* 目录框样式 */ | |||
#toc, .toc { | |||
background-color: rgb(var(--gray-monochrome)) !important; | |||
border: 2px solid rgb(var(--bright-accent)) !important; | |||
padding: 0.5em !important; | |||
font-family: var(--body-font) !important; | |||
} | |||
.toc .toctitle, #toc .toctitle { | |||
background-color: rgb(var(--bright-accent)) !important; | |||
color: rgb(var(--black-monochrome)) !important; | |||
text-align: center !important; | |||
padding: 0.25em !important; | |||
margin: -0.5em -0.5em 0.5em -0.5em !important; | |||
font-weight: bold !important; | |||
} | |||
.toc ul, #toc ul { | |||
margin: 0 !important; | |||
padding: 0 0 0 1.5em !important; | |||
} | |||
.toc a, #toc a { | |||
color: rgb(var(--bright-accent)) !important; | |||
text-decoration: none !important; | |||
} | |||
.toc a:hover, #toc a:hover { | |||
color: rgb(var(--white-monochrome)) !important; | |||
text-decoration: underline !important; | |||
} | |||
.tocnumber { | |||
color: rgb(var(--pale-accent)) !important; | |||
} | |||
/* 简化的导航栏布局 */ | |||
.navbar { | |||
display: flex !important; | |||
align-items: center !important; | |||
justify-content: space-between !important; | |||
flex-wrap: nowrap !important; | |||
} | |||
.navbar-brand { | |||
margin-right: 20px !important; | |||
flex-shrink: 0 !important; | |||
} | |||
.navbar-nav { | |||
display: flex !important; | |||
flex-direction: row !important; | |||
align-items: center !important; | |||
} | |||
.navbar-nav > li { | |||
margin: 0 10px !important; | |||
} | |||
.navbar-right { | |||
margin-left: auto !important; | |||
display: flex !important; | |||
align-items: center !important; | |||
} | |||
/* 搜索框间距修复 */ | |||
#searchform { | |||
margin: 0 10px !important; | |||
} | |||
/* 响应式修复 */ | |||
@media (max-width: 767px) { | |||
.navbar { | |||
flex-wrap: wrap !important; | |||
} | } | ||
.navbar-collapse { | |||
width: 100% !important; | |||
} | } | ||
} | |||
// | /* 修复logo样式 */ | ||
var | .navbar-brand img, | ||
.navbar .logo img, | |||
#p-logo img, | |||
.navbar-header img { | |||
border: none !important; | |||
display: inline-block !important; | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
max-height: 40px !important; | |||
vertical-align: middle !important; | |||
} | |||
} | |||
.navbar-brand, | |||
.navbar .logo, | |||
#p-logo, | |||
.navbar-header { | |||
display: flex !important; | |||
align-items: center !important; | |||
height: auto !important; | |||
padding: 5px 15px !important; | |||
margin: 0 !important; | |||
} | |||
/* 完全重置TOC样式 - Windows XP风格 */ | |||
#toc, .toc, .chameleon-toc, .mw-toc, #mw-toc, .Table_of_Contents { | |||
background-color: rgb(var(--xp-window-bg)) !important; | |||
border: 2px solid rgb(var(--xp-window-border)) !important; | |||
box-shadow: var(--window-shadow) !important; | |||
padding: 35px 10px 10px !important; /* 上方留出标题空间 */ | |||
margin: 1em 0 !important; | |||
position: relative !important; | |||
border-radius: 0 !important; | |||
width: auto !important; | |||
max-width: 360px !important; /* 限制最大宽度 */ | |||
min-width: 200px !important; | |||
display: block !important; /* 改用块级显示 */ | |||
float: right !important; /* 向右浮动 */ | |||
clear: right !important; | |||
overflow: visible !important; | |||
z-index: 1 !important; | |||
} | |||
/* | /* 自定义标题栏 */ | ||
. | #toc::before, .toc::before, .chameleon-toc::before, .mw-toc::before, #mw-toc::before, .Table_of_Contents::before { | ||
content: "Contents" !important; | |||
position: absolute !important; | |||
top: 0 !important; | |||
left: 0 !important; | |||
. | right: 0 !important; | ||
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light))) !important; | |||
color: white !important; | |||
padding: 5px 10px !important; | |||
font-weight: bold !important; | |||
text-shadow: var(--text-shadow) !important; | |||
border-bottom: 1px solid rgb(var(--xp-window-border)) !important; | |||
text-align: left !important; | |||
height: auto !important; | |||
line-height: 1.5 !important; | |||
font-size: 14px !important; | |||
display: block !important; | |||
z-index: 2 !important; | |||
} | } | ||
. | |||
/* 处理原始标题和关闭按钮 */ | |||
.toc .toctitle, #toc .toctitle, .chameleon-toc .toctitle, | |||
.mw-toc-heading, .tocheader, .toctoggle, .toctogglecheckbox { | |||
display: none !important; /* 隐藏原始标题 */ | |||
} | } | ||
. | |||
/* 确保目录列表可见 */ | |||
.toc ul, #toc ul, .chameleon-toc ul, | |||
.mw-toc ul, #mw-toc ul, .Table_of_Contents ul { | |||
display: block !important; | |||
visibility: visible !important; | |||
opacity: 1 !important; | |||
margin: 0.5em 0 !important; | |||
padding: 0 0 0 1.5em !important; | |||
list-style-type: disc !important; | |||
text-align: left !important; | |||
max-height: none !important; | |||
overflow: visible !important; | |||
} | } | ||
. | |||
/* 确保目录列表项可见 */ | |||
.toc li, #toc li, .chameleon-toc li, | |||
.mw-toc li, #mw-toc li, .Table_of_Contents li { | |||
display: list-item !important; | |||
visibility: visible !important; | |||
opacity: 1 !important; | |||
margin: 4px 0 !important; | |||
padding: 0 !important; | |||
line-height: 1.5 !important; | |||
font-size: 13px !important; | |||
color: rgb(var(--xp-text)) !important; | |||
overflow: visible !important; | |||
height: auto !important; | |||
max-height: none !important; | |||
} | } | ||
. | |||
/* 链接样式 */ | |||
.toc a, #toc a, .chameleon-toc a, | |||
.mw-toc a, #mw-toc a, .Table_of_Contents a { | |||
display: inline !important; | |||
color: rgb(var(--link-color)) !important; | |||
text-decoration: none !important; | |||
font-size: 13px !important; | |||
line-height: 1.5 !important; | |||
height: auto !important; | |||
visibility: visible !important; | |||
opacity: 1 !important; | |||
} | } | ||
. | .toc a:hover, #toc a:hover, .chameleon-toc a:hover, | ||
. | .mw-toc a:hover, #mw-toc a:hover, .Table_of_Contents a:hover { | ||
color: rgb(var(--hover-link-color)) !important; | |||
text-decoration: underline !important; | |||
} | } | ||
/* | /* 目录编号样式 */ | ||
. | .tocnumber { | ||
color: rgb(var(--xp-blue)) !important; | |||
font-weight: bold !important; | |||
margin-right: 0.3em !important; | |||
display: inline !important; | |||
visibility: visible !important; | |||
opacity: 1 !important; | |||
} | } | ||
/* | /* 强制显示所有子目录 */ | ||
.toc .toclevel-1 ul, | |||
.toc .toclevel-2 ul, | |||
.toc .toclevel-3 ul, | |||
#toc .toclevel-1 ul, | |||
#toc .toclevel-2 ul, | |||
#toc .toclevel-3 ul { | |||
display: block !important; | |||
visibility: visible !important; | |||
opacity: 1 !important; | |||
} | } | ||
/* | /* 整个目录容器设置 */ | ||
#mw-content-text .toc, | |||
#mw-content-text #toc { | |||
display: block !important; | |||
visibility: visible !important; | |||
opacity: 1 !important; | |||
height: auto !important; | |||
max-height: none !important; | |||
overflow: visible !important; | |||
} | } | ||
/* CommonJS功能 */ | |||
/* | /* 这些样式将由JavaScript功能使用 */ | ||
2025年5月11日 (日) 15:22的最新版本
/* Windows XP风格MediaWiki主题 - 完整迁移自Wikidot */
/* 导入所需字体 */
@import url("https://fonts.googleapis.com/css2?family=Microsoft+Sans+Serif&display=swap");
@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");
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
:root {
/* 主题基础设置 */
--fade-in-delay: 0.1s;
--theme-base: "xp-style";
--theme-id: "windows-xp";
--theme-name: "Windows XP Theme";
/* 字体设置 - 保持原有字体 */
--body-font: "VonwaonBitmap 16px", VT323, monospace;
--header-font: "VonwaonBitmap 16px", VT323, monospace;
--title-font: "VonwaonBitmap 16px", VT323, monospace;
--mono-font: "VonwaonBitmap 16px", VT323, monospace;
--pixel-font-16: 'VonwaonBitmap 16px', VT323, monospace;
--pixel-font-12: 'VonwaonBitmap 12px', VT323, monospace;
--base-font-size: 14px;
/* Windows XP 颜色方案 */
--xp-blue: 49, 106, 197;
--xp-blue-light: 82, 153, 235;
--xp-blue-dark: 16, 35, 85;
--xp-green: 57, 154, 48;
--xp-button: 192, 192, 192;
--xp-window-border: 0, 0, 0;
--xp-window-bg: 236, 233, 216;
--xp-text: 0, 0, 0;
/* 颜色方案 - 迁移并适配XP风格 */
--white-monochrome: 255, 255, 255;
--pale-gray-monochrome: 236, 233, 216;
--light-gray-monochrome: 192, 192, 192;
--gray-monochrome: 128, 128, 128;
--black-monochrome: 0, 0, 0;
--bright-accent: var(--xp-blue);
--medium-accent: var(--xp-blue);
--dark-accent: var(--xp-blue-dark);
--pale-accent: var(--xp-blue-light);
/* 链接颜色 */
--link-color: 0, 0, 255;
--visited-link-color: 128, 0, 128;
--hover-link-color: 0, 0, 255;
/* 文本阴影 */
--text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
/* 边框和阴影 */
--window-border: 1px solid rgb(var(--xp-window-border));
--window-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
/* 应用全局字体 */
body {
font-family: var(--body-font) !important;
font-size: var(--base-font-size) !important;
line-height: 1.5 !important;
background-color: #3a6ea5; /* 经典XP桌面蓝色背景 */
background-image: url("/aoh2wiki/images/b/be/Microsoft_Nostalgic_Windows_Wallpaper_4k.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
color: rgb(var(--xp-text));
}
/* 标题字体 */
h1, h2, h3, h4, h5, h6, #firstHeading {
font-family: var(--title-font);
color: rgb(var(--white-monochrome));
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
padding: 5px 10px;
margin-top: 10px;
border-bottom: 1px solid rgb(var(--xp-window-border));
position: relative;
text-shadow: var(--text-shadow);
}
/* 窗口操作按钮 - 关闭、最大化、最小化 */
h1::after,
h2::after,
h3::after,
h4::after,
h5::after,
h6::after,
#firstHeading::after {
content: "×";
position: absolute;
top: 2px;
right: 5px;
width: 16px;
height: 16px;
background-color: #ff6347;
border: 1px solid rgb(var(--xp-window-border));
text-align: center;
line-height: 16px;
font-size: 12px;
color: white;
cursor: pointer;
}
h1::before,
h2::before,
h3::before,
h4::before,
h5::before,
h6::before,
#firstHeading::before {
content: "□";
position: absolute;
top: 2px;
right: 25px;
width: 16px;
height: 16px;
background-color: rgb(var(--light-gray-monochrome));
border: 1px solid rgb(var(--xp-window-border));
text-align: center;
line-height: 16px;
font-size: 12px;
color: black;
cursor: pointer;
}
h1 span::before,
h2 span::before,
h3 span::before,
h4 span::before,
h5 span::before,
h6 span::before,
#firstHeading span::before {
content: "_";
position: absolute;
top: 2px;
right: 45px;
width: 16px;
height: 16px;
background-color: rgb(var(--light-gray-monochrome));
border: 1px solid rgb(var(--xp-window-border));
text-align: center;
line-height: 14px;
font-size: 12px;
color: black;
font-weight: bold;
cursor: pointer;
}
/* 链接样式 */
a {
color: rgb(var(--link-color));
text-decoration: none;
}
a:visited {
color: rgb(var(--visited-link-color));
}
a:hover {
color: rgb(var(--hover-link-color));
text-decoration: underline;
}
/* ">" 箭头指示符 - 保留原样 */
a:hover::before {
content: "> ";
}
/* 背景样式 */
html, body {
background-color: #3a6ea5 !important; /* 保留XP桌面风格 */
}
/* 搜索框和搜索按钮样式 */
#searchButton,
.searchButton,
input[type="submit"],
input[type="button"],
.mw-ui-button,
button[name="go"],
button[name="fulltext"],
.mw-ui-button.mw-ui-progressive {
background: linear-gradient(to bottom, #f6f6f6, #e0e0e0) !important;
border: 1px solid #ababab !important;
color: black !important;
font-family: var(--body-font) !important;
padding: 3px 8px !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
border-radius: 0 !important;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2) !important;
}
#searchButton:hover,
.searchButton:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.mw-ui-button:hover,
button[name="go"]:hover,
button[name="fulltext"]:hover,
.mw-ui-button.mw-ui-progressive:hover {
background: linear-gradient(to bottom, #f9f9f9, #e9e9e9) !important;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3) !important;
}
/* 分类条样式 */
#catlinks,
.catlinks {
background-color: rgb(var(--xp-window-bg)) !important;
border: 1px solid rgb(var(--xp-window-border)) !important;
padding: 0.5em !important;
margin-top: 1em !important;
font-family: var(--body-font) !important;
box-shadow: var(--window-shadow) !important;
}
#catlinks a,
.catlinks a {
color: rgb(var(--link-color)) !important;
text-decoration: none !important;
}
#catlinks a:hover,
.catlinks a:hover {
color: rgb(var(--hover-link-color)) !important;
text-decoration: underline !important;
}
/* 工具栏样式 */
#footer-info,
#footer-places,
.footer-places,
.footer-info {
background-color: rgb(var(--xp-window-bg)) !important;
border-top: 1px solid rgb(var(--xp-window-border)) !important;
color: rgb(var(--xp-text)) !important;
padding: 0.5em 1em !important;
font-family: var(--body-font) !important;
}
#footer-info a,
#footer-places a {
color: rgb(var(--link-color)) !important;
}
#footer-info a:hover,
#footer-places a:hover {
color: rgb(var(--hover-link-color)) !important;
}
/* 主内容区背景 */
#content {
background-color: rgb(var(--xp-window-bg));
position: relative;
border: 2px solid rgb(var(--xp-window-border));
box-shadow: var(--window-shadow);
margin: 10px auto;
padding: 0;
border-radius: 0;
}
/* 导航栏 */
.navbar,
.navbar.navbar-default,
.navbar-light {
background-color: rgb(var(--xp-window-bg)) !important;
border: 1px solid rgb(var(--xp-window-border)) !important;
box-shadow: var(--window-shadow) !important;
border-radius: 0 !important;
}
.navbar .navbar-brand,
.navbar .nav-link,
.navbar-light .navbar-nav .nav-link {
color: rgb(var(--link-color)) !important;
font-family: var(--header-font) !important;
}
.navbar .nav-link:hover,
.navbar-light .navbar-nav .nav-link:hover {
color: rgb(var(--hover-link-color)) !important;
background-color: rgba(var(--xp-blue), 0.1) !important;
}
/* 下拉菜单 */
.dropdown-menu {
background-color: rgb(var(--xp-window-bg)) !important;
border: 1px solid rgb(var(--xp-window-border)) !important;
box-shadow: var(--window-shadow) !important;
border-radius: 0 !important;
}
.dropdown-item {
color: rgb(var(--link-color)) !important;
font-family: var(--body-font) !important;
}
.dropdown-item:hover {
background-color: rgba(var(--xp-blue), 0.1) !important;
color: rgb(var(--hover-link-color)) !important;
}
/* 侧边栏 */
#mw-navigation, #mw-panel, .sidebar {
background-color: rgb(var(--xp-window-bg)) !important;
border: 2px solid rgb(var(--xp-window-border)) !important;
box-shadow: var(--window-shadow) !important;
border-radius: 0 !important;
}
#mw-navigation h2, #mw-panel h3, .sidebar h3 {
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light))) !important;
color: rgb(var(--white-monochrome)) !important;
font-family: var(--header-font) !important;
border-bottom: 1px solid rgb(var(--xp-window-border)) !important;
padding: 5px 10px !important;
text-shadow: var(--text-shadow) !important;
position: relative !important;
}
/* 工具栏 */
#p-tb, .tools-menu {
background-color: rgb(var(--xp-window-bg)) !important;
border: 2px solid rgb(var(--xp-window-border)) !important;
box-shadow: var(--window-shadow) !important;
border-radius: 0 !important;
}
/* 内容区域 */
#content, .mw-body {
background-color: rgb(var(--xp-window-bg)) !important;
border: 2px solid rgb(var(--xp-window-border)) !important;
box-shadow: var(--window-shadow) !important;
border-radius: 0 !important;
}
/* 页脚 */
#footer, .footer {
background-color: rgb(var(--xp-window-bg)) !important;
border: 2px solid rgb(var(--xp-window-border)) !important;
border-top: 1px solid rgb(var(--xp-window-border)) !important;
color: rgb(var(--xp-text)) !important;
box-shadow: var(--window-shadow) !important;
border-radius: 0 !important;
margin: 10px auto !important;
padding: 10px !important;
}
/* 搜索框 */
#searchInput, .form-control {
background-color: white !important;
border: 1px solid #7f9db9 !important;
color: rgb(var(--xp-text)) !important;
font-family: var(--body-font) !important;
padding: 3px 5px !important;
}
/* 按钮 */
.btn, .mw-ui-button {
background: linear-gradient(to bottom, #f6f6f6, #e0e0e0) !important;
border: 1px solid #ababab !important;
color: black !important;
font-family: var(--body-font) !important;
padding: 3px 8px !important;
border-radius: 0 !important;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2) !important;
}
.btn:hover, .mw-ui-button:hover {
background: linear-gradient(to bottom, #f9f9f9, #e9e9e9) !important;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3) !important;
}
/* 表格 */
.wikitable, table.wikitable {
background-color: rgb(var(--xp-window-bg)) !important;
border: 2px solid rgb(var(--xp-window-border)) !important;
border-collapse: separate !important;
border-spacing: 0 !important;
box-shadow: var(--window-shadow) !important;
}
.wikitable th {
background: linear-gradient(to bottom, #e3e3e3, #d0d0d0) !important;
border: 1px solid #ababab !important;
color: black !important;
padding: 5px !important;
}
.wikitable td {
border: 1px solid #ababab !important;
background-color: white !important;
color: black !important;
padding: 5px !important;
}
/* 代码块和预格式文本 */
pre, code, .mw-code {
background-color: white !important;
border: 1px solid #ababab !important;
color: black !important;
font-family: var(--mono-font) !important;
padding: 5px !important;
}
/* 链接颜色 */
a {
color: rgb(var(--link-color)) !important;
}
a:visited {
color: rgb(var(--visited-link-color)) !important;
}
a:hover {
color: rgb(var(--hover-link-color)) !important;
text-decoration: underline !important;
}
/* 扫描线动画 - 修改为半透明灰色 */
.scan-animation {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
z-index: 9999;
}
/* 主扫描线 - 较宽较慢 */
.scan-animation::before {
content: "";
position: absolute;
width: 100%;
height: 6px;
top: 0;
background: linear-gradient(
to bottom,
rgba(128, 128, 128, 0) 0%,
rgba(128, 128, 128, 0.1) 20%,
rgba(128, 128, 128, 0.2) 50%,
rgba(128, 128, 128, 0.1) 80%,
rgba(128, 128, 128, 0) 100%
);
box-shadow:
0 0 8px rgba(128, 128, 128, 0.15),
0 0 15px rgba(128, 128, 128, 0.1);
animation: scanMain 12s linear infinite;
opacity: 0.4;
}
/* 副扫描线 - 中等速度 */
.scan-animation::after {
content: "";
position: absolute;
width: 100%;
height: 3px;
top: 0;
background: linear-gradient(
to bottom,
rgba(128, 128, 128, 0) 0%,
rgba(128, 128, 128, 0.3) 50%,
rgba(128, 128, 128, 0) 100%
);
box-shadow: 0 0 6px rgba(128, 128, 128, 0.2);
animation: scanSecondary 7s linear infinite;
animation-delay: -3s;
opacity: 0.25;
}
/* 快速扫描线 - 细小快速 */
.scan-animation .fast-scan {
position: absolute;
width: 100%;
height: 1px;
top: 0;
background: rgba(128, 128, 128, 0.6);
box-shadow: 0 0 3px rgba(128, 128, 128, 0.3);
animation: scanFast 3s linear infinite;
animation-delay: -1.5s;
opacity: 0.15;
}
/* 各个扫描线的动画 */
@keyframes scanMain {
0% {
top: -2rem;
opacity: 0.6;
}
50% {
opacity: 0.3;
}
100% {
top: 100vh;
opacity: 0.6;
}
}
@keyframes scanSecondary {
0% {
top: -1rem;
opacity: 0.4;
}
35% {
opacity: 0.2;
}
70% {
opacity: 0.5;
}
100% {
top: 100vh;
opacity: 0.4;
}
}
@keyframes scanFast {
0% {
top: -0.3rem;
opacity: 0.3;
}
50% {
opacity: 0.6;
}
100% {
top: 100vh;
opacity: 0.3;
}
}
/* 保留原始的淡入效果 */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 应用动画到内容 */
.mw-parser-output > * {
animation: fadeIn 0.5s ease-out forwards;
opacity: 0;
}
/* 延迟动画 */
.mw-parser-output > *:nth-child(1) { animation-delay: 0.1s; }
.mw-parser-output > *:nth-child(2) { animation-delay: 0.2s; }
.mw-parser-output > *:nth-child(3) { animation-delay: 0.3s; }
.mw-parser-output > *:nth-child(4) { animation-delay: 0.4s; }
.mw-parser-output > *:nth-child(5) { animation-delay: 0.5s; }
.mw-parser-output > *:nth-child(n+6) { animation-delay: 0.6s; }
/* 修复代码区域样式 */
.mw-highlight pre {
background-color: white !important;
border: 1px solid #ababab !important;
padding: 1em !important;
overflow: auto !important;
}
/* 语法高亮颜色 - 保持原有值 */
.mw-highlight .k { color: #0000AA !important; } /* 关键字 */
.mw-highlight .s { color: #006600 !important; } /* 字符串 */
.mw-highlight .c { color: #666666 !important; } /* 注释 */
.mw-highlight .n { color: #000000 !important; } /* 名称 */
.mw-highlight .o { color: #000000 !important; } /* 运算符 */
/* 引用样式 - Windows XP风格 */
.lightstyled-quote, .darkstyled-quote {
background-color: rgb(var(--xp-window-bg));
color: rgb(var(--xp-text));
border: 1px solid #ababab;
padding: 10px;
margin: 10px 0;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
border-left: 4px solid rgb(var(--xp-blue));
position: relative;
}
.lightstyled-quote::before, .darkstyled-quote::before {
content: "Information";
position: absolute;
top: -22px;
left: 0;
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
color: white;
padding: 2px 10px;
font-weight: bold;
font-size: 0.9em;
text-shadow: var(--text-shadow);
}
/* 块样式 - Windows XP风格 */
.lightblock, .darkblock {
background-color: rgb(var(--xp-window-bg));
color: rgb(var(--xp-text));
border: 2px solid rgb(var(--xp-window-border));
box-shadow: var(--window-shadow);
padding: 10px;
margin: 10px 0;
position: relative;
border-radius: 0;
}
.lightblock::before, .darkblock::before {
content: "Message";
position: absolute;
top: 0;
left: 0;
right: 0;
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
color: white;
padding: 5px 10px;
font-weight: bold;
text-align: left;
text-shadow: var(--text-shadow);
border-bottom: 1px solid rgb(var(--xp-window-border));
}
.lightblock::after, .darkblock::after {
content: "×";
position: absolute;
top: 2px;
right: 5px;
width: 16px;
height: 16px;
background-color: #ff6347;
border: 1px solid rgb(var(--xp-window-border));
text-align: center;
line-height: 16px;
font-size: 12px;
color: white;
cursor: pointer;
z-index: 1;
}
/* 保留黑幕效果 - 行826-947 */
.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;
}
/* 保留彩幕效果 - 行1778-1838 */
.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;
}
/* for T:Coloredlink in T:彩幕 */
.colormu:not(:hover):not(:active):not(.colormu_toggle_on) a>span {
color: transparent !important;
}
/* for T:彩幕 in link */
a .colormu-bri {
color: inherit;
}
a:hover .colormu>span, a:active .colormu>span,
/* and for MediaWiki:Gadget-heimu-toggle.js */
.colormu-drk.colormu_toggle_on, .colormu_toggle_on>span, .colormu-drk.colormu_toggle_on a>span {
color: inherit !important;
}
/* 橙幕效果 - 修改为Windows XP样式 */
.blackmu,
.blackmu rt {
--blackmu-color: var(--xp-blue);
--blackmu-text-color: 255, 255, 255;
--blackmu-link-color: 173, 216, 230;
--blackmu-visited-link-color: 197, 202, 233;
--blackmu-new-link-color: 255, 204, 204;
--blackmu-new-visited-link-color: 239, 154, 154;
--blackmu-extiw-visited-link-color: 209, 196, 233;
background-color: rgb(var(--blackmu-color));
}
.blackmu,
.blackmu a,
a .blackmu,
a.new .blackmu,
span.blackmu a:visited,
span.blackmu a.new,
span.blackmu a.external,
span.blackmu a.external:visited,
span.blackmu a.extiw,
span.blackmu a.extiw:visited,
span.blackmu a.mw-disambig,
span.blackmu a.mw-redirect {
transition: color 0.13s linear;
color: rgb(var(--blackmu-color));
text-shadow: none;
}
span.blackmu:hover,
span.blackmu:active {
color: rgb(var(--blackmu-text-color));
}
span.blackmu:hover a,
a:hover span.blackmu {
color: rgb(var(--blackmu-link-color));
}
/* 保留特效库代码 - 行949-1777 */
/*
该文档为一个hover特效库，由一些常用的效果以及GitHub上的开源项目“Hover.css”的一些部分构成。
请使用hovers在页面中进行载入。
*/
/* hover状态切换 */
.hover-change,
.hover-remote {
position: relative;
display: inline-block;
transition: opacity 0.5s linear;
}
.hover-change-before,
.hover-change-after,
.hover-remote-target {
transition: inherit;
}
.hover-change-after,
.hover-remote-target {
opacity: 0;
position: absolute;
top: 0;
left: 0;
}
.hover-remote-target {
left: 100%;
}
.hover-change-after[style^='right:'],
.hover-change-after[style*=' right:'],
.hover-remote-after[style^='right:'],
.hover-remote-after[style*=' right:'] {
left: initial;
}
.hover-change-after[style^='bottom:'],
.hover-change-after[style*=' bottom:'],
.hover-remote-after[style^='bottom:'],
.hover-remote-after[style*=' bottom:'] {
top: initial;
}
.hover-change-after:hover,
.hover-remote-target {
opacity: 0;
margin-left: -9999px;
}
/* 主要用于制作hover形式的标签页(tab)切换 */
.hover-tab-mode {
position: relative;
transition: none;
}
.hover-tab-mode .hover-remote {
transition: inherit;
position: static;
}
/* 闪烁效果 */
.hover-change.flash:hover .hover-change-before {
margin-left: -9999px;
}
.hover-change:hover > .hover-change-before,
.hover-remote > .hover-remote-target,
.hover-change:hover > a > .hover-change-before,
.hover-remote > a > .hover-remote-target {
opacity: 0;
}
.hover-change:hover > .hover-change-after,
.hover-remote:hover > .hover-remote-target,
.hover-change:hover > a > .hover-change-after,
.hover-remote:hover > a > .hover-remote-target {
opacity: 1;
margin-left: initial;
}
/* 基类 */
[class*='hovers-'] {
display: inline-block;
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
transform: perspective(1px) translateZ(0);
vertical-align: middle;
transition-duration: 0.25s;
transition-property: all;
}
/* 旋转放大 */
.hovers-rotate-shrink {
transition-duration: 0.5s;
transform: rotate(0) scale(0.75);
}
.hovers-rotate-shrink:hover {
transform: rotate(360deg) scale(1);
}
.hovers-rotate-shrink-reverse {
transition-duration: 0.5s;
transform: rotate(360deg) scale(0.75);
}
.hovers-rotate-shrink-reverse:hover {
transform: rotate(0) scale(1);
}
/* 旋转 */
.hovers-rotate,
.hovers-rotate-reverse:hover {
transition-duration: 0.5s;
transform: rotate(0);
}
.hovers-rotate-reverse,
.hovers-rotate:hover {
transition-duration: 0.5s;
transform: rotate(360deg);
}
/* 正常 => 浅 */
.hovers-fade-deep,
.hovers-fade,
.hovers-fade-shallow {
opacity: 1;
}
.hovers-fade-deep:hover,
.hovers-fade-deep.active {
opacity: 0.35;
}
.hovers-fade:hover,
.hovers-fade.active {
opacity: 0.5;
}
.hovers-fade-shallow:hover,
.hovers-fade-shallow.active {
opacity: 0.75;
}
/* 浅 => 正常 */
.hovers-bloom-deep {
opacity: 0.35;
}
.hovers-bloom {
opacity: 0.5;
}
.hovers-bloom-shallow {
opacity: 0.75;
}
.hovers-bloom-deep:hover,
.hovers-bloom-deep.active,
.hovers-bloom:hover,
.hovers-bloom.active,
.hovers-bloom-shallow:hover,
.hovers-bloom-shallow.active {
opacity: 1;
}
/* 正常 => 大 */
.hovers-grow-deep,
.hovers-grow,
.hovers-grow-shallow {
transform: scale(1);
}
.hovers-grow-deep:hover,
.hovers-grow-deep.active {
transform: scale(1.5);
}
.hovers-grow:hover,
.hovers-grow.active {
transform: scale(1.25);
}
.hovers-grow-shallow:hover,
.hovers-grow-shallow.active {
transform: scale(1.1);
}
/* 正常 => 小 */
.hovers-shrink-deep:hover,
.hovers-shrink-deep.active,
.hovers-shrink:hover,
.hovers-shrink.active,
.hovers-shrink-shallow:hover,
.hovers-shrink-shallow.active {
transform: scale(1);
}
.hovers-shrink-deep {
transform: scale(0.5);
}
.hovers-shrink {
transform: scale(0.75);
}
.hovers-shrink-shallow {
transform: scale(0.9);
}
/* 左右抖动 */
@keyframes shake-flexible {
25% {
transform: translateX(-0.0625em);
}
50% {
transform: translateX(0.0625em);
}
75% {
transform: translateX(-0.0625em);
}
}
.hovers-shake-flexible:hover,
.hovers-shake-flexible.active {
animation: shake-flexible 0.5s ease-out;
}
@keyframes shake {
25% {
transform: translateX(-8px);
}
50% {
transform: translateX(8px);
}
75% {
transform: translateX(-8px);
}
}
.hovers-shake:hover,
.hovers-shake.active {
animation: shake 0.5s ease-out;
}
/* 上下抖动 */
@keyframes bounce-flexible {
25% {
transform: translateY(-0.0625em);
}
50% {
transform: translateY(0.0625em);
}
75% {
transform: translateY(-0.0625em);
}
}
.hovers-bounce-flexible:hover,
.hovers-bounce-flexible.active {
animation: bounce-flexible 0.5s ease-out;
}
@keyframes bounce {
25% {
transform: translateY(-8px);
}
50% {
transform: translateY(8px);
}
75% {
transform: translateY(-8px);
}
}
.hovers-bounce:hover,
.hovers-bounce.active {
position: relative;
left: 0;
animation: bounce 0.5s ease-out;
}
/* 绕顶端中点抖动 */
@keyframes swing {
20% {
transform: rotate3d(0, 0, 1, 10deg);
}
40% {
transform: rotate3d(0, 0, 1, -10deg);
}
60% {
transform: rotate3d(0, 0, 1, 5deg);
}
80% {
transform: rotate3d(0, 0, 1, -5deg);
}
to {
transform: rotate3d(0, 0, 1, 0deg);
}
}
.hovers-swing {
transform-origin: top center;
}
.hovers-swing:hover,
.hovers-swing.active {
animation: swing 0.75s ease-out;
}
/* 正常 => 大 */
@keyframes pulse-grow {
to {
transform: scale(1.1);
}
}
.hovers-pulse-grow:hover,
.hovers-pulse-grow.active {
animation: pulse-grow 0.5s linear infinite alternate;
}
/* 正常 => 小 */
@keyframes pulse-shrink {
to {
transform: scale(0.9);
}
}
.hovers-pulse-shrink:hover,
.hovers-pulse-shrink.active {
animation: pulse-shrink 0.5s linear infinite alternate;
}
/* 正常 => 小 */
@keyframes push {
50% {
transform: scale(0.8);
}
}
.hovers-push:hover,
.hovers-push.active {
animation: push 0.3s linear;
}
/* 正常 => 大 */
@keyframes pop {
50% {
transform: scale(1.2);
}
}
.hovers-pop:hover,
.hovers-pop.active {
animation: pop 0.3s linear;
}
/* 正常 => 大 => 正常 => 大 */
.hovers-bounce-in:hover,
.hovers-bounce-in.active {
transform: scale(1.2);
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}
/* 正常 => 小 => 正常 => 小 */
.hovers-bounce-out:hover,
.hovers-bounce-out.active {
transform: scale(0.8);
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}
/* 倾斜 */
.hovers-tilt:hover,
.hovers-tilt.active {
transition-duration: 0.3s;
transform: rotate(4deg);
}
/* 倾斜 + 放大 */
.hovers-grow-rotate:hover,
.hovers-grow-rotate.active {
transition-duration: 0.3s;
transform: scale(1.1) rotate(4deg);
}
/* 升起 */
.hovers-float:hover,
.hovers-float.active {
transition-duration: 0.3s;
transition-timing-function: ease-out;
transform: translateY(-8px);
}
/* 下沉 */
.hovers-sink:hover,
.hovers-sink.active {
transition-duration: 0.3s;
transition-timing-function: ease-out;
transform: translateY(8px);
}
/* 飘浮 */
@keyframes bob {
0% {
transform: translateY(-10px);
}
50% {
transform: translateY(-5px);
}
100% {
transform: translateY(-10px);
}
}
@keyframes bob-float {
100% {
transform: translateY(-10px);
}
}
.hovers-bob:hover,
.hovers-bob.active {
animation-name: bob-float, bob;
animation-duration: 0.3s, 1.5s;
animation-delay: 0s, 0.3s;
animation-timing-function: ease-out, ease-in-out;
animation-iteration-count: 1, infinite;
animation-fill-mode: forwards;
animation-direction: normal, alternate;
}
/* 悬挂 */
@keyframes hang {
0% {
transform: translateY(10px);
}
50% {
transform: translateY(5px);
}
100% {
transform: translateY(10px);
}
}
@keyframes hang-sink {
100% {
transform: translateY(10px);
}
}
.hovers-hang:hover,
.hovers-hang.active {
animation-name: hang-sink, hang;
animation-duration: 0.3s, 1.5s;
animation-delay: 0s, 0.3s;
animation-timing-function: ease-out, ease-in-out;
animation-iteration-count: 1, infinite;
animation-fill-mode: forwards;
animation-direction: normal, alternate;
}
/* 非对称 */
.hovers-skew:hover,
.hovers-skew.active {
transform: skew(-10deg);
}
/* 非对称-左 */
.hovers-skew-forward {
transform-origin: 0 100%;
}
.hovers-skew-forward:hover,
.hovers-skew-forward.active {
transform: skew(-10deg);
}
/* 非对称-右 */
.hovers-skew-backward {
transform-origin: 0 100%;
}
.hovers-skew-backward:hover,
.hovers-skew-backward.active {
transform: skew(10deg);
}
/* 垂直抖动 */
@keyframes wobble-vertical {
16.65% {
transform: translateY(8px);
}
33.3% {
transform: translateY(-6px);
}
49.95% {
transform: translateY(4px);
}
66.6% {
transform: translateY(-2px);
}
83.25% {
transform: translateY(1px);
}
100% {
transform: translateY(0);
}
}
.hovers-wobble-vertical:hover,
.hovers-wobble-vertical.active {
animation-name: wobble-vertical;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
/* 水平抖动 */
@keyframes wobble-horizontal {
16.65% {
transform: translateX(8px);
}
33.3% {
transform: translateX(-6px);
}
49.95% {
transform: translateX(4px);
}
66.6% {
transform: translateX(-2px);
}
83.25% {
transform: translateX(1px);
}
100% {
transform: translateX(0);
}
}
.hovers-wobble-horizontal:hover,
.hovers-wobble-horizontal.active {
animation-name: wobble-horizontal;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
/* 右下弹回 */
@keyframes wobble-to-bottom-right {
16.65% {
transform: translate(8px, 8px);
}
33.3% {
transform: translate(-6px, -6px);
}
49.95% {
transform: translate(4px, 4px);
}
66.6% {
transform: translate(-2px, -2px);
}
83.25% {
transform: translate(1px, 1px);
}
100% {
transform: translate(0, 0);
}
}
.hovers-wobble-to-bottom-right:hover,
.hovers-wobble-to-bottom-right.active {
animation-name: wobble-to-bottom-right;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
/* 右上弹回 */
@keyframes wobble-to-top-right {
16.65% {
transform: translate(8px, -8px)
}
33.3% {
transform: translate(-6px, 6px);
}
49.95% {
transform: translate(4px, -4px);
}
66.6% {
transform: translate(-2px, 2px);
}
83.25% {
transform: translate(1px, -1px);
}
100% {
transform: translate(0);
}
}
.hovers-wobble-to-top-right:hover,
.hovers-wobble-to-top-right.active {
animation-name: wobble-to-top-right;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
/* 果冻 */
@keyframes wobble-top {
16.65% {
transform: skew(-12deg);
}
33.3% {
transform: skew(10deg);
}
49.95% {
transform: skew(-6deg);
}
66.6% {
transform: skew(4deg);
}
83.25% {
transform: skew(-2deg);
}
100% {
transform: skew(0);
}
}
/* 赘肉 */
.hovers-wobble-top {
transform-origin: 0 100%;
}
.hovers-wobble-top:hover,
.hovers-wobble-top.active {
animation-name: wobble-top;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
@keyframes wobble-bottom {
16.65% {
transform: skew(-12deg);
}
33.3% {
transform: skew(10deg);
}
49.95% {
transform: skew(-6deg);
}
66.6% {
transform: skew(4deg);
}
83.25% {
transform: skew(-2deg);
}
100% {
transform: skew(0);
}
}
.hovers-wobble-bottom {
transform-origin: 100% 0;
}
.hovers-wobble-bottom:hover,
.hovers-wobble-bottom.active {
animation-name: wobble-bottom;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
/* 颤动 */
@keyframes wobble-skew {
16.65% {
transform: skew(-12deg);
}
33.3% {
transform: skew(10deg);
}
49.95% {
transform: skew(-6deg);
}
66.6% {
transform: skew(4deg);
}
83.25% {
transform: skew(-2deg);
}
100% {
transform: skew(0);
}
}
.hovers-wobble-skew:hover,
.hovers-wobble-skew.active {
animation-name: wobble-skew;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
/* 振动 */
@keyframes buzz {
50% {
transform: translateX(3px) rotate(2deg);
}
100% {
transform: translateX(-3px) rotate(-2deg);
}
}
.hovers-buzz:hover,
.hovers-buzz.active {
animation-name: buzz;
animation-duration: 0.15s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
/* 振出 */
@keyframes buzz-out {
10% {
transform: translateX(3px) rotate(2deg);
}
20% {
transform: translateX(-3px) rotate(-2deg);
}
30% {
transform: translateX(3px) rotate(2deg);
}
40% {
transform: translateX(-3px) rotate(-2deg);
}
50% {
transform: translateX(2px) rotate(1deg);
}
60% {
transform: translateX(-2px) rotate(-1deg);
}
70% {
transform: translateX(2px) rotate(1deg);
}
80% {
transform: translateX(-2px) rotate(-1deg);
}
90% {
transform: translateX(1px) rotate(0);
}
100% {
transform: translateX(-1px) rotate(0);
}
}
.hovers-buzz-out:hover,
.hovers-buzz-out.active {
animation-name: buzz-out;
animation-duration: 0.75s;
animation-timing-function: linear;
animation-iteration-count: 1;
}
/* 右移 */
.hovers-forward:hover,
.hovers-forward.active {
transform: translateX(8px);
}
/* 左移 */
.hovers-backward:hover,
.hovers-backward.active {
transform: translateX(-8px);
}
/* 自由移动 */
.hovers-top,
.hovers-left,
.hovers-bottom,
.hovers-right {
transition: all 0.5s;
}
.hovers-top:hover,
.hovers-top.active {
transform: translateY(-0.0625em);
}
.hovers-left:hover,
.hovers-left.active {
transform: translateX(-0.0625em);
}
.hovers-bottom:hover,
.hovers-bottom.active {
transform: translateY(0.0625em);
}
.hovers-right:hover,
.hovers-right.active {
transform: translateX(0.0625em);
}
/* 滤镜 */
.hovers-blur,
.hovers-blur-reverse,
.hovers-brightness,
.hovers-brightness-reverse,
.hovers-contrast,
.hovers-contrast-reverse,
.hovers-grayscale,
.hovers-grayscale-reverse,
.hovers-invert,
.hovers-invert-reverse,
.hovers-saturate,
.hovers-saturate-reverse,
.hovers-sepia,
.hovers-sepia-reverse,
.hovers-hue-rotate,
.hovers-hue-rotate-reverse {
transition-duration: 0.75s;
}
.hovers-blur:hover,
.hovers-blur.active,
.hovers-brightness:hover,
.hovers-brightness.active,
.hovers-contrast:hover,
.hovers-contrast.active,
.hovers-grayscale:hover,
.hovers-grayscale.active,
.hovers-invert:hover,
.hovers-invert.active,
.hovers-saturate:hover,
.hovers-saturate.active,
.hovers-sepia:hover,
.hovers-sepia.active,
.hovers-hue-rotate:hover,
.hovers-hue-rotate.active {
filter: initial;
}
.hovers-blur {
filter: blur(5px);
}
.hovers-blur-reverse:hover,
.hovers-blur-reverse.active {
filter: blur(5px);
}
.hovers-brightness {
filter: brightness(50%);
}
.hovers-brightness-reverse:hover,
.hovers-brightness-reverse.active {
filter: brightness(50%);
}
.hovers-contrast {
filter: contrast(50%);
}
.hovers-contrast-reverse:hover,
.hovers-contrast-reverse.active {
filter: contrast(50%);
}
.hovers-grayscale {
filter: grayscale(100%);
}
.hovers-grayscale-reverse:hover,
.hovers-grayscale-reverse.active {
filter: grayscale(100%);
}
.hovers-invert {
filter: invert(100%);
}
.hovers-invert-reverse:hover,
.hovers-invert-reverse.active {
filter: invert(100%);
}
.hovers-saturate {
filter: saturate(200%);
}
.hovers-saturate-reverse:hover,
.hovers-saturate-reverse.active {
filter: saturate(200%);
}
.hovers-sepia {
filter: sepia(100%);
}
.hovers-sepia-reverse:hover,
.hovers-sepia-reverse.acitve {
filter: sepia(100%);
}
.hovers-hue-rotate {
filter: hue-rotate(180deg);
}
.hovers-hue-rotate-reverse:hover,
.hovers-hue-rotate-reverse.active {
filter: hue-rotate(180deg);
}
/* 背景滑动 */
.hovers-sweep-to-right,
.hovers-sweep-to-left,
.hovers-sweep-to-bottom,
.hovers-sweep-to-top,
.hovers-radial-out,
.hovers-radial-in {
position: relative;
transition-duration: 0.3s;
transition-timing-function: ease-out;
overflow: hidden;
}
.hovers-sweep-to-right:before,
.hovers-sweep-to-left:before,
.hovers-sweep-to-bottom:before,
.hovers-sweep-to-top:before,
.hovers-radial-out:before,
.hovers-radial-in:before {
content: '';
position: absolute;
z-index: 10;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: inherit;
transform: scaleX(0);
transition: inherit;
}
.hovers-sweep-to-bottom:before,
.hovers-sweep-to-top:before {
transform: scaleY(0);
}
.hovers-radial-out:before,
.hovers-radial-in:before {
border-radius: 50%;
transform: scale(0);
}
.hovers-radial-in:before {
transform: scale(2);
}
.hovers-sweep-to-right:before {
transform-origin: 0 50%;
}
.hovers-sweep-to-left:before {
transform-origin: 100% 50%;
}
.hovers-sweep-to-bottom:before {
transform-origin: 50% 0;
}
.hovers-sweep-to-top:before {
transform-origin: 50% 100%;
}
.hovers-radial-out:hover:before,
.hovers-radial-out.active:before {
transform: scale(2);
}
.hovers-radial-in:hover:before,
.hovers-radial-in.active:before {
transform: scale(0);
}
.hovers-sweep-to-right .hovers-content.center,
.hovers-sweep-to-left .hovers-content.center,
.hovers-sweep-to-bottom .hovers-content.center,
.hovers-sweep-to-top .hovers-content.center,
.hovers-radial-out .hovers-content.center,
.hovers-radial-in .hovers-content.center {
display: flex;
align-items: center;
justify-content: center;
word-break: break-all;
}
.hovers-sweep-to-right:hover:before,
.hovers-sweep-to-left:hover:before,
.hovers-sweep-to-bottom:hover:before,
.hovers-sweep-to-top:hover:before,
.hovers-sweep-to-right.active:before,
.hovers-sweep-to-left:hover:before,
.hovers-sweep-to-bottom:hover:before,
.hovers-sweep-to-top:hover:before {
transform: scaleX(1);
}
.hovers-sweep-to-right .hovers-content,
.hovers-sweep-to-left .hovers-content,
.hovers-sweep-to-bottom .hovers-content,
.hovers-sweep-to-top .hovers-content,
.hovers-radial-out .hovers-content,
.hovers-radial-in .hovers-content {
width: 100%;
height: 100%;
position: absolute;
transition-property: all;
transition-duration: inherit;
top: 0;
left: 0;
z-index: 11;
}
.hovers-sweep-to-right .hovers-content {
left: initial;
right: 100%;
}
.hovers-sweep-to-right:hover .hovers-content,
.hovers-sweep-to-right.active .hovers-content {
right: 0;
}
.hovers-sweep-to-left .hovers-content {
left: 100%;
}
.hovers-sweep-to-left:hover .hovers-content,
.hovers-sweep-to-left.active .hovers-content {
left: 0;
}
.hovers-sweep-to-bottom .hovers-content {
top: initial;
bottom: 100%;
}
.hovers-sweep-to-bottom:hover .hovers-content,
.hovers-sweep-to-bottom.active .hovers-content {
bottom: 0;
}
.hovers-sweep-to-top .hovers-content {
top: 100%;
}
.hovers-sweep-to-top:hover .hovers-content,
.hovers-sweep-to-top.active .hovers-content {
top: 0;
}
.hovers-radial-out .hovers-content,
.hovers-radial-in:hover .hovers-content,
.hovers-radial-in.active .hovers-content {
opacity: 0;
}
.hovers-radial-in .hovers-content,
.hovers-radial-out:hover .hovers-content,
.hovers-radial-out.active .hovers-content {
opacity: 1;
}
/* 默认em */
.hovers-border,
.hovers-trim,
.hovers-ripple-out,
.hovers-ripple-in,
.hovers-outline-out,
.hovers-outline-in,
.hovers-reveal {
font-size: 160px;
line-height: 16px;
}
/* 内边框滑出 */
.hovers-border,
.hovers-trim {
position: relative;
top: 0;
left: 0;
transition: all 0.3s;
}
.hovers-border:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
transition: inherit;
border-width: calc(0.0625em * 0.6);
border-color: inherit;
border-style: solid;
border-radius: inherit;
opacity: 0;
}
.hovers-border:hover:before,
.hovers-border.active:before {
opacity: 1;
}
/* 带边距内边框 */
.hovers-trim:before {
content: '';
position: absolute;
top: calc(0.0625em * 0.4);
left: calc(0.0625em * 0.4);
bottom: calc(0.0625em * 0.4);
right: calc(0.0625em * 0.4);
transition: inherit;
border-width: calc(0.0625em * 0.6);
border-color: inherit;
border-style: solid;
opacity: 0;
border-radius: inherit;
}
.hovers-trim:hover:before,
.hovers-trim.active:before {
opacity: 1;
}
/* 边框飞出与飞入 */
.hovers-ripple-out,
.hovers-ripple-in,
.hovers-outline-out,
.hovers-outline-in,
.hovers-reveal {
animation-duration: 0.7s;
animation-timing-function: ease-out;
transition: all 0.3s;
}
.hovers-ripple-out:before,
.hovers-ripple-in:before,
.hovers-outline-out:before,
.hovers-outline-in:before,
.hovers-reveal:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
animation: inherit;
transition: inherit;
border-width: calc(0.0625em * 0.6);
border-color: inherit;
border-style: solid;
border-radius: inherit;
}
.hovers-ripple-out:before {
opacity: 0;
}
.hovers-ripple-in:before {
top: calc(-0.0625em * 1.2);
right: calc(-0.0625em * 1.2);
bottom: calc(-0.0625em * 1.2);
left: calc(-0.0625em * 1.2);
opacity: 0;
}
.hovers-outline-out:before {
opacity: 0;
}
.hovers-outline-out:before {
top: calc(-0.0625em * 1.6);
right: calc(-0.0625em * 1.6);
bottom: calc(-0.0625em * 1.6);
left: calc(-0.0625em * 1.6);
opacity: 0;
}
.hovers-reveal:before {
border-width: 0;
opacity: 0;
}
@keyframes ripple-out {
50% {
opacity: 1;
}
100% {
top: calc(-0.0625em * 1.2);
right: calc(-0.0625em * 1.2);
bottom: calc(-0.0625em * 1.2);
left: calc(-0.0625em * 1.2);
opacity: 0;
}
}
.hovers-ripple-out:hover:before,
.hovers-ripple-out.active:before {
animation-name: ripple-out;
}
@keyframes ripple-in {
50% {
opacity: 1;
}
100% {
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
}
}
.hovers-ripple-in:hover:before,
.hovers-ripple-in.active:before {
animation-name: ripple-in;
}
.hovers-outline-out:hover:before,
.hovers-outline-in:hover:before,
.hovers-outline-out.active:before,
.hovers-outline-in:hover:before {
top: calc(-0.0625em * 0.8);
right: calc(-0.0625em * 0.8);
bottom: calc(-0.0625em * 0.8);
left: calc(-0.0625em * 0.8);
opacity: 1;
}
.hovers-reveal:hover:before,
.hovers-reveal.active:before {
transform: translateY(0);
border-width: calc(0.0625em * 0.4);
opacity: 1;
}
/* 圆角化 */
.hovers-round-corners {
overflow: hidden;
}
.hovers-round-corners:hover,
.hovers-round-corners.active {
border-radius: 0.0625em;
}
/* 重叠：翻转切换 */
.hover-turn {
position: relative;
transform: translateZ(1px);
}
.hover-turn-before,
.hover-turn-after {
position: absolute;
top: 0;
left: 0;
}
@keyframes hover-turn {
from {
transform: rotateY(-90deg);
}
50% {
transform: scale(1.2);
}
to {
transform: rotateY(0);
}
}
.hover-turn:not(:hover) .hover-turn-before,
.hover-turn:hover .hover-turn-after {
animation: hover-turn 0.5s;
}
.hover-turn:hover .hover-turn-before,
.hover-turn:not(:hover) .hover-turn-after {
opacity: 0;
}
/* [[Category:在模板名字空间下的CSS页面]] */
/* 信息框样式 - Windows XP风格 */
.infobox,
.notaninfobox {
position: relative;
clear: right;
float: right;
margin: 0 0 1em 1em;
width: 350px;
font-size: 90%;
background-color: rgb(var(--xp-window-bg));
border: 2px solid rgb(var(--xp-window-border));
padding: 0;
overflow: auto;
z-index: 1;
box-shadow: var(--window-shadow);
border-radius: 0;
}
@media all and (max-width: 511px) {
.notaninfobox {
float: none;
margin-left: 0;
width: auto;
}
}
.infobox tr:not(:first-child) td {
border-bottom: 1px solid #ababab;
}
@media all and (max-width: 337px) {
.notaninfobox {
margin-left: -16px;
margin-right: -16px;
border-left: none;
border-right: none;
}
}
.notaninfobox > .infobox-title,
.infobox th {
position: relative;
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
color: white;
font-weight: bold;
text-align: center;
font-size: 120%;
padding: 5px;
text-shadow: var(--text-shadow);
border-bottom: 1px solid rgb(var(--xp-window-border));
}
.notaninfobox > .infobox-title::after,
.infobox th::after {
content: "×";
position: absolute;
top: 2px;
right: 5px;
width: 16px;
height: 16px;
background-color: #ff6347;
border: 1px solid rgb(var(--xp-window-border));
text-align: center;
line-height: 16px;
font-size: 12px;
color: white;
cursor: pointer;
z-index: 1;
}
.infobox-imagearea {
text-align: center;
padding: 8px;
background-color: white;
}
.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;
background-color: white;
}
.infobox .plainlinks a {
color: rgb(var(--link-color)) !important;
text-decoration: underline;
}
.infobox .plainlinks a:visited {
color: rgb(var(--visited-link-color)) !important;
}
.notaninfobox .infobox-rows .infobox-row {
display: contents;
}
.notaninfobox .infobox-row .infobox-row-label,
.notaninfobox .infobox-row .infobox-row-field {
padding: 4px 8px;
border: 1px solid #ababab;
}
.notaninfobox .infobox-row .infobox-row-label {
font-weight: bold;
display: flex;
align-items: center;
background-color: #f0f0f0;
}
.notaninfobox .infobox-rows .infobox-row:nth-child(2n) .infobox-row-label,
.notaninfobox .infobox-rows .infobox-row:nth-child(2n) .infobox-row-field {
background-color: #f9f9f9;
}
/* Community Updates - Windows XP风格 */
.community-updates {
background: rgb(var(--xp-window-bg));
padding: 15px;
border: 2px solid rgb(var(--xp-window-border));
margin-top: 20px;
box-shadow: var(--window-shadow);
position: relative;
border-radius: 0;
}
.community-updates::before {
content: "Community Updates";
position: absolute;
top: 0;
left: 0;
right: 0;
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
color: white;
padding: 5px 10px;
font-weight: bold;
text-shadow: var(--text-shadow);
border-bottom: 1px solid rgb(var(--xp-window-border));
}
.community-updates ul {
margin-top: 30px;
}
.community-updates ul li {
list-style: none;
padding: 10px;
background: white;
margin: 5px 0;
border: 1px solid #ababab;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.community-updates ul li a {
color: rgb(var(--link-color));
text-decoration: none;
font-weight: bold;
}
/* 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%;
border-bottom: 1px solid #ababab;
}
.tabber-container-infobox ul.tabbernav li a:hover {
color: rgb(var(--hover-link-color));
}
.tabber-container-infobox ul.tabbernav > li {
margin-bottom: 5px;
padding: 0;
}
.announcement-content span {
display: inline-block;
white-space: nowrap;
animation: marquee 15s linear infinite;
}
@keyframes marquee {
0% { transform: translate(100%, 0); }
100% { transform: translate(-100%, 0); }
}
/* 主页头部样式 - Windows XP风格 */
.mw-mainpage-header {
background-color: rgb(var(--xp-window-bg));
border: 2px solid rgb(var(--xp-window-border));
box-shadow: var(--window-shadow);
color: rgb(var(--xp-text));
font-size: 1.5em;
padding: 30px 20px 20px;
text-align: center;
position: relative;
border-radius: 0;
}
.mw-mainpage-header::before {
content: "Welcome";
position: absolute;
top: 0;
left: 0;
right: 0;
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
color: white;
padding: 5px 10px;
font-weight: bold;
text-shadow: var(--text-shadow);
border-bottom: 1px solid rgb(var(--xp-window-border));
text-align: left;
}
.mw-mainpage-header h1 {
font-size: 2.5em;
margin-bottom: 10px;
background: none;
color: rgb(var(--xp-text));
text-shadow: none;
}
.mw-mainpage-header p {
font-size: 1.2em;
margin: 5px 0;
}
.tabber-container-infobox ul.tabbernav > li > a {
color: rgb(var(--link-color));
padding: 5px 10px;
display: block;
background: linear-gradient(to bottom, #f6f6f6, #e0e0e0);
border: 1px solid #ababab;
border-bottom: none;
border-radius: 3px 3px 0 0;
}
/* To prevent the tabs from jumping around when they become active or inactive */
.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 - Windows XP风格 */
.modulebox {
border: 2px solid rgb(var(--xp-window-border));
padding: 30px 10px 10px;
margin: 10px 0;
background-color: rgb(var(--xp-window-bg));
position: relative;
box-shadow: var(--window-shadow);
border-radius: 0;
}
.modulebox::before {
content: "Module";
position: absolute;
top: 0;
left: 0;
right: 0;
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
color: white;
padding: 5px 10px;
font-weight: bold;
text-shadow: var(--text-shadow);
border-bottom: 1px solid rgb(var(--xp-window-border));
text-align: left;
}
.tabber-container-infobox ul.tabbernav > li.tabberactive > a {
font-weight: bold;
color: rgb(var(--hover-link-color));
background: linear-gradient(to bottom, #ffffff, #f6f6f6);
border-bottom: 1px solid #ffffff;
position: relative;
z-index: 1;
}
.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;
padding: 5px;
background-color: #f0f0f0;
border-top: 1px solid #ababab;
}
/* 导航框（查论编）- Windows XP风格 */
table.navbox {
border: 2px solid rgb(var(--xp-window-border));
clear: both;
margin: 1em auto;
padding: 0;
text-align: center;
width: 100%;
background-color: rgb(var(--xp-window-bg));
box-shadow: var(--window-shadow);
border-collapse: separate;
border-spacing: 0;
border-radius: 0;
}
table.navbox + table.navbox {
margin-top: 5px;
}
.navbox-title,
.navbox-abovebelow,
table.navbox th {
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
color: white;
padding: 5px 10px;
text-align: center;
font-weight: bold;
text-shadow: var(--text-shadow);
border-bottom: 1px solid rgb(var(--xp-window-border));
position: relative;
}
.navbox-title::after,
table.navbox th::after {
content: "×";
position: absolute;
top: 2px;
right: 5px;
width: 16px;
height: 16px;
background-color: #ff6347;
border: 1px solid rgb(var(--xp-window-border));
text-align: center;
line-height: 16px;
font-size: 12px;
color: white;
cursor: pointer;
z-index: 1;
}
.navbox-group {
background-color: #f0f0f0;
border: 1px solid #ababab;
color: black;
font-weight: bold;
padding: 5px;
text-align: right;
white-space: nowrap;
}
.navbox-list {
background-color: white;
border: 1px solid #ababab;
padding: 5px;
text-align: left;
}
.navbox,
.navbox-subgroup {
background-color: rgb(var(--xp-window-bg));
}
.navbox-subgroup .navbox-title {
background-color: #c0d8f0;
color: black;
text-shadow: none;
}
.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
background-color: #e6f0f9;
}
.navbox-even {
background-color: #f9f9f9;
}
.navbox-odd {
background-color: white;
}
.collapseButton {
float: right;
font-weight: 400;
text-align: right;
width: auto;
}
.navbox .collapseButton {
width: 6em;
}
.navbar {
position: relative;
min-height: 23px !important;
margin-bottom: 0px !important;
border: 1px solid transparent;
}
.navbox-title .Wikiplus-Edit-EveryWhereBtn {
display: none;
}
@media only screen and (max-width:759px) {
.infotable {
width: 90%;
float: none;
margin: 0 auto;
}
.navbox-title>div {
display: none;
}
.navbox-group,
.navbox-group >div {
padding-left: 0 !important;
padding-right: 0 !important;
text-align: center;
}
}
/* 主页Windows XP风格布局 */
.main-page-banner {
position: relative;
display: grid;
grid-template-areas:
"welcome welcome welcome"
"discord faq join";
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 3%;
margin-bottom: 2rem;
width: 100%;
box-sizing: border-box;
border: 2px solid rgb(var(--xp-window-border));
box-shadow: var(--window-shadow);
background-color: rgb(var(--xp-window-bg));
z-index: 1;
border-radius: 0;
}
/* 欢迎文本区域 - Windows XP样式 */
.main-page-banner .welcome-text {
grid-area: welcome;
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
color: white;
padding: 30px 20px 20px;
margin: 0;
width: 100%;
position: relative;
overflow: hidden;
border-bottom: 1px solid rgb(var(--xp-window-border));
border-radius: 0;
z-index: 2;
text-shadow: var(--text-shadow);
}
/* 添加标题栏 */
.main-page-banner .welcome-text::before {
content: "Welcome";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 25px;
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
color: white;
padding: 5px 10px;
font-weight: bold;
font-size: 14px;
text-shadow: var(--text-shadow);
text-align: left;
line-height: 25px;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
z-index: 3;
}
/* 添加XP窗口控制按钮 */
.main-page-banner .welcome-text::after {
content: "×";
position: absolute;
top: 7px;
right: 5px;
width: 16px;
height: 16px;
background-color: #ff6347;
border: 1px solid rgb(var(--xp-window-border));
text-align: center;
line-height: 16px;
font-size: 12px;
color: white;
cursor: pointer;
z-index: 4;
}
/* 添加最小化、最大化按钮 */
.main-page-banner .welcome-text .min-button,
.main-page-banner .welcome-text .max-button {
position: absolute;
top: 7px;
width: 16px;
height: 16px;
border: 1px solid rgb(var(--xp-window-border));
text-align: center;
line-height: 16px;
font-size: 12px;
color: black;
background-color: rgb(var(--light-gray-monochrome));
cursor: pointer;
z-index: 4;
}
.main-page-banner .welcome-text .min-button {
right: 45px;
content: "_";
line-height: 13px;
}
.main-page-banner .welcome-text .max-button {
right: 25px;
content: "□";
}
.main-page-banner .welcome-text p {
position: relative;
z-index: 2;
margin: 0;
font-size: 1.1em;
}
/* 导航按钮 - Windows XP风格 */
.main-page-banner .navigation-links {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 3%;
grid-area: discord / discord / join / join;
width: 100%;
padding: 10px;
background-color: rgb(var(--xp-window-bg));
}
.main-page-banner .nav-button {
background: linear-gradient(to bottom, #f6f6f6, #e0e0e0);
border: 1px solid #ababab;
border-radius: 3px;
margin: 0 0 10px 0;
transition: all 0.3s ease;
height: min-content;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
}
.main-page-banner .nav-button:hover {
background: linear-gradient(to bottom, #f9f9f9, #e9e9e9);
transform: translateY(-3px);
box-shadow: 2px 3px 4px rgba(0, 0, 0, 0.3);
}
.main-page-banner .nav-button:active {
background: linear-gradient(to bottom, #e0e0e0, #f0f0f0);
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2);
transform: translateY(0);
}
.main-page-banner .nav-button a {
display: block;
padding: 8px 0;
width: 100%;
text-align: center;
color: black;
font-size: 1.1rem;
font-weight: bold;
text-decoration: none !important;
position: relative;
z-index: 1;
}
/* 响应式布局 */
@media (max-width: 767px) {
.main-page-banner {
grid-template-areas:
"welcome"
"navigation";
grid-template-columns: 1fr;
}
.main-page-banner .welcome-text {
width: 100%;
margin-bottom: 0;
box-sizing: border-box;
}
.main-page-banner .navigation-links {
grid-area: navigation;
display: flex;
flex-wrap: wrap;
width: 100%;
}
.main-page-banner .nav-button {
flex: 1;
min-width: 30%;
margin: 0 5px 10px;
}
}
/* 公告容器 - Windows XP风格 */
.announcement-container {
background-color: rgb(var(--xp-window-bg));
border: 2px solid rgb(var(--xp-window-border));
box-shadow: var(--window-shadow);
margin-bottom: 2rem;
display: flex;
flex-wrap: wrap;
align-content: space-between;
position: relative;
border-radius: 0;
}
.announcement-container .section-title {
width: 100%;
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
color: white;
padding: 5px 10px;
font-family: var(--title-font);
font-size: 1.3rem;
text-align: left;
border-left: none;
border-bottom: 1px solid rgb(var(--xp-window-border));
text-shadow: var(--text-shadow);
position: relative;
}
.announcement-container .section-title::after {
content: "×";
position: absolute;
top: 7px;
right: 5px;
width: 16px;
height: 16px;
background-color: #ff6347;
border: 1px solid rgb(var(--xp-window-border));
text-align: center;
line-height: 16px;
font-size: 12px;
color: white;
cursor: pointer;
z-index: 1;
}
.announcement-container .announcement-content {
background-color: white;
color: black;
padding: 10px;
width: 100%;
}
.announcement-container .more-content {
width: 100%;
border-top: 1px solid #ababab;
padding: 5px;
background-color: #f0f0f0;
text-align: right;
}
/* 最近页面容器 - Windows XP风格 */
.recent-pages-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
margin-bottom: 1rem;
}
.recent-pages-container .page-section {
flex-basis: 48%;
background-color: rgb(var(--xp-window-bg));
border: 2px solid rgb(var(--xp-window-border));
box-shadow: var(--window-shadow);
margin-bottom: 1rem;
display: grid;
grid-template-areas: "title" "page" "more";
grid-template-rows: auto 1fr auto;
position: relative;
border-radius: 0;
}
.recent-pages-container .section-title {
grid-area: title;
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
color: white;
padding: 5px 30px 5px 10px;
font-weight: bold;
text-shadow: var(--text-shadow);
border-bottom: 1px solid rgb(var(--xp-window-border));
position: relative;
text-align: left;
height: 25px;
line-height: 25px;
border-left: none;
}
.recent-pages-container .section-title::after {
content: "×";
position: absolute;
top: 5px;
right: 5px;
width: 16px;
height: 16px;
background-color: #ff6347;
border: 1px solid rgb(var(--xp-window-border));
text-align: center;
line-height: 16px;
font-size: 12px;
color: white;
cursor: pointer;
z-index: 1;
}
.recent-pages-container .page-list {
grid-area: page;
background-color: white;
padding: 10px;
max-height: 200px;
overflow-y: auto;
border-bottom: 1px solid #ababab;
}
.recent-pages-container .page-list a {
display: block;
padding: 3px 0;
border-bottom: 1px solid #e0e0e0;
color: rgb(var(--link-color));
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.recent-pages-container .page-list a:last-child {
border-bottom: none;
}
.recent-pages-container .see-more {
grid-area: more;
background-color: #f0f0f0;
padding: 5px 10px;
text-align: right;
}
.recent-pages-container .see-more a {
color: rgb(var(--link-color));
}
/* 特色内容容器 - Windows XP风格 */
.featured-content-container .feature-content .featured-description {
font-style: italic;
color: #444;
}
.featured-content-container .see-more {
grid-area: more;
background-color: #f0f0f0;
padding: 5px 10px;
text-align: right;
}
.featured-content-container .see-more a {
color: rgb(var(--link-color));
}
/* 工具和资源容器 - Windows XP风格 */
.tools-and-resources {
margin-bottom: 2rem;
}
.tools-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 1rem;
}
.tools-container .tool-item {
background-color: rgb(var(--xp-window-bg));
border: 2px solid rgb(var(--xp-window-border));
box-shadow: var(--window-shadow);
padding: 30px 10px 10px;
display: grid;
grid-template-areas:
"icon content"
"title content";
grid-template-columns: max-content 1fr;
grid-template-rows: auto auto;
grid-gap: 0.5rem 1rem;
position: relative;
border-radius: 0;
}
.tools-container .tool-item::before {
content: "Tool";
position: absolute;
top: 0;
left: 0;
right: 0;
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
color: white;
padding: 5px 10px;
font-weight: bold;
text-shadow: var(--text-shadow);
border-bottom: 1px solid rgb(var(--xp-window-border));
text-align: left;
height: 15px;
line-height: 15px;
font-size: 12px;
}
.tools-container .tool-item::after {
content: "×";
position: absolute;
top: 2px;
right: 5px;
width: 16px;
height: 16px;
background-color: #ff6347;
border: 1px solid rgb(var(--xp-window-border));
text-align: center;
line-height: 16px;
font-size: 12px;
color: white;
cursor: pointer;
z-index: 1;
}
.tools-container .tool-item .tool-icon {
grid-area: icon;
justify-self: center;
align-self: center;
background-color: white;
border: 1px solid #ababab;
padding: 5px;
}
.tools-container .tool-item .tool-title {
grid-area: title;
text-align: center;
}
.tools-container .tool-item .tool-title a {
color: rgb(var(--link-color));
font-weight: bold;
}
.tools-container .tool-item .tool-description {
grid-area: content;
background-color: white;
border: 1px solid #ababab;
padding: 8px;
}
/* 新闻容器 - Windows XP风格 */
.news-container {
background-color: rgb(var(--xp-window-bg));
border: 2px solid rgb(var(--xp-window-border));
box-shadow: var(--window-shadow);
margin-bottom: 2rem;
position: relative;
border-radius: 0;
}
.news-container .section-title {
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
color: white;
padding: 5px 30px 5px 10px;
font-weight: bold;
text-shadow: var(--text-shadow);
border-bottom: 1px solid rgb(var(--xp-window-border));
position: relative;
text-align: left;
width: 100%;
border-left: none;
}
.news-container .section-title::after {
content: "×";
position: absolute;
top: 5px;
right: 5px;
width: 16px;
height: 16px;
background-color: #ff6347;
border: 1px solid rgb(var(--xp-window-border));
text-align: center;
line-height: 16px;
font-size: 12px;
color: white;
cursor: pointer;
z-index: 1;
}
.news-container .news-content {
background-color: white;
padding: 10px;
width: 100%;
border-bottom: 1px solid #ababab;
}
.news-container .news-content .news-item {
border-bottom: 1px solid #e0e0e0;
padding: 5px 0;
}
.news-container .news-content .news-item:last-child {
border-bottom: none;
}
.news-container .news-content .news-title {
font-weight: bold;
margin-bottom: 3px;
color: rgb(var(--xp-blue-dark));
}
.news-container .news-content .news-date {
font-size: 0.8rem;
color: #666;
margin-bottom: 3px;
}
.news-container .news-archive {
background-color: #f0f0f0;
padding: 5px 10px;
text-align: right;
width: 100%;
}
.news-container .news-archive a {
color: rgb(var(--link-color));
}
/* 轮播图容器 - Windows XP风格 */
.mw-carousel {
position: relative;
width: 100%;
max-width: 960px;
margin: 20px auto;
overflow: hidden;
border: 2px solid rgb(var(--xp-window-border));
box-shadow: var(--window-shadow);
aspect-ratio: 16 / 9;
background-color: rgb(var(--xp-window-bg));
border-radius: 0;
}
.mw-carousel::before {
content: "Slideshow";
position: absolute;
top: 0;
left: 0;
right: 0;
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
color: white;
padding: 5px 10px;
font-weight: bold;
text-shadow: var(--text-shadow);
border-bottom: 1px solid rgb(var(--xp-window-border));
text-align: left;
height: 15px;
line-height: 15px;
font-size: 12px;
z-index: 10;
}
.mw-carousel::after {
content: "×";
position: absolute;
top: 2px;
right: 5px;
width: 16px;
height: 16px;
background-color: #ff6347;
border: 1px solid rgb(var(--xp-window-border));
text-align: center;
line-height: 16px;
font-size: 12px;
color: white;
cursor: pointer;
z-index: 10;
}
.mw-carousel .carousel-image {
width: 100%;
height: 100%;
position: relative;
margin-top: 25px;
}
.mw-carousel .carousel-image img {
width: 100%;
height: calc(100% - 25px);
object-fit: cover;
display: block;
border: 1px solid #ababab;
}
.mw-carousel .carousel-caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
color: white;
padding: 20px 15px 12px;
text-align: left;
transition: all 0.4s ease;
z-index: 2;
}
.mw-carousel:hover .carousel-caption {
top: 25px;
left: 0;
bottom: 0;
width: 100%;
height: calc(100% - 25px);
background: rgba(0, 0, 0, 0.6);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 20px;
backdrop-filter: blur(3px);
}
.mw-carousel .carousel-caption h3 {
margin: 0 0 5px;
font-size: 1.6em;
font-weight: 600;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
transition: transform 0.4s ease;
background: none;
padding: 0;
border: none;
}
.mw-carousel .carousel-caption p {
margin: 0;
font-size: 1.1em;
line-height: 1.4;
max-width: 80%;
transition: all 0.4s ease 0.1s;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.mw-carousel .carousel-navigation {
position: absolute;
top: 50%;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
z-index: 3;
padding: 0 15px;
opacity: 0;
transition: opacity 0.3s ease;
}
.mw-carousel:hover .carousel-navigation {
opacity: 1;
}
.mw-carousel .carousel-prev,
.mw-carousel .carousel-next {
background: linear-gradient(to bottom, #f6f6f6, #e0e0e0);
border: 1px solid #ababab;
width: 32px;
height: 32px;
font-size: 18px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
.mw-carousel .carousel-prev:hover,
.mw-carousel .carousel-next:hover {
background: linear-gradient(to bottom, #f9f9f9, #e9e9e9);
}
.mw-carousel .carousel-indicators {
position: absolute;
bottom: 15px;
right: 20px;
left: auto;
display: flex;
gap: 5px;
z-index: 4;
padding: 5px 10px;
background-color: rgba(0, 0, 0, 0.3);
}
.mw-carousel .carousel-indicators .indicator {
width: 10px;
height: 10px;
background-color: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: all 0.3s;
}
.mw-carousel .carousel-indicators .indicator.active {
background-color: #ffffff;
transform: scale(1.2);
box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}
/* 图片全局样式 */
img {
max-width: 100%;
height: auto;
display: block;
border: 1px solid #ababab;
}
/* 添加图片过渡效果 */
.mw-carousel .carousel-image img {
transition: transform 0.5s ease;
}
.mw-carousel:hover .carousel-image img {
transform: scale(1.03);
}
/* 目录框样式 - Windows XP风格 */
#toc, .toc {
background-color: rgb(var(--xp-window-bg));
border: 2px solid rgb(var(--xp-window-border));
box-shadow: var(--window-shadow);
padding: 30px 10px 10px;
margin: 1em 0;
position: relative;
border-radius: 0;
}
#toc::before, .toc::before {
content: "Contents";
position: absolute;
top: 0;
left: 0;
right: 0;
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
color: white;
padding: 5px 10px;
font-weight: bold;
text-shadow: var(--text-shadow);
border-bottom: 1px solid rgb(var(--xp-window-border));
text-align: left;
height: 15px;
line-height: 15px;
font-size: 12px;
}
#toc::after, .toc::after {
content: "×";
position: absolute;
top: 2px;
right: 5px;
width: 16px;
height: 16px;
background-color: #ff6347;
border: 1px solid rgb(var(--xp-window-border));
text-align: center;
line-height: 16px;
font-size: 12px;
color: white;
cursor: pointer;
z-index: 1;
}
.toc .toctitle, #toc .toctitle {
display: none;
}
.toc ul, #toc ul {
margin: 0;
padding: 0 0 0 1.5em;
}
.toc li, #toc li {
margin: 5px 0;
}
.toc a, #toc a {
color: rgb(var(--link-color));
text-decoration: none;
}
.toc a:hover, #toc a:hover {
color: rgb(var(--hover-link-color));
text-decoration: underline;
}
.tocnumber {
color: #666;
margin-right: 5px;
}
/* 变色龙皮肤特定修复 */
.chameleon-toc {
background-color: rgb(var(--xp-window-bg));
border: 2px solid rgb(var(--xp-window-border));
box-shadow: var(--window-shadow);
padding: 30px 10px 10px;
position: relative;
border-radius: 0;
}
.chameleon-toc::before {
content: "Contents";
position: absolute;
top: 0;
left: 0;
right: 0;
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
color: white;
padding: 5px 10px;
font-weight: bold;
text-shadow: var(--text-shadow);
border-bottom: 1px solid rgb(var(--xp-window-border));
text-align: left;
height: 15px;
line-height: 15px;
font-size: 12px;
}
.chameleon-toc::after {
content: "×";
position: absolute;
top: 2px;
right: 5px;
width: 16px;
height: 16px;
background-color: #ff6347;
border: 1px solid rgb(var(--xp-window-border));
text-align: center;
line-height: 16px;
font-size: 12px;
color: white;
cursor: pointer;
z-index: 1;
}
.chameleon-toc .toctitle {
display: none;
}
/* Windows XP启动栏和任务栏 */
body::after {
content: "开始";
position: fixed;
left: 0;
bottom: 30px;
width: 100px;
height: 30px;
background: linear-gradient(to bottom, #4cae4c, #398439);
color: white;
text-align: center;
line-height: 30px;
font-weight: bold;
border-radius: 0 5px 5px 0;
z-index: 9999;
cursor: pointer;
border: 1px solid #366;
border-left: none;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
padding-left: 30px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M0 0h11v11H0V0zm13 0h11v11H13V0zM0 13h11v11H0V13zm13 0h11v11H13V13z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 5px center;
background-size: 20px 20px;
}
body::before {
content: "";
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 30px;
background: linear-gradient(to bottom, #4581c8, #2f5b9d);
border-top: 1px solid #223f6f;
z-index: 9998;
}
/* 响应式调整 */
@media (max-width: 767px) {
.tools-container {
grid-template-columns: 1fr;
}
.recent-pages-container .page-section,
.featured-content-container .feature-item {
flex-basis: 100%;
margin-bottom: 15px;
}
body::after {
width: 80px;
font-size: 12px;
}
}
/* Windows XP蓝屏风格 */
.bluescreen {
background-color: #0000aa;
color: #ffffff;
font-family: "Courier New", monospace;
padding: 20px;
margin: 10px 0;
border: 2px solid #000055;
box-shadow: var(--window-shadow);
position: relative;
}
.bluescreen h2 {
color: #ffffff;
background: none;
border: none;
margin-top: 10px;
margin-bottom: 20px;
font-size: 1.5em;
text-shadow: none;
}
.bluescreen p {
margin: 10px 0;
line-height: 1.5;
}
.bluescreen code {
background-color: #0000aa;
border: none;
color: #ffffff;
display: block;
margin: 10px 0;
font-family: "Courier New", monospace;
}
/* 标题栏文本 */
.titlebox {
color: white;
position: relative;
top: -16px;
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
padding: 5px 20px;
line-height: 10px;
font-weight: bold;
text-shadow: var(--text-shadow);
border: 1px solid rgb(var(--xp-window-border));
display: inline-block;
}
/* Windows XP Logo风格块 */
.logoblock {
padding: 30px 10px 10px;
color: black;
box-shadow: var(--window-shadow);
margin: 10px 0;
display: block;
position: relative;
background-color: rgb(var(--xp-window-bg));
border: 2px solid rgb(var(--xp-window-border));
border-radius: 0;
}
.logoblock::before {
content: "Windows";
position: absolute;
top: 0;
left: 0;
right: 0;
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
color: white;
padding: 5px 10px;
font-weight: bold;
text-shadow: var(--text-shadow);
border-bottom: 1px solid rgb(var(--xp-window-border));
text-align: left;
height: 15px;
line-height: 15px;
font-size: 12px;
}
.logoblock::after {
content: "";
float: center;
border: solid 2px #0000;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230078d7' d='M0 0h11v11H0V0zm13 0h11v11H13V0zM0 13h11v11H0V13zm13 0h11v11H13V13z'/%3E%3C/svg%3E") center/70% no-repeat;
opacity: 0.7;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: 1;
}
/* Windows XP错误对话框 */
.error-dialog {
background-color: rgb(var(--xp-window-bg));
border: 2px solid rgb(var(--xp-window-border));
padding: 30px 10px 10px;
margin: 10px 0;
position: relative;
box-shadow: var(--window-shadow);
border-radius: 0;
}
.error-dialog::before {
content: "Error";
position: absolute;
top: 0;
left: 0;
right: 0;
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
color: white;
padding: 5px 10px;
font-weight: bold;
text-shadow: var(--text-shadow);
border-bottom: 1px solid rgb(var(--xp-window-border));
text-align: left;
height: 15px;
line-height: 15px;
font-size: 12px;
}
.error-dialog::after {
content: "×";
position: absolute;
top: 2px;
right: 5px;
width: 16px;
height: 16px;
background-color: #ff6347;
border: 1px solid rgb(var(--xp-window-border));
text-align: center;
line-height: 16px;
font-size: 12px;
color: white;
cursor: pointer;
z-index: 1;
}
.error-dialog .icon {
float: left;
margin-right: 10px;
width: 32px;
height: 32px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23ff0000'/%3E%3Cpath d='M12 6v8M12 16v2' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
}
.error-dialog .message {
margin-left: 50px;
font-weight: bold;
}
.error-dialog .buttons {
text-align: right;
margin-top: 15px;
}
.error-dialog .buttons button {
background: linear-gradient(to bottom, #f6f6f6, #e0e0e0);
border: 1px solid #ababab;
padding: 3px 10px;
margin-left: 5px;
cursor: pointer;
}
.error-dialog .buttons button:hover {
background: linear-gradient(to bottom, #f9f9f9, #e9e9e9);
}
/* JS添加功能 */
.JS-added-button {
display: none; /* 由JS控制显示 */
position: fixed;
right: 10px;
bottom: 40px;
background: linear-gradient(to bottom, #f6f6f6, #e0e0e0);
border: 1px solid #ababab;
padding: 5px 10px;
cursor: pointer;
z-index: 9999;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
.JS-added-button:hover {
background: linear-gradient(to bottom, #f9f9f9, #e9e9e9);
}
/* 创建一个窗口最小化图标，显示在任务栏中 */
.minimized-window {
position: fixed;
left: 110px;
bottom: 0;
height: 30px;
padding: 0 10px;
background: linear-gradient(to bottom, #67a9e0, #3a84c5);
color: white;
line-height: 30px;
font-size: 12px;
z-index: 9999;
cursor: pointer;
border-top: 1px solid #81bdeb;
border-left: 1px solid #81bdeb;
border-right: 1px solid #25619a;
max-width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.minimized-window:hover {
background: linear-gradient(to bottom, #81bdeb, #67a9e0);
}
/* 添加系统时钟到任务栏 */
.taskbar-clock {
position: fixed;
right: 10px;
bottom: 0;
height: 30px;
padding: 0 10px;
background: transparent;
color: white;
line-height: 30px;
font-size: 12px;
z-index: 9999;
}
/* CommonJS功能 */
/* 这些样式将由JavaScript功能使用 */d-content-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
}
.featured-content-container .feature-item {
flex-basis: 48%;
background-color: rgb(var(--xp-window-bg));
border: 2px solid rgb(var(--xp-window-border));
box-shadow: var(--window-shadow);
margin-bottom: 1rem;
display: grid;
grid-template-areas: "title" "content" "more";
grid-template-rows: auto 1fr auto;
position: relative;
border-radius: 0;
}
.featured-content-container .section-title {
grid-area: title;
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
color: white;
padding: 5px 30px 5px 10px;
font-weight: bold;
text-shadow: var(--text-shadow);
border-bottom: 1px solid rgb(var(--xp-window-border));
position: relative;
text-align: left;
height: 25px;
line-height: 25px;
border-left: none;
}
.featured-content-container .section-title::after {
content: "×";
position: absolute;
top: 5px;
right: 5px;
width: 16px;
height: 16px;
background-color: #ff6347;
border: 1px solid rgb(var(--xp-window-border));
text-align: center;
line-height: 16px;
font-size: 12px;
color: white;
cursor: pointer;
z-index: 1;
}
.featured-content-container .feature-content {
grid-area: content;
background-color: white;
padding: 10px;
border-bottom: 1px solid #ababab;
}
.featured-content-container .feature-content .featured-title {
font-size: 1.2rem;
font-weight: bold;
margin-bottom: 5px;
color: rgb(var(--xp-blue-dark));
}
.featured-content-container .feature-content .featured-author {
font-size: 0.9rem;
color: #666;
margin-bottom: 5px;
}
.featured-content-container .feature-content .featured-description {
font-style: italic;
color: #444;
}
.featured-content-container .see-more {
grid-area: more;
background-color: #f0f0f0;
padding: 5px 10px;
text-align: right;
}
.featured-content-container .see-more a {
color: rgb(var(--link-color));
}
/* 工具和资源容器 - Windows XP风格 */
.tools-and-resources {
margin-bottom: 2rem;
}
.tools-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 1rem;
}
.tools-container .tool-item {
background-color: rgb(var(--xp-window-bg));
border: 2px solid rgb(var(--xp-window-border));
box-shadow: var(--window-shadow);
padding: 30px 10px 10px;
display: grid;
grid-template-areas:
"icon content"
"title content";
grid-template-columns: max-content 1fr;
grid-template-rows: auto auto;
grid-gap: 0.5rem 1rem;
position: relative;
border-radius: 0;
}
.tools-container .tool-item::before {
content: "Tool";
position: absolute;
top: 0;
left: 0;
right: 0;
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
color: white;
padding: 5px 10px;
font-weight: bold;
text-shadow: var(--text-shadow);
border-bottom: 1px solid rgb(var(--xp-window-border));
text-align: left;
height: 15px;
line-height: 15px;
font-size: 12px;
}
.tools-container .tool-item::after {
content: "×";
position: absolute;
top: 2px;
right: 5px;
width: 16px;
height: 16px;
background-color: #ff6347;
border: 1px solid rgb(var(--xp-window-border));
text-align: center;
line-height: 16px;
font-size: 12px;
color: white;
cursor: pointer;
z-index: 1;
}
.tools-container .tool-item .tool-icon {
grid-area: icon;
justify-self: center;
align-self: center;
background-color: white;
border: 1px solid #ababab;
padding: 5px;
}
.tools-container .tool-item .tool-title {
grid-area: title;
text-align: center;
}
.tools-container .tool-item .tool-title a {
color: rgb(var(--link-color));
font-weight: bold;
}
.tools-container .tool-item .tool-description {
grid-area: content;
background-color: white;
border: 1px solid #ababab;
padding: 8px;
}
/* 新闻容器 - Windows XP风格 */
.news-container {
background-color: rgb(var(--xp-window-bg));
border: 2px solid rgb(var(--xp-window-border));
box-shadow: var(--window-shadow);
margin-bottom: 2rem;
position: relative;
border-radius: 0;
}
.news-container .section-title {
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
color: white;
padding: 5px 30px 5px 10px;
font-weight: bold;
text-shadow: var(--text-shadow);
border-bottom: 1px solid rgb(var(--xp-window-border));
position: relative;
text-align: left;
width: 100%;
border-left: none;
}
.news-container .section-title::after {
content: "×";
position: absolute;
top: 5px;
right: 5px;
width: 16px;
height: 16px;
background-color: #ff6347;
border: 1px solid rgb(var(--xp-window-border));
text-align: center;
line-height: 16px;
font-size: 12px;
color: white;
cursor: pointer;
z-index: 1;
}
.news-container .news-content {
background-color: white;
padding: 10px;
width: 100%;
border-bottom: 1px solid #ababab;
}
.news-container .news-content .news-item {
border-bottom: 1px solid #e0e0e0;
padding: 5px 0;
}
.news-container .news-content .news-item:last-child {
border-bottom: none;
}
.news-container .news-content .news-title {
font-weight: bold;
margin-bottom: 3px;
color: rgb(var(--xp-blue-dark));
}
.news-container .news-content .news-date {
font-size: 0.8rem;
color: #666;
margin-bottom: 3px;
}
.news-container .news-archive {
background-color: #f0f0f0;
padding: 5px 10px;
text-align: right;
width: 100%;
}
.news-container .news-archive a {
color: rgb(var(--link-color));
}
/* 响应式调整 */
@media (max-width: 767px) {
.tools-container {
grid-template-columns: 1fr;
}
.recent-pages-container .page-section,
.featured-content-container .feature-item {
flex-basis: 100%;
margin-bottom: 15px;
}
body::after {
width: 80px;
font-size: 12px;
}
}
/* Windows XP蓝屏风格 */
.bluescreen {
background-color: #0000aa;
color: #ffffff;
font-family: "Courier New", monospace;
padding: 20px;
margin: 10px 0;
border: 2px solid #000055;
box-shadow: var(--window-shadow);
position: relative;
}
.bluescreen h2 {
color: #ffffff;
background: none;
border: none;
margin-top: 10px;
margin-bottom: 20px;
font-size: 1.5em;
text-shadow: none;
}
.bluescreen p {
margin: 10px 0;
line-height: 1.5;
}
.bluescreen code {
background-color: #0000aa;
border: none;
color: #ffffff;
display: block;
margin: 10px 0;
font-family: "Courier New", monospace;
}
/* 标题栏文本 */
.titlebox {
color: white;
position: relative;
top: -16px;
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
padding: 5px 20px;
line-height: 10px;
font-weight: bold;
text-shadow: var(--text-shadow);
border: 1px solid rgb(var(--xp-window-border));
display: inline-block;
}
/* Windows XP Logo风格块 */
.logoblock {
padding: 30px 10px 10px;
color: black;
box-shadow: var(--window-shadow);
margin: 10px 0;
display: block;
position: relative;
background-color: rgb(var(--xp-window-bg));
border: 2px solid rgb(var(--xp-window-border));
border-radius: 0;
}
.logoblock::before {
content: "Windows";
position: absolute;
top: 0;
left: 0;
right: 0;
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
color: white;
padding: 5px 10px;
font-weight: bold;
text-shadow: var(--text-shadow);
border-bottom: 1px solid rgb(var(--xp-window-border));
text-align: left;
height: 15px;
line-height: 15px;
font-size: 12px;
}
.logoblock::after {
content: "";
float: center;
border: solid 2px #0000;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230078d7' d='M0 0h11v11H0V0zm13 0h11v11H13V0zM0 13h11v11H0V13zm13 0h11v11H13V13z'/%3E%3C/svg%3E") center/70% no-repeat;
opacity: 0.7;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: 1;
}
/* Windows XP错误对话框 */
.error-dialog {
background-color: rgb(var(--xp-window-bg));
border: 2px solid rgb(var(--xp-window-border));
padding: 30px 10px 10px;
margin: 10px 0;
position: relative;
box-shadow: var(--window-shadow);
border-radius: 0;
}
.error-dialog::before {
content: "Error";
position: absolute;
top: 0;
left: 0;
right: 0;
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
color: white;
padding: 5px 10px;
font-weight: bold;
text-shadow: var(--text-shadow);
border-bottom: 1px solid rgb(var(--xp-window-border));
text-align: left;
height: 15px;
line-height: 15px;
font-size: 12px;
}
.error-dialog::after {
content: "×";
position: absolute;
top: 2px;
right: 5px;
width: 16px;
height: 16px;
background-color: #ff6347;
border: 1px solid rgb(var(--xp-window-border));
text-align: center;
line-height: 16px;
font-size: 12px;
color: white;
cursor: pointer;
z-index: 1;
}
.error-dialog .icon {
float: left;
margin-right: 10px;
width: 32px;
height: 32px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23ff0000'/%3E%3Cpath d='M12 6v8M12 16v2' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
}
.error-dialog .message {
margin-left: 50px;
font-weight: bold;
}
.error-dialog .buttons {
text-align: right;
margin-top: 15px;
}
.error-dialog .buttons button {
background: linear-gradient(to bottom, #f6f6f6, #e0e0e0);
border: 1px solid #ababab;
padding: 3px 10px;
margin-left: 5px;
cursor: pointer;
}
.error-dialog .buttons button:hover {
background: linear-gradient(to bottom, #f9f9f9, #e9e9e9);
}
/* JS添加功能 */
.JS-added-button {
display: none; /* 由JS控制显示 */
position: fixed;
right: 10px;
bottom: 40px;
background: linear-gradient(to bottom, #f6f6f6, #e0e0e0);
border: 1px solid #ababab;
padding: 5px 10px;
cursor: pointer;
z-index: 9999;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
.JS-added-button:hover {
background: linear-gradient(to bottom, #f9f9f9, #e9e9e9);
}
/* 创建一个窗口最小化图标，显示在任务栏中 */
.minimized-window {
position: fixed;
left: 110px;
bottom: 0;
height: 30px;
padding: 0 10px;
background: linear-gradient(to bottom, #67a9e0, #3a84c5);
color: white;
line-height: 30px;
font-size: 12px;
z-index: 9999;
cursor: pointer;
border-top: 1px solid #81bdeb;
border-left: 1px solid #81bdeb;
border-right: 1px solid #25619a;
max-width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.minimized-window:hover {
background: linear-gradient(to bottom, #81bdeb, #67a9e0);
}
/* 添加系统时钟到任务栏 */
.taskbar-clock {
position: fixed;
right: 10px;
bottom: 0;
height: 30px;
padding: 0 10px;
background: transparent;
color: white;
line-height: 30px;
font-size: 12px;
z-index: 9999;
}
/* 导航框（查论编）- Windows XP风格 */
table.navbox {
border: 2px solid rgb(var(--xp-window-border));
clear: both;
margin: 1em auto;
padding: 0;
text-align: center;
width: 100%;
background-color: rgb(var(--xp-window-bg));
box-shadow: var(--window-shadow);
border-collapse: separate;
border-spacing: 0;
border-radius: 0;
}
.navbox-title,
.navbox-abovebelow,
table.navbox th {
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
color: white;
padding: 5px 10px;
text-align: center;
font-weight: bold;
text-shadow: var(--text-shadow);
border-bottom: 1px solid rgb(var(--xp-window-border));
position: relative;
}
.navbox-title::after,
table.navbox th::after {
content: "×";
position: absolute;
top: 2px;
right: 5px;
width: 16px;
height: 16px;
background-color: #ff6347;
border: 1px solid rgb(var(--xp-window-border));
text-align: center;
line-height: 16px;
font-size: 12px;
color: white;
cursor: pointer;
z-index: 1;
}
.navbox-group {
background-color: #f0f0f0;
border: 1px solid #ababab;
color: black;
font-weight: bold;
padding: 5px;
text-align: right;
white-space: nowrap;
}
.navbox-list {
background-color: white;
border: 1px solid #ababab;
padding: 5px;
text-align: left;
}
/* 修复开始按钮 - 实际元素而非伪元素 */
.start-button {
position: fixed;
left: 0;
bottom: 30px;
width: 100px;
height: 30px;
background: linear-gradient(to bottom, #4cae4c, #398439);
color: white;
text-align: center;
line-height: 30px;
font-weight: bold;
border-radius: 0 5px 5px 0;
z-index: 9999;
cursor: pointer;
border: 1px solid #366;
border-left: none;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
padding-left: 30px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M0 0h11v11H0V0zm13 0h11v11H13V0zM0 13h11v11H0V13zm13 0h11v11H13V13z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 5px center;
background-size: 20px 20px;
}
/* 修复开始菜单样式 */
#xp-start-menu {
position: fixed !important;
left: 0 !important;
bottom: 60px !important;
width: 250px !important;
background-color: white !important;
border: 2px solid #0054e3 !important;
box-shadow: 2px -2px 5px rgba(0, 0, 0, 0.3) !important;
z-index: 10000 !important;
display: none;
}
.start-menu-top {
height: 60px !important;
background: linear-gradient(to bottom, #235ddc, #225ada 50%, #214fbb) !important;
color: white !important;
padding: 10px !important;
font-weight: bold !important;
display: flex !important;
align-items: center !important;
}
.start-menu-items {
background-color: white !important;
padding: 5px 0 !important;
}
.start-menu-item {
padding: 5px 10px !important;
display: flex !important;
align-items: center !important;
cursor: pointer !important;
}
.start-menu-item:hover {
background-color: #e0ecff !important;
}
/* 修复下拉菜单 */
.dropdown-menu {
display: none;
position: absolute;
background-color: rgb(var(--xp-window-bg)) !important;
border: 1px solid rgb(var(--xp-window-border)) !important;
box-shadow: var(--window-shadow) !important;
border-radius: 0 !important;
z-index: 1000;
}
.dropdown.open .dropdown-menu,
.dropdown:hover .dropdown-menu,
.nav-item.dropdown:hover .dropdown-menu {
display: block !important;
}
/* 修复2: 下拉菜单位置 */
#p-personal .vector-menu-content,
.vector-user-menu .vector-menu-content,
.vector-menu-dropdown .vector-menu-content {
right: 0 !important;
left: auto !important;
}
/* 确保下拉菜单不会超出屏幕 */
.dropdown-menu {
right: 0 !important;
left: auto !important;
}
#p-personal {
position: relative !important;
}
/* 修复3: 时钟显示问题 */
/* 隐藏时钟图标 */
.oo-ui-icon-clock:before,
.mw-ui-icon-clock:before,
#pt-watchlist .mw-ui-icon:before {
display: none !important;
}
/* 重新设置时钟样式，确保不会重叠 */
.taskbar-clock {
position: fixed !important;
right: 10px !important;
bottom: 5px !important;
height: 20px !important;
padding: 0 8px !important;
background-color: rgba(0, 0, 0, 0.1) !important;
color: white !important;
font-weight: bold !important;
line-height: 20px !important;
font-size: 14px !important;
z-index: 10000 !important;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
border-radius: 3px !important;
font-family: "Segoe UI", Tahoma, sans-serif !important;
}
/* 修复4: 开始按钮背景 */
.start-button {
position: fixed !important;
left: 0 !important;
bottom: 30px !important;
width: 100px !important;
height: 30px !important;
background: linear-gradient(to bottom, #4cae4c, #398439) !important;
color: white !important;
text-align: center !important;
line-height: 30px !important;
font-weight: bold !important;
border-radius: 0 5px 5px 0 !important;
z-index: 9999 !important;
cursor: pointer !important;
border: 1px solid #366 !important;
border-left: none !important;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3) !important;
padding-left: 30px !important;
font-family: "Segoe UI", Tahoma, sans-serif !important;
}
.start-button::before {
content: "" !important;
position: absolute !important;
left: 5px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 20px !important;
height: 20px !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M0 0h11v11H0V0zm13 0h11v11H13V0zM0 13h11v11H0V13zm13 0h11v11H13V13z'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important;
}
/* 修复底部任务栏，使开始按钮正确显示 */
body::before {
content: "" !important;
position: fixed !important;
left: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 30px !important;
background: linear-gradient(to bottom, #3367d1, #2851a3) !important;
border-top: 1px solid #4a78d8 !important;
z-index: 9998 !important;
}
/* 修复3: 移除之前的开始按钮伪元素 */
body::after {
display: none !important;
}
/* 修复4: 时钟样式完善 */
.taskbar-clock {
position: fixed !important;
right: 10px !important;
bottom: 5px !important;
height: 20px !important;
line-height: 20px !important;
padding: 0 8px !important;
background-color: transparent !important;
color: white !important;
font-weight: normal !important;
font-size: 13px !important;
font-family: "Tahoma", "Microsoft Sans Serif", sans-serif !important;
z-index: 10000 !important;
text-shadow: none !important;
}
/* 完全隐藏时钟图标 */
.oo-ui-icon-clock,
.mw-ui-icon-clock,
#pt-watchlist .mw-ui-icon,
.mw-watchlink .mw-ui-icon::before {
display: none !important;
}
/* 修复5: 完善底部任务栏 */
.taskbar {
position: fixed !important;
left: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 30px !important;
background: linear-gradient(to bottom, #3367d1, #2851a3) !important;
border-top: 1px solid #4a78d8 !important;
z-index: 9998 !important;
display: flex !important;
align-items: center !important;
}
/* 任务栏内容区域 */
.taskbar-content {
flex: 1 !important;
display: flex !important;
align-items: center !important;
padding: 0 10px !important;
}
/* 快速启动栏 */
.quick-launch {
display: flex !important;
align-items: center !important;
padding: 0 5px !important;
border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
margin-right: 5px !important;
}
.quick-launch-icon {
width: 22px !important;
height: 22px !important;
margin: 0 2px !important;
cursor: pointer !important;
opacity: 0.8 !important;
transition: opacity 0.2s !important;
}
.quick-launch-icon:hover {
opacity: 1 !important;
}
/* 系统托盘区域 */
.system-tray {
display: flex !important;
align-items: center !important;
padding: 0 5px !important;
border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
margin-left: auto !important;
}
//* 修复系统托盘布局 */
.system-tray {
position: fixed !important;
right: 10px !important;
bottom: 0 !important;
height: 30px !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 0 5px !important;
z-index: 10000 !important;
}
/* 单独设置时钟样式 */
.taskbar-clock {
position: static !important;
color: white !important;
font-family: "Tahoma", sans-serif !important;
font-size: 13px !important;
line-height: 30px !important;
}
/* 移除重复的系统图标 */
.tray-icon {
display: none !important;
}
/* 强制应用指定字体 */
* {
font-family: var(--body-font) !important;
}
body, html {
font-family: "VonwaonBitmap 16px", VT323, monospace !important;
}
/* 特别设置任务栏字体 */
.taskbar, .start-button, .taskbar-clock {
font-family: "Tahoma", "Microsoft Sans Serif", sans-serif !important;
}
/* 修复媒体查询 */
@media (max-width: 767px) {
.navbar-toggle, .navbar-toggler {
display: block !important;
}
.navbar-collapse {
position: absolute !important;
top: 100% !important;
left: 0 !important;
right: 0 !important;
background: rgb(var(--xp-window-bg)) !important;
border: 1px solid rgb(var(--xp-window-border)) !important;
z-index: 1000 !important;
}
}
/* 确保任务栏不与页面内容重叠 */
body {
padding-bottom: 40px !important;
}
#content {
margin-bottom: 40px !important;
}
/* 在顶栏显示用户头像 - 针对变色龙皮肤 */
.navbar-userloggedin,
#personal-inner,
#p-personal .vector-menu-content-list > li:first-child,
.navbar-personaltools > li:first-child {
position: relative;
padding-left: 30px !important;
}
.navbar-userloggedin::before,
#personal-inner::before,
#p-personal .vector-menu-content-list > li:first-child > a::before,
.navbar-personaltools > li:first-child > a::before {
content: "";
position: absolute;
left: 5px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
border-radius: 50%;
background-size: cover;
background-position: center;
border: 1px solid rgb(var(--bright-accent));
z-index: 100;
}
/* 头像悬停效果 */
.navbar-userloggedin:hover::before,
#personal-inner:hover::before,
#p-personal .vector-menu-content-list > li:first-child > a:hover::before,
.navbar-personaltools > li:first-child > a:hover::before {
transform: translateY(-50%) scale(1.2) !important;
box-shadow: 0 0 10px rgba(var(--bright-accent), 0.6) !important;
border-color: rgb(var(--white-monochrome)) !important;
}
/* Echo扩展通知图标修复 */
#pt-notifications-alert,
#pt-notifications-notice,
.mw-echo-notifications-badge,
.mw-echo-notification-badge-nojs {
background-color: transparent !important;
border: none !important;
}
#pt-notifications-alert .mw-echo-notifications-badge:before,
#pt-notifications-notice .mw-echo-notifications-badge:before,
.mw-echo-notifications-badge:before {
color: rgb(var(--bright-accent)) !important;
filter: none !important;
opacity: 1 !important;
}
.mw-echo-notifications-badge:after,
.mw-echo-notification-badge-nojs:after {
background-color: rgb(var(--bright-accent)) !important;
color: rgb(var(--black-monochrome)) !important;
border: 1px solid rgb(var(--black-monochrome)) !important;
opacity: 1 !important;
}
/* 只修改通知图标的颜色 */
/* Echo图标蓝色风格 - Windows XP主题 */
#pt-notifications-alert .oo-ui-icon-bell,
#pt-notifications-notice .oo-ui-icon-tray {
filter: invert(34%) sepia(37%) saturate(2476%) hue-rotate(201deg) brightness(97%) contrast(85%);
}
/* 或者更直接的方式，使用颜色而不是filter */
#pt-notifications-alert .mw-echo-notifications-badge:before,
#pt-notifications-notice .mw-echo-notifications-badge:before,
.mw-echo-notifications-badge:before {
color: rgb(49, 106, 197) !important; /* 使用XP蓝色 */
filter: none !important;
opacity: 1 !important;
}
/* 悬停时变亮 */
#pt-notifications-alert:hover .mw-echo-notifications-badge:before,
#pt-notifications-notice:hover .mw-echo-notifications-badge:before {
color: rgb(82, 153, 235) !important; /* 使用XP浅蓝色 */
}
/* 目录框样式 */
#toc, .toc {
background-color: rgb(var(--gray-monochrome)) !important;
border: 2px solid rgb(var(--bright-accent)) !important;
padding: 0.5em !important;
font-family: var(--body-font) !important;
}
.toc .toctitle, #toc .toctitle {
background-color: rgb(var(--bright-accent)) !important;
color: rgb(var(--black-monochrome)) !important;
text-align: center !important;
padding: 0.25em !important;
margin: -0.5em -0.5em 0.5em -0.5em !important;
font-weight: bold !important;
}
.toc ul, #toc ul {
margin: 0 !important;
padding: 0 0 0 1.5em !important;
}
.toc a, #toc a {
color: rgb(var(--bright-accent)) !important;
text-decoration: none !important;
}
.toc a:hover, #toc a:hover {
color: rgb(var(--white-monochrome)) !important;
text-decoration: underline !important;
}
.tocnumber {
color: rgb(var(--pale-accent)) !important;
}
/* 简化的导航栏布局 */
.navbar {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: nowrap !important;
}
.navbar-brand {
margin-right: 20px !important;
flex-shrink: 0 !important;
}
.navbar-nav {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
}
.navbar-nav > li {
margin: 0 10px !important;
}
.navbar-right {
margin-left: auto !important;
display: flex !important;
align-items: center !important;
}
/* 搜索框间距修复 */
#searchform {
margin: 0 10px !important;
}
/* 响应式修复 */
@media (max-width: 767px) {
.navbar {
flex-wrap: wrap !important;
}
.navbar-collapse {
width: 100% !important;
}
}
/* 修复logo样式 */
.navbar-brand img,
.navbar .logo img,
#p-logo img,
.navbar-header img {
border: none !important;
display: inline-block !important;
margin: 0 !important;
padding: 0 !important;
max-height: 40px !important;
vertical-align: middle !important;
}
.navbar-brand,
.navbar .logo,
#p-logo,
.navbar-header {
display: flex !important;
align-items: center !important;
height: auto !important;
padding: 5px 15px !important;
margin: 0 !important;
}
/* 完全重置TOC样式 - Windows XP风格 */
#toc, .toc, .chameleon-toc, .mw-toc, #mw-toc, .Table_of_Contents {
background-color: rgb(var(--xp-window-bg)) !important;
border: 2px solid rgb(var(--xp-window-border)) !important;
box-shadow: var(--window-shadow) !important;
padding: 35px 10px 10px !important; /* 上方留出标题空间 */
margin: 1em 0 !important;
position: relative !important;
border-radius: 0 !important;
width: auto !important;
max-width: 360px !important; /* 限制最大宽度 */
min-width: 200px !important;
display: block !important; /* 改用块级显示 */
float: right !important; /* 向右浮动 */
clear: right !important;
overflow: visible !important;
z-index: 1 !important;
}
/* 自定义标题栏 */
#toc::before, .toc::before, .chameleon-toc::before, .mw-toc::before, #mw-toc::before, .Table_of_Contents::before {
content: "Contents" !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light))) !important;
color: white !important;
padding: 5px 10px !important;
font-weight: bold !important;
text-shadow: var(--text-shadow) !important;
border-bottom: 1px solid rgb(var(--xp-window-border)) !important;
text-align: left !important;
height: auto !important;
line-height: 1.5 !important;
font-size: 14px !important;
display: block !important;
z-index: 2 !important;
}
/* 处理原始标题和关闭按钮 */
.toc .toctitle, #toc .toctitle, .chameleon-toc .toctitle,
.mw-toc-heading, .tocheader, .toctoggle, .toctogglecheckbox {
display: none !important; /* 隐藏原始标题 */
}
/* 确保目录列表可见 */
.toc ul, #toc ul, .chameleon-toc ul,
.mw-toc ul, #mw-toc ul, .Table_of_Contents ul {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
margin: 0.5em 0 !important;
padding: 0 0 0 1.5em !important;
list-style-type: disc !important;
text-align: left !important;
max-height: none !important;
overflow: visible !important;
}
/* 确保目录列表项可见 */
.toc li, #toc li, .chameleon-toc li,
.mw-toc li, #mw-toc li, .Table_of_Contents li {
display: list-item !important;
visibility: visible !important;
opacity: 1 !important;
margin: 4px 0 !important;
padding: 0 !important;
line-height: 1.5 !important;
font-size: 13px !important;
color: rgb(var(--xp-text)) !important;
overflow: visible !important;
height: auto !important;
max-height: none !important;
}
/* 链接样式 */
.toc a, #toc a, .chameleon-toc a,
.mw-toc a, #mw-toc a, .Table_of_Contents a {
display: inline !important;
color: rgb(var(--link-color)) !important;
text-decoration: none !important;
font-size: 13px !important;
line-height: 1.5 !important;
height: auto !important;
visibility: visible !important;
opacity: 1 !important;
}
.toc a:hover, #toc a:hover, .chameleon-toc a:hover,
.mw-toc a:hover, #mw-toc a:hover, .Table_of_Contents a:hover {
color: rgb(var(--hover-link-color)) !important;
text-decoration: underline !important;
}
/* 目录编号样式 */
.tocnumber {
color: rgb(var(--xp-blue)) !important;
font-weight: bold !important;
margin-right: 0.3em !important;
display: inline !important;
visibility: visible !important;
opacity: 1 !important;
}
/* 强制显示所有子目录 */
.toc .toclevel-1 ul,
.toc .toclevel-2 ul,
.toc .toclevel-3 ul,
#toc .toclevel-1 ul,
#toc .toclevel-2 ul,
#toc .toclevel-3 ul {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* 整个目录容器设置 */
#mw-content-text .toc,
#mw-content-text #toc {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
/* CommonJS功能 */
/* 这些样式将由JavaScript功能使用 */
