MediaWiki:Timeless.css

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

body .mw-wiki-logo.timeless-logo img {
    width: 200px;
}


/* =========================================================
   Ardapedia – Font Awesome Pro Light
   ========================================================= */

:root {
    --ardapedia-icon-size: 15px;
    --ardapedia-action-icon-size: 18px;
    --ardapedia-mobile-header-icon-size: 26px;
    --ardapedia-chevron-size: 8px;
}


/* =========================================================
   Seitenaktionen
   ========================================================= */

/* Hauptseite / Seitentyp */
.tools-inline #ca-nstab-main a {
    background-image: url("/w/resources/assets/fontawesome/svgs/light/file-lines.svg") !important;
}

/* Diskussion */
#ca-talk a {
    background-image: url("/w/resources/assets/fontawesome/svgs/light/comments.svg") !important;
}

/* Bearbeiten */
#ca-edit a {
    background-image: url("/w/resources/assets/fontawesome/svgs/light/pen.svg") !important;
}

/* Versionsgeschichte */
#ca-history a {
    background-image: url("/w/resources/assets/fontawesome/svgs/light/clock-rotate-left.svg") !important;
}

/* Quelltext */
#ca-viewsource a {
    background-image: url("/w/resources/assets/fontawesome/svgs/light/code.svg") !important;
}

/* Lesen */
#ca-view a,
#ca-view-foreign a {
    background-image: url("/w/resources/assets/fontawesome/svgs/light/eye.svg") !important;
}

/* Abschnitt hinzufügen */
#ca-addsection a {
    background-image: url("/w/resources/assets/fontawesome/svgs/light/plus.svg") !important;
}


/* =========================================================
   Beobachten
   ========================================================= */

/*
 * Timeless behandelt Beobachten / Nicht mehr beobachten
 * als reine Icon-Schaltflächen.
 */

#ca-watch a,
#ca-unwatch a {
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size:
        var(--ardapedia-action-icon-size)
        var(--ardapedia-action-icon-size) !important;

    min-width: 20px !important;
    min-height: 20px !important;
}


/*
 * Seite ist NICHT auf der Beobachtungsliste
 * -> leerer Font-Awesome-Light-Stern
 */
#ca-watch a {
    background-image: url("/w/resources/assets/fontawesome/svgs/light/star.svg") !important;
}


/*
 * Seite IST auf der Beobachtungsliste
 * -> ausgefüllter Font-Awesome-Solid-Stern
 */
#ca-unwatch a {
    background-image: url("/w/resources/assets/fontawesome/svgs/solid/star.svg") !important;
}


/*
 * Seite wird nur temporär beobachtet
 */
#ca-unwatch.mw-watchlink-temp a {
    background-image: url("/w/resources/assets/fontawesome/svgs/light/star-half-stroke.svg") !important;

    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size:
        var(--ardapedia-action-icon-size)
        var(--ardapedia-action-icon-size) !important;
}


/* =========================================================
   Seitentypen / Namespaces
   ========================================================= */

/*
 * Namespace-Icons nur innerhalb der normalen Timeless-
 * Werkzeugleiste setzen.
 *
 * Timeless verschiebt beispielsweise "Spezialseite" bei
 * wenig Platz in das "Mehr"-Dropdown. Dort darf das Icon
 * NICHT als Hintergrund des Textlinks erscheinen.
 */

.tools-inline #ca-nstab-user a {
    background-image: url("/w/resources/assets/fontawesome/svgs/light/user.svg") !important;
}

.tools-inline #ca-nstab-mediawiki a {
    background-image: url("/w/resources/assets/fontawesome/svgs/light/gears.svg") !important;
}

.tools-inline #ca-nstab-template a {
    background-image: url("/w/resources/assets/fontawesome/svgs/light/puzzle-piece.svg") !important;
}

.tools-inline #ca-nstab-category a {
    background-image: url("/w/resources/assets/fontawesome/svgs/light/folder-tree.svg") !important;
}

.tools-inline #ca-nstab-image a {
    background-image: url("/w/resources/assets/fontawesome/svgs/light/image.svg") !important;
}

.tools-inline #ca-nstab-special a {
    background-image: url("/w/resources/assets/fontawesome/svgs/light/wand-magic-sparkles.svg") !important;
}

/* Hilfe-Namespace */
.tools-inline #ca-nstab-help a {
    background-image: url("/w/resources/assets/fontawesome/svgs/light/circle-question.svg") !important;
}

