/** * Search/inc/css/search * * less styles for search * * @package KM.CMS * @subpackage SysExt * @copyright klinger.MEDIA GmbH 2006 - 2026 * @creator Sven Günther * @author Christian Klinger * @version 4.0.9 * @changedate 2026-09-30 * @todo * */ /** * variables * * basic less variables - colors, sizes * * @package KM.CMS * @subpackage inc/less * @copyright klinger.MEDIA GmbH * @author Christian Klinger * @version 4.1.19 * @changedate 2026-09-30 * @link https://www.klinger-media.de */ /* * COLORS */ /* #ccc */ /* #f2f2f2 */ /* #000 */ /* opacity .8 */ /* opacity .8 */ /* opacity .7 */ /* * SPACING */ /* * FONTS */ /* * HEADLINES & TEXT */ /* * CONTENT */ /* * BASIC ELEMENTS */ /* * EXTENDED ELEMENTS */ /* * COLUMNS & LISTINGS */ /** * variables/basics * * basics less varibles for basic HTML elements * * @package KM.CMS * @subpackage inc/less * @copyright klinger.MEDIA GmbH * @author Christian Klinger * @version 4.1.19 * @changedate 2026-09-30 * @link https://www.klinger-media.de */ /* * SPACER */ /* * LISTINGS VARIABLES */ /* * GENERAL STYLES */ /* * CARD VIEW STYLS */ /* * LIST VIEW STYLES */ /* * GROUP LIST STYLES */ /* * BUTTON VARIABLES */ /* * CLICKLISTS */ /* * GALLERY */ /* * MODAL DIALOG */ /* * BLOCK SCREENS */ /** * variables/navigation * * navigation less varibles for page navigation elements * * @package KM.CMS * @subpackage inc/less * @copyright klinger.MEDIA GmbH * @author Christian Klinger * @version 4.1.19 * @changedate 2026-09-30 * @link https://www.klinger-media.de */ /* * MAIN NAVIGATION */ /* * MAIN ASIDE NAVIGATION */ /* * MAIN MEGA DROPDOWN NAVIGATION */ /* * MOBILE NAVIGATION */ /* * MICRO NAVIGATION */ /* * FOOTER NAVIGATION */ /* * ASIDE NAVIGATION */ /* * PAGINATION */ /* * SINGLE CONTENT NAVIGATION */ /** * variables/page * * page less varibles for basic page layout * * @package KM.CMS * @subpackage inc/less * @copyright klinger.MEDIA GmbH * @author Christian Klinger * @version 4.1.19 * @changedate 2026-09-30 * @link https://www.klinger-media.de */ /* * HEADER */ /* * CONTENT */ /* * FOOTER */ /** * basics/mixins * * general mixins for backend and frontend * * @package KM.CMS * @subpackage inc/less * @copyright klinger.MEDIA GmbH * @author Christian Klinger * @version 4.1.19 * @changedate 2026-09-30 * @link https://www.klinger-media.de */ /* * basic mixins */ /* * GRID MIXINS */ /* * IMAGE MIXINS */ /* * COLOR MIXINS */ .background-gradient-pseudo { content: ''; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background: linear-gradient(30deg, #ac111c 0%, #4c4c4c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } /* KeyFrames for Animate-Border */ @-webkit-keyframes animate-border { 0% { background-position: 0% 0%; } 100% { background-position: 200% 0%; } } @-moz-keyframes animate-border { 0% { background-position: 0% 0%; } 100% { background-position: 200% 0%; } } @-webkit-keyframes animate-border { 0% { background-position: 0% 0%; } 100% { background-position: 200% 0%; } } /* KeyFrames for Animate-Waves */ @keyframes transform-matrix-1 { 0% { transform: matrix(1, 0, 0, 1, 0, 0); } 100% { transform: matrix(1, 0, 0, 0.455, -526, 55.5); width: calc(100% + 526px); } } @keyframes transform-matrix-2 { 0% { transform: matrix(1, 0, 0, 1, 0, 0); } 100% { transform: matrix(1, 0, 0, 0.506, -250, 50.4); width: calc(100% + 250px); } } @keyframes transform-matrix-1-rotate { 0% { transform: matrix(1, 0, 0, 1, 0, 0); } 100% { transform: matrix(1, 0, 0, 0.455, 526, 55.5); width: calc(100% + 526px); } } /* * HEADLINE MIXINS */ /* * LISTING MIXINS */ /* * LINK MIXINS */ /* * CONTENT MIXINS */ /* * toogle elements */ /* * TABS MIXINS */ /* * KM MODAL */ @keyframes KMModalFadeIn { from { opacity: 0; transform: scale(0.95) translateY(-10px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes KMBackdropFadeIn { from { opacity: 0; } to { opacity: 1; } } /* * SEARCH LAYOUT */ #search, #search-mobile { width: 100%; text-align: left; padding: 0px; margin-top: 0px; background: #fff; border: solid 1px #fff; overflow: hidden; position: relative; height: 40px; } #search input#search_searchBox, #search-mobile input#search_searchBox, #search input#search-mobile_searchBox, #search-mobile input#search-mobile_searchBox { width: calc(100% - 40px); height: 38px; padding: 0 10px; margin: 0 0 0 0; float: left; background: #fff; border: none; border-bottom: none; outline: none; color: #333; font-size: inherit; line-height: 40px; text-align: left; } #search input#search_searchBox::-webkit-input-placeholder, #search-mobile input#search_searchBox::-webkit-input-placeholder, #search input#search-mobile_searchBox::-webkit-input-placeholder, #search-mobile input#search-mobile_searchBox::-webkit-input-placeholder { /* Chrome/Opera/Safari */ font-weight: 400; font-style: italic; color: #cccccc; } #search input#search_searchBox::-moz-placeholder, #search-mobile input#search_searchBox::-moz-placeholder, #search input#search-mobile_searchBox::-moz-placeholder, #search-mobile input#search-mobile_searchBox::-moz-placeholder { /* Firefox */ font-weight: 400; font-style: italic; color: #cccccc; } #search input#search_searchBox:-ms-input-placeholder, #search-mobile input#search_searchBox:-ms-input-placeholder, #search input#search-mobile_searchBox:-ms-input-placeholder, #search-mobile input#search-mobile_searchBox:-ms-input-placeholder { /* Internet Explorer */ font-weight: 400; font-style: italic; color: #cccccc; } #search input#search_searchBox:focus, #search-mobile input#search_searchBox:focus, #search input#search-mobile_searchBox:focus, #search-mobile input#search-mobile_searchBox:focus { color: #333; background: #fff; border: solid 1px #1a1a1a; border-bottom: solid 1px #1a1a1a; } #search button#search_submitSearch, #search-mobile button#search_submitSearch, #search button#search-mobile_submitSearch, #search-mobile button#search-mobile_submitSearch { width: 40px; height: 38px; padding: 0; margin-top: 0; border: none; line-height: 40px; color: #333; font-weight: 700; font-size: inherit; cursor: pointer; background: #f2f2f2; } #search button#search_submitSearch:hover, #search-mobile button#search_submitSearch:hover, #search button#search-mobile_submitSearch:hover, #search-mobile button#search-mobile_submitSearch:hover, #search button#search_submitSearch:focus, #search-mobile button#search_submitSearch:focus, #search button#search-mobile_submitSearch:focus, #search-mobile button#search-mobile_submitSearch:focus { color: #fff; background: #ac111c; border: none; outline: none; } #search label, #search-mobile label { position: absolute; left: -9999px; } #search-results { margin: 15px 0; } #search-results.list-view li .list-item-image { width: 15%; min-width: 150px; } #search-results.list-view li .list-item-image img { width: 100%; height: auto; } #search-results.list-view li .list-item-content { width: 75%; padding-bottom: 0px; } #search-results.list-view li .list-item-content.no-image { width: 100%; padding-left: 0; } #search-results.list-view li span.highlight { font-weight: 700; color: #ac111c; } ul.list-view .list-item-image.search-image { position: relative; background-position: center center; background-size: cover; background-repeat: no-repeat; border-right: solid 15px #fff; } ul.list-view .list-item-image.search-image img { position: absolute; left: -99999px; } /* List View */ .ui-autocomplete.ui-menu { list-style: none; max-height: 600px; box-shadow: 2px 2px 4px #333; border: solid 1px #333; z-index: 999999; max-width: 100%; background: #fff; width: 100% !important; left: 0 !important; } @media only screen and (min-width: 1280px) { .ui-autocomplete.ui-menu { width: 1280px !important; left: calc(((100% - 1280px ) / 2 )) !important; } } .ui-autocomplete a > div { width: 96%; padding: 2%; } .ui-autocomplete .ui-menu-item { display: block; overflow: hidden; padding: 5px; list-style-image: none; } .ui-autocomplete .ui-menu-item:nth-child(n+2) { padding-top: 5px; border-top: solid 1px #f2f2f2; } .ui-autocomplete .ui-menu-item:hover { background: #f2f2f2; color: #333; } .ui-autocomplete .ui-menu-item:hover .highlight { color: #333; } .ui-autocomplete .ui-menu-item > .ui-menu-item-wrapper.ui-state-active { background: transparent; font-weight: inherit; color: inherit; } .ui-autocomplete .ui-menu-item .search-image { width: 20%; height: 0; padding-bottom: 14%; margin-right: 2%; float: left; position: relative; background-position: center; background-size: contain; background-repeat: no-repeat; } .ui-autocomplete .ui-menu-item .search-image img { position: absolute; left: -99999px; } .ui-autocomplete .ui-menu-item a { color: #333; } .ui-autocomplete .ui-menu-item a:hover { color: inherit; } .ui-autocomplete .ui-menu-item b.highlight { color: #ac111c; } .ui-helper-hidden-accessible { display: none; } .search-label { display: block; font-weight: 700; font-size: 100%; } .search-description { display: block; font-size: 90%; font-style: italic; } #search_inline { width: 80%; margin: 30px 10%; } #search_inline #search_inline_form { display: flex; } #search_inline #search_inline_form .field-search { width: calc(100% - 40px ); } #search_inline #search_inline_form .field-search label { display: none; } #search_inline #search_inline_form .field-search #search_inline_searchBox { width: 100%; height: 40px; padding: 0 5px; border: none; border-bottom: solid 1px #333; } #search_inline #search_inline_form .field-search #search_inline_searchBox:focus, #search_inline #search_inline_form .field-search #search_inline_searchBox:hover { border-bottom: solid 1px #ac111c; } #search_inline #search_inline_form .field-search #search_inline_searchBox:focus-visible { outline: solid 2px #ac111c; border-radius: 3px; } #search_inline #search_inline_form #search_inline_submitSearch { margin-top: 0; background: #f2f2f2; color: #333; } #search_inline #search_inline_form #search_inline_submitSearch:hover { background: #ac111c; color: #fff; } #search_inline #search_inline_form #search_inline_submitSearch span { display: none; } /** * Search/inc/css/variables * * variables for coupon less file * * @package KM.CMS * @subpackage SysExt * @copyright klinger.MEDIA GmbH 2006 - 2026 * @creator Sven Günther * @author Christian Klinger * @version 4.0.9 * @changedate 2026-09-30 * @todo * */ /* * SEARCH VARIABLES */ /* * Autosuggest */ /** * variables * * basic less variables - colors, sizes * * @package KM.CMS/PROJECT * @subpackage inc/less * @copyright klinger.MEDIA GmbH * @author Christian Klinger * @version 4.1.18 * @changedate 2026-09-30 * @link https://www.klinger-media.de */ /* red */ /* grey */ /* SCROLL-TO-TOP */ /** * variables/modules * * modules less varibles as base for all KM.CMS modules * * @package KM.CMS/PROJECT * @subpackage inc/less * @copyright klinger.MEDIA GmbH * @author Christian Klinger * @version 4.1.18 * @changedate 2026-09-30 * @link https://www.klinger-media.de */ /* * search module */ /** * variables/basics * * basics less varibles for basic HTML elements * * @package KM.CMS * @subpackage inc/less * @copyright klinger.MEDIA GmbH * @author Christian Klinger * @version 4.1.18 * @changedate 2026-09-30 * @link https://www.klinger-media.de */ /** * variables/navigation * * navigation less varibles for page navigation elements * * @package KM.CMS/PROJECT * @subpackage inc/less * @copyright klinger.MEDIA GmbH * @author Christian Klinger * @version 4.1.18 * @changedate 2026-09-30 * @link https://www.klinger-media.de */ /* * Main MegaDropdown Navigation */ /** * variables/page * * page less varibles for basic page layout * * @package KM.CMS/PROJECT * @subpackage inc/less * @copyright klinger.MEDIA GmbH * @author Christian Klinger * @version 4.1.18 * @changedate 2026-09-30 * @link https://www.klinger-media.de */ /* footer */