2025-11-19 14:31:17 +00:00
|
|
|
/* ============================================================================
|
|
|
|
|
CSS CUSTOM PROPERTIES - Design Tokens
|
|
|
|
|
============================================================================ */
|
|
|
|
|
|
|
|
|
|
:root {
|
|
|
|
|
/* Brand Colors */
|
|
|
|
|
--bg-gray: rgb(82, 86, 89);
|
|
|
|
|
--sidebar-gray: #d1d4d2;
|
|
|
|
|
--black-bar: #2b2b2b;
|
|
|
|
|
--paper-white: #ffffff;
|
|
|
|
|
--text-dark: rgb(0, 0, 0);
|
|
|
|
|
--text-gray: rgb(51, 51, 51);
|
|
|
|
|
--accent-blue: #0066cc;
|
|
|
|
|
--border-gray: #dddddd;
|
|
|
|
|
|
2025-11-30 11:13:47 +00:00
|
|
|
/* Theme System - These get overridden by _themes.css */
|
2025-11-19 14:31:17 +00:00
|
|
|
/* Page Background */
|
2025-11-20 13:50:53 +00:00
|
|
|
--page-bg: #d6d6d6;
|
|
|
|
|
|
|
|
|
|
/* Page Background Pattern - Concentric Squares */
|
|
|
|
|
--page-bg-pattern: repeating-linear-gradient(0deg, transparent, transparent 5px, rgba(75, 85, 99, 0.06) 5px, rgba(75, 85, 99, 0.06) 6px, transparent 6px, transparent 15px),
|
|
|
|
|
repeating-linear-gradient(90deg, transparent, transparent 5px, rgba(75, 85, 99, 0.06) 5px, rgba(75, 85, 99, 0.06) 6px, transparent 6px, transparent 15px),
|
|
|
|
|
repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(107, 114, 128, 0.04) 10px, rgba(107, 114, 128, 0.04) 11px, transparent 11px, transparent 30px),
|
|
|
|
|
repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(107, 114, 128, 0.04) 10px, rgba(107, 114, 128, 0.04) 11px, transparent 11px, transparent 30px);
|
2025-11-19 14:31:17 +00:00
|
|
|
|
|
|
|
|
/* Paper/Card Backgrounds */
|
|
|
|
|
--paper-bg: #ffffff;
|
|
|
|
|
--paper-secondary-bg: #f5f5f5;
|
|
|
|
|
|
|
|
|
|
/* Text Colors */
|
|
|
|
|
--text-primary: #1a1a1a;
|
|
|
|
|
--text-secondary: #333333;
|
|
|
|
|
--text-muted: #666666;
|
|
|
|
|
--text-light: #999999;
|
|
|
|
|
|
|
|
|
|
/* Action Bar & Navigation */
|
|
|
|
|
--action-bar-bg: #2b2b2b;
|
|
|
|
|
--action-bar-text: #ffffff;
|
|
|
|
|
--action-bar-text-muted: rgba(255, 255, 255, 0.85);
|
|
|
|
|
|
|
|
|
|
/* Borders & Dividers */
|
|
|
|
|
--border-color: #333333;
|
|
|
|
|
--border-light: #e0e0e0;
|
|
|
|
|
|
|
|
|
|
/* Shadows */
|
|
|
|
|
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
|
|
|
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
|
|
|
--shadow-lg: 2px 2px 9px rgba(0, 0, 0, 0.5);
|
|
|
|
|
|
|
|
|
|
/* Interactive Elements */
|
|
|
|
|
--button-bg: transparent;
|
|
|
|
|
--button-bg-hover: rgba(0, 0, 0, 0.05);
|
|
|
|
|
--button-bg-active: rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
|
|
|
|
/* Accent Colors */
|
|
|
|
|
--accent-blue: #0066cc;
|
|
|
|
|
--accent-green: #27ae60;
|
|
|
|
|
|
|
|
|
|
/* Sidebar */
|
|
|
|
|
--sidebar-bg: #d1d4d2;
|
|
|
|
|
}
|
