Zum Inhalt springen

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

Aus Besorgte Hausfrauen
Die Seite wurde neu angelegt: „→1. Den Container-Bereich (Sidebar) nach oben rechts verschieben: #p-Fotos-Button { position: fixed; →Fixiert ihn relativ zum Browserfenster: top: 20px; →Abstand vom oberen Rand: right: 20px; →Abstand vom rechten Rand: z-index: 100; →Sorgt dafür, dass er über anderen Elementen liegt: background: none; →Keine Hintergrundfarbe für den Container: border: none; } /* 2. Den eigentlichen Link (den…“
 
Keine Bearbeitungszusammenfassung
 
(6 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
/* 1. Den Container-Bereich (Sidebar) nach oben rechts verschieben */
/* Der Container, der die Buttons hält und positioniert */
#p-Fotos-Button {
.custom-button-wrapper {
     position: fixed; /* Fixiert ihn relativ zum Browserfenster */
     position: fixed;
     top: 20px;       /* Abstand vom oberen Rand */
     z-index: 99999 !important;
     right: 20px;     /* Abstand vom rechten Rand */
     display: flex;           /* Flexbox aktiviert */
     z-index: 100;   /* Sorgt dafür, dass er über anderen Elementen liegt */
     flex-direction: column; /* Buttons untereinander stapeln */
     background: none; /* Keine Hintergrundfarbe für den Container */
     gap: 10px;               /* Abstand zwischen den Buttons */
     border: none;
     pointer-events: none;   /* Der Container selbst blockiert keine Klicks drumherum */
}
}


/* 2. Den eigentlichen Link (den Button) stylen */
/* Das Aussehen der Buttons */
#p-Fotos-Button li a {
.js-custom-button {
     display: block;
     pointer-events: auto;   /* Die Buttons müssen klickbar sein */
     padding: 10px 20px !important; /* Button-Größe */
     cursor: pointer;
     background-color: #CC3333; /* Auffällige Farbe (dunkles Rot) */
   
     color: #ffffff !important; /* Weiße Schrift */
     background-color: #d33; /* Rot */
     color: #ffffff !important;
    font-family: sans-serif;
    font-weight: bold;
    text-transform: uppercase;
     text-align: center;
     text-align: center;
     text-decoration: none;
     text-decoration: none !important;
    font-weight: bold;
     box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    border-radius: 5px; /* Abgerundete Ecken */
     border: 2px solid white;
     box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Leichter Schatten */
   
     font-size: 1.2em; /* Große Schrift */
    /* Animation für Hover */
     transition: background-color 0.3s; /* Weicher Hover-Effekt */
     transition: transform 0.2s, background-color 0.2s;
}
 
/* Hover-Effekt für beide Buttons */
.js-custom-button:hover {
    background-color: #ff0000;
    transform: scale(1.05);
}
}


/* 3. Hover-Effekt für Benutzerfreundlichkeit */
/* --- PC / DESKTOP --- */
#p-Fotos-Button li a:hover {
@media screen and (min-width: 769px) {
    background-color: #FF4444; /* Hellere Farbe beim Überfahren */
    .custom-button-wrapper {
        top: 80px;
        right: 20px;
    }
   
    .js-custom-button {
        padding: 10px 20px;
        border-radius: 5px;
        font-size: 14px;
    }
}
}


/* 4. Verstecke den Titel "Fotos-Button" des Containers (da er nicht benötigt wird) */
/* --- HANDY / MOBILE --- */
#p-Fotos-Button .sidebar-portlet-header {
@media screen and (max-width: 768px) {
    display: none;
    .custom-button-wrapper {
        top: auto;
        bottom: 30px; /* Abstand vom unteren Rand */
        right: 20px;
    }
   
    .js-custom-button {
        padding: 12px 20px;
        border-radius: 50px; /* Pillen-Form auf Handy */
        font-size: 14px;
    }
}
}

Aktuelle Version vom 27. November 2025, 15:09 Uhr

/* Der Container, der die Buttons hält und positioniert */
.custom-button-wrapper {
    position: fixed;
    z-index: 99999 !important;
    display: flex;           /* Flexbox aktiviert */
    flex-direction: column;  /* Buttons untereinander stapeln */
    gap: 10px;               /* Abstand zwischen den Buttons */
    pointer-events: none;    /* Der Container selbst blockiert keine Klicks drumherum */
}

/* Das Aussehen der Buttons */
.js-custom-button {
    pointer-events: auto;    /* Die Buttons müssen klickbar sein */
    cursor: pointer;
    
    background-color: #d33;  /* Rot */
    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;
    
    /* Animation für Hover */
    transition: transform 0.2s, background-color 0.2s;
}

/* Hover-Effekt für beide Buttons */
.js-custom-button:hover {
    background-color: #ff0000;
    transform: scale(1.05);
}

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

/* --- HANDY / MOBILE --- */
@media screen and (max-width: 768px) {
    .custom-button-wrapper {
        top: auto;
        bottom: 30px; /* Abstand vom unteren Rand */
        right: 20px;
    }
    
    .js-custom-button {
        padding: 12px 20px;
        border-radius: 50px; /* Pillen-Form auf Handy */
        font-size: 14px;
    }
}
Abgerufen von „http://www.besorgtehausfrauen.at/index.php?title=MediaWiki:Vector-2022.css&oldid=58“