/** * Shared app theme and UI styles. * Use across layout and other HTML/templates for consistent theming. * * Usage in new HTML: * * Optional: add class "dark" to for dark mode; use var(--color-*) or the .bg-app-panel, * .text-app-text, .border-app-border utility classes. With Tailwind, extend theme in config: * colors: { primary: { DEFAULT: 'var(--color-primary)', hover: 'var(--color-primary-hover)' }, * app: { bg: 'var(--color-bg-app)', panel: 'var(--color-bg-panel)', text: 'var(--color-text-base)', muted: 'var(--color-text-muted)', border: 'var(--color-border)' } } */ /* ========== THEME VARIABLES ========== */ :root { /* Light mode */ --color-primary: #4f46e5; --color-primary-rgb: 79, 70, 229; --color-primary-hover: #4338ca; --color-primary-muted: #e0e7ff; --color-text-on-primary: #ffffff; --bg-app-bg: #f9fafb; --bg-app-panel: #ffffff; --text-app-text: #111827; --text-app-muted: #4b5563; --border-app-border: #e5e7eb; --color-slider-track: var(--color-primary); --color-slider-thumb: var(--color-text-on-primary); --color-slider-track-off: #e5e7eb; --color-primary-shadow: rgba(59, 130, 246, 0.4); } .dark { --color-primary: #6366f1; --color-primary-rgb: 99, 102, 241; --color-primary-hover: #818cf8; --color-text-on-primary: #ffffff; --bg-app-bg: #111827; --bg-app-panel: #1f2937; --text-app-text: #f9fafb; --text-app-muted: #9ca3af; --border-app-border: #374151; --color-slider-track: var(--color-primary); --color-slider-thumb: var(--color-text-on-primary); --color-slider-track-off: #374151; --color-primary-shadow: rgba(99, 102, 241, 0.4); } /* ========== SEMANTIC UTILITY CLASSES ========== */ .app-icon { fill: var(--color-primary); color: var(--color-primary); } .bg-app-bg { background-color: var(--bg-app-bg); } .bg-app-panel { background-color: var(--bg-app-panel); } .text-app-text { color: var(--text-app-text); } .text-app-muted { color: var(--text-app-muted); } .border-app-border { border-color: var(--border-app-border); } /* ========== NAV / SELECTION ========== */ .is-selected { position: relative; background-color: rgba(var(--color-primary-rgb, 79, 70, 229), 0.1) !important; } .is-selected::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; background-color: var(--color-primary); border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .nav-item-selected { background: var(--color-primary); color: white; } .nav-item-selected:hover { background: var(--color-primary-hover); color: white; } /* ========== LAYOUT RESIZERS ========== */ .resize-handle { cursor: ew-resize; width: 8px; } .handle-base { width: 24px; height: 24px; } .right-handle { left: -12px; border-top-right-radius: 0; border-bottom-right-radius: 0; } /* ========== DROPDOWNS ========== */ .dropdown-enter { opacity: 0; transform: translateY(-10px) scale(0.95); pointer-events: none; visibility: hidden; } .dropdown-active { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; visibility: visible; } .transition-all-custom { transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.2s; } /* Nav Branding Dropdown specific adjustments */ #nav-branding-dropdown { box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.25); transform-origin: top left; } #nav-branding-dropdown.dropdown-active { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; visibility: visible; } /* ========== SCROLLBARS ========== */ * { scrollbar-width: auto; scrollbar-color: #cbd5e1 transparent; } .dark * { scrollbar-color: #4b5563 #1f2937; } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: transparent; } .dark ::-webkit-scrollbar-track { background: #1f2937; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border: 3px solid transparent; background-clip: content-box; border-radius: 9999px; } .dark ::-webkit-scrollbar-thumb { background: #4b5563; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } .dark ::-webkit-scrollbar-thumb:hover { background: #6b7280; } .scrollbar-hide::-webkit-scrollbar { display: none; } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } /* ========== SEARCH INPUTS ========== */ input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; height: 16px; width: 16px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 18L18 6M6 6l12 12'%3E%3C/path%3E%3C/svg%3E"); background-size: contain; cursor: pointer; margin-right: -24px; position: relative; z-index: 20; } .search-shortcut { pointer-events: none; transition: opacity 0.15s ease; opacity: 1; display: flex; align-items: center; width: calc(100% - 3.5rem); z-index: 10; } input:focus + .search-shortcut { opacity: 0 !important; } input:not(:placeholder-shown) + .search-shortcut { opacity: 0 !important; } /* ========== ANIMATIONS ========== */ @keyframes spin { to { transform: rotate(360deg); } } .animate-spin-slow { animation: spin 1s linear infinite; } @keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes toast-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateX(100px) scale(0.95); } } .animate-toast-in { animation: toast-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .animate-toast-out { animation: toast-out 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes fadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } /* ========== GLOBAL TOOLTIPS ========== */ .global-tooltip { position: fixed; background-color: rgba(31, 41, 55, 0.85); /* Slightly transparent for glass effect */ color: #f9fafb; /* Off-white for better readability on dark */ padding: 10px 14px; border-radius: 10px; font-size: 12px; line-height: 1.4; width: max-content; max-width: 240px; pointer-events: none; z-index: 7000; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); opacity: 0; transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); transform: translateY(8px) translateX(-50%) scale(0.95); } .global-tooltip.visible { opacity: 1; transform: translateY(0) translateX(-50%) scale(1); } .dark .global-tooltip { background-color: rgba(17, 24, 39, 0.9); border-color: rgba(255, 255, 255, 0.08); } /* ========== CONTEXT MENUS ========== */ .context-menu { position: fixed; background-color: var(--color-bg-panel); border: 1px solid var(--color-border); border-radius: 0.5rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); z-index: 5000; min-width: 200px; overflow: hidden; animation: fadeIn 0.1s ease-out; } /* ========== TOOL WINDOWS (floating panels) ========== */ .tool-window { position: absolute; pointer-events: auto; background-color: var(--color-bg-panel); color: var(--color-text-base); border: 1px solid var(--color-border); border-radius: 0.75rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); display: flex; flex-direction: column; overflow: hidden; transition: opacity 0.2s ease, box-shadow 0.2s ease; } .window-glass { backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); } .tool-window.maximized { top: 4rem !important; left: 0 !important; width: 100% !important; height: calc(100vh - 4rem) !important; border-radius: 0 !important; border: none !important; transform: none !important; } .tool-window-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-border); background-color: var(--bg-app-bg); user-select: none; cursor: grab; touch-action: none; } .tool-window-header:active { cursor: grabbing; } .dirty-dot { width: 8px; height: 8px; background-color: #ef4444; border-radius: 9999px; display: none; } .tool-window[data-dirty="true"] .dirty-dot { display: block; } /* Workspace Navigator overlay visibility helpers (workspace_navigator.js expects these) */ .hidden-state { display: none !important; } #nav-drill-down-container.active { display: block; } /* ========== MODALS / BACKDROP ========== */ #modal-backdrop { background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); }