Zum Inhalt springen

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

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


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


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


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

Version vom 27. November 2025, 15:00 Uhr

.js-foto-button {
    position: fixed;
    z-index: 99999 !important;
    cursor: pointer;
    pointer-events: auto !important;
    
    background-color: #d33;
    color: #ffffff !important;
    font-family: sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    border: 2px solid white;
}

/* PC Ansicht */
@media screen and (min-width: 769px) {
    .js-foto-button {
        top: 80px;
        right: 20px;
        padding: 10px 20px;
        border-radius: 5px;
        font-size: 14px;
    }
}

/* Handy Ansicht */
@media screen and (max-width: 768px) {
    .js-foto-button {
        top: auto;
        bottom: 30px;
        right: 20px;
        padding: 15px 25px;
        border-radius: 50px;
        font-size: 16px;
    }
}

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