/* ============================================================================ AXELIA — Habillage de l'interface Agora-Project Sidebar retractable + top bar + theme clair/sombre. Ce fichier est volontairement place hors de "app/" : une mise a jour d'Agora remplace "app", "docs" et "index.php", mais pas "custom/". Apres une mise a jour, seules les 2 lignes d'inclusion dans app/Common/VueStructure.php sont a remettre. Principe : aucune vue PHP n'est reecrite. On repositionne en CSS les elements existants (#headerBar, #headerBarRight...). Sous 1200px, on ne touche a rien : le menu mobile natif d'Agora continue de fonctionner. ============================================================================ */ :root{ /* --- Marque AXELIA --- */ --ax-navy-900:#0A213D; --ax-navy-800:#122E52; --ax-navy-700:#143A6C; --ax-blue:#032A65; --ax-cyan:#00C6D6; --ax-cyan-600:#0094C4; /* --- Gabarit --- */ --ax-sb-w:250px; --ax-sb-w-min:64px; --ax-top-h:50px; /* --- Surfaces, theme clair --- */ --ax-bg:#f4f6f9; --ax-surface:#ffffff; --ax-surface-2:#eef1f6; --ax-border:#e0e5ec; --ax-text:#1e2937; --ax-text-dim:#67717f; --ax-accent:var(--ax-cyan-600); --ax-accent-soft:rgba(0,148,196,.10); --ax-shadow:0 1px 3px rgba(16,32,56,.10); } html[data-theme="dark"]{ --ax-bg:#0d1117; --ax-surface:#161b22; --ax-surface-2:#1c232c; --ax-border:#2a323d; --ax-text:#e4ebf2; --ax-text-dim:#94a1b0; --ax-accent:var(--ax-cyan); --ax-accent-soft:rgba(0,198,214,.12); --ax-shadow:0 1px 3px rgba(0,0,0,.5); } /* ============================================================================ 1. THEME SOMBRE — reprend les regles de black.css en les conditionnant a l'attribut data-theme, pour un basculement cote client sans rechargement. white.css reste la base : ces selecteurs sont plus specifiques donc gagnent. ============================================================================ */ html[data-theme="dark"] body, html[data-theme="dark"] a, html[data-theme="dark"] .link {color:var(--ax-text);} html[data-theme="dark"] #htmlLightbox, html[data-theme="dark"] .objContent, html[data-theme="dark"] .miscContent, html[data-theme="dark"] .menuContext, html[data-theme="dark"] #menuMobileMain {background:var(--ax-surface);} html[data-theme="dark"] body {background:var(--ax-bg);} html[data-theme="dark"] .objLines .objContent {border-bottom:solid 1px var(--ax-border);} html[data-theme="dark"] .menuContext, html[data-theme="dark"] .tox-tinymce {border:solid 1px var(--ax-border)!important;} html[data-theme="dark"] .objLines .objContent:hover, html[data-theme="dark"] .menuContext .menuLine:hover, html[data-theme="dark"] .lineHover:hover, html[data-theme="dark"] .lineSelect {background:var(--ax-surface-2);} html[data-theme="dark"] .objContentSelected, html[data-theme="dark"] #objSelectMenu {background:#26303c!important;} html[data-theme="dark"] .tippy-box {background:var(--ax-surface)!important; color:var(--ax-text)!important; box-shadow:0 4px 16px rgba(0,0,0,.6)!important;} html[data-theme="dark"] a:hover, html[data-theme="dark"] .link:hover, html[data-theme="dark"] .linkSelect, html[data-theme="dark"] .menuContextLaunch:hover, html[data-theme="dark"] [onclick]:hover, html[data-theme="dark"] button:hover, html[data-theme="dark"] label:hover, html[data-theme="dark"] input:checked+label, html[data-theme="dark"] .optionSelect {color:var(--ax-cyan);} html[data-theme="dark"] .accessRead {color:#9ccaff;} html[data-theme="dark"] .accessWrite {color:#f8a8a8;} html[data-theme="dark"] .optionSelect, html[data-theme="dark"] .option:hover {border:solid 1px var(--ax-border);} html[data-theme="dark"] .optionSelect {background:var(--ax-surface-2);} html[data-theme="dark"] input:not([type=radio],[type=checkbox]), html[data-theme="dark"] textarea, html[data-theme="dark"] select, html[data-theme="dark"] button {background:var(--ax-surface-2); border:1px solid var(--ax-border); color:var(--ax-text);} html[data-theme="dark"] input:hover, html[data-theme="dark"] textarea:hover, html[data-theme="dark"] select:hover {box-shadow:0 0 4px rgba(0,0,0,.5);} html[data-theme="dark"] input:focus, html[data-theme="dark"] textarea:focus, html[data-theme="dark"] select:focus {box-shadow:0 0 0 2px var(--ax-accent-soft); border-color:var(--ax-cyan);} html[data-theme="dark"] button {background:var(--ax-surface-2);} html[data-theme="dark"] button:hover:not(.f-button) {background:#232c37;} html[data-theme="dark"] .tox-edit-area__iframe {background:var(--ax-surface-2)!important;} html[data-theme="dark"] .objMenuTab, html[data-theme="dark"] .objMenuMain, html[data-theme="dark"] fieldset {background:var(--ax-surface-2); border:solid 1px var(--ax-border);} html[data-theme="dark"] .objMenuTab {background:transparent;} html[data-theme="dark"] .objMenuTab:hover, html[data-theme="dark"] .objMenuTabSelect {background:var(--ax-surface-2);} html[data-theme="dark"] .objMenuTab:not(.objMenuTabSelect) {border-color:var(--ax-border);} html[data-theme="dark"] hr {background:linear-gradient(90deg,var(--ax-border),#3a4553,var(--ax-border));} html[data-theme="dark"] .lightboxTitle {border-bottom:solid 1px var(--ax-border);} html[data-theme="dark"] .jconfirm-box {background:var(--ax-surface)!important; box-shadow:0 8px 24px rgba(0,0,0,.6)!important;} html[data-theme="dark"] ::-webkit-scrollbar {background:var(--ax-surface);} html[data-theme="dark"] ::-webkit-scrollbar-thumb {background:#3d4855;} /* Le fond d'ecran clair d'Agora est neutralise en sombre pour rester sobre */ html[data-theme="dark"] {background:var(--ax-bg)!important;} /* ============================================================================ 2. SOBRIETE GENERALE — on retire les degrades et ombres marquees d'Agora ============================================================================ */ #htmlMainPage body, #htmlLightbox body {color:var(--ax-text);} #htmlMainPage {background:var(--ax-bg)!important;} #headerBar, .objContent, .miscContent, .menuContext, #messengerMain, .tox-tinymce, .ui-datepicker {box-shadow:var(--ax-shadow)!important;} .menuContext {border:1px solid var(--ax-border)!important;} button {background:var(--ax-surface)!important; border:1px solid var(--ax-border)!important; border-radius:8px;} button:hover:not(.f-button) {background:var(--ax-surface-2)!important; border-color:var(--ax-accent)!important;} input:not([type=radio],[type=checkbox]), textarea, select {border-radius:8px;} input:focus, textarea:focus, select:focus {box-shadow:0 0 0 3px var(--ax-accent-soft)!important; border-color:var(--ax-accent)!important;} /* ============================================================================ 3. DESKTOP (>=1200px) : SIDEBAR RETRACTABLE + TOP BAR Sous ce seuil, aucune de ces regles ne s'applique : le comportement mobile natif d'Agora est preserve tel quel. ============================================================================ */ @media screen and (min-width:1200px){ /* --- Top bar --- */ #htmlMainPage #headerBarContainer {padding-left:var(--ax-sb-w); transition:padding-left .18s ease;} #htmlMainPage #headerBar {background:var(--ax-surface)!important; height:var(--ax-top-h); border-bottom:1px solid var(--ax-border); box-shadow:none!important;} #htmlMainPage #headerMainLogo {display:none;} /* le logo vit dans l'entete de la sidebar */ #htmlMainPage #headerBarLeft {padding-inline:18px 20px;} #htmlMainPage #headerSpaceLabel {font-weight:600; letter-spacing:.2px;} #htmlMainPage #headerUserLabel {color:var(--ax-text-dim);} /* --- Entete de la sidebar : logo AXELIA + bouton de repli --- */ #axSbHead {position:fixed; top:0; left:0; z-index:102; width:var(--ax-sb-w); height:var(--ax-top-h); display:flex; align-items:center; gap:8px; padding:0 10px 0 14px; background:var(--ax-surface); border-bottom:1px solid var(--ax-border); border-right:1px solid var(--ax-border); transition:width .18s ease;} #axSbHead .axLogo, #axSbHead .axLogoInv {height:26px; width:auto; flex:0 0 auto; object-fit:contain;} #axSbHead .axLogoInv {display:none;} /* variante claire, pour le theme sombre */ html[data-theme="dark"] #axSbHead .axLogo {display:none;} html[data-theme="dark"] #axSbHead .axLogoInv {display:block;} #axSbHead .axLogoMark {height:28px; width:28px; flex:0 0 auto; display:none; border-radius:6px;} #axSbHead .axSpacer {flex:1 1 auto;} /* --- La sidebar : c'est la liste des modules d'Agora, repositionnee --- */ #htmlMainPage #headerBarRight {position:fixed; top:var(--ax-top-h); left:0; bottom:0; z-index:101; width:var(--ax-sb-w); padding:12px 10px 24px; background:var(--ax-surface); border-right:1px solid var(--ax-border); overflow-x:hidden; overflow-y:auto; text-align:left!important; transition:width .18s ease;} #htmlMainPage #headerBarRight .vHeaderModule {display:flex!important; align-items:center; gap:12px; width:100%; margin:2px 0; padding:9px 12px; border:1px solid transparent!important; border-radius:8px; background:transparent!important; text-align:left; color:var(--ax-text);} #htmlMainPage #headerBarRight .vHeaderModule:hover {background:var(--ax-surface-2)!important; color:var(--ax-accent);} #htmlMainPage #headerBarRight .vHeaderModule img {flex:0 0 22px; width:22px; height:22px; object-fit:contain;} #htmlMainPage #headerBarRight .vHeaderModule label {display:inline-block!important; margin:0; min-width:0; flex:1 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; font-size:.94rem;} #htmlMainPage #headerBarRight .vHeaderModuleCurrent {background:var(--ax-accent-soft)!important; color:var(--ax-accent); font-weight:600; box-shadow:inset 3px 0 0 var(--ax-cyan);} /* --- Decalage du contenu --- */ #htmlMainPage body#bodyMainPage {padding-left:var(--ax-sb-w); transition:padding-left .18s ease;} #htmlMainPage #pageFooterHtml, #htmlMainPage #pageFooterIcon {margin-left:var(--ax-sb-w);} /* --- Etat replie --- */ #htmlMainPage.axSbCollapsed {--ax-sb-w:var(--ax-sb-w-min);} #htmlMainPage.axSbCollapsed #headerBarRight .vHeaderModule {justify-content:center; padding-inline:0;} #htmlMainPage.axSbCollapsed #headerBarRight .vHeaderModule label {display:none!important;} #htmlMainPage.axSbCollapsed #axSbHead {padding-inline:0; justify-content:center;} #htmlMainPage.axSbCollapsed #axSbHead .axLogo, #htmlMainPage.axSbCollapsed #axSbHead .axLogoInv {display:none!important;} #htmlMainPage.axSbCollapsed #axSbHead .axLogoMark {display:block;} #htmlMainPage.axSbCollapsed #axSbHead .axSpacer, #htmlMainPage.axSbCollapsed #axSbToggle {display:none;} /* En replie, le bouton de depli est rendu par l'entete elle-meme */ #htmlMainPage.axSbCollapsed #axSbHead {cursor:pointer;} } /* Sous 1200px : pas de sidebar. On masque l'entete injectee et on rend au menu mobile d'Agora l'alignement a droite que lui prend #axTopActions. */ @media screen and (max-width:1199px){ #axSbHead {display:none;} #headerBar>div:nth-last-child(2) {text-align:right;} #axTopActions {padding-right:10px;} } /* ============================================================================ 4. BOUTONS INJECTES (repli, theme) ============================================================================ */ .axBtn {display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; flex:0 0 32px; border:1px solid var(--ax-border); border-radius:8px; background:var(--ax-surface); color:var(--ax-text-dim); cursor:pointer; padding:0; line-height:0; transition:background .15s ease, color .15s ease, border-color .15s ease;} .axBtn:hover {background:var(--ax-surface-2); color:var(--ax-accent); border-color:var(--ax-accent);} .axBtn svg {width:17px; height:17px; display:block;} .axBtn svg * {stroke:currentColor;} /* ---------------------------------------------------------------------------- Rattrapages du theme sombre. Agora choisit son skin cote serveur et ecrit la couleur en dur dans les vues (ex. ModFile/VueIndex.php : "background-color:", ou le NOM du skin sert litteralement de couleur CSS). Un theme cote client ne peut donc pas l'emporter sans ces surcharges ciblees. ---------------------------------------------------------------------------- */ html[data-theme="dark"] .objBlocks .objLabel {background-color:var(--ax-surface);} html[data-theme="dark"] .vMonthDayCell {background:var(--ax-surface)!important; border-color:var(--ax-border)!important; color:var(--ax-text)!important;} /* Barre de progression : son degrade est genere en style INLINE par Tool::progressBar() (vert = taux de remplissage). Inutile d'essayer de le remplacer, on garderait une jauge sans information. On garde la piste claire et on remet un texte sombre, lisible dessus. */ html[data-theme="dark"] .progressBar {color:#1e2937; border-color:#b8c0cc;} html[data-theme="dark"] .ui-datepicker .ui-state-highlight {background:var(--ax-surface-2); color:var(--ax-text);} html[data-theme="dark"] .ui-datepicker {background:var(--ax-surface); border-color:var(--ax-border);} /* ============================================================================ 3 bis. ICONES — jeu monochrome AXELIA (#5A6674), genere dans app/img/. En theme sombre ce gris-bleu manque de contraste : on l'eclaircit. Les logos de marque sont exclus, leur colorimetrie ne doit pas bouger. ============================================================================ */ html[data-theme="dark"] img[src^="app/img/"]:not([src*="logo"]):not([src*="favicon"]), html[data-theme="dark"] img[src^="/app/img/"]:not([src*="logo"]):not([src*="favicon"]) {filter:brightness(1.9);} /* Logo de pied de page : Agora l'affiche a sa taille native (200x80), ce qui empiete sur le contenu. On le ramene a une taille de signature. */ #pageFooterIcon {bottom:10px; right:14px;} #pageFooterIcon img {max-height:30px; width:auto; opacity:.85;} #pageFooterIcon img:hover {opacity:1;} /* Logo de la page de connexion */ .miscContent img[src*="logoConnect"], .miscContent img[src*="axelia-wordmark"] {max-width:320px; height:auto;} #axTopActions {white-space:nowrap; padding-right:16px;} #axTopActions .axBtn {margin-left:8px;} /* Icone soleil en clair, lune en sombre */ #axThemeToggle .axIconDark {display:none;} html[data-theme="dark"] #axThemeToggle .axIconLight {display:none;} html[data-theme="dark"] #axThemeToggle .axIconDark {display:block;}