diff --git a/css/public.css b/css/public.css index 57da4bf..b1618bc 100644 --- a/css/public.css +++ b/css/public.css @@ -272,7 +272,8 @@ body { } .rating-filter-btn:not(.active):hover .rf-star:not(.filled) { - color: rgba(255, 215, 0, 0.35); + color: rgba(255, 215, 0, 0.6); + text-shadow: 0 0 8px rgba(255, 215, 0, 0.15); } .rating-filter-btn.active .rf-star.filled { @@ -281,7 +282,7 @@ body { } .rating-filter-btn.active .rf-star:not(.filled) { - color: #555560; + color: #7a7a88; text-shadow: none; } @@ -951,8 +952,14 @@ footer { flex-wrap: nowrap; gap: 0.4rem; } - .rf-star { - font-size: 0.85rem; + .rf-star { + font-size: 0.85rem; + /* Gris argenté lumineux pour bien contraster avec le fond sombre */ + color: #9ca3af; + transition: color 0.2s ease, text-shadow 0.2s ease; + line-height: 1; + /* Très léger halo pour un effet "pellicule" et une meilleure lisibilité */ + text-shadow: 0 0 4px rgba(255, 255, 255, 0.08); } .rating-filter-btn { padding: 0.45rem 0.7rem; @@ -1124,15 +1131,15 @@ footer { grid-template-columns: repeat(2, 1fr); gap: 1rem 0.6rem; } - .card-title { - font-size: 0.75rem; + .card-title { + font-size: 0.75rem; } - .site-title { - font-size: 1.9rem; + .site-title { + font-size: 1.9rem; } } -card-video-footer { +.card-video-footer { flex-direction: column; align-items: flex-start; gap: 0.3rem; @@ -1157,14 +1164,12 @@ card-video-footer { margin-bottom: 2.5rem; flex-wrap: wrap; } - .pub-search-box { position: relative; flex: 1; max-width: 480px; min-width: 250px; } - .pub-search-box input { width: 100%; padding: 0.85rem 1.2rem 0.85rem 3rem; @@ -1176,18 +1181,15 @@ card-video-footer { 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; @@ -1195,7 +1197,7 @@ card-video-footer { transform: translateY(-50%); color: var(--muted); font-size: 1.2rem; - pointer-events: none; /* Empêche l'icône de bloquer le clic */ + pointer-events: none; } /* Menu déroulant Streaming */ @@ -1209,28 +1211,25 @@ card-video-footer { font-size: 0.95rem; cursor: pointer; transition: all 0.25s; - appearance: none; /* Supprime le style par défaut du navigateur */ + appearance: none; -webkit-appearance: none; - /* Flèche personnalisée dorée */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23C9A84C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; min-width: 220px; } - .pub-streaming-select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-dim); } - -/* Style des options dans le menu déroulant (thème sombre) */ .pub-streaming-select option { background: var(--surface-card); color: var(--text); padding: 0.5rem; } + /* ═════════════════════════════════════════════════════════════ RESPONSIVE MOBILE ═══════════════════════════════════════════════════════════════ */