src/StartPlatz/Bundle/StyleBundle/Resources/views/CSS/_homepage.events-list-page.html.twig line 1

Open in your IDE?
  1. <style>
  2.     .sp-green, .spGreen{
  3.         color:#7AB800;
  4.     }
  5.     .free-access-info {
  6.         font-weight: bold; /* Example property */
  7.         color: #7AB800; /* Startplatz green for free access info */
  8.         /* Additional styling as needed */
  9.     }
  10.     /* CSS-Klassen spezifisch für die Eventliste-Seite */
  11.     .event-list-page .card {
  12.         margin-top: 0; /* Entfernt den oberen Abstand */
  13.     }
  16.     /* Dies stellt sicher, dass die Karten alle die gleiche Höhe haben */
  17.     .event-list-page .card {
  18.         height: 100%; /* Sorgt dafür, dass alle Karten die gleiche Höhe haben */
  19.     }
  21.     .event-list-page .event-image {
  22.         width: 100%; /* passt die Breite an den Container an */
  23.         object-fit: cover; /* stellt sicher, dass das Bild den Bereich füllt, ohne das Verhältnis zu verzerren */
  24.     }
  27.     /* Anpassungen der Schriftgröße und des Abstands für die Titel */
  28.     .event-list-page .card h5.card-title {
  29.         font-size: 1.2rem; /* Starten Sie mit der Standardgröße und passen Sie nach Bedarf an */
  30.         margin-bottom: 0.5rem; /* Abstand nach unten anpassen */
  31.         padding: 0 0.5rem; /* Seitliche Innenabstände hinzufügen */
  32.     }
  34.     /* Reduzierung des Innenabstands für Card-Body und Card-Footer */
  35.     .event-list-page .card .card-body {
  36.         padding: 0.25rem; /* Verringern Sie den Innenabstand */
  37.     }
  39.     /* Anpassung der Schriftgröße und Abstände für die Listenelemente */
  40.     .event-list-page .card .list-unstyled {
  41.         font-size: 1rem; /* Kleinere Schriftgröße für Listen */
  42.         padding-left: 0.5rem; /* Innenabstand links für die Liste */
  43.         padding-right: 0.5rem; /* Innenabstand rechts für die Liste */
  44.     }
  46.     /* Anpassung der Abstände für den Card-Footer */
  47.     .event-list-page .card .card-footer {
  48.         padding: 0.5rem; /* Setzt den Innenabstand für den Card-Footer */
  49.     }
  51.     /* Die übergeordnete Container-Klasse für die Kachel innerhalb von .event-list-page */
  52.     .event-list-page .event-card-container {
  53.         position: relative; /* Ermöglicht die absolute Positionierung des Bildes */
  54.         width: 100%; /* Die Breite der Kachel */
  55.         padding-top: 80%; /* Der Top-Padding bestimmt das Höhenverhältnis basierend auf der Breite (5:4 Verhältnis) */
  56.     }
  58.     /* Die Klasse für das Bild innerhalb des .event-card-container innerhalb von .event-list-page */
  59.     .event-list-page .event-card-container .event-image {
  60.         position: absolute;
  61.         top: 0;
  62.         left: 0;
  63.         width: 100%; /* Die Breite wird vom Container bestimmt */
  64.         height: 100%; /* Die Höhe wird ebenfalls vom Container bestimmt */
  65.         object-fit: cover; /* Sorgt dafür, dass das Bild den Bereich füllt, ohne das Verhältnis zu verzerren */
  66.     }
  68.     .event-list-page .event-link,
  69.     .event-list-page .event-link:hover,
  70.     .event-list-page .event-link:active,
  71.     .event-list-page .event-link:focus,
  72.     .event-list-page .event-link:visited {
  73.         color: inherit; /* Überschreibt die Linkfarbe, um die geerbte Farbe (wie Schwarz oder Grün) zu verwenden */
  74.         text-decoration: none; /* Entfernt die Unterstreichung des Links */
  75.     }
  77.     .threeLineEllipsis {
  78.         overflow: hidden;
  79.         text-overflow: ellipsis;
  80.         display: -webkit-box;
  81.         -webkit-line-clamp: 3; /* number of lines to show */
  82.         line-clamp: 3;
  83.         -webkit-box-orient: vertical;
  84.     }
  86.     .twoLineEllipsis {
  87.         overflow: hidden;
  88.         text-overflow: ellipsis;
  89.         display: -webkit-box;
  90.         -webkit-line-clamp: 2; /* number of lines to show */
  91.         line-clamp: 2;
  92.         -webkit-box-orient: vertical;
  93.     }
  95. </style>