INIT
This commit is contained in:
oliver committed
commit
14555c6e37
5 files changed
+744
No files matched your search
@@ -0,0 +1,299 @@
|
||||
:root {
|
||||
--bg: #0f1115;
|
||||
--bg-elev: #171a21;
|
||||
--bg-elev-2: #1e222b;
|
||||
--border: #2a2f3a;
|
||||
--text: #e7e9ee;
|
||||
--text-dim: #9aa2b1;
|
||||
--accent: #4c8dff;
|
||||
--accent-soft: rgba(76, 141, 255, 0.16);
|
||||
--ok: #3ddc84;
|
||||
--radius: 12px;
|
||||
--shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--bg: #f6f7f9;
|
||||
--bg-elev: #ffffff;
|
||||
--bg-elev-2: #f0f2f5;
|
||||
--border: #e2e5ea;
|
||||
--text: #1a1d23;
|
||||
--text-dim: #626b7a;
|
||||
--accent: #2563eb;
|
||||
--accent-soft: rgba(37, 99, 235, 0.12);
|
||||
--ok: #16a34a;
|
||||
--shadow: 0 6px 24px rgba(15, 23, 42, 0.10);
|
||||
color-scheme: light;
|
||||
}
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
width: min(1200px, 100% - 2rem);
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
/* ---------- Header ---------- */
|
||||
|
||||
.site-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
padding: 1.5rem 0 1rem;
|
||||
background: color-mix(in srgb, var(--bg) 88%, transparent);
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.site-title {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.site-sub {
|
||||
margin: 0.25rem 0 1rem;
|
||||
color: var(--text-dim);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
left: 0.85rem;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
fill: var(--text-dim);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: 0.75rem 2.75rem 0.75rem 2.6rem;
|
||||
font-size: 1rem;
|
||||
color: var(--text);
|
||||
background: var(--bg-elev);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
outline: none;
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
}
|
||||
|
||||
.search-input::placeholder { color: var(--text-dim); }
|
||||
|
||||
.search-input:focus {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px var(--accent-soft);
|
||||
}
|
||||
|
||||
.search-clear {
|
||||
position: absolute;
|
||||
right: 0.5rem;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1;
|
||||
color: var(--text-dim);
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.search-clear:hover { color: var(--text); background: var(--bg-elev-2); }
|
||||
|
||||
.meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
margin-top: 0.65rem;
|
||||
font-size: 0.82rem;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
/* ---------- Grid ---------- */
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
|
||||
gap: 1rem;
|
||||
padding: 1.5rem 0 3rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
color: inherit;
|
||||
background: var(--bg-elev);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
cursor: pointer;
|
||||
transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
|
||||
}
|
||||
|
||||
.card:hover,
|
||||
.card:focus-visible {
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--accent);
|
||||
box-shadow: var(--shadow);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.card:active { transform: translateY(0); }
|
||||
|
||||
.thumb {
|
||||
position: relative;
|
||||
aspect-ratio: 4 / 3;
|
||||
background:
|
||||
linear-gradient(45deg, var(--bg-elev-2) 25%, transparent 25%) 0 0 / 16px 16px,
|
||||
linear-gradient(-45deg, var(--bg-elev-2) 25%, transparent 25%) 0 8px / 16px 16px,
|
||||
linear-gradient(45deg, transparent 75%, var(--bg-elev-2) 75%) 8px -8px / 16px 16px,
|
||||
linear-gradient(-45deg, transparent 75%, var(--bg-elev-2) 75%) -8px 0 / 16px 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.thumb img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card-name {
|
||||
padding: 0.6rem 0.7rem;
|
||||
font-size: 0.82rem;
|
||||
line-height: 1.35;
|
||||
word-break: break-all;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.card-name mark {
|
||||
padding: 0 1px;
|
||||
color: inherit;
|
||||
background: var(--accent-soft);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.copy-badge {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.72rem;
|
||||
color: var(--text);
|
||||
background: color-mix(in srgb, var(--bg) 78%, transparent);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 999px;
|
||||
opacity: 0;
|
||||
transform: translateY(-4px);
|
||||
transition: opacity 0.12s, transform 0.12s;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.card:hover .copy-badge,
|
||||
.card:focus-visible .copy-badge {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.card.copied .copy-badge {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
color: var(--ok);
|
||||
border-color: var(--ok);
|
||||
}
|
||||
|
||||
/* ---------- States ---------- */
|
||||
|
||||
.loading,
|
||||
.empty {
|
||||
padding: 3rem 1rem;
|
||||
text-align: center;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
margin: 0 0 0.35rem;
|
||||
font-size: 1.05rem;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.empty-hint { margin: 0; font-size: 0.88rem; }
|
||||
|
||||
.empty-hint code {
|
||||
padding: 0.1rem 0.35rem;
|
||||
background: var(--bg-elev-2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 5px;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
/* ---------- Toast ---------- */
|
||||
|
||||
.toast {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
bottom: 1.5rem;
|
||||
z-index: 50;
|
||||
max-width: min(560px, calc(100vw - 2rem));
|
||||
padding: 0.7rem 1rem;
|
||||
color: var(--text);
|
||||
background: var(--bg-elev);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
transform: translate(-50%, 1rem);
|
||||
opacity: 0;
|
||||
transition: opacity 0.18s, transform 0.18s;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.toast.show {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
.toast.error { border-color: #e5484d; }
|
||||
|
||||
.toast-url {
|
||||
display: block;
|
||||
margin-top: 0.2rem;
|
||||
font-size: 0.78rem;
|
||||
color: var(--text-dim);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
|
||||
.site-title { font-size: 1.25rem; }
|
||||
}
|
||||
Reference in new issue
Block a user