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-sidebar-panel-header: 1.2rem;


    --mar-content-container: 200;
}

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


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

body.mediawiki,
#mw-wrapper /* top parent div */
{
    margin: 0 !important;
    padding: 0 !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,
#mw-header
{
    margin: 0 !important;
}

#mw-header-container /* top level */
{
    background: var(--bg-page-header) !important;
}

#mw-header /* only div in container */
{
    /* display: flex !important; */
    align-items: center !important;
}

#p-banner /* wiki title */
{
    color: #202020 !important;
    font-family: var(--ff-wiki-title) !important;
    font-weight: var(--fw-wiki-title) !important;    
}


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

/* Make content and sidebar transparent so background shows through */
#mw-content-container,
#mw-site-navigation
{
    background: transparent !important;
}



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

/* Simple separator line below header */
#mw-header-container 
{
    border-bottom: 2px solid #330077 !important;
}





#mw-content-container
{
    /* margin: var(--mar-content-container) !important; */
}

/* Main content area */
#mw-content,
#content,
.mw-body 
{
    background: #1a1a1a !important;
    color: #cccccc !important;
    border-color: #444 !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;
}