MediaWiki:Common.css
来自Age Of History 2 Chinese Wiki
注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。
- Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
- Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
- Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。
/* 这里放置的CSS将应用于所有皮肤 */
: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;
}
.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;
}
}
@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;
}
.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;
}
.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;
}
.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;
}
.module {
border: 1px solid #ccc;
padding: 10px;
margin: 10px 0;
background-color: #f9f9f9;
}
body.page-首页 #mw-content-text {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.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;
}
/* [[Category:在模板名字空间下的CSS页面]] */
Loading comments...
