Zum Inhalt springen

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

Aus Besorgte Hausfrauen
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 1: Zeile 1:
/* Der Button selbst */
/* Styling für den JavaScript-Button */
.mein-foto-button {
.js-foto-button {
     position: fixed; /* Fixiert am Bildschirm */
     position: fixed;       /* Fixiert am Bildschirm */
    top: 70px;      /* Abstand von oben (unterhalb der Kopfzeile) */
     z-index: 9999;         /* Über allem anderen (wichtig!) */
    right: 15px;    /* Abstand von rechts */
     z-index: 3000;   /* Höher als alles andere (Menüs etc.) */
      
      
     display: block;
     /* Aussehen Desktop (Standard) */
     background-color: #d33; /* Rot */
    top: 15px;             /* Ganz oben */
     color: #ffffff !important; /* Weiß */
    right: 120px;          /* Etwas links vom Benutzermenü/Suche */
     padding: 10px 20px;
   
     background-color: #d33;
     color: #ffffff !important;
     padding: 8px 15px;
     font-weight: bold;
     font-weight: bold;
     font-family: sans-serif;
     font-family: sans-serif;
     text-decoration: none !important;
     text-decoration: none !important;
     border-radius: 5px;
     border-radius: 4px;
     box-shadow: 0 4px 8px rgba(0,0,0,0.4);
     box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    text-transform: uppercase;
     font-size: 14px;
     font-size: 14px;
}
}


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


/* WICHTIG: Auf dem Handy etwas kleiner und weiter unten,
/* --- HANDY ANSICHT (Mobile) --- */
  damit es nicht das Benutzermenü verdeckt */
@media screen and (max-width: 768px) {
@media screen and (max-width: 768px) {
     .mein-foto-button {
     .js-foto-button {
         top: auto;     /* Nicht mehr oben fixieren */
         top: auto;       /* Nicht oben */
         bottom: 20px;   /* Sondern unten rechts (wie ein Chat-Button) */
         bottom: 20px;     /* Sondern unten */
         right: 20px;
         right: 20px;     /* Rechts */
       
        padding: 15px 20px; /* Größerer Touch-Bereich */
        border-radius: 50px; /* Pillen-Form */
         font-size: 16px;
         font-size: 16px;
         padding: 15px 25px;
         box-shadow: 0 4px 10px rgba(0,0,0,0.5);
        border-radius: 50px; /* Runder "Pille"-Look auf Handy */
     }
     }
}
}

Version vom 27. November 2025, 14:28 Uhr

/* Styling für den JavaScript-Button */
.js-foto-button {
    position: fixed;       /* Fixiert am Bildschirm */
    z-index: 9999;         /* Über allem anderen (wichtig!) */
    
    /* Aussehen Desktop (Standard) */
    top: 15px;             /* Ganz oben */
    right: 120px;          /* Etwas links vom Benutzermenü/Suche */
    
    background-color: #d33;
    color: #ffffff !important;
    padding: 8px 15px;
    font-weight: bold;
    font-family: sans-serif;
    text-decoration: none !important;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    font-size: 14px;
}

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

/* --- HANDY ANSICHT (Mobile) --- */
@media screen and (max-width: 768px) {
    .js-foto-button {
        top: auto;        /* Nicht oben */
        bottom: 20px;     /* Sondern unten */
        right: 20px;      /* Rechts */
        
        padding: 15px 20px; /* Größerer Touch-Bereich */
        border-radius: 50px; /* Pillen-Form */
        font-size: 16px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    }
}