Actualiser css/public.css

2026-06-20 20:45:25 +02:00
parent 8b940723ef
commit b83f0b801c
1 changed files with 106 additions and 0 deletions
@@ -1143,4 +1143,110 @@ card-video-footer {
 }
 .video-length {
    font-size: 0.7rem;
+}
+
+/* ══════════════════════════════════════════════════════════════
+   BARRE DE FILTRES (Recherche + Select Streaming)
+   ═══════════════════════════════════════════════════════════════ */
+
+.pub-filters {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+    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;
+    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;
+    pointer-events: none; /* Empêche l'icône de bloquer le clic */
+}
+
+/* Menu déroulant Streaming */
+.pub-streaming-select {
+    padding: 0.85rem 2.5rem 0.85rem 1.2rem;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 30px;
+    color: var(--text);
+    font-family: inherit;
+    font-size: 0.95rem;
+    cursor: pointer;
+    transition: all 0.25s;
+    appearance: none; /* Supprime le style par défaut du navigateur */
+    -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
+   ═══════════════════════════════════════════════════════════════ */
+
+@media (max-width: 720px) {
+    .pub-filters {
+        flex-direction: column;
+        gap: 0.8rem;
+        width: 100%;
+    }
+    .pub-search-box {
+        max-width: 100%;
+        width: 100%;
+    }
+    .pub-streaming-select {
+        width: 100%;
+        max-width: 100%;
+    }
 }