Zum Inhalt springen

MediaWiki:Vector-2022.css: Unterschied zwischen den Versionen

Aus Besorgte Hausfrauen
Die Seite wurde geleert.
Markierung: Geleert
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 */
    }
}