mirror of
https://github.com/Stirling-Tools/Stirling-PDF.git
synced 2025-08-21 19:59:24 +00:00
8f32082145
# Description of Changes - Added the all tools sidebar - Added a TextFit component that shrinks text to fit containers - Added a TopToolIcon on the nav, that animates down to give users feedback on what tool is selected - Added the baseToolRegistry, to replace the old pattern of listing tools, allowing us to clean up the ToolRegistry code - Fixed Mantine light/dark theme race condition - General styling tweaks --- ## Checklist ### General - [ ] I have read the [Contribution Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md) - [ ] I have read the [Stirling-PDF Developer Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md) (if applicable) - [ ] I have read the [How to add new languages to Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md) (if applicable) - [ ] I have performed a self-review of my own code - [ ] My changes generate no new warnings ### Documentation - [ ] I have updated relevant docs on [Stirling-PDF's doc repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/) (if functionality has heavily changed) - [ ] I have read the section [Add New Translation Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags) (for new translation tags only) ### UI Changes (if applicable) - [ ] Screenshots or videos demonstrating the UI changes are attached (e.g., as comments or direct attachments in the PR) ### Testing (if applicable) - [ ] I have tested my changes locally. Refer to the [Testing Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing) for more details.
306 lines
8.8 KiB
CSS
306 lines
8.8 KiB
CSS
/* CSS variables for Tailwind + Mantine integration */
|
|
|
|
:root {
|
|
/* Standard gray scale */
|
|
--gray-50: 249 250 251;
|
|
--gray-100: 243 244 246;
|
|
--gray-200: 229 231 235;
|
|
--gray-300: 209 213 219;
|
|
--gray-400: 156 163 175;
|
|
--gray-500: 107 114 128;
|
|
--gray-600: 75 85 99;
|
|
--gray-700: 55 65 81;
|
|
--gray-800: 31 41 55;
|
|
--gray-900: 17 24 39;
|
|
|
|
/* Semantic colors for Tailwind */
|
|
--surface: 255 255 255;
|
|
--background: 249 250 251;
|
|
--border: 229 231 235;
|
|
|
|
/* Colors for Mantine integration */
|
|
--color-primary-50: #eff6ff;
|
|
--color-primary-100: #dbeafe;
|
|
--color-primary-200: #bfdbfe;
|
|
--color-primary-300: #93c5fd;
|
|
--color-primary-400: #60a5fa;
|
|
--color-primary-500: #3b82f6;
|
|
--color-primary-600: #2563eb;
|
|
--color-primary-700: #1d4ed8;
|
|
--color-primary-800: #1e40af;
|
|
--color-primary-900: #1e3a8a;
|
|
|
|
--color-gray-50: #f9fafb;
|
|
--color-gray-100: #f3f4f6;
|
|
--color-gray-200: #e5e7eb;
|
|
--color-gray-300: #d1d5db;
|
|
--color-gray-400: #9ca3af;
|
|
--color-gray-500: #6b7280;
|
|
--color-gray-600: #4b5563;
|
|
--color-gray-700: #374151;
|
|
--color-gray-800: #1f2937;
|
|
--color-gray-900: #111827;
|
|
|
|
/* Spacing system */
|
|
--space-xs: 4px;
|
|
--space-sm: 8px;
|
|
--space-md: 16px;
|
|
--space-lg: 24px;
|
|
--space-xl: 32px;
|
|
|
|
/* Radius system */
|
|
--radius-xs: 2px;
|
|
--radius-sm: 4px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 12px;
|
|
--radius-xl: 16px;
|
|
|
|
/* Shadow system */
|
|
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
|
|
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
|
|
|
|
/* Font weights */
|
|
--font-weight-normal: 400;
|
|
--font-weight-medium: 500;
|
|
--font-weight-semibold: 600;
|
|
--font-weight-bold: 700;
|
|
|
|
/* Light theme semantic colors */
|
|
--bg-surface: #ffffff;
|
|
--bg-raised: #f9fafb;
|
|
--bg-muted: #f3f4f6;
|
|
--bg-background: #f9fafb;
|
|
--bg-toolbar: #ffffff;
|
|
--bg-file-manager: #F5F6F8;
|
|
--bg-file-list: #ffffff;
|
|
--btn-open-file: #0A8BFF;
|
|
--text-primary: #111827;
|
|
--text-secondary: #4b5563;
|
|
--text-muted: #6b7280;
|
|
--border-subtle: #e5e7eb;
|
|
--border-default: #E2E8F0;
|
|
--border-strong: #9ca3af;
|
|
--hover-bg: #f9fafb;
|
|
--active-bg: #f3f4f6;
|
|
|
|
/* Icon colors for light mode */
|
|
--icon-user-bg: #9CA3AF;
|
|
--icon-user-color: #FFFFFF;
|
|
--icon-notifications-bg: #9CA3AF;
|
|
--icon-notifications-color: #FFFFFF;
|
|
--icon-tools-bg: #1E88E5;
|
|
--icon-tools-color: #FFFFFF;
|
|
--icon-read-bg: #4CAF50;
|
|
--icon-read-color: #FFFFFF;
|
|
--icon-sign-bg: #3BA99C;
|
|
--icon-sign-color: #FFFFFF;
|
|
--icon-automate-bg: #A576E3;
|
|
--icon-automate-color: #FFFFFF;
|
|
--icon-files-bg: #D3E7F7;
|
|
--icon-files-color: #0A8BFF;
|
|
--icon-activity-bg: #D3E7F7;
|
|
--icon-activity-color: #0A8BFF;
|
|
--icon-config-bg: #9CA3AF;
|
|
--icon-config-color: #FFFFFF;
|
|
|
|
/* Colors for tooltips */
|
|
--tooltip-title-bg: #DBEFFF;
|
|
--tooltip-title-color: #31528E;
|
|
--tooltip-header-bg: #31528E;
|
|
--tooltip-header-color: white;
|
|
--tooltip-border: var(--border-default);
|
|
|
|
/* Inactive icon colors for light mode */
|
|
--icon-inactive-bg: #9CA3AF;
|
|
--icon-inactive-color: #FFFFFF;
|
|
|
|
/* New theme colors for text and icons */
|
|
--tools-text-and-icon-color: #374151;
|
|
|
|
/* Tool picker sticky header variables (light mode) */
|
|
--tool-header-bg: #DBEFFF;
|
|
--tool-header-border: #BEE2FF;
|
|
--tool-header-text: #1E88E5;
|
|
--tool-header-badge-bg: #C0DDFF;
|
|
--tool-header-badge-text: #004E99;
|
|
|
|
/* Subcategory title styling (light mode) */
|
|
--tool-subcategory-text-color: #9CA3AF; /* lighter text */
|
|
--tool-subcategory-rule-color: #E5E7EB; /* doubly lighter rule line */
|
|
--accent-interactive: #4A90E2;
|
|
--text-instruction: #4A90E2;
|
|
--text-brand: var(--color-gray-700);
|
|
--text-brand-accent: #DC2626;
|
|
|
|
/* Placeholder text colors */
|
|
--search-text-and-icon-color: #6B7382;
|
|
|
|
/* Tool panel search bar background colors */
|
|
--tool-panel-search-bg: #EFF1F4;
|
|
--tool-panel-search-border-bottom: #EFF1F4;
|
|
|
|
/* container */
|
|
--landing-paper-bg: var(--bg-surface);
|
|
--landing-inner-paper-bg: #EEF8FF;
|
|
--landing-inner-paper-border: #CDEAFF;
|
|
--landing-button-bg: var(--bg-surface);
|
|
--landing-button-color: var(--icon-tools-bg);
|
|
--landing-button-border: #E0F2F7;
|
|
--landing-button-hover-bg: rgb(251, 251, 251);
|
|
|
|
/* drop state */
|
|
--landing-drop-paper-bg: #E3F2FD;
|
|
--landing-drop-inner-paper-bg: #BBDEFB;
|
|
--landing-drop-inner-paper-border: #90CAF9;
|
|
|
|
/* shadows */
|
|
--drop-shadow-color: rgba(0, 0, 0, 0.08);
|
|
--drop-shadow-color-strong: rgba(0, 0, 0, 0.04);
|
|
--drop-shadow-filter: drop-shadow(0 0.2rem 0.4rem rgba(0, 0, 0, 0.08)) drop-shadow(0 0.6rem 0.6rem rgba(0, 0, 0, 0.06)) drop-shadow(0 1.2rem 1rem rgba(0, 0, 0, 0.04));
|
|
}
|
|
|
|
[data-mantine-color-scheme="dark"] {
|
|
/* Dark theme gray scale (inverted) */
|
|
--gray-50: 17 24 39;
|
|
--gray-100: 31 35 41;
|
|
--gray-200: 42 47 54;
|
|
--gray-300: 55 65 81;
|
|
--gray-400: 75 85 99;
|
|
--gray-500: 107 114 128;
|
|
--gray-600: 156 163 175;
|
|
--gray-700: 209 213 219;
|
|
--gray-800: 229 231 235;
|
|
--gray-900: 243 244 246;
|
|
|
|
/* Dark semantic colors for Tailwind */
|
|
--surface: 31 35 41;
|
|
--background: 42 47 54;
|
|
--border: 55 65 81;
|
|
|
|
/* Dark theme Mantine colors */
|
|
--color-gray-50: #111827;
|
|
--color-gray-100: #1F2329;
|
|
--color-gray-200: #2A2F36;
|
|
--color-gray-300: #374151;
|
|
--color-gray-400: #4b5563;
|
|
--color-gray-500: #6b7280;
|
|
--color-gray-600: #9ca3af;
|
|
--color-gray-700: #d1d5db;
|
|
--color-gray-800: #e5e7eb;
|
|
--color-gray-900: #f3f4f6;
|
|
|
|
/* Dark theme semantic colors */
|
|
--bg-surface: #2A2F36;
|
|
--bg-raised: #1F2329;
|
|
--bg-muted: #1F2329;
|
|
--bg-background: #2A2F36;
|
|
--bg-toolbar: #1F2329;
|
|
--bg-file-manager: #1F2329;
|
|
--bg-file-list: #2A2F36;
|
|
--btn-open-file: #0A8BFF;
|
|
--text-primary: #f9fafb;
|
|
--text-secondary: #d1d5db;
|
|
--text-muted: #9ca3af;
|
|
--border-subtle: #2A2F36;
|
|
--border-default: #3A4047;
|
|
--border-strong: #4b5563;
|
|
--hover-bg: #374151;
|
|
--active-bg: #4b5563;
|
|
|
|
/* Icon colors for dark mode */
|
|
--icon-user-bg: #2A2F36;
|
|
--icon-user-color: #6E7581;
|
|
--icon-notifications-bg: #2A2F36;
|
|
--icon-notifications-color: #6E7581;
|
|
--icon-tools-bg: #4B525A;
|
|
--icon-tools-color: #EAEAEA;
|
|
--icon-read-bg: #4B525A;
|
|
--icon-read-color: #EAEAEA;
|
|
--icon-sign-bg: #4B525A;
|
|
--icon-sign-color: #EAEAEA;
|
|
--icon-automate-bg: #4B525A;
|
|
--icon-automate-color: #EAEAEA;
|
|
--icon-files-bg: #4B525A;
|
|
--icon-files-color: #EAEAEA;
|
|
--icon-activity-bg: #4B525A;
|
|
--icon-activity-color: #EAEAEA;
|
|
--icon-config-bg: #4B525A;
|
|
--icon-config-color: #EAEAEA;
|
|
|
|
/* Inactive icon colors for dark mode */
|
|
--icon-inactive-bg: #2A2F36;
|
|
--icon-inactive-color: #6E7581;
|
|
|
|
/* Dark mode tooltip colors */
|
|
--tooltip-title-bg: #4B525A;
|
|
--tooltip-title-color: #fff;
|
|
--tooltip-header-bg: var(--bg-raised);
|
|
--tooltip-header-color: var(--text-primary);
|
|
--tooltip-border: var(--border-default);
|
|
|
|
--accent-interactive: #ffffff;
|
|
--text-instruction: #ffffff;
|
|
--text-brand: var(--color-gray-800);
|
|
--text-brand-accent: #EF4444;
|
|
|
|
/* container */
|
|
--landing-paper-bg: #171A1F;
|
|
--landing-inner-paper-bg: var(--bg-raised);
|
|
--landing-inner-paper-border: #2D3237;
|
|
--landing-button-bg: #2B3037;
|
|
--landing-button-color: #ffffff;
|
|
--landing-button-border: #2D3237;
|
|
--landing-button-hover-bg: #4c525b;
|
|
|
|
/* drop state */
|
|
--landing-drop-paper-bg: #1A2332;
|
|
--landing-drop-inner-paper-bg: #2A3441;
|
|
--landing-drop-inner-paper-border: #3A4451;
|
|
|
|
/* shadows */
|
|
--drop-shadow-color: rgba(255, 255, 255, 0.08);
|
|
--drop-shadow-color-strong: rgba(255, 255, 255, 0.04);
|
|
--drop-shadow-filter: drop-shadow(0 0.2rem 0.4rem rgba(200, 200, 200, 0.08)) drop-shadow(0 0.6rem 0.6rem rgba(200, 200, 200, 0.06)) drop-shadow(0 1.2rem 1rem rgba(200, 200, 200, 0.04));
|
|
|
|
/* Adjust shadows for dark mode */
|
|
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
|
|
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
|
|
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
|
|
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.4);
|
|
|
|
--tools-text-and-icon-color: #D0D6DC;
|
|
|
|
/* Tool picker sticky header variables (dark mode) */
|
|
--tool-header-bg: #2A2F36;
|
|
--tool-header-border: #3A4047;
|
|
--tool-header-text: #D0D6DC;
|
|
--tool-header-badge-bg: #4B525A;
|
|
--tool-header-badge-text: #FFFFFF;
|
|
|
|
/* Subcategory title styling (dark mode) */
|
|
--tool-subcategory-text-color: #9CA3AF; /* lighter text in dark mode as well */
|
|
--tool-subcategory-rule-color: #3A4047; /* doubly lighter (relative) line in dark */
|
|
|
|
/* Placeholder text colors (dark mode) */
|
|
--search-text-and-icon-color: #FFFFFF !important;
|
|
|
|
/* Tool panel search bar background colors (dark mode) */
|
|
--tool-panel-search-bg: #1F2329;
|
|
--tool-panel-search-border-bottom: #4B525A;
|
|
|
|
}
|
|
|
|
/* Dropzone drop state styling */
|
|
[data-accept] .dropzone-inner {
|
|
background-color: var(--landing-drop-inner-paper-bg) !important;
|
|
border-color: var(--landing-drop-inner-paper-border) !important;
|
|
}
|
|
|
|
/* Smooth transitions for theme switching */
|
|
* {
|
|
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
|
|
} |