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

Version vom 27. November 2025, 14:16 Uhr

/* Den Menüpunkt "Fotos" aus der Leiste herauslösen und fixieren */
#n-Fotos {
    position: fixed !important;
    top: 80px;       /* Abstand von oben - etwas tiefer, damit es nicht das Benutzermenü verdeckt */
    right: 20px;     /* Abstand von rechts */
    z-index: 999;    /* Ganz weit vorne */
    list-style: none !important; /* Keine Aufzählungspunkte */
    margin: 0 !important;
}

/* Den eigentlichen Link zum Button stylen */
#n-Fotos a {
    display: block !important;
    background-color: #d33; /* Roter Hintergrund */
    color: #fff !important; /* Weiße Schrift */
    padding: 12px 25px !important; /* Größe des Buttons */
    text-decoration: none !important;
    font-weight: bold;
    font-size: 16px;
    border-radius: 8px; /* Runde Ecken */
    box-shadow: 0 4px 6px rgba(0,0,0,0.3); /* Schatten für 3D-Effekt */
    text-transform: uppercase; /* Großbuchstaben */
}

/* Hover-Effekt (Maus drüber) */
#n-Fotos a:hover {
    background-color: #f00; /* Helleres Rot */
    transform: scale(1.05); /* Leicht vergrößern */
}

/* Das Icon neben dem Text ausblenden (falls vorhanden) */
#n-Fotos a::before {
    display: none !important;
}

@@ Zeile 1: / Zeile 1: @@
-/* 1. Den Container-Bereich (Sidebar) nach oben rechts verschieben */
+/* Den Menüpunkt "Fotos" aus der Leiste herauslösen und fixieren */
-#p-Fotos-Button {
+#n-Fotos {
-     position: fixed; /* Fixiert ihn relativ zum Browserfenster */
+     position: fixed !important;
-     top: 20px;       /* Abstand vom oberen Rand */
+     top: 80px;       /* Abstand von oben - etwas tiefer, damit es nicht das Benutzermenü verdeckt */
-     right: 20px;     /* Abstand vom rechten Rand */
+     right: 20px;     /* Abstand von rechts */
-     z-index: 100;    /* Sorgt dafür, dass er über anderen Elementen liegt */
+     z-index: 999;    /* Ganz weit vorne */
-     background: none; /* Keine Hintergrundfarbe für den Container */
+     list-style: none !important; /* Keine Aufzählungspunkte */
-     border: none;
+     margin: 0 !important;
 }
-/* 2. Den eigentlichen Link (den Button) stylen */
+/* Den eigentlichen Link zum Button stylen */
-#p-Fotos-Button li a {
+#n-Fotos a {
-     display: block;
+     display: block !important;
-    padding: 10px 20px !important; /* Button-Größe */
+     background-color: #d33; /* Roter Hintergrund */
-     background-color: #CC3333; /* Auffällige Farbe (dunkles Rot) */
+     color: #fff !important; /* Weiße Schrift */
-     color: #ffffff !important; /* Weiße Schrift */
+     padding: 12px 25px !important; /* Größe des Buttons */
-     text-align: center;
+     text-decoration: none !important;
-     text-decoration: none;
      font-weight: bold;
-     border-radius: 5px; /* Abgerundete Ecken */
+    font-size: 16px;
-     box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Leichter Schatten */
+     border-radius: 8px; /* Runde Ecken */
-     font-size: 1.2em; /* Große Schrift */
+     box-shadow: 0 4px 6px rgba(0,0,0,0.3); /* Schatten für 3D-Effekt */
-    transition: background-color 0.3s; /* Weicher Hover-Effekt */
+     text-transform: uppercase; /* Großbuchstaben */
 }
-/* 3. Hover-Effekt für Benutzerfreundlichkeit */
+/* Hover-Effekt (Maus drüber) */
-#p-Fotos-Button li a:hover {
+#n-Fotos a:hover {
-     background-color: #FF4444; /* Hellere Farbe beim Überfahren */
+     background-color: #f00; /* Helleres Rot */
+    transform: scale(1.05); /* Leicht vergrößern */
 }
-/* 4. Verstecke den Titel "Fotos-Button" des Containers (da er nicht benötigt wird) */
+/* Das Icon neben dem Text ausblenden (falls vorhanden) */
-#p-Fotos-Button .sidebar-portlet-header {
+#n-Fotos a::before {
-     display: none;
+     display: none !important;
 }