/*
该文档为一个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页面]] */

2025-02-10T08:28:39Z

一位史蒂夫：

MediaWiki:Sidebar

2025-02-10T08:27:06Z

一位史蒂夫：

* navigation
** mainpage|mainpage-description
** recentchanges-url|recentchanges
** randompage-url|randompage
* SEARCH
* TOOLBOX
* LANGUAGES

模板:Documentation

2025-02-10T08:03:56Z

一位史蒂夫：创建页面，内容为“<includeonly>{{#invoke:documentation|main|_content={{ {{#invoke:documentation|contentTitle}}}}}}</includeonly><noinclude> {{documentation|content= {{Lua|Module:Documentation}} This template automatically displays a documentation box like the one you are seeing now, of which the content is sometimes transcluded from another page. <translate> It is intended for pages which are transcluded in…”

模板:Info/styles.css

2025-02-10T07:59:05Z

一位史蒂夫：+

.note {
background-position: left 7px top 50%;
padding: 0.5em 0.5em 0.5em 40px;
margin: 0.5em 0;
overflow: hidden;
background-color: #f8f9fa;
color: #333;
background-repeat: no-repeat;
border: 1px solid #ddd;
}
.note-inline {
display: inline-block;
vertical-align: middle;
}
.note-info {
background-color: #eaf3ff;
color: #333;
/* [[File:OOjs_UI_icon_information-progressive.svg]] */
background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/ec/OOjs_UI_icon_information-progressive.svg);
background-size: 25px;
border-color: #a3caff;
padding-left: 40px;
min-height: 25px;
}
.note-reminder {
background-color: #fff9ea;
color: #333;
/* [[File:OOjs_UI_icon_lightbulb-yellow.svg]] */
background-image: url(https://upload.wikimedia.org/wikipedia/commons/a/a8/OOjs_UI_icon_lightbulb-yellow.svg);
background-size: 25px;
border-color: #fc3;
min-height: 25px;
}
.note-warn {
background-color: #fff9ea;
color: #333;
/* [[File:OOjs_UI_icon_alert-warning.svg]] */
background-image: url(https://upload.wikimedia.org/wikipedia/commons/3/3b/OOjs_UI_icon_alert-warning.svg);
background-size: 25px;
border-color: #fc3;
min-height: 25px;
}

.note-error {
background-color: #fee7e6;
color: #333;
/* [[File:OOjs_UI_icon_notice-destructive.svg]] */
background-image: url(https://upload.wikimedia.org/wikipedia/commons/b/bf/OOjs_UI_icon_notice-destructive.svg);
background-size: 25px;
border-color: #c33;
min-height: 25px;
}

@media screen {
html.skin-theme-clientpref-night .note {
background-color: transparent;
color: inherit;
}
}

2024-01-03T09:12:59Z

一位史蒂夫：// Edit via Wikiplus

/* 未适配当前mw版本 */
h2 {
font-weight: normal;
}
div#content {
background: #ffffff99!important;
backdrop-filter: blur(7px);
z-index: 0!important;
}
.mw-body {
border:none!important;
border-radius: 7px;
margin-top: 10px;
}
.vector-menu-tabs-legacy li {
background: transparent;
}

.vector-menu-content-list, div.vectorTabs ul li.selected {
background: #ffffff99!important;
border-radius: 7px;
backdrop-filter: blur(7px);
}
div.vectorMenu div.menu {
z-index: 999!important;
border-radius: 7px;
margin: 2px;
border: none!important;
background:rgba(255,255,255,0.95)!important;
padding: 5px;
backdrop-filter: blur(7px);
}
fieldset {
border-radius: 7px;
}
body.sideBarPic.skin-vector:not(.DeceasedPerson) div#mw-panel div.portal {
background-color: #ffffff99!important;
margin-left: 0!important;
margin-right: 10px!important;
padding-left: 5px!important;
padding-right: 10px!important;
border-radius: 7px!important;
margin-bottom: 10px!important;
backdrop-filter: blur(7px)!important;
}
div#mw-panel {
text-shadow: none!important;
}
body.sideBarPic:not(.DeceasedPerson) #footer {
background-color: #ffffff99!important;
margin-top: 10px;
border-radius: 7px;
backdrop-filter: blur(7px);
}
.catlinks {
border: none;
background-color: #ffffff77;
padding: 10px;
margin-top: 1em;
clear: both;
border-radius: 7px;
backdrop-filter: blur(7px);
}
div.vectorMenu h3 span {
padding-top: 1em;
}
div.vectorMenu h3 span:after {
top: 1em!important;
}
.vectorMenuCheckbox {
height: 0%;
}
div.vectorTabs span a {
padding-top: 1em!important;
}
#ca-wikilove, #ca-watch, #ca-unwatch {
padding-top: 1em!important;
}
.toc, .mw-warning, .toccolours {
border: none;
padding: 10px!important;
font-size: 95%;
border-radius: 7px;
backdrop-filter: blur(7px);
background: #ffffff99!important;
}
#p-search form, #p-search input {
margin: -4px 0 0;
}
#simpleSearch {
border: none;
border-radius: 7px;
padding: 3px;
}
#simpleSearch #searchInput {
padding-left: 0.625em!important;
}
#simpleSearch #searchButton {
margin: 1px!important;
}
#pt-notifications-alert .mw-echo-notifications-badge:before, #pt-notifications-notice .mw-echo-notifications-badge:before {
margin: 4px!important;
}
html.sidebarHiddenOn #sidebarHidden-logo-link {
background-image: none!important;
}
#sidebarHidden-arrow {
border: none!important;
background: #ffffffcc!important;
backdrop-filter: blur(7px);
}
a.mw-wiki-logo {
background-color: transparent!important;
}
div#p-personal {
position: fixed!important;
padding: 2px 6px 5px 0!important;
border-radius: 7px;
border: 3px solid transparent;
backdrop-filter: blur(7px);
right: 0;
margin-left: -9em;
box-shadow: #ffffff 0 0 0!important;
background: #ffffff99!important;
}
div#heimu_toggle {
bottom: 290px!important;
}
div#pxruler_toggle {
right: 0!important;
bottom: 390px!important;
z-index: 73!important;
left: initial!important;
top: initial!important;
}

