/* ═══════════════════════════════════════════════════════════ WP Sondage — Frontend CSS Adaptation automatique thème sombre/clair via CSS variables ═══════════════════════════════════════════════════════════ */ /* ── Design tokens (mode clair par défaut) ── */ :root { --wps-bg: #ffffff; --wps-bg-card: #f8f9fa; --wps-border: #dee2e6; --wps-text: #212529; --wps-text-muted: #6c757d; --wps-primary: #0d6efd; --wps-primary-hover: #0b5ed7; --wps-primary-text: #ffffff; --wps-success: #198754; --wps-danger: #dc3545; --wps-bar-bg: #e9ecef; --wps-bar-fill: #0d6efd; --wps-radius: 8px; --wps-shadow: 0 2px 8px rgba(0,0,0,.08); --wps-transition: .25s ease; } /* ──────────────────────────────────────────────────────────── THÈME SOMBRE Détection prioritaire par classe sur html/body (toggle JS) Fallback : prefers-color-scheme quand aucune classe présente ────────────────────────────────────────────────────────────── Classes courantes des thèmes WordPress : • .dark-mode (GeneratePress, Astra, Blocksy…) • .dark (Kadence, Neve…) • [data-theme="dark"] • .night-mode • body.dark, html.dark RDR-IT semble utiliser un data-attribute ou classe sur /. Le JS du plugin (wps-public.js) applique .wps-is-dark sur chaque .wps-poll après avoir détecté le mode actif — c'est cette classe qu'on cible ici. ──────────────────────────────────────────────────────────────── */ /* Tokens dark — appliqués quand le JS a confirmé le mode sombre */ .wps-poll.wps-is-dark, .wps-poll.wps-theme-dark { --wps-bg: #1e1e2e; --wps-bg-card: #28283c; --wps-border: #3a3a55; --wps-text: #e0e0f0; --wps-text-muted: #9090b0; --wps-primary: #7c9cff; --wps-primary-hover: #9cb4ff; --wps-primary-text: #0d0d1e; --wps-success: #4ade80; --wps-danger: #f87171; --wps-bar-bg: #3a3a55; --wps-bar-fill: #7c9cff; --wps-shadow: 0 2px 12px rgba(0,0,0,.35); } /* Fallback OS-level uniquement — désactivé si le thème gère lui-même le mode */ @media (prefers-color-scheme: dark) { .wps-poll.wps-theme-auto:not(.wps-theme-resolved) { --wps-bg: #1e1e2e; --wps-bg-card: #28283c; --wps-border: #3a3a55; --wps-text: #e0e0f0; --wps-text-muted: #9090b0; --wps-primary: #7c9cff; --wps-primary-hover: #9cb4ff; --wps-primary-text: #0d0d1e; --wps-success: #4ade80; --wps-danger: #f87171; --wps-bar-bg: #3a3a55; --wps-bar-fill: #7c9cff; --wps-shadow: 0 2px 12px rgba(0,0,0,.35); } } /* ══════════════════════════════════════════════════════════════ BASE — commun aux deux modes (widget & single) Variables de densité : surchargeables par contexte ══════════════════════════════════════════════════════════════ */ .wps-poll { /* tokens de densité — défaut "single" (confortable) */ --wps-poll-padding: 1.25rem 1.4rem; --wps-question-size: 1.05rem; --wps-question-mb: .9rem; --wps-choice-gap: .35rem; --wps-choice-mb: .75rem; --wps-choice-pad: .45rem .8rem; --wps-choice-size: .88rem; --wps-input-size: .95rem; --wps-btn-pad: .5rem 1.3rem; --wps-btn-size: .85rem; --wps-more-mt: .6rem; background: var(--wps-bg-card); border: 1px solid var(--wps-border); border-radius: var(--wps-radius); box-shadow: var(--wps-shadow); color: var(--wps-text); font-family: inherit; font-size: var(--wps-choice-size); padding: var(--wps-poll-padding); max-width: 600px; margin: 1rem auto; } /* ── Mode widget / shortcode / sidebar : COMPACT ── */ .wps-poll-widget { --wps-poll-padding: .85rem 1rem; --wps-question-size: .92rem; --wps-question-mb: .65rem; --wps-choice-gap: .25rem; --wps-choice-mb: .55rem; --wps-choice-pad: .32rem .65rem; --wps-choice-size: .82rem; --wps-input-size: .85rem; --wps-btn-pad: .38rem 1rem; --wps-btn-size: .8rem; --wps-more-mt: .45rem; max-width: 100%; /* s'adapte à la sidebar */ margin: 0; box-shadow: none; /* plus léger dans une sidebar */ } /* ── Mode page détail : plus d'espace ── */ .wps-poll-single { --wps-poll-padding: 1.5rem 1.75rem; --wps-question-size: 1.15rem; --wps-question-mb: 1.1rem; --wps-choice-gap: .45rem; --wps-choice-mb: .9rem; --wps-choice-pad: .6rem .9rem; --wps-choice-size: .95rem; --wps-input-size: 1rem; --wps-btn-pad: .65rem 1.75rem; --wps-btn-size: .95rem; --wps-more-mt: .9rem; max-width: 600px; } /* ── Question ── */ .wps-question { font-size: var(--wps-question-size); font-weight: 700; line-height: 1.35; margin-bottom: var(--wps-question-mb); color: var(--wps-text); } /* ════════════════════════════════════════ Choix (radio / checkbox) ════════════════════════════════════════ */ .wps-choices { display: flex; flex-direction: column; gap: var(--wps-choice-gap); margin-bottom: var(--wps-choice-mb); } .wps-choice-item { display: flex; flex-direction: column; } .wps-choice-label { display: flex; align-items: center; gap: .55rem; cursor: pointer; padding: var(--wps-choice-pad); border: 1px solid var(--wps-border); border-radius: calc(var(--wps-radius) - 2px); transition: background var(--wps-transition), border-color var(--wps-transition); /* empêche le label de grossir avec la police du thème */ font-size: var(--wps-choice-size); line-height: 1.3; } .wps-choice-label:hover { background: var(--wps-bg); border-color: var(--wps-primary); } .wps-choice-input { accent-color: var(--wps-primary); width: var(--wps-input-size); height: var(--wps-input-size); flex-shrink: 0; } .wps-choice-text { /* hérite de .wps-choice-label */ line-height: 1.3; } /* Sous-choix */ .wps-sub-choices { margin-left: 1.2rem; margin-top: .3rem; border-left: 2px solid var(--wps-primary); padding-left: .6rem; display: flex; flex-direction: column; gap: .25rem; } .wps-choice-child .wps-choice-label { font-size: calc(var(--wps-choice-size) * .93); padding: calc(var(--wps-choice-pad) * .85); } /* ════════════════════════════════════════ Bouton vote ════════════════════════════════════════ */ .wps-btn-vote { background: var(--wps-primary); color: var(--wps-primary-text); border: none; border-radius: calc(var(--wps-radius) - 2px); padding: var(--wps-btn-pad); font-size: var(--wps-btn-size); font-weight: 600; cursor: pointer; transition: background var(--wps-transition), transform .1s; display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; } .wps-btn-vote:hover { background: var(--wps-primary-hover); } .wps-btn-vote:active { transform: scale(.97); } .wps-btn-vote:disabled { opacity: .55; cursor: not-allowed; } /* ════════════════════════════════════════ Messages ════════════════════════════════════════ */ .wps-msg { font-size: .8rem; margin: .35rem 0; min-height: 1em; font-weight: 500; } .wps-msg-success { color: var(--wps-success); } .wps-msg-error { color: var(--wps-danger); } .wps-notice { font-size: .8rem; color: var(--wps-text-muted); padding: .45rem .75rem; border: 1px solid var(--wps-border); border-radius: calc(var(--wps-radius) - 2px); margin-top: .4rem; line-height: 1.35; } .wps-closed { border-color: var(--wps-danger); color: var(--wps-danger); } .wps-voted { border-color: var(--wps-success); color: var(--wps-success); } /* ════════════════════════════════════════ Spinner ════════════════════════════════════════ */ .wps-spinner { width: 16px; height: 16px; border: 2px solid var(--wps-bar-bg); border-top-color: var(--wps-primary); border-radius: 50%; animation: wps-spin .7s linear infinite; flex-shrink: 0; display: none; } .wps-spinner--active { display: inline-block; } @keyframes wps-spin { to { transform: rotate(360deg); } } .wps-form { display: flex; flex-wrap: wrap; gap: .4rem; } .wps-form .wps-choices { width: 100%; } .wps-form .wps-msg { width: 100%; margin: 0; } /* ════════════════════════════════════════ Résultats ════════════════════════════════════════ */ .wps-results { margin-top: 1rem; } .wps-poll-widget .wps-results { margin-top: .65rem; } .wps-total { font-size: .72rem; color: var(--wps-text-muted); margin-bottom: .5rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; } .wps-poll-widget .wps-total { margin-bottom: .4rem; } .wps-result-row { display: grid; grid-template-columns: 1fr 1fr auto auto; align-items: center; gap: .3rem .4rem; margin-bottom: .4rem; } .wps-poll-widget .wps-result-row { margin-bottom: .3rem; } .wps-result-label { font-size: .82rem; line-height: 1.25; grid-column: 1 / -1; font-weight: 500; } .wps-poll-widget .wps-result-label { font-size: .78rem; } .wps-result-bar-wrap { background: var(--wps-bar-bg); border-radius: 99px; height: 6px; overflow: hidden; grid-column: 1 / 3; } .wps-poll-single .wps-result-bar-wrap { height: 8px; } .wps-result-bar { background: var(--wps-bar-fill); height: 100%; border-radius: 99px; transition: width .6s cubic-bezier(.4,0,.2,1); width: 0%; } .wps-result-pct { font-size: .78rem; font-weight: 700; color: var(--wps-primary); white-space: nowrap; } .wps-result-count { font-size: .72rem; color: var(--wps-text-muted); white-space: nowrap; } /* Le widget n'affiche pas le compteur brut — trop verbeux */ .wps-poll-widget .wps-result-count { display: none; } /* Sous-résultats */ .wps-sub-results { grid-column: 1 / -1; margin-left: 1rem; border-left: 2px solid var(--wps-border); padding-left: .6rem; margin-top: .2rem; } .wps-result-sub .wps-result-label { font-size: .78rem; } .wps-result-sub .wps-result-bar { background: color-mix(in srgb, var(--wps-bar-fill) 60%, transparent); } /* ════════════════════════════════════════ Lien "Voir le détail" ════════════════════════════════════════ */ .wps-more-link { display: inline-block; margin-top: var(--wps-more-mt); font-size: .8rem; color: var(--wps-primary); text-decoration: none; font-weight: 500; opacity: .85; } .wps-more-link:hover { text-decoration: underline; opacity: 1; } /* ════════════════════════════════════════ Archive (liste) ════════════════════════════════════════ */ .wps-archive-wrap { max-width: 900px; margin: 0 auto; padding: 2rem 1rem; } .wps-archive-title { font-size: 1.8rem; margin-bottom: 1rem; color: var(--wps-text, inherit); } .wps-cat-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; } .wps-cat-link { padding: .35rem .9rem; border: 1px solid currentColor; border-radius: 99px; font-size: .85rem; text-decoration: none; color: inherit; opacity: .7; transition: opacity .2s, background .2s; } .wps-cat-link:hover { opacity: 1; background: rgba(13,110,253,.08); } .wps-polls-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; } .wps-poll-card { background: var(--wps-bg-card, #f8f9fa); border: 1px solid var(--wps-border, #dee2e6); border-radius: var(--wps-radius, 8px); transition: box-shadow .2s, transform .15s; } .wps-poll-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.12); transform: translateY(-2px); } .wps-poll-card.wps-card-closed { opacity: .65; } .wps-card-link { display: block; padding: 1.1rem; text-decoration: none; color: inherit; } .wps-card-question { font-weight: 600; font-size: 1rem; line-height: 1.4; margin-bottom: .6rem; } .wps-card-meta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: .8rem; color: var(--wps-text-muted, #6c757d); } .wps-badge-closed, .wps-badge-voted { padding: .15rem .55rem; border-radius: 99px; font-size: .75rem; font-weight: 600; } .wps-badge-closed { background: #ffeaea; color: #dc3545; } .wps-badge-voted { background: #eaffea; color: #198754; } @media (prefers-color-scheme: dark) { .wps-badge-closed { background: rgba(220,53,69,.2); } .wps-badge-voted { background: rgba(25,135,84,.2); } } /* ════════════════════════════════════════ Lazy placeholder ════════════════════════════════════════ */ .wps-lazy-widget { min-height: 60px; } .wps-loading { color: var(--wps-text-muted, #6c757d); font-size: .875rem; padding: 1rem; text-align: center; } /* ── Responsive ── */ @media (max-width: 480px) { .wps-poll-single { padding: 1rem 1.1rem; } .wps-result-row { grid-template-columns: 1fr auto; } .wps-result-bar-wrap { grid-column: 1 / -1; } } /* ════════════════════════════════════════ Bouton Reset (admin uniquement) ════════════════════════════════════════ */ .wps-btn-reset { margin-top: .75rem; background: transparent; color: var(--wps-danger); border: 1px solid var(--wps-danger); border-radius: calc(var(--wps-radius) - 2px); padding: .4rem 1rem; font-size: .8rem; font-weight: 500; cursor: pointer; transition: background var(--wps-transition), color var(--wps-transition); display: inline-flex; align-items: center; gap: .4rem; } .wps-btn-reset::before { content: '🗑'; font-style: normal; } .wps-btn-reset:hover { background: var(--wps-danger); color: #fff; } .wps-btn-reset:disabled { opacity: .5; cursor: not-allowed; } /* ════════════════════════════════════════ Archive améliorée — grille + hero stat ════════════════════════════════════════ */ .wps-archive-wrap { max-width: 1000px; margin: 0 auto; padding: 2rem 1rem; } .wps-archive-hero { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; padding: 1.25rem 1.5rem; background: linear-gradient(135deg, rgba(13,110,253,.08) 0%, rgba(13,110,253,.03) 100%); border: 1px solid rgba(13,110,253,.18); border-radius: var(--wps-radius, 8px); align-items: center; } .wps-archive-hero-stat { text-align: center; flex: 1; min-width: 80px; } .wps-archive-hero-stat strong { display: block; font-size: 2rem; font-weight: 800; color: #0d6efd; line-height: 1; } .wps-archive-hero-stat span { font-size: .75rem; color: var(--wps-text-muted, #6c757d); text-transform: uppercase; letter-spacing: .05em; } .wps-archive-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1.25rem; } .wps-archive-search { flex: 1; min-width: 180px; padding: .45rem .85rem; border: 1px solid var(--wps-border, #dee2e6); border-radius: 99px; font-size: .9rem; background: var(--wps-bg, #fff); color: var(--wps-text, #212529); outline: none; transition: border-color .2s; } .wps-archive-search:focus { border-color: #0d6efd; } .wps-archive-sort { padding: .45rem .85rem; border: 1px solid var(--wps-border, #dee2e6); border-radius: 99px; font-size: .875rem; background: var(--wps-bg, #fff); color: var(--wps-text, #212529); cursor: pointer; } /* Grille de cartes */ .wps-polls-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.1rem; } .wps-poll-card { background: var(--wps-bg-card, #f8f9fa); border: 1px solid var(--wps-border, #dee2e6); border-radius: var(--wps-radius, 8px); transition: box-shadow .2s, transform .15s, border-color .2s; position: relative; overflow: hidden; } .wps-poll-card::before { content: ''; display: block; height: 3px; background: linear-gradient(90deg, #0d6efd, #6c9fff); opacity: 0; transition: opacity .2s; } .wps-poll-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.1); transform: translateY(-3px); } .wps-poll-card:hover::before { opacity: 1; } .wps-poll-card.wps-card-closed { opacity: .7; } .wps-poll-card.wps-card-closed::before { background: #adb5bd; opacity: 1; } .wps-card-link { display: block; padding: 1.1rem 1.2rem 1rem; text-decoration: none; color: inherit; } .wps-card-question { font-weight: 600; font-size: .98rem; line-height: 1.45; margin-bottom: .75rem; color: var(--wps-text, #212529); } .wps-card-progress { height: 4px; background: var(--wps-bar-bg, #e9ecef); border-radius: 99px; overflow: hidden; margin-bottom: .7rem; } .wps-card-progress-fill { height: 100%; background: linear-gradient(90deg, #0d6efd, #6c9fff); border-radius: 99px; transition: width .4s ease; } .wps-card-meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .78rem; color: var(--wps-text-muted, #6c757d); } .wps-card-votes { font-weight: 600; } .wps-card-cats { display: flex; flex-wrap: wrap; gap: .3rem; padding: 0 1.2rem .9rem; } .wps-card-cat-badge { padding: .15rem .55rem; border-radius: 99px; font-size: .72rem; font-weight: 500; background: rgba(13,110,253,.1); color: #0d6efd; text-decoration: none; } .wps-card-cat-badge:hover { background: rgba(13,110,253,.2); } /* Filtre JS côté client */ .wps-poll-card.wps-hidden { display: none; } /* Pagination */ .wps-pagination { margin-top: 2rem; text-align: center; } .wps-pagination .page-numbers { display: inline-block; padding: .4rem .85rem; margin: .2rem; border: 1px solid var(--wps-border, #dee2e6); border-radius: 6px; text-decoration: none; color: inherit; font-size: .9rem; transition: background .2s, border-color .2s; } .wps-pagination .page-numbers:hover, .wps-pagination .page-numbers.current { background: rgba(13,110,253,.1); border-color: #0d6efd; color: #0d6efd; font-weight: 600; } /* Vide */ .wps-empty-state { text-align: center; padding: 3rem 1rem; color: var(--wps-text-muted, #6c757d); font-size: 1rem; } .wps-empty-state svg { display: block; margin: 0 auto 1rem; opacity: .3; } /* ════════════════════════════════════════ Nav catégories — style amélioré ════════════════════════════════════════ */ .wps-cat-nav { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.25rem; } .wps-cat-link { display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .9rem; border: 1px solid var(--wps-border, #dee2e6); border-radius: 99px; font-size: .85rem; text-decoration: none; color: inherit; transition: background .2s, border-color .2s, color .2s; } .wps-cat-link:hover, .wps-cat-link--active { background: rgba(13,110,253,.1); border-color: #0d6efd; color: #0d6efd; font-weight: 600; } .wps-cat-count { background: rgba(13,110,253,.15); color: #0d6efd; border-radius: 99px; padding: .05rem .45rem; font-size: .72rem; font-weight: 700; } /* ════════════════════════════════════════ Form actions (bouton + spinner alignés) ════════════════════════════════════════ */ .wps-form-actions { display: flex; align-items: center; gap: .5rem; margin-top: .1rem; width: 100%; } /* Admin actions (reset) */ .wps-admin-actions { margin-top: .75rem; padding-top: .6rem; border-top: 1px dashed var(--wps-border); } /* Résultats — animation d'entrée CSS (transition déjà sur .wps-result-bar) */ /* La transition est gardée côté CSS, le JS applique le width final via data-pct */ /* ════════════════════════════════════════ Bouton "Voir les résultats" (peek) ════════════════════════════════════════ */ .wps-btn-peek { background: transparent; color: var(--wps-text-muted); border: none; padding: 0; font-size: var(--wps-btn-size, .82rem); font-weight: 500; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; transition: color var(--wps-transition); white-space: nowrap; } .wps-btn-peek:hover { color: var(--wps-primary); } .wps-btn-peek:disabled { opacity: .5; cursor: default; text-decoration: none; } /* Bouton retour au vote */ .wps-btn-back-vote { display: inline-flex; align-items: center; gap: .3rem; background: transparent; color: var(--wps-primary); border: 1px solid var(--wps-border); border-radius: calc(var(--wps-radius) - 2px); padding: .35rem .85rem; font-size: var(--wps-btn-size, .82rem); font-weight: 500; cursor: pointer; margin-top: .65rem; transition: background var(--wps-transition), border-color var(--wps-transition); } .wps-btn-back-vote:hover { background: rgba(13,110,253,.06); border-color: var(--wps-primary); } /* Notice aperçu */ .wps-peek-notice { font-size: .75rem; color: var(--wps-text-muted); padding: .4rem .7rem; background: rgba(13,110,253,.06); border-left: 3px solid var(--wps-primary); border-radius: 0 4px 4px 0; margin-bottom: .65rem; line-height: 1.4; } /* Panel transitions */ .wps-panel { } .wps-panel-peek .wps-results { margin-top: 0; }