Skip to content

Commit 52fc3c4

Browse files
ignaciogrosignaciogros
committed
CSS Variables. eXeViewer's now easier to customize.
1 parent 1b50f66 commit 52fc3c4

1 file changed

Lines changed: 72 additions & 52 deletions

File tree

‎css/styles.css‎

Lines changed: 72 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,42 @@
44

55
/* CSS Variables */
66
:root {
7-
--primary-color: #0d6efd;
8-
--primary-dark: #0b5ed7;
9-
--bg-light: #f8f9fa;
10-
--bg-dark: #212529;
11-
--text-muted: #6c757d;
12-
--border-color: #dee2e6;
13-
--shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
14-
--shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
7+
/* === Primary colors (eXeLearning branding) === */
8+
--primary-color: #0ba1a1; /* Primary: buttons, active icons, drop zone border */
9+
--primary-dark: #088b8b; /* Primary dark: hover and active states */
10+
--primary-rgb: 11, 161, 161; /* Primary RGB: for transparent backgrounds */
11+
--success-text: #0a7a5a; /* Success text: confirmation messages */
12+
--navbar-bg: #1a1d21; /* Top navbar background */
13+
--tooltip-bg: #34373B; /* Tooltip background */
14+
15+
/* === Interface colors === */
16+
--bg-light: #f8f9fa; /* Light background */
17+
--bg-dark: #212529; /* Dark background (headings, contrast) */
18+
--surface-color: #ffffff; /* Surface background: drop zone, viewer */
19+
--text-muted: #6c757d; /* Secondary text */
20+
--border-color: #a3d3d3; /* Borders with greenish tint */
21+
22+
/* === Shadows and effects === */
23+
--shadow-sm: 0 0.125rem 0.25rem rgba(var(--primary-rgb), 0.075); /* Subtle shadow */
24+
--shadow-md: 0 0.5rem 1rem rgba(var(--primary-rgb), 0.15); /* Medium shadow */
25+
--focus-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), 0.25); /* Accessible focus ring */
26+
27+
/* === Transitions === */
1528
--transition-fast: 0.15s ease-in-out;
1629
--transition-normal: 0.3s ease-in-out;
30+
31+
/* === Layout === */
1732
--navbar-height: 56px;
18-
/* eXeLearning colors */
19-
--primary-color: #0ba1a1; /* Main green */
20-
--primary-dark: #088b8b; /* Darker green for hover/active */
21-
--border-color: #a3d3d3; /* Soft greenish border instead of bluish */
22-
--shadow-sm: 0 0.125rem 0.25rem rgba(11, 161, 161, 0.075); /* subtle green shadow */
23-
--shadow-md: 0 0.5rem 1rem rgba(11, 161, 161, 0.15); /* medium green shadow */
33+
34+
/* === Dark mode colors (used in @media prefers-color-scheme: dark) === */
35+
--dark-bg-light: #1a1d21; /* Light background in dark mode */
36+
--dark-bg-surface: #212529; /* Surface background in dark mode */
37+
--dark-bg-modal: #2d3238; /* Modal background in dark mode */
38+
--dark-text-color: #e9ecef; /* Primary text in dark mode */
39+
--dark-text-muted: #adb5bd; /* Secondary text in dark mode */
40+
--dark-text-bright: #f8f9fa; /* Highlighted text in dark mode */
41+
--dark-border-color: #495057; /* Borders in dark mode */
42+
--dark-success-text: #5dd39e; /* Success text in dark mode (WCAG AA) */
2443
}
2544

2645

@@ -54,7 +73,7 @@ body {
5473

5574
/* Top Navbar Styles */
5675
#topNavbar {
57-
background: #1a1d21;
76+
background: var(--navbar-bg);
5877
z-index: 1030;
5978
box-shadow: var(--shadow-sm);
6079
}
@@ -135,19 +154,19 @@ body {
135154
border: 3px dashed var(--border-color);
136155
border-radius: 1rem;
137156
padding: 3rem 2rem;
138-
background-color: white;
157+
background-color: var(--surface-color);
139158
transition: all var(--transition-normal);
140159
cursor: pointer;
141160
}
142161

143162
.drop-zone:hover {
144163
border-color: var(--primary-color);
145-
background-color: rgba(13, 110, 253, 0.02);
164+
background-color: rgba(var(--primary-rgb), 0.02);
146165
}
147166

148167
.drop-zone.drag-over {
149168
border-color: var(--primary-color);
150-
background-color: rgba(13, 110, 253, 0.05);
169+
background-color: rgba(var(--primary-rgb), 0.05);
151170
transform: scale(1.02);
152171
box-shadow: var(--shadow-md);
153172
}
@@ -267,7 +286,7 @@ body {
267286
height: calc(100vh - var(--navbar-height));
268287
margin-top: var(--navbar-height);
269288
overflow: hidden;
270-
background-color: white;
289+
background-color: var(--surface-color);
271290
}
272291

