MediaWiki:Vector-2022.css: Unterschied zwischen den Versionen
Erscheinungsbild
Admin (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Admin (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| Zeile 1: | Zeile 1: | ||
.js-foto-button { | .js-foto-button { | ||
position: fixed; | /* WICHTIG: Damit der Button über ALLEM liegt und klickbar ist */ | ||
z-index: | position: fixed; | ||
z-index: 2147483647 !important; /* Der technisch höchstmögliche Wert */ | |||
cursor: pointer; /* Zeigt die Hand beim Drüberfahren */ | |||
/* Design */ | |||
background-color: #d33; | background-color: #d33; | ||
color: #ffffff | color: #ffffff; | ||
font-family: sans-serif; | |||
font-weight: bold; | font-weight: bold; | ||
text-transform: uppercase; | |||
text- | text-align: center; | ||
box-shadow: 0 4px 8px rgba(0,0,0,0.5); | |||
box-shadow: 0 | border: 2px solid white; /* Weißer Rand macht ihn sichtbarer */ | ||
} | } | ||
/* | /* --- DESKTOP (PC/Laptop) --- */ | ||
.js-foto-button: | @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 | /* --- HANDY (Mobile) --- */ | ||
@media screen and (max-width: 768px) { | @media screen and (max-width: 768px) { | ||
.js-foto-button { | .js-foto-button { | ||
top: auto; | top: auto; /* Nicht oben */ | ||
bottom: | bottom: 30px; /* Sondern unten */ | ||
right: 20px; | right: 20px; /* Rechts */ | ||
padding: 15px 20px; | |||
padding: 15px 20px; | border-radius: 50px; /* Rund */ | ||
border-radius: 50px; /* | |||
font-size: 16px; | font-size: 16px; | ||
} | } | ||
} | |||
/* Hover-Effekt */ | |||
.js-foto-button:hover { | |||
background-color: #ff0000; | |||
transform: scale(1.05); | |||
} | } | ||
Version vom 27. November 2025, 14:40 Uhr
.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);
}