diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/app.css b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/app.css index 55879faa..be07c3c8 100644 --- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/app.css +++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/app.css @@ -495,4 +495,92 @@ article { /* Sun icon: always visible regardless of active state */ .sf-theme-icon--sun { opacity: 0.72; /* minimum visibility */ +} + +/* ── Theme overrides: Home page & Login ──────────────────────────────────── */ +/* selector: [data-sf-theme=""] on , set by signflow-theme.js */ + +/* ── Purple ── */ +[data-sf-theme="purple"] .home-page-wrapper { + background: linear-gradient(160deg, #1a0533 0%, #3b0764 45%, #6b21a8 100%); +} + +[data-sf-theme="purple"] .home-btn-primary { + background: linear-gradient(135deg, #6b21a8 0%, #9333ea 100%); +} + +[data-sf-theme="purple"] .home-feature-badge { + background: rgba(147, 51, 234, 0.10); + color: #c084fc; + border-color: rgba(147, 51, 234, 0.25); +} + +/* Login card header: set via a CSS rule so inline gradient can be overridden */ +.login-card .card-header { + background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%) !important; +} + +[data-sf-theme="purple"] .login-card .card-header { + background: linear-gradient(135deg, #1a0533 0%, #6b21a8 100%) !important; +} + +[data-sf-theme="blazing-dark"] .home-page-wrapper { + background: linear-gradient(160deg, #0a0f1e 0%, #111827 50%, #1e1b4b 100%); +} + +[data-sf-theme="blazing-dark"] .home-btn-primary { + background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%); +} + +[data-sf-theme="blazing-dark"] .home-feature-badge { + background: rgba(99, 102, 241, 0.12); + color: #a5b4fc; + border-color: rgba(99, 102, 241, 0.28); +} + +[data-sf-theme="blazing-dark"] .home-card { + background: rgba(15, 20, 40, 0.92) !important; + color: rgba(255, 255, 255, 0.85) !important; +} + +[data-sf-theme="blazing-dark"] .home-card .text-muted { + color: rgba(255, 255, 255, 0.55) !important; +} + +[data-sf-theme="blazing-dark"] .login-card { + background: rgba(15, 20, 40, 0.95) !important; + color: rgba(255, 255, 255, 0.85) !important; +} + +[data-sf-theme="blazing-dark"] .login-card .card-header { + background: linear-gradient(135deg, #0a0f1e 0%, #1e1b4b 100%) !important; +} + +[data-sf-theme="blazing-dark"] .login-card .card-body { + background: rgba(15, 20, 40, 0.95); +} + +[data-sf-theme="blazing-dark"] .login-card .card-footer { + background: rgba(15, 20, 40, 0.95) !important; + color: rgba(255, 255, 255, 0.45) !important; +} + +[data-sf-theme="blazing-dark"] .login-card .form-label { + color: rgba(255, 255, 255, 0.75); +} + +[data-sf-theme="blazing-dark"] .login-card .form-control, +[data-sf-theme="blazing-dark"] .login-card .input-group-text { + background: rgba(255, 255, 255, 0.06); + border-color: rgba(255, 255, 255, 0.12); + color: rgba(255, 255, 255, 0.85); +} + +[data-sf-theme="blazing-dark"] .login-card .btn-primary { + background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%) !important; + border-color: transparent !important; +} + +[data-sf-theme="blazing-dark"] .login-card .text-muted { + color: rgba(255, 255, 255, 0.50) !important; } \ No newline at end of file diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/envelope-viewer.css b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/envelope-viewer.css index 229583a8..f9172f2d 100644 --- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/envelope-viewer.css +++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/envelope-viewer.css @@ -1103,3 +1103,111 @@ body.resizing { padding: 1.5rem; } } + +/* ── Theme overrides: Envelope Viewer / Editor / Receiver ───────────────── */ +/* selector: [data-sf-theme=""] on , set by signflow-theme.js */ + +/* ── Purple ─────────────────────────────────────────────────────────────── */ +[data-sf-theme="purple"] .envelope-viewer-layout { + background: linear-gradient(135deg, #1a0533 0%, #3b0764 50%, #6b21a8 100%); +} + +[data-sf-theme="purple"] .envelope-action-bar { + border-bottom-color: rgba(147, 51, 234, 0.4); +} + +[data-sf-theme="purple"] .envelope-logo svg { + color: #9333ea; + filter: drop-shadow(0 2px 4px rgba(147, 51, 234, 0.35)); +} + +[data-sf-theme="purple"] .pdf-toolbar__btn { + border-color: rgba(147, 51, 234, 0.25); +} + +[data-sf-theme="purple"] .pdf-toolbar__btn:hover { + border-color: rgba(147, 51, 234, 0.5); + box-shadow: 0 2px 8px rgba(147, 51, 234, 0.2); +} + +[data-sf-theme="purple"] .pdf-text-layer ::selection, +[data-sf-theme="purple"] .pdf-text-layer ::-moz-selection { + background: rgba(147, 51, 234, 0.3); +} + +/* ── Blazing Dark ───────────────────────────────────────────────────────── */ +[data-sf-theme="blazing-dark"] .envelope-viewer-layout { + background: linear-gradient(135deg, #0a0f1e 0%, #111827 55%, #1e1b4b 100%); +} + +[data-sf-theme="blazing-dark"] .envelope-action-bar { + background: rgba(20, 20, 35, 0.92); + border-bottom-color: rgba(99, 102, 241, 0.35); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); +} + +[data-sf-theme="blazing-dark"] .envelope-title { + color: rgba(255, 255, 255, 0.92); +} + +[data-sf-theme="blazing-dark"] .envelope-key { + color: rgba(255, 255, 255, 0.45); +} + +[data-sf-theme="blazing-dark"] .envelope-logo svg { + color: #818cf8; + filter: drop-shadow(0 2px 4px rgba(129, 140, 248, 0.3)); +} + +[data-sf-theme="blazing-dark"] .pdf-toolbar__btn { + background: rgba(255, 255, 255, 0.06); + border-color: rgba(255, 255, 255, 0.12); + color: rgba(255, 255, 255, 0.82); +} + +[data-sf-theme="blazing-dark"] .pdf-toolbar__btn:hover { + background: rgba(129, 140, 248, 0.15); + border-color: rgba(129, 140, 248, 0.4); + color: #fff; +} + +[data-sf-theme="blazing-dark"] .pdf-toolbar__btn--signature-change-active { + background: rgba(99, 102, 241, 0.25); + border-color: rgba(99, 102, 241, 0.5); + color: #a5b4fc; +} + +/* Error container */ +[data-sf-theme="blazing-dark"] .error-container .alert-danger { + background: rgba(239, 68, 68, 0.12); + border-color: rgba(239, 68, 68, 0.3); + color: #fca5a5; +} + +/* Receiver info header */ +[data-sf-theme="blazing-dark"] .receiver-info-header__gradient { + background: linear-gradient(135deg, #0a0f1e 0%, #1e1b4b 100%); +} + +[data-sf-theme="blazing-dark"] .receiver-info-message { + color: rgba(255, 255, 255, 0.70); + border-bottom-color: rgba(255, 255, 255, 0.06); +} + +[data-sf-theme="blazing-dark"] .receiver-info-private-message { + background: rgba(245, 158, 11, 0.08); + border-top-color: rgba(245, 158, 11, 0.18); + color: #fde68a; +} + +/* Signature action bar */ +[data-sf-theme="blazing-dark"] .receiver-action-bar { + background: rgba(20, 20, 35, 0.92); + border-bottom-color: rgba(255, 255, 255, 0.06); +} + +/* PDF text selection */ +[data-sf-theme="blazing-dark"] .pdf-text-layer ::selection, +[data-sf-theme="blazing-dark"] .pdf-text-layer ::-moz-selection { + background: rgba(99, 102, 241, 0.35); +} diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/sender-page.css b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/sender-page.css index 9195af48..f76d26cf 100644 --- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/sender-page.css +++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/sender-page.css @@ -295,3 +295,146 @@ font-size: 0.813rem; } } + +/* ── Theme overrides ─────────────────────────────────────────────────────── */ +/* Selector: [data-sf-theme=""] set on by signflow-theme.js */ + +/* ── Purple theme ────────────────────────────────────────────────────────── + Deeper violet, less blue — visually distinct from Blazing Berry */ +[data-sf-theme="purple"] .sender-dashboard-layout { + background: linear-gradient(135deg, #1a0533 0%, #3b0764 50%, #6b21a8 100%); +} + +[data-sf-theme="purple"] .sender-grid-container::before { + background: linear-gradient(90deg, #9333ea 0%, #6b21a8 100%); +} + +[data-sf-theme="purple"] .sender-action-bar { + border-bottom-color: rgba(147, 51, 234, 0.4); +} + +[data-sf-theme="purple"] .sender-logo svg { + color: #9333ea; + filter: drop-shadow(0 2px 4px rgba(147, 51, 234, 0.35)); +} + +[data-sf-theme="purple"] .sender-btn--primary { + background: linear-gradient(135deg, #9333ea 0%, #6b21a8 100%); +} + +[data-sf-theme="purple"] .sender-btn--primary:hover:not(:disabled) { + background: linear-gradient(135deg, #7e22ce 0%, #581c87 100%); + box-shadow: 0 4px 16px rgba(147, 51, 234, 0.35); +} + +[data-sf-theme="purple"] .sender-btn:hover:not(:disabled) { + border-color: rgba(147, 51, 234, 0.45); + box-shadow: 0 4px 12px rgba(147, 51, 234, 0.22); +} + +[data-sf-theme="purple"] .sender-tabs { + border-bottom-color: rgba(147, 51, 234, 0.12); +} + +[data-sf-theme="purple"] .sender-tab--active { + color: #9333ea; + border-bottom-color: #9333ea; +} + +/* ── Blazing Dark theme ──────────────────────────────────────────────────── + Dark navy background, frosted glass surfaces turn semi-dark */ +[data-sf-theme="blazing-dark"] .sender-dashboard-layout { + background: linear-gradient(135deg, #0a0f1e 0%, #111827 55%, #1e1b4b 100%); +} + +[data-sf-theme="blazing-dark"] .sender-action-bar { + background: rgba(20, 20, 35, 0.92); + border-bottom-color: rgba(99, 102, 241, 0.35); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); +} + +[data-sf-theme="blazing-dark"] .sender-title { + color: rgba(255, 255, 255, 0.92); +} + +[data-sf-theme="blazing-dark"] .sender-logo svg { + color: #818cf8; + filter: drop-shadow(0 2px 4px rgba(129, 140, 248, 0.3)); +} + +[data-sf-theme="blazing-dark"] .sender-btn { + color: rgba(255, 255, 255, 0.82); + background: rgba(255, 255, 255, 0.06); + border-color: rgba(255, 255, 255, 0.12); +} + +[data-sf-theme="blazing-dark"] .sender-btn:hover:not(:disabled) { + background: rgba(129, 140, 248, 0.15); + border-color: rgba(129, 140, 248, 0.4); + color: #fff; + box-shadow: 0 4px 12px rgba(129, 140, 248, 0.2); +} + +[data-sf-theme="blazing-dark"] .sender-btn:disabled { + color: rgba(255, 255, 255, 0.25); + background: rgba(255, 255, 255, 0.03); + border-color: rgba(255, 255, 255, 0.06); +} + +[data-sf-theme="blazing-dark"] .sender-btn--primary { + background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%); + color: white; + border-color: transparent; +} + +[data-sf-theme="blazing-dark"] .sender-btn--primary:hover:not(:disabled) { + background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%); + box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4); +} + +[data-sf-theme="blazing-dark"] .sender-btn--danger { + background: rgba(239, 68, 68, 0.1); + border-color: rgba(239, 68, 68, 0.28); + color: #fca5a5; +} + +[data-sf-theme="blazing-dark"] .sender-btn--danger:hover:not(:disabled) { + background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); + color: white; + border-color: transparent; +} + +[data-sf-theme="blazing-dark"] .sender-grid-container { + background: rgba(15, 20, 40, 0.95); + box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06); +} + +[data-sf-theme="blazing-dark"] .sender-grid-container::before { + background: linear-gradient(90deg, #6366f1 0%, #4338ca 100%); +} + +[data-sf-theme="blazing-dark"] .sender-tabs { + background: rgba(255, 255, 255, 0.03); + border-bottom-color: rgba(99, 102, 241, 0.12); +} + +[data-sf-theme="blazing-dark"] .sender-tab { + color: rgba(255, 255, 255, 0.45); +} + +[data-sf-theme="blazing-dark"] .sender-tab--active { + color: #818cf8; + border-bottom-color: #818cf8; +} + +[data-sf-theme="blazing-dark"] .sender-tab:hover:not(.sender-tab--active) { + color: rgba(255, 255, 255, 0.72); + background: rgba(255, 255, 255, 0.04); +} + +/* Error container in dark mode */ +[data-sf-theme="blazing-dark"] .error-container .alert-danger { + background: rgba(239, 68, 68, 0.12); + border-color: rgba(239, 68, 68, 0.3); + color: #fca5a5; +}