.tools-inline #ca-nstab-project a {
    background-image: url("/w/resources/assets/fontawesome/svgs/light/book-open.svg") !important;
}


/* =========================================================
   Gemeinsame Icons in der Werkzeugleiste
   ========================================================= */

.tools-inline li a {
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size:
        var(--ardapedia-icon-size)
        var(--ardapedia-icon-size) !important;
}


/*
 * Beobachten ist eine reine Icon-Schaltfläche und soll
 * deshalb zentriert bleiben.
 */
.tools-inline #ca-watch a,
.tools-inline #ca-unwatch a {
    background-position: center !important;
    background-size:
        var(--ardapedia-action-icon-size)
        var(--ardapedia-action-icon-size) !important;
}


/* =========================================================
   Sonstige Aktionen
   ========================================================= */

#t-contributions a {
    background-image: url("/w/resources/assets/fontawesome/svgs/light/list.svg") !important;
}


/* =========================================================
   Hilfe
   ========================================================= */

/*
 * Falls "Hilfe" als Werkzeug-/Navigationslink erscheint.
 * Dadurch wird auch das schwarze alte Fragezeichen ersetzt.
 */
#t-help a,
#n-help a {
    background-image: url("/w/resources/assets/fontawesome/svgs/light/circle-question.svg") !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size:
        var(--ardapedia-icon-size)
        var(--ardapedia-icon-size) !important;
}


/* =========================================================
   Externe Links
   ========================================================= */

.mw-parser-output a.external {
    background-image: url("/w/resources/assets/fontawesome/svgs/light/arrow-up-right-from-square.svg") !important;
    background-repeat: no-repeat !important;
    background-position: right center !important;
    background-size: 10px 10px !important;
    padding-right: 14px !important;
}


/* Interwiki-Links ebenfalls angleichen */
.mw-parser-output a.extiw {
    background-image: url("/w/resources/assets/fontawesome/svgs/light/arrow-up-right-from-square.svg") !important;
    background-repeat: no-repeat !important;
    background-position: right center !important;
    background-size: 10px 10px !important;
    padding-right: 14px !important;
}


/* =========================================================
   Profil / Benutzermenü – Desktop
   ========================================================= */

/*
 * Benutzer-Icon
 */
#personal h2 {
    background-image: url("/w/resources/assets/fontawesome/svgs/light/circle-user.svg") !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: 18px 18px !important;

    /* Platz für das Profil-Icon */
    padding-left: 26px !important;
}


/*
 * Eventuell vorhandenes zusätzliches Timeless-Icon entfernen.
 */
#personal h2::before {
    content: none !important;
    display: none !important;
}


/*
 * Desktop-Dropdown-Pfeil durch Font Awesome ersetzen.
 */
#personal h2::after {
    content: "" !important;
    display: inline-block !important;

    position: relative !important;

    /*
     * Pfeil nach oben korrigieren.
     */
    top: -5px !important;

    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    width: 10px !important;
    height: 10px !important;

    margin-left: 7px !important;

    background-image: url("/w/resources/assets/fontawesome/svgs/light/chevron-down.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 10px 10px !important;

    vertical-align: middle !important;
}


/* =========================================================
   Mobile Navigation
   ========================================================= */

