IsekaiMisc/modules/ext.isekai.less

// 页面加载动画
body.skin-timeless {
    #mw-content-container,
    #mw-footer-container {
        transition: opacity 150ms linear;
    }

    #mw-overscroll-bottom-cover {
        transition: opacity 0ms linear 150ms;
    }
}

.page-loading-spinner {
    display: none;
    position: fixed;
    top: 30vh;
    margin: 0 auto;
    width: 100%;
    justify-content: center;
}

body.skin-timeless {
    .spinner-box {
        width: 300px;
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: transparent;

        .circle-border {
            width: 150px;
            height: 150px;
            padding: 3px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            background: #3f51b5;
            background: linear-gradient(0deg,rgba(63, 81, 181, 0.1) 33%,#3f51b5 100%);
            animation: spin .8s linear 0s infinite;
        }

        .circle-core {
            width: 100%;
            height: 100%;
            background-color: #f3f3f3;
            border-radius: 50%;
        }

        @media screen and (max-width: 850px) {
            .circle-core {
                background-color: #fff;
            }
        }
    }
}

@keyframes spin {
    0% {
      transform: rotate(0);
    }
    99% {
      transform: rotate(356.4deg);
    }
}

html.content-loading body.skin-timeless {
    #mw-content-container,
    #mw-footer-container {
        opacity: 0;
    }

    #mw-overscroll-bottom-cover {
        opacity: 0;
    }

    .page-loading-spinner {
        display: flex;
    }
}

html.content-unloading body.skin-timeless {
    #mw-content-container,
    #mw-footer-container {
        opacity: 0;
    }

    #mw-overscroll-bottom-cover {
        transition: none;
        opacity: 0;
    }
}

html.content-loaded body.skin-timeless {

}

// 折叠区域
.mw-collapse-content {
    display: none;
    margin: 1em 0 0;
}
.mw-collapse-toggle {
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
}

.wikitable-container .wikitable {
    min-width: 200px;
}

@media screen and (max-width: 850px){
    .wikitable-container {
        width: 100%;
        box-sizing: border-box;
        float: none;
        margin-left: 0px;
        margin-right: 0px;
        
        .wikitable {
            width: 100%;
        }
    }
}

.black-space {
    background-color: #252525;
    color: #252525;
    transition: color .15s;
    
    &:hover {
        color: #fff;
        transition: color .15s;
    }
}

.ve-init-target-visual .black-space {
    color: #fff;
}

#toc > ul {
    overflow-y: auto;
    max-height: 50vh;
    scrollbar-width: thin;

    &::-webkit-scrollbar {
        width: 8px;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 0;
        background: #cdcdcd;

        &:hover {
            background: #a6a6a6;
        }

        &:active {
            background: #606060;
        }
    }

    &::-webkit-scrollbar-track {
        border-radius: 0;
        background: #f0f0f0;
    }
}

@media screen and (min-width: 851px){
    #user-tools {
        #personal {
            margin-left: 0;
            padding-left: 0.5em;
            
            h2 {
                padding: 7px 0 20px 25px;
                background-position: 0 6px;
                /*margin-top: -3px;*/
                
                span {
                    margin-top: 1px;
                    overflow: visible;
                }
            }
        }
        
        #personal-extra {
            margin-top: 0.8em;
        }
    }
}

@media screen and (min-width: 1100px){
    #mw-header #user-tools {
        width: 10em;
    }
}

@media screen and (min-width: 851px){
    #mw-footer .footer-places li {
        white-space: pre;
    }
}

@media screen and (max-width: 850px){
    #mw-footer #copyright {
        display: block;
    }
}

// 面包屑
.breadcrumb {
    padding: 8px 15px;
    margin-bottom: 10px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 4px;
    margin-block-start: 0;
    font-size: 14px;

    > li {
        display: inline-block;

        &.active {
            color: #777;
        }
    }

    > li+li:before {
        padding: 0 5px;
        color: #ccc;
        content: "/\00a0";
    }

    a {
        text-decoration: none;
    }
}

@media print {
    #toc,
    #contentSub .breadcrumb,
    #flowthread {
        display: none;
    }
}

.subpages {
    display: none !important;
}

#content {
    .user-heading {
        display: flex;
        align-items: flex-end;

        .user-avatar {
            width: 64px;
            height: 64px;
        }

        #firstHeading {
            flex-grow: 1;
            margin: 0 0.5em 0.25em 0;
        }
    }
}

.oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget {
    width: auto !important;
}