@charset "utf-8"; /* * * ██████╗ ██╗ ██████╗ ██╗ * ██╔══██╗ ██ ███╗ ███╗ ████╗ ██████╗ █████╗ █████╗ ██████╗ ██╔═╝ ██║ ██║ * █████╔═╝ ██║ ║█║ ██║ ██║ ██╔══╝ ██╔══██╗ ██╔══██╗ ██╔══╗█╗ ██╔═╝ ██║ ██║ ██║ * ██╔══╝ ██║ ╚═╝ ██║ ██║ ████╗ █████╔═╝ █████╔═╝ ██║ ╚═╝ ██║ ██║ ████████║ * ██║ ██║ ██║ █║ ██╗ ██╔══╝ ██╔══╝ ██║ ██║ ██║ ██║ ██║ * ██║ ██║ ████║ ████╔╝ ██║ ██████╗ █████╗ ███╗ ██████╗ ██║ ██║ * ╚═╝ ╚═╝ ╚═══╝ ╚═══╝ ╚═╝ ╚═════╝ ╚════╝ ╚══╝ ╚═════╝ ╚═╝ ╚═╝ * * --- CSS : Feuilles de style en cascade | Jean-Bernard MARTINEZ & Ayoub BENDIB - ProspectIA.eu © 2025 - SentientTech.com * --- Fichier : initial_dark.css | Thème : Thème sombre Initial * */ /*** ***/ /* *************************************************************************************************** 0 - RESET : RÉINITIALISER ==> [ Etablir les styles standards ] ****************************************************************************************************** */ :root { /* --- pseudo-classe, cible le document comme mais sa spécificité sera plus forte */ /* -------------------------------------- * VARIABLES * -------------------------------------- */ /*-- Couleurs --*/ --color-background: #000000; --color-background-alt: #07033d; --color-text: #867ff3; --color-text-secondary: #e8eaff; --color-accent: #9900ff; --color-accent-hover: #ba6ec4; --color-border: #090a4c; --color-surface: #0f0a4f; --color-boutons : #5199f6; } .cosens { text-align: center; color: rgba(255,255,255,0.5); font-size: 0.8em; margin-top: 1rem; } body { /* --- Désigner le contenue de la page html */ font-family: 'Roboto', sans-serif; /*-- Police google font --*/ background-color: var(--color-background); /*-- Couleur de fond de base --*/ color: var(--color-text); /*-- Couleur de texte de base --*/ } .bi-moon-fill::before { transform: translateY(0.05rem); } main { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 65px; /*-- Pour éviter que le contenu soit caché derrière la navbar --*/ min-height: calc(100vh - 25vh); /*-- Hauteur minimale pour le contenu principal --*/ } #profil { position: relative; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: start; margin-top: 47px; } #profil .group-dashboard { position: relative; display: block; margin-right: 0.5rem; } #user-simulations-section { margin-bottom: 1.5rem; } .dsp-none { display: none; } .dsp-phone { display: none; } .dsp-desktop { display: inline-block;; } .text-info { position: relative; width: 25%; margin: 0 auto; font-size: 12px; color: var(--color-text-secondary) !important; } .text-info p:nth-child(1) { text-align: justify; } .text-info p:nth-child(2) { text-align: center; } .form-connect, #form-creat, #form-change, #form-change-pass, #form-mail-pass { position: relative; display: block; width: 350px; margin: 3rem auto; text-align: center; } .form-connect > div, #form-creat > div, #form-change > div, #form-change-pass > div, #form-mail-pass > div { border: 1px solid var(--color-text); border-radius: 10px; padding: 1rem; padding-bottom: 0; margin-bottom: 1rem; } #form-creat > div p, #form-change > div p, #form-change-pass > div p, #form-mail-pass > div p { display: block; width: 100%; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; } .form-connect p i, #form-creat p i, #form-change p i, #form-change-pass p i, #form-mail-pass p i { width: 100%; font-size: 12px; } #avatar-block { position: relative; display: flex; flex-direction: row; justify-content: space-between; } #avatar-block svg { position: absolute; display: block; top: 0; right: 0; width: 30px; transform: translateX(0.25rem); opacity: 0.5; } .lign-name { display: inline-block; width: 100%; text-align: center; font-size: 25px; } .lign-company { display: inline-block; width: 100%; text-align: center; color: rgba(255,255,255,0.5); } #block-perso-change { position: relative; display: inline-block; transform: translateY(2rem); } #block-avatar-change { position: relative; display: inline-block; border-radius: 50%; background-color: var(--color-text); border: 2px solid var(--color-text); transform: translateY(2rem); } #img-avatar-change { width: 150px; height: auto; filter: grayscale(80%); border-radius: 50%; } #i-avatar-change { font-size: 100px; transform: translateY(2rem) !important; } #block-avatar-profil { position: relative; display: inline-block; border-radius: 50%; background-color: var(--color-text); border: 2px solid var(--color-text); } .copy { text-align: center; color: var(--color-text-secondary); font-size: 0.9em; margin: 20px 0; } /** * frametrade-map **/ #frametrade-map, #framejob-map { margin-top: 1rem; width: calc(100% - 2rem); height: calc(88vh - 4rem); } /** * Prompt wing **/ #prompt_wing { position: absolute; z-index: 1200; bottom: 0; left: 0; width: 320px; height: 100vh; border: 2px solid var(--color-text); border-radius: 10px; background-color: rgba(255,255,255,0.75); box-shadow: 0 0 5px rgba(255,255,255,0.75); transform: translateX(-320px); transition: transform 0.5s ease-in-out; } .wing_close { position: absolute; z-index: 1300; display: flex; justify-content: center; align-items: center; top: 1rem; right: 1rem; font-size: 22px; width: 2rem; height: 2rem; border-radius: 50%; background-color: var(--color-text); color: rgba(255,255,255,0.75); cursor: pointer; } #toggle_wing { display: none; } #toggle_wing:checked ~ #prompt_wing { transform: translateX(0); } #toggle_wing:checked ~ .wing_open { display: none; } .wing_open { position: absolute; z-index: 1300; display:block; top: 50vh; left: 2px; font-size: 18px; width: 2rem; height: 2rem; color: rgba(255,255,255,0.25); cursor: pointer; transition: left 0.5s ease-in-out; } #prompt_trade_form, #prompt_job_form { position: relative; display: flex; flex-direction: row; justify-content:space-between; align-items: center; margin: 5rem 1rem 1rem 1rem; } #prompt_trade_form input, #prompt_job_form input { width: calc(100% - 3rem); padding: 0.5rem; border: 1px solid var(--color-text); border-radius: 5px; background-color: var(--color-background); color: var(--color-text); } #prompt_trade_form button, #prompt_job_form button { position: relative; display: flex; flex-direction:row; justify-content: center; align-items: center; width: 2.5rem; height: 2.5rem; border: none; border-radius: 5px; background-color: var(--color-accent); color: var(--color-text); cursor: pointer; transition: background-color 0.3s ease; } #prompt_results ul, #prompt_results ol { position: relative; display: block; margin: 0; padding: 0.5rem; list-style: none; max-height: calc(100vh - 12rem); overflow-y: auto; } #prompt_results ul li, #prompt_results ol li { position: relative; display:block; margin: 0.5rem 0; padding: 0.5rem; border: 1px solid var(--color-text); border-radius: 5px; background-color: rgba(0,0,0,0.75); cursor: pointer; transition: background-color 0.3s ease; } #prompt_results ul li a { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; text-decoration: none; color: var(--color-text-secondary)!important; } #prompt_results ul li a:hover { text-shadow: 1px 1px 2px #ba6ec4, 0 0 1em blue, 0 0 0.2em blue; } #prompt_results ul li div { width: 75%; text-align: center; font-size: 14px; font-weight: 100; } #prompt_results .prompt_icon { width: 25%; text-align: right; font-size: 30px; color: var(--color-text); text-shadow: 1px 1px 2px #ba6ec4, 0 0 1em blue, 0 0 0.2em blue; }