body::-webkit-scrollbar {
width: 8px;
height: 6px
}

body::-webkit-scrollbar-track {
background-color: transparent;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em
}

body::-webkit-scrollbar-thumb {
background-color: #30B07F;
background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 100%,transparent 100%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em
}

.citation-comment {
display: inline !important;
}

.navpopup {
border: 1px solid #ffbe20;
background: #fff;
padding: 5px;
font-size: 11px;
}
del.popupDiff {
background: rgb(254,231,230) !important;
}
ins.popupDiff {
background: rgb(213,253,244) !important;
}

code {
padding: 2px 4px;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
}

h1 {
border-bottom: 2px solid #4e9ce3;
}
h2 {
border-bottom: 1.2px solid #4e9ce3;
}

.mw-contributions-current {
background: #E6F4FF;
}

a.Wikiplus-Edit-EveryWhereBtn{
color: #816cea!important;
}
a.Wikiplus-Edit-SectionBtn{
color: #816cea!important;
}
li#Wikiplus-Edit-TopBtn a{
color: #816cea!important;
}

.mw-plusminus-neg {
color: #ff2333;
}
.mw-plusminus-pos {
color: #00bb00;
}

.mw-userlink[title="User:一位史蒂夫"] {
background-color: rgba(224,255,255,.50);
}

.ns-talk dd {
margin: 0;
padding: 0;
}
.ns-talk dl {
border-top: solid 1px #a7d7f9;
border-left: solid 1px #a7d7f9;
padding-top: .5em;
padding-left: .5em;
margin-left: 1em;
}

a.mw-disambig.mw-disambig {
color: #ff8921;
}
a.mw-disambig.mw-disambig:visited {
color: #d2711b;
}
a.mw-redirect.mw-disambig {
color: #ff6421;
}
a.mw-redirect.mw-disambig:visited {
color: #d2521b;
}

body.ns-2 div#catlinks {
display: block!important;
}

