/********************************* **** **** **** DESIGN-OPTIMIERUNG **** **** **** **** Autor: MG **** **** Stand: 10/2022 **** **** everything works **** **** **** **********************************/ /* Die Datei mipa.css ist so ins Template integriert, das diese von jeder Seite benutzt werden kann. Dies ist nicht ganz ideal, aber zum aktuellen Zeitpunkt die einfachere Methode um Komplikationen untereinander schneller feststellen zu können. Nachfolgend wurde versucht es so gut es möglich ist zu gruppieren und verständlich zu kommentieren. */ /************************** ***** FÜR ALLE SEITEN ***** **************************/ /* Setzt die Schriftfarbe des "MipaMix Online" Button in der mobilen Ansicht auf weiß */ .nav-meta .nav-item:last-child .nav-link { color: white !important; } /* entfernt das Link-Symbol/Verlinkungssymbol an allen Stellen auf allen Seiten */ .t3b-icon-external-link-alt::before, a.external-link-new-window::before, .main-content a[target="_blank"]:not(.no-icon)::before { content: none !important; } /* Optimierungen für Tables / Tabellen wie z.B. auf der Seite Kontakt */ /* Entfernt den Unterstrich bei Links */ .ce-bodytext a { text-decoration: none; /*color: #004f9e;*/ } .ce-bodytext a:hover { /*color: #003f7e;*/ text-decoration: none; } .ce-content a { text-decoration: none; } /* Style for Owl-Slider with Cards - aktuell verwendet im Bereich Geschichte und Schulungen */ .owl-item .item .card .card-body .card-title { margin-top: 10px; } .owl-theme .owl-nav [class*='owl-'] { background: #004F9E !important; } /* NEWS-Seite */ .row.news-list-item.mb-5 { border-bottom: 2px solid #EEE; padding-bottom: 3rem; } /********************* ***** STARTSEITE ***** *********************/ /*** NEWS-SECTION ***/ /* Alle drei Elemente (per ID) bekommen eine fixe Standardhöhe von mind. 500px --- Es handelt sich um die einzelnen News also linke News, mittlere News und rechte News*/ #c1872, #c1873, #c1874, #c13051, #c13055, #c13059, #c14266, #c14270, #c14274, #c26573, #c26574, #c26575, #c35469, #c35473, #c35477, #c63193, /*** USA ***/ #c63194, /*** USA ***/ #c63195, /*** USA ***/ #c64531, /*** UNGARN ***/ #c64532, /*** UNGARN ***/ #c64533, /*** UNGARN ***/ #c70031, /*** SCHWEIZ ***/ #c70035, /*** SCHWEIZ ***/ #c70039, /*** SCHWEIZ ***/ #c88408, /*** BELGIEN ***/ #c88409, /*** BELGIEN ***/ #c88410 /*** BELGIEN ***/ { min-height: 500px; } /* Rahmen um die Bilder entfernt --- Es handelt sich um die einzelnen News also linke News, mittlere News und rechte News*/ #c1872 .img-thumbnail, #c1873 .img-thumbnail, #c1874 .img-thumbnail, #c13051 .img-thumbnail, #c13055 .img-thumbnail, #c13059 .img-thumbnail, #c14266 .img-thumbnail, #c14270 .img-thumbnail, #c14274 .img-thumbnail, #c26573 .img-thumbnail, #c26574 .img-thumbnail, #c26575 .img-thumbnail, #c35469 .img-thumbnail, #c35473 .img-thumbnail, #c35477 .img-thumbnail, #c63193 .img-thumbnail, /*** USA ***/ #c63194 .img-thumbnail, /*** USA ***/ #c63195 .img-thumbnail, /*** USA ***/ #c64531 .img-thumbnail, /*** UNGARN ***/ #c64532 .img-thumbnail, /*** UNGARN ***/ #c64533 .img-thumbnail, /*** UNGARN ***/ #c70031 .img-thumbnail, /*** SCHWEIZ ***/ #c70035 .img-thumbnail, /*** SCHWEIZ ***/ #c70039 .img-thumbnail, /*** SCHWEIZ ***/ #c88408 .img-thumbnail, /*** BELGIEN ***/ #c88409 .img-thumbnail, /*** BELGIEN ***/ #c88410 .img-thumbnail /*** BELGIEN ***/ { border: 0; } /* Die Überschrift bekommt eine Mindesthöhe von 55px - diese Höhe stellt den Bedarf einer zweizeiligen Überschrift dar. Damit optisch alles in einer Reihe ist, wird diese Höhe benötigt --- Kompletter News Content ohne Überschrift "Mipa News" und ohne "ALLE NEWS ANZEIGEN*/ #c1867 h6[itemprop="headline"], #c13035 h6[itemprop="headline"], #c14262 h6[itemprop="headline"], #c26572 h6[itemprop="headline"], #c35465 h6[itemprop="headline"], #c63192 h6[itemprop="headline"], /*** USA ***/ #c64530 h6[itemprop="headline"], /*** UNGARN ***/ #c70027 h6[itemprop="headline"], /*** SCHWEIZ ***/ #c88407 h6[itemprop="headline"] /*** BELGIEN ***/ { min-height: 55px; } /* Hier wird die verlinkte Überschrift angepasst - größer u. ohne "Unterstrich" --- Es handelt sich um die Überschriften der einzelnen News */ #c1867 h6 a, #c13035 h6 a, #c14262 h6 a, #c26572 h6 a, #c35465 h6 a, #c63192 h6 a, /*** USA ***/ #c64530 h6 a, /*** UNGARN ***/ #c70027 h6 a, /*** SCHWEIZ ***/ #c88407 h6 a /*** BELGIEN ***/ { font-size: 1.4rem; text-decoration: none; } /* Hier wird der Textblock rundum etwas eingerückt --- Es handelt sich um die Abstände zu den Rändern des kompletten News-Contents ohne die Überschrift "Mipa News" und ohne "ALLE NEWS ANZEIGEN" */ #c1867 .articletype-0, #c13035 .articletype-0, #c14262 .articletype-0, #c26572 .articletype-0, #c35465 .articletype-0, #c63192 .articletype-0, /*** USA ***/ #c64530 .articletype-0, /*** UNGARN ***/ #c70027 .articletype-0, /*** SCHWEIZ ***/ #c88407 .articletype-0 /*** BELGIEN ***/ { padding: 5px 15px; } /* entfernt die "Unterstreichung" im Bereich weiterlesen */ .articletype-0 a { text-decoration: none; } /* Bei der Verlinkung "Alle Newsbeiträge anzeigen" wird hiermit die Text-Deco entfernt --- Es handelt sich um die Zeile oberhalb der einzelnen News */ #c1869 a, #c13039 a, #c35481 a, #c63196 a, /*** USA ***/ #c64534 a, /*** UNGARN ***/ #c70043 a, /*** SCHWEIZ ***/ #c88416 a /*** BELGIEN ***/ { text-decoration: none; } /* Wird über einen Newsbeiträg "mit dem Mauszeiger gefahren" wird die Hover-Funktion aktiviert --- Es handelt sich um die einzelnen News also linke News, mittlere News und rechte News*/ /* START */ #c1872:hover, #c1873:hover, #c1874:hover, #c13051:hover, #c13055:hover, #c13059:hover, #c14266:hover, #c14270:hover, #c14274:hover, #c26573:hover, #c26574:hover, #c26575:hover, #c35469:hover, #c35473:hover, #c35477:hover, #c63193:hover, /*** USA ***/ #c63194:hover, /*** USA ***/ #c63195:hover, /*** USA ***/ #c64531:hover, /*** UNGARN ***/ #c64532:hover, /*** UNGARN ***/ #c64533:hover, /*** UNGARN ***/ #c70031:hover, /*** SCHWEIZ --- Es handelt sich um die linke News ***/ #c70035:hover, /*** SCHWEIZ --- Es handelt sich um die mittlere News ***/ #c70039:hover, /*** SCHWEIZ --- Es handelt sich um die rechte News ***/ #c88408:hover, /*** BELGIEN --- Es handelt sich um die linke News ***/ #c88409:hover, /*** BELGIEN --- Es handelt sich um die mittlere News ***/ #c88410:hover /*** BELGIEN --- Es handelt sich um die rechte News ***/ { /*background-color: #004F9E !important; color: white;*/ } #c1872:hover a, #c1873:hover a, #c1874:hover a, #c13051:hover a, #c13055:hover a, #c13059:hover a, #c14266:hover a, #c14270:hover a, #c14274:hover a, #c26573:hover a, #c26574:hover a, #c26575:hover a, #c35469:hover a, #c35473:hover a, #c35477:hover a, #c63193:hover a, /*** USA --- Es handelt sich um die linke News ***/ #c63194:hover a, /*** USA --- Es handelt sich um die mittlere News ***/ #c63195:hover a, /*** USA --- Es handelt sich um die rechte News ***/ #c64531:hover a, /*** UNGARN --- Es handelt sich um die linke News ***/ #c64532:hover a, /*** UNGARN --- Es handelt sich um die mittlere News ***/ #c64533:hover a, /*** UNGARN --- Es handelt sich um die rechte News ***/ #c70031:hover a, /*** SCHWEIZ --- Es handelt sich um die linke News ***/ #c70035:hover a, /*** SCHWEIZ --- Es handelt sich um die mittlere News ***/ #c70039:hover a, /*** SCHWEIZ --- Es handelt sich um die rechte News ***/ #c88408:hover a, /*** BELGIEN --- Es handelt sich um die linke News ***/ #c88409:hover a, /*** BELGIEN --- Es handelt sich um die mittlere News ***/ #c88410:hover /*** BELGIEN --- Es handelt sich um die rechte News ***/ { /*color: white;*/ } #c1872 .image, #c1873 .image, #c1874 .image, #c13051 .image, #c13055 .image, #c13059 .image, #c14266 .image, #c14270 .image, #c14274 .image, #c26573 .image, #c26574 .image, #c26575 .image, #c35469 .image, #c35473 .image, #c35477 .image, #c63193 .image, /*** USA ***/ #c63194 .image, /*** USA ***/ #c63195 .image, /*** USA ***/ #c64531 .image, /*** UNGARN ***/ #c64532 .image, /*** UNGARN ***/ #c64533 .image, /*** UNGARN ***/ #c70031 .image, /*** SCHWEIZ --- Es handelt sich um die linke News ***/ #c70035 .image, /*** SCHWEIZ --- Es handelt sich um die mittlere News ***/ #c70039 .image, /*** SCHWEIZ --- Es handelt sich um die rechte News ***/ #c88408 .image, /*** BELGIEN --- Es handelt sich um die linke News ***/ #c88409 .image, /*** BELGIEN --- Es handelt sich um die mittlere News ***/ #c88410 .image /*** BELGIEN --- Es handelt sich um die rechte News ***/ { position: relative; overflow: hidden; max-height: 275px; } #c1872 .image img, #c1873 .image img, #c1874 .image img, #c13051 .image img, #c13055 .image img, #c13059 .image img, #c14266 .image img, #c14270 .image img, #c14274 .image img, #c26573 .image img, #c26574 .image img, #c26575 .image img, #c35469 .image img, #c35473 .image img, #c35477 .image img, #c63193 .image img, /*** USA ***/ #c63194 .image img, /*** USA ***/ #c63195 .image img, /*** USA ***/ #c64531 .image img, /*** UNGARN ***/ #c64532 .image img, /*** UNGARN ***/ #c64533 .image img, /*** UNGARN ***/ #c70031 .image img, /*** SCHWEIZ --- Es handelt sich um die linke News ***/ #c70035 .image img, /*** SCHWEIZ --- Es handelt sich um die mittlere News ***/ #c70039 .image img, /*** SCHWEIZ --- Es handelt sich um die rechte News ***/ #c88408 .image img, /*** BELGIEN --- Es handelt sich um die linke News ***/ #c88409 .image img,/*** BELGIEN --- Es handelt sich um die mittlere News ***/ #c88410 .image img /*** BELGIEN --- Es handelt sich um die rechte News ***/ { transition: all .7s ease; } #c1872:hover .image img, #c1873:hover .image img, #c1874:hover .image img, #c13051:hover .image img, #c13055:hover .image img, #c13059:hover .image img, #c14266:hover .image img, #c14270:hover .image img, #c14274:hover .image img, #c26573:hover .image img, #c26574:hover .image img, #c26575:hover .image img, #c35469:hover .image img, #c35473 .image img, #c35477 .image img, #c63193:hover .image img, /*** USA ***/ #c63194:hover .image img, /*** USA ***/ #c63195:hover .image img, /*** USA ***/ #c64531:hover .image img, /*** UNGARN ***/ #c64532:hover .image img, /*** UNGARN ***/ #c64533:hover .image img, /*** UNGARN ***/ #c70031:hover .image img, /*** SCHWEIZ --- Es handelt sich um die linke News ***/ #c70035:hover .image img, /*** SCHWEIZ --- Es handelt sich um die mittlere News ***/ #c70039:hover .image img, /*** SCHWEIZ --- Es handelt sich um die rechte News ***/ #c88408:hover .image img, /*** BELGIEN --- Es handelt sich um die linke News ***/ #c88409:hover .image img, /*** BELGIEN --- Es handelt sich um die mittlere News ***/ #c88410:hover .image img /*** BELGIEN --- Es handelt sich um die rechte News ***/ { overflow: hidden; transform: scale(1.1); -webkit-transition: all .7s ease; -moz-transition: all .7s ease; -ms-transition: all .7s ease; -o-transition: all .7s ease; transition: all .7s ease; } #c35489,#c14286{ text-align:right; } /* ENDE */ /********************* ***** SCHULUNGEN ***** *********************/ /* Schulungs-Buttons: Zentriert den Text auf Center Center - Gleiche Höhe (80px) egal welche Textlänge */ .schulung-button span { margin-bottom: auto; display: inline-flex; height: 80px; justify-content: center; align-items: center; padding: 20px 30px; } .schulung-button a { width: 100%; } /******************************************* ***** ALTE PRODUKTDATENBANK-VERLINKUNG ***** *******************************************/ /* Einbindung alte Produktdatenbank */ .pd-database-old { align-self: center; box-shadow: 2px 2px 16px 0px rgba(0, 0, 0, 0.3); width: 460px; height: 914px; border: medium none; } /* Navigation über Produktdatenbank-iFrame */ ul.oldpd-nav-horizontal { width: 100%; float: left; margin: 0 0 3em 0; padding: 0; list-style: none; display: flex; justify-content: center; } ul.oldpd-nav-horizontal li { float: left; } ul.oldpd-nav-horizontal { width: 100%; float: left; margin: 0 0 3em 0; padding: 0; list-style: none; } ul.oldpd-nav-horizontal li a { display: block; padding: 8px 15px; text-decoration: none; color: #444; border-right: 1px solid #ccc; border-left: 1px solid #ccc; } li:last-child { border-right: 0px solid #ccc; } ul.oldpd-nav-horizontal li a:hover { color: #004F9E; background: #EEE; } ul.oldpd-nav-horizontal li a.active { font-weight: bold; color: #004F9E; background: #EEE; } /******************************************* ***** SCHNIPSEL OHNE ZUORDNUNG ***** *******************************************/ /* Leider fällt mir nicht mehr ein wo ich diese Schnipsel verwendet habe. Wahrscheinlich sind sie nicht mal in Benutzung. Aus diesem Grund auskommentiert. Wenn sie nirgends benötigt werden dann können Sie natürlich auch gelöscht werden. /* .product-item-border-left { border-top: 1px solid red; border-left: 1px solid red; border-bottom: 1px solid red; } .product-item-border-right { border-top: 1px solid red; border-right: 1px solid red; border-bottom: 1px solid red; } */ /******************** Career Area *************************/ .careerColumn figure { margin-bottom: 0; } #c35154{ text-align:right; } #c27596 .ce-content, #c27608 .ce-content{ color:#fff; }