MediaWiki:Common.css：修订间差异
来自Age Of History 2 Chinese Wiki
无编辑摘要 标签：已被回退 |
无编辑摘要 |
||
| （未显示同一用户的26个中间版本） | |||
| 第1行： | 第1行： | ||
/* | /* 这里放置的CSS将应用于所有皮肤 */ | ||
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"); | |||
@import url("https://fastly.jsdelivr.net/gh/hoah2333/Fonts@main/Typeface-VonwaonBitmap-16px.css"); | |||
@import url("https://fastly.jsdelivr.net/gh/hoah2333/Fonts@main/Typeface-VonwaonBitmap-12px.css"); | |||
@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'); | @import url('https://fonts.googleapis.com/css2?family=VT323&display=swap'); | ||
:root { | :root { | ||
--link-color: #0645ad; | |||
--link-color-active: #faa700; | |||
--custom-background-blue: #ccf; | |||
--custom-background-cyan: #cef; | |||
--custom-background-green: #cfc; | |||
--custom-background-gray: #d2d2d2; | |||
--custom-background-grey: var(--custom-background-gray); | |||
--custom-background-magenta: #fdf; | |||
--custom-background-orange: #fdb; | |||
--custom-background-purple: #ecf; | |||
--custom-background-red: #fcc; | |||
--custom-background-yellow: #ffc; | |||
--custom-border-blue: #36e; | |||
--custom-border-cyan: #9df; | |||
--custom-border-green: #5d5; | |||
--custom-border-gray: #bbb; | |||
--custom-border-grey: var(--custom-border-gray); | |||
--custom-border-magenta: #f9f; | |||
--custom-border-orange: #f90; | |||
--custom-border-purple: #96c; | |||
--custom-border-red: #e44; | |||
--custom-border-yellow: #fc3; | |||
--custom-closed-topic-neutral: #eef; | |||
--custom-closed-topic-no: #fee; | |||
--custom-closed-topic-yes: #efe; | |||
--custom-code-background: #f8f9fa; | |||
--custom-load-page-button-color: #fff8; | |||
--custom-main-page-background: #fcfcfc; | |||
--custom-main-page-border: var(--custom-border-gray); | |||
--custom-main-page-edition-subheader: #333; | |||
--custom-mcwiki-header-color: #bcd4f5; | |||
--custom-navbox-background: #fff; | |||
--custom-navbox-top: #ccc; | |||
--custom-navbox-middle: #ddd; | |||
--custom-navbox-thru: #eee; | |||
--custom-nbt-inherit-color: #e6e6fa; | |||
--custom-table-background: #f8f9fa; | |||
--custom-table-alternate-background: #f0f1f2; | |||
--custom-table-choice-always: #003600; | |||
--custom-table-choice-always-background: #80d080; | |||
--custom-table-choice-default: #fff; | |||
--custom-table-choice-in-off-background: #060; | |||
--custom-table-choice-in-on-background: #0c0; | |||
--custom-table-choice-na: #000; | |||
--custom-table-choice-na-background: #fff; | |||
--custom-table-choice-neutral: #634800; | |||
--custom-table-choice-neutral-background: #ffeb9c; | |||
--custom-table-choice-never: #3c0404; | |||
--custom-table-choice-never-background: #ff8080; | |||
--custom-table-choice-no: #840606; | |||
--custom-table-choice-no-background: #ffc7ce; | |||
--custom-table-choice-out-off-background: #900; | |||
--custom-table-choice-out-on-background: #f00; | |||
--custom-table-choice-partial: #665400; | |||
--custom-table-choice-partial-background: #ffd; | |||
--custom-table-choice-planned: #0131b7; | |||
--custom-table-choice-planned-background: #dfdfff; | |||
--custom-table-choice-rarely: #533400; | |||
--custom-table-choice-rarely-background: #fdce5e; | |||
--custom-table-choice-unknown: #222; | |||
--custom-table-choice-unknown-background: #ccc; | |||
--custom-table-choice-yes: #005600; | |||
--custom-table-choice-yes-background: #c6efce; | |||
--custom-table-header-background: #eaecf0; | |||
--custom-topic-30-days: #bbb; | |||
--custom-topic-7-days: #ddd; | |||
/* 字体设置 - | |||
/* 字体设置 - 保持原有字体 */ | |||
--body-font: "VonwaonBitmap 16px", VT323, monospace; | --body-font: "VonwaonBitmap 16px", VT323, monospace; | ||
--header-font: "VonwaonBitmap 16px", VT323, monospace; | --header-font: "VonwaonBitmap 16px", VT323, monospace; | ||
| 第21行： | 第86行： | ||
--pixel-font-16: 'VonwaonBitmap 16px', VT323, monospace; | --pixel-font-16: 'VonwaonBitmap 16px', VT323, monospace; | ||
--pixel-font-12: 'VonwaonBitmap 12px', VT323, monospace; | --pixel-font-12: 'VonwaonBitmap 12px', VT323, monospace; | ||
--base-font-size: | --base-font-size: 14px; | ||
} | } | ||
/* 应用全局字体 */ | /* 应用全局字体 */ | ||
body { | body { | ||
font-family: var(--body-font); | font-family: var(--body-font) !important; | ||
font-size: var(--base-font-size); | font-size: var(--base-font-size) !important; | ||
line-height: 1.5 !important; | |||
background-image: url("/aoh2wiki/images/b/be/Microsoft_Nostalgic_Windows_Wallpaper_4k.jpg"); | |||
background-size: cover; | |||
background-position: center; | |||
background-repeat: no-repeat; | |||
/ | |||
/ | |||
background- | |||
background- | |||
background-repeat: repeat; | |||
background-attachment: fixed; | background-attachment: fixed; | ||
color: rgb(var(--xp-text)); | |||
} | } | ||
.notaninfobox { | |||
. | position: relative; | ||
clear: right; | |||
margin: 0 0 1em 1em; | |||
width: 350px; | |||
font-size: 90%; | |||
background-color: var(--custom-table-background); | |||
float: right; | |||
border: 1px solid var(--custom-border-gray); | |||
padding: 2px; | |||
overflow: auto; | |||
z-index: 1; | |||
overflow-wrap: anywhere; | |||
} | } | ||
@media all and (max-width: 511px) { | |||
.notaninfobox { | |||
. | float: none; | ||
margin-left: 0; | |||
width: auto; | |||
} | |||
} | } | ||
.infobox tr:not(:first-child) td { | |||
. | border-bottom: 1px solid #ddd; | ||
} | } | ||
@media all and (max-width: 337px) { | |||
.notaninfobox { | |||
margin-left: -16px; | |||
margin-right: -16px; | |||
border-left: none; | |||
border-right: none; | |||
} | |||
} | } | ||
.notaninfobox > .infobox-title { | |||
font-weight: bold; | |||
text-align: center; | |||
font-size: 120%; | |||
background-color: #BCD4F5; | |||
} | } | ||
.infobox-imagearea { | |||
text-align: center; | |||
padding: 4px; | |||
} | } | ||
.infobox-imagearea > div:not(:first-child) { | |||
padding-top: 1em; | |||
} | } | ||
/* Horizontally centre animated images */ | |||
/* | .infobox-imagearea .animated { | ||
display: inline-flex; | |||
align-items: center; | |||
. | |||
} | } | ||
. | .notaninfobox .infobox-rows { | ||
display: grid; | |||
grid-template-columns: max-content 1fr; | |||
gap: 1px; | |||
} | } | ||
.infobox .plainlinks a { | |||
. | color: #0000EE !important; | ||
text-decoration: underline; | |||
} | } | ||
.infobox .plainlinks a:visited { | |||
. | color: #551A8B !important; | ||
color: | |||
} | } | ||
.notaninfobox .infobox-rows .infobox-row { | |||
display: contents; | |||
. | |||
. | |||
} | } | ||
. | .notaninfobox .infobox-row .infobox-row-label, | ||
. | .notaninfobox .infobox-row .infobox-row-field { | ||
padding: 4px; | |||
} | } | ||
.notaninfobox .infobox-row .infobox-row-label { | |||
font-weight: bold; | |||
display: flex; | |||
align-items: center; | |||
} | } | ||
.community-updates { | |||
background: #fff0e6; | |||
padding: 15px; | |||
border-radius: 10px; | |||
margin-top: 20px; | |||
} | } | ||
.community-updates ul li { | |||
list-style: none; | |||
padding: 10px; | |||
background: #fff; | |||
margin: 5px 0; | |||
border-radius: 5px; | |||
box-shadow: 0 2px 5px rgba(0,0,0,0.1); | |||
} | |||
.community-updates ul li a { | |||
color: #337ab7; | |||
text-decoration: none; | |||
font-weight: bold; | |||
} | } | ||
.notaninfobox .infobox-rows .infobox-row:nth-child(2n) .infobox-row-label, | |||
.notaninfobox .infobox-rows .infobox-row:nth-child(2n) .infobox-row-field { | |||
background-color: var(--custom-table-alternate-background); | |||
} | } | ||
.infobox | /* 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 | font: inherit; | ||
font-size: 100%; | |||
font-size: | |||
} | } | ||
. | |||
.tabber-container-infobox ul.tabbernav li a:hover { | |||
color: #000; | |||
} | } | ||
.infobox- | |||
padding | .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; | |||
} | |||
.mw-mainpage-header { | |||
background: linear-gradient(to bottom right, #B9A3FF, #8C47E7); | |||
box-shadow: grey 0px 0px 5px; | |||
border-radius: 20px; | |||
color: #000; | |||
font-size: 1.5em; | |||
text-shadow: white 0px 0px 10px, white 0px 0px 10px; | |||
padding: 20px; | |||
text-align: center; | |||
} | } | ||
. | .mw-mainpage-header h1 { | ||
font-size: 2.5em; | |||
margin-bottom: 10px; | |||
} | } | ||
. | |||
.mw-mainpage-header p { | |||
font-size: 1.2em; | |||
margin: 5px 0; | |||
} | } | ||
.infobox . | .tabber-container-infobox ul.tabbernav > li > a { | ||
color: #595959; | |||
padding-bottom: 1px; | |||
display: block; | |||
display: | |||
} | } | ||
/* To prevent the tabs from jumping around when they become active or inactive | |||
. | * due to the font-weight changing from normal to bold and vice versa, add an | ||
* invisible ::before which contains the same text as the tab's text, but | |||
* bolded. This way the element in which unbolded text sits is sized according | |||
* to the bolded text, preventing it from resizing upon being selected. | |||
*/ | |||
.tabber-container-infobox ul.tabbernav > li > a::before { | |||
display: block; | |||
content: attr(alt); | |||
font-weight: bold; | |||
height: 0; | |||
color: transparent; | |||
overflow: hidden; | |||
visibility: hidden; | |||
} | } | ||
. | .tabber-container-infobox ul.tabbernav > li.tabberactive { | ||
border: none; | |||
} | } | ||
. | |||
.modulebox { | |||
border: 1px solid #ccc; | |||
padding: 10px; | padding: 10px; | ||
margin: 10px 0; | |||
margin: | background-color: #f9f9f9; | ||
} | } | ||
. | |||
.tabber-container-infobox ul.tabbernav > li.tabberactive > a { | |||
font-weight: bold; | |||
color: var(--link-color); | |||
border-bottom: 2px solid var(--custom-mcwiki-header-color); | |||
} | } | ||
.infobox-rows p { | |||
margin: 0; | |||
} | } | ||
/* Merge adjacent dls in the infobox, since they're usually supposed to be one, | |||
* but the wiki screws up sometimes. | |||
*/ | |||
.infobox-rows dl + dl { | |||
margin-top: -0.4em; | |||
} | } | ||
. | .infobox-rows dl:last-child { | ||
margin-bottom: 0.2em; | |||
} | } | ||
. | .infobox-footer { | ||
text-align: center; | |||
} | } | ||
. | /* 页面底部导航框（2011年8月16日引自中文维基）(所谓大家族模板) */ | ||
table.navbox{ | |||
border:1px solid #aaa; | |||
clear:both; | |||
margin:auto; | |||
padding:1px; | |||
text-align:center; | |||
width:100%; | |||
} | } | ||
. | |||
table.navbox + table.navbox{ | |||
margin-top:-1px; | |||
} | } | ||
. | |||
.navbox-title, | |||
.navbox-abovebelow, | |||
table.navbox th{ | |||
padding-left:1em; | |||
padding-right:1em; | |||
text-align:center; | |||
padding: | |||
text-align: center; | |||
} | } | ||
. | .navbox-group{ | ||
font- | font-weight:700; | ||
white-space:nowrap; | |||
} | } | ||
. | .navbox, | ||
.navbox-subgroup{ | |||
background:none repeat scroll 0 0 var(--theme-card-background-color, #fdfdfd); | |||
} | } | ||
. | |||
.navbox-list{ | |||
border-color:#fdfdfd; | |||
} | } | ||
.navbox-title, | |||
table.navbox th{ | |||
background:none repeat scroll 0 0 #a5e4a5; | |||
. | |||
} | } | ||
. | .navbox-abovebelow, | ||
.navbox-group, | |||
.navbox-subgroup .navbox-title{ | |||
background:none repeat scroll 0 0 #c0ecc0; | |||
} | } | ||
. | .navbox-subgroup .navbox-group, | ||
.navbox-subgroup .navbox-abovebelow{ | |||
background:none repeat scroll 0 0 #e6f6e6; | |||
} | } | ||
. | .navbox-even{ | ||
background:none repeat scroll 0 0 #f5fcf5; | |||
} | } | ||
. | .navbox-odd{ | ||
background:none repeat scroll 0 0 #fdfdfd; | |||
} | } | ||
.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 {*/ | |||
/* display:none;*/ | |||
/*}*/ | |||
/*“查·论·编”在小屏幕时基本用不到（也很难点到）*/ | |||
.navbox-title>div{ | |||
display: none; | |||
} | |||
/*把内边距去掉*/ | |||
.navbox-group, | |||
.navbox-group >div{ | |||
padding-left: 0 !important; | |||
padding-right: 0 !important; | |||
text-align: center; | |||
} | |||
} | } | ||
/* h1标题字体 */ | |||
body h1 { | |||
font-family: "Microsoft YaHei", "微软雅黑", sans-serif !important; | |||
} | } | ||
. | /* 本段内容来自萌娘百科 https://zh.moegirl.org.cn/MediaWiki:Gadget-site-styles.css 感谢贡献！*/ | ||
. | /* 版权协定：知识共享 署名-非商业性使用-相同方式共享 3.0 */ | ||
.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; | |||
} | } | ||
. | |||
/* | |||
该文档为一个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); | |||
.hover | |||
} | } | ||
. | /* 正常 => 浅 */ | ||
. | .hovers-fade-deep, | ||
. | .hovers-fade, | ||
.hovers-fade-shallow { | |||
opacity: 1; | |||
} | } | ||
.hovers-fade-deep:hover, | |||
. | .hovers-fade-deep.active { | ||
. | opacity: 0.35; | ||
opacity: 0 | |||
} | } | ||
.hover- | .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; | |||
. | |||
opacity: 0 | |||
} | } | ||
.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- | .hovers-shrink-deep:hover, | ||
.hovers-shrink-deep.active, | |||
transform: | .hovers-shrink:hover, | ||
.hovers-shrink.active, | |||
.hovers-shrink-shallow:hover, | |||
.hovers-shrink-shallow.active { | |||
transform: scale(1); | |||
} | } | ||
.hovers- | .hovers-shrink-deep { | ||
transform: | transform: scale(0.5); | ||
} | |||
.hovers-shrink { | |||
transform: scale(0.75); | |||
} | |||
.hovers-shrink-shallow { | |||
transform: scale(0.9); | |||
} | } | ||
/* 左右抖动 */ | |||
@keyframes shake-flexible { | |||
transform: | 25% { | ||
transform: translateX(-0.0625em); | |||
} | |||
50% { | |||
transform: translateX(0.0625em); | |||
} | |||
75% { | |||
transform: translateX(-0.0625em); | |||
} | |||
} | } | ||
.hovers- | .hovers-shake-flexible:hover, | ||
.hovers-shake-flexible.active { | |||
animation: shake-flexible 0.5s ease-out; | |||
} | } | ||
@keyframes shake { | |||
25% { | |||
transform: translateX(-8px); | |||
} | |||
transform: | |||
50% { | |||
transform: translateX(8px); | |||
} | |||
75% { | |||
transform: translateX(-8px); | |||
} | |||
} | } | ||
.hovers- | .hovers-shake:hover, | ||
.hovers- | .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- | .hovers-bounce-flexible.active { | ||
animation: bounce-flexible 0.5s ease-out; | |||
.hovers- | |||
} | } | ||
@keyframes bounce { | |||
25% { | |||
transform: translateY(-8px); | |||
} | |||
50% { | |||
transform: translateY(8px); | |||
} | |||
75% { | |||
transform: translateY(-8px); | |||
} | |||
} | } | ||
.hovers-bounce:hover, | |||
.hovers- | .hovers-bounce.active { | ||
.hovers- | position: relative; | ||
. | left: 0; | ||
animation: bounce 0.5s ease-out; | |||
} | } | ||
/* 绕顶端中点抖动 */ | |||
transform: | @keyframes swing { | ||
} | 20% { | ||
transform: rotate3d(0, 0, 1, 10deg); | |||
.hovers- | } | ||
transform: | |||
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- | .hovers-swing:hover, | ||
.hovers- | .hovers-swing.active { | ||
animation: swing 0.75s ease-out; | |||
} | } | ||
/* 正常 => | /* 正常 => 大 */ | ||
@keyframes pulse-grow { | |||
to { | |||
transform: scale(1.1); | |||
} | |||
} | } | ||
.hovers- | |||
.hovers-pulse-grow:hover, | |||
.hovers-pulse-grow.active { | |||
animation: pulse-grow 0.5s linear infinite alternate; | |||
} | } | ||
transform: scale(0. | /* 正常 => 小 */ | ||
@keyframes pulse-shrink { | |||
to { | |||
transform: scale(0.9); | |||
} | |||
} | } | ||
.hovers-shrink- | |||
.hovers-pulse-shrink:hover, | |||
.hovers-pulse-shrink.active { | |||
animation: pulse-shrink 0.5s linear infinite alternate; | |||
} | } | ||
/* | /* 正常 => 小 */ | ||
@keyframes | @keyframes push { | ||
50% { | 50% { | ||
transform: | transform: scale(0.8); | ||
} | } | ||
} | } | ||
.hovers- | .hovers-push:hover, | ||
.hovers- | .hovers-push.active { | ||
animation: | animation: push 0.3s linear; | ||
} | } | ||
@keyframes | /* 正常 => 大 */ | ||
@keyframes pop { | |||
50% { | 50% { | ||
transform: | transform: scale(1.2); | ||
} | } | ||
} | } | ||
.hovers- | .hovers-pop:hover, | ||
.hovers- | .hovers-pop.active { | ||
animation: | 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- | /* 正常 => 小 => 正常 => 小 */ | ||
.hovers-bounce- | .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- | /* 升起 */ | ||
.hovers- | .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); | |||
} | |||
/* 飘浮 */ | |||
transform: | @keyframes bob { | ||
0% { | |||
transform: translateY(-10px); | |||
} | } | ||
50% { | |||
transform: translateY(-5px); | |||
transform: | |||
} | } | ||
100% { | |||
transform: translateY(-10px); | |||
transform: | |||
} | } | ||
} | } | ||
@keyframes bob-float { | |||
100% { | |||
transform: translateY(-10px); | |||
@keyframes | |||
transform: | |||
} | } | ||
} | } | ||
.hovers- | .hovers-bob:hover, | ||
.hovers- | .hovers-bob.active { | ||
animation: | 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 | @keyframes hang { | ||
0% { | |||
transform: | transform: translateY(10px); | ||
} | |||
50% { | |||
transform: translateY(5px); | |||
} | |||
100% { | |||
transform: translateY(10px); | |||
} | } | ||
} | } | ||
@keyframes hang-sink { | |||
100% { | |||
transform: translateY(10px); | |||
@keyframes | |||
transform: | |||
} | } | ||
} | } | ||
.hovers- | .hovers-hang:hover, | ||
.hovers- | .hovers-hang.active { | ||
animation: | 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- | /* 非对称-左 */ | ||
.hovers- | .hovers-skew-forward { | ||
transform-origin: 0 100%; | |||
} | |||
.hovers-skew-forward:hover, | |||
.hovers-skew-forward.active { | |||
transform: skew(-10deg); | |||
} | } | ||
/* | /* 非对称-右 */ | ||
.hovers- | .hovers-skew-backward { | ||
.hovers- | transform-origin: 0 100%; | ||
transform: | } | ||
.hovers-skew-backward:hover, | |||
.hovers-skew-backward.active { | |||
transform: skew(10deg); | |||
} | } | ||
/* | /* 垂直抖动 */ | ||
. | @keyframes wobble-vertical { | ||
. | 16.65% { | ||
transform: | 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- | .hovers-wobble-vertical.active { | ||
.hovers- | 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); | |||
transform: | } | ||
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 { | |||
.hovers- | animation-name: wobble-horizontal; | ||
.hovers- | animation-duration: 1s; | ||
animation-timing-function: ease-in-out; | |||
animation-iteration-count: 1; | |||
} | } | ||
/* | /* 右下弹回 */ | ||
@keyframes wobble-to-bottom-right { | |||
16.65% { | |||
transform: translate(8px, 8px); | |||
transform: | |||
} | } | ||
33.3% { | |||
transform: | transform: translate(-6px, -6px); | ||
} | } | ||
49.95% { | |||
transform: | transform: translate(4px, 4px); | ||
} | |||
66.6% { | |||
transform: translate(-2px, -2px); | |||
} | |||
83.25% { | |||
transform: translate(1px, 1px); | |||
} | } | ||
100% { | 100% { | ||
transform: | transform: translate(0, 0); | ||
} | } | ||
} | } | ||
.hovers- | .hovers-wobble-to-bottom-right:hover, | ||
.hovers- | .hovers-wobble-to-bottom-right.active { | ||
animation-name: | animation-name: wobble-to-bottom-right; | ||
animation-duration: | animation-duration: 1s; | ||
animation-timing-function: ease-in-out; | |||
animation-timing-function: | animation-iteration-count: 1; | ||
animation-iteration-count: 1 | |||
} | } | ||
/* | /* 右上弹回 */ | ||
@keyframes | @keyframes wobble-to-top-right { | ||
16.65% { | |||
transform: | transform: translate(8px, -8px) | ||
} | } | ||
33.3% { | |||
transform: | transform: translate(-6px, 6px); | ||
} | |||
49.95% { | |||
transform: translate(4px, -4px); | |||
} | |||
66.6% { | |||
transform: translate(-2px, 2px); | |||
} | } | ||
83.25% { | |||
transform: | transform: translate(1px, -1px); | ||
} | } | ||
100% { | 100% { | ||
transform: | transform: translate(0); | ||
} | } | ||
} | } | ||
.hovers- | .hovers-wobble-to-top-right:hover, | ||
.hovers- | .hovers-wobble-to-top-right.active { | ||
animation-name: | animation-name: wobble-to-top-right; | ||
animation-duration: | animation-duration: 1s; | ||
animation-timing-function: ease-in-out; | |||
animation-timing-function: | animation-iteration-count: 1; | ||
animation-iteration-count: 1 | |||
} | } | ||
/* | /* 果冻 */ | ||
@keyframes wobble-top { | |||
@keyframes wobble- | |||
16.65% { | 16.65% { | ||
transform: | transform: skew(-12deg); | ||
} | } | ||
33.3% { | 33.3% { | ||
transform: | transform: skew(10deg); | ||
} | } | ||
49.95% { | 49.95% { | ||
transform: | transform: skew(-6deg); | ||
} | } | ||
66.6% { | 66.6% { | ||
transform: | transform: skew(4deg); | ||
} | } | ||
83.25% { | 83.25% { | ||
transform: | transform: skew(-2deg); | ||
} | } | ||
100% { | 100% { | ||
transform: | transform: skew(0); | ||
} | } | ||
} | } | ||
.hovers-wobble- | /* 赘肉 */ | ||
.hovers-wobble- | .hovers-wobble-top { | ||
animation-name: wobble- | transform-origin: 0 100%; | ||
} | |||
.hovers-wobble-top:hover, | |||
.hovers-wobble-top.active { | |||
animation-name: wobble-top; | |||
animation-duration: 1s; | animation-duration: 1s; | ||
animation-timing-function: ease-in-out; | animation-timing-function: ease-in-out; | ||
| 第1,187行： | 第1,125行： | ||
} | } | ||
@keyframes wobble-bottom { | |||
@keyframes wobble- | |||
16.65% { | 16.65% { | ||
transform: | transform: skew(-12deg); | ||
} | } | ||
33.3% { | 33.3% { | ||
transform: | transform: skew(10deg); | ||
} | } | ||
49.95% { | 49.95% { | ||
transform: | transform: skew(-6deg); | ||
} | } | ||
66.6% { | 66.6% { | ||
transform: | transform: skew(4deg); | ||
} | } | ||
83.25% { | 83.25% { | ||
transform: | transform: skew(-2deg); | ||
} | } | ||
100% { | 100% { | ||
transform: | transform: skew(0); | ||
} | } | ||
} | } | ||
.hovers-wobble- | |||
.hovers-wobble- | .hovers-wobble-bottom { | ||
animation-name: wobble- | transform-origin: 100% 0; | ||
} | |||
.hovers-wobble-bottom:hover, | |||
.hovers-wobble-bottom.active { | |||
animation-name: wobble-bottom; | |||
animation-duration: 1s; | animation-duration: 1s; | ||
animation-timing-function: ease-in-out; | animation-timing-function: ease-in-out; | ||
| 第1,216行： | 第1,157行： | ||
} | } | ||
/* | /* 颤动 */ | ||
@keyframes wobble- | @keyframes wobble-skew { | ||
16.65% { | 16.65% { | ||
transform: | transform: skew(-12deg); | ||
} | } | ||
33.3% { | 33.3% { | ||
transform: | transform: skew(10deg); | ||
} | } | ||
49.95% { | 49.95% { | ||
transform: | transform: skew(-6deg); | ||
} | } | ||
66.6% { | 66.6% { | ||
transform: | transform: skew(4deg); | ||
} | } | ||
83.25% { | 83.25% { | ||
transform: | transform: skew(-2deg); | ||
} | } | ||
100% { | 100% { | ||
transform: | transform: skew(0); | ||
} | } | ||
} | } | ||
.hovers-wobble-skew:hover, | |||
.hovers-wobble- | .hovers-wobble-skew.active { | ||
.hovers-wobble- | animation-name: wobble-skew; | ||
animation-name: wobble- | |||
animation-duration: 1s; | animation-duration: 1s; | ||
animation-timing-function: ease-in-out; | animation-timing-function: ease-in-out; | ||
| 第1,246行： | 第1,186行： | ||
} | } | ||
/* | /* 振动 */ | ||
@keyframes | @keyframes buzz { | ||
50% { | |||
transform: | transform: translateX(3px) rotate(2deg); | ||
} | } | ||
100% { | 100% { | ||
transform: | transform: translateX(-3px) rotate(-2deg); | ||
} | } | ||
} | } | ||
.hovers- | .hovers-buzz:hover, | ||
.hovers- | .hovers-buzz.active { | ||
animation-name: | animation-name: buzz; | ||
animation-duration: | animation-duration: 0.15s; | ||
animation-timing-function: | animation-timing-function: linear; | ||
animation-iteration-count: | animation-iteration-count: infinite; | ||
} | } | ||
/* | /* 振出 */ | ||
@keyframes | @keyframes buzz-out { | ||
10% { | |||
transform: | transform: translateX(3px) rotate(2deg); | ||
} | |||
20% { | |||
transform: translateX(-3px) rotate(-2deg); | |||
} | } | ||
30% { | |||
transform: | transform: translateX(3px) rotate(2deg); | ||
} | } | ||
40% { | |||
transform: | transform: translateX(-3px) rotate(-2deg); | ||
} | } | ||
50% { | |||
transform: | transform: translateX(2px) rotate(1deg); | ||
} | } | ||
60% { | |||
transform: | transform: translateX(-2px) rotate(-1deg); | ||
} | } | ||
70% { | |||
transform: | transform: translateX(2px) rotate(1deg); | ||
} | } | ||
80% { | |||
transform: translateX(-2px) rotate(-1deg); | |||
transform: | |||
} | } | ||
90% { | |||
transform: | transform: translateX(1px) rotate(0); | ||
} | } | ||
100% { | 100% { | ||
transform: | transform: translateX(-1px) rotate(0); | ||
} | } | ||
} | } | ||
.hovers- | .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- | |||
.hovers- | /* 左移 */ | ||
.hovers-backward:hover, | |||
.hovers-backward.active { | |||
transform: translateX(-8px); | |||
} | } | ||
/* | /* 自由移动 */ | ||
.hovers-top, | |||
.hovers-left, | |||
.hovers-bottom, | |||
.hovers-right { | |||
transition: all 0.5s; | |||
.hovers- | |||
.hovers- | |||
} | } | ||
.hovers-top:hover, | |||
.hovers-top.active { | |||
transform: translateY(-0.0625em); | |||
} | } | ||
.hovers- | .hovers-left:hover, | ||
.hovers- | .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- | .hovers-blur { | ||
filter: blur(5px); | |||
} | } | ||
.hovers-blur-reverse:hover, | |||
.hovers- | .hovers-blur-reverse.active { | ||
.hovers- | filter: blur(5px); | ||
} | } | ||
.hovers-brightness { | |||
filter: brightness(50%); | |||
.hovers- | |||
} | } | ||
.hovers-brightness-reverse:hover, | |||
.hovers- | .hovers-brightness-reverse.active { | ||
.hovers- | filter: brightness(50%); | ||
. | |||
} | } | ||
.hovers- | .hovers-contrast { | ||
filter: contrast(50%); | |||
} | } | ||
.hovers- | .hovers-contrast-reverse:hover, | ||
.hovers- | .hovers-contrast-reverse.active { | ||
filter: contrast(50%); | |||
} | } | ||
.hovers- | .hovers-grayscale { | ||
filter: grayscale(100%); | |||
} | } | ||
.hovers- | .hovers-grayscale-reverse:hover, | ||
.hovers- | .hovers-grayscale-reverse.active { | ||
filter: grayscale(100%); | |||
} | } | ||
.hovers-invert { | |||
filter: invert(100%); | |||
.hovers-invert | |||
} | } | ||
.hovers- | .hovers-invert-reverse:hover, | ||
.hovers-invert-reverse.active { | |||
filter: invert(100%); | |||
.hovers-invert | |||
filter: | |||
} | } | ||
.hovers- | .hovers-saturate { | ||
filter: | filter: saturate(200%); | ||
} | } | ||
.hovers- | .hovers-saturate-reverse:hover, | ||
.hovers- | .hovers-saturate-reverse.active { | ||
filter: | filter: saturate(200%); | ||
} | } | ||
.hovers- | .hovers-sepia { | ||
filter: | filter: sepia(100%); | ||
} | } | ||
.hovers- | .hovers-sepia-reverse:hover, | ||
.hovers- | .hovers-sepia-reverse.acitve { | ||
filter: | filter: sepia(100%); | ||
} | } | ||
.hovers- | .hovers-hue-rotate { | ||
filter: | filter: hue-rotate(180deg); | ||
} | } | ||
.hovers- | .hovers-hue-rotate-reverse:hover, | ||
.hovers- | .hovers-hue-rotate-reverse.active { | ||
filter: | filter: hue-rotate(180deg); | ||
} | } | ||
.hovers- | /* 背景滑动 */ | ||
.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- | .hovers-sweep-to-right:before, | ||
.hovers- | .hovers-sweep-to-left:before, | ||
.hovers-sweep-to-bottom:before, | |||
} | .hovers-sweep-to-top:before, | ||
.hovers-radial-out:before, | |||
.hovers- | .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- | .hovers-radial-in:before { | ||
.hovers- | border-radius: 50%; | ||
transform: scale(0); | |||
} | } | ||
.hovers-radial-in:before { | |||
.hovers- | transform: scale(2); | ||
} | } | ||
.hovers- | .hovers-sweep-to-right:before { | ||
.hovers- | transform-origin: 0 50%; | ||
} | |||
.hovers-sweep-to-left:before { | |||
transform-origin: 100% 50%; | |||
} | } | ||
.hovers-sweep-to-bottom:before { | |||
.hovers- | transform-origin: 50% 0; | ||
} | } | ||
.hovers-sweep-to-top:before { | |||
.hovers- | transform-origin: 50% 100%; | ||
} | } | ||
.hovers-radial-out:hover:before, | |||
.hovers- | .hovers-radial-out.active:before { | ||
transform: scale(2); | |||
} | } | ||
.hovers-radial-in:hover:before, | |||
.hovers- | .hovers-radial-in.active:before { | ||
.hovers- | transform: scale(0); | ||
} | } | ||
.hovers-sweep-to-right .hovers-content.center, | |||
.hovers-sweep-to-right, | .hovers-sweep-to-left .hovers-content.center, | ||
.hovers-sweep-to-left, | .hovers-sweep-to-bottom .hovers-content.center, | ||
.hovers-sweep-to-bottom, | .hovers-sweep-to-top .hovers-content.center, | ||
.hovers-sweep-to-top, | .hovers-radial-out .hovers-content.center, | ||
.hovers-radial-out, | .hovers-radial-in .hovers-content.center { | ||
.hovers-radial-in { | display: flex; | ||
align-items: center; | |||
justify-content: center; | |||
word-break: break-all; | |||
} | } | ||
.hovers-sweep-to-right:before, | .hovers-sweep-to-right:hover:before, | ||
.hovers-sweep-to-left:before, | .hovers-sweep-to-left:hover:before, | ||
.hovers-sweep-to-bottom:before, | .hovers-sweep-to-bottom:hover:before, | ||
.hovers-sweep-to-top:before, | .hovers-sweep-to-top:hover:before, | ||
.hovers- | .hovers-sweep-to-right.active:before, | ||
.hovers- | .hovers-sweep-to-left:hover:before, | ||
content: | .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; | position: absolute; | ||
transition-property: all; | |||
transition-duration: inherit; | |||
top: 0; | top: 0; | ||
left: 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; | right: 0; | ||
} | } | ||
.hovers- | |||
.hovers- | .hovers-sweep-to-left .hovers-content { | ||
left: 100%; | |||
} | } | ||
.hovers- | .hovers-sweep-to-left:hover .hovers-content, | ||
.hovers-sweep-to-left.active .hovers-content { | |||
left: 0; | |||
} | } | ||
.hovers-sweep-to- | .hovers-sweep-to-bottom .hovers-content { | ||
top: initial; | |||
bottom: 100%; | |||
} | } | ||
.hovers-sweep-to- | .hovers-sweep-to-bottom:hover .hovers-content, | ||
.hovers-sweep-to-bottom.active .hovers-content { | |||
bottom: 0; | |||
} | } | ||
.hovers-sweep-to- | |||
.hovers-sweep-to-top .hovers-content { | |||
top: 100%; | |||
} | } | ||
.hovers-sweep-to-top: | .hovers-sweep-to-top:hover .hovers-content, | ||
.hovers-sweep-to-top.active .hovers-content { | |||
top: 0; | |||
} | } | ||
.hovers-radial-out | |||
.hovers- | .hovers-radial-out .hovers-content, | ||
.hovers-radial-in:hover .hovers-content, | |||
.hovers-radial-in.active .hovers-content { | |||
.hovers-radial-in:hover | opacity: 0; | ||
.hovers-radial-in.active | |||
} | } | ||
.hovers- | .hovers-radial-in .hovers-content, | ||
.hovers- | .hovers-radial-out:hover .hovers-content, | ||
.hovers-radial-out.active .hovers-content { | |||
opacity: 1; | |||
.hovers-radial-out . | |||
} | } | ||
.hovers- | /* 默认em */ | ||
.hovers- | .hovers-border, | ||
.hovers- | .hovers-trim, | ||
.hovers- | .hovers-ripple-out, | ||
.hovers- | .hovers-ripple-in, | ||
.hovers- | .hovers-outline-out, | ||
.hovers- | .hovers-outline-in, | ||
.hovers- | .hovers-reveal { | ||
font-size: 160px; | |||
line-height: 16px; | |||
} | |||
/* 内边框滑出 */ | |||
.hovers-border, | |||
.hovers-trim { | |||
position: relative; | |||
top: 0; | |||
left: 0; | |||
transition: all 0.3s; | |||
} | } | ||
.hovers- | .hovers-border:before { | ||
content: ''; | |||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
position: absolute; | position: absolute; | ||
top: 0; | top: 0; | ||
left: 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- | .hovers-border:hover:before, | ||
.hovers-border.active:before { | |||
opacity: 1; | |||
.hovers- | |||
} | } | ||
.hovers- | /* 带边距内边框 */ | ||
.hovers-trim:before { | |||
content: ''; | |||
position: absolute; | |||
. | top: calc(0.0625em * 0.4); | ||
. | left: calc(0.0625em * 0.4); | ||
bottom: 0; | 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; | opacity: 0; | ||
border-radius: inherit; | |||
} | } | ||
.hovers- | .hovers-trim:hover:before, | ||
.hovers-trim.active:before { | |||
.hovers- | |||
opacity: 1; | opacity: 1; | ||
} | } | ||
/* | /* 边框飞出与飞入 */ | ||
.hovers-ripple-out, | .hovers-ripple-out, | ||
.hovers-ripple-in, | .hovers-ripple-in, | ||
| 第1,739行： | 第1,615行： | ||
.hovers-outline-in, | .hovers-outline-in, | ||
.hovers-reveal { | .hovers-reveal { | ||
animation-duration: 0.7s; | |||
animation-timing-function: ease-out; | |||
transition: all 0.3s; | transition: all 0.3s; | ||
} | } | ||
.hovers- | .hovers-ripple-out:before, | ||
.hovers-ripple-in:before, | |||
.hovers-outline-out:before, | |||
.hovers-outline-in:before, | |||
.hovers-reveal:before { | |||
content: ''; | content: ''; | ||
position: absolute; | position: absolute; | ||
top: 0; | top: 0; | ||
right: 0; | |||
bottom: 0; | |||
left: 0; | left: 0; | ||
animation: inherit; | |||
transition: inherit; | transition: inherit; | ||
border-width: calc(0.0625em * 0.6); | border-width: calc(0.0625em * 0.6); | ||
| 第1,765行： | 第1,637行： | ||
border-style: solid; | border-style: solid; | ||
border-radius: inherit; | border-radius: inherit; | ||
} | |||
.hovers-ripple-out:before { | |||
opacity: 0; | opacity: 0; | ||
} | } | ||
.hovers-ripple-in:before { | |||
.hovers- | top: calc(-0.0625em * 1.2); | ||
. | right: calc(-0.0625em * 1.2); | ||
opacity: | bottom: calc(-0.0625em * 1.2); | ||
left: calc(-0.0625em * 1.2); | |||
opacity: 0; | |||
} | } | ||
.hovers-outline-out:before { | |||
opacity: 0; | |||
.hovers- | } | ||
.hovers-outline-out:before { | |||
top: calc(-0.0625em * 1.6); | |||
top: calc(0.0625em * | right: calc(-0.0625em * 1.6); | ||
bottom: calc(-0.0625em * 1.6); | |||
bottom: calc(0.0625em * | left: calc(-0.0625em * 1.6); | ||
opacity: 0; | opacity: 0; | ||
} | } | ||
.hovers-reveal:before { | |||
.hovers- | border-width: 0; | ||
opacity: 0; | |||
opacity: | |||
} | } | ||
@keyframes ripple-out { | |||
50% { | |||
. | opacity: 1; | ||
.hovers- | } | ||
.hovers- | |||
. | 100% { | ||
animation- | 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; | |||
top: 0; | right: 0; | ||
bottom: 0; | |||
left: 0; | |||
opacity: 0; | |||
} | |||
} | } | ||
.hovers-ripple- | .hovers-ripple-in:hover:before, | ||
.hovers-ripple-in.active:before { | |||
animation-name: ripple-in; | |||
} | } | ||
.hovers- | |||
top: calc(-0.0625em * | .hovers-outline-out:hover:before, | ||
right: calc(-0.0625em * | .hovers-outline-in:hover:before, | ||
bottom: calc(-0.0625em * | .hovers-outline-out.active:before, | ||
left: calc(-0.0625em * | .hovers-outline-in:hover:before { | ||
opacity: | 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- | |||
opacity: | .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- | .hovers-round-corners:hover, | ||
border- | .hovers-round-corners.active { | ||
border-radius: 0.0625em; | |||
} | } | ||
@keyframes | /* 重叠：翻转切换 */ | ||
.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% { | 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; | |||
. | |||
. | |||
animation | |||
} | } | ||
. | .hover-turn:hover .hover-turn-before, | ||
. | .hover-turn:not(:hover) .hover-turn-after { | ||
. | opacity: 0; | ||
} | } | ||
/* [[Category:在模板名字空间下的CSS页面]] */ | |||
. | /* | ||
. | .colormu_toggle_on是为了黑幕开关(MediaWiki:Gadget-heimu-toggle.js)做适配。 | ||
.colormu-drk、.colormu-bri分别是暗色背景和亮色背景， | |||
暗色背景的文字通常是浅色，在半隐背景后，颜色需要变成深色。 | |||
*/ | |||
.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; | |||
} | } | ||
.hover | /* 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; | |||
.colormu- | |||
.colormu-drk { | |||
color: | |||
} | } | ||
. | /* === 轮播图容器 === */ | ||
.mw-carousel { | |||
position: relative; | |||
width: 100%; | |||
max-width: 960px; | |||
margin: 2em auto; | |||
overflow: hidden; | |||
border-radius: 16px; | |||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); | |||
aspect-ratio: 16 / 9; | |||
background-color: #f8f9fa; | |||
} | } | ||
. | |||
/* === 图片区域 === */ | |||
.mw-carousel .carousel-image { | |||
width: 100%; | |||
height: 100%; | |||
position: relative; | |||
} | } | ||
. | |||
.mw-carousel .carousel-image img { | |||
width: 100%; | |||
height: 100%; | |||
object-fit: cover; | |||
display: block; | |||
} | } | ||
. | |||
/* === 默认状态下的文字：底部横条，文字靠左 === */ | |||
.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: 2em 1.5em 1.2em; | |||
text-align: left; | |||
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |||
z-index: 2; | |||
transform: translateY(0); | |||
} | } | ||
. | /* === 悬停时的文字效果：文字全屏覆盖，背景渐变 === */ | ||
.mw-carousel:hover .carousel-caption { | |||
top: 0; | |||
left: 0; | |||
bottom: 0; | |||
width: 100%; | |||
height: 100%; | |||
transform: translateY(0); | |||
background: rgba(0, 0, 0, 0.6); | |||
display: flex; | |||
flex-direction: column; | |||
justify-content: center; | |||
align-items: center; | |||
text-align: center; | |||
padding: 2em; | |||
border-radius: 0; | |||
backdrop-filter: blur(3px); | |||
} | } | ||
/* | /* === 标题 + 描述样式 === */ | ||
. | .mw-carousel .carousel-caption h3 { | ||
margin: 0 0 0.5em; | |||
font-size: 1.6em; | |||
font-weight: 600; | |||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); | |||
transform: translateY(0); | |||
transition: transform 0.4s ease; | |||
} | } | ||
.mw-carousel .carousel-caption p { | |||
margin: 0; | |||
font-size: 1.1em; | |||
line-height: 1.4; | |||
max-width: 80%; | |||
opacity: 1; | |||
transform: translateY(0); | |||
transition: all 0.4s ease 0.1s; | |||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); | |||
} | } | ||
.mw-carousel:hover .carousel-caption h3 { | |||
transform: translateY(0); | |||
. | |||
} | } | ||
.mw-carousel:hover .carousel-caption p { | |||
.mw-carousel .carousel- | opacity: 1; | ||
transform: translateY(0); | |||
} | } | ||
.mw-carousel .carousel- | /* === 左右切换按钮（垂直居中） === */ | ||
.mw-carousel .carousel-navigation { | |||
position: absolute; | |||
top: 50%; | |||
left: 0; | |||
width: 100%; | width: 100%; | ||
display: flex; | |||
justify-content: space-between; | |||
transform: translateY(-50%); | |||
z-index: 3; | |||
padding: 0 1.5em; | |||
opacity: 0; | |||
transition: opacity 0.3s ease; | |||
} | } | ||
.mw-carousel:hover .carousel-navigation { | |||
.mw-carousel .carousel- | opacity: 1; | ||
} | } | ||
.mw-carousel .carousel-prev, | |||
.mw-carousel | .mw-carousel .carousel-next { | ||
background-color: rgba(255, 255, 255, 0.8); | |||
border: none; | |||
border-radius: 50%; | |||
width: | width: 48px; | ||
height: | height: 48px; | ||
font-size: 22px; | |||
cursor: pointer; | |||
display: flex; | display: flex; | ||
justify-content: center; | justify-content: center; | ||
align-items: center; | align-items: center; | ||
transition: all 0.3s; | |||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); | |||
color: #333; | |||
} | } | ||
.mw-carousel .carousel-prev:hover, | |||
.mw-carousel .carousel- | .mw-carousel .carousel-next:hover { | ||
background-color: rgba(255, 255, 255, 0.95); | |||
transform: scale(1.05); | |||
transform: | |||
} | } | ||
.mw-carousel .carousel- | /* === 指示器 - 修改为底部右侧 === */ | ||
.mw-carousel .carousel-indicators { | |||
position: absolute; | |||
bottom: 15px; | |||
right: 20px; /* 改为右对齐 */ | |||
left: auto; /* 取消左对齐 */ | |||
transform: none; /* 取消水平居中变换 */ | |||
display: flex; | |||
gap: 10px; | |||
z-index: 4; | |||
padding: 0.5em 1em; | |||
border-radius: 20px; | |||
background-color: rgba(0, 0, 0, 0.3); | |||
backdrop-filter: blur(5px); | |||
} | } | ||
.mw-carousel | .mw-carousel .carousel-indicators .indicator { | ||
width: 10px; | |||
height: 10px; | |||
background-color: rgba(255, 255, 255, 0.5); | |||
border-radius: 50%; | |||
cursor: pointer; | |||
transition: all 0.3s; | |||
} | } | ||
.mw-carousel | .mw-carousel .carousel-indicators .indicator.active { | ||
background-color: #ffffff; | |||
transform: scale(1.2); | |||
box-shadow: 0 0 8px rgba(255, 255, 255, 0.5); | |||
} | } | ||
.mw-carousel .carousel-indicators .indicator:hover { | |||
.mw-carousel .carousel- | background-color: rgba(255, 255, 255, 0.8); | ||
} | } | ||
/* === 图片全局统一显示效果 === */ | |||
img { | |||
max-width: 100%; | |||
height: auto; | |||
display: block; | |||
} | } | ||
/* === 添加图片过渡效果 === */ | |||
.mw-carousel .carousel- | .mw-carousel .carousel-image img { | ||
transition: transform 0.5s ease; | |||
transition: | |||
} | } | ||
.mw-carousel | .mw-carousel:hover .carousel-image img { | ||
transform: scale(1.03); | |||
transform: scale(1. | |||
} | } | ||
/* | |||
. | /* Common styles */ | ||
.section-title { | |||
background-color: #f0f0f0; | |||
color: #333; | |||
font-weight: bold; | |||
padding: 0.5rem 1rem; | |||
font-size: 1.2rem; | |||
border-left: 4px solid #3366cc; | |||
padding: 0. | |||
} | } | ||
. | .see-more { | ||
text-align: right; | |||
padding: 0.3rem 1rem; | |||
font-size: 0.9rem; | |||
background-color: #f5f5f5; | |||
} | } | ||
. | .see-more a { | ||
color: #3366cc; | |||
} | } | ||
. | /* 主页横幅样式 */ | ||
.main-page-banner { | |||
display: grid; | |||
grid-template-areas: | |||
"welcome welcome welcome" | |||
"discord faq join"; | |||
grid-template-columns: 1fr 1fr 1fr; | |||
grid-column-gap: 3%; | |||
margin-bottom: 4rem; | |||
width: 100%; | |||
box-sizing: border-box; | |||
} | } | ||
/* | /* 欢迎文本区域 */ | ||
.main-page-banner .welcome-text { | |||
grid-area: welcome; | |||
background-color: rgb(var(--gray-monochrome, 66, 66, 72)); | |||
color: rgb(var(--white-monochrome, 252, 252, 252)); | |||
font-style: italic; | |||
padding: 1.5rem; | |||
border-radius: 1rem 1rem 0 0; | |||
margin: 0; | |||
width: 100%; | |||
} | } | ||
.main-page-banner .welcome-text p { | |||
. | margin: 0; | ||
color: rgb(var(--white-monochrome, 252, 252, 252)); | |||
} | } | ||
. | /* 导航链接区域 */ | ||
.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%; | |||
} | } | ||
.main-page-banner .nav-button { | |||
background-color: rgb(var(--gray-monochrome, 66, 66, 72)); | |||
border-radius: 0 0 1rem 1rem; | |||
margin: 0 0 4rem 0; | |||
transition: margin 150ms cubic-bezier(0.4, 0, 0.2, 1); | |||
height: min-content; | |||
} | } | ||
.main-page-banner .nav-button:hover { | |||
. | margin: 0 0 1rem 0; | ||
} | } | ||
. | .main-page-banner .nav-button a { | ||
text-align: | display: block; | ||
padding: 0.5rem 0; | |||
font-size: 0. | width: 100%; | ||
text-align: center; | |||
color: rgb(var(--white-monochrome, 0, 0, 0)); | |||
font-size: 1.25rem; | |||
transition: padding 150ms cubic-bezier(0.4, 0, 0.2, 1); | |||
font-weight: bold; | |||
text-decoration: none; | |||
} | } | ||
. | .main-page-banner .nav-button a:hover { | ||
padding: 2rem 0; | |||
text-decoration: none; | |||
} | } | ||
/* | /* 针对背景图片的设置 */ | ||
.main-page-banner { | .main-page-banner { | ||
position: relative; | |||
z-index: 1; | |||
} | } | ||
.main-page-banner::before { | |||
.main-page-banner | content: ""; | ||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | width: 100%; | ||
height: 100%; | |||
background-image: url('您的背景图片URL'); | |||
background-size: cover; | |||
background-position: center; | |||
opacity: 0.3; /* 调整透明度使文字可读 */ | |||
z-index: -1; | |||
border-radius: 1rem; | |||
} | } | ||
.main-page-banner | /* 响应式布局 */ | ||
@media (max-width: 767px) { | |||
.main-page-banner { | |||
} | grid-template-areas: | ||
"welcome" | |||
"navigation"; | |||
.main-page-banner . | grid-template-columns: 1fr; | ||
} | |||
.main-page-banner .welcome-text { | |||
width: 100%; | |||
margin-bottom: 0; | |||
} | box-sizing: border-box; | ||
} | |||
.main-page-banner .nav-button { | |||
.main-page-banner .navigation-links { | |||
grid-area: navigation; | |||
display: flex; | |||
width: 100%; | |||
overflow: visible; | |||
} | } | ||
.main-page-banner .nav-button:hover { | .main-page-banner .nav-button { | ||
flex: 1; | |||
margin: 0 0 4rem 0; | |||
} | |||
.main-page-banner .nav-button:not(:last-child) { | |||
margin-right: 3%; | |||
} | |||
.main-page-banner .nav-button a { | |||
font-size: 1.1rem; | |||
} | |||
.main-page-banner .nav-button:hover { | |||
margin: 0 0 1rem 0; | |||
} | |||
} | |||
/* Announcement styles */ | |||
.announcement-container { | |||
display: flex; | |||
flex-wrap: wrap; | |||
border: 2px solid #f0f0f0; | |||
align-content: space-between; | |||
margin-bottom: 2rem; | |||
} | } | ||
. | .announcement-container .section-title { | ||
width: 100%; | width: 100%; | ||
text-align: center; | text-align: center; | ||
font-size: 1.5rem; | |||
font-size: 1. | border-left: none; | ||
border-bottom: 2px solid #f0f0f0; | |||
} | } | ||
. | .announcement-container .announcement-content { | ||
background-color: #fafafa; | |||
width: 100%; | |||
padding: 0.75rem; | |||
} | } | ||
.announcement-container .more-content { | |||
. | width: 100%; | ||
border-top: 2px solid #f0f0f0; | |||
} | |||
.announcement-container .collapsible-block.active .collapsible-content { | |||
display: block; | |||
} | } | ||
.announcement-container .collapsible-block { | |||
. | |||
width: 100%; | width: 100%; | ||
} | |||
/* 更高特异性的选择器 */ | |||
.announcement-container .more-content .collapsible-block .collapsible-content { | |||
display: none !important; | |||
} | } | ||
.announcement-container .more-content .collapsible-block.active .collapsible-content { | |||
display: block !important; | |||
} | |||
.announcement-container .collapsible-header { | |||
padding: 1rem 0; | |||
text-align: center; | |||
background: rgba(240, 240, 240, 0.7); | |||
cursor: pointer; | |||
} | |||
.announcement-container .collapsible-header:hover { | |||
background: rgba(240, 240, 240, 1); | |||
} | |||
.announcement-container .collapsible-content { | |||
padding: 1rem; | |||
background: #f5f5f5; | |||
} | |||
/* 更高特异性的选择器 */ | |||
.announcement-container .more-content .collapsible-block .collapsible-content { | |||
display: none !important; | |||
} | |||
.announcement-container .more-content .collapsible-block.active .collapsible-content { | |||
display: block !important; | |||
} | } | ||
/* | /* Recent pages styles */ | ||
. | .main-page-content { | ||
display: flex; | display: flex; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
justify-content: space-between; | |||
margin-bottom: 2rem; | margin-bottom: 2rem; | ||
} | } | ||
. | .recent-pages-container { | ||
display: flex; | |||
flex-wrap: wrap; | |||
justify-content: space-between; | |||
width: 100%; | width: 100%; | ||
margin-bottom: 1rem; | |||
} | } | ||
. | .recent-pages-container .page-section { | ||
flex-basis: 48%; | |||
display: grid; | |||
grid-template-areas: "title" "page" "more"; | |||
grid-template-rows: auto 1fr auto; | |||
border: 1px solid #f0f0f0; | |||
} | } | ||
. | .recent-pages-container .section-title { | ||
grid-area: title; | |||
} | } | ||
. | .recent-pages-container .page-list { | ||
width: | grid-area: page; | ||
border: solid #f0f0f0; | |||
border-width: 0 1px; | |||
padding: 0.5rem 1rem; | |||
background-color: #fafafa; | |||
max-height: 15rem; | |||
overflow-y: auto; | |||
} | } | ||
. | .recent-pages-container .page-list a { | ||
padding: | display: block; | ||
padding: 0.3rem 0; | |||
border-bottom: 1px solid #f0f0f0; | |||
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; | |||
} | } | ||
/* | /* Featured content styles */ | ||
. | .featured-content-container { | ||
display: flex; | display: flex; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
justify-content: space-between; | justify-content: space-between; | ||
width: 100%; | width: 100%; | ||
} | } | ||
. | .featured-content-container .feature-item { | ||
flex-basis: 48%; | flex-basis: 48%; | ||
display: grid; | display: grid; | ||
grid-template-areas: "title" " | grid-template-areas: "title" "content" "more"; | ||
grid-template-rows: auto 1fr auto; | grid-template-rows: auto 1fr auto; | ||
border: 1px solid #f0f0f0; | border: 1px solid #f0f0f0; | ||
margin-bottom: 1rem; | |||
} | } | ||
. | .featured-content-container .section-title { | ||
grid-area: title; | grid-area: title; | ||
} | } | ||
. | .featured-content-container .feature-content { | ||
grid-area: | grid-area: content; | ||
border: solid #f0f0f0; | border: solid #f0f0f0; | ||
border-width: 0 1px; | border-width: 0 1px; | ||
padding: | padding: 1rem; | ||
background-color: #fafafa; | background-color: #fafafa; | ||
} | } | ||
. | .featured-content-container .feature-content .featured-title { | ||
font-size: 1.2rem; | |||
font-weight: bold; | |||
margin-bottom: 0.5rem; | |||
} | } | ||
. | .featured-content-container .feature-content .featured-author { | ||
font-size: 0.9rem; | |||
color: #666; | |||
margin-bottom: 0.5rem; | |||
} | } | ||
. | .featured-content-container .feature-content .featured-description { | ||
font-style: italic; | |||
color: #444; | |||
} | |||
.featured-content-container .see-more { | |||
grid-area: more; | grid-area: more; | ||
} | } | ||
/* | /* Tools and resources styles */ | ||
. | .tools-and-resources { | ||
margin-bottom: 2rem; | |||
} | } | ||
. | .tools-container { | ||
display: grid; | display: grid; | ||
grid-template- | grid-template-columns: 1fr 1fr; | ||
grid- | grid-gap: 1rem; | ||
} | } | ||
. | .tools-container .tool-item { | ||
background: #f5f5f5; | |||
color: #333; | |||
padding: 1rem; | |||
display: grid; | |||
grid- | grid-template-areas: | ||
"icon content" | |||
"title content"; | |||
grid-template-columns: max-content 1fr; | |||
grid-template-rows: 0.6fr 0.4fr; | |||
grid-gap: 0.5rem 1rem; | |||
border-left: 4px solid #3366cc; | |||
} | } | ||
. | .tools-container .tool-item .tool-icon { | ||
grid-area: icon; | |||
justify-self: center; | |||
align-self: end; | |||
} | } | ||
. | .tools-container .tool-item .tool-title { | ||
grid-area: title; | |||
text-align: center; | |||
} | } | ||
. | .tools-container .tool-item .tool-title a { | ||
color: #3366cc; | |||
font-weight: bold; | |||
} | } | ||
. | .tools-container .tool-item .tool-description { | ||
grid-area: | grid-area: content; | ||
align-self: center; | |||
} | } | ||
/* | /* News styles */ | ||
. | .news-container { | ||
display: flex; | |||
flex-wrap: wrap; | |||
border: 2px solid #f0f0f0; | |||
align-content: space-between; | |||
} | } | ||
. | .news-container .section-title { | ||
width: 100%; | |||
text-align: center; | |||
font-size: 1.5rem; | |||
border-left: none; | |||
border-bottom: 2px solid #f0f0f0; | |||
} | } | ||
. | .news-container .news-content { | ||
background: # | background-color: #fafafa; | ||
width: 100%; | |||
padding | padding: 0.75rem; | ||
} | |||
} | |||
. | .news-container .news-content .news-item { | ||
border-bottom: 1px solid #f0f0f0; | |||
padding: 0.5rem 0; | |||
} | } | ||
. | .news-container .news-content .news-item:last-child { | ||
border-bottom: none; | |||
} | } | ||
. | .news-container .news-content .news-title { | ||
font-weight: bold; | font-weight: bold; | ||
margin-bottom: 0.3rem; | |||
} | } | ||
. | .news-container .news-content .news-date { | ||
font-size: 0.8rem; | |||
color: #666; | |||
margin-bottom: 0.3rem; | |||
} | } | ||
.news-container .news-archive { | |||
.news-container { | background: #f0f0f0; | ||
text-align: right; | |||
align | |||
width: 100%; | width: 100%; | ||
padding: 0.3rem 1rem; | |||
} | } | ||
.news-container .news- | .news-container .news-archive a { | ||
color: #3366cc; | |||
} | } | ||
. | /* Carousel styles */ | ||
/* Import styles from main.scss file */ | |||
.carousel-container { | |||
position: relative; | |||
overflow: hidden; | |||
margin-bottom: 1rem; | |||
} | } | ||
. | .carousel-container .rolling { | ||
display: flex; | |||
flex-direction: column; | |||
height: 100%; | |||
position: relative; | |||
overflow: hidden; | |||
} | } | ||
. | /* Add more carousel styles converted from SCSS */ | ||
/* These would need to be adapted from the complex SCSS you provided */ | |||
margin-bottom: 0. | |||
/* Responsive styles */ | |||
@media (max-width: 767px) { | |||
.announcement-container .section-title { | |||
font-size: 1.2rem; | |||
} | |||
.recent-pages-container .page-section, | |||
.featured-content-container .feature-item { | |||
flex-basis: 100%; | |||
margin-bottom: 1.5rem; | |||
} | |||
.tools-container { | |||
grid-template-columns: 1fr; | |||
} | |||
} | |||
/* 为主内容区域添加半透明模糊白色效果 - 只针对最外层容器 */ | |||
.mw-body, | |||
#content { | |||
background-color: rgba(255, 255, 255, 0.85) !important; | |||
backdrop-filter: blur(8px) !important; | |||
-webkit-backdrop-filter: blur(8px) !important; | |||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.08) !important; | |||
border-radius: 12px !important; | |||
padding: 25px !important; | |||
margin-bottom: 20px !important; | |||
border: 1px solid rgba(0, 0, 0, 0.05) !important; | |||
min-height: 500px !important; | |||
} | } | ||
. | /* 确保标题与新的背景相协调 */ | ||
.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6 { | |||
border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important; | |||
padding-bottom: 0.3em !important; | |||
} | } | ||
/* ===== 变色龙皮肤顶栏毛玻璃效果 - 修复点击与悬停兼容版 ===== */ | |||
. | /* 1. 顶栏基础样式 - 半透明毛玻璃效果 */ | ||
background: | html body nav.navbar, | ||
text- | html body div.navbar, | ||
width: | html body .navbar-fixed-top, | ||
padding: 0. | html body .navbar-default, | ||
html body .navbar-collapse { | |||
background-color: rgba(255, 255, 255, 0.75) !important; | |||
backdrop-filter: blur(10px) saturate(180%) !important; | |||
-webkit-backdrop-filter: blur(10px) saturate(180%) !important; | |||
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08) !important; | |||
border: none !important; | |||
transition: all 0.3s ease !important; | |||
/* 解决z-index问题 */ | |||
position: relative !important; | |||
z-index: 9999 !important; | |||
} | |||
/* 2. 导航链接样式 */ | |||
.navbar .nav > li > a, | |||
.navbar-nav > li > a { | |||
color: rgba(0, 0, 0, 0.75) !important; | |||
transition: all 0.25s ease !important; | |||
padding: 15px 20px !important; | |||
font-weight: 500 !important; | |||
} | |||
/* 3. 链接悬停效果 */ | |||
.navbar .nav > li > a:hover, | |||
.navbar-nav > li > a:hover { | |||
color: rgba(0, 0, 0, 0.95) !important; | |||
background-color: rgba(0, 0, 0, 0.05) !important; | |||
transform: scale(1.05) !important; | |||
} | |||
/* 4. 下拉菜单样式 */ | |||
.dropdown-menu { | |||
background-color: rgba(255, 255, 255, 0.9) !important; | |||
backdrop-filter: blur(10px) !important; | |||
-webkit-backdrop-filter: blur(10px) !important; | |||
border-radius: 8px !important; | |||
border: none !important; | |||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important; | |||
padding: 8px 0 !important; | |||
overflow: hidden !important; | |||
/* z-index修复 */ | |||
z-index: 10000 !important; | |||
} | |||
/* 5. 下拉菜单项样式 */ | |||
.dropdown-menu > li > a { | |||
padding: 10px 20px !important; | |||
color: rgba(0, 0, 0, 0.75) !important; | |||
transition: all 0.2s ease !important; | |||
} | |||
/* 6. 下拉菜单项悬停效果 */ | |||
.dropdown-menu > li > a:hover { | |||
background-color: rgba(0, 0, 0, 0.08) !important; | |||
color: rgba(0, 0, 0, 0.95) !important; | |||
transform: translateX(5px) !important; | |||
font-weight: 500 !important; | |||
} | |||
/* 7. 确保主内容区域不会覆盖导航栏 */ | |||
.mw-body, | |||
#content, | |||
#mw-content-text, | |||
.mw-parser-output { | |||
z-index: 1 !important; | |||
position: relative !important; | |||
} | |||
/* 8. 移动设备特殊处理 */ | |||
@media (max-width: 767px) { | |||
.navbar-collapse { | |||
background-color: rgba(255, 255, 255, 0.95) !important; | |||
max-height: 80vh !important; | |||
overflow-y: auto !important; | |||
z-index: 10001 !important; | |||
} | |||
.navbar-nav .open .dropdown-menu { | |||
background-color: rgba(245, 245, 245, 0.9) !important; | |||
border-radius: 0 !important; | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
} | |||
.dropdown-menu > li > a:hover { | |||
transform: translateX(3px) !important; | |||
} | |||
} | |||
/* 9. 浏览器兼容性处理 */ | |||
@supports not (backdrop-filter: blur(10px)) { | |||
.navbar, .dropdown-menu { | |||
background-color: rgba(255, 255, 255, 0.95) !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, | ||
position: relative; | .navbar-personaltools > li:first-child > a::before { | ||
overflow: hidden; | content: ""; | ||
margin-bottom: 1rem; | 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; | |||
} | |||
/* 主页横幅样式 - 美化版 */ | |||
.main-page-banner { | |||
display: grid !important; | |||
grid-template-areas: | |||
"welcome welcome welcome" | |||
"discord faq join" !important; | |||
grid-template-columns: 1fr 1fr 1fr !important; | |||
grid-column-gap: 3% !important; | |||
margin-bottom: 4rem !important; | |||
width: 100% !important; | |||
box-sizing: border-box !important; | |||
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1) !important; | |||
position: relative !important; | |||
z-index: 1 !important; | |||
border-radius: 1rem !important; | |||
overflow: hidden !important; | |||
} | |||
/* 欢迎文本区域 */ | |||
.main-page-banner .welcome-text { | |||
grid-area: welcome !important; | |||
background: linear-gradient(135deg, rgba(235, 238, 245, 0.95), rgba(210, 225, 240, 0.95)) !important; | |||
color: #3a4a5a !important; | |||
font-style: normal !important; | |||
padding: 2rem !important; | |||
border-radius: 1rem 1rem 0 0 !important; | |||
margin: 0 !important; | |||
width: 100% !important; | |||
position: relative !important; | |||
overflow: hidden !important; | |||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important; | |||
transition: all 0.5s ease !important; | |||
z-index: 2 !important; | |||
} | |||
/* 欢迎文本背景图片 */ | |||
.main-page-banner .welcome-text::before { | |||
content: "" !important; | |||
position: absolute !important; | |||
top: 0 !important; | |||
left: 0 !important; | |||
width: 100% !important; | |||
height: 100% !important; | |||
background-image: url('/aoh2wiki/images/b/be/Banner_Default.jpg') !important; | |||
background-size: cover !important; | |||
background-position: center !important; | |||
opacity: 0.15 !important; | |||
z-index: -1 !important; | |||
transition: opacity 0.8s ease, transform 1.2s ease !important; | |||
transform: scale(1.05) !important; | |||
} | |||
.main-page-banner .welcome-text p { | |||
margin: 0 !important; | |||
color: #3a4a5a !important; | |||
font-weight: 500 !important; | |||
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important; | |||
position: relative !important; | |||
z-index: 2 !important; | |||
font-size: 1.1rem !important; | |||
line-height: 1.6 !important; | |||
} | |||
/* 导航链接区域 */ | |||
.main-page-banner .navigation-links { | |||
display: grid !important; | |||
grid-template-columns: 1fr 1fr 1fr !important; | |||
grid-column-gap: 3% !important; | |||
grid-area: discord / discord / join / join !important; | |||
width: 100% !important; | |||
background: linear-gradient(to bottom, rgba(225, 235, 245, 0.9), rgba(215, 225, 235, 0.9)) !important; | |||
padding: 0.5rem !important; | |||
border-radius: 0 0 1rem 1rem !important; | |||
} | |||
.main-page-banner .nav-button { | |||
background: linear-gradient(to bottom, #f0f5fa, #e8eef7) !important; | |||
border-radius: 0.7rem !important; | |||
margin: 0 0.5rem 2.5rem 0.5rem !important; | |||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; | |||
height: min-content !important; | |||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08) !important; | |||
position: relative !important; | |||
overflow: hidden !important; | |||
border: 1px solid rgba(210, 220, 235, 0.8) !important; | |||
} | |||
/* 导航按钮的背景图片 - 初始隐藏 */ | |||
.main-page-banner .nav-button::before { | |||
content: "" !important; | |||
position: absolute !important; | |||
top: 0 !important; | |||
left: 0 !important; | |||
width: 100% !important; | |||
height: 100% !important; | |||
background-size: cover !important; | |||
background-position: center !important; | |||
opacity: 0 !important; | |||
z-index: 0 !important; | |||
transition: opacity 0.6s ease !important; | |||
} | |||
/* 为每个按钮设置不同的背景图片 */ | |||
.main-page-banner .nav-button.discord::before { | |||
background-image: url('/aoh2wiki/images/b/be/Discord_Banner.jpg') !important; | |||
} | |||
.main-page-banner .nav-button.faq::before { | |||
background-image: url('/aoh2wiki/images/b/be/FAQ_Banner.jpg') !important; | |||
} | |||
.main-page-banner .nav-button.join::before { | |||
background-image: url('/aoh2wiki/images/b/be/Join_Banner.jpg') !important; | |||
} | |||
.main-page-banner .nav-button:hover { | |||
margin: 0 0.5rem 0.8rem 0.5rem !important; | |||
transform: translateY(-3px) !important; | |||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important; | |||
} | |||
/* 鼠标悬停时显示背景图片 */ | |||
.main-page-banner .nav-button:hover::before { | |||
opacity: 0.2 !important; | |||
} | |||
/* 鼠标悬停时变更欢迎区域的背景图片 */ | |||
.main-page-banner .navigation-links:hover ~ .welcome-text::before { | |||
opacity: 0.1 !important; | |||
} | |||
.main-page-banner .nav-button.discord:hover ~ .welcome-text::before, | |||
.main-page-banner:has(.nav-button.discord:hover) .welcome-text::before { | |||
background-image: url('/aoh2wiki/images/b/be/Discord_Banner.jpg') !important; | |||
opacity: 0.25 !important; | |||
transform: scale(1) !important; | |||
} | |||
.main-page-banner .nav-button.faq:hover ~ .welcome-text::before, | |||
.main-page-banner:has(.nav-button.faq:hover) .welcome-text::before { | |||
background-image: url('/aoh2wiki/images/b/be/FAQ_Banner.jpg') !important; | |||
opacity: 0.25 !important; | |||
transform: scale(1) !important; | |||
} | |||
.main-page-banner .nav-button.join:hover ~ .welcome-text::before, | |||
.main-page-banner:has(.nav-button.join:hover) .welcome-text::before { | |||
background-image: url('/aoh2wiki/images/b/be/Join_Banner.jpg') !important; | |||
opacity: 0.25 !important; | |||
transform: scale(1) !important; | |||
} | |||
.main-page-banner .nav-button a { | |||
display: block !important; | |||
padding: 1rem 0 !important; | |||
width: 100% !important; | |||
text-align: center !important; | |||
color: #4a5a6a !important; | |||
font-size: 1.15rem !important; | |||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; | |||
font-weight: bold !important; | |||
text-decoration: none !important; | |||
position: relative !important; | |||
z-index: 2 !important; | |||
} | |||
.main-page-banner .nav-button a:hover { | |||
padding: 1.5rem 0 !important; | |||
text-decoration: none !important; | |||
color: #3a4a5a !important; | |||
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5) !important; | |||
} | |||
/* 响应式调整 */ | |||
@media (max-width: 767px) { | |||
.main-page-banner { | |||
grid-template-areas: | |||
"welcome" | |||
"navigation" !important; | |||
grid-template-columns: 1fr !important; | |||
} | |||
.main-page-banner .welcome-text { | |||
border-radius: 1rem 1rem 0 0 !important; | |||
} | |||
.main-page-banner .navigation-links { | |||
grid-area: navigation !important; | |||
display: flex !important; | |||
flex-wrap: wrap !important; | |||
justify-content: space-around !important; | |||
padding: 0.8rem !important; | |||
} | |||
.main-page-banner .nav-button { | |||
flex: 1 !important; | |||
min-width: 30% !important; | |||
margin: 0 0.3rem 2rem 0.3rem !important; | |||
} | |||
.main-page-banner .nav-button:hover { | |||
margin: 0 0.3rem 0.8rem 0.3rem !important; | |||
} | |||
} | |||
/* 添加淡入动画效果 */ | |||
@keyframes fadeIn { | |||
from { opacity: 0; transform: translateY(10px); } | |||
to { opacity: 1; transform: translateY(0); } | |||
} | |||
.main-page-banner { | |||
animation: fadeIn 0.8s ease-out forwards !important; | |||
} | |||
/* 公告列表样式 */ | |||
.announcement-container .announcement-list { | |||
list-style: none; | |||
padding: 0; | |||
margin: 0; | |||
} | |||
.announcement-container .announcement-list li { | |||
padding: 10px 0; | |||
border-bottom: 1px solid #f0f0f0; | |||
margin: 0; | |||
line-height: 1.5; | |||
color: #333; | |||
} | |||
.announcement-container .announcement-list li:last-child { | |||
border-bottom: none; | |||
} | |||
/* 链接样式 */ | |||
.announcement-container .announcement-list li a { | |||
color: #3366cc; | |||
text-decoration: none; | |||
transition: color 0.2s ease; | |||
} | |||
.announcement-container .announcement-list li a:hover { | |||
color: #1a3366; | |||
text-decoration: underline; | |||
} | |||
/* 鼠标悬停效果 */ | |||
.announcement-container .announcement-list li:hover { | |||
background-color: #f9f9f9; | |||
} | |||
/* 公告容器样式 */ | |||
.announcement-container { | |||
display: flex; | |||
flex-wrap: wrap; | |||
border: 2px solid #f0f0f0; | |||
align-content: space-between; | |||
margin-bottom: 2rem; | |||
} | |||
.announcement-container .section-title { | |||
width: 100%; | |||
text-align: center; | |||
font-size: 1.5rem; | |||
background-color: #f0f0f0; | |||
color: #333; | |||
padding: 0.5rem 1rem; | |||
border-left: none; | |||
border-bottom: 2px solid #f0f0f0; | |||
} | |||
.announcement-container .announcement-content { | |||
background-color: #fafafa; | |||
width: 100%; | |||
padding: 0.75rem; | |||
} | |||
/* 公告项目样式 */ | |||
.announcement-container .announcement { | |||
padding: 12px; | |||
margin-bottom: 10px; | |||
background-color: #fff; | |||
border-left: 3px solid #3366cc; | |||
border-radius: 0 3px 3px 0; | |||
box-shadow: 0 1px 3px rgba(0,0,0,0.1); | |||
transition: all 0.2s ease; | |||
} | |||
.announcement-container .announcement:last-child { | |||
margin-bottom: 0; | |||
} | |||
.announcement-container .announcement:hover { | |||
background-color: #f8f8f8; | |||
border-left-width: 5px; | |||
transform: translateX(2px); | |||
} | |||
/* 公告中的链接样式 */ | |||
.announcement-container .announcement a { | |||
color: #3366cc; | |||
text-decoration: none; | |||
transition: color 0.2s ease; | |||
} | |||
.announcement-container .announcement a:hover { | |||
color: #1a3366; | |||
text-decoration: underline; | |||
} | |||
/* 粗体文字样式 */ | |||
.announcement-container .announcement strong, | |||
.announcement-container .announcement b { | |||
color: #333; | |||
} | |||
/* 折叠区域样式 */ | |||
.announcement-container .more-content { | |||
width: 100%; | |||
border-top: 2px solid #f0f0f0; | |||
} | |||
.announcement-container .collapsible-block .collapsible-header { | |||
padding: 1rem 0; | |||
text-align: center; | |||
background: rgba(240, 240, 240, 0.7); | |||
cursor: pointer; | |||
transition: background 0.2s ease; | |||
} | |||
.announcement-container .collapsible-block .collapsible-header:hover { | |||
background: rgba(240, 240, 240, 1); | |||
} | |||
.announcement-container .collapsible-block .collapsible-content { | |||
padding: 1rem; | |||
background: #f5f5f5; | |||
} | |||
/* 响应式调整 */ | |||
@media (max-width: 767px) { | |||
.announcement-container .section-title { | |||
font-size: 1.2rem; | |||
} | |||
.announcement-container .announcement { | |||
padding: 10px; | |||
} | |||
} | } | ||
.gallery { | |||
display: flex !important; | |||
display: flex; | flex-direction: row !important; | ||
flex-direction: | flex-wrap: wrap !important; | ||
} | } | ||
img { | |||
display: inline-block !important; | |||
} | |||
} | |||
/* [[Category:在模板名字空间下的CSS页面]] */ | /* [[Category:在模板名字空间下的CSS页面]] */ | ||
2025年6月9日 (一) 20:32的最新版本
/* 这里放置的CSS将应用于所有皮肤 */
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");
@import url("https://fastly.jsdelivr.net/gh/hoah2333/Fonts@main/Typeface-VonwaonBitmap-16px.css");
@import url("https://fastly.jsdelivr.net/gh/hoah2333/Fonts@main/Typeface-VonwaonBitmap-12px.css");
@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 {
--link-color: #0645ad;
--link-color-active: #faa700;
--custom-background-blue: #ccf;
--custom-background-cyan: #cef;
--custom-background-green: #cfc;
--custom-background-gray: #d2d2d2;
--custom-background-grey: var(--custom-background-gray);
--custom-background-magenta: #fdf;
--custom-background-orange: #fdb;
--custom-background-purple: #ecf;
--custom-background-red: #fcc;
--custom-background-yellow: #ffc;
--custom-border-blue: #36e;
--custom-border-cyan: #9df;
--custom-border-green: #5d5;
--custom-border-gray: #bbb;
--custom-border-grey: var(--custom-border-gray);
--custom-border-magenta: #f9f;
--custom-border-orange: #f90;
--custom-border-purple: #96c;
--custom-border-red: #e44;
--custom-border-yellow: #fc3;
--custom-closed-topic-neutral: #eef;
--custom-closed-topic-no: #fee;
--custom-closed-topic-yes: #efe;
--custom-code-background: #f8f9fa;
--custom-load-page-button-color: #fff8;
--custom-main-page-background: #fcfcfc;
--custom-main-page-border: var(--custom-border-gray);
--custom-main-page-edition-subheader: #333;
--custom-mcwiki-header-color: #bcd4f5;
--custom-navbox-background: #fff;
--custom-navbox-top: #ccc;
--custom-navbox-middle: #ddd;
--custom-navbox-thru: #eee;
--custom-nbt-inherit-color: #e6e6fa;
--custom-table-background: #f8f9fa;
--custom-table-alternate-background: #f0f1f2;
--custom-table-choice-always: #003600;
--custom-table-choice-always-background: #80d080;
--custom-table-choice-default: #fff;
--custom-table-choice-in-off-background: #060;
--custom-table-choice-in-on-background: #0c0;
--custom-table-choice-na: #000;
--custom-table-choice-na-background: #fff;
--custom-table-choice-neutral: #634800;
--custom-table-choice-neutral-background: #ffeb9c;
--custom-table-choice-never: #3c0404;
--custom-table-choice-never-background: #ff8080;
--custom-table-choice-no: #840606;
--custom-table-choice-no-background: #ffc7ce;
--custom-table-choice-out-off-background: #900;
--custom-table-choice-out-on-background: #f00;
--custom-table-choice-partial: #665400;
--custom-table-choice-partial-background: #ffd;
--custom-table-choice-planned: #0131b7;
--custom-table-choice-planned-background: #dfdfff;
--custom-table-choice-rarely: #533400;
--custom-table-choice-rarely-background: #fdce5e;
--custom-table-choice-unknown: #222;
--custom-table-choice-unknown-background: #ccc;
--custom-table-choice-yes: #005600;
--custom-table-choice-yes-background: #c6efce;
--custom-table-header-background: #eaecf0;
--custom-topic-30-days: #bbb;
--custom-topic-7-days: #ddd;
/* 字体设置 - 保持原有字体 */
--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;
}
/* 应用全局字体 */
body {
font-family: var(--body-font) !important;
font-size: var(--base-font-size) !important;
line-height: 1.5 !important;
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));
}
.notaninfobox {
position: relative;
clear: right;
margin: 0 0 1em 1em;
width: 350px;
font-size: 90%;
background-color: var(--custom-table-background);
float: right;
border: 1px solid var(--custom-border-gray);
padding: 2px;
overflow: auto;
z-index: 1;
overflow-wrap: anywhere;
}
@media all and (max-width: 511px) {
.notaninfobox {
float: none;
margin-left: 0;
width: auto;
}
}
.infobox tr:not(:first-child) td {
border-bottom: 1px solid #ddd;
}
@media all and (max-width: 337px) {
.notaninfobox {
margin-left: -16px;
margin-right: -16px;
border-left: none;
border-right: none;
}
}
.notaninfobox > .infobox-title {
font-weight: bold;
text-align: center;
font-size: 120%;
background-color: #BCD4F5;
}
.infobox-imagearea {
text-align: center;
padding: 4px;
}
.infobox-imagearea > div:not(:first-child) {
padding-top: 1em;
}
/* Horizontally centre animated images */
.infobox-imagearea .animated {
display: inline-flex;
align-items: center;
}
.notaninfobox .infobox-rows {
display: grid;
grid-template-columns: max-content 1fr;
gap: 1px;
}
.infobox .plainlinks a {
color: #0000EE !important;
text-decoration: underline;
}
.infobox .plainlinks a:visited {
color: #551A8B !important;
}
.notaninfobox .infobox-rows .infobox-row {
display: contents;
}
.notaninfobox .infobox-row .infobox-row-label,
.notaninfobox .infobox-row .infobox-row-field {
padding: 4px;
}
.notaninfobox .infobox-row .infobox-row-label {
font-weight: bold;
display: flex;
align-items: center;
}
.community-updates {
background: #fff0e6;
padding: 15px;
border-radius: 10px;
margin-top: 20px;
}
.community-updates ul li {
list-style: none;
padding: 10px;
background: #fff;
margin: 5px 0;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.community-updates ul li a {
color: #337ab7;
text-decoration: none;
font-weight: bold;
}
.notaninfobox .infobox-rows .infobox-row:nth-child(2n) .infobox-row-label,
.notaninfobox .infobox-rows .infobox-row:nth-child(2n) .infobox-row-field {
background-color: var(--custom-table-alternate-background);
}
/* Infoboxes with tabber */
.tabber-container-infobox .tabber .tabbertab,
.tabber-container-infobox ul.tabbernav li a,
.tabber-container-infobox ul.tabbernav li.tabberactive a {
background: none;
border: none;
}
.tabber-container-infobox .tabber .tabbertab {
padding: 0;
}
.tabber-container-infobox ul.tabbernav {
font: inherit;
font-size: 100%;
}
.tabber-container-infobox ul.tabbernav li a:hover {
color: #000;
}
.tabber-container-infobox ul.tabbernav > li {
margin-bottom: 5px;
padding: 0;
}
.announcement-content span {
display: inline-block;
white-space: nowrap;
animation: marquee 15s linear infinite;
}
.mw-mainpage-header {
background: linear-gradient(to bottom right, #B9A3FF, #8C47E7);
box-shadow: grey 0px 0px 5px;
border-radius: 20px;
color: #000;
font-size: 1.5em;
text-shadow: white 0px 0px 10px, white 0px 0px 10px;
padding: 20px;
text-align: center;
}
.mw-mainpage-header h1 {
font-size: 2.5em;
margin-bottom: 10px;
}
.mw-mainpage-header p {
font-size: 1.2em;
margin: 5px 0;
}
.tabber-container-infobox ul.tabbernav > li > a {
color: #595959;
padding-bottom: 1px;
display: block;
}
/* To prevent the tabs from jumping around when they become active or inactive
* due to the font-weight changing from normal to bold and vice versa, add an
* invisible ::before which contains the same text as the tab's text, but
* bolded. This way the element in which unbolded text sits is sized according
* to the bolded text, preventing it from resizing upon being selected.
*/
.tabber-container-infobox ul.tabbernav > li > a::before {
display: block;
content: attr(alt);
font-weight: bold;
height: 0;
color: transparent;
overflow: hidden;
visibility: hidden;
}
.tabber-container-infobox ul.tabbernav > li.tabberactive {
border: none;
}
.modulebox {
border: 1px solid #ccc;
padding: 10px;
margin: 10px 0;
background-color: #f9f9f9;
}
.tabber-container-infobox ul.tabbernav > li.tabberactive > a {
font-weight: bold;
color: var(--link-color);
border-bottom: 2px solid var(--custom-mcwiki-header-color);
}
.infobox-rows p {
margin: 0;
}
/* Merge adjacent dls in the infobox, since they're usually supposed to be one,
* but the wiki screws up sometimes.
*/
.infobox-rows dl + dl {
margin-top: -0.4em;
}
.infobox-rows dl:last-child {
margin-bottom: 0.2em;
}
.infobox-footer {
text-align: center;
}
/* 页面底部导航框（2011年8月16日引自中文维基）(所谓大家族模板) */
table.navbox{
border:1px solid #aaa;
clear:both;
margin:auto;
padding:1px;
text-align:center;
width:100%;
}
table.navbox + table.navbox{
margin-top:-1px;
}
.navbox-title,
.navbox-abovebelow,
table.navbox th{
padding-left:1em;
padding-right:1em;
text-align:center;
}
.navbox-group{
font-weight:700;
white-space:nowrap;
}
.navbox,
.navbox-subgroup{
background:none repeat scroll 0 0 var(--theme-card-background-color, #fdfdfd);
}
.navbox-list{
border-color:#fdfdfd;
}
.navbox-title,
table.navbox th{
background:none repeat scroll 0 0 #a5e4a5;
}
.navbox-abovebelow,
.navbox-group,
.navbox-subgroup .navbox-title{
background:none repeat scroll 0 0 #c0ecc0;
}
.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow{
background:none repeat scroll 0 0 #e6f6e6;
}
.navbox-even{
background:none repeat scroll 0 0 #f5fcf5;
}
.navbox-odd{
background:none repeat scroll 0 0 #fdfdfd;
}
.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 {*/
/* display:none;*/
/*}*/
/*“查·论·编”在小屏幕时基本用不到（也很难点到）*/
.navbox-title>div{
display: none;
}
/*把内边距去掉*/
.navbox-group,
.navbox-group >div{
padding-left: 0 !important;
padding-right: 0 !important;
text-align: center;
}
}
/* h1标题字体 */
body h1 {
font-family: "Microsoft YaHei", "微软雅黑", sans-serif !important;
}
/* 本段内容来自萌娘百科 https://zh.moegirl.org.cn/MediaWiki:Gadget-site-styles.css 感谢贡献！*/
/* 版权协定：知识共享 署名-非商业性使用-相同方式共享 3.0 */
.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;
}
/*
该文档为一个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页面]] */
/*
.colormu_toggle_on是为了黑幕开关(MediaWiki:Gadget-heimu-toggle.js)做适配。
.colormu-drk、.colormu-bri分别是暗色背景和亮色背景，
暗色背景的文字通常是浅色，在半隐背景后，颜色需要变成深色。
*/
.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;
}
/* === 轮播图容器 === */
.mw-carousel {
position: relative;
width: 100%;
max-width: 960px;
margin: 2em auto;
overflow: hidden;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
aspect-ratio: 16 / 9;
background-color: #f8f9fa;
}
/* === 图片区域 === */
.mw-carousel .carousel-image {
width: 100%;
height: 100%;
position: relative;
}
.mw-carousel .carousel-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* === 默认状态下的文字：底部横条，文字靠左 === */
.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: 2em 1.5em 1.2em;
text-align: left;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
z-index: 2;
transform: translateY(0);
}
/* === 悬停时的文字效果：文字全屏覆盖，背景渐变 === */
.mw-carousel:hover .carousel-caption {
top: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
transform: translateY(0);
background: rgba(0, 0, 0, 0.6);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 2em;
border-radius: 0;
backdrop-filter: blur(3px);
}
/* === 标题 + 描述样式 === */
.mw-carousel .carousel-caption h3 {
margin: 0 0 0.5em;
font-size: 1.6em;
font-weight: 600;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
transform: translateY(0);
transition: transform 0.4s ease;
}
.mw-carousel .carousel-caption p {
margin: 0;
font-size: 1.1em;
line-height: 1.4;
max-width: 80%;
opacity: 1;
transform: translateY(0);
transition: all 0.4s ease 0.1s;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.mw-carousel:hover .carousel-caption h3 {
transform: translateY(0);
}
.mw-carousel:hover .carousel-caption p {
opacity: 1;
transform: translateY(0);
}
/* === 左右切换按钮（垂直居中） === */
.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 1.5em;
opacity: 0;
transition: opacity 0.3s ease;
}
.mw-carousel:hover .carousel-navigation {
opacity: 1;
}
.mw-carousel .carousel-prev,
.mw-carousel .carousel-next {
background-color: rgba(255, 255, 255, 0.8);
border: none;
border-radius: 50%;
width: 48px;
height: 48px;
font-size: 22px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
color: #333;
}
.mw-carousel .carousel-prev:hover,
.mw-carousel .carousel-next:hover {
background-color: rgba(255, 255, 255, 0.95);
transform: scale(1.05);
}
/* === 指示器 - 修改为底部右侧 === */
.mw-carousel .carousel-indicators {
position: absolute;
bottom: 15px;
right: 20px; /* 改为右对齐 */
left: auto; /* 取消左对齐 */
transform: none; /* 取消水平居中变换 */
display: flex;
gap: 10px;
z-index: 4;
padding: 0.5em 1em;
border-radius: 20px;
background-color: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(5px);
}
.mw-carousel .carousel-indicators .indicator {
width: 10px;
height: 10px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 50%;
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);
}
.mw-carousel .carousel-indicators .indicator:hover {
background-color: rgba(255, 255, 255, 0.8);
}
/* === 图片全局统一显示效果 === */
img {
max-width: 100%;
height: auto;
display: block;
}
/* === 添加图片过渡效果 === */
.mw-carousel .carousel-image img {
transition: transform 0.5s ease;
}
.mw-carousel:hover .carousel-image img {
transform: scale(1.03);
}
/* Common styles */
.section-title {
background-color: #f0f0f0;
color: #333;
font-weight: bold;
padding: 0.5rem 1rem;
font-size: 1.2rem;
border-left: 4px solid #3366cc;
}
.see-more {
text-align: right;
padding: 0.3rem 1rem;
font-size: 0.9rem;
background-color: #f5f5f5;
}
.see-more a {
color: #3366cc;
}
/* 主页横幅样式 */
.main-page-banner {
display: grid;
grid-template-areas:
"welcome welcome welcome"
"discord faq join";
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 3%;
margin-bottom: 4rem;
width: 100%;
box-sizing: border-box;
}
/* 欢迎文本区域 */
.main-page-banner .welcome-text {
grid-area: welcome;
background-color: rgb(var(--gray-monochrome, 66, 66, 72));
color: rgb(var(--white-monochrome, 252, 252, 252));
font-style: italic;
padding: 1.5rem;
border-radius: 1rem 1rem 0 0;
margin: 0;
width: 100%;
}
.main-page-banner .welcome-text p {
margin: 0;
color: rgb(var(--white-monochrome, 252, 252, 252));
}
/* 导航链接区域 */
.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%;
}
.main-page-banner .nav-button {
background-color: rgb(var(--gray-monochrome, 66, 66, 72));
border-radius: 0 0 1rem 1rem;
margin: 0 0 4rem 0;
transition: margin 150ms cubic-bezier(0.4, 0, 0.2, 1);
height: min-content;
}
.main-page-banner .nav-button:hover {
margin: 0 0 1rem 0;
}
.main-page-banner .nav-button a {
display: block;
padding: 0.5rem 0;
width: 100%;
text-align: center;
color: rgb(var(--white-monochrome, 0, 0, 0));
font-size: 1.25rem;
transition: padding 150ms cubic-bezier(0.4, 0, 0.2, 1);
font-weight: bold;
text-decoration: none;
}
.main-page-banner .nav-button a:hover {
padding: 2rem 0;
text-decoration: none;
}
/* 针对背景图片的设置 */
.main-page-banner {
position: relative;
z-index: 1;
}
.main-page-banner::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('您的背景图片URL');
background-size: cover;
background-position: center;
opacity: 0.3; /* 调整透明度使文字可读 */
z-index: -1;
border-radius: 1rem;
}
/* 响应式布局 */
@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;
width: 100%;
overflow: visible;
}
.main-page-banner .nav-button {
flex: 1;
margin: 0 0 4rem 0;
}
.main-page-banner .nav-button:not(:last-child) {
margin-right: 3%;
}
.main-page-banner .nav-button a {
font-size: 1.1rem;
}
.main-page-banner .nav-button:hover {
margin: 0 0 1rem 0;
}
}
/* Announcement styles */
.announcement-container {
display: flex;
flex-wrap: wrap;
border: 2px solid #f0f0f0;
align-content: space-between;
margin-bottom: 2rem;
}
.announcement-container .section-title {
width: 100%;
text-align: center;
font-size: 1.5rem;
border-left: none;
border-bottom: 2px solid #f0f0f0;
}
.announcement-container .announcement-content {
background-color: #fafafa;
width: 100%;
padding: 0.75rem;
}
.announcement-container .more-content {
width: 100%;
border-top: 2px solid #f0f0f0;
}
.announcement-container .collapsible-block.active .collapsible-content {
display: block;
}
.announcement-container .collapsible-block {
width: 100%;
}
/* 更高特异性的选择器 */
.announcement-container .more-content .collapsible-block .collapsible-content {
display: none !important;
}
.announcement-container .more-content .collapsible-block.active .collapsible-content {
display: block !important;
}
.announcement-container .collapsible-header {
padding: 1rem 0;
text-align: center;
background: rgba(240, 240, 240, 0.7);
cursor: pointer;
}
.announcement-container .collapsible-header:hover {
background: rgba(240, 240, 240, 1);
}
.announcement-container .collapsible-content {
padding: 1rem;
background: #f5f5f5;
}
/* 更高特异性的选择器 */
.announcement-container .more-content .collapsible-block .collapsible-content {
display: none !important;
}
.announcement-container .more-content .collapsible-block.active .collapsible-content {
display: block !important;
}
/* Recent pages styles */
.main-page-content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 2rem;
}
.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%;
display: grid;
grid-template-areas: "title" "page" "more";
grid-template-rows: auto 1fr auto;
border: 1px solid #f0f0f0;
}
.recent-pages-container .section-title {
grid-area: title;
}
.recent-pages-container .page-list {
grid-area: page;
border: solid #f0f0f0;
border-width: 0 1px;
padding: 0.5rem 1rem;
background-color: #fafafa;
max-height: 15rem;
overflow-y: auto;
}
.recent-pages-container .page-list a {
display: block;
padding: 0.3rem 0;
border-bottom: 1px solid #f0f0f0;
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;
}
/* Featured content styles */
.featured-content-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
}
.featured-content-container .feature-item {
flex-basis: 48%;
display: grid;
grid-template-areas: "title" "content" "more";
grid-template-rows: auto 1fr auto;
border: 1px solid #f0f0f0;
margin-bottom: 1rem;
}
.featured-content-container .section-title {
grid-area: title;
}
.featured-content-container .feature-content {
grid-area: content;
border: solid #f0f0f0;
border-width: 0 1px;
padding: 1rem;
background-color: #fafafa;
}
.featured-content-container .feature-content .featured-title {
font-size: 1.2rem;
font-weight: bold;
margin-bottom: 0.5rem;
}
.featured-content-container .feature-content .featured-author {
font-size: 0.9rem;
color: #666;
margin-bottom: 0.5rem;
}
.featured-content-container .feature-content .featured-description {
font-style: italic;
color: #444;
}
.featured-content-container .see-more {
grid-area: more;
}
/* Tools and resources styles */
.tools-and-resources {
margin-bottom: 2rem;
}
.tools-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 1rem;
}
.tools-container .tool-item {
background: #f5f5f5;
color: #333;
padding: 1rem;
display: grid;
grid-template-areas:
"icon content"
"title content";
grid-template-columns: max-content 1fr;
grid-template-rows: 0.6fr 0.4fr;
grid-gap: 0.5rem 1rem;
border-left: 4px solid #3366cc;
}
.tools-container .tool-item .tool-icon {
grid-area: icon;
justify-self: center;
align-self: end;
}
.tools-container .tool-item .tool-title {
grid-area: title;
text-align: center;
}
.tools-container .tool-item .tool-title a {
color: #3366cc;
font-weight: bold;
}
.tools-container .tool-item .tool-description {
grid-area: content;
align-self: center;
}
/* News styles */
.news-container {
display: flex;
flex-wrap: wrap;
border: 2px solid #f0f0f0;
align-content: space-between;
}
.news-container .section-title {
width: 100%;
text-align: center;
font-size: 1.5rem;
border-left: none;
border-bottom: 2px solid #f0f0f0;
}
.news-container .news-content {
background-color: #fafafa;
width: 100%;
padding: 0.75rem;
}
.news-container .news-content .news-item {
border-bottom: 1px solid #f0f0f0;
padding: 0.5rem 0;
}
.news-container .news-content .news-item:last-child {
border-bottom: none;
}
.news-container .news-content .news-title {
font-weight: bold;
margin-bottom: 0.3rem;
}
.news-container .news-content .news-date {
font-size: 0.8rem;
color: #666;
margin-bottom: 0.3rem;
}
.news-container .news-archive {
background: #f0f0f0;
text-align: right;
width: 100%;
padding: 0.3rem 1rem;
}
.news-container .news-archive a {
color: #3366cc;
}
/* Carousel styles */
/* Import styles from main.scss file */
.carousel-container {
position: relative;
overflow: hidden;
margin-bottom: 1rem;
}
.carousel-container .rolling {
display: flex;
flex-direction: column;
height: 100%;
position: relative;
overflow: hidden;
}
/* Add more carousel styles converted from SCSS */
/* These would need to be adapted from the complex SCSS you provided */
/* Responsive styles */
@media (max-width: 767px) {
.announcement-container .section-title {
font-size: 1.2rem;
}
.recent-pages-container .page-section,
.featured-content-container .feature-item {
flex-basis: 100%;
margin-bottom: 1.5rem;
}
.tools-container {
grid-template-columns: 1fr;
}
}
/* 为主内容区域添加半透明模糊白色效果 - 只针对最外层容器 */
.mw-body,
#content {
background-color: rgba(255, 255, 255, 0.85) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.08) !important;
border-radius: 12px !important;
padding: 25px !important;
margin-bottom: 20px !important;
border: 1px solid rgba(0, 0, 0, 0.05) !important;
min-height: 500px !important;
}
/* 确保标题与新的背景相协调 */
.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6 {
border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
padding-bottom: 0.3em !important;
}
/* ===== 变色龙皮肤顶栏毛玻璃效果 - 修复点击与悬停兼容版 ===== */
/* 1. 顶栏基础样式 - 半透明毛玻璃效果 */
html body nav.navbar,
html body div.navbar,
html body .navbar-fixed-top,
html body .navbar-default,
html body .navbar-collapse {
background-color: rgba(255, 255, 255, 0.75) !important;
backdrop-filter: blur(10px) saturate(180%) !important;
-webkit-backdrop-filter: blur(10px) saturate(180%) !important;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08) !important;
border: none !important;
transition: all 0.3s ease !important;
/* 解决z-index问题 */
position: relative !important;
z-index: 9999 !important;
}
/* 2. 导航链接样式 */
.navbar .nav > li > a,
.navbar-nav > li > a {
color: rgba(0, 0, 0, 0.75) !important;
transition: all 0.25s ease !important;
padding: 15px 20px !important;
font-weight: 500 !important;
}
/* 3. 链接悬停效果 */
.navbar .nav > li > a:hover,
.navbar-nav > li > a:hover {
color: rgba(0, 0, 0, 0.95) !important;
background-color: rgba(0, 0, 0, 0.05) !important;
transform: scale(1.05) !important;
}
/* 4. 下拉菜单样式 */
.dropdown-menu {
background-color: rgba(255, 255, 255, 0.9) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border-radius: 8px !important;
border: none !important;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;
padding: 8px 0 !important;
overflow: hidden !important;
/* z-index修复 */
z-index: 10000 !important;
}
/* 5. 下拉菜单项样式 */
.dropdown-menu > li > a {
padding: 10px 20px !important;
color: rgba(0, 0, 0, 0.75) !important;
transition: all 0.2s ease !important;
}
/* 6. 下拉菜单项悬停效果 */
.dropdown-menu > li > a:hover {
background-color: rgba(0, 0, 0, 0.08) !important;
color: rgba(0, 0, 0, 0.95) !important;
transform: translateX(5px) !important;
font-weight: 500 !important;
}
/* 7. 确保主内容区域不会覆盖导航栏 */
.mw-body,
#content,
#mw-content-text,
.mw-parser-output {
z-index: 1 !important;
position: relative !important;
}
/* 8. 移动设备特殊处理 */
@media (max-width: 767px) {
.navbar-collapse {
background-color: rgba(255, 255, 255, 0.95) !important;
max-height: 80vh !important;
overflow-y: auto !important;
z-index: 10001 !important;
}
.navbar-nav .open .dropdown-menu {
background-color: rgba(245, 245, 245, 0.9) !important;
border-radius: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.dropdown-menu > li > a:hover {
transform: translateX(3px) !important;
}
}
/* 9. 浏览器兼容性处理 */
@supports not (backdrop-filter: blur(10px)) {
.navbar, .dropdown-menu {
background-color: rgba(255, 255, 255, 0.95) !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;
}
/* 主页横幅样式 - 美化版 */
.main-page-banner {
display: grid !important;
grid-template-areas:
"welcome welcome welcome"
"discord faq join" !important;
grid-template-columns: 1fr 1fr 1fr !important;
grid-column-gap: 3% !important;
margin-bottom: 4rem !important;
width: 100% !important;
box-sizing: border-box !important;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1) !important;
position: relative !important;
z-index: 1 !important;
border-radius: 1rem !important;
overflow: hidden !important;
}
/* 欢迎文本区域 */
.main-page-banner .welcome-text {
grid-area: welcome !important;
background: linear-gradient(135deg, rgba(235, 238, 245, 0.95), rgba(210, 225, 240, 0.95)) !important;
color: #3a4a5a !important;
font-style: normal !important;
padding: 2rem !important;
border-radius: 1rem 1rem 0 0 !important;
margin: 0 !important;
width: 100% !important;
position: relative !important;
overflow: hidden !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
transition: all 0.5s ease !important;
z-index: 2 !important;
}
/* 欢迎文本背景图片 */
.main-page-banner .welcome-text::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background-image: url('/aoh2wiki/images/b/be/Banner_Default.jpg') !important;
background-size: cover !important;
background-position: center !important;
opacity: 0.15 !important;
z-index: -1 !important;
transition: opacity 0.8s ease, transform 1.2s ease !important;
transform: scale(1.05) !important;
}
.main-page-banner .welcome-text p {
margin: 0 !important;
color: #3a4a5a !important;
font-weight: 500 !important;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
position: relative !important;
z-index: 2 !important;
font-size: 1.1rem !important;
line-height: 1.6 !important;
}
/* 导航链接区域 */
.main-page-banner .navigation-links {
display: grid !important;
grid-template-columns: 1fr 1fr 1fr !important;
grid-column-gap: 3% !important;
grid-area: discord / discord / join / join !important;
width: 100% !important;
background: linear-gradient(to bottom, rgba(225, 235, 245, 0.9), rgba(215, 225, 235, 0.9)) !important;
padding: 0.5rem !important;
border-radius: 0 0 1rem 1rem !important;
}
.main-page-banner .nav-button {
background: linear-gradient(to bottom, #f0f5fa, #e8eef7) !important;
border-radius: 0.7rem !important;
margin: 0 0.5rem 2.5rem 0.5rem !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
height: min-content !important;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08) !important;
position: relative !important;
overflow: hidden !important;
border: 1px solid rgba(210, 220, 235, 0.8) !important;
}
/* 导航按钮的背景图片 - 初始隐藏 */
.main-page-banner .nav-button::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background-size: cover !important;
background-position: center !important;
opacity: 0 !important;
z-index: 0 !important;
transition: opacity 0.6s ease !important;
}
/* 为每个按钮设置不同的背景图片 */
.main-page-banner .nav-button.discord::before {
background-image: url('/aoh2wiki/images/b/be/Discord_Banner.jpg') !important;
}
.main-page-banner .nav-button.faq::before {
background-image: url('/aoh2wiki/images/b/be/FAQ_Banner.jpg') !important;
}
.main-page-banner .nav-button.join::before {
background-image: url('/aoh2wiki/images/b/be/Join_Banner.jpg') !important;
}
.main-page-banner .nav-button:hover {
margin: 0 0.5rem 0.8rem 0.5rem !important;
transform: translateY(-3px) !important;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}
/* 鼠标悬停时显示背景图片 */
.main-page-banner .nav-button:hover::before {
opacity: 0.2 !important;
}
/* 鼠标悬停时变更欢迎区域的背景图片 */
.main-page-banner .navigation-links:hover ~ .welcome-text::before {
opacity: 0.1 !important;
}
.main-page-banner .nav-button.discord:hover ~ .welcome-text::before,
.main-page-banner:has(.nav-button.discord:hover) .welcome-text::before {
background-image: url('/aoh2wiki/images/b/be/Discord_Banner.jpg') !important;
opacity: 0.25 !important;
transform: scale(1) !important;
}
.main-page-banner .nav-button.faq:hover ~ .welcome-text::before,
.main-page-banner:has(.nav-button.faq:hover) .welcome-text::before {
background-image: url('/aoh2wiki/images/b/be/FAQ_Banner.jpg') !important;
opacity: 0.25 !important;
transform: scale(1) !important;
}
.main-page-banner .nav-button.join:hover ~ .welcome-text::before,
.main-page-banner:has(.nav-button.join:hover) .welcome-text::before {
background-image: url('/aoh2wiki/images/b/be/Join_Banner.jpg') !important;
opacity: 0.25 !important;
transform: scale(1) !important;
}
.main-page-banner .nav-button a {
display: block !important;
padding: 1rem 0 !important;
width: 100% !important;
text-align: center !important;
color: #4a5a6a !important;
font-size: 1.15rem !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
font-weight: bold !important;
text-decoration: none !important;
position: relative !important;
z-index: 2 !important;
}
.main-page-banner .nav-button a:hover {
padding: 1.5rem 0 !important;
text-decoration: none !important;
color: #3a4a5a !important;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5) !important;
}
/* 响应式调整 */
@media (max-width: 767px) {
.main-page-banner {
grid-template-areas:
"welcome"
"navigation" !important;
grid-template-columns: 1fr !important;
}
.main-page-banner .welcome-text {
border-radius: 1rem 1rem 0 0 !important;
}
.main-page-banner .navigation-links {
grid-area: navigation !important;
display: flex !important;
flex-wrap: wrap !important;
justify-content: space-around !important;
padding: 0.8rem !important;
}
.main-page-banner .nav-button {
flex: 1 !important;
min-width: 30% !important;
margin: 0 0.3rem 2rem 0.3rem !important;
}
.main-page-banner .nav-button:hover {
margin: 0 0.3rem 0.8rem 0.3rem !important;
}
}
/* 添加淡入动画效果 */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.main-page-banner {
animation: fadeIn 0.8s ease-out forwards !important;
}
/* 公告列表样式 */
.announcement-container .announcement-list {
list-style: none;
padding: 0;
margin: 0;
}
.announcement-container .announcement-list li {
padding: 10px 0;
border-bottom: 1px solid #f0f0f0;
margin: 0;
line-height: 1.5;
color: #333;
}
.announcement-container .announcement-list li:last-child {
border-bottom: none;
}
/* 链接样式 */
.announcement-container .announcement-list li a {
color: #3366cc;
text-decoration: none;
transition: color 0.2s ease;
}
.announcement-container .announcement-list li a:hover {
color: #1a3366;
text-decoration: underline;
}
/* 鼠标悬停效果 */
.announcement-container .announcement-list li:hover {
background-color: #f9f9f9;
}
/* 公告容器样式 */
.announcement-container {
display: flex;
flex-wrap: wrap;
border: 2px solid #f0f0f0;
align-content: space-between;
margin-bottom: 2rem;
}
.announcement-container .section-title {
width: 100%;
text-align: center;
font-size: 1.5rem;
background-color: #f0f0f0;
color: #333;
padding: 0.5rem 1rem;
border-left: none;
border-bottom: 2px solid #f0f0f0;
}
.announcement-container .announcement-content {
background-color: #fafafa;
width: 100%;
padding: 0.75rem;
}
/* 公告项目样式 */
.announcement-container .announcement {
padding: 12px;
margin-bottom: 10px;
background-color: #fff;
border-left: 3px solid #3366cc;
border-radius: 0 3px 3px 0;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
transition: all 0.2s ease;
}
.announcement-container .announcement:last-child {
margin-bottom: 0;
}
.announcement-container .announcement:hover {
background-color: #f8f8f8;
border-left-width: 5px;
transform: translateX(2px);
}
/* 公告中的链接样式 */
.announcement-container .announcement a {
color: #3366cc;
text-decoration: none;
transition: color 0.2s ease;
}
.announcement-container .announcement a:hover {
color: #1a3366;
text-decoration: underline;
}
/* 粗体文字样式 */
.announcement-container .announcement strong,
.announcement-container .announcement b {
color: #333;
}
/* 折叠区域样式 */
.announcement-container .more-content {
width: 100%;
border-top: 2px solid #f0f0f0;
}
.announcement-container .collapsible-block .collapsible-header {
padding: 1rem 0;
text-align: center;
background: rgba(240, 240, 240, 0.7);
cursor: pointer;
transition: background 0.2s ease;
}
.announcement-container .collapsible-block .collapsible-header:hover {
background: rgba(240, 240, 240, 1);
}
.announcement-container .collapsible-block .collapsible-content {
padding: 1rem;
background: #f5f5f5;
}
/* 响应式调整 */
@media (max-width: 767px) {
.announcement-container .section-title {
font-size: 1.2rem;
}
.announcement-container .announcement {
padding: 10px;
}
}
.gallery {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
}
img {
display: inline-block !important;
}
/* [[Category:在模板名字空间下的CSS页面]] */