.history-size::before {
content: "📊";
font-family: Segoe UI Emoji,Apple Color Emoji,Android Emoji,Symbola
}
.history-size::after {
content: "←";
font-family: Segoe UI Emoji,Apple Color Emoji,Android Emoji,Symbola
}
.mw-history-undo::before {
content: "⬇️";
font-family: Segoe UI Emoji,Apple Color Emoji,Android Emoji,Symbola
}
.mw-thanks-thank-link:before {
content: "❤";
font-family: Segoe UI Emoji,Apple Color Emoji,Android Emoji,Symbola
}
#pagehistory li.selected {
background-color: #DDD;
}
.mw-tag-markers a::before {
content: "🏷";
font-family: Segoe UI Emoji,Apple Color Emoji,Android Emoji,Symbola
}
.mw-changeslist-date::before, .mw-changeslist h4::before {
content: "📅";
font-family: Segoe UI Emoji,Apple Color Emoji,Android Emoji,Symbola
}
.history-user::before {
content: "✏";
font-family: Segoe UI Emoji,Apple Color Emoji,Android Emoji,Symbola
}
.autocomment::before {
content: "📝";
font-family: Segoe UI Emoji,Apple Color Emoji,Android Emoji,Symbola
}

.fakelink:after {
content: "假";
color: #BA0000;
vertical-align: super;
font-size: 50%;
}

.mw-redirect:after {
content: "重";
color: purple;
vertical-align: super;
font-size: 50%;
}

.mw-disambig:after {
content: "消";
color: orange;
vertical-align: super;
font-size: 50%;
}

td.diff-deletedline {
border-color: rgb(221,51,51)!important;
}

del.diffchange {
background: rgb(254,231,230)!important;
}

td.diff-addedline {
border-color: rgb(0,175,137)!important;
}

ins.diffchange {
background: rgb(213,253,244)!important;
}

.diffchange {
font-weight: 900!important;
}

/* topbar */
body.skin-vector {
background-image: url('https://wiki.mimikkofans.club/images/5/5c/91097621_p0.jpg')!important;
background-position: center!important;
background-repeat: no-repeat!important;
background-size: cover!important;
background-attachment: fixed!important;
}

#mw-page-base {
background: transparent;
}

div.vectorTabs ul li,
#mw-head div.vectorMenu {
background-image: none !important;
background-color: transparent !important;
}
div.vectorTabs,
div.vectorTabs span,
div.vectorTabs ul,
div#mw-head div.vectorMenu h3 {
background-image: none !important;
}
#left-navigation,
#right-navigation
/* {
background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .5) 30%, rgba(255, 255, 255, .75))!important;
background-color: transparent!important;
}*/
,
div.vectorTabs ul li.selected {
background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .3) 30%, rgba(255, 255, 255, .5)) !important;
background-color: transparent !important;
}
#left-navigation,
#right-navigation {
min-height: 40px!important;
}

div#p-personal {
background-color: rgba(255, 255, 255, 0.8)!important;
padding: 5px 10px 5px 0!important;
box-shadow: #666 0 1px 5px!important;
}

#p-personal ul {
padding-left: 0!important;
}

div#mw-panel {
font-size: 18px!important;
width: 10.5rem!important;
}

div.vectorMenu ul {
display: flex!important;
flex-flow: column!important;
}

.portal {
background: #ffffff99!important;
border-radius: 7px;
backdrop-filter: blur(7px);
}

用户:一位史蒂夫/vector.css

2024-01-03T09:11:55Z

一位史蒂夫：// Edit via Wikiplus

/* 未适配当前mw版本 */
h2 {
font-weight: normal;
}
div#content {
background: #ffffff99!important;
backdrop-filter: blur(7px);
z-index: 0!important;
}
.mw-body {
border:none!important;
border-radius: 7px;
margin-top: 10px;
}
.vector-menu-tabs-legacy li {
background: transparent;
}

