2025-12-02 20:33:40 +00:00
|
|
|
/* ==========================================================================
|
|
|
|
|
Python Profiler - Shared CSS Foundation
|
|
|
|
|
Design system shared between Flamegraph and Heatmap viewers
|
|
|
|
|
========================================================================== */
|
|
|
|
|
|
|
|
|
|
/* --------------------------------------------------------------------------
|
|
|
|
|
CSS Variables & Theme System
|
|
|
|
|
-------------------------------------------------------------------------- */
|
|
|
|
|
|
|
|
|
|
:root {
|
|
|
|
|
/* Typography */
|
|
|
|
|
--font-sans: "Source Sans Pro", "Lucida Grande", "Lucida Sans Unicode",
|
|
|
|
|
"Geneva", "Verdana", sans-serif;
|
|
|
|
|
--font-mono: 'SF Mono', 'Monaco', 'Consolas', 'Liberation Mono', monospace;
|
|
|
|
|
|
|
|
|
|
/* Python brand colors (theme-independent) */
|
|
|
|
|
--python-blue: #3776ab;
|
|
|
|
|
--python-blue-light: #4584bb;
|
|
|
|
|
--python-blue-lighter: #5592cc;
|
|
|
|
|
--python-gold: #ffd43b;
|
|
|
|
|
--python-gold-dark: #ffcd02;
|
|
|
|
|
--python-gold-light: #ffdc5c;
|
|
|
|
|
|
|
|
|
|
/* Heat palette - defined per theme below */
|
|
|
|
|
|
|
|
|
|
/* Layout */
|
|
|
|
|
--sidebar-width: 280px;
|
|
|
|
|
--sidebar-collapsed: 44px;
|
|
|
|
|
--topbar-height: 56px;
|
|
|
|
|
--statusbar-height: 32px;
|
|
|
|
|
|
2025-12-11 03:41:47 +00:00
|
|
|
/* Border radius */
|
|
|
|
|
--radius-sm: 4px;
|
|
|
|
|
--radius-md: 8px;
|
|
|
|
|
--radius-lg: 12px;
|
|
|
|
|
|
2025-12-02 20:33:40 +00:00
|
|
|
/* Transitions */
|
|
|
|
|
--transition-fast: 0.15s ease;
|
|
|
|
|
--transition-normal: 0.25s ease;
|
2025-12-12 17:27:12 +00:00
|
|
|
--transition-slow: 0.3s ease;
|
2025-12-02 20:33:40 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Light theme (default) */
|
|
|
|
|
:root, [data-theme="light"] {
|
|
|
|
|
--bg-primary: #ffffff;
|
|
|
|
|
--bg-secondary: #f8f9fa;
|
|
|
|
|
--bg-tertiary: #e9ecef;
|
|
|
|
|
--border: #e9ecef;
|
|
|
|
|
--border-subtle: #f0f2f5;
|
|
|
|
|
|
|
|
|
|
--text-primary: #2e3338;
|
|
|
|
|
--text-secondary: #5a6c7d;
|
2025-12-08 02:51:51 +02:00
|
|
|
--text-muted: #6f767e;
|
2025-12-02 20:33:40 +00:00
|
|
|
|
|
|
|
|
--accent: #3776ab;
|
|
|
|
|
--accent-hover: #2d5aa0;
|
|
|
|
|
--accent-glow: rgba(55, 118, 171, 0.15);
|
|
|
|
|
|
|
|
|
|
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
|
|
|
|
|
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
|
|
|
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
|
|
|
|
|
|
|
|
|
|
--header-gradient: linear-gradient(135deg, #3776ab 0%, #4584bb 100%);
|
|
|
|
|
|
|
|
|
|
/* Light mode heat palette - blue to yellow to orange to red (cold to hot) */
|
2025-12-06 14:09:10 -08:00
|
|
|
--heat-1: #7ba3d1;
|
2025-12-02 20:33:40 +00:00
|
|
|
--heat-2: #a8d0ef;
|
2025-12-06 14:09:10 -08:00
|
|
|
--heat-3: #d6e9f8;
|
2025-12-02 20:33:40 +00:00
|
|
|
--heat-4: #ffe6a8;
|
|
|
|
|
--heat-5: #ffd43b;
|
|
|
|
|
--heat-6: #ffb84d;
|
|
|
|
|
--heat-7: #ff9966;
|
|
|
|
|
--heat-8: #ff6347;
|
|
|
|
|
|
|
|
|
|
/* Code view specific */
|
|
|
|
|
--code-bg: #ffffff;
|
|
|
|
|
--code-bg-line: #f8f9fa;
|
|
|
|
|
--code-border: #e9ecef;
|
|
|
|
|
--code-text: #2e3338;
|
|
|
|
|
--code-text-muted: #8b949e;
|
|
|
|
|
--code-accent: #3776ab;
|
|
|
|
|
|
|
|
|
|
/* Navigation colors */
|
|
|
|
|
--nav-caller: #2563eb;
|
|
|
|
|
--nav-caller-hover: #1d4ed8;
|
|
|
|
|
--nav-callee: #dc2626;
|
|
|
|
|
--nav-callee-hover: #b91c1c;
|
2025-12-11 03:41:47 +00:00
|
|
|
|
|
|
|
|
/* Specialization status colors */
|
|
|
|
|
--spec-high: #4caf50;
|
|
|
|
|
--spec-high-text: #2e7d32;
|
|
|
|
|
--spec-high-bg: rgba(76, 175, 80, 0.15);
|
|
|
|
|
--spec-medium: #ff9800;
|
|
|
|
|
--spec-medium-text: #e65100;
|
|
|
|
|
--spec-medium-bg: rgba(255, 152, 0, 0.15);
|
|
|
|
|
--spec-low: #9e9e9e;
|
|
|
|
|
--spec-low-text: #616161;
|
|
|
|
|
--spec-low-bg: rgba(158, 158, 158, 0.15);
|
|
|
|
|
|
|
|
|
|
/* Heatmap span highlighting colors */
|
|
|
|
|
--span-hot-base: 255, 100, 50;
|
|
|
|
|
--span-cold-base: 150, 150, 150;
|
2025-12-25 20:28:13 +02:00
|
|
|
|
|
|
|
|
/* Summary card colors - optimized for 4.5:1 contrast on light bg */
|
|
|
|
|
--card-blue: 44, 102, 149;
|
|
|
|
|
--card-green: 26, 116, 49;
|
|
|
|
|
--card-yellow: 134, 100, 4;
|
|
|
|
|
--card-purple: 102, 57, 166;
|
|
|
|
|
--card-red: 180, 40, 50;
|
|
|
|
|
--card-orange: 166, 90, 0;
|
2025-12-02 20:33:40 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Dark theme */
|
|
|
|
|
[data-theme="dark"] {
|
|
|
|
|
--bg-primary: #0d1117;
|
|
|
|
|
--bg-secondary: #161b22;
|
|
|
|
|
--bg-tertiary: #21262d;
|
|
|
|
|
--border: #30363d;
|
|
|
|
|
--border-subtle: #21262d;
|
|
|
|
|
|
|
|
|
|
--text-primary: #e6edf3;
|
|
|
|
|
--text-secondary: #8b949e;
|
2025-12-08 02:51:51 +02:00
|
|
|
--text-muted: #757e8a;
|
2025-12-02 20:33:40 +00:00
|
|
|
|
|
|
|
|
--accent: #58a6ff;
|
|
|
|
|
--accent-hover: #79b8ff;
|
|
|
|
|
--accent-glow: rgba(88, 166, 255, 0.15);
|
|
|
|
|
|
|
|
|
|
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
|
|
|
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
|
|
|
|
|
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
|
|
|
|
|
|
|
|
|
|
--header-gradient: linear-gradient(135deg, #21262d 0%, #30363d 100%);
|
|
|
|
|
|
2025-12-16 20:58:56 +00:00
|
|
|
/* Dark mode heat palette - cool to warm gradient for visualization */
|
|
|
|
|
--heat-1: rgba(90, 123, 167, 1);
|
|
|
|
|
--heat-2: rgba(106, 148, 168, 1);
|
|
|
|
|
--heat-3: rgba(122, 172, 172, 1);
|
|
|
|
|
--heat-4: rgba(142, 196, 152, 1);
|
|
|
|
|
--heat-5: rgba(168, 216, 136, 1);
|
|
|
|
|
--heat-6: rgba(200, 222, 122, 1);
|
|
|
|
|
--heat-7: rgba(244, 212, 93, 1);
|
|
|
|
|
--heat-8: rgba(255, 122, 69, 1);
|
2025-12-02 20:33:40 +00:00
|
|
|
|
|
|
|
|
/* Code view specific - dark mode */
|
|
|
|
|
--code-bg: #0d1117;
|
|
|
|
|
--code-bg-line: #161b22;
|
|
|
|
|
--code-border: #30363d;
|
|
|
|
|
--code-text: #e6edf3;
|
|
|
|
|
--code-text-muted: #6e7681;
|
|
|
|
|
--code-accent: #58a6ff;
|
|
|
|
|
|
|
|
|
|
/* Navigation colors - dark theme friendly */
|
|
|
|
|
--nav-caller: #58a6ff;
|
|
|
|
|
--nav-caller-hover: #4184e4;
|
|
|
|
|
--nav-callee: #f87171;
|
|
|
|
|
--nav-callee-hover: #e53e3e;
|
2025-12-11 03:41:47 +00:00
|
|
|
|
|
|
|
|
/* Specialization status colors - dark theme */
|
|
|
|
|
--spec-high: #81c784;
|
|
|
|
|
--spec-high-text: #81c784;
|
|
|
|
|
--spec-high-bg: rgba(129, 199, 132, 0.2);
|
|
|
|
|
--spec-medium: #ffb74d;
|
|
|
|
|
--spec-medium-text: #ffb74d;
|
|
|
|
|
--spec-medium-bg: rgba(255, 183, 77, 0.2);
|
|
|
|
|
--spec-low: #bdbdbd;
|
|
|
|
|
--spec-low-text: #9e9e9e;
|
|
|
|
|
--spec-low-bg: rgba(189, 189, 189, 0.15);
|
|
|
|
|
|
|
|
|
|
/* Heatmap span highlighting colors - dark theme */
|
|
|
|
|
--span-hot-base: 255, 107, 53;
|
|
|
|
|
--span-cold-base: 189, 189, 189;
|
2025-12-25 20:28:13 +02:00
|
|
|
|
|
|
|
|
/* Summary card colors - optimized for 4.5:1 contrast on dark bg */
|
|
|
|
|
--card-blue: 88, 166, 255;
|
|
|
|
|
--card-green: 63, 185, 80;
|
|
|
|
|
--card-yellow: 210, 153, 34;
|
|
|
|
|
--card-purple: 163, 113, 247;
|
|
|
|
|
--card-red: 248, 113, 113;
|
|
|
|
|
--card-orange: 251, 146, 60;
|
2025-12-02 20:33:40 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* --------------------------------------------------------------------------
|
|
|
|
|
Base Styles
|
|
|
|
|
-------------------------------------------------------------------------- */
|
|
|
|
|
|
|
|
|
|
*, *::before, *::after {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
html, body {
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
font-family: var(--font-sans);
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
line-height: 1.6;
|
|
|
|
|
color: var(--text-primary);
|
|
|
|
|
background: var(--bg-primary);
|
|
|
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
|
-moz-osx-font-smoothing: grayscale;
|
|
|
|
|
transition: background var(--transition-normal), color var(--transition-normal);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* --------------------------------------------------------------------------
|
|
|
|
|
Layout Structure
|
|
|
|
|
-------------------------------------------------------------------------- */
|
|
|
|
|
|
|
|
|
|
.app-layout {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* --------------------------------------------------------------------------
|
|
|
|
|
Top Bar
|
|
|
|
|
-------------------------------------------------------------------------- */
|
|
|
|
|
|
|
|
|
|
.top-bar {
|
|
|
|
|
height: var(--topbar-height);
|
|
|
|
|
background: var(--header-gradient);
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding: 0 16px;
|
|
|
|
|
gap: 16px;
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
box-shadow: 0 2px 10px rgba(55, 118, 171, 0.25);
|
|
|
|
|
border-bottom: 2px solid var(--python-gold);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Brand / Logo */
|
|
|
|
|
.brand {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 12px;
|
|
|
|
|
color: white;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.brand-logo {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
gh-140727: Restructure profiling documentation for PEP 799 (#142373)
* Add profiling module documentation structure
PEP 799 introduces a new `profiling` package that reorganizes Python's
profiling tools under a unified namespace. This commit adds the documentation
structure to match: a main entry point (profiling.rst) that helps users choose
between profilers, detailed docs for the tracing profiler (profiling-tracing.rst),
and separated pstats documentation.
The tracing profiler docs note that cProfile remains as a backward-compatible
alias, so existing code continues to work. The pstats module gets its own page
since it's used by both profiler types and deserves focused documentation.
* Add profiling.sampling documentation
The sampling profiler is new in Python 3.15 and works fundamentally differently
from the tracing profiler. It observes programs from outside by periodically
capturing stack snapshots, which means zero overhead on the profiled code. This
makes it practical for production use where you can attach to live servers.
The docs explain the key concepts (statistical vs deterministic profiling),
provide quick examples upfront, document all output formats (pstats, flamegraph,
gecko, heatmap), and cover the live TUI mode. The defaults table helps users
understand what happens without any flags.
* Wire profiling docs into the documentation tree
Add the new profiling module pages to the Debugging and Profiling toctree.
The order places the main profiling.rst entry point first, followed by the
two profiler implementations, then pstats, and finally the deprecated profile
module last.
* Convert profile.rst to deprecation stub
The pure Python profile module is deprecated in 3.15 and scheduled for removal
in 3.17. Users should migrate to profiling.tracing (or use the cProfile alias
which continues to work).
The page now focuses on helping existing users migrate: it shows the old vs new
import style, keeps the shared API reference since both modules have the same
interface, and preserves the calibration docs for anyone still using the pure
Python implementation during the transition period.
* Update CLI module references for profiling restructure
Point cProfile to profiling.tracing docs and add profiling.sampling to the
list of modules with CLI interfaces. The old profile-cli label no longer
exists after the documentation restructure.
* Update whatsnew to link to profiling module docs
Enable cross-references to the new profiling module documentation and update
the CLI examples to use the current syntax with the attach subcommand. Also
reference profiling.tracing instead of cProfile since that's the new canonical
name.
2025-12-09 12:55:04 +00:00
|
|
|
width: 48px;
|
|
|
|
|
height: 40px;
|
2025-12-02 20:33:40 +00:00
|
|
|
flex-shrink: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Style the inlined SVG/img inside brand-logo */
|
|
|
|
|
.brand-logo svg,
|
|
|
|
|
.brand-logo img {
|
gh-140727: Restructure profiling documentation for PEP 799 (#142373)
* Add profiling module documentation structure
PEP 799 introduces a new `profiling` package that reorganizes Python's
profiling tools under a unified namespace. This commit adds the documentation
structure to match: a main entry point (profiling.rst) that helps users choose
between profilers, detailed docs for the tracing profiler (profiling-tracing.rst),
and separated pstats documentation.
The tracing profiler docs note that cProfile remains as a backward-compatible
alias, so existing code continues to work. The pstats module gets its own page
since it's used by both profiler types and deserves focused documentation.
* Add profiling.sampling documentation
The sampling profiler is new in Python 3.15 and works fundamentally differently
from the tracing profiler. It observes programs from outside by periodically
capturing stack snapshots, which means zero overhead on the profiled code. This
makes it practical for production use where you can attach to live servers.
The docs explain the key concepts (statistical vs deterministic profiling),
provide quick examples upfront, document all output formats (pstats, flamegraph,
gecko, heatmap), and cover the live TUI mode. The defaults table helps users
understand what happens without any flags.
* Wire profiling docs into the documentation tree
Add the new profiling module pages to the Debugging and Profiling toctree.
The order places the main profiling.rst entry point first, followed by the
two profiler implementations, then pstats, and finally the deprecated profile
module last.
* Convert profile.rst to deprecation stub
The pure Python profile module is deprecated in 3.15 and scheduled for removal
in 3.17. Users should migrate to profiling.tracing (or use the cProfile alias
which continues to work).
The page now focuses on helping existing users migrate: it shows the old vs new
import style, keeps the shared API reference since both modules have the same
interface, and preserves the calibration docs for anyone still using the pure
Python implementation during the transition period.
* Update CLI module references for profiling restructure
Point cProfile to profiling.tracing docs and add profiling.sampling to the
list of modules with CLI interfaces. The old profile-cli label no longer
exists after the documentation restructure.
* Update whatsnew to link to profiling module docs
Enable cross-references to the new profiling module documentation and update
the CLI examples to use the current syntax with the attach subcommand. Also
reference profiling.tracing instead of cProfile since that's the new canonical
name.
2025-12-09 12:55:04 +00:00
|
|
|
width: 48px;
|
|
|
|
|
height: 40px;
|
2025-12-02 20:33:40 +00:00
|
|
|
display: block;
|
|
|
|
|
object-fit: contain;
|
|
|
|
|
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.brand-info {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
line-height: 1.15;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.brand-text {
|
2025-12-09 18:51:57 +00:00
|
|
|
font-family: var(--font-sans);
|
2025-12-02 20:33:40 +00:00
|
|
|
font-weight: 700;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
letter-spacing: -0.3px;
|
|
|
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
|
2025-12-09 18:51:57 +00:00
|
|
|
color: inherit;
|
|
|
|
|
text-decoration: none;
|
2025-12-02 20:33:40 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.brand-subtitle {
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
font-size: 10px;
|
|
|
|
|
opacity: 0.9;
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
letter-spacing: 0.5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.brand-divider {
|
|
|
|
|
width: 1px;
|
|
|
|
|
height: 16px;
|
|
|
|
|
background: rgba(255, 255, 255, 0.3);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Toolbar */
|
|
|
|
|
.toolbar {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 6px;
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.toolbar-btn {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
width: 32px;
|
|
|
|
|
height: 32px;
|
|
|
|
|
padding: 0;
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
color: white;
|
|
|
|
|
background: rgba(255, 255, 255, 0.12);
|
|
|
|
|
border: 1px solid rgba(255, 255, 255, 0.18);
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
cursor: pointer;
|
2025-12-11 21:28:42 +00:00
|
|
|
text-decoration: none;
|
2025-12-02 20:33:40 +00:00
|
|
|
transition: all var(--transition-fast);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.toolbar-btn:hover {
|
|
|
|
|
background: rgba(255, 255, 255, 0.22);
|
|
|
|
|
border-color: rgba(255, 255, 255, 0.35);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.toolbar-btn:active {
|
|
|
|
|
transform: scale(0.95);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* --------------------------------------------------------------------------
|
|
|
|
|
Status Bar
|
|
|
|
|
-------------------------------------------------------------------------- */
|
|
|
|
|
|
|
|
|
|
.status-bar {
|
|
|
|
|
height: var(--statusbar-height);
|
|
|
|
|
background: var(--bg-secondary);
|
|
|
|
|
border-top: 1px solid var(--border);
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding: 0 16px;
|
|
|
|
|
gap: 16px;
|
|
|
|
|
font-family: var(--font-mono);
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
color: var(--text-secondary);
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status-item {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status-item::before {
|
|
|
|
|
content: '';
|
|
|
|
|
width: 4px;
|
|
|
|
|
height: 4px;
|
|
|
|
|
background: var(--python-gold);
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status-item:first-child::before {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status-label {
|
|
|
|
|
color: var(--text-muted);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status-value {
|
|
|
|
|
color: var(--text-primary);
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status-value.accent {
|
|
|
|
|
color: var(--accent);
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* --------------------------------------------------------------------------
|
|
|
|
|
Animations
|
|
|
|
|
-------------------------------------------------------------------------- */
|
|
|
|
|
|
|
|
|
|
@keyframes fadeIn {
|
|
|
|
|
from { opacity: 0; }
|
|
|
|
|
to { opacity: 1; }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes slideUp {
|
|
|
|
|
from {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
transform: translateY(12px);
|
|
|
|
|
}
|
|
|
|
|
to {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
transform: translateY(0);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes shimmer {
|
|
|
|
|
0% { left: -100%; }
|
|
|
|
|
100% { left: 100%; }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* --------------------------------------------------------------------------
|
|
|
|
|
Focus States (Accessibility)
|
|
|
|
|
-------------------------------------------------------------------------- */
|
|
|
|
|
|
|
|
|
|
button:focus-visible,
|
|
|
|
|
select:focus-visible,
|
2025-12-11 21:28:42 +00:00
|
|
|
input:focus-visible,
|
2025-12-11 21:58:09 +00:00
|
|
|
.toggle-switch:focus-visible,
|
2025-12-11 21:28:42 +00:00
|
|
|
a.toolbar-btn:focus-visible {
|
2025-12-02 20:33:40 +00:00
|
|
|
outline: 2px solid var(--python-gold);
|
|
|
|
|
outline-offset: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* --------------------------------------------------------------------------
|
|
|
|
|
Shared Responsive
|
|
|
|
|
-------------------------------------------------------------------------- */
|
|
|
|
|
|
|
|
|
|
@media (max-width: 900px) {
|
|
|
|
|
.brand-subtitle {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: 600px) {
|
|
|
|
|
.toolbar-btn:not(.theme-toggle) {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
2025-12-12 01:36:28 +00:00
|
|
|
|
|
|
|
|
/* --------------------------------------------------------------------------
|
|
|
|
|
Toggle Switch
|
|
|
|
|
-------------------------------------------------------------------------- */
|
|
|
|
|
|
|
|
|
|
.toggle-switch {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 8px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
user-select: none;
|
|
|
|
|
font-family: var(--font-sans);
|
|
|
|
|
transition: opacity var(--transition-fast);
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.toggle-switch:hover {
|
|
|
|
|
opacity: 0.85;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.toggle-switch .toggle-label {
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
color: var(--text-muted);
|
|
|
|
|
transition: color var(--transition-fast);
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.toggle-switch .toggle-label.active {
|
|
|
|
|
color: var(--text-primary);
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Reserve space for bold text to prevent layout shift on toggle */
|
|
|
|
|
.toggle-switch .toggle-label::after {
|
|
|
|
|
content: attr(data-text);
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
height: 0;
|
|
|
|
|
visibility: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.toggle-switch.disabled {
|
|
|
|
|
opacity: 0.4;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
cursor: not-allowed;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.toggle-track {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 36px;
|
|
|
|
|
height: 20px;
|
|
|
|
|
background: var(--bg-tertiary);
|
|
|
|
|
border: 2px solid var(--border);
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
transition: all var(--transition-fast);
|
|
|
|
|
box-shadow: inset var(--shadow-sm);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.toggle-track:hover {
|
|
|
|
|
border-color: var(--text-muted);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.toggle-track.on {
|
|
|
|
|
background: var(--accent);
|
|
|
|
|
border-color: var(--accent);
|
|
|
|
|
box-shadow: 0 0 8px var(--accent-glow);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.toggle-track::after {
|
|
|
|
|
content: '';
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 1px;
|
|
|
|
|
left: 1px;
|
|
|
|
|
width: 14px;
|
|
|
|
|
height: 14px;
|
|
|
|
|
background: white;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
box-shadow: var(--shadow-sm);
|
|
|
|
|
transition: all var(--transition-fast);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.toggle-track.on::after {
|
|
|
|
|
transform: translateX(16px);
|
|
|
|
|
box-shadow: var(--shadow-md);
|
|
|
|
|
}
|