mirror of
https://github.com/moku-project/Moku.git
synced 2026-06-13 01:09:56 -05:00
Youwes09
91 lines
3.9 KiB
CSS
91 lines
3.9 KiB
CSS
.root {
|
|
display: flex; flex-direction: column; height: 100%;
|
|
overflow: hidden; animation: fadeIn 0.14s ease both;
|
|
}
|
|
|
|
.header {
|
|
display: flex; align-items: center; gap: var(--sp-4);
|
|
padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--border-dim); flex-shrink: 0;
|
|
}
|
|
.heading {
|
|
font-family: var(--font-ui); font-size: var(--text-xs);
|
|
color: var(--text-faint); letter-spacing: var(--tracking-wider);
|
|
text-transform: uppercase; flex-shrink: 0;
|
|
}
|
|
.searchBar {
|
|
flex: 1; display: flex; align-items: center; gap: var(--sp-2);
|
|
background: var(--bg-raised); border: 1px solid var(--border-dim);
|
|
border-radius: var(--radius-lg); padding: 0 var(--sp-3) 0 var(--sp-2);
|
|
transition: border-color var(--t-base);
|
|
}
|
|
.searchBar:focus-within { border-color: var(--border-strong); }
|
|
.searchIcon { color: var(--text-faint); flex-shrink: 0; }
|
|
.searchInput {
|
|
flex: 1; background: none; border: none; outline: none;
|
|
color: var(--text-primary); font-size: var(--text-sm); padding: 8px 0;
|
|
}
|
|
.searchInput::placeholder { color: var(--text-faint); }
|
|
.searchBtn {
|
|
font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
|
|
padding: 5px 12px; border-radius: var(--radius-md); flex-shrink: 0;
|
|
background: var(--accent-muted); color: var(--accent-fg);
|
|
border: 1px solid var(--accent-dim); cursor: pointer;
|
|
transition: filter var(--t-base); display: flex; align-items: center; gap: var(--sp-2);
|
|
}
|
|
.searchBtn:hover:not(:disabled) { filter: brightness(1.1); }
|
|
.searchBtn:disabled { opacity: 0.4; cursor: default; }
|
|
|
|
.results { flex: 1; overflow-y: auto; padding: var(--sp-5) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-6); }
|
|
|
|
.sourceSection { display: flex; flex-direction: column; gap: var(--sp-3); }
|
|
|
|
.sourceHeader {
|
|
display: flex; align-items: center; gap: var(--sp-2);
|
|
}
|
|
.sourceIcon { width: 18px; height: 18px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
|
|
.sourceName { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); }
|
|
.resultCount {
|
|
font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint);
|
|
letter-spacing: var(--tracking-wide); margin-left: auto;
|
|
}
|
|
.sourceError { font-size: var(--text-xs); color: var(--color-error); padding: 0 var(--sp-1); }
|
|
|
|
.sourceRow {
|
|
display: flex; gap: var(--sp-3); overflow-x: auto;
|
|
padding-bottom: var(--sp-2);
|
|
scrollbar-width: thin;
|
|
}
|
|
.card {
|
|
flex-shrink: 0; width: 110px; background: none; border: none; padding: 0;
|
|
cursor: pointer; text-align: left;
|
|
}
|
|
.card:hover .cover { filter: brightness(1.06); }
|
|
.coverWrap {
|
|
position: relative; aspect-ratio: 2/3; border-radius: var(--radius-md);
|
|
overflow: hidden; background: var(--bg-raised); border: 1px solid var(--border-dim);
|
|
}
|
|
.cover { width: 100%; height: 100%; object-fit: cover; transition: filter var(--t-base); }
|
|
.inLibBadge {
|
|
position: absolute; bottom: var(--sp-1); left: var(--sp-1);
|
|
font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide);
|
|
text-transform: uppercase; background: var(--accent-muted); color: var(--accent-fg);
|
|
border: 1px solid var(--accent-dim); padding: 2px 5px; border-radius: var(--radius-sm);
|
|
}
|
|
.cardTitle {
|
|
margin-top: var(--sp-1); font-size: var(--text-xs); color: var(--text-muted);
|
|
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
|
|
line-height: var(--leading-snug);
|
|
}
|
|
|
|
/* Skeletons */
|
|
.skCard { flex-shrink: 0; width: 110px; }
|
|
.skCover { aspect-ratio: 2/3; border-radius: var(--radius-md); }
|
|
.skTitle { height: 11px; margin-top: var(--sp-1); width: 75%; }
|
|
|
|
.empty {
|
|
flex: 1; display: flex; flex-direction: column;
|
|
align-items: center; justify-content: center; gap: var(--sp-2);
|
|
}
|
|
.emptyIcon { color: var(--text-faint); }
|
|
.emptyText { font-size: var(--text-base); color: var(--text-muted); }
|
|
.emptyHint { font-size: var(--text-sm); color: var(--text-faint); } |