MediaWiki:Timeless.css: Unterschied zwischen den Versionen

/* CSS an dieser Stelle wird für Benutzer geladen, die die Benutzeroberfläche „Timeless“ verwenden */

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap');

/* ===================================================================== */
/* ===================================================================== */

/* Define vars on :root */
:root 
{
    --bi-body: url('https://thealchenomiconwiki.com/images/8/8e/BackgroundImage_Main.png?v=2');


    --bg-primary:   #1a1a1a;
    --bg-secondary: #111111;
    --bg-page-header: #666666;


    --text-primary: #cccccc;
    --text-heading: #e8dfc8;
    --border-color: #444444;
    --accent:       #8ab4f8;
    --bg-sidebar-panel: #17101fc0;

    --ff-wiki-title: "Object Sans", serif; 
    --ff-header-box: "Rubik", serif; 


    --fw-wiki-title: 300;
    --fw-sidebar-panel-header: 700;

    --fs-wiki-title: clamp(0, 1.4rem);
    --fs-sidebar-panel-header: 1.2rem;

    --lh-wiki-title: 1;

    --mar-header-container: 0;
    --mar-content-container: 0;
}

/* ===================================================================== */
/* ===================================================================== */


/* ============== BODY AND WRAPPER ============== */

body.mediawiki
{
    margin: 0 !important;
    padding: 0 !important;
}

#mw-wrapper /* top parent div */
{
    padding-top: 0px !important;
}

/* Background image */
body.mediawiki 
{
    background-image: var(--bi-body) !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}


/* ============== HEADER ============== */

#mw-header-container /* top level */
{
    position: fixed !important;
    margin: 0 !important;
    padding: 0 15% !important;
    z-index: 100 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: var(--bg-page-header) !important;
    border-bottom: 2px solid #330077 !important;
}

#mw-header /* only div in container */
{
    width: 100%;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: stretch !important;
    /* justify-content: center !important; */

    border-left: 4px solid #1a1a1a;
    border-right: 4px solid #1a1a1a;
}

#p-logo-text 
{
    flex: 1 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;

    color: #202020 !important;
    font-family: var(--ff-wiki-title) !important;
    font-weight: var(--fw-wiki-title) !important; 
}

#p-banner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* width: 90% !important; */

    font-size: var(--fs-wiki-title) !important;
    line-height: var(--lh-wiki-title) !important;
    text-align: center !important;
}

#p-search 
{
    flex: 4 !important;
}

#user-tools 
{
    flex: 1 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Hide color bars */
#mw-header-hack,
#mw-header-nav-hack 
{
    display: none !important;
}




/* ============== LEFTSIDE TOOLS ============== */


#mw-site-navigation
{
    background: transparent !important;
}


/* ============== MAIN CONTENT ============== */

.ca-nstab-main
{
    color: #cccccc !important;
}

#mw-content-container
{
    display: flex !important;
    justify-content: center !important;
    
    background: transparent !important;
}

#mw-content-block
{
    width: 80%;

    margin: 0;
    padding: 0;

    display: flex !important;
    justify-content: center !important;
}

#mw-content-wrapper
{
    margin: 0;
    padding: 0;

    /* display: flex !important;
    justify-content: center !important; */

    background: #1a1a1a !important;
    border: 2px solid #1a1a1a !important;

    color: #cccccc !important;
}

#mw-content
{
    background: transparent !important;
}

#content
{
    background: transparent !important;
}




.sidebar-chunk h2 
{
    color: var(--text-heading) !important;
}



/* Sidebar boxes */
.sidebar-chunk /* box itself */
{
    background: var(--bg-sidebar-panel) !important;
    border-color: #444 !important;
    color: #cccccc !important;
}
.mw-portlet /* content inside box */
{
    background: transparent !important; /* must be transparent */
}

/* Sidebar headings */
#p-pagemisc-label,
#p-navigation-label 
{
    color: #aaaaaa !important;
    font-family: var(--ff-header-box) !important;
    font-weight: var(--fw-sidebar-panel-header) !important;
    font-size: var(--fs-sidebar-panel-header) !important;
}

/* do not display empty boxes */
#site-tools .emptyPortlet {
    display: none !important;
}
#site-tools:has(.emptyPortlet:only-child) {
    display: none !important;
}

/* Links */
#mw-site-navigation a,
#mw-related-navigation a {
    color: #8ab4f8 !important;
}

/* Page title bar */
#mw-content-block {
    background: transparent !important;
}



.bildchronik-container figure,
.bildchronik-container figure a,
.bildchronik-container figure img {
    height: 100% !important;
    width: auto !important;
    max-width: none !important;
    display: block !important;
}