mediawiki-extension-IsekaiBackgroundWidget/modules/ext.isekai.backgroundWidget/timeless.less

@globalRadius: 0.4em;
@globalBgColor: rgba(255, 255, 255, 0.75);
@headerBgColor: rgba(252, 252, 252, 0.75);
@footerBgColor: rgba(149, 149, 149, 0.7);
@globalBoxShadow: 0 3px 5px -1px rgba(0,0,0,.2),0 5px 8px 0 rgba(0,0,0,.14),0 1px 14px 0 rgba(0,0,0,.12);
@globalTransition: opacity 250ms linear;
@headerBlurDepth: 10px;

.has-bgimg {
    .isekai-bgimg {
        position: fixed;
        opacity: 0;
        transition: @globalTransition;

        z-index: -2;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
    }
    
    .isekai-navbar-bg {
        position: fixed;
        z-index: 99;
        top: 0;
        left: 0;
        width: 100%;
        height: 3.125em;
    }

    body {
        background: #f3f3f3;
    }

    #mw-content-container {
        background: none;
    }

    #mw-footer-container {
        position: relative;
        
        &::before {
            background: @footerBgColor;
        }
    }

    #mw-content {
        background: none;
        border: none;
        border-bottom-left-radius: @globalRadius;
        border-bottom-right-radius: @globalRadius;
        box-shadow: @globalBoxShadow;

        &::before {
            background: @globalBgColor;
        }
    }

    #mw-content-container::after {
        display: none;
    }
    
    #mw-header-container {
        background: @headerBgColor;
    }

    #simpleSearch {
        background: rgba(0, 0, 0, 0.07);
        border: solid 1px #a2a9b1;
        box-shadow: none;

        #searchInput-container input[type="search"]:focus {
            background: #fff;
        }
    }

    #mw-content {
        position: relative;
    }

    @media screen and (max-width: 850px) {
        .isekai-navbar-bg {
            display: none;
        }
    }

    @media screen and (max-width: 1099px) {
        #mw-content {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            border: none;
            background: none;
            box-shadow: none;

            &::before {
                background: none;
            }

            &::after {
                display: none;
            }
        }

        #mw-content-block {
            background: none;
        }

        #mw-content-container {
            &::before {
                background: @globalBgColor;
            }

            &::after {
                display: block;
            }
        }

        #mw-header-nav-hack {
            background: rgba(255,255,255,0.5);
        }

        #mw-header-hack {
            z-index: 99;
        }

        .isekai-bgimg {
            display: none;
        }
    }

    @media screen and (min-width: 1100px) {
        #mw-site-navigation .sidebar-chunk,
        #mw-related-navigation .sidebar-chunk {
            position: relative;
            border: none;
            border-radius: @globalRadius;
            box-shadow: @globalBoxShadow;

            &::before {
                background: @globalBgColor;
            }
        }
    }

    @media screen and (max-width: 1099px) {
        #mw-site-navigation .sidebar-chunk,
        #mw-related-navigation .sidebar-chunk {
            &::after {
                display: none;
            }
        }
    }

    .comment-body textarea, .comment-preview {
        background: @globalBgColor;
    }
}