Aran Roig
68b74eb60b
All checks were successful
Build and Deploy Nuxt / build (push) Successful in 24s
194 lines
3.7 KiB
SCSS
194 lines
3.7 KiB
SCSS
@use 'mixins' as *;
|
|
|
|
// ---------- Search (sidebar bar + centered popup) ----------
|
|
.sidebar-search {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
width: 100%;
|
|
padding: 9px 12px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
background: var(--surface);
|
|
color: var(--faint);
|
|
font-size: 0.86rem;
|
|
font-weight: 550;
|
|
text-align: left;
|
|
box-shadow: var(--shadow-sm);
|
|
transition: border-color 0.15s, color 0.15s;
|
|
|
|
&:hover { border-color: var(--border-strong); color: var(--muted); }
|
|
|
|
svg { flex-shrink: 0; }
|
|
}
|
|
|
|
.sidebar-search-label {
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.kbd-hint {
|
|
font-family: inherit;
|
|
font-size: 0.68rem;
|
|
font-weight: 600;
|
|
color: var(--faint);
|
|
border: 1px solid var(--border);
|
|
border-bottom-width: 2px;
|
|
border-radius: 5px;
|
|
padding: 0 5px;
|
|
background: var(--surface-2);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.search-overlay { @include overlay(120); }
|
|
|
|
.search-modal { @include sheet(620px, min(560px, calc(100vh - 110px))); }
|
|
|
|
.search-modal-field {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 11px;
|
|
padding: 13px 16px;
|
|
border-bottom: 1px solid var(--border);
|
|
|
|
svg { flex-shrink: 0; color: var(--faint); }
|
|
}
|
|
|
|
.search-modal-input {
|
|
flex: 1;
|
|
min-width: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
font-size: 1.02rem;
|
|
|
|
&:focus, &:focus-visible { outline: none; box-shadow: none; }
|
|
|
|
&::placeholder { color: var(--faint); }
|
|
}
|
|
|
|
.search-spinner {
|
|
flex-shrink: 0;
|
|
width: 15px;
|
|
height: 15px;
|
|
border-radius: 50%;
|
|
border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent);
|
|
border-top-color: var(--accent);
|
|
animation: search-spin 0.7s linear infinite;
|
|
}
|
|
|
|
@keyframes search-spin {
|
|
to { transform: rotate(1turn); }
|
|
}
|
|
|
|
.search-modal-body {
|
|
@include sheet-body(8px);
|
|
|
|
.banner { margin: 8px 8px 10px; }
|
|
}
|
|
|
|
.search-results { list-style: none; margin: 0; padding: 0; }
|
|
|
|
.search-result {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
padding: 10px 12px;
|
|
border-radius: 11px;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
transition: background-color 0.12s;
|
|
|
|
&.active { background: color-mix(in srgb, var(--accent) 12%, transparent); }
|
|
}
|
|
|
|
.sr-title {
|
|
font-weight: 650;
|
|
font-size: 0.94rem;
|
|
line-height: 1.35;
|
|
|
|
mark {
|
|
background: color-mix(in srgb, var(--accent) 30%, transparent);
|
|
color: inherit;
|
|
border-radius: 3px;
|
|
padding: 0 1px;
|
|
}
|
|
}
|
|
|
|
// the wiki's own pages carry their mark beside the title, so a row reads as
|
|
// the surface it opens rather than an article
|
|
.sr-page-glyph {
|
|
display: inline-block;
|
|
margin-right: 7px;
|
|
color: var(--muted);
|
|
vertical-align: -2px;
|
|
|
|
svg { display: block; }
|
|
}
|
|
|
|
.sr-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-top: 1px;
|
|
font-size: 0.74rem;
|
|
color: var(--faint);
|
|
}
|
|
|
|
.search-quick-title { @include eyebrow; margin: 6px 8px 4px; }
|
|
|
|
.search-none {
|
|
text-align: center;
|
|
padding: 32px 16px;
|
|
color: var(--muted);
|
|
font-size: 0.88rem;
|
|
|
|
strong { color: var(--text); }
|
|
}
|
|
|
|
.search-skeleton {
|
|
height: 54px;
|
|
margin: 4px;
|
|
border-radius: 11px;
|
|
@include shimmer;
|
|
}
|
|
|
|
.search-modal-foot {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 9px 14px;
|
|
border-top: 1px solid var(--border);
|
|
background: var(--surface);
|
|
font-size: 0.75rem;
|
|
color: var(--faint);
|
|
}
|
|
|
|
.foot-hints {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
|
|
.kbd-hint { margin-right: 4px; }
|
|
}
|
|
|
|
.foot-all {
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
|
|
&:hover { text-decoration: underline; }
|
|
}
|
|
|
|
@include popup-anim(
|
|
'search-popup',
|
|
'.search-modal',
|
|
0.16s,
|
|
transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
|
|
-10px
|
|
);
|