/* ── Backlog Page Styles ────────────────────────────────────────────────────── Dark-mode compatible, responsive list layout. Relies on CSS custom properties set by PaperMod's dark class on . ─────────────────────────────────────────────────────────────────────────── */ /* ── Layout ──────────────────────────────────────────────────────────────── */ .backlog-page { max-width: 1200px; margin: 0 auto; padding: 1rem; } .backlog-header { margin-bottom: 1.5rem; } .backlog-header h1 { margin: 0 0 0.25rem; } .backlog-description { color: var(--secondary); margin: 0; } /* ── Statistics ──────────────────────────────────────────────────────────── */ .backlog-stats { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem; padding: 0.75rem 1rem; background: var(--entry); border-radius: 8px; border: 1px solid var(--border); } .stat-item { font-size: 0.875rem; color: var(--secondary); } .stat-item strong { color: var(--primary); } /* ── Filters ─────────────────────────────────────────────────────────────── */ .backlog-filters { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem; } .filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .filter-label { font-size: 0.8125rem; font-weight: 600; color: var(--secondary); white-space: nowrap; min-width: 70px; } .filter-buttons { display: flex; flex-wrap: wrap; gap: 0.375rem; } .filter-btn { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.3rem 0.75rem; border: 1.5px solid var(--border); border-radius: 999px; background: var(--entry); color: var(--primary); font-size: 0.8rem; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; white-space: nowrap; } .filter-btn:hover { border-color: var(--btn-color, var(--primary)); background: color-mix(in srgb, var(--btn-color, var(--primary)) 15%, transparent); } .filter-btn.active { background: var(--btn-color, var(--primary)); border-color: var(--btn-color, var(--primary)); color: #fff; } .filter-btn--reset { --btn-color: #888; margin-top: 0.25rem; } .filter-group--reset { padding-top: 0.25rem; } /* ── Results info ────────────────────────────────────────────────────────── */ .backlog-results-info { font-size: 0.875rem; color: var(--secondary); margin: 0 0 1rem; min-height: 1.25rem; } /* ── Badges ──────────────────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.2rem 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; background: color-mix(in srgb, var(--badge-color, #888) 20%, transparent); color: var(--badge-color, #888); border: 1px solid color-mix(in srgb, var(--badge-color, #888) 40%, transparent); } /* ── Tags ────────────────────────────────────────────────────────────────── */ .tag { font-size: 0.72rem; padding: 0.15rem 0.45rem; border-radius: 4px; background: var(--code-bg, rgba(128, 128, 128, 0.15)); color: var(--secondary); } /* ── Meta items ──────────────────────────────────────────────────────────── */ .meta-item { font-size: 0.78rem; color: var(--secondary); } /* ── Empty state ─────────────────────────────────────────────────────────── */ .backlog-empty { text-align: center; color: var(--secondary); padding: 3rem 1rem; font-size: 1.1rem; } .backlog-empty[hidden] { display: none; } /* ── Game List ────────────────────────────────────────────────────────────── */ .backlog-list { display: flex; flex-direction: column; gap: 1rem; } /* ── Game Item ───────────────────────────────────────────────────────────── */ .game-item { background: var(--entry); border: 1px solid var(--border); border-radius: 10px; display: flex; flex-direction: row; gap: 1rem; overflow: hidden; transition: box-shadow 0.2s, transform 0.2s; } .game-item:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); transform: translateY(-2px); } .game-item[hidden] { display: none; } /* ── Cover Image ─────────────────────────────────────────────────────────── */ .game-item__image { flex-shrink: 0; width: 120px; height: 160px; overflow: hidden; border-radius: 8px 0 0 8px; /*background: var(--code-bg, rgba(128, 128, 128, 0.15));*/ display: flex; align-items: center; justify-content: center; padding: 10px; } .game-item__image img { width: 100%; height: 100%; object-fit: cover; display: block; } .game-item__image-placeholder { font-size: 3rem; line-height: 1; opacity: 0.4; } /* ── Item body ───────────────────────────────────────────────────────────── */ .game-item__body { flex: 1; padding: 0.9rem 0.9rem 0.9rem 0; display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; } .game-item__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; flex-wrap: wrap; } .game-item__title { font-size: 1rem; font-weight: 700; margin: 0; line-height: 1.3; color: var(--primary); } .game-item__badges { display: flex; flex-wrap: wrap; gap: 0.3rem; } .game-item__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; } .game-item__genres { display: flex; flex-wrap: wrap; gap: 0.3rem; } .game-item__notes { font-size: 0.82rem; color: var(--secondary); margin: 0; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; /* tighter truncation suits the compact list layout */ -webkit-box-orient: vertical; overflow: hidden; } /* ── Progress Bar ────────────────────────────────────────────────────────── */ .game-item__progress { display: flex; align-items: center; gap: 0.6rem; margin-top: auto; } .progress-bar { flex: 1; height: 8px; background: var(--border); border-radius: 999px; overflow: hidden; } .progress-bar__fill { height: 100%; background: var(--primary); border-radius: 999px; transition: width 0.3s ease; } .progress-label { font-size: 0.78rem; font-weight: 600; color: var(--secondary); white-space: nowrap; min-width: 2.5rem; text-align: right; } /* ── Responsive tweaks ───────────────────────────────────────────────────── */ @media (max-width: 600px) { .game-item { flex-direction: column; } .game-item__image { width: 100%; height: 160px; border-radius: 8px 8px 0 0; } .game-item__body { padding: 0.75rem; } .filter-label { min-width: unset; width: 100%; } }