179 lines
3.2 KiB
CSS
179 lines
3.2 KiB
CSS
/* Lightningbeam Editor Styles
|
|
* CSS with variables and selector-based theming
|
|
*/
|
|
|
|
/* ============================================
|
|
LIGHT MODE VARIABLES
|
|
============================================ */
|
|
:root {
|
|
/* Base colors */
|
|
--bg-primary: #f6f6f6;
|
|
--bg-secondary: #ccc;
|
|
--bg-panel: #aaa;
|
|
--bg-header: #ddd;
|
|
--background-color: #ccc;
|
|
--foreground-color: #ddd;
|
|
--highlight: #ddd;
|
|
--shadow: #999;
|
|
--shade: #aaa;
|
|
|
|
/* Text colors */
|
|
--text-primary: #0f0f0f;
|
|
--text-secondary: #666;
|
|
--text-tertiary: #999;
|
|
|
|
/* Border colors */
|
|
--border-light: #bbb;
|
|
--border-medium: #999;
|
|
--border-dark: #555;
|
|
|
|
/* UI backgrounds */
|
|
--grid-bg: #555;
|
|
--grid-hover: #666;
|
|
|
|
/* Dimensions */
|
|
--header-height: 40px;
|
|
--pane-border-width: 1px;
|
|
}
|
|
|
|
/* ============================================
|
|
DARK MODE VARIABLES
|
|
============================================ */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
/* Base colors */
|
|
--bg-primary: #2f2f2f;
|
|
--bg-secondary: #3f3f3f;
|
|
--bg-panel: #222222;
|
|
--bg-header: #444;
|
|
--background-color: #333;
|
|
--foreground-color: #888;
|
|
--highlight: #4f4f4f;
|
|
--shadow: #111;
|
|
--shade: #222;
|
|
|
|
/* Text colors */
|
|
--text-primary: #f6f6f6;
|
|
--text-secondary: #aaa;
|
|
--text-tertiary: #777;
|
|
|
|
/* Border colors */
|
|
--border-light: #555;
|
|
--border-medium: #444;
|
|
--border-dark: #333;
|
|
|
|
/* UI backgrounds */
|
|
--grid-bg: #0f0f0f;
|
|
--grid-hover: #1a1a1a;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
COMPONENT STYLES (applies to both modes)
|
|
============================================ */
|
|
|
|
/* Pane headers */
|
|
.pane-header {
|
|
background-color: var(--bg-header);
|
|
color: var(--text-primary);
|
|
height: var(--header-height);
|
|
border-color: var(--border-medium);
|
|
}
|
|
|
|
/* Pane content areas */
|
|
.pane-content {
|
|
background-color: var(--bg-primary);
|
|
border-color: var(--border-light);
|
|
}
|
|
|
|
/* General panel */
|
|
.panel {
|
|
background-color: var(--bg-panel);
|
|
border-color: var(--border-medium);
|
|
}
|
|
|
|
/* Grid backgrounds */
|
|
.grid {
|
|
background-color: var(--grid-bg);
|
|
}
|
|
|
|
.grid-hover {
|
|
background-color: var(--grid-hover);
|
|
}
|
|
|
|
/* Specific pane IDs */
|
|
#stage {
|
|
background-color: var(--bg-primary);
|
|
}
|
|
|
|
#timeline {
|
|
background-color: var(--shade);
|
|
}
|
|
|
|
#toolbar {
|
|
background-color: var(--bg-secondary);
|
|
}
|
|
|
|
#infopanel {
|
|
background-color: var(--bg-panel);
|
|
}
|
|
|
|
#node-editor {
|
|
background-color: #2d2d2d;
|
|
border-color: #4d4d4d;
|
|
}
|
|
|
|
/* Timeline specific elements */
|
|
.timeline-background {
|
|
background-color: var(--shade);
|
|
}
|
|
|
|
.timeline-header {
|
|
background-color: var(--shadow);
|
|
}
|
|
|
|
.timeline-spacer {
|
|
background-color: var(--shadow);
|
|
}
|
|
|
|
.timeline-scrubber {
|
|
background-color: #cc2222;
|
|
border-color: #cc2222;
|
|
}
|
|
|
|
.timeline-layer-active {
|
|
background-color: var(--highlight);
|
|
}
|
|
|
|
.timeline-layer-inactive {
|
|
background-color: var(--background-color);
|
|
}
|
|
|
|
.timeline-row-active {
|
|
background-color: var(--grid-bg);
|
|
}
|
|
|
|
.timeline-row-inactive {
|
|
background-color: var(--foreground-color);
|
|
}
|
|
|
|
/* Buttons */
|
|
.button {
|
|
background-color: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
border-color: var(--border-medium);
|
|
}
|
|
|
|
.button-hover {
|
|
border-color: #396cd8;
|
|
}
|
|
|
|
/* Text */
|
|
.text-primary {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.text-secondary {
|
|
color: var(--text-secondary);
|
|
}
|