Abstände (Gutter) werden über die Custom Properties
--masonry-gutter-h (horizontal)
--masonry-gutter-v (vertikal)
gesteuert und können global oder per Selector überschrieben werden.
Breakpoints (aus dem Oneo/Rocksolid-Theme übernommen):
Desktop > 900 px > Spaltenanzahl laut Contao-Element (cols-1…12)
Tablet 600–899 px > immer 3 Spalten
Mobile ≤ 599 px > 1 Spalte (volle Breite)
*/
/*
1. CUSTOM PROPERTIES – Abstände (hier zentral anpassen)
*/
.gallery--masonry {
/*
Horizontaler Abstand zwischen den Spalten.
Masonry liest diesen Wert per JS als "gutter"-Option aus.
Wert muss eine CSS-Länge mit Einheit sein (px, %, em, rem …).
*/
--masonry-gutter-h: 12px;
/*
Vertikaler Abstand (bottom-margin) unter jedem Bild.
Wird per CSS auf die li-Elemente angewendet.
*/
--masonry-gutter-v: 12px;
}
/*
2. CONTAINER-RESET
Oneo setzt auf .content-gallery > ul ein display:flex / margin / padding.
Diese Regeln müssen für Masonry zurückgesetzt werden, da Masonry selbst das absolute Positionierungsmodell übernimmt.
*/
.gallery--masonry > ul {
/*
Masonry positioniert li-Elemente absolut → das ul muss position:relative sein, damit das Bounding-Box-Berechnung stimmt.
display:block statt display:flex, weil Masonry kein Flexbox-Layout nutzt.
*/
display: block !important;
position: relative;
/*
Oneo-Standard-Margins/-Paddings werden zurückgesetzt, da Masonry den Gutter selbst verwaltet.
*/
margin: 0 !important;
padding: 0 !important;
/*
list-style bleibt aus (Oneo setzt !important, wir überschreiben ebenfalls mit !important, um sicher zu sein).
*/
list-style: none !important;
}
/*
Clearfix-Pseudo-Elemente, die Oneo setzt, neutralisieren
*/
.gallery--masonry > ul::before,
.gallery--masonry > ul::after {
display: none !important;
}
/*
3. ELEMENT-BREITEN (Desktop > 900 px)
Masonry benötigt explizite prozentuale Breiten auf den li-Elementen.
Die Breite ergibt sich aus: (100% – (n-1) × gutter) / n
Da der Gutter in px angegeben wird (--masonry-gutter-h: 12px), nutzen wir calc().
Masonry liest den horizontalen Gutter per JS (s. js_masonry.html5) direkt aus dem CSS aus (data-Attribut oder getComputedStyle),
damit JS und CSS immer übereinstimmen.
Formel: width = (100% - (cols - 1) * gutter) / cols
> wird über calc() abgebildet.
WICHTIG: float:left muss gesetzt bleiben, damit Masonry die initiale Breite vor der JS-Berechnung korrekt lesen kann.
*/
/*
Globales Reset: li erbt kein width von Oneo, wir übernehmen die Steuerung
vollständig. margin-bottom übernimmt den vertikalen Abstand.
*/
.gallery--masonry > ul > li {
float: left; /* Masonry erwartet block-level oder float-Elemente */
margin: 0; /* Oneo-Margins überschreiben */
padding: 0;
/* Vertikaler Abstand via CSS-Custom-Property */
margin-bottom: var(--masonry-gutter-v);
box-sizing: border-box;
}
/* --- 1 Spalte --- */
.gallery--masonry.content-gallery--cols-1 > ul > li {
width: 100%;
}
/* --- 2 Spalten --- */
.gallery--masonry.content-gallery--cols-2 > ul > li {
width: calc((100% - 1 * var(--masonry-gutter-h)) / 2);
}
/* --- 3 Spalten --- */
.gallery--masonry.content-gallery--cols-3 > ul > li {
width: calc((100% - 2 * var(--masonry-gutter-h)) / 3);
}
/* --- 4 Spalten --- */
.gallery--masonry.content-gallery--cols-4 > ul > li {
width: calc((100% - 3 * var(--masonry-gutter-h)) / 4);
}
/* --- 5 Spalten --- */
.gallery--masonry.content-gallery--cols-5 > ul > li {
width: calc((100% - 4 * var(--masonry-gutter-h)) / 5);
}
/* --- 6 Spalten --- */
.gallery--masonry.content-gallery--cols-6 > ul > li {
width: calc((100% - 5 * var(--masonry-gutter-h)) / 6);
}
/* --- 7 Spalten --- */
.gallery--masonry.content-gallery--cols-7 > ul > li {
width: calc((100% - 6 * var(--masonry-gutter-h)) / 7);
}
/* --- 8 Spalten --- */
.gallery--masonry.content-gallery--cols-8 > ul > li {
width: calc((100% - 7 * var(--masonry-gutter-h)) / 8);
}
/* --- 9 Spalten --- */
.gallery--masonry.content-gallery--cols-9 > ul > li {
width: calc((100% - 8 * var(--masonry-gutter-h)) / 9);
}
/* --- 10 Spalten --- */
.gallery--masonry.content-gallery--cols-10 > ul > li {
width: calc((100% - 9 * var(--masonry-gutter-h)) / 10);
}
/* --- 11 Spalten --- */
.gallery--masonry.content-gallery--cols-11 > ul > li {
width: calc((100% - 10 * var(--masonry-gutter-h)) / 11);
}
/* --- 12 Spalten --- */
.gallery--masonry.content-gallery--cols-12 > ul > li {
width: calc((100% - 11 * var(--masonry-gutter-h)) / 12);
}
/*
4. BILDER im li
img soll immer die volle Breite des li ausfüllen; Oneo-Bildstyles (hover-Overlays etc.) bleiben unangetastet, da wir nur width/height setzen.
*/
.gallery--masonry > ul > li img {
display: block;
width: 100%;
height: auto; /* Seitenverhältnis bewahren – wichtig für Masonry */
}
/* figure und a bleiben im Oneo-Standardstil; nur Breite sicherstellen */
.gallery--masonry > ul > li > figure,
.gallery--masonry > ul > li > .image_container {
display: block;
width: 100%;
}
/*
5. MAXIMALE BREITE DES GALERIE-CONTAINERS
Die Galerie soll auf dem Desktop nicht breiter als 1200 px werden.
*/
.gallery--masonry {
max-width: 1200px;
/* Zentrierung innerhalb des Elternelements, falls der umgebende Bereich breiter als 1200 px ist. */
margin-left: auto;
margin-right: auto;
/* Breite auf 100% damit kleinere Viewports responsiv bleiben */
width: 100%;
box-sizing: border-box;
}
/*
6. TABLET-BREAKPOINT (600 – 899 px) → immer 3 Spalten
Egal welche Spaltenanzahl im Contao-Element eingestellt ist, auf Tablet werden immer genau 3 Spalten gezeigt.
*/
@media screen and (min-width: 600px) and (max-width: 899px) {
/*
Alle cols-Varianten werden auf 3 Spalten gezwungen.
Ein einziger Selector reicht, da wir alle cols-X-Klassen überschreiben.
Höhere Spezifität durch Kombination mit "gallery--masonry".
*/
.gallery--masonry[class*="content-gallery--cols-"] > ul > li,
.gallery--masonry > ul > li {
width: calc((100% - 2 * var(--masonry-gutter-h)) / 3);
}
}
/*
7. MOBILER BREAKPOINT (≤ 599 px) → 1 Spalte (volle Breite)
Masonry wird ab dieser Breite deaktiviert (s. JS-Template) und die Bilder laufen einfach untereinander.
*/
@media screen and (max-width: 599px) {
/*
Alle cols-Varianten: 1 Spalte, volle Breite.
float zurücksetzen, da Masonry-JS auf Mobile deaktiviert wird und das
normale Dokumentenlayout übernimmt.
*/
.gallery--masonry[class*="content-gallery--cols-"] > ul > li,
.gallery--masonry > ul > li {
width: 100% !important;
float: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/*
ul-Position zurücksetzen, da Masonry auf Mobile deaktiviert ist und die JS-generierten inline-styles (position, top, left)
nicht mehr passen. Die JS-Logik entfernt diese Styles ebenfalls (s. js_masonry.html5).
*/
.gallery--masonry > ul {
position: static !important;
height: auto !important;
}
}
/*
8. LADEZUSTAND – Bilder vor dem Masonry-Init unsichtbar halten
Vermeidet kurzes „Flackern" in der ungitter-losen Standarddarstellung, bevor Masonry gelayoutet hat.
Die JS-Logik entfernt die Klasse nach dem ersten Layout-Durchlauf.
*/
.gallery--masonry.is-loading > ul > li {
/*
Bilder während des Ladens unsichtbar, aber im Layout-Fluss vorhanden (visibility statt display:none),
damit imagesLoaded die Dimensionen messen kann.
*/
visibility: hidden;
}
/*
Sanfter Einblende-Effekt, sobald das Layout fertig ist.
Die Klasse "is-ready" wird vom JS gesetzt.
*/
.gallery--masonry.is-ready > ul > li {
visibility: visible;
animation: masonry-fadein 0.4s ease-in;
}
@keyframes masonry-fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/*
9. LADEINDIKATOR – Spinner + Text während des Bildladens
Der Indikator wird per JS als
direkt VOR dem
in den Container eingefügt und nach dem Laden wieder entfernt.
Anpassungsmöglichkeiten (hier zentral ändern):
--loader-color > Farbe des Spinners und des Texts
--loader-size > Durchmesser des Spinners
--loader-border > Stärke des Spinner-Rings
--loader-speed > Umdrehungsgeschwindigkeit
--loader-text > Anzeigetext (nur via JS änderbar, s. js_masonry.html5)
*/
.gallery--masonry {
/*
Farbe des Ladeindikators – an das Oneo-Theme anpassen.
Standard: mittelgrau, gut sichtbar auf hellem und dunklem Hintergrund.
*/
--loader-color: #555555;
/* Durchmesser des Spinner-Kreises */
--loader-size: 48px;
/* Ringbreite des Spinners */
--loader-border: 4px;
/* Dauer einer vollen Umdrehung */
--loader-speed: 0.9s;
}
/*
Wrapper-Element für Spinner und Text.
Wird per JS eingefügt (s. initMasonry in js_masonry.html5).
Zentriert sich horizontal im Galerie-Container.
*/
.masonry-loader {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px; /* Abstand zwischen Spinner und Text */
padding: 2em 0 2.5em; /* Etwas Luft über und unter dem Indikator */
width: 100%;
}
/*
Der Spinner selbst: ein Kreis-Element, dessen obere Kante farbig ist und sich dreht (CSS-Animation).
*/
.masonry-loader__spinner {
width: var(--loader-size);
height: var(--loader-size);
border-radius: 50%;
/*
Transparenter Ring als Basis, farbiger Bogen oben (border-top-color).
border-color: transparent setzt alle vier Seiten auf transparent;
border-top-color überschreibt anschließend nur die obere Seite.
*/
border: var(--loader-border) solid transparent;
border-top-color: var(--loader-color);
/* Dreht sich kontinuierlich im Uhrzeigersinn */
animation: masonry-spin var(--loader-speed) linear infinite;
}
/* Drehanimation für den Spinner */
@keyframes masonry-spin {
to { transform: rotate(360deg); }
}
/*
Ladetext unter dem Spinner.
Schriftgröße und Farbe an das Oneo-Theme angelehnt.
Die drei Punkte am Ende pulsieren (s. masonry-dots-Animation).
*/
.masonry-loader__text {
font-size: 0.9em;
color: var(--loader-color);
letter-spacing: 0.03em;
/*
Die animierten Punkte werden über ein ::after-Pseudo-Element erzeugt, damit der Basistext ("Fotos werden geladen") unverändert bleibt.
*/
}
/*
Animierte Punkte: „.", „..", „..." im Wechsel.
Erzeugt den Eindruck eines laufenden Prozesses.
*/
.masonry-loader__text::after {
content: '';
display: inline-block;
width: 1.4em; /* Feste Breite verhindert Textverschiebung */
text-align: left;
animation: masonry-dots 1.5s steps(4, end) infinite;
}
@keyframes masonry-dots {
0% { content: ''; }
25% { content: '.'; }
50% { content: '..'; }
75% { content: '...'; }
100% { content: ''; }
}
/*
Fortschrittsbalken unter Spinner und Text.
Zeigt den prozentualen Ladefortschritt an (wird per JS aktualisiert).
Die Breite des inneren Balkens wird per JS als inline-style gesetzt: progressBar.style.width = percent + '%';
*/
.masonry-loader__bar-track {
width: min(240px, 80%); /* Maximal 240 px, auf kleinen Viewports schmaler */
height: 4px;
background: rgba(0, 0, 0, 0.1);
border-radius: 2px;
overflow: hidden;
}
.masonry-loader__bar-fill {
height: 100%;
width: 0%; /* Startwert; wird per JS auf 0–100% gesetzt */
background: var(--loader-color);
border-radius: 2px;
transition: width 0.2s ease; /* Weicher Übergang beim Fortschritt-Update */
}
/* - - - Ende Masonry - - - */
/* Version für Contao 5.3 */
/* Drucken alles ausblenden */
@media print {
* {
display:none;
}
}
/* Scrolleiste rechts dauerhaft einblenden */
html {
overflow-x:auto;
overflow-y:scroll;
/* Hintergrundfarbe beim Tippen auf Mobilgeräten entfernen */
-webkit-tap-highlight-color: transparent;
}
/* Footer-Top-Link anpassen */
.footer-top-link {
position: fixed;
bottom: 5px;
left: 80%;
opacity: 0.5;
}
/*Footer Anpassungen */
.page-footer {
background: #607d8b;
padding: 30px 0 1px 0;
}
.page-footer a {
color: #ffffff;
}
.page-footer .active {
color: #212121;
font-weight: bold;
}
.footer-copyright {
color: #ffffff;
}
/*Zurück-Link anpassen */
.zurueck {
padding: 25px 0 15px 0;
}
/* Pagination Seite x von y ausblenden */
.pagination p {
display: none;
}
/* Formular Pflichtfelder Stern rot */
.main-content label .mandatory,
.main-content legend .mandatory {
color:#ff0000;
}
.main-content legend .mandatory {
margin-left:2px;
}
/* Formular Ränder bei Tel, Date und Number entfernen */
input[type="tel"],
input[type="number"],
input[type="date"] {
outline: none;
}
/* Formular Checkbox und Radio Position des Labels anpassen */
.main-content input[type="checkbox"] + label {
bottom: -1px;
position: relative;
}
.main-content input[type="radio"] + label {
bottom: -1px;
position: relative;
}
/* Altcha-Label Position korrigieren */
form label.altcha-label {
margin-bottom: 0;
}
/* Formularfelder Select und Input bei Error rot umranden */
select.error,
texrarea.error {
border-color: #990100;
}
/* Formulare Select Menü stylen */
/* Stanadard-Styles entfernen */
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border:none;
border-radius: 0;
font-size: 1.5em;
width: 75%
}
/* neuer style festlegen*/
select {
border: 1px solid #dcdcdc;
padding:.7em 1em .7em 1em;
background-color: #ffffff;
background-image: url(../../files/schmidty-net-files/home/pfeil1-242424.png);
background-position: right 1em center;
background-size: 2em;
background-repeat: no-repeat;
color: #242424;
cursor: pointer;
outline: none;
font-size: 1em
}
/* Korrekturen IE */
/* Pfeil beim IE10 verstecken */
select::-ms-expand {
display:none;
}
/* Beim IE 8/9 Hintergundbild entfernen */
.lt-ie10 select {
background-image: none;
}
/* Focus bei Select im IE entfernen */
select:focus::-ms-value {
background-color: transparent;
}
/* Textarea Bauplananforderung Höhe anpassen */
.bauplankommentar textarea {
height:100px;
}
/* Masonry Galerie Slides */
/* Breiterer Rand unten beim Rahmen entfernen */
.ce_masonry_gallery.image_container.no-border,
.ce_masonry_gallery.no-border .image_container,
.ce_masonry_gallery.image_container,
.ce_masonry_gallery .image_container {
display: block;
}
/* Abstand um Galerie außen entfernen */
.ce_masonry_gallery.msry_theme_standard {
padding:0;
}
/* slides */
.msry_theme_standard .masonry_gallery {
margin-bottom: 0;
border-radius: 0;
box-shadow: none;
padding: 0;
}
.msry_theme_standard .masonry_gallery figure {
border: 6px solid #ffffff; /* Rand und Farbe um die einzelnen Fotos */
}
/*jQuery Colorbox anpassen */
/* Position des Bildtitels korrigieren */
#cboxTitle {
margin-left: 6px;
}
/* Position des Bildzählers Bild X von Y korrigieren */
#cboxCurrent {
margin-right: 6px;
}
/* FS-EDV Logo */
.fsedv {
color:#000000;
margin-top:5px;
margin-bottom:20px;
}
.fsedv img {
-webkit-box-shadow: 5px 5px 5px #dadada;
-moz-box-shadow: 5px 5px 5px #dadada;
box-shadow: 5px 5px 5px #dadada;
border: 1px solid #dadada;
}
/* Sitemap doppeltes Icon ausblenden */
.mod_sitemap ul li::before {
content:none;
}
/* Text mit Bild - Bildgröße anpassen */
/* Bildgröße für alle Elemente ändern */
/* Original = [ 16.66667% !important; ] */
.oneo-no-sidebar .media--right figure,
.oneo-no-sidebar .media--left figure{
width: 20em !important;
max-width: 40% !important;
}
/* Volle Bildbreite herstellen bei einspaltigem Layout */
@media screen and (max-width: 599px) {
.oneo-no-sidebar .media--right figure,
.oneo-no-sidebar .media--left figure {
width: 100% !important;
max-width: 100% !important;
}
}
/* Clearfix für Text mit Bild und andere Floats wenn ein Element kürzer ist als das andere */
/* Die Klasse clearfix muss dem umgebenden Element (z.B.: = Text mit Bild) zugewiesen werden */
.clearfix:after {
content: "";
display: table;
clear: both;
}
/* Modul Suche - Suchbutton Position korrigieren */
.mod_search form button[type="submit"] {
position: relative;
bottom: -2px;
}
/* Mobil-Menü Suche - Schriftfarbe anpassen */
.main-navigation-mobile-search input {
color: #ffffff;
}
/* Kommentarfelder bei angepasstem Kommentartemplate anpassen */
.ce_comments .form .widget.widget-textarea {
clear: both;
padding-top: 1.6em;
float: none;
width: auto;
margin-right: 0;
margin-left: 0;
}
/* Überschrift Kommentare bei den Nachrichten ausblenden */
/* Die Klasse comment1 muss im Template mod_newsreader.html5 zugewiesen werde --> mod_newsreader_class.html5 */
.ce_comments h2.comment1 {
display: none;
}
/* Bei News Boxed das farbige Hover entfernen */
.news-boxed-item-image-more > a:hover,
.news-boxed-item-image-more > a:focus {
background: transparent;
opacity: 0;
}
/* News Boxed Symbol am Bild oben ausblenden */
.news-boxed-item-image:after {
content: none;
}
/* SPAN im Absatz - Abstand links und rechts entfernen */
.main-content p > span[style] {
padding: 0;
}
/* Nachrichtenarchiv-Menü anpassen*/
/* h2 (Monat und Jahr) im Header des Nachrichtenarchiv ausblenden */
/* aber bei den einzelnen Nachrichhten anzeigen */
.mod_newsarchive h1 {
display: none;
}
.mod_newsarchive article h2 {
display: inline-block;
}
/* Nachrichtenarchiv-Menü stylen */
.mod_newsmenu ul {
list-style: none;
margin: 0;
padding: 0;
}
.mod_newsmenu ul.level_1 li,
.mod_newsmenu ul.level_2 li {
float: left;
margin-right: 1em;
margin-bottom: 2em;
}
.mod_newsmenu .year {
margin-bottom: 1em;
}
/* Pagination Newslist und Newslist Boxed anpassen */
.mod_newslist .pagination,
.mod_newsarchive .pagination {
clear: both;
padding-top: 1.5em;
}
.mod_newslist .pagination p,
.mod_newsarchive .pagination p {
margin-bottom: 0.3em;
}
/* Farbige Ränder bei den Seitenlayouts mit Breadcrumbs entfernen */
.breadcrumbs-wrapper {
padding-bottom: 0;
}
.tagline + .content-wrapper {
margin-top: 0;
}
/* Video auf 400 Pixel Breite setzen (Breitenbegrenzung für iPhone Video hochkant) */
.video400.content-player video,
.video400.content-player audio,
.video400.video_container video,
.video400.audio_container audio {
max-width:400px;
}
/* Video zentriert darstellen */
.video400 video {
margin: 0 auto;
}
/* Mindestbreite der Spalten in der Linkliste festlegen */
.headerfield1 {
min-width: 18%;
}
.headerfield3 {
min-width: 10%;
}
/* Buttons im Linkliste-Formular nebeneinander */
.linkliste .widget-submit {
margin-right: 1.2em;
float: left;
}
.linkliste .widget-submit button {
margin: 0;
}
.button-box.linkliste {
margin: 2.4em 0 1.2em;
}