MediaWiki:Common.css: Unterschied zwischen den Versionen

Aus Transfusionshandbuch
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
 
(40 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 11: Zeile 11:
/* Container für mehrere Boxen */
/* Container für mehrere Boxen */
.tile-container {
.tile-container {
     display: flex;
     display: grid;
     flex-wrap: wrap;
     grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Legt eine flexible Spaltenstruktur fest */
     gap: 20px; /* Abstand zwischen den Boxen */
     gap: 20px; /* Abstand zwischen den Boxen */
     justify-content: center;
      
   
}
}


/* Einzelne Box */
/* Einzelne Box */
.custom-window-frame {
.custom-window-frame {
     display: flex;
     /* display: flex; */
     flex-direction: column;
     /* flex-direction: column; */
    align-items: center;
  /* align-items: center; */
     width: 200px; /* Breite jeder Box */
     width: 100%; /* Breite jeder Box */
     height: 250px; /* Einheitliche Höhe der Boxen */
     height: 250px; /* Einheitliche Höhe der Boxen */
     text-align: center;
     text-align: center;
     border: none;
     border: none;
     overflow: hidden;
     overflow: hidden;
     padding: 5px;
     padding: 10px;
     box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
     box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
     text-decoration: none; /* Link-Dekoration entfernen */
     text-decoration: none; /* Link-Dekoration entfernen */
Zeile 38: Zeile 39:
.tile-top.tile-image {
.tile-top.tile-image {
     width: 100%;
     width: 100%;
     height: 150px; /* Festgelegte Höhe für den Bildbereich */
     /* height: 100%; */
    overflow: hidden;background-size: cover; /* Bild skalieren, um den Bereich zu füllen */
     overflow: hidden;
    background-position: center; /* Bild zentrieren */
    background-repeat: no-repeat; /* Wiederholung des Bildes verhindern */
}
 
.tile-top.tile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Skaliert das Bild proportional, sodass es den Bereich füllt */
     object-position: center; /* Zentriert das Bild im Bereich */
}
}


Zeile 55: Zeile 47:
     box-shadow: none; /* Entfernt Schatten oder Linien */
     box-shadow: none; /* Entfernt Schatten oder Linien */
     background: transparent; /* Stellt sicher, dass keine Hintergrundfarbe das Element beeinflusst */
     background: transparent; /* Stellt sicher, dass keine Hintergrundfarbe das Element beeinflusst */
    height: 130px; /* Festgelegte Höhe für Einheitlichkeit */
    padding-top: 15px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
}


.tile-bottom h2 {
.tile-bottom h2 {
     border: none; /* Entfernt eventuelle untere Linien im h2-Tag */
     border: none; /* Entfernt eventuelle untere Linien im h2-Tag */
     margin: 0; /* Stellt sicher, dass keine unerwünschten Abstände vorhanden sind */
     margin: 0px; /* Stellt sicher, dass keine unerwünschten Abstände vorhanden sind */
     font-size: 1.5em;
     font-size: 1.5em;
     style=color:black; /* Standardfarbe für den Titel-Link */
      
     text-decoration: none; /* Entfernt eventuelle Unterstreichung *
     text-decoration: none; /* Entfernt eventuelle Unterstreichung *
}
}


.custom-window-frame .tile-bottom h2 a:visited {
.custom-window-frame .tile-bottom h2 a:visited {
     style=color:black; /* Farbe für besuchte Links */
     color: black; /* Farbe für besuchte Links */
}
}


Zeile 77: Zeile 75:
}
}


.custom-window-frame .full-link {
 
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}


.custom-window-frame .tile-top.tile-image {
.custom-window-frame .tile-top.tile-image {
     cursor: pointer;
     cursor: pointer;
}
}

Aktuelle Version vom 30. Oktober 2024, 13:45 Uhr

/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */

body.page-Hauptseite #firstHeading {
    display: none;
}

#p-personal .minerva-logo {
    display: none;
}

/* Container für mehrere Boxen */
.tile-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Legt eine flexible Spaltenstruktur fest */
    gap: 20px; /* Abstand zwischen den Boxen */
    
    
}

/* Einzelne Box */
.custom-window-frame {
    /* display: flex; */
    /* flex-direction: column; */
   /* align-items: center; */
    width: 100%; /* Breite jeder Box */
    height: 250px; /* Einheitliche Höhe der Boxen */
    text-align: center;
    border: none;
    overflow: hidden;
    padding: 10px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
    text-decoration: none; /* Link-Dekoration entfernen */
    color: inherit;
    background-color: #fff;
    border-radius: 8px;
}

/* Bildbereich festlegen und skalieren */
.tile-top.tile-image {
    width: 100%;
    /* height: 100%; */
    overflow: hidden;
}

.tile-bottom.link-button {
    border: none; /* Entfernt eventuelle Ränder */
    box-shadow: none; /* Entfernt Schatten oder Linien */
    background: transparent; /* Stellt sicher, dass keine Hintergrundfarbe das Element beeinflusst */
    height: 130px; /* Festgelegte Höhe für Einheitlichkeit */
    padding-top: 15px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tile-bottom h2 {
    border: none; /* Entfernt eventuelle untere Linien im h2-Tag */
    margin: 0px; /* Stellt sicher, dass keine unerwünschten Abstände vorhanden sind */
    font-size: 1.5em;
    
    text-decoration: none; /* Entfernt eventuelle Unterstreichung *
}

.custom-window-frame .tile-bottom h2 a:visited {
     color: black; /* Farbe für besuchte Links */
}

.custom-window-frame .tile-bottom h2 a:hover {
    color: darkgray; /* Optionale Farbe bei Hover */
}

.custom-window-frame .tile-bottom h2 a:active {
    color: black; /* Farbe, wenn der Link aktiv ist */
}



.custom-window-frame .tile-top.tile-image {
    cursor: pointer;
}