MediaWiki:Vector-2022.css

Hinweis: Leere nach dem Veröffentlichen den Browser-Cache, um die Änderungen sehen zu können.

Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken

/* 1. Den Container-Bereich (Sidebar) nach oben rechts verschieben */
#p-Fotos-Button {
    position: fixed; /* Fixiert ihn relativ zum Browserfenster */
    top: 20px;       /* Abstand vom oberen Rand */
    right: 20px;     /* Abstand vom rechten Rand */
    z-index: 100;    /* Sorgt dafür, dass er über anderen Elementen liegt */
    background: none; /* Keine Hintergrundfarbe für den Container */
    border: none;
}

/* 2. Den eigentlichen Link (den Button) stylen */
#p-Fotos-Button li a {
    display: block;
    padding: 10px 20px !important; /* Button-Größe */
    background-color: #CC3333; /* Auffällige Farbe (dunkles Rot) */
    color: #ffffff !important; /* Weiße Schrift */
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px; /* Abgerundete Ecken */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Leichter Schatten */
    font-size: 1.2em; /* Große Schrift */
    transition: background-color 0.3s; /* Weicher Hover-Effekt */
}

/* 3. Hover-Effekt für Benutzerfreundlichkeit */
#p-Fotos-Button li a:hover {
    background-color: #FF4444; /* Hellere Farbe beim Überfahren */
}

/* 4. Verstecke den Titel "Fotos-Button" des Containers (da er nicht benötigt wird) */
#p-Fotos-Button .sidebar-portlet-header {
    display: none;
}