/* ════════════════════════════════════════════════════════════════════════ GANTT TOOLBAR — Earthy Redesign v9.0 ────────────────────────────────────────────────────────────────────── Strategy: icon + text labels (NOT icon-only). The Gantt's own DOM is too unpredictable to safely hide text — instead, embrace it and just recolour + add SVG icons next to the existing labels. ════════════════════════════════════════════════════════════════════════ */ /* ── Design tokens ──────────────────────────────────────────────────── */ #ganttOut { --gt-cream: #F4FDF9; --gt-parch: #E8F8F0; --gt-parch2: #D8F0E4; --gt-border: rgba(36,180,126,.22); --gt-text: #1B1A17; --gt-olive: #0F2D23; --gt-olive2: #188D68; --gt-honey: #24B47E; --gt-danger: #8B3A1F; } /* ════════════════════════════════════════════════════════════════════════ 1 · TOOLBAR SHELL ════════════════════════════════════════════════════════════════════════ */ #ganttOut .p6-toolbar.aipe-gantt-tools-v2, body[data-gantt-theme="light"] #ganttOut .p6-toolbar.aipe-gantt-tools-v2 { background: linear-gradient(180deg, #E8F8F0 0%, #D8F0E4 100%) !important; border: 1px solid var(--gt-border) !important; box-shadow: 0 1px 0 rgba(244,253,249,.90) inset, 0 6px 20px rgba(27,22,10,.06), 0 1px 4px rgba(27,22,10,.04) !important; gap: 10px !important; } /* ════════════════════════════════════════════════════════════════════════ 2 · TOOL-GROUP BLOCKS ════════════════════════════════════════════════════════════════════════ */ #ganttOut .aipe-tool-block, body[data-gantt-theme="light"] #ganttOut .aipe-tool-block { background: rgba(244,253,249,.94) !important; border: 1px solid var(--gt-border) !important; box-shadow: 0 1px 0 rgba(255,255,255,.88) inset, 0 2px 6px rgba(27,22,10,.06) !important; border-radius: 12px !important; } /* ── Group label (THEME / ZOOM / FOCUS / DISPLAY / LINKS) ──────────── */ #ganttOut .aipe-tool-block::before, body[data-gantt-theme="light"] #ganttOut .aipe-tool-block::before { color: rgba(36,180,126,.62) !important; font: 900 7px/1 "DM Sans", system-ui, sans-serif !important; letter-spacing: .14em !important; } /* ── LINK MODE spacer: collapse to fit its (now-relocated) button ─── */ #ganttOut .aipe-gantt-tools-v2 .v12-spacer, body[data-gantt-theme="light"] #ganttOut .aipe-gantt-tools-v2 .v12-spacer { background: rgba(244,253,249,.94) !important; border: 1px solid var(--gt-border) !important; box-shadow: 0 1px 0 rgba(255,255,255,.88) inset, 0 2px 6px rgba(27,22,10,.06) !important; border-radius: 12px !important; margin-left: 8px !important; align-self: center !important; min-width: unset !important; width: auto !important; flex-shrink: 0 !important; overflow: visible !important; /* Make it an inline-flex container so the relocated toggle sits properly next to the ::before label. */ display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 4px !important; } #ganttOut .aipe-gantt-tools-v2 .v12-spacer::before, body[data-gantt-theme="light"] #ganttOut .aipe-gantt-tools-v2 .v12-spacer::before { color: rgba(36,180,126,.62) !important; font: 900 7px/1 "DM Sans", system-ui, sans-serif !important; letter-spacing: .14em !important; } /* Force the relocated link toggle to be visible with proper styling */ #ganttOut .aipe-gantt-tools-v2 .v12-spacer #ganttLinkHandlesToggle, body[data-gantt-theme="light"] #ganttOut .aipe-gantt-tools-v2 .v12-spacer #ganttLinkHandlesToggle { display: inline-flex !important; align-items: center !important; gap: 6px !important; height: 28px !important; min-height: 28px !important; padding: 0 12px !important; font-size: 11px !important; font-weight: 700 !important; white-space: nowrap !important; background: var(--gt-cream) !important; border: 1px solid var(--gt-border) !important; color: var(--gt-text) !important; border-radius: 9px !important; box-shadow: 0 1px 0 rgba(255,255,255,.88) inset, 0 1px 3px rgba(27,22,10,.06) !important; } /* ════════════════════════════════════════════════════════════════════════ 3 · BUTTONS — pill rectangles with icon + label ════════════════════════════════════════════════════════════════════════ */ #ganttOut .aipe-tool-block .v12-menu-trigger, #ganttOut .aipe-tool-block .p6-tb-btn.v12-direct, #ganttOut .aipe-gantt-tools-v2 #ganttLinkHandlesToggle, body[data-gantt-theme="light"] #ganttOut .aipe-tool-block .v12-menu-trigger, body[data-gantt-theme="light"] #ganttOut .aipe-tool-block .p6-tb-btn.v12-direct, body[data-gantt-theme="light"] #ganttOut .aipe-gantt-tools-v2 #ganttLinkHandlesToggle { /* Reset the icon-only constraints from v8 — allow natural sizing */ width: auto !important; min-width: auto !important; max-width: none !important; /* Earthy colours */ background: var(--gt-cream) !important; border: 1px solid var(--gt-border) !important; color: var(--gt-text) !important; box-shadow: 0 1px 0 rgba(255,255,255,.88) inset, 0 1px 3px rgba(27,22,10,.06) !important; border-radius: 9px !important; /* Icon + text spacing */ gap: 6px !important; transition: background .15s, border-color .15s, box-shadow .15s, transform .15s !important; } /* ── Hover ─────────────────────────────────────────────────────────── */ #ganttOut .aipe-tool-block .v12-menu-trigger:hover, #ganttOut .aipe-tool-block .p6-tb-btn.v12-direct:hover, #ganttOut .aipe-gantt-tools-v2 #ganttLinkHandlesToggle:hover, body[data-gantt-theme="light"] #ganttOut .aipe-tool-block .v12-menu-trigger:hover, body[data-gantt-theme="light"] #ganttOut .aipe-tool-block .p6-tb-btn.v12-direct:hover, body[data-gantt-theme="light"] #ganttOut .aipe-gantt-tools-v2 #ganttLinkHandlesToggle:hover { background: #E8F8F0 !important; border-color: rgba(36,180,126,.55) !important; box-shadow: 0 1px 0 rgba(255,255,255,.90) inset, 0 0 0 3px rgba(36,180,126,.12), 0 4px 10px rgba(36,180,126,.10) !important; transform: translateY(-1px) !important; } /* ── Active / ON (olive) ───────────────────────────────────────────── */ #ganttOut .aipe-tool-block .p6-tb-btn.v12-direct.on, body[data-gantt-theme="light"] #ganttOut .aipe-tool-block .p6-tb-btn.v12-direct.on, #ganttOut .aipe-gantt-tools-v2 #ganttLinkHandlesToggle.on, body[data-gantt-theme="light"] #ganttOut .aipe-gantt-tools-v2 #ganttLinkHandlesToggle.on { background: linear-gradient(160deg, #4D6733 0%, #38501F 100%) !important; border-color: rgba(74,99,48,.55) !important; color: #EFF7E2 !important; box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 4px 12px rgba(58,81,37,.26) !important; transform: none !important; } /* ── Critical path active — danger red ─────────────────────────────── */ #ganttOut .aipe-tool-block .p6-tb-btn.v12-direct.on.crit, body[data-gantt-theme="light"] #ganttOut .aipe-tool-block .p6-tb-btn.v12-direct.on.crit { background: linear-gradient(160deg, #8B3A1F 0%, #6E2A12 100%) !important; border-color: rgba(184,105,62,.48) !important; color: #FEEEE6 !important; box-shadow: 0 4px 12px rgba(139,58,31,.26) !important; } /* ── Dropdown caret colour ─────────────────────────────────────────── */ #ganttOut .aipe-tool-block .v12-menu-trigger::after, body[data-gantt-theme="light"] #ganttOut .aipe-tool-block .v12-menu-trigger::after { color: rgba(62,74,42,.55) !important; } /* ════════════════════════════════════════════════════════════════════════ 4 · THEME TOGGLE — dark-charcoal when active (NOT olive) ════════════════════════════════════════════════════════════════════════ */ #ganttOut .aipe-tool-block .v12-theme-switch, body[data-gantt-theme="light"] #ganttOut .aipe-tool-block .v12-theme-switch { background: rgba(245,240,230,.88) !important; border: 1px solid var(--gt-border) !important; box-shadow: 0 1px 0 rgba(255,255,255,.72) inset !important; } #ganttOut .aipe-tool-block .v12-switch-btn, body[data-gantt-theme="light"] #ganttOut .aipe-tool-block .v12-switch-btn { color: rgba(27,26,23,.55) !important; font-weight: 600 !important; } #ganttOut .aipe-tool-block .v12-switch-btn.active, body[data-gantt-theme="light"] #ganttOut .aipe-tool-block .v12-switch-btn.active { background: linear-gradient(160deg, #2C2B26 0%, #1B1A17 100%) !important; color: #E8F8F0 !important; box-shadow: 0 1px 0 rgba(255,255,255,.10) inset, 0 3px 8px rgba(0,0,0,.30) !important; } /* ════════════════════════════════════════════════════════════════════════ 5 · DROPDOWN PANEL ════════════════════════════════════════════════════════════════════════ */ #ganttOut .aipe-tool-block .v12-menu-panel, body[data-gantt-theme="light"] #ganttOut .aipe-tool-block .v12-menu-panel { background: rgba(244,253,249,.98) !important; border: 1px solid var(--gt-border) !important; box-shadow: 0 24px 52px rgba(27,22,10,.14), 0 4px 12px rgba(27,22,10,.07) !important; color: var(--gt-text) !important; } #ganttOut .aipe-tool-block .v12-menu-item, body[data-gantt-theme="light"] #ganttOut .aipe-tool-block .v12-menu-item { color: var(--gt-text) !important; } #ganttOut .aipe-tool-block .v12-menu-item:hover, body[data-gantt-theme="light"] #ganttOut .aipe-tool-block .v12-menu-item:hover { background: linear-gradient(180deg, #E8F8F0, #D8F0E4) !important; box-shadow: inset 0 0 0 1px rgba(36,180,126,.18) !important; } #ganttOut .aipe-tool-block .v12-menu-item.active, body[data-gantt-theme="light"] #ganttOut .aipe-tool-block .v12-menu-item.active { background: linear-gradient(180deg, #D8F0E4, #C0E4D4) !important; color: var(--gt-olive) !important; box-shadow: inset 0 0 0 1px rgba(36,180,126,.25) !important; } /* ════════════════════════════════════════════════════════════════════════ 6 · SVG ICONS (prepended by JS, sit next to existing text labels) ════════════════════════════════════════════════════════════════════════ */ /* Kill legacy character ::before badges — SVGs replace them */ #ganttOut .aipe-tool-block .v12-menu-trigger::before, #ganttOut .aipe-tool-block .p6-tb-btn.v12-direct::before, #ganttOut .aipe-gantt-tools-v2 #ganttLinkHandlesToggle::before, body[data-gantt-theme="light"] #ganttOut .aipe-tool-block .v12-menu-trigger::before, body[data-gantt-theme="light"] #ganttOut .aipe-tool-block .p6-tb-btn.v12-direct::before, body[data-gantt-theme="light"] #ganttOut .aipe-gantt-tools-v2 #ganttLinkHandlesToggle::before { display: none !important; content: none !important; } /* SVG wrapper */ #ganttOut .gt-icon-svg { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; width: 16px !important; height: 16px !important; opacity: .82 !important; pointer-events: none !important; } #ganttOut .gt-icon-svg svg { width: 15px !important; height: 15px !important; display: block !important; stroke-width: 2 !important; } /* Brighter icon when active */ #ganttOut .p6-tb-btn.v12-direct.on .gt-icon-svg, #ganttOut .aipe-gantt-tools-v2 #ganttLinkHandlesToggle.on .gt-icon-svg, #ganttOut .v12-switch-btn.active .gt-icon-svg { opacity: 1 !important; } /* Hide DOM label spans from addBlockLabel — ::before already shows it */ #ganttOut .gt-block-label { display: none !important; } /* ════════════════════════════════════════════════════════════════════════ 7 · PERFORMANCE DEMO BAR — dark navy ════════════════════════════════════════════════════════════════════════ */ #perf-demo-bar.aipe-perf-demo-v2 > div { background: linear-gradient(180deg, #102A4C 0%, #071A33 100%) !important; border: 1px solid rgba(36,180,126,.20) !important; box-shadow: 0 12px 32px rgba(4,14,28,.22), inset 0 1px 0 rgba(255,255,255,.05) !important; } #perf-demo-bar.aipe-perf-demo-v2 b::before { background: linear-gradient(160deg, #24B47E, #188D68) !important; color: #FFFFFF !important; } #perf-demo-bar.aipe-perf-demo-v2 b { color: #24B47E !important; } #perf-demo-bar.aipe-perf-demo-v2 span { color: rgba(36,180,126,.48) !important; } #perf-demo-bar.aipe-perf-demo-v2 button { background: rgba(36,180,126,.07) !important; border: 1px solid rgba(36,180,126,.13) !important; color: rgba(36,180,126,.74) !important; } #perf-demo-bar.aipe-perf-demo-v2 button:hover { background: rgba(36,180,126,.13) !important; border-color: rgba(36,180,126,.42) !important; color: #E8F8F0 !important; transform: translateY(-1px) !important; } #perf-demo-bar.aipe-perf-demo-v2 button:nth-of-type(1) { background: linear-gradient(160deg, #E4DFD0, #D0CABB) !important; border-color: rgba(210,200,178,.65) !important; color: #262E1C !important; } #perf-demo-bar.aipe-perf-demo-v2 button:nth-of-type(2) { background: rgba(68,82,52,.60) !important; border-color: rgba(122,152,84,.26) !important; color: #CADAAC !important; } #perf-demo-bar.aipe-perf-demo-v2 button:nth-of-type(3) { background: rgba(42,56,28,.78) !important; border-color: rgba(84,115,52,.34) !important; color: #B8CC94 !important; } #perf-demo-bar.aipe-perf-demo-v2 button:nth-of-type(4) { background: rgba(105,32,20,.72) !important; border-color: rgba(192,90,62,.28) !important; color: #FFCEC4 !important; } #perf-demo-bar.aipe-perf-demo-v2 button:nth-of-type(5) { background: rgba(36,180,126,.22) !important; border-color: rgba(36,180,126,.44) !important; color: #B8EACC !important; } #perf-demo-bar.aipe-perf-demo-v2 button:nth-of-type(6) { background: linear-gradient(160deg, #235C3C, #184828) !important; border-color: rgba(55,152,86,.34) !important; color: #B8EACC !important; } #perf-demo-bar.aipe-perf-demo-v2 #perf-demo-status { color: rgba(36,180,126,.42) !important; } /* ════════════════════════════════════════════════════════════════════════ 8 · LEGEND + ROW COUNT ════════════════════════════════════════════════════════════════════════ */ #ganttOut .p6-legend .p6-leg, body[data-gantt-theme="light"] #ganttOut .p6-legend .p6-leg { background: rgba(244,253,249,.96) !important; border: 1px solid var(--gt-border) !important; color: var(--gt-text) !important; box-shadow: 0 2px 6px rgba(27,22,10,.06) !important; } #ganttOut .p6-rowcount, body[data-gantt-theme="light"] #ganttOut .p6-rowcount { background: rgba(244,253,249,.94) !important; border: 1px solid var(--gt-border) !important; color: rgba(27,26,23,.64) !important; } /* ════════════════════════════════════════════════════════════════════════ 9 · DARK GANTT THEME — keep our icon-hiding rules ════════════════════════════════════════════════════════════════════════ */ body[data-gantt-theme="dark"] #ganttOut .aipe-tool-block .v12-menu-trigger::before, body[data-gantt-theme="dark"] #ganttOut .aipe-tool-block .p6-tb-btn.v12-direct::before, body[data-gantt-theme="dark"] #ganttOut .aipe-gantt-tools-v2 #ganttLinkHandlesToggle::before, body[data-gantt-theme="dark"] #ganttOut .aipe-tool-block .v12-switch-btn::before { display: none !important; content: none !important; }