diff --git a/css/public.css b/css/public.css index 4ca79ae..5229dd3 100644 --- a/css/public.css +++ b/css/public.css @@ -1,54 +1,162 @@ +.footer { + .rf-label { display: none; } + .rf-star { font-size: 0.8rem; } + .rating-filter-btn { padding: 0.4rem 0.65rem; } +} + /* ══════════════════════════════════════════════════════════════ - FILTRE PAR PLATEFORME DE STREAMING + AMÉLIORATIONS UI PUBLIQUE (Recherche, Pagination, Cartes) ═══════════════════════════════════════════════════════════════ */ -.streaming-filter-bar { +/* Barre de recherche publique */ +.pub-filters { + display: flex; + justify-content: center; + margin-bottom: 2.5rem; +} +.pub-search-box { + position: relative; + width: 100%; + max-width: 480px; +} +.pub-search-box input { + width: 100%; + padding: 0.85rem 1.2rem 0.85rem 3rem; + background: var(--surface); + border: 1px solid var(--border); + border-radius: 30px; + color: var(--text); + font-family: inherit; + font-size: 0.95rem; + transition: all 0.25s; +} +.pub-search-box input:focus { + outline: none; + border-color: var(--gold); + box-shadow: 0 0 0 3px var(--gold-dim); + background: var(--surface-card); +} +.pub-search-box input::placeholder { + color: var(--muted); +} +.pub-search-box i { + position: absolute; + left: 1.2rem; + top: 50%; + transform: translateY(-50%); + color: var(--muted); + font-size: 1.2rem; +} + +/* Pagination publique */ +.pub-pagination { + display: flex; + justify-content: center; + align-items: center; + gap: 0.4rem; + margin-top: 3rem; + padding: 1rem 0; + flex-wrap: wrap; +} +.pub-pagination button { + background: var(--surface); + border: 1px solid var(--border); + color: var(--text-secondary); + min-width: 40px; + height: 40px; + border-radius: 10px; display: flex; align-items: center; justify-content: center; - gap: 1rem; - margin-bottom: 2rem; - flex-wrap: wrap; - padding: 1rem; - background: var(--surface); - border: 1px solid var(--border); - border-radius: 12px; -} - -.streaming-filter-btn { - background: var(--surface-card); - border: 1px solid var(--border); - border-radius: 20px; - padding: 0.5rem 1rem; cursor: pointer; - font-size: 0.85rem; + transition: all 0.25s; font-weight: 500; - color: var(--text-secondary); - transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); + font-size: 0.9rem; font-family: inherit; } - -.streaming-filter-btn:hover { +.pub-pagination button:hover:not(:disabled):not(.active) { border-color: var(--gold); - background: var(--gold-dim); color: var(--gold); + background: var(--gold-dim); } - -.streaming-filter-btn.active { - border-color: var(--gold); +.pub-pagination button.active { background: var(--gold); color: var(--background); + border-color: var(--gold); font-weight: 600; - box-shadow: 0 0 12px var(--gold-glow); + box-shadow: 0 4px 12px var(--gold-glow); +} +.pub-pagination button:disabled { + opacity: 0.3; + cursor: not-allowed; +} +.pub-pagination-info { + color: var(--muted); + font-size: 0.85rem; + margin: 0 1rem; + font-weight: 500; + letter-spacing: 0.03em; +} + +/* Amélioration des cartes */ +.card { + position: relative; +} +.card-streaming-badge { + position: absolute; + top: 10px; + right: 10px; + background: rgba(0, 0, 0, 0.75); + backdrop-filter: blur(8px); + color: var(--gold); + font-size: 0.7rem; + font-weight: 600; + padding: 0.25rem 0.6rem; + border-radius: 20px; + border: 1px solid rgba(201, 168, 76, 0.3); + z-index: 2; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 140px; +} +.card-physical-badge { + position: absolute; + top: 10px; + right: 10px; + background: rgba(0, 0, 0, 0.75); + backdrop-filter: blur(8px); + color: var(--muted); + font-size: 0.7rem; + font-weight: 600; + padding: 0.25rem 0.6rem; + border-radius: 20px; + border: 1px solid rgba(255, 255, 255, 0.1); + z-index: 2; +} +.card-rating-badge { + display: inline-block; + background: var(--surface); + border: 1px solid var(--border); + color: var(--gold); + font-size: 0.75rem; + font-weight: 600; + padding: 0.1rem 0.45rem; + border-radius: 5px; + margin-left: 0.4rem; + vertical-align: middle; +} +.card-director { + font-size: 0.78rem; + color: var(--muted); + margin-top: 0.2rem; + font-style: italic; } @media (max-width: 720px) { - .streaming-filter-bar { - gap: 0.5rem; - padding: 0.8rem; - } - .streaming-filter-btn { - padding: 0.4rem 0.8rem; - font-size: 0.8rem; - } -} \ No newline at end of file + .pub-search-box { max-width: 100%; } + .pub-pagination button { min-width: 36px; height: 36px; font-size: 0.85rem; } +} +Propulsé par Gitea +Version: 1.26.2 +Page: 198ms M \ No newline at end of file