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

/* Der Button selbst */
.mein-foto-button {
    position: fixed; /* Fixiert am Bildschirm */
    top: 70px;       /* Abstand von oben (unterhalb der Kopfzeile) */
    right: 15px;     /* Abstand von rechts */
    z-index: 3000;   /* Höher als alles andere (Menüs etc.) */
    
    display: block;
    background-color: #d33; /* Rot */
    color: #ffffff !important; /* Weiß */
    padding: 10px 20px;
    font-weight: bold;
    font-family: sans-serif;
    text-decoration: none !important;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
    text-transform: uppercase;
    font-size: 14px;
}

/* Hover-Effekt */
.mein-foto-button:hover {
    background-color: #f00;
    transform: scale(1.05);
}

/* WICHTIG: Auf dem Handy etwas kleiner und weiter unten, 
   damit es nicht das Benutzermenü verdeckt */
@media screen and (max-width: 768px) {
    .mein-foto-button {
        top: auto;      /* Nicht mehr oben fixieren */
        bottom: 20px;   /* Sondern unten rechts (wie ein Chat-Button) */
        right: 20px;
        font-size: 16px;
        padding: 15px 25px;
        border-radius: 50px; /* Runder "Pille"-Look auf Handy */
    }
}