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 {
    --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-sidebar-panel-header: 700;
    --fs-sidebar-panel-header: 1.2rem;
}

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

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

/* Background image */
body.mediawiki {
    background-image: url('https://thealchenomiconwiki.com/images/8/8e/BackgroundImage_Main.png?v=2') !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

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

#mw-header {
    display: flex !important;
    align-items: center !important;
}

#mw-header-container /* header banner */
{
    background: var(--bg-page-header) !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;
}


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

/* Header color bars */
#mw-header-hack .color-left,
#mw-header-nav-hack .color-left {
    background: #330077 !important;
}
#mw-header-hack .color-middle,
#mw-header-nav-hack .color-middle {
    background: #1a1a1a !important;
}
#mw-header-hack .color-right,
#mw-header-nav-hack .color-right {
    background: #330077 !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;
}