/* CHILD Style für die Basis-Blöcke von Wordpress (Gutenberg) Die CSS-Styles werden im Frontend und im Backend-Block-Editor verwendet */ /* ----------------------------------------------------- Ab hier Styles fuer das Child Theme ----------------------------------------------------- */ /* ------------------------------------------------------------------------------------------------------ BLOCK BASIC - 0. Farbdefinitionen ---------------------------------- */ .has-accent-color-medium-background-color { background-color: var(--color-accent-medium) !important; } .has-accent-color-medium-color { color: var(--color-accent-medium) !important; } /* Featured mit Hintergrund > Bildstyles & Alignierung */ .is-style-featured-column.has-accent-color-medium-background-color:not(.outside) .wp-block-column { background-color: var(--color-accent-medium) !important; } /* Featured mit Hintergrund und Bild teilweise aussen */ .is-style-featured-column.has-accent-color-medium-background-color.outside .wp-block-column:before { background-color: var(--color-accent-medium) !important; } /* Media Text */ @media (min-width:600px) { .is-style-over-big.has-accent-color-medium-background-color .wp-block-media-text__content { background-color: var(--color-accent-medium); } } /* --- Transparente Flaeche hinter Group-Block in Cover-Block --- */ .cover-with-group.has-accent-color-medium-background-color .wp-block-group:before { background-color: var(--color-accent-medium); } /* --- Transparente Flaeche, z.B. fuer Media und Text --- */ .transparent-bg.has-accent-color-medium-background-color:before { background-color: var(--color-accent-medium); } .has-accent-light-dark-gradient-background { background: rgb(229,241,247) linear-gradient(45deg, rgb(229,241,247) 20%, rgb(0,113,180) 100%) repeat scroll 0% 0%; } .has-accent-to-second-gradient-background { background: rgb(0,113,180) linear-gradient(45deg, rgb(0,113,180) 0%, rgb(153,153,153) 90%) repeat scroll 0% 0%; } .has-accent-to-black-gradient-background { background: rgb(0,113,180) linear-gradient(45deg, rgb(0,113,180) 0%, rgb(0,0,0) 100%) repeat scroll 0% 0%; } .has-accent-light-to-white-gradient-background { background: rgb(229,241,247) linear-gradient(180deg, rgb(229,241,247) 0%, rgb(255,255,255) 100%) repeat scroll 0% 0%; } .has-color-light-to-white-gradient-background { background: rgb(243,243,243) linear-gradient(180deg, rgb(243,243,243) 0%, rgb(255,255,255) 100%) repeat scroll 0% 0%; } .has-color-header-home-gradient-background { background: rgba(255,255,255,0) linear-gradient(10deg, rgba(229,241,247,0.95) 14%, rgba(229,241,247,0) 37%, rgba(0,113,180,0) 65%, rgba(0,113,180,0.95) 90%) repeat scroll 0% 0%; } /* ------------------------------------------------------------------------------------------------------ BLOCK WIDGETS - Latest Posts ---------------------------------- */ ul.wp-block-latest-posts li a:after { content: ''; position: absolute; top: -8px; left: -10px; width: calc(100% + 20px); height: calc(100% + 20px); z-index: 2; } .wp-block-latest-posts__post-excerpt { margin-top: .25em; margin-bottom: 1em; } .wp-block-group.has-background .wp-block-latest-posts { margin-bottom: -0.8em !important; } .wp-block-group.has-background .wp-block-latest-posts.is-grid { margin-bottom: -1.3em !important; } .wp-block-group.has-background .wp-block-latest-posts.is-grid li { margin-bottom: 0.5em; } .wp-block-latest-posts.is-grid li a:after { height: calc(100% + 20px - 1.0em); } /* --- Style: Standard --- */ ul.wp-block-latest-posts.is-style-default .wp-block-latest-posts__featured-image { margin-bottom: 0em; width: 100%; } ul.wp-block-latest-posts.is-style-default li { margin-bottom: 1.75em; } ul.wp-block-latest-posts.is-style-default li:last-child { margin-bottom: 0em; } ul.wp-block-latest-posts.is-style-default li a:after { background-color: var(--color-accent); opacity: 0; } ul.wp-block-latest-posts.is-style-default li:hover a:after { background-color: var(--color-second); opacity: 0; } ul.wp-block-latest-posts:not(.is-style-with-bg) li a:after { background-color: var(--color-accent); opacity: 0; } @media (min-width:599px) and (max-width:781px) { .wp-block-column .wp-block-latest-posts.is-grid.columns-2 { display: block; } .wp-block-column .wp-block-latest-posts.is-grid.columns-2 li { width: 100%; } } @media (min-width:782px) { .entry-content ul.wp-block-latest-posts:not(.is-style-with-bg) li:hover a:after { background-color: var(--color-accent); opacity: 0.1; } } /* ---------------------------------- BLOCK - Columns ---------------------------------- */ .wp-block-columns .wp-block-columns { width: 100%; max-width: 1100px; } /* ---------------------------------- BLOCK FORMATIERUNG - 4. Tabelle ---------------------------------- */ /* --- Style: Allgemein --- */ .wp-block-table:not(.is-style-stripes) tbody tr { background-color: var(--color-light) !important; } .wp-block-table:not(.is-style-stripes) tbody tr { border-bottom: 2px solid var(--color-general-bg) !important; } .has-background .wp-block-table:not(.is-style-stripes) tbody tr { background-color: var(--color-general-bg) !important; } .has-background .wp-block-table:not(.is-style-stripes) tbody tr { border-bottom: 2px solid var(--color-light) !important; } .has-background .has-color-white-background-color .wp-block-table:not(.is-style-stripes) tbody tr { background-color: var(--color-light) !important; } .has-background .has-color-white-background-color .wp-block-table:not(.is-style-stripes) tbody tr { border-bottom: 2px solid var(--color-general-bg) !important; } /* --- Style: mit Streifen --- */ .wp-block-table.is-style-stripes tbody { background-color: var(--color-general-bg) !important; } .wp-block-table.is-style-stripes tbody tr:nth-child(2n+1) { background-color: var(--color-light) !important; } .has-background .wp-block-table.is-style-stripes tbody { background-color: var(--color-light) !important; } .has-background .wp-block-table.is-style-stripes tbody tr:nth-child(2n+1) { background-color: var(--color-general-bg) !important; } /* ---------------------------------- BLOCK - fuer Absatz und Ueberschriften ---------------------------------- */ @media (max-width:599px) { .is-style-on-mobile-left { text-align: left !important; } } /* ---------------------------------- BLOCK - Separator ---------------------------------- */ .wp-block-separator:not(.is-style-dots) { border-bottom: 3px solid !important; } /* ------------------------------------------------------------------------------------------------------ BLOCK LAYOUT - 1. Gruppe ---------------------------------- */ .cover-with-group { position: relative; } .cover-with-group .wp-block-group { position: static; background-color: rgba(0,113,180,0.8) !important; } .cover-with-group .wp-block-group:before { top: 0; opacity: 0; } @media (min-width:782px) { .cover-with-group:hover .wp-block-group { } .cover-with-group .wp-block-group .wp-block-buttons a:before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--color-accent); opacity: 0; z-index: -1; } .cover-with-group:hover .wp-block-group .wp-block-buttons a:before { opacity: 0.5; } } /* ------------------------------------------------------------------------------------------------------ BLOCK Kombinationen ---------------------------------- */ /* --- Transparente Flaeche hinter Group-Block in Cover-Block --- */ .wp-block-columns .wp-block-cover.cover-with-group { padding: var(--spacer-small) 0 !important; } .wp-block-columns .cover-with-group .wp-block-group::before { background-color: var(--color-accent); } /* ------------------------------------------------------------------------------------------------------ Korrektur fuer von Plugin "pit Plugin - Tierarztpraxis im blauen Haus" ---------------------------------- */ .is-root-container .wp-block-column > [data-type="pit/icon-grosstiere"] + *:not(p):not(ul):not(ol), .is-root-container .wp-block-column > [data-type="pit/icon-kleintiere"] + *:not(p):not(ul):not(ol), .is-root-container .wp-block-column > [data-type="pit/icon-praxis"] + *:not(p):not(ul):not(ol), .is-root-container .wp-block-column > [data-type="pit/icon-logo"] + *:not(p):not(ul):not(ol), .is-root-container .wp-block-cover__inner-container > [data-type="pit/icon-grosstiere"] + *:not(p):not(ul):not(ol), .is-root-container .wp-block-cover__inner-container > [data-type="pit/icon-kleintiere"] + *:not(p):not(ul):not(ol), .is-root-container .wp-block-cover__inner-container > [data-type="pit/icon-praxis"] + *:not(p):not(ul):not(ol), .is-root-container .wp-block-cover__inner-container > [data-type="pit/icon-logo"] + *:not(p):not(ul):not(ol), .is-root-container .wp-block-group__inner-container > [data-type="pit/icon-grosstiere"] + *:not(p):not(ul):not(ol), .is-root-container .wp-block-group__inner-container > [data-type="pit/icon-kleintiere"] + *:not(p):not(ul):not(ol), .is-root-container .wp-block-group__inner-container > [data-type="pit/icon-praxis"] + *:not(p):not(ul):not(ol), .is-root-container .wp-block-group__inner-container > [data-type="pit/icon-logo"] + *:not(p):not(ul):not(ol) { margin-top: 0 !important; }