/**
Theme Name: Astra TUB
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-tub
Template: astra
*/
/**
* 2023-08-11: In thematische Blöcke sortiert; grob von "oben nach unten"
* - Allgemeine Standardelemente
* - Body (Theme)
* - Header-Bereich
* - Breadcrumbs
* - Content (Blog/Seiten)
* - Startseite (Spezialbehandlungen)
* - Widgets
* - Plugin: Accordions
* - Plugin: H5P
* - tub.find Search bar
*
* - Media Queries
* (nur für Suche derzeit)
* - Druckansicht
*/
/* ############################################################################
* Allgemeine Standardelemente
############################################################################ */
p { line-height:1.2em; }
h1, h2, h3, h4, h5, h6 {scroll-margin-top: 150px;}
/* ############################################################################
* Body (Theme)
############################################################################ */
/* Seitenränder für Content - nicht Header */
.site-main
{ margin: 0 auto; max-width: 900px; }
/* ############################################################################
* Header-Bereich
############################################################################ */
/* Logo; wird sonst nur 27px hoch?!*/
.astra-logo-svg:not(.sticky-custom-logo .astra-logo-svg, .transparent-custom-logo .astra-logo-svg, .advanced-header-logo .astra-logo-svg)
{ height: auto; }
/* Menu */
.ast-below-sticky-header-active .ast-below-header-wrap .ast-below-header
{ background: #fff; backdrop-filter: unset; }
.ast-builder-layout-element[data-section="title_tagline"]
{ border-right: solid 1px #00c1d4; }
/* Menu nach links FF; TZ 2023-03-17 - Welches Menü - evtl. obsolet? */
.ast-builder-grid-row.ast-grid-center-col-layout-only
{ display: block ruby; /* geht nicht in Chrome */ }
/* Menu nach links Chrome */
.ast-grid-section-center
{ justify-content: start; }
/* header hor. line
TZ 2023-03-17 - Geht EIGENTLICH via http://ttt.tub.tuhh.de/de2/wp-admin/customize.php?url=http%3A%2F%2Fttt.tub.tuhh.de%2Fde2%2F aber greift nicht
*/
.ast-primary-header-bar
{ border-bottom: 1px solid #00c1d4; }
/* Sprachlinks */
.header-widget-area[data-section="sidebar-widgets-header-widget-1"].header-widget-area-inner a
{ color: #006a81; font-weight: bold; }
/* ############################################################################
* Breadcrumbs
############################################################################ */
/* unter breadcrumb keine linie Desktop & Mobil */
.ast-header-breadcrumb, .ast-header-break-point .main-header-bar.ast-header-breadcrumb
{ background-color: #fff; border: none; }
/* ############################################################################
* Content (Blog/Seiten; Blocks/Blöcke)
* Auch: Zusätzliche CSS-Klassen
############################################################################ */
/* Abstände bei Überschriften*/
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6
{ margin-bottom: 1rem; margin-top: 3rem; }
.wp-block-buttons
{ margin-bottom: 1rem; }
/* war 4em */
.wp-block-group
{ padding-top: 1em; padding-bottom: 1em; }
.wp-block-media-text
{ padding-bottom: 2rem; }
/* RSS-Block
* - Als Klasse bei der Startseite beim RSS-Block
* - Einrückung ul verhindern */
.frame
{ border:thin solid; padding:2em 2em 2em 2em; border-color:#00c1d4; border-width:1px; }
ul.wp-block-rss
{ margin: 0; padding: 8px !important; }
/* Vimeo Player */
wp-has-aspect-ratio, wp-embed-aspect-16-9
{ padding-top:1em; padding-bottom:1em; }
/* Table of Contents Block (https://wordpress.com/support/wordpress-editor/blocks/table-of-contents-block/)
* ohne Nummerierung und Einrückung erst ab 2+ Level */
.wp-block-table-of-contents ol {list-style: none; margin: 0.3em 0 0.3em 0}
.wp-block-table-of-contents ol ol {margin: 0 0 0.3em 1.2em}
/* Fix Vimeo-Videos mit zu viel Iframe-Height
https://generatepress.com/forums/topic/some-grids-with-vimeo-embeds-too-tall/#post-1970504
*/
.wp-block-embed-vimeo .wp-block-embed__wrapper
{ position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; }
.wp-block-embed-vimeo iframe
{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/* ############################################################################
* Footer
############################################################################ */
/* Social Icons wie bei TUHH ; wpel-icon wird bei externen Link (=Mastodon) angezeigt, daher off */
.footer-social-item
{ position: relative;
--background-color: transparent; box-shadow: none;
font-size: 18px; letter-spacing: 2px; font-weight: 500; text-emphasis: center; text-decoration: none;
outline: 0 none; background: 0 0; color: #ffffff;
padding: 11px 21px; width: 48px; height: 48px; line-height: 48px; line-height: 48px;
-webkit-text-emphasis: center;
border: 1px solid #ffffff; border-radius: 50%;
}
.footer-social-item span
{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); fill: #ffffff; }
.footer-social-item .wpel-icon
{display: none}
/* ############################################################################
* Startseite (Spezialbehandlungen)
############################################################################ */
/* h1 auf startseite unterdrücken DE/EN sind verschieden!
TZ 2023-03-17 - Kann man ggf. auch unter http://ttt.tub.tuhh.de/de2/wp-admin/customize.php?url=http%3A%2F%2Fttt.tub.tuhh.de%2Fde2%2F ausstellen
*/
.page-id-7 .entry-title
{ display: none; padding: 0px; }
.page-id-7086 .entry-title
{ display: none; padding: 0px; }
/* ############################################################################
* Widgets
############################################################################ */
/* msls widget; TZ 2023-03-17 - wo bloß? */
#block-17
{ font-weight: 600; text-decoration: none; }
a:not(.wp-element-button)
{ text-decoration: none; }
/* Buttons sind in /wp-content/plugins/custom-gutenberg-styles/block-styles.css #006a81 */
/* ############################################################################
* Plugin: Accordions
############################################################################ */
.c-accordion__title::before
{ position: relative; top: 50%; right: 0; content: "\25B6"; color: #777; margin-right: 1em;
-webkit-transform: translateY(-50%); transform: translateY(-50%); }
/* Downward disclosure triangle when open */
.is-open .c-accordion__title::before
{ content: "\25BC"; }
.c-accordion__title::after
{ display:none; }
/* Indent the content beneath title */
.c-accordion__content
{ margin-left: 2em; }
/* ############################################################################
* Plugin: H5P Accordions
############################################################################ */
/* Siehe wp-content/plugins/tub-h5p-mods/styles/h5p-tub-custom.css */
/* ############################################################################
* Plugin: wp-rss-retriever
############################################################################ */
.wp_rss_retriever_list
{ display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-gap: 15px; }
.wp_rss_retriever_item .portrait
{border: thin solid #cecece; }
.wp-rss-retriever-tub-wrapper
{display:grid; grid-template-columns: 100%;}
.wp-rss-retriever-tub-wrapper p
{margin-bottom: 0; max-width: 250px;}
/* wp-rss-retriever scheint "content: ''; display: table;" zu setzen, um ein spaltenweise Ansicht zu erschweren?
Wozu auch immer gut, einfach auf display: none setzen */
.wp_rss_retriever ul:before, .wp_rss_retriever ul:after, .wp_rss_retriever_metadata:before, .wp_rss_retriever_metadata:after, .wp_rss_retriever_container:before, .wp_rss_retriever_container:after, .wp_rss_retriever_item_wrapper:before, .wp_rss_retriever_item_wrapper:after {
display: none;
}
/* ############################################################################
* tub.find Search bar
############################################################################ */
/* Color ~ http://paletton.com/#uid=13l0u0knKL8d3UriUPHsHGlBwvQ */
#searchForm_searchbar
{ display: flex; flex-direction: row; padding: 0; border: 1px solid #00c1d4; border-radius: 3px;}
/* *************************
* Area 1: Options
************************* */
#search_col1
{ order: 1; padding: 0px 14px; color: #fff; background-color: #006a81; }
#search_col1 #searchForm_type
{ font-size: 1rem; /*width: 100%*/;
background-color: #006A81; color: #ffffff; border: none; font-weight: 600; /* text-transform: uppercase; */}
#search_col1 #searchForm_type option
{ color: #000; background: #C0C0C0; }
/* Triangle right; https://css-tricks.com/the-shapes-of-css/#aa-talk-bubble-shape */
#search_col1
{ position: relative; }
#search_col1:before
{ content: "";
position: absolute; left: 100%; top: 14px; width: 0; height: 0;
border-top: 10px solid transparent; border-left: 26px solid #006a81; border-bottom: 10px solid transparent;}
/* *************************
* Area2: Search field
************************* */
#search_col2 { order: 2; flex-grow: 1; }
#search_col2 input
{ font-size: 1rem; width: 100%; padding: 13px 30px; border: none; box-sizing: border-box;}
#search_col2 input:focus-visible {outline: none;}
/* *************************
* Area3: Submit
************************* */
#search_col3 { order: 3; }
/* Theoretisch kann der Button noch mehr gestylt werden, aber vielleicht fast alles dann doch "too much" ; Inspiration; https://loading.io/button/generator/ */
#searchForm_submit
{ font-size: 1.4rem; padding: 0px 20px; text-align: center; width: 100%; height: 100%; background-color: #006a81; color: #fff; border: none; font-weight: 900;}
#searchForm_submit:hover
{ cursor: pointer; background-color: #17AABF; }
/* Magnifying glass - CSS Version https://css-tricks.com/the-shapes-of-css/#aa-magnifying-glass-shape */
#magnifying-glass
{ font-size: 1.4em;
position: relative; display: inline-block; box-sizing: content-box;
width: 0.4em; height: 0.4em;
border: 0.1em solid #fff; border-radius: 0.35em; }
#magnifying-glass:before
{ content: "";
display: inline-block; position: absolute; right: -0.25em; bottom: -0.1em;
border-width: 0; width: 0.35em; height: 0.08em; transform: rotate(45deg);
background: #fff;}
#submit_text
{display: none}
/* *************************
* Media Queries
************************* */
@media screen and (max-width: 1200px) {
#searchForm_submit { font-size: 1rem; padding: 15px 20px; }
}
@media screen and (max-width: 1023px) {
#search_col1
{ font-size: 0.9rem; padding: 2px 2px;}
#search_col1 #searchForm_type
{ font-size: 0.6rem; }
#search_col1:before
{ content: "";
position: absolute; left: 100%; top: 9px; width: 0; height: 0;
border-top: 7px solid transparent; border-left: 13px solid #006a81; border-bottom: 9px solid transparent;}
#search_col2 input
{ font-size: 0.8rem; width: 100%; padding: 8px 18px; border: none; box-sizing: border-box;}
#searchForm_submit
{ font-size: 0.9rem; padding: 2px 8px; }
::-webkit-input-placeholder { color: transparent; }
::-moz-placeholder { color: transparent; }
input::placeholder { color: transparent; }
h1, h2, h3, h4, h5, h6 {scroll-margin-top: 20px;}
}
/* Safari Specials */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {
#searchForm_type {
/* Variante (2023): https://community.gravityforms.com/t/dropdown-field-box-small-on-safari-normal-size-on-chrome-resolved/14605/3 */
-webkit-appearance: none;
/* Arrow fix: https://stackoverflow.com/a/50717269 */
/* Add paddings to accommodate arrow */
padding-right: 9px;
/* Add arrow icon */
background-image: url('data:image/svg+xml;charset=utf8,');
background-position: center right;
background-repeat: no-repeat;
}
}
}
/* https://stackoverflow.com/a/25975282:"This one still works properly with Safari 18.0.1 (Fall-2024):" */
_::-webkit-full-page-media, _:future, :root #searchForm_type {
/* Variante (2023): https://community.gravityforms.com/t/dropdown-field-box-small-on-safari-normal-size-on-chrome-resolved/14605/3 */
-webkit-appearance: none;
/* Arrow fix: https://stackoverflow.com/a/50717269 */
/* Add paddings to accommodate arrow */
padding-right: 9px;
/* Add arrow icon */
background-image: url('data:image/svg+xml;charset=utf8,');
background-position: center right;
background-repeat: no-repeat;
}
/* ############################################################################
* Druckansicht
############################################################################ */
@media print {
.noprint {display: none; }
.site-header, footer, .ast-header-breadcrumb {display: none;}
.c-accordion__content {content-visibility: visible; display: block !important; }
.embed-vimeo {display: none; }
h1 {font-size: 22px !important; }
h2 {font-size: 18px !important; }
h3 {font-size: 14px !important; }
}