.vector-menu-content-list, #left-navigation, #right-navigation, div.vectorTabs ul li.selected {
background: #ffffff99!important;
border-radius: 7px;
backdrop-filter: blur(7px);
}
div.vectorMenu div.menu {
z-index: 999!important;
border-radius: 7px;
margin: 2px;
border: none!important;
background:rgba(255,255,255,0.95)!important;
padding: 5px;
backdrop-filter: blur(7px);
}
fieldset {
border-radius: 7px;
}
body.sideBarPic.skin-vector:not(.DeceasedPerson) div#mw-panel div.portal {
background-color: #ffffff99!important;
margin-left: 0!important;
margin-right: 10px!important;
padding-left: 5px!important;
padding-right: 10px!important;
border-radius: 7px!important;
margin-bottom: 10px!important;
backdrop-filter: blur(7px)!important;
}
div#mw-panel {
text-shadow: none!important;
}
body.sideBarPic:not(.DeceasedPerson) #footer {
background-color: #ffffff99!important;
margin-top: 10px;
border-radius: 7px;
backdrop-filter: blur(7px);
}
.catlinks {
border: none;
background-color: #ffffff77;
padding: 10px;
margin-top: 1em;
clear: both;
border-radius: 7px;
backdrop-filter: blur(7px);
}
div.vectorMenu h3 span {
padding-top: 1em;
}
div.vectorMenu h3 span:after {
top: 1em!important;
}
.vectorMenuCheckbox {
height: 0%;
}
div.vectorTabs span a {
padding-top: 1em!important;
}
#ca-wikilove, #ca-watch, #ca-unwatch {
padding-top: 1em!important;
}
.toc, .mw-warning, .toccolours {
border: none;
padding: 10px!important;
font-size: 95%;
border-radius: 7px;
backdrop-filter: blur(7px);
background: #ffffff99!important;
}
#p-search form, #p-search input {
margin: -4px 0 0;
}
#simpleSearch {
border: none;
border-radius: 7px;
padding: 3px;
}
#simpleSearch #searchInput {
padding-left: 0.625em!important;
}
#simpleSearch #searchButton {
margin: 1px!important;
}
#pt-notifications-alert .mw-echo-notifications-badge:before, #pt-notifications-notice .mw-echo-notifications-badge:before {
margin: 4px!important;
}
html.sidebarHiddenOn #sidebarHidden-logo-link {
background-image: none!important;
}
#sidebarHidden-arrow {
border: none!important;
background: #ffffffcc!important;
backdrop-filter: blur(7px);
}
a.mw-wiki-logo {
background-color: transparent!important;
}
div#p-personal {
position: fixed!important;
padding: 2px 6px 5px 0!important;
border-radius: 7px;
border: 3px solid transparent;
backdrop-filter: blur(7px);
right: 0;
margin-left: -9em;
box-shadow: #ffffff 0 0 0!important;
background: #ffffff99!important;
}
div#heimu_toggle {
bottom: 290px!important;
}
div#pxruler_toggle {
right: 0!important;
bottom: 390px!important;
z-index: 73!important;
left: initial!important;
top: initial!important;
}

body::-webkit-scrollbar {
width: 8px;
height: 6px
}

body::-webkit-scrollbar-track {
background-color: transparent;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em
}

body::-webkit-scrollbar-thumb {
background-color: #30B07F;
background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 100%,transparent 100%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em
}

.citation-comment {
display: inline !important;
}

.navpopup {
border: 1px solid #ffbe20;
background: #fff;
padding: 5px;
font-size: 11px;
}
del.popupDiff {
background: rgb(254,231,230) !important;
}
ins.popupDiff {
background: rgb(213,253,244) !important;
}

code {
padding: 2px 4px;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
}

h1 {
border-bottom: 2px solid #4e9ce3;
}
h2 {
border-bottom: 1.2px solid #4e9ce3;
}

.mw-contributions-current {
background: #E6F4FF;
}

a.Wikiplus-Edit-EveryWhereBtn{
color: #816cea!important;
}
a.Wikiplus-Edit-SectionBtn{
color: #816cea!important;
}
li#Wikiplus-Edit-TopBtn a{
color: #816cea!important;
}

.mw-plusminus-neg {
color: #ff2333;
}
.mw-plusminus-pos {
color: #00bb00;
}

