MediaWiki:Vector-2022.css: Unterschied zwischen den Versionen
Erscheinungsbild
Admin (Diskussion | Beiträge) Die Seite wurde geleert. Markierung: Geleert |
Admin (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| Zeile 1: | Zeile 1: | ||
/* 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 */ | |||
} | |||
} | |||
Version vom 27. November 2025, 14:25 Uhr
/* 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 */
}
}