Upgrade of BloomFeed v0.1

2026-07-03 21:46:06 +02:00
parent 7a7440daab
commit c549e9cfc0
24 changed files with 591 additions and 6 deletions
@@ -998,6 +998,148 @@ h1, h2, h3 {
    background: var(--accent-soft);
 }

+/* ---------- Catalogue (market) ---------- */
+
+.market-header {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: var(--space-3);
+    flex-wrap: wrap;
+}
+
+.cache-notice {
+    background: var(--accent-soft);
+    border: 1px solid var(--accent-soft-strong);
+    border-radius: var(--radius-sm);
+    padding: 12px 16px;
+    font-size: var(--font-sm);
+    font-weight: 600;
+    color: var(--accent-strong);
+    animation: fade-up 350ms var(--ease-out) both;
+}
+
+.market-search {
+    font-size: var(--font-base);
+    padding: 13px 18px;
+    border-radius: var(--radius);
+}
+
+.market-chips {
+    display: flex;
+    gap: var(--space-2);
+    flex-wrap: wrap;
+}
+
+.chip {
+    background: var(--surface);
+    border: 1.5px solid var(--border);
+    border-radius: var(--radius-full);
+    padding: 6px 15px;
+    font-size: var(--font-xs);
+    font-weight: 700;
+    color: var(--text-muted);
+    cursor: pointer;
+    font-family: inherit;
+    transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast), transform var(--t-fast);
+}
+
+.chip:hover {
+    border-color: var(--accent);
+    color: var(--accent-strong);
+    transform: translateY(-1px);
+}
+
+.chip.active {
+    background: var(--gradient-accent);
+    border-color: transparent;
+    color: var(--accent-contrast);
+    box-shadow: var(--shadow-sm);
+}
+
+.chip-static {
+    cursor: default;
+    background: var(--accent-soft);
+    border-color: transparent;
+    color: var(--accent-strong);
+    font-size: 10px;
+    padding: 3px 10px;
+}
+
+.chip-static:hover {
+    transform: none;
+    color: var(--accent-strong);
+    border-color: transparent;
+}
+
+.market-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
+    gap: var(--space-4);
+}
+
+.market-card {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow-sm);
+    padding: var(--space-4) var(--space-5);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    animation: fade-up 450ms var(--ease-out) both;
+    transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
+}
+
+.market-card:hover {
+    transform: translateY(-3px);
+    box-shadow: var(--shadow-md);
+    border-color: var(--accent-soft-strong);
+}
+
+.market-card-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-2);
+}
+
+.market-card-title {
+    font-weight: 700;
+    font-size: var(--font-base);
+}
+
+.market-card-desc {
+    font-size: var(--font-sm);
+    color: var(--text-muted);
+    margin: 0;
+    flex: 1;
+    overflow-wrap: anywhere;
+}
+
+.market-card-foot {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: var(--space-1);
+}
+
+.market-lang {
+    font-size: 10px;
+    font-weight: 800;
+    letter-spacing: 0.08em;
+    color: var(--text-faint);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 2px 6px;
+}
+
+.market-added {
+    color: var(--green);
+    font-size: var(--font-sm);
+    font-weight: 700;
+}
+
 /* ---------- Responsive ---------- */

@media (max-width: 720px) {