/* ========================================================== BARBARARIGERT.CH – ZENTRALE DESIGN-ANPASSUNGEN Template: Cassiopeia Extended Eigene Anpassungen am Erscheinungsbild der Website. Neue CSS-Anpassungen möglichst dem passenden Abschnitt zuordnen und kurz dokumentieren. WICHTIG: Änderungen am Original-Template möglichst vermeiden. Eigene Anpassungen werden zentral in dieser user.css gesammelt. ========================================================== */ /* ========================================================== 01 – HEADER Logo, Kopfbereich und allgemeine Header-Darstellung ========================================================== */ /* ========================================================== 01 – HEADER ========================================================== */ /* ---------------------------------------------------------- CANGLESKA – Headerbild Desktop: /images/cangleska/CANGLESKA_Header_Desktop.png Bildformat: 1983 × 500 px Tablet / Mobile: /images/cangleska/CANGLESKA_Header_Tablet_Mobile.png Bildformat: 1502 × 224 px Je nach Bildschirmbreite wird automatisch die passende Variante verwendet. Das bisherige Template-Logo wird per CSS ausgeblendet. Die Brand-Funktion im Template bleibt vorerst aktiviert, damit die bestehende Header-Struktur erhalten bleibt. ---------------------------------------------------------- */ /* ---------------------------------------------------------- Headerbild – Desktop ---------------------------------------------------------- */ .container-header > .grid-child:first-child { width: 100%; max-width: none; padding: 0; /* Original-Seitenverhältnis des Desktop-Bildes */ aspect-ratio: 1983 / 420; background-image: url("/images/cangleska/CANGLESKA_Header_Desktop.png"); background-repeat: no-repeat; background-position: center; background-size: cover; } /* Bisheriges Template-Logo ausblenden */ .container-header .navbar-brand { display: none; } /* ---------------------------------------------------------- Headerbild – Tablet / Mobile ---------------------------------------------------------- */ @media (max-width: 991.98px) { .container-header > .grid-child:first-child { /* Original-Seitenverhältnis der mobilen Variante */ aspect-ratio: 1502 / 224; background-image: url("/images/cangleska/CANGLESKA_Header_Tablet_Mobile.png"); background-position: center; background-size: cover; } } /* ========================================================== 02 – HAUPTMENÜ Navigation im Kopfbereich der Website ========================================================== */ /* ---------------------------------------------------------- Hauptmenü – Schrift und Farbe Gilt sowohl für normale Menülinks als auch für Menüüberschriften ohne eigenen Link. ---------------------------------------------------------- */ .container-header .mod-menu > li > a, .container-header .mod-menu > li > .mod-menu__heading { font-size: 1.2rem; font-weight: 600; color: rgb(173, 29, 235); font-family: inherit; } /* ---------------------------------------------------------- Untermenü – Grundgestaltung Passt das Dropdown-Menü an den übrigen Seitenauftritt an. - Hintergrund wie Haupttextbereich - Links im CANGLESKA-Violett - kompakte Abstände - dezente Rundung und Schatten - ruhiger Hover-Effekt ---------------------------------------------------------- */ /* Dropdown-Hintergrund */ .container-header .mod-menu .mm-collapse { background-color: rgb(255, 245, 252); border: 1px solid rgba(173, 29, 235, 0.12); border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10); overflow: hidden; } /* Untermenü – kompakte Abstände zwischen den Einträgen */ .container-header .mod-menu .mm-collapse > li { margin: 0; padding: 0; line-height: 1.2; } /* Links im Untermenü */ .container-header .mod-menu .mm-collapse > li > a { display: block; padding: 3px 16px; color: rgb(173, 29, 235); font-size: 1rem; font-weight: 600; line-height: 1.3; text-decoration: none; } /* Hover / Tastaturfokus */ .container-header .mod-menu .mm-collapse > li > a:hover, .container-header .mod-menu .mm-collapse > li > a:focus { color: rgb(173, 29, 235); background-color: rgba(173, 29, 235, 0.08); text-decoration: none; } /* Aktiver Untermenüpunkt */ .container-header .mod-menu .mm-collapse > li.active > a, .container-header .mod-menu .mm-collapse > li > a[aria-current="page"] { color: rgb(173, 29, 235); background-color: rgba(173, 29, 235, 0.12); } /* ---------------------------------------------------------- Hamburger-Menü – Mobile / Tablet Passt die mobile Menüdarstellung an den übrigen Seitenauftritt an. - Hamburger-Symbol im CANGLESKA-Violett - dezenter violetter Rahmen - kompaktere Abstände der Haupteinträge - Desktop-Darstellung bleibt unverändert ---------------------------------------------------------- */ /* Hamburger-Symbol und Rahmen */ .container-header .navbar-toggler { color: rgb(173, 29, 235); border-color: rgb(173, 29, 235); } /* Hover / Tastaturfokus */ .container-header .navbar-toggler:hover, .container-header .navbar-toggler:focus { color: rgb(173, 29, 235); border-color: rgb(173, 29, 235); } /* Mobile / Tablet */ @media (max-width: 991.98px) { /* Haupteinträge kompakter */ .container-header .metismenu.mod-menu > .metismenu-item { padding: 0.1em 1em; line-height: 1.25; } /* Links und Menüüberschriften */ .container-header .mod-menu > li > a, .container-header .mod-menu > li > .mod-menu__heading { padding-top: 2px; padding-bottom: 2px; line-height: 1.25; } } /* ========================================================== 03 – ARTIKEL Darstellung der Joomla-Beiträge ========================================================== */ /* ---------------------------------------------------------- Artikelbilder – Abstand zum Fliesstext Betrifft Bilder, die im Artikel über den Reiter "Bilder und Links" eingefügt werden. Bild links: 20px Abstand zwischen rechter Bildkante und Text. 15px Abstand unterhalb des Bildes. Bild rechts: 20px Abstand zwischen linker Bildkante und Text. 15px Abstand unterhalb des Bildes. ---------------------------------------------------------- */ .item-image.left { margin-right: 20px; margin-bottom: 15px; } .item-image.right { margin-left: 20px; margin-bottom: 15px; } /* ---------------------------------------------------------- Blog – "Weiterlesen"-Link Macht aus dem standardmässigen Joomla-Button einen dezenten Textlink. Betrifft NUR den Weiterlesen-Link bei Blogbeiträgen. Andere Buttons der Website bleiben unverändert. Darstellung: - keine Hintergrundfläche - kein Rahmen - kein Schatten - keine Unterstreichung - violette Linkfarbe der Website - Semibold (600) ---------------------------------------------------------- */ .readmore .btn { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; color: rgb(173, 29, 235) !important; font-weight: 600; text-decoration: none !important; } /* Verhalten beim Darüberfahren und bei Tastatur-Fokus */ .readmore .btn:hover, .readmore .btn:focus { background: transparent !important; border: none !important; box-shadow: none !important; color: rgb(173, 29, 235) !important; text-decoration: none !important; } /* ---------------------------------------------------------- Blog – Einleitungsbilder Einheitliche Darstellung der Einleitungsbilder. - Bildbereich 120 x 120px - vollständiges Bild sichtbar - keine Verzerrung - kein Beschneiden ---------------------------------------------------------- */ .blog-items .item-image { width: 120px; height: 120px; } .blog-items .item-image img { width: 100%; height: 100%; object-fit: contain; } /* ========================================================== 04 – MODULE Allgemeine Anpassungen von Joomla-Modulen Modulspezifisches CSS nur hier eintragen, wenn es tatsächlich global über die user.css gesteuert werden soll. ========================================================== */ /* ---------------------------------------------------------- OSDownloads – Downloadlinks Die Downloads werden bewusst dezent als Textlinks dargestellt. - Standard-Button wird optisch entfernt - statt "Download" wird der Dateiname angezeigt - Download-Funktion von OSDownloads bleibt unverändert ---------------------------------------------------------- */ .mod_osdownloadsfiles .btn_download > a { display: inline-block; padding: 0 !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; color: rgb(173, 29, 235) !important; font-size: 1rem; font-weight: 600; } /* Originaltext "Download" ausblenden */ .mod_osdownloadsfiles .btn_download > a span { display: none; } /* Dateiname als Linktext anzeigen */ .mod_osdownloadsfiles .btn_download > a::after { content: attr(data-name); } /* ---------------------------------------------------------- OSDownloads – kompaktere Abstände ---------------------------------------------------------- */ .mod_osdownloadsfiles li { padding-top: 2px; padding-bottom: 2px; } .mod_osdownloadsfiles li > p:empty { display: none; } .mod_osdownloadsfiles .osdownloadsaction, .mod_osdownloadsfiles .btn_download { margin: 0 !important; padding: 0 !important; } /* ---------------------------------------------------------- Zh OpenStreetMap – Abstand zum Fussbereich Sorgt für etwas Luft zwischen der Karte und der darunterliegenden Wegbeschreibung. ---------------------------------------------------------- */ .zhom-map-footer { margin-top: 20px; } /* ========================================================== 05 – FOOTER Fussbereich der Website ========================================================== */ /* ========================================================== 06 – TABLET / MOBILE Spezifische Anpassungen für kleinere Bildschirmgrössen ========================================================== */ /* ========================================================== 07 – LINKS Globale Darstellung von Links auf der gesamten Website ========================================================== */ /* ---------------------------------------------------------- Links – Unterstreichung entfernen Entfernt die Unterstreichung bei allen Links sowie in allen Zuständen: - normal - bereits besucht - Maus darüber (Hover) - Fokus per Tastatur - beim Anklicken ---------------------------------------------------------- */ a, a:link, a:visited, a:hover, a:focus, a:active { text-decoration: none !important; } /* ========================================================== 90 – TESTBEREICH Hier können neue CSS-Anpassungen zunächst ausprobiert werden. Funktionierende Regeln anschliessend in den passenden Abschnitt oben verschieben. So bleibt die eigentliche user.css langfristig übersichtlich. ========================================================== */