/* =========================================================== Style UNIQUE des panneaux annexes (référence) Fichier: static/css/style_css_panneaux_annexe.css Objectif: uniformiser l'apparence SANS toucher au JS. =========================================================== */ :root{ --ia-panels-passive-bg: #f2f2f2; --ia-panels-passive-fg: #111111; --ia-panels-active-bg: var(--ia-taskbar-btn-active-bg, #d9d9d9); --ia-panels-active-fg: var(--ia-taskbar-btn-active-fg, #111111); /* ✅ cadre panneau (passif) */ --pm-frame: var(--ia-panels-passive-bg); /* ✅ cadre panneau (actif) */ --pm-frame-active: var(--ia-panels-active-bg); /* ✅ texte header */ --pm-text: var(--ia-panels-passive-fg); --pm-text-active: var(--ia-panels-active-fg); /* ✅ bordures/boutons UI neutres (ne suivent pas fuchsia/vert) */ --pm-ui-border: rgba(0,0,0,0.15); --pm-btn-bg: #fff; --pm-btn-bg-hover: #f3f3f3; --pm-btn-radius: 8px; --pm-pad-x: 10px; /* ✅ corps des pancartes (fond + texte) */ --ia-panels-body-bg: #ffffff; --ia-panels-body-fg: #111111; /* ✅ Boutons dans les pancartes (fond + texte) */ --ia-panels-btn-bg: #ffffff; --ia-panels-btn-fg: #111111; /* ✅ Boutons pancartes : survol */ --ia-panels-btn-hover-bg: #f3f3f3; --ia-panels-btn-hover-fg: var(--ia-panels-btn-fg); /* ✅ Boutons pancartes : actif */ --ia-panels-btn-active-bg: #e6e6e6; --ia-panels-btn-active-fg: var(--ia-panels-btn-fg); /* On relie les variables “pm” aux nouvelles variables “ia” */ --pm-btn-bg: var(--ia-panels-btn-bg, #fff); --pm-btn-bg-hover: var(--ia-panels-btn-hover-bg, color-mix(in srgb, var(--ia-panels-btn-bg) 88%, #000 12%)); /* ❌ Les boutons "X" ne doivent PAS suivre --ia-panels-btn-* */ --pm-close-bg: #ffffff; --pm-close-bg-hover: #f3f3f3; --pm-close-fg: #111111; --pm-close-fg-hover: var(--pm-close-fg); /* ✅ Scroll pancartes : fond + barre (+ flèches si supportées) */ --ia-panels-scroll-track: #f2f2f2; --ia-panels-scroll-thumb: #bdbdbd; --ia-panels-scroll-arrow: var(--ia-panels-scroll-thumb); /* Typographie unifiee des pancartes */ --ia-typo-h2-size: 13px; --ia-typo-h2-weight: 800; --ia-typo-h3-size: 13px; --ia-typo-h3-weight: 700; --ia-typo-text-size: 12px; --ia-typo-text-weight: 400; --ia-typo-line: 1.25; --pm-header-btns-reserve: 44px; } /* =========================== Hierarchie H2 / H3 / texte =========================== */ #appearanceBody, #appearanceBody *, #brokerBody, #brokerBody *, #timeframeBody, #timeframeBody *, #tradingAccountBody, #tradingAccountBody *, #ecosystemStateBody, #ecosystemStateBody *{ font-size: var(--ia-typo-text-size); line-height: var(--ia-typo-line); } /* H2 = titres de sections principales de contenu */ #appearanceBody .iaPanelSectionTitle, #brokerBody .iaPanelSectionTitle, #timeframeBody .iaPanelSectionTitle, #tradingAccountBody .iaPanelSectionTitle, #ecosystemStateBody .iaPanelSectionTitle, #rsiPanel .smaFrameTitle, #smaPanel .smaFrameTitle, #bollingerPanel .smaFrameTitle, #legendPanel .iaLegendFrameTitle{ font-size: var(--ia-typo-h2-size) !important; font-weight: var(--ia-typo-h2-weight) !important; line-height: var(--ia-typo-line) !important; color: var(--ia-panels-body-fg) !important; } /* H3 = sous-sections */ #appearanceBody .iaPanelSubTitle, #brokerBody .iaPanelSubTitle, #timeframeBody .iaPanelSubTitle, #tradingAccountBody .iaPanelSubTitle, #ecosystemStateBody .iaPanelSubTitle, #rsiPanel .rsiOptGroupTitle, #rsiPanel .rsiRowTitle, #bollingerPanel .bbSectionTitle, #bollingerPanel .bbRowTitle, #smaPanel .smaRowTitle{ font-size: var(--ia-typo-h3-size) !important; font-weight: var(--ia-typo-h3-weight) !important; line-height: var(--ia-typo-line) !important; color: color-mix(in srgb, var(--ia-panels-body-fg) 94%, #000 6%) !important; } #appearanceBody .iaPanelSubTitle, #brokerBody .iaPanelSubTitle, #timeframeBody .iaPanelSubTitle, #tradingAccountBody .iaPanelSubTitle, #ecosystemStateBody .iaPanelSubTitle{ margin: 10px 0 6px; padding-left: 14px; } #appearanceBody .iaPanelSubTitle.iaPanelSubTitleMuted, #brokerBody .iaPanelSubTitle.iaPanelSubTitleMuted, #timeframeBody .iaPanelSubTitle.iaPanelSubTitleMuted, #tradingAccountBody .iaPanelSubTitle.iaPanelSubTitleMuted, #ecosystemStateBody .iaPanelSubTitle.iaPanelSubTitleMuted{ color: color-mix(in srgb, var(--ia-panels-body-fg) 72%, #777 28%) !important; } #appearanceBody .iaPanelSubTitleHint, #brokerBody .iaPanelSubTitleHint, #timeframeBody .iaPanelSubTitleHint, #tradingAccountBody .iaPanelSubTitleHint, #ecosystemStateBody .iaPanelSubTitleHint{ font-size: 11px; color: #777; } /* Texte standard des lignes */ #legendPanel .iaLegendLabel, #rsiPanel .smaOptLabel, #smaPanel .smaOptLabel, #bollingerPanel .smaOptLabel, #rsiPanel .rsiLabelColorTitle, #smaPanel .smaLabelsLabel, #bollingerPanel .bbFillLabel, #rsiPanel .rsiFillLabel, #rsiPanel .rsiLabelColorBox, #rsiPanel .rsiLabelColorBox span, #bollingerPanel .bbFillLabel span, #rsiPanel .rsiFillLabel span{ font-size: var(--ia-typo-text-size) !important; font-weight: var(--ia-typo-text-weight) !important; line-height: var(--ia-typo-line) !important; } /* =========================== 1) Cadre des panneaux =========================== */ #legendPanel, #infoPanel, :is(#calendarPanel,#earningsPanel), #appearancePanel, #workspacePanel, #smaPanel, #bollingerPanel{ background:#fff; border-left:1px solid var(--pm-frame); border-top:1px solid var(--pm-frame); border-bottom:1px solid var(--pm-frame); box-shadow:-8px 0 24px rgba(0,0,0,0.08); overflow:hidden; } /* ✅ Le cadre reste toujours neutre */ #legendPanel, #infoPanel, :is(#calendarPanel,#earningsPanel), #appearancePanel, #workspacePanel, #smaPanel, #bollingerPanel{ border-left: 1px solid var(--pm-ui-border) !important; border-top: 1px solid var(--pm-ui-border) !important; border-bottom:1px solid var(--pm-ui-border) !important; } /* =========================== 2) Bandeau header uniforme =========================== */ #legendPanel .panelHeader, #infoPanel .panelHeader, :is(#calendarPanel,#earningsPanel) .panelHeader, #appearancePanel .panelHeader, #workspacePanel .panelHeader, #smaPanel .panelHeader, #bollingerPanel .panelHeader{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px var(--pm-pad-x) !important; background: var(--pm-frame) !important; border-bottom:1px solid var(--pm-frame) !important; color: var(--pm-text) !important; } /* ✅ ACTIF MÉTIER (lié au chart actif) : UNIQUEMENT infoPanel + legendPanel via JS */ /* ✅ LinkedActive = BANDEAU seulement (pas le cadre) */ #infoPanel.pmLinkedActive .panelHeader, #legendPanel.pmLinkedActive .panelHeader, #smaPanel.pmLinkedActive .panelHeader, #bollingerPanel.pmLinkedActive .panelHeader{ background: var(--ia-active-accent-bg) !important; color: var(--ia-active-accent-fg) !important; /* bordure du bandeau neutre */ border-bottom: 1px solid var(--pm-ui-border) !important; } /* ✅ Focus UI des pancartes non liees au chart */ .pmPanelActive:not(.pmLinkedActive) .panelHeader{ background: var(--ia-panels-active-bg) !important; border-bottom:1px solid var(--pm-ui-border) !important; color: var(--ia-panels-active-fg) !important; } /* ✅ Etat "actif" (ON NE CHANGE PAS le fonctionnement) On se base sur TES classes body déjà utilisées par ton code. (legend-open / settings-open / info-open / calendar-open) */ /*body.legend-open #legendPanel .panelHeader{ background: var(--pm-header-bg-active) !important; color: var(--pm-text-active) !important; } body.settings-open #settingsPanel .panelHeader{ background: var(--pm-header-bg-active) !important; color: var(--pm-text-active) !important; } body.info-open #infoPanel .panelHeader{ background: var(--pm-header-bg-active) !important; color: var(--pm-text-active) !important; } body.calendar-open :is(#calendarPanel,#earningsPanel) .panelHeader{ background: var(--pm-header-bg-active) !important; color: var(--pm-text-active) !important; } body.appearance-open #appearancePanel .panelHeader { background: var(--pm-header-bg-active) !important; color: var(--pm-text-active) !important; }*/ /* =========================== 3) Titre + sous-titre sur UNE ligne =========================== */ #legendPanel .legendHeaderLine, #infoPanel .legendHeaderLine, :is(#calendarPanel,#earningsPanel) .legendHeaderLine, #appearancePanel .legendHeaderLine, #workspacePanel .legendHeaderLine, #smaPanel .legendHeaderLine, #bollingerPanel .legendHeaderLine{ display:flex; flex-direction:row; align-items:baseline; gap:6px; white-space:nowrap; min-width:0; } /* Titre principal (même police/taille/graisse) */ #legendPanel #legendPanelTitle, #infoPanel #infoPanelTitle, :is(#calendarPanel,#earningsPanel) :is(#calendarPanelTitle,#earningsPanelTitle), #appearancePanel #appearancePanelTitle, #workspacePanel #workspacePanelTitle, #smaPanel #smaPanelTitle, #bollingerPanel #bollingerPanelTitle{ display:inline; font-weight:800; font-size:13px; color:var(--pm-text); line-height:1.2; } /* Partie variable (chart4 • ^GSPC • 1d / semaine prochaine / etc.) */ #legendPanel #legendTitle, #infoPanel #infoTitle, :is(#calendarPanel,#earningsPanel) :is(#calendarTitle,#earningsTitle), #appearancePanel #appearanceTitle, #workspacePanel #workspaceTitle, #smaPanel #smaTitle, #bollingerPanel #bollingerTitle{ display:inline; font-weight:500; font-size:12px; color:var(--pm-muted); line-height:1.2; overflow:hidden; text-overflow:ellipsis; min-width:0; } /* =========================== 4) Croix fermeture plus petite (même partout) =========================== */ #legendClose, #settingsClose, #infoClose, :is(#calendarClose,#earningsClose), #appearanceClose, #workspaceClose, #smaClose, #bollingerClose{ width:26px !important; height:26px !important; padding:0 !important; border-radius:0 !important; border:1px solid var(--pm-ui-border) !important; background: var(--pm-close-bg) !important; color: var(--pm-close-fg) !important; cursor:pointer; font-size:16px !important; line-height:26px !important; display:flex !important; align-items:center !important; justify-content:center !important; } #legendClose:hover, #settingsClose:hover, #infoClose:hover, :is(#calendarClose,#earningsClose):hover, #appearanceClose:hover, #workspaceClose:hover, #smaClose:hover, #bollingerClose:hover{ background: var(--pm-close-bg-hover) !important; color: var(--pm-close-fg-hover) !important; } .pmPanel .pmHeaderBtns{ display: inline-flex !important; align-items: center !important; gap: 6px !important; } .pmPanel .pmMinBtn{ width: 24px !important; height: 24px !important; padding: 0 !important; margin: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; color: inherit !important; opacity: 1 !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; align-self: center !important; } .pmPanel .pmMinBtn svg, .pmPanel .pmMinBtn svg *{ width: 19px !important; height: 19px !important; fill: currentColor !important; stroke: none !important; opacity: 1 !important; } .pmPanel .pmMinBtn:hover{ background: transparent !important; color: inherit !important; } /* =========================== 5) Boutons : UNIFORMES (même taille, padding, radius) - Tout ON/OFF - Réglage optimal / Valider - Hier / Aujourd'hui / Semaine... - Onglets calendrier =========================== */ /* Base bouton uniforme */ .linkBtn, .debugBtn, #settingsOptimal, #settingsApplyAll, :is(#calendarPanel,#earningsPanel) .calMainTab, :is(#calendarPanel,#earningsPanel) .calSubTab, #legendAllOn, #legendAllOff, #legendApplyAll{ padding:6px 10px !important; font-size:12px !important; font-weight:700 !important; line-height: 1 !important; border-radius: var(--pm-btn-radius) !important; border:1px solid var(--pm-ui-border) !important; background: var(--pm-btn-bg) !important; color: var(--ia-panels-btn-fg, #111) !important; cursor:pointer !important; } /* Hover */ .linkBtn:hover, .debugBtn:hover, #settingsOptimal:hover, #settingsApplyAll:hover, :is(#calendarPanel,#earningsPanel) .calMainTab:hover, :is(#calendarPanel,#earningsPanel) .calSubTab:hover, #legendAllOn:hover, #legendAllOff:hover, #legendApplyAll:hover{ background: var(--pm-btn-bg-hover) !important; color: var(--ia-panels-btn-hover-fg, var(--ia-panels-btn-fg, #111)) !important; } /* Onglets actifs : gardent l'état "actif" mais suivent la commande */ :is(#calendarPanel,#earningsPanel) .calMainTab.active, :is(#calendarPanel,#earningsPanel) .calSubTab.active, button.linkBtn.calSub.active{ background: var(--ia-panels-btn-active-bg, var(--pm-btn-bg)) !important; color: var(--ia-panels-btn-active-fg, var(--ia-panels-btn-fg, #111)) !important; border-color: var(--pm-ui-border) !important; } /* Onglets de periode (style navigateur) */ :is(#calendarPanel,#earningsPanel) .calSubTabs.calRangeTabs{ display:flex !important; align-items:flex-end !important; gap:2px !important; flex-wrap:nowrap !important; overflow-x:auto !important; overflow-y:hidden !important; scrollbar-width:none !important; margin-top:6px !important; margin-bottom:0 !important; padding:6px 8px 0 !important; border:1px solid var(--ia-panels-body-border, color-mix(in srgb, var(--ia-panels-body-fg) 22%, transparent)) !important; border-bottom:0 !important; border-radius:10px 10px 0 0 !important; background:var(--ia-panels-body-bg) !important; } :is(#calendarPanel,#earningsPanel) .calSubTabs.calRangeTabs::-webkit-scrollbar{ height:0 !important; } :is(#calendarPanel,#earningsPanel) .calSubTabs.calRangeTabs .calRangeTab{ appearance:none !important; margin:0 !important; margin-bottom:-1px !important; padding:6px 10px 7px !important; font-size:11px !important; font-weight:600 !important; border-radius:7px 7px 0 0 !important; border:1px solid var(--pm-ui-border) !important; border-bottom-color:transparent !important; background:var(--pm-btn-bg) !important; color:var(--ia-panels-btn-fg, #111) !important; white-space:nowrap !important; line-height: 1 !important; flex:0 0 auto !important; } :is(#calendarPanel,#earningsPanel) .calSubTabs.calRangeTabs .calRangeTab:hover{ background:var(--pm-btn-bg-hover) !important; color:var(--ia-panels-btn-hover-fg, var(--ia-panels-btn-fg, #111)) !important; } :is(#calendarPanel,#earningsPanel) .calSubTabs.calRangeTabs .calRangeTab.active{ background:var(--ia-panels-btn-active-bg, var(--pm-btn-bg)) !important; color:var(--ia-panels-btn-active-fg, var(--ia-panels-btn-fg, #111)) !important; border-color:var(--pm-ui-border) !important; border-bottom-color:var(--ia-panels-body-bg) !important; } :is(#calendarPanel,#earningsPanel) > hr{ display:none !important; } #calendarPanel #calendarBody .calList, #earningsPanel #earningsBody .calList{ border-top:0 !important; border-top-left-radius:0 !important; border-top-right-radius:0 !important; margin-top:0 !important; } /* Tout ce qui est dans le bouton suit la couleur du texte */ .linkBtn, .linkBtn *{ color: var(--ia-panels-btn-fg, #111) !important; } /* Si la chaînette est un SVG : fill/stroke suivent currentColor */ .linkBtn svg, .linkBtn svg *{ fill: currentColor !important; stroke: currentColor !important; } /* =========================== 6) Marges/paddings identiques des zones boutons =========================== */ /* Légende : zone actions */ #legendPanel .legendActions{ margin-top:10px !important; padding: 0 var(--pm-pad-x) !important; display:flex !important; gap:8px !important; align-items:center !important; box-sizing:border-box !important; } /* ✅ LÉGENDE : la barre d’actions suit le fond du body */ #legendPanel .legendActions{ background: var(--ia-panels-body-bg) !important; color: var(--ia-panels-body-fg) !important; } /* Calendrier : padding identique des tabs */ :is(#calendarPanel,#earningsPanel) .calMainTabs, :is(#calendarPanel,#earningsPanel) .calSubTabs{ padding: 0 var(--pm-pad-x) !important; box-sizing:border-box !important; background: var(--ia-panels-body-bg) !important; color: var(--ia-panels-body-fg) !important; } /* ✅ le
n’a pas de couleur => “blanc” visuel on force une vraie séparation cohérente */ :is(#calendarPanel,#earningsPanel) hr{ border: 0 !important; height: 0 !important; border-top: 1px solid color-mix(in srgb, var(--ia-panels-body-fg) 14%, transparent) !important; background: transparent !important; } /* =========================== 7) Padding contenu (uniforme) =========================== */ #legendList, #settingsList, #infoBody, :is(#calendarBody,#earningsBody), #appearanceBody, #workspaceBody, #smaBody, #bollingerBody, #brokerBody, #timeframeBody, #tradingAccountBody{ padding: var(--pm-pad-x) !important; box-sizing:border-box !important; } /* =========================== ✅ CORPS des pancartes (fond + texte) =========================== */ /* fond + couleur de texte pour les zones scrollables */ #legendList, #settingsBody, #infoBody, :is(#calendarBody,#earningsBody), #appearanceBody, #workspaceBody, #smaBody, #bollingerBody, #brokerBody, #timeframeBody, #tradingAccountBody{ background: var(--ia-panels-body-bg) !important; color: var(--ia-panels-body-fg) !important; } /* =========================================================== ✅ CORPS pancartes : forcer l’héritage texte, sans toucher aux champs/boutons =========================================================== */ /* 1) Tous les textes “normaux” héritent la couleur du body */ #legendList :where(p, span, div, label, strong, em, b, i, small, li, td, th, h1, h2, h3, h4, h5, h6), #brokerBody :where(p, span, div, label, strong, em, b, i, small, li, td, th, h1, h2, h3, h4, h5, h6), #timeframeBody :where(p, span, div, label, strong, em, b, i, small, li, td, th, h1, h2, h3, h4, h5, h6), #tradingAccountBody :where(p, span, div, label, strong, em, b, i, small, li, td, th, h1, h2, h3, h4, h5, h6){ color: inherit; } /* 2) MAIS on exclut ce qui ne doit pas suivre (champs + boutons + liens/badges spécifiques) */ #legendList :where(input, textarea, select, option, button:not(.iaBtnModifier), a), #settingsBody :where(input, textarea, select, option, button, a), #infoBody :where(input, textarea, select, option, button, a), :is(#calendarBody,#earningsBody) :where(input, textarea, select, option, button, a), #appearanceBody :where(input, textarea, select, option, button, a), #workspaceBody :where(input, textarea, select, option, button:not(.iaBtnModifier):not(.iaBtnCorbeille):not(.iaBtnEnregistrer), a), #smaBody :where(input, textarea, select, option, button:not(.iaBtnModifier):not(.iaBtnCorbeille):not(.iaBtnEnregistrer), a), #bollingerBody :where(input, textarea, select, option, button:not(.iaBtnModifier):not(.iaBtnCorbeille):not(.iaBtnEnregistrer), a), #brokerBody :where(input, textarea, select, option, button, a), #timeframeBody :where(input, textarea, select, option, button, a), #tradingAccountBody :where(input, textarea, select, option, button, a){ color: initial; /* on laisse les CSS existants gérer */ } /* 3) Tous les sous-blocs internes doivent laisser passer le fond (sinon #fff écrase tout) -> on cible les conteneurs classiques, sans casser les inputs/buttons */ #legendList :where(section, article, header, footer, main, aside, fieldset, table, thead, tbody, tfoot, tr, td, th, ul, ol, li, hr), #settingsBody :where(section, article, header, footer, main, aside, fieldset, table, thead, tbody, tfoot, tr, td, th, ul, ol, li, hr), #infoBody :where(section, article, header, footer, main, aside, fieldset, table, thead, tbody, tfoot, tr, td, th, ul, ol, li, hr), :is(#calendarBody,#earningsBody) :where(section, article, header, footer, main, aside, fieldset, table, thead, tbody, tfoot, tr, td, th, ul, ol, li, hr), #appearanceBody :where(section, article, header, footer, main, aside, fieldset, table, thead, tbody, tfoot, tr, td, th, ul, ol, li, hr), #brokerBody :where(section, article, header, footer, main, aside, fieldset, table, thead, tbody, tfoot, tr, td, th, ul, ol, li, hr), #timeframeBody :where(section, article, header, footer, main, aside, fieldset, table, thead, tbody, tfoot, tr, td, th, ul, ol, li, hr), #tradingAccountBody :where(section, article, header, footer, main, aside, fieldset, table, thead, tbody, tfoot, tr, td, th, ul, ol, li, hr), #appearanceBody :where(section, article, header, footer, main, aside, fieldset, table, thead, tbody, tfoot, tr, td, th, ul, ol, li, hr) :where(section, article, header, footer, main, aside, fieldset, table, thead, tbody, tfoot, tr, td, th, ul, ol, li, hr){ background: transparent !important; } /* textes “muted” internes : un peu plus doux mais cohérent */ #legendList .muted, #settingsBody .muted, #infoBody .muted, :is(#calendarBody,#earningsBody) .muted, #appearanceBody .muted, #workspaceBody .muted, #smaBody .muted, #bollingerBody .muted, #brokerBody .muted, #timeframeBody .muted, #tradingAccountBody .muted{ color: color-mix(in srgb, var(--ia-panels-body-fg) 65%, transparent) !important; } /* =========================================================== ✅ INFO + LÉGENDE : cartes internes suivent le fond du body (sans impacter boutons/champs) =========================================================== */ /* Si tes blocs internes sont des "cards" avec border + radius, on les theme */ #infoBody :where(.card, .box, .panelBox, .infoCard, .legendBox, .legendCard), #legendList :where(.card, .box, .panelBox, .infoCard, .legendBox, .legendCard){ background: color-mix(in srgb, var(--ia-panels-body-bg) 92%, #000 8%) !important; /* léger contraste */ color: var(--ia-panels-body-fg) !important; border-color: color-mix(in srgb, var(--ia-panels-body-fg) 18%, transparent) !important; } /* Sécurité : si tu n’as pas ces classes, on cible les blocs "avec radius+border" fréquemment utilisés */ #infoBody :where(div, section, article)[style*="border-radius"], #legendList :where(div, section, article)[style*="border-radius"]{ background: transparent !important; /* laisse le fond body visible */ color: inherit !important; } /* =========================================================== SCROLL : header fixe, corps scrollable =========================================================== */ /* Tous les panneaux en colonne, hauteur contrainte */ #legendPanel, #infoPanel, :is(#calendarPanel,#earningsPanel), #appearancePanel, #workspacePanel, #smaPanel, #bollingerPanel{ /* ✅ OK : on met flex, mais SANS !important => le JS peut toujours faire display:none */ display:flex; flex-direction:column; height:100vh; min-height:0; overflow:hidden; } /* Header toujours fixe */ #legendPanel .panelHeader, #infoPanel .panelHeader, :is(#calendarPanel,#earningsPanel) .panelHeader, #appearancePanel .panelHeader, #workspacePanel .panelHeader, #smaPanel .panelHeader, #bollingerPanel .panelHeader{ flex:0 0 auto !important; } /* Corps scrollable (général) */ #legendList, #infoBody, :is(#calendarBody,#earningsBody), #appearanceBody, #smaBody, #bollingerBody{ flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important; overflow-x:hidden !important; padding:10px !important; box-sizing:border-box !important; } :is(#calendarBody,#earningsBody){ padding:0 10px 10px !important; } /* =========================================================== FIX: la croix doit rester cliquable Les zones de resize (.pmEdgeResizer*) sont en z-index 30000. On met le header au-dessus. =========================================================== */ .pmPanel .pmHeader{ position: relative !important; z-index: 40000 !important; } .pmPanel .pmHeader .pmHeaderBtns, .pmPanel .pmHeader .pmBtn, .pmPanel .pmHeader .pmCloseBtn{ position: relative !important; z-index: 40001 !important; } /* Empêche les barres (actions/tabs) de s'étirer en hauteur */ #legendPanel .legendActions, :is(#calendarPanel,#earningsPanel) .calMainTabs, :is(#calendarPanel,#earningsPanel) .calSubTabs{ flex: 0 0 auto !important; } /* =========================================================== OVERRIDE TITRES HEADER : même police + même graisse partout (copie le rendu du calendrier économique) =========================================================== */ /* Ligne titre (groupe titre + sous-titre) */ #legendPanel .legendHeaderLine, #infoPanel .legendHeaderLine, :is(#calendarPanel,#earningsPanel) .legendHeaderLine, #appearancePanel .legendHeaderLine, #workspacePanel .legendHeaderLine, #smaPanel .legendHeaderLine, #bollingerPanel .legendHeaderLine{ display:flex !important; flex-direction:row !important; align-items:baseline !important; gap:6px !important; white-space:nowrap !important; min-width:0 !important; } /* ✅ TITRE PRINCIPAL : EXACTEMENT comme calendrier (font-weight 700) */ #legendPanel #legendPanelTitle, #infoPanel #infoPanelTitle, :is(#calendarPanel,#earningsPanel) :is(#calendarPanelTitle,#earningsPanelTitle), #appearancePanel #appearancePanelTitle, #workspacePanel #workspacePanelTitle, #smaPanel #smaPanelTitle, #bollingerPanel #bollingerPanelTitle{ font-weight:700 !important; font-size:13px !important; color:inherit !important; line-height:1.2 !important; margin:0 !important; padding:0 !important; display:inline !important; } /* ✅ SOUS-TITRE : EXACTEMENT comme calendrier (12px + #666) */ #legendPanel #legendTitle, #infoPanel #infoTitle, :is(#calendarPanel,#earningsPanel) :is(#calendarTitle,#earningsTitle), #appearancePanel #appearanceTitle, #workspacePanel #workspaceTitle, #smaPanel #smaTitle, #bollingerPanel #bollingerTitle{ font-weight:400 !important; font-size:12px !important; color:inherit !important; opacity:0.75 !important; line-height:1.2 !important; overflow:hidden !important; text-overflow:ellipsis !important; min-width:0 !important; margin:0 !important; padding:0 !important; display:inline !important; } /* ✅ BONUS : si un jour tu utilises au lieu de
, même rendu */ #legendPanel .legendHeaderLine > * , #infoPanel .legendHeaderLine > * , :is(#calendarPanel,#earningsPanel) .legendHeaderLine > * , #appearancePanel .legendHeaderLine > *, #workspacePanel .legendHeaderLine > *, #bollingerPanel .legendHeaderLine > * { font-family: inherit !important; } /* =========================================================== ✅ TABLEAUX dans les pancartes : fond = body, bordures = fg =========================================================== */ :root{ --ia-panels-body-border: color-mix(in srgb, var(--ia-panels-body-fg) 22%, transparent); --ia-panels-body-border-soft: color-mix(in srgb, var(--ia-panels-body-fg) 14%, transparent); } #legendList table, #infoBody table, :is(#calendarBody,#earningsBody) table, #appearanceBody table{ background: var(--ia-panels-body-bg) !important; color: var(--ia-panels-body-fg) !important; border-color: var(--ia-panels-body-border) !important; } #legendList th, #legendList td, #infoBody th, #infoBody td, :is(#calendarBody,#earningsBody) th, :is(#calendarBody,#earningsBody) td, #appearanceBody th, #appearanceBody td{ background: transparent !important; color: inherit !important; border-color: var(--ia-panels-body-border-soft) !important; } /* =========================================================== ✅ PATCH ROBUSTE : élimine les bandes blanches des panneaux - couvre wrappers PanelManager + zones entre header et body - ne touche pas boutons/inputs =========================================================== */ /* 1) Le panneau lui-même n’est jamais blanc */ #legendPanel, #infoPanel, :is(#calendarPanel,#earningsPanel), #appearancePanel, #workspacePanel, #smaPanel, #bollingerPanel{ background: var(--ia-panels-body-bg) !important; color: var(--ia-panels-body-fg) !important; } /* 2) Wrappers possibles injectés par PanelManager */ #legendPanel > .pmContent, #legendPanel > .pmBody, #legendPanel > .pmInner, #legendPanel > .pmMain, #legendPanel > .pmWrap, #infoPanel > .pmContent, #infoPanel > .pmBody, #infoPanel > .pmInner, #infoPanel > .pmMain, #infoPanel > .pmWrap, :is(#calendarPanel,#earningsPanel)> .pmContent,:is(#calendarPanel,#earningsPanel)> .pmBody,:is(#calendarPanel,#earningsPanel)> .pmInner,:is(#calendarPanel,#earningsPanel)> .pmMain,:is(#calendarPanel,#earningsPanel)> .pmWrap, #appearancePanel>.pmContent,#appearancePanel>.pmBody,#appearancePanel>.pmInner,#appearancePanel>.pmMain,#appearancePanel>.pmWrap{ background: var(--ia-panels-body-bg) !important; color: var(--ia-panels-body-fg) !important; } /* 3) Zones “entre header et contenu” */ #legendPanel .legendActions, :is(#calendarPanel,#earningsPanel) .calMainTabs, :is(#calendarPanel,#earningsPanel) .calSubTabs{ background: var(--ia-panels-body-bg) !important; color: var(--ia-panels-body-fg) !important; } /* 4) Les séparateurs
ne doivent jamais “laisser voir du blanc” */ #legendPanel hr, #infoPanel hr, :is(#calendarPanel,#earningsPanel) hr, #appearancePanel hr{ border: 0 !important; height: 0 !important; margin: 10px 0 !important; border-top: 1px solid color-mix(in srgb, var(--ia-panels-body-fg) 14%, transparent) !important; background: transparent !important; } /* =========================================================== ✅ PATCH: neutralise les couleurs inline du JS (Apparence + Réglages) =========================================================== */ /* 1) Apparence : tous les textes “inline” suivent le fg du body */ #appearanceBody [style*="color:#666"], #appearanceBody [style*="color: #666"], #appearanceBody [style*="color:#333"], #appearanceBody [style*="color: #333"], #appearanceBody [style*="color:#111"], #appearanceBody [style*="color: #111"]{ color: var(--ia-panels-body-fg) !important; opacity: 0.85; /* garde un effet “muted” */ } /* 2) Réglages : mêmes correctifs */ #settingsBody [style*="color:#666"], #settingsBody [style*="color: #666"], #settingsBody [style*="color:#333"], #settingsBody [style*="color: #333"]{ color: var(--ia-panels-body-fg) !important; opacity: 0.85; } /* 3) Si tu veux que certains petits blocs gardent un fond cohérent */ #appearanceBody [style*="background:#fff"], #appearanceBody [style*="background: #fff"], #settingsBody [style*="background:#fff"], #settingsBody [style*="background: #fff"]{ background: var(--ia-panels-body-bg) !important; } /* =========================================================== ✅ WARNING FIXE (ne suit PAS le panneau Apparence) =========================================================== */ #settingsBody .iaFixedWarning{ background: #ffffff !important; color: #b91c1c !important; /* rouge lisible */ border: 1px solid #ef4444 !important; /* bordure rouge */ border-radius: 10px; padding: 10px 12px; margin: 10px 0; font-size: 12px; font-weight: 700; line-height: 1.25; } /* si tu as des , , etc dedans */ #settingsBody .iaFixedWarning *{ color: inherit !important; } /* =========================================================== ✅ SCROLL pancartes : track + thumb (+ flèches si supportées) Ajout : calendrier éco scrolle sur .calScroll (pas sur :is(#calendarBody,#earningsBody)) =========================================================== */ /* Firefox */ #legendList, #settingsBody, #infoBody, :is(#calendarBody,#earningsBody), #appearanceBody,#workspaceBody,#smaBody,#bollingerBody, :is(#calendarBody,#earningsBody) .calScroll, /* ✅ calendrier éco */ .ecoModalBody{ /* ✅ modal (optionnel mais cohérent) */ scrollbar-width: thin; scrollbar-color: var(--ia-panels-scroll-thumb) var(--ia-panels-scroll-track); } /* Chrome / Edge / Safari */ #legendList::-webkit-scrollbar, #settingsBody::-webkit-scrollbar, #infoBody::-webkit-scrollbar, :is(#calendarBody,#earningsBody)::-webkit-scrollbar, #appearanceBody::-webkit-scrollbar, :is(#calendarBody,#earningsBody) .calScroll::-webkit-scrollbar, /* ✅ calendrier éco */ .ecoModalBody::-webkit-scrollbar{ /* ✅ modal (optionnel) */ width: 12px; /* ✅ largeur uniforme partout */ } #legendList::-webkit-scrollbar-track, #settingsBody::-webkit-scrollbar-track, #infoBody::-webkit-scrollbar-track, :is(#calendarBody,#earningsBody)::-webkit-scrollbar-track, #appearanceBody::-webkit-scrollbar-track, :is(#calendarBody,#earningsBody) .calScroll::-webkit-scrollbar-track, /* ✅ */ .ecoModalBody::-webkit-scrollbar-track{ /* ✅ */ background: var(--ia-panels-scroll-track); } #legendList::-webkit-scrollbar-thumb, #settingsBody::-webkit-scrollbar-thumb, #infoBody::-webkit-scrollbar-thumb, :is(#calendarBody,#earningsBody)::-webkit-scrollbar-thumb, #appearanceBody::-webkit-scrollbar-thumb, :is(#calendarBody,#earningsBody) .calScroll::-webkit-scrollbar-thumb, /* ✅ */ .ecoModalBody::-webkit-scrollbar-thumb{ /* ✅ */ background: var(--ia-panels-scroll-thumb); border-radius: 10px; border: 2px solid var(--ia-panels-scroll-track); } #legendList::-webkit-scrollbar-button, #settingsBody::-webkit-scrollbar-button, #infoBody::-webkit-scrollbar-button, :is(#calendarBody,#earningsBody)::-webkit-scrollbar-button, #appearanceBody::-webkit-scrollbar-button, :is(#calendarBody,#earningsBody) .calScroll::-webkit-scrollbar-button, /* ✅ */ .ecoModalBody::-webkit-scrollbar-button{ /* ✅ */ background: var(--ia-panels-scroll-arrow); } #workspaceBody::-webkit-scrollbar{ width:12px; } #workspaceBody::-webkit-scrollbar-track{ background: var(--ia-panels-scroll-track); } #workspaceBody::-webkit-scrollbar-thumb{ background: var(--ia-panels-scroll-thumb); border-radius: 10px; border: 2px solid var(--ia-panels-scroll-track); } #workspaceBody::-webkit-scrollbar-button{ background: var(--ia-panels-scroll-arrow); } #smaBody::-webkit-scrollbar{ width: 12px; } #smaBody::-webkit-scrollbar-track{ background: var(--ia-panels-scroll-track); } #smaBody::-webkit-scrollbar-thumb{ background: var(--ia-panels-scroll-thumb); border-radius: 10px; border: 2px solid var(--ia-panels-scroll-track); } #smaBody::-webkit-scrollbar-button{ background: var(--ia-panels-scroll-arrow); } #bollingerBody::-webkit-scrollbar{ width: 12px; } #bollingerBody::-webkit-scrollbar-track{ background: var(--ia-panels-scroll-track); } #bollingerBody::-webkit-scrollbar-thumb{ background: var(--ia-panels-scroll-thumb); border-radius: 10px; border: 2px solid var(--ia-panels-scroll-track); } #bollingerBody::-webkit-scrollbar-button{ background: var(--ia-panels-scroll-arrow); } /* =========================================================== ✅ MODE COULEURS (piloté par JS via body.iaPanelMode) Fichier: static/css/style_css_panneaux_annexe.css IMPORTANT: on cible .pmHeader ET .panelHeader (compat) =========================================================== */ /* Base (passif) = couleurs "pancartes" */ #legendPanel .panelHeader, #infoPanel .panelHeader, :is(#calendarPanel,#earningsPanel) .panelHeader, #appearancePanel .panelHeader, #workspacePanel .panelHeader, #smaPanel .panelHeader, #bollingerPanel .panelHeader, .pmPanel.pmFloat .pmHeader{ background: var(--pm-frame) !important; color: var(--pm-text) !important; } /* ============ CHART MODE ============ */ /* En chart mode : les panneaux liés (info/legend) prennent l’accent */ body:not(.iaPanelMode) #infoPanel.pmLinkedActive .panelHeader, body:not(.iaPanelMode) #legendPanel.pmLinkedActive .panelHeader, body:not(.iaPanelMode) .pmPanel.pmFloat.pmLinkedActive .pmHeader, body:not(.iaPanelMode) #smaPanel.pmLinkedActive .panelHeader, body:not(.iaPanelMode) #bollingerPanel.pmLinkedActive .panelHeader{ background: var(--ia-active-accent-bg) !important; color: var(--ia-active-accent-fg) !important; border-bottom: 1px solid rgba(0,0,0,0.18) !important; } /* ============ PANEL MODE ============ */ /* En panel mode : le panneau non lié ACTIF prend l’accent */ body.iaPanelMode :is(#calendarPanel,#earningsPanel).pmPanelActive:not(.pmLinkedActive) .panelHeader, body.iaPanelMode #appearancePanel.pmPanelActive:not(.pmLinkedActive) .panelHeader, body.iaPanelMode #workspacePanel.pmPanelActive:not(.pmLinkedActive) .panelHeader, body.iaPanelMode .pmPanel.pmFloat.pmPanelActive:not(.pmLinkedActive) .pmHeader{ background: var(--ia-panels-active-bg, #d9d9d9) !important; color: var(--ia-panels-active-fg, #111) !important; } /* En panel mode : les panneaux liés reviennent passifs */ body.iaPanelMode #infoPanel.pmLinkedActive .panelHeader, body.iaPanelMode #legendPanel.pmLinkedActive .panelHeader, body.iaPanelMode #smaPanel.pmLinkedActive .panelHeader, body.iaPanelMode #bollingerPanel.pmLinkedActive .panelHeader, body.iaPanelMode .pmPanel.pmFloat.pmLinkedActive .pmHeader{ background: var(--pm-frame) !important; color: var(--pm-text) !important; } /* =========================================================== FIX FINAL : resize haut des PANNEAUX annexes - resizer top doit être au-dessus du header - mais ne doit pas recouvrir la zone boutons à droite =========================================================== */ .pmPanel .pmHeader{ position: relative !important; z-index: 40000 !important; } /* zone de resize haut (au-dessus du header) */ .pmPanel .pmEdgeResizerT{ top: 0 !important; left: 0 !important; right: var(--pm-header-btns-reserve, 44px) !important; /* laisse la zone boutons */ height: 12px !important; /* plus facile à attraper */ z-index: 50000 !important; /* au-dessus du header */ pointer-events: auto !important; } /* garde la croix au-dessus de tout */ .pmPanel .pmHeaderBtns, .pmPanel .pmCloseBtn{ position: relative !important; z-index: 60000 !important; } /* =========================================================== INFO PANEL — styles du contenu (panneau_infos.js) =========================================================== */ #infoBody{ padding: 12px !important; } /* Bloc haut (Nom + sous-ligne) */ #infoBody .infoHeaderBlock{ background: var(--ia-panels-body-bg) !important; border: 1px solid color-mix(in srgb, var(--ia-panels-body-fg) 12%, transparent) !important; border-radius: 12px; padding: 12px; box-shadow: 0 6px 18px rgba(0,0,0,0.06); margin-bottom: 12px; } #infoBody .infoName{ font-size: 20px; font-weight: 800; color: var(--ia-panels-body-fg); line-height: 1.1; margin-bottom: 6px; } #infoBody .infoSub{ display:flex; align-items:center; justify-content: space-between; gap: 10px; font-size: 12px; color: color-mix(in srgb, var(--ia-panels-body-fg) 65%, transparent); } /* Pastilles */ #infoBody .pill{ display:inline-flex; align-items:center; justify-content:center; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; border: 1px solid color-mix(in srgb, var(--ia-panels-body-fg) 14%, transparent); background: color-mix(in srgb, var(--ia-panels-body-bg) 88%, #000 12%); color: var(--ia-panels-body-fg); white-space: nowrap; } #infoBody .pill.ok{ background:#eaf8ef; border-color: rgba(20,160,60,0.30); color:#0a6b2b; } #infoBody .pill.neutral{ background:#f3f4f6; border-color: rgba(0,0,0,0.12); color: rgba(0,0,0,0.70); } #infoBody .pill.open{ background:#eaf8ef; border-color: rgba(20,160,60,0.30); color:#0a6b2b; } #infoBody .pill.closed{ background:#fff1f1; border-color: rgba(210,40,40,0.25); color:#8a1f1f; } #infoBody .pill.unknown{ background:#f4f4f4; border-color: rgba(0,0,0,0.12); color: rgba(0,0,0,0.55); } /* Sections */ #infoBody .infoSection{ background: var(--ia-panels-body-bg) !important; border: 1px solid color-mix(in srgb, var(--ia-panels-body-fg) 12%, transparent) !important; border-radius: 12px; padding: 12px; box-shadow: 0 6px 18px rgba(0,0,0,0.06); margin-bottom: 12px; } #infoBody .infoSectionTitle{ display:flex; align-items:center; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 800; color: var(--ia-panels-body-fg); margin-bottom: 10px; } /* Grille K/V */ #infoBody .infoGrid{ display:grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: 12px; } #infoBody .infoK{ color: color-mix(in srgb, var(--ia-panels-body-fg) 60%, transparent); } #infoBody .infoV{ color: var(--ia-panels-body-fg); font-weight: 700; } /* Debug */ #infoBody .debugRows{ margin-top: 10px; border-top: 1px solid color-mix(in srgb, var(--ia-panels-body-fg) 12%, transparent); padding-top: 10px; } #infoBody .debugRow{ display:grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 4px 0; border-bottom: 1px dashed color-mix(in srgb, var(--ia-panels-body-fg) 10%, transparent); } #infoBody .debugK{ color: color-mix(in srgb, var(--ia-panels-body-fg) 60%, transparent); font-weight: 700; font-size: 12px; } #infoBody .debugV{ color: var(--ia-panels-body-fg); font-size: 12px; word-break: break-word; } /* ✅ CLIP : la pancarte ne peut plus déborder vers Volume/RSI */ .ia-pane-main{ overflow: hidden; } /* =========================================================== RSI PANEL ALIGNMENT - Applique le mme socle que les autres pancartes annexes - Utilise les variables Apparence (pm/ia-panels) =========================================================== */ /* Cadre panneau */ #rsiPanel{ background: var(--ia-panels-body-bg) !important; color: var(--ia-panels-body-fg) !important; border-left: 1px solid var(--pm-ui-border) !important; border-top: 1px solid var(--pm-ui-border) !important; border-bottom: 1px solid var(--pm-ui-border) !important; box-shadow: -8px 0 24px rgba(0,0,0,0.08); overflow: hidden; display: flex; flex-direction: column; height: 100vh; min-height: 0; } /* Header uniforme */ #rsiPanel .panelHeader{ display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px var(--pm-pad-x) !important; background: var(--pm-frame) !important; border-bottom: 1px solid var(--pm-ui-border) !important; color: var(--pm-text) !important; flex: 0 0 auto !important; } /* Header actif li au chart */ body:not(.iaPanelMode) #rsiPanel.pmLinkedActive .panelHeader{ background: var(--ia-active-accent-bg) !important; color: var(--ia-active-accent-fg) !important; border-bottom: 1px solid rgba(0,0,0,0.18) !important; } /* En panel mode, redevient passif */ body.iaPanelMode #rsiPanel.pmLinkedActive .panelHeader{ background: var(--pm-frame) !important; color: var(--pm-text) !important; } /* Ligne titre */ #rsiPanel .legendHeaderLine{ display: flex !important; flex-direction: row !important; align-items: baseline !important; gap: 6px !important; white-space: nowrap !important; min-width: 0 !important; } #rsiPanel #rsiPanelTitle{ font-weight: 700 !important; font-size: 13px !important; color: inherit !important; line-height: 1.2 !important; margin: 0 !important; padding: 0 !important; display: inline !important; } #rsiPanel #rsiTitle{ font-weight: 400 !important; font-size: 12px !important; color: inherit !important; opacity: 0.75 !important; line-height: 1.2 !important; overflow: hidden !important; text-overflow: ellipsis !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; display: inline !important; } /* Croix fermeture uniforme */ #rsiClose{ width: 26px !important; height: 26px !important; padding: 0 !important; border-radius:0 !important; border: 1px solid var(--pm-ui-border) !important; background: var(--pm-close-bg) !important; color: var(--pm-close-fg) !important; cursor: pointer; font-size: 16px !important; line-height: 26px !important; display: flex !important; align-items: center !important; justify-content: center !important; } #rsiClose:hover{ background: var(--pm-close-bg-hover) !important; color: var(--pm-close-fg-hover) !important; } /* Body scrollable + couleurs apparence */ #rsiBody{ flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 10px !important; box-sizing: border-box !important; background: var(--ia-panels-body-bg) !important; color: var(--ia-panels-body-fg) !important; } /* =========================================================== VOLUME PANEL ALIGNMENT - Same frame/header baseline as RSI and other side panels =========================================================== */ #volumePanel{ background: var(--ia-panels-body-bg) !important; color: var(--ia-panels-body-fg) !important; border-left: 1px solid var(--pm-ui-border) !important; border-top: 1px solid var(--pm-ui-border) !important; border-bottom: 1px solid var(--pm-ui-border) !important; box-shadow: -8px 0 24px rgba(0,0,0,0.08); overflow: hidden; display: flex; flex-direction: column; height: 100vh; min-height: 0; } #volumePanel .panelHeader{ display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px var(--pm-pad-x) !important; background: var(--pm-frame) !important; border-bottom: 1px solid var(--pm-ui-border) !important; color: var(--pm-text) !important; flex: 0 0 auto !important; } body:not(.iaPanelMode) #volumePanel.pmLinkedActive .panelHeader{ background: var(--ia-active-accent-bg) !important; color: var(--ia-active-accent-fg) !important; border-bottom: 1px solid rgba(0,0,0,0.18) !important; } body.iaPanelMode #volumePanel.pmLinkedActive .panelHeader{ background: var(--pm-frame) !important; color: var(--pm-text) !important; } #volumePanel .legendHeaderLine{ display: flex !important; flex-direction: row !important; align-items: baseline !important; gap: 6px !important; white-space: nowrap !important; min-width: 0 !important; } #volumePanel #volumePanelTitle{ font-weight: 700 !important; font-size: 13px !important; color: inherit !important; line-height: 1.2 !important; margin: 0 !important; padding: 0 !important; display: inline !important; } #volumePanel #volumeTitle{ font-weight: 400 !important; font-size: 12px !important; color: inherit !important; opacity: 0.75 !important; line-height: 1.2 !important; overflow: hidden !important; text-overflow: ellipsis !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; display: inline !important; } #volumeClose{ width: 26px !important; height: 26px !important; padding: 0 !important; border-radius:0 !important; border: 1px solid var(--pm-ui-border) !important; background: var(--pm-close-bg) !important; color: var(--pm-close-fg) !important; cursor: pointer; font-size: 16px !important; line-height: 26px !important; display: flex !important; align-items: center !important; justify-content: center !important; } #volumeClose:hover{ background: var(--pm-close-bg-hover) !important; color: var(--pm-close-fg-hover) !important; } #volumeBody{ flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 10px !important; box-sizing: border-box !important; background: var(--ia-panels-body-bg) !important; color: var(--ia-panels-body-fg) !important; } /* Scrollbar RSI */ #rsiBody{ scrollbar-width: thin; scrollbar-color: var(--ia-panels-scroll-thumb) var(--ia-panels-scroll-track); } #rsiBody::-webkit-scrollbar{ width: 12px; } #rsiBody::-webkit-scrollbar-track{ background: var(--ia-panels-scroll-track); } #rsiBody::-webkit-scrollbar-thumb{ background: var(--ia-panels-scroll-thumb); border-radius: 10px; border: 2px solid var(--ia-panels-scroll-track); } #rsiBody::-webkit-scrollbar-button{ background: var(--ia-panels-scroll-arrow); } /* =========================================================== Timeframe Panel (Unite de temps) - alignement visuel complet =========================================================== */ #timeframePanel{ background:#fff; border-left:1px solid var(--pm-ui-border) !important; border-top:1px solid var(--pm-ui-border) !important; border-bottom:1px solid var(--pm-ui-border) !important; box-shadow:-8px 0 24px rgba(0,0,0,0.08); overflow:hidden; display:flex; flex-direction:column; height:100vh; min-height:0; } #timeframePanel .panelHeader{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px var(--pm-pad-x) !important; background: var(--pm-frame) !important; border-bottom:1px solid var(--pm-ui-border) !important; color: var(--pm-text) !important; flex:0 0 auto !important; } #timeframePanel .legendHeaderLine{ display:flex !important; flex-direction:row !important; align-items:baseline !important; gap:6px !important; white-space:nowrap !important; min-width:0 !important; } #timeframePanel #timeframePanelTitle{ font-weight:700 !important; font-size:13px !important; color:inherit !important; line-height:1.2 !important; margin:0 !important; padding:0 !important; display:inline !important; } #timeframePanel #timeframeTitle{ font-weight:400 !important; font-size:12px !important; color:inherit !important; opacity:0.75 !important; line-height:1.2 !important; overflow:hidden !important; text-overflow:ellipsis !important; min-width:0 !important; margin:0 !important; padding:0 !important; display:inline !important; } #timeframeClose{ width:26px !important; height:26px !important; padding:0 !important; border-radius:0 !important; border:1px solid var(--pm-ui-border) !important; background: var(--pm-close-bg) !important; color: var(--pm-close-fg) !important; cursor:pointer; font-size:16px !important; line-height:26px !important; display:flex !important; align-items:center !important; justify-content:center !important; } #timeframeClose:hover{ background: var(--pm-close-bg-hover) !important; color: var(--pm-close-fg-hover) !important; } #timeframeBody{ flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important; overflow-x:hidden !important; padding:10px !important; box-sizing:border-box !important; background: var(--ia-panels-body-bg) !important; color: var(--ia-panels-body-fg) !important; } #timeframeBody::-webkit-scrollbar{ width: 12px; } #timeframeBody::-webkit-scrollbar-track{ background: var(--ia-panels-scroll-track); } #timeframeBody::-webkit-scrollbar-thumb{ background: var(--ia-panels-scroll-thumb); border-radius: 8px; border: 2px solid var(--ia-panels-scroll-track); } #timeframeBody::-webkit-scrollbar-button{ background: var(--ia-panels-scroll-arrow); } /* =========================================================== Broker Panel (Connexion Broker) - alignement visuel complet =========================================================== */ #brokerPanel{ background:#fff; border-left:1px solid var(--pm-ui-border) !important; border-top:1px solid var(--pm-ui-border) !important; border-bottom:1px solid var(--pm-ui-border) !important; box-shadow:-8px 0 24px rgba(0,0,0,0.08); overflow:hidden; display:flex; flex-direction:column; height:100vh; min-height:0; } #brokerPanel .panelHeader{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px var(--pm-pad-x) !important; background: var(--pm-frame) !important; border-bottom:1px solid var(--pm-ui-border) !important; color: var(--pm-text) !important; flex:0 0 auto !important; } #brokerPanel .legendHeaderLine{ display:flex !important; flex-direction:row !important; align-items:baseline !important; gap:6px !important; white-space:nowrap !important; min-width:0 !important; } #brokerPanel #brokerPanelTitle{ font-weight:700 !important; font-size:13px !important; color:inherit !important; line-height:1.2 !important; margin:0 !important; padding:0 !important; display:inline !important; } #brokerPanel #brokerTitle{ font-weight:400 !important; font-size:12px !important; color:inherit !important; opacity:0.75 !important; line-height:1.2 !important; overflow:hidden !important; text-overflow:ellipsis !important; min-width:0 !important; margin:0 !important; padding:0 !important; display:inline !important; } #brokerClose{ width:26px !important; height:26px !important; padding:0 !important; border-radius:0 !important; border:1px solid var(--pm-ui-border) !important; background: var(--pm-close-bg) !important; color: var(--pm-close-fg) !important; cursor:pointer; font-size:16px !important; line-height:26px !important; display:flex !important; align-items:center !important; justify-content:center !important; } #brokerClose:hover{ background: var(--pm-close-bg-hover) !important; color: var(--pm-close-fg-hover) !important; } #brokerBody{ flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important; overflow-x:hidden !important; padding:10px !important; box-sizing:border-box !important; background: var(--ia-panels-body-bg) !important; color: var(--ia-panels-body-fg) !important; } #brokerBody::-webkit-scrollbar{ width: 12px; } #brokerBody::-webkit-scrollbar-track{ background: var(--ia-panels-scroll-track); } #brokerBody::-webkit-scrollbar-thumb{ background: var(--ia-panels-scroll-thumb); border-radius: 8px; border: 2px solid var(--ia-panels-scroll-track); } #brokerBody::-webkit-scrollbar-button{ background: var(--ia-panels-scroll-arrow); } /* =========================================================== Compte de trading =========================================================== */ #tradingAccountPanel{ background:#fff; border-left:1px solid var(--pm-ui-border) !important; border-top:1px solid var(--pm-ui-border) !important; border-bottom:1px solid var(--pm-ui-border) !important; box-shadow:-8px 0 24px rgba(0,0,0,0.08); overflow:hidden; display:flex; flex-direction:column; height:100vh; min-height:0; } #tradingAccountPanel .panelHeader{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px var(--pm-pad-x) !important; background: var(--pm-frame) !important; border-bottom:1px solid var(--pm-ui-border) !important; color: var(--pm-text) !important; flex:0 0 auto !important; } #brokerPanel.pmPanelActive:not(.pmLinkedActive) .panelHeader, #timeframePanel.pmPanelActive:not(.pmLinkedActive) .panelHeader, #tradingAccountPanel.pmPanelActive:not(.pmLinkedActive) .panelHeader{ background: var(--ia-panels-active-bg) !important; color: var(--ia-panels-active-fg) !important; border-bottom: 1px solid var(--pm-ui-border) !important; } #tradingAccountPanel .legendHeaderLine{ display:flex !important; flex-direction:row !important; align-items:baseline !important; gap:6px !important; white-space:nowrap !important; min-width:0 !important; } #tradingAccountPanel #tradingAccountPanelTitle{ font-weight:700 !important; font-size:13px !important; color:inherit !important; line-height:1.2 !important; margin:0 !important; padding:0 !important; display:inline !important; } #tradingAccountPanel #tradingAccountTitle{ font-weight:400 !important; font-size:12px !important; color:inherit !important; opacity:0.75 !important; line-height:1.2 !important; overflow:hidden !important; text-overflow:ellipsis !important; min-width:0 !important; margin:0 !important; padding:0 !important; display:inline !important; } #tradingAccountClose{ width:26px !important; height:26px !important; padding:0 !important; border-radius:0 !important; border:1px solid var(--pm-ui-border) !important; background: var(--pm-close-bg) !important; color: var(--pm-close-fg) !important; cursor:pointer; font-size:16px !important; line-height:26px !important; display:flex !important; align-items:center !important; justify-content:center !important; } #tradingAccountClose:hover{ background: var(--pm-close-bg-hover) !important; color: var(--pm-close-fg-hover) !important; } #tradingAccountBody{ flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important; overflow-x:hidden !important; padding:10px !important; box-sizing:border-box !important; background: var(--ia-panels-body-bg) !important; color: var(--ia-panels-body-fg) !important; } #tradingAccountBody::-webkit-scrollbar{ width: 12px; } #tradingAccountBody::-webkit-scrollbar-track{ background: var(--ia-panels-scroll-track); } #tradingAccountBody::-webkit-scrollbar-thumb{ background: var(--ia-panels-scroll-thumb); border-radius: 8px; border: 2px solid var(--ia-panels-scroll-track); } #tradingAccountBody::-webkit-scrollbar-button{ background: var(--ia-panels-scroll-arrow); } .ia-panel-placeholder{ padding: 12px; font-size: 13px; line-height: 1.35; color: var(--ia-panels-body-fg); } .ia-broker-root, .ia-timeframe-root, .ia-trading-account-root{ display: flex; flex-direction: column; gap: 12px; } .ia-panel-section{ display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid color-mix(in srgb, var(--ia-panels-body-fg) 12%, transparent); border-radius: 12px; background: transparent !important; } .ia-panel-kv{ display: flex; flex-direction: column; gap: 6px; } .ia-panel-kv-row{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; } .ia-panel-kv-label{ color: color-mix(in srgb, var(--ia-panels-body-fg) 72%, transparent) !important; font-weight: 700; } .ia-panel-kv-value{ color: var(--ia-panels-body-fg) !important; word-break: break-word; } .ia-broker-row{ display: flex; align-items: center; justify-content: space-between; gap: 8px; } .ia-broker-status-wrap{ display: inline-flex; align-items: center; gap: 8px; } .ia-broker-status{ display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--pm-ui-border); background: #f2f2f2; color: #222 !important; font-weight: 700; font-size: 12px; } .ia-broker-status[data-status="configured"], .ia-broker-status[data-status="connected"]{ background: #dff4df; color: #0d5b0d !important; } .ia-broker-status[data-status="error"]{ background: #ffe1e1; color: #8f1313 !important; } .ia-broker-status[data-status="disconnected"]{ background: #efefef; color: #555 !important; } .ia-broker-busy{ font-size: 12px; color: #666 !important; } .ia-broker-field{ display: flex; flex-direction: column; gap: 6px; } .ia-broker-field > span{ font-weight: var(--ia-typo-h3-weight) !important; font-size: var(--ia-typo-h3-size) !important; color: color-mix(in srgb, var(--ia-panels-body-fg) 94%, #000 6%) !important; } .ia-broker-field input:not([type="checkbox"]), .ia-broker-field select{ height: 32px; width: 100%; box-sizing: border-box; border: 1px solid var(--pm-ui-border); border-radius: 0; padding: 0 10px; background: #fff; color: #111; font-size: 12px; } .ia-timeframe-field{ display: flex; flex-direction: column; gap: 8px; } .ia-timeframe-field-head{ display: flex; align-items: center; justify-content: space-between; gap: 8px; } .ia-timeframe-field-label{ font-size: 12px; font-weight: 400; color: var(--ia-panels-body-fg) !important; } .ia-timeframe-restore-btn{ white-space: nowrap; min-height: 22px; padding: 0 8px !important; } .ia-timeframe-selector-open{ display: flex; flex-direction: column; gap: 6px; } .ia-timeframe-selector-entry{ display: flex; align-items: center; gap: 8px; } .ia-timeframe-selector-entry.is-unsupported .ia-timeframe-selector-row{ background: #fff8eb; } .ia-timeframe-selector-row{ flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; padding: 2px 8px; border: 1px solid color-mix(in srgb, var(--ia-panels-body-fg) 12%, transparent); border-radius: 0; background: #fff; } .ia-timeframe-selector-trash{ flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; } .ia-timeframe-selector-value{ flex: 1 1 auto; min-width: 0; color: #111 !important; font-weight: 700; } .ia-timeframe-selector-state{ display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 10px; border: 1px solid rgba(138, 90, 0, 0.22); background: #fff1d6; color: #8a5a00 !important; font-weight: 700; font-size: 11px; } .ia-timeframe-selector-empty{ padding: 6px 8px; border: 1px solid color-mix(in srgb, var(--ia-panels-body-fg) 12%, transparent); background: #fff; font-size: 12px; color: color-mix(in srgb, var(--ia-panels-body-fg) 68%, transparent) !important; } .ia-timeframe-order-row{ display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 2px; } .ia-timeframe-order-label{ font-size: 12px; color: var(--ia-panels-body-fg) !important; } .ia-timeframe-order-switch-slot{ display: inline-flex; align-items: center; justify-content: center; } .ia-broker-select-list{ overflow-y: auto; } .ia-broker-credentials{ display: flex; flex-direction: column; gap: 8px; } .ia-broker-remember{ display: flex; flex-direction: column; gap: 6px; padding: 6px 8px; border: 1px solid color-mix(in srgb, var(--ia-panels-body-fg) 12%, transparent); border-radius: 0; background: #f8f9fb; } .ia-broker-remember-main{ display: inline-flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; color: var(--ia-panels-body-fg); font-size: 12px; font-weight: 700; } .ia-broker-remember-main input[type="checkbox"]{ width: 15px; height: 15px; margin: 0; padding: 0; flex: 0 0 auto; } .ia-broker-remember-note{ margin: 0 0 0 23px; font-size: 12px; color: color-mix(in srgb, var(--ia-panels-body-fg) 65%, transparent) !important; line-height: 1.25; } .ia-broker-check{ display: flex; align-items: flex-start; gap: 8px; font-size: 12px; } .ia-broker-check input[type="checkbox"]{ margin-top: 2px; } .ia-broker-2fa{ display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid color-mix(in srgb, var(--ia-panels-body-fg) 12%, transparent); border-radius: 12px; background: transparent; } .ia-broker-actions{ display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } .ia-broker-connect-wait{ display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #1f3f73 !important; } .ia-broker-spinner{ width: 14px; height: 14px; border-radius: 50%; border: 2px solid #b8c4da; border-top-color: #1f3f73; animation: ia-broker-spinner-rotate 0.8s linear infinite; } @keyframes ia-broker-spinner-rotate{ to { transform: rotate(360deg); } } .ia-broker-box{ border: 1px solid color-mix(in srgb, var(--ia-panels-body-fg) 12%, transparent); border-radius: 12px; background: transparent; padding: 12px; display: flex; flex-direction: column; gap: 8px; font-size: 12px; } .ia-broker-box-title{ font-size: var(--ia-typo-h2-size); font-weight: var(--ia-typo-h2-weight); line-height: var(--ia-typo-line); color: var(--ia-panels-body-fg) !important; } .ia-broker-note{ font-size: 12px; color: color-mix(in srgb, var(--ia-panels-body-fg) 65%, transparent) !important; } .ia-broker-error{ border: 1px solid #e6a9a9; background: #ffecec; color: #8f1313 !important; border-radius: 0; padding: 8px; font-size: 12px; } .ia-broker-current{ width: 100%; min-height: 170px; border: 1px solid var(--pm-ui-border); border-radius: 0; padding: 8px 10px; background: #fff; color: #111 !important; font-size: 12px; line-height: 1.35; box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; overflow: auto; } .ia-broker-current-row{ white-space: normal; } .ia-broker-error-row{ white-space: normal; } .ia-broker-current-key{ color: #111 !important; } .ia-broker-current-value{ color: #111 !important; } .ia-broker-current-status{ font-weight: 700; } .ia-broker-current-status.is-connected{ color: #148447 !important; } .ia-broker-current-status.is-error{ color: #b91d1d !important; } .ia-broker-current-status.is-disconnected, .ia-broker-current-status.is-configured{ color: #c97700 !important; } #timeframeBody, #brokerBody, #tradingAccountBody{ scrollbar-width: thin; scrollbar-color: var(--ia-panels-scroll-thumb) var(--ia-panels-scroll-track); } #timeframeBody::-webkit-scrollbar, #brokerBody::-webkit-scrollbar, #tradingAccountBody::-webkit-scrollbar{ width: 12px; } #timeframeBody::-webkit-scrollbar-track, #brokerBody::-webkit-scrollbar-track, #tradingAccountBody::-webkit-scrollbar-track{ background: var(--ia-panels-scroll-track); } #timeframeBody::-webkit-scrollbar-thumb, #brokerBody::-webkit-scrollbar-thumb, #tradingAccountBody::-webkit-scrollbar-thumb{ background: var(--ia-panels-scroll-thumb); border-radius: 10px; border: 2px solid var(--ia-panels-scroll-track); } #timeframeBody::-webkit-scrollbar-button, #brokerBody::-webkit-scrollbar-button, #tradingAccountBody::-webkit-scrollbar-button{ background: var(--ia-panels-scroll-arrow); } .ia-orderbook-root{ display: flex; flex-direction: column; gap: 12px; } .ia-orderbook-summary{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .ia-orderbook-summary-card{ display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid color-mix(in srgb, var(--ia-panels-body-fg) 12%, transparent); background: #fff; } .ia-orderbook-summary-label{ font-size: 11px; color: color-mix(in srgb, var(--ia-panels-body-fg) 68%, transparent) !important; } .ia-orderbook-summary-value{ font-size: 13px; font-weight: 800; color: var(--ia-panels-body-fg) !important; } .ia-orderbook-summary-value.is-ask{ color: #b42318 !important; } .ia-orderbook-summary-value.is-bid{ color: #117a37 !important; } .ia-orderbook-ladder{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .ia-orderbook-side{ display: flex; flex-direction: column; gap: 6px; } .ia-orderbook-side-head{ display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; } .ia-orderbook-side-title{ font-weight: 800; } .ia-orderbook-side-title.is-ask{ color: #b42318 !important; } .ia-orderbook-side-title.is-bid{ color: #117a37 !important; } .ia-orderbook-side-count, .ia-orderbook-cols{ font-size: 11px; color: color-mix(in srgb, var(--ia-panels-body-fg) 68%, transparent) !important; } .ia-orderbook-cols{ display: grid; grid-template-columns: 1.1fr 0.9fr 0.9fr; gap: 8px; align-items: center; } .ia-orderbook-book{ display: flex; flex-direction: column; gap: 4px; } .ia-orderbook-row{ position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ia-panels-body-fg) 12%, transparent); background: #fff; } .ia-orderbook-row-fill{ position: absolute; top: 0; bottom: 0; left: 0; opacity: 0.13; } .ia-orderbook-row.is-ask .ia-orderbook-row-fill{ left: auto; right: 0; background: #ef4444; } .ia-orderbook-row.is-bid .ia-orderbook-row-fill{ background: #22c55e; } .ia-orderbook-row-content{ position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 0.9fr 0.9fr; gap: 8px; align-items: center; min-height: 28px; padding: 0 8px; } .ia-orderbook-price{ font-weight: 800; color: var(--ia-panels-body-fg) !important; } .ia-orderbook-size, .ia-orderbook-cumulative{ color: var(--ia-panels-body-fg) !important; } .ia-orderbook-empty{ padding: 10px; border: 1px dashed color-mix(in srgb, var(--ia-panels-body-fg) 18%, transparent); background: #fff; color: color-mix(in srgb, var(--ia-panels-body-fg) 76%, transparent) !important; } .ia-orderbook-body, .ia-orderbook-body *{ font-size: var(--ia-typo-text-size); line-height: var(--ia-typo-line); } .ia-orderbook-body .iaPanelSectionTitle{ font-size: var(--ia-typo-h2-size) !important; font-weight: var(--ia-typo-h2-weight) !important; line-height: var(--ia-typo-line) !important; color: var(--ia-panels-body-fg) !important; } .ia-orderbook-panel{ background:#fff; border-left:1px solid var(--pm-ui-border) !important; border-top:1px solid var(--pm-ui-border) !important; border-bottom:1px solid var(--pm-ui-border) !important; box-shadow:-8px 0 24px rgba(0,0,0,0.08); overflow:hidden; display:flex; flex-direction:column; height:100vh; min-height:0; } .ia-orderbook-panel .panelHeader{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px var(--pm-pad-x) !important; background: var(--pm-frame) !important; border-bottom:1px solid var(--pm-ui-border) !important; color: var(--pm-text) !important; flex:0 0 auto !important; } .ia-orderbook-panel.pmLinkedActive .panelHeader{ background: var(--ia-active-accent-bg) !important; color: var(--ia-active-accent-fg) !important; } /* En mode panel (pancarte indpendante active), le carnet redevient passif. */ body.iaPanelMode .ia-orderbook-panel.pmLinkedActive .panelHeader{ background: var(--pm-frame) !important; color: var(--pm-text) !important; } .ia-orderbook-panel.pmPanelActive:not(.pmLinkedActive) .panelHeader{ background: var(--ia-panels-active-bg) !important; color: var(--ia-panels-active-fg) !important; } .ia-orderbook-panel .legendHeaderLine{ display:flex !important; flex-direction:row !important; align-items:baseline !important; gap:6px !important; white-space:nowrap !important; min-width:0 !important; } .ia-orderbook-panel .ia-orderbook-panel-title{ font-weight:700 !important; font-size:13px !important; color:inherit !important; line-height:1.2 !important; margin:0 !important; padding:0 !important; display:inline !important; } .ia-orderbook-panel .ia-orderbook-title{ font-weight:400 !important; font-size:12px !important; color:inherit !important; opacity:0.75 !important; line-height:1.2 !important; overflow:hidden !important; text-overflow:ellipsis !important; min-width:0 !important; margin:0 !important; padding:0 !important; display:inline !important; } .ia-orderbook-panel .pmCloseBtn{ width:26px !important; height:26px !important; padding:0 !important; border-radius:0 !important; border:1px solid var(--pm-ui-border) !important; background: var(--pm-close-bg) !important; color: var(--pm-close-fg) !important; cursor:pointer; font-size:16px !important; line-height:26px !important; display:flex !important; align-items:center !important; justify-content:center !important; } .ia-orderbook-panel .pmCloseBtn:hover{ background: var(--pm-close-bg-hover) !important; color: var(--pm-close-fg-hover) !important; } .ia-orderbook-body{ flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important; overflow-x:hidden !important; padding:10px !important; box-sizing:border-box !important; background: var(--ia-panels-body-bg) !important; color: var(--ia-panels-body-fg) !important; scrollbar-width: thin; scrollbar-color: var(--ia-panels-scroll-thumb) var(--ia-panels-scroll-track); } .ia-orderbook-body::-webkit-scrollbar{ width: 12px; } .ia-orderbook-body::-webkit-scrollbar-track{ background: var(--ia-panels-scroll-track); } .ia-orderbook-body::-webkit-scrollbar-thumb{ background: var(--ia-panels-scroll-thumb); border-radius: 10px; border: 2px solid var(--ia-panels-scroll-track); } .ia-orderbook-body::-webkit-scrollbar-button{ background: var(--ia-panels-scroll-arrow); } .ia-ecosystem-root{ display: flex; flex-direction: column; gap: 12px; } #ecosystemStatePanel{ background:#fff; border-left:1px solid var(--pm-ui-border) !important; border-top:1px solid var(--pm-ui-border) !important; border-bottom:1px solid var(--pm-ui-border) !important; box-shadow:-8px 0 24px rgba(0,0,0,0.08); overflow:hidden; display:flex; flex-direction:column; height:100vh; min-height:0; } #ecosystemStatePanel .panelHeader{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px var(--pm-pad-x) !important; background: var(--pm-frame) !important; border-bottom:1px solid var(--pm-ui-border) !important; color: var(--pm-text) !important; flex:0 0 auto !important; } #ecosystemStatePanel.pmPanelActive:not(.pmLinkedActive) .panelHeader{ background: var(--ia-panels-active-bg) !important; color: var(--ia-panels-active-fg) !important; } #ecosystemStatePanel .legendHeaderLine{ display:flex !important; flex-direction:row !important; align-items:baseline !important; gap:6px !important; white-space:nowrap !important; min-width:0 !important; } #ecosystemStatePanel #ecosystemStatePanelTitle{ font-weight:700 !important; font-size:13px !important; color:inherit !important; line-height:1.2 !important; margin:0 !important; padding:0 !important; display:inline !important; } #ecosystemStatePanel #ecosystemStateTitle{ font-weight:400 !important; font-size:12px !important; color:inherit !important; opacity:0.75 !important; line-height:1.2 !important; overflow:hidden !important; text-overflow:ellipsis !important; min-width:0 !important; margin:0 !important; padding:0 !important; display:inline !important; } #ecosystemStateClose{ width:26px !important; height:26px !important; padding:0 !important; border-radius:0 !important; border:1px solid var(--pm-ui-border) !important; background: var(--pm-close-bg) !important; color: var(--pm-close-fg) !important; cursor:pointer; font-size:16px !important; line-height:26px !important; display:flex !important; align-items:center !important; justify-content:center !important; } #ecosystemStateClose:hover{ background: var(--pm-close-bg-hover) !important; color: var(--pm-close-fg-hover) !important; } #ecosystemStateBody{ flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important; overflow-x:hidden !important; scrollbar-width: thin; scrollbar-color: var(--ia-panels-scroll-thumb) var(--ia-panels-scroll-track); padding:10px !important; box-sizing:border-box !important; background: var(--ia-panels-body-bg) !important; color: var(--ia-panels-body-fg) !important; } #ecosystemStateBody::-webkit-scrollbar{ width: 12px; } #ecosystemStateBody::-webkit-scrollbar-track{ background: var(--ia-panels-scroll-track); } #ecosystemStateBody::-webkit-scrollbar-thumb{ background: var(--ia-panels-scroll-thumb); border-radius: 10px; border: 2px solid var(--ia-panels-scroll-track); } #ecosystemStateBody::-webkit-scrollbar-button{ background: var(--ia-panels-scroll-arrow); } .ia-orderbook-root-compact{ gap: 8px; } .ia-orderbook-section{ gap: 5px; padding: 8px 9px; border-radius: 10px; } .ia-orderbook-body .ia-orderbook-section .iaPanelSectionTitle{ font-size: 12px !important; line-height: 1.1 !important; } .ia-orderbook-section-compact{ gap: 4px; } .ia-orderbook-context{ order: 10; } .ia-orderbook-kv{ gap: 3px; } .ia-orderbook-kv .ia-panel-kv-row{ min-height: 15px; gap: 3px; align-items: center; } .ia-orderbook-kv .ia-panel-kv-label, .ia-orderbook-kv .ia-panel-kv-value{ font-size: 10px !important; line-height: 1.05 !important; } .ia-orderbook-note{ margin-top: 1px; font-size: 10px !important; line-height: 1.15 !important; } .ia-orderbook-summary-compact{ gap: 6px; } .ia-orderbook-section-head{ display: flex; align-items: center; justify-content: space-between; gap: 8px; } .ia-orderbook-depth-foot{ display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; } .ia-orderbook-depth-foot-title{ font-size: 12px; line-height: 1.1; font-weight: 700; } .ia-orderbook-controls{ display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; } .ia-orderbook-depth-control{ display: inline-flex; align-items: center; gap: 4px; font-size: 10px; line-height: 1; } .ia-orderbook-depth-label{ color: color-mix(in srgb, var(--ia-panels-body-fg) 72%, transparent) !important; font-weight: 700; } .ia-orderbook-depth-stepper{ width: 48px; height: 20px; border: 1px solid color-mix(in srgb, var(--ia-panels-body-fg) 18%, transparent); border-radius: 4px; background: #fff; overflow: hidden; } .ia-orderbook-depth-stepper .iaNumStepper.iaNumApp .smaPeriodInput{ font-size: 10px !important; font-weight: 700 !important; } .ia-orderbook-depth-stepper .iaNumStepper.iaNumApp .iaNumBtn:disabled{ opacity: 0.35 !important; cursor: not-allowed !important; pointer-events: none !important; } .ia-orderbook-depth-feedback{ display: flex; flex-direction: column; gap: 2px; margin-top: 2px; } .ia-orderbook-depth-note{ font-size: 10px; line-height: 1.2; } .ia-orderbook-depth-note.is-warn{ color: #b45309 !important; } .ia-orderbook-depth-note.is-info{ color: color-mix(in srgb, var(--ia-panels-body-fg) 74%, transparent) !important; } .ia-orderbook-view-switch{ display: inline-flex; align-items: center; gap: 3px; border: 1px solid color-mix(in srgb, var(--ia-panels-body-fg) 16%, transparent); border-radius: 999px; padding: 2px; background: color-mix(in srgb, var(--ia-panels-body-fg) 5%, #fff); } .ia-orderbook-view-btn{ appearance: none; border: 0; border-radius: 999px; padding: 2px 8px; font-size: 10px; line-height: 1.1; font-weight: 700; color: color-mix(in srgb, var(--ia-panels-body-fg) 72%, transparent); background: transparent; cursor: pointer; } .ia-orderbook-view-btn:hover{ color: var(--ia-panels-body-fg); } .ia-orderbook-view-btn.is-active{ background: #0b6a72; color: #fff; } .ia-orderbook-summary-compact .ia-orderbook-summary-card{ gap: 2px; padding: 4px 6px; } .ia-orderbook-summary-compact .ia-orderbook-summary-label{ font-size: 10px; line-height: 1.05; } .ia-orderbook-summary-compact .ia-orderbook-summary-value{ font-size: 11px; line-height: 1.05; letter-spacing: -0.01em; } .ia-orderbook-ladder{ gap: 8px; } .ia-orderbook-root[data-ia-orderbook-view="vertical"] .ia-orderbook-ladder{ grid-template-columns: 1fr; } .ia-orderbook-root[data-ia-orderbook-view="horizontal"] .ia-orderbook-ladder{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .ia-orderbook-mid-price{ display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--ia-panels-body-fg) 14%, transparent); background: color-mix(in srgb, var(--ia-panels-body-fg) 6%, #fff); } .ia-orderbook-mid-label{ font-size: 10px; line-height: 1.1; color: color-mix(in srgb, var(--ia-panels-body-fg) 72%, transparent) !important; } .ia-orderbook-mid-value{ font-size: 12px; line-height: 1; font-weight: 800; color: #0b6a72 !important; font-variant-numeric: tabular-nums; } .ia-orderbook-root[data-ia-orderbook-view="vertical"] .ia-orderbook-side.is-bid{ flex-direction: column-reverse; } .ia-orderbook-root[data-ia-orderbook-view="vertical"] .ia-orderbook-side.is-bid .ia-orderbook-side-head{ justify-content: flex-start; margin-bottom: 5px; } .ia-orderbook-side{ gap: 4px; } .ia-orderbook-side-head{ display: flex; justify-content: flex-start; gap: 6px; } .ia-orderbook-side-title{ font-size: 11px; line-height: 1.05; } .ia-orderbook-side-count, .ia-orderbook-cols{ font-size: 10px; line-height: 1.05; } .ia-orderbook-cols{ gap: 6px; } .ia-orderbook-book{ gap: 2px; } .ia-orderbook-dominance{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px; margin-top: 2px; } .ia-orderbook-dominance-side{ font-size: 12px; line-height: 1.05; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; } .ia-orderbook-dominance-side.is-bid{ color: #117a37 !important; } .ia-orderbook-dominance-side.is-ask{ color: #b42318 !important; } .ia-orderbook-dominance-bar{ display: flex; align-items: stretch; height: 10px; overflow: hidden; border-radius: 2px; border: 1px solid color-mix(in srgb, var(--ia-panels-body-fg) 12%, transparent); background: color-mix(in srgb, var(--ia-panels-body-fg) 6%, #fff); } .ia-orderbook-dominance-fill{ height: 100%; transition: width 160ms ease; } .ia-orderbook-dominance-fill.is-bid{ background: #16a34a; } .ia-orderbook-dominance-fill.is-ask{ background: #dc2626; } .ia-orderbook-row-content{ gap: 6px; min-height: 15px; height: 15px; padding: 0 5px; } .ia-orderbook-price, .ia-orderbook-size, .ia-orderbook-cumulative{ font-size: 10px; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; } .ia-orderbook-row.is-ask .ia-orderbook-price{ color: #b42318 !important; } .ia-orderbook-row.is-bid .ia-orderbook-price{ color: #117a37 !important; } .ia-orderbook-empty{ padding: 6px 8px; font-size: 10px; line-height: 1.15; } .ia-orderbook-panel .panelHeader{ gap: 8px; padding: 6px var(--pm-pad-x) !important; } .ia-orderbook-panel .ia-orderbook-panel-title{ font-size: 12px !important; } .ia-orderbook-panel .ia-orderbook-title{ font-size: 11px !important; } .ia-orderbook-body{ padding: 6px !important; } @media (max-width: 420px){ .ia-orderbook-ladder{ grid-template-columns: 1fr; } .ia-orderbook-dominance{ grid-template-columns: 1fr; gap: 4px; } .ia-orderbook-dominance-side{ text-align: center; } } .ia-ecosystem-list{ display: flex; flex-direction: column; gap: 6px; } .ia-ecosystem-item{ border: 1px solid color-mix(in srgb, var(--ia-panels-body-fg) 12%, transparent); border-radius: 10px; padding: 7px 9px; font-size: 12px; line-height: 1.3; } .ia-ecosystem-item-chart{ display: flex; flex-direction: column; gap: 4px; } .ia-ecosystem-chart-head{ display: flex; align-items: center; justify-content: space-between; gap: 8px; } .ia-ecosystem-chart-title{ font-weight: 700; } .ia-ecosystem-chart-meta{ font-size: 11px; line-height: 1.25; color: color-mix(in srgb, var(--ia-panels-body-fg) 80%, transparent) !important; word-break: break-word; } .ia-ecosystem-chip{ display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ia-panels-body-fg) 18%, transparent); padding: 1px 8px; font-size: 11px; line-height: 1.2; font-weight: 700; background: color-mix(in srgb, var(--ia-panels-body-fg) 6%, #fff); } .ia-ecosystem-chip.is-active{ background: #ddf6e2; border-color: rgba(15, 110, 50, 0.28); } .ia-ecosystem-chip.is-inactive{ background: #f1f1f1; border-color: rgba(0, 0, 0, 0.14); } .ia-eco-tabs{ display: flex; flex-direction: column; gap: 8px; } .ia-eco-tab-card{ border: 1px solid color-mix(in srgb, var(--ia-panels-body-fg) 14%, transparent); border-radius: 10px; overflow: hidden; background: color-mix(in srgb, var(--ia-panels-body-bg) 94%, #fff); } .ia-eco-tab-head{ width: 100%; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; text-align: left; } .ia-eco-tab-head:hover{ background: color-mix(in srgb, var(--ia-panels-body-fg) 6%, #fff); } .ia-eco-tab-head-left, .ia-eco-tab-head-right{ display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .ia-eco-tab-head-right{ flex-shrink: 0; } .ia-eco-chevron{ display: inline-flex; align-items: center; justify-content: center; width: 12px; font-size: 13px; font-weight: 800; line-height: 1; transform: rotate(0deg); transition: transform 140ms ease; } .ia-eco-chevron.is-open{ transform: rotate(90deg); } .ia-eco-tab-title{ font-weight: 800; font-size: 12px; line-height: 1.2; } .ia-eco-tab-body{ display: flex; flex-direction: column; gap: 6px; border-top: 1px solid color-mix(in srgb, var(--ia-panels-body-fg) 10%, transparent); padding: 7px 9px 9px; } .ia-eco-check-list{ display: flex; flex-direction: column; gap: 5px; } .ia-eco-check-row{ display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid color-mix(in srgb, var(--ia-panels-body-fg) 12%, transparent); border-radius: 8px; padding: 4px 7px; } .ia-eco-check-main{ display: flex; flex-direction: column; gap: 1px; min-width: 0; } .ia-eco-check-label{ font-weight: 700; line-height: 1.2; } .ia-eco-check-detail{ font-size: 11px; line-height: 1.2; color: color-mix(in srgb, var(--ia-panels-body-fg) 78%, transparent); word-break: break-word; } .ia-eco-match-chip{ display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ia-panels-body-fg) 18%, transparent); padding: 1px 8px; font-size: 11px; line-height: 1.2; font-weight: 800; white-space: nowrap; } .ia-eco-match-chip.is-ok{ background: #ddf6e2; border-color: rgba(15, 110, 50, 0.28); } .ia-eco-match-chip.is-ko{ background: #fde8e8; border-color: rgba(154, 22, 22, 0.28); } .ia-eco-symbol-library{ max-height: 220px; overflow: auto; padding-right: 2px; scrollbar-width: thin; scrollbar-color: var(--ia-panels-scroll-thumb) var(--ia-panels-scroll-track); } .ia-eco-symbol-library::-webkit-scrollbar{ width: 10px; } .ia-eco-symbol-library::-webkit-scrollbar-track{ background: var(--ia-panels-scroll-track); } .ia-eco-symbol-library::-webkit-scrollbar-thumb{ background: var(--ia-panels-scroll-thumb); border-radius: 8px; border: 2px solid var(--ia-panels-scroll-track); } /* Taille uniforme du bouton fermer (X) pour toutes les pancartes */ .pmPanel .pmCloseBtn{ width:24px !important; height:24px !important; padding:0 !important; font-size:14px !important; line-height:24px !important; border-radius:0 !important; } /* =========================================================== Journal de trading =========================================================== */ #tradingJournalPanel{ background:#fff; border-left:1px solid var(--pm-ui-border) !important; border-top:1px solid var(--pm-ui-border) !important; border-bottom:1px solid var(--pm-ui-border) !important; box-shadow:-8px 0 24px rgba(0,0,0,0.08); overflow:hidden; display:flex; flex-direction:column; height:100vh; min-height:0; } #tradingJournalPanel .panelHeader{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px var(--pm-pad-x) !important; background: var(--pm-frame) !important; border-bottom:1px solid var(--pm-ui-border) !important; color: var(--pm-text) !important; flex:0 0 auto !important; } #tradingJournalPanel.pmPanelActive:not(.pmLinkedActive) .panelHeader{ background: var(--ia-panels-active-bg) !important; color: var(--ia-panels-active-fg) !important; border-bottom: 1px solid var(--pm-ui-border) !important; } #tradingJournalPanel .legendHeaderLine{ display:flex !important; flex-direction:row !important; align-items:baseline !important; gap:6px !important; white-space:nowrap !important; min-width:0 !important; } #tradingJournalPanel #tradingJournalPanelTitle{ font-weight:700 !important; font-size:13px !important; color:inherit !important; line-height:1.2 !important; margin:0 !important; padding:0 !important; display:inline !important; } #tradingJournalPanel #tradingJournalTitle{ font-weight:400 !important; font-size:12px !important; color:inherit !important; opacity:0.75 !important; line-height:1.2 !important; overflow:hidden !important; text-overflow:ellipsis !important; min-width:0 !important; margin:0 !important; padding:0 !important; display:inline !important; } #tradingJournalClose{ width:26px !important; height:26px !important; padding:0 !important; border-radius:0 !important; border:1px solid var(--pm-ui-border) !important; background: var(--pm-close-bg) !important; color: var(--pm-close-fg) !important; cursor:pointer; font-size:16px !important; line-height:26px !important; display:flex !important; align-items:center !important; justify-content:center !important; } #tradingJournalClose:hover{ background: var(--pm-close-bg-hover) !important; color: var(--pm-close-fg-hover) !important; } #tradingJournalBody{ flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important; overflow-x:hidden !important; padding:10px !important; box-sizing:border-box !important; background: var(--ia-panels-body-bg) !important; color: var(--ia-panels-body-fg) !important; scrollbar-width: thin; scrollbar-color: var(--ia-panels-scroll-thumb) var(--ia-panels-scroll-track); } #tradingJournalBody::-webkit-scrollbar{ width: 12px; } #tradingJournalBody::-webkit-scrollbar-track{ background: var(--ia-panels-scroll-track); } #tradingJournalBody::-webkit-scrollbar-thumb{ background: var(--ia-panels-scroll-thumb); border-radius: 10px; border: 2px solid var(--ia-panels-scroll-track); } #tradingJournalBody::-webkit-scrollbar-button{ background: var(--ia-panels-scroll-arrow); } #tradingJournalBody, #tradingJournalBody *{ font-size: var(--ia-typo-text-size); line-height: var(--ia-typo-line); } #tradingJournalBody .iaPanelSectionTitle{ font-size: var(--ia-typo-h2-size) !important; font-weight: var(--ia-typo-h2-weight) !important; line-height: var(--ia-typo-line) !important; color: var(--ia-panels-body-fg) !important; } .ia-trading-journal-root{ display:flex; flex-direction:column; gap:12px; } .ia-journal-toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; } .ia-journal-range-radios{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; } .ia-journal-radio{ display:inline-flex; align-items:center; gap:5px; padding:4px 8px; border-radius:999px; border:1px solid color-mix(in srgb, var(--ia-panels-body-fg) 16%, transparent); background: color-mix(in srgb, var(--ia-panels-body-fg) 5%, #fff); } .ia-journal-radio input{ margin:0; } .ia-journal-custom-range{ display:none; align-items:center; gap:8px; } .ia-journal-custom-range.is-visible{ display:inline-flex; } .ia-journal-custom-range label{ display:inline-flex; align-items:center; gap:4px; } .ia-journal-custom-range input[type="date"]{ height:28px; border:1px solid color-mix(in srgb, var(--ia-panels-body-fg) 18%, transparent); border-radius:6px; padding:0 6px; background:#fff; } .ia-journal-summary-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap:8px; } .ia-journal-kpi-card{ border: 1px solid color-mix(in srgb, var(--ia-panels-body-fg) 12%, transparent); border-radius: 10px; padding: 8px; background: color-mix(in srgb, var(--ia-panels-body-bg) 96%, #fff); display:flex; flex-direction:column; gap:4px; } .ia-journal-kpi-label{ color: color-mix(in srgb, var(--ia-panels-body-fg) 70%, transparent); font-size: 11px; } .ia-journal-kpi-value{ font-size: 14px; font-weight: 800; color: var(--ia-panels-body-fg); } .ia-journal-kpi-value.is-pos{ color: #1a8c4b !important; } .ia-journal-kpi-value.is-neg{ color: #b32020 !important; } .ia-journal-kpi-value.is-flat{ color: #4f5968 !important; } .ia-journal-summary-foot{ font-size: 11px; } .ia-journal-curve-wrap{ display:flex; flex-direction:column; gap:8px; } .ia-journal-curve{ width:100%; min-height:210px; border: 1px solid color-mix(in srgb, var(--ia-panels-body-fg) 14%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--ia-panels-body-fg) 3%, #fff); } .ia-journal-section-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; } .ia-journal-agg-modes{ display:inline-flex; align-items:center; gap:4px; } .ia-journal-agg-btn{ appearance:none; border:1px solid color-mix(in srgb, var(--ia-panels-body-fg) 16%, transparent); background:#fff; border-radius:999px; padding:4px 9px; font-size:11px; font-weight:700; cursor:pointer; color: color-mix(in srgb, var(--ia-panels-body-fg) 78%, transparent); } .ia-journal-agg-btn:hover{ color: var(--ia-panels-body-fg); } .ia-journal-agg-btn.is-active{ background:#0b6a72; border-color:#0b6a72; color:#fff; } .ia-journal-table-wrap{ overflow:auto; } .ia-journal-table{ width:100%; min-width:760px; border-collapse:collapse; } .ia-journal-table th, .ia-journal-table td{ border: 1px solid color-mix(in srgb, var(--ia-panels-body-fg) 12%, transparent); padding: 6px 7px; text-align:left; vertical-align:middle; font-size:11px; } .ia-journal-table th{ font-weight:800; background: color-mix(in srgb, var(--ia-panels-body-fg) 6%, #fff); } .ia-journal-table td.is-pos{ color:#1a8c4b !important; font-weight:700; } .ia-journal-table td.is-neg{ color:#b32020 !important; font-weight:700; } .ia-journal-table td.is-flat{ color:#4f5968 !important; font-weight:700; } .ia-journal-empty{ border: 1px dashed color-mix(in srgb, var(--ia-panels-body-fg) 20%, transparent); border-radius:10px; padding:10px; color: color-mix(in srgb, var(--ia-panels-body-fg) 72%, transparent); } /* =========================================================== Profil utilisateur =========================================================== */ #profilePanel{ background:#fff; border-left:1px solid var(--pm-ui-border) !important; border-top:1px solid var(--pm-ui-border) !important; border-bottom:1px solid var(--pm-ui-border) !important; box-shadow:-8px 0 24px rgba(0,0,0,0.08); overflow:hidden; display:flex; flex-direction:column; height:100vh; min-height:0; } #profilePanel .panelHeader{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px var(--pm-pad-x) !important; background: var(--pm-frame) !important; border-bottom:1px solid var(--pm-ui-border) !important; color: var(--pm-text) !important; flex:0 0 auto !important; } #profilePanel.pmPanelActive:not(.pmLinkedActive) .panelHeader{ background: var(--ia-panels-active-bg) !important; color: var(--ia-panels-active-fg) !important; border-bottom: 1px solid var(--pm-ui-border) !important; } #profilePanel .legendHeaderLine{ display:flex !important; flex-direction:row !important; align-items:baseline !important; gap:6px !important; white-space:nowrap !important; min-width:0 !important; } #profilePanel #profilePanelTitle{ font-weight:700 !important; font-size:13px !important; color:inherit !important; line-height:1.2 !important; margin:0 !important; padding:0 !important; display:inline !important; } #profilePanel #profileTitle{ font-weight:400 !important; font-size:12px !important; color:inherit !important; opacity:0.75 !important; line-height:1.2 !important; overflow:hidden !important; text-overflow:ellipsis !important; min-width:0 !important; margin:0 !important; padding:0 !important; display:inline !important; } #profileClose{ width:26px !important; height:26px !important; padding:0 !important; border-radius:0 !important; border:1px solid var(--pm-ui-border) !important; background: var(--pm-close-bg) !important; color: var(--pm-close-fg) !important; cursor:pointer; font-size:16px !important; line-height:26px !important; display:flex !important; align-items:center !important; justify-content:center !important; } #profileClose:hover{ background: var(--pm-close-bg-hover) !important; color: var(--pm-close-fg-hover) !important; } #profileBody{ flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important; overflow-x:hidden !important; padding:10px !important; box-sizing:border-box !important; background: var(--ia-panels-body-bg) !important; color: var(--ia-panels-body-fg) !important; scrollbar-width: thin; scrollbar-color: var(--ia-panels-scroll-thumb) var(--ia-panels-scroll-track); } #profileBody, #profileBody *{ font-size: var(--ia-typo-text-size); line-height: var(--ia-typo-line); } #profileBody::-webkit-scrollbar{ width:12px; } #profileBody::-webkit-scrollbar-track{ background: var(--ia-panels-scroll-track); } #profileBody::-webkit-scrollbar-thumb{ background: var(--ia-panels-scroll-thumb); border-radius:10px; border:2px solid var(--ia-panels-scroll-track); } #profileBody::-webkit-scrollbar-button{ background: var(--ia-panels-scroll-arrow); } #profileBody .iaPanelSectionTitle{ font-size: var(--ia-typo-h2-size) !important; font-weight: var(--ia-typo-h2-weight) !important; line-height: var(--ia-typo-line) !important; color: var(--ia-panels-body-fg) !important; } .ia-profile-root{ display:flex; flex-direction:column; gap:12px; } .ia-profile-note{ font-size:12px; line-height:1.35; color: color-mix(in srgb, var(--ia-panels-body-fg) 78%, transparent) !important; }