From f5506b9e8721ed70f0d06af14465fb3f2d0e85f1 Mon Sep 17 00:00:00 2001 From: Mathias Date: Wed, 9 Sep 2026 21:55:36 +0200 Subject: [PATCH] =?UTF-8?q?design:=20refonte=20compl=C3=A8te=20du=20layout?= =?UTF-8?q?=20Pterodactyl=20(grille=20de=20cartes,=20bandeau=20hardware,?= =?UTF-8?q?=20suppression=20d=C3=A9finitive=20des=20mentions)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- site-web/forgium-theme.css | 296 +++++++++++++++++++++++++------------ 1 file changed, 204 insertions(+), 92 deletions(-) diff --git a/site-web/forgium-theme.css b/site-web/forgium-theme.css index 181d2a5..bd23a75 100644 --- a/site-web/forgium-theme.css +++ b/site-web/forgium-theme.css @@ -1,5 +1,5 @@ /* ================================================================ - FORGIUM CYBER-THEME POUR PTERODACTYL (100% IN-HOUSE RESKIN) + FORGIUM NEXT-GEN COCKPIT THEME POUR PTERODACTYL Architecture Haute Performance - AMD Ryzen 7 3700X ================================================================ */ @@ -7,187 +7,299 @@ :root { --bg-dark-oled: #030712 !important; - --bg-panel: #070d1c !important; - --bg-card: rgba(13, 22, 41, 0.85) !important; - --bg-card-hover: rgba(20, 35, 66, 0.9) !important; + --bg-surface: #070d1d !important; + --bg-card: rgba(13, 22, 42, 0.75) !important; + --bg-card-hover: rgba(18, 30, 58, 0.95) !important; --accent-cyan: #38bdf8 !important; --accent-blue: #2563eb !important; - --accent-glow: rgba(56, 189, 248, 0.3) !important; - --border-forgium: rgba(56, 189, 248, 0.18) !important; - --border-hover: rgba(56, 189, 248, 0.5) !important; + --accent-green: #10b981 !important; + --accent-amber: #f59e0b !important; + --accent-rose: #f43f5e !important; + --border-forgium: rgba(56, 189, 248, 0.16) !important; + --border-hover: rgba(56, 189, 248, 0.45) !important; + --glow-cyan: 0 0 25px rgba(56, 189, 248, 0.25) !important; + --glow-green: 0 0 20px rgba(16, 185, 129, 0.3) !important; --text-primary: #f8fafc !important; --text-secondary: #94a3b8 !important; } -/* 1. TYPOGRAPHIE GLOBALE ET FOND OLED */ +/* 1. FOND GÉNÉRAL CYBER-DATACENTER */ html, body, #app { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important; background-color: var(--bg-dark-oled) !important; background-image: - radial-gradient(circle at 10% 10%, rgba(56, 189, 248, 0.07) 0%, transparent 40%), - radial-gradient(circle at 90% 90%, rgba(37, 99, 235, 0.07) 0%, transparent 40%) !important; + radial-gradient(circle at 15% 15%, rgba(56, 189, 248, 0.08) 0%, transparent 45%), + radial-gradient(circle at 85% 85%, rgba(37, 99, 235, 0.08) 0%, transparent 45%) !important; background-attachment: fixed !important; color: var(--text-primary) !important; } -/* 2. NAVIGATION ET NAVBAR SUPÉRIEURE */ -header, nav, [class*="NavigationBar__"], [class*="SubNavigation__"] { - background: rgba(7, 13, 28, 0.88) !important; - backdrop-filter: blur(16px) !important; - -webkit-backdrop-filter: blur(16px) !important; +/* 2. NAVBAR MODERNE AVEC LOGO OFFICIEL FORGIUM */ +header, nav, [class*="NavigationBar__"] { + background: rgba(7, 13, 29, 0.85) !important; + backdrop-filter: blur(20px) !important; + -webkit-backdrop-filter: blur(20px) !important; border-bottom: 1px solid var(--border-forgium) !important; - box-shadow: 0 4px 25px rgba(0, 0, 0, 0.5) !important; + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.7) !important; + height: 70px !important; + display: flex !important; + align-items: center !important; } -/* Remplacement du logo Pterodactyl standard par le logo officiel Forgium */ +/* Masquer logo et textes par défaut */ [class*="NavigationBar__Logo"] svg, -[class*="Navigation__Logo"] svg, -header svg[class*="h-9"] { +header svg.h-9 { display: none !important; } +/* Logo Forgium officiel injecté */ [class*="NavigationBar__Logo"], -[class*="Navigation__Logo"], header a[href="/"] { position: relative !important; display: flex !important; align-items: center !important; - gap: 0.6rem !important; - font-size: 1.15rem !important; - font-weight: 800 !important; - color: #ffffff !important; + gap: 0.8rem !important; text-decoration: none !important; -} - -[class*="NavigationBar__Logo"]::before, -[class*="Navigation__Logo"]::before, -header a[href="/"]::before { - content: '' !important; - display: inline-block !important; - width: 32px !important; - height: 32px !important; - background: url('/logo-forgium.svg') no-repeat center center !important; - background-size: contain !important; -} - -[class*="NavigationBar__Logo"]::after, -[class*="Navigation__Logo"]::after, -header a[href="/"]::after { - content: 'FORGIUM' !important; - font-family: 'Plus Jakarta Sans', sans-serif !important; + font-size: 1.3rem !important; font-weight: 800 !important; letter-spacing: -0.5px !important; color: #ffffff !important; } -/* 3. CARTES DES SERVEURS (DASHBOARD) */ +[class*="NavigationBar__Logo"]::before, +header a[href="/"]::before { + content: '' !important; + display: inline-block !important; + width: 36px !important; + height: 36px !important; + background: url('/logo-forgium.svg') no-repeat center center !important; + background-size: contain !important; + filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.4)) !important; +} + +[class*="NavigationBar__Logo"]::after, +header a[href="/"]::after { + content: 'FORGIUM CLOUD' !important; + font-family: 'Plus Jakarta Sans', sans-serif !important; + font-weight: 800 !important; + color: #ffffff !important; + font-size: 1.15rem !important; + background: linear-gradient(135deg, #ffffff 40%, var(--accent-cyan) 100%) !important; + -webkit-background-clip: text !important; + -webkit-text-fill-color: transparent !important; +} + +/* Onglets du sous-menu (Console, Files, Databases, etc.) */ +[class*="SubNavigation__"] { + background: rgba(4, 8, 18, 0.8) !important; + border-bottom: 1px solid var(--border-forgium) !important; + backdrop-filter: blur(12px) !important; +} + +[class*="SubNavigation__"] a { + font-size: 0.9rem !important; + font-weight: 600 !important; + padding: 0.8rem 1.2rem !important; + color: var(--text-secondary) !important; + transition: all 0.2s ease !important; +} + +[class*="SubNavigation__"] a:hover, +[class*="SubNavigation__"] a[class*="active"] { + color: var(--accent-cyan) !important; + border-bottom: 2px solid var(--accent-cyan) !important; + text-shadow: 0 0 10px rgba(56, 189, 248, 0.4) !important; +} + +/* 3. REORGANISATION DU DASHBOARD EN GRILLE MODERNE (GRID DE CARTES) */ +/* Au lieu d'une longue ligne étirée, on passe en grille de cartes pro */ +[class*="DashboardContainer"] > div[class*="grid"], +[class*="DashboardContainer"] > div:has([class*="ServerRow__"]) { + display: grid !important; + grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)) !important; + gap: 1.5rem !important; + padding: 1.5rem 0 !important; +} + +/* Carte de serveur restructurée */ [class*="ServerRow__"], -[class*="ServerCard__"], -[class*="style__ServerCard"], .server-row { + display: flex !important; + flex-direction: column !important; background: var(--bg-card) !important; border: 1px solid var(--border-forgium) !important; - border-radius: 14px !important; - backdrop-filter: blur(12px) !important; - transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; + border-radius: 18px !important; + padding: 1.6rem !important; + backdrop-filter: blur(16px) !important; + -webkit-backdrop-filter: blur(16px) !important; + transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; + position: relative !important; overflow: hidden !important; } -[class*="ServerRow__"]:hover, -[class*="ServerCard__"]:hover { - border-color: var(--border-hover) !important; - transform: translateY(-3px) !important; - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 20px var(--accent-glow) !important; +[class*="ServerRow__"]::before { + content: '' !important; + position: absolute !important; + top: 0 !important; + left: 0 !important; + right: 0 !important; + height: 3px !important; + background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue)) !important; + opacity: 0 !important; + transition: opacity 0.3s ease !important; } -/* 4. CONSOLE ET TERMINAL */ +[class*="ServerRow__"]:hover { + background: var(--bg-card-hover) !important; + border-color: var(--border-hover) !important; + transform: translateY(-4px) !important; + box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), var(--glow-cyan) !important; +} + +[class*="ServerRow__"]:hover::before { + opacity: 1 !important; +} + +/* Jauges et compteurs dans les cartes */ +[class*="ServerRow__"] [class*="status-bar"], +[class*="ServerRow__"] [class*="rounded"] { + border-radius: 10px !important; +} + +/* 4. VUE CONSOLE & COCKPIT DU SERVEUR */ +/* Zone du terminal */ [class*="Console__"], -[class*="ServerConsole__"], -.terminal, .xterm { +.xterm, +[class*="terminal"] { font-family: 'JetBrains Mono', monospace !important; background: #02040a !important; border: 1px solid var(--border-forgium) !important; - border-radius: 12px !important; - box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.8), 0 8px 30px rgba(0, 0, 0, 0.5) !important; + border-radius: 16px !important; + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important; + padding: 1rem !important; } .xterm-viewport { background: #02040a !important; } -/* 5. BOUTONS D'ALIMENTATION (POWER BUTTONS) */ -button[class*="Button__"], -.btn { - border-radius: 8px !important; +/* Cartes de télémétrie latérale (CPU, RAM, Disque, Réseau) */ +[class*="ServerConsole__"] > div:last-child > div, +[class*="StatBlock__"] { + background: var(--bg-card) !important; + border: 1px solid var(--border-forgium) !important; + border-radius: 16px !important; + padding: 1.2rem !important; + backdrop-filter: blur(14px) !important; + transition: all 0.25s ease !important; + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important; +} + +[class*="StatBlock__"]:hover { + border-color: var(--border-hover) !important; + transform: translateY(-2px) !important; +} + +/* 5. BOUTONS D'ALIMENTATION CYBERPUNK (POWER ACTIONS) */ +button[class*="Button__"] { + border-radius: 10px !important; font-family: 'Plus Jakarta Sans', sans-serif !important; - font-weight: 600 !important; - transition: all 0.2s ease !important; + font-weight: 700 !important; + padding: 0.6rem 1.2rem !important; + transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; + letter-spacing: 0.3px !important; } -/* Bouton Démarrer (Start) vert néon Forgium */ -button:has(svg[data-icon="play"]), -button[class*="start"], -button[class*="green"] { - background: #10b981 !important; +/* Bouton Démarrer (Start) vert néon */ +button[class*="green"], +button:has(svg[data-icon="play"]) { + background: var(--accent-green) !important; color: #000000 !important; border: none !important; - font-weight: 700 !important; } +button[class*="green"]:hover, button:has(svg[data-icon="play"]):hover { - box-shadow: 0 0 15px rgba(16, 185, 129, 0.4) !important; - filter: brightness(1.1) !important; + box-shadow: var(--glow-green) !important; + filter: brightness(1.15) !important; } -/* Bouton Redémarrer (Restart) orange ambre */ +/* Bouton Redémarrer (Restart) ambre */ +button[class*="restart"], button:has(svg[data-icon="redo"]), -button:has(svg[data-icon="rotate-right"]), -button[class*="restart"] { - background: #f59e0b !important; +button:has(svg[data-icon="rotate-right"]) { + background: var(--accent-amber) !important; color: #000000 !important; border: none !important; - font-weight: 700 !important; +} +button[class*="restart"]:hover { + box-shadow: 0 0 20px rgba(245, 158, 11, 0.4) !important; + filter: brightness(1.15) !important; } /* Bouton Arrêter (Stop) rouge néon */ -button:has(svg[data-icon="stop"]), -button[class*="stop"], -button[class*="red"] { - background: #f43f5e !important; +button[class*="red"], +button:has(svg[data-icon="stop"]) { + background: var(--accent-rose) !important; color: #ffffff !important; border: none !important; - font-weight: 700 !important; +} +button[class*="red"]:hover { + box-shadow: 0 0 20px rgba(244, 63, 94, 0.4) !important; + filter: brightness(1.15) !important; +} + +/* 6. GESTIONNAIRE DE FICHIERS (FILE MANAGER) */ +[class*="FileManager__"] { + border-radius: 16px !important; + overflow: hidden !important; + border: 1px solid var(--border-forgium) !important; } -/* 6. GESTIONNAIRE DE FICHIERS ET MONACO EDITOR */ -[class*="FileManager__"], [class*="FileRow__"] { background: rgba(10, 16, 31, 0.6) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; + transition: background 0.2s ease !important; } + [class*="FileRow__"]:hover { background: rgba(56, 189, 248, 0.08) !important; } -/* 7. SUPPRESSION STRICTE DES FILIGRANES ET MENTIONS PTERODACTYL */ -[class*="Footer__"], -footer p:has(a[href*="pterodactyl.io"]) { +/* 7. EXTENSION HEADER : BANDEAU FORGIUM HARDWARE */ +#app::before { + content: 'CLUSTER FORGIUM CLOUD • AMD RYZEN 7 3700X DEDICATED • 8 GBPS FIBRE • 100% INDÉPENDANT'; + display: block; + background: linear-gradient(90deg, #0b152d, #062347, #0b152d); + border-bottom: 1px solid var(--border-forgium); + text-align: center; + padding: 0.35rem 0; + font-size: 0.72rem; + font-family: 'JetBrains Mono', monospace; + font-weight: 700; + color: var(--accent-cyan); + letter-spacing: 1px; +} + +/* 8. MASQUAGE TOTAL DU FOOTER PTERODACTYL ET INJECTION FOOTER FORGIUM */ +footer, +p:has(a[href*="pterodactyl.io"]) { display: none !important; } -/* Footer Forgium Signature */ body::after { - content: "Forgium Cloud • Infrastructure Dédiée Haute Performance • AMD Ryzen 7 3700X"; + content: "© 2026 Forgium Cloud • Infrastructure Matérielle Dédiée & Souveraine"; display: block; text-align: center; - padding: 1.5rem 0; - font-size: 0.75rem; + padding: 1.8rem 0; + font-size: 0.8rem; color: var(--text-secondary); font-family: 'JetBrains Mono', monospace; border-top: 1px solid rgba(255, 255, 255, 0.04); background: #020409; + margin-top: 3rem; } -/* 8. BARRE DE DÉFILEMENT PERSONNALISÉE (SCROLLBAR) */ +/* 9. SCROLLBAR CYBER */ ::-webkit-scrollbar { width: 6px; height: 6px;