MediaWiki:Common.css

注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的变更的影响。

• Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
• Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
• Internet Explorer或Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5
• Opera：按 Ctrl-F5。

/* 这里放置的CSS将应用于所有皮肤 */

/* 表格隐藏后不齐整 通用 */
.mw-collapsed tr:first-child {
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.mw-collapsed tr:first-child > th{
    margin:-1px;
}

/* 根据窗体宽度调节live(difficulty)gimmick的宽度 Template:GimmickLive */
@media only screen and (max-width: 872px) {
    .gimmick-live {width:280px;}
}
@media only screen and (min-width: 872px) {
    .gimmick-live {width:604px;}
}
@media only screen and (min-width: 1228px) {
    .gimmick-live {width:928px;}
}
@media only screen and (min-width: 1640px) {
    .gimmick-live {width:1252px;}
}
@media only screen and (min-width: 1940px) {
    .gimmick-live {width:1576px;}
}

/* Template:IconMessage */
.icon_message_64 {
    display:inline-block;
    background-color:rgba(223,223,223,223);
    width:64px;height:64px;
    overflow:hidden;
    position:relative;
    border-radius:7px;
    transition: height 0.5s, width 0.5s, margin 0.5s;
    -webkit-transition: height 0.5s, width 0.5s, margin 0.5s;
}
.icon_message_64:hover {
    height:128px;
    width:400px;
    margin:0px -346px -64px 0px;
    z-index:10;
}
.icon_message_64 > img {
    width:64px;height:64px;
}
.icon_message_64 > .bottom_message {
    position:absolute;top:72px;left:8px;width:400px;
    color:black;opacity:0;
    font-size:12px;
    transition:all 0.7s;
    -webkit-transition:all 0.7s;
}
.icon_message_64:hover > .bottom_message {
    opacity:1;
}
.icon_message_64 > .right_message {
    position:absolute;top:8px;left:80px;width:320px;
    color:black;opacity:0;
    font-size:16px;
    transition:all 0.7s;
    -webkit-transition:all 0.7s;
}
.icon_message_64:hover > .right_message {
    opacity:0.5;
}
.icon_message_64 > .epilog_message {
    position:absolute;right:0px;bottom:0px;
    color:white;opacity:0;
    font-size:10px;
    transition:all 0.7s;
    -webkit-transition:all 0.7s;
    line-height:100%;
}
.icon_message_64:hover > .epilog_message {
    opacity:0.5;
}

/* hover切换图片 hove-swap-image */
.hover-swap-image {
    display: inline-block;
    position: relative;
}
.hover-swap-image>img {
    vertical-align: middle;
}
.hover-swap-image>img:nth-child(2) {
    position: absolute;
    top: 0;
    left: 0;
    transition: mask-position, -webkit-mask-position 0.5s;
    mask-image: linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.33) 40%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 1)100%), linear-gradient(225deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 1)100%);
    -webkit-mask-image: linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.33) 40%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 1)100%), linear-gradient(225deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 1)100%);
    mask-composite: source-in;
    -webkit-mask-composite: source-in;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 100% 320%;
    -webkit-mask-size: 100% 320%;
    mask-position: 0% 0%;
    -webkit-mask-position: 0% 0%;
}
.hover-swap-image-trigger:hover img:nth-child(2) {
    mask-position: 0% 100%;
    -webkit-mask-position: 0% 100%;
}

/* button-switch-display */
[data-BSD-Activated="false"] {
    opacity:0.33;
}

/* data-hover-text */
[data-hover-text]::after {
    content: attr(data-hover-text);
    position: absolute;
    font-weight: bold;
    padding: 4px;
    border-radius: 4px;
    background-color: #9f9f9fbf;
    z-index: -10;
    white-space: pre-wrap;
    opacity: 0;
    transition: opacity 0.22s ease-in-out, z-index 0s 0.22s;
    -webkit-transition: opacity 0.22s ease-in-out, z-index 0s 0.22s;
}

[data-hover-text]:hover::after {
    z-index: 10;
    opacity: 1;
    transition: opacity 0.33s ease-in-out, z-index 0s 0s;
    -webkit-transition: opacity 0.33s ease-in-out, z-index 0s 0s;
}

/* card-icon-text */
.card-icon-text {
    display: inline-block;
    vertical-align: top;
}

/* 改变表格排列 */
.grid-alter {
    display: grid;
}

@media screen and (max-width:500px) {
    .grid-alter {
        grid-template: auto / auto;
    }
    .grid-alter .text {
        white-space: nowrap;
    }
}

@media screen and (min-width:500px) {
    .grid-alter {
        grid-template: auto / auto auto;
    }
    .grid-alter .text {
        white-space: pre;
    }
}