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

.js-foto-button {
    /* WICHTIG: Damit der Button über ALLEM liegt und klickbar ist */
    position: fixed;
    z-index: 2147483647 !important; /* Der technisch höchstmögliche Wert */
    cursor: pointer; /* Zeigt die Hand beim Drüberfahren */
    
    /* Design */
    background-color: #d33;
    color: #ffffff;
    font-family: sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    border: 2px solid white; /* Weißer Rand macht ihn sichtbarer */
}

/* --- DESKTOP (PC/Laptop) --- */
@media screen and (min-width: 769px) {
    .js-foto-button {
        top: 80px;      /* Unterhalb der Kopfzeile */
        right: 20px;    /* Ganz rechts am Rand */
        padding: 10px 20px;
        border-radius: 5px;
        font-size: 14px;
    }
}

/* --- HANDY (Mobile) --- */
@media screen and (max-width: 768px) {
    .js-foto-button {
        top: auto;      /* Nicht oben */
        bottom: 30px;   /* Sondern unten */
        right: 20px;    /* Rechts */
        padding: 15px 20px;
        border-radius: 50px; /* Rund */
        font-size: 16px;
    }
}

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