/* * Motifs de fond des themes. * * Feuille partagee : le profil public l'utilise sur son , le selecteur de * themes du tableau de bord sur chaque vignette. Sans cela, on choisissait un * fond sans jamais l'avoir vu. * * Le porteur doit etre positionne (position: relative ou absolute) et laisser * son ::before libre. */ /* ===== Motifs de fond ====================================================== * * La page portait une vague blanche codee en dur, identique pour les * quarante-cinq themes : une teinture blanche sur un fond clair ne se voit pas, * et le meme dessin partout annule l'interet d'avoir des themes. * * Chaque motif est dessine ici et selectionne par une clef posee sur le body * (`data-pattern`), validee cote serveur contre ThemeCatalog::PATTERNS. Rien * n'arrive donc de la base sinon un mot d'une liste fermee. * * Deux techniques, aucune requete reseau dans les deux cas : * - gradients CSS purs pour les motifs geometriques ; * - masque SVG en ligne pour les formes organiques, la couche prenant alors la * couleur du texte du theme. C'est ce qui permet au meme dessin d'etre * lisible sur un fond creme comme sur une nuit d'encre, sans le dupliquer. */ [data-pattern]::before { content: ''; position: absolute; inset: 0; pointer-events: none; /* Encre du motif : la couleur du texte, tres diluee. La premiere valeur est le repli des navigateurs sans color-mix (Safari anterieur a 16.2). */ --ez-pattern-ink: rgba(255, 255, 255, 0.10); --ez-pattern-ink: color-mix(in srgb, var(--ez-profile-text) 12%, transparent); --ez-pattern-ink-soft: rgba(255, 255, 255, 0.06); --ez-pattern-ink-soft: color-mix(in srgb, var(--ez-profile-text) 7%, transparent); } /* --- Vagues : le motif historique, desormais teinte par le theme ---------- */ [data-pattern="waves"]::before { background-color: var(--ez-pattern-ink); -webkit-mask-image: url('data:image/svg+xml,'); mask-image: url('data:image/svg+xml,'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: bottom; mask-position: bottom; -webkit-mask-size: cover; mask-size: cover; } /* --- Motifs geometriques : gradients purs, aucun masque ------------------- */ /* Le masque doit etre neutralise, sinon il decoupe le gradient a la forme des vagues heritee de la regle groupee ci-dessus. */ [data-pattern="dots"]::before, [data-pattern="grid"]::before, [data-pattern="blueprint"]::before, [data-pattern="diagonals"]::before, [data-pattern="chevrons"]::before, [data-pattern="mesh"]::before, [data-pattern="aurora"]::before, [data-pattern="rays"]::before, [data-pattern="bubbles"]::before, [data-pattern="confetti"]::before, [data-pattern="none"]::before { background-color: transparent; -webkit-mask-image: none; mask-image: none; } [data-pattern="dots"]::before { background-image: radial-gradient(var(--ez-pattern-ink) 1.5px, transparent 1.6px); background-size: 22px 22px; } [data-pattern="grid"]::before { background-image: linear-gradient(var(--ez-pattern-ink-soft) 1px, transparent 1px), linear-gradient(90deg, var(--ez-pattern-ink-soft) 1px, transparent 1px); background-size: 32px 32px; } /* Grille double : un carreau fin dans un carreau large, comme un papier millimetre. */ [data-pattern="blueprint"]::before { background-image: linear-gradient(var(--ez-pattern-ink-soft) 1px, transparent 1px), linear-gradient(90deg, var(--ez-pattern-ink-soft) 1px, transparent 1px), linear-gradient(var(--ez-pattern-ink) 1px, transparent 1px), linear-gradient(90deg, var(--ez-pattern-ink) 1px, transparent 1px); background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px; } [data-pattern="diagonals"]::before { background-image: repeating-linear-gradient( 45deg, var(--ez-pattern-ink-soft) 0 2px, transparent 2px 14px ); } [data-pattern="chevrons"]::before { background-image: repeating-linear-gradient(45deg, var(--ez-pattern-ink-soft) 0 2px, transparent 2px 16px), repeating-linear-gradient(-45deg, var(--ez-pattern-ink-soft) 0 2px, transparent 2px 16px); } /* Halos colores : trois foyers diffus. C'est le seul motif qui emprunte a l'accent du theme plutot qu'a sa couleur de texte, pour garder une teinte identifiable au premier coup d'oeil. */ [data-pattern="mesh"]::before { background-image: radial-gradient(45% 40% at 15% 20%, color-mix(in srgb, var(--ez-profile-accent) 28%, transparent) 0%, transparent 70%), radial-gradient(40% 35% at 85% 10%, color-mix(in srgb, var(--ez-profile-accent) 20%, transparent) 0%, transparent 70%), radial-gradient(50% 45% at 70% 85%, color-mix(in srgb, var(--ez-profile-accent) 22%, transparent) 0%, transparent 70%); } [data-pattern="aurora"]::before { background-image: radial-gradient(70% 30% at 20% 0%, color-mix(in srgb, var(--ez-profile-accent) 35%, transparent) 0%, transparent 60%), radial-gradient(60% 25% at 80% 8%, color-mix(in srgb, var(--ez-profile-text) 14%, transparent) 0%, transparent 65%), radial-gradient(80% 35% at 50% 100%, color-mix(in srgb, var(--ez-profile-accent) 22%, transparent) 0%, transparent 70%); } /* Rayons partant du haut de la page, comme une lumiere rasante. */ [data-pattern="rays"]::before { background-image: repeating-conic-gradient( from 200deg at 50% -20%, var(--ez-pattern-ink-soft) 0deg 4deg, transparent 4deg 14deg ); } [data-pattern="bubbles"]::before { background-image: radial-gradient(circle at 12% 18%, var(--ez-pattern-ink) 0 38px, transparent 39px), radial-gradient(circle at 82% 12%, var(--ez-pattern-ink-soft) 0 62px, transparent 63px), radial-gradient(circle at 68% 62%, var(--ez-pattern-ink-soft) 0 26px, transparent 27px), radial-gradient(circle at 25% 78%, var(--ez-pattern-ink) 0 48px, transparent 49px), radial-gradient(circle at 92% 84%, var(--ez-pattern-ink-soft) 0 34px, transparent 35px); background-repeat: no-repeat; } [data-pattern="confetti"]::before { background-image: linear-gradient(60deg, var(--ez-pattern-ink) 0 6px, transparent 6px), linear-gradient(-40deg, var(--ez-pattern-ink-soft) 0 5px, transparent 5px), linear-gradient(20deg, var(--ez-pattern-ink-soft) 0 7px, transparent 7px); background-size: 90px 90px, 130px 130px, 70px 70px; background-position: 0 0, 40px 25px, 15px 60px; } /* --- Motifs organiques : masque SVG, donc teintes par le theme ------------ */ [data-pattern="topography"]::before { background-color: var(--ez-pattern-ink-soft); -webkit-mask-image: url('data:image/svg+xml,'); mask-image: url('data:image/svg+xml,'); -webkit-mask-size: 240px 240px; mask-size: 240px 240px; -webkit-mask-repeat: repeat; mask-repeat: repeat; } [data-pattern="circuit"]::before { background-color: var(--ez-pattern-ink-soft); -webkit-mask-image: url('data:image/svg+xml,'); mask-image: url('data:image/svg+xml,'); -webkit-mask-size: 120px 120px; mask-size: 120px 120px; -webkit-mask-repeat: repeat; mask-repeat: repeat; } /* Grain : un bruit fin qui casse les aplats et les degrades trop lisses. */ [data-pattern="noise"]::before { background-color: var(--ez-pattern-ink-soft); -webkit-mask-image: url('data:image/svg+xml,'); mask-image: url('data:image/svg+xml,'); -webkit-mask-size: 160px 160px; mask-size: 160px 160px; opacity: 0.5; } /* Aucun motif : le fond du theme, nu. */ [data-pattern="none"]::before { background-image: none; }