@charset "UTF-8"; /* ============================================================================= FolloYou — VITRINE : SOCLE COMMUN (site public ET administration) ============================================================================= Le vocabulaire visuel est celui de l'APPLICATION (SiteWeb) : mêmes jetons, mêmes rayons, mêmes ombres, mêmes teintes de module, même rythme de mouvement. Il a d'abord été posé pour la page salon (event.php), puis étendu à toute la vitrine. Sources des valeurs : SiteWeb/public/assets/style/base/_variables.scss (jetons, thème sombre) SiteWeb/public/assets/style/components/_motion.scss (durées, courbes) SiteWeb/includes/ui_categories.php (teintes des modules) Si l'application change de palette, c'est ici qu'il faut la reporter. Trois feuilles : base.css — ce fichier : jetons, socle, boutons, champs de formulaire, pastilles, et les quelques composants que l'administration partage avec le site (carte de fiche, état vide) ; site.css — composants du site public et maquettes de l'application ; ../admin/admin.css — mise en page et composants de l'administration. Thème : `data-theme="light|dark"` sur , TOUJOURS posé par le script en tête de page (includes/layout.php, admin/_boot.php), avant le premier rendu. Par défaut il traduit le réglage de l'appareil ; le bouton de bascule le force, et ce choix est retenu dans le navigateur (localStorage `fy-vitrine-theme`). Un seul bloc sombre ci-dessous, donc — pas de copie sous `prefers-color-scheme`. Préfixes : `vt-` pour la vitrine, `mk-` pour les maquettes de l'application, `ad-` pour l'administration. */ /* ── 0. Jetons ───────────────────────────────────────────────────────────── */ :root { --primary-color: #3d81fc; --primary-dark: #2563eb; --primary-light: #60a5fa; --primary-rgb: 61, 129, 252; --text-primary: #1e293b; --text-secondary: #1d5fbb; --text-strong: #0f172a; --text-body: #334155; --text-soft: #475569; --text-muted: #64748b; --text-faint: #94a3b8; --text-on-accent: #ffffff; --surface: #ffffff; --surface-raised: #ffffff; --surface-2: #f8fafc; --surface-3: #f1f5f9; --surface-hover: #e2e8f0; --surface-input: #ffffff; --background-light: #f8fafc; --background-gradient-end: #eaf1fb; --border-color: #e2e8f0; --border-subtle: #f1f5f9; --border-strong: #cbd5e1; --overlay: rgba(15, 23, 42, 0.45); --success-color: #10b981; --warning-color: #f59e0b; --error-color: #ef4444; --success-surface: #dcfce7; --success-text: #166534; --warning-surface: #fef3c7; --warning-text: #92400e; --error-surface: #fee2e2; --error-text: #991b1b; --info-surface: #dbeafe; --info-text: #1e40af; --accent-surface: #ede9fe; --accent-text: #7c3aed; /* Dégradé du mot mis en avant : l'extrémité CLAIRE du dégradé de l'icône de titre (#60a5fa) passerait sous 3:1 en texte sur fond blanc. On part donc vers le plus foncé en thème clair, vers le plus clair en thème sombre. */ --accent-from: #3d81fc; --accent-to: #1d5fbb; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 2px 4px -1px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* L'ombre bleutée des cartes du tableau de bord. */ --shadow-brand: 0 4px 24px rgba(var(--primary-rgb), 0.06); --ring: 0 0 0 3px rgba(var(--primary-rgb), 0.2); --radius: 12px; --radius-sm: 8px; --radius-lg: 16px; --radius-xl: 24px; --font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --motion-quick: 140ms; --motion-base: 240ms; --motion-travel: 320ms; --motion-echo: 900ms; --ease-organic: cubic-bezier(0.34, 1.42, 0.5, 1); --ease-soft: cubic-bezier(0.22, 1, 0.36, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1); /* Teintes de module : proportions de mélange, inversées en thème sombre comme sur le tableau de bord (la teinte brute tombe autour de 3:1 sur une pastille sombre, on l'éclaircit vers le blanc). */ --mix-ink: 100%; --mix-text: 58%; --mix-text-base: #000000; --mix-bg: 10%; --topbar-h: 64px; --phone-frame: #0f172a; color-scheme: light; } :root[data-theme="dark"] { --primary-dark: #60a5fa; --primary-light: #2563eb; --text-primary: #f8fafc; --text-secondary: #93c5fd; --text-strong: #f8fafc; --text-body: #cbd5e1; --text-soft: #b4c0d3; --text-muted: #94a3b8; --text-faint: #8492a8; --surface: #1e293b; --surface-raised: #273549; --surface-2: #172033; --surface-3: #223047; --surface-hover: #334155; --surface-input: #131c2e; --background-light: #0f172a; --background-gradient-end: #020617; --border-color: #334155; --border-subtle: #263248; --border-strong: #475569; --overlay: rgba(2, 6, 23, 0.72); --success-color: #34d399; --warning-color: #fbbf24; --error-color: #f87171; --success-surface: #06301f; --success-text: #6ee7b7; --warning-surface: #3a2708; --warning-text: #fcd34d; --error-surface: #3f1414; --error-text: #fca5a5; --info-surface: #10233f; --info-text: #93c5fd; --accent-surface: #2b1e4d; --accent-text: #c4b5fd; --accent-from: #93c5fd; --accent-to: #3d81fc; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4); --shadow-md: 0 2px 4px -1px rgba(0, 0, 0, 0.5), 0 1px 2px -1px rgba(0, 0, 0, 0.4); --shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, 0.55), 0 2px 4px -1px rgba(0, 0, 0, 0.4); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.45); --shadow-brand: 0 4px 24px rgba(0, 0, 0, 0.35); --mix-ink: 62%; --mix-text: 62%; --mix-text-base: #ffffff; --mix-bg: 16%; --phone-frame: #020617; color-scheme: dark; } /* ── Teintes des modules (includes/ui_categories.php) ───────────────────── */ [data-cat] { --c: var(--primary-color); } [data-cat="clients"] { --c: #3b82f6; } [data-cat="devis"] { --c: #6366f1; } [data-cat="factures"] { --c: #10b981; } [data-cat="bonslivraison"] { --c: #8b5cf6; } [data-cat="interventions"] { --c: #ef4444; } [data-cat="planning"] { --c: #ec4899; } [data-cat="reglements"] { --c: #14b8a6; } [data-cat="elements"] { --c: #64748b; } [data-cat="chantiers"] { --c: #eab308; } [data-cat="contrats"] { --c: #0ea5e9; } [data-cat="formulaires"] { --c: #a855f7; } [data-cat="compta"] { --c: #f59e0b; } [data-cat="echeances"] { --c: #f97316; } [data-cat="stats"] { --c: #f43f5e; } [data-cat="messagerie"] { --c: #3d81fc; } [data-cat="fichiers"] { --c: #0891b2; } [data-cat="multi"] { --c: #78716c; } /* Déclarées APRÈS la teinte, sur le même élément : c'est là que var(--c) est résolue, et les enfants héritent de la couleur calculée. */ [data-cat] { --c-ink: color-mix(in srgb, var(--c) var(--mix-ink), #ffffff); --c-text: color-mix(in srgb, var(--c) var(--mix-text), var(--mix-text-base)); --c-bg: color-mix(in srgb, var(--c) var(--mix-bg), transparent); --c-line: color-mix(in srgb, var(--c) 30%, transparent); } /* ── 1. Socle ────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar-h) + 16px); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; min-height: 100vh; font-family: var(--font-family); font-size: 16px; line-height: 1.6; color: var(--text-body); background: var(--background-light); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Le dégradé du corps de page de l'application, fixé à l'écran. Un pseudo- élément fixe plutôt qu'un `background-attachment: fixed`, qu'iOS ignore. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(120deg, var(--background-light) 0%, var(--background-gradient-end) 100%); pointer-events: none; } h1, h2, h3, h4 { margin: 0; color: var(--text-strong); font-weight: 700; line-height: 1.15; letter-spacing: -0.025em; } p { margin: 0; } a { color: var(--primary-color); text-decoration: none; } img, svg { max-width: 100%; } abbr[title] { text-decoration: none; color: var(--error-color); } /* Toute règle `display` d'un composant l'emporterait sur l'attribut `hidden` (feuille du navigateur) : le formulaire, ses alertes et ses messages d'erreur resteraient affichés une fois masqués par le script. */ [hidden] { display: none !important; } :focus:not(:focus-visible) { outline: none; } :focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .vt-skip { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: var(--radius-sm); background: var(--primary-color); color: #fff; font-weight: 600; } .vt-skip:focus { top: 12px; } .vt-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; } .vt-wrap--narrow { max-width: 820px; } @media (min-width: 640px) { .vt-wrap { padding: 0 32px; } } /* ── 2. Boutons (components/_button.scss) ───────────────────────────────── */ .vt-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 10px 18px; border: 1px solid transparent; border-radius: var(--radius-sm); font: inherit; font-size: 0.95rem; font-weight: 600; line-height: 1.2; white-space: nowrap; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, transform var(--motion-quick) var(--ease-soft); } .vt-btn:active { transform: scale(0.97); } .vt-btn i { font-size: 0.95em; } /* Survol par assombrissement, pas par --primary-dark : ce jeton S'ÉCLAIRCIT en thème sombre, et le blanc posé dessus perdrait sa lisibilité. */ .vt-btn--primary { background: var(--primary-color); border-color: var(--primary-color); color: #fff; box-shadow: 0 6px 18px rgba(var(--primary-rgb), 0.3); } .vt-btn--primary:hover { filter: brightness(0.93); color: #fff; } .vt-btn--secondary { background: var(--surface); border-color: var(--border-color); color: var(--text-primary); } .vt-btn--secondary:hover { background: var(--surface-2); border-color: var(--primary-color); color: var(--text-primary); } .vt-btn--lg { min-height: 52px; padding: 14px 24px; border-radius: 10px; font-size: 1.05rem; } .vt-btn--block { width: 100%; } /* En attente : le libellé devient transparent plutôt que de disparaître, pour que le bouton garde exactement sa taille pendant l'envoi. */ .vt-btn.is-pending { color: transparent !important; pointer-events: none; } .vt-btn.is-pending::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 2.5px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; border-radius: 50%; animation: vt-spin 0.7s linear infinite; } @keyframes vt-spin { to { transform: rotate(360deg); } } /* ── 3. Champs de formulaire (components/_forms.scss) ───────────────────── */ .vt-form { display: grid; gap: 20px; } .vt-grid2 { display: grid; gap: 16px; } @media (min-width: 560px) { .vt-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* align-content : dans une grille à deux colonnes, un champ est étiré à la hauteur de son voisin ; ses lignes restent en haut au lieu de s'étirer (sinon la zone de saisie grandit et se décolle de son libellé). */ .vt-field { display: grid; gap: 6px; align-content: start; } .vt-field label, .vt-choice legend { color: var(--text-primary); font-size: 0.9rem; font-weight: 600; } .vt-opt { margin-left: 4px; color: var(--text-faint); font-size: 0.8rem; font-weight: 500; } /* Champs de saisie de l'application (.form-input). 16 px minimum : en deçà, Safari iOS zoome sur le champ au toucher. */ .vt-field input, .vt-field textarea, .vt-field select { width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--surface-input); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05); color: var(--text-primary); font: inherit; font-size: 16px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .vt-field textarea { min-height: 90px; resize: vertical; } /* Liste déroulante : la flèche du système est remplacée par un chevron dessiné, lisible dans les deux thèmes (il suit la couleur du texte). */ .vt-field select { padding-right: 40px; -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; cursor: pointer; } .vt-field select option { background: var(--surface); color: var(--text-primary); } .vt-field input[type="file"] { padding: 9px 12px; font-size: 0.92rem; cursor: pointer; } .vt-field input:hover, .vt-field textarea:hover, .vt-field select:hover { border-color: var(--border-strong); } .vt-field input:focus, .vt-field textarea:focus, .vt-field select:focus { outline: none; border-color: var(--primary-color); box-shadow: var(--ring); } .vt-field__hint { color: var(--text-muted); font-size: 0.83rem; line-height: 1.45; } .vt-field input[aria-invalid="true"] { border-color: var(--error-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--error-color) 18%, transparent); } .vt-field__error { display: flex; align-items: center; gap: 6px; color: var(--error-text); font-size: 0.85rem; font-weight: 500; } .vt-field__error::before { content: "!"; display: grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--error-color); color: #fff; font-size: 0.7rem; font-weight: 700; } .vt-choice { min-width: 0; margin: 0; padding: 0; border: 0; } .vt-choice legend { margin-bottom: 8px; padding: 0; } /* Sélecteur segmenté : la pastille blanche glisse sur le fond creusé, comme les sélecteurs de l'application (.perm-seg). */ .vt-seg { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--surface-3); } .vt-seg label { flex: 1 1 0; min-width: 0; } .vt-seg input, .vt-pills input { position: absolute; opacity: 0; pointer-events: none; } .vt-seg span { display: grid; place-items: center; min-height: 40px; padding: 6px 8px; border-radius: 7px; color: var(--text-soft); font-size: 0.9rem; font-weight: 600; line-height: 1.2; text-align: center; cursor: pointer; transition: background-color var(--motion-base) var(--ease-soft), color var(--motion-base) ease, box-shadow var(--motion-base) ease; } .vt-seg input:checked + span { background: var(--surface); color: var(--primary-color); box-shadow: var(--shadow-md); } .vt-seg input:focus-visible + span, .vt-pills input:focus-visible + span { outline: 2px solid var(--primary-color); outline-offset: 2px; } .vt-pills { display: flex; flex-wrap: wrap; gap: 8px; } .vt-pills span { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 7px 14px; border: 1px solid var(--border-color); border-radius: 999px; background: var(--surface); color: var(--text-soft); font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: background-color var(--motion-quick) ease, border-color var(--motion-quick) ease, color var(--motion-quick) ease; } .vt-pills span i { display: none; font-size: 0.75rem; } .vt-pills span:hover { border-color: var(--primary-color); } .vt-pills input:checked + span { border-color: var(--primary-color); background: rgba(var(--primary-rgb), 0.1); color: var(--primary-color); font-weight: 600; } .vt-pills input:checked + span i { display: inline; } .vt-msg summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; color: var(--primary-color); font-size: 0.92rem; font-weight: 600; list-style: none; cursor: pointer; } .vt-msg summary::-webkit-details-marker { display: none; } .vt-msg summary i { transition: transform var(--motion-base) var(--ease-soft); } .vt-msg[open] summary i { transform: rotate(45deg); } .vt-msg .vt-field { margin-top: 6px; } .vt-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .vt-alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: 0.92rem; font-weight: 500; } .vt-alert--error { border-color: color-mix(in srgb, var(--error-color) 30%, transparent); background: color-mix(in srgb, var(--error-color) 10%, transparent); color: var(--error-text); } .vt-alert i { margin-top: 3px; } .vt-legal { color: var(--text-muted); font-size: 0.8rem; line-height: 1.5; text-align: center; } .vt-legal a { font-weight: 500; } /* ── 4. Alertes, pastilles, interrupteurs ───────────────────────────────── */ .vt-alert--success { border-color: color-mix(in srgb, var(--success-color) 30%, transparent); background: color-mix(in srgb, var(--success-color) 10%, transparent); color: var(--success-text); } .vt-alert--warning { border-color: color-mix(in srgb, var(--warning-color) 35%, transparent); background: color-mix(in srgb, var(--warning-color) 12%, transparent); color: var(--warning-text); } .vt-alert--info { border-color: color-mix(in srgb, var(--primary-color) 28%, transparent); background: color-mix(in srgb, var(--primary-color) 9%, transparent); color: var(--info-text); } .vt-alert > span, .vt-alert > div { flex: 1; min-width: 0; } /* Pastilles d'état : mêmes surfaces que les badges de l'application. */ .vt-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--surface-3); color: var(--text-soft); font-size: 0.76rem; font-weight: 700; line-height: 1.5; white-space: nowrap; } .vt-badge i { font-size: 0.9em; } .vt-badge--success { background: var(--success-surface); color: var(--success-text); } .vt-badge--warning { background: var(--warning-surface); color: var(--warning-text); } .vt-badge--error { background: var(--error-surface); color: var(--error-text); } .vt-badge--info { background: var(--info-surface); color: var(--info-text); } .vt-badge--accent { background: var(--accent-surface); color: var(--accent-text); } /* Une pastille teintée par le module qui la porte ([data-cat]). */ .vt-badge--cat { background: var(--c-bg); color: var(--c-text); } /* Interrupteur : une case à cocher native, redessinée. Le libellé suit. */ .vt-switch { display: inline-flex; align-items: center; gap: 12px; min-height: 40px; color: var(--text-primary); font-size: 0.95rem; font-weight: 600; cursor: pointer; } /* Les valeurs de .vt-field input (hauteur, marges, ombre) sont remises à zéro : un interrupteur peut vivre dans un champ. */ .vt-switch input { position: relative; flex: none; width: 42px; height: 24px; min-height: 0; margin: 0; padding: 0; box-shadow: none; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface-3); -webkit-appearance: none; appearance: none; cursor: pointer; transition: background-color var(--motion-base) var(--ease-soft), border-color var(--motion-base) ease; } .vt-switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3); transition: transform var(--motion-base) var(--ease-organic); } .vt-switch input:checked { border-color: var(--primary-color); background: var(--primary-color); } .vt-switch input:checked::after { transform: translateX(18px); } .vt-switch input:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; } .vt-switch small { display: block; color: var(--text-muted); font-size: 0.82rem; font-weight: 500; } /* ── 4 bis. Composants partagés avec l'administration ─────────────────────── */ /* Icône saisie en emoji (fiches d'avant la refonte). */ .vt-emoji { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-style: normal; line-height: 1; } /* État vide d'une liste. */ .vt-empty { display: grid; justify-items: center; gap: 8px; padding: 36px 20px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 60%, transparent); color: var(--text-muted); text-align: center; } .vt-empty i { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--surface-3); color: var(--text-faint); font-size: 1.25rem; } .vt-empty b { color: var(--text-primary); font-size: 1.02rem; } /* Carte d'une fiche fonctionnalité (page Fonctionnalités, aperçu de l'administration). La teinte vient du [data-cat] de la carte. */ .vt-fcard { position: relative; display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 24px; border: 1.5px solid var(--border-color); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-brand); color: var(--text-body); transition: border-color var(--motion-base) ease, box-shadow var(--motion-base) ease, transform var(--motion-base) var(--ease-soft); } a.vt-fcard:hover { border-color: var(--c); box-shadow: 0 0 0 3px var(--c-bg), var(--shadow-brand); color: var(--text-body); transform: translateY(-2px); } .vt-fcard__ico { display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: var(--radius); background: var(--c-bg); color: var(--c-ink); font-size: 1.35rem; } .vt-fcard__ico .vt-emoji { font-size: 1.6rem; } .vt-fcard h2, .vt-fcard h3 { font-size: 1.15rem; line-height: 1.3; } .vt-fcard p { flex: 1; color: var(--text-muted); font-size: 0.95rem; line-height: 1.55; } .vt-fcard__more { display: inline-flex; align-items: center; gap: 8px; color: var(--c-text); font-size: 0.92rem; font-weight: 700; } .vt-fcard__more i { font-size: 0.85em; transition: transform var(--motion-quick) var(--ease-soft); } a.vt-fcard:hover .vt-fcard__more i { transform: translateX(3px); } .vt-fcard__flags { position: absolute; top: 18px; right: 18px; display: flex; gap: 6px; } /* À venir : pointillés, pas d'ombre — une promesse, pas encore un produit. */ .vt-fcard--dev { border-style: dashed; border-color: var(--border-strong); background: color-mix(in srgb, var(--surface) 65%, transparent); box-shadow: none; } /* ── 5. Mouvement réduit ─────────────────────────────────────────────────── */ /* Durées écrasées plutôt qu'animations supprimées : chaque élément atteint ainsi son ÉTAT FINAL. Seul l'indicateur d'envoi garde son mouvement — figé, il se lirait comme une page plantée. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *:not(.is-pending), *:not(.is-pending)::before, *:not(.is-pending)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; } }