/* Theme Name: Neve Child-CV Description: Child-Theme von Neve Author: Astrid N. Rau Author URI: https://www.astrid-rau.de Template: neve Version: 7.2.0.4 Date: 2025-02-13 Tags: Customisable CV, Customisable Special Features, Blog */ /* Ergänze deinen individuellen CSS-Code unter dieser Zeilen. Nutze ggf. !important, um Styles aus dem Haupttheme zu überschreiben.*/ /* *************************************************************************** */ /* **************** Custom CSS fuer WP-Theme "Neve" ************************** */ /* *************************************************************************** */ /* - AUSBLENDEN: display: none; (NICHT mit visibility: collapse; !!!) Hinweis "Copyright-Hinweis im Footer: Neve | Präsentiert von WordPress" ausblenden s.u. - So gilt ein CSS nur FUER EINE BESTIMMTE SEITE: Z.B. mit ".post-12345" gilt das #post_body CSS NUR FUER DIESEN POST. Nach "post-" muss die Pots-ID (bzw- Page-ID) stehen: .post-330 #post_body { Type Code here } - Gutenberg-Blocks deaktivieren: https://developer.wordpress.org/news/2024/01/how-to-disable-specific-blocks-in-wordpress/ - Container-Breite: Customizer > Layout > Desktop: 940px, Tablet: 802px, Smartphone: 558px - Ausrichtung: https://www.w3schools.com/css/css_align.asp - Wort-, Zeilenumbruch: * www.w3schools.com/cssref/css3_pr_word-break.aspp * www.w3schools.com/cssref/pr_text_white-space.asp * https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens * https://developer.mozilla.org/en-US/docs/Web/CSS/hyphenate-limit-chars - OVERLAY fuer Hintergruende/ Bilder und sonstwas einrichten: Yellow Pencil > Background > "Color" + ("Size": cover) + "Blend Mode": overlay */ /* INHALT - Custom CSS =================== I. GLOBALE EINSTELLUNGEN 1. GLOBALE EINSTELLUNGEN - Licht und Schatten 2. GLOBALE EINSTELLUNGEN - Ausblenden 3. GLOBALE EINSTELLUNGEN - M E D I A Q U E R I E S - B R E A K P O I N T S 4. GLOBALE EINSTELLUNGEN - TEXTFORMATIERUNGEN a) Textformatierungen - Single Page b) Textformatierungen: Blog-Index - Die Autoren- und die Datumszeile bei SEITEN c) Textformatierungen: Blog-Artikel d) Textformatierungen: Links e) Textformatierungen: Textkörper Testimonialseiten f) Textformatierungen: CV-Tabs: Acc-Text 5. GLOBALE EINSTELLUNGEN - Site - Hintergrund, Abstände, Überschriften a) Hintergrund: Seite (Content-Bereich) b) Hintergrund & Abstände: Seiten-Überschrift c) Hintergrund & Abstände: Single Page - Hintergrund & Abstände Single Page - Hintergrund & Abstände Single Page: Überschriften - Hintergrund & Abstände Single Page: Video - Hintergrund & Abstände Single Page: BREAKPOINTS d) Hintergrund & Abstände: Blog - Beitrag e) Hintergrund & Abstände: Blog - Index - Abtrennungen zwischen den Blog-Index-Einträgen + Variation: Abstände zwischen den Blog-Index-Einträgen + Variation: Dünner Trennstrich zwischen den Blog-Index-Einträgen 6. GLOBALE EINSTELL. - Boxen-Hintergrund (Navis, Buttons, Widget-Titel) II. SITE - BEREICHE 1. Site - Bereich: Header a) Sticky Header b) Navi Main c) Breadcrumb 2. Site - Bereich: Sidebar Right 3. Site - Bereich: Formatierungen TEXT 4. Site - Bereich: Footer a) To Top b) Widgets III. Blog IV. SONDERSEITEN 1. SONDERSEITE - Feedback-Seiten (darauf verweist Link "Jobfeedback" im Navi Main) a) Feedback-Seiten: ExtraNavi - Flex-Container fuer das Testimonial-ExtraNavi - Das Testimonial-Aufklapp-Auswahlmenü links im Testi-ExtraNavi - Der Link-Button "Nach Oben" mittig UNTEN im Testi-ExtraNavi - Der Link-Button zum CV rechts im Testi-ExtraNavi b) NAVI-BALKEN PAGINATION (Seiten-Blätterfunktion) c) Die EINZELNEN Testimonials - Einzelfeedback: Rahmen - Einzelfeedback: Links - Einzelfeedback: Textkoerper - Einzelfeedback-Absender-Feld - Einzelfeedback: Feedback-Kategorie/ Taetigkeitsfeld 2. SONDERSEITE - Otter - Feedback-Formular 3. SONDERSEITE - Otter - Kontaktformular 4. SONDERSEITE - Simple Membership - Eingloggbereich 5. SONDERSEITE - Mein CV CV : Abstandhalter im CV-Kopf, Skillz-Seitenleiste und in den CV-Acc. a) CV-Header: Feedback-Block (StrongTestimonials-Slider im Header) - CV-Header: Feedback-Block: Rahmen - CV-Header: Feedback-Block: Überschrift: Das sagen andere über mich - CV-Header: Feedback-Block: Testimonial-Textkörper - CV-Header: Feedback-Block: Testimonial-Absender & Kategorie b) CV-Header: Block Verbindungsdaten c) CV-Header: Bewerbungsfoto d) CV-Seitenspalte: (links) Skillz-Bar - Skills - Block rechts: Abstand zwischen Skillz-Sidebar und dem CV-Tabs-Block - Skills: Abstand (Block spacer) - Skills - Sterne: Überschrift "Kenntnisse und Fähigkeiten" - Skills - Sterne: Skills-/ Fähigkeiten-Oberbegriff - Skills - Sterne: Block mit Skills-Name + Sterne vom Plugin ("Star Rating Block") - Skills - Sterne: Skills - Name der Fähigkeit - Skills - Sterne: Skills - Beschreibung der Fähigkeit e) CV - Tabs - CV-Tabs: Die Tab-Reiter f) CV - Accordions - CV-Tabs_Accordions: Rahmen um Acc-Header & Acc-Body transparent - CV-Tabs_Accordions: Datum & Unternehmen - CV-Tabs_Accordions: /* ============================================ I. GLOBALE EINSTELLUNGEN ============================================= */ /* 2023-03-08: NEU !!! */ *, *:before, *:after { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } /* =========================================================================== */ /* ============= 1. GLOBALE EINSTELLUNGEN - Licht und Schatten ============== */ /* =========================================================================== */ /* Alternative für Schatten: box-shadow:3px 0px 10px -3px rgba(38,38,38,0.26); */ /* Schatten unter dem Header-Balken */ #header-grid, /* Hintergrund & Abstände: Single Page - Inhaltsbereich mit nv-single-page-wrap und .wrapper .nv-sidebar-wrap */ #content .single-page-container, /* #content .row, */ /* Single page wrap: Box um die Haupttextspalte */ .wrapper .nv-single-page-wrap, /* Single page - Box Seitenüberschrift (Page title) Statische Seite * .nv-single-page-wrap .nv-page-title-wrap .nv-page-title, */ /* Single Page - Box um den Seiten-Text (Entry Content) * .wrapper .nv-single-page-wrap .nv-content-wrap, */ /* Hintergrund Blog-Index (Archive container) */ #content .archive-container, /* Blog-Index: Index posts */ .archive-container .nv-index-posts, /* Blog-Index: Box um die Summary-Boxen (Row) * .archive-container .nv-index-posts .posts-wrapper, */ /* Hintergrund Blog-Index (Content Division) * .posts-wrapper .hentry .content, /* Block Seitenüberschrift (Page title) zum Blog-Index * .nv-index-posts .nv-page-title-wrap .nv-page-title, /* Hintergrund & Abstände: Blog - Beitrag (Post Division) * #content .single-post-container article, */ /* Blog-Post (Blog-Artikel) Box um Post Division (OHNE Sidebar ???) */ #content .row, /* Blog-Post (Blog-Artikel) Box um Post Division (mit Sidebar ???) */ .wrapper article, /* Sidebar Right: Container mit den Widgets (#Secondary) * #secondary, */ /* Sidebar Right Widget-Box */ #secondary .widget, /* Sidebar Right: Widget Title */ #secondary .widget .widget-title, /* JobFeedbackseite (Testimonials-Seite): Dropup-Menü, welches nach OBEN geht */ .dropup .dropup-content, /* CV - Lebenslauf: Bewerbungsfoto */ .nv-single-page-wrap figure img, /* Kontaktformular */ .otter_selfmade_formular .wp-block-button .wp-block-button__link, /* Sticky Header: Schatten drum: Kompletter Header: */ .wrapper header{ box-shadow: 2px 0px 10px 0px rgba(38,38,38,0.2); } /* =========================================================================== */ /* ================ 2. GLOBALE EINSTELLUNGEN - Ausblenden =================== */ /* =========================================================================== */ /* Ausblenden: Seiten-Titel Single Page * .wrapper .nv-single-page-wrap .nv-page-title-wrap, */ /* Ausblenden: Seiten-Titel Blog-Index * .archive-container .nv-index-posts .nv-page-title-wrap { display:none; } */ /* Nimmt unten auf der Page den Vermerk "Presented by Neve" raus */ .hfg-grid-bottom div p { display: none; } /* =========================================================================== */ /* ========= 3. M E D I A Q U E R I E S - B R E A K P O I N T S - =========== */ /* ============================================================================== Die Grenzen zwischen den Bereichen, die in einer Media Query festgelegt werden, sind die sogenannten Breakpoints, also Pixelwerte, ab denen neue Layout-Regeln gelten. Häufig verwendete Breakpoints sind 480, 800, 1024 und 1280 Pixel. Dabei handelt es sich um gängige Breiten von Smartphones, Tablets und Laptops. !!! https://ricostacruz.com/til/css-media-query-breakpoints https://www.inetgestaltung.de/media-query-grundgeruest-beispiel/ https://www.w3schools.com/css/css_rwd_mediaqueries.asp https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/ ============================================================================== */ /* Neve-Breakpoints /* Containerbreite Desktop * @media (min-width: 960px) { /* Adresse * { } } */ /* Containerbreite Tablet (CHECK ggf. 959.9px!!!) * @media (max-width: 959px ) { /* Adresse * { } } */ /* Containerbreite Mini-Tablet und Smartphone * @media (max-width: 576px) { /* Adresse * { } } */ /* ============================================================================== */ /* =========================================================================== */ /* ============== 4. GLOBALE EINSTELLUNGEN - TEXTFORMATIERUNGEN ============== */ /* =========================================================================== */ /* s. Customizer > Typographie Font Überschriften: Poppins (alt: Lato), Font Text: Source Sans Pro (alt: Lato) Customizer > Typographie > Allgemein ------------------------------------- Body Schriftart: Source Sans Pro Umwandeln: Nichts Schriftstärke: 400 Schriftgröße: 14 Zeilenhöhe: 1.7 (Desktop), 1.7 (Tablet), 1.7 (Smartphone) Buchstaben-Abstand: 0.2 (Desktop), 0.2 (Tablet), 0 (Smartphone) Fallback-Schriftart: Arial, Helvetica, sans-serif Customizer > Typographie > Überschriften ---------------------------------------- Schriftart: Poppins (alt: Lato) H1 Umwandeln: Nichts Schriftstärke: 600 Schriftgröße: 1.76/ 25px (Desktop), 1.5/ 25px (Tablet), 1.5 (Smartphone) Zeilenhöhe: 1.60 (Desktop), 1.60 (Tablet), 1.5 (Smartphone) Buchstaben-Abstand: 0.30 (Desktop), 0.3 (Tablet), 0.2 (Smartphone) H2 Umwandeln: Nichts Schriftstärke: 600 Schriftgröße: 1.75 (Desktop), 1.4 (Tablet), 1.4 (Smartphone) Zeilenhöhe: 1.60 (Desktop), 1.5 (Tablet), 1.5 (Smartphone) Buchstaben-Abstand: 0.30 (Desktop), 0.3 (Tablet), 0.2 (Smartphone) H3 Umwandeln: Nichts Schriftstärke: 600 Schriftgröße: 1.29 (Desktop), 1.2 (Tablet), 1.2 (Smartphone) Zeilenhöhe: 1.20 (Desktop), 1.2 (Tablet), 1.2 (Smartphone) Buchstaben-Abstand: 0.30 (Desktop), (Tablet), (Smartphone) H4 (!!! ZUGLEICH SCHRIFT IN CV Accordion-Headings!!! - hier noch per CustomCSS: line height, text align, word-spacing) Umwandeln: Nichts Schriftstärke: 600 Schriftgröße: 1.20 (Desktop), 1.2 (Tablet), 1.2 (Smartphone) Zeilenhöhe: 1.20 (Desktop), 1.2 (Tablet), 1.2 (Smartphone) Buchstaben-Abstand: -0.3 (Desktop), -0.3 (Tablet),-0.5 (Smartph.) */ /* ******************** Automatische SILBENTRENNUNG ******************** */ h1, h2, h3, h4, h5, h6, p, ul, ol, .cv_acc_outer_acc_item_text, .cv_acc_inner_acc_item_text, .cv_acc_outer_acc_item_list_listitem, .cv_acc_inner_acc_item_list_listitem, .cv_acc_outer_acc_item_text_intro_jud { hyphens: auto; -moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphenate-limit-chars: 5 2 3 !important; overflow-wrap: break-word; } /* --------------------------------------------------------------------------- */ /* -------------------- a) Textformatierungen - Single Page ------------------ */ /* --------------------------------------------------------------------------- */ /* Thumbnail Image */ .nv-single-page-wrap .nv-thumb-wrap img { margin-right: auto; margin-left: auto; } /* Statische Seite: Paragraph */ .nv-single-page-wrap p { text-align: justify; letter-spacing: 0.1px; word-spacing: 1.3px; } /* --------------------------------------------------------------------------- */ /* -------------------- b) Textformatierungen: Blog-Index -------------------- */ /* --------------------------------------------------------------------------- */ .posts-wrapper .hentry p { line-height: 1.6em; text-align: justify; letter-spacing: 0.2px; word-spacing: 1.7px; margin-bottom: 12px; } /* --------------------------------------------------------------------------- */ /* ------------------- c) Textformatierungen: Blog-Artikel ------------------- */ /* --------------------------------------------------------------------------- */ .hentry p { line-height: 1.8em; letter-spacing: 0.1px; margin-bottom: 0px; } /* Blog-Textzeile allein stehend: Paragraph */ .nv-index-posts p { margin-bottom: 14px !important; } /* ------------------ c) Textformatierungen: Blog-Titelbild ------------------ */ .nv-single-page-wrap .nv-thumb-wrap img { margin: 30px 0; } /* --------------------------------------------------------------------------- */ /* ---------------------- d) Textformatierungen: Links ----------------------- */ /* --------------------------------------------------------------------------- */ /* Customizer > Farben und Hintergrund > Palettenfarben > Primärer Akzent: neu #a98434, alternat. #8b6c28 (alt #dd6900) */ /* WICHTIGER HINWEIS: Die Reihenfolge der Pseudo-Selektoren muss wie hier :link, :visited, :hover, :focus, :active sein. * Andersnfalls würde z.B. :hover den Selektor :active überschreiben. /* -------- CV-Accordions: LINKS in CV-Acc-Header & CV-Acc-Body-Texten ------- */ /* Customizer > Farben und Hintergrund > Palettenfarben > Primärer Akzent: neu #a98434, alternat. #8b6c28 (alt #dd6900) */ /* CV-Header Testimonials: Link im Testimonial-Text * .wpmtst-small-widget p a, /* CV-Acc: Links in den Accordions * LINKS IM CV { text-decoration: none !important; } */ /* --------------------------------------------------------------------------- */ /* ----------- e) Textformatierungen: Textkörper Testimonialseiten ----------- */ /* --------------------------------------------------------------------------- */ .strong-grid .wpmtst-testimonial p { text-align: justify; letter-spacing: 0.3px; word-spacing: 1.5px; } /* --------------------------------------------------------------------------- */ /* ------------------- f) Textformatierungen: CV-Tabs: Acc ------------------- */ /* --------------------------------------------------------------------------- */ /* s. IV. SONDERSEITEN > 2. SONDERSEITE - Mein CV > f) CV - Accordions */ /* =========================================================================== */ /* == 5. GLOBALE EINSTELLUNGEN - Site - Hintergrund, Abstand, Überschriften == */ /* =========================================================================== */ /* ================ a) Hintergrund: Seite (Content-Bereich) ================== */ #content { background-color: #ffffff; /* whitesmoke; #f4f4f4; - Test: greenyellow */ border-radius: 4px; } /* Hintergrund & Abstände SEITENINHALT - EINSTELLUNGEN HIER WIRKEN SICH AUF ALLE SEITEN AUS!!! für Single Page, Blog-Artikel, Blog-Index: zusätzlich Box um alle Summary-Boxen /* Shadow: s. GLOBALE EINSTELLUNGEN - Licht und Schatten */ #content .row { background-color: whitesmoke; /* =#f4f4f4 */ margin-top: 24px; padding: 24px 12px; } /* ============== b) Hintergrund & Abstände: Seiten-Überschrift ============== */ /* Heading H1* .nv-page-title-wrap .nv-page-title h1 { color: #ffffff; /* whitesmoke; #f4f4f4; * background-image: url("/wp-content/uploads/navi_cv_main.jpg"); } */ /* ========== c) Hintergrund & Abstände Single Page (Einzelseite) ============ */ /* ------------------- Hintergrund & Abstände Single Page -------------------- */ /* Hintergrund & Abstände Single Page: Hautptext-Spalte (Single page wrap) inkl. Page Title und Text */ .wrapper .nv-single-page-wrap { text-align: justify; background-color: #ffffff; /* whitesmoke; #f4f4f4; */ margin: 0 auto; /* ZUVOR 0 48 0 0 !!!*/ padding: 0 17px; /* 0px 12px; */ /* 24px 12px; */ } /* -------------------------- Hintergrund & Abstände Single Page: Überschriften -------------------------- */ /* Single Page Seitentitelbox: Hintergrund & Abstände Page title wrap */ .wrapper .nv-single-page-wrap .nv-page-title-wrap { margin-top: 24px; } /* Single Page: Hintergrund & Abstände Textüberschrift (Heading) */ .nv-single-page-wrap h1, .nv-single-page-wrap h2 { margin-bottom: 12px; margin-top: 24px; } /* Heading, z.B. Feedback-Seiten */ .nv-page-title-wrap .nv-page-title h1 { margin-top: 5px; } /* ------------------------------ Hintergrund & Abstände Single Page: Video ------------------------------ */ .nv-single-page-wrap .wp-block-video { margin: 7% 0 40% 0 !important; } /* Video itself */ .nv-single-page-wrap .wp-block-video video { max-width: 80%; } /* ************************** Hintergrund & Abstände Single Page: BREAKPOINTS ************************** */ /* 959px and below screen sizes * @media (max-width:959px){ /* Einzelseite: Single page wrap * .wrapper .nv-single-page-wrap { margin-right: auto; margin-left: auto; } } */ /* ================ d) Hintergrund & Abstände: Blog - Beitrag ================ */ /* Von Überschrift-/ Header-Box (Entry Header): Box mit Breadcrumb, Blogpost-Überschrift & Metadaten */ .wrapper .hentry .entry-header{ margin: 14px 0 24px 0 !important; } /* Blog-Post Titelbild (Thumb wrap): Rückt Bild nach rechts + Abstand zum Text */ .wrapper .hentry .nv-thumb-wrap { margin-bottom: 24px; display: flex; justify-content: flex-end; } /* Hintergrund & Abstände: Blog - Beitrag (Post Division) - wie: .wrapper .nv-single-page-wrap */ /* Shadow: s. GLOBALE EINSTELLUNGEN - Licht und Schatten */ .wrapper article { text-align: justify; background-color: #ffffff; /* whitesmoke; #f4f4f4; */ /* margin: 0; !!! NUR, WENN BLOG-ARTIKEL MIT SIDEBAR !!! */ margin: 0 auto; padding: 0 17px !important; border-radius: 3px; } /* ========================= e) Hintergrund & Abstände: Blog-Index (Archiv) ========================== */ /* Hintergrund & Abstände Blog-Index: Hintergrund (Archive container) - Hintergrundfarbe s. #content .row */ /* Shadow s. GLOBALE EINSTELLUNGEN - Licht und Schatten */ #content .archive-container { padding-top: 0px; } /* Index posts */ .archive-container .nv-index-posts { background-color: #ffffff; /* whitesmoke; #f4f4f4; */ margin-top: 0px; margin-bottom: 0px !important; padding: 0px 14px 0 14px; /* 24px 15px 0 15px; */ border-radius: 4px; } /* Row */ .archive-container .nv-index-posts .posts-wrapper { padding: 0 !important; } /* Index Blog-Posts: Abstand Post-Title (Page title wrap) */ .wrapper .nv-index-posts .nv-page-title-wrap { margin-top: 24px; } /* Post Division * .nv-index-posts .posts-wrapper article { padding: 24px 17px; /* 24px 12px; * } */ /* Shadow: s. GLOBALE EINSTELLUNGEN - Licht und Schatten */ /* Content Division */ .posts-wrapper .hentry .content { margin: 0px 0; /* ggf 17px 0; bei Abtrennungs-Variation 2, s. ff. */ padding-bottom: 17px; } /* ------------- Abtrennungen zwischen den Blog-Index-Einträgen -------------- */ /* ++++++ Variation 1: Abstände zwischen den Blog-Index-Einträgen ++++++ */ /* Unter 1. GLOBALE EINSTELLUNGEN - "Licht und Schatten" - Schatten einschalten !!! */ /* Post Division * .nv-index-posts .posts-wrapper article { margin-bottom: 12px; /* padding: 24px 12px; * } /* Abstand 12px über dem ERSTEN Blog-Index-Eintrag (Post Division) * .wrapper .posts-wrapper .hentry:first-child { margin-top: 12px; } /* Kein Abstand 12px unter dem LETZTEN Blog-Index-Eintrag (Post Division) * .wrapper .posts-wrapper .hentry:last-child { margin-bottom: 0px; } */ /* +++++++ Variation 2: Dünner Trennstrich zwischen den Blog-Index-Einträgen ++++++ */ /* Unter 1. GLOBALE EINSTELLUNGEN - Licht und Schatten Schatten ausschalten !!! */ .nv-index-posts .nv-page-title-wrap .nv-page-title { border-bottom: solid #ededed 2px; } /* Post Division: Schattenentfernung notwendig > .wrapper article (Blog-Artikel) */ .nv-index-posts .posts-wrapper article { box-shadow: none; } /* Content Division */ .posts-wrapper .hentry .content { padding: 24px 0 12px 0 !important; border-bottom: solid #ededed 2px; } /* ============================================================================================= */ /* ========== 6. GLOBALE EINSTELL. - Boxen-Hintergrund (Navis, Buttons, Widget-Titel) ========== */ /* ============================================================================================= */ /* Alle Felder (Navigationen, Buttons, andere Felder), die den selben Hintergrund haben (hier: Bildausschnitt "Morgensprung", ggf. Weißton). Dasselbe für darin SCHRIFT, MAßE und POINTER. Im folgenden CustomCSS ist bei der entspr. Adressen ein Vermerk */ /* =========================== Navi Main ============================ */ /* Navi Main: Hintergrund (Nav wrap) * /* #header-grid .header-main .nv-nav-wrap, */ #nv-primary-navigation-main, /* !!! ESSENZIELL!!! */ /* Navi Main - Sub: Hintergrund s. unten unter "Navi Main" * #nv-primary-navigation-main .sub-menu, */ /* Navi Main - Sub-Sub: Hintergrund * #nv-primary-navigation-main .sub-menu .sub-menu, */ /* ================== Sidebar Right: Widget Title ================== */ #secondary .widget .widget-title, /* =============== Feedback-Seiten - Testi-ExtraNavi =============== */ /* Feedback-Seiten: Das Testimonial-Aufklapp-Auswahlmenü links im Testi-ExtraNavi */ .dropup .dropbttn, /* Dropup-Menü, welches nach OBEN geht * .dropup .dropup-content, */ /* Feedback-Seiten - Testimonial-Aufklapp-Auswahlmenü: Links AKTIV & HOVER */ .dropup .dropup-content a:hover, .dropup .dropup-content a:active, /* Feedback-Seiten - Testi-ExtraNavi: Der Link-Button "Nach Oben" mittig UNTEN im Testi-ExtraNavi */ .up-btn, /* Feedback-Seiten - Testi-ExtraNavi: Der Link-Button zum CV rechts */ .cv-btn, /* Feedback-Seiten - Pagination: Hintergrund des Pagination-Balkens */ .nv-single-page-wrap .wpmtst-simple nav, /* ================ Feedback-Formular Submit-Button ================ */ /* ============== Kontaktformular: "Absenden"-Button =============== */ .wpmtst-submit label .wpmtst_submit_testimonial, .otter_selfmade_formular .wp-block-button .wp-block-button__link, /* ========== CV-Tabs: Hintergrund PublishPress-Tabs AKTIV ========= */ .wp-block-advgb-adv-tabs .advgb-tabs-panel .advgb-tab-active, /* ===== Simple Membership: Hintergrund Login- & Logout-Button ===== */ /* #swpm-login-form, */ .swpm-login-form-submit, .nv-single-page-wrap .swpm-logged-logout-link a, /* ============ Otter - Progress-Bar im CV - Wert-Balken =========== */ .wp-block-themeisle-blocks-progress-bar__area .wp-block-themeisle-blocks-progress-bar__area__bar { background-image: url("/wp-content/uploads/navi_cv_main.jpg"); background-size: cover; /* padding-top: 6px; padding-bottom: 6px; */ /* border: solid 1px; /* 3px */ border-radius: 4px; } #swpm-login-form { border-radius: 4px; } /* ================ Feedback-Submit: WPMTSTestimonials ================ */ .wpmtst-submit label .wpmtst_submit_testimonial { background-image: url("/wp-content/uploads/navi_cv_main.jpg"); background-size: cover; /* padding-top: 6px; padding-bottom: 6px; */ border: solid 1px #8B6C28; /* 3px */ border-radius: 4px; } /* ============================================================================================= */ /* ============= 7. GLOBALE EINSTELL. - Boxen-Schrift (Navis, Buttons, Widget-Titel) =========== */ /* ============================================================================================= */ /* =========================== Navi Main ============================ */ /* Navi Main 1. Ebene: Schriftfarbe der Links */ #nv-primary-navigation-main > .menu-item > .wrap a, /* Navi Main: Schriftfarbe Sub Menu (Link) */ #nv-primary-navigation-main .sub-menu a, /* Navi Main: Schriftfarbe Sub-Sub Menu */ #nv-primary-navigation-main .sub-menu .sub-menu a, /* =============== Feedback-Seiten - Testi-ExtraNavi =============== */ /* Feedback-Seiten: Das Testimonial-Aufklapp-Auswahlmenü links im Testi-ExtraNavi */ .dropup .dropbttn, /* Feedback-Seiten: Testi-ExtraNavi: Links AKTIV & HOVER des Testimonial-Aufklapp-Auswahlmenüs */ .dropup .dropup-content a:hover, .dropup .dropup-content a:active, /* Feedback-Seiten: Button "Nach Oben" mittig unteres Testi-ExtraNavi */ .up-btn, /* Feedback-Seiten: LINK hinter dem Link-Button "Nach Oben" */ .up-btn a, /* Feedback-Seiten: Testi-ExtraNavi Link-Button zum CV rechts */ .cv-btn, /* Testi-ExtraNavi: LINK hinter dem Link-Button zum CV */ .cv-btn a, /* ================ Feedback-Formular Submit-Button ================ */ #wpmtst_submit_testimonial, .wpmtst-submit label .wpmtst_submit_testimonial, /* ============ Simple Membership - Login: Login-Button ============ */ #swpm-login-form .swpm-login-submit .swpm-login-form-submit, .nv-single-page-wrap .swpm-logged-logout-link a { font-family: 'Lato','Helvetica Neue',Arial,sans-serif !important; color: #ffffff; font-weight: 600; font-size: 12px !important; text-transform: uppercase; text-decoration: none !important; text-align: center; letter-spacing: 0.5px; display: flex !important; display: -webkit-flex !important; display: -ms-flexbox !important; justify-content: center !important; align-items: center; flex: 0 0 auto; } /* !!! GEÄNDERTE REIHENFOLGE !!! Widget-Sidebar steht hier GESONDERT, andere Formatierung !!! */ /* ================== Sidebar Right: Widget Title ================== */ #secondary .widget .widget-title { /* font-family:'Lato','Helvetica Neue',Arial,sans-serif !important; */ color: #ffffff; text-transform: uppercase; text-decoration: none !important; text-align: center; } /* ============================================================================================= */ /* ==================== 8. GLOBALE EINSTELLUNGEN - BUTTONS - Maße & Pointer ==================== */ /* ============================================================================================= */ /* =============== Feedback-Seiten - Testi-ExtraNavi =============== */ /* Feedback-Seiten: Das Testimonial-Aufklapp-Auswahlmenü links im Testi-ExtraNavi */ .dropup .dropbttn, /* Testi-ExtraNavi: Der Link-Button "Nach Oben" mittig UNTEN im Testi-ExtraNavi */ .up-btn, /* Feedback-Seiten: Testi-ExtraNavi: Der Link-Button zum CV rechts */ .cv-btn, /* Feedback-Seiten: Testi-ExtraNavi: Der der LINK Link-Button zum CV rechts */ .cv-btn a { height: 35px; width: 240px; cursor: pointer; } /* ============ Otter - Feedback-Formular Submit-Button ============= */ /* =========== Otter - Kontaktformular: "Absenden"-Button =========== */ .otter_selfmade_formular .wp-block-button .wp-block-button__link, /* ============ Simple Membership - Login: Login-Button ============ */ #swpm-login-form .swpm-login-submit .swpm-login-form-submit, .nv-single-page-wrap .swpm-logged-logout-link a { height: 35px; width: 205px; cursor: pointer; } /* =================================================================================================================== */ /* =================================================================================================================== */ /* =============================================== II. SITE - BEREICHE =============================================== */ /* =================================================================================================================== */ /* =================================================================================================================== */ /* =========================================================================== */ /* ======================== 1. SITE - BEREICH: Header ======================== */ /* =========================================================================== */ /* !!! * >> Customizer > Header > Header-Voreinstellungen * Hier läßt sich die Erscheinungsform (Anordnung Logo, Site, Titel, Navi, ggf. Button/ Suchfeld) anpassen * * >> Customizer > Header > Quicklink "Headerfarbe ändern" > Stil > Zeilenhintergrund * Hier lassen sich einstellen: * - Zeilenhöhe * - Textfarbe für Site-Titel und Site-Tag/ Unterzeile (NICHT Menütext!) * - !!! HINTERGRUND FÜR DEN GESAMTEN HEADER: eine Farbe oder auch ein Bild (Fixes Bild oder Beitragbild, inkl. * Bildausschnitt, Option "Hintergrund fixiert" und ggf. Overlay !!! * s.a. https://docs.themeisle.com/article/1262-neve-page-header */ /* === 1. Site - Bereich: Header - a) Header an sich, Logo, Seitentitel etc. === */ /* Builder item logo: Änderung, weil sonst der Header-Balken zu breit wird!!! */ #header-grid .hfg-slot .builder-item--logo{ padding: 0px 17px; /* Vorgabe: padding: 10px 17px; */ } /* Schriftzug "Astrid Rau" im Header */ #header-grid a p { font-family: 'Lato','Helvetica Neue',Arial,sans-serif !important; color: #ee7000; font-weight: 600; font-size: 18px; } /* =============== 1. Site - Bereich: Header: b) Sticky Header =============== */ /* Shadow: s. GLOBALE EINSTELLUNGEN - Licht und Schatten */ /* ALT: GEHT NICHT, macht HEADER und FOOTER KAPUTT!! .row--wrapper, .wrapper header, .header-main-inner { background-color: #ffffff; /* whitesmoke; #f4f4f4; * position: -webkit-sticky; position: sticky; top: 0; width: 100%; z-index: 999; } */ /* NEU : CHECKEN!! oder geht das von s.o. ALT???*/ /* .wrapper header { background-color: #ffffff; /* whitesmoke; #f4f4f4;* position: fixed; top: auto; width: 100%; z-index: 800; } /*Adjust Content Padding* #content { padding-top: 85px; /* war: 55px, 95px * } */ /* --------------------------- B R E A K P O I N T S ---------------------------- */ /* *********** b) Sticky Header fuer 959.9px and smaller screen sizes *********** */ /* 800px bzw. 959.9px and smaller screen sizes WIRD NICHT BENÖTIGT!!! * @media (max-width: 959.9px){ #content { padding-top: 85px; } }*/ /* 556.9px and smaller screen sizes NÖTIG??? * @media (max-width:556.9px){ #content{ padding-top: 85px; } }*/ /* ================= 1. Site - Bereich: Header: c) Navi Main ================= */ /* s.a. https://docs.themeisle.com/article/1262-neve-page-header * !!! HINWEIS: Hintergrund, Schrift, Pointer s. Globale Einstellungen Navis, Buttons, Widget-Titel !!! * !!! Customizer > Header > Quicklink "Menü ändern" > Layout * Aktuell: * Element-Abstand (px): * Element-Minimal-Höhe (px): 25 * Ausrichtunng: center * Innenabstände * Außenabstände * * Customizer > Header > Quicklink "Menü ändern" > Stil * Aktuell: * font-family: Lato * font-weight: 600 * font-size: 10.5px * line-height: 1.7em (11.5px) * letter-spacing: 0.6 */ /* ----- Primary navigation main ----- */ #nv-primary-navigation-main { /* width: 600px !important; */ height: 50px; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; flex-flow: row nowrap; justify-content: space-around; align-items: center; flex: 1 1 auto; } /* Navi Main: Aufklapp-Pfeil (svg) */ #nv-primary-navigation-main .wrap svg { color: #fff; font-size: 16px; } /* ----- Sub Menue ----- */ /* Navi Main: Aufklapp-Menue 2. Ebene (Menu Item). Dazu s.a.: 2025-01-07 NEU GEFUNDEN (with a little help): www.w3schools.com/cssref/css_pr_background-position-y.php */ /* Navi Main: Aufklapp-Menue 2. Ebene (Menu Item) */ #nv-primary-navigation-main .sub-menu { background: url("https://www.astrid-rau.de/wp-content/uploads/navi_cv_main.jpg"); background-size: cover; background-repeat: no-repeat; background-position-y: 10px; background-position-x: 55%; border-radius: 0px 0px 4px 4px; border: none; width: auto; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; flex-flow: column nowrap; justify-content: center; align-items: center; flex: 0 0 auto; transform: translatex(57px); } /* Sub-Menue Wrap: So dass das Sub-Menu des Navi Main unter dem Navi-Balken BÜNDIG anschließt */ #nv-primary-navigation-main .sub-menu .wrap { /* background-color: transparent !important; */ margin-top: 0px !important; padding: 14px 10px; } /* Sub-Menue Erstes Element (im 3. Element vom Navi Main) */ #nv-primary-navigation-main .menu-item:nth-child(3) .menu-item:nth-child(1) .wrap { margin-top: 10px !important; padding-top: 14px !important; } /* Sub-Menue Um den Abstand zw. den Items zu reduzieren (2 bis Vorletztes) */ #nv-primary-navigation-main .sub-menu .menu-item:nth-child(n+1):nth-last-child(n+2) .wrap { padding-bottom: 0px !important; } /* Sub-Menue Only Sub-Menue-Item */ #nv-primary-navigation-main .menu-item:nth-child(1):nth-last-child(1) .wrap { margin-top: 10px !important; padding: 14px 10px !important; } /* ------- NAVI MAIN als HAMBURGER fuer 800.9px and smaller screen sizes ------- */ /* --------------------------- B R E A K P O I N T S --------------------------- * @media (max-width:800.9px){ /* Hamburger-Rahmen * .item-button { height: auto !important; /* 38px; * border: solid #8b6c28 2px; border-radius: 3px; } /* Der komplette Block mit den Hamburger-Menü-Balken * .item-button .navbar-toggle .bars { background-color: transparent; } /* Die Balken im Hamburger-Menue * .item-button .bars .icon-bar { background-color: #8b6c28; height: 3px; width: 21px; } } */ /* ========= 1. Site - Bereich: Header: d) Plugin Breadcrumbs NavTX ========= */ /* Breadcrumbs NavTX: (Small Tag) auf Single Page & Blog-Index */ .nv-page-title-wrap .nv-page-title small, /* Breadcrumbs (Small Tag) auf Blog-Artikel */ .entry-header .nv-title-meta-wrap small, /* Breadcrumbs NavTX: Mit Widget eingefügte Breadcrumbs */ /* Span Tag: Homepage */ .breadcrumbs .home span, /* Span Tag: Posts */ .breadcrumbs .post span { font-family: 'Lato','Helvetica Neue',Arial,sans-serif !important; color: #262626; font-size: 10.5px; line-height: 1.7em; text-align: left; letter-spacing: 0px; cursor: pointer; } .nv-page-title-wrap .nv-page-title small { margin-bottom:7px; padding-left: 7px; } /* ====== 1. Site - Bereich: Header: e) "Search"-/"Suche"-/"Finde"-Feld ====== */ /* Suchmöglichkeit, wenn angeklickter Link nicht funktioniert o.ä. */ .nv-index-posts .nv-seach-form-wrap { margin: 0 0 60% 0 !important; } /* =========================================================================== */ /* ==================== 1. SITE - BEREICH: Sidebar Right ===================== */ /* =========================================================================== */ /* ------------ Variation 1: Sidebar Right mit WIDGET-HINTERGRUND ------------ */ /* Sidebar wrap */ .wrapper .nv-sidebar-wrap { margin: 0px; padding-right: 0px; padding-left: 60px; } /* Widget */ #secondary .widget { background-color: #ffffff; /* whitesmoke; #f4f4f4; */ padding: 12px 12px 6px 12px; } /* -------------- Variation 2: Sidebar Right OHNE HINTERUNDFARBE ------------- */ /* Sidebar Right OHNE HINTERUNDFARBE: Sidebar wrap * .wrapper .nv-sidebar-wrap { margin: 0px 0px 60px 48px; /* ZUVOR: margin: 0px 0px 24px 0px; margin: 0px 0px 24px 48px; * } */ /* -------- Variation 3: Sidebar Right MIT durchgehend. HINTERUNDFARBE ------- */ /* Sidebar Right MIT HINTERUNDFARBE: Sidebar wrap * .wrapper .nv-sidebar-wrap { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 40px; } /* Sidebar Right MIT HINTERUNDFARBE: Secondary: * #secondary{ background-color: #ffffff; /* whitesmoke; #f4f4f4; * padding: 24px 12px; } */ /* ------------ Sidebar Right fuer 859.9px and smaller screen sizes ------------ */ /* --------------------------- B R E A K P O I N T S --------------------------- */ /* 859.9px and below screen sizes (war 800.9px, GGF FUER Var.2 ANPASSEN!!!) */ @media (max-width: 859.9px){ /* Sidebar wrap */ .wrapper .nv-sidebar-wrap { padding-top: 20px; padding-bottom: 0px; padding-left: 0px !important; } } /* ========================= Sidebar Right - Widgets ========================= */ /* Widget Title */ #secondary .widget .widget-title { font-size: 15px; /* 16px */ text-align: center; letter-spacing: 0.1px; } /* --- Widget ARCHIV --- */ /* Widget ARCHIV: Archiv-Listeneinträge (List) */ #secondary .widget ul { display: inline-block; } /* Widget ARCHIV: Datum (Span Tag) */ #secondary ul span { font-size: 12px; float: right; visibility: hidden; /* visible; */ } /* --- Widget KALENDER --- */ /* Table Data */ #wp-calendar tr td { line-height: 1.2em; padding-left: 6px; padding-right: 6px; } /* --- Widget JobFeedback --- */ /* (StrongTestimonial /Wpmtst small widget) */ #secondary .widget .wpmtst-small-widget { margin-bottom: 3px; border: solid #262626 1px; border-radius: 3px; } /* =================================================================================================================== */ /* =================================================================================================================== */ /* ===================================================== II. BLOG ==================================================== */ /* =================================================================================================================== */ /* =================================================================================================================== */ /* ----- Blog-Post Zwischenueberschrift ----- */ .blog-post_zwischenueberschrift{ margin: 36px 0px 14px 0px !important; } /* ----- Blog-Post Inhaltsuebersicht im Post-Text ----- */ /* Header: "Inhaltsübersicht anzeigen" */ .blog-post_inhaltsuebersicht { color: #8b6c28; font-size: 16px; margin: 36px 0px 15px; } /* Liste mit den Zwischenüberschriften */ .hentry .wp-block-advgb-summary ul { margin: 14px 0 30px 0px; } /* Listitems; Listenzeichen (Disk) weg */ .wp-block-advgb-summary .advgb-toc li { margin: 7px 0 0 24px !important; list-style-type: none; } /* ----- Blog-Post Motto im Post-Text ----- */ .blog-post_motto { font-family: Poppins, Arial, Helvetica, sans-serif; font-weight: 600; font-size: 1.3em; margin: 14px auto !important; padding: 14px auto !important; } /* ----- Blog-Post Info-Box im Post-Text ----- */ .blog_infobox { margin: 36px 0px; padding: 16px; border: solid 3px #8B6C28; border-radius: 4px; } /* Blog-Post Info-Box-ÜBERSCHRIFT ist: .blog-post_zwischenueberschrift */ /* Blog-Post Info-Box Paragraph */ .blog_infobox .blog_infobox_text { line-height: 1.7em !important; letter-spacing: 0.2px !important; margin-top:14px !important; } /* Blog-Post Info-Box List */ .hentry .blog_infobox_list { margin-top: 0px; margin-bottom: 0px; } /* Blog-Post Info-Box Listitem */ .hentry .blog_infobox_list:first-child { margin-top: 14px; margin-bottom:0px; } /* =================================================================================================================== */ /* =================================================================================================================== */ /* ================================================= IV. SONDERSEITEN ================================================ */ /* =================================================================================================================== */ /* =================================================================================================================== */ /* =========================================================================== */ /* ==================== 1. SONDERSEITE - Feedback-Seiten ===================== */ /* =========================================================================== */ /* ------ Das Folgende gilt fuer die StrongTestimonials-View-EINSTELLUNGEN: Pagination: Wordpress standard Per Page: 9 Navigation: before & after Show condensed page numbers Ende size: 1 Middle Size: 2 x Show previous/next links Previous text: « Vorherige Next text: Nächste » Style: Simple Layout: grid Number of columns: 2 Background: inherit from theme Font color: inherit from theme ------------------------------------------------------------------------------ */ /* ===================== a) Feedback-Seiten: ExtraNavi ======================= */ /* -------------------- Testi-ExtraNavi: Flex-Container dafür ---------------- */ .flex-container { margin-bottom: 24px; /* Space unter ExtraNavi zu Paginationsbalken */ display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; flex-flow: row wrap; /* justify-content: flex-start; fuer @media kl Bildschirme */ /* justify-content: space-around; /* fuer größere Bildschirme */ justify-content: space-between; align-items: stretch; } /* ----------- .flex-container: B R E A K P O I N T S ------------------------ */ /* Der Flex-Container fuer das Testimonial-Extra Navi für 800px and below screen sizes */ /* 800px and smaller screen sizes */ @media (max-width:800.9px){ .flex-container { width: 100%; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; flex-flow: row wrap; justify-content: space-evenly !important; align-items: center; align-content: space-around; } .flex-container > div { margin: 5px; } } /* ------ Feedback-Seiten: Testi-ExtraNavi: Aufklapp-Auswahlmenü links ------- */ .dropup { font-size: 12px !important; position: relative; display: inline-block; } /* Hintergrund, Schrift & Pointer: s. Globale Einstellungen - Navis, Buttons, Widget-Titel */ .dropup .dropbttn { padding-top: 5px; padding-bottom: 5px; border-radius: 3px; } /* Testi-ExtraNavi: Dropup-Menü, welches nach OBEN geht */ /* Shadow: s. GLOBALE EINSTELLUNGEN - Licht und Schatten */ .dropup .dropup-content { font-weight: 400; font-size: 12px; border-radius: 4px; position: absolute; bottom: 35px; box-shadow: 8px -4px 10px 0px rgba(0,0,0,0.2) !important; /* height: 35px; */ width: 240px; display: none; } /* Testi-ExtraNavi Links des Testimonial-Aufklapp-Auswahlmens */ .dropup a { color: #8b6c28 !important; font-weight: 500; text-align: center; background-color: #ffffff; padding-top: 5px; padding-bottom: 5px; border-radius: 4px; width: 240px; display: inline-block; } /* Testi-ExtraNavi: Links AKTIV & HOVER des Testimonial-Aufklapp-Auswahlmenüs */ /* Hintergrund, Schrift, Pointer s. Globale Einstellungen Navis, Buttons, Widget-Titel */ .dropup a:hover, .dropup a:active { color: #ffffff !important; text-decoration: none; text-align: center; padding-top: 5px; padding-bottom: 5px; width: 240px; display: inline-block; } /* Shadow s. GLOBALE EINSTELLUNGEN - Licht und Schatten (hover) */ .dropup:hover .dropup-content { display: block; } .dropup:hover .dropbttn { background-color: #ffffff; } /* ------- Testi-ExtraNavi: Link-Button "Nach Oben" mittig UNTEN --------- */ /* Hintergrund & Schrift, Pointer s. Globale Einstellungen Navis, Buttons, Widget-Titel */ .up-btn { padding-top: 5px !important; padding-bottom: 5px !important; border-radius: 4px; } .up-btn a { /* height: 35px; DAS HIER WAR ZUVOR AKTIV!!! */ width: 240px; display: block; } /* ------------ Testi-ExtraNavi: Der Link-Button zum CV rechts -------------- */ /* Hintergrund & Schrift, Pointer s. Globale Einstellungen Navis, Buttons, Widget-Titel */ .cv-btn { padding-top: 5px !important; padding-bottom: 5px !important; border-radius: 4px; } /* Testi-ExtraNavi: Der der LINK Link-Button zum CV rechts */ .cv-btn a { display: block; } /* ============ b) NAVI-BALKEN PAGINATION (Seiten-Blätterfunktion) =========== */ /* Feedbackseite - Pagination: Hintergrund des Pagination-Balkens */ /* Hintergrund, Schrift, Pointer: s. Globale Einstellungen Navis, Buttons, Widget-Titel */ .nv-single-page-wrap .wpmtst-simple nav { font-family:'Lato','Helvetica Neue',Arial,sans-serif !important; font-size: 14px; letter-spacing: 0px; padding-top: 6px; padding-bottom: 6px; } /* Feedbackseite - Pagination: Seitenzahlen (Page numbers) */ .nav-links a.page-numbers, /* Feedbackseite - Navi-Blaetterfunktion: Span Tag mit den drei Puenktchen */ .nav-links .dots { color: #ffffff; font-weight: 600; line-height: 1.7em; text-decoration: none !important; background-color: transparent; padding: 1px 6px; border: solid 1px; border-radius: 4px; } /* Feedbackseite - Pagination: AKTIVE Seite (Current) */ .wpmtst-simple .nav-links .current { font-weight: 600; line-height: 1.7em; text-decoration: none !important; padding: 1px 6px; border: solid 1px; border-radius: 3px; } /* ====================== c) Die EINZELNEN Testimonials ====================== */ /* Einzelne Testis bündig zum ExtraNav & Paginations-Balken */ .nv-content-wrap > div > div { justify-content: space-evenly; /* space-between; */ } /* Einzelfeedback: Rahmen um die EINZELNEN Feedbacks */ .strong-grid .wpmtst-testimonial .wpmtst-testimonial-inner { border: solid 1px #262626 !important; border-radius: 3px; } /* --------------------- Einzelfeedback: Textkörper ------------------------- */ /* Block, worin der eigentliche Testimonial-Text sich befindet */ .strong-grid .wpmtst-testimonial .wpmtst-testimonial-content { padding-bottom: 17px !important; } /* --------- Einzelfeedback: Abstand der einzelnen Textparagraphen --------- */ /* Paragraph */ .strong-grid .wpmtst-testimonial p { font-size: 14px; line-height: 1.7em; font-style: normal; margin-bottom: 7px !important; /* padding-bottom: 6px !important; */ } /* ------ Einzelfeedback: Textkörper - Emojis darin (CSS-Klasse: emoji) ----- Emojis darin (CSS-Klasse: emoji) */ .strong-grid p .emoji, /* sontige Emoticons darin */ .strong-grid span span img { width: 17px !important; height: 17px !important; } /* Einzelfeedback: Links auf den Feedback-Seiten: Link */ .strong-grid .wpmtst-testimonial .wpmtst-testimonial-field a { color: #8b6c28 !important; text-decoration: none !important; } /* Einzelfeedback: Link (hover & active) */ .strong-grid .wpmtst-testimonial .wpmtst-testimonial-field a:hover, .strong-grid .wpmtst-testimonial .wpmtst-testimonial-field a:active { color: #ee7000; text-decoration: none !important; } /* ---------------------- Einzelfeedback-Absender-Feld ---------------------- */ /* Einzelfeedback-Absender-Feld (Name, Datum) (CSS-Klasse: .strong-grid .wpmtst-testimonial .wpmtst-testimonial-field - entspricht im CV-Header_Feedback-Block: .block_cv-header-kundenfeedback .wpmtst-testimonial .wpmtst-testimonial-field - ODER AUCH (einzeln): .cv-header_slideshow_testimonial-name, .cv-header_slideshow_date ) */ .testimonial-name, .testimonial-ihr_beruf, .testimonial-company { font-size: 14px; line-height: 1.2em; font-style: italic; text-align: left !important; margin-bottom: 7px !important; float: left; } .testimonial-post_date { font-size: 14px; line-height: 1.2em; font-style: italic; text-align: right !important; margin-bottom: 7px !important; float: left; } /* ---------- Einzelfeedback: Feedback-Kategorie/ Taetigkeitsfeld ---------- */ /* (CSS-Klasse: taetigkeitsfeld_category entspricht im CV-Header_Feedback-Block: .cv-header_testimonial-category ) */ .testimonial-category { font-size: 12px !important; font-style: italic; text-align: right !important; padding-top: 10px; padding-bottom: 17px; float: right !important; } /* =========================================================================== */ /* ================== 2. SONDERSEITE - Otter -Feedbackformular =============== */ /* ================== 3. SONDERSEITE - Otter -Kontaktformular ================ */ /* =========================================================================== */ /* Mysignature im Feedbackformular */ .nv-single-page-wrap .mysignature{ font-family:'Sedgwick Ave', handwriting; font-size:20px; } /* Feedbackformular-Text Absatz & Liste im Einleitungstext */ .jobfeedbackform_absatz { line-height: 1.7em !important; text-align: justify; letter-spacing: 0.2px !important; margin: 0px 0px 6px 0px !important; } .jobfeedbackform_liste { margin: 14px 0px 30px 0px !important; } .jobfeedbackform_liste li { line-height: 1.4em; text-align: left !important; letter-spacing: 0.2px !important; list-style-type: disc; list-style-position: outside; } /* ----- Otter-Form: Formularfeld zentrieren ----- */ .otter_selfmade_formular { display: flex; justify-content: center; } /* ----- Otter-Form: Rahmen um das Formularfeld ----- */ .otter_selfmade_formular form { margin: 1.7em 0 !important; padding: 1.5em !important; border: solid 1px rgba(38,38,38,0.33) !important; border-radius: 4px; width: 70% !important; } /* Otter Feedback-Form: Auswahlmgl. Tätigkeit */ .otter_selfmade_formular_checkfield-feedback { font-style: normal; line-height: 2em; } /* Otter-Datenschutz-Consent */ .o-form-choices { font-style: italic; } /* --------------------- Otter-Form: "Absenden"-Button --------------------- * .otter_selfmade_formular .wp-block-button .wp-block-button__link { background-image: url("https://www.astrid-rau.de/wp-content/uploads/navi_cv_main.jpg"); background-size: cover; border-radius: 4px; min-width: 152px; min-width: 152px; } */ .otter_selfmade_formular .wp-block-button .wp-block-button__link:active { color: #fff !important } /* ----------------- Otter-Form: Versendungs-Bestätigung ------------------ */ .o-success { color: #b4d39b !important; font-weight: 500; line-height: 1.7em; } /* =========================================================================== */ /* ============== 4. SONDERSEITE - Simple WP Membership - Login ============== */ /* =========================================================================== */ /* Simple WP Membership - Login: Hintergrund, Schrift, Pointer-Einstellungen fuer den Button (#swpm-login-form .swpm-login-submit .swpm-login-form-submit) s.o. Globale Einstellungen Navis, Buttons, Widget-Titel */ /* >>> Folgender Abschnitt stammt im wesentlichen aus: elbnetzPUNKTcomSLASHgeschuetzten-mitgliederbereich-in-wordpress */ /* SWPM - Login: Auf Seite mit geschütztem Inhalt: Blendet nach "Sie müssen sich anmelden, um diesen Inhalt zu sehen" die Aufforderung "Werden Sie Mitglied bei uns" aus: */ .swpm-post-not-logged-in-msg a:not(.swpm-login-link), div.swpm-forgot-pass-link, div.swpm-join-us-link, .swpm-remember-me, .swpm-edit-profile-link, .nv-single-page-wrap .swpm-edit-profile-link, .swpm-logged-status, .nv-single-page-wrap .swpm-logged-status, .swpm-logged-membership, .nv-single-page-wrap .swpm-logged-membership, .swpm-logged-expiry, .nv-single-page-wrap .swpm-logged-expiry { display: none; } /* ---------------- SWPM - Login-/ Logout-Seite (ggf. Widget) --------------- */ /* --- SWPM: Mein Logo auf der Login-/Logout-Seite --- */ .login-logout-page_logo { margin: 6% 0 10% 0; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; justify-content: center !important; } .login-logout-page_logo img { margin: 0 auto !important; width: 120px !important; display: block; } /* Swpm login form */ #swpm-login-form{ background-image:none; } /* --- SWPM LOGIN-Widget mit Login-Formular (auf Login-Seite & Home) --- */ .swpm-login-widget-form, /* --- SWPM LOGIN-Widget LOGGED mit Auslog-Button (auf Login-Seite & Home) --- */ .nv-single-page-wrap .swpm-login-widget-logged, /* --- SWPM - Anzeige für NICHT EINGELOGGTE USER mit Link zum Login (If Seite/ Post anmeldepflichtig) --- */ .swpm-post-not-logged-in-msg { margin: 7% 0 40% 0 !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; flex-direction: column; justify-content: space-around; align-items: center; } /* --- darin: SWPM - Login-Formular Field Label: User Name & Password --- */ #swpm-login-form .swpm-username-label label, #swpm-login-form .swpm-password-label label, /* --- darin: SWPM Logged-in User Name label --- */ .nv-single-page-wrap .swpm-logged-username-label { font-weight: 600; /* text-align: left; */ /* margin-bottom: 7px !important; */ } /* SWPM Login-Formular Values (Ausfüll-Feld): User Name & Password */ #swpm_user_name, #swpm_password { font-weight: 400 !important; font-size: 14px !important; text-align: left; margin-bottom: 7px; height: 35px !important; } /* --- SWPM Submit-Button für Login und für Logout --- */ #swpm-login-form .swpm-login-submit .swpm-login-form-submit, .nv-single-page-wrap .swpm-logged-logout-link a { font-family: 'Lato','Helvetica Neue',Arial,sans-serif !important; color: #ffffff; font-weight: 600; font-size: 12px !important; text-transform: uppercase; text-decoration: none !important; text-align: center; letter-spacing: 0.5px; margin-top: 20% !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; justify-content: center; flex-direction: column; align-items: center; flex: 0 0 auto; } /* =========================================================================== */ /* ====================== 5. SONDERSEITE - Mein Lebenslauf =================== */ /* =========================================================================== */ /* ====================================== Mein Lebenslauf: Header ======================================= */ /* ----- CV-Header Container mit Photo, Kontaktdaten & CV-Testimonials ----- */ /* Abstand CV-Header-Block -> CV-Tabs-Block */ .cv_header { margin-bottom: 24px; } /* ============ CV-Header: Blöcke "Foto", Verbindungsdaten", TestiBlock ============ */ /* ----------- a) CV-Header: Bewerbungsfoto ----------- */ /* Bewerbungsfoto: Das Foto * ÄNDERUNG: _columns * .cv_header_zweidrittel_aussen_columns .wp-block-image img { width: 230px; } */ .cv_header_column_photo, .cv_header_column_photo_photo-box, .wp-block-image img { width: 230px !important; } /* Bewerbungsfoto: Beschriftung * ÄNDERUNG: _columns FÜR PublishPress-Columns * .cv_header_zweidrittel_aussen_columns .advgb-columns .wp-element-caption { line-height: 1.7em !important; text-align: center; font-size: 12px; } */ /* Bewerbungsfoto: Beschriftung (für alle) */ .cv_header_column_photo .wp-element-caption { font-size: 12px; line-height: 1.7em !important; text-align: center; } /* ------- b) CV-Header: Block Verbindungsdaten ------- */ /* CV-Header-Adressfeld & Verbindungsdatenfeld: Margin zw. Icon und actual Text */ .cv-header_adresse_name { margin-bottom: 0px; width: 167px; } .cv-header_adresse_strasse, .cv-header_adresse_wohnort { margin-bottom: 0px; padding-left: 34px; width: 167px; } /* CV-Header-Adressfeld: Bildsymbole */ /* Adressfeld: Briefumschlag, E-Mail: Stift, Mobilnummer: Telefonhörer, Website: Homepage-Häuschen */ p .wp-image-5702, p .wp-image-5703, p .wp-image-5697, p .wp-image-5695 { display: inline-block; margin-right: 17px; vertical-align: text-bottom; width: 17px !important; height: 17px; } /* ---------------------- c) CV-Header: Feedback-Block ---------------------- */ /* Fuer Testimonial-View [testimonial_view id="5"]. "Small Widget" mit Slideshow, Style (Auswahl unten auf Seite) */ /* - CV-Header: Feedback-Block: Rahmen um gesamtem CV-Testimonial-Block. Entspr. auf Testimonial-Seiten Einstellgn. zu: .strong-grid .wpmtst-testimonial .wpmtst-testimonial-inner */ .block_cv-header-kundenfeedback{ border: solid #262626 1px; border-radius: 4px; } /* CV-Header Feedback-Block Ueberschrift Das sagen andere ueber mich */ .cv_header_kundenreferenzen_das-sagen{ font-family: Poppins, Arial, Helvetica, sans-serif; font-weight: 600; line-height: 1.5em; font-style: italic; text-align: center !important; margin-bottom: 5px; padding: 14px 0px; } /* -- CV-Header Feedback-Block: Wpmtst testimonial content (Textkoerper) -- */ /* Entspricht auf den Testimonial-Seiten: .strong-grid .wpmtst-testimonial p */ .wpmtst-small-widget .wpmtst-testimonial .wpmtst-testimonial-content { font-size: 14px; line-height: 1.5em; font-style: italic; white-space: break-spaces; text-align: justify; margin-bottom: 17px !important; } /* --- CV-Header Feedback-Block: Links --- */ /* Links im Testimonial-Text */ .nv-single-page-wrap .wpmslider-wrapper p a, /* Readmore: "Weiterlesen" */ .nv-single-page-wrap p a.readmore, /* Im Testi-Absender: Firmenname idt Link */ .cv-header_testimonial-company a { color: #8b6c28; text-decoration: none !important; } /* --- CV-Header: Feedback-Block: Testimonial-Absender & Kategorie --- */ /* CV-Header Feedback-Block: Absender-Feld (Name, Unternehmen/ Org.). Entspricht auf den Testimonial-Seiten: .strong-grid .wpmtst-testimonial .wpmtst-testimonial-field */ .cv-header_testimonial-name, .cv-header_testimonial-ihr_beruf, .cv-header_testimonial-company, /* CV-Header Feedback-Block: Datum. Entspricht auf den Testimonial-SEITEN: .testimonial-post_date */ .cv-header_testimonial-postdate, /* CV-Header: Feedback-Block: Feedback-Kategorie/ Taetigkeitsfeld. Entspr. auf Testimonial-SEITEN: .testimonial-category */ .cv-header_testimonial-category { font-size: 12px; line-height: 1.2em !important; font-style: italic; text-align: left; } .cv-header_testimonial-postdate, .cv-header_testimonial-category { text-align: right !important; } /* --- CV-Header_Feedback-Block unten: "Weiteres Feedback-Stimmen" --- */ .block_cv-header-kundenfeedback .cv_header_p_weiteresfeedback { font-weight: 600; font-size: 13px !important; line-height: 1.5em !important; text-decoration: none !important; text-align: center; margin-bottom: 24px; } /* Link zur Feedback-Seite */ .cv_header_p_weiteresfeedback a { color: #8b6c28; text-decoration: none !important; } /* Link zur Feedback-Seite (hover) */ .cv_header_p_weiteresfeedback a:hover { color: #ee9933; } /* ========================== d) CV - Seitenpalte: Skillz ========================== */ /* --- Spacer - Abstandhalter in den Skillz --- */ /* Skills - Block links: Abstand zwischen Skillz-Sidebar links (Advgb column inner)und dem CV-Tabs-Block rechts daneben*/ .nv-content-wrap .skillzbar-left .advgb-column-inner { margin-right: 20px; } /* Skills - Block rechts: Abstand zw. Skillz-Sidebar rechts (Advgb column inner) und dem CV-Tabs-Block links daneben */ .nv-content-wrap .skillzbar-right .advgb-column-inner { margin-left: 20px; } /* Skills: Abstand Block spacer */ .skillzbar-left #skillz_abstand, .skillzbar-right #skillz_abstand { height: 20px !important; } /* --- Überschriften im Skillz-Block --- */ /* Skills - Sterne: Überschrift "Kenntnisse und Fähigkeiten" (== .skillzbar-left_skillz-gruppe h5) */ .skillz_header { line-height: 1.5em; font-weight: 600; font-style: italic; text-align: center; hyphens: none; } /* Skills - Sterne: Skills-/ Fähigkeiten-Oberbegriff. Im Gutenberg steckt hier ein h6-Block hinter */ .skillz_header_oberbegriff { color: #8b6c28 !important; /* #a98434 (isr. Khaki), #ff7700 (Orange) */ font-weight: 600 !important; line-height: 1.6em; text-align: center; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 17px; } /* Skills - Die STERNE im Skillz-Block LINKS: Block mit Skills-Name + Sterne vom Plugin ("Star Rating Block"), alternative CSS-Bezeichnung: .skillz_stars */ .skillzbar-left .wp-block-ideabox-star-rating { display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; flex-direction: column; } /* Skills - Die STERNE im Skillz-Block RECHTS: Block mit Skills-Name + Sterne vom Plugin ("Star Rating Block"), */ /* alternative CSS-Bezeichnung: .skillz_stars */ .skillzbar-right .wp-block-ideabox-star-rating { display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; flex-direction: column; /* margin-bottom: 10px; */ /* padding-right: 17px; */ } /* Skills - Sterne: Skills - Bezeichnung der Fähigkeit, z.B. "Verkaufen" */ .wp-block-ideabox-star-rating .ib-star-rating--title { font-size: 15px; font-weight: 600; line-height: 1.2em; margin-bottom: 10px; } /* Star rating title: Verhinder Umbruch im Wort */ .wp-block-group .ib-star-rating--title { white-space: pre; } /* Skills - Sterne LINKS: Skills - Beschreibung der Fähigkeit, alternative: .skillz_description */ /* Skills - Sterne RECHTS: Skills - Beschreibung der Fähigkeit, alternative: .skillz_description */ .skillzbar-left p, .skillzbar-right p { font-weight: 400; font-size: 14px; line-height: 1.5em !important; text-align: justify; letter-spacing: 0px; word-spacing: 0.3px; /* word-wrap: break-word; CHECK!!! */ margin-bottom: 17px; /* padding-left: 17px; */ } /* =========================================== e) CV - Tabs =========================================== */ /* ------------------------ CV-Tabs: Die Tab-Reiter -------------------------- */ /* CV-Tabs: Alle Tabs gleiche Größe, Schriftausrichtung */ .advgb-tabs-panel .advgb-tab a, .advgb-tabs-panel .advgb-tab-active a { text-decoration: none !important; text-align: center; letter-spacing: 0px; width: 130px; height: 45px; } /* CV-Tabs: Hintergrund der Tabs weiß (Advgb tabs panel) */ .nv-content-wrap .advgb-columns .advgb-tabs-panel { background-color: #ffffff; } /* CV-Tabs: Hintergrund Tabs AKTIV */ /* Hintergrund, Schrift, Pointer s. Globale Einstellungen Navis, Buttons, Widget-Titel: .wp-block-advgb-adv-tabs .advgb-tabs-panel .advgb-tab-active */ /* OTTER Tab-Reiter: Ausrichtung Schrift zentriert in Zusatnd "visited" */ .otter-tab-body > div > .hidden div{ text-align:center; } /* --------------------------- B R E A K P O I N T S ---------------------------- */ /* ************* CV-Tabs: BREAKPOINT 959.9px and below screen sizes ************* */ @media (max-width: 959.9px){ /* Advgb tabs panel */ .nv-content-wrap .advgb-columns .advgb-tabs-panel { display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; } } /* ************* CV-Tabs: BREAKPOINT 576.9px and below screen sizes ************* */ @media (max-width: 576.9px){ /* Advgb tabs panel */ .nv-content-wrap .advgb-columns .advgb-tabs-panel { display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; } } /* Advgb tab body: Der Inhaltsbereich, der jeweils zu einem Tab gehört, und worin der eigentliche CV-Text (die Acc u.s.w.) stehen * default: padding: 10px 10px 15px 10px; NEU: 2024-11-23; bisher: padding: 10px 10px 10px 17px; */ .advgb-tab-body-wrapper .advgb-tab-body { padding: 10px 10px 10px 10px !important; } /* =========================================================================== */ /* ====================== 5. SONDERSEITE - Mein Lebenslauf =================== */ /* =========================================================================== */ /* Ziege */ /* ########################################### f) CV - Akkordeons ############################################ */ /* ##################################### 2024-10-09: CSS für CV-ACCs neu ##################################### */ /* 2024-10-09: NEUER CSS für neue Seite: 2024-10-09 Nested Accs neu TEST */ /** Das Columns(= Spalten)-Layout ist komplett mit den "Columns" aus dem Plugin PublishPress) erstellt **/ /* Ausreichende Breite für das Datum */ .cv_acc_outer_acc-package_column_01_placeholder, .cv_acc_outer_dateplace-column_date, .cv_acc_inner_acc-package_column_01_placeholder, .cv_acc_inner_dateplace-column_date { margin-right: 10px; min-width: 120px !important; max-width: 120px !important; /* 130px */ } /* ================================== Zeile mit Date und Place und Columns drumherum ================================== */ /* Columnset mit Date & Place: Paragraph */ .cv_acc_outer_dateplace-columnset, .cv_acc_inner_dateplace-columnset { margin:0px; /* background-color:sienna; */ } /* Special: Zwei OUTER Dateplace direkt nacheinander (wie bei Wittenberg */ .cv_acc_outer_dateplace-columnset_wittenberg { margin-bottom: 14px; } /* Special: IM OUTER: Ein OUTER Dateplace zu einem WEITEREN STATIONSBLOCK (wie beiOerlikon bei den Wittenberg-Stationen */ .cv_acc_outer_dateplace-columnset_oerlikon { margin-top: 14px !important; } .cv_acc_outer_dateplace-column_date, .cv_acc_inner_dateplace-column_date { margin-bottom: 0px !important; } .cv_acc_outer_dateplace-column_place, .cv_acc_inner_dateplace-column_place { margin: 0px !important; } /* CV - Acc: Format ALL Text in dateplace über den CV-Stationen: Paragraph */ .cv_acc_outer_dateplace_alltext, .cv_acc_inner_dateplace_alltext { font-size: 13px; line-height: 1.2em; font-style: italic; text-align: left !important; /* white-space: nowrap; hyphens: none !important; */ margin-bottom: 0px; /* margin: 5px 0px; */ padding-left: 0px !important; } /* Verhindert in der date-Spalte den break-lines (= Textumbruch) */ .cv_acc_outer_dateplace_date-text, .cv_acc_inner_dateplace_date-text { white-space: nowrap; hyphens: none !important; } /* UNNÖTIG, bei Row-Umbruch MIST! .cv_acc_outer_dateplace_place-text { padding-left: 10px !important; } */ /* ============================================== SPALTEN mit den LINKS =============================================== */ /* Die ersten zwei gehören zu "Curriculum Vitae", die unteren zwei zu "Lebenslauf" */ .cv_acc_outer_column_02_acc-package_acc-columnset_column_link, .cv_acc_inner_acc-package_acc-columnset_column_link, .cv_acc_outer_acc-package_column_02_acc-columnset_column_link, .cv_acc_inner_acc-package_column_02_acc-columnset_column_link { width: 40px !important; /* min-width: 19px; /* 15px * max-width: 40px; /* padding-top:4px; ??? */ /* background-color: lightsalmon; */ } /* Advgb column inner; Die ersten beiden für "Curriculum Vitae", die beiden danach für "Lebenslauf" */ .cv_acc_outer_column_02_acc-package_acc-columnset_column_link .advgb-column-inner, .cv_acc_inner_acc-package_acc-columnset_column_link .advgb-column-inner, .cv_acc_outer_acc-package_column_02_acc-columnset_column_link .advgb-column-inner, .cv_acc_inner_acc-package_column_02_acc-columnset_column_link .advgb-column-inner { margin-top: 12px; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; justify-content: space-around; align-content: center; /* align-items:normal; */ /* background-color: tomato; */ } /* Paragraph: Die Links in den Link-Spalten. Zusammen mit s.o. .cv_acc_outer_acc-package_column_02_acc-columnset_column_link werden die Icons astrein ausgerichtet und befinden sich - egal wie das Acc aufklappt, auf Höhe des Aufklapp-Pfeils. SELBST GEFUNNDEN am 2024-11-10 :o) : */ .cv_acc_outer_link-text, .cv_acc_inner_link-text { text-align: center !important; margin-bottom: 0px; display: block; } /* Symbole: pdf (1899/ 11069), Verknüpfung/ Link (9096), Film (10118) */ .cv_acc_outer_link-text .wp-image-1899, .cv_acc_inner_link-text .wp-image-11069, .cv_acc_outer_link-text .wp-image-11069, .cv_acc_inner_link-text .wp-image-1899, .cv_acc_outer_link-text .wp-image-9096, .cv_acc_inner_link-text .wp-image-9096, .cv_acc_outer_link-text .wp-image-10118, .cv_acc_inner_link-text .wp-image-10118, .wp-image-1899, .wp-image-11069, .wp-image-9096, .wp-image-10118, .wp-image-11093 { /* display: inline-block; */ margin-right: 0px !important; vertical-align: text-bottom; width: 17px !important; max-width:17px !important; height: 17px; box-shadow:none !important; } /* Link-Spalte MIT BILD (statt inline-image): Ausrichtung Icons */ .cv_acc_inner_acc-package_column_02_acc-columnset_column_link .wp-block-image { display: flex; justify-content: center; } /* Symbole: pdf (wp-image-11069), Verknüpfung/ Link (9096), Film (10118), Verweispfeil (11093) * .wp-block-image .wp-image-11069, .wp-block-image .wp-image-10118, .wp-block-image .wp-image-9096, .wp-image-11093 { box-shadow:none !important; } */ /* ======================================= Die Accordions und Columns drumherum ======================================= */ /* -------------- Boxen um Text -------------------- */ /* ******* VOR den Acc-Items (Die Boxen mit (Placeholder-Column + (Package mit AccCol & Links-Col)) ******* */ /* Zwischen zwei OUTER Acc (Stationen & Fortbildung) BITTE NOCHMAL PRUEFEN! */ .cv_acc_outer_acc-package { /* background-color: yellowgreen; */ } /* Margin-bottom NACH LETZTEN OUTER Acc-Package einer Station */ .cv_acc_outer_acc-package:last-child { margin-bottom: 24px !important; /* background-color: magenta; */ } .cv_acc_inner_acc-package { margin-bottom: 24px !important; /* default: margin, padding: 0 */ /* border: solid lightseagreen 4px; */ } /* Acc-Hüllen; Default: margin: 24px 0px; Bündig Oberkante .cv_acc_outer_column_02_acc-package_acc-columnset_column_acc bzw. .cv_acc_inner_acc-package_acc-columnset_column_acc */ .cv_acc_outer_acc, .cv_acc_inner_acc { margin: 0px 0px; } /* ***** Otter-default-RAND um Acc-Headers & Acc-Schreibflächen im Acc-Item WEG: ***** */ .wp-block-themeisle-blocks-accordion-item__title, .wp-block-themeisle-blocks-accordion-item__content { border-color: transparent !important; } /*Kuh */ /* So, dass das OUTER Acc-Package bündig zu Place (in datplace-Zeile darüber) ist */ .cv_acc_outer_acc-package_column_02_acc-package { margin-left: 0px !important; } /* Summary: OUTER/ INNER Acc-Header (KOMPLETTEs Acc-Header-Feld); Padding-LEFT für Schatten!!! (SONST: 0px) * Gilt ohne ">" nach ".cv_acc_outer_acc_item " auch für folgende Ebenen (= INNER); MIT ">": gilt NUR im OUTER TITLE; default: padding: 10px; */ .cv_acc_outer_acc .cv_acc_outer_acc_item .wp-block-themeisle-blocks-accordion-item__title { padding: 10px 14px 10px 0px; border-style: none !important; /* background-color: palevioletred; */ } /* ***** Acc-HEADER- Beschriftung ***** */ /* OUTER Acc-Header: TEXT im HEADER; default: margin, padding: 0 */ /* ">" in der CSS-Adresse bedeutet: . Ohne: Auch auf folgenden Ebenen */ .cv_acc_outer_acc_item > .wp-block-themeisle-blocks-accordion-item__title div { font-family: Source Sans Pro, Arial, Helvetica, sans-serif; color: #262626 !important; font-weight: 600; font-size: 18px !important; text-align: left; margin: 0px 14px 0px 0px !important; /* background-color: mediumaquamarine; */ } /* - INNER Acc-Header TEXT (konkrete Header-Beschriftung) * - Auch für SansAcc: Für kürzere Einträge im "Fortbildung-Block" (z.B. Fortbild. Pl., Merkur). ".cv_column-2_level-2_sansacc-header" für "curriculum Vitae" */ .cv_acc_outer_acc_item > .wp-block-themeisle-blocks-accordion-item__title div, .cv_acc_inner_acc_item .wp-block-themeisle-blocks-accordion-item__title div, .cv_acc_inner_acc-package_sansacc-header, .cv_column-2_level-2_sansacc-header { font-family: Poppins, Arial, Helvetica, sans-serif; color: #262626 !important; font-weight: 600; font-size: 16px !important; line-height: 1.5em !important; text-align: left !important; margin-right: 14px; /* background-color: lightseagreen; */ } /* Ergänzung für INNER Acc */ .cv_acc_inner_acc_item .wp-block-themeisle-blocks-accordion-item__title div, .cv_acc_inner_acc-package_sansacc-header, .cv_column-2_level-2_sansacc-header { font-size: 14px !important; margin-bottom:0px; /* background-color: yellow !important; */ } /* NEU 2025-01-06: Farbmodifikation Aufklapp-Pfeil; selbst gefunden mit Inspektor */ /* Aufklapp-Pfeil "auf" */ .wp-block-themeisle-blocks-accordion:not(.has-icon) > .wp-block-themeisle-blocks-accordion-item:not([open]) > .wp-block-themeisle-blocks-accordion-item__title::after, .wp-block-themeisle-blocks-accordion:not(.has-open-icon) > .wp-block-themeisle-blocks-accordion-item[open] > .wp-block-themeisle-blocks-accordion-item__title::after { color: #8b6c28; } /* Aufklapp-Pfeil "zu" */ .wp-block-themeisle-blocks-accordion:not(.has-icon) > .wp-block-themeisle-blocks-accordion-item:not([open]) > .wp-block-themeisle-blocks-accordion-item__title::after { transform: rotate(45deg) translate(-25%, 0%); color: #262626; } /* Esel */ /* ******** IN den Acc-Items: ACCORDION-ITEM- Schreibfläche ******** */ /* Division: Hier kann man RÄNDER und Schatten für die Schreibfläche im ACC-ITEM anpassen */ /* SHADOW um Acc-Item = Zugeklappt: Schatten nur um Acc-Header; Aufgeklappt: Schatten um Header + Item-Fläche. Folgend habe ich etwas Schatten gelegt * .cv_acc_outer_acc_item{ box-shadow:1px 4px 4px 1px lightgray !important; } */ /* >>>>> No margin, no padding: .cv_acc_inner_acc_item{} */ /* "Schreibfläche IN Acc-Item (OUTER NICHT nötig!); default: padding: 18px 24px;. Für bündig zu Klappfeil: padding-right: 24px; */ .cv_acc_outer_acc .cv_acc_outer_acc_item .wp-block-themeisle-blocks-accordion-item__content, .cv_acc_inner_acc .cv_acc_inner_acc_item .wp-block-themeisle-blocks-accordion-item__content { padding: 10px 6px 0px 0px; /* border-color: transparent; s.o. * background-color: gray; */ } /* Specht */ /* MEIN Ausklapp-Element !!!, wie ich's immer haben wollte :O): Inner Acc-Package & SPALTE mit PLACE (Tätigkeitsort); default: margin: 24px -15px 0px -15; // padding: 24px 12px; */ .cv_acc_inner_dateplace-column_place, .cv_acc_inner_acc-package_column_02_acc-package { margin: 0px -46px 0px 0px !important; background-color: #fff; /* box-shadow: 0 3px 6px 1px lightgray; /* rgba(0,0,0,0.16) */ height: auto; width: 100%; opacity: 1; transform: scale(1,1); /* background-color: lightgray !important; */ } /* FÜR "Curriculum Vitae vermutlich; Advgb column inner: CHECK GGF fuer OUTER: .cv_acc_outer_acc-package .cv_acc_outer_acc_item .cv_acc_inner_acc-package */ .cv_acc_inner_acc-package_column_02_acc-package .advgb-column-inner { padding-top: 0px !important; /* background-color: olive; */ } /* Huhn */ /* ***** CV Textblöcke & Listen in den OUTER/ INNER Acc-Items (Acc-Flächen) ***** */ /* CV-Textblock in OUTER & INNER Acc-Item; default: margin-bottom: 30px; */ /* CV-AccListe in OUTER & INNER Acc-Item; default: margin: 30px 0px; padding-left: 20px; */ /* CV-AccListe > Listenelement; default margin-top: 10px; */ /* Intro-Text für Judaistik-Studien */ .cv_acc_outer_acc_item_text_intro_jud { margin: 24px 0px 14px 0px; } /* >>> Abstand FIRST Element zu OBERkante AccItem-Content alle = 0px; == >>> :first child == :nth-child(1) */ .cv_acc_outer_acc_item_text:first-child, .cv_acc_inner_acc_item_text:first-child, .cv_acc_outer_acc_item_list:first-child, .cv_acc_inner_acc_item_list:first-child { font-size: 14px !important; margin-top: 0px !important; margin-bottom: 14px !important; /* background-color: pink; */ } /* Abstand FIRST Listenelement von Oberkante == dem von Text */ .cv_acc_outer_acc_item_list_listitem:first-child, .cv_acc_inner_acc_item_list_listitem:first-child { margin-top: 0px !important; /* background-color: hotpink; */ } /* >>> Standard: ALLE dazwischen: List-/ Text-Elemente dazwischen, AUSSER s.u. & o. ;o) */ .cv_acc_outer_acc_item_text, .cv_acc_inner_acc_item_text { font-size: 14px !important; margin-top: 14px; margin-bottom: 14px !important; /* background-color: lavender; */ } .cv_acc_outer_acc_item_list, .cv_acc_inner_acc_item_list { margin-top: 14px !important; margin-bottom: 14px !important; /* padding-left: 12px; CHECK */ /* background-color: lightcyan; */ } .cv_acc_outer_acc_item_list_listitem, .cv_acc_inner_acc_item_list_listitem { margin-top: 5px !important; /* background-color: lightblue; */ } /* >>> Abstand LAST Element zu UNTERkante AccItem-Content 30px; == :last-child == :nth-last-child(1) */ .cv_acc_outer_acc_item_text:last-child, .cv_acc_inner_acc_item_text:last-child, .cv_acc_outer_acc_item_list:last-child, .cv_acc_inner_acc_item_list:last-child { margin-top: 14px; margin-bottom: 14px !important; /* oder: 30px >>> dann ggf. margin-bottom unter acc-Gruppe (zur nächsten Acc-Gruppe) WEG */ /* background-color: lightgreen; */ } /* >>> ONLY child: Was allein im Acc-Item steht; == :only-child == :nth-child(1)nth-last-child(1) */ .cv_acc_outer_acc_item_text:only-child, .cv_acc_inner_acc_item_text:only-child, .cv_acc_outer_acc_item_list:only-child, .cv_acc_inner_acc_item_list:only-child { margin-top: 0px !important; margin-bottom: 14px !important; /* Wie s.o.30px */ /* background-color: mediumorchid; */ } /* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */ /* $$$$$$$$$$$$$$$ NEU * NEU * NEU -- CSS FÜR CV-TABS + COLUMNS DARIN MIT OTTER - NEU * NEU * NEU $$$$$$$$$$$$$$$$ */ /* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */ /* ------------------- CV-Header ------------------- */ /* Header: Schließt Gap zw. Zweidrittel und Testi-Column * .cv_header { gap: 0px; } */ /* Schließt Gap zweischen Photo-Column & Kontaktdaten-Column */ .cv_header_zweidrittel_aussen_columns { column-gap: 0; } /* Kontaktdaten-Column: Block-Gruppe Kontaktdaten nach links */ .wp-block-columns .wp-block-column > .cv_header_column_contact_stapel { align-items: flex-start; } /* ********************* CV-Header: B R E A K P O I N T S for OTTER ********************** */ /* 1023px and smaller screen sizes */ @media (max-width:1023px){ .cv_header { flex-flow: column wrap !important; gap: 24px; } } /* 959px and smaller screen sizes */ @media (max-width: 959px){ /* Gap zw. Column Photo & Kontaktdaten */ .cv_header_zweidrittel_aussen_columns { gap: 64px 24px !important; } /* Columns CV-Photo & Kontaktdaten */ .cv_header_column_photo, .cv_header_column_contact { display: flex; justify-content: center; } /* CV-Header Kontaktdaten-Stapel in Kontaktdaten-Column */ .cv_header_column_contact_stapel { align-items: center !important; } } /* 599px and smaller screen sizes */ @media (max-width:599px){ .cv_header_zweidrittel_aussen_columns { flex-flow: column wrap !important; align-items:center !important; row-gap: 24px !important; } /* Header Spalte Kontaktdaten */ .cv_header_column_contact_stapel { width: auto !important; } } /* ---------------- CV-Skillz: OTTER-Progressbar (anstelle Plugin "Star Rating Block") ----------------- */ /* --- Otter Progress-Bar: TITEL für angez. Wert --- */ /* -- Progress-Bar: TITEL ÜBER Wert-Balken */ .cv_progressbar .wp-block-themeisle-blocks-progress-bar__outer span, /* Titel DEFAULT: Titel links IM Wert-Balken */ .cv_progressbar .wp-block-themeisle-blocks-progress-bar__area span { font-weight: 600; font-size: 16px; } .cv_progressbar .wp-block-themeisle-blocks-progress-bar__area__title span { padding: 0 14px; } /* --- Otter Progress-Bar: WERTE-Balken & Prozent-Wert --- */ /* Border um den Wert-Balken */ .cv_progressbar .wp-block-themeisle-blocks-progress-bar__area .wp-block-themeisle-blocks-progress-bar__area__bar { border: solid 2px #8b6c28; border-radius: 4px; } /* Percentage OUTER: Wert rechts ÜBER Wert-Balken*/ .wp-block-themeisle-blocks-progress-bar__outer .wp-block-themeisle-blocks-progress-bar__outer__value, /* Percentage APPEND: Wert IM Ende rechts Wert-Balken (mit Titel "Outer" only) */ .cv_progressbar .wp-block-themeisle-blocks-progress-bar__area .wp-block-themeisle-blocks-progress-bar__progress__append, /* Percentage DEFAULT: Wert Ende rechts Gesamtbalken */ .cv_progressbar .wp-block-themeisle-blocks-progress-bar__area .wp-block-themeisle-blocks-progress-bar__progress { font-weight: 600; font-size: 16px !important; /* ggf. 1.1em, no padding-bottom */ padding-bottom: 4px; } /* ****************** CV-Sidebar Skillz: B R E A K P O I N T S for OTTER ***************** */ /* 959px and smaller screen sizes */ @media (max-width:959px){ .skillzbar-left_skillz-gruppe { column-count: 3; column-gap: 24px; margin-bottom: 24px; padding: 14px; border: solid 1px; border-radius: 4px; } .skillz_abstand { display: none; } /* Verhindert Progressbar-Umbruch */ .cv_progressbar { break-inside: avoid-column; } .cv_acc_inner_acc-package_column_01_placeholder { display:none; } } /* 767px and smaller screen sizes */ @media (max-width:767px){ .cv_acc_outer_acc-package_column_01_placeholder { display: none; } } /* 576px and smaller screen sizes */ @media (max-width:576px){ .skillzbar-left_skillz-gruppe { column-count: 2; } } /* --------------------------------- OTTER Block Themeisle-Block: Tabs --------------------------------- */ .wp-block-themeisle-blocks-tabs { --border-width: 1px; --active-title-color: white; --active-title-background: url("https://www.astrid-rau.de/wp-content/uploads/navi_cv_main.jpg") !important; } .wp-block-themeisle-blocks-tabs .wp-block-themeisle-blocks-tabs__header_item { margin: 0 7px 7px 0 !important; border: solid 1px #262626 !important; width: 130px; display: flex; justify-content: center; align-items: center; cursor: pointer; } /* Abgerundete Ecken der Tab-Reiter */ .otter-tab-body > div > div, .otter-tab-body > div > .active, .otter-tab-body .wp-block-themeisle-blocks-tabs-item .wp-block-themeisle-blocks-tabs-item__header, /* und vom Active Tab-"Blatt" */ .otter-tab-body .wp-block-themeisle-blocks-tabs-item .active { border-radius: 4px; } /* Active:Tab: mit Tab-Body: Der Inhaltsbereich, der jeweils zu einem Tab gehört, und worin der eigentliche CV-Text (die Acc etc.) stehen, vgl. 1922 * .wp-block-themeisle-blocks-tabs-item .active { padding: 10px 10px 10px 10px !important; } */ /* Ausrichtung OUTER Acc-Aufklapp-Pfeil an Oberkante Buchstaben OUTER-Acc-Titel * .wp-block-themeisle-blocks-accordion:not(.has-icon) > .wp-block-themeisle-blocks-accordion-item:not([open]) > .wp-block-themeisle-blocks-accordion-item__title::after,.wp-block-themeisle-blocks-accordion:not(.has-open-icon) > .wp-block-themeisle-blocks-accordion-item[open] > .wp-block-themeisle-blocks-accordion-item__title::after { position: relative !important; top: -14px; } */ /* Ausrichtung INNER Acc-Aufklapp-Pfeil an Oberkante Buchstaben INNER-Acc-Titel */ .cv_acc_inner_acc-package_column_02_acc-columnset_column_acc >.wp-block-themeisle-blocks-accordion:not(.has-icon) > .wp-block-themeisle-blocks-accordion-item:not([open]) > .wp-block-themeisle-blocks-accordion-item__title::after, .cv_acc_inner_acc-package_column_02_acc-columnset_column_acc >.wp-block-themeisle-blocks-accordion:not(.has-open-icon) > .wp-block-themeisle-blocks-accordion-item[open] > .wp-block-themeisle-blocks-accordion-item__title::after { position: relative !important; top: -3px; } /* --- Neue Einstellungen für Link-Icons-Zeile in den Link-Spalten --- */ /* Damit Link-Icon-Zeile nicht Größe verändert (wegen Flex) */ .cv_acc_outer_column_02_acc-package_acc-columnset_column_link, .cv_acc_inner_acc-package_column_02_acc-columnset_column_link { flex: 0 0 auto !important; } /* --- Link-Icons-Zeile --- */ .cv_acc_outer_column_02_acc-package_acc-columnset_column_link > .link-icons_zeile { margin-top: 9px; } .cv_acc_inner_acc-package_column_02_acc-columnset_column_link .link-icons_zeile { margin-top: 14px; } /* ******* CV-Accordions & Sections (== Columns): B R E A K P O I N T S for OTTER ******** */ /* 599px and smaller screen sizes */ @media (max-width:599px){ .cv_acc_inner_acc-package_column_02_acc-columnset { margin-right: -46px; } } /* TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST */ .cv_acc_outer_acc, .cv_acc_inner_acc { margin-top: 0px !important; margin-bottom: 0px !important; }