Files
breadcrumb-the-shire/web/css/components/app-search.css
2026-02-11 19:28:12 +01:00

140 lines
2.6 KiB
CSS

.app-search {
padding: 0 var(--app-spacing);
}
ul.app-search-results {
padding: 0;
margin: 0;
}
ul.app-search-results > li > a {
justify-content: space-between;
}
ul.app-search-results .badge {
font-size: 10px;
padding: 1px;
min-width: 20px;
text-align: center;
border-radius: 999px;
background: var(--app-accordion-border-color);
display: inline-flex;
justify-content: center;
align-items: center;
height: 20px;
}
ul.app-search-preview {
position: relative;
font-size: 11px;
padding: 0 0 0 20px;
margin: 6px 0 1.5rem 10px;
opacity: 0.75;
list-style: none;
}
/* Hide preview rows (detail results) */
.search-details-hidden ul.app-search-preview {
display: none;
}
ul.app-search-preview li::before {
content: "";
position: absolute;
left: 17px;
bottom: 11px;
width: 8px;
height: 10px;
background: transparent;
border-left: 1px solid var(--app-border);
border-bottom: 1px solid var(--app-border);
border-bottom-left-radius: 6px;
}
ul.app-search-preview li {
position: relative;
padding: 0;
}
ul.app-search-preview li::before {
content: "";
position: absolute;
left: 17px;
bottom: 11px;
width: 8px;
height: 10px;
background: transparent;
border-left: 1px solid var(--app-border);
border-bottom: 1px solid var(--app-border);
border-bottom-left-radius: 6px;
}
ul.app-search-preview a {
padding-inline: 30px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
border: none;
}
ul.app-search-preview a:hover {
border: none;
}
input#side-search {
--app-form-element-spacing-horizontal: 10px;
--app-form-element-spacing-vertical: 6px;
height: auto;
font-size: 13px;
}
ul.app-search-preview:has(li) {
margin-bottom: 1rem!important;
}
.search-result-row {
display: flex;
gap: 12px;
align-items: flex-start;
}
.search-reuslt-title-container {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.search-result-avatar,
.search-result-avatar-placeholder {
width: 40px;
height: 40px;
border-radius: 10px;
border: 1px solid var(--app-border);
background: var(--app-card-background-color);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--app-muted-color);
flex-shrink: 0;
object-fit: cover;
}
.search-result-title {
font-weight: 600;
text-decoration: none;
}
.search-result-desc {
margin: 0;
color: var(--app-muted-color);
font-size: small;
}
.search-result-type {
color: var(--app-muted-color);
font-weight: 600;
}