mirror of
https://github.com/arsvendg/Stirling-PDF.git
synced 2026-07-14 10:34:06 +02:00
EthanHealy01andGitHub
a9a41b3877
# Description of Changes - Changed the navbar styling to include all the icons that were on our figma design - Added a new link to our index.html to include the MUI symbols. - I chose to keep the automate and read icons the same as they were already because I feel as though they make more sense ``` <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,700,0,0" /> ``` --- figma vs app dark <img width="422" height="1038" alt="Screenshot 2025-07-21 at 5 44 19 PM" src="https://github.com/user-attachments/assets/15d5583f-ce3c-418f-81c6-6e6022f5f4d0" /> figma vs app light <img width="244" height="926" alt="Screenshot 2025-07-21 at 5 57 27 PM" src="https://github.com/user-attachments/assets/c855d02b-20ee-4ccf-af1f-a3c1a4c2a154" /> ## Checklist ### General - [x] 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) - [x] 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) - [x] I have performed a self-review of my own code - [x] 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) - [x] Screenshots or videos demonstrating the UI changes are attached (e.g., as comments or direct attachments in the PR) ### Testing (if applicable) - [x] 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.
191 lines
5.0 KiB
CSS
191 lines
5.0 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;
|
|
--text-primary: #111827;
|
|
--text-secondary: #4b5563;
|
|
--text-muted: #6b7280;
|
|
--border-subtle: #e5e7eb;
|
|
--border-default: #d1d5db;
|
|
--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;
|
|
|
|
/* Inactive icon colors for light mode */
|
|
--icon-inactive-bg: #9CA3AF;
|
|
--icon-inactive-color: #FFFFFF;
|
|
}
|
|
|
|
[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: #272A2E;
|
|
--text-primary: #f9fafb;
|
|
--text-secondary: #d1d5db;
|
|
--text-muted: #9ca3af;
|
|
--border-subtle: #2A2F36;
|
|
--border-default: #374151;
|
|
--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;
|
|
|
|
/* 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);
|
|
}
|
|
|
|
/* Smooth transitions for theme switching */
|
|
* {
|
|
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
|
|
} |