@charset "UTF-8"; /*$main-col1: #97bc14 !default; $main-col2: rgba(33, 83, 144,1 ) !default; $main-col1-light: #d2dea8 !default; $main-col2-light: rgba(33, 83, 144,0.5 ) !default;*/ :root { --body-bg: var(--color-main-1-lighter); --header-bg: #fff; --footer-bg: #fff; --color-warning: #ff0000; --color-main-1: #286090; --color-main-2: #404040; --color-main-1-light: #dfe4ea; --color-main-2-light: #EAEAEA; --color-main-1-lighter: white; --color-main-2-lighter: white; --border-radius: 0px; --search-input-border: none; --search-input-background: #fff; --form-element-border: 1px solid var(--color-main-2-light); --inline-edit-background: #f8f9fa; --media-element-border: 1px solid var(--color-main-2-light); --medialist-element-border: 1px solid var(--color-main-1); --eduids-element-border: 1px solid var(--color-main-1); --news-element-border: none; } /** * # Beispiele: * // Use * @use "partials/btn-lib" with ( * $button-colors: ( * 'primary': ( * 'default': ( * color: #f00, * ) * ) * ) * ); * * ## SCSS Button-Sizes * .beliebiges_klick_element { * @extend %btn_size_large; * } * .beliebiges_element { * @extend %btn_size_hero; * } * * * ## HTML Button-Farben * Klickdas, Unbekannter! * Wichtig-Klick! * *
* Wird large * Wird auch large *
* * ## SCSS Button-Farben * // Kompletter Button: * .klickdrauf { * color: var(--color); * border: 1px solid var(--border-color); * background-color: 1px solid var(--border-color); * * @extend %btn_primary_default; // default button im Primär-Farbschema * } * * // Einzelner Zustand: * .klickdrauf { * // [...] * .mediathek-verbummelt-message ~ * & { * @extend %btn_primary_default_disabled; * } * } * * // Einzelne Eigenschaft aus Zustand: * .klickdrauf { * // [...] * .mediathek-verbummelt-message ~ * & { * @extend %btn_primary_default__color; // Default farbe... * @extend %btn_primary_default_hover__border; // den Border vom :hover * @extend %btn_primary_default_disabled__background; // und den disabled background * } * } * * * ## HTML Button-Farben * Klickdas, Unbekannter! */ .news_entry_full .record_back > i[class*=fa-], .newsfeed .record_back > i[class*=fa-] { margin-right: 0.33em; } :root { --btn-primary-default-color: #fff; --btn-primary-default-background-color: var(--color-main-1); --btn-primary-default-border-color: var(--color-main-1); --btn-primary-outline-color: var(--color-main-1); --btn-primary-outline-background-color: transparent; --btn-primary-outline-border-color: var(--color-main-1); --btn-primary-plain-color: var(--color-main-1); --btn-primary-plain-background-color: transparent; --btn-primary-plain-border-color: transparent; --btn-secondary-default-color: #fff; --btn-secondary-default-background-color: #495057; --btn-secondary-default-border-color: #495057; --btn-secondary-outline-color: #495057; --btn-secondary-outline-background-color: transparent; --btn-secondary-outline-border-color: #495057; --btn-secondary-plain-color: #495057; --btn-secondary-plain-background-color: transparent; --btn-secondary-plain-border-color: transparent; } .btn:not([disabled]):hover, .swiper-button-prev:not([disabled]):hover, .swiper-button-next:not([disabled]):hover, .resultfilter button:not([disabled]):hover, .lh_tabsnav li:not([disabled]):hover, .tasknav .ow_expd:not([disabled]):hover, .btn_primary_default:not([disabled]):hover { --color: var(--color-main-1-light); } .lh_tabsnav li:not([disabled]):hover, .btn:not([disabled]):hover, .swiper-button-prev:not([disabled]):hover, .swiper-button-next:not([disabled]):hover, .resultfilter button:not([disabled]):hover, .tasknav .ow_expd:not([disabled]):hover, .btn_primary_default:not([disabled]):hover { --border-color: var(--color-main-1); --border-width: 0; --border-style: none; } .lh_tabsnav li:not([disabled]):hover, .btn:not([disabled]):hover, .swiper-button-prev:not([disabled]):hover, .swiper-button-next:not([disabled]):hover, .resultfilter button:not([disabled]):hover, .tasknav .ow_expd:not([disabled]):hover, .btn_primary_default:not([disabled]):hover { --background-color: var(--color-main-1); } .btn:focus, .btn-group .btn:focus:not(.btn_inactive), .swiper-button-prev:focus, .swiper-button-next:focus, .resultfilter button:focus, .lh_tabsnav .btn:focus:not(.btn_inactive), .lh_tabsnav li:focus, .lh_tabsnav li:focus:not(.btn_inactive), .tasknav .ow_expd:focus, .btn_primary_default:focus, .btn:focus-visible, .btn-group .btn:focus-visible:not(.btn_inactive), .swiper-button-prev:focus-visible, .swiper-button-next:focus-visible, .resultfilter button:focus-visible, .lh_tabsnav .btn:focus-visible:not(.btn_inactive), .lh_tabsnav li:focus-visible, .lh_tabsnav li:focus-visible:not(.btn_inactive), .tasknav .ow_expd:focus-visible, .btn_primary_default:focus-visible, .focus.btn, .btn-group .focus.btn:not(.btn_inactive), .focus.swiper-button-prev, .focus.swiper-button-next, .resultfilter button.focus, .lh_tabsnav .focus.btn:not(.btn_inactive), .lh_tabsnav li.focus, .lh_tabsnav li.focus:not(.btn_inactive), .tasknav .focus.ow_expd, .focus.btn_primary_default { --focus-outline-color: #ced4da; --focus-outline-width: 0; --focus-outline-style: none; --focus-outline-offset: 0; } [disabled].btn, .btn-group [disabled].btn:not(.btn_inactive), [disabled].swiper-button-prev, [disabled].swiper-button-next, .resultfilter button[disabled], .lh_tabsnav [disabled].btn:not(.btn_inactive), .lh_tabsnav li[disabled], .lh_tabsnav li[disabled]:not(.btn_inactive), .tasknav [disabled].ow_expd, [disabled].btn_primary_default { --color: #000; } [disabled].btn, .btn-group [disabled].btn:not(.btn_inactive), [disabled].swiper-button-prev, [disabled].swiper-button-next, .resultfilter button[disabled], .lh_tabsnav [disabled].btn:not(.btn_inactive), .lh_tabsnav li[disabled], .lh_tabsnav li[disabled]:not(.btn_inactive), .tasknav [disabled].ow_expd, [disabled].btn_primary_default { --border-color: #ced4da; --border-width: 0; --border-style: none; } [disabled].btn, .btn-group [disabled].btn:not(.btn_inactive), [disabled].swiper-button-prev, [disabled].swiper-button-next, .resultfilter button[disabled], .lh_tabsnav [disabled].btn:not(.btn_inactive), .lh_tabsnav li[disabled], .lh_tabsnav li[disabled]:not(.btn_inactive), .tasknav [disabled].ow_expd, [disabled].btn_primary_default { --background-color: #ced4da; } .lh_tabsnav li, .lh_tabsnav li:not([disabled]):hover, .btn, .btn-group .btn:not(.btn_inactive), .swiper-button-prev, .swiper-button-next, .resultfilter button, .lh_tabsnav .btn:not(.btn_inactive), .btn-group .lh_tabsnav li:not(.btn_inactive), .lh_tabsnav .btn-group li:not(.btn_inactive), .lh_tabsnav li:not(.btn_inactive), .tasknav .ow_expd, .btn_primary_default { --color: #fff; } .lh_tabsnav li, .btn, .btn-group .btn:not(.btn_inactive), .swiper-button-prev, .swiper-button-next, .resultfilter button, .lh_tabsnav .btn:not(.btn_inactive), .btn-group .lh_tabsnav li:not(.btn_inactive), .lh_tabsnav .btn-group li:not(.btn_inactive), .lh_tabsnav li:not(.btn_inactive), .tasknav .ow_expd, .btn_primary_default { --border-color: var(--color-main-1); --border-width: 0; --border-style: none; } .lh_tabsnav li, .btn, .btn-group .btn:not(.btn_inactive), .swiper-button-prev, .swiper-button-next, .resultfilter button, .lh_tabsnav .btn:not(.btn_inactive), .btn-group .lh_tabsnav li:not(.btn_inactive), .lh_tabsnav .btn-group li:not(.btn_inactive), .lh_tabsnav li:not(.btn_inactive), .tasknav .ow_expd, .btn_primary_default { --background-color: var(--color-main-1); } .media_element.media_element_tab .media_record_tabs .mr_tabshead.active, .btn_outline:not([disabled]):hover, .btn-group .btn.btn_inactive:not([disabled]):hover, .shelf-default .btn.deletebooks:not([disabled]):hover, .lists_element .edu_viko .btn:not([disabled]):hover, .lh_tabsnav .btn.btn_inactive:not([disabled]):hover, .shelf-default .lh_tabsnav li.deletebooks:not([disabled]):hover, .lh_tabsnav .shelf-default li.deletebooks:not([disabled]):hover, .lists_element .edu_viko .lh_tabsnav li:not([disabled]):hover, .lh_tabsnav .lists_element .edu_viko li:not([disabled]):hover, .lh_tabsnav li.btn_inactive:not([disabled]):hover, .btn_primary_outline:not([disabled]):hover { --color: #000; } .media_element.media_element_tab .media_record_tabs .mr_tabshead, .media_element.media_element_tab .media_record_tabs .mr_tabshead.active, .btn_outline:not([disabled]):hover, .btn-group .btn.btn_inactive:not([disabled]):hover, .shelf-default .btn.deletebooks:not([disabled]):hover, .lists_element .edu_viko .btn:not([disabled]):hover, .lh_tabsnav .btn.btn_inactive:not([disabled]):hover, .shelf-default .lh_tabsnav li.deletebooks:not([disabled]):hover, .lh_tabsnav .shelf-default li.deletebooks:not([disabled]):hover, .lists_element .edu_viko .lh_tabsnav li:not([disabled]):hover, .lh_tabsnav .lists_element .edu_viko li:not([disabled]):hover, .lh_tabsnav li.btn_inactive:not([disabled]):hover, .btn_primary_outline:not([disabled]):hover { --border-color: #000; --border-width: 1px; --border-style: solid; } .media_element.media_element_tab .media_record_tabs .mr_tabshead.active, .btn_outline:not([disabled]):hover, .btn-group .btn.btn_inactive:not([disabled]):hover, .shelf-default .btn.deletebooks:not([disabled]):hover, .lists_element .edu_viko .btn:not([disabled]):hover, .lh_tabsnav .btn.btn_inactive:not([disabled]):hover, .shelf-default .lh_tabsnav li.deletebooks:not([disabled]):hover, .lh_tabsnav .shelf-default li.deletebooks:not([disabled]):hover, .lists_element .edu_viko .lh_tabsnav li:not([disabled]):hover, .lh_tabsnav .lists_element .edu_viko li:not([disabled]):hover, .lh_tabsnav li.btn_inactive:not([disabled]):hover, .btn_primary_outline:not([disabled]):hover { --background-color: transparent; } .btn_outline:focus, .btn-group .btn.btn_inactive:focus, .shelf-default .btn.deletebooks:focus, .lists_element .edu_viko .btn:focus, .lh_tabsnav .btn.btn_inactive:focus, .shelf-default .lh_tabsnav li.deletebooks:focus, .lh_tabsnav .shelf-default li.deletebooks:focus, .lists_element .edu_viko .lh_tabsnav li:focus, .lh_tabsnav .lists_element .edu_viko li:focus, .lh_tabsnav li.btn_inactive:focus, .btn_primary_outline:focus, .btn_outline:focus-visible, .btn-group .btn.btn_inactive:focus-visible, .shelf-default .btn.deletebooks:focus-visible, .lists_element .edu_viko .btn:focus-visible, .lh_tabsnav .btn.btn_inactive:focus-visible, .shelf-default .lh_tabsnav li.deletebooks:focus-visible, .lh_tabsnav .shelf-default li.deletebooks:focus-visible, .lists_element .edu_viko .lh_tabsnav li:focus-visible, .lh_tabsnav .lists_element .edu_viko li:focus-visible, .lh_tabsnav li.btn_inactive:focus-visible, .btn_primary_outline:focus-visible, .focus.btn_outline, .btn-group .focus.btn.btn_inactive, .shelf-default .focus.btn.deletebooks, .lists_element .edu_viko .focus.btn, .lh_tabsnav .focus.btn.btn_inactive, .shelf-default .lh_tabsnav li.focus.deletebooks, .lh_tabsnav .shelf-default li.focus.deletebooks, .lists_element .edu_viko .lh_tabsnav li.focus, .lh_tabsnav .lists_element .edu_viko li.focus, .lh_tabsnav li.focus.btn_inactive, .focus.btn_primary_outline { --focus-outline-color: #ced4da; --focus-outline-width: 0; --focus-outline-style: none; --focus-outline-offset: 0; } [disabled].btn_outline, .btn-group [disabled].btn.btn_inactive, .shelf-default [disabled].btn.deletebooks, .lists_element .edu_viko [disabled].btn, .lh_tabsnav [disabled].btn.btn_inactive, .shelf-default .lh_tabsnav li[disabled].deletebooks, .lh_tabsnav .shelf-default li[disabled].deletebooks, .lists_element .edu_viko .lh_tabsnav li[disabled], .lh_tabsnav .lists_element .edu_viko li[disabled], .lh_tabsnav li[disabled].btn_inactive, [disabled].btn_primary_outline { --color: #adb5bd; } [disabled].btn_outline, .btn-group [disabled].btn.btn_inactive, .shelf-default [disabled].btn.deletebooks, .lists_element .edu_viko [disabled].btn, .lh_tabsnav [disabled].btn.btn_inactive, .shelf-default .lh_tabsnav li[disabled].deletebooks, .lh_tabsnav .shelf-default li[disabled].deletebooks, .lists_element .edu_viko .lh_tabsnav li[disabled], .lh_tabsnav .lists_element .edu_viko li[disabled], .lh_tabsnav li[disabled].btn_inactive, [disabled].btn_primary_outline { --border-color: #ced4da; --border-width: 1px; --border-style: solid; } [disabled].btn_outline, .btn-group [disabled].btn.btn_inactive, .shelf-default [disabled].btn.deletebooks, .lists_element .edu_viko [disabled].btn, .lh_tabsnav [disabled].btn.btn_inactive, .shelf-default .lh_tabsnav li[disabled].deletebooks, .lh_tabsnav .shelf-default li[disabled].deletebooks, .lists_element .edu_viko .lh_tabsnav li[disabled], .lh_tabsnav .lists_element .edu_viko li[disabled], .lh_tabsnav li[disabled].btn_inactive, [disabled].btn_primary_outline { --background-color: transparent; } .media_element.media_element_tab .media_record_tabs .mr_tabshead, .lh_tabsnav li:not(.antares-active), .lh_tabsnav li:not(.antares-active):hover, .btn_outline, .btn-group .btn.btn_inactive, .shelf-default .btn.deletebooks, .lists_element .edu_viko .btn, .lh_tabsnav .btn.btn_inactive, .btn-group .lh_tabsnav li.btn_inactive, .lh_tabsnav .btn-group li.btn_inactive, .shelf-default .lh_tabsnav li.deletebooks, .lh_tabsnav .shelf-default li.deletebooks, .lists_element .edu_viko .lh_tabsnav li, .lh_tabsnav .lists_element .edu_viko li, .lh_tabsnav li.btn_inactive, .btn_primary_outline { --color: var(--color-main-1); } .lh_tabsnav li:not(.antares-active), .lh_tabsnav li:not(.antares-active):hover, .btn_outline, .btn-group .btn.btn_inactive, .shelf-default .btn.deletebooks, .lists_element .edu_viko .btn, .lh_tabsnav .btn.btn_inactive, .btn-group .lh_tabsnav li.btn_inactive, .lh_tabsnav .btn-group li.btn_inactive, .shelf-default .lh_tabsnav li.deletebooks, .lh_tabsnav .shelf-default li.deletebooks, .lists_element .edu_viko .lh_tabsnav li, .lh_tabsnav .lists_element .edu_viko li, .lh_tabsnav li.btn_inactive, .btn_primary_outline { --border-color: var(--color-main-1); --border-width: 1px; --border-style: solid; } .media_element.media_element_tab .media_record_tabs .mr_tabshead, .btn_outline, .btn-group .btn.btn_inactive, .shelf-default .btn.deletebooks, .lists_element .edu_viko .btn, .lh_tabsnav .btn.btn_inactive, .btn-group .lh_tabsnav li.btn_inactive, .lh_tabsnav .btn-group li.btn_inactive, .shelf-default .lh_tabsnav li.deletebooks, .lh_tabsnav .shelf-default li.deletebooks, .lists_element .edu_viko .lh_tabsnav li, .lh_tabsnav .lists_element .edu_viko li, .lh_tabsnav li.btn_inactive, .btn_primary_outline { --background-color: transparent; } .btn_plain:not([disabled]):hover, .searchoption .externtooltip a:not([disabled]):hover, .media_element .res_footer_buttons button:not([disabled]):hover, .media_element .res_footer_buttons a:not([disabled]):hover, .btn_primary_plain:not([disabled]):hover, .playlisthead .list_edit .list_edit_buttons a:not([disabled]):hover, .eduidlisthead .list_edit .list_edit_buttons a:not([disabled]):hover { --color: #000; } .btn_plain:not([disabled]):hover, .searchoption .externtooltip a:not([disabled]):hover, .media_element .res_footer_buttons button:not([disabled]):hover, .media_element .res_footer_buttons a:not([disabled]):hover, .btn_primary_plain:not([disabled]):hover, .playlisthead .list_edit .list_edit_buttons a:not([disabled]):hover, .eduidlisthead .list_edit .list_edit_buttons a:not([disabled]):hover { --border-color: transparent; --border-width: 0; --border-style: none; } .btn_plain:not([disabled]):hover, .searchoption .externtooltip a:not([disabled]):hover, .media_element .res_footer_buttons button:not([disabled]):hover, .media_element .res_footer_buttons a:not([disabled]):hover, .btn_primary_plain:not([disabled]):hover, .playlisthead .list_edit .list_edit_buttons a:not([disabled]):hover, .eduidlisthead .list_edit .list_edit_buttons a:not([disabled]):hover { --background-color: transparent; } .btn_plain:focus, .searchoption .externtooltip a:focus, .media_element .res_footer_buttons button:focus, .media_element .res_footer_buttons a:focus, .btn_primary_plain:focus, .playlisthead .list_edit .list_edit_buttons a:focus, .eduidlisthead .list_edit .list_edit_buttons a:focus, .btn_plain:focus-visible, .searchoption .externtooltip a:focus-visible, .media_element .res_footer_buttons button:focus-visible, .media_element .res_footer_buttons a:focus-visible, .btn_primary_plain:focus-visible, .playlisthead .list_edit .list_edit_buttons a:focus-visible, .eduidlisthead .list_edit .list_edit_buttons a:focus-visible, .focus.btn_plain, .searchoption .externtooltip a.focus, .media_element .res_footer_buttons button.focus, .media_element .res_footer_buttons a.focus, .focus.btn_primary_plain, .playlisthead .list_edit .list_edit_buttons a.focus, .eduidlisthead .list_edit .list_edit_buttons a.focus { --focus-outline-color: #ced4da; --focus-outline-width: 0; --focus-outline-style: none; --focus-outline-offset: 0; } [disabled].btn_plain, .searchoption .externtooltip a[disabled], .media_element .res_footer_buttons button[disabled], .media_element .res_footer_buttons a[disabled], [disabled].btn_primary_plain, .playlisthead .list_edit .list_edit_buttons a[disabled], .eduidlisthead .list_edit .list_edit_buttons a[disabled] { --color: #adb5bd; } [disabled].btn_plain, .searchoption .externtooltip a[disabled], .media_element .res_footer_buttons button[disabled], .media_element .res_footer_buttons a[disabled], [disabled].btn_primary_plain, .playlisthead .list_edit .list_edit_buttons a[disabled], .eduidlisthead .list_edit .list_edit_buttons a[disabled] { --border-color: transparent; --border-width: 0; --border-style: none; } [disabled].btn_plain, .searchoption .externtooltip a[disabled], .media_element .res_footer_buttons button[disabled], .media_element .res_footer_buttons a[disabled], [disabled].btn_primary_plain, .playlisthead .list_edit .list_edit_buttons a[disabled], .eduidlisthead .list_edit .list_edit_buttons a[disabled] { --background-color: transparent; } .btn_plain, .searchoption .externtooltip a, .media_element .res_footer_buttons button, .media_element .res_footer_buttons a, .btn_primary_plain, .playlisthead .list_edit .list_edit_buttons a, .eduidlisthead .list_edit .list_edit_buttons a { --color: var(--color-main-1); } .btn_plain, .searchoption .externtooltip a, .media_element .res_footer_buttons button, .media_element .res_footer_buttons a, .btn_primary_plain, .playlisthead .list_edit .list_edit_buttons a, .eduidlisthead .list_edit .list_edit_buttons a { --border-color: transparent; --border-width: 0; --border-style: none; } .btn_plain, .searchoption .externtooltip a, .media_element .res_footer_buttons button, .media_element .res_footer_buttons a, .btn_primary_plain, .playlisthead .list_edit .list_edit_buttons a, .eduidlisthead .list_edit .list_edit_buttons a { --background-color: transparent; } .btn_secondary_default:not([disabled]):hover { --color: #fff; } .btn_secondary_default:not([disabled]):hover { --border-color: #212529; --border-width: 0; --border-style: none; } .btn_secondary_default:not([disabled]):hover { --background-color: #212529; } .btn_secondary_default:focus, .btn_secondary_default:focus-visible, .focus.btn_secondary_default { --focus-outline-color: #495057; --focus-outline-width: 0; --focus-outline-style: none; --focus-outline-offset: 0; } [disabled].btn_secondary_default { --color: #000; } [disabled].btn_secondary_default { --border-color: #ced4da; --border-width: 0; --border-style: none; } [disabled].btn_secondary_default { --background-color: #ced4da; } .btn_secondary_default { --color: #fff; } .btn_secondary_default { --border-color: #495057; --border-width: 0; --border-style: none; } .btn_secondary_default { --background-color: #495057; } .btn_secondary_outline:not([disabled]):hover { --color: #fff; } .btn_secondary_outline:not([disabled]):hover { --border-color: #495057; --border-width: 1px; --border-style: solid; } .btn_secondary_outline:not([disabled]):hover { --background-color: #495057; } .btn_secondary_outline:focus, .btn_secondary_outline:focus-visible, .focus.btn_secondary_outline { --focus-outline-color: #ced4da; --focus-outline-width: 0; --focus-outline-style: none; --focus-outline-offset: 0; } [disabled].btn_secondary_outline { --color: #adb5bd; } [disabled].btn_secondary_outline { --border-color: #ced4da; --border-width: 1px; --border-style: solid; } [disabled].btn_secondary_outline { --background-color: transparent; } .btn_secondary_outline { --color: #495057; } .btn_secondary_outline { --border-color: #495057; --border-width: 1px; --border-style: solid; } .btn_secondary_outline { --background-color: transparent; } .btn_secondary_plain:not([disabled]):hover { --color: #212529; } .btn_secondary_plain:not([disabled]):hover { --border-color: transparent; --border-width: 0; --border-style: none; } .btn_secondary_plain:not([disabled]):hover { --background-color: transparent; } .btn_secondary_plain:focus, .btn_secondary_plain:focus-visible, .focus.btn_secondary_plain { --focus-outline-color: #ced4da; --focus-outline-width: 0; --focus-outline-style: none; --focus-outline-offset: 0; } [disabled].btn_secondary_plain { --color: #adb5bd; } [disabled].btn_secondary_plain { --border-color: transparent; --border-width: 0; --border-style: none; } [disabled].btn_secondary_plain { --background-color: transparent; } .btn_secondary_plain { --color: #495057; } .btn_secondary_plain { --border-color: transparent; --border-width: 0; --border-style: none; } .btn_secondary_plain { --background-color: transparent; } :root { --btn-padding-default: 0.3rem 0.6rem; --btn-padding-large: 1rem 1.2rem; --btn-padding-hero: 1.5rem 2rem; } .btn_size_large { --btn-padding: var(--btn-padding-large); } .mzchoose_btn, .mzchoose_btn ~ .btn, .lh_tabsnav .mzchoose_btn ~ li, .btn_size_hero { --btn-padding: var(--btn-padding-hero); } :root { --body-bg: #fff; --color-main-1:#dc3545; --color-main-2: #404040; --color-main-1-light: #eaeaea; --color-main-2-light: #EAEAEA; --color-main-1-lighter: white; --color-main-2-lighter: white; --border-radius: 0px; --search-input-border: 1px solid var(--color-main-2-light); --ghost-color: rgba(0,0,0,0.15); --medialist-element-border: 1px solid var(--color-main-1-light); --eduids-element-border: 1px solid var(--color-main-1-light); } /** * @example * // SCSS: * body { * @include all-dom-except( '.foo', '.bar', 'quux' ) { * display: none; * } * } * * // CSS: * body > :not(.foo), * body > .foo > :not(.bar), * body > .foo > .bar > :not(.quux) { * display: none; * } */ /* * body > :not(.foo), * body > .foo > :not(.bar), * body > .foo > .bar > :not(.quux) { } */ /* Helper Classes ============== TOC: ---- (1) .blurred_dark, .blurred_light (2) .clickable (3) .fr_temp, .fr, fl_temp, .fl Float left/right (aka. Flens- & Freiburg) (4) .cf – clearfix (5) .block, .inblock, .none Display (6) .nowrap (7) %clamp, .clamp1-6 Line clamping (8) .fx-center, .fx-center-v, .fx-center-h Centering content (9) .badge, .lbadge Right-floating badge, non-floating badge (10) grid */ /* clickable */ .clickable { cursor: pointer; } /* float */ .fr_temp { float: right; } .fr { float: right; } .fl { float: left; } .fl_temp { float: left; } /* Clearfix */ .cf::after { content: ""; clear: both; display: table; } /* Display classes */ .block { display: block; } .inblock { display: inline-block; } .none { display: none !important; } body.notlogged .notlogged_nope { display: none !important; } /* Hide and show */ .hideifnotexplicitshow { display: none; } .explicitshow { display: block; } @media (max-width: 811px) { .sscr_nope { display: none !important; } } @media (max-width: 599px) { .smscr_nope { display: none !important; } } @media (max-width: 811px) { .sscr_only { display: inherit !important; } } @media (min-width: 811px) { .sscr_only { display: none !important; } } .sscr_showonly { /* @include mq('m_min') { display: none; } */ } @media (min-width: 811px) { .sscr_showonly { display: block !important; } } @media (max-width: 992px) { .mscr_nope { display: none !important; } } @media (max-width: 992px) { .mscr_only { display: inherit !important; } } @media (min-width: 1280px) { .mscr_only { display: none !important; } } @media (min-width: 811px) { .bscr_nope { display: none !important; } } .notvisible { visibility: hidden; } /* wrapping */ .nowrap { white-space: nowrap; } /* Line clamp */ .clamp6, .clamp5, .clamp4, .clamp3, .clamp2, .clamp1 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin-top: 0; } .clamp6 p, .clamp5 p, .clamp4 p, .clamp3 p, .clamp2 p, .clamp1 p { margin-bottom: 0; } .clamp1 { -webkit-line-clamp: 1; } .clamp2 { -webkit-line-clamp: 2; } .clamp3 { -webkit-line-clamp: 3; } .clamp4 { -webkit-line-clamp: 4; } .clamp5 { -webkit-line-clamp: 5; } .clamp6 { -webkit-line-clamp: 6; } /* Centering */ .fx-center-v { display: flex; align-items: center; } .fx-center-h { display: flex; justify-content: center; justify-self: center; } .fx-center { display: flex; justify-content: center; align-items: center; } /* badges */ .badge, .lbadge { display: inline-block; min-width: 10px; padding: 3px 7px; font-size: 12px; font-weight: bold; color: #fff; line-height: 1; vertical-align: middle; white-space: nowrap; text-align: center; background-color: #bfbfbf; } /* Rawum? */ .badge { border-radius: 10px; float: right; } .lbadge { border-radius: 15px; } .grid-fw, .workspace { grid-column: 1/-1; } .scrollbar-measure { width: 100px; height: 100px; overflow: scroll; position: absolute; top: -9999px; } .vidpreviewpos1 { background-position: 0px 0px; } .vidpreviewpos2 { background-position: -211px 0px; } .vidpreviewpos3 { background-position: -422px 0px; } .vidpreviewpos4 { background-position: -633px 0px; } .vidpreviewpos5 { background-position: 0px -118px; } .vidpreviewpos6 { background-position: -211px -118px; } .vidpreviewpos7 { background-position: -422px -118px; } .vidpreviewpos8 { background-position: -633px -118px; } .vidpreviewpos9 { background-position: 0px -236px; } .vidpreviewpos10 { background-position: -211px -236px; } .vidpreviewpos11 { background-position: -422px -236px; } .vidpreviewpos12 { background-position: -633px -236px; } .vidpreviewpos13 { background-position: 0px -354px; } .vidpreviewpos14 { background-position: -211px -354px; } .vidpreviewpos15 { background-position: -422px -354px; } .vidpreviewpos16 { background-position: -633px -354px; } /* inside aria-control button */ [aria-expanded=false] .show-expanded, [aria-expanded=true] .hide-expanded { display: none; } :root { font-size: 62.5%; box-sizing: border-box; line-height: 1.3; } * { box-sizing: border-box; } body { font-size: 1.6rem; font-family: "Source Sans Pro", "Font Awesome 5 PRO", Helvetica, Arial, Geneva, sans-serif; width: 100%; height: calc(100vh - var(--vh-offset, 0px)); display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr min-content; padding-top: 100px; background-color: var(--body-bg); overflow: hidden; } @media (max-width: 992px) { body { padding-top: 50px; } } body.showdetails footer.hideifshowdetails { display: none; } body.eduidlogged .hidetopupil { display: none !important; } @media print { .hideprint { display: none !important; } } @media screen { .hidescreen { display: none !important; } } .stoerer { z-index: 10; position: fixed; background-color: #ff0000; color: #fff; padding: 0.2em; box-shadow: 5px 5px 15px 2px #6c757d; } h1 { font-size: 3rem; } h1, h2, h3, h4, h5, h6 { margin-top: 2.4rem; margin-bottom: 0.2rem; } p { margin-top: 0; margin-bottom: 0.8rem; } a { text-decoration: none; color: #000; } .registerwarning { padding: 5px 0; color: #ff0000; font-size: 0.85em; } input.secret { color: #000; background-color: #000; } button[data-onclick="tabs.search"] { display: none; } img { width: 100%; height: auto; } i.fad { --fa-primary-color: white; --fa-secondary-color: red; --fa-secondary-opacity: 1.0; } .btn, .lh_tabsnav li { display: inline-block; font-weight: 400; border-radius: var(--border-radius); text-align: center; vertical-align: top; -webkit-user-select: none; -moz-user-select: none; user-select: none; border-style: none; padding: var(--btn-padding, var(--btn-padding-default)); font-size: 1.5rem; line-height: 1.3; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; color: var(--color); border-color: var(--border-color); background-color: var(--background-color); border-style: var(--border-style, none); border-width: var(--border-width, 0); outline-width: var(--focus-outline-width, 0) !important; outline-style: var(--focus-outline-style, none) !important; outline-color: var(--focus-outline-color, transparent) !important; outline-offset: var(--focus-outline-offset, 0) !important; } .btn:is(:disabled, :disabled:active), .lh_tabsnav li:is(:disabled, :disabled:active), .btn[disabled], .lh_tabsnav li[disabled] { cursor: default; } .btn:not([disabled]):hover, .lh_tabsnav li:not([disabled]):hover { text-decoration: none; cursor: pointer; } .btn:not([disabled]):focus, .lh_tabsnav li:not([disabled]):focus, .btn:not([disabled]).focus, .lh_tabsnav li:not([disabled]).focus { box-shadow: 0 0 0 0.2rem rgba(70, 114, 180, 0.25); } .btn_outline { border-width: 1px; border-style: solid; } .btn_plain, .searchoption .externtooltip a { background: transparent; } .btn_plain, .searchoption .externtooltip a { border: none; } .btn_plain:not([disabled]):focus, .searchoption .externtooltip a:not([disabled]):focus, .btn_plain:not([disabled]).focus, .searchoption .externtooltip a:not([disabled]).focus { box-shadow: none; } @media (prefers-reduced-motion: reduce) { .btn, .lh_tabsnav li { transition: none; } } .btn-inline-group { display: inline-flex; } .btn-inline-group .btn, .btn-inline-group .lh_tabsnav li, .lh_tabsnav .btn-inline-group li { border-radius: 0; border: 1px solid var(--border-color); flex: 1; } .btn-inline-group .btn:first-child, .btn-inline-group .lh_tabsnav li:first-child, .lh_tabsnav .btn-inline-group li:first-child { border-radius: var(--border-radius) 0 0 var(--border-radius); padding-left: calc(var(--border-radius) * 0.5); } .btn-inline-group .btn:last-child, .btn-inline-group .lh_tabsnav li:last-child, .lh_tabsnav .btn-inline-group li:last-child { border-radius: 0 var(--border-radius) var(--border-radius) 0; padding-right: calc(var(--border-radius) * 0.5); } .btn-inline-group .btn:not(:last-child), .btn-inline-group .lh_tabsnav li:not(:last-child), .lh_tabsnav .btn-inline-group li:not(:last-child) { border-right-style: none; } .btn-group, .lh_tabsnav { position: relative; display: inline-flex; vertical-align: middle; } .btn-group .btn, .btn-group .lh_tabsnav li, .lh_tabsnav .btn-group li, .lh_tabsnav .btn, .lh_tabsnav li { border-radius: 0; border: 1px solid var(--border-color); flex: 1; } .btn-group .btn:first-child, .btn-group .lh_tabsnav li:first-child, .lh_tabsnav .btn-group li:first-child, .lh_tabsnav .btn:first-child, .lh_tabsnav li:first-child { border-radius: var(--border-radius) 0 0 var(--border-radius); } .btn-group .btn:last-child, .btn-group .lh_tabsnav li:last-child, .lh_tabsnav .btn-group li:last-child, .lh_tabsnav .btn:last-child, .lh_tabsnav li:last-child { border-radius: 0 var(--border-radius) var(--border-radius) 0; } .btn-group .btn:not(:last-child), .btn-group .lh_tabsnav li:not(:last-child), .lh_tabsnav .btn-group li:not(:last-child), .lh_tabsnav .btn:not(:last-child), .lh_tabsnav li:not(:last-child) { border-right-style: none; } .btn.fx-center-v, .lh_tabsnav li.fx-center-v { display: flex; } .mediaplayerclose { display: block; position: fixed; z-index: 5001; top: 1px; right: 10px; color: red; background-color: transparent; font-size: 2.5rem; } .mediaplayerclose:hover { background-color: transparent !important; } input:focus { outline: none; background-color: var(--color-main-1-lighter); } /* Add Animation */ @keyframes animatetop { from { top: -300px; opacity: 0; } to { top: 0; opacity: 1; } } .a_modal { display: none; position: fixed; z-index: 1200; left: 0; top: 0; width: 100%; height: 100%; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.4); align-items: center; /* Modal Content */ /* The Close Button */ } .a_modal[style*="display: block;"] { display: flex !important; } .a_modal .modal-content { position: relative; background-color: white; margin: auto; padding: 0; border: 1px solid #6c757d; width: 60%; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); -webkit-animation-name: animatetop; -webkit-animation-duration: 0.4s; animation-name: animatetop; animation-duration: 0.4s; border-radius: var(--border-radius); overflow: hidden; display: flex; flex-direction: column; max-height: 90vh; } .a_modal .close:hover, .a_modal .close:focus { color: #000; text-decoration: none; cursor: pointer; } .a_modal .modal-header { padding: 0.75rem 1.6rem; background-color: white; border-bottom: 1px solid #ced4da; display: flex; align-items: center; flex: 1 0 min-content; } .a_modal .modal-header h3 { margin: 0; order: 1; flex: 1; display: flex; align-items: center; } .a_modal .modal-header h3 .fa, .a_modal .modal-header h3 .fab, .a_modal .modal-header h3 .fas, .a_modal .modal-header h3 .far { margin-right: 0.25em; } .a_modal .modal-header .close { order: 2; flex: 0; } .a_modal .close { color: #ff0000; } .a_modal .close i { font-size: 2.4rem; } .a_modal .modal-body { padding: 2rem 1.6rem; overflow: auto; } .a_modal .modal-body .modal-footer { margin-bottom: -2rem; margin-left: -1.6rem; margin-right: -1.6rem; } .a_modal .modal-footer { padding: 0.75rem 1.6rem; background-color: white; min-height: 40px; display: grid; grid-column-gap: 2rem; grid-template-columns: 1fr auto; border-top: 1px solid #ced4da; flex: 1 0 min-content; display: flex; } .a_modal .modal-footer .btn, .a_modal .modal-footer .lh_tabsnav li, .lh_tabsnav .a_modal .modal-footer li { height: 30px; margin-left: auto; white-space: nowrap; } .a_modal.modal_sm .modal-content { width: clamp(300px, 28%, 500px); } .a_modal.modal_md .modal-content { width: clamp(300px, 50%, 960px); } .a_modal.modal_lg .modal-content { width: clamp(300px, 75%, 1400px); } .a_modal.modal_full .modal-content { width: 100%; } .a_modal.modal_nofoot .modal-footer { display: none; } .a_modal input[type=text], .a_modal input[type=password], .a_modal input[type=email], .a_modal textarea { width: 100%; } .a_modal :not(.pw_group) > input[type=text], .a_modal :not(.pw_group) > input[type=password], .a_modal .pw_group, .a_modal input[type=email], .a_modal textarea { margin-top: 0.5rem; margin-bottom: 1rem; } .a_modal textarea { resize: vertical; } .pw_group { display: grid; } .pw_group button, .pw_group > input, .pw_group > .inlineedit-element { grid-row: 1; grid-column: 1; } .pw_group button { margin: auto 0 auto auto; height: 100%; width: 2.5em; } .pw_group button, .pw_group button:not([disabled]):hover, .pw_group button:not([disabled]):focus { --color: var(--color-main-1); --background-color: transparent; --border-width: 0px; } .pw_group > .inlineedit-element.is-text ~ button .fa-eye-slash, .pw_group > .inlineedit-element:not(.is-text) ~ button .fa-eye, .pw_group > input.is-text ~ button .fa-eye-slash, .pw_group > input:not(.is-text) ~ button .fa-eye { display: none; } .pw_group .inlineedit-element ~ button { position: relative; margin: 0 0 auto auto; height: 2.8em; } .edulist-modal .modal-body { padding-bottom: 0; } .edulist-modal .cohort_select { margin: 2rem 0; height: 45px; padding: 1rem; background-color: #fff; border: var(--form-element-border); border-radius: var(--border-radius); overflow-y: scroll; scrollbar-width: none; -ms-overflow-style: none; } .edulist-modal .cohort_select:focus { outline: none !important; } .edulist-modal .cohort_select:hover { scrollbar-width: auto; } .edulist-modal .cohort_select option { padding: 0.2rem 0.8rem; overflow: hidden; text-overflow: ellipsis; } .edulist-modal .cohort_select option:nth-of-type(2n) { background: #f8f9fa; } .edulist-modal .enddate { display: block; margin: 2rem 0; } .edulist-modal .enddate input { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: var(--form-element-border); border-radius: var(--border-radius); margin-left: 8px; padding: 1rem; } .edulist-modal .enddate label { vertical-align: sub; } .edulist-modal .btn, .edulist-modal .lh_tabsnav li, .lh_tabsnav .edulist-modal li { padding: 1rem 2rem; } .pager_items_none { display: none; } .ared { color: #ff0000; } b { font-weight: normal; } .antares_spinnerdiv { margin-top: 30vh; grid-column: 1/-1; } .antares_spinnerdiv i { color: var(--color-main-1); } .pagedimmer { background-color: rgba(0, 0, 0, 0.5); position: fixed; left: 0; top: 0; width: 100%; height: 100%; } .header { height: 100px; background-color: var(--header-bg); width: 100%; position: fixed; top: 0; z-index: 300; } @media (max-width: 992px) { .header { height: 50px; } } @media (max-width: 599px) { .header { padding-right: 0.2rem; } } .header .navinheader { height: inherit; grid-column: 1/-1; display: grid; grid-template-columns: 1fr max-content 1fr; border-bottom: 1px solid var(--color-main-1-light); } @media (max-width: 1280px) { .header .navinheader { grid-template-columns: min-content 1fr max-content; } } .header .navinheader a { text-decoration: none; color: #495057; } .header .navinheader .header-left { height: inherit; } .header .navinheader .header-left img { position: relative; height: 70%; width: auto; margin-left: 1.6rem; } .header .navinheader .header-left .logotext { margin-left: 1.8rem; } @media (max-width: 992px) { .header .navinheader .header-left .logotext { display: none; } } .header .navinheader .header-left .logotext_short { margin-left: 1rem; font-size: 1.8rem; } @media (min-width: 992px) { .header .navinheader .header-left .logotext_short { display: none; } } @media (max-width: 480px) { .header .navinheader .header-left .logotext_short { display: none; } } .header .navinheader .header-middle { height: inherit; font-size: 4.4rem; font-weight: 600; display: flex; align-items: center; justify-content: center; letter-spacing: 0.1rem; padding: 0 1rem; } @media (max-width: 992px) { .header .navinheader .header-middle { font-size: 3.4rem; } } @media (max-width: 480px) { .header .navinheader .header-middle { font-size: 1.5rem; } } .header .navinheader .header-right { height: inherit; padding-right: 2rem; display: flex; align-items: center; justify-content: flex-end; /*@include mq('m') { margin-top: 5px; }*/ } .a_navbar { background-color: #dfe4ea; grid-column: 1/-1; grid-row-start: 2; z-index: 1000; height: 56px; } .a_navbar .nav_placeholder { grid-column: 1/-1; grid-row: 1/2; height: 60px; } .a_navbar.sticky { position: fixed; top: 0; width: 100%; } .topnav { color: #000; height: 25px; padding: 0 1rem; } a.a_navbar-brand { display: inline-block; } /* .login_drop { float: right; overflow: hidden; margin-right: 0.1rem; margin-left: 1rem; } .login_drop .login_btn { font-size: 16px; border: none; outline: none; padding-bottom: 8px; background-color: inherit; font-family: inherit; margin: 0; } .login_drop:hover .login_btn { color: $gray-600; } .topnav_right { a { cursor: pointer; color: $main-col1; } p { color: $gray-300; display: inline; } } .login_drop_content { .login_drop & { display: none; } position: absolute; right: 1rem; background-color: white; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } .login_drop:hover .login_drop_content { display: block; } .topnav_left { white-space: nowrap; display: inline-block; padding-right: 5px; } a { text-decoration: none; color: $text-dark; } */ .tpl_impressum { padding-left: 3rem; } /* Download Educap ------ #appdown { display: block; } .tpl_appdown { max-width: 500px; margin-right: auto; margin-left: auto; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: max-content max-content max-content max-content; justify-items: center; grid-gap: 3rem; @include mq('sm') { grid-template-columns: 1fr; } img { width: 220px; height: auto; display: block; text-align: center; } } */ iframe.mediaplayer { display: block; position: fixed; z-index: 5000; width: 100vw; height: 100vh; top: 0px; bottom: 0px; left: 0px; background-color: #fff; padding: 0; margin: 0; border: none; border-top: 40px solid #fff; box-sizing: border-box; } .shelfsearch input { position: relative; display: inline-block; border-right: none; padding: 0.6rem; height: 16px; outline: none; width: 80%; font-size: 1.5rem; color: #6c757d; vertical-align: top; border: none; } .shelfsearch input:focus { outline: none; background-color: white; } .shelfsearch input .btn, .shelfsearch input .lh_tabsnav li, .lh_tabsnav .shelfsearch input li { height: 100%; } .mzchoose { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-template-rows: 1fr auto; grid-gap: 2rem; padding: 2rem; justify-items: stretch; } .mzchoose h4 { grid-column: 1/-1; } .mzchoose .mztile { background-color: white; display: grid; grid-template-columns: 1fr 2fr; grid-gap: 2rem; padding: 1rem; cursor: pointer; align-items: center; border-left: 4px solid var(--color-main-1); height: 100px; } .mzchoose .mztile img { width: auto; height: auto; max-width: 100%; max-height: 100%; margin: auto; display: block; } .resultfiltertotal { display: none; /* float: right; font-size: 80%; font-weight: bold; color: #fff; line-height: 1; vertical-align: middle; white-space: nowrap; text-align: center; background-color: $main-col1; border-radius: var(--border-radius); padding: 0.5em; margin: 0 0.5em 0 auto; */ /* TODO -filter btn mittig modal aug telefon min 90% breit */ } /* override basic modal styles*/ .rsfilter-modal .modal-content, .rsfilter-modal.modal_md .modal-content { width: min( 90vw, 960px ); } .rsfilter-modal .modal-header .fas { margin-right: auto; } .rsfilter-modal .modal-header .sscr_nope::after { content: " "; } .rsfilter-modal .modal-header h3::after { content: ""; margin-left: auto; } .rsfilter-modal .modal-footer .btn, .rsfilter-modal .modal-footer .lh_tabsnav li, .lh_tabsnav .rsfilter-modal .modal-footer li { margin-right: auto; } .filtercontainer { width: 100%; } @media (min-width: 811px) { .filtercontainer { -moz-columns: 2; columns: 2; -moz-column-gap: 2rem; column-gap: 2rem; } } .filtercontainer * { -moz-column-break-inside: avoid; break-inside: avoid; } .resultfilterdiv { display: block; } .filtertable { margin-bottom: 20px; } .filtertable-title { border-radius: 0px 0px 0 0; background-color: #dee2e6; padding: 5px 5px 5px 5px; display: flex; margin-bottom: 4px; /* */ } .filtertable-title .filtertitle { font-size: 120%; font-weight: bold; margin-right: auto; overflow: hidden; text-overflow: ellipsis; } .filtertable-title .whitebutton { color: black; background-color: white; margin-left: 0.25em; white-space: nowrap; } .filtertable-entry { display: flex; margin-bottom: 2px; /* states */ } .filtertable-entry .numberbadge { display: block; padding: 4px 7px; font-size: 12px; font-weight: bold; color: #fff; line-height: 1; vertical-align: middle; white-space: nowrap; text-align: center; background-color: #e9ecef; min-width: 3em; max-width: 3em; flex: 0; margin-bottom: auto; } .filtertable-entry .checkbox, .filtertable-entry .nochangetarget, .filtertable-entry .localfilterresult { padding: 1px; margin-left: 2px; } .filtertable-entry .checkbox { flex: 0; color: var(--color-main-1); } .filtertable-entry .nochangetarget { flex: 1; word-break: break-word; -webkit-hyphens: auto; hyphens: auto; } .filtertable-entry .localfilterresult { display: flex; min-width: 80px; align-items: flex-start; } .filtertable-entry .localfilterresult .showzero { line-height: 1.3; } .filtertable-entry .localfilterresult .numbertarget { margin-left: auto; } .filtertable-entry .nochangetarget, .filtertable-entry .localfilterresult { font-size: 14px; } .filtertable-entry .checkbox [type=checkbox], .filtertable-entry:not(.resultfilterentryzero) .showzero { display: none; } .filtertable-entry:not(.resultfilterselected) .checkbox .fa-toggle-on, .filtertable-entry.resultfilterselected .checkbox .fa-toggle-off { display: none; } .filtertable-entry.resultfilterentrynochange .nochangetarget { color: #dee2e6; } .resultfilterdiv .agreen { color: green; } .searchoptions .intro { margin-bottom: 2rem; } .searchoption { display: block; display: grid; grid-gap: 1rem; grid-template-columns: 32px 1fr; grid-template-areas: "check descr img"; grid-template-rows: min-content 1fr; padding: 1rem 0; } .searchoption:not(:last-of-type) { border-bottom: 1px solid #ced4da; } .searchoption [type=checkbox], .searchoption [type=checkbox]:not(:checked) ~ .fa-toggle-on, .searchoption [type=checkbox]:checked ~ .fa-toggle-off { display: none; } .searchoption .far, .searchoption .fas, .searchoption .fab { grid-area: check; margin: 4px auto; } .searchoption .externtooltip { grid-area: descr; } .searchoption .externtooltip img { width: 50px; height: auto; float: right; margin-left: 0.5rem; } .searchoption .externtooltip h4 { margin-top: 0; } .searchoption .externtooltip p { margin-bottom: 0.2rem; } .searchoption .externtooltip p:last-of-type { margin-bottom: 0; } .fa-h5p, .fa-leichtesprache { line-height: 1; } .fa-h5p, .fa-leichtesprache, .fa-h5p::before, .fa-leichtesprache::before { height: 1em; } .fa-h5p::before, .fa-leichtesprache::before { content: ""; background-color: currentColor; display: inline-block; vertical-align: top; } /* Neues Icon erstellen: 1. SVG in Bildbearbeitung öffnen 2. Größe auf 1x1 px ändern 3. Motiv (unproportional!) auf 1x1 px skalieren 4. Speichern ... (Präzision mind. 3 Nachkommastellen) 5. ... und in Texteditor öffnen 6. rauskopieren 7. Unten ins SVG-Template pasten 8. Als Textdatei in resources/icons/*.svg ablegen 9. SCSS (also hier): @include svg-clip-icon( [NAME], [RATIO] ); [NAME]: Selbsterklärend [RATIO]: breite / höhe SVG-Template: [PATH] Neues Icon im HTML: */ .fa-h5p::before { width: 2.282em; -webkit-clip-path: url(#h5p_clip); clip-path: url(#h5p_clip); } .fa-leichtesprache { position: relative; top: -0.2em; } .fa-leichtesprache::before { width: 0.861em; -webkit-clip-path: url(#leichtesprache_clip); clip-path: url(#leichtesprache_clip); } .h5p-edit-dialog { z-index: 4000; } [src="/resources/bilder/Button_h5p.svg"] { height: 0.85em; width: auto; margin-left: 0.25em; margin-right: 0.25em; } .swiper-button-disabled { visibility: hidden; } /* Do not display if it is the only bullet */ span.swiper-pagination-bullet:first-child:nth-last-child(1) { visibility: hidden; } ul.submenue_content_in_li:NOT(.menue_opened) { display: none !important; } .mob_toggle_search { display: flex; align-items: center; } .mob_toggle_search i { font-size: 1.8rem; padding-left: 1.5rem; } @media (min-width: 811px) { .mob_toggle_search { display: none !important; } } .topmenu { display: grid; grid-template-areas: "lang" "menu"; } @media (max-width: 992px) { .topmenu { grid-template-areas: "lang menu"; } } .topmenu .toggle_open { display: block; } .topmenu .toggle_close { display: none; } .topmenu a { display: inline-block; } .topmenu .topmenu_list { white-space: nowrap; color: var(--color-main-2); margin: 0; padding: 0; z-index: 1110; } @media (max-width: 811px) { .topmenu .topmenu_list { display: none; } } .topmenu .topmenu_list:not(.language_list) { grid-area: menu; } .topmenu .topmenu_list li { list-style: none; display: inline; cursor: pointer; padding-right: 8px; position: relative; } .topmenu .topmenu_list li:not(:last-of-type)::after { content: "•"; font-size: 2rem; color: var(--color-main-1); padding-left: 8px; } .topmenu .topmenu_list li b { display: inline-block; padding-top: 4px; font-size: 18px; border-top: 3px solid transparent; /* @include mq('sm') { font-size: 16px; }*/ } .topmenu .topmenu_list li.login_li i { margin-right: 0.6rem; } .topmenu .topmenu_list li.login_li > b { max-width: 100px; overflow: hidden; vertical-align: bottom; text-overflow: ellipsis; } @media (max-width: 599px) { .topmenu .topmenu_list li.login_li > b { display: none; } } @media (max-width: 811px) { .topmenu .topmenu_list li.login_li > b { max-width: 220px; } } .topmenu .topmenu_list li.antares-active > b { color: var(--color-main-1); border-top: 3px solid var(--color-main-1); } .topmenu .topmenu_list li.antares-active > i { color: var(--color-main-1); } .topmenu .topmenu_list.language_list { grid-area: lang; display: flex; align-items: center; margin-top: -4rem; } @media (max-width: 992px) { .topmenu .topmenu_list.language_list { margin-top: 0rem; } } .topmenu .topmenu_list.language_list li.antares-active a { color: var(--color-main-1); font-weight: 700; } .topmenu .topmenu_list.language_list li:first-of-type { margin-left: auto; } .topmenu .topmenu_list.language_list li:not(:last-of-type)::after { content: "|"; line-height: 0; padding-left: 0.25em; } .topmenu .topmenu_list .submenue_content_in_li { z-index: 1110; } .topmenu .topmenu_list .submenue_content_in_li.menue_opened { position: absolute; right: 1rem; border-radius: var(--border-radius); background-color: #fff; border: 1px solid #dee2e6; padding-inline-start: 10px; top: 3rem; padding: 1rem; } .topmenu .topmenu_list .submenue_content_in_li.menue_opened i { margin-right: 1rem; } .topmenu .topmenu_list .submenue_content_in_li.menue_opened li { display: block; padding: 0.5rem; } .topmenu .topmenu_list .submenue_content_in_li.menue_opened li.separator_li { cursor: default; } .topmenu .topmenu_list .submenue_content_in_li.menue_opened li::after { content: none; } .topmenu .topmenu_list .submenue_content_in_li.menue_opened li::after b { padding-top: 0; border-top: none; } @media (max-width: 811px) { .topmenu.opened .toggle_open { display: none; } .topmenu.opened .toggle_close { display: block; } .topmenu.opened .topmenu_list:not(.language_list) { display: block; position: absolute; right: 0; top: 50px; background-color: #fff; width: auto; padding: 0; border-left: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6; border-bottom-left-radius: var(--border-radius); max-height: calc(100vh - 50px - var(--vh-offset, 0px)); overflow-y: auto; } .topmenu.opened .topmenu_list:not(.language_list) li { display: block; padding: 1.3rem 2rem; border-bottom: 1px solid #dee2e6; /*&.antares-active { color: $main-col1; b { color: $main-col1; } i { color: $main-col1; } }*/ } .topmenu.opened .topmenu_list:not(.language_list) li b { padding-top: 0; border-top: none; } .topmenu.opened .topmenu_list:not(.language_list) li:last-of-type { border-bottom: none; } .topmenu.opened .topmenu_list:not(.language_list) li::after { content: none; } .topmenu.opened .topmenu_list:not(.language_list) li.search_li { display: none; } .topmenu.opened .topmenu_list:not(.language_list) li i { margin-right: 1rem; } .topmenu.opened .topmenu_list:not(.language_list) li.li_has_sub, .topmenu.opened .topmenu_list:not(.language_list) li.login_li { cursor: default; } .topmenu.opened .topmenu_list:not(.language_list) .submenue_content_in_li { position: relative; padding-inline-start: 0px; right: 0; border: none; padding: 1rem; display: block !important; } .topmenu.opened .topmenu_list:not(.language_list) .submenue_content_in_li li { border-bottom: none; padding: 1rem; padding-bottom: 0; } .topmenu.opened .topmenu_list:not(.language_list) .submenue_content_in_li::after { content: none; } .topmenu.opened .topmenu_list:not(.language_list) .submenue_content_in_li.menue_opened { top: 0; } } body.notlogged .mob_toggle_search { display: none !important; } @media (max-width: 811px) { body.notlogged .topmenu_list { display: block; } } .overview_details_wrapper { display: grid; width: 100%; overflow-y: auto; overflow-x: hidden; grid-template-rows: 1fr auto; } @media (max-width: 599px) { .overview_details_wrapper { -webkit-hyphens: auto; hyphens: auto; } } .overview_details_wrapper .showifshowdetails_overview { display: none; } .overview_details_wrapper.showdetails .hideifshowdetails { display: none; } .overview_details_wrapper.showdetails .overview .showifshowdetails_overview { display: none; } .overview_details_wrapper.showdetails .overview .hideifshowdetails_overview { display: none; } .overview_details_wrapper.showdetails .eduids .lists_element:not(.lastchosen), .overview_details_wrapper.showdetails .medialists .lists_element:not(.lastchosen) { opacity: 0.2; } .overview_details_wrapper:not(.showdetails) { padding-bottom: calc(var(--actual-footer-height) + 4rem); } .overview_details_wrapper:not(.showdetails) .hideifnotshowdetails { display: none; } .overview_details_wrapper:not(.showdetails) .overview { grid-template-rows: max-content auto; } .overview_details_wrapper:not(.showdetails) .overview .hideifnotshowdetails_details { display: none; } .overview_details_wrapper:not(.showdetails) .medialists .media_element { display: none; } .overview_details_wrapper .detailview .hideifnotshowdetails_details { display: none; } .overview_details_wrapper .overview { display: grid; padding: 0 5% 3rem 5%; width: 100%; height: 100%; grid-template-columns: 100%; align-content: start; } @media (max-width: 811px) { .overview_details_wrapper .overview { padding: 0 1rem 3rem 1rem; } } .overview_details_wrapper.showdetails { grid-template-columns: 300px 1fr; } @media (max-width: 811px) { .overview_details_wrapper.showdetails { grid-template-columns: 1fr; } } .overview_details_wrapper.showdetails .overview { overflow: hidden; padding-left: 0; padding-right: 0; display: block; padding-bottom: 0; } @media (max-width: 811px) { .overview_details_wrapper.showdetails .overview { display: none; } } .overview_details_wrapper.showdetails .overview #news { padding: 2rem 1rem; } .overview_details_wrapper.showdetails .overview .tasknav { margin-top: 0; position: fixed; padding: 2.2rem 4rem 2.2rem 2rem; width: 300px; background-color: #f8f9fa; z-index: 10; height: 100px; } .overview_details_wrapper.showdetails .overview .tasknav h1 { font-size: 2.5rem; margin-top: 0; margin-right: 3rem; } .overview_details_wrapper.showdetails .overview .tasknav .sorter_btn { display: none; } .overview_details_wrapper.showdetails .overview .tasknav .btn_lnew { display: none; } .overview_details_wrapper.showdetails .overview .resultfilter { border: none; width: 100%; } .overview_details_wrapper.showdetails .overview .searchbar_wrapper { grid-template-columns: 1fr; width: 100%; padding: 0; } .overview_details_wrapper.showdetails .overview .searchbar_wrapper .antares_resulttext:before, .overview_details_wrapper.showdetails .overview .searchbar_wrapper .antares_no_resulttext:before { content: " · "; color: var(--color-main-1); } .overview_details_wrapper.showdetails .overview .antares_no_resulttext { display: none; } .overview_details_wrapper.showdetails .overview .result, .overview_details_wrapper.showdetails .overview .medialists, .overview_details_wrapper.showdetails .overview .eduids, .overview_details_wrapper.showdetails .overview #eduidmedialists, .overview_details_wrapper.showdetails .overview .usercontent, .overview_details_wrapper.showdetails .overview .bookshelf, .overview_details_wrapper.showdetails .overview .devices, .overview_details_wrapper.showdetails .overview .hip_media { background-color: #fff; grid-template-columns: 100%; padding: 2rem 2rem; margin-top: 100px; height: calc(100% - 100px); overflow-y: auto; overflow-x: hidden; } .overview_details_wrapper.showdetails .overview .result .media_element, .overview_details_wrapper.showdetails .overview .medialists .media_element, .overview_details_wrapper.showdetails .overview .eduids .media_element, .overview_details_wrapper.showdetails .overview #eduidmedialists .media_element, .overview_details_wrapper.showdetails .overview .usercontent .media_element, .overview_details_wrapper.showdetails .overview .bookshelf .media_element, .overview_details_wrapper.showdetails .overview .devices .media_element, .overview_details_wrapper.showdetails .overview .hip_media .media_element { opacity: 0.5; } .overview_details_wrapper.showdetails .overview .result .media_element .media_text, .overview_details_wrapper.showdetails .overview .medialists .media_element .media_text, .overview_details_wrapper.showdetails .overview .eduids .media_element .media_text, .overview_details_wrapper.showdetails .overview #eduidmedialists .media_element .media_text, .overview_details_wrapper.showdetails .overview .usercontent .media_element .media_text, .overview_details_wrapper.showdetails .overview .bookshelf .media_element .media_text, .overview_details_wrapper.showdetails .overview .devices .media_element .media_text, .overview_details_wrapper.showdetails .overview .hip_media .media_element .media_text { display: none; } .overview_details_wrapper.showdetails .overview .result .media_element.lastchosen, .overview_details_wrapper.showdetails .overview .medialists .media_element.lastchosen, .overview_details_wrapper.showdetails .overview .eduids .media_element.lastchosen, .overview_details_wrapper.showdetails .overview #eduidmedialists .media_element.lastchosen, .overview_details_wrapper.showdetails .overview .usercontent .media_element.lastchosen, .overview_details_wrapper.showdetails .overview .bookshelf .media_element.lastchosen, .overview_details_wrapper.showdetails .overview .devices .media_element.lastchosen, .overview_details_wrapper.showdetails .overview .hip_media .media_element.lastchosen { border-color: var(--color-main-1); opacity: 1; } .overview_details_wrapper.showdetails .overview .res_footer_buttons, .overview_details_wrapper.showdetails .overview .playbutton, .overview_details_wrapper.showdetails .overview .externbutton, .overview_details_wrapper.showdetails .overview .h5p_playbutton { display: none; } .overview_details_wrapper.showdetails .medialists, .overview_details_wrapper.showdetails .eduids { grid-auto-rows: min-content; } .overview_details_wrapper.showdetails .medialists .lists_element, .overview_details_wrapper.showdetails .eduids .lists_element { grid-template-columns: 40px 1fr 40px; grid-template-rows: 40px; grid-column-gap: 0; grid-template-areas: "img title badge"; align-items: center; overflow: hidden; } .overview_details_wrapper.showdetails .medialists .lists_element .le_check, .overview_details_wrapper.showdetails .medialists .lists_element .le_buttons, .overview_details_wrapper.showdetails .medialists .lists_element .le_text, .overview_details_wrapper.showdetails .eduids .lists_element .le_check, .overview_details_wrapper.showdetails .eduids .lists_element .le_buttons, .overview_details_wrapper.showdetails .eduids .lists_element .le_text { display: none; } .overview_details_wrapper.showdetails .medialists .lists_element .le_picture, .overview_details_wrapper.showdetails .eduids .lists_element .le_picture { height: 100%; } .overview_details_wrapper.showdetails .medialists .lists_element .le_title, .overview_details_wrapper.showdetails .eduids .lists_element .le_title { padding-left: 1rem; } .overview_details_wrapper.showdetails .medialists .lists_element .le_title h4, .overview_details_wrapper.showdetails .eduids .lists_element .le_title h4 { margin: 0; font-size: 1.3rem; font-weight: 300; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; } .overview_details_wrapper.showdetails .medialists .lists_element .le_badge, .overview_details_wrapper.showdetails .eduids .lists_element .le_badge { background-color: #e9ecef; border: none; border-left: 1px solid #404040; height: 41px; width: 41px; align-content: center; justify-content: center; } .overview_details_wrapper.showdetails .eduids .lists_element { grid-template-columns: 40px 1fr; grid-template-areas: " badge title"; } .overview_details_wrapper.showdetails .eduids .lists_element .le_badge { background-color: transparent; border-left: none; border-right: 1px solid #404040; } .overview_details_wrapper .detailview { border-left: 1px solid var(--color-main-1); padding: 1rem 10% 5rem 10%; overflow: auto; } @media (max-width: 1280px) { .overview_details_wrapper .detailview { padding: 1rem 1rem 5rem 1rem; } } .overview_details_wrapper .detailview #medialists_child_1 .medialists_store { display: none; } .overview_details_wrapper .detailview #medialists_child_1 .media_element.gal { border-top-right-radius: 0; } @media screen { .overview_details_wrapper .detailview #medialists_child_1 .media_element.gal { page-break-inside: auto; } } .overview_details_wrapper .detailview #medialists_child_1 .media_element.gal .mediachecker { display: flex; } @media print { .overview_details_wrapper .detailview #medialists_child_1 .media_element.gal .mediachecker { display: none; } } .overview_details_wrapper .res_footer_buttons { display: flex; } .result, .medialist, .usercontent, .bookshelf, .devicelist { display: grid; position: relative; grid-gap: 3rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); align-content: start; } @media (max-width: 480px) { .result, .medialist, .usercontent, .bookshelf, .devicelist { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } } /* eduid bookshelf */ .bookshelf .media_element .mediachecker { display: flex; } .bookshelf .media_element .media-image img { max-height: 200px; } .shelf-default { padding-top: 3rem; grid-column: 1/-1; display: grid; grid-gap: 2rem; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); } .shelf-addons { display: grid; grid-template-columns: repeat(auto-fill, minmax(450px, 1fr)); grid-column: 1/-1; grid-gap: 2rem; } @media (max-width: 480px) { .shelf-addons { grid-template-columns: 1fr; } } .shelf-addons .workspace { border-bottom: 1px solid grey; } .shelf-addons .workspace h3 { margin-bottom: 1rem; } /** * Swiper 6.5.6 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2021 Vladimir Kharlampidi * * Released under the MIT License * * Released on: April 9, 2021 */ @font-face { font-family: "swiper-icons"; src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff"); font-weight: 400; font-style: normal; } :root { --swiper-theme-color: #fff; } .swiper-container { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; /* Fix of Webkit flickering */ z-index: 1; } .swiper-container-vertical > .swiper-wrapper { flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box; } .swiper-container-android .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0, 0); } .swiper-container-multirow > .swiper-wrapper { flex-wrap: wrap; } .swiper-container-multirow-column > .swiper-wrapper { flex-wrap: wrap; flex-direction: column; } .swiper-container-free-mode > .swiper-wrapper { transition-timing-function: ease-out; margin: 0 auto; } .swiper-container-pointer-events { touch-action: pan-y; } .swiper-container-pointer-events.swiper-container-vertical { touch-action: pan-x; } .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; } .swiper-slide-invisible-blank { visibility: hidden; } /* Auto Height */ .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide { height: auto; } .swiper-container-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform, height; } /* 3D Effects */ .swiper-container-3d { perspective: 1200px; } .swiper-container-3d .swiper-wrapper, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-cube-shadow { transform-style: preserve-3d; } .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-container-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-top { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } /* CSS Mode */ .swiper-container-css-mode > .swiper-wrapper { overflow: auto; scrollbar-width: none; /* For Firefox */ -ms-overflow-style: none; /* For Internet Explorer and Edge */ } .swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar { display: none; } .swiper-container-css-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start; } .swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper { scroll-snap-type: x mandatory; } .swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper { scroll-snap-type: y mandatory; } :root { --swiper-navigation-size: 20px; /* --swiper-navigation-color: var(--swiper-theme-color); */ } .swiper-button-prev, .swiper-button-next { position: absolute; top: 52%; width: calc(var(--swiper-navigation-size) / 44 * 27); height: var(--swiper-navigation-size); margin-top: calc(0px - var(--swiper-navigation-size) / 2); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; } .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } .swiper-button-prev:after, .swiper-button-next:after { font-family: swiper-icons; font-size: var(--swiper-navigation-size); text-transform: none !important; letter-spacing: 0; text-transform: none; font-variant: initial; line-height: 1; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { left: 0px; right: auto; padding: 1.5rem; border-top-right-radius: 1.5rem; border-bottom-right-radius: 1.5rem; } .swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after { content: "prev"; } .swiper-button-next, .swiper-container-rtl .swiper-button-prev { right: 0px; left: auto; padding: 1.5rem; border-top-left-radius: 1.5rem; border-bottom-left-radius: 1.5rem; } .swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after { content: "next"; } .swiper-button-prev.swiper-button-white, .swiper-button-next.swiper-button-white { --swiper-navigation-color: #fff; } .swiper-button-prev.swiper-button-black, .swiper-button-next.swiper-button-black { --swiper-navigation-color: #fff; } .swiper-button-lock { display: none; } :root { --swiper-pagination-color: #dee2e6; } .swiper-pagination { position: absolute; text-align: center; transition: 300ms opacity; transform: translate3d(0, 0, 0); z-index: 10; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } /* Common Styles */ .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets { bottom: 10px; left: 0; width: 100%; } /* Bullets */ .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transform: scale(0.33); position: relative; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { transform: scale(0.33); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { transform: scale(0.33); } .swiper-pagination-bullet { width: 8px; height: 8px; display: inline-block; border-radius: 50%; background: #fff; border: 1px solid #AABEBF; } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-bullet-active { opacity: 1; background: var(--swiper-pagination-color, var(--swiper-theme-color)); } .swiper-container-vertical > .swiper-pagination-bullets { right: 10px; top: 50%; transform: translate3d(0px, -50%, 0); } .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 6px 0; display: block; } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; transform: translateY(-50%); width: 8px; } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; transition: 200ms transform, 200ms top; } .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 4px; } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; transform: translateX(-50%); white-space: nowrap; } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms left; } .swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms right; } /* Progress */ .swiper-pagination-progressbar { background: rgba(0, 0, 0, 0.25); position: absolute; } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--swiper-pagination-color, var(--swiper-theme-color)); position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(0); transform-origin: left top; } .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { transform-origin: right top; } .swiper-container-horizontal > .swiper-pagination-progressbar, .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 100%; height: 4px; left: 0; top: 0; } .swiper-container-vertical > .swiper-pagination-progressbar, .swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 4px; height: 100%; left: 0; top: 0; } .swiper-pagination-white { --swiper-pagination-color: #ffffff; } .swiper-pagination-black { --swiper-pagination-color: #000000; } .swiper-pagination-lock { display: none; } /* Scrollbar */ .swiper-scrollbar { border-radius: 10px; position: relative; -ms-touch-action: none; background: rgba(0, 0, 0, 0.1); } .swiper-container-horizontal > .swiper-scrollbar { position: absolute; left: 1%; bottom: 3px; z-index: 50; height: 5px; width: 98%; } .swiper-container-vertical > .swiper-scrollbar { position: absolute; right: 3px; top: 1%; z-index: 50; width: 5px; height: 98%; } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 10px; left: 0; top: 0; } .swiper-scrollbar-cursor-drag { cursor: move; } .swiper-scrollbar-lock { display: none; } .swiper-zoom-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; text-align: center; } .swiper-zoom-container > img, .swiper-zoom-container > svg, .swiper-zoom-container > canvas { max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain; } .swiper-slide-zoomed { cursor: move; } /* Preloader */ :root { /* --swiper-preloader-color: var(--swiper-theme-color); */ } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; transform-origin: 50%; animation: swiper-preloader-spin 1s infinite linear; box-sizing: border-box; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top-color: transparent; } .swiper-lazy-preloader-white { --swiper-preloader-color: #fff; } .swiper-lazy-preloader-black { --swiper-preloader-color: #000; } @keyframes swiper-preloader-spin { 100% { transform: rotate(360deg); } } /* a11y */ .swiper-container .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; } .swiper-container-fade.swiper-container-free-mode .swiper-slide { transition-timing-function: ease-out; } .swiper-container-fade .swiper-slide { pointer-events: none; transition-property: opacity; } .swiper-container-fade .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-cube { overflow: visible; } .swiper-container-cube .swiper-slide { pointer-events: none; backface-visibility: hidden; z-index: 1; visibility: hidden; transform-origin: 0 0; width: 100%; height: 100%; } .swiper-container-cube .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-cube.swiper-container-rtl .swiper-slide { transform-origin: 100% 0; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-prev, .swiper-container-cube .swiper-slide-next + .swiper-slide { pointer-events: auto; visibility: visible; } .swiper-container-cube .swiper-slide-shadow-top, .swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right { z-index: 0; backface-visibility: hidden; } .swiper-container-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0px; width: 100%; height: 100%; opacity: 0.6; z-index: 0; } .swiper-container-cube .swiper-cube-shadow:before { content: ""; background: #000; position: absolute; left: 0; top: 0; bottom: 0; right: 0; filter: blur(50px); } .swiper-container-flip { overflow: visible; } .swiper-container-flip .swiper-slide { pointer-events: none; backface-visibility: hidden; z-index: 1; } .swiper-container-flip .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-flip .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-flip .swiper-slide-shadow-top, .swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-right { z-index: 0; backface-visibility: hidden; } .swiper-button-prev, .swiper-button-next { color: var(--color); border-color: var(--border-color); background-color: var(--background-color); padding: 2.5rem 2rem; } @media (max-width: 811px) { .swiper-button-prev, .swiper-button-next { display: none; } } .tab-page { display: grid; } @media (max-width: 599px) { .tab-page { padding: 0; } } .tab-page .hello { margin-top: 10%; text-align: center; } .tab-page .hello h3 { margin-left: auto; margin-right: auto; } .tab-page .hello p { margin-top: 50px; } .tab-page .slider_area { width: 70vw; text-align: left; box-sizing: border-box; position: relative; margin-left: auto; margin-right: auto; } .tab-page .slider_area .slider_head h2 { display: inline-block; margin-top: 2rem; margin-bottom: 1rem; } .tab-page .slider_area .slider_head h5 { margin-top: 3rem; } .tab-page .slider_area .slider_head a { text-decoration: none; color: black; } .tab-page .slider_area .swiper-container2 { overflow: hidden; } .tab-page .slider_area .swiper-container2 h2, .tab-page .slider_area .swiper-container2 a { display: inline-block; } .tab-page .slider_area .swiper-container2 .swiper-slide { background-color: white; border-radius: var(--border-radius); overflow: hidden; } .tab-page .slider_area .swiper-container2 .swiper-slide > img { height: 180px; -o-object-fit: cover; object-fit: cover; } .tab-page .slider_area .swiper-container2 .swiper-slide .media-image { height: 0; overflow: visible; padding-bottom: 56.5%; /* 16:9 */ } .tab-page .slider_area .swiper-container2 .swiper-slide .media-image img { position: absolute; height: 100%; } .tab-page .slider_area .swiper-container2 .swiper-slide .newsslide_content { padding: 0.2rem 1.5rem; height: 160px; overflow: hidden; } .tab-page .slider_area .swiper-container2 .swiper-slide .newsslide_content .newsdate { font-size: 10px; font-weight: 700; } .tab-page .slider_area .swiper-container2 .swiper-slide .newsslide_content h4 { margin-top: 0.8rem; margin-bottom: 1rem; } .tab-page .slider_area .swiper-container2 .swiper-slide .newsslide_content p { font-size: 12px; font-weight: 500; line-height: 18px; margin-top: 0; } .tab-page .slider_area .swiper-container2 .swiper-pagination { color: var(--color-main-1); position: relative; margin-top: 2rem; } .tab-page .slider_area .swiper-container2 .swiper-pagination-bullet-active { background-color: var(--color-main-1); } .news_head { text-align: center; } .news_head h1 { margin-bottom: 1.5rem; } .news_entry_full, .newsfeed { padding: 5rem; } .newsbody_full { padding-top: 2rem; display: grid; grid-template-columns: 2fr 1fr; grid-gap: 2rem; } .newsbody_full img { grid-column-start: 2; height: auto; -o-object-fit: contain; object-fit: contain; } .newsbody_full .newsimg_caption { font-size: 1.3rem; } .newsbody_full .newstext_full { grid-column-start: 1; grid-row-start: 1; } .newsbody_full .newstext_full a { color: #404040; text-decoration: underline; word-break: break-word; } @media (max-width: 599px) { .newsbody_full { grid-template-columns: 1fr; } .newsbody_full img { grid-column-start: 1; grid-row-start: 1; } .newsbody_full .newstext_full { grid-row-start: 2; } } .newsbody_full .medialink a { display: inline-flex; } .newsbody_full .medialink img { width: 1.5em; } .tasknav_info { display: inline-block; padding-top: 5px; color: #404040; white-space: nowrap; overflow: hidden; max-width: 80%; text-overflow: ellipsis; } @media (max-width: 811px) { .tasknav_info { margin-left: 18px; } } .a_navbar .tasknav .tasknav_info { margin-left: 16px; } .a_navbar .tasknav .resultfilter { margin-left: 16px; } .tasknav { margin-top: 3rem; padding-bottom: 1.5rem; width: 100%; } .tasknav h1 ~ .btn_lnew { margin-top: 2.5rem; } .searchbar_wrapper { display: flex; width: clamp(280px, 100%, 800px); padding: 4rem 0 6rem 0; margin: 0 auto; justify-content: center; flex-wrap: wrap; } @media (max-width: 1280px) { .searchbar_wrapper { grid-template-columns: 2fr 220px; grid-template-rows: auto; grid-gap: 2rem; justify-content: center; } } @media (max-width: 992px) { .searchbar_wrapper { width: 100%; } } @media (max-width: 599px) { .searchbar_wrapper { padding: 0 0 6rem 0; } } .searchbar { --search-input-height: 45px; width: 100%; } .searchbar form { position: relative; display: inline-block; width: 100%; } .searchbar form.a_searched span.a_searched { display: inline; } .searchbar form.a_searched span.a_notsearched { display: none; } .searchbar form:not(.a_searched) span.a_searched { display: none; } .searchbar form:not(.a_searched) span.a_notsearched { display: inline; } @media (max-width: 811px) { .searchbar form .antares_resultdesc { display: none; } .searchbar form .antares_resultcounter::before { content: "\f649"; margin-right: 0.5rem; } .searchbar form .antares_resultcounter::after { content: "|"; margin-left: 0.5rem; } } .searchbar input:not([type=checkbox]):not([type=radio]) { box-sizing: border-box; background-color: var(--search-input-background); border: var(--search-input-border); border-radius: var(--border-radius); padding: 0rem 50px; height: var(--search-input-height); outline: none; width: 100%; font-size: 1.6rem; color: #6c757d; vertical-align: top; } .searchbar input:not([type=checkbox]):not([type=radio]):focus { background-color: white; } .searchbar input:not([type=checkbox]):not([type=radio]).a_searchfield:-moz-placeholder-shown ~ .search_reset_btn { display: none; } .searchbar input:not([type=checkbox]):not([type=radio]).a_searchfield:placeholder-shown ~ .search_reset_btn { display: none; } .searchbar .search_reset_btn { position: absolute; top: 0; right: 45px; display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: var(--search-input-height); } .searchbar .magicon { font-size: 2rem; position: absolute; top: 11px; left: 15px; color: #dee2e6; } .searchbar .btn, .searchbar .lh_tabsnav li, .lh_tabsnav .searchbar li { border-top-left-radius: 0; border-bottom-left-radius: 0; display: inline-block; width: 45px; height: var(--search-input-height); position: absolute; right: 0; top: 0; vertical-align: top; cursor: pointer; font-size: 16px; margin-left: -3px; z-index: 10; font-size: 2rem; } /* .resultfilter { } */ .resultfilter { height: 45px; width: 180px; position: relative; display: inline-block; vertical-align: top; border-radius: var(--border-radius); margin-left: 1rem; box-sizing: revert; background-color: var(--search-input-background); border: var(--search-input-border); } @media (max-width: 480px) { .resultfilter { width: 150px; } } .sorter .resultfilter { height: 40px; margin-left: 0; } .sorter .resultfilter .filterdelete { left: -200px; top: -42px; background-color: #fff; color: #000; border: var(--search-input-border); border-radius: var(--border-radius); height: 25px; margin: 10px 5% 0 5%; white-space: nowrap; width: auto; min-width: 90%; } @media (max-width: 599px) { .sorter .resultfilter .filterdelete { left: 0; top: -85px; } } .sorter .resultfilter .filterdelete i { color: #ff0000; margin-right: 6px; } .resultfilter .resultcounter { font-size: 1.8rem; padding: 1.1rem 2rem 1.1rem 1rem; height: 100%; display: inline-block; } .sorter .resultfilter .resultcounter { padding: 0.9rem 2rem 0.9rem 1rem; } @media (max-width: 480px) { .resultfilter .resultcounter > i { display: none; } } .resultfilter button { display: inline-block; width: 45px; height: 45px; position: absolute; right: 0; vertical-align: top; cursor: pointer; font-size: 16px; margin-left: -3px; /* @include mq('xs') { span { display: none; }*/ } .sorter .resultfilter button { width: 40px; height: 40px; } .resultfilter button:not(.filterdelete) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .resultfilter.filteractive button.showinactive { display: none; } .resultfilter:not(.filteractive) button.showactive { display: none; } .sorter { position: relative; display: flex; align-items: center; /* @include mq('sm') { display: block; float: none; text-align: center; }*/ } body:not(.showdetails) .sorter { margin-top: 3rem; } .sorter.fr { float: none; justify-content: end; } .sorter .typechanger { display: none; margin-right: 2rem; } .sorter .typechanger p { display: none; } @media (max-width: 811px) { .sorter .typechanger { display: none; } } .sorter .typechanger a { padding-left: 1rem; font-size: 2.2rem; } .sorter .list-type { cursor: pointer; } .sorter_drop { justify-self: end; overflow: hidden; margin-right: 0rem; margin-left: 1rem; border-radius: var(--border-radius); } .sorter_btn { font-size: 16px; outline: none; font-family: inherit; background-color: transparent; width: 160px; border: 1px solid #404040; border-radius: var(--border-radius); /* Important for vertical align on mobile phones */ margin: 0; /* Important for vertical align on mobile phones */ height: 40px; } @media (max-width: 480px) { .sorter_btn { width: 130px; } } .sorter_btn.btn, .lh_tabsnav li.sorter_btn { display: flex; align-items: center; } .sorter_btn.btn .dropselect-desc, .lh_tabsnav li.sorter_btn .dropselect-desc { overflow: hidden; text-overflow: ellipsis; margin-left: auto; white-space: nowrap; } .sorter_btn.btn i, .lh_tabsnav li.sorter_btn i { margin-left: 0.5rem; margin-right: auto; } .sorter_drop:hover { color: #6c757d; } .sorter_drop_content { display: none; position: absolute; right: 0; background-color: white; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 10; border-radius: var(--border-radius); } .sorter_drop_content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; border-bottom: 1px solid #dee2e6; } .sorter_drop_content a:hover { color: var(--color-main-1); } .sorter_drop:hover .sorter_drop_content { display: block; } .subsel_drop { margin-right: 3rem; border-radius: 6px; position: relative; } @media (max-width: 599px) { .subsel_drop { margin-right: 0; } } .subsel_btn.btn:focus, .lh_tabsnav li.subsel_btn:focus { box-shadow: none; } .subsel_drop:hover { color: #6c757d; } .subsel_drop_content { display: none; position: absolute; left: 0; top: 45px; padding: 2rem; background-color: white; width: auto; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 50; border-radius: var(--border-radius); font-size: 1.4rem; -moz-column-count: 3; column-count: 3; -moz-column-gap: 20px; column-gap: 20px; } @media (max-width: 992px) { .subsel_drop_content { -moz-column-count: 2; column-count: 2; } } @media (max-width: 599px) { .subsel_drop_content { -moz-column-count: 1; column-count: 1; } } .subsel_drop_content a { float: none; color: black; padding: 5px 10px; text-decoration: none; display: block; text-align: left; cursor: pointer; } .subsel_drop_content a:hover { color: var(--color-main-1); } .subsel_drop:hover .subsel_drop_content { display: block; } .subsel_drop { border-radius: var(--border-radius); background-color: var(--color-main-1); border: none; color: #fff; padding: 1rem; font-family: inherit; font-size: 2rem; cursor: inherit; line-height: inherit; } .tabrecord .record_back { --margin-x: calc(3rem + 1%); margin-left: var(--margin-x); margin-right: var(--margin-x); } @media (max-width: 1280px) { .tabrecord .record_back { --margin-x:3rem; } } @media (max-width: 992px) { .tabrecord .record_back { --margin-x:1rem; } } .media_element { background-color: white; position: relative; } .overview_details_wrapper:not(.showdetails) .media_element { overflow: hidden; } .media_element[data-mediasrc=offline] .func-playbutton, .media_element[data-mediasrc=offline] .func-downloadbutton, .media_element[data-mediasrc=offline] .button_schulserver, .media_element[data-mediasrc=offline] .call_h5p { display: none !important; } .media_element[data-mediasrc=online] .func-rentbutton { display: none !important; } .media_element[data-mediasrc=usercontent] .func-rentbutton { display: none !important; } .media_element:not(.inlist) .me_flagged { display: none !important; } .media_element:not(.inlist) .medialists_store { display: inline-block; } .media_element.inlist .me_flagged { display: inline-block; } .media_element.inlist .medialists_store { display: none !important; } .media_element .mediachecker { grid-area: image; position: absolute; z-index: 10; width: 35px; height: 35px; background-color: #fff; right: 0; top: 0; border-bottom-left-radius: 15px; display: none; } .media_element .media_info { grid-area: info; line-height: 1.2rem; font-size: 1rem; padding: 1rem 2rem; } @media print { .media_element .media_info { padding-top: 0; } } .media_element .media_info div { display: inline; } .media_element .media_info div::after { content: "•"; color: var(--color-main-1); padding: 0 0.3rem; } .media_element .media_info div:last-of-type::after { content: none; } .media_element .media_info div:first-of-type { padding-left: 0; } .media_element.gal .media_info { overflow: hidden; } .media_element.gal .media_info div { white-space: nowrap; } .media_element .media_title { grid-area: title; } .media_element .media_title h4 { margin-top: 1rem; margin-bottom: 0; } .media_element .media_text { grid-area: text; } .media_element .res_footer_buttons { grid-area: buttons; width: 100%; position: relative; background-color: white; align-self: stretch; padding: 2rem 0.5rem 1rem 0.5rem; display: flex; justify-content: flex-end; font-size: 1.6rem; } .media_element .res_footer_buttons button, .media_element .res_footer_buttons a { color: var(--color); background-color: var(--background-color); border-left: 1px solid var(--border-color); padding-left: 0; padding-right: 0; } .media_element .res_footer_buttons button:first-of-type, .media_element .res_footer_buttons a:first-of-type { border-left: none; } .media_element .res_footer_buttons button i, .media_element .res_footer_buttons a i { padding-left: 1.5rem; padding-right: 1.5rem; } .media_element .res_footer_buttons button.call_h5p i, .media_element .res_footer_buttons a.call_h5p i { padding-left: 0.75rem; padding-right: 0.75rem; } .media_element.gal { display: grid; grid-template-columns: 1fr; grid-template-rows: min-content min-content min-content min-content max-content auto; grid-template-areas: "image" "info" "title" "rating" "text" "buttons"; border: var(--media-element-border); border-radius: var(--border-radius); /* .media_btn { padding-left: 1rem; border: none; color: $main-col1; .btn { text-align: left; width: 140px; margin: 0.8rem 0.4rem 0 0; display: inline-block; background: lighten($main-col2, 12%); position: relative; .iright { position: absolute; right: 0.5rem; top: 0.5rem; } &:hover { background: $main-col2; color: white; } } }*/ } @media print { .media_element.gal { grid-template-areas: "image info" "image title" "image rating" "image text" "image buttons"; grid-template-columns: 20%; } } .media_element.gal .media_btn [data-onclick="window.print"] { display: none; } .media_element.gal .media_title { padding-bottom: 0.5rem; padding-left: 2rem; padding-right: 2rem; } .media_element.gal .media_title h4 { margin-top: 0; } .media_element.gal .media_rating { font-size: 12px; margin-bottom: 0; display: block; color: orange; grid-area: rating; padding: 0 2rem; } .media_element.gal .media_text { padding-left: 2rem; padding-right: 2rem; } .media_element.gal .media_record { display: none; } .media_element.gal .res_footer_buttons { align-self: end; } .media_element.media_element_tab { background-color: transparent; display: grid; grid-gap: 2rem 3rem; grid-template-columns: 1% 1fr 1.2fr 1%; grid-template-rows: repeat(9, min-content); grid-template-areas: " . nav nav . " " . title title . " " . image info . " " . image text . " " . buttons text . " " . . text . " " . extra text ." " . seqs seqs ." " . record record ."; align-items: start; } @media (max-width: 1280px) { .media_element.media_element_tab { grid-template-columns: 0 1fr 1.2fr 0; } } @media (max-width: 992px) { .media_element.media_element_tab { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "nav " " title " "image " "buttons " " info " " text " " extra" "seqs" " record"; } } @media (max-width: 992px) { .media_element.media_element_tab { padding-left: 1rem; padding-right: 1rem; padding-bottom: 1rem; } } .media_element.media_element_tab .record_back { grid-area: nav; } .media_element.media_element_tab .media_title { border-radius: var(--border-radius); background-color: var(--color-main-2-light); padding: 1rem 3rem; } .media_element.media_element_tab .media_title h3 { font-size: 1.2rem; line-height: 1.5rem; margin: 0; } .media_element.media_element_tab .media_title h1 { font-size: 2rem; line-height: 2.5rem; margin: 0; margin-right: 75px; } @media (max-width: 811px) { .media_element.media_element_tab .media_title h1 { margin-right: 0; } } .media_element.media_element_tab .media_info { padding: 0; font-size: 1.2rem; } .media_element.media_element_tab .res_footer_buttons { grid-area: buttons; bottom: 0; align-self: top; justify-self: end; width: -moz-fit-content; width: fit-content; height: auto; margin: 0; display: block; z-index: 50; padding: 0.5rem 1.2rem; border-radius: var(--border-radius); display: flex; align-items: center; } .media_element.media_element_tab .res_footer_buttons .call_h5p { display: none; } .media_element.media_element_tab .feedback { grid-area: feedback; justify-self: end; display: none; } .media_element.media_element_tab .tempshare { grid-area: extra; align-self: center; font-size: 2rem; } .media_element.media_element_tab .tempshare i { color: var(--color-main-1); font-size: 3rem; vertical-align: middle; margin-right: 0.6rem; } @media (max-width: 992px) { .media_element.media_element_tab .tempshare { font-size: 1.8rem; } } .media_element.media_element_tab .print_rec_btn, .media_element.media_element_tab .medialink { --btn-width: 5.6rem; grid-area: title; align-self: center; justify-self: end; padding: 0 1.2rem; } .media_element.media_element_tab .print_rec_btn a, .media_element.media_element_tab .medialink a { font-size: 1.6rem; color: var(--color-main-1); } .media_element.media_element_tab .print_rec_btn a:hover, .media_element.media_element_tab .medialink a:hover { color: var(--color-main-2); } .media_element.media_element_tab .print_rec_btn a i, .media_element.media_element_tab .medialink a i { display: block; } @media (max-width: 811px) { .media_element.media_element_tab .print_rec_btn a, .media_element.media_element_tab .medialink a { font-size: 1.6rem; padding: 0.7rem; } } @media (max-width: 811px) { .media_element.media_element_tab .print_rec_btn, .media_element.media_element_tab .medialink { --btn-width: 5.0rem; grid-area: buttons; align-self: start; border: transparent; background-color: #fff; padding: 0; width: var(--btn-width); height: 3.6rem; display: flex; justify-self: start; } .media_element.media_element_tab .print_rec_btn a, .media_element.media_element_tab .medialink a { display: block; margin: auto; } } .media_element.media_element_tab .medialink { margin-right: 4rem; position: relative; } @media (max-width: 811px) { .media_element.media_element_tab .medialink { border-radius: var(--border-radius) 0 0 var(--border-radius); border-right-style: none; position: relative; margin-right: calc(var(--btn-width) - 1px); } } .media_element.media_element_tab .medialink .share_url { position: absolute; top: 100%; right: 0; margin-top: 2rem; min-width: -moz-fit-content; min-width: fit-content; } @media (max-width: 811px) { .media_element.media_element_tab .medialink .share_url { display: none; } } @media (max-width: 811px) { .media_element.media_element_tab .print_rec_btn { border-radius: 0 var(--border-radius) var(--border-radius) 0; border-left-style: none; margin-right: 0; margin-left: var(--btn-width); } } .media_element.media_element_tab .clips_wrapper { grid-area: seqs; } .media_element.media_element_tab .clips_wrapper .clipshead { background-color: var(--btn-primary-default-background-color); color: var(--btn-primary-default-color); height: 40px; width: 200px; border-radius: var(--border-radius); } .media_element.media_element_tab .clips_wrapper .clipshead h4 { margin: 0; } @media (max-width: 599px) { .media_element.media_element_tab .clips_wrapper .clipshead { width: 100%; } } .media_element.media_element_tab .clips_wrapper .clips_container { display: grid; grid-gap: 3rem; padding-top: 2rem; padding-bottom: 2rem; grid-template-columns: repeat(auto-fill, 211px); } @media (max-width: 599px) { .media_element.media_element_tab .clips_wrapper .clips_container { justify-content: center; } } .media_element.media_element_tab .clips_wrapper .clips_container .clip_element { background-color: #fff; border-radius: var(--border-radius); border: 1px solid var(--color-main-1); display: grid; grid-template-rows: 118px 1fr auto; overflow: hidden; } .media_element.media_element_tab .clips_wrapper .clips_container .clip_element .clip_image { position: relative; } .media_element.media_element_tab .clips_wrapper .clips_container .clip_element .clip_image .clips_bg_img { position: relative; border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); } .media_element.media_element_tab .clips_wrapper .clips_container .clip_element .clip_image .playbutton { position: absolute; color: #fff; top: 0; bottom: 0; width: 100%; height: 100%; display: grid; align-items: center; justify-items: center; } .media_element.media_element_tab .clips_wrapper .clips_container .clip_element .clip_info { padding: 0.5rem 1rem 0.6rem 1rem; min-height: 80px; } .media_element.media_element_tab .clips_wrapper .clips_container .clip_element .clip_info h4 { margin-top: 0; } .media_element.media_element_tab .clips_wrapper .clips_container .clip_element .clip_info p { font-size: 1.2rem; } .media_element.media_element_tab .clips_wrapper .clips_container .clip_element .clipbuttons { text-align: right; padding: 1rem 2rem; } .media_element.media_element_tab .clips_wrapper .clips_container .clip_element .clipbuttons > * { margin-left: 1rem; } .media_element.media_element_tab .clips_wrapper .clips_container .clip_element:not(.inlist) .ce_flagged { display: none !important; } .media_element.media_element_tab .clips_wrapper .clips_container .clip_element:not(.inlist) .clip_to_mlist { display: inline-block; } .media_element.media_element_tab .clips_wrapper .clips_container .clip_element.inlist .ce_flagged { display: inline-block; } .media_element.media_element_tab .clips_wrapper .clips_container .clip_element.inlist .clip_to_mlist { display: none !important; } .media_element.media_element_tab .record_back { text-decoration: none; color: var(--color-main-1); font-size: 1.8rem; } .media_element.media_element_tab .media_record_print { display: none; } .media_element.media_element_tab .media_record_tabs { --min-tab-size: 150px; grid-area: record; display: grid; /* grid-template-areas: "head head head head head head" "body body body body body body";*/ grid-template-columns: repeat(auto-fit, minmax(var(--min-tab-size), 1fr)); } @media (max-width: 992px) { .media_element.media_element_tab .media_record_tabs { display: block; } } .media_element.media_element_tab .media_record_tabs .mr_tabshead { font-weight: 600; font-size: 1.5rem; margin-top: 1.8rem; margin-bottom: 0.3rem; display: inline; padding: 1rem; order: 1; text-align: center; cursor: pointer; color: var(--color); background-color: var(--background-color); border-color: var(--border-color); border-width: 1px; border-style: solid none; } .media_element.media_element_tab .media_record_tabs .mr_tabshead:first-of-type { border-radius: var(--border-radius) 0 0 var(--border-radius); border-left-style: solid; } .media_element.media_element_tab .media_record_tabs .mr_tabshead:last-of-type { border-radius: 0 var(--border-radius) var(--border-radius) 0; border-right-style: solid; } @media (max-width: 992px) { .media_element.media_element_tab .media_record_tabs .mr_tabshead { display: block; border-style: solid; border-radius: var(--border-radius); } .media_element.media_element_tab .media_record_tabs .mr_tabshead:first-of-type { border-radius: var(--border-radius); } .media_element.media_element_tab .media_record_tabs .mr_tabshead:last-of-type { border-radius: var(--border-radius); } } .media_element.media_element_tab .media_record_tabs .mr_tabsbody { display: none; order: 2; grid-column: 1/-1; padding: 3rem 0; word-break: break-word; } @media (max-width: 480px) { .media_element.media_element_tab .media_record_tabs .mr_tabsbody p { overflow-wrap: break-word; } } @media (max-width: 992px) { .media_element.media_element_tab .media_record_tabs .mr_tabsbody { height: auto !important; } } .media_element.media_ghost { opacity: 0.5; background-color: rgba(173, 173, 173, 0.2509803922); border-style: none; padding-bottom: 3rem; animation: 4s ghost infinite; } .media_element.media_ghost .media-img-wrapper { padding-bottom: 56.5%; /* 16:9 */ background-color: var(--ghost-color); } .media_element.media_ghost .media_title { margin-top: 1rem; } .media_element.media_ghost .media_title::before { content: "Lorem Ipsum dolor sit amet"; color: rgba(0, 0, 0, 0); display: inline; background: var(--ghost-color); line-height: 1.5; } .media_element.media_ghost .media_text { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; } .media_element.media_ghost .media_text::before { content: "Lorem Ipsum dolor sit amet foobar in quux dolor sit im Placeholder daisy duck sich nur ein zurecht gemacht daisy duck sich nur ein zurecht gemacht"; background: var(--ghost-color); color: rgba(0, 0, 0, 0); font-size: 1.1rem; line-height: 2.13rem; } .media_element.media_ghost:nth-child(12n+1) { animation-delay: 0s; } .media_element.media_ghost:nth-child(12n+2) { animation-delay: 0.1s; } .media_element.media_ghost:nth-child(12n+3) { animation-delay: 0.2s; } .media_element.media_ghost:nth-child(12n+4) { animation-delay: 0.3s; } .media_element.media_ghost:nth-child(12n+5) { animation-delay: 0.4s; } .media_element.media_ghost:nth-child(12n+6) { animation-delay: 0.5s; } .media_element.media_ghost:nth-child(12n+7) { animation-delay: 0.6s; } .media_element.media_ghost:nth-child(12n+8) { animation-delay: 0.7s; } .media_element.media_ghost:nth-child(12n+9) { animation-delay: 0.8s; } .media_element.media_ghost:nth-child(12n+10) { animation-delay: 0.9s; } .media_element.media_ghost:nth-child(12n+11) { animation-delay: 1s; } .media_element.media_ghost:nth-child(12n+12) { animation-delay: 1.1s; } .media-img-wrapper { grid-area: image; width: 100%; height: 100%; position: relative; display: grid; align-items: center; overflow: hidden; border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); z-index: 1; } @media print { .media-img-wrapper { border-top-right-radius: 0; border-top-left-radius: 0; } } .detailview .tabrecord .media-img-wrapper { border-radius: var(--border-radius); } .media-img-wrapper .bg-container { width: 240%; height: 180%; position: absolute; background-size: cover; filter: blur(8px) brightness(1.1) opacity(0.8); z-index: 1; background-origin: border-box; background-repeat: no-repeat; background-clip: border-box; overflow: hidden; justify-self: center; align-self: center; } @media print { .media-img-wrapper .bg-container { display: none; } } .media-img-wrapper .media-image { width: 100%; height: 100%; z-index: 2; } .media-img-wrapper .media-image img { -o-object-fit: contain; object-fit: contain; vertical-align: middle; } .devices .media-img-wrapper .media-image img { max-height: 200px; } @media print { .media-img-wrapper .media-image img { height: 100%; -o-object-position: top; object-position: top; } } .media-img-wrapper .media-image-overlay { z-index: 5; position: absolute; width: 100%; height: 100%; display: grid; justify-self: center; align-self: center; background-color: rgba(0, 0, 0, 0); transition: 2s; } @media print { .media-img-wrapper .media-image-overlay { display: none; } } .media-img-wrapper .media-image-overlay:hover { background-color: rgba(0, 0, 0, 0.3); transition: 2s; } .media-img-wrapper .media-image-overlay .playbutton, .media-img-wrapper .media-image-overlay .externbutton, .media-img-wrapper .media-image-overlay .rentbutton, .media-img-wrapper .media-image-overlay .h5p_playbutton { color: #fff; justify-self: center; align-self: center; } .media-img-wrapper .media-image-overlay .playbutton, .media-img-wrapper .media-image-overlay .externbutton { opacity: 0.75; } .media-img-wrapper .media-image-overlay .mediatype { top: 10px; right: 10px; display: none; } .media-img-wrapper .media-image-overlay .mediatype img { height: 30px; width: auto; } .media-img-wrapper .media-image-overlay .mediarights { position: absolute; top: 12px; left: 10px; display: none; } .media-img-wrapper .media-image-overlay p { background-color: rgba(255, 255, 255, 0.8); display: inline-block; vertical-align: middle; padding: 0 5px; border-radius: var(--border-radius); font-size: 1rem; } .mr_tags { margin-top: 0.5rem; display: block; } .mr_tags .btn, .mr_tags .lh_tabsnav li, .lh_tabsnav .mr_tags li { margin-bottom: 4px; margin-right: 4px; } .mr_tags_round .btn, .mr_tags_round .lh_tabsnav li, .lh_tabsnav .mr_tags_round li { border-radius: 50px; } @keyframes ghost { 0% { opacity: 0.5; } 20% { opacity: 0.5; } 25% { opacity: 0.25; } 30% { opacity: 0.5; } 100% { opacity: 0.5; } } .usercontent .media_element.list { height: auto !important; } .usercontent .media_element.list .media_text { height: auto !important; } .usercontent .media_element.gal .media_text { min-height: 50px; } .totallydisable { pointer-events: none; color: #adb5bd; } .totallydisable .media_info div { border-right: 1px solid #adb5bd; cursor: not-allowed; pointer-events: none; } .totallydisable .media-image-overlay { background-color: rgba(255, 255, 255, 0.8) !important; } .totallydisable .media-image-overlay .playbutton::before, .totallydisable .media-image-overlay .externbutton::before { content: "Nicht mehr verfügbar"; color: #000; font-weight: 600; } .totallydisable .media-image-overlay .playbutton i, .totallydisable .media-image-overlay .externbutton i { visibility: hidden; } .totallydisable .res_footer_buttons { visibility: hidden; } .totallydisable .mediachecker { pointer-events: all; } .footer { position: fixed; bottom: 0; background-color: var(--footer-bg); border-top: 1px solid var(--color-main-1); min-height: 40px; width: 100%; display: grid; grid-template-columns: 2fr min-content 2fr; grid-gap: 0 2rem; padding: 1rem 2rem; vertical-align: middle; align-content: center; align-items: center; z-index: 200; } body.bigfoot_is_in_viewport .footer { display: none; } .footer a { font-size: 1.4rem; margin-right: 1rem; white-space: nowrap; } .footer a i { color: var(--color-main-1); vertical-align: middle; margin: 0; } .footer .footer-left { justify-self: left; } .footer .footer-left img { display: inline-block; height: 30px; width: auto; margin-left: 1rem; margin-top: 3px; } .footer .footer-left p { margin-bottom: 0; } .footer .footer-right { justify-self: right; } .bigfoot { background-color: #EAEAEA; border-top: none; /* hscrll 600 - 796 */ } .overview_details_wrapper:not(.showdetails) .bigfoot { margin-bottom: calc(-1 * (var(--actual-footer-height) + 4rem)); } .bigfoot .bigfoot_wrapper { --grid-gap-x: 1.6rem; --grid-gap-y: 5rem; --grid-areas: "bfc_1 bfc_2 bfc_3 bfc_4 bfc_5"; width: 100%; display: grid; grid-gap: var(--grid-gap-y) calc(2 * var(--grid-gap-x)); grid-template-areas: var(--grid-areas); padding: 2rem var(--grid-gap-x); } @media (max-width: 992px) { .bigfoot .bigfoot_wrapper { --grid-areas: "bfc_1 bfc_1 bfc_1 bfc_2 bfc_2 bfc_2" "bfc_3 bfc_3 bfc_4 bfc_4 bfc_5 bfc_5"; --grid-gap-y: 3rem; } } @media (max-width: 480px) { .bigfoot .bigfoot_wrapper { --grid-areas: "bfc_1 bfc_1" "bfc_2 bfc_2" "bfc_3 bfc_4" "bfc_5 bfc_5"; } } .bigfoot .bigfoot_wrapper .bigfoot_content { margin: auto; } .bigfoot .bigfoot_wrapper .bigfoot_content a { font-size: 1.6rem; } .bigfoot .bigfoot_wrapper .bfc_1 { grid-area: bfc_1; display: grid; grid-template-columns: auto auto; grid-template-rows: 1fr 1fr; place-items: center center; grid-column-gap: 2rem; } .bigfoot .bigfoot_wrapper .bfc_1 img { height: 90px; width: auto; grid-row: 1/-1; } .bigfoot .bigfoot_wrapper .bfc_2 { grid-area: bfc_2; display: grid; grid-gap: 0.5rem; } .bigfoot .bigfoot_wrapper .bfc_2 i { color: var(--color-main-1); } .bigfoot .bigfoot_wrapper .bfc_3 { grid-area: bfc_3; } .bigfoot .bigfoot_wrapper .bfc_4 { grid-area: bfc_4; display: grid; grid-gap: 0.9rem; } @media (max-width: 992px) { .bigfoot .bigfoot_wrapper .bfc_3, .bigfoot .bigfoot_wrapper .bfc_4 { margin-bottom: auto; } } .bigfoot .bigfoot_wrapper .bfc_5 { grid-area: bfc_5; } .bigfoot .bigfoot_wrapper .bfc_5 a i { color: var(--color-main-1); vertical-align: middle; margin: 0 0.5rem; } .medialists, .eduids, .medialist_tab, .kla-regal-tabsbody, #eduidmedialists, .schoolmaster { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); grid-gap: 3rem; height: -moz-fit-content; height: fit-content; } .playlisthead { grid-template-columns: 2fr 1fr; grid-template-rows: 60px 1fr 40px; grid-template-areas: "listhead listhead" "hints options" "edit edit"; } @media (max-width: 992px) { .playlisthead { grid-template-columns: 1fr; grid-template-rows: 60px 1fr 40px; grid-template-areas: "listhead" "hints" "edit"; } } @media (max-width: 811px) { .playlisthead { grid-template-rows: 60px 50px 1fr 40px; grid-template-areas: "listhead" "options" "hints" "edit"; } } @media (max-width: 480px) { .playlisthead { grid-template-rows: 60px 50px 1fr min-content; } } .eduidlisthead { grid-template-columns: 2fr 1fr; grid-template-rows: 60px 1fr min-content; grid-template-areas: "listhead listhead" "hints options" "edit edit"; } @media (max-width: 992px) { .eduidlisthead { grid-template-columns: 1fr; grid-template-rows: 60px auto 1fr min-content; grid-template-areas: "listhead" "hints" "options" "edit"; } } @media (max-width: 480px) { .eduidlisthead { grid-template-rows: 60px auto 1fr min-content; } } @media (min-width: 1920px) { .eduidlisthead { grid-template-columns: 1fr 1fr; } } .eduidlisthead .eduid_options { grid-area: options; margin-bottom: auto; } .eduidlisthead .eduid_options { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); grid-gap: 1rem; } .eduidlisthead .eduid_options .edu_viko { grid-column: 1/-1; } .eduidlisthead .eduid_options .edu_viko > p > span { display: grid; grid-gap: 1rem; grid-template-columns: repeat(3, max-content); } @media (max-width: 1920px) { .eduidlisthead .eduid_options .edu_viko > p > span { grid-template-columns: max-content; } } @media (max-width: 992px) { .eduidlisthead .eduid_options .edu_viko > p > span { grid-template-columns: repeat(3, max-content); } } .playlisthead, .eduidlisthead { display: grid; grid-gap: 5rem; margin-top: 4rem; } @media print { .playlisthead, .eduidlisthead { display: none; } } @media (max-width: 811px) { .playlisthead, .eduidlisthead { grid-gap: 2rem; } } .playlisthead .lh_badge, .eduidlisthead .lh_badge { grid-area: listhead; z-index: 3; height: 100%; width: 60px; background-color: #fff; border-radius: calc(var(--border-radius) * 2); border: 1px solid #EAEAEA; } .playlisthead .lh_title, .eduidlisthead .lh_title { grid-area: listhead; border-radius: calc(var(--border-radius) * 2); background-color: var(--inline-edit-background); padding: 1rem 13rem 1rem 7rem; } .playlisthead .lh_title p, .eduidlisthead .lh_title p { margin: 0; } @media (max-width: 811px) { .playlisthead .lh_title, .eduidlisthead .lh_title { padding: 1rem 1rem 1rem 7rem; } } .playlisthead .lh_share, .eduidlisthead .lh_share { grid-area: listhead; display: block; justify-self: end; padding: 1.2rem; margin-right: 4rem; } .playlisthead .mlh_linkshare, .eduidlisthead .mlh_linkshare { position: relative; grid-area: listhead; display: block; justify-self: end; padding: 1.2rem; margin-right: 0rem; } .playlisthead .mlh_linkshare .share_url, .eduidlisthead .mlh_linkshare .share_url { position: absolute; top: 100%; right: 0; width: -moz-fit-content; width: fit-content; } .playlisthead .lh_share, .playlisthead .mlh_linkshare, .eduidlisthead .lh_share, .eduidlisthead .mlh_linkshare { --btn-width: 5.6rem; display: flex; } .playlisthead .lh_share a, .playlisthead .mlh_linkshare a, .eduidlisthead .lh_share a, .eduidlisthead .mlh_linkshare a { color: var(--color-main-1); margin: auto; } .playlisthead .lh_share a:hover, .playlisthead .mlh_linkshare a:hover, .eduidlisthead .lh_share a:hover, .eduidlisthead .mlh_linkshare a:hover { color: var(--color-main-2); } @media (max-width: 811px) { .playlisthead .lh_share, .playlisthead .mlh_linkshare, .eduidlisthead .lh_share, .eduidlisthead .mlh_linkshare { --btn-width:5rem; grid-area: options; border: 1px solid #EAEAEA; padding: 0; width: var(--btn-width); height: 3.6rem; display: flex; } .playlisthead .lh_share a, .playlisthead .mlh_linkshare a, .eduidlisthead .lh_share a, .eduidlisthead .mlh_linkshare a { display: block; margin: auto; } .playlisthead .lh_share i, .playlisthead .mlh_linkshare i, .eduidlisthead .lh_share i, .eduidlisthead .mlh_linkshare i { color: var(--color-main-1); font-size: 1.6rem; } } @media (max-width: 811px) { .playlisthead .lh_share, .eduidlisthead .lh_share { border-radius: var(--border-radius) 0 0 var(--border-radius); border-right-style: none; position: relative; margin-right: calc(var(--btn-width) - 1px); } .playlisthead .lh_share::after, .eduidlisthead .lh_share::after { content: ""; height: 2rem; width: 0; display: block; border-right: 1px solid var(--color-main-1); align-self: center; } .playlisthead .mlh_linkshare, .eduidlisthead .mlh_linkshare { border-radius: 0 var(--border-radius) var(--border-radius) 0; border-left-style: none; margin-right: 0; } } .playlisthead .bemerkung, .eduidlisthead .bemerkung { grid-area: hints; } .playlisthead .list_edit, .eduidlisthead .list_edit { grid-area: edit; border: 1px solid #404040; border-radius: var(--border-radius); display: flex; } .playlisthead .list_edit .nav_row, .eduidlisthead .list_edit .nav_row { justify-self: center; } .playlisthead .list_edit .list_edit_buttons a, .eduidlisthead .list_edit .list_edit_buttons a { color: var(--color); border-color: var(--border-color); background-color: var(--background-color); } .schoolmaster.teacherids .inlineedit-element, .schoolmaster.teacherids .inlineedit-element.inlineedit-editor-text { width: 100%; background: #fff; } .schoolmaster_accounts_list .workspace { grid-template-rows: 30px 30px; } .tabsbody_head { grid-template-rows: 30px 30px 30px; } .schoolmaster_accounts_list .workspace, .tabsbody_head { display: grid; grid-template-columns: 1fr; /* grid-template-areas: "listhead listhead" "hints options" "edit edit";*/ grid-gap: 1rem; } .schoolmaster_accounts_list .workspace .lh_items_trash, .tabsbody_head .lh_items_trash { justify-self: end; } .schoolmaster_accounts_list .workspace .list_edit, .tabsbody_head .list_edit { border: 1px solid #404040; border-radius: var(--border-radius); display: grid; grid-template-columns: 60px max-content auto; overflow: hidden; } .schoolmaster_accounts_list .workspace .list_edit .exportbuttons, .tabsbody_head .list_edit .exportbuttons { place-self: center end; margin-right: 1rem; } @media (max-width: 480px) { .schoolmaster_accounts_list .workspace .list_edit .exportbuttons, .tabsbody_head .list_edit .exportbuttons { margin-right: 0.1rem; } } .teacherid_buttonbar .addids, .eduid_buttonbar .addids, .edulist-modal .addids { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; width: 60px; line-height: 25px; margin-right: 5px; padding-right: 0; background-color: transparent; } .edulist-modal .addids { border: var(--form-element-border); border-radius: var(--border-radius); margin-left: 8px; padding: 8px 4px 8px 15px; width: 71px; } .teacherid_buttonbar .addids, .eduid_buttonbar .addids { padding-left: 15px; background-color: #fff; } .lists_element { display: grid; grid-template-rows: 40px 50px 1fr; grid-template-columns: 60px 1fr 60px; grid-column-gap: 2rem; grid-template-areas: "img badge check" "img title buttons" "img text buttons"; align-content: center; border-radius: var(--border-radius); background-color: #fff; overflow: hidden; z-index: 1; } .eduid_details .lists_element, .medialists .lists_element { border: var(--medialist-element-border); } .eduids .lists_element { border: var(--eduids-element-border); } .overview_details_wrapper.showdetails .medialists .lists_element, .overview_details_wrapper.showdetails .eduids .lists_element { border: 1px solid #404040; } .overview_details_wrapper.showdetails .medialists .lists_element:not(.lastchosen), .overview_details_wrapper.showdetails .eduids .lists_element:not(.lastchosen) { /* opacity: 0.2; */ opacity: 0.4; } @media (max-width: 480px) { .lists_element { grid-template-columns: 0 1fr 60px; } } .lists_element .le_badge { grid-area: badge; } .lists_element .le_check { grid-area: check; padding-right: 1rem; justify-content: flex-end; } .lists_element .le_check.medialists { display: none; } .lists_element .le_title { grid-area: title; } .lists_element .le_title h4 { margin: 0; font-size: 1.6rem; } .lists_element .le_text { grid-area: text; padding: 1rem 0; width: 100%; overflow: clip; word-break: break-all; } .lists_element .le_picture { grid-area: img; background-color: #EAEAEA; opacity: 0.6; } .lists_element .le_buttons { grid-area: buttons; flex-direction: column; align-self: end; padding: 1rem 0; } .lists_element .edu_viko { grid-column: 1/4; display: none; align-items: center; padding: 1rem; border-top: var(--eduids-element-border); } body:not(.showdetails) .lists_element .edu_viko { display: flex; } .lists_element .edu_viko > * { margin-top: 0; margin-bottom: 0; } .lists_element .edu_viko h4 { font-size: 1.6rem; font-weight: 400; margin-right: 0.5rem; } .medialists .le_check { display: none; } .medialists .le_picture { opacity: 0.7; } .eduids .le_picture { background-color: #dee2e6; background-image: url("../bilder/key_white.svg"); background-position: center; background-size: 100%; background-repeat: no-repeat; } .schoolmaster_accounts_list { grid-column: 1/-1; } .schoolmaster_accounts_list .lists_element { grid-template-rows: 30px 1fr; } .eduid_tabsbody .lists_element { grid-template-rows: 30px 1fr 30px; } .eduid_tabsbody .lists_element .le_text { border-bottom: var(--eduids-element-border); } .schoolmaster_accounts_list, .eduid_tabsbody { display: grid; grid-gap: 3rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); padding-top: 2.4rem; } .schoolmaster_accounts_list .lists_element, .eduid_tabsbody .lists_element { display: grid; grid-template-columns: max-content 1fr 60px; grid-column-gap: 2rem; grid-template-areas: "title extra check" "text text text" "buttons buttons buttons"; align-content: center; border: var(--eduids-element-border); border-radius: var(--border-radius); } .schoolmaster_accounts_list .lists_element .eduid_exp, .eduid_tabsbody .lists_element .eduid_exp { grid-area: extra; } .schoolmaster_accounts_list .lists_element .le_text, .eduid_tabsbody .lists_element .le_text { border-top: var(--eduids-element-border); padding: 1rem; } .schoolmaster_accounts_list .lists_element .le_buttons, .eduid_tabsbody .lists_element .le_buttons { flex-direction: row; align-self: center; padding: 0 1rem; justify-content: end; } .schoolmaster_accounts_list .lists_element .le_buttons .show_qr, .eduid_tabsbody .lists_element .le_buttons .show_qr { font-size: 2rem; } .schoolmaster_accounts_list .lists_element .le_title, .eduid_tabsbody .lists_element .le_title { padding-left: 1rem; } .schoolmaster_accounts_list .lists_element .le_title h4, .eduid_tabsbody .lists_element .le_title h4 { font-size: 1.4rem; } .schoolmaster_accounts_list .hidden_id, .eduid_tabsbody .hidden_id { position: relative; } .schoolmaster_accounts_list .hidden_id i, .eduid_tabsbody .hidden_id i { color: var(--color-main-1); } .schoolmaster_accounts_list .hidden_id .fas, .eduid_tabsbody .hidden_id .fas { font-size: 10px; } .schoolmaster_accounts_list .hidden_id .show_id, .eduid_tabsbody .hidden_id .show_id { z-index: 2; position: relative; } .schoolmaster_accounts_list .hidden_id .hide_id, .eduid_tabsbody .hidden_id .hide_id { background-color: white; position: absolute; left: 28px; padding: 5px; top: -6px; opacity: 1; z-index: 3; } .schoolmaster_accounts_list .hidden_id .hide_id.hide_id_nope, .eduid_tabsbody .hidden_id .hide_id.hide_id_nope { opacity: 0; z-index: 1; transition: 2s; } .share_url { display: block; margin-top: 1rem; width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .share_url, .share_url:focus { background-color: #EAEAEA; } .fa-key { color: #EAEAEA; } .kla-regal-tabsbody .mediachecker { display: none; } .kla-regal-tabsbody .lists_element.clickable { cursor: auto !important; } .qr_modal canvas { max-width: 100%; } .a_modal input[type=text], .a_modal input[type=password], .a_modal input[type=email], .a_modal textarea, .share_url { box-sizing: border-box; border-radius: var(--border-radius); padding: 8px max(0.5em, var(--border-radius) * 0.5); outline: none; font-size: 1.5rem; color: #6c757d; } .a_modal input[type=text], .a_modal input[type=password], .a_modal input[type=email], .a_modal textarea, .share_url { background-color: #fff; border: var(--form-element-border); } /* Globale layouts für Formular-Elemente (Erstmal nur ein Fall für die Science-Fiction-Liste) */ .formgroup-horizontal { display: flex; align-items: center; } .formgroup-label { min-width: -moz-max-content; min-width: max-content; margin-right: 0.25em; flex: 0; } .formgroup-label + * { flex: 1; } .searchbar .extra_search { vertical-align: top; border-radius: var(--border-radius); padding: 2rem 0; display: grid; grid-template-columns: auto auto auto; grid-template-rows: 40px; gap: 2rem 2rem; } .searchbar .extra_search > :not(select) { align-items: center; justify-self: end; display: grid; grid-template-columns: 1em auto; gap: 0.5em; } .searchbar .extra_search > :not(select) input[type=checkbox] { -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0; font: inherit; color: currentColor; width: 1.15em; height: 1.15em; border-radius: 0.15em; transform: translateY(-0.075em); display: grid; place-content: center; padding: 0; background-color: var(--search-input-background); border: var(--search-input-border); } .searchbar .extra_search > :not(select) input[type=checkbox]::before { content: ""; width: 0.65em; height: 0.65em; transform: scale(0); transition: 120ms transform ease-in-out; box-shadow: inset 1em 1em var(--color-main-1); transform-origin: bottom left; -webkit-clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); } .searchbar .extra_search > :not(select) input[type=checkbox]:checked::before { transform: scale(1); } .searchbar .extra_search select { vertical-align: top; height: 40px; background-color: var(--search-input-background); border: var(--search-input-border); border-radius: var(--border-radius); padding-left: 1rem; } @media (max-width: 599px) { .searchbar .extra_search { grid-template-columns: auto; grid-template-rows: auto; } .searchbar .extra_search .btn, .searchbar .extra_search .lh_tabsnav li, .lh_tabsnav .searchbar .extra_search li { height: 40px; } .searchbar .extra_search .olonly { justify-self: center; } } .ajaxautoselect { background: #fff; height: auto; max-height: calc(10 * var(--font-line-height) + 100px); overflow: auto; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); } .ajaxautoselect [type=radio] { display: none; } .ajaxautoselect [type=radio]:checked + .label { background-color: var(--color-main-1); color: #fff; } .ajaxautoselect label { display: block; } .ajaxautoselect label:hover { background-color: #e9ecef; } .ajaxautoselect .label { display: block; padding: 10px; } .inlineedit-element { --marker-right: max( 0.5em, calc( var(--border-radius) * 0.5 ) ); --marker-size: 16px; --font-line-height:calc( 1.6rem * 1.3 ); /* */ padding: 0.8rem; width: -moz-fit-content; width: fit-content; min-width: 120px; position: relative; /* */ background-color: var(--inline-edit-background); padding-right: calc(2.4rem + var(--marker-right)); border-radius: var(--border-radius); position: relative; /* type specific */ /* context specific */ } .inlineedit-element em { display: inline-block; font-style: normal; font-weight: 600; } .inlineedit-element input { outline: none !important; border: none; } .inlineedit-element.clamp1 { max-height: 2.08rem; } .inlineedit-element.clamp2 { max-height: 4.16rem; } .inlineedit-element.clamp3 { max-height: 6.24rem; } .inlineedit-element.clamp4 { max-height: 8.32rem; } .inlineedit-element.clamp5 { max-height: 10.4rem; } .inlineedit-element.clamp6 { max-height: 12.48rem; } .inlineedit-element.fx-center { display: -webkit-box; } .inlineedit-element::after { content: none; font-family: "Font Awesome 5 Pro"; font-weight: 400; font-size: 1.6rem; position: absolute; right: var(--marker-right); top: 0; height: 100%; display: flex; align-items: center; pointer-events: none; } .inlineedit-element.inlineedit-passiveelement { /* */ background-color: var(--inline-edit-background); padding: 0.2rem 40px 0.2rem 1rem; display: -webkit-box; border-radius: var(--border-radius); min-height: 40px; height: -moz-fit-content; height: fit-content; /* */ padding-top: calc(var(--font-line-height) * 0.5); padding-bottom: calc(var(--font-line-height) * 0.5); padding-left: calc(var(--font-line-height) * 0.5); } .inlineedit-element.inlineedit-passiveelement::after { content: "\f040"; /* fa-pencil */ } .inlineedit-element:not(.inlineedit-passiveelement), .inlineedit-element.inlineedit-activeelement { width: 100%; padding-right: 0; } .inlineedit-element:not(.inlineedit-passiveelement) select, .inlineedit-element:not(.inlineedit-passiveelement) input, .inlineedit-element.inlineedit-activeelement select, .inlineedit-element.inlineedit-activeelement input { outline: none !important; border: none; padding: calc(var(--font-line-height) * 0.5); border-radius: var(--border-radius); } .inlineedit-element:not(.inlineedit-passiveelement) select:not([type=checkbox]):not([type=radio]), .inlineedit-element:not(.inlineedit-passiveelement) input:not([type=checkbox]):not([type=radio]), .inlineedit-element.inlineedit-activeelement select:not([type=checkbox]):not([type=radio]), .inlineedit-element.inlineedit-activeelement input:not([type=checkbox]):not([type=radio]) { min-width: 100%; } .inlineedit-element .inlineedit-container { display: flex; overflow: visible; min-width: 100%; } .inlineedit-element .inlineedit-container, .inlineedit-element .inlineedit-container > :not([type=checkbox]) { width: 100%; line-height: 1.3; } .inlineedit-element.inlineedit-editor-text, .inlineedit-element.inlineedit-editor-ajaxselect { /*&.clamp2, &.clamp3, &.clamp4, &.clamp5, &.clamp6 { padding-top: 0; padding-bottom: 0; }*/ } .inlineedit-element.inlineedit-editor-text.inlineedit-passiveelement, .inlineedit-element.inlineedit-editor-ajaxselect.inlineedit-passiveelement { background-color: var(--inline-edit-background); } .inlineedit-element.inlineedit-editor-text.inlineedit-passiveelement:empty::before, .inlineedit-element.inlineedit-editor-ajaxselect.inlineedit-passiveelement:empty::before { content: " "; } .inlineedit-element.inlineedit-editor-text:not(.inlineedit-passiveelement), .inlineedit-element.inlineedit-editor-text.inlineedit-activeelement, .inlineedit-element.inlineedit-editor-ajaxselect:not(.inlineedit-passiveelement), .inlineedit-element.inlineedit-editor-ajaxselect.inlineedit-activeelement { padding: 0; } .inlineedit-element.inlineedit-editor-text input, .inlineedit-element.inlineedit-editor-text.inlineedit-passiveelement, .inlineedit-element.inlineedit-editor-ajaxselect input, .inlineedit-element.inlineedit-editor-ajaxselect.inlineedit-passiveelement { padding-right: calc(max(0.5em, var(--border-radius)) + var(--marker-right) + var(--marker-size)); padding-left: max(0.5em, var(--border-radius)); } .inlineedit-element.inlineedit-editor-text .inlineedit-container, .inlineedit-element.inlineedit-editor-ajaxselect .inlineedit-container { height: 100% !important; } .inlineedit-element.inlineedit-editor-text input, .inlineedit-element.inlineedit-editor-ajaxselect input { min-width: 100%; background-color: rgba(0, 0, 0, 0); } .inlineedit-element.inlineedit-editor-text.inlineedit-activeelement, .inlineedit-element.inlineedit-editor-ajaxselect.inlineedit-activeelement { /* // text-editor testen: document.querySelectorAll('.inlineedit-editor-text').forEach(el=>{el.innerHTML='';el.classList.remove('inlineedit-passiveelement');el.classList.add('inlineedit-activeelement');}) */ } .inlineedit-element.inlineedit-editor-text.inlineedit-activeelement input, .inlineedit-element.inlineedit-editor-ajaxselect.inlineedit-activeelement input { box-sizing: border-box; } .inlineedit-element.inlineedit-editor-text.inlineedit-activeelement .inlineedit-container, .inlineedit-element.inlineedit-editor-ajaxselect.inlineedit-activeelement .inlineedit-container { width: 100% !important; } .lh_title .inlineedit-element.inlineedit-editor-text, .lh_title .inlineedit-element.inlineedit-editor-ajaxselect { -webkit-box-pack: center; } .inlineedit-element.inlineedit-editor-ajaxselect .inlineedit-container > span:first-of-type { position: relative; } .inlineedit-element.inlineedit-editor-ajaxselect .ajaxautoselect { position: absolute; left: 0; right: 0; top: 100%; z-index: 1; } .inlineedit-element.inlineedit-editor-textarea { min-height: 4.16rem; padding: 0; border-style: solid; border-color: var(--inline-edit-background); border-top-width: calc(var(--font-line-height) * 0.5); border-bottom-width: calc(var(--font-line-height) * 0.5); border-left-width: calc(var(--font-line-height) * 0.5); border-right-width: calc(2.4rem + var(--marker-right)); } .inlineedit-element.inlineedit-editor-textarea.inlineedit-passiveelement::after { right: -2.4rem; } .inlineedit-element.inlineedit-editor-textarea .inlineedit-container { min-height: var(--font-line-height); } .inlineedit-element.inlineedit-editor-textarea textarea { padding: 0; box-sizing: border-box; width: inherit; height: auto; border-style: none; background-color: rgba(0, 0, 0, 0); resize: none; } .inlineedit-element.inlineedit-editor-date { /* // date-editor testen: document.querySelectorAll('.inlineedit-editor-date').forEach(el=>{el.innerHTML='';el.classList.remove('inlineedit-passiveelement');el.classList.add('inlineedit-activeelement');}) */ } .inlineedit-element.inlineedit-editor-date.inlineedit-passiveelement::after { content: "\f133"; } .inlineedit-element.inlineedit-editor-date:not(.inlineedit-passiveelement), .inlineedit-element.inlineedit-editor-date.inlineedit-activeelement { padding: 0; } .inlineedit-element.inlineedit-editor-date .inlineedit-container { height: auto !important; } .inlineedit-element.inlineedit-editor-date input { min-width: 100%; padding: calc(var(--font-line-height) * 0.5); background-color: rgba(0, 0, 0, 0); } .inlineedit-element.inlineedit-editor-easycheckbox { padding: 0; } .inlineedit-element.inlineedit-editor-dropdown::after { content: "\f107"; } .inlineedit-element.inlineedit-editor-dropdown:not(.inlineedit-passiveelement), .inlineedit-element.inlineedit-editor-dropdown.inlineedit-activeelement { padding: 0; } .inlineedit-element.inlineedit-editor-dropdown .inlineedit-container { height: auto !important; } .inlineedit-element.inlineedit-editor-dropdown select { padding: calc(var(--font-line-height) * 0.5); background-color: rgba(0, 0, 0, 0); border-style: none; -moz-appearance: none; -webkit-appearance: none; appearance: none; -moz-padding-start: calc(var(--font-line-height) * 0.5 - 4px); } .inlineedit-element.inlineedit-editor-dropdown select:focus { border-radius: var(--border-radius); outline: none; } .inlineedit-element.inlineedit-editor-checkbox, .inlineedit-element.inlineedit-editor-checkbox .inlineedit-container { display: flex; } .inlineedit-element.inlineedit-editor-checkbox.inlineedit-passiveelement::after { content: none; } .inlineedit-element.inlineedit-editor-checkbox:not(.inlineedit-passiveelement), .inlineedit-element.inlineedit-editor-checkbox.inlineedit-activeelement { padding-top: calc(var(--font-line-height) * 0.5); padding-bottom: calc(var(--font-line-height) * 0.5); padding-left: calc(var(--font-line-height) * 0.5); } .inlineedit-element.inlineedit-editor-checkbox input, .inlineedit-element.inlineedit-editor-checkbox .fa, .inlineedit-element.inlineedit-editor-checkbox .fas, .inlineedit-element.inlineedit-editor-checkbox .far, .inlineedit-element.inlineedit-editor-checkbox .fal { order: -1; line-height: 1.3; margin-right: 0; min-width: 22px; display: inline-block; } .inlineedit-element.inlineedit-editor-checkbox input.fa-square, .inlineedit-element.inlineedit-editor-checkbox .fa.fa-square, .inlineedit-element.inlineedit-editor-checkbox .fas.fa-square, .inlineedit-element.inlineedit-editor-checkbox .far.fa-square, .inlineedit-element.inlineedit-editor-checkbox .fal.fa-square { font-weight: 400; } .inlineedit-element.inlineedit-editor-checkbox input.fa-check-square, .inlineedit-element.inlineedit-editor-checkbox .fa.fa-check-square, .inlineedit-element.inlineedit-editor-checkbox .fas.fa-check-square, .inlineedit-element.inlineedit-editor-checkbox .far.fa-check-square, .inlineedit-element.inlineedit-editor-checkbox .fal.fa-check-square { font-weight: 900; } .inlineedit-element.inlineedit-editor-checkbox input { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0; border-style: none; background-color: transparent; border-radius: 0; /* Checkbox mit fa-icons versehen Getestet: - [x] Firefox Mac >>> braucht dbl-click - [ ] Safari iOS >>> geht mit 1x-click - [x] Safari Desktop >>> geht mit 1x-click - [x] Chrome Desktop >>> braucht dbl-click */ } .inlineedit-element.inlineedit-editor-checkbox input::after { font-family: "Font Awesome 5 Pro"; } .inlineedit-element.inlineedit-editor-checkbox input:checked::after { font-weight: 900; content: "\f14a"; } .inlineedit-element.inlineedit-editor-checkbox input:not(:checked)::after { font-weight: 400; content: "\f0c8"; } .lh_title .inlineedit-element:not(.inlineedit-passiveelement), .lh_title .inlineedit-element.inlineedit-activeelement { min-height: 4.16rem; } .inlineedit-element.bemerkung, .bemerkung .inlineedit-element { width: 100%; height: -moz-fit-content; height: fit-content; border-radius: var(--border-radius); } .inlineedit-element.bemerkung textarea, .bemerkung .inlineedit-element textarea { box-sizing: border-box; width: inherit; height: auto; } .inlineedit-element.bemerkung textarea:focus, .bemerkung .inlineedit-element textarea:focus { outline: none; } .le_teacherid .inlineedit-element, .le_eduid .inlineedit-element { display: block; width: 100%; } .eduid_options .inlineedit-element { margin-bottom: auto; width: 100%; } .lh_title { max-width: 100%; } .lh_title .edit_shadow { min-height: 40px; background-color: var(--inline-edit-background); border-radius: var(--border-radius); width: 100%; } .lh_title .inlineedit-element.inlineedit-passiveelement { height: auto; min-height: 1em; padding-top: 0; padding-bottom: 0; width: 100%; } .eduidselector, .medialistselector { --input-text-color: #6c757d; --input-bg-color: #ffffff; z-index: 3000; padding: 0 0 0.5rem 0; position: absolute; background-color: white; border: 1px solid var(--color-main-1); text-align: right; min-width: -moz-min-content; min-width: min-content; max-width: 400px; width: auto !important; /* override inline styles */ border-radius: var(--border-radius); overflow: hidden; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); /* override inline styles */ } .eduidselector .listselector_header, .eduidselector .listselector_newlist, .eduidselector .listselector_choose_search, .eduidselector .listselector_choose, .eduidselector .listselector_actions, .medialistselector .listselector_header, .medialistselector .listselector_newlist, .medialistselector .listselector_choose_search, .medialistselector .listselector_choose, .medialistselector .listselector_actions { padding-left: 1rem; padding-right: 1rem; } .eduidselector .listselector_header, .medialistselector .listselector_header { border-bottom: 1px solid var(--color-main-1); padding: 1rem max(1rem, var(--border-radius) * 0.7); text-align: left; display: flex; align-content: center; white-space: nowrap; } .eduidselector .listselector_header p, .medialistselector .listselector_header p { display: inline; font-weight: 700; margin: 0 auto 0 0; } .eduidselector .listselector_header button, .medialistselector .listselector_header button { border: none; background-color: #fff; padding: 0; font-size: 2rem; margin-left: 10px; } .eduidselector .listselector_newlist, .eduidselector .listselector_choose_search, .medialistselector .listselector_newlist, .medialistselector .listselector_choose_search { display: flex; position: relative; width: 100%; margin-top: 1rem; } .eduidselector .listselector_newlist .magicon, .eduidselector .listselector_choose_search .magicon, .medialistselector .listselector_newlist .magicon, .medialistselector .listselector_choose_search .magicon { width: 35px; height: 35px; margin-right: -35px; font-size: 2rem; color: #EAEAEA; pointer-events: none; display: flex; z-index: 1; } .eduidselector .listselector_newlist .magicon .fa, .eduidselector .listselector_newlist .magicon .far, .eduidselector .listselector_newlist .magicon .fas, .eduidselector .listselector_newlist .magicon .fab, .eduidselector .listselector_choose_search .magicon .fa, .eduidselector .listselector_choose_search .magicon .far, .eduidselector .listselector_choose_search .magicon .fas, .eduidselector .listselector_choose_search .magicon .fab, .medialistselector .listselector_newlist .magicon .fa, .medialistselector .listselector_newlist .magicon .far, .medialistselector .listselector_newlist .magicon .fas, .medialistselector .listselector_newlist .magicon .fab, .medialistselector .listselector_choose_search .magicon .fa, .medialistselector .listselector_choose_search .magicon .far, .medialistselector .listselector_choose_search .magicon .fas, .medialistselector .listselector_choose_search .magicon .fab { margin: auto; } .eduidselector .listselector_newlist .magicon + input, .eduidselector .listselector_choose_search .magicon + input, .medialistselector .listselector_newlist .magicon + input, .medialistselector .listselector_choose_search .magicon + input { padding-left: 40px; } .eduidselector .listselector_newlist input, .eduidselector .listselector_choose_search input, .medialistselector .listselector_newlist input, .medialistselector .listselector_choose_search input { box-sizing: border-box; border: 1px solid #EAEAEA; border-radius: var(--border-radius); padding: 0 var(--border-radius) 0 var(--border-radius); height: 35px; outline: none; width: 100%; font-size: 1.5rem; background-color: var(--input-bg-color); color: var(--input-text-color); } .eduidselector .listselector_newlist input + .btn, .eduidselector .listselector_newlist .lh_tabsnav input + li, .lh_tabsnav .eduidselector .listselector_newlist input + li, .eduidselector .listselector_choose_search input + .btn, .eduidselector .listselector_choose_search .lh_tabsnav input + li, .lh_tabsnav .eduidselector .listselector_choose_search input + li, .medialistselector .listselector_newlist input + .btn, .medialistselector .listselector_newlist .lh_tabsnav input + li, .lh_tabsnav .medialistselector .listselector_newlist input + li, .medialistselector .listselector_choose_search input + .btn, .medialistselector .listselector_choose_search .lh_tabsnav input + li, .lh_tabsnav .medialistselector .listselector_choose_search input + li { margin-left: -35px; } .eduidselector .listselector_newlist input, .medialistselector .listselector_newlist input { padding-right: 40px; } .eduidselector .listselector_newlist .btn, .eduidselector .listselector_newlist .lh_tabsnav li, .lh_tabsnav .eduidselector .listselector_newlist li, .medialistselector .listselector_newlist .btn, .medialistselector .listselector_newlist .lh_tabsnav li, .lh_tabsnav .medialistselector .listselector_newlist li { width: 35px; height: 35px; background-color: var(--color-main-1); vertical-align: top; color: #fff; cursor: pointer; font-size: 16px; margin-left: 5px; z-index: 10; font-size: 2rem; } .eduidselector .listselector_newlist .btn[disabled], .eduidselector .listselector_newlist .lh_tabsnav li[disabled], .lh_tabsnav .eduidselector .listselector_newlist li[disabled], .medialistselector .listselector_newlist .btn[disabled], .medialistselector .listselector_newlist .lh_tabsnav li[disabled], .lh_tabsnav .medialistselector .listselector_newlist li[disabled] { background-color: #ced4da; cursor: default; } .eduidselector .listselector_newlist .btn[disabled]:hover, .eduidselector .listselector_newlist .lh_tabsnav li[disabled]:hover, .lh_tabsnav .eduidselector .listselector_newlist li[disabled]:hover, .medialistselector .listselector_newlist .btn[disabled]:hover, .medialistselector .listselector_newlist .lh_tabsnav li[disabled]:hover, .lh_tabsnav .medialistselector .listselector_newlist li[disabled]:hover { background-color: #ced4da; color: #e9ecef; } .eduidselector .listselector_choose_search input, .eduidselector .listselector_choose select, .medialistselector .listselector_choose_search input, .medialistselector .listselector_choose select { min-width: initial !important; width: 100% !important; } .eduidselector .listselector_choose_search, .medialistselector .listselector_choose_search { border-top: 1px solid #ced4da; padding-top: 1rem; margin-top: 1rem; } .eduidselector .listselector_choose_search input, .medialistselector .listselector_choose_search input { padding-left: 35px; } .eduidselector .listselector_choose, .medialistselector .listselector_choose { margin: 1rem 0 0 0; } .eduidselector .listselector_choose select, .medialistselector .listselector_choose select { margin-bottom: 0.5rem; padding: 0; border: 1px solid #e9ecef; } @media (pointer: fine) { .eduidselector .listselector_choose select, .medialistselector .listselector_choose select { -webkit-appearance: none; -moz-appearance: none; appearance: none; overflow-y: scroll; scrollbar-width: none; -ms-overflow-style: none; } .eduidselector .listselector_choose select option[disabled], .medialistselector .listselector_choose select option[disabled] { display: none; } } @media (pointer: coarse) { .eduidselector .listselector_choose select, .medialistselector .listselector_choose select { border-radius: var(--border-radius); height: 35px; background-color: var(--input-bg-color); color: var(--input-text-color); } .eduidselector .listselector_choose select option, .medialistselector .listselector_choose select option { height: 100%; } } .eduidselector .listselector_choose select:focus, .medialistselector .listselector_choose select:focus { outline: none !important; } .eduidselector .listselector_choose select:hover, .medialistselector .listselector_choose select:hover { scrollbar-width: auto; } .eduidselector .listselector_choose option, .medialistselector .listselector_choose option { padding: 0.2rem 0.8rem; overflow: hidden; text-overflow: ellipsis; } .eduidselector .listselector_choose option:nth-of-type(2n), .medialistselector .listselector_choose option:nth-of-type(2n) { background: #f8f9fa; } .eduidselector .listselector_actions, .medialistselector .listselector_actions { padding: 1rem; } .btn, .lh_tabsnav li { display: inline-block; font-weight: 400; border-radius: var(--border-radius); text-align: center; vertical-align: top; -webkit-user-select: none; -moz-user-select: none; user-select: none; border-style: none; padding: var(--btn-padding, var(--btn-padding-default)); font-size: 1.5rem; line-height: 1.3; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; color: var(--color); border-color: var(--border-color); background-color: var(--background-color); border-style: var(--border-style, none); border-width: var(--border-width, 0); outline-width: var(--focus-outline-width, 0) !important; outline-style: var(--focus-outline-style, none) !important; outline-color: var(--focus-outline-color, transparent) !important; outline-offset: var(--focus-outline-offset, 0) !important; } .btn:is(:disabled, :disabled:active), .lh_tabsnav li:is(:disabled, :disabled:active), .btn[disabled], .lh_tabsnav li[disabled] { cursor: default; } .btn:not([disabled]):hover, .lh_tabsnav li:not([disabled]):hover { text-decoration: none; cursor: pointer; } .btn:not([disabled]):focus, .lh_tabsnav li:not([disabled]):focus, .btn:not([disabled]).focus, .lh_tabsnav li:not([disabled]).focus { box-shadow: 0 0 0 0.2rem rgba(70, 114, 180, 0.25); } .btn_outline { border-width: 1px; border-style: solid; } .btn_plain, .searchoption .externtooltip a { background: transparent; } .btn_plain, .searchoption .externtooltip a { border: none; } .btn_plain:not([disabled]):focus, .searchoption .externtooltip a:not([disabled]):focus, .btn_plain:not([disabled]).focus, .searchoption .externtooltip a:not([disabled]).focus { box-shadow: none; } @media (prefers-reduced-motion: reduce) { .btn, .lh_tabsnav li { transition: none; } } .btn-inline-group { display: inline-flex; } .btn-inline-group .btn, .btn-inline-group .lh_tabsnav li, .lh_tabsnav .btn-inline-group li { border-radius: 0; border: 1px solid var(--border-color); flex: 1; } .btn-inline-group .btn:first-child, .btn-inline-group .lh_tabsnav li:first-child, .lh_tabsnav .btn-inline-group li:first-child { border-radius: var(--border-radius) 0 0 var(--border-radius); padding-left: calc(var(--border-radius) * 0.5); } .btn-inline-group .btn:last-child, .btn-inline-group .lh_tabsnav li:last-child, .lh_tabsnav .btn-inline-group li:last-child { border-radius: 0 var(--border-radius) var(--border-radius) 0; padding-right: calc(var(--border-radius) * 0.5); } .btn-inline-group .btn:not(:last-child), .btn-inline-group .lh_tabsnav li:not(:last-child), .lh_tabsnav .btn-inline-group li:not(:last-child) { border-right-style: none; } .btn-group, .lh_tabsnav { position: relative; display: inline-flex; vertical-align: middle; } .btn-group .btn, .lh_tabsnav .btn, .lh_tabsnav li { border-radius: 0; border: 1px solid var(--border-color); flex: 1; } .btn-group .btn:first-child, .lh_tabsnav .btn:first-child, .lh_tabsnav li:first-child { border-radius: var(--border-radius) 0 0 var(--border-radius); } .btn-group .btn:last-child, .lh_tabsnav .btn:last-child, .lh_tabsnav li:last-child { border-radius: 0 var(--border-radius) var(--border-radius) 0; } .btn-group .btn:not(:last-child), .lh_tabsnav .btn:not(:last-child), .lh_tabsnav li:not(:last-child) { border-right-style: none; } .btn.fx-center-v, .lh_tabsnav li.fx-center-v { display: flex; } .mediaplayerclose { display: block; position: fixed; z-index: 5001; top: 1px; right: 10px; color: red; background-color: transparent; font-size: 2.5rem; } .mediaplayerclose:hover { background-color: transparent !important; } .login_methods_list { /* // Kommt von Jan, gibts aber gar nicht! div.loginselect { width : 100%; margin-top : 1em; xbackground-color : #EAEAEA; padding : 0.5em; //border-radius : 1em; } div.loginselect i { float: right; } div.loginselect:NOT(:last-child) { margin-bottom: 1em; border-bottom: 1px solid black; } */ } .login_methods_list a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; border-bottom: 1px solid #dee2e6; cursor: pointer; } .login_methods_list a:hover { color: #495057; } .login_methods_list a:last-of-type { border-bottom-style: none; } .a_modal .login_methods_list a { padding: 12px 0; } .a_modal .login_methods_list a .fa, .a_modal .login_methods_list a .fas, .a_modal .login_methods_list a .far, .a_modal .login_methods_list a .fal, .a_modal .login_methods_list a .fad, .a_modal .login_methods_list a .fab { margin-right: 0.25em; } .mlist_share .btn-group, .mlist_share .lh_tabsnav { margin-top: 1rem; width: 100%; } .mlist_share .btn, .mlist_share .lh_tabsnav li, .lh_tabsnav .mlist_share li { padding: 1rem; } .mlist_share .sharelist { margin: 1rem 0; } .mlist_share .sharelist input { margin-bottom: 1rem; } .mlist_share .sharelist .sharelistitem { height: 40px; border-bottom: 1px solid #adb5bd; display: grid; grid-template-columns: 1fr auto; align-items: center; } .mlist_share .sharelist .sharelistitem p { display: inline; } .mlist_share .sharelist .sharelistitem i { color: var(--color-main-1); font-size: 2.2rem; } .mlist_share .sharelist .sharelistitem:not([style*="display: none;"]) ~ .sharelistitem-no-result { display: none; } .mlist_share .sharelist .sharelistitem-no-result { text-align: center; font-style: italic; color: #495057; } .mlist_share .mlist_share_search { display: flex; } .mlist_share .mlist_share_search .magicon { width: 35px; height: 35px; margin-right: -35px; font-size: 2rem; color: #EAEAEA; pointer-events: none; display: flex; z-index: 1; } .mlist_share .mlist_share_search .magicon .fa, .mlist_share .mlist_share_search .magicon .far, .mlist_share .mlist_share_search .magicon .fas, .mlist_share .mlist_share_search .magicon .fab { margin: auto; } .mlist_share .mlist_share_search .magicon + input { padding-left: 40px; } .mlist_share .mlist_share_search input { box-sizing: border-box; background-color: #fff; border: 1px solid #EAEAEA; border-radius: var(--border-radius); padding: 0 var(--border-radius) 0 var(--border-radius); height: 35px; outline: none; width: 100%; font-size: 1.5rem; color: #6c757d; } #konto .workspace, #registerteacher .workspace { width: clamp(288px, 50vw, 750px); margin-left: auto; margin-right: auto; margin-bottom: 3rem; } #konto .inlineedit-element, #registerteacher .inlineedit-element { margin-bottom: 2rem; width: 100%; } #konto .inlineedit-element em, #registerteacher .inlineedit-element em { color: #adb5bd; font-weight: 400; } #konto .inlineedit-element:not(.inlineedit-editor-easycheckbox) + .registerwarning, #registerteacher .inlineedit-element:not(.inlineedit-editor-easycheckbox) + .registerwarning { margin-top: -2rem; margin-bottom: 2rem; margin-left: var(--border-radius); margin-right: var(--border-radius); } #konto .actions, #registerteacher .actions { display: flex; } #konto .actions .btn, #konto .actions .lh_tabsnav li, .lh_tabsnav #konto .actions li, #registerteacher .actions .btn, #registerteacher .actions .lh_tabsnav li, .lh_tabsnav #registerteacher .actions li { padding: 1rem 1.5rem; } #konto .actions .btn:last-of-type, #konto .actions .lh_tabsnav li:last-of-type, .lh_tabsnav #konto .actions li:last-of-type, #registerteacher .actions .btn:last-of-type, #registerteacher .actions .lh_tabsnav li:last-of-type, .lh_tabsnav #registerteacher .actions li:last-of-type { margin-left: auto; } #konto .btn.reg_button, #konto .lh_tabsnav li.reg_button, .lh_tabsnav #konto li.reg_button, #konto .btn.reg_tabshead:not(.active), #konto .lh_tabsnav li.reg_tabshead:not(.active), .lh_tabsnav #konto li.reg_tabshead:not(.active), #registerteacher .btn.reg_button, #registerteacher .lh_tabsnav li.reg_button, .lh_tabsnav #registerteacher li.reg_button, #registerteacher .btn.reg_tabshead:not(.active), #registerteacher .lh_tabsnav li.reg_tabshead:not(.active), .lh_tabsnav #registerteacher li.reg_tabshead:not(.active) { background-color: #fff; border: 1px solid var(--color-main-1); color: var(--color-main-1); } #konto .btn.reg_tabshead, #konto .lh_tabsnav li.reg_tabshead, .lh_tabsnav #konto li.reg_tabshead, #registerteacher .btn.reg_tabshead, #registerteacher .lh_tabsnav li.reg_tabshead, .lh_tabsnav #registerteacher li.reg_tabshead { padding-left: 2rem; padding-right: 2rem; } #registerteacher { padding-bottom: 8rem; } .call_h5p { display: none; } [data-mediatype="55"] .call_h5p, [data-mediatype="50"] .call_h5p, [data-mediatype="49"] .call_h5p, .clipbuttons .call_h5p { display: inline-block; } [data-mediaid^=sodix-] .call_h5p { display: none !important; } .media_element:not([data-mediaid^=sodix-]) .func-externbutton { display: none; } [data-mediaid^=sodix-] .playbutton, [data-mediaid^=sodix-] .func-playbutton { display: none; } [data-mediaid^=sodix-] .externbutton { display: block; } [data-mediaid^=sodix-] .func-toeducap { display: none; } .media_element:not([data-mediatype=UC_H5P]) .h5p_playbutton { display: none; } [data-mediasrc=offline] .func-toeducap, [data-mediasrc=offline] .func-playbutton, [data-mediasrc=offline] .func-downloadbutton, [data-mediasrc=offline] .call_h5p { display: none !important; } [data-mediasrc=online] .func-rentbutton { display: none !important; } :not(.inlist) .me_flagged { display: none; } :not(.inlist) .medialists_store { display: inline-block !important; } .inlist .me_flagged { display: inline-block; } .inlist .medialists_store { display: none !important; } body.notlogged .func-toeducap { display: none !important; } div.medialist .media_element.inlist .me_flagged { display: none !important; } .edit_h5p { display: none; } [data-mediasrc=usercontent] .edit_h5p { display: inline-block !important; } [data-mediasrc=usercontent] .call_h5p, [data-mediasrc=usercontent] .func-rentbutton, [data-mediasrc=usercontent] .func-downloadbutton { display: none !important; } [data-mediasrc=usercontent][data-mediatype=UC_H5P] .h5p_playbutton { display: block; } [data-mediasrc=usercontent][data-mediatype=UC_H5P] .playbutton { display: none; } @media only screen { #medialists_child_1, #eduidmedialists_child_1 { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-gap: 1.5rem; } } #medialists_child_1 .playlisthead .list_edit, #eduidmedialists_child_1 .playlisthead .list_edit { display: grid; grid-template-columns: max-content 1fr; align-items: center; } @media (max-width: 480px) { #medialists_child_1 .playlisthead .list_edit, #eduidmedialists_child_1 .playlisthead .list_edit { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; grid-gap: 2rem; padding: 1rem; } } #medialists_child_1 .playlisthead .list_edit .list_edit_buttons, #eduidmedialists_child_1 .playlisthead .list_edit .list_edit_buttons { grid-column: 1; justify-self: start; padding: 0 1.5rem; } @media (max-width: 480px) { #medialists_child_1 .playlisthead .list_edit .list_edit_buttons, #eduidmedialists_child_1 .playlisthead .list_edit .list_edit_buttons { justify-self: center; } } @media (max-width: 811px) { #medialists_child_1 .playlisthead .list_edit .list_edit_buttons, #eduidmedialists_child_1 .playlisthead .list_edit .list_edit_buttons { padding: 0 1rem; } } #medialists_child_1 .playlisthead .list_edit .list_edit_buttons a, #eduidmedialists_child_1 .playlisthead .list_edit .list_edit_buttons a { padding: 0 2rem; } @media (max-width: 811px) { #medialists_child_1 .playlisthead .list_edit .list_edit_buttons a, #eduidmedialists_child_1 .playlisthead .list_edit .list_edit_buttons a { padding: 0 1rem; } } #medialists_child_1 .playlisthead .list_edit .checkall, #eduidmedialists_child_1 .playlisthead .list_edit .checkall { grid-column: 2; grid-row: 1; justify-self: end; padding-right: 1rem; } @media (max-width: 480px) { #medialists_child_1 .playlisthead .list_edit .checkall, #eduidmedialists_child_1 .playlisthead .list_edit .checkall { grid-column: 1; grid-row: 2; } } .lh_tabsnav { grid-area: edit; justify-self: center; padding: 0; margin: 0; } .lh_tabsnav li { padding: 1rem; min-width: 150px; color: var(--color); border-color: var(--border-color); background-color: var(--background-color); } .lh_tabsnav li:not(.antares-active) { --background-color: #fff; } .lh_tabsnav li:not(.antares-active):hover { --background-color: #fff; } .eduidlisthead .lh_tabsnav li:not(.antares-active) { color: black !important; } .lh_tabsnav + hr { grid-area: edit; width: 100%; border-style: none; border-top: 1px solid var(--color-main-1); align-self: center; } .eduidlogged .res_footer_buttons { display: none; } .eduidlogged .tempshare { display: none; } .eduidlogged .showdetails .lists_element { grid-template-columns: 40px 1fr 40px; grid-template-rows: 40px; grid-column-gap: 0; grid-template-areas: "img title badge"; align-items: center; overflow: hidden; height: 40px; } .eduidlogged .showdetails .lists_element .le_check, .eduidlogged .showdetails .lists_element .le_buttons, .eduidlogged .showdetails .lists_element .le_text { display: none; } .eduidlogged .showdetails .lists_element .le_picture { height: 100%; } .eduidlogged .showdetails .lists_element .le_title { padding-left: 1rem; } .eduidlogged .showdetails .lists_element .le_title h4 { margin: 0; font-size: 1.3rem; font-weight: 300; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; } .eduidlogged .showdetails .lists_element .le_badge { background-color: #e9ecef; border: none; border-left: 1px solid #404040; height: 41px; width: 41px; align-content: center; justify-content: center; } .eduidlogged .le_check { display: none; } .eduidlogged .media_element { padding-bottom: 2rem; } .eduidlogged .media_element .mediachecker { display: none; } .eduidlogged #eduidmedialists_child_0 .tasknav_info { margin-left: 0px; } .eduidlogged .playlisthead { display: block; } .eduidlogged .playlisthead h3 { margin-bottom: 2rem; } .legalscontent { max-width: 700px; margin-left: auto; margin-right: auto; } /* Dialogmodal "Medienzentrum auswählen" */ .choose_dialog { -moz-column-count: 4; column-count: 4; padding: 0 3rem; } @media (max-width: 1280px) { .choose_dialog { -moz-column-count: 3; column-count: 3; } } @media (max-width: 992px) { .choose_dialog { -moz-column-count: 2; column-count: 2; } } @media (max-width: 599px) { .choose_dialog { -moz-column-count: 1; column-count: 1; } } .choose_dialog div { margin-bottom: 0.8rem; } /** * features */ .tasknav .ow_expd { position: absolute; top: 0; right: 0; padding: 0.6rem 1rem; border-radius: 0; border-bottom-left-radius: 14px; z-index: 10; border-color: var(--background-color); background-color: var(--background-color); color: var(--color); } .tasknav .ow_expd a, .tasknav .ow_expd .fa-inverse { color: inherit; } .detail_closer { display: none; } @media (max-width: 811px) { .detail_closer { display: block; text-align: right; } .detail_closer i { color: var(--color-warning); } } /*/ // ... in Detailansicht @import "partials/features/detail_close_in_detail"; //*/ .swiper-button-next { border-top-left-radius: 0rem; border-bottom-left-radius: 0rem; right: var(--swiper-button-offset, -40px); border-top-right-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); } .swiper-button-prev { border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); left: var(--swiper-button-offset, -40px); border-top-right-radius: 0; border-bottom-right-radius: 0; } /* * /features **/ /* he_styles.css | https://v40hessen.edupool.de/resources/styles/he_styles.css */ .media_element.media_element_tab .media-img-wrapper { border-radius: var(--border-radius); } /* he_styles.css | https://v40hessen.edupool.de/resources/styles/he_styles.css */ .resultfilter { border: 1px solid var(--color-main-1); } .resultfilter .btn, .resultfilter .lh_tabsnav li, .lh_tabsnav .resultfilter li { border-top-left-radius: 0; border-bottom-left-radius: 0; } .resultfilter .btn.filterdelete, .resultfilter .lh_tabsnav li.filterdelete, .lh_tabsnav .resultfilter li.filterdelete { left: -200px; top: -42px; } @media (max-width: 599px) { .resultfilter .btn.filterdelete, .resultfilter .lh_tabsnav li.filterdelete, .lh_tabsnav .resultfilter li.filterdelete { left: 0; top: -85px; } } .resultfilter .btn.filterdelete i, .resultfilter .lh_tabsnav li.filterdelete i, .lh_tabsnav .resultfilter li.filterdelete i { color: red !important; } .sorter .resultfilter { height: 40px; } .sorter .resultfilter button { height: 100%; } .sorter .resultcounter { padding: 0.9rem 2rem; } @media (max-width: 480px) { .sorter .resultcounter { padding: 0.9rem 1rem; } } .sorter .sorter_btn { height: 40px; } @media (max-width: 480px) { .sorter .sorter_btn { width: 90px; } } /* he_styles.css | https://v40hessen.edupool.de/resources/styles/he_styles.css */ .footer { background-color: #fff; text-align: end; height: 40px; } .footer .footer-right { grid-column: 1/-1; } .footer a { color: #000; } .media_element { border: none; } .media_element .media_info::before { margin-right: 0.5rem; font-weight: 900; font-size: 1.5rem; } .media_element[data-mediasrc=offline] .media_info::before { content: "\f111"; color: #1046af; } .media_element[data-mediasrc=online] .media_info::before { content: "\f111"; color: #098830; } .media_element[data-mediatype="29"] .media_info::before { content: "\f111"; color: #855E05; } .media_element[data-mediaid^=sodix-] .media_info::before, .media_element[data-mediatype="58"] .media_info::before { content: "\f111"; color: #da1419; } .btn_plain, .searchoption .externtooltip a { color: var(--color-main-1); } .btn_plain:not([disabled]):hover, .searchoption .externtooltip a:not([disabled]):hover { color: var(--color-main-1); text-decoration: none; cursor: pointer; background-color: transparent; } .btn_plain:not([disabled]):focus, .searchoption .externtooltip a:not([disabled]):focus, .btn_plain:not([disabled]).focus, .searchoption .externtooltip a:not([disabled]).focus { box-shadow: none; } .btn_plain[disabled], .searchoption .externtooltip a[disabled] { color: #979798; } .mzchoose_btn { padding: 2rem; } /* he_styles.css | https://v40hessen.edupool.de/resources/styles/he_styles.css */ .overview_details_wrapper .overview { padding: 0 8%; } @media (max-width: 811px) { .overview_details_wrapper .overview { padding: 0 5%; } } .clips_wrapper .clips_container .clip_element { grid-template-rows: 118px auto auto; border: none; } .clips_wrapper .clips_container .clip_element .clipbuttons { padding: 1rem 2rem; } .lh_badge { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } .submenue_content_in_li { position: absolute; background-color: white; right: 10px; border-radius: var(--border-radius); } .submenue_content_in_li.menue_opened { display: block; } .mediaplayerclose { background-color: transparent; font-size: 2.5rem !important; } .detailview { background-color: #fff; } .le_eduid .btn.delall, .le_eduid .lh_tabsnav li.delall, .lh_tabsnav .le_eduid li.delall { border-radius: 50px; padding: 0.6rem 0.9rem; } @media (max-width: 811px) { .print_rec_btn, .medialink, .lh_share, .mlh_linkshare { border: 1px solid #EAEAEA; } } .print_rec_btn i, .medialink i, .lh_share i, .mlh_linkshare i { color: var(--color-main-1) !important; } @media (max-width: 811px) { .print_rec_btn i, .medialink i, .lh_share i, .mlh_linkshare i { color: #404040 !important; background-color: white; } } /* .eduids { .le_picture::before { content: "\f63d"; margin-right: 0.5rem; } background-image: none; background-size: 100%; background-repeat: no-repeat; } */ .searchbar input, .searchbar select { height: 45px; } .searchbar button, .searchbar select { vertical-align: top; } .func-toeducap { display: none !important; } .header .navinheader .header-middle { font-size: 2.5vw; } .tempshare { display: none; } @media print { body { grid: none; padding: 0; overflow: auto; background-image: none; --media-element-border: none; } body, body .detailview { background-color: #fff; } body:not(.showdetails) > :not(.overview_details_wrapper), body:not(.showdetails) > .overview_details_wrapper > :not(.overview) { display: none !important; } body.showdetails > :not(.overview_details_wrapper), body.showdetails > .overview_details_wrapper > :not(.detailview), body.showdetails > .overview_details_wrapper > .detailview > :not(.tab-page) { display: none !important; } /* common elements */ .clips_wrapper, .searchbar_wrapper, .res_footer_buttons { display: none !important; } .result, .medialist, .usercontent { grid-template-columns: 1fr 1fr; padding: 0 !important; } .result > *, .medialist > *, .usercontent > * { page-break-inside: avoid; } .media_element .media_text { margin-bottom: 2rem; -webkit-line-clamp: unset; } .tasknav { page-break-after: avoid; } /* eduIds */ .tab-page[id*=eduids_] > :not(.easytabs-body), .tab-page[id*=eduids_] > .easytabs-body > :not(.eduid_tabsbody), .tab-page[id*=eduids_] > .easytabs-body > .eduid_tabsbody > :not(.lists_element), .tab-page[id*=eduids_] > .easytabs-body > .eduid_tabsbody > .lists_element > :not(.eduid_printable) { display: none !important; } body, .overview_details_wrapper, .eduid_tabsbody .lists_element { display: block; } .overview_details_wrapper { overflow: visible; } .overview_details_wrapper.showdetails { height: auto; } .overview_details_wrapper .detailview { padding: 0; padding-bottom: 0 !important; height: auto; border-style: none; } .eduid_tabsbody { padding-top: 0; display: block; max-width: -moz-max-content; max-width: max-content; margin: 0 auto; } .eduid_tabsbody .lists_element { border-style: none; border-radius: 0; width: 85mm; height: 51mm; /* Safari: ensure 10 cards on A4 */ page-break-inside: avoid; /* break-inside unsupported by grid and Safari */ float: left; display: inline-block; /* works in FF */ /* works in chrome */ } .eduid_tabsbody .lists_element:nth-of-type(2n) { margin-right: 5.6mm; clear: left; } .eduid_printable { height: 54mm; padding: 5mm; border: 1px dotted #ccc; display: grid; grid-template-columns: 40mm 1fr; grid-template-areas: "qr name" "qr title" "qr expire" "qr code" "url url"; font-size: 9pt; } .eduid_printable p { margin: 0; overflow: hidden; text-overflow: ellipsis; } .eduid_printable .qr_container { grid-area: qr; width: 37mm; } .eduid_printable .qr_container canvas { max-width: 100%; } .eduid_printable .eduid-name { grid-area: name; } .eduid_printable .eduid-title { grid-area: title; -webkit-line-clamp: 4; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; margin-bottom: auto; } .eduid_printable .eduid-expire { grid-area: expire; } .eduid_printable .eduid-url { grid-area: url; } .eduid_printable .eduid-code { grid-area: code; font-family: monospace; } /* media */ .media_element.media_element_tab { /* hide interactive elements */ } .media_element.media_element_tab .medialink, .media_element.media_element_tab .print_rec_btn, .media_element.media_element_tab .tempshare { display: none; } .media_element.media_element_tab .media_title { border: 1px solid #000; background-color: transparent; } .media_element.media_element_tab .media_record_tabs { display: block; } .media_element.media_element_tab .media_record_tabs .mr_tabshead { color: #000 !important; border-style: none !important; padding: 0 !important; font-size: 1.25em !important; } .media_element.media_element_tab .media_record_tabs .mr_tabsbody { display: block !important; height: auto !important; padding-top: 2mm; } } body.antares_local_nds_h .header .navinheader { grid-template-columns: auto auto max-content; } body.antares_local_nds_h .header .navinheader .header-left { overflow: hidden; } body.antares_local_nds_h .header .navinheader .header-left img { max-height: 70%; max-width: 400px; height: auto; overflow: hidden; } body.antares_local_nds_h .header .navinheader .header-middle > * { display: none; } @media (max-width: 811px) { body.antares_local_nds_h .header .navinheader .header-right { padding-right: 0; } } /*# sourceMappingURL=nds_styles.css.map */