/* ========================================================================== Zentrum Heilig Geist Feuer — file-search.css Styles for the Meilisearch file search. Markup is injected by /js/file-search.js into .search-container. Used two ways: 1. standalone iframe pages /suche.html (DE) + /bg/suche.html (BG) (, e.g. embedded in Google Sites) 2. inline on the site's search pages /de/suche.html + /bg/suche2.html All rules are scoped to .search-container so nothing leaks into the surrounding page in case 2. ========================================================================== */ .search-container, .search-container * { box-sizing: border-box; margin: 0; padding: 0; } body.search-standalone { background: transparent; padding: 12px; } .search-container { font-family: 'Outfit', 'Open Sans', sans-serif; color: #222; max-width: 860px; margin: 0 auto; } /* ── Search Box ── */ .search-box { display: flex; gap: 8px; margin-bottom: 12px; } #search-input { flex: 1; min-width: 0; padding: 12px 16px; border: 2px solid #ddd; border-radius: 10px; font-size: 16px; font-family: 'Outfit', sans-serif; outline: none; transition: border-color 0.2s, box-shadow 0.2s; background: #fff; } #search-input:focus { border-color: #0082c9; box-shadow: 0 0 0 3px rgba(0,130,201,0.12); } #search-btn { padding: 12px 18px; background: #0082c9; color: white; border: none; border-radius: 10px; font-size: 15px; font-family: 'Outfit', sans-serif; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.2s; flex-shrink: 0; } #search-btn:hover { background: #006fa6; } /* ── Toolbar (filters + sort) ── */ .toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; } .filters { display: flex; gap: 6px; flex-wrap: wrap; } .filter-btn { padding: 5px 13px; border: 1.5px solid #ddd; border-radius: 20px; background: #fff; cursor: pointer; font-size: 13px; font-family: 'Outfit', sans-serif; font-weight: 500; transition: all 0.15s; white-space: nowrap; } .filter-btn:hover { border-color: #0082c9; color: #0082c9; } .filter-btn.active { background: #0082c9; color: white; border-color: #0082c9; } .sort-box { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #888; } #sort-select { padding: 5px 8px; border: 1.5px solid #ddd; border-radius: 8px; font-size: 13px; font-family: 'Outfit', sans-serif; background: #fff; cursor: pointer; color: #222; } /* ── Status ── */ #status { color: #888; font-size: 13px; margin-bottom: 10px; min-height: 18px; } /* ── Result Cards ── */ .results { display: flex; flex-direction: column; gap: 8px; } .result-card { background: #fff; border-radius: 10px; padding: 12px 14px; border: 1.5px solid #ebebeb; display: flex; align-items: flex-start; gap: 12px; text-decoration: none; color: inherit; transition: box-shadow 0.15s, border-color 0.15s; } .result-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,0.09); border-color: #d0d0d0; } .file-icon { width: 38px; height: 38px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 10px; flex-shrink: 0; color: white; letter-spacing: 0.3px; margin-top: 1px; } .icon-pdf { background: #e74c3c; } .icon-mp4, .icon-mov, .icon-avi { background: #8e44ad; } .icon-mp3, .icon-m4a, .icon-wav { background: #e67e22; } .icon-txt, .icon-md { background: #27ae60; } .icon-docx { background: #2980b9; } .icon-default { background: #95a5a6; } .file-info { flex: 1; min-width: 0; } .file-name { font-weight: 600; font-size: 14px; line-height: 1.3; word-break: break-word; margin-bottom: 3px; } .file-meta { font-size: 12px; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .text-preview { font-size: 12px; color: #666; margin-top: 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; } .search-container mark { background: #fff3cd; padding: 0 2px; border-radius: 2px; font-weight: 600; } /* ── Empty States ── */ #no-results, #intro { text-align: center; padding: 32px 16px; color: #bbb; font-size: 14px; } #no-results { display: none; } /* ── Load More ── */ #load-more-wrap { display: none; justify-content: center; margin-top: 14px; } #load-more-btn { padding: 10px 22px; background: #fff; color: #0082c9; border: 1.5px solid #0082c9; border-radius: 10px; font-size: 14px; font-family: 'Outfit', sans-serif; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s; } #load-more-btn:hover { background: #0082c9; color: #fff; } #load-more-btn:disabled { opacity: 0.6; cursor: default; } /* ── Clear (×) button ── */ .search-input-wrap { position: relative; flex: 1; min-width: 0; display: flex; } .search-input-wrap #search-input { flex: 1; padding-right: 40px; } #clear-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: #999; font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 6px; } #clear-btn:hover { color: #555; background: #f0f0f0; } #clear-btn[hidden] { display: none; } /* ── Advanced filters (category + date) ── */ .adv-filters { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; } .adv-filter { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #888; } .adv-filter[hidden] { display: none; } .adv-filter select { padding: 5px 8px; border: 1.5px solid #ddd; border-radius: 8px; font-size: 13px; font-family: 'Outfit', sans-serif; background: #fff; cursor: pointer; color: #222; } /* ── Keyboard focus on results ── */ .result-card:focus { outline: 2px solid #0082c9; outline-offset: 2px; } .result-card:focus:not(:focus-visible) { outline: none; } /* ── Mobile ── */ @media (max-width: 480px) { body.search-standalone { padding: 8px; } #search-btn { padding: 12px 14px; font-size: 14px; } /* font-size bleibt 16px — kleiner löst iOS-Zoom beim Fokus aus */ #search-input { padding: 11px 13px; } .toolbar { gap: 8px; } .sort-box { width: 100%; justify-content: flex-end; } .file-name { font-size: 13px; } .result-card { padding: 10px 12px; gap: 10px; } .file-icon { width: 34px; height: 34px; font-size: 9px; } }