/* ========================= Floating Toolbar – CSS (full file) ========================= */ /* Core variables (valid: use :root) */ :root{ /* Toolbar (overridden by .ps-light skin) */ --toolbar-bg:#1e2530; --toolbar-bg-2:#202a36; --toolbar-border:#465061; --toolbar-outline:rgba(255,255,255,.04); --tile-hover:#2a3340; --tile-stroke:rgba(88,166,255,.28); --text-primary:#f0f6fc; --text-secondary:#8b949e; --accent-blue:#58a6ff; --accent-green:#3fb950; --accent-orange:#ff7b72; --accent-purple:#d2a8ff; --border-color:#30363d; --terminal-green:#00ff88; --code-comment:#6e7681; --sidebar-width:160px; --content-padding:15px; /* Base page colors so “Default” theme renders correctly */ --bg-primary:#0d1117; --bg-secondary:#161b22; --bg-tertiary:#21262d; /* Plot defaults (used elsewhere) */ --plot-bg:#ffffff; --plot-text:#0f172a; --plot-grid:rgba(0,0,0,.08); --plot-google:#16a34a; --plot-amazon:#ea580c; --plot-meta:#2563eb; --plot-gsc:#7c3aed; --plot-ads:#ca8a04; /* Grip/active accent (JS may override) */ --handle-accent: var(--accent-blue); /* Active icon color follows current theme’s foreground by default */ --toolbar-active: var(--text-primary); } /* Dark plotting when body carries a dark flag */ body.dark, body[data-theme="dark"]{ --plot-bg:#111827; --plot-text:#e5e7eb; --plot-grid:rgba(255,255,255,.10); --plot-google:#22c55e; --plot-amazon:#f59e0b; --plot-meta:#3b82f6; --plot-gsc:#a78bfa; --plot-ads:#eab308; } /* ========= THEME OVERRIDES (add class on ) ========= */ html.theme-terminal-green{ --bg-primary:#0a0f0a; --bg-secondary:#0f1410; --bg-tertiary:#171c17; --text-primary:#d1ffd1; --text-secondary:#94b894; --accent-green:#00ff88; --accent-blue:#79b8ff; --accent-orange:#ffb86b; --border-color:#2a2f2a; --handle-accent: var(--accent-green); } html.theme-amber-crt{ --bg-primary:#0f0a00; --bg-secondary:#161003; --bg-tertiary:#1e1607; --text-primary:#ffdca8; --text-secondary:#c9b38a; --accent-orange:#ffae00; --accent-blue:#8ab4ff; --accent-green:#49e68a; --border-color:#2b2316; --handle-accent: var(--accent-orange); } html.theme-bsod{ --bg-primary:#00256b; --bg-secondary:#012e80; --bg-tertiary:#073a93; --text-primary:#ffffff; --text-secondary:#d7e3ff; --accent-blue:#7aa2ff; --accent-orange:#ffb86b; --accent-green:#34d399; --border-color:#1b4aa0; --handle-accent: var(--accent-blue); } html.theme-c64{ --bg-primary:#03224c; --bg-secondary:#062b5f; --bg-tertiary:#0b3a7a; --text-primary:#a8caff; --text-secondary:#7ea6e6; --accent-purple:#d2a8ff; --accent-green:#3ee6aa; --accent-orange:#ffaf45; --border-color:#254e84; --handle-accent: var(--accent-purple); } html.theme-solarized-hc{ --bg-primary:#002b36; --bg-secondary:#073642; --bg-tertiary:#0b3a46; --text-primary:#eee8d5; --text-secondary:#c9c2b0; --accent-blue:#268bd2; --accent-green:#2aa198; --accent-orange:#cb4b16; --border-color:#31545a; --handle-accent: var(--accent-blue); } html.theme-monokai{ --bg-primary:#0d0f12; --bg-secondary:#16181d; --bg-tertiary:#1d2127; --text-primary:#f8f8f2; --text-secondary:#c7c8c2; --accent-green:#a6e22e; --accent-blue:#66d9ef; --accent-orange:#fd971f; --border-color:#2b313a; --handle-accent: var(--accent-green); } html.theme-hc-dark{ --bg-primary:#000; --bg-secondary:#0b0b0b; --bg-tertiary:#141414; --text-primary:#fff; --text-secondary:#ddd; --accent-blue:#79b8ff; --accent-green:#00e676; --accent-orange:#ffb74d; --border-color:#333; --handle-accent: var(--accent-blue); } html.theme-hc-light{ --bg-primary:#ffffff; --bg-secondary:#f7f7f7; --bg-tertiary:#eeeeee; --text-primary:#0b0b0b; --text-secondary:#333; --accent-blue:#0044cc; --accent-green:#0b7a25; --accent-orange:#b33a00; --border-color:#c7c7c7; --handle-accent: var(--accent-blue); } html.theme-dracula{ --bg-primary:#0f1220; --bg-secondary:#15182a; --bg-tertiary:#1d2240; --text-primary:#f8f8f2; --text-secondary:#c6c6c6; --accent-blue:#8be9fd; --accent-green:#50fa7b; --accent-orange:#ffb86c; --border-color:#2a2f55; --handle-accent: var(--accent-blue); } html.theme-nord-dark{ --bg-primary:#0b1220; --bg-secondary:#111a2e; --bg-tertiary:#172138; --text-primary:#e5e9f0; --text-secondary:#c2cad6; --accent-blue:#88c0d0; --accent-green:#a3be8c; --accent-orange:#d08770; --border-color:#25324a; --handle-accent: var(--accent-blue); } html.theme-isabel1{ --bg-primary:#16051f; --bg-secondary:#21072e; --bg-tertiary:#2d0a40; --text-primary:#ffbdf3; --text-secondary:#d88be0; --accent-pink:#ff66c4; --accent-purple:#b57fff; --accent-cyan:#70e1ff; --accent-blue:#8cbcff; --accent-green:#5fffb2; --border-color:#3c1a55; --handle-accent: var(--accent-pink); } html.theme-isabel2{ --bg-primary:#fde8f0; --bg-secondary:#fce1ea; --bg-tertiary:#f9d3df; --text-primary:#5a0a32; --text-secondary:#8b2255; --accent-pink:#e72f72; --accent-purple:#a03084; --accent-rose:#ff799a; --accent-gold:#f2b5b0; --accent-plum:#702963; --border-color:#dcb0c3; --handle-accent: var(--accent-pink); } /* ===== Photoshop-like Toolbar ===== */ .ps-toolbar{ position:fixed; left:20px; top:80px; width:60px; /* CHANGED: exact 2px side + bottom gutters */ padding:4px 2px 2px; background:linear-gradient(180deg,var(--toolbar-bg) 0%,var(--toolbar-bg-2) 100%); border:1px solid var(--toolbar-border); box-shadow:0 0 0 1px var(--toolbar-outline) inset, 0 12px 28px rgba(0,0,0,.55); z-index:1000; user-select:none; } .ps-toolbar::after{content:""; position:absolute; inset:0; box-shadow:inset 1px 0 0 rgba(255,255,255,.035); pointer-events:none;} .ps-toolbar__handle{ display:inline-flex; align-items:center; justify-content:center; height:12px; width:100%; border:1px solid var(--toolbar-border); color:var(--text-secondary); font-size:11px; line-height:1; cursor:move; background: var(--bg-tertiary); border-color: var(--border-color); } .ps-toolbar__grip{letter-spacing:1px; color: var(--text-primary) !important;} .ps-toolbar__grid{display:grid; grid-template-columns:26px 26px; gap:2px; list-style:none; margin:0; padding:0;} .ps-sep{grid-column:1 / -1; height:1px; margin:2px 1px; background:linear-gradient(90deg,transparent,var(--toolbar-border),transparent);} .ps-tool{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:3px; border:1px solid transparent; color:var(--ps-icon,var(--text-secondary)); background:transparent; text-decoration:none; outline:none; transition:background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease; } .ps-tool i{font-size:12px;} .ps-tool:hover{background:var(--tile-hover); color:var(--ps-icon-hover,var(--accent-blue)); border-color:var(--toolbar-border); box-shadow:0 0 0 1px var(--tile-stroke);} /* Single definitive active rule */ .ps-tool.is-active{ background: var(--tile-hover); color: var(--toolbar-active) !important; border-color: color-mix(in srgb, var(--toolbar-active) 70%, transparent) !important; box-shadow: 0 0 6px color-mix(in srgb, var(--toolbar-active) 60%, transparent), 0 0 0 1px var(--tile-stroke); } .ps-toolbar.is-dragging{opacity:.97; box-shadow:0 14px 34px rgba(0,0,0,.6); cursor:grabbing;} /* Light-only palette for toolbar itself */ .ps-toolbar.ps-light{ --toolbar-bg:#e9edf3; --toolbar-bg-2:#e1e6ee; --toolbar-border:#b8c0cc; --toolbar-outline:rgba(255,255,255,.85); --tile-hover:#d7dde7; --tile-stroke:rgba(88,166,255,.35); --ps-icon:#3f4856; --ps-icon-hover:#3f4856; } .ps-toolbar.ps-light::after{box-shadow:inset 1px 0 0 rgba(255,255,255,.9);} .ps-toolbar.ps-light .ps-toolbar__handle{ background:#f5f7fb; border-color:var(--toolbar-border); color:#6b7280; } /* Narrow toolbar primary button tweaks */ .ps-toolbar .ps-row .ps-tool--primary{ width:100%; height:26px; padding:0; display:inline-flex; align-items:center; justify-content:center; gap:0; border-radius:3px; } /* Hide labels in the narrow bar (fix invalid 'display: outside') */ .ps-toolbar .ps-row .ps-tool--primary .ps-label{display:none;} .ps-toolbar .ps-row .ps-tool--primary i{font-size:12px; line-height:1; margin:0;} .ps-toolbar .ps-row .ps-tool--primary:hover{text-shadow:0 0 6px rgba(0,255,213,.85);} .ps-toolbar .ps-row .ps-tool--primary.is-active{ box-shadow:0 0 0 1px rgba(0,255,213,.35) inset; border-color:var(--handle-accent); color:var(--handle-accent); } /* === THEME SWATCH (compact) ===================== */ .ps-theme-slot{ grid-column:1 / -1; padding-top:4px; } .ps-theme{ display:flex; justify-content:center; } .ps-theme-btn{ /* CHANGED: exact 2px side gutters (includes border), true center */ box-sizing:border-box; width:calc(100% - 4px); height:50px; margin:2px 2px 0; border-radius:4px; border:1px solid var(--toolbar-border); background:linear-gradient(135deg, var(--text-primary) 0 50%, var(--bg-tertiary) 50% 100%); box-shadow:0 0 0 1px var(--toolbar-outline) inset; cursor:pointer; outline:none; position:relative; } .ps-theme-btn:hover{ box-shadow:0 0 0 1px var(--tile-stroke), 0 0 0 1px var(--toolbar-outline) inset; } .ps-theme-btn:focus-visible{ box-shadow:0 0 0 2px var(--accent-blue), 0 0 0 1px var(--toolbar-outline) inset; } /* Popover */ .ps-theme-pop{ position:absolute; left:50%; transform:translateX(-50%); bottom:44px; min-width:190px; background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:5px; box-shadow:0 12px 28px rgba(0,0,0,.5); padding:4px; display:none; z-index:1200; } .ps-theme-pop[data-open="true"]{display:block;} .ps-theme-head{font-size:9px; color:var(--text-secondary); padding:3px 6px 4px; border-bottom:1px solid var(--border-color); margin-bottom:4px;} .ps-theme-list{display:grid; grid-template-columns:1fr 1fr; gap:4px;} .ps-theme-item{ display:flex; align-items:center; gap:6px; padding:4px 6px; border:1px solid var(--border-color); border-radius:4px; background:var(--bg-tertiary); color:var(--text-primary); font-size:9.5px; cursor:pointer; } .ps-theme-item[aria-checked="true"]{ box-shadow:0 0 0 1px var(--accent-blue) inset; border-color:var(--accent-blue); } .ps-theme-thumb{ position:relative; width:14px; height:14px; } .ps-theme-thumb .tile{ position:absolute; width:10px; height:10px; border:1px solid #00000040; border-radius:2px; } .ps-theme-thumb .tile.bg{ right:0; bottom:0; } .ps-theme-thumb .tile.fg{ left:0; top:0; } /* Animated tooltips (hover/focus). Auto-flip handled by .to-right on the bar. */ .ps-tool[data-tip]{ position:relative; } .ps-tool[data-tip]::after, .ps-tool[data-tip]::before{ position:absolute; pointer-events:none; opacity:0; transition:opacity .18s ease, transform .18s ease; } .ps-tool[data-tip]::after{ content:attr(data-tip); left:calc(100% + 8px); top:50%; transform:translateY(-50%) translateX(-4px); background:var(--bg-tertiary); color:var(--text-primary); border:1px solid var(--border-color); border-radius:4px; padding:6px 8px; font-size:11px; white-space:nowrap; z-index:2000; box-shadow:0 8px 18px rgba(0,0,0,.35); } .ps-tool[data-tip]::before{ content:""; left:calc(100% + 4px); top:50%; transform:translateY(-50%) translateX(-4px) rotate(45deg); width:8px; height:8px; background:var(--bg-tertiary); border-left:1px solid var(--border-color); border-top:1px solid var(--border-color); z-index:1999; } .ps-tool[data-tip]:hover::after, .ps-tool[data-tip]:hover::before, .ps-tool[data-tip]:focus-visible::after, .ps-tool[data-tip]:focus-visible::before{ opacity:1; transform:translateY(-50%) translateX(0); } .ps-toolbar.to-right .ps-tool[data-tip]::after{ right:calc(100% + 8px); left:auto; transform:translateY(-50%) translateX(4px); } .ps-toolbar.to-right .ps-tool[data-tip]::before{ right:calc(100% + 4px); left:auto; transform:translateY(-50%) translateX(4px) rotate(45deg); border-left:none; border-top:none; border-right:1px solid var(--border-color); border-bottom:1px solid var(--border-color); } /* Handle follows theme */ .ps-toolbar__top{ background:transparent; border:0; } .ps-toolbar.ps-light .ps-toolbar__handle{ background: var(--bg-tertiary) !important; border-color: var(--border-color) !important; color: var(--text-secondary) !important; } /* Grip glow (valid selector) */ html:not(.theme-hc-light):not(.theme-isabel2) .ps-toolbar__grip{ text-shadow: 0 0 2px var(--text-primary), 0 0 6px var(--handle-accent), 0 0 12px color-mix(in srgb, var(--handle-accent) 60%, transparent); } /* TEMP: disable floating toolbar globally */ .ps-toolbar { display: none !important; }