mirror of
https://github.com/arsvendg/Stirling-PDF.git
synced 2026-07-16 03:20:46 +02:00
Restructure frontend code to allow for extensions (#4721)
# Description of Changes Move frontend code into `core` folder and add infrastructure for `proprietary` folder to include premium, non-OSS features
This commit is contained in:
James Brunton
@@ -0,0 +1,59 @@
|
||||
/* Cookie Consent Modal Styling - Ensure proper z-index */
|
||||
|
||||
/* Ensure cookie consent appears above everything */
|
||||
#cc-main {
|
||||
z-index: 999999 !important;
|
||||
}
|
||||
|
||||
/* Additional styling if needed */
|
||||
.cm-wrapper,
|
||||
.pm-wrapper {
|
||||
z-index: 999999 !important;
|
||||
}
|
||||
|
||||
/* Dark mode styling */
|
||||
.cc--darkmode .cm {
|
||||
background: #2d2d2d !important;
|
||||
color: #ffffff !important;
|
||||
border-top: 1px solid #444 !important;
|
||||
}
|
||||
|
||||
.cc--darkmode .pm {
|
||||
background: #2d2d2d !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.cc--darkmode .pm-overlay {
|
||||
background: rgba(0, 0, 0, 0.7) !important;
|
||||
}
|
||||
|
||||
/* Button styling */
|
||||
.cc--darkmode .cm__btn {
|
||||
background: #444 !important;
|
||||
color: #ffffff !important;
|
||||
border: 1px solid #666 !important;
|
||||
}
|
||||
|
||||
.cc--darkmode .cm__btn:hover {
|
||||
background: #555 !important;
|
||||
}
|
||||
|
||||
.cc--darkmode .pm__btn {
|
||||
background: #444 !important;
|
||||
color: #ffffff !important;
|
||||
border: 1px solid #666 !important;
|
||||
}
|
||||
|
||||
.cc--darkmode .pm__btn:hover {
|
||||
background: #555 !important;
|
||||
}
|
||||
|
||||
/* Ensure ScrollArea doesn't interfere */
|
||||
.mantine-ScrollArea-root {
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
/* Override any potential conflicts */
|
||||
[data-mantine-color-scheme="dark"] #cc-main {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
|
||||
/* CSS Variables */
|
||||
:root {
|
||||
--footer-height: 2rem;
|
||||
}
|
||||
|
||||
/* Footer link styling - make buttons and links look identical */
|
||||
.footer-link {
|
||||
color: var(--mantine-color-gray-6);
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.footer-link:hover {
|
||||
color: var(--mantine-color-blue-8);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.stirling-link {
|
||||
color: var(--mantine-color-blue-6);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.stirling-link:hover {
|
||||
color: var(--mantine-color-blue-8);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Viewer file tabs */
|
||||
.viewer-file-tab {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.viewer-file-tab[data-active] {
|
||||
background-color: rgba(147, 197, 253, 0.5);
|
||||
}
|
||||
@@ -0,0 +1,202 @@
|
||||
/* Rainbow Mode Styles - Easter Egg! */
|
||||
@keyframes rainbowBackground {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
|
||||
@keyframes rainbowBorder {
|
||||
0% { border-color: #ff0000; box-shadow: 0 0 15px #ff0000; }
|
||||
14% { border-color: #ff8800; box-shadow: 0 0 15px #ff8800; }
|
||||
28% { border-color: #ffff00; box-shadow: 0 0 15px #ffff00; }
|
||||
42% { border-color: #88ff00; box-shadow: 0 0 15px #88ff00; }
|
||||
57% { border-color: #00ff88; box-shadow: 0 0 15px #00ff88; }
|
||||
71% { border-color: #0088ff; box-shadow: 0 0 15px #0088ff; }
|
||||
85% { border-color: #8800ff; box-shadow: 0 0 15px #8800ff; }
|
||||
100% { border-color: #ff0000; box-shadow: 0 0 15px #ff0000; }
|
||||
}
|
||||
|
||||
@keyframes rainbowText {
|
||||
0% { color: #ff0000; text-shadow: 0 0 10px #ff0000; }
|
||||
14% { color: #ff8800; text-shadow: 0 0 10px #ff8800; }
|
||||
28% { color: #ffff00; text-shadow: 0 0 10px #ffff00; }
|
||||
42% { color: #88ff00; text-shadow: 0 0 10px #88ff00; }
|
||||
57% { color: #00ff88; text-shadow: 0 0 10px #00ff88; }
|
||||
71% { color: #0088ff; text-shadow: 0 0 10px #0088ff; }
|
||||
85% { color: #8800ff; text-shadow: 0 0 10px #8800ff; }
|
||||
100% { color: #ff0000; text-shadow: 0 0 10px #ff0000; }
|
||||
}
|
||||
|
||||
@keyframes rainbowPulse {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.05); }
|
||||
}
|
||||
|
||||
/* Main rainbow theme class */
|
||||
.rainbowMode {
|
||||
background: linear-gradient(
|
||||
-45deg,
|
||||
#ff0000, #ff8800, #ffff00, #88ff00, #00ff88, #00ffff, #0088ff, #8800ff, #ff0088, #ff0000
|
||||
) !important;
|
||||
background-size: 400% 400% !important;
|
||||
animation: rainbowBackground 3s ease infinite !important;
|
||||
color: white !important;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Rainbow components */
|
||||
.rainbowCard {
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
#ff0000, #ff8800, #ffff00, #88ff00, #00ff88, #00ffff, #0088ff, #8800ff, #ff0088
|
||||
) !important;
|
||||
background-size: 400% 400% !important;
|
||||
animation: rainbowBackground 4s ease infinite, rainbowBorder 2s linear infinite !important;
|
||||
color: white !important;
|
||||
border: 2px solid !important;
|
||||
border-radius: 15px !important;
|
||||
box-shadow: 0 0 20px rgba(255, 255, 255, 0.3) !important;
|
||||
}
|
||||
|
||||
.rainbowButton {
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
#ff0000, #ff8800, #ffff00, #88ff00, #00ff88, #00ffff, #0088ff, #8800ff, #ff0088
|
||||
) !important;
|
||||
background-size: 300% 300% !important;
|
||||
animation: rainbowBackground 2s ease infinite, rainbowBorder 1s linear infinite !important;
|
||||
border: 2px solid !important;
|
||||
color: white !important;
|
||||
border-radius: 8px !important;
|
||||
transition: all 0.3s ease !important;
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
.rainbowButton:hover {
|
||||
transform: scale(1.05) !important;
|
||||
animation: rainbowBackground 1s ease infinite, rainbowBorder 0.5s linear infinite, rainbowPulse 0.5s ease infinite !important;
|
||||
box-shadow: 0 0 25px rgba(255, 255, 255, 0.6) !important;
|
||||
}
|
||||
|
||||
.rainbowInput {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
#ff0000, #ff8800, #ffff00, #88ff00, #00ff88, #00ffff, #0088ff, #8800ff, #ff0088
|
||||
) !important;
|
||||
background-size: 300% 300% !important;
|
||||
animation: rainbowBackground 2.5s ease infinite, rainbowBorder 1.5s linear infinite !important;
|
||||
border: 2px solid !important;
|
||||
color: white !important;
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
.rainbowInput::placeholder {
|
||||
color: rgba(255, 255, 255, 0.8) !important;
|
||||
}
|
||||
|
||||
.rainbowText {
|
||||
animation: rainbowText 3s linear infinite !important;
|
||||
font-weight: bold !important;
|
||||
text-shadow: 0 0 10px currentColor !important;
|
||||
}
|
||||
|
||||
.rainbowSegmentedControl {
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
#ff0000, #ff8800, #ffff00, #88ff00, #00ff88, #00ffff, #0088ff, #8800ff, #ff0088
|
||||
) !important;
|
||||
background-size: 400% 400% !important;
|
||||
animation: rainbowBackground 3s ease infinite, rainbowBorder 2s linear infinite !important;
|
||||
border: 2px solid !important;
|
||||
border-radius: 12px !important;
|
||||
padding: 4px !important;
|
||||
}
|
||||
|
||||
.rainbowPaper {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
#00ffff, #0088ff, #8800ff, #ff0088
|
||||
) !important;
|
||||
background-size: 100% 100% !important;
|
||||
animation: rainbowBackground 3.5s ease infinite, rainbowBorder 2s linear infinite !important;
|
||||
border: 2px solid !important;
|
||||
color: white !important;
|
||||
border-radius: 12px !important;
|
||||
}
|
||||
|
||||
/* Easter egg notification */
|
||||
.rainbowNotification {
|
||||
position: fixed !important;
|
||||
top: 20px !important;
|
||||
right: 20px !important;
|
||||
background: linear-gradient(45deg,#ffff00, #88ff00, #00ff88, #00ffff) !important;
|
||||
background-size: 300% 300% !important;
|
||||
animation: rainbowBackground 1s ease infinite, rainbowBorder 0.5s linear infinite !important;
|
||||
color: white !important;
|
||||
padding: 15px 20px !important;
|
||||
border-radius: 25px !important;
|
||||
font-weight: bold !important;
|
||||
font-size: 16px !important;
|
||||
z-index: 10000 !important;
|
||||
border: 2px solid white !important;
|
||||
box-shadow: 0 0 20px rgba(255, 255, 255, 0.8) !important;
|
||||
user-select: none !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
/* Specific component overrides */
|
||||
.rainbowMode [data-mantine-color-scheme] {
|
||||
background: linear-gradient(
|
||||
-45deg,
|
||||
#ff0000, #ff8800, #ffff00, #88ff00, #00ff88, #00ffff, #0088ff, #8800ff, #ff0088, #ff0000
|
||||
) !important;
|
||||
background-size: 400% 400% !important;
|
||||
animation: rainbowBackground 3s ease infinite !important;
|
||||
}
|
||||
|
||||
/* Make all buttons rainbow in rainbow mode */
|
||||
.rainbowMode button {
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
#ffff00, #88ff00, #00ff88, #00ffff
|
||||
) !important;
|
||||
background-size: 100% 100% !important;
|
||||
animation: rainbowBackground 2s ease infinite !important;
|
||||
border: 2px solid !important;
|
||||
animation: rainbowBackground 2s ease infinite, rainbowBorder 1.5s linear infinite !important;
|
||||
color: white !important;
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
/* Make all inputs rainbow in rainbow mode */
|
||||
.rainbowMode input,
|
||||
.rainbowMode select,
|
||||
.rainbowMode textarea {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
#ffff00, #88ff00, #00ff88, #00ffff
|
||||
) !important;
|
||||
background-size: 100% 100% !important;
|
||||
animation: rainbowBackground 2.5s ease infinite !important;
|
||||
border: 2px solid !important;
|
||||
animation: rainbowBackground 2.5s ease infinite, rainbowBorder 1.5s linear infinite !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* Rainbow text class */
|
||||
.rainbowText {
|
||||
animation: rainbowText 3s linear infinite !important;
|
||||
font-weight: bold !important;
|
||||
text-shadow: 0 0 10px currentColor !important;
|
||||
}
|
||||
|
||||
/* Make all text rainbow */
|
||||
.rainbowMode h1,
|
||||
.rainbowMode h2,
|
||||
.rainbowMode h3,
|
||||
.rainbowMode h4,
|
||||
.rainbowMode h5,
|
||||
.rainbowMode h6 {
|
||||
animation: rainbowText 3s linear infinite !important;
|
||||
font-weight: bold !important;
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
|
||||
/* Import minimal theme variables */
|
||||
@import './theme.css';
|
||||
|
||||
@layer base {
|
||||
@tailwind base;
|
||||
}
|
||||
|
||||
@layer components {
|
||||
@tailwind components;
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
@tailwind utilities;
|
||||
}
|
||||
@@ -0,0 +1,521 @@
|
||||
/* CSS variables for Tailwind + Mantine integration */
|
||||
|
||||
:root {
|
||||
/* Global animation durations */
|
||||
--fullscreen-anim-duration-in: 0.28s;
|
||||
--fullscreen-anim-duration-out: 0.22s;
|
||||
|
||||
/* Z-index constants (added in this PR) */
|
||||
--z-over-fullscreen-surface: 1400;
|
||||
--z-fullscreen-surface: 1200;
|
||||
--z-fullscreen-favorite-star: 2;
|
||||
--z-fullscreen-icon-svg: 1;
|
||||
--z-toolpicker-star: 1;
|
||||
|
||||
/* 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;
|
||||
|
||||
/* Success (green) */
|
||||
--color-green-50: #f0fdf4;
|
||||
--color-green-100: #dcfce7;
|
||||
--color-green-200: #bbf7d0;
|
||||
--color-green-300: #86efac;
|
||||
--color-green-400: #4ade80;
|
||||
--color-green-500: #22c55e;
|
||||
--color-green-600: #16a34a;
|
||||
--color-green-700: #15803d;
|
||||
--color-green-800: #166534;
|
||||
--color-green-900: #14532d;
|
||||
|
||||
/* Warning (yellow) */
|
||||
--color-yellow-50: #fefce8;
|
||||
--color-yellow-100: #fef9c3;
|
||||
--color-yellow-200: #fef08a;
|
||||
--color-yellow-300: #fde047;
|
||||
--color-yellow-400: #facc15;
|
||||
|
||||
/* Category colors - consistent across light and dark modes */
|
||||
--category-color-removal: #ef4444; /* Red for removal tools */
|
||||
--category-color-security: #f59e0b; /* Orange for security tools */
|
||||
--category-color-formatting: #8b5cf6; /* Purple for formatting tools */
|
||||
--category-color-extraction: #06b6d4; /* Cyan for extraction tools */
|
||||
--category-color-signing: #10b981; /* Green for signing tools */
|
||||
--category-color-general: #3b82f6; /* Blue for general tools */
|
||||
--category-color-verification: #f97316; /* Orange for verification tools */
|
||||
--category-color-automation: #ec4899; /* Pink for automation tools */
|
||||
--category-color-developer: #6b7280; /* Gray for developer tools */
|
||||
--category-color-default: #6b7280; /* Default gray */
|
||||
|
||||
/* Special section colors - consistent across light and dark modes */
|
||||
--special-color-favorites: #FFC107; /* Yellow/gold for favorites */
|
||||
--special-color-recommended: #1BB1D4; /* Cyan for recommended */
|
||||
--color-yellow-500: #eab308;
|
||||
--color-yellow-600: #ca8a04;
|
||||
--color-yellow-700: #a16207;
|
||||
--color-yellow-800: #854d0e;
|
||||
--color-yellow-900: #713f12;
|
||||
|
||||
--color-red-50: #fef2f2;
|
||||
--color-red-100: #fee2e2;
|
||||
--color-red-200: #fecaca;
|
||||
--color-red-300: #fca5a5;
|
||||
--color-red-400: #f87171;
|
||||
--color-red-500: #ef4444;
|
||||
--color-red-600: #dc2626;
|
||||
--color-red-700: #b91c1c;
|
||||
--color-red-800: #991b1b;
|
||||
--color-red-900: #7f1d1d;
|
||||
|
||||
--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;
|
||||
--automation-entry-hover-bg: var(--color-gray-100);
|
||||
|
||||
/* 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;
|
||||
|
||||
/* RightRail (light) */
|
||||
--right-rail-bg: #F5F6F8; /* light background */
|
||||
--right-rail-foreground: #E3E4E5; /* panel behind custom tool icons */
|
||||
--right-rail-icon: #4B5563; /* icon color */
|
||||
--right-rail-icon-disabled: #CECECE;/* disabled icon */
|
||||
|
||||
/* 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;
|
||||
|
||||
/* selected file header colors */
|
||||
--header-selected-bg: #1E88E5; /* light mode selected header matches dark */
|
||||
--header-selected-fg: #FFFFFF;
|
||||
--file-card-bg: #FFFFFF; /* file card background (light/dark paired) */
|
||||
|
||||
/* 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));
|
||||
|
||||
/* Light mode card hover and selection */
|
||||
--header-hover-bg: #3B4B6E; /* same family as selected, a touch muted for hover */
|
||||
--card-selected-border: #3FAFFF; /* slightly more blue than dark mode header */
|
||||
--checkbox-border: #2F83BF;
|
||||
--checkbox-checked-bg: #3FAFFF;
|
||||
--checkbox-tick: #FFFFFF;
|
||||
|
||||
--information-text-bg: #eaeaea;
|
||||
--information-text-color: #5e5e5e;
|
||||
/* Bulk selection panel specific colors (light mode) */
|
||||
--bulk-panel-bg: #ffffff; /* white background for parent container */
|
||||
--bulk-card-bg: #ffffff; /* white background for cards */
|
||||
--bulk-card-border: #e5e7eb; /* light gray border for cards and buttons */
|
||||
--bulk-card-hover-border: #d1d5db; /* slightly darker on hover */
|
||||
--unsupported-bar-bg: #5a616e;
|
||||
--unsupported-bar-border: #6B7280;
|
||||
|
||||
/* Config Modal colors (light mode) */
|
||||
--modal-nav-bg: #F5F6F8;
|
||||
--modal-nav-section-title: #6B7280;
|
||||
--modal-nav-item: #374151;
|
||||
--modal-nav-item-active: #0A8BFF;
|
||||
--modal-nav-item-active-bg: rgba(10, 139, 255, 0.08);
|
||||
--modal-content-bg: #ffffff;
|
||||
--modal-header-border: rgba(0, 0, 0, 0.06);
|
||||
|
||||
/* PDF Report Colors (always light) */
|
||||
--pdf-light-header-bg: 239 246 255;
|
||||
--pdf-light-accent: 59 130 246;
|
||||
--pdf-light-text-primary: 30 41 59;
|
||||
--pdf-light-text-muted: 100 116 139;
|
||||
--pdf-light-box-bg: 248 250 252;
|
||||
--pdf-light-box-border: 226 232 240;
|
||||
--pdf-light-warning: 234 179 8;
|
||||
--pdf-light-danger: 248 113 113;
|
||||
--pdf-light-success: 34 197 94;
|
||||
--pdf-light-neutral: 148 163 184;
|
||||
--pdf-light-status-valid-bg: 209 250 229;
|
||||
--pdf-light-status-valid-text: 6 95 70;
|
||||
--pdf-light-status-warning-bg: 254 243 199;
|
||||
--pdf-light-status-warning-text: 146 64 14;
|
||||
--pdf-light-status-invalid-bg: 254 226 226;
|
||||
--pdf-light-status-invalid-text: 153 27 27;
|
||||
--pdf-light-status-neutral-bg: 229 231 235;
|
||||
--pdf-light-status-neutral-text: 55 65 81;
|
||||
--pdf-light-report-container-bg: 249 250 251;
|
||||
--pdf-light-simulated-page-bg: 255 255 255;
|
||||
--pdf-light-simulated-page-text: 15 23 42;
|
||||
}
|
||||
|
||||
[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-red-50: #2d1b1b;
|
||||
--color-red-100: #3a2323;
|
||||
--color-red-200: #4a2d2d;
|
||||
--color-red-300: #5c3535;
|
||||
--color-red-400: #7c4a4a;
|
||||
--color-red-500: #ef4444;
|
||||
--color-red-600: #dc2626;
|
||||
--color-red-700: #b91c1c;
|
||||
--color-red-800: #991b1b;
|
||||
--color-red-900: #7f1d1d;
|
||||
|
||||
--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;
|
||||
|
||||
/* Category colors - same as light mode for consistency */
|
||||
--category-color-removal: #ef4444; /* Red for removal tools */
|
||||
--category-color-security: #f59e0b; /* Orange for security tools */
|
||||
--category-color-formatting: #8b5cf6; /* Purple for formatting tools */
|
||||
--category-color-extraction: #06b6d4; /* Cyan for extraction tools */
|
||||
--category-color-signing: #10b981; /* Green for signing tools */
|
||||
--category-color-general: #3b82f6; /* Blue for general tools */
|
||||
--category-color-verification: #f97316; /* Orange for verification tools */
|
||||
--category-color-automation: #ec4899; /* Pink for automation tools */
|
||||
--category-color-developer: #6b7280; /* Gray for developer tools */
|
||||
--category-color-default: #6b7280; /* Default gray */
|
||||
|
||||
/* Special section colors - same as light mode for consistency */
|
||||
--special-color-favorites: #FFC107; /* Yellow/gold for favorites */
|
||||
--special-color-recommended: #1BB1D4; /* Cyan for recommended */
|
||||
|
||||
/* Success (green) - dark */
|
||||
--color-green-50: #052e16;
|
||||
--color-green-100: #064e3b;
|
||||
--color-green-200: #065f46;
|
||||
--color-green-300: #047857;
|
||||
--color-green-400: #059669;
|
||||
--color-green-500: #22c55e;
|
||||
--color-green-600: #16a34a;
|
||||
--color-green-700: #4ade80;
|
||||
--color-green-800: #86efac;
|
||||
--color-green-900: #bbf7d0;
|
||||
|
||||
/* Warning (yellow) - dark */
|
||||
--color-yellow-50: #451a03;
|
||||
--color-yellow-100: #713f12;
|
||||
--color-yellow-200: #854d0e;
|
||||
--color-yellow-300: #a16207;
|
||||
--color-yellow-400: #ca8a04;
|
||||
--color-yellow-500: #eab308;
|
||||
--color-yellow-600: #facc15;
|
||||
--color-yellow-700: #fde047;
|
||||
--color-yellow-800: #fef08a;
|
||||
--color-yellow-900: #fef9c3;
|
||||
|
||||
/* 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;
|
||||
--automation-entry-hover-bg: var(--color-gray-200);
|
||||
|
||||
/* 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;
|
||||
|
||||
/* RightRail (dark) */
|
||||
--right-rail-bg: #1F2329; /* dark background */
|
||||
--right-rail-foreground: #2A2F36; /* panel behind custom tool icons */
|
||||
--right-rail-icon: #BCBEBF; /* icon color */
|
||||
--right-rail-icon-disabled: #43464B;/* disabled icon */
|
||||
|
||||
/* 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;
|
||||
|
||||
/* selected file header colors for dark */
|
||||
--header-selected-bg: #1E88E5;
|
||||
--header-selected-fg: #FFFFFF;
|
||||
/* file card background (dark) */
|
||||
--file-card-bg: #1F2329;
|
||||
|
||||
/* 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;
|
||||
|
||||
--information-text-bg: #292e34;
|
||||
--information-text-color: #ececec;
|
||||
|
||||
/* Bulk selection panel specific colors (dark mode) */
|
||||
--bulk-panel-bg: var(--bg-raised); /* dark background for parent container */
|
||||
--bulk-card-bg: var(--bg-raised); /* dark background for cards */
|
||||
--bulk-card-border: var(--border-default); /* default border for cards and buttons */
|
||||
--bulk-card-hover-border: var(--border-strong); /* stronger border on hover */
|
||||
--unsupported-bar-bg: #1F2329;
|
||||
--unsupported-bar-border: #4B525A;
|
||||
|
||||
/* Config Modal colors (dark mode) */
|
||||
--modal-nav-bg: #1F2329;
|
||||
--modal-nav-section-title: #9CA3AF;
|
||||
--modal-nav-item: #D0D6DC;
|
||||
--modal-nav-item-active: #0A8BFF;
|
||||
--modal-nav-item-active-bg: rgba(10, 139, 255, 0.15);
|
||||
--modal-content-bg: #2A2F36;
|
||||
--modal-header-border: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
:root {
|
||||
--shadow-color: rgba(15, 23, 42, 0.55);
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--shadow-color: rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
// Centralized z-index constants for new usages added in this branch.
|
||||
// Keep values identical to their original inline usages.
|
||||
|
||||
export const Z_INDEX_FULLSCREEN_SURFACE = 1000;
|
||||
export const Z_INDEX_OVER_FULLSCREEN_SURFACE = 1300;
|
||||
export const Z_ANALYTICS_MODAL = 1301;
|
||||
|
||||
export const Z_INDEX_FILE_MANAGER_MODAL = 1200;
|
||||
export const Z_INDEX_OVER_FILE_MANAGER_MODAL = 1300;
|
||||
|
||||
export const Z_INDEX_AUTOMATE_MODAL = 1100;
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user