.view{ transition: transform .6s cubic-bezier(.6,.1,.15,1), opacity .45s ease; } .view.hidden-view{ display:none; } /* ============ DASHBOARD ============ */ #editorView{ display:flex; min-height:100vh; position:relative; isolation:isolate; overflow:hidden; background: var(--bg); } #editorView::before, #editorView::after{ content:''; position:fixed; z-index:0; pointer-events:none; border-radius:50%; filter: blur(70px); opacity:.5; animation: auroraDrift 22s ease-in-out infinite alternate; will-change: transform; } #editorView::before{ width:640px; height:640px; top:-220px; left:-160px; background: radial-gradient(circle, var(--br-1), transparent 70%); } #editorView::after{ width:560px; height:560px; bottom:-220px; right:-140px; background: radial-gradient(circle, var(--br-2), transparent 70%); animation-delay:-11s; } @keyframes auroraDrift{ 0%{ transform: translate(0,0) scale(1); } 100%{ transform: translate(40px,30px) scale(1.12); } } .sidebar{ width:100px; flex-shrink:0; position:relative; z-index:2; background: rgba(12,12,16,.55); backdrop-filter: blur(12px); border-right:1px solid var(--line); display:flex; flex-direction:column; align-items:center; padding:22px 0 16px; gap:4px; } .sb-logo{ width:38px; height:38px; border-radius:12px; background: var(--br-grad); background-size:220% 220%; overflow:hidden; animation: brandShift 6s ease infinite; display:flex; align-items:center; justify-content:center; color:#0A0714; margin-bottom:18px; box-shadow: 0 0 22px -4px var(--br-2), 0 4px 14px -6px rgba(0,0,0,.6); } .sb-logo img{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; } @keyframes brandShift{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } } .sb-item{ width:80px; padding:10px 4px; border-radius:13px; display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; color:var(--muted); transition: color .15s ease, background .15s ease, transform .15s ease; text-align:center; position:relative; } .sb-item .lbl{ font-size:9.5px; font-weight:700; letter-spacing:.02em; } .sb-item:hover{ color:var(--text); background: var(--glass); transform: translateY(-1px); } .sb-item.active{ background: var(--br-grad-soft); color:#fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); } .sb-item.active::before{ content:''; position:absolute; left:-8px; top:50%; transform:translateY(-50%); width:3px; height:20px; border-radius:3px; background: var(--br-grad); box-shadow: 0 0 10px var(--br-2); } .sb-item.active .icon{ filter: drop-shadow(0 0 6px var(--br-2)); color: var(--br-2); } .sb-spacer{ flex:1; } .sb-logout{ color: var(--danger); } .sb-logout:hover{ color:#fff; background: rgba(255,92,122,.14); } .sb-home{ margin-top:2px; } /* ================= GROUPE REPLIABLE DE LA SIDEBAR (ex: "Paramètres") ================= */ .sb-group{ display:flex; flex-direction:column; align-items:center; width:100%; } .sb-group-toggle{ position:relative; cursor:pointer; } .sb-group-toggle .sb-chevron{ width:11px; height:11px; position:absolute; top:9px; right:6px; transition: transform .2s ease; opacity:.6; } .sb-group-toggle.open .sb-chevron{ transform: rotate(180deg); } .sb-subitems{ display:flex; flex-direction:column; align-items:center; gap:3px; width:100%; max-height:0; overflow:hidden; transition: max-height .3s ease, opacity .25s ease; opacity:0; } .sb-subitems.open{ max-height:220px; opacity:1; } .sb-subitem{ width:70px; padding:8px 4px; } .sb-subitem .lbl{ font-size:9px; } .dash-main{ flex:1; display:flex; min-width:0; position:relative; z-index:1; } .dash-content{ flex:1; min-width:0; padding:30px 40px 100px; max-width:760px; } .dash-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:26px; gap:14px; flex-wrap:wrap; position:sticky; top:0; z-index:5; padding:14px 16px; margin-left:-16px; margin-right:-16px; width:calc(100% + 32px); background: rgba(9,9,12,.55); backdrop-filter: blur(10px); border:1px solid var(--line); border-radius:16px; } .dash-topbar .who{ font-size:12px; color:var(--muted); display:flex; align-items:center; gap:8px; background: var(--glass); border:1px solid var(--line); padding:6px 12px; border-radius:20px; } .dash-topbar .who b{ color:var(--text); font-family:'IBM Plex Mono',monospace; } .publish-btn{ position:relative; overflow:hidden; display:flex; align-items:center; gap:8px; background: var(--br-grad); background-size:220% 220%; border:none; color:#0A0714; font-weight:800; font-size:13px; padding:11px 20px; border-radius:11px; cursor:pointer; transition: filter .15s ease, transform .12s ease, box-shadow .15s ease; box-shadow: 0 8px 22px -8px var(--br-2); } .publish-btn:hover{ filter:brightness(1.08); transform: translateY(-1px); box-shadow: 0 12px 28px -8px var(--br-1); background-position:100% 50%; } .publish-btn:active{ transform: translateY(0); } .publish-btn .icon{ width:15px; height:15px; } .topbar-actions{ display:flex; align-items:center; gap:12px; } .view-btn{ display:flex; align-items:center; gap:8px; background: var(--glass); border:1px solid var(--line); color:var(--text); font-weight:700; font-size:13px; padding:11px 18px; border-radius:11px; cursor:pointer; transition: border-color .15s ease, transform .12s ease, background .15s ease; } .view-btn:hover{ border-color: var(--br-2); background: var(--glass-hover); transform: translateY(-1px); } .view-btn .icon{ width:15px; height:15px; } .publish-toast{ font-size:12px; font-weight:700; color: var(--green-glow); opacity:0; transform: translateY(3px); transition: opacity .25s ease, transform .25s ease; pointer-events:none; } .publish-toast.show{ opacity:1; transform:none; } .pane-title{ font-size:22px; font-weight:800; margin:0 0 4px; letter-spacing:-.01em; font-family: var(--head-font); background: var(--br-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .pane-sub{ color:var(--muted); font-size:13px; margin:0 0 26px; } .tab-pane{ display:none; } .tab-pane.active{ display:block; animation: paneIn .35s ease; } @keyframes paneIn{ from{ opacity:0; transform: translateY(8px); } to{ opacity:1; transform:none; } } .section{ position:relative; background: linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px 22px; margin-bottom:16px; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .section::before{ content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; opacity:0; pointer-events:none; background: var(--br-grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: opacity .25s ease; } .section:hover{ border-color: rgba(255,255,255,.16); box-shadow: var(--shadow-md); transform: translateY(-1px); } .section:hover::before{ opacity:.5; } .section h3{ font-size:12.5px; margin:0 0 16px; font-weight:700; color:var(--text); display:flex; align-items:center; gap:9px; text-transform:uppercase; letter-spacing:.05em; } .section h3 .ibadge{ width:27px; height:27px; border-radius:9px; background: var(--br-grad-soft); color: var(--br-2); display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); } .section h3 .ibadge .icon{ width:14px; height:14px; } .field{ margin-bottom:15px; } .field:last-child{ margin-bottom:0; } .field label{ display:block; font-size:11.5px; color:var(--muted); margin-bottom:7px; font-weight:600; } .field input[type=text], .field input[type=number], .field textarea, .field select{ width:100%; background: rgba(255,255,255,.03); border:1px solid var(--line); border-radius:var(--r-sm); color:var(--text); padding:10px 12px; font-size:13.5px; outline:none; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; box-shadow: inset 0 1px 2px rgba(0,0,0,.25); } .field input:focus, .field textarea:focus, .field select:focus{ border-color: var(--br-2); background: rgba(255,255,255,.06); box-shadow: 0 0 0 3px rgba(168,85,247,.15), inset 0 1px 2px rgba(0,0,0,.25); } .field select option, select option{ background: var(--surface-solid); color: var(--text); } .field textarea{ resize:vertical; min-height:56px; } .row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .handle-wrap{ position:relative; } .handle-wrap span{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:13.5px; font-family:'IBM Plex Mono',monospace; } .handle-wrap input{ padding-left:24px !important; padding-right:38px !important; font-family:'IBM Plex Mono',monospace; } .handle-wrap input:not(:disabled){ border-color: var(--br-2); background: rgba(255,255,255,.06); } .locked-note{ font-size:10.5px; color:var(--muted); margin-top:6px; } .handle-edit-btn{ position:absolute; right:6px; top:50%; transform:translateY(-50%); width:26px; height:26px; border-radius:8px; background: var(--glass); border:1px solid var(--line); color:var(--muted); font-size:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition: all .15s ease; } .handle-edit-btn:hover{ color:var(--text); border-color: var(--br-2); background: var(--glass-hover); } .handle-change-row{ display:flex; gap:8px; margin-top:9px; } .handle-save-btn, .handle-cancel-btn{ flex:1; padding:9px 12px; border-radius:var(--r-sm); font-size:12px; font-weight:700; cursor:pointer; transition: all .15s ease; } .handle-save-btn{ background: var(--br-grad); border:none; color:#0A0714; } .handle-save-btn:hover{ filter:brightness(1.08); } .handle-cancel-btn{ background: var(--glass); border:1px solid var(--line); color:var(--muted); } .handle-cancel-btn:hover{ color:var(--text); border-color: rgba(255,255,255,.22); } .handle-suggestions{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:10px; } .hs-label{ font-size:10.5px; color:var(--muted); margin-right:2px; } .hs-chip{ padding:6px 11px; border-radius:20px; border:1px solid var(--line); background: rgba(255,255,255,.03); font-size:11.5px; font-family:'IBM Plex Mono',monospace; cursor:pointer; color:var(--text); transition: all .15s ease; } .hs-chip:hover{ border-color: var(--br-2); background: var(--br-grad-soft); } .upload-row{ display:flex; align-items:center; gap:12px; } .upload-btn{ display:flex; align-items:center; gap:7px; background: var(--glass); border:1px dashed var(--line); color:var(--muted); padding:9px 14px; border-radius:var(--r-sm); font-size:12px; cursor:pointer; font-weight:600; transition: border-color .15s ease, color .15s ease, background .15s ease; } .upload-btn:hover{ border-color: var(--br-2); color:var(--text); background: var(--glass-hover); } .upload-btn .icon{ width:14px; height:14px; } .upload-preview-sm{ width:38px; height:38px; border-radius:11px; background: rgba(255,255,255,.05); border:1px solid var(--line); background-size:cover; background-position:center; flex-shrink:0; box-shadow: var(--shadow-sm); } /* L'aperçu du CURSEUR doit visiblement grandir/rétrécir avec le slider "Cursor size" -- une case à taille FIXE avec background-size:cover (comme les autres aperçus ci-dessus) donnerait toujours la même image remplie quelle que soit la résolution réelle, donc aucun changement visible en bougeant le slider. Ici la largeur/hauteur sont pilotées en JS (voir setCursorPreviewSize() dans dashboard.js) et l'image n'est PAS recadrée (contain, pas cover), pour un vrai retour visuel 1:1. */ #cursorPreviewSm{ background-size:contain; background-repeat:no-repeat; transition: width .12s ease, height .12s ease; } input[type=file]{ display:none; } .bg-type-tabs{ display:flex; gap:8px; margin-bottom:14px; } .bg-tab{ flex:1; text-align:center; padding:8px 6px; border-radius:var(--r-sm); border:1px solid var(--line); background: rgba(255,255,255,.03); cursor:pointer; font-size:11.5px; color:var(--muted); font-weight:600; transition: all .15s ease; } .bg-tab.active{ border-color: var(--br-2); color:var(--text); background: var(--br-grad-soft); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); } .bg-pane2{ display:none; } .bg-pane2.active{ display:block; } /* Onglets "source de musique" (Upload / Lien Spotify-YouTube) — mêmes styles que .bg-type-tabs/.bg-tab/.bg-pane2 mais classes séparées pour ne pas être capturées par le JS des onglets de fond (querySelectorAll ne cible que les classes bg-tab/bg-pane2 littérales). */ .music-src-tabs{ display:flex; gap:8px; margin-bottom:14px; } .music-src-tab{ flex:1; text-align:center; padding:8px 6px; border-radius:var(--r-sm); border:1px solid var(--line); background: rgba(255,255,255,.03); cursor:pointer; font-size:11.5px; color:var(--muted); font-weight:600; transition: all .15s ease; } .music-src-tab.active{ border-color: var(--br-2); color:var(--text); background: var(--br-grad-soft); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); } .music-src-pane2{ display:none; } .music-src-pane2.active{ display:block; } .link-preview-info{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; } .link-preview-title{ font-size:12.5px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .link-preview-provider{ font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; } #audioLinkStatus.err{ color:#FF6B6B; } #audioLinkStatus.ok{ color:#4ADE80; } .grad-swatches{ display:flex; gap:10px; flex-wrap:wrap; } .grad-sw{ width:36px; height:36px; border-radius:11px; cursor:pointer; border:2px solid transparent; transition: transform .12s ease, box-shadow .15s ease; } .grad-sw:hover{ transform: scale(1.08); } .grad-sw.active{ border-color:#fff; box-shadow: 0 0 0 3px rgba(255,255,255,.12); } .chip-grid{ display:flex; flex-wrap:wrap; gap:9px; } .chip{ padding:7px 13px; border-radius:20px; border:1px solid var(--line); background: rgba(255,255,255,.03); font-size:12px; cursor:pointer; color:var(--muted); transition: all .15s ease; font-weight:600; } .chip:hover{ border-color: rgba(255,255,255,.22); color:var(--text); } .chip.active{ border-color: var(--br-2); color:#fff; background: var(--br-grad-soft); box-shadow: 0 0 0 1px rgba(168,85,247,.2), 0 4px 14px rgba(168,85,247,.16); } .chip.emoji{ font-size:15px; padding:7px 11px; } .chip .badge-img{ width:20px; height:20px; object-fit:contain; vertical-align:middle; } /* ================= SÉLECTEUR DE BADGE (Premium / Verified / Donator / Rich / Perso) ================= Chaque type de badge a sa propre couleur d'accent (--b-accent / --b-tint / --b-border / --b-glow), posée sur la carte .badge-choice via l'attribut data-badge déjà présent dans le HTML. Le reste du style (icône, prix, statut) réutilise ensuite ces variables : changer la couleur d'un badge se fait donc en un seul endroit. */ .badge-choice-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap:12px; } .badge-choice[data-badge="premium"]{ --b-accent:#C084FC; --b-tint: rgba(192,132,252,.10); --b-border: rgba(192,132,252,.45); --b-glow: rgba(109,40,217,.35); } .badge-choice[data-badge="verified"]{ --b-accent:#A855F7; --b-tint: rgba(168,85,247,.10); --b-border: rgba(168,85,247,.45); --b-glow: rgba(168,85,247,.35); } .badge-choice[data-badge="donator"]{ --b-accent:#FFD60A; --b-tint: rgba(255,214,10,.10); --b-border: rgba(255,214,10,.45); --b-glow: rgba(255,214,10,.32); } .badge-choice[data-badge="rich"]{ --b-accent:#57F287; --b-tint: rgba(87,242,135,.10); --b-border: rgba(87,242,135,.45); --b-glow: rgba(87,242,135,.32); } .badge-choice[data-badge="custom"]{ --b-accent:#FF6BD6; --b-tint: rgba(255,107,214,.10); --b-border: rgba(255,107,214,.45); --b-glow: rgba(255,107,214,.32); } .badge-choice[data-badge="owner"]{ --b-accent:#FFD60A; --b-tint: rgba(255,214,10,.10); --b-border: rgba(255,214,10,.45); --b-glow: rgba(255,214,10,.32); } .badge-choice[data-badge="manager"]{ --b-accent:#B84FF0; --b-tint: rgba(184,79,240,.10); --b-border: rgba(184,79,240,.45); --b-glow: rgba(184,79,240,.32); } .badge-choice[data-badge="admin"]{ --b-accent:#FF5C7A; --b-tint: rgba(255,92,122,.10); --b-border: rgba(255,92,122,.45); --b-glow: rgba(255,92,122,.32); } .badge-choice[data-badge="staff"]{ --b-accent:#35BFFF; --b-tint: rgba(53,191,255,.10); --b-border: rgba(53,191,255,.45); --b-glow: rgba(53,191,255,.32); } .badge-choice[data-badge="helper"]{ --b-accent:#57F287; --b-tint: rgba(87,242,135,.10); --b-border: rgba(87,242,135,.45); --b-glow: rgba(87,242,135,.32); } /* Même logique de couleur d'accent que ci-dessus, pour les cartes de choix de style de particules (onglet Design > Particules, Premium). */ .badge-choice[data-particle="dots"]{ --b-accent:#C084FC; --b-tint: rgba(192,132,252,.10); --b-border: rgba(192,132,252,.45); --b-glow: rgba(109,40,217,.35); } .badge-choice[data-particle="snow"]{ --b-accent:#E8F6FF; --b-tint: rgba(232,246,255,.10); --b-border: rgba(232,246,255,.45); --b-glow: rgba(232,246,255,.32); } .badge-choice[data-particle="stars"]{ --b-accent:#FFD60A; --b-tint: rgba(255,214,10,.10); --b-border: rgba(255,214,10,.45); --b-glow: rgba(255,214,10,.32); } .badge-choice[data-particle="bubbles"]{ --b-accent:#57F287; --b-tint: rgba(87,242,135,.10); --b-border: rgba(87,242,135,.45); --b-glow: rgba(87,242,135,.32); } .badge-choice[data-particle="confetti"]{ --b-accent:#FFD60A; --b-tint: rgba(255,214,10,.10); --b-border: rgba(255,214,10,.45); --b-glow: rgba(255,214,10,.32); } .badge-choice[data-particle="hearts"]{ --b-accent:#FF6BD6; --b-tint: rgba(255,107,214,.10); --b-border: rgba(255,107,214,.45); --b-glow: rgba(255,107,214,.32); } .badge-choice{ position:relative; display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center; padding:20px 12px 15px; border-radius:var(--r-lg); border:1px solid var(--line); background: linear-gradient(165deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); cursor:pointer; overflow:hidden; transition: transform .18s ease, border-color .15s ease, background .15s ease, box-shadow .18s ease; } .badge-choice::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background: var(--b-accent); opacity:.4; transition: opacity .15s ease; } .badge-choice:hover{ transform: translateY(-3px) scale(1.015); border-color: var(--b-border); background: var(--b-tint); box-shadow: 0 14px 28px rgba(0,0,0,.28); } .badge-choice:hover::before{ opacity:.75; } .badge-choice.selected{ border-color: var(--b-accent); background: var(--b-tint); box-shadow: 0 0 0 1px var(--b-border); } .badge-choice.selected::before{ opacity:1; } .badge-choice.unlocked{ border-color: var(--b-border); background: var(--b-tint); } .badge-choice.unlocked::before{ opacity:1; } .badge-choice.unlocked::after{ content:'✓'; position:absolute; top:8px; right:9px; width:17px; height:17px; border-radius:50%; background: var(--green-glow); color:#0A0714; font-size:10px; font-weight:900; line-height:1; display:flex; align-items:center; justify-content:center; box-shadow: 0 0 8px rgba(87,242,135,.55); } .bc-icon{ width:50px; height:50px; display:flex; align-items:center; justify-content:center; border-radius:15px; font-size:24px; line-height:1; background: var(--b-tint); border:1px solid var(--b-border); color: var(--b-accent); transition: box-shadow .15s ease; } /* Aperçu en dégradé d'un thème Premium (voir onglet Design > Thèmes Premium) -- remplace .bc-icon par un carré affichant directement les couleurs du preset, les couleurs exactes venant d'un style inline posé par dashboard.js (chaque thème a son propre dégradé, impossible à prévoir dans une règle CSS statique). */ .theme-swatch-preview{ width:50px; height:50px; border-radius:15px; border:1px solid var(--b-border); background: linear-gradient(135deg, var(--theme-a), var(--theme-b)); transition: box-shadow .15s ease; } .badge-choice.unlocked .theme-swatch-preview, .badge-choice.selected .theme-swatch-preview{ box-shadow: 0 0 16px var(--b-glow); } /* Carte "None" (voir buildPremiumThemeGrid) : pas de dégradé, juste un cadre en pointillés + un tiret, pour bien la distinguer visuellement des vrais presets de couleur. */ .theme-swatch-none{ background:transparent; border-style:dashed; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:20px; font-weight:700; } .badge-choice.unlocked .bc-icon, .badge-choice.selected .bc-icon{ box-shadow: 0 0 16px var(--b-glow); } .bc-icon .badge-img{ width:26px; height:26px; object-fit:contain; } .bc-name{ font-weight:700; font-size:13px; color:var(--text); margin-top:1px; } .bc-price{ font-size:11px; color: var(--b-accent); font-weight:800; padding:2px 10px; border-radius:20px; background: var(--b-tint); } .bc-status{ font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); padding:2px 9px; border-radius:20px; background: rgba(255,255,255,.05); margin-top:1px; } .badge-choice.unlocked .bc-status{ color: var(--green-glow); background: rgba(87,242,135,.12); } .badge-panel{ margin-top:2px; } /* Icône du titre de chaque panneau de badge, teintée dans la couleur du type correspondant (même logique de couleurs que .badge-choice ci-dessus). */ #badgePanel-premium h3 .ibadge{ background: rgba(192,132,252,.16); color:#C084FC; } #badgePanel-verified h3 .ibadge{ background: rgba(168,85,247,.16); color:#A855F7; } #badgePanel-donator h3 .ibadge{ background: rgba(255,214,10,.16); color:#FFD60A; } #badgePanel-rich h3 .ibadge{ background: rgba(87,242,135,.16); color:#57F287; } #badgePanel-custom h3 .ibadge{ background: rgba(255,107,214,.16); color:#FF6BD6; } .link-row{ display:grid; grid-template-columns: 34px 122px 1fr 32px; gap:8px; margin-bottom:6px; align-items:center; } .link-row select{ padding:9px 8px; font-size:12px; background: rgba(255,255,255,.03); border:1px solid var(--line); border-radius:var(--r-sm); color:var(--text); outline:none; transition: border-color .15s ease, background .15s ease; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2386869C' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 9px center; padding-right:24px; } .link-row select:focus{ border-color: var(--br-2); background-color: rgba(255,255,255,.06); } .link-row select option{ background:var(--surface-solid); color:var(--text); } .link-row input[type=text]{ width:100%; background: rgba(255,255,255,.03); border:1px solid var(--line); border-radius:var(--r-sm); color:var(--text); padding:9px 12px; font-size:12.5px; outline:none; transition: border-color .15s ease, background .15s ease; } .link-row input[type=text]:focus{ border-color: var(--br-2); background: rgba(255,255,255,.06); } .link-url-field{ display:flex; align-items:center; width:100%; background: rgba(255,255,255,.03); border:1px solid var(--line); border-radius:var(--r-sm); padding:0 12px; transition: border-color .15s ease, background .15s ease; } .link-url-field:focus-within{ border-color: var(--br-2); background: rgba(255,255,255,.06); } .link-url-prefix{ color:var(--muted); font-size:12.5px; white-space:nowrap; user-select:none; pointer-events:none; } .link-url-field input[type=text]{ flex:1; min-width:0; width:auto; background:transparent; border:none; border-radius:0; color:var(--text); padding:9px 0; font-size:12.5px; outline:none; } .link-url-field input[type=text]:focus{ border-color:transparent; background:transparent; } .link-ic-badge{ width:34px; height:34px; border-radius:var(--r-sm); background: var(--br-grad-soft); color: var(--br-2); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .link-ic-badge .icon{ width:15px; height:15px; } .rm-btn{ width:32px; height:32px; border-radius:9px; border:1px solid var(--line); background: rgba(255,92,122,.08); color:var(--danger); cursor:pointer; display:flex; align-items:center; justify-content:center; transition: all .15s ease; } .rm-btn:hover{ background: rgba(255,92,122,.18); border-color: var(--danger); transform: translateY(-1px); } .rm-btn .icon{ width:14px; height:14px; } .add-link-btn{ display:flex; align-items:center; justify-content:center; gap:7px; width:100%; padding:10px; border-radius:var(--r-sm); border:1px dashed rgba(255,255,255,.18); background:transparent; color: var(--br-2); font-size:12px; cursor:pointer; font-weight:700; margin-top:2px; transition: all .15s ease; } .add-link-btn:hover{ border-color: var(--br-2); background: var(--br-grad-soft); color:#fff; } .add-link-btn .icon{ width:14px; height:14px; } /* ================= SOCIALS : modale de sélection de plateforme ================= Grille d'icônes qui s'ouvre au clic sur "Add a link", inspirée d'un vrai sélecteur de réseaux sociaux (une tuile par plateforme + une tuile finale "URL personnalisée"). */ .link-picker-overlay{ display:none; position:fixed; inset:0; z-index:60; background: rgba(4,4,6,.78); backdrop-filter: blur(8px); align-items:center; justify-content:center; padding:24px; } .link-picker-overlay.open{ display:flex; animation: overlayIn .18s ease; } @keyframes overlayIn{ from{ opacity:0; } to{ opacity:1; } } .link-picker-modal{ width:100%; max-width:640px; max-height:82vh; overflow-y:auto; background: var(--glass-strong); backdrop-filter: blur(12px); border:1px solid var(--line); border-radius:var(--r-xl); padding:26px 28px; box-shadow: var(--shadow-lg); animation: modalIn .22s cubic-bezier(.2,.9,.3,1.2); } @keyframes modalIn{ from{ opacity:0; transform: translateY(10px) scale(.98); } to{ opacity:1; transform:none; } } .link-picker-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; } .link-picker-head h3{ font-size:15px; margin:0; font-weight:800; display:flex; align-items:center; gap:9px; } .link-picker-head .ibadge{ width:27px; height:27px; border-radius:9px; background: var(--br-grad-soft); color: var(--br-2); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .link-picker-head .ibadge .icon{ width:14px; height:14px; } .link-picker-head .rm-btn{ width:30px; height:30px; } .link-picker-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap:12px; margin-bottom:18px; } .link-tile{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; cursor:pointer; background:none; border:none; padding:0; } .link-tile-ic{ width:52px; height:52px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.05); border:1px solid var(--line); transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease; } .link-tile-ic .icon{ width:24px; height:24px; } .link-tile:hover .link-tile-ic{ transform: translateY(-3px); border-color: var(--br-2); background: var(--br-grad-soft); box-shadow: 0 8px 18px -8px var(--br-2); } .link-picker-custom{ display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:var(--r-md); border:1px solid var(--line); background: rgba(255,255,255,.03); cursor:pointer; transition: border-color .15s ease, background .15s ease; } .link-picker-custom:hover{ border-color: var(--br-2); background: var(--br-grad-soft); } .lpc-icon{ width:40px; height:40px; border-radius:12px; background: var(--br-grad-soft); color: var(--br-2); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .lpc-icon .icon{ width:18px; height:18px; } .lpc-title{ font-size:13px; font-weight:700; } .lpc-sub{ font-size:11.5px; color:var(--muted); margin-top:2px; } .swatches{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; } .swatch{ width:27px; height:27px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition: transform .15s ease, box-shadow .15s ease; } .swatch:hover{ transform: scale(1.12); } .swatch.active{ border-color:#fff; box-shadow: 0 0 0 3px rgba(255,255,255,.12); } input[type=color]{ width:32px; height:32px; border-radius:50%; border:1px solid var(--line); padding:0; cursor:pointer; background:none; } /* ================= SÉLECTEUR DE POLICE PERSONNALISÉ (bio) ================= */ .fselect{ position:relative; } .fselect-trigger{ width:100%; display:flex; align-items:center; gap:10px; background: rgba(255,255,255,.03); border:1px solid var(--line); border-radius:var(--r-sm); color:var(--text); padding:10px 12px; font-size:13.5px; cursor:pointer; transition: border-color .15s ease, background .15s ease; font-family:inherit; text-align:left; } .fselect-trigger:hover{ border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.05); } .fselect.open .fselect-trigger{ border-color: var(--br-2); background: rgba(255,255,255,.06); box-shadow: 0 0 0 3px rgba(168,85,247,.12); } .fselect-trigger:focus-visible{ border-color: var(--br-2); box-shadow: 0 0 0 3px rgba(168,85,247,.12); } .fselect-trigger-preview{ flex-shrink:0; width:30px; height:30px; border-radius:8px; background: var(--br-grad-soft); color: var(--br-2); display:flex; align-items:center; justify-content:center; font-size:14px; line-height:1; } .fselect-trigger-text{ flex:1; font-weight:600; } .fselect-chevron{ width:11px; height:11px; opacity:.6; flex-shrink:0; transition: transform .2s ease; } .fselect.open .fselect-chevron{ transform: rotate(180deg); } .fselect-menu{ position:absolute; left:0; right:0; top: calc(100% + 6px); z-index:20; background: var(--glass-strong); backdrop-filter: blur(10px); border:1px solid var(--line); border-radius:var(--r-md); padding:6px; max-height:260px; overflow-y:auto; box-shadow: var(--shadow-lg); opacity:0; transform: translateY(-6px) scale(.98); pointer-events:none; transition: opacity .15s ease, transform .15s ease; } .fselect.open .fselect-menu{ opacity:1; transform:none; pointer-events:auto; } .fselect-item{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px; cursor:pointer; transition: background .12s ease; } .fselect-item:hover{ background: rgba(255,255,255,.06); } .fselect-item.active{ background: var(--br-grad-soft); } .fselect-item .fselect-item-preview{ flex-shrink:0; width:30px; height:30px; border-radius:8px; background: rgba(255,255,255,.05); display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--text); } .fselect-item.active .fselect-item-preview{ background: rgba(168,85,247,.2); color: var(--br-2); } .fselect-item-label{ font-size:13px; font-weight:600; color:var(--text); } .fselect-item.active .fselect-item-label{ color: var(--br-2); } .fselect-item .icon-check{ width:14px; height:14px; margin-left:auto; color: var(--br-2); flex-shrink:0; } .fselect-menu::-webkit-scrollbar{ width:7px; } .fselect-menu::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius:10px; } .font-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .font-opt{ border:1px solid var(--line); border-radius:var(--r-md); padding:14px 6px 11px; text-align:center; cursor:pointer; background: rgba(255,255,255,.03); transition: all .15s ease; position:relative; } .font-opt:hover{ border-color: rgba(255,255,255,.22); transform: translateY(-1px); } .font-opt.active{ border-color: var(--br-2); background: var(--br-grad-soft); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); } .font-opt .fpreview{ font-size:23px; line-height:1; color:var(--text); } .font-opt .flabel{ font-size:10px; color:var(--muted); margin-top:7px; font-weight:600; } /* ================= PREMIUM : polices verrouillées ================= Un compte gratuit voit toujours la police (aperçu compris) mais grisée, avec un petit cadenas — cliquer dessus propose de passer Premium au lieu de l'appliquer (voir dashboard.js). */ .font-opt.locked{ opacity:.4; cursor:pointer; } .font-opt.locked:hover{ border-color: var(--line); } .font-opt .font-lock-ic{ position:absolute; top:6px; right:7px; width:13px; height:13px; color:#FFD60A; } .font-opt .font-lock-ic svg{ width:100%; height:100%; } .fselect-item{ position:relative; } .fselect-item .icon-lock{ display:none; width:13px; height:13px; margin-left:auto; color:#FFD60A; flex-shrink:0; } .fselect-item.locked{ opacity:.45; } .fselect-item.locked .icon-check{ display:none; } .fselect-item.locked .icon-lock{ display:block; } /* ================= PREMIUM : petite étiquette à côté d'un titre/label ================= */ .pg-tag{ display:inline-block; font-size:9.5px; font-weight:800; letter-spacing:.03em; color:#FFD60A; background: rgba(255,214,10,.12); border:1px solid rgba(255,214,10,.35); border-radius:20px; padding:2px 8px; margin-left:6px; vertical-align:middle; box-shadow: 0 0 10px -3px rgba(255,214,10,.5); } .pg-tag-sm{ font-size:8.5px; padding:1px 6px; margin-left:4px; } /* ================= PREMIUM : overlay générique qui verrouille une section ================= Placer .premium-gate autour d'un bloc, avec à l'intérieur un .premium-gate-overlay (message + bouton) et un .premium-gate-content (le contenu réel). Ajouter/retirer la classe "locked" sur .premium-gate selon le statut Premium (voir refreshPremiumGates dans dashboard.js). */ .premium-gate{ position:relative; } .premium-gate-overlay{ display:none; } .premium-gate.locked .premium-gate-overlay{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; position:absolute; inset:0; z-index:6; text-align:center; padding:22px 18px; border-radius:var(--r-md); background: rgba(8,8,11,.86); backdrop-filter: blur(4px); border:1px solid rgba(255,214,10,.25); box-shadow: 0 0 30px -12px rgba(255,214,10,.35); } .premium-gate.locked .premium-gate-content{ opacity:.3; filter: blur(1.5px); pointer-events:none; user-select:none; } .premium-gate-overlay .pg-lock{ width:26px; height:26px; color:#FFD60A; } .premium-gate-overlay p{ font-size:12.5px; color:var(--muted); max-width:280px; line-height:1.5; margin:0; } .premium-gate-overlay .pg-btn{ width:auto; padding:9px 18px; border-style:solid; border-color:#FFD60A; color:#FFD60A; } .premium-gate-overlay .pg-btn:hover{ background: rgba(255,214,10,.1); } /* Petite zone dédiée à l'aperçu EN DIRECT du style de particules choisi (onglet Design > Particules) -- les particules réelles n'apparaissent que sur la page publiée/prévisualisée, donc sans ça rien ne se voit pendant qu'on choisit un style dans le formulaire. */ .particle-preview-box{ position:relative; overflow:hidden; margin-top:14px; height:90px; border-radius:14px; border:1px dashed rgba(255,255,255,.14); background: rgba(255,255,255,.03); display:flex; align-items:center; justify-content:center; cursor:crosshair; } .particle-preview-box span{ font-size:11.5px; color:var(--muted); pointer-events:none; user-select:none; } /* ================= PREMIUM : onglet fond vidéo verrouillé ================= */ .bg-tab.locked{ opacity:.55; cursor:pointer; } .bg-tab .pg-tag-sm{ pointer-events:none; } .toggle-row{ display:flex; align-items:center; justify-content:space-between; padding:4px 0; gap:12px; } .toggle-row .tlabel{ font-size:12.5px; color:var(--text); font-weight:600; } .toggle-row .tdesc{ font-size:11px; color:var(--muted); margin-top:2px; } /* --- Bloc "vitesse de la machine à écrire" : slider + mini aperçu animé --- */ .tw-speed-block{ width:100%; margin-top:16px; padding-top:14px; border-top:1px dashed var(--line); } .tw-speed-block .tlabel{ font-size:12.5px; color:var(--text); font-weight:600; } .tw-speed-block .tdesc{ font-size:11px; color:var(--muted); margin-top:2px; margin-bottom:14px; } .tw-speed-row{ display:flex; align-items:center; gap:12px; } .tw-speed-tag{ font-size:11px; color:var(--muted); flex-shrink:0; white-space:nowrap; } .tw-speed-row input[type="range"]{ -webkit-appearance:none; appearance:none; flex:1; height:5px; border-radius:6px; background: var(--br-grad); outline:none; cursor:pointer; } .tw-speed-row input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:50%; background:#fff; border:3px solid var(--br-2); box-shadow:0 0 8px rgba(168,85,247,.6); cursor:pointer; transition: transform .15s; } .tw-speed-row input[type="range"]::-webkit-slider-thumb:hover{ transform: scale(1.15); } .tw-speed-row input[type="range"]::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:#fff; border:3px solid var(--br-2); box-shadow:0 0 8px rgba(168,85,247,.6); cursor:pointer; } .tw-speed-value{ font-size:11.5px; color:var(--muted); margin-top:10px; font-family:'IBM Plex Mono', monospace; display:flex; align-items:center; gap:8px; } .tw-speed-value b{ color: var(--br-2); font-weight:700; } .tw-speed-badge{ font-size:10px; padding:2px 8px; border-radius:20px; background: rgba(168,85,247,.12); color: var(--br-2); border:1px solid rgba(168,85,247,.3); } .tw-speed-preview{ margin-top:12px; padding:12px 14px; border-radius:var(--r-sm); background: rgba(255,255,255,.03); border:1px solid var(--line); font-size:13px; color:var(--text); font-family:var(--bio-font, 'Sora', sans-serif); min-height:20px; white-space:pre; } .switch{ position:relative; width:40px; height:22px; flex-shrink:0; } .switch input{ opacity:0; width:0; height:0; } .slider{ position:absolute; cursor:pointer; inset:0; background: rgba(255,255,255,.12); border-radius:20px; transition:.2s; } .slider:before{ content:""; position:absolute; height:16px; width:16px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.4); } .switch input:checked + .slider{ background: var(--br-grad); box-shadow: 0 0 10px -2px var(--br-2); } .switch input:checked + .slider:before{ transform: translateX(18px); } .dash-preview{ width:340px; flex-shrink:0; position:relative; z-index:1; border-left:1px solid var(--line); padding:34px 26px; position:sticky; top:0; height:100vh; overflow:auto; background: rgba(255,255,255,.012); } .preview-label{ font-size:10.5px; color:var(--muted); letter-spacing:.14em; text-transform:uppercase; margin:0 0 14px 2px; display:flex; align-items:center; gap:8px; font-weight:700; font-family:'IBM Plex Mono',monospace; } .preview-label .dot{ width:6px; height:6px; border-radius:50%; background: var(--br-2); box-shadow:0 0 6px var(--br-2); animation:pulse 1.8s infinite; } @keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.25} } .mini-card{ border-radius:30px; border:1px solid var(--line); overflow:hidden; position:relative; min-height:460px; display:flex; align-items:center; justify-content:center; box-shadow: 0 30px 60px -24px rgba(0,0,0,.7), 0 0 0 6px rgba(255,255,255,.03); transition: transform .3s ease, box-shadow .3s ease; } .mini-card:hover{ box-shadow: 0 40px 80px -24px rgba(0,0,0,.75), 0 0 0 6px rgba(255,255,255,.05), 0 0 40px -14px var(--br-2); } .mini-card::after{ content:''; position:absolute; top:9px; left:50%; transform:translateX(-50%); width:44px; height:5px; border-radius:6px; background: rgba(255,255,255,.14); z-index:3; pointer-events:none; } .mini-bg{ position:absolute; inset:0; background-size:cover; background-position:center; filter: saturate(1.1); } .mini-bg video{ width:100%; height:100%; object-fit:cover; } .mini-overlay{ position:absolute; inset:0; background: radial-gradient(circle at 50% 30%, rgba(8,8,11,.35), rgba(8,8,11,.92)); } .mini-stars{ position:absolute; inset:0; display:none; } .mini-stars.show{ display:block; } .mini-content{ position:relative; z-index:2; padding:26px 20px; width:86%; text-align:center; background: rgba(12,12,16,.42); border:1px solid rgba(255,255,255,.09); border-radius:20px; backdrop-filter: blur(10px); } .mini-avatar-wrap, .site-avatar-wrap{ position:relative; width:fit-content; margin:0 auto; } .mini-avatar-ring{ width:70px; height:70px; border-radius:50%; padding:3px; background: conic-gradient(from 0deg, var(--avatar-accent), var(--avatar-accent-2), var(--avatar-accent)); } @keyframes spin{ to{ transform: rotate(360deg); } } .mini-avatar{ width:100%; height:100%; border-radius:50%; background: var(--surface-solid) center/cover; display:flex; align-items:center; justify-content:center; font-size:24px; border:3px solid #0A0714; } .mini-name{ font-family: var(--profile-font); font-size:19px; margin-top:12px; color: var(--name-color); text-shadow: var(--name-glow-mini, none); display:flex; gap:6px; align-items:center; justify-content:center; } .mini-handle{ color:var(--muted); font-size:10.5px; margin-top:2px; font-family:'IBM Plex Mono',monospace; } .mini-bio-wrap{ margin-top:10px; display:flex; align-items:flex-start; justify-content:center; gap:6px; } .mini-bio{ color:#d6d6e6; font-size:12.5px; line-height:1.6; letter-spacing:.015em; font-family: var(--bio-font); font-weight:500; padding:0 4px; } .mini-bio-emoji{ display:inline-flex; align-items:center; flex-shrink:0; margin-top:2px; } .mini-bio-emoji:empty{ display:none; } .mini-bio-emoji .badge-img{ width:16px; height:16px; object-fit:contain; vertical-align:middle; } .mini-bio-emoji .badge-emoji{ font-size:13px; line-height:1; } .mini-badges{ font-size:13px; align-items:center; gap:6px; text-shadow:none; display:none; } .mini-badges.has-badges{ display:inline-flex; } .mini-badges .badge-img{ width:15px; height:15px; object-fit:contain; vertical-align:middle; filter: drop-shadow(0 1px 3px rgba(0,0,0,.45)); transition: transform .15s ease; } .mini-badges .badge-img:hover{ transform: translateY(-1px) scale(1.1); } .mini-badges .badge-emoji{ display:inline-block; transition: transform .15s ease; } .mini-badges .badge-emoji:hover{ transform: translateY(-1px) scale(1.1); } @keyframes diamondGlow{ 0%,100%{ filter: drop-shadow(0 0 2px rgba(192,132,252,.55)) drop-shadow(0 0 5px rgba(109,40,217,.35)); } 50%{ filter: drop-shadow(0 0 4px rgba(192,132,252,.85)) drop-shadow(0 0 9px rgba(109,40,217,.55)); } } .badge-diamond{ animation: diamondGlow 2.6s ease-in-out infinite; } /* ================= INFO-BULLE CUSTOM AU SURVOL D'UN BADGE (façon guns.lol) ================= Petite carte sombre arrondie, nom du badge en gras, flèche pointant vers le badge -- remplace l'infobulle moche par défaut du navigateur. Posée sur le wrapper généré par badgeHtml() (site-helpers.js) autour de CHAQUE badge : normal (Premium/Verified/Donator/Rich/perso) ET team (Owner/Manager/Admin/ Staff/Helper), partout où badgeHtml() est appelé avec un label (page publique, dashboard, panneau admin...). */ /* Pas de "cursor:default" ici volontairement : le curseur perso (Premium, voir public-profilev2.js) est appliqué en inline sur html/body/#profileView et hérité par tous les descendants -- si CE wrapper déclarait son propre cursor (même "default"), ça écraserait l'héritage juste pour les badges, et le curseur repasserait à la flèche normale rien qu'en survolant un badge. Sans déclaration ici, le curseur perso reste actif partout, y compris au survol des badges. */ /* padding + margin négatif de même valeur : agrandit la zone de survol réelle de quelques px sans rien déplacer visuellement (aide à "accrocher" le survol du premier coup, en plus du gel du tilt ci-dessus dans public-profilev2.js). */ .badge-tip{ position:relative; display:inline-flex; align-items:center; justify-content:center; padding:4px; margin:-4px; } /* Forcer l'héritage du curseur sur TOUT ce qu'il y a dans un badge (image, svg, emoji texte) : certains navigateurs appliquent un curseur par défaut propre aux / qui ne suit pas l'héritage normal depuis le parent -- "cursor:inherit" force explicitement la même valeur que .badge-tip (donc le curseur perso), au lieu de laisser le navigateur décider tout seul rien qu'en passant la souris sur l'icône du badge. */ .badge-tip, .badge-tip *{ cursor: inherit; } .badge-tip::after{ content: attr(data-tooltip); position:absolute; left:50%; bottom:calc(100% + 11px); transform: translate(-50%, 5px); background: #17131F; color:#fff; font-family:'Sora', sans-serif; font-size:12.5px; font-weight:700; letter-spacing:.01em; white-space:nowrap; padding:7px 13px; border-radius:10px; border:1px solid rgba(255,255,255,.10); box-shadow: 0 10px 24px rgba(0,0,0,.5); opacity:0; visibility:hidden; pointer-events:none; transition: opacity .15s ease, transform .15s ease, visibility .15s; z-index:80; } .badge-tip::before{ content:''; position:absolute; left:50%; bottom:calc(100% + 5px); transform: translate(-50%, 5px); border:6px solid transparent; border-top-color:#17131F; opacity:0; visibility:hidden; pointer-events:none; transition: opacity .15s ease, transform .15s ease, visibility .15s; z-index:80; } .badge-tip:hover::after, .badge-tip:hover::before{ opacity:1; visibility:visible; transform: translate(-50%, 0); } /* Dans le petit aperçu live du dashboard (.mini-card), le conteneur a overflow:hidden juste au-dessus des badges -- une bulle vers le HAUT y serait coupée. On la fait donc pointer vers le BAS à cet endroit précis uniquement (même carte, même flèche, juste inversée). */ .mini-badges .badge-tip::after{ bottom:auto; top:calc(100% + 11px); transform: translate(-50%, -5px); } .mini-badges .badge-tip::before{ bottom:auto; top:calc(100% + 5px); transform: translate(-50%, -5px); border-top-color:transparent; border-bottom-color:#17131F; } .mini-badges .badge-tip:hover::after, .mini-badges .badge-tip:hover::before{ transform: translate(-50%, 0); } .mini-links{ margin-top:13px; display:flex; gap:7px; justify-content:center; flex-wrap:wrap; max-width:100%; } .mini-link-ic{ width:27px; height:27px; border-radius:9px; background: rgba(255,255,255,.08); color: var(--text); flex-shrink:0; box-sizing:border-box; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); text-decoration:none; } .mini-link-ic .icon{ width:13px; height:13px; } @media (max-width: 1080px){ .dash-main{ flex-direction: column; } .dash-preview{ width:100%; border-left:none; border-top:1px solid var(--line); position:static; height:auto; padding:26px 20px 60px; } .mini-card{ max-width: 420px; margin: 0 auto; } } @media (max-width: 720px){ .sidebar{ width:64px; } .sb-item .lbl{ display:none; } .dash-content{ padding:26px 16px 90px; } .font-grid{ grid-template-columns: repeat(2,1fr); } } @media (max-width: 560px){ .dash-topbar{ align-items:stretch; } .dash-topbar .who{ order:1; justify-content:center; } .topbar-actions{ order:2; width:100%; flex-wrap:wrap; justify-content:center; } .publish-toast{ width:100%; text-align:center; order:3; } .view-btn, .publish-btn{ flex:1; justify-content:center; } .row2{ grid-template-columns:1fr; } .link-row{ grid-template-columns: 30px 1fr 26px; grid-template-areas: "icon select select" "icon input remove"; row-gap:6px; margin-bottom:14px; } .link-row .link-ic-badge{ grid-area: icon; align-self:start; } .link-row select{ grid-area: select; } .link-row .link-url-field{ grid-area: input; } .link-row .rm-btn{ grid-area: remove; } .chip-grid{ gap:6px; } .chip{ padding:6px 10px; font-size:11px; } } @media (max-width: 400px){ .sidebar{ width:56px; } .sb-item{ width:48px; padding:8px 2px; } .font-grid{ grid-template-columns: repeat(2,1fr); gap:8px; } } /* ================= PAGE "GRAPHIQUE" (vues du profil) ================= */ .chart-stats{ display:flex; gap:12px; } .chart-stat{ flex:1; text-align:center; padding:16px 8px; border-radius:var(--r-md); background: rgba(255,255,255,.03); border:1px solid var(--line); transition: transform .15s ease, border-color .15s ease; } .chart-stat:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.18); } .chart-stat-num{ font-size:24px; font-weight:800; color: var(--br-2); text-shadow:0 0 12px rgba(168,85,247,.4); } .chart-stat-lbl{ font-size:11px; color:var(--muted); margin-top:4px; font-weight:600; } .views-chart{ display:flex; align-items:flex-end; gap:6px; padding-top:6px; } .views-bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; min-width:0; } .views-bar-track{ width:100%; height:120px; display:flex; align-items:flex-end; justify-content:center; } .views-bar{ width:100%; max-width:26px; border-radius:6px 6px 2px 2px; background: var(--br-grad); min-height:3px; transition: height .3s ease, filter .15s ease; box-shadow: 0 0 10px -4px var(--br-2); } .views-bar-col:hover .views-bar{ filter: brightness(1.15); } /* ================= STATS AVANCÉES : "Visiteurs récents" (Premium) ================= Tableau listant les dernières visites (date/heure, pays approx., type d'appareil) -- voir renderVisitorsTable() dans dashboard.js. */ .visitor-table{ width:100%; border-collapse:collapse; font-size:12.5px; } .visitor-table th{ text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); padding:0 10px 8px; border-bottom:1px solid var(--line); } .visitor-table td{ padding:9px 10px; border-bottom:1px solid rgba(255,255,255,.05); color:var(--text); } .visitor-table tr:last-child td{ border-bottom:none; } .visitor-row-flag{ font-size:15px; margin-right:6px; } .visitor-row-device{ font-size:13px; margin-right:5px; } .visitor-empty-note{ font-size:12.5px; color:var(--muted); padding:14px 4px; text-align:center; } .views-bar-val{ font-size:9.5px; color:var(--muted); font-weight:700; margin-bottom:5px; } .views-bar-day{ font-size:8.5px; color:var(--muted); margin-top:6px; white-space:nowrap; } /* ================= EFFET TILT (inclinaison au survol de la souris) ================= */ .site-center{ perspective: 1200px; } .dash-preview .mini-card{ perspective: 1000px; } .site-card, .mini-card{ transform-style: preserve-3d; will-change: transform; } .site-card.tilt-active{ transition: transform .12s ease-out, opacity .6s ease; } .mini-card.tilt-active{ transition: transform .12s ease-out; } /* ================= ICÔNES EMOJI DES RÉSEAUX ================= */ .site-link-ic .emoji-ic{ font-size:19px; line-height:1; } .mini-link-ic .emoji-ic{ font-size:13px; line-height:1; } /* ================= PETITES RETOUCHES VISUELLES ================= */ .site-card{ box-shadow: 0 50px 100px -40px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.06), 0 0 60px -30px var(--accent); } .site-link-ic{ box-shadow: 0 2px 10px -6px rgba(0,0,0,.6); } .site-avatar-ring{ transition: border-radius .25s ease; } .mini-avatar-ring{ transition: border-radius .25s ease; } /* ================= ROTATION DE L'AVATAR (effet optionnel) ================= S'applique à l'anneau (le fond/bordure) plutôt qu'à l'image elle-même : ainsi la photo ne devient jamais "penchée" à un angle bizarre, elle tourne proprement autour de son propre centre, quelle que soit la forme (rond, carré, rectangle). */ @keyframes avatarSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } .mini-avatar-ring.avatar-spin, .site-avatar-ring.avatar-spin, .entry-avatar-ring.avatar-spin{ animation: avatarSpin 3.5s linear infinite; } /* ================= AURA LUMINEUSE DE L'AVATAR (effet Premium exclusif) ================= Halo pulsant autour de l'anneau, dans les couleurs perso de l'avatar (--avatar-accent/--avatar-accent-2). Cumulable avec la rotation ci-dessus. */ @keyframes avatarGlowPulse{ 0%,100%{ box-shadow: 0 0 18px -2px var(--avatar-accent), 0 0 6px 0px var(--avatar-accent-2); } 50%{ box-shadow: 0 0 40px 4px var(--avatar-accent), 0 0 16px 2px var(--avatar-accent-2); } } .mini-avatar-ring.avatar-glow, .site-avatar-ring.avatar-glow, .entry-avatar-ring.avatar-glow{ animation: avatarGlowPulse 2.2s ease-in-out infinite; } /* ================= FORME DE L'AVATAR (rond / carré / rectangle) ================= Le rond est la forme par défaut (pas de classe nécessaire). "square" garde des proportions carrées avec des coins arrondis, "rectangle" passe en format portrait. Appliqué à la fois à l'anneau et à la photo à l'intérieur. */ .mini-avatar-ring.avatar-shape-square, .entry-avatar-ring.avatar-shape-square{ border-radius:24%; } .mini-avatar-ring.avatar-shape-square .mini-avatar, .entry-avatar-ring.avatar-shape-square .entry-avatar{ border-radius:20%; } .site-avatar-ring.avatar-shape-square{ border-radius:24%; } .site-avatar-ring.avatar-shape-square .site-avatar{ border-radius:20%; } .mini-avatar-ring.avatar-shape-rect, .entry-avatar-ring.avatar-shape-rect{ width:60px; height:84px; border-radius:18%; } .mini-avatar-ring.avatar-shape-rect .mini-avatar, .entry-avatar-ring.avatar-shape-rect .entry-avatar{ border-radius:15%; } .site-avatar-ring.avatar-shape-rect{ width:86px; height:120px; border-radius:18%; } .site-avatar-ring.avatar-shape-rect .site-avatar{ border-radius:15%; } /* Sélecteur de forme (Design > Avatar shape) -- même logique visuelle que les cartes .badge-choice (bordure qui s'allume au survol/sélection), pour rester cohérent avec le reste du dashboard. */ .shape-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:8px; } .shape-opt{ position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 8px 12px; border-radius:14px; background: rgba(255,255,255,.025); border:1px solid var(--line); color:var(--muted); font-size:12px; font-weight:600; cursor:pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; } .shape-opt:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.04); color:#fff; } .shape-opt.active{ border-color: var(--avatar-accent, #A855F7); background: rgba(168,85,247,.08); color:#fff; box-shadow: 0 0 0 1px var(--avatar-accent, #A855F7) inset; } .shape-opt.active::after{ content:'✓'; position:absolute; top:6px; right:8px; width:15px; height:15px; border-radius:50%; background: var(--avatar-accent, #A855F7); color:#0A0714; font-size:9px; font-weight:800; display:flex; align-items:center; justify-content:center; } .shape-preview{ display:block; width:26px; height:26px; background: conic-gradient(from 0deg, var(--avatar-accent, #A855F7), var(--avatar-accent-2, #7C3AED)); border:2px solid #0A0714; box-shadow: 0 2px 8px -3px rgba(0,0,0,.6); } .shape-preview-circle{ border-radius:50%; } .shape-preview-square{ border-radius:26%; } .shape-preview-rect{ width:20px; height:26px; border-radius:20%; } /* ================= ANNEAU DE L'AVATAR (activable / désactivable) ================= Quand désactivé, plus de padding ni de fond dégradé sur l'anneau : seule la photo/l'emoji reste visible, à la taille de l'anneau d'origine. */ .mini-avatar-ring.avatar-ring-off, .site-avatar-ring.avatar-ring-off, .entry-avatar-ring.avatar-ring-off{ padding:0; background:none; box-shadow:none; } .mini-avatar-ring.avatar-ring-off .mini-avatar, .site-avatar-ring.avatar-ring-off .site-avatar, .entry-avatar-ring.avatar-ring-off .entry-avatar{ border:none; } /* Si l'anneau est désactivé, on tue aussi l'effet "Avatar glow aura" (lueur pulsante), même si ce réglage Premium séparé est resté activé : plus aucune couleur ne doit apparaître autour de l'avatar dans ce cas. */ .mini-avatar-ring.avatar-ring-off.avatar-glow, .site-avatar-ring.avatar-ring-off.avatar-glow, .entry-avatar-ring.avatar-ring-off.avatar-glow{ animation:none; box-shadow:none; } /* ================= PASTILLE DE FOND DES BADGES (style "guns.lol") ================= Un seul cadre arrondi, fond semi-opaque + léger contour + ombre portée, dans lequel les icônes de badges sont alignées et légèrement espacées. */ .mini-badges.badges-bg, .site-badges.badges-bg{ background: var(--badges-bg-color, #241A3D); padding:6px 10px; border-radius:10px; gap:8px; border:1px solid rgba(255,255,255,.09); box-shadow: 0 3px 12px -4px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); } /* ================= COULEURS PERSO (color pickers) ================= */ .custom-swatch-input{ background: conic-gradient(from 0deg,#FF3B30,#FFCC00,#34C759,#00C7BE,#0A84FF,#AF52DE,#FF2D55,#FF3B30) !important; padding:3px; border:none !important; box-shadow: 0 0 0 1px rgba(255,255,255,.25); } .custom-color-row{ display:flex; align-items:center; gap:16px; margin-top:14px; flex-wrap:wrap; } .ccol{ display:flex; align-items:center; gap:8px; } .ccol span{ font-size:11.5px; color:var(--muted); font-weight:600; } .ccol-note{ font-size:10.5px; color:var(--muted); margin:0; flex-basis:100%; } /* ================= AUDIO PREVIEW ================= */ .audio-preview-sm{ display:flex; align-items:center; justify-content:center; color:var(--muted); } .audio-preview-sm.has-file{ color:var(--accent); background: rgba(168,85,247,.1); border-color: var(--accent); } .audio-preview-sm.processing{ color:var(--accent); animation: audioProcessing 1s infinite ease-in-out; } @keyframes audioProcessing{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } } /* ============ PROFILE (PUBLISHED SITE) ============ */ #profileView{ min-height:100vh; position:relative; cursor: auto; } .mini-card{ cursor: auto; } .site-bg{ position:fixed; inset:0; z-index:0; background-size:cover; background-position:center; transform: scale(1.06); } .site-bg video{ width:100%; height:100%; object-fit:cover; } .site-overlay{ position:fixed; inset:0; z-index:1; background: radial-gradient(circle at 50% 25%, rgba(6,6,9,.45), rgba(4,4,6,.94)); } .site-stars{ position:fixed; inset:0; z-index:1; display:none; } .site-stars.show{ display:block; } .star{ position:absolute; background: var(--accent); border-radius:50%; box-shadow: 0 0 6px 1px var(--accent); animation: twinkle 3s ease-in-out infinite; } @keyframes twinkle{ 0%,100%{ opacity:.25; transform:scale(1); } 50%{ opacity:1; transform:scale(1.4); } } #entryScreen{ position:fixed; inset:0; z-index:50; display:flex; flex-direction:column; align-items:center; justify-content:center; background: rgba(4,4,6,.88); backdrop-filter: blur(11px); cursor: pointer; transition: opacity .28s ease, visibility .28s; } #entryScreen.hidden{ opacity:0; visibility:hidden; pointer-events:none; } .entry-avatar-ring{ position:relative; width:70px; height:70px; border-radius:50%; padding:3px; margin:0 auto 18px; background: conic-gradient(from 0deg, var(--avatar-accent), var(--avatar-accent-2), var(--avatar-accent)); transition: border-radius .25s ease; } .entry-avatar{ width:100%; height:100%; border-radius:50%; overflow:hidden; border:3px solid #0A0714; background: var(--surface-solid) center/cover; display:flex; align-items:center; justify-content:center; font-size:26px; } .entry-name{ font-family: var(--profile-font); font-size:19px; color: var(--name-color); margin-bottom:6px; text-shadow: var(--name-glow-entry, none); } .entry-text{ font-size:12px; color:var(--muted); letter-spacing:.14em; text-transform:uppercase; font-weight:700; font-family: var(--entry-font, 'Share Tech Mono', monospace); } .entry-text .blink{ display:inline-block; margin-left:6px; animation: blink 1.4s infinite; } @keyframes blink{ 0%,49%{opacity:1} 50%,100%{opacity:.15} } .site-topbar{ position:relative; z-index:5; display:flex; justify-content:space-between; align-items:center; max-width:900px; margin:0 auto; padding:22px 24px 0; } .back-link{ color:#b5b5c9; text-decoration:none; font-size:12px; cursor: pointer; display:flex; align-items:center; gap:6px; font-weight:600; } .back-link:hover{ color:#fff; } .back-link .icon{ width:14px; height:14px; } .url-chip{ font-size:11px; color:var(--accent); background: rgba(255,255,255,.06); border:1px solid var(--line); padding:6px 12px; border-radius:20px; font-family:'IBM Plex Mono',monospace; } /* Le chip d'URL du profil est maintenant un