Rolling Lounge Wiki

Template:Main Page/styles.css: Difference between revisions

← Older edit
No edit summary
Modification in attempt to fix dark mode issues
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
/* Main page responsive layout */
.main-page-row {
    display: flex;
    flex-wrap: wrap;
    margin-top: 7px;
    width: 100%;
}
.main-page-col {
    flex: 1;
    min-width: 0;
    padding: 5px 15px 15px 8px;
    vertical-align: top;
}
/* Specific column styles */
.main-page-about {
    border: 1px solid #cef2e0;
    background-color: #f5fffa;
    margin-right: 4px;
}
.main-page-news {
    border: 1px solid #cedff2;
    background-color: #f5faff;
}
.main-page-featured {
    border: 1px solid #cef2e0;
    background-color: #f5fffa;
    margin-right: 4px;
}
.main-page-dyk {
    border: 1px solid #cedff2;
    background-color: #f5faff;
}
.main-page-screenshot {
    border: 1px solid #ddcef2;
    background-color: #faf5ff;
    width: 100%;
}
/* Dark mode support for custom main page elements */
html.skin-theme-clientpref-night .main-page-about,
html.skin-theme-clientpref-night .main-page-featured {
    background-color: #0b1e1c;
    border-color: #104437;
}
html.skin-theme-clientpref-night .main-page-news,
html.skin-theme-clientpref-night .main-page-dyk {
    background-color: #0d1a27;
    border-color: #082849;
}
html.skin-theme-clientpref-night .main-page-screenshot {
    background-color: #130e20;
    border-color: #7545ab;
}
/* OS dark mode support */
@media screen and (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .main-page-about,
    html.skin-theme-clientpref-os .main-page-featured {
        background-color: #0b1e1c;
        border-color: #104437;
    }
    html.skin-theme-clientpref-os .main-page-news,
    html.skin-theme-clientpref-os .main-page-dyk {
        background-color: #0d1a27;
        border-color: #082849;
    }
    html.skin-theme-clientpref-os .main-page-screenshot {
        background-color: #130e20;
        border-color: #7545ab;
    }
}
/* Mobile responsiveness */
@media (max-width: 768px) {
    .main-page-col {
        flex: 100%;
        margin-right: 0 !important;
        margin-bottom: 7px;
    }
}
#siteSub {
#siteSub {
     display: none !important;
     display: none !important;
Retrieved from "https://wiki.rollinglounge.net/wiki/Template:Main_Page/styles.css"