273292
.content-frame {
@@ -303,34 +322,35 @@ body {
303322
/* Dark Mode Support (if user prefers) */
304323
@media (prefers-color-scheme: dark) {
305324
:root {
306-
--bg-light: #1a1d21;
307-
--bg-dark: #f8f9fa;
308-
--text-muted: #adb5bd;
309-
--border-color: #495057;
325+
--bg-light: var(--dark-bg-light);
326+
--bg-dark: var(--dark-text-bright);
327+
--text-muted: var(--dark-text-muted);
328+
--border-color: var(--dark-border-color);
329+
--surface-color: var(--dark-bg-surface);
310330
}
311331

312332
body {
313-
color: #e9ecef;
333+
color: var(--dark-text-color);
314334
}
315335

316336
.drop-zone {
317-
background-color: #212529;
337+
background-color: var(--dark-bg-surface);
318338
}
319339

320340
.drop-zone:hover {
321-
background-color: rgba(13, 110, 253, 0.1);
341+
background-color: rgba(var(--primary-rgb), 0.1);
322342
}
323343

324344
.drop-zone.drag-over {
325-
background-color: rgba(13, 110, 253, 0.15);
345+
background-color: rgba(var(--primary-rgb), 0.15);
326346
}
327347

328348
.welcome-content h1 {
329-
color: #f8f9fa;
349+
color: var(--dark-text-bright);
330350
}
331351

332352
.supported-formats a {
333-
color: #e9ecef;
353+
color: var(--dark-text-color);
334354
}
335355

336356
.supported-formats a:hover,
@@ -340,32 +360,32 @@ body {
340360

341361
/* Modal dark mode */
342362
.modal-content {
343-
background-color: #2d3238;
344-
border-color: #495057;
345-
color: #e9ecef;
363+
background-color: var(--dark-bg-modal);
364+
border-color: var(--dark-border-color);
365+
color: var(--dark-text-color);
346366
}
347367

348368
.modal-header {
349-
border-bottom-color: #495057;
350-
color: #f8f9fa;
369+
border-bottom-color: var(--dark-border-color);
370+
color: var(--dark-text-bright);
351371
}
352372

353373
.modal-header .btn-close {
354374
filter: invert(1) grayscale(100%) brightness(200%);
355375
}
356376

357377
.modal-body .form-control {
358-
background-color: #1a1d21;
359-
border-color: #495057;
360-
color: #e9ecef;
378+
background-color: var(--dark-bg-light);
379+
border-color: var(--dark-border-color);
380+
color: var(--dark-text-color);
361381
}
362382

363383
.modal-body .form-check-label {
364-
color: #e9ecef;
384+
color: var(--dark-text-color);
365385
}
366386

367387
.modal-body .text-muted {
368-
color: #adb5bd !important;
388+
color: var(--dark-text-muted) !important;
369389
}
370390
}
371391

@@ -423,7 +443,7 @@ body {
423443

424444
.form-check-input:focus {
425445
border-color: var(--primary-color);
426-
box-shadow: 0 0 0 0.25rem rgba(11, 161, 161, 0.25);
446+
box-shadow: var(--focus-shadow);
427447
}
428448

429449
.modal-body {
@@ -432,25 +452,25 @@ body {
432452

433453
/* Success text with good contrast in both modes */
434454
.alert-success-text {
435-
color: #0a7a5a; /* Darker green for better contrast on light backgrounds */
455+
color: var(--success-text);
436456
}
437457

438458
@media (prefers-color-scheme: dark) {
439459
.alert-success-text {
440-
color: #5dd39e; /* Lighter green for dark backgrounds - WCAG AA compliant */
460+
color: var(--dark-success-text);
441461
}
442462
}
443463

444464
/* Override Bootstrap tooltip colors */
445465
.tooltip {
446-
--bs-tooltip-bg: #34373B;
466+
--bs-tooltip-bg: var(--tooltip-bg);
447467
}
448468

449469
/* Fix arrow for bottom-placed tooltips */
450470
.bs-tooltip-bottom .tooltip-arrow::before {
451471
border-width: 0.4rem 0.4rem 0;
452472
border-bottom-color: transparent;
453-
border-top-color: #34373B;
473+
border-top-color: var(--tooltip-bg);
454474
}
455475

456476
/* Focus Styles */
@@ -531,26 +551,26 @@ input:focus,
531551
/* Dark Mode - Language Selector */
532552
@media (prefers-color-scheme: dark) {
533553
.language-selector-welcome .btn-outline-secondary {
534-
color: #adb5bd;
535-
border-color: #495057;
554+
color: var(--dark-text-muted);
555+
border-color: var(--dark-border-color);
536556
}
537557

538558
.language-selector-welcome .btn-outline-secondary:hover {
539559
color: #fff;
540-
background-color: #495057;
541-
border-color: #495057;
560+
background-color: var(--dark-border-color);
561+
border-color: var(--dark-border-color);
542562
}
543563

544564
.language-selector-welcome .dropdown-menu {
545-
background-color: #2d3238;
546-
border-color: #495057;
565+
background-color: var(--dark-bg-modal);
566+
border-color: var(--dark-border-color);
547567
}
548568

549569
.language-selector-welcome .dropdown-item {
550-
color: #e9ecef;
570+
color: var(--dark-text-color);
551571
}
552572

553573
.language-selector-welcome .dropdown-item:hover {
554-
background-color: #495057;
574+
background-color: var(--dark-border-color);
555575
}
556576
}

0 commit comments

Comments
 (0)