/* ============================================================ AZUR — nouveau système de design (glassmorphism bleuté) À inclure APRÈS common.css et dark-mode.css, uniquement sur les pages déjà migrées. N'affecte aucune page qui ne le charge pas explicitement. Bascule clair/sombre : synchronisée avec le mécanisme existant (localStorage "darkMode" + classe body.dark-mode) — voir le script "Gestion du mode sombre/clair" qui pose en plus l'attribut data-theme sur . ============================================================ */ @font-face{ font-family:"Bricolage"; font-style:normal; font-weight:500 800; font-display:swap; src:url("../fonts/bricolage.woff2") format("woff2"); } @font-face{ font-family:"JetBrains Mono"; font-style:normal; font-weight:400 700; font-display:swap; src:url("../fonts/jetbrains-mono.woff2") format("woff2"); } :root{ --s1:#eef4fc; --s2:#d9e8fb; --s3:#b9d6f7; --ink:#0d2440; --ink-2:#2b4a72; --mist:#5c7699; --mist-soft:#7d93b3; --glass: rgba(233,242,255,.55); --glass-strong: rgba(233,242,255,.93); --glass-line: rgba(255,255,255,.7); --glass-hi: rgba(255,255,255,.8); --glass-sh: rgba(10,30,60,.18); /* Accent principal. Ces 5 variables (+ --s1/--s2/--s3 ci-dessus) sont les seules à redéfinir pour changer la couleur du cloud : la surcharge est émise en ligne dans le par cloudColorStyle() (includes/cloud-colors.php). Les triplets *-rgb servent à composer les rgba (ombres, fonds translucides, bordures) sans réécrire la couleur à chaque fois. */ --azure:#1d4ed8; --azure-glow:#3b73f0; --azure-press:#163fae; --azure-rgb:29,78,216; --azure-glow-rgb:59,115,240; --azure-soft: rgba(var(--azure-glow-rgb),.14); --danger:#c23b4a; --danger-soft: rgba(194,59,74,.13); --ok:#2f8f66; --ok-soft: rgba(47,143,102,.14); --warning:#b3791f; --warning-soft: rgba(179,121,31,.15); --neutral-soft: rgba(127,140,150,.14); --t-image:#d9607a; --t-image-soft: rgba(217,96,122,.14); --t-doc:#5b6fae; --t-doc-soft: rgba(91,111,174,.14); --t-sheet:#2f9e6e; --t-sheet-soft: rgba(47,158,110,.14); --t-video:#8b6fd1; --t-video-soft: rgba(139,111,209,.14); --t-archive:#c06a9e;--t-archive-soft: rgba(192,106,158,.14); --t-audio:#c9862f; --t-audio-soft: rgba(201,134,47,.14); --t-other:#64809c; --t-other-soft: rgba(100,128,156,.14); --r-xl:28px; --r-lg:20px; --r-md:14px; --r-sm:10px; /* Taille des tuiles en vue grille (paramètre Apparence → Taille des tuiles) : un seul multiplicateur, appliqué par calc() à chaque dimension de .file-card ci-dessous — jamais de valeurs dupliquées entre la grille réelle et l'aperçu du panneau de paramètres (.tile-size-preview réutilise ces mêmes --tile-base-*). 1 = taille actuelle, inchangée par défaut. */ --tile-scale:1; --tile-base-w:6.6rem; --tile-base-min:6.4rem; --tile-base-icon:3.2rem; --tile-base-icon-svg:1.25rem; --tile-base-icon-svg-md:1.5rem; --tile-base-font:.72rem; --tile-base-font-sub:.62rem; --tile-base-gap-row:1.1rem; --tile-base-gap-col:.6rem; --tile-base-pad-y:.6rem; --tile-base-pad-x:.35rem; --tile-base-radius:14px; --tile-base-radius-icon:14px; --font-display:"Bricolage", ui-sans-serif, system-ui, sans-serif; --font-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; --scroll-thumb: rgba(92,118,153,.30); --scroll-thumb-hover: rgba(92,118,153,.55); } html[data-theme="dark"]{ --s1:#030814; --s2:#071b35; --s3:#0d2c52; --ink:#e9f2fc; --ink-2:#b8cce6; --mist:#7f97bd; --mist-soft:#6c84a8; --glass: rgba(7,19,38,.5); --glass-strong: rgba(7,19,38,.94); --glass-line: rgba(255,255,255,.09); --glass-hi: rgba(255,255,255,.08); --glass-sh: rgba(0,0,0,.5); --azure-glow:#79aeff; --azure-press:#5f92e0; --azure-glow-rgb:121,174,255; --azure-soft: rgba(var(--azure-glow-rgb),.18); --danger-soft: rgba(224,110,130,.18); --ok-soft: rgba(72,190,140,.18); --warning-soft: rgba(224,163,72,.18); --neutral-soft: rgba(140,164,190,.16); --t-image-soft: rgba(224,120,144,.20); --t-doc-soft: rgba(130,150,224,.20); --t-sheet-soft: rgba(78,196,146,.20); --t-video-soft: rgba(166,146,230,.20); --t-archive-soft: rgba(212,140,190,.20); --t-audio-soft: rgba(219,160,90,.20); --t-other-soft: rgba(140,164,190,.20); --scroll-thumb: rgba(160,185,215,.26); --scroll-thumb-hover: rgba(160,185,215,.5); } /* ---------- scrollbar discrète, à l'échelle du site ---------- Piste transparente + pouce translucide arrondi, "flottant" grâce à une bordure transparente + background-clip (la gouttière fait 10px mais le pouce visible n'en fait que 4). Les couleurs viennent des variables de thème : rien à redéfinir pour le mode sombre. Firefox n'a pas les pseudo-éléments ::-webkit-* mais hérite de scrollbar-width/scrollbar-color posés sur . */ html{ scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; } ::-webkit-scrollbar{ width: 10px; height: 10px; } ::-webkit-scrollbar-track{ background: transparent; } ::-webkit-scrollbar-corner{ background: transparent; } ::-webkit-scrollbar-thumb{ background-color: var(--scroll-thumb); border: 3px solid transparent; background-clip: padding-box; border-radius: 999px; } ::-webkit-scrollbar-thumb:hover{ background-color: var(--scroll-thumb-hover); } /* Sur les petites zones scrollables (menus, listes), gouttière plus fine. */ .chat-pop ::-webkit-scrollbar, .acct-menu ::-webkit-scrollbar, .spotlight-results::-webkit-scrollbar, .settings-tab-content::-webkit-scrollbar{ width: 8px; height: 8px; } /* ---------- fond de page ---------- */ body{ font-family: var(--font-mono); background: linear-gradient(200deg, var(--s1) 0%, var(--s2) 55%, var(--s3) 100%) !important; background-attachment: fixed; transition: background 1s ease; } body.dark-mode{ /* Mêmes variables que le mode clair : html[data-theme="dark"] les a déjà redéfinies, donc le fond suit la palette choisie sans valeur en dur. */ background: linear-gradient(200deg, var(--s1) 0%, var(--s2) 55%, var(--s3) 100%) !important; } .azur-display{ font-family: var(--font-display); } /* ---------- reskin du panneau "verre" existant ---------- Affecte tout élément .glass-card restant sur la page (cartes de fichiers, bannière de vérification d'e-mail). */ .glass-card{ background: var(--glass) !important; border: 1px solid var(--glass-line) !important; backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); box-shadow: inset 0 1px 0 var(--glass-hi), 0 20px 40px -24px var(--glass-sh); } body.dark-mode .glass-card{ background: var(--glass-strong) !important; border-color: var(--glass-line) !important; } .file-card h3{ font-family: var(--font-mono); } /* ---------- teinte des badges d'icônes par type de fichier ---------- Remplace les classes Tailwind (bg-red-50/text-red-500, etc.) rendues par le switch PHP, pour retrouver exactement les teintes de l'artifact (notamment l'audio en ambre plutôt qu'en rose, trop proche des images). */ .tbadge-image{ background:var(--t-image-soft) !important; color:var(--t-image) !important; } .tbadge-doc{ background:var(--t-doc-soft) !important; color:var(--t-doc) !important; } .tbadge-sheet{ background:var(--t-sheet-soft) !important; color:var(--t-sheet) !important; } .tbadge-video{ background:var(--t-video-soft) !important; color:var(--t-video) !important; } .tbadge-archive{ background:var(--t-archive-soft) !important; color:var(--t-archive) !important; } .tbadge-audio{ background:var(--t-audio-soft) !important; color:var(--t-audio) !important; } .tbadge-other{ background:var(--t-other-soft) !important; color:var(--t-other) !important; } .tbadge-folder{ background:var(--azure) !important; color:#fff !important; } body.dark-mode .tbadge-folder{ background:var(--azure-glow) !important; color:white !important; } /* ---------- bouton "retirer des favoris" (favorites.php) ---------- Étoile pleine ambre (même teinte que le favori-btn du menu "...") au repos, qui passe au rouge danger au survol pour signaler l'action de suppression. */ .fav-remove-btn{ width:1.9rem; height:1.9rem; border-radius:999px; display:flex; align-items:center; justify-content:center; background:transparent; border:none; color:#b3791f; cursor:pointer; flex-shrink:0; transition: background .15s ease, color .15s ease; } .fav-remove-btn:hover{ background:var(--danger-soft); color:var(--danger); } /* Icônes décoratives (menu de filtre) reprenant les mêmes teintes que les badges de fichiers ; en classes (pas de style inline) pour survivre au remplacement de par un , car lucide.createIcons() remplace la balise par un (overflow-x:hidden). Bug connu de Safari iOS : quand a un overflow non-"visible" ET contient des enfants position:fixed avec backdrop-filter (canvas d'aurore, dock, statusbar, ...), le flou n'est plus appliqué — le fond défile "cru", sans flou, derrière le verre. Déplacé sur , qui n'est pas concerné par ce bug. */ html{ overflow-x:hidden; } /* ---------- fichiers en mode grille = tuiles "bureau" ---------- On ne touche pas au HTML généré par PHP (.file-card, .more-btn, .dropdown-actions, h3/p/.mod-date restent identiques pour que tout le JS existant continue de fonctionner) : uniquement une reskin CSS structurelle, sur le même principe que les règles .list-view déjà présentes plus bas dans la page. Désactivée quand body.list-view est actif (le mode liste garde son propre habillage existant, plus bas dans le fichier). */ body:not(.list-view) #content-files{ display:grid !important; grid-template-columns:repeat(auto-fill, minmax(calc(var(--tile-base-min) * var(--tile-scale)),1fr)) !important; gap:calc(var(--tile-base-gap-row) * var(--tile-scale)) calc(var(--tile-base-gap-col) * var(--tile-scale)) !important; justify-items:center; } body:not(.list-view) #content-files .file-card{ background:transparent !important; border:none !important; box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; width:calc(var(--tile-base-w) * var(--tile-scale)); padding:calc(var(--tile-base-pad-y) * var(--tile-scale)) calc(var(--tile-base-pad-x) * var(--tile-scale)) !important; border-radius:calc(var(--tile-base-radius) * var(--tile-scale)) !important; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.35rem; transition: background .15s ease; } body:not(.list-view) #content-files .file-card:hover, body:not(.list-view) #content-files .file-card.selected{ background:var(--azure-soft) !important; box-shadow:none !important; } body.dark-mode:not(.list-view) #content-files .file-card:hover, body.dark-mode:not(.list-view) #content-files .file-card.selected{ background:var(--azure-soft) !important; } /* Range icône + bouton "..." : icône centrée, bouton en médaillon coin */ body:not(.list-view) #content-files .file-card > div.flex.justify-between{ justify-content:center; width:100%; margin-bottom:0 !important; position:relative; } body:not(.list-view) #content-files .file-card .p-2\.5, body:not(.list-view) #content-files .file-card .p-3{ width:calc(var(--tile-base-icon) * var(--tile-scale)) !important; height:calc(var(--tile-base-icon) * var(--tile-scale)) !important; padding:0 !important; display:flex !important; align-items:center; justify-content:center; border-radius:calc(var(--tile-base-radius-icon) * var(--tile-scale)) !important; /* Ombre douce façon "tile-glyph" de l'artifact, à la place du shadow-md Tailwind (encore amplifié en noir dur par dark-mode.css). */ box-shadow: inset 0 1px 0 var(--glass-hi), 0 10px 16px -12px var(--glass-sh) !important; } /* L'icône Lucide est un par un