.mw-userlink[title="User:一位史蒂夫"] {
background-color: rgba(224,255,255,.50);
}

.ns-talk dd {
margin: 0;
padding: 0;
}
.ns-talk dl {
border-top: solid 1px #a7d7f9;
border-left: solid 1px #a7d7f9;
padding-top: .5em;
padding-left: .5em;
margin-left: 1em;
}

a.mw-disambig.mw-disambig {
color: #ff8921;
}
a.mw-disambig.mw-disambig:visited {
color: #d2711b;
}
a.mw-redirect.mw-disambig {
color: #ff6421;
}
a.mw-redirect.mw-disambig:visited {
color: #d2521b;
}

body.ns-2 div#catlinks {
display: block!important;
}

.history-size::before {
content: "📊";
font-family: Segoe UI Emoji,Apple Color Emoji,Android Emoji,Symbola
}
.history-size::after {
content: "←";
font-family: Segoe UI Emoji,Apple Color Emoji,Android Emoji,Symbola
}
.mw-history-undo::before {
content: "⬇️";
font-family: Segoe UI Emoji,Apple Color Emoji,Android Emoji,Symbola
}
.mw-thanks-thank-link:before {
content: "❤";
font-family: Segoe UI Emoji,Apple Color Emoji,Android Emoji,Symbola
}
#pagehistory li.selected {
background-color: #DDD;
}
.mw-tag-markers a::before {
content: "🏷";
font-family: Segoe UI Emoji,Apple Color Emoji,Android Emoji,Symbola
}
.mw-changeslist-date::before, .mw-changeslist h4::before {
content: "📅";
font-family: Segoe UI Emoji,Apple Color Emoji,Android Emoji,Symbola
}
.history-user::before {
content: "✏";
font-family: Segoe UI Emoji,Apple Color Emoji,Android Emoji,Symbola
}
.autocomment::before {
content: "📝";
font-family: Segoe UI Emoji,Apple Color Emoji,Android Emoji,Symbola
}

.fakelink:after {
content: "假";
color: #BA0000;
vertical-align: super;
font-size: 50%;
}

.mw-redirect:after {
content: "重";
color: purple;
vertical-align: super;
font-size: 50%;
}

.mw-disambig:after {
content: "消";
color: orange;
vertical-align: super;
font-size: 50%;
}

td.diff-deletedline {
border-color: rgb(221,51,51)!important;
}

del.diffchange {
background: rgb(254,231,230)!important;
}

td.diff-addedline {
border-color: rgb(0,175,137)!important;
}

ins.diffchange {
background: rgb(213,253,244)!important;
}

.diffchange {
font-weight: 900!important;
}

/* topbar */
body.skin-vector {
background-image: url('https://wiki.mimikkofans.club/images/5/5c/91097621_p0.jpg')!important;
background-position: center!important;
background-repeat: no-repeat!important;
background-size: cover!important;
background-attachment: fixed!important;
}

#mw-page-base {
background: transparent;
}

div.vectorTabs ul li,
#mw-head div.vectorMenu {
background-image: none !important;
background-color: transparent !important;
}
div.vectorTabs,
div.vectorTabs span,
div.vectorTabs ul,
div#mw-head div.vectorMenu h3 {
background-image: none !important;
}
#left-navigation,
#right-navigation
/* {
background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .5) 30%, rgba(255, 255, 255, .75))!important;
background-color: transparent!important;
}*/
,
div.vectorTabs ul li.selected {
background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .3) 30%, rgba(255, 255, 255, .5)) !important;
background-color: transparent !important;
}
#left-navigation,
#right-navigation {
min-height: 40px!important;
}

div#p-personal {
background-color: rgba(255, 255, 255, 0.8)!important;
padding: 5px 10px 5px 0!important;
box-shadow: #666 0 1px 5px!important;
}

#p-personal ul {
padding-left: 0!important;
}

div#mw-panel {
font-size: 18px!important;
width: 10.5rem!important;
}

div.vectorMenu ul {
display: flex!important;
flex-flow: column!important;
}

.portal {
background: #ffffff99!important;
border-radius: 7px;
backdrop-filter: blur(7px);
}