txeo/cv-site
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: Add CSS variable fallbacks for better browser compatibility

Browse Source 
Following LogRocket CSS best practices:
- Added fallback values to 150+ CSS variable usages across 22 files
- Fallbacks use light theme defaults for consistent behavior
- Improves compatibility with older browsers
- Example: var(--text-primary) → var(--text-primary, #1a1a1a)

Variables with fallbacks:
- Colors: text-primary, text-secondary, text-muted, accent-blue, etc.
- Backgrounds: page-bg, paper-bg, action-bar-bg, sidebar-bg
- Shadows: shadow-sm, shadow-md, shadow-lg
- Borders: border-color, border-light, icon-border

CSS Variables Best Practices compliance: 6/7 recommendations now followed
This commit is contained in:
juanatsap
2025-11-30 14:35:02 +00:00
parent 58c1237326
commit 0956c78d00
22 changed files with 152 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/01-foundation/_reset.css
+2 -2
View File
@@ -11,7 +11,7 @@
/* Body base */
body {
background-color: var(--page-bg);
background-color: var(--page-bg, #d6d6d6);
/* OLD PATTERN - Keep for reference (can be restored anytime) */
/* background-image:
@@ -22,7 +22,7 @@ body {
background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px; */
/* NEW TEST PATTERNS - Theme-specific (woven fabric for light, diagonal grid for dark) */
background-image: var(--page-bg-pattern);
background-image: var(--page-bg-pattern, none);
background-size: 40px 40px; /* For dark theme diagonal grid */
background-attachment: fixed;
max-width: 100vw; /* Prevent horizontal overflow */
static/css/01-foundation/_themes.css
+2 -2
View File
@@ -186,7 +186,7 @@
left: 2rem;
width: 50px;
height: 50px;
background: var(--black-bar);
background: var(--black-bar, #2b2b2b);
color: white;
border: none;
border-radius: 50%;
@@ -348,6 +348,6 @@
@media (prefers-color-scheme: light) {
[data-color-theme="auto"] img[src*="livgolf"] {
filter: none;
border-color: var(--icon-border) !important; /* Reset to normal border */
border-color: var(--icon-border, #ddd) !important; /* Reset to normal border */
}
}
static/css/01-foundation/_typography.css
+2 -2
View File
@@ -7,7 +7,7 @@
/* Base Typography */
body {
font-family: 'Quicksand', 'Source Sans Pro', -apple-system, system-ui, sans-serif;
color: var(--text-secondary);
color: var(--text-secondary, #333333);
line-height: 1.5;
font-size: 16px;
font-weight: 400;
@@ -18,7 +18,7 @@ body {
/* Links */
a {
color: var(--accent-blue);
color: var(--accent-blue, #0066cc);
text-decoration: none;
&:hover {
static/css/02-layout/_container.css
+1 -1
View File
@@ -22,7 +22,7 @@
transition: all 0.3s ease-in-out;
.cv-page {
box-shadow: var(--shadow-lg);
box-shadow: var(--shadow-lg, 2px 2px 9px rgba(0,0,0,0.5));
border: none;
margin: 0 auto;
max-width: 900px;
static/css/02-layout/_grid.css
+1 -1
View File
@@ -33,6 +33,6 @@
/* Main Content Area */
.cv-main {
background: var(--paper-bg);
background: var(--paper-bg, #ffffff);
padding: 3rem 2.5rem 8rem 2.5rem; /* Bottom padding for footer and zoom control clearance */
}
static/css/02-layout/_page.css
+2 -2
View File
@@ -1,8 +1,8 @@
.cv-page {
background: var(--paper-bg);
background: var(--paper-bg, #ffffff);
max-width: 1200px;
margin: 2rem auto;
box-shadow: var(--shadow-lg);
box-shadow: var(--shadow-lg, 2px 2px 9px rgba(0,0,0,0.5));
border: none;
transform: scale(0.95);
transform-origin: top center;
static/css/03-components/_action-bar.css
+3 -3
View File
@@ -1,11 +1,11 @@
/* Single Black Top Bar */
.action-bar {
background: var(--action-bar-bg);
color: var(--action-bar-text);
background: var(--action-bar-bg, #2b2b2b);
color: var(--action-bar-text, #ffffff);
position: sticky;
top: 0;
z-index: 100;
box-shadow: var(--shadow-md);
box-shadow: var(--shadow-md, 0 2px 8px rgba(0,0,0,0.15));
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
overflow: visible; /* Allow tooltips to extend beyond action bar */
}
static/css/03-components/_courses.css
+8 -8
View File
@@ -24,7 +24,7 @@
height: 80px;
object-fit: contain;
border-radius: 4px;
border: 1px solid var(--icon-border);
border: 1px solid var(--icon-border, #ddd);
background: transparent;
padding: 4px;
}
@@ -36,9 +36,9 @@
align-items: center;
justify-content: center;
border-radius: 4px;
border: 1px solid var(--icon-border);
border: 1px solid var(--icon-border, #ddd);
background: transparent;
color: var(--text-light);
color: var(--text-light, #999999);
padding: 10px;
}
@@ -55,7 +55,7 @@
font-weight: 600;
margin: 0 0 0.3rem 0;
line-height: 1.4;
color: var(--text-dark);
color: var(--text-dark, #1a1a1a);
}
.course-title-text {
@@ -72,17 +72,17 @@
.course-separator,
.course-location,
.course-duration {
color: var(--text-muted);
color: var(--text-muted, #666666);
font-size: 0.9em;
}
.course-separator {
color: var(--text-light);
color: var(--text-light, #999999);
}
.course-desc {
font-size: 0.85em;
color: var(--text-gray);
color: var(--text-gray, #333333);
margin-top: 0.4rem;
line-height: 1.4;
text-align: justify;
@@ -97,7 +97,7 @@
align-items: center;
justify-content: center;
border-radius: 4px;
border: 1px solid var(--icon-border);
border: 1px solid var(--icon-border, #ddd);
background: transparent !important;
padding: 8px;
}
static/css/03-components/_cv-header.css
+4 -4
View File
@@ -44,7 +44,7 @@
/* font-style: italic; */
line-height: 1.1;
margin-bottom: 8px;
color: var(--text-primary);
color: var(--text-primary, #1a1a1a);
text-align: right;
}
@@ -53,7 +53,7 @@
font-size: 0.9em;
font-weight: 500;
line-height: 1.5;
color: var(--text-primary);
color: var(--text-primary, #1a1a1a);
margin: 0;
}
@@ -61,7 +61,7 @@
font-family: 'Quicksand', sans-serif;
font-size: 1.25em;
font-weight: 400;
color: var(--text-muted);
color: var(--text-muted, #666666);
margin: 4px 0 0 0;
line-height: 1.4;
text-align: right;
@@ -72,7 +72,7 @@
font-family: 'Quicksand', sans-serif;
font-size: 1.0em;
line-height: 1.6;
color: var(--text-secondary);
color: var(--text-secondary, #333333);
margin-top: 20px;
text-align: justify;
font-style: italic;
static/css/03-components/_cv-section.css
+15 -15
View File
@@ -16,7 +16,7 @@
line-height: 1.2em;
margin: 20px 0 25px 0;
padding: 0;
color: var(--text-primary);
color: var(--text-primary, #1a1a1a);
}
/* Collapsible Section Styles */
@@ -63,7 +63,7 @@
.cv-section summary .section-title::after {
content: '▼';
font-size: 0.8em;
color: var(--text-muted);
color: var(--text-muted, #666666);
transition: transform 0.2s ease, opacity 0.2s ease;
opacity: 0;
margin-left: 0.5rem;
@@ -82,7 +82,7 @@
/* Hover effect on summary */
.cv-section summary:hover .section-title {
color: var(--accent-blue);
color: var(--accent-blue, #0066cc);
}
.summary-text {
@@ -91,7 +91,7 @@
text-align: justify;
font-size: 0.9em;
font-weight: 400;
color: var(--text-primary);
color: var(--text-primary, #1a1a1a);
}
/* Experience */
@@ -109,7 +109,7 @@
font-size: 1rem;
font-weight: 500;
margin: 0;
color: var(--text-dark);
color: var(--text-dark, #1a1a1a);
margin-bottom: 4px;
}
@@ -184,7 +184,7 @@
.experience-separator,
.experience-location,
.experience-duration {
color: var(--text-muted);
color: var(--text-muted, #666666);
font-weight: 600;
display: inline-block;
font-size: 1.05rem;
@@ -195,14 +195,14 @@
}
.short-desc {
color: var(--text-dark);
color: var(--text-dark, #1a1a1a);
font-size: 0.95rem;
line-height: 1.6;
margin-top: 0.5rem;
}
.duration-text {
color: var(--text-light);
color: var(--text-light, #999999);
font-weight: 500;
}
@@ -217,7 +217,7 @@
margin-bottom: 0.4rem;
position: relative;
font-size: 0.95rem;
color: var(--text-dark);
color: var(--text-dark, #1a1a1a);
line-height: 1.5;
}
@@ -225,7 +225,7 @@
content: "•";
position: absolute;
left: 0;
color: var(--text-gray);
color: var(--text-gray, #333333);
}
/* Responsibilities with company icons (similar to main experience layout) */
@@ -249,7 +249,7 @@
height: 60px;
object-fit: contain;
border-radius: 4px;
border: 1px solid var(--icon-border);
border: 1px solid var(--icon-border, #ddd);
background: transparent;
padding: 4px;
}
@@ -261,9 +261,9 @@
align-items: center;
justify-content: center;
border-radius: 4px;
border: 1px solid var(--icon-border);
border: 1px solid var(--icon-border, #ddd);
background: transparent;
color: var(--text-light);
color: var(--text-light, #999999);
padding: 8px;
}
@@ -288,7 +288,7 @@
margin-bottom: 1rem;
font-size: 0.95rem;
line-height: 1.6;
color: var(--text-dark);
color: var(--text-dark, #1a1a1a);
}
@@ -301,7 +301,7 @@
.language-item {
font-size: 0.95rem!important;
color: var(--text-dark);
color: var(--text-dark, #1a1a1a);
margin-bottom: 0.3rem!important;
line-height: 1.4!important;
margin-left: 2rem!important;
static/css/03-components/_education.css
+2 -2
View File
@@ -3,7 +3,7 @@
margin-bottom: 1rem;
font-size: 0.95rem;
line-height: 1.6;
color: var(--text-dark);
color: var(--text-dark, #1a1a1a);
}
@@ -16,7 +16,7 @@
.language-item {
font-size: 0.95rem!important;
color: var(--text-dark);
color: var(--text-dark, #1a1a1a);
margin-bottom: 0.3rem!important;
line-height: 1.4!important;
margin-left: 2rem!important;
static/css/03-components/_experience.css
+37 -37
View File
@@ -13,7 +13,7 @@
font-size: 1rem;
font-weight: 500;
margin: 0;
color: var(--text-dark);
color: var(--text-dark, #1a1a1a);
margin-bottom: 4px;
}
@@ -88,7 +88,7 @@
.experience-separator,
.experience-location,
.experience-duration {
color: var(--text-muted);
color: var(--text-muted, #666666);
font-weight: 600;
display: inline-block;
font-size: 1.05rem;
@@ -99,14 +99,14 @@
}
.short-desc {
color: var(--text-dark);
color: var(--text-dark, #1a1a1a);
font-size: 0.95rem;
line-height: 1.6;
margin-top: 0.5rem;
}
.duration-text {
color: var(--text-light);
color: var(--text-light, #999999);
font-weight: 500;
}
@@ -121,7 +121,7 @@
margin-bottom: 0.4rem;
position: relative;
font-size: 0.95rem;
color: var(--text-dark);
color: var(--text-dark, #1a1a1a);
line-height: 1.5;
}
@@ -129,7 +129,7 @@
content: "•";
position: absolute;
left: 0;
color: var(--text-gray);
color: var(--text-gray, #333333);
}
/* Responsibilities with company icons (similar to main experience layout) */
@@ -153,7 +153,7 @@
height: 60px;
object-fit: contain;
border-radius: 4px;
border: 1px solid var(--icon-border);
border: 1px solid var(--icon-border, #ddd);
background: transparent;
padding: 4px;
}
@@ -165,9 +165,9 @@
align-items: center;
justify-content: center;
border-radius: 4px;
border: 1px solid var(--icon-border);
border: 1px solid var(--icon-border, #ddd);
background: transparent;
color: var(--text-light);
color: var(--text-light, #999999);
padding: 8px;
}
@@ -176,7 +176,7 @@
margin-bottom: 1rem;
font-size: 0.95rem;
line-height: 1.6;
color: var(--text-dark);
color: var(--text-dark, #1a1a1a);
}
@@ -189,7 +189,7 @@
.language-item {
font-size: 0.95rem!important;
color: var(--text-dark);
color: var(--text-dark, #1a1a1a);
margin-bottom: 0.3rem!important;
line-height: 1.4!important;
margin-left: 2rem!important;
@@ -206,7 +206,7 @@
.experience-item {
margin-bottom: 2.5rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--item-separator);
border-bottom: 1px solid var(--item-separator, rgba(0,0,0,0.1));
}
/* Keep border on all experience items including last one */
@@ -218,7 +218,7 @@
align-items: flex-start;
margin-bottom: 2.5rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--item-separator);
border-bottom: 1px solid var(--item-separator, rgba(0,0,0,0.1));
}
/* Keep border on all course items including last one */
@@ -237,7 +237,7 @@
height: 80px;
object-fit: contain;
border-radius: 4px;
border: 1px solid var(--icon-border);
border: 1px solid var(--icon-border, #ddd);
background: transparent;
padding: 4px;
}
@@ -249,9 +249,9 @@
align-items: center;
justify-content: center;
border-radius: 4px;
border: 1px solid var(--icon-border);
border: 1px solid var(--icon-border, #ddd);
background: transparent;
color: var(--text-light);
color: var(--text-light, #999999);
padding: 10px;
}
@@ -268,7 +268,7 @@
font-weight: 600;
margin: 0 0 0.3rem 0;
line-height: 1.4;
color: var(--text-dark);
color: var(--text-dark, #1a1a1a);
}
.course-title-text {
@@ -285,17 +285,17 @@
.course-separator,
.course-location,
.course-duration {
color: var(--text-muted);
color: var(--text-muted, #666666);
font-size: 0.9em;
}
.course-separator {
color: var(--text-light);
color: var(--text-light, #999999);
}
.course-desc {
font-size: 0.85em;
color: var(--text-gray);
color: var(--text-gray, #333333);
margin-top: 0.4rem;
line-height: 1.4;
text-align: justify;
@@ -308,7 +308,7 @@
align-items: flex-start;
margin-bottom: 2.5rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--item-separator);
border-bottom: 1px solid var(--item-separator, rgba(0,0,0,0.1));
}
.project-icon {
@@ -325,7 +325,7 @@
height: 80px;
object-fit: contain;
border-radius: 4px;
border: 1px solid var(--icon-border);
border: 1px solid var(--icon-border, #ddd);
background: transparent;
padding: 4px;
}
@@ -337,9 +337,9 @@
align-items: center;
justify-content: center;
border-radius: 4px;
border: 1px solid var(--icon-border);
border: 1px solid var(--icon-border, #ddd);
background: transparent;
color: var(--text-light);
color: var(--text-light, #999999);
padding: 10px;
}
@@ -356,7 +356,7 @@
font-weight: 600;
margin: 0 0 0.3rem 0;
line-height: 1.4;
color: var(--text-dark);
color: var(--text-dark, #1a1a1a);
}
.project-title-text {
@@ -364,7 +364,7 @@
}
.project-title-text a {
color: var(--accent-blue);
color: var(--accent-blue, #0066cc);
text-decoration: none;
}
@@ -375,18 +375,18 @@
.project-period,
.project-separator,
.project-location {
color: var(--text-muted);
color: var(--text-muted, #666666);
font-size: 0.9em;
font-weight: 600;
}
.project-separator {
color: var(--text-light);
color: var(--text-light, #999999);
}
.project-desc {
font-size: 0.95rem;
color: var(--text-dark);
color: var(--text-dark, #1a1a1a);
margin-top: 0.5rem;
line-height: 1.6;
text-align: justify;
@@ -394,7 +394,7 @@
.project-technologies {
font-size: 0.85em;
color: var(--text-gray);
color: var(--text-gray, #333333);
margin-top: 0.5rem;
line-height: 1.4;
}
@@ -404,7 +404,7 @@
padding-top: 0rem;
text-align: center;
font-size: 0.95rem;
color: var(--text-gray);
color: var(--text-gray, #333333);
}
.projects-footer p {
@@ -412,7 +412,7 @@
}
.projects-footer a {
color: var(--accent-blue);
color: var(--accent-blue, #0066cc);
text-decoration: none;
}
@@ -430,7 +430,7 @@
.reference-item a {
color: var(--accent-blue);
color: var(--accent-blue, #0066cc);
text-decoration: none;
word-break: break-word;
}
@@ -442,7 +442,7 @@
.ref-type {
display: block;
font-size: 0.8em;
color: var(--text-gray);
color: var(--text-gray, #333333);
font-style: italic;
margin-top: 0.2rem;
}
@@ -451,18 +451,18 @@
footer {
text-align: center;
padding: 2rem;
color: var(--text-muted); /* Theme-aware color (light: #666666, dark: #b0b0b0) */
color: var(--text-muted, #666666); /* Theme-aware color (light: #666666, dark: #b0b0b0) */
font-size: 0.85rem;
}
/* GitHub repository link styling */
.github-repo-link {
color: var(--text-secondary) !important; /* Theme-aware link color */
color: var(--text-secondary, #333333) !important; /* Theme-aware link color */
transition: color 0.2s ease-in-out;
}
.github-repo-link:hover {
color: var(--accent-blue) !important;
color: var(--accent-blue, #0066cc) !important;
}
static/css/03-components/_languages.css
+1 -1
View File
@@ -7,7 +7,7 @@
.language-item {
font-size: 0.95rem!important;
color: var(--text-dark);
color: var(--text-dark, #1a1a1a);
margin-bottom: 0.3rem!important;
line-height: 1.4!important;
margin-left: 2rem!important;
static/css/03-components/_projects.css
+14 -14
View File
@@ -22,7 +22,7 @@
height: 80px;
object-fit: contain;
border-radius: 4px;
border: 1px solid var(--icon-border);
border: 1px solid var(--icon-border, #ddd);
background: transparent;
padding: 4px;
}
@@ -34,9 +34,9 @@
align-items: center;
justify-content: center;
border-radius: 4px;
border: 1px solid var(--icon-border);
border: 1px solid var(--icon-border, #ddd);
background: transparent;
color: var(--text-light);
color: var(--text-light, #999999);
padding: 10px;
}
@@ -53,7 +53,7 @@
font-weight: 600;
margin: 0 0 0.3rem 0;
line-height: 1.4;
color: var(--text-dark);
color: var(--text-dark, #1a1a1a);
}
.project-title-text {
@@ -61,7 +61,7 @@
}
.project-title-text a {
color: var(--accent-blue);
color: var(--accent-blue, #0066cc);
text-decoration: none;
}
@@ -72,18 +72,18 @@
.project-period,
.project-separator,
.project-location {
color: var(--text-muted);
color: var(--text-muted, #666666);
font-size: 0.9em;
font-weight: 600;
}
.project-separator {
color: var(--text-light);
color: var(--text-light, #999999);
}
.project-desc {
font-size: 0.95rem;
color: var(--text-dark);
color: var(--text-dark, #1a1a1a);
margin-top: 0.5rem;
line-height: 1.6;
text-align: justify;
@@ -91,7 +91,7 @@
.project-technologies {
font-size: 0.85em;
color: var(--text-gray);
color: var(--text-gray, #333333);
margin-top: 0.5rem;
line-height: 1.4;
}
@@ -101,7 +101,7 @@
padding-top: 0rem;
text-align: center;
font-size: 0.95rem;
color: var(--text-gray);
color: var(--text-gray, #333333);
}
.projects-footer p {
@@ -109,7 +109,7 @@
}
.projects-footer a {
color: var(--accent-blue);
color: var(--accent-blue, #0066cc);
text-decoration: none;
}
@@ -127,7 +127,7 @@
.reference-item a {
color: var(--accent-blue);
color: var(--accent-blue, #0066cc);
text-decoration: none;
word-break: break-word;
}
@@ -139,7 +139,7 @@
.ref-type {
display: block;
font-size: 0.8em;
color: var(--text-gray);
color: var(--text-gray, #333333);
font-style: italic;
margin-top: 0.2rem;
}
@@ -236,7 +236,7 @@ footer {
align-items: center;
justify-content: center;
border-radius: 4px;
border: 1px solid var(--icon-border);
border: 1px solid var(--icon-border, #ddd);
background: transparent !important;
padding: 8px;
}
static/css/03-components/_sidebar.css
+7 -7
View File
@@ -4,7 +4,7 @@
/* Sidebar - Left/Right columns */
.cv-sidebar {
background: var(--sidebar-bg);
background: var(--sidebar-bg, #d1d4d2);
padding: 4rem 1.5rem;
font-size: 0.9rem;
}
@@ -68,7 +68,7 @@
}
&:hover .sidebar-title {
color: var(--accent-blue);
color: var(--accent-blue, #0066cc);
}
&:hover::after,
@@ -85,7 +85,7 @@
line-height: 1.3em;
margin-bottom: 10px;
padding: 0;
color: var(--text-primary);
color: var(--text-primary, #1a1a1a);
text-align: left;
}
@@ -94,12 +94,12 @@
font-size: 0.95rem;
font-weight: 400;
line-height: 1.5;
color: var(--text-primary);
color: var(--text-primary, #1a1a1a);
}
.skill-item {
margin-bottom: 0.15rem;
color: var(--text-primary);
color: var(--text-primary, #1a1a1a);
font-weight: 400;
}
@@ -108,7 +108,7 @@
.sidebar-section summary::after {
content: '▶';
font-size: 0.8em;
color: var(--text-muted);
color: var(--text-muted, #666666);
transition: transform 0.2s ease, opacity 0.2s ease;
opacity: 0;
margin-left: 15px;
@@ -139,7 +139,7 @@
&::after {
content: '▶';
font-size: 0.8em;
color: var(--text-muted);
color: var(--text-muted, #666666);
transition: transform 0.2s ease, opacity 0.2s ease;
opacity: 0;
margin-right: 15px;
static/css/04-interactive/_buttons.css
+5 -5
View File
@@ -11,7 +11,7 @@
left: 2rem;
width: 50px;
height: 50px;
background: var(--black-bar); /* Dark by default like other buttons */
background: var(--black-bar, #2b2b2b); /* Dark by default like other buttons */
color: white;
border: none;
border-radius: 50%;
@@ -45,7 +45,7 @@
left: 2rem; /* LEFT SIDE instead of right */
width: 50px;
height: 50px;
background: var(--black-bar);
background: var(--black-bar, #2b2b2b);
color: white;
border: none;
border-radius: 50%;
@@ -82,7 +82,7 @@
left: 2rem;
width: 50px;
height: 50px;
background: var(--black-bar); /* Dark background by default */
background: var(--black-bar, #2b2b2b); /* Dark background by default */
color: white; /* White icon by default */
border: none;
border-radius: 50%;
@@ -131,7 +131,7 @@
left: 2rem;
width: 50px;
height: 50px;
background: var(--black-bar);
background: var(--black-bar, #2b2b2b);
color: white;
border: none;
border-radius: 50%;
@@ -146,7 +146,7 @@
}
.download-btn {
background: var(--black-bar); /* Gray by default like other buttons */
background: var(--black-bar, #2b2b2b); /* Gray by default like other buttons */
opacity: 0.6; /* Match other buttons */
}
static/css/04-interactive/_contact-form.css
+1 -1
View File
@@ -263,7 +263,7 @@
left: 2rem;
width: 50px;
height: 50px;
background: var(--black-bar);
background: var(--black-bar, #2b2b2b);
color: white;
border: none;
border-radius: 50%;
static/css/04-interactive/_hamburger.css
+16 -16
View File
@@ -62,7 +62,7 @@
align-items: center;
gap: 1rem;
padding: 0.875rem 1.5rem;
color: var(--text-dark);
color: var(--text-dark, #1a1a1a);
text-decoration: none;
transition: background-color 0.2s ease, color 0.2s ease;
font-size: 0.95rem;
@@ -72,19 +72,19 @@
.menu-item:hover {
background-color: rgba(0, 102, 204, 0.08);
color: var(--accent-blue);
border-left-color: var(--accent-blue);
color: var(--accent-blue, #0066cc);
border-left-color: var(--accent-blue, #0066cc);
text-decoration: none;
}
.menu-item iconify-icon {
color: var(--text-gray);
color: var(--text-gray, #333333);
flex-shrink: 0;
transition: color 0.2s ease;
}
.menu-item:hover iconify-icon {
color: var(--accent-blue);
color: var(--accent-blue, #0066cc);
}
/* Menu item action controls (Expand All, Collapse All) */
@@ -195,7 +195,7 @@
align-items: center;
gap: 1rem;
padding: 0.875rem 0 0.875rem 0;
color: var(--text-dark);
color: var(--text-dark, #1a1a1a);
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
@@ -206,17 +206,17 @@
/* Disable hover effect for headers */
.menu-item-header:hover {
background-color: transparent !important;
color: var(--text-dark) !important;
color: var(--text-dark, #1a1a1a) !important;
border-left-color: transparent !important;
}
.menu-item-header iconify-icon {
color: var(--text-gray);
color: var(--text-gray, #333333);
flex-shrink: 0;
}
.menu-item-header:hover iconify-icon {
color: var(--text-gray) !important;
color: var(--text-gray, #333333) !important;
}
.menu-item-header span {
@@ -234,13 +234,13 @@
display: flex;
align-items: center;
gap: 0.75rem;
color: var(--text-dark);
color: var(--text-dark, #1a1a1a);
font-size: 0.9rem;
font-weight: 500;
}
.menu-control-label iconify-icon {
color: var(--text-gray);
color: var(--text-gray, #333333);
}
.menu-action-btn {
@@ -253,7 +253,7 @@
background: rgba(0, 0, 0, 0.03);
border: none;
border-radius: 8px;
color: var(--text-dark);
color: var(--text-dark, #1a1a1a);
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
@@ -264,18 +264,18 @@
.menu-action-btn:hover {
background: rgba(0, 102, 204, 0.08);
color: var(--accent-blue);
color: var(--accent-blue, #0066cc);
text-decoration: none;
}
.menu-action-btn iconify-icon {
color: var(--text-gray);
color: var(--text-gray, #333333);
flex-shrink: 0;
transition: color 0.2s ease;
}
.menu-action-btn:hover iconify-icon {
color: var(--accent-blue);
color: var(--accent-blue, #0066cc);
}
/* PDF button in menu - White bg with red icon on hover */
@@ -384,7 +384,7 @@ html {
right: 2rem;
width: 50px;
height: 50px;
background: var(--black-bar);
background: var(--black-bar, #2b2b2b);
color: white;
border: none;
border-radius: 50%;
static/css/04-interactive/_modals.css
+8 -8
View File
@@ -78,7 +78,7 @@
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--text-primary);
color: var(--text-primary, #1a1a1a);
transition: all 0.2s ease;
z-index: 10;
}
@@ -96,7 +96,7 @@
.info-modal-header h2 {
font-size: 1.5rem;
font-weight: 600;
color: var(--text-primary);
color: var(--text-primary, #1a1a1a);
margin: 0 0 1.5rem 0;
}
@@ -511,7 +511,7 @@
.shortcut-desc {
flex: 1;
font-size: 0.95rem;
color: var(--text-gray);
color: var(--text-gray, #333333);
line-height: 1.4;
}
@@ -573,7 +573,7 @@
/* Modal Subtitle */
.pdf-modal-subtitle {
font-size: 0.95rem;
color: var(--text-gray);
color: var(--text-gray, #333333);
margin-top: 0.5rem;
font-weight: 400;
}
@@ -744,13 +744,13 @@
.pdf-option-info h3 {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-dark);
color: var(--text-dark, #1a1a1a);
margin: 0 0 4px 0;
}
.pdf-option-info p {
font-size: 0.875rem;
color: var(--text-gray);
color: var(--text-gray, #333333);
margin: 0;
line-height: 1.4;
}
@@ -1106,13 +1106,13 @@
.pdf-loading-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--text-primary);
color: var(--text-primary, #1a1a1a);
margin: 0 0 0.5rem 0;
}
.pdf-loading-message {
font-size: 0.95rem;
color: var(--text-gray);
color: var(--text-gray, #333333);
margin: 0 0 0.5rem 0;
line-height: 1.5;
}
static/css/04-interactive/_navigation.css
+15 -15
View File
@@ -62,7 +62,7 @@
align-items: center;
gap: 1rem;
padding: 0.875rem 1.5rem;
color: var(--text-dark);
color: var(--text-dark, #1a1a1a);
text-decoration: none;
transition: background-color 0.2s ease, color 0.2s ease;
font-size: 0.95rem;
@@ -72,19 +72,19 @@
.menu-item:hover {
background-color: rgba(0, 102, 204, 0.08);
color: var(--accent-blue);
border-left-color: var(--accent-blue);
color: var(--accent-blue, #0066cc);
border-left-color: var(--accent-blue, #0066cc);
text-decoration: none;
}
.menu-item iconify-icon {
color: var(--text-gray);
color: var(--text-gray, #333333);
flex-shrink: 0;
transition: color 0.2s ease;
}
.menu-item:hover iconify-icon {
color: var(--accent-blue);
color: var(--accent-blue, #0066cc);
}
/* Menu item action controls (Expand All, Collapse All) */
@@ -195,7 +195,7 @@
align-items: center;
gap: 1rem;
padding: 0.875rem 0 0.875rem 0;
color: var(--text-dark);
color: var(--text-dark, #1a1a1a);
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
@@ -206,17 +206,17 @@
/* Disable hover effect for headers */
.menu-item-header:hover {
background-color: transparent !important;
color: var(--text-dark) !important;
color: var(--text-dark, #1a1a1a) !important;
border-left-color: transparent !important;
}
.menu-item-header iconify-icon {
color: var(--text-gray);
color: var(--text-gray, #333333);
flex-shrink: 0;
}
.menu-item-header:hover iconify-icon {
color: var(--text-gray) !important;
color: var(--text-gray, #333333) !important;
}
.menu-item-header span {
@@ -234,13 +234,13 @@
display: flex;
align-items: center;
gap: 0.75rem;
color: var(--text-dark);
color: var(--text-dark, #1a1a1a);
font-size: 0.9rem;
font-weight: 500;
}
.menu-control-label iconify-icon {
color: var(--text-gray);
color: var(--text-gray, #333333);
}
.menu-action-btn {
@@ -253,7 +253,7 @@
background: rgba(0, 0, 0, 0.03);
border: none;
border-radius: 8px;
color: var(--text-dark);
color: var(--text-dark, #1a1a1a);
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
@@ -264,18 +264,18 @@
.menu-action-btn:hover {
background: rgba(0, 102, 204, 0.08);
color: var(--accent-blue);
color: var(--accent-blue, #0066cc);
text-decoration: none;
}
.menu-action-btn iconify-icon {
color: var(--text-gray);
color: var(--text-gray, #333333);
flex-shrink: 0;
transition: color 0.2s ease;
}
.menu-action-btn:hover iconify-icon {
color: var(--accent-blue);
color: var(--accent-blue, #0066cc);
}
/* PDF button in menu - White bg with red icon on hover */
static/css/04-interactive/_scroll-behavior.css
+2 -2
View File
@@ -27,7 +27,7 @@
right: 2rem;
width: 50px;
height: 50px;
background: var(--black-bar);
background: var(--black-bar, #2b2b2b);
color: white;
border: none;
border-radius: 50%;
@@ -78,7 +78,7 @@
left: 2rem;
width: 50px;
height: 50px;
background: var(--black-bar); /* Dark by default like other buttons */
background: var(--black-bar, #2b2b2b); /* Dark by default like other buttons */
color: white;
border: none;
border-radius: 50%;
static/css/04-interactive/_toggles.css
+4 -4
View File
@@ -47,7 +47,7 @@
}
.toggle-switch input[type="checkbox"]:checked + .toggle-slider {
background-color: var(--accent-blue);
background-color: var(--accent-blue, #0066cc);
}
.toggle-switch input[type="checkbox"]:checked + .toggle-slider::after {
@@ -113,7 +113,7 @@
.award-item {
margin-bottom: 2.5rem;
padding-bottom: 2rem;
border-bottom: 2px solid var(--icon-border);
border-bottom: 2px solid var(--icon-border, #ddd);
page-break-inside: avoid;
display: flex;
gap: 1.2rem;
@@ -149,7 +149,7 @@
height: 80px;
object-fit: contain;
border-radius: 4px;
border: 1px solid var(--icon-border);
border: 1px solid var(--icon-border, #ddd);
background: transparent;
padding: 10px;
}
@@ -164,7 +164,7 @@
align-items: center;
justify-content: center;
border-radius: 4px;
border: 1px solid var(--icon-border);
border: 1px solid var(--icon-border, #ddd);
background: transparent;
color: #999;
padding: 10px;