gamezonline/Moku
1
0
Fork 0
mirror of https://github.com/moku-project/Moku.git synced 2026-06-13 01:09:56 -05:00
Code Issues Packages Projects Releases Wiki Activity

[BETA] Initial Commit (Nix Support Only)

Browse Source
This commit is contained in:
Youwes09
2026-02-20 23:34:10 -06:00
commit 09554c68df
113 changed files with 14400 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/Search.module.css
+91
View File
@@ -0,0 +1,91 @@
.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); }