@media screen and (max-width: 850px) {

    /*
     * ---------------------------------------------------------
     * Gemeinsame Einstellungen für die großen Header-Icons
     * ---------------------------------------------------------
     */

    #site-navigation h2,
    #site-tools h2,
    #user-tools h2 {
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size:
            var(--ardapedia-mobile-header-icon-size)
            var(--ardapedia-mobile-header-icon-size) !important;
    }


    /*
     * ---------------------------------------------------------
     * Hauptmenü links
     * ---------------------------------------------------------
     */

    #site-navigation h2 {
        background-image: url("/w/resources/assets/fontawesome/svgs/light/bars.svg") !important;
    }


    /*
     * Font-Awesome-Pfeil neben dem Hamburger-Menü.
     */
    #site-navigation h2::after {
        content: "" !important;
        display: block !important;

        position: absolute !important;
        top: 11px !important;
        left: 34px !important;
        right: auto !important;
        bottom: auto !important;

        width: var(--ardapedia-chevron-size) !important;
        height: var(--ardapedia-chevron-size) !important;

        margin: 0 !important;

        background-image: url("/w/resources/assets/fontawesome/svgs/light/chevron-down.svg") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size:
            var(--ardapedia-chevron-size)
            var(--ardapedia-chevron-size) !important;
    }


    /*
     * ---------------------------------------------------------
     * Werkzeuge / Einstellungen rechts
     * ---------------------------------------------------------
     */

    #site-tools h2 {
        background-image: url("/w/resources/assets/fontawesome/svgs/light/gear.svg") !important;
    }


    /*
     * Font-Awesome-Pfeil neben dem Werkzeug-Zahnrad.
     */
    #site-tools h2::after {
        content: "" !important;
        display: block !important;

        position: absolute !important;
        top: 11px !important;
        left: 34px !important;
        right: auto !important;
        bottom: auto !important;

        width: var(--ardapedia-chevron-size) !important;
        height: var(--ardapedia-chevron-size) !important;

        margin: 0 !important;

        background-image: url("/w/resources/assets/fontawesome/svgs/light/chevron-down.svg") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size:
            var(--ardapedia-chevron-size)
            var(--ardapedia-chevron-size) !important;
    }


    /*
     * ---------------------------------------------------------
     * Benutzer / Profil rechts
     * ---------------------------------------------------------
     */

    #user-tools h2 {
        background-image: url("/w/resources/assets/fontawesome/svgs/light/circle-user.svg") !important;

        /*
         * Desktop-Padding wieder entfernen.
         */
        padding-left: 0 !important;
    }


    /*
     * Benutzername mobil verstecken.
     */
    #user-tools h2 span {
        text-indent: -99999px !important;
        overflow: hidden !important;
    }


    /*
     * Beim Profil-Icon mobil KEIN Dropdown-Pfeil.
     */
    #user-tools h2::after,
    #personal h2::after {
        content: none !important;
        display: none !important;

        width: 0 !important;
        height: 0 !important;

        margin: 0 !important;

        background-image: none !important;
    }


    /* =====================================================
       Spezialseiten im "Mehr"-Dropdown
       ===================================================== */

    /*
     * Falls Timeless einen Namespace-Reiter in das
     * "Mehr"-Menü verschiebt, darf dort kein Icon über
     * den Text gelegt werden.
     */

    #ca-nstab-special a {
        background-image: none !important;
    }


    /* =====================================================
       Mobile Seitenaktionen – "Mehr"
       ===================================================== */

    /*
     * Zahnrad für weitere Seitenaktionen.
     */
    #ca-more span {
        background-image: url("/w/resources/assets/fontawesome/svgs/light/gear.svg") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size:
            var(--ardapedia-icon-size)
            var(--ardapedia-icon-size) !important;
    }


    /*
     * Pfeil hinter "Mehr"
     */
    #ca-more::after {
        content: "" !important;
        display: inline-block !important;

        position: relative !important;
        top: -1px !important;

        width: var(--ardapedia-chevron-size) !important;
        height: var(--ardapedia-chevron-size) !important;

        margin-left: 2px !important;

        background-image: url("/w/resources/assets/fontawesome/svgs/light/chevron-down.svg") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size:
            var(--ardapedia-chevron-size)
            var(--ardapedia-chevron-size) !important;

        vertical-align: middle !important;
    }


    /* =====================================================
       Mobile Seitenaktionen – Sprachen
       ===================================================== */

    #ca-languages span {
        background-image: url("/w/resources/assets/fontawesome/svgs/light/language.svg") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size:
            var(--ardapedia-icon-size)
            var(--ardapedia-icon-size) !important;
    }


    /*
     * Pfeil hinter der Sprach-Auswahl
     */
    #ca-languages::after {
        content: "" !important;
        display: inline-block !important;

        position: relative !important;
        top: -1px !important;

        width: var(--ardapedia-chevron-size) !important;
        height: var(--ardapedia-chevron-size) !important;

        margin-left: 2px !important;

        background-image: url("/w/resources/assets/fontawesome/svgs/light/chevron-down.svg") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size:
            var(--ardapedia-chevron-size)
            var(--ardapedia-chevron-size) !important;

        vertical-align: middle !important;
    }

}


/* =========================================================
   Suche
   ========================================================= */

#searchButton,
#mw-searchButton {
    background-image: url("/w/resources/assets/fontawesome/svgs/light/magnifying-glass.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px 18px !important;
}