/* Global base styles, html, body resets */ html, body { margin: 0; padding: 0; height: 100vh; width: 100vw; overflow: hidden; background-color: var(--primary-background); font-family: 'Inter', sans-serif; font-size: 12px; color: var(--primary-text); } body.is-dragging-slide, body.is-dragging-slide * { user-select: none !important; -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; cursor: grabbing !important; } .prevent-drag { /* border-top: 1px grey solid; */ /* box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3); */ -webkit-user-select: none; /* Disable text selection for WebKit browsers */ -moz-user-select: none; /* Disable text selection for Firefox */ -ms-user-select: none; /* Disable text selection for Internet Explorer/Edge */ user-select: none; /* Disable text selection for standard browsers */ -webkit-user-drag: none; /* Disable drag-and-drop for WebKit browsers */ -khtml-user-drag: none; /* Disable drag-and-drop for Konqueror */ -moz-user-drag: none; /* Disable drag-and-drop for Firefox */ -o-user-drag: none; /* Disable drag-and-drop for Opera */ } .prevent-select { -webkit-user-select: none; /* Safari */ -ms-user-select: none; /* IE 10 and IE 11 */ user-select: none; /* Standard syntax */ outline: none; /* or outline: 0; */ } /* Dynamic selection with color inversion based on computed background */ ::selection { background-color: var(--selection-bg, rgba(0, 120, 255, 0.4)); mix-blend-mode: normal; } /* SCROLLBAR (WebKit/Chromium) */ /* ::-webkit-scrollbar { width: 10px; height: 10px; background-color: transparent; } ::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb-background); } ::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover-background); } */ /* Show standard WebKit scrollbars on hover for div elements */ div::-webkit-scrollbar { width: 10px; height: 10px; background-color: transparent; } div::-webkit-scrollbar-corner { background-color: transparent; } div::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 3px; transition: background-color 0.2s ease-in-out; } div:hover::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb-background); } div:hover::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover-background); } div::-webkit-scrollbar-track { background: transparent; border-radius: 3px; } div:hover::-webkit-scrollbar-track { background: var(--scrollbar-track-background); } /* Also show scrollbars when hovering any descendant inside the div (modern browsers) */ div:has(:hover)::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb-background); } div:has(:hover)::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover-background); } div:has(:hover)::-webkit-scrollbar-track { background: var(--scrollbar-track-background); } .narrow-scrollbar::-webkit-scrollbar-thumb { background-color: transparent; /* Color of the scrollbar thumb, initially transparent */ border-radius: 3px; border: none; transition: background-color 0.2s ease-in-out !important; /* Smooth transition for narrow scrollbar */ } /* Make narrow scrollbar thumb visible when its container is hovered */ .narrow-scrollbar:hover::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb-background) !important; } /* Handle hover for narrow scrollbar thumb when its container is hovered */ .narrow-scrollbar:hover::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover-background) !important; } .narrow-scrollbar::-webkit-scrollbar-track { background: var(--scrollbar-track-background) !important; /* Color of the scrollbar track */ border-radius: 5px; /* Rounded corners for the track */ } /* Support showing narrow scrollbar when any descendant is hovered */ .narrow-scrollbar:has(:hover)::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb-background) !important; } .narrow-scrollbar:has(:hover)::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover-background) !important; } .narrow-scrollbar:has(:hover)::-webkit-scrollbar-track { background: var(--scrollbar-track-background) !important; } .focusedOutline { outline: 1px solid var(--focused-border); } .focusedArea { position: relative; box-sizing: border-box; } .focusedArea::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background-color: var(--focused); } .focusedAreaVariant { position: relative; box-sizing: border-box; } .focusedAreaVariant::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background-color: var(--focused); } .url-gray { color: var(--secondary-text); font-weight: 600; cursor: pointer; /* text-decoration: underline; text-underline-offset: 5px; */ } /* Styles for contentEditable placeholder */ [contentEditable=true][data-placeholder].is-empty:before { content: attr(data-placeholder); color: grey; /* Or your desired placeholder color */ pointer-events: none; /* So clicks go through to the div */ display: block; /* Ensures it takes up space */ } /* Pulse animation for status icons */ @keyframes pulse { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } } :root { /* COMMON COLORS (work for both light and dark themes) */ /* States & Feedback */ --error: red; --error-text: rgb(0, 0, 0); --warning: rgb(255, 208, 0); --warning-text: rgb(0, 0, 0); --conflict: rgb(255, 136, 0); --conflict-text: rgb(0, 0, 0); --success: rgb(16, 187, 0); --success-text: rgb(0, 0, 0); --info: rgb(33, 150, 243); --info-text: rgb(0, 0, 0); --conditional-text: rgb(255, 217, 0); /* 10% opacity versions for subtle backgrounds */ --error-bg-subtle: rgba(255, 0, 0, 0.1); --warning-bg-subtle: rgba(255, 187, 0, 0.1); --success-bg-subtle: rgba(16, 187, 0, 0.1); --info-bg-subtle: rgba(33, 150, 243, 0.1); --conflict-bg-subtle: rgba(255, 136, 0, 0.1); /* 20% opacity versions for hover states */ --error-bg-subtle-hover: rgba(255, 0, 0, 0.20); --warning-bg-subtle-hover: rgba(255, 187, 0, 0.20); --success-bg-subtle-hover: rgba(16, 187, 0, 0.20); --info-bg-subtle-hover: rgba(33, 150, 243, 0.20); --conflict-bg-subtle-hover: rgba(255, 136, 0, 0.20); /* FOCUSED */ /* rgb(255, 0, 255) (bright)*/ /* --focused: rgb(219, 0, 172); */ --focused: #1591ea; --outline-focused: var(--focused); /* --focused-background: rgb(145, 0, 145); --focused-border: rgb(145, 0, 145); */ /* Make --focused-background 15% darker than --focused */ --focused-background: color-mix(in srgb, var(--focused) 85%, black 65%); --focused-border: var(--focused); /* Slide Selection */ --slide-selection: var(--focused); /* --outline-focused: rgb(145, 0, 145); */ /* This might need theming if it clashes */ /* Button Colors */ --button-green: #007500; --button-green-hover-bg: #00ae00; --button-red-bg: #7e1b1b; --button-red-hover-bg: #d72f2f; --button-blue-bg: #0066cc; --button-blue-hover-bg: #3399ff; --button-purple-bg: #9c27b0; --button-purple-hover-bg: #d438ff; --button-yellow-bg: #ffbf00; --button-yellow-hover-bg: #ffdb6f; /* Conflict/Merge Colors */ --conflict-current-color: #2196f3; --conflict-incoming-color: #9c27b0; --conflict-current-color-hover: #1e7bbd; --conflict-incoming-color-hover: #7d1f9b; --conflict-current-bg: rgba(33, 150, 243, 0.30); --conflict-current-bg-light: #b6deff; --conflict-current-bg-light-hover: #82cbff; --conflict-incoming-bg: rgba(156, 39, 176, 0.30); --conflict-incoming-bg-light: #f4b3ff; --conflict-incoming-bg-light-hover: #e380ff; --search-highlight-blue: #4599ff6a; --search-highlight-blue-selected: #4599ffb6; /* for search result highlighting and user @ mentions*/ /* Spreadsheet Selection */ /* --spreadsheet-selection: #1591ea; */ --spreadsheet-selection: var(--focused); --spreadsheet-selection-bg: rgba(21, 145, 234, 0.15); --spreadsheet-selection-bg-light: rgba(21, 145, 234, 0.1); --info-icon-background: #6200ff; /* This might need theming */ --sheet-selected-background: #1d1d1d; --sheet-selected-hover-background: rgb(145, 0, 145); /* Gradients & Shadows (mostly duplicated, ensure single source of truth or keep if distinct uses) */ /* Consider if shadow needs to be different for light/dark themes */ --shadow-primary: rgba(0, 0, 0, 0.7); /* Contrasting text for colored backgrounds */ --text-on-error-bg: #ffffff; --text-on-warning-bg: #000000; /* Black text on yellow warning */ --text-on-success-bg: #ffffff; --text-additions: var(--success); --text-updates: var(--warning); --text-removals: var(--error); --error-hover-bg: #c50000; /* Darker red for hover on error elements */ --warning-hover-bg: #e0a800; /* Darker yellow for hover on warning elements */ --success-hover-bg: #006a00; /* Darker green for hover on success elements */ /* Icon Colors */ /* --icon-color-package: white; /* Will be themed */ /* --icon-color-attribute: #FFF500; /* Will be themed */ --icon-color-constraint: #FF3737; --icon-color-code: #FF3737; --icon-color-document: #4478FF; --icon-color-slide: #4478FF; --icon-color-part: #FF9900; --icon-color-geometry: #FF9900; --icon-color-assembly: #FF9900; --icon-color-component: #FF9900; --icon-color-linkage: #FF9900; --icon-color-requirement: #40AA58; --icon-color-connection: #00D1FF; --icon-color-transition: #9E00FF; --icon-color-item: #00D1FF; --icon-color-port: #00D1FF; --icon-color-reference: #FF00E5; --icon-color-review: #FF3737; --icon-color-feedback: #4478FF; --icon-color-table: #4478FF; --icon-color-text: #4478FF; --icon-color-figure: #4478FF; --icon-color-action: #9E00FF; --icon-color-task: #9E00FF; --icon-color-sequence: #9E00FF; --icon-color-state: #9E00FF; --icon-color-entity: #FF9900; --icon-color-circuit: #FF9900; --icon-color-project: #FFFFFF; --icon-color-matrix: #4478FF; --icon-color-function: #FF3737; --icon-color-study: #FF3737; --icon-color-agent: #FFFFFF; --icon-color-change: #FFFFFF; --icon-color-toolbox: #FF3737; --icon-color-package: white; --icon-color-attribute: #FFF500; --icon-color-resource: #FFF500; --icon-color-simulation: #FF3737; --icon-color-risk: #FF3737; /* Tag Colors */ --tag-background-opacity: 20%; --tag-border-opacity: 100%; --tag-hover-opacity: 40%; /* Diff Colors */ --commit-modifications-text: #2196f3; --commit-modifications-background: #0051bb; --commit-additions-text: #4caf50; --commit-additions-background: #007200; --commit-deletions-text: #f44336; --commit-deletions-background: #8b0000; --diff-added-background: #004900; --diff-removed-background: #501212; --diff-added-background: #2a6e30b2; --diff-removed-background: #661919b3; --diff-added-text: #00ff00; --diff-removed-text: #ff0000; --diff-background-opacity: 15%; --diff-added-border: #007500; --diff-removed-border: #7e1b1b; --merge-current-background: #5029ff; --merge-current-background-dark: rgba(89, 71, 255, 0.15); --merge-current-background-hover: #7d4aff; --merge-incoming-background: #445700; --merge-incoming-background-dark: rgba(80, 141, 0, 0.15); --merge-incoming-background-hover: #88a001; /* Document Diff Colors */ --diff-added-doc-block-background: #59c559; --diff-removed-doc-block-background: #ff9f9f; --diff-added-doc-block-border: #008a00; --diff-removed-doc-block-border: #ff0000; --merge-current-doc-block-background: #cabeff; --merge-current-doc-block-background-hover: #9e78ff; --merge-incoming-doc-block-background: #dcfd64; --merge-incoming-doc-block-background-hover: #a5c200; /* Gradient Colors */ --gradient-start-dark: #2e2e2e; --gradient-end-dark: #1d1d1d; --gradient-start-light: #ffffff; --gradient-end-light: #c4c4c4; /* Parent Gradient Colors */ --gradient-start-parent-dark: #2f4063; --gradient-end-parent-dark: #232835; --gradient-start-parent-light: #e9f2ff; --gradient-end-parent-light: #b1c8e6; } :root[data-theme='dark'] { /* BACKGROUNDS */ --primary-background: #1a1a1a; --secondary-background: #232323; --tertiary-background: #000000; --quaternary-background: #121212; --code-background: rgba(22, 22, 22, 0.5); /* Previously deep-background */ --accent-background: #2d2d2d; --secondary-accent-background: #525252; /* Previously light-background */ --anchor-element-background: rgba(61, 61, 61, 0.4); --anchor-element-background-hover: rgba(61, 61, 61, 0.6); --selected-hover-background: #4d4d4d; --hover-background: #3d3d3d; --hover-fill: #ffffff; --icon-background: #3d3d3d; --icon-fill: gray; --icon-hover-background: #4d4d4d; --icon-hover-fill: #ffffff; /* Borders */ --primary-border: #2e2e2e; --secondary-border: #6e6e6e; --tertiary-border: #3e3e3e; --selected-border: #a3a3a3; /* TEXT COLORS */ --primary-text: white; --secondary-text: #858585; --placeholder-text: #5f5f5f; /* Spinners & Overlays */ --spinner-circular-border: rgb(85, 85, 85); --spinner-circular-top-border: #424242; --spinner-notched-pseudo-border: rgb(85, 85, 85); --spinner-notched-pseudo-top-transparent: transparent; --loading-overlay-bg: var(--primary-background); --loading-overlay-text: rgb(105, 105, 105); --loading-overlay-spinner: rgb(105, 105, 105); /* Scrollbar Colors */ --scrollbar-thumb-background: #3a3a3a; --scrollbar-thumb-hover-background: rgb(163, 163, 163); --scrollbar-track-background: transparent; /* Or a specific dark theme track color */ /* Resizers */ --resize-bar-hover-background: #A2A2A2; /* Original: rgb(162, 162, 162) */ --resize-handle-hover-background: #878787; /* Original: rgb(135, 135, 135) */ /* Icon Specific */ --icon-selected-background: #2f2f2f; /* For selected icon backgrounds */ /* Chat Message Colors */ --ai-message-background: #1f0052; --ai-message-highlight: #3c3c3c; --user-message-text: white; --user-message-background: #232323; /* User Message Selection Colors */ --user-message-selection-text-dark: #FFFFFF; --user-message-selection-background-dark: rgb(0, 72, 167); /* Selection Colors (Theme-specific) */ --user-message-selection-text: #FFFFFF; --user-message-selection-background: rgb(0, 72, 167); /* Theme-specific Icon Colors */ /* --icon-color-package: white; --icon-color-attribute: #FFF500; */ --icon-warning-color: rgb(109, 98, 40); --icon-info-color: rgb(54, 43, 119); --icon-error-color: rgb(255, 0, 0); /* Aliases for JS */ /* --icon-color-package: var(--icon-color-package); --icon-color-attribute: var(--icon-color-attribute); */ /*Gradient Aliases*/ --gradient-start: var(--gradient-start-dark); --gradient-end: var(--gradient-end-dark); --gradient-start-parent: var(--gradient-start-parent-dark); --gradient-end-parent: var(--gradient-end-parent-dark); } :root[data-theme='light'] { /* BACKGROUNDS */ --primary-background: #ffffff; --secondary-background: #e8e8e8; --tertiary-background: #ffffff; --quaternary-background: #cacaca; /* Previously deep-light-background */ --accent-background: #cfcfcf; /* Previously tertiary-light-background */ --anchor-element-background: rgba(200, 200, 200, 0.4); /* Adjusted for light theme */ --anchor-element-background-hover: rgba(200, 200, 200, 0.6); /* Adjusted for light theme */ --hover-background: #c8c8c8; --hover-fill: #000000; --icon-background: #e0e0e0; /* Adjusted for light theme */ --icon-fill: #5f5f5f; /* Adjusted for light theme */ --icon-hover-background: #cccccc; /* Adjusted for light theme */ --icon-hover-fill: #000000; /* Adjusted for light theme */ /* Borders */ --primary-border: rgb(206, 206, 206); --secondary-border: rgb(206, 206, 206); /* Kept same as primary, adjust if needed */ --selected-border: #007500; /* Example: using button green for selected border in light mode */ /* TEXT COLORS */ --primary-text: #1d1d1d; /* Dark text on light background */ --secondary-text: #5f5f5f; --placeholder-text: #858585; /* Spinners & Overlays */ --spinner-circular-border: rgb(200, 200, 200); --spinner-circular-top-border: #cccccc; --spinner-notched-pseudo-border: rgb(200, 200, 200); --spinner-notched-pseudo-top-transparent: transparent; --loading-overlay-bg: rgba(255, 255, 255, 0.5); --loading-overlay-text: rgb(34, 34, 34); --loading-overlay-spinner: rgb(34, 34, 34); /* Light overlay */ /* Scrollbar Colors */ --scrollbar-thumb-background: #c1c1c1; /* Light grey */ --scrollbar-thumb-hover-background: #a8a8a8; /* Darker grey */ --scrollbar-track-background: transparent; /* Or a specific light theme track color */ /* Shadows */ --shadow-primary: rgba(0, 0, 0, 0.1); /* Lighter shadow for light theme */ /* Resizers */ --resize-bar-hover-background: #BDBDBD; /* Darker grey for light theme hover */ --resize-handle-hover-background: #A0A0A0; /* Slightly more prominent grey for light theme hover */ /* Icon Specific */ --icon-selected-background: #dcdcdc; /* Lighter selected icon background for light theme */ /* Chat Message Colors */ --user-message-background-light: #fdfdfd; /* Very light background for user bubble */ --user-message-text-light: #000000; /* Black text for user bubble */ --ai-message-background: #f0f0f0; --ai-message-highlight: #e0e0e0; --user-message-selection-text-light: #FFFFFF; --user-message-selection-background-light: var(--focused-background); /* Selection Colors (Theme-specific) */ --user-message-selection-text: #FFFFFF; --user-message-selection-background: rgb(0, 123, 255); /* Theme-specific Icon Colors */ /* --icon-color-package-light: #777777; --icon-color-attribute-light: #e0ce00; */ /* Aliases for JS */ /* --icon-color-package: var(--icon-color-package-light); --icon-color-attribute: var(--icon-color-attribute-light); */ /* Gradient Aliases */ --gradient-start: var(--gradient-start-light); --gradient-end: var(--gradient-end-light); --gradient-start-parent: var(--gradient-start-parent-light); --gradient-end-parent: var(--gradient-end-parent-light); } :root { /* Z-INDEX LAYERS - Ordered from lowest to highest */ /* Base content layers */ --z-base: 0; --z-content: 1; --z-elevated: 10; /* Interactive elements */ --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-popover: 400; /* Overlays and modals */ --z-overlay: 500; --z-modal-backdrop: 600; --z-modal: 700; --z-drawer: 800; --z-sidebar: 900; /* Navigation and headers */ --z-header: 1000; --z-navigation: 1100; --z-mobile-menu: 1200; /* Notifications and alerts */ --z-notification: 1300; --z-toast: 1400; --z-alert: 1500; /* Critical UI elements */ --z-tooltip: 1600; --z-loading: 1700; --z-spinner: 1800; /* Top-most layers */ --z-debug: 9000; --z-dev-tools: 9100; --z-maximum: 9999; /* Semantic aliases for common use cases */ --z-chat-message: var(--z-content); --z-chat-overlay: var(--z-overlay); --z-file-tree: var(--z-sidebar); --z-context-menu: var(--z-popover); --z-search-results: var(--z-dropdown); --z-resize-handle: 1500; /* Negative z-index for backgrounds */ --z-behind: -1; --z-far-behind: -10; } .generic-anchor-element { background-color: var(--anchor-element-background); border: 1px solid transparent; border-radius: 5px; width: fit-content; height: fit-content; padding-left: 4px; padding-right: 4px; cursor: pointer !important; margin-left: 2px; margin-right: 2px; vertical-align: middle; } .generic-anchor-element.variant { padding-left: 8px; padding-right: 8px; padding-top: 4px; padding-bottom: 4px; } .generic-anchor-element.highlight { border: 1px solid var(--secondary-text) !important; } .generic-anchor-element:hover { border: 1px solid var(--secondary-border) !important; } .warningbox { border: 1px solid var(--warning) !important; background-color: var(--warning) !important; border-radius: 4px; color: black !important; font-weight: 600; padding-left: 4px; padding-right: 4px; cursor: pointer; height: fit-content; } .warningbox:hover { background-color: var(--warning-hover-bg) !important; } .errorbox { border: 1px solid var(--error) !important; border-radius: 4px; background-color: var(--error) !important; color: white !important; font-weight: 600; padding-left: 4px; padding-right: 4px; cursor: pointer; height: fit-content; } .errorbox:hover { background-color: var(--error-hover-bg) !important; color: var(--text-on-error-bg) !important; } .successbox { border: 1px solid var(--success) !important; border-radius: 4px; color: var(--success) !important; padding-left: 4px; padding-right: 4px; cursor: pointer; height: fit-content; } .successbox:hover { background-color: var(--success-hover-bg) !important; color: var(--text-on-success-bg) !important; } .general-number-bubble { height: 16px; min-width: 16px; width: fit-content; border-radius: 20px; margin-left: 5px; margin-right: 5px; color: var(--secondary-text); text-align: center; background-color: var(--accent-background); display: flex; font-size: 8pt; align-items: center; justify-content: center; text-align: center; } .uuid-name-anchor { background-color: transparent !important; } /* Selection highlighting for anchors in editable contexts */ .selectable-anchor { user-select: all; } /* Prevent text selection highlighting within anchors */ .selectable-anchor::selection, .selectable-anchor *::selection { background-color: transparent; color: inherit; } .selectable-anchor::-moz-selection, .selectable-anchor *::-moz-selection { background-color: transparent; color: inherit; } .selectable-anchor.anchor-selected { background-color: var(--search-highlight-blue-selected); } /* Also style user anchors when selected */ span.selectable-anchor.anchor-selected { background-color: var(--search-highlight-blue-selected); } .snippet-anchor { background-color: var(--focused-background); height: 20px; /* let text wrap and collapse if needed */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .number-bubble { border-radius: 50%; width: fit-content; height: 18px; min-width: 18px; min-height: 18px; max-height: 18px; padding: 0 4px; background-color: var(--secondary-accent-background); color: var(--primary-text); border: 1px solid var(--primary-border); box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-size: 11px; } .add-bubble { border-radius: 50%; cursor: pointer; width: 15px; height: 15px; min-width: 15px; min-height: 15px; max-width: 15px; max-height: 15px; display: flex; align-items: center; justify-content: center; background-color: var(--secondary-accent-background); color: var(--primary-text); border: 1px solid var(--primary-border); box-sizing: border-box; } .add-bubble:hover { background-color: var(--secondary-accent-background); border-color: var(--primary-text); color: var(--accent-text); } .add-bubble:hover path { fill: var(--accent-text); } /* Styles for button components */ .generic-button { padding: 8px; border-radius: 12px; border: 1px solid var(--primary-border); cursor: pointer; width: fit-content; background-color: var(--primary-background); user-select: none; white-space: nowrap; overflow: hidden; color: var(--secondary-text); } .generic-button:hover { background-color: var(--hover-background); color: var(--hover-fill); } .generic-button-narrow { padding: 3px 5px; border-radius: 5px; border: 1px solid var(--primary-border); /* Was rgb(46, 46, 46) */ color: var(--secondary-text); /* Was gray */ cursor: pointer; width: fit-content; background-color: var(--accent-background); /* Was #292929 */ user-select: none; white-space: nowrap; overflow: hidden; } .generic-button-narrow:hover { background-color: var(--hover-background); /* Was #414141 */ color: var(--hover-fill); /* Was white */ } .generic-button-cancel { padding: 8px; border-radius: 20px; border: 1px solid var(--secondary-border); /* Was gray */ cursor: pointer; color: var(--secondary-text); /* background-color: #3a3a3a; */ /* Consider var(--accent-background) or var(--secondary-background) if needed */ } .generic-button-cancel:hover { background-color: var(--button-red-hover-bg); /* Was #d72f2f, which is --button-red-hover-bg */ color: var(--text-on-error-bg); /* Ensure text is visible, white for red bg */ border-color: transparent; /* Often good to hide border on strong hover bg */ } .generic-button-icon { color: var(--icon-fill); /* Was gray, now themed */ border: 1px solid transparent; padding: 8px 12px; border-radius: 4px; background-color: transparent; cursor: pointer; white-space: nowrap; overflow: hidden; user-select: none; } .generic-button-icon:hover { color: var(--icon-hover-fill); /* Was white, now themed */ background-color: var(--icon-hover-background); } .generic-button-filled { background-color: var(--primary-border); } .generic-button.selected { background-color: var(--icon-background); color: var(--primary-text); } .generic-button.selected path { fill: var(--primary-text); /* Ensure icon fill matches text color on selected */ } .diff-button { padding: 3px 10px; font-size: 11px; cursor: pointer; border-radius: 3px; font-family: 'Inter', sans-serif; } /* Green, Red, Blue buttons already use common variables from :root, ensure consistency */ .green-button { background-color: var(--button-green) !important; color: var(--text-on-success-bg) !important; /* Ensuring good contrast */ fill: var(--text-on-success-bg) !important; white-space: nowrap; overflow: hidden; user-select: none; } .green-button path { fill: var(--text-on-success-bg) !important; } .green-button:hover { background-color: var(--button-green-hover-bg) !important; color: var(--text-on-success-bg) !important; /* Assuming hover keeps same text color strategy */ } .red-button { background-color: var(--button-red-bg) !important; color: var(--text-on-error-bg) !important; fill: var(--text-on-error-bg) !important; white-space: nowrap; overflow: hidden; user-select: none; } .red-button path { fill: var(--text-on-error-bg) !important; } .red-button:hover { background-color: var(--button-red-hover-bg) !important; color: var(--text-on-error-bg) !important; } .blue-button { background-color: var(--button-blue-bg) !important; color: white !important; /* white is common for blue buttons */ fill: white !important; white-space: nowrap; overflow: hidden; user-select: none; } .blue-button path { fill: white !important; } .blue-button:hover { background-color: var(--button-blue-hover-bg) !important; color: white !important; } .purple-button { background-color: var(--button-purple-bg) !important; color: white !important; fill: white !important; white-space: nowrap; overflow: hidden; user-select: none; } .purple-button path { fill: white !important; } .purple-button:hover { background-color: var(--button-purple-hover-bg) !important; color: white !important; } .yellow-button { background-color: var(--button-yellow-bg) !important; color: rgb(0, 0, 0) !important; fill: rgb(0, 0, 0) !important; white-space: nowrap; overflow: hidden; user-select: none; } .yellow-button path { fill: rgb(0, 0, 0) !important; } .yellow-button:hover { background-color: var(--button-yellow-hover-bg) !important; color: rgb(0, 0, 0) !important; } .conflict-button { background-color: var(--conflict) !important; color: rgb(0, 0, 0) !important; fill: rgb(0, 0, 0) !important; white-space: nowrap; overflow: hidden; user-select: none; } .conflict-button path { fill: rgb(0, 0, 0) !important; } .conflict-button:hover { background-color: var(--conflict-hover-bg) !important; color: rgb(0, 0, 0) !important; } .gray-button { background-color: var(--secondary-background) !important; color: var(--secondary-text) !important; fill: var(--secondary-text) !important; /* border: 1px solid var(--primary-border) !important; */ white-space: nowrap; overflow: hidden; user-select: none; } .gray-button svg { fill: var(--secondary-text) !important; } .gray-button svg path { fill: var(--secondary-text) !important; } .gray-button path { fill: var(--secondary-text) !important; } .gray-button:hover { background-color: var(--hover-background) !important; color: var(--hover-fill) !important; } .gray-button:hover path { fill: var(--hover-fill) !important; } .gray-button:hover svg { fill: var(--hover-fill) !important; } .gray-button:hover svg path { fill: var(--hover-fill) !important; } /* New style for blue text, border, and fill, no background */ .generic-button-blue-outline { color: var(--button-blue-hover-bg) !important; fill: var(--button-blue-hover-bg) !important; /* For SVG icons */ border: 1px solid var(--button-blue-bg) !important; background-color: transparent !important; /* Explicitly no background color */ } .generic-button-blue-outline path { /* Ensures fill for SVG paths if 'fill' on parent isn't enough */ fill: var(--button-blue-hover-bg) !important; } .generic-button-delete-action { color: var(--error) !important; background-color: transparent; /* Default state transparent */ } .generic-button-delete-action:hover { color: var(--text-on-error-bg) !important; background-color: var(--error-hover-bg) !important; /* Use new var for darker red */ } .generic-button-delete-action path { fill: var(--error) !important; } .generic-button-delete-action:hover path { fill: var(--text-on-error-bg) !important; } .generic-button-unavailable { opacity: 0.25; cursor: default; white-space: nowrap; overflow: hidden; user-select: none; } .generic-option-dropdown { outline: none; padding: 5px; border-radius: 5px; border: 1px solid var(--primary-border); background-color: var(--primary-background); color: var(--secondary-text); cursor: pointer; position: relative; text-align: left; } .generic-option-dropdown:hover { background-color: var(--hover-background); color: var(--hover-fill); } .generic-option-dropdown option { background: var(--primary-background); color: var(--secondary-text); } .generic-option-dropdown option:hover { background: var(--hover-background); color: var(--hover-fill); } /* Custom dropdown styles */ .custom-dropdown-container { position: relative; display: inline-block; } .custom-dropdown-selected-text { font-size: 12px; } .custom-dropdown-arrow { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 10px; pointer-events: none; } .custom-dropdown-menu { position: absolute; top: 100%; left: 0; background-color: var(--primary-background); border: 1px solid var(--primary-border); border-radius: 5px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); z-index: var(--z-dropdown); display: none; max-height: 200px; overflow-y: auto; } .custom-dropdown-option { padding: 5px; cursor: pointer; color: var(--secondary-text); } .custom-dropdown-option:hover { background-color: var(--hover-background); color: var(--hover-fill); } .custom-dropdown-option.selected { background-color: var(--icon-background); color: var(--primary-text); } /* Merge buttons */ .combination-button { background-color: transparent !important; color: var(--secondary-text) !important; fill: var(--secondary-text) !important; } .combination-button:hover { background-color: var(--hover-background); color: var(--primary-text) !important; fill: var(--primary-text) !important; } .accept-current-button { background-color: var(--conflict-current-color) !important; color: var(--primary-text) !important; fill: var(--primary-text) !important; } .accept-current-button:hover { background-color: var(--conflict-current-color-hover) !important; color: var(--primary-text) !important; fill: var(--primary-text) !important; } .accept-incoming-button { background-color: var(--conflict-incoming-color) !important; color: var(--primary-text) !important; fill: var(--primary-text) !important; } .accept-incoming-button:hover { background-color: var(--conflict-incoming-color-hover) !important; } .combination-block-button { background-color: rgb(196, 196, 196) !important; color: black !important; fill: var(--secondary-text) !important; } .combination-block-button:hover { background-color: rgb(134, 134, 134) !important; color: black !important; fill: black !important; } .accept-current-block-button { background-color: var(--conflict-current-bg-light) !important; color: black !important; fill: var(--secondary-text) !important; } .accept-current-block-button:hover { background-color: var(--conflict-current-bg-light-hover) !important; } .accept-incoming-block-button { background-color: var(--conflict-incoming-bg-light) !important; color: black !important; fill: var(--secondary-text) !important; } .accept-incoming-block-button:hover { background-color: var(--conflict-incoming-bg-light-hover) !important; color: black !important; fill: black !important; } .default-container { border-radius: 8px; padding: 5px; background-color: var(--primary-background); color: var(--primary-text); border: 1px solid var(--primary-border); box-sizing: border-box; } .default-container-accent { border-radius: 8px; padding: 5px; background-color: var(--accent-background); color: var(--primary-text); border: 1px solid var(--primary-border); box-sizing: border-box; } .default-container-filled { border-radius: 8px; padding: 5px; background-color: var(--secondary-background); color: var(--primary-text); border: 1px solid var(--primary-border); box-sizing: border-box; } .default-selectableOption { color: var(--secondary-text); padding-top: 2px; padding-bottom: 2px; padding-left: 5px; padding-right: 5px; box-sizing: border-box; cursor: pointer; border-radius: 5px; } .default-selectableOption:hover { background-color: var(--hover-background); color: var(--hover-fill); } .default-selectableOption-filled { color: var(--secondary-text); padding-top: 2px; padding-bottom: 2px; padding-left: 5px; padding-right: 5px; cursor: pointer; border-radius: 8px; background-color: var(--secondary-background); border: 1px solid var(--primary-border); } .default-selectableOption-filled:hover { background-color: var(--hover-background); color: var(--hover-fill); } .default-selectableOption-filled.selected { background-color: var(--hover-background); color: var(--hover-fill); border: 1px solid var(--selected-border); } .default-listelement { cursor: pointer; white-space: nowrap; text-overflow: ellipsis; align-items: center; border-radius: 4px; padding: 2px 5px; } .default-listelement-selected { background-color: var(--hover-background); color: var(--hover-fill); } .default-listelement:hover { background-color: var(--hover-background); color: var(--hover-fill); } .default-container-gradient { background: linear-gradient(180deg, var(--gradient-start), var(--gradient-end)); } .default-container-gradient-light { background: linear-gradient(180deg, var(--gradient-start-light), var(--gradient-end-light)); } .default-container-gradient-dark { background: linear-gradient(180deg, var(--gradient-start-dark), var(--gradient-end-dark)); } /* Project list specific styling to override default-selectableOption padding */ .project-list-item { padding-right: 0px; } /* Hide delete icon by default, show on row hover */ .default-selectableOption .generic-button-delete-action { opacity: 0; } .default-selectableOption:hover .generic-button-delete-action { opacity: 1; } /* diff container styles */ .diff-removed-container { background-color: var(--diff-removed-background); width: 100%; padding: 5px; box-sizing: border-box; overflow-wrap: break-word; word-wrap: break-word; } .diff-added-container { background-color: var(--diff-added-background); width: 100%; padding: 5px; box-sizing: border-box; overflow-wrap: break-word; word-wrap: break-word; } /* Styles for icon components */ /* ICONS */ .icon-default-color { fill: var(--icon-fill); } .icon-selected-color { fill: var(--icon-hover-fill); } /* ICONS */ .icons { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 2px; } .icons path { fill: var(--icon-fill); } /* Hover effect */ .icons:hover { background-color: var(--icon-hover-background); border-radius: 5px; } .icons:hover path { fill: var(--icon-hover-fill); } .icons-wide-margin { margin-right: 10px; margin-left: 10px; } /* ICONS */ .icons-nobackground { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .icons-nobackground path { fill: var(--icon-fill); transition: fill 0.2s ease-in-out; } .icons-nobackground:hover path { fill: var(--icon-hover-fill); } /* Consolidated .generic-icon styles */ .generic-icon { cursor: pointer; padding: 5px; border-radius: 5px; height: fit-content; width: fit-content; color: var(--icon-fill); user-select: none; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; background-color: transparent; border: 1px solid transparent; /* margin: 0px 2px; */ } .generic-icon path { fill: var(--icon-fill); } .generic-icon:hover { background-color: var(--icon-hover-background); color: var(--icon-hover-fill); } .generic-icon:hover path { fill: var(--icon-hover-fill); } .generic-icon-selected { background-color: var(--icon-selected-background); color: var(--icon-hover-fill); } .generic-icon-selected path { fill: var(--icon-hover-fill); } /* Specific icon variant, if still needed, ensure it uses theme vars */ .generic-icons-white:hover path { fill: var(--hover-fill); } /* Styles for input components */ .default-input-box { border-radius: 5px; background-color: var(--accent-background); color: var(--primary-text); height: fit-content; min-width: 30px; min-height: 20px; padding-left: 4px; padding-right: 4px; vertical-align: middle; box-sizing: border-box; overflow: visible; outline: none; } .default-input-box-locked { background-color: transparent; border: 1px solid transparent; color: var(--secondary-text); } /* Style for textarea elements */ .default-textarea { border-radius: 5px; background-color: var(--accent-background); color: var(--primary-text); min-width: 30px; min-height: 40px; padding: 4px; box-sizing: border-box; outline: none; overflow: auto; resize: vertical; font-family: inherit; font-size: inherit; line-height: inherit; border: none; } .default-input-box::-webkit-scrollbar, .default-textarea::-webkit-scrollbar { width: 5px; /* For vertical scrollbars */ height: 5px; /* For horizontal scrollbars */ } /* Ensure all content within contentEditable input boxes is vertically centered */ .default-input-box[contenteditable="true"] * { vertical-align: middle; } .default-input-box-locked[contenteditable="true"] * { vertical-align: middle; } /*POPUP STYLES */ .popup { /* min-width: 300px; */ position: absolute; background-color: var(--primary-background); border: 1px solid rgb(46, 46, 46); border-radius: 10px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.7); z-index: var(--z-modal); } .popup-title { font-size: 16px; font-weight: 600; color: var(--primary-text); } .popout-container { position: absolute; z-index: var(--z-modal); } .popup-tight { position: relative; min-width: 350px; max-width: 1000px; min-height: 25px; /* background-color: black; */ background-color: var(--primary-background); border: 1px solid rgb(46, 46, 46); border-radius: 8px; z-index: var(--z-modal); box-shadow: 0 0 15px rgba(0, 0, 0, 0.7); overflow-y: auto; } .popup-tight-light { position: relative; min-width: 350px; max-width: 1000px; min-height: 25px; background-color: var(--primary-background); border: 1px solid rgb(46, 46, 46); border-radius: 8px; z-index: var(--z-modal); box-shadow: 0 0 15px rgba(0, 0, 0, 0.7); overflow-y: auto; } .popup-tight-element { display: flex; padding: 5px; align-items: center; cursor: pointer; /* Reverses the text direction */ white-space: nowrap; /* Prevents wrapping */ text-overflow: ellipsis; } .popup-tight-element:hover { background-color: #303030; color: white; } .popup-tight-element-selected { background-color: #424242; } .popup-element { height: 10px; padding: 5px; padding-left: 8px; padding-right: 8px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-width: 200px; border-radius: 5px; margin: 5px; } .popout-element-line { margin: 15px 5px; height: 1px; border: none; background-color: gray; } .popup-element-text { color: rgb(255, 255, 255); padding-left: 10px; } .popup-element-svg { fill: gray; padding-left: 5px } .popup-element:hover { background-color: rgb(56, 56, 56); } .popup-element-selected { background-color: rgb(56, 56, 56); color: white; } .popup-element:hover svg path { fill: white; } .popup-element:hover .popup-element-text { color: white; } .display-settings-popup { position: absolute; border: 1px solid rgb(255, 255, 255); padding: 5px; background: #1d1d1d; } .display-settings-popup-row { display: flex; padding: 5px; margin-bottom: 5px; } .display-settings-popup-label { color: gray; font-weight: 700; width: 50px; text-align: right; margin-right: 5px; padding: 5px; } .display-settings-popup-input-numbers { width: 50px; height: 30px; padding: 5px; border: 1px solid #ccc; border-radius: 5px; background-color: #1d1d1d; color: #ffffff; box-sizing: border-box; } .select-object-popout { min-width: 20px; max-width: fit-content; background-color: #1e1e1e; border: 1px solid gray; border-radius: 5px; position: relative; color: gray; padding: 5px; } .select-object-popout:hover { background-color: #424242; } /* Customize the appearance when the input is focused */ .display-settings-popup-input-numbers:focus { outline: none; border-color: none; } .newObjectPopup { position: fixed; /* min-width: 300px; */ background-color: black; border: 1px solid grey; border-radius: 15px; padding: 15px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.7); } .newObjectPopup-element { display: flex; margin: 10px; } .newObjectPopup-name { align-items: right; width: 200px; } .newObjectPopup-value { background-color: #252526; min-width: 400px } .action-popout-header { font-size: 20px; font-weight: 600; padding: 10px; color: white; } .action-popout-subheader { font-size: 14px; padding: 10px; color: white; } .action-popout-button-row { justify-content: end; padding: 5px; display: flex; } .action-popout-button-cancel { padding: 10px; padding-left: 20px; padding-right: 20px; border: 1px solid white; margin: 10px; } .action-popout-button-cancel:hover { background-color: rgb(255, 255, 255); color: black } .action-popout-button-accept { padding: 10px; /* border: 1px solid red; color: red; */ margin: 10px; padding-left: 20px; padding-right: 20px; } .action-popout-button-accept:hover { /* background-color: red; */ color: white; } .popup-container { position: absolute; display: flex; /* border: 4px solid blue; */ z-index: var(--z-modal); } .display-settings-container-popup { background-color: #1d1d1d; padding: 5px; position: absolute; left: 70px; bottom: 0; z-index: var(--z-modal); width: fit-content; height: fit-content; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); border: 1px solid gray; } .display-settings-key { font-weight: 600; color: gray; min-width: 80px; width: fit-content; padding-right: 5px; text-transform: uppercase; } .display-settings-label { color: gray; padding-left: 5px; } .display-settings-input-box { border: 1px solid #555; border-radius: 5px; background-color: #333; color: #fff; outline: none; display: flex; } .display-settings-input-area { padding: 5px; width: 30px; border-radius: 5px; align-items: center; } .display-settings-arrowBox { display: flex; flex-direction: column; justify-content: center; padding: 5px; } .display-settings-arrow:hover { background-color: #424242; } .status-popout { bottom: 30px; right: 40px; padding: 20px; } .color-map { width: 256px; height: 156px; cursor: crosshair; background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)), linear-gradient(to top, #000, rgba(0, 0, 0, 0)); border: 1px solid gray; } .color-preview { width: 20px; height: 20px; border: 1px solid gray; margin: 5px; } .controls { display: flex; justify-content: space-between; align-items: center; } .controls input { width: 50px; background-color: transparent; border: 1px solid gray; margin: 5px; height: 20px; color: white; } .controls button { margin: 10px; } /* NOTIFICATION POPUP STYLES */ .error-notification { border: 1px solid rgb(204, 77, 77); color: white; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); min-width: 300px; max-width: 400px; } .warning-notification { border: 1px solid rgb(204, 159, 6); color: white; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); min-width: 300px; max-width: 400px; } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .circular-spinner { border: 4px solid var(--spinner-circular-border); /* Light grey border */ border-top: 4px solid var(--spinner-circular-top-border); /* White color for the spinning part */ border-radius: 50%; width: 20px; /* Adjust size as needed */ height: 20px; /* Adjust size as needed */ animation: spin 1s linear infinite; /* Apply the animation */ } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .notched-spinner { /* Remove border properties */ border: none; background: transparent; width: 10px; /* Keep original size */ height: 10px; border-radius: 50%; position: relative; transform-origin: center center; /* Needed for pseudo-element positioning */ /* Remove animation from the main element */ } .notched-spinner::before { content: ''; position: absolute; box-sizing: border-box; /* Include border in size */ top: 0; left: 0; width: 100%; /* Fill parent */ height: 100%; border: 2.5px solid var(--spinner-notched-pseudo-border); /* Apply border here */ border-top-color: var(--spinner-notched-pseudo-top-transparent); /* Create the notch */ border-radius: 50%; animation: spin 1s linear infinite; /* Apply animation here */ } .placeholder { color: var(--placeholder-text); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Ensure text is selectable when not in placeholder mode */ [contenteditable]:not(.placeholder) { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } .section-key { color: var(--secondary-text); font-weight: 600; text-transform: uppercase; } /* Style for top-aligned placeholders in inputs */ .top-aligned-input::placeholder { text-align: left; vertical-align: top; position: absolute; top: 8px; left: 8px; } /* Styles for tooltip components */ .info-icon { max-height: 15px; height: 15px; max-width: 15px; width: 15px; cursor: pointer; border-radius: 20px; color: white; text-align: center; display: flex; background-color: var(--info-icon-background); font-size: 8pt; font-weight: 900; align-items: center; justify-content: center; text-align: center; position: relative; } .info-icon:hover { background-color: var(--hover-background); color: var(--hover-fill); } .info-details { visibility: hidden; min-width: 200px; max-width: 400px; width: max-content; background-color: var(--accent-background); color: var(--primary-text); text-align: left; font-weight: 400; border-radius: 6px; padding: 8px; position: absolute; z-index: var(--z-tooltip); left: 25px; top: 50%; transform: translateX(10px); font-size: 12px; line-height: 1.4em; box-shadow: 0 0 10px var(--shadow-primary); } .info-icon:hover .info-details { visibility: visible; } .change-moved-object { border: 2px dashed #c50000 !important; opacity: 0.5; } .change-added-object { background-color: #006a00 !important; } .change-removed-object { background-color: #c50000 !important; } .change-updated-object { border: 1px solid #006a00 !important; } .change-updated-renamed-object { color: #006a00 !important; } /* Slide diff visualization - reuses document diff colors from colors.css */ .slide-block-diff-added { background-color: var(--diff-added-doc-block-background); border: 2px solid var(--diff-added-doc-block-border); } .slide-block-diff-removed { background-color: var(--diff-removed-doc-block-background); border: 2px solid var(--diff-removed-doc-block-border); } .slide-block-diff-modified-prior { background-color: var(--diff-removed-doc-block-background); border: 2px solid var(--diff-removed-doc-block-border); opacity: 0.7; } .slide-block-diff-modified-current { background-color: var(--diff-added-doc-block-background); border: 2px solid var(--diff-added-doc-block-border); opacity: 0.7; } .slide-diff-container { position: relative; pointer-events: none; } /* Merge conflict styling for slides */ .slide-block-merge-current { background-color: var(--merge-current-doc-block-background); border: 2px solid var(--conflict-current-color); } .slide-block-merge-incoming { background-color: var(--merge-incoming-doc-block-background); border: 2px solid var(--conflict-incoming-color); } .container-tab-row { border-bottom: 1px solid var(--primary-border); display: flex; margin-bottom: 10px; gap: 5px; align-items: center; overflow-x: auto; } .container-tab-row::-webkit-scrollbar { height: 5px; /* Adjust the height of the horizontal scroll bar */ } .container-tab { display: flex; align-items: center; color: var(--secondary-text); min-height: 20px; margin-right: 10px; } .container-tab-name { padding: 5px; padding-bottom: 8px; font-weight: 600; color: var(--secondary-text); cursor: pointer; } .container-tab-name:hover { color: var(--primary-text); } .container-tab-name-selected { color: var(--primary-text); border-bottom: 1px solid var(--primary-text); } /* Gantt Chart Styles */ /* Main container */ .gantt-main-container { width: 100%; height: 100%; display: flex; flex-direction: colunm; overflow: hidden; } /* Settings bar at top */ .gantt-settings-bar { padding: 10px; border-bottom: 1px solid var(--primary-border); /* background-color: var(--secondary-background); */ display: flex; align-items: center; justify-content: space-between; } .gantt-title { font-weight: 600; font-size: 14px; color: var(--primary-text); } .gantt-controls { display: flex; align-items: center; gap: 10px; } .gantt-task-count { font-size: 12px; color: var(--secondary-text); } /* Left panel - horizontally sticky, content positioned via transform */ .gantt-left-panel { width: 100%; height: 100%; overflow: hidden; /* No scrolling - position controlled by sync system */ background-color: var(--primary-background); box-sizing: border-box; } /* Right panel - main scroller for both vertical and horizontal */ .gantt-right-panel { width: 100%; height: 100%; overflow: scroll; /* Force scrollbars to always be visible */ background-color: var(--primary-background); position: relative; box-sizing: border-box; } /* Persistent scrollbar - extends narrow-scrollbar but always visible */ .persistent-scrollbar.narrow-scrollbar::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb-background) !important; /* Always visible instead of transparent */ } .persistent-scrollbar.narrow-scrollbar::-webkit-scrollbar-track { background: var(--scrollbar-track-background) !important; /* Always visible */ } .gantt-content-area { flex-grow: 1; overflow: hidden; } /* Divider */ .gantt-divider { background-color: var(--primary-border); cursor: col-resize; } /* Chart placeholder */ .gantt-chart-placeholder { padding: 20px; color: var(--secondary-text); text-align: center; font-size: 14px; } /* Table */ .gantt-table-container { width: 100%; height: 100%; } .gantt-table { width: 100%; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; } /* Table headers */ .gantt-header-row { position: sticky; top: 0; z-index: var(--z-sticky); background-color: var(--primary-background); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .gantt-header-cell { border: none; padding: 0 5px; text-align: left; font-weight: 600; font-size: 10px; color: var(--primary-text); background-color: var(--secondary-background); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; } .gantt-header-task-name { width: 50%; } .gantt-header-duration { width: 15%; } .gantt-header-start { width: 17.5%; } .gantt-header-finish { width: 17.5%; } /* Table rows */ .gantt-task-row { border-bottom: 1px solid var(--primary-border); box-sizing: border-box; } /* Table cells */ .gantt-cell-base { border-bottom: 1px solid var(--primary-border); border-left: none; border-right: none; border-top: none; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; } .gantt-name-cell { padding: 0 5px; font-size: 10px; min-width: 150px; /* Fallback minimum, will be overridden by JS to match settings row */ } .gantt-data-cell { padding: 0 5px; } /* Task name container and hierarchy */ .gantt-name-container { display: flex; align-items: center; white-space: nowrap; overflow: hidden; } .gantt-hierarchy-connector { display: inline-block; width: 12px; height: 12px; margin-right: 2px; border-left: 1px solid var(--secondary-text); border-bottom: 1px solid var(--secondary-text); opacity: 0.5; } .gantt-toggle-button { display: inline-block; width: 12px; height: 12px; margin-right: 4px; cursor: pointer; font-size: 9px; text-align: center; background-color: var(--secondary-background); border: 1px solid var(--primary-border); border-radius: 2px; } .gantt-leaf-spacer { display: inline-block; width: 12px; } /* Duration container */ .gantt-duration-container { display: flex; align-items: center; gap: 2px; white-space: nowrap; overflow: hidden; } .gantt-duration-unit { font-size: 10px; color: var(--secondary-text); } /* Date containers */ .gantt-date-container { white-space: nowrap; overflow: hidden; } /* Input field styles */ .gantt-duration-input { width: 60px; font-size: 10px; padding: 1px 3px; } .gantt-duration-input-parent { border: none; background-color: transparent; opacity: 0.7; } .gantt-duration-input-editable { border: 1px solid var(--primary-border); background-color: var(--primary-background); opacity: 1; } .gantt-date-input { width: 110px; font-size: 10px; padding: 1px 4px; border-radius: 4px; } .gantt-date-input-parent { border: none; background-color: transparent; opacity: 0.7; } .gantt-date-input-editable { border: 1px solid var(--primary-border); background-color: var(--primary-background); opacity: 1; } #appHeader { color: var(--primary-text); background-color: var(--accent-background); height: 35px; min-height: 35px; display: flex; justify-content: space-between; align-items: center; z-index: var(--z-header); -webkit-app-region: drag; -webkit-user-select: none; user-select: none; } #loadingScreen { width: 100vw; height: 100vh; background-color: var(--tertiary-background); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; } #loadingSVG { width: 65%; height: 65%; margin-bottom: 80px; } #appBody { background-color: var(--primary-background); width: 100vw; height: calc(100vh - 35px); max-height: calc(100vh - 35px); overflow: hidden; display: flex; } .bodyContainer { display: block; height: 100%; max-height: 100%; overflow: hidden; width: calc(100% - 50px); min-width: 300px; /* background-color: rgb(171, 207, 255); */ /* border: 1px dashed rgb(255, 123, 0) */ } #homePage { display: block; height: 100%; width: 100%; /* background-color: teal; */ } #adminPage { display: block; height: 100%; width: 100%; /* background-color: teal; */ } .workspaceContainer { display: none; height: 100%; width: 100%; margin: 0; padding: 0; background-color: var(--primary-background); /* border: 1px dashed rgb(255, 123, 0) */ } #workspacePage { width: calc(80% - 4px); background-color: var(--primary-background); min-width: 100px; } #indexContainer { /* padding: 5px; */ background-color: var(--secondary-background); height: 100%; min-width: 180px; /* border-left: 1px solid gray; border-top: 1px solid gray; */ } #objectsPage { display: flex; flex-direction: row; width: 100%; height: calc(100% - 115px); overflow: hidden; min-height: 40px; } #chatTerminalPage { display: flex; width: fit-content(100%); height: 100px; background-color: var(--primary-background); min-height: 115px; min-width: 100px; } #chatPane { width: calc(80vw); min-width: 600px; user-select: auto; } #objectTerminalPane { width: 0%; height: 100%; min-width: 0px; user-select: auto; } .widgetsContainer { display: flex; width: 50px; min-width: 50px; height: calc(100vh - 35px); flex-direction: column; justify-content: center; align-items: center; /* overflow-y: hidden; overflow-x: visible; */ } #settingsPage { display: none; } .header { box-sizing: border-box; height: 50px; background: var(--secondary-background); border-width: 0px 1px; border-style: solid; border-color: var(--primary-border); box-shadow: 0px 4px 8px var(--shadow-primary); -webkit-user-select: none; /* Safari */ -ms-user-select: none; /* IE 10 and IE 11 */ user-select: none; /* Standard syntax */ display: flex; flex-direction: row; /* justify-content: space-between; */ align-items: left; box-sizing: 100%; /* padding: 20px; */ } [contenteditable] { outline: 0px solid transparent; } .renderArea { user-select: none; overflow: hidden; box-sizing: border-box; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } #app-header-download { /* rotate svg */ display: flex; align-items: center; margin-left: 20px; margin-right: 10px; -webkit-app-region: no-drag; padding: 7px; background-color: rgba(0, 255, 0, 0.15); border-radius: 10px; color: var(--button-green-hover-bg); font-weight: 700; display: none; } #app-header-download:hover { /* fill: rgb(63, 63, 63); */ background-color: var(--button-green-hover-bg); color: white; } #app-header-download path { fill: var(--button-green-hover-bg); } #app-header-download:hover path { fill: #ffffff; } #project-status-text { display: flex; align-items: center; margin-left: 20px; margin-right: 10px; -webkit-app-region: no-drag; padding: 7px; background-color: var(--button-red-bg); border-radius: 10px; color: #ffffff; font-weight: 700; display: none; } #project-status-text:hover { /* fill: rgb(63, 63, 63); */ background-color: var(--button-red-hover-bg); color: white; } .loading-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Optional: adds a semi-transparent background */ display: flex; /* To center the spinner */ justify-content: center; /* Center horizontally */ align-items: center; /* Center vertically */ opacity: 1; background-color: var(--loading-overlay-bg); /* Start invisible */ /* animation: fadeInOverlay 0.1s ease forwards; */ /* Apply the animation */ /* Start after 0.2 seconds */ z-index: var(--z-loading); /* Ensure it's on top */ } @keyframes fadeInOverlay { 0% { opacity: 0; } 100% { opacity: 1; } } .dropshadow { box-shadow: 0 4px 6px var(--shadow-primary); } .big-dropshadow { box-shadow: 0 0 15px var(--shadow-primary); } /* Workspace resize bar styles */ .workspace-resize-bar { position: relative; border-left: 1px solid var(--primary-border); } /* Utility class to prevent text selection */ .not-selectable, .not-selectable * { -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important; } /* default input styles removed */ input { border: none; outline: none; } .selected-block { border: 2px solid var(--focused-border); border-radius: 4px; } .textLayer { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; opacity: 1; z-index: 1000; line-height: 1.0; cursor: text; } .textLayer>span { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; /* Improve selection with padding */ padding: 3px 2px; margin: -3px -2px; } .textLayer>span::selection { background: rgba(0, 0, 255, 0.3) !important; /* Add shadow to improve selection continuity */ box-shadow: 0 -1px 0 rgba(0, 0, 255, 0.3), 0 1px 0 rgba(0, 0, 255, 0.3) !important; } /* Better line-start/end selection */ .textLayer>span.line-start { padding-left: 4px; margin-left: -4px; } .textLayer>span.line-end { padding-right: 4px; margin-right: -4px; } /* Disable selection during scrolling to prevent artifacts */ /* .scrolling .textLayer { pointer-events: none; user-select: none; } */ .schematic { stroke: var(--primary-text); fill: none; color: var(--primary-text); user-select: none; stroke-width: 2 !important; } /* Split paragraph alignment is handled dynamically in JavaScript to preserve original text-align while applying justify for split ends */ .resize-hover { background-color: transparent; z-index: var(--z-popover); } .resize-hover:hover { background-color: var(--resize-handle-hover-background); } .resize-bar-horizontal { position: absolute; width: 100%; height: 3px; /* Set the width of the resize bar */ background-color: var(--primary-background); border-top: 1px solid var(--secondary-border); /* Set the background color of the resize bar */ cursor: ns-resize; /* Change the cursor to indicate it can be resized horizontally */ z-index: var(--z-popover); /* Ensure the resize bar is above other elements within the container */ } .resize-bar-horizontal:hover { background-color: var(--resize-bar-hover-background); } .resize-bar-horizontal-padded { width: 100%; height: 3px; background-color: var(--secondary-background); border-top: 1px solid var(--primary-border); cursor: ns-resize; z-index: var(--z-popover); } .resize-bar-horizontal-padded:hover { background-color: var(--resize-bar-hover-background); } .table-cell-selected-divs { position: absolute; } .table-cell-selected::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid var(--slide-selection); pointer-events: none; box-sizing: border-box; } .table-content-cell { position: relative; padding: 3px; box-sizing: border-box; } .generic-table { border-radius: 10px; border: 1px solid var(--primary-border); width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; position: relative; } .generic-table-header { background-color: var(--secondary-background); position: relative; z-index: 1; } .generic-table-header-cell { font-weight: 600; padding: 8px; color: var(--secondary-text); } .generic-table-header-fixed { position: sticky; top: 0; z-index: 100; background-color: var(--secondary-background); } /* Sticky first column */ .generic-table td:first-child, .generic-table th:first-child { position: sticky; left: 0; z-index: 1; background-color: var(--primary-background); } /* Higher z-index for header first cell to overlap both sticky areas */ .generic-table thead th:first-child { z-index: 3; background-color: var(--secondary-background); } /* Ensure all thead th elements are sticky */ .generic-table thead th { position: sticky; top: 0; z-index: 2; background-color: var(--secondary-background); } /* Handle multi-row headers */ .generic-table thead tr:nth-child(2) th { top: 32px; /* Height of first row */ } .generic-table thead tr:nth-child(3) th { top: 64px; /* Height of first two rows */ } .generic-table thead tr:nth-child(4) th { top: 96px; /* Height of first three rows */ } /* Ensure first column cells have proper background */ .generic-table tbody td:first-child { background-color: var(--primary-background); } .generic-table-cell { padding: 8px; border-top: 1px solid var(--primary-border); } .risk-matrix-container { display: flex; flex-direction: column; height: calc(100% - 10px); box-sizing: border-box; } .risk-matrix-layout { display: grid; grid-template-areas: ". x-axis-title ." "y-axis-label grid y-axis-title" ". x-axis-label ."; grid-template-columns: auto 1fr auto; grid-template-rows: auto 1fr auto; gap: 10px; padding: 20px; align-items: stretch; box-sizing: border-box; } .y-axis-label-container { grid-area: y-axis-label; display: flex; flex-direction: column; text-align: right; font-weight: bold; gap: 10px; /* Spacing between labels */ padding-right: 10px; } .x-axis-label-container { grid-area: x-axis-label; display: flex; justify-content: space-around; text-align: center; font-weight: bold; } .y-axis-label { flex: 1; display: flex; align-items: center; justify-content: flex-end; } .x-axis-title, .y-axis-title { font-weight: bold; text-align: center; } .x-axis-title { grid-area: x-axis-title; } .y-axis-title { grid-area: y-axis-title; writing-mode: vertical-rl; transform: rotate(180deg); } .risk-matrix-grid { grid-area: grid; display: grid; border: 1px solid var(--primary-background); position: relative; } .risk-matrix-cell { border: 1px solid var(--primary-background); min-height: 50px; min-width: 80px; box-sizing: border-box; } .risk-point { position: absolute; width: 20px; height: 20px; background-color: black; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; border: 1px solid white; cursor: pointer; z-index: 10; transform: translate(-50%, -50%); } .risk-point:hover { z-index: 11; transform: translate(-50%, -50%) scale(1.2); } /* Scroll container for the risk table with sticky header */ .risk-table-container { overflow-y: auto; overflow-x: hidden; border: 1px solid var(--primary-background); background-color: var(--primary-background); border-radius: 4px; position: relative; padding: 5px; box-sizing: border-box; } /* Temporary highlight when a row is targeted via bubble click */ .risk-table-container tbody tr.highlight-once { background-color: rgba(77, 163, 255, 0.12); outline: 2px solid var(--accent-color, #4da3ff); outline-offset: -2px; } /* Properties view table */ .properties-view-table { border-collapse: collapse; width: 100%; } .properties-view-table td, .properties-view-table th { padding-right: 5px; } .properties-view-table td:first-child, .properties-view-table th:first-child { padding-left: 0; } .properties-view-table td:last-child, .properties-view-table th:last-child { padding-right: 0; } /* ============================================================================ SPREADSHEET STYLES ============================================================================ */ .spreadsheet-container { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .spreadsheet-container:focus { outline: none; } /* Corner cell (top-left intersection of headers) */ .spreadsheet-corner { background-color: var(--secondary-background); } /* Column headers */ .spreadsheet-col-header { background-color: var(--secondary-background); color: var(--secondary-text); transition: background-color 0.1s ease, color 0.1s ease; } .spreadsheet-col-header:hover { background-color: var(--hover-background); } .spreadsheet-col-header.spreadsheet-header-selected { background-color: var(--spreadsheet-selection-bg); color: var(--primary-text); } .spreadsheet-col-header.spreadsheet-header-contains-selection { color: var(--primary-text); } /* Row headers */ .spreadsheet-row-header { background-color: var(--secondary-background); color: var(--secondary-text); transition: background-color 0.1s ease, color 0.1s ease; } .spreadsheet-row-header:hover { background-color: var(--hover-background); } .spreadsheet-row-header.spreadsheet-header-selected { background-color: var(--spreadsheet-selection-bg); color: var(--primary-text); } .spreadsheet-row-header.spreadsheet-header-contains-selection { color: var(--primary-text); } /* Resize handles */ .spreadsheet-col-resize-handle, .spreadsheet-row-resize-handle { opacity: 0; background-color: transparent; } .spreadsheet-col-header:hover .spreadsheet-col-resize-handle, .spreadsheet-row-header:hover .spreadsheet-row-resize-handle { opacity: 0; background-color: transparent; } /* Cells */ .spreadsheet-cell { background-color: var(--primary-background); /* Borders removed - now handled by canvas overlay + border overlays */ overflow: hidden; contain: strict; /* transition removed - was causing flash when scrolling with row/column colors */ outline: none; } /* Cells with custom background (from cell/row/column) - use inline style */ .spreadsheet-cell.has-custom-background { background-color: unset; } .spreadsheet-cell:hover:not(.spreadsheet-cell-editing):not(.has-custom-background) { background-color: var(--hover-background); } /* Selected cells (part of a multi-cell selection) - background only for cells without custom colors */ .spreadsheet-cell-selected { background-color: var(--spreadsheet-selection-bg-light); } /* Selected cells with custom background colors - don't apply selection background */ .spreadsheet-cell-selected.has-custom-background { background-color: unset; /* Let inline style take precedence */ } /* Active cell (the anchor of selection, single-clicked) */ .spreadsheet-cell-active:not(.has-custom-background) { background-color: var(--primary-background); /* No outline needed - using border overlay system instead */ } /* Active cell when part of a multi-cell selection - NO highlight (distinguishes it from other selected cells) */ .spreadsheet-cell-active.spreadsheet-cell-in-range:not(.has-custom-background) { background-color: var(--primary-background); } /* Active cell with custom background - preserve the custom color */ .spreadsheet-cell-active.has-custom-background, .spreadsheet-cell-active.spreadsheet-cell-in-range.has-custom-background { background-color: unset; /* Let inline style take precedence */ } /* Editing cell (double-clicked, in edit mode) */ .spreadsheet-cell-editing:not(.has-custom-background) { overflow: visible; z-index: var(--z-popover); background-color: transparent; cursor: text; padding: 4px 6px; min-width: 100px; word-wrap: break-word; white-space: pre-wrap; /* Selection border is handled by border overlay system */ } /* Editing cell with custom background - preserve the color */ .spreadsheet-cell-editing.has-custom-background { overflow: visible; z-index: var(--z-popover); background-color: unset; /* Let inline style take precedence */ cursor: text; padding: 4px 6px; min-width: 100px; word-wrap: break-word; white-space: pre-wrap; } /* Inline equation editing should NOT expand over adjacent cells (needed for cell picking). */ .spreadsheet-cell-editing.spreadsheet-inline-equation-editing { min-width: unset; overflow: hidden; } /* Inline equation editor should blend into the cell (no accent background box) */ .spreadsheet-cell-editing .spreadsheet-inline-equation-editor, .spreadsheet-cell-editing .spreadsheet-inline-equation-editor .default-input-box { background-color: transparent; } /* When editing, don't show hover state */ /* .spreadsheet-cell-editing:hover:not(.has-custom-background) { background-color: var(--primary-background); } */ /* Focus styling (when cell is focused for keyboard input) */ /* Don't remove outline when in editing mode */ .spreadsheet-cell:focus:not(.spreadsheet-cell-editing) { outline: none; } /* Data attribute based styling for backwards compatibility */ .spreadsheet-cell[data-can-edit="true"] { cursor: text; user-select: auto; } .spreadsheet-cell[data-can-edit="false"] { cursor: cell; user-select: none; } /* Viewport scrollbar styling */ .spreadsheet-viewport::-webkit-scrollbar { width: 10px; height: 10px; } .spreadsheet-viewport::-webkit-scrollbar-track { background: var(--scrollbar-track-background); } .spreadsheet-viewport::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb-background); border-radius: 5px; } .spreadsheet-viewport::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover-background); } .spreadsheet-viewport::-webkit-scrollbar-corner { background: var(--secondary-background); } .schematic { stroke: var(--primary-text); fill: none; color: var(--primary-text); user-select: none; stroke-width: 2 !important; } .schematic .edge-path { stroke-width: 2 !important; stroke: var(--secondary-border); } .schematic text { fill: var(--primary-text); stroke: none; /* font-size: 10px; */ font-weight: bold; font-family: "Courier New", monospace; } .schematic .nodelabel { text-anchor: middle; } /* Presentation Mode Styles */ #presentation-mode-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #000; z-index: 10000; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; margin: 0; padding: 0; } #presentation-slide-container { flex: 1; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; position: relative; margin: 0; padding: 0; } .presentation-slide { position: relative; box-shadow: none; transition: transform 0.3s ease; margin: 0; padding: 0; } #presentation-controls { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 15px; align-items: center; background: rgba(0, 0, 0, 0.7); padding: 10px 20px; border-radius: 8px; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } #presentation-controls button { background: transparent; border: 2px solid #fff; color: #fff; font-size: 20px; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: all 0.2s ease; } #presentation-controls button:hover { background: rgba(255, 255, 255, 0.2); transform: scale(1.1); } #presentation-slide-counter { color: #fff; font-size: 16px; font-family: Arial, sans-serif; min-width: 60px; text-align: center; } /* Slide Drop Target Hover Effect */ .slide-drop-target-hover { outline: 3px solid #4285f4; outline-offset: -3px; cursor: copy; } /* Ensure the cursor is applied to all elements during drag */ .slide-drop-target-hover * { cursor: copy; } /* Overall container styling */ #info-page { display: flex; justify-content: center; overflow-y: auto; width: 100%; box-sizing: border-box; } .info-page-inner { width: calc(100% - 40px); max-width: 1000px; padding-left: 20px; padding-right: 20px; box-sizing: border-box; } /* Feedback box */ .feedback-box { border-radius: 10px; border: 1px solid var(--secondary-border); width: calc(100% - 30px); padding: 15px; min-height: 100px; max-height: 1000px; resize: vertical; overflow-y: auto; background-color: var(--primary-background); color: var(--primary-text); } /* Tooltip styling */ .tooltip-container { position: relative; display: inline-block; cursor: pointer; color: var(--button-blue-bg); margin-left: 10px; padding: 8px; } .tooltip-text { visibility: hidden; min-width: 200px; max-width: 400px; width: max-content; background-color: var(--accent-background); color: var(--primary-text); text-align: left; border-radius: 6px; padding: 8px; position: absolute; z-index: 999; left: 25px; top: 50%; transform: translateY(-50%) translateX(10px); font-size: 12px; line-height: 1.4em; box-shadow: 0 0 10px var(--shadow-primary); } .tooltip-text p { margin: 0 0 6px 0; } .tooltip-text p:last-child { margin-bottom: 0; } .tooltip-container:hover .tooltip-text { visibility: visible; } #credits-display { width: 300px; /* Set the container width */ display: flex; flex-direction: column; /* Stack rows vertically */ gap: 10px; /* Spacing between each row */ margin-top: 20px; } /* Each row uses space-between for the label and value */ .credits-line { display: flex; justify-content: space-between; width: 100%; color: var(--primary-text); } .credit-amount-container { display: flex; justify-content: space-between; width: 100%; padding: 4px 8px; } .active-credit-source { border: 2px solid var(--button-blue-bg); border-radius: 6px; } /* Link styling for "Terms of Service" */ .url-gray { color: var(--secondary-text); text-decoration: none; } .url-gray:hover { text-decoration: underline; } /* Storage */ #storage-container { width: 100%; margin-top: 20px; } .storage-line { display: flex; justify-content: space-between; color: var(--primary-text); font-size: 14px; } .storage-table-container { margin-top: 20px; border: 1px solid var(--primary-border); border-radius: 8px; overflow: hidden; width: 100%; display: table; /* This ensures the container fits the content exactly */ } .storage-table { width: 100%; border-collapse: collapse; color: var(--primary-text); margin-bottom: 0; /* Remove any bottom margin */ } .storage-table th { background-color: var(--primary-background); padding: 12px; text-align: left; font-weight: 600; border-bottom: 1px solid var(--primary-border); } .storage-table th.sortable { cursor: pointer; position: relative; padding-left: 25px; } /* Active sorting column */ .storage-table th.active-sort { background-color: var(--accent-background) !important; } /* Hover state for all sortable headers */ .storage-table th.sortable:hover { background-color: var(--hover-background) !important; } .sort-indicator { display: inline-block; width: 15px; /* Fixed width for the arrow */ text-align: center; position: absolute; left: 8px; /* Position on the left */ top: 50%; transform: translateY(-50%); user-select: none; /* Prevent text selection of the indicator */ } .storage-table td { padding: 10px 12px; border-bottom: 1px solid var(--primary-border); } .storage-table tbody tr:last-child td { border-bottom: none; } .storage-table tbody tr:hover { background-color: var(--accent-background); } .storage-button-container { margin-top: 10px; } #license-key-container { display: inline-flex; align-items: center; position: relative; } /* Space between the license key and eye icon */ #license-key-toggle { margin-left: 10px; } /* Add spin animation for refresh icon */ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .chat-wrapper { width: calc(100% - 2px); display: flex; flex-direction: column; justify-content: flex-end; height: calc(100% - 2px); position: relative; box-sizing: border-box; } #chat-active-agents { overflow-x: auto; /* Ensure horizontal scrollbar appears when needed */ } #chat-active-agents::-webkit-scrollbar { height: 5px; /* Set height for the entire scrollbar track */ } #chatContainer { width: 100%; height: 100px; min-height: 20px; max-height: 400px; overflow-y: auto; overflow-x: hidden; background-color: var(--accent-background); border-radius: 20px; margin: 40px; } .chatButtonHolder { display: flex; align-items: center; justify-content: space-around; height: 0px; } #chatInputContainer { position: relative; bottom: 8px; width: 100%; /* background-color: rgb(29, 29, 29); */ z-index: 1000; border-radius: 20px; margin-top: 10px; box-sizing: border-box; } #chatOptionsRow { display: flex; padding-left: 25px; padding-right: 25px; justify-content: space-between; align-items: center; /* background-color: #1d1d1d; */ } #chatHeader { justify-content: space-between; min-height: 5px; height: 25px; display: flex; align-items: center; /* background-color: #1d1d1d; */ z-index: 1000; position: relative; box-shadow: 0 15px 15px -15px var(--primary-text); } .message { display: flex; flex-direction: column-reverse; max-width: 70%; vertical-align: 25%; padding: 8px 14px; margin: 5px; border-radius: 20px; line-height: 1.15; font-style: normal; font-weight: 400; line-height: 20px; } .chat-user-message { background-color: var(--user-message-background); color: var(--user-message-text); padding: 5px; border-radius: 8px; -webkit-user-select: text; user-select: text; white-space: pre-line; border: 1px solid var(--primary-border); word-wrap: break-word; overflow-wrap: break-word; max-width: 100%; box-sizing: border-box; } /* Override browser default paragraph margins for user messages */ .user-chat-message-container p { margin-block-start: 0; margin-block-end: 0; margin-top: 0; margin-bottom: 0; } /* Override browser default paragraph margins for thought bubble content */ .thought-bubble-content p { margin-block-start: 10px; margin-block-end: 10px; margin-top: 0; margin-bottom: 0; } /* Light theme specific styles for user messages */ :root[data-theme='light'] .chat-user-message { background-color: var(--user-message-background-light); color: var(--user-message-text-light); } .chat-user-message::selection { /* Default (Dark theme) selection */ color: var(--user-message-selection-text-dark); background-color: var(--user-message-selection-background-dark); } :root[data-theme='light'] .chat-user-message::selection { color: var(--user-message-selection-text-light); background-color: var(--user-message-selection-background-light); } .user-file { background-color: var(--secondary-background); color: var(--user-message-text-color-dark); float: right; clear: both; margin-right: 5%; border-bottom-right-radius: 0; -webkit-user-select: text; user-select: text; } /* Light theme specific styles for user files */ :root[data-theme='light'] .user-file { background-color: var(--user-message-background-light); color: var(--user-message-text-light); } /* Selection styles for user files should also be themed if needed, */ /* mirroring .chat-user-message::selection */ .user-file::selection { /* Default (Dark theme) selection */ color: var(--user-message-selection-text-dark); background-color: var(--user-message-selection-background-dark); } :root[data-theme='light'] .user-file::selection { color: var(--user-message-selection-text-light); background-color: var(--user-message-selection-background-light); } .chat-ai-message { background-color: var(--ai-message-background); color: var(--primary-text); padding: 10px; border-radius: 15px; display: flex; -webkit-user-select: text; user-select: text; max-width: 70%; white-space: pre-line; } .chatgpt-file { background-color: var(--ai-message-background); color: var(--secondary-text); float: left; clear: both; margin-left: 5%; border-bottom-left-radius: 0; -webkit-user-select: text; user-select: text; } .chatgpt-loading { background-color: var(--tertiary-background); color: var(--primary-text-on-tertiary); float: left; clear: both; margin-left: 5%; border-bottom-left-radius: 0; -webkit-user-select: text; user-select: text; } #chat-AI-settings-icon { margin-left: 15px; margin-right: 5px; height: 40; width: 40; } #chat-AI-settings-icon:hover path { fill: var(--icon-hover-fill); } .input-wrapper { width: 98%; height: 24%; left: 1%; bottom: 2%; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 5px; border: none; font-style: normal; font-weight: 400; line-height: 20px; display: flex; align-items: center; justify-content: center; transition: height 0.2s ease; overflow: hidden; max-height: 144px; color: var(--accent-background); } .chat-input { width: calc(100% - 20px); max-height: 60vh; margin: 0; padding: 0; outline: none; border: none; color: var(--primary-text); overflow-x: hidden; overflow-y: auto; overflow-wrap: break-word; -webkit-rtl-ordering: logical; resize: none; } .chat-input.message-input-placeholder { color: var(--placeholder-text); } /* Added for generalChatInput compatibility */ .chat-input.placeholder { color: var(--placeholder-text); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Ensure chat input text is selectable when not in placeholder mode */ .chat-input:not(.placeholder) { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } #userPathContext { background-color: var(--accent-background); padding: 5px; padding-left: 10px; } .chat-newLine { display: flex; width: 100%; margin-bottom: 10px; overflow: hidden; } .chat-newline-left { justify-content: flex-start; } .chat-newline-right { justify-content: flex-end; } .chat-newobject-box { border: 2px solid gray; border-radius: 10px; padding: 10px; width: 40%; resize: vertical; } .chat-newobject-listsubbox { height: 100px; width: calc(100% - 20px); padding-right: 20px; overflow: auto; resize: vertical; display: none; background-color: var(--primary-background); overflow-x: hidden; border-radius: 5px; } .chat-ai-name { font-weight: 700; } @keyframes flash { 0% { background-color: var(--tertiary-background); } 50% { background-color: var(--secondary-text); } 100% { background-color: var(--tertiary-background); } } .chat-followup-bubble { /* background-color: #262626; */ color: var(--secondary-text); border-radius: 8px; padding-top: 4px; padding-bottom: 4px; padding-left: 7px; padding-right: 7px; margin: 5px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); cursor: pointer; animation: flash 0.5s; } .chat-followup-bubble:hover { background-color: var(--accent-background); color: var(--primary-text); } .chat-followup-bubble-selected { background-color: var(--accent-background); color: var(--primary-text); } #followupHolder { display: flex; } #clear-chat { background-color: var(--accent-background); } .chat-area { width: 100%; max-height: 60vh; display: flex; align-items: end; margin-top: 2px; padding-top: 10px; padding-bottom: 12px; padding-left: 12px; padding-right: 12px; background-color: var(--accent-background); outline: none; border: 0px solid var(--secondary-border); color: var(--primary-text); resize: none; overflow-y: scroll; border-radius: 20px; justify-content: space-between; overflow-x: hidden; z-index: 1000; box-sizing: border-box; } .ellipsis-loading { color: var(--placeholder-text); } .ellipsis-loading:after { overflow: hidden; display: inline-block; vertical-align: bottom; animation: ellipsis steps(4, end) 900ms infinite; content: '\2026'; } @keyframes ellipsis { 0% { content: ""; } 33% { content: "."; } 66% { content: ".."; } 100% { content: "..."; } } @keyframes gradientAnimation { 0% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .chat-ai-loading { background: linear-gradient(-45deg, var(--ai-message-background), var(--ai-message-background), var(--ai-message-background), var(--ai-message-highlight), var(--warning), var(--ai-message-highlight), var(--ai-message-background), var(--ai-message-background), var(--ai-message-background)); background-size: 750% 750%; animation: 4s gradientAnimation ease infinite; color: var(--primary-text); border-radius: 10px; padding: 10px; margin: 5px 0; } .chat-ai-loading-border { border: 1px solid var(--focused-border); } @keyframes flashCompleteAnimation { 0%, 100% { background-color: transparent; } 50% { background-color: var(--warning-hover-bg); } } @keyframes flashStoppedAnimation { 0%, 100% { background-color: var(--button-red-bg); } 50% { background-color: var(--button-red-hover-bg); } } .flash-complete { animation: flashCompleteAnimation 0.8s ease-out; } .flash-stopped { animation: flashStoppedAnimation 0.8s ease-in; } .flash-stopped-final { background-color: var(--error-hover-bg); } .flash-stopped-success { background-color: var(--success-hover-bg); } .sub-chat-info-text { color: var(--secondary-border); width: calc(100% - 50px); text-align: center; padding-bottom: 4px; padding-top: 0px; margin-top: 5px; display: flex; justify-content: space-between; padding-left: 25px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } #chat-enter-icon { color: var(--icon-fill); } #chat-enter-icon:hover { color: var(--icon-hover-fill); } /* #mic-input-icon { display: flex; margin-bottom: -2px; margin-right: 12px; height: 16px; width: 16px; color: #949494; } */ #mic-input-icon:hover { color: var(--icon-hover-fill); } .mic-input-icon-recording { color: var(--error) !important; } .chat-groq-border { border: 2px solid var(--warning) !important; } .fast-mode-fill { background-color: var(--ai-message-background); } .korrect-mode-fill { background-color: var(--button-green); } .chat-taskbubble { width: 16px; height: 16px; min-width: 16px; min-height: 16px; margin-right: 5px; border-radius: 50%; display: flex; justify-content: center; align-items: center; text-align: center; font-weight: 600; font-size: 8pt; color: var(--primary-text-on-inverted); background-color: var(--primary-text); border: 1px solid var(--primary-text); } .chat-taskbubble-complete { border: 1px solid var(--success); background-color: var(--success); color: var(--text-on-success-bg); } .chat-taskbubble-inprogress { border: 1px solid var(--button-blue-bg); background-color: var(--button-blue-bg); color: var(--primary-text); } .chat-task-row { display: flex; margin-bottom: 10px; width: 100%; } .chat-dragover { background-color: var(--secondary-background); outline: 1px solid var(--primary-text); } #upload-file-icon { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-right: 8px; margin-left: -3px; cursor: pointer; color: var(--placeholder-text); font-size: 12px; } #upload-file-icon:hover { color: var(--icon-hover-fill); } .chat-view-button { background-color: var(--accent-background); font-weight: 400; padding-left: 5px; padding-right: 5px; padding-top: 2px; padding-bottom: 2px; height: fit-content; text-align: center; border-radius: 5px; min-width: 12px; max-height: 16px; margin-left: 10px; font-size: 9pt; white-space: nowrap; flex-shrink: 0; font-weight: 600; } .chat-view-button:hover { background-color: var(--placeholder-text); cursor: pointer; } .agent-text-response { color: rgb(228, 228, 228); height: fit-content; width: 100%; box-sizing: border-box; padding-left: 8px; padding-right: 4px; line-height: 1.75; } .agent-text-response-thinking { color: #5c47fc; font-style: italic; } /* Streaming */ /* Table Styles for Markdown Parser */ .agent-text-response table { width: 100%; /* Make table take full width of its container */ border-collapse: collapse; /* Collapse borders into a single border */ margin-top: 1em; margin-bottom: 1em; border-radius: 8px !important; font-size: 0.9em; /* Adjust font size as needed */ color: var(--primary-text); /* Default text color from your theme */ } /* Table header styling */ .agent-text-response thead { background-color: var(--secondary-background); /* Use a theme variable for background */ } .agent-text-response th { border: 1px solid var(--primary-border) !important; /* Use a theme variable for border */ padding: 4px; /* Increased padding for better spacing */ text-align: left; font-weight: bold; color: var(--primary-text); /* Header text color */ } /* Table data cell styling */ .agent-text-response td { border: 1px solid var(--primary-border) !important; /* Use a theme variable for border */ padding: 4px; /* Increased padding */ text-align: left; } /* Inline code styling within agent responses */ .agent-text-response code { background-color: var(--secondary-background); color: var(--secondary-text); padding: 2px 4px; font-weight: 600; border-radius: 4px; font-family: 'Courier New', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 0.9em; border: 1px solid var(--primary-border); white-space: nowrap; overflow-wrap: break-word; } .agent-error-state { color: red; background-color: #330d0d; } .agent-warning-state { color: gray; background-color: var(--secondary-background); } .agent-info-state { color: gray; background-color: var(--secondary-background); } /* url styling in chat */ .chat-response-container a { color: var(--primary-text); background-color: var(--secondary-background); padding: 1px 4px; border-radius: 5px; border: 1px solid transparent; } .chat-response-container a[href]:hover { border: 1px solid var(--secondary-border); } .agent-text-response a[href] { max-width: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Thought bubble styles */ .thought-bubble-container { margin-right: 4px; box-sizing: border-box; padding-right: 4px; } .thought-bubble-block { display: flex; flex-direction: column; gap: 8px; width: 100%; box-sizing: border-box; max-width: 100%; height: fit-content; color: var(--secondary-text); padding: 4px 10px; position: relative; border-radius: 10px; } .thought-bubble-header { display: flex; align-items: center; justify-content: flex-start; cursor: pointer; width: 100%; } .thought-bubble-header-left { display: flex; align-items: center; gap: 8px; } .thought-bubble-title { font-size: 11px; } .thought-bubble-chevron { color: var(--secondary-text); font-size: 8px; margin-left: 8px; opacity: 0; transition: opacity 0.2s, transform 0.2s ease; } .thought-bubble-header:hover .thought-bubble-chevron { opacity: 1; } .thought-bubble-content { font-size: 11px; line-height: 1.7; color: var(--secondary-text); white-space: pre-wrap; word-break: break-word; margin-top: 8px; overflow-y: auto; max-height: 250px; scrollbar-width: none; } /* Top shadow overlay - attached to block, positioned over content */ .thought-bubble-block::before { content: ''; position: absolute; top: 33px; /* Position below header (adjust based on header height) */ left: 10px; right: 10px; height: 30px; background: linear-gradient(to bottom, var(--primary-background), transparent); pointer-events: none; opacity: 0; transition: opacity 0.2s; z-index: 1; } /* Bottom shadow overlay - attached to block, positioned over content */ .thought-bubble-block::after { content: ''; position: absolute; bottom: 4px; left: 10px; right: 10px; height: 30px; background: linear-gradient(to top, var(--primary-background), transparent); pointer-events: none; opacity: 0; transition: opacity 0.2s; z-index: 1; } /* Show top shadow when content is scrolled down from top */ .thought-bubble-block.has-scroll-top::before { opacity: 1; } /* Show bottom shadow when content is not at bottom */ .thought-bubble-block.has-scroll-bottom::after { opacity: 1; } /* Disable transitions when collapsing to prevent flash */ .thought-bubble-block.no-transition::before, .thought-bubble-block.no-transition::after { transition: none; } .app-header { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 100%; background-color: var(--secondary-background); } .app-header-elements { display: flex; align-items: center; margin-left: 5px; } #app-header-undo-redo { display: flex; -webkit-app-region: no-drag; } #app-header-resize-exit { display: flex; -webkit-app-region: no-drag; } #app-header-resize-exit * { /* Apply to all children as well */ -webkit-app-region: no-drag; } #app-header-title { font-family: 'DM Serif Display', serif; font-style: normal; font-weight: 400; font-size: 24pt; } #app-header-version { color: var(--secondary-text); font-size: 11pt; margin-left: 10px; font-weight: 200; } .app-header-utils { height: 30px; display: flex; align-items: center; margin-left: 5px; margin-right: 5px; padding-left: 15px; padding-right: 15px; border-radius: 5px; } .app-header-utils:hover { background-color: var(--hover-background); } .app-header-icons { height: 50px; display: flex; align-items: center; margin-left: 0px; margin-right: 0px; padding-left: 20px; padding-right: 20px; } .app-header-icons:hover { background-color: var(--hover-background); } .app-header-close { height: 50px; display: flex; align-items: center; margin-left: 0px; margin-right: 0px; padding-left: 20px; padding-right: 20px; } .app-header-close:hover { background-color: var(--button-red-hover-bg); } .user-bubble { width: 20px; height: 20px; border-radius: 20px; border: 2px solid var(--secondary-border); font-size: 8pt; font-weight: 500; text-align: center; display: flex; align-items: center; justify-content: center; } .header-invite-user { border-radius: 8px; background-color: var(--accent-background); padding: 2px; padding-left: 5px; padding-right: 5px; font-weight: 600; margin-left: 5px; margin-right: 5px; border: 1px solid transparent; box-shadow: 0px 4px 6px var(--shadow-primary); cursor: pointer; /* Add drop shadow */ } .header-invite-user:hover { background-color: var(--hover-background); border: 1px solid var(--secondary-border); } .header-highlight-zone { border-radius: 8px; background-color: var(--hover-background); padding: 2px; padding-left: 5px; padding-right: 5px; font-weight: 600; margin-left: 5px; margin-right: 5px; border: 1px solid transparent; cursor: pointer; /* Add drop shadow */ } .header-highlight-zone:hover { background-color: var(--selected-hover-background); } .header-upgrade { border-radius: 8px; background: linear-gradient(135deg, var(--focused-background), var(--button-blue-hover-bg)); padding: 5px; font-weight: 600; margin-left: 10px; margin-right: 5px; border: none; /* Remove the border */ box-shadow: 0px 4px 6px var(--shadow-primary); cursor: pointer; position: relative; overflow: hidden; } .header-upgrade::before { /* pseudo-element */ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: inherit; border-radius: inherit; z-index: -1; } .header-upgrade:hover { /* background-color: #8d00df; */ border: 1px solid var(--secondary-border); margin-left: 8px; } #homePageButtonsPane { padding: 40px; width: 100%; height: 100%; } @media (min-width: 1200px) { #homePageButtonsPane { width: calc(50% - 60px); } } #loginPage { background: var(--anchor-element-background); padding: 20px; border-radius: 8px; border: 1px solid var(--secondary-border); } #share-davinci-home-button { padding: 10px 20px; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; font-weight: 600; margin-bottom: 20px; } #share-davinci-home-button:hover { background-color: var(--hover-background); } /* Existing styles */ #homePageLogosPane { display: none; /* Hide by default */ } @media (min-width: 1200px) { #homePageLogosPane { display: flex; flex-direction: column; text-align: center; padding: 20px; justify-content: center; gap: 8%; align-items: center; width: 50%; height: 100%; } } @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } #homepagecontainer { box-sizing: border-box; height: 100%; width: 100%; display: flex; flex-direction: row; background-size: 260% 260%; border-top-left-radius: 10px; overflow: hidden; animation: gradient 24s ease infinite; border: 1px solid var(--primary-border); isolation: isolate; } /* Dark theme gradient (original) */ :root[data-theme='dark'] #homepagecontainer { /* OLD (BRIGHT) background: linear-gradient(-45deg, rgba(143, 0, 128, 0.5), rgba(153, 0, 255, 0.55), rgba(31, 0, 104, 0.8), rgba(45, 0, 135, 0.5)); */ background: linear-gradient(-45deg, rgba(10, 0, 9, 0.95), rgba(56, 0, 93, 0.95), rgba(31, 0, 51, 0.95), rgba(8, 0, 28, 0.8), rgba(34, 0, 101, 0.95)); background-size: 260% 260%; animation: gradient 24s ease infinite; } /* Light theme gradient */ :root[data-theme='light'] #homepagecontainer { background: linear-gradient(-45deg, rgba(234, 0, 255, 0.6), rgba(216, 178, 252, 0.6), rgba(200, 210, 240, 0.6), rgba(255, 255, 255, 0.5), rgba(230, 221, 231, 0.6)); background-size: 260% 260%; animation: gradient 24s ease infinite; } #adminContainer { box-sizing: border-box; height: 100%; width: 100%; display: flex; flex-direction: row; background-size: 260% 260%; border-top-left-radius: 10px; overflow: hidden; animation: gradient 24s ease infinite; border: 1px solid var(--primary-border); isolation: isolate; } /* Dark theme gradient (original) */ :root[data-theme='dark'] #adminContainer { /* OLD (BRIGHT) background: linear-gradient(-45deg, rgba(143, 0, 128, 0.5), rgba(153, 0, 255, 0.55), rgba(31, 0, 104, 0.8), rgba(45, 0, 135, 0.5)); */ background: linear-gradient(-45deg, rgba(10, 0, 9, 0.95), rgba(56, 0, 93, 0.95), rgba(31, 0, 51, 0.95), rgba(8, 0, 28, 0.8), rgba(34, 0, 101, 0.95)); background-size: 260% 260%; animation: gradient 24s ease infinite; } /* Light theme gradient */ :root[data-theme='light'] #adminContainer { background: linear-gradient(-45deg, rgba(234, 0, 255, 0.6), rgba(216, 178, 252, 0.6), rgba(200, 210, 240, 0.6), rgba(255, 255, 255, 0.5), rgba(230, 221, 231, 0.6)); background-size: 260% 260%; animation: gradient 24s ease infinite; } .home-info-box { text-align: center; padding-bottom: 60px; font-size: 16pt; font-weight: 600; } .davinci-text { font-family: 'DM Serif Display', serif; font-style: normal; font-weight: 400; font-size: 80px; align-items: center; text-align: left; color: var(--primary-text); } .celedon-text { font-weight: 400; font-size: 18px; line-height: 18px; display: flex; align-items: center; text-align: center; color: var(--secondary-text); } .recent-projects { width: 100%; max-width: 100%; height: calc(100% - 120px); background-color: var(--primary-background); border: 1px solid var(--secondary-border); border-radius: 10px; padding: 5px; opacity: 1 !important; overflow: hidden; box-sizing: border-box; z-index: 1000; } .recent-project-list { display: flex; flex-direction: column; gap: 10px; height: calc(100% - 40px); width: 100%; overflow-x: hidden; overflow-y: auto; } .new-projects { display: flex; flex-direction: row; justify-content: left; align-items: center; gap: 30px; margin-top: 20px; /* width: 50%; height: 70px; */ /* position: absolute; left: 100px; bottom: 400px; */ /* color: #FFFFFF; */ } .new-project-container { position: absolute; width: 766px; height: 497px; left: 218px; top: 108px; font-weight: 400; display: flex; flex-direction: column; align-items: left; color: var(--primary-text); background: none; /* border: 1px solid var(--secondary-border); */ /* padding: 20px; */ } .hidden { display: none; } @keyframes loadingProjectAnimation { 0% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .project-list-loading { background: linear-gradient(-45deg, #170032ff, #170032ff, #170032ff, #33006eff, #ffbf00ff, #33006eff, #170032ff, #170032ff, #170032ff); background-size: 750% 750%; animation: loadingProjectAnimation 4s linear infinite; } .project-list-nameUUID { display: flex; align-items: center; white-space: nowrap; overflow: hidden; width: 100%; padding: 5px; } .project-list-selectIcon { width: 15px; padding-top: 13px; padding-right: 15px; } .project-list-name { color: var(--primary-text); font-weight: 600; margin-right: 10px; min-width: 10px; white-space: nowrap; overflow: hidden; width: fit-content; } .project-list-uuid { color: var(--secondary-text); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: fit-content; } .davinci-subtext { font-size: 18px; } .index-labels { color: var(--secondary-text); padding: 15px; text-align: center; width: 100%; } .index-locked { /* Lock icon will be shown in status indicators instead of greying out text */ } /* Drop indicator styles */ .index-drop-indicator { position: fixed; height: 3px; background-color: var(--button-blue-bg); border-radius: 1px; z-index: 9999; pointer-events: none; } .index-project-label { color: var(--primary-text); font-size: 16px; padding: 5px; margin-left: 5px; font-weight: 600; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-radius: 5px; cursor: pointer; } .index-settings { display: flex; padding: 15px; } .index-tab { display: flex; justify-content: space-between; align-items: center; border-radius: 8px; padding-bottom: 3px; padding-left: 4px; } .index-tab-name { display: flex; font-weight: 600; border-radius: 8px; border: 1px solid transparent; } .index-tab-name:hover { background-color: var(--hover-background); } .index-chevron-box { padding-top: 4px; padding-bottom: 4px; padding-right: 5px; padding-left: 4px; display: flex; justify-content: center; align-items: center; width: 8px; min-width: 8px; cursor: pointer; } .index-chevron { font-size: 11px; font-weight: 600; } .index-tree-container { display: none; overflow-y: scroll; } /* Style the scrollbar */ .index-tree-container::-webkit-scrollbar { width: 8px; } .index-tree-container-visible { display: block; } .index-name-element { display: flex; box-sizing: border-box; overflow: hidden; white-space: nowrap; align-items: center; justify-content: space-between; align-items: center; } .index-name-element-rightclick { outline: 1px solid var(--secondary-border); outline-offset: -1px; } /* Keep the dashed border style for middle drop zone */ .index-name-element-drag-middle { background-color: var(--accent-background); outline: 3px dashed var(--button-blue-bg); outline-offset: -3px; } .index-name-element-drag-middle-replace { background-color: var(--accent-background); } .index-name-element-rightclick-first { outline: 1px solid var(--secondary-border); outline-offset: -1px; } .index-name-element-outline { outline: 1px solid var(--primary-text); outline-offset: -1px; background-color: var(--accent-background); } .index-name-element:hover { background-color: var(--hover-background); } .index-name-element-selected { background-color: var(--hover-background); } .index-name-element-selected:hover { background-color: var(--selected-hover-background); } .index-child-element { display: none; border-left: 1px solid var(--primary-border); margin-left: 8px; padding-left: 6px; } .index-child-element-visible { display: block; position: relative; /* Ensure positioning context for side boxes */ } .index-child-element-rightclick { border-left: 1px solid var(--secondary-border); } /* New class for white border highlight on hover */ .index-child-element-highlight { border-left: 1px solid var(--primary-text); } /* Side box styles */ .index-side-box { position: absolute; width: 15px; left: -9px; top: -25px; height: calc(100% + 26px); cursor: pointer; z-index: var(--z-content); /*background-color: blue;*/ } .index-popout { position: fixed; width: 300px; background-color: var(--tertiary-background); border: 1px solid var(--secondary-border); border-radius: 5px; box-shadow: 0 0 15px var(--shadow-primary); } .index-popout-element { padding: 10px; } .index-popout-element:hover { background-color: var(--hover-background); } /* Highlight potential drop targets */ .index-name-element.drag-over { background-color: var(--accent-background); /* Light gray background */ } /* Style for the draggable element while dragging */ .index-name-element.dragging { opacity: 0.5; } .index-change-indicator-box { width: fit-content; height: 7px; display: flex; justify-content: flex-end; align-items: center; } .index-filter { background-color: var(--primary-background); border: 1px solid var(--secondary-border); border-radius: 8px; } .index-filter-element { display: flex; padding: 5px; align-items: center; cursor: pointer; } .focusIndex { background-image: linear-gradient(to top, transparent, rgba(145, 0, 145, 0.3)); } .icon-name-div { padding-top: 4px; padding-bottom: 4px; padding-right: 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; } .icon-name-container { overflow: hidden; min-width: 0; } .index-name-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; } .index-filter-holder { /* highlight on hover */ border-radius: 4px; cursor: pointer; } .index-filter-holder:hover, .index-filter-holder.hover-active { background-color: var(--hover-background); } /* Index window container styles */ .index-window-container { box-sizing: border-box; height: calc(100% - 1px); border-top: 1px solid var(--primary-border); border-left: 1px solid var(--primary-border); border-radius: 12px 0 0 0; overflow: hidden; } .index-tree-content { box-sizing: border-box; max-height: 100%; height: 100%; overflow: hidden; padding-left: 2px; z-index: 200000; } .project-window { display: flex; justify-content: flex-start; height: 100%; padding-left: 20px; overflow-x: auto; box-sizing: border-box; } @container render-box (max-width: 800px) {} .project-tabs-container { display: flex; flex-direction: column; /* border-right: 1px solid var(--primary-border); */ padding-top: 0; align-items: flex-start; width: 180px; padding-right: 10px; padding-top: 50px; min-width: 150px; /* overflow: hidden; */ } .project-tab { padding: 5px 8px; /* font-weight: 300; */ /* text-transform: uppercase; */ margin-bottom: 1px; color: var(--secondary-text); cursor: pointer; width: 100%; font-size: 11px; border-radius: 3px; align-items: center; display: flex; box-sizing: border-box; /* border-right: 2px solid transparent; */ } .settings-project-label { font-weight: 450; font-size: 11px; color: var(--secondary-text); margin-bottom: 5px; } .project-tab svg { fill: var(--secondary-text); /* Color the SVG icon */ } .project-tab:hover { color: var(--primary-text); background-color: var(--hover-background); } .project-tab:hover svg { fill: var(--primary-text); /* Color the SVG icon on hover */ } .project-tab-selected { color: var(--primary-text); background-color: var(--icon-selected-background); /* border-right: 2px solid white; */ } .project-tab-selected svg { fill: var(--primary-text); /* Color the SVG icon when selected */ } .project-data { flex: 1; min-width: 0; } .project-data-container { min-width: 100px; width: 100%; height: 100%; padding: 10px; container-type: inline-size; container-name: project-data; } .project-container { /* border: 1px solid var(--primary-border); */ border-radius: 8px; background-color: var(--secondary-background); overflow-y: auto; max-height: calc(100% - 150px); width: 100%; } .project-table-row { display: flex; justify-content: space-between; } .project-table-cell { padding: 8px; text-align: left; } .project-table-header { color: var(--secondary-text); position: sticky; top: -5px; background-color: var(--secondary-background); } .project-content-row:hover { background-color: var(--hover-background); } .project-content-row-selected { background-color: var(--icon-selected-background); } .project-delete-cell { color: var(--secondary-text); border-radius: 5px; display: none; text-align: right; } .project-delete-cell:hover { color: var(--primary-text); } /* Summary Page Styles */ .summary-content { /* padding: 20px; */ color: var(--primary-text); } .summary-header { display: flex; justify-content: space-between; align-items: center; } .model-status { display: flex; align-items: center; gap: 8px; color: var(--secondary-text); font-size: 0.9em; } .status-dot { width: 8px; height: 8px; border-radius: 50%; background-color: var(--tertiary-background); } .status-dot.active { background-color: var(--success); } .summary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .summary-card { background: var(--accent-background); border: 1px solid var(--primary-border); border-radius: 8px; padding: 20px; transition: transform 0.2s, box-shadow 0.2s; } .summary-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px var(--shadow-primary); } .summary-card h3 { margin: 0 0 15px 0; color: var(--primary-text); font-size: 1.1em; font-weight: 500; } /* Overview Stats */ .overview-stats { display: flex; flex-direction: column; gap: 12px; } .stat-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--primary-border); } .stat-row:last-child { border-bottom: none; } .stat-label { color: var(--secondary-text); } .stat-value { color: var(--primary-text); font-weight: 500; } /* Element List */ .element-list { display: flex; flex-direction: column; gap: 12px; } .element-type { display: flex; align-items: center; gap: 10px; } .type-name { width: 100px; color: var(--primary-text); font-size: 0.9em; } .type-bar { flex: 1; height: 6px; background: var(--tertiary-background); border-radius: 3px; overflow: hidden; } .bar-fill { height: 100%; background: linear-gradient(90deg, var(--button-blue-bg), var(--button-blue-hover-bg)); border-radius: 3px; transition: width 0.3s ease; } .type-count { width: 40px; text-align: right; color: var(--secondary-text); font-size: 0.9em; } /* Relationship Grid */ .relationship-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .relationship-type { display: flex; align-items: center; gap: 8px; } .relationship-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--tertiary-background); } .relationship-name { flex: 1; color: var(--primary-text); font-size: 0.9em; } .relationship-count { color: var(--secondary-text); font-size: 0.9em; } /* Model Health */ .health-metrics { display: flex; flex-direction: column; gap: 15px; } .metric-item { display: flex; flex-direction: column; gap: 6px; } .metric-header { display: flex; justify-content: space-between; color: var(--primary-text); font-size: 0.9em; } .progress-bar { height: 6px; background: var(--tertiary-background); border-radius: 3px; overflow: hidden; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--success), var(--button-green-hover-bg)); border-radius: 3px; transition: width 0.3s ease; } /* Responsive adjustments */ @container project-data (max-width: 999px) { .summary-grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { .relationship-grid { grid-template-columns: 1fr; } } /* Download Model Section */ .download-options { display: flex; flex-direction: column; gap: 12px; } .download-button { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--tertiary-background); border: 1px solid var(--primary-border); border-radius: 6px; color: var(--primary-text); cursor: pointer; width: 100%; transition: all 0.2s ease; } .download-button:hover { background: var(--hover-background); transform: translateY(-1px); } .download-icon { font-size: 1.2em; } .download-icon svg { width: 16px; height: 16px; fill: var(--secondary-text); } .download-button:hover .download-icon svg { fill: var(--primary-text); } .download-info { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .download-type { font-weight: 500; color: var(--primary-text); } .download-desc { font-size: 0.8em; color: var(--secondary-text); } /* Styles specific to the Settings page */ /* Widget Navigation Styles */ /* Main container */ .views { height: 100%; width: 100%; background: var(--secondary-background); display: flex; flex-direction: column; justify-content: space-between; } /* Icon groups */ .icon-group { display: flex; flex-direction: column; align-items: center; } .icon-group.top { margin-top: 10px; } .icon-group.bottom { justify-content: flex-end; } /* Individual icons */ .icon-views { width: 28px; height: 28px; padding: 8px 0; margin: 0; } /* Widget Container Styles */ .widgit-container { position: relative; display: flex; justify-content: center; align-items: center; cursor: pointer; width: 100%; padding: 4px 0px; -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important; } .widgit-container .icon-views { display: block; } .widgit-container:hover .icon-views path { fill: var(--icon-hover-fill); } /* Icon states */ .icon-views:hover path { fill: var(--icon-hover-fill); } .icon-views-selected path { fill: var(--icon-hover-fill); } /* Selector rectangle */ .selector-rectangle-views { position: absolute; top: 0; left: 46px; width: 4px; height: 54px; background-color: var(--primary-text); transition: transform 0.2s ease; pointer-events: none; opacity: 0; z-index: 100; } /* Render settings */ .workspace-render-settings-row { border-radius: 6px; border: 1px solid var(--primary-border); display: flex; align-items: center; justify-content: center; padding: 5px; background-color: var(--primary-background); } /* Focus styles */ .focusTab { background-image: linear-gradient(to top, transparent, rgba(136, 0, 118, 0.3)); } .renderSettingsContainer { display: flex; align-items: center; justify-content: center; background-color: var(--primary-background); border-radius: 6px; border: 1px solid var(--primary-border); gap: 10px; padding: 5px; } /* Main pane container */ .objectDetailsPane { display: inline-block; width: 100%; max-width: 100%; min-width: 100px; height: 100%; max-height: 100%; overflow-x: hidden; overflow-y: hidden; background-color: var(--primary-background); } /* Header section containing tabs */ .objectDetailsHeader { display: flex; width: 100%; align-items: center; overflow-x: scroll; overflow-y: hidden; box-sizing: border-box; background-color: var(--primary-background); /* border-top: 1px solid gray; */ } /* Header scrollbar styles */ .objectDetailsHeader::-webkit-scrollbar { height: 4px; } /* Workspace sheet footer scrollbar - matches tabs scrollbar exactly */ .workspace-selector-footer::-webkit-scrollbar { height: 4px; background-color: var(--primary-background) !important; } .tab-drop-indicator { position: absolute; width: 2px; height: 35px; background-color: var(--primary-text); pointer-events: none; z-index: 1000; top: 0; display: none; } /* Tab container styles */ .objectTabs { display: flex; justify-content: space-between; align-items: center; padding: 0px 5px 0px 10px; height: 35px; color: var(--secondary-text); background-color: var(--quaternary-background); border-bottom: 0.5px solid var(--primary-border); border-top: 0.5px solid var(--primary-border); border-right: 0.5px solid var(--primary-border); user-select: none; z-index: 100; box-sizing: border-box; } /* Hide close button by default */ .objectTabs .generic-icon { opacity: 0; } /* Show close button on tab hover */ .objectTabs:hover .generic-icon { opacity: 1; } /* Show close button when tab is selected */ .objectTabs-highlight .generic-icon { opacity: 1; } /* Tab content structure */ .objectDetailsBody { height: calc(100% - 39px); max-height: calc(100% - 39px); width: 100%; max-width: 100%; } .objectSubPage { display: flex; flex-direction: column; height: 100%; width: 100%; max-width: 100%; overflow: hidden; background-color: var(--primary-background); } .objectPathHeader { display: flex; align-items: center; overflow: hidden; justify-content: flex; background-color: var(--primary-background); box-shadow: 0px 0px 10px 0px var(--shadow-primary); user-select: none; flex: 0 0 auto; } .objectsDisplayContainer { display: flex; flex: 1; width: 100%; max-width: 100%; min-height: 0; overflow-y: auto; } /* Display types section */ .objectDisplayTypesTab { border-right: 1px solid var(--primary-border); display: flex; /*padding-top: 10px;*/ flex-direction: column; justify-content: space-between; background-color: var(--primary-background); position: relative; z-index: var(--z-popover); } .objectDisplayTypesIcons { padding: 8px; margin-bottom: 10px; color: var(--secondary-text); fill: var(--icon-fill); justify-content: center; cursor: pointer; } .objectDisplayTypesIcons:hover path { fill: var(--icon-hover-fill); } .objectDisplayTypesIcons-selected { color: var(--primary-text); fill: var(--primary-text); border-right: 1px solid var(--primary-text); } .objectDisplayTypesIcons-selected path { fill: var(--primary-text); } .objectDisplayTypesIcons-selected-horiztonal { color: var(--primary-text); fill: var(--primary-text); border-bottom: 1px solid var(--primary-text); } .objectDisplayTypesIcons-selected-horiztonal path { fill: var(--primary-text); } /* Content render box */ .objectsRenderBox { width: 100%; height: 100%; overflow: hidden; justify-content: center; align-items: center; position: relative; display: flex; flex-direction: column; box-sizing: border-box; z-index: var(--z-content); container-type: inline-size; container-name: render-box; } .objectsRenderBox[data-display="thread"] { padding: 0; width: 100%; height: 100%; overflow: hidden; } /* Tab appearance states */ .objectTabsTemp { font-style: italic; } .objectPseudoTab { width: 100%; height: 35px; border-bottom: 0.5px solid var(--primary-border); border-top: 0.5px solid var(--primary-border); box-sizing: border-box; } /* Tab hover and highlight states */ /* Removed hover styles */ /* Tab name styling */ .objectTabsNameContainer { margin-right: 5px; padding-right: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; } .objectTabs-name { color: var(--secondary-text); font-weight: 700; } .objectTabs-name-highlight { background-color: transparent; border: 1px solid transparent; color: var(--primary-text); } .objectTabsParent-name { color: var(--secondary-text); } .objectTabsParent-name-highlight { color: var(--secondary-text); } .objectTabs-highlight { background-color: var(--primary-background); border-bottom: 1px solid var(--primary-background); z-index: 100; } .objectTabsChevron { padding: 0px 5px; margin-top: 2px; color: var(--secondary-text); font-size: 0.7em; } /* Tab drag operations */ .objectTabs-dragging { opacity: 0.6; } /* Focus states */ .focusedArea { background-image: linear-gradient(to top, transparent, var(--focused-background)); } .objectTabs-path-name { color: var(--secondary-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .objectTabs-path-segment { color: var(--secondary-text); cursor: pointer; display: flex; align-items: center; padding: 4px 0px; } .objectTabs-path-segment:hover { color: var(--primary-text); } .objectTabs-path-segment:hover .objectTabs-path-name { color: var(--primary-text); } .sheet { height: 32px; /* border-radius: 6px; */ color: var(--secondary-text); position: relative; box-sizing: border-box; overflow: hidden; display: flex; align-items: center; justify-content: center; padding-left: 5px; padding-right: 15px; border-right: 1px solid var(--primary-border); font-weight: 600; white-space: nowrap; cursor: pointer; } .sheet:hover { background-color: var(--quaternary-background); } .sheet-selected { color: var(--primary-text); background-color: var(--primary-background); } .sheet-selected:hover { background-color: var(--tertiary-background); } .workspace-sheet-status-icon { font-size: 8px; color: var(--accent-color); } .workspace-sheet-chevron { font-size: 10px; color: var(--text-secondary); margin-left: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 2px; transition: background-color 0.2s ease; transform: rotate(180deg); } .workspace-selector-footer { height: 36px; display: flex; align-items: center; justify-content: flex-start; box-sizing: border-box; overflow-x: scroll; overflow-y: hidden; background-color: var(--secondary-background); transform: rotateX(180deg); } .workspace-selector-footer>* { transform: rotateX(180deg); } .workspace-new-sheet-button-container { position: sticky; right: 0; height: 100%; display: flex; align-items: center; background-color: var(--secondary-background); } .workspace-chat-divider { border-top: 0.5px solid var(--primary-border); flex: 0 0 1px; position: relative; z-index: var(--z-popover); /* Match workspace resize bar z-index */ } .workspace-chat-divider-hover { height: 100%; width: 4px; position: absolute; background-color: var(--secondary-border); top: 0px; left: -2px; cursor: ew-resize; user-select: none; opacity: 0; z-index: var(--z-popover); /* Match workspace resize bar z-index */ } .workspace-chat-div { flex: none; min-width: 330px; border-top: 0.5px solid var(--primary-border); box-sizing: border-box; z-index: var(--z-content); /* Ensure it stays below resize bars */ position: relative; /* Create stacking context for z-index to work */ } .chat-send-button { cursor: pointer; align-items: center; display: flex; justify-content: center; width: 32px; height: 32px; border-radius: 8px; } .chat-send-button:hover { background-color: var(--icon-hover-background); } .view-cards { display: flex; flex-direction: column; gap: 10px; } .view-card { position: relative; cursor: pointer; padding: 12px; background: var(--primary-background); border: 1px solid var(--primary-border); border-radius: 6px; /* transition: box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; */ } .view-card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); border-color: var(--secondary-border); background-color: var(--primary-border); } /* Git View Styles */ /* Uncommitted change row base styles */ .uncommitted-change-row { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; justify-content: space-between; cursor: pointer; } .uncommitted-change-row:hover { background-color: var(--hover-background); } /* Uncommitted change anchor wrapper */ .uncommitted-change-anchor-wrapper { flex: 1; min-width: 0; overflow: hidden; display: flex; } /* Uncommitted change anchor base styles */ .uncommitted-change-anchor { max-width: calc(100% - 2px); min-width: 0; overflow: hidden; } /* Ellipsis for anchor text */ .uncommitted-change-anchor span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } /* Modified change styles */ .uncommitted-change-anchor-modified:hover { border: 1px solid white; } /* Added change styles */ .uncommitted-change-anchor-added:hover { border: 1px solid white; } /* Deleted change styles */ .uncommitted-change-anchor-deleted:hover { border: 1px solid white; } /* Undo button visibility controlled by CSS hover */ .uncommitted-change-row .uncommitted-change-undo { opacity: 0; } .uncommitted-change-row:hover .uncommitted-change-undo { opacity: 1; } .uncommitted-change-row .uncommitted-change-undo-disabled { opacity: 0.3; pointer-events: none; } .uncommitted-change-row:hover .uncommitted-change-undo-disabled { opacity: 0.3; } .svg-block { stroke-width: 2; /* White outline */ /* stroke: white; */ stroke: gray } .svg-port { stroke-width: 1; stroke: gray } .svg-block-focus { stroke: rgb(255, 145, 0); } .svg-port:hover { fill: rgb(140, 140, 140); cursor: pointer; } .svg-line { stroke-width: 2; fill: none; /* stroke: blue; */ stroke: #1100ff; } .svg-line-white { stroke: rgb(75, 75, 75) } .svg-highlight-block { stroke-width: 5; stroke: rgb(255, 136, 0); } .svg-label { font-size: 10; font-weight: 700; fill: rgb(255, 255, 255); cursor: pointer; text-decoration: underline; } .svg-label-container {} .svg-label-port { font-size: 10; font-weight: 600; fill: gray; cursor: pointer; } .svg-label-port-white { fill: white; } .svg-label-port-selected { fill: white } .svg-label-connection { font-size: 10; font-weight: 600; /* fill: blue; */ fill: #00D1FF } .svg-linear-mainstop { stop-color: #303030; } .svg-linear-mainstop-true { stop-color: rgb(28, 93, 28, 0.7); } .svg-linear-mainstop-false { stop-color: rgb(192, 63, 63, 0.7); } .svg-linear-finalstop { stop-color: rgb(29, 29, 29); } .svg-sublabel { font-size: 9; font-weight: 400; fill: white; } .svg-highlight-line { stroke-width: 5; stroke: rgb(255, 136, 0); z-index: 1000; } .svg-highlight-focus-block { fill: rgba(255, 136, 0, 1) } .error-message-box {} .terminal-log { color: lightgray; white-space: pre-wrap; } .terminal-log-number { margin-right: 10px; min-width: 15px; color: rgb(51, 51, 51); } /* DOCUMENT STUFF */ .document-header { padding-bottom: 10px; padding-top: 10px; font-weight: 600; white-space: pre-wrap; } .document-header-number { /* color: gray; */ padding-right: 8px; } .document-header1 { font-size: 15pt; font-weight: 600; } .document-header2 { font-size: 12pt; font-weight: 600; } .document-header3 { font-size: 10pt; font-weight: 600; } .document-paragraph { line-height: 1.4; font-weight: 400; width: 100%; white-space: pre-wrap; font-size: 10pt; /* background-color: blue; */ /* padding-bottom: 5px; padding-top: 5px; */ /* border: 1px solid red; */ } .doc-header { border: 1px dashed transparent; border-radius: 5px; } .doc-header:hover { border: 1px dashed rgb(179, 179, 179); } .doc-footer { border: 1px dashed transparent; border-radius: 5px; } .doc-footer:hover { border: 1px dashed rgb(179, 179, 179); } .document-list { position: relative; line-height: 1.4; font-weight: 400; width: 100%; white-space: pre-wrap; font-size: 10pt; padding-left: 20px; padding-bottom: 5px; padding-top: 5px; } .document-addNewSection { height: 40px; margin: 5px; margin-bottom: 30px; align-items: center; text-align: center; display: flex; } .document-section { width: 100%; display: flex; justify-content: center; } .document-row { display: flex; max-width: 800px; width: calc(100% - 65px); min-height: 25px; /* border-left: 3px solid transparent; */ padding-bottom: 15px; } .document-table-caption { min-height: 20px; display: flex; align-items: flex-start; padding-top: 10px; } .document-figure { margin-bottom: 5px; margin-top: 5px; width: 100%; border: 1px solid transparent; } .document-figure-box { background-color: #1a1a1a; border-radius: 10px; padding: 5px; } .document-renderbox { width: 100%; height: calc(100% - 31px); overflow: hidden; border: 1px solid rgb(46, 46, 46); min-height: 100px; border-radius: 10px; /* background-color: red; */ } .document-figure-expand-bar { margin: 0; /* Add this line */ height: 5px; border: 0px solid transparent; width: 100%; border-radius: 2px; cursor: ns-resize; } .document-figure-expand-bar:hover { background-color: gray; } .document-bibilography, .document-toc { border: 1px solid transparent; border-radius: 5px; } .document-bibilography:hover, .document-toc:hover { border: 1px solid gray; } table { border-collapse: separate; border-spacing: 0; width: 100%; /* border: 1px solid rgb(46, 46, 46); */ } /* Rule for table cells to prevent border interference */ .table-content-cell { box-sizing: border-box; position: relative; cursor: cell; user-select: none; /* Prevent text selection by default */ /* Crosshair cursor for cell selection (fallback to default) */ /* overflow: hidden; - Removed to allow text wrapping toggle to work */ } .table-column-container { display: flex; } .sticky-corner { position: sticky; top: 0px; left: 0; z-index: 4; } .sticky-col { position: sticky; top: -1px; z-index: 3; } .sticky-row { position: sticky; left: -1px; z-index: 2; border-right: 1px solid rgb(46, 46, 46) } .table-location-reference-cell { color: gray; font-weight: 300; background-color: #1d1d1d; min-width: 20px !important; white-space: nowrap; align-items: center; text-align: center; display: flex; justify-content: center; } .table-location-reference-cell:hover { background-color: #222222; } .table-location-reference-cell-selected { background-color: #222222; } .table-location-reference-cell-light-selected { /* background-color: #e6e6e6; */ } .table-location-reference-cell-light { color: gray; font-weight: 300; background-color: #ffffff; min-width: 20px !important; white-space: nowrap; align-items: center; text-align: center; display: flex; justify-content: center; } .table-location-reference-cell-light:hover { /* background-color: #e6e6e6; */ } /* Default: Hide the index numbers and letters */ .table-location-reference-cell-light, .table-location-reference-cell { visibility: hidden; } /* On table hover, show all index elements */ table.show-cell-index .table-location-reference-cell-light, table.show-cell-index .table-location-reference-cell { visibility: visible; } .table-content-cell-light-selected { background-color: #eeeeee; outline: 1px solid rgb(0, 0, 0); z-index: 1000; position: relative; box-sizing: border-box; } .table-content-cell-selected { background-color: #3c3c3c; outline: 1px solid rgb(126, 126, 126); z-index: 1000; position: relative; box-sizing: border-box; } .table-content-cell-light-selected::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #eeeeee; outline: 2px solid rgb(0, 0, 0); opacity: 0.2; z-index: 1000; pointer-events: none; } .table-content-cell-selected::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #eeeeee; outline: 2px solid rgb(0, 0, 0); opacity: 0.2; z-index: 1000; pointer-events: none; } .table-content-cell-light-focused { position: relative; border: 2px solid rgb(0, 0, 0) !important; z-index: 1500; } .table-content-cell-focused { position: relative; border: 2px solid rgb(126, 126, 126) !important; z-index: 1500; } .table-cell-dragover-bottom { border-bottom: 2px solid white; z-index: 5; } .table-cell-dragover-top { border-top: 2px solid white; z-index: 5; } .table-cell-dragover-left { border-left: 2px solid white; z-index: 5; } .table-cell-dragover-right { border-right: 2px solid white; z-index: 5; } .striped-cell { background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 5px, rgba(255, 255, 255, 0.3) 5px, rgba(255, 255, 255, 0.3) 6px) /* repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 5px, rgba(0, 0, 0, 0.3) 5px, rgba(0, 0, 0, 0.3) 6px); */ ; background-size: 8px 8px, 8px 8px; width: 100%; height: 100%; min-height: 45px; display: flex; color: transparent; } .logic-cell-true { color: rgb(28, 93, 28, 0.7); font-weight: 600; } .logic-cell-false { color: rgb(192, 63, 63, 0.7); font-weight: 600; } .logic-cell-null { color: gray; font-weight: 600; } @keyframes cellUpdateGradientAnimation { 0% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .cell-updating { background: linear-gradient(-45deg, #000000, #000000, #000000, #333333, #888888, #333333, #000000, #000000, #000000); background-size: 750% 750%; animation: 2s cellUpdateGradientAnimation ease infinite; } .document-caption { padding-bottom: 10px; } .document-caption-text { padding: 5px; border-radius: 10px; } .caption { padding-top: 10px; } .cell-reference { color: #007bff; /* Blue color for cell references */ font-weight: bold; } .equals { color: #28a745; /* Green color for the equals sign */ } .operator { color: orange; } .editable-span { min-width: 5px; min-Height: 1em; display: inline; white-space: pre-wrap; word-wrap: break-word; /* border: 1px solid red; */ } .editable-span:empty::after { content: '\200B'; /* Zero-width space */ } .page-edtiable-region { border: 1px solid transparent; overflow: visible } .selected-image { border: 2px solid var(--focused-border) !important; } .document-image-block { border: 2px solid transparent; border-radius: 8px; } .document-figure-block { border: 2px solid transparent; border-radius: 8px; } .document-reference, .document-pageNumber, .document-totalPageNumber { border: 1px solid transparent; border-radius: 5px; cursor: pointer; background-color: rgba(102, 102, 102, 0.15); min-width: 5px; } .document-reference:hover { border: 1px solid gray; background-color: rgba(102, 102, 102, 0.35); } .document-temp-block { background-color: rgba(0, 214, 0, 0.25); /* border-radius: 5px; */ } .table-cell-content-div { /* padding: 5px; */ height: 100%; font-size: 5pt; cursor: cell; user-select: none; /* Prevent text selection by default */ /* Crosshair cursor for cell selection (fallback to default) */ } /* Prevent text selection on text elements inside non-editable table cells */ .table-content-cell[data-can-edit="false"] .document-paragraph, .table-content-cell[data-can-edit="false"] .editable-span, .table-content-cell[data-can-edit="false"] .document-list { -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important; } /* Allow text selection on text elements inside editable table cells */ .table-content-cell[data-can-edit="true"] .document-paragraph, .table-content-cell[data-can-edit="true"] .editable-span, .table-content-cell[data-can-edit="true"] .document-list { -webkit-user-select: text !important; -moz-user-select: text !important; -ms-user-select: text !important; user-select: text !important; } /*Slide styles*/ .slide-preview-selected { border: 2px solid var(--outline-focused); border-radius: 5px; } .slide-preview-holder { border-radius: 30px; } .slide-preview { border-radius: 30px; overflow: hidden; box-sizing: border-box; border: 2px solid transparent; padding-right: 5px; } .slide-element { border: 1px solid transparent; } .slide-element-editing { border: 1px solid rgba(0, 0, 0, 0.25); } /* Maintain selection outline even during editing */ .slide-element-editing.slide-element-selected { outline: 3px solid var(--slide-selection) !important; border: 1px solid rgba(0, 0, 0, 0.25); } .selected-slide { background-color: rgba(66, 133, 244, 0.1); box-shadow: 0 0 0 2px var(--slide-selection); } .slide-element-selected { outline: 3px solid var(--slide-selection) !important; } .slide-selection-box { position: absolute; border: 1px dashed var(--slide-selection); background-color: rgba(66, 133, 244, 0.1); pointer-events: none; z-index: 1000; display: none; } .slide-no-select { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .slide-aspect-ratio-locked { border: 2px solid #ff9800 !important; box-shadow: 0 0 0 1px rgba(255, 152, 0, 0.3); } /* Drag and drop indicator for slide reordering */ .slide-drop-before { position: relative; } .slide-drop-before::before { content: ''; position: absolute; top: -2px; left: 0; right: 0; height: 4px; background-color: #4285f4; border-radius: 2px; z-index: 1000; box-shadow: 0 0 4px rgba(66, 133, 244, 0.5); } .slide-drop-after { position: relative; } .slide-drop-after::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 4px; background-color: #4285f4; border-radius: 2px; z-index: 1000; box-shadow: 0 0 4px rgba(66, 133, 244, 0.5); } /* TABLE STYLES GENERIC*/ /* Drop indicator styles for document */ .document-drop-indicator { position: absolute; height: 2px; background-color: #4285f4; width: 100%; z-index: 1000; pointer-events: none; transition: opacity 0.2s; } .drag-over { /* background-color: rgba(66, 133, 244, 0.1); outline: 2px dashed #4285f4 !important; */ } .artifact-settings-bar { min-height: 65px; display: flex; align-items: center; justify-content: center; width: 100%; padding: 5px; box-sizing: border-box; height: fit-content; border-bottom: 1px solid rgb(46, 46, 46); } .artifact-settings-row { display: flex; align-items: center; min-height: 70px; justify-content: center; width: 100%; flex-wrap: wrap; border-bottom: 1px solid var(--primary-border); padding: 4px; } .document-math { padding: 2px; border: 1px solid transparent; user-select: none; } .renderArea { position: relative; /* border: 1px solid red; */ overflow: hidden; /* Added this line */ } .renderArea canvas { display: block; margin: 0 auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .geometry-renderMode { position: absolute; display: flex; align-items: center; padding: 5px 10px; border-radius: 4px; display: flex; align-items: center; bottom: 20px; left: 10px; z-index: 10000; height: 10px; } .scaleIndicator { position: absolute; background-color: rgba(255, 255, 255, 0.8); padding: 5px 10px; border-radius: 4px; display: flex; align-items: center; bottom: 20px; right: 75px; z-index: 10000; height: 10px; } .scaleBar { /* background-color: #333; */ /* margin-right: 10px; */ } .scaleText { font-size: 12px; color: #333; } .render-mode-button { cursor: pointer; padding: 2px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; /* transition: all 0.3s ease; */ margin: 0 5px; border: 1px solid transparent; /* Added margin for spacing between buttons */ } .render-mode-button svg { fill: gray; /* transition: fill 0.3s ease; */ } .render-mode-button:hover { background-color: rgba(182, 182, 182, 0.25) !important; } .render-mode-button.selected { border: 1px solid gray; /* background-color: #5f6368; */ } .render-mode-button.selected svg { fill: white; } .CodeMirror { background: transparent !important; height: auto !important; } .CodeMirror-gutters { background: transparent !important; }