/** * Morsi live search - results-while-typing panel. * Palette follows the warm variant (parchment / gold / deep red). */ .mls-form { position: relative; } /** * Rendered as a child of and positioned from JS, so it escapes the * overflow:hidden / stacking contexts around the hero and header search boxes. * Colours are hardcoded on purpose: the --ls-warm-* custom properties are * scoped to the theme wrappers and do not resolve at body level. */ .mls-panel { position: fixed; z-index: 100000; overflow-y: auto; overscroll-behavior: contain; padding: 0.4rem; border: 1px solid rgba(183, 128, 42, 0.26); border-radius: 10px; background: #fffaf2; box-shadow: 0 26px 64px rgba(90, 54, 18, 0.22); text-align: start; direction: rtl; } .mls-panel[hidden] { display: none; } .mls-list { margin: 0; padding: 0; list-style: none; } .mls-item + .mls-item { border-block-start: 1px solid rgba(183, 128, 42, 0.14); } .mls-link { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.6rem; border-radius: 8px; color: #2c2012; text-decoration: none; transition: background 0.16s ease; } .mls-item.is-active .mls-link, .mls-link:hover, .mls-link:focus-visible { background: linear-gradient(135deg, rgba(245, 215, 125, 0.42), rgba(255, 240, 191, 0.3)); outline: none; } .mls-thumb { flex: 0 0 3.25rem; inline-size: 3.25rem; block-size: 2.4rem; overflow: hidden; border-radius: 6px; background: #f1e4cd; } .mls-thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; } .mls-thumb--empty { background: repeating-linear-gradient(135deg, #f1e4cd, #f1e4cd 6px, #ece0c6 6px, #ece0c6 12px); } .mls-body { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; gap: 0.2rem; } .mls-title { font-weight: 700; font-size: 0.95rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mls-title mark { background: rgba(245, 215, 125, 0.72); color: inherit; padding: 0 0.08em; border-radius: 3px; } .mls-meta { display: flex; align-items: center; gap: 0.45rem; font-size: 0.72rem; color: #8a6d3b; } .mls-type { padding: 0.1rem 0.45rem; border-radius: 999px; background: rgba(183, 128, 42, 0.16); color: #7e5a1a; font-weight: 700; white-space: nowrap; } .mls-type--archive_video { background: rgba(210, 58, 52, 0.14); color: #9e2b25; } .mls-type--diary { background: rgba(46, 110, 74, 0.14); color: #2c6b48; } .mls-type--photo_album { background: rgba(58, 96, 160, 0.14); color: #33517f; } .mls-date { white-space: nowrap; } .mls-all { display: block; margin-block-start: 0.35rem; padding: 0.55rem; border-radius: 8px; background: linear-gradient(135deg, #d23a34, #9f2228); color: #fff8e6; font-weight: 800; font-size: 0.85rem; text-align: center; text-decoration: none; } .mls-all:hover, .mls-all:focus-visible { filter: brightness(1.06); color: #fff8e6; outline: none; } .mls-count { font-weight: 700; opacity: 0.85; } .mls-state { padding: 0.9rem 0.6rem; text-align: center; font-size: 0.85rem; color: #8a6d3b; } .mls-state--error { color: #9e2b25; } .mls-state--loading::after { content: ""; display: inline-block; inline-size: 0.7rem; block-size: 0.7rem; margin-inline-start: 0.4rem; border: 2px solid rgba(183, 128, 42, 0.3); border-block-start-color: #9e2b25; border-radius: 50%; vertical-align: -0.1rem; animation: mls-spin 0.7s linear infinite; } @keyframes mls-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .mls-state--loading::after { animation-duration: 2s; } } @media (max-width: 600px) { .mls-thumb { flex-basis: 2.75rem; inline-size: 2.75rem; block-size: 2.05rem; } .mls-title { font-size: 0.9rem; } }