diff --git a/blocks/browse-catalog/browse-catalog.css b/blocks/browse-catalog/browse-catalog.css
index 753d794..e0aab3e 100644
--- a/blocks/browse-catalog/browse-catalog.css
+++ b/blocks/browse-catalog/browse-catalog.css
@@ -1,19 +1,19 @@
.browse-catalog {
- padding: 40px 0;
- background-color: #f8f9fa;
+ padding: var(--spacing-4xl) 0;
+ background-color: var(--color-background-light);
}
.browse-catalog .catalog-header {
display: flex;
justify-content: space-between;
align-items: center;
- margin-bottom: 30px;
- padding: 0 20px;
+ margin-bottom: var(--spacing-8);
+ padding: 0 var(--spacing-xl);
}
.browse-catalog .catalog-title {
font-size: var(--heading-font-size-xl);
- font-weight: 600;
+ font-weight: var(--font-weight-semibold);
color: var(--text-color);
margin: 0;
}
@@ -25,38 +25,38 @@
}
.browse-catalog .search-input {
- padding: 10px 15px;
- border: 1px solid #ddd;
- border-radius: 5px;
- font-size: 16px;
+ padding: var(--spacing-4) var(--spacing-4);
+ border: var(--border-width-thin) solid var(--color-border-dark);
+ border-radius: var(--radius-input);
+ font-size: var(--font-size-sm);
width: 300px;
}
.browse-catalog .filters-toggle {
- border: 1px solid #ddd;
- padding: 10px 15px;
- border-radius: 5px;
+ border: var(--border-width-thin) solid var(--color-border-dark);
+ padding: var(--spacing-4) var(--spacing-4);
+ border-radius: var(--radius-input);
cursor: pointer;
display: flex;
align-items: center;
- gap: 5px;
+ gap: var(--spacing-1);
}
.browse-catalog .catalog-content {
display: flex;
- gap: 20px;
- max-width: 1400px;
+ gap: var(--spacing-xl);
+ max-width: var(--container-2xl);
margin: 0 auto;
- padding: 0 20px;
+ padding: 0 var(--spacing-xl);
}
.browse-catalog .catalog-sidebar {
width: 280px;
- background: white;
- border-radius: 8px;
- padding: 20px;
+ background: var(--color-background);
+ border-radius: var(--radius-card);
+ padding: var(--spacing-xl);
height: fit-content;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ box-shadow: var(--shadow-md);
}
.browse-catalog .sidebar-section {
@@ -64,32 +64,32 @@
}
.browse-catalog .sidebar-section h3 {
- font-size: 18px;
- font-weight: 600;
- margin-bottom: 15px;
+ font-size: var(--font-size-lg);
+ font-weight: var(--font-weight-semibold);
+ margin-bottom: var(--spacing-4);
color: var(--text-color);
}
.browse-catalog .filter-group {
display: flex;
flex-direction: column;
- gap: 8px;
+ gap: var(--spacing-sm);
}
.browse-catalog .filter-item {
display: flex;
align-items: center;
- gap: 8px;
+ gap: var(--spacing-sm);
}
.browse-catalog .filter-item input[type="checkbox"] {
- width: 16px;
- height: 16px;
+ width: var(--spacing-lg);
+ height: var(--spacing-lg);
}
.browse-catalog .filter-item label {
- font-size: 14px;
- color: #666;
+ font-size: var(--font-size-sm);
+ color: var(--color-text-secondary);
cursor: pointer;
}
@@ -98,37 +98,37 @@
.browse-catalog #skills-filter-group {
max-height: 200px; /* Approximately 7 items at ~28px each */
overflow-y: auto;
- padding-right: 8px;
+ padding-right: var(--spacing-sm);
}
/* Custom scrollbar styling */
.browse-catalog #tags-filter-group::-webkit-scrollbar,
.browse-catalog #skills-filter-group::-webkit-scrollbar {
- width: 6px;
+ width: var(--spacing-2);
}
.browse-catalog #tags-filter-group::-webkit-scrollbar-track,
.browse-catalog #skills-filter-group::-webkit-scrollbar-track {
- background: #f1f1f1;
+ background: var(--color-neutral-100);
border-radius: 3px;
}
.browse-catalog #tags-filter-group::-webkit-scrollbar-thumb,
.browse-catalog #skills-filter-group::-webkit-scrollbar-thumb {
- background: #c1c1c1;
+ background: var(--color-neutral-700);
border-radius: 3px;
}
.browse-catalog #tags-filter-group::-webkit-scrollbar-thumb:hover,
.browse-catalog #skills-filter-group::-webkit-scrollbar-thumb:hover {
- background: #a8a8a8;
+ background: var(--color-neutral-800);
}
/* Firefox scrollbar styling */
.browse-catalog #tags-filter-group,
.browse-catalog #skills-filter-group {
scrollbar-width: thin;
- scrollbar-color: #c1c1c1 #f1f1f1;
+ scrollbar-color: var(--color-neutral-700) var(--color-neutral-100);
}
.browse-catalog .catalog-main {
@@ -138,15 +138,15 @@
.browse-catalog .catalog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
- gap: 20px;
+ gap: var(--spacing-xl);
}
.browse-catalog .course-card {
- background: white;
- border-radius: 12px;
+ background: var(--color-background);
+ border-radius: var(--radius-xl);
overflow: hidden;
- box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
- transition: transform 0.2s ease, box-shadow 0.2s ease;
+ box-shadow: var(--shadow-primary-lg);
+ transition: var(--transition-transform), var(--transition-shadow);
cursor: pointer;
}
@@ -161,7 +161,7 @@
width: 100%;
height: 100%;
object-fit: cover;
- transition: transform 0.3s ease;
+ transition: var(--transition-transform);
}
.browse-catalog .course-card:hover .card-image img {
@@ -177,19 +177,19 @@
display: flex;
align-items: center;
justify-content: center;
- background: rgba(0, 0, 0, 0.3);
+ background: var(--color-overlay-light);
}
.browse-catalog .card-overlay .card-type-badge {
position: absolute;
- top: 10px;
- left: 10px;
- background: rgba(255, 255, 255, 0.9);
- color: #333;
- padding: 4px 8px;
- border-radius: 4px;
- font-size: 12px;
- font-weight: 500;
+ top: var(--spacing-4);
+ left: var(--spacing-4);
+ background: var(--color-overlay-white);
+ color: var(--color-text-primary);
+ padding: var(--spacing-1) var(--spacing-sm);
+ border-radius: var(--radius-sm);
+ font-size: var(--font-size-xs);
+ font-weight: var(--font-weight-medium);
text-transform: uppercase;
}
@@ -202,7 +202,7 @@
.browse-catalog .course-card:hover {
transform: translateY(-2px);
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
+ box-shadow: var(--shadow-2xl);
}
.browse-catalog .card-header {
@@ -211,9 +211,9 @@
display: flex;
align-items: center;
justify-content: center;
- color: white;
- font-weight: 600;
- font-size: 18px;
+ color: var(--color-text-inverse);
+ font-weight: var(--font-weight-semibold);
+ font-size: var(--font-size-lg);
}
.browse-catalog .card-header.self-paced {
@@ -234,14 +234,14 @@
.browse-catalog .card-type-badge {
position: absolute;
- top: 10px;
- left: 10px;
- background: rgba(255, 255, 255, 0.9);
- color: #333;
- padding: 4px 8px;
- border-radius: 4px;
- font-size: 12px;
- font-weight: 500;
+ top: var(--spacing-4);
+ left: var(--spacing-4);
+ background: var(--color-overlay-white);
+ color: var(--color-text-primary);
+ padding: var(--spacing-1) var(--spacing-sm);
+ border-radius: var(--radius-sm);
+ font-size: var(--font-size-xs);
+ font-weight: var(--font-weight-medium);
text-transform: uppercase;
}
@@ -251,15 +251,15 @@
}
.browse-catalog .card-body {
- padding: 20px;
+ padding: var(--spacing-xl);
}
.browse-catalog .card-title {
- font-size: 16px;
- font-weight: 600;
+ font-size: var(--font-size-sm);
+ font-weight: var(--font-weight-semibold);
color: var(--text-color);
- margin-bottom: 8px;
- line-height: 1.4;
+ margin-bottom: var(--spacing-sm);
+ line-height: var(--line-height-normal);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
@@ -267,9 +267,9 @@
}
.browse-catalog .card-type {
- font-size: 14px;
- color: #666;
- margin-bottom: 12px;
+ font-size: var(--font-size-sm);
+ color: var(--color-text-secondary);
+ margin-bottom: var(--spacing-md);
text-transform: capitalize;
}
@@ -277,27 +277,27 @@
display: flex;
align-items: center;
justify-content: space-between;
- margin-top: 15px;
+ margin-top: var(--spacing-4);
}
.browse-catalog .card-skills {
display: flex;
align-items: center;
- gap: 5px;
- font-size: 12px;
- color: #666;
+ gap: var(--spacing-1);
+ font-size: var(--font-size-xs);
+ color: var(--color-text-secondary);
}
.browse-catalog .card-status {
- padding: 4px 8px;
- border-radius: 12px;
- font-size: 12px;
- font-weight: 500;
+ padding: var(--spacing-1) var(--spacing-sm);
+ border-radius: var(--radius-md);
+ font-size: var(--font-size-xs);
+ font-weight: var(--font-weight-medium);
}
.browse-catalog .status-complete {
- background: #d4edda;
- color: #155724;
+ background: var(--color-success-bg);
+ color: var(--color-success-light);
}
.browse-catalog .status-enrolled {
@@ -306,31 +306,31 @@
}
.browse-catalog .status-available {
- background: #f8f9fa;
- color: #6c757d;
+ background: var(--color-background-light);
+ color: var(--color-neutral-1000);
}
.browse-catalog .card-duration {
- font-size: 12px;
- color: #666;
- margin-top: 8px;
+ font-size: var(--font-size-xs);
+ color: var(--color-text-secondary);
+ margin-top: var(--spacing-sm);
}
.browse-catalog .load-more-container {
text-align: center;
- margin-top: 30px;
+ margin-top: var(--spacing-8);
}
.browse-catalog .load-more-btn {
background-color: var(--link-color);
- color: white;
+ color: var(--color-text-inverse);
border: none;
- padding: 12px 30px;
- border-radius: 25px;
- font-size: 16px;
- font-weight: 500;
+ padding: var(--spacing-md) 30px;
+ border-radius: var(--radius-button);
+ font-size: var(--font-size-sm);
+ font-weight: var(--font-weight-medium);
cursor: pointer;
- transition: background-color 0.3s ease;
+ transition: var(--transition-colors);
}
.browse-catalog .load-more-btn:hover {
@@ -338,12 +338,12 @@
}
.browse-catalog .load-more-btn:disabled {
- background-color: #ccc;
+ background-color: var(--color-neutral-500);
cursor: not-allowed;
}
.browse-catalog .loading-text {
- color: #666;
+ color: var(--color-text-secondary);
font-style: italic;
}
@@ -351,7 +351,7 @@
@media (max-width: 768px) {
.browse-catalog .catalog-header {
flex-direction: column;
- gap: 15px;
+ gap: var(--spacing-4);
align-items: stretch;
}
@@ -388,6 +388,6 @@
}
.browse-catalog .course-card {
- margin: 0 5px;
+ margin: 0 var(--spacing-1);
}
}
diff --git a/blocks/course-overview/course-overview.css b/blocks/course-overview/course-overview.css
index 8a6ed05..f31505e 100644
--- a/blocks/course-overview/course-overview.css
+++ b/blocks/course-overview/course-overview.css
@@ -1,18 +1,18 @@
/* Course Overview - Direct targeting of CDN elements */
.course-overview {
- max-width: 1400px;
+ max-width: var(--container-2xl);
margin: 0 auto;
- padding: 20px;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+ padding: var(--spacing-xl);
+ font-family: var(--font-family-system);
}
/* Course Header */
.course-overview .course-header {
- background: #4a4a4a;
- color: white;
- padding: 40px;
- border-radius: 8px;
- margin-bottom: 30px;
+ background: var(--color-neutral-1200);
+ color: var(--color-text-inverse);
+ padding: var(--spacing-4xl);
+ border-radius: var(--radius-card);
+ margin-bottom: var(--spacing-8);
position: relative;
display: flex;
justify-content: space-between;
@@ -25,150 +25,150 @@
.course-overview .course-header h1.course-title {
font-size: 2.5rem;
- font-weight: 700;
- margin: 0 0 10px 0;
- line-height: 1.2;
- color: white;
+ font-weight: var(--font-weight-bold);
+ margin: 0 0 var(--spacing-4) 0;
+ line-height: var(--line-height-tight);
+ color: var(--color-text-inverse);
}
.course-overview .course-header .course-format {
font-size: 1.1rem;
opacity: 0.9;
- font-weight: 500;
- color: white;
+ font-weight: var(--font-weight-medium);
+ color: var(--color-text-inverse);
}
.course-overview .course-header .share-btn {
- background: rgba(255, 255, 255, 0.2);
- color: white;
- border: 1px solid rgba(255, 255, 255, 0.3);
- padding: 8px 16px;
- border-radius: 20px;
- font-size: 0.875rem;
+ background: var(--color-overlay-white-light);
+ color: var(--color-text-inverse);
+ border: var(--border-width-thin) solid var(--color-overlay-white-medium);
+ padding: var(--spacing-sm) var(--spacing-lg);
+ border-radius: var(--radius-button-sm);
+ font-size: var(--font-size-sm);
cursor: pointer;
- transition: all 0.2s;
+ transition: var(--transition-all);
flex-shrink: 0;
- margin-left: 20px;
+ margin-left: var(--spacing-xl);
}
.course-overview .course-header .share-btn:hover {
- background: rgba(255, 255, 255, 0.3);
+ background: var(--color-overlay-white-medium);
}
/* Enrolled Header with Progress */
.course-overview .enrolled-header {
- background: #4a4a4a;
- color: white;
- padding: 40px;
- border-radius: 8px;
- margin-bottom: 30px;
+ background: var(--color-neutral-1200);
+ color: var(--color-text-inverse);
+ padding: var(--spacing-4xl);
+ border-radius: var(--radius-card);
+ margin-bottom: var(--spacing-8);
}
.course-overview .enrolled-header .progress-section {
- margin-top: 20px;
+ margin-top: var(--spacing-xl);
display: flex;
align-items: center;
- gap: 10px;
+ gap: var(--spacing-4);
}
.course-overview .enrolled-header .progress-label {
- font-size: 0.875rem;
- color: white;
+ font-size: var(--font-size-sm);
+ color: var(--color-text-inverse);
opacity: 0.9;
}
.course-overview .enrolled-header .progress-bar {
flex: 1;
- height: 8px;
- background: rgba(255, 255, 255, 0.2);
- border-radius: 4px;
+ height: var(--spacing-sm);
+ background: var(--color-overlay-white-light);
+ border-radius: var(--radius-sm);
overflow: hidden;
}
.course-overview .enrolled-header .progress-fill {
height: 100%;
- background: #4caf50;
- transition: width 0.3s ease;
+ background: var(--color-success);
+ transition: width var(--transition-slow) var(--ease-default);
}
.course-overview .enrolled-header .progress-text {
- font-size: 0.875rem;
- color: white;
- font-weight: 500;
+ font-size: var(--font-size-sm);
+ color: var(--color-text-inverse);
+ font-weight: var(--font-weight-medium);
}
/* Course Tabs */
.course-overview .course-tabs {
display: flex;
- border-bottom: 1px solid #e0e0e0;
- margin-bottom: 30px;
+ border-bottom: var(--border-width-thin) solid var(--color-border);
+ margin-bottom: var(--spacing-8);
}
.course-overview .tab-button {
- padding: 12px 24px;
+ padding: var(--spacing-md) var(--spacing-2xl);
background: none;
border: none;
- font-size: 1rem;
- font-weight: 500;
- color: #666;
+ font-size: var(--font-size-base);
+ font-weight: var(--font-weight-medium);
+ color: var(--color-text-secondary);
cursor: pointer;
- border-bottom: 2px solid transparent;
- transition: all 0.2s;
+ border-bottom: var(--border-width-medium) solid transparent;
+ transition: var(--transition-all);
}
.course-overview .tab-button.active {
- color: #333;
- border-bottom-color: #4f46e5;
+ color: var(--color-text-primary);
+ border-bottom-color: var(--color-primary-600);
}
.course-overview .tab-button:hover {
- color: #333;
+ color: var(--color-text-primary);
}
/* Enrolled Layout */
.course-overview .enrolled-layout {
display: grid;
grid-template-columns: 1fr 320px;
- gap: 40px;
+ gap: var(--spacing-4xl);
align-items: start;
}
/* Module Status Styles */
.course-overview .module-item.completed {
- background: #f8f9fa;
+ background: var(--color-background-light);
}
.course-overview .module-item.completed .module-icon {
- color: #4caf50;
+ color: var(--color-success);
}
.course-overview .module-item.in-progress .module-icon {
- color: #ff9800;
+ color: var(--color-warning);
}
.course-overview .module-item .module-status {
- font-size: 0.75rem;
- color: #666;
- margin-left: 8px;
+ font-size: var(--font-size-xs);
+ color: var(--color-text-secondary);
+ margin-left: var(--spacing-sm);
display: flex;
align-items: center;
- gap: 4px;
+ gap: var(--spacing-1);
}
/* Green tick for completed modules */
.course-overview .module-item.completed .module-status {
- color: #4caf50;
+ color: var(--color-success);
}
.course-overview .module-item.completed .module-status::before {
content: '✓';
- color: #4caf50;
- font-weight: bold;
+ color: var(--color-success);
+ font-weight: var(--font-weight-bold);
}
/* Orange clock for in-progress modules */
.course-overview .module-item.in-progress .module-status {
- color: #ff9800;
+ color: var(--color-warning);
}
.course-overview .module-item.in-progress .module-status::before {
@@ -177,55 +177,55 @@
/* Additional Course Info */
.course-overview .course-additional-info {
- margin-top: 30px;
- padding: 20px;
- background: #f8f9fa;
- border-radius: 8px;
+ margin-top: var(--spacing-8);
+ padding: var(--spacing-xl);
+ background: var(--color-background-light);
+ border-radius: var(--radius-card);
}
.course-overview .course-additional-info p {
margin: 0;
- color: #666;
- line-height: 1.6;
+ color: var(--color-text-secondary);
+ line-height: var(--line-height-loose);
}
/* Enrolled Sidebar */
.course-overview .enrolled-sidebar {
- background: white;
- border: 1px solid #e0e0e0;
- border-radius: 8px;
- padding: 24px;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ background: var(--color-background);
+ border: var(--border-width-thin) solid var(--color-border);
+ border-radius: var(--radius-card);
+ padding: var(--spacing-2xl);
+ box-shadow: var(--shadow-md);
position: sticky;
- top: 20px;
+ top: var(--spacing-xl);
}
.course-overview .enrolled-sidebar .start-btn {
width: 100%;
- background: #4f46e5;
- color: white;
+ background: var(--color-primary-600);
+ color: var(--color-text-inverse);
border: none;
- padding: 14px 24px;
- border-radius: 25px;
- font-size: 1rem;
- font-weight: 600;
+ padding: var(--spacing-4) var(--spacing-2xl);
+ border-radius: var(--radius-button);
+ font-size: var(--font-size-base);
+ font-weight: var(--font-weight-semibold);
cursor: pointer;
- transition: background-color 0.2s;
+ transition: var(--transition-colors);
}
.course-overview .enrolled-sidebar .start-btn:hover {
- background: #4338ca;
+ background: var(--color-primary-700);
}
/* Rating Section */
.course-overview .rating-section h4 {
- margin-bottom: 12px;
+ margin-bottom: var(--spacing-md);
}
.course-overview .star-rating {
display: flex;
align-items: center;
- gap: 4px;
+ gap: var(--spacing-1);
}
.course-overview .star-rating .star {
@@ -234,68 +234,68 @@
}
.course-overview .submit-rating {
- margin-left: 12px;
- padding: 4px 12px;
- background: #4f46e5;
- color: white;
+ margin-left: var(--spacing-md);
+ padding: var(--spacing-1) var(--spacing-md);
+ background: var(--color-primary-600);
+ color: var(--color-text-inverse);
border: none;
- border-radius: 4px;
- font-size: 0.75rem;
+ border-radius: var(--radius-sm);
+ font-size: var(--font-size-xs);
cursor: pointer;
}
/* Progress Info */
.course-overview .progress-info h4 {
- color: #4f46e5;
- font-weight: 600;
+ color: var(--color-primary-600);
+ font-weight: var(--font-weight-semibold);
}
/* Badges Section */
.course-overview .badges-section .badge-item {
display: flex;
align-items: center;
- gap: 8px;
- margin-top: 8px;
+ gap: var(--spacing-sm);
+ margin-top: var(--spacing-sm);
}
.course-overview .badges-section .badge-icon {
- width: 40px;
- height: 40px;
- border-radius: 50%;
+ width: var(--spacing-4xl);
+ height: var(--spacing-4xl);
+ border-radius: var(--radius-full);
}
/* Unenroll Button */
.course-overview .unenroll-btn {
width: 100%;
- background: white;
- color: #dc3545;
- border: 1px solid #dc3545;
- padding: 12px 24px;
- border-radius: 25px;
- font-size: 0.875rem;
- font-weight: 500;
+ background: var(--color-background);
+ color: var(--color-error);
+ border: var(--border-width-thin) solid var(--color-error);
+ padding: var(--spacing-md) var(--spacing-2xl);
+ border-radius: var(--radius-button);
+ font-size: var(--font-size-sm);
+ font-weight: var(--font-weight-medium);
cursor: pointer;
- transition: all 0.2s;
+ transition: var(--transition-all);
}
.course-overview .unenroll-btn:hover {
- background: #dc3545;
- color: white;
+ background: var(--color-error);
+ color: var(--color-text-inverse);
}
/* Course description */
.course-overview .course-overview-section p.course-description {
- font-size: 1rem;
- line-height: 1.6;
- color: #333;
- margin-bottom: 30px;
+ font-size: var(--font-size-base);
+ line-height: var(--line-height-loose);
+ color: var(--color-text-primary);
+ margin-bottom: var(--spacing-8);
}
/* Main content grid */
.course-overview .course-main-content {
display: grid;
grid-template-columns: 1fr 320px;
- gap: 40px;
+ gap: var(--spacing-4xl);
align-items: start;
}
@@ -306,29 +306,29 @@
/* Modules section */
.course-overview .course-section.modules-section {
- background: white;
- border: 1px solid #e0e0e0;
- border-radius: 8px;
+ background: var(--color-background);
+ border: var(--border-width-thin) solid var(--color-border);
+ border-radius: var(--radius-card);
overflow: hidden;
}
/* Content title */
.course-overview h3.content-title {
font-size: 1.25rem;
- font-weight: 600;
+ font-weight: var(--font-weight-semibold);
margin: 0;
- padding: 20px;
- background: #f8f9fa;
- border-bottom: 1px solid #e0e0e0;
+ padding: var(--spacing-xl);
+ background: var(--color-background-light);
+ border-bottom: var(--border-width-thin) solid var(--color-border);
display: flex;
justify-content: space-between;
align-items: center;
}
.course-overview .content-title .duration-badge {
- font-size: 0.875rem;
- color: #666;
- font-weight: 400;
+ font-size: var(--font-size-sm);
+ color: var(--color-text-secondary);
+ font-weight: var(--font-weight-normal);
}
/* Modules list */
@@ -341,9 +341,9 @@
.course-overview .module-item {
display: flex;
align-items: flex-start;
- padding: 20px;
- border-bottom: 1px solid #e0e0e0;
- transition: background-color 0.2s;
+ padding: var(--spacing-xl);
+ border-bottom: var(--border-width-thin) solid var(--color-border);
+ transition: var(--transition-colors);
cursor: pointer;
}
@@ -352,16 +352,16 @@
}
.course-overview .module-item:hover {
- background-color: #f8f9fa;
+ background-color: var(--color-background-light);
}
/* Module icon */
.course-overview .module-item .module-icon {
font-size: 1.5rem;
- margin-right: 16px;
- margin-top: 4px;
- min-width: 24px;
- color: #4285f4;
+ margin-right: var(--spacing-lg);
+ margin-top: var(--spacing-1);
+ min-width: var(--spacing-2xl);
+ color: var(--color-info);
}
/* Module content layout */
@@ -379,118 +379,118 @@
/* Module format */
.course-overview .module-item .module-format {
- font-size: 0.75rem;
- color: #666;
- font-weight: 500;
+ font-size: var(--font-size-xs);
+ color: var(--color-text-secondary);
+ font-weight: var(--font-weight-medium);
text-transform: uppercase;
- margin-bottom: 8px;
+ margin-bottom: var(--spacing-sm);
}
/* Module title */
.course-overview .module-item h4.module-name {
- font-size: 1rem;
- font-weight: 600;
- color: #333;
- margin: 0 0 8px 0;
- line-height: 1.3;
+ font-size: var(--font-size-base);
+ font-weight: var(--font-weight-semibold);
+ color: var(--color-text-primary);
+ margin: 0 0 var(--spacing-sm) 0;
+ line-height: var(--line-height-normal);
}
/* Module duration on the right */
.course-overview .module-item .module-meta .module-duration {
- font-size: 0.875rem;
- color: #666;
- font-weight: 400;
+ font-size: var(--font-size-sm);
+ color: var(--color-text-secondary);
+ font-weight: var(--font-weight-normal);
text-align: right;
- margin-left: 20px;
+ margin-left: var(--spacing-xl);
}
/* Skills section at bottom */
.course-overview .skills-section {
- margin-top: 40px;
+ margin-top: var(--spacing-4xl);
}
.course-overview .skills-section h3.sidebar-title {
font-size: 1.1rem;
- font-weight: 600;
- margin: 0 0 16px 0;
- color: #333;
+ font-weight: var(--font-weight-semibold);
+ margin: 0 0 var(--spacing-lg) 0;
+ color: var(--color-text-primary);
}
.course-overview .skills-section .skills-list {
display: flex;
flex-direction: column;
- gap: 8px;
+ gap: var(--spacing-sm);
}
.course-overview .skills-section .skill-item {
display: flex;
- gap: 4px;
+ gap: var(--spacing-1);
}
.course-overview .skills-section .skill-name {
- font-weight: 500;
- color: #333;
+ font-weight: var(--font-weight-medium);
+ color: var(--color-text-primary);
}
.course-overview .skills-section .skill-credits {
- color: #666;
- font-size: 0.875rem;
+ color: var(--color-text-secondary);
+ font-size: var(--font-size-sm);
}
/* Learner sidebar */
.course-overview .learner-sidebar {
- background: white;
- border: 1px solid #e0e0e0;
- border-radius: 8px;
- padding: 24px;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ background: var(--color-background);
+ border: var(--border-width-thin) solid var(--color-border);
+ border-radius: var(--radius-card);
+ padding: var(--spacing-2xl);
+ box-shadow: var(--shadow-md);
position: sticky;
- top: 20px;
+ top: var(--spacing-xl);
}
.course-overview .learner-sidebar .sidebar-actions {
display: flex;
flex-direction: column;
- gap: 16px;
- margin-bottom: 32px;
+ gap: var(--spacing-lg);
+ margin-bottom: var(--spacing-8);
}
.course-overview .learner-sidebar .enroll-btn {
width: 100%;
- background: #4f46e5;
- color: white;
+ background: var(--color-primary-600);
+ color: var(--color-text-inverse);
border: none;
- padding: 14px 24px;
- border-radius: 25px;
- font-size: 1rem;
- font-weight: 600;
+ padding: var(--spacing-4) var(--spacing-2xl);
+ border-radius: var(--radius-button);
+ font-size: var(--font-size-base);
+ font-weight: var(--font-weight-semibold);
cursor: pointer;
- transition: background-color 0.2s;
+ transition: var(--transition-colors);
}
.course-overview .learner-sidebar .enroll-btn:hover {
- background: #4338ca;
+ background: var(--color-primary-700);
}
.course-overview .learner-sidebar .save-btn {
width: 100%;
- background: white;
- color: #4f46e5;
- border: 1px solid #4f46e5;
- padding: 14px 24px;
- border-radius: 25px;
- font-size: 1rem;
- font-weight: 500;
+ background: var(--color-background);
+ color: var(--color-primary-600);
+ border: var(--border-width-thin) solid var(--color-primary-600);
+ padding: var(--spacing-4) var(--spacing-2xl);
+ border-radius: var(--radius-button);
+ font-size: var(--font-size-base);
+ font-weight: var(--font-weight-medium);
cursor: pointer;
- transition: all 0.2s;
+ transition: var(--transition-all);
display: flex;
align-items: center;
justify-content: center;
- gap: 8px;
+ gap: var(--spacing-sm);
}
.course-overview .learner-sidebar .save-btn:hover {
- background: #f8fafc;
+ background: var(--color-background-light);
}
.course-overview .learner-sidebar .save-btn.disabled {
@@ -499,9 +499,9 @@
}
.course-overview .learner-sidebar .sidebar-section {
- margin-bottom: 32px;
- padding-bottom: 24px;
- border-bottom: 1px solid #f1f5f9;
+ margin-bottom: var(--spacing-8);
+ padding-bottom: var(--spacing-2xl);
+ border-bottom: var(--border-width-thin) solid var(--color-border-lighter);
}
.course-overview .learner-sidebar .sidebar-section:last-child {
@@ -511,27 +511,27 @@
}
.course-overview .learner-sidebar .sidebar-section h4 {
- font-size: 1rem;
- font-weight: 500;
- margin: 0 0 16px 0;
- color: #64748b;
+ font-size: var(--font-size-base);
+ font-weight: var(--font-weight-medium);
+ margin: 0 0 var(--spacing-lg) 0;
+ color: var(--color-text-muted);
display: flex;
align-items: center;
- gap: 8px;
+ gap: var(--spacing-sm);
}
.course-overview .learner-sidebar .sidebar-section p {
- font-size: 0.875rem;
- color: #475569;
- margin: 0 0 8px 0;
- font-weight: 500;
+ font-size: var(--font-size-sm);
+ color: var(--color-text-light);
+ margin: 0 0 var(--spacing-sm) 0;
+ font-weight: var(--font-weight-medium);
}
.course-overview .learner-sidebar .view-instances {
- color: #4f46e5;
+ color: var(--color-primary-600);
text-decoration: none;
- font-size: 0.875rem;
- font-weight: 500;
+ font-size: var(--font-size-sm);
+ font-weight: var(--font-weight-medium);
}
.course-overview .learner-sidebar .view-instances:hover {
@@ -539,42 +539,42 @@
}
.course-overview .learner-sidebar .skills-list p {
- font-size: 0.875rem;
- color: #64748b;
- line-height: 1.6;
+ font-size: var(--font-size-sm);
+ color: var(--color-text-muted);
+ line-height: var(--line-height-loose);
margin: 0;
}
.course-overview .learner-sidebar .author-item {
display: flex;
align-items: center;
- gap: 12px;
- margin-top: 8px;
+ gap: var(--spacing-md);
+ margin-top: var(--spacing-sm);
}
.course-overview .learner-sidebar .author-avatar {
- width: 40px;
- height: 40px;
- border-radius: 50%;
- background: #e2e8f0;
+ width: var(--spacing-4xl);
+ height: var(--spacing-4xl);
+ border-radius: var(--radius-full);
+ background: var(--color-neutral-300);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
- color: #64748b;
+ color: var(--color-text-muted);
}
.course-overview .learner-sidebar .author-name {
- font-size: 0.875rem;
- color: #1e293b;
- font-weight: 500;
+ font-size: var(--font-size-sm);
+ color: var(--color-text-primary);
+ font-weight: var(--font-weight-medium);
}
/* Responsive */
@media (max-width: 768px) {
.course-overview .course-main-content {
grid-template-columns: 1fr;
- gap: 20px;
+ gap: var(--spacing-xl);
}
.course-overview .learner-sidebar {
@@ -589,8 +589,8 @@
left: 0;
width: 100%;
height: 100%;
- background-color: rgba(0, 0, 0, 0.8);
- z-index: 10000;
+ background-color: var(--color-overlay);
+ z-index: var(--z-index-max);
display: flex;
justify-content: center;
align-items: center;
@@ -599,23 +599,23 @@
.fluidic-modal-content {
width: 100%;
height: 100%;
- background-color: white;
+ background-color: var(--color-background);
position: relative;
overflow: hidden;
}
/* Notes Content Styles */
.course-overview .notes-content {
- background: white;
- border: 1px solid #e0e0e0;
- border-radius: 8px;
+ background: var(--color-background);
+ border: var(--border-width-thin) solid var(--color-border);
+ border-radius: var(--radius-card);
overflow: hidden;
}
.course-overview .notes-header {
- padding: 20px;
- background: #f8f9fa;
- border-bottom: 1px solid #e0e0e0;
+ padding: var(--spacing-xl);
+ background: var(--color-background-light);
+ border-bottom: var(--border-width-thin) solid var(--color-border);
display: flex;
justify-content: space-between;
align-items: center;
@@ -623,28 +623,28 @@
.course-overview .notes-header .content-title {
font-size: 1.25rem;
- font-weight: 600;
+ font-weight: var(--font-weight-semibold);
margin: 0;
- color: #333;
+ color: var(--color-text-primary);
}
.course-overview .notes-header .download-btn {
- background: #4f46e5;
- color: white;
+ background: var(--color-primary-600);
+ color: var(--color-text-inverse);
border: none;
- padding: 8px 16px;
- border-radius: 6px;
- font-size: 0.875rem;
- font-weight: 500;
+ padding: var(--spacing-sm) var(--spacing-lg);
+ border-radius: var(--radius-md);
+ font-size: var(--font-size-sm);
+ font-weight: var(--font-weight-medium);
cursor: pointer;
- transition: background-color 0.2s;
+ transition: var(--transition-colors);
display: flex;
align-items: center;
- gap: 6px;
+ gap: var(--spacing-2);
}
.course-overview .notes-header .download-btn:hover {
- background: #4338ca;
+ background: var(--color-primary-700);
}
.course-overview .notes-list {
@@ -655,9 +655,9 @@
.course-overview .note-item {
display: flex;
align-items: flex-start;
- padding: 20px;
- border-bottom: 1px solid #e0e0e0;
- transition: background-color 0.2s;
+ padding: var(--spacing-xl);
+ border-bottom: var(--border-width-thin) solid var(--color-border);
+ transition: var(--transition-colors);
}
.course-overview .note-item:last-child {
@@ -665,15 +665,15 @@
}
.course-overview .note-item:hover {
- background-color: #f8f9fa;
+ background-color: var(--color-background-light);
}
.course-overview .note-item .note-icon {
font-size: 1.2rem;
- margin-right: 16px;
- margin-top: 4px;
- min-width: 20px;
- color: #4285f4;
+ margin-right: var(--spacing-lg);
+ margin-top: var(--spacing-1);
+ min-width: var(--spacing-xl);
+ color: var(--color-info);
}
.course-overview .note-item .note-content {
@@ -681,47 +681,47 @@
}
.course-overview .note-item .note-page {
- font-size: 0.75rem;
- color: #666;
- font-weight: 500;
+ font-size: var(--font-size-xs);
+ color: var(--color-text-secondary);
+ font-weight: var(--font-weight-medium);
text-transform: uppercase;
- margin-bottom: 8px;
+ margin-bottom: var(--spacing-sm);
}
.course-overview .note-item .note-text {
- font-size: 0.875rem;
- color: #333;
- line-height: 1.5;
+ font-size: var(--font-size-sm);
+ color: var(--color-text-primary);
+ line-height: var(--line-height-relaxed);
margin: 0;
}
.course-overview .no-notes {
- padding: 40px 20px;
+ padding: var(--spacing-4xl) var(--spacing-xl);
text-align: center;
- color: #666;
+ color: var(--color-text-secondary);
}
.course-overview .no-notes p {
margin: 0;
- font-size: 1rem;
+ font-size: var(--font-size-base);
}
.course-overview .error-message {
- padding: 40px 20px;
+ padding: var(--spacing-4xl) var(--spacing-xl);
text-align: center;
- color: #dc3545;
+ color: var(--color-error);
}
.course-overview .error-message p {
margin: 0;
- font-size: 1rem;
+ font-size: var(--font-size-base);
}
.course-overview .loading {
- padding: 40px 20px;
+ padding: var(--spacing-4xl) var(--spacing-xl);
text-align: center;
- color: #666;
- font-size: 1rem;
+ color: var(--color-text-secondary);
+ font-size: var(--font-size-base);
}
/* Module Notes Segregation Styles */
@@ -731,7 +731,7 @@
}
.course-overview .module-notes-section {
- border-bottom: 1px solid #e0e0e0;
+ border-bottom: var(--border-width-thin) solid var(--color-border);
}
.course-overview .module-notes-section:last-child {
@@ -739,38 +739,38 @@
}
.course-overview .module-notes-header {
- padding: 16px 20px;
- background: #f8f9fa;
- border-bottom: 1px solid #e0e0e0;
+ padding: var(--spacing-lg) var(--spacing-xl);
+ background: var(--color-background-light);
+ border-bottom: var(--border-width-thin) solid var(--color-border);
display: flex;
justify-content: space-between;
align-items: center;
}
.course-overview .module-notes-header .module-name {
- font-size: 1rem;
- font-weight: 600;
+ font-size: var(--font-size-base);
+ font-weight: var(--font-weight-semibold);
margin: 0;
- color: #333;
+ color: var(--color-text-primary);
}
.course-overview .module-notes-header .module-download-btn {
- background: #6c757d;
- color: white;
+ background: var(--color-neutral-1000);
+ color: var(--color-text-inverse);
border: none;
- padding: 6px 12px;
- border-radius: 4px;
- font-size: 0.75rem;
- font-weight: 500;
+ padding: var(--spacing-2) var(--spacing-md);
+ border-radius: var(--radius-sm);
+ font-size: var(--font-size-xs);
+ font-weight: var(--font-weight-medium);
cursor: pointer;
- transition: background-color 0.2s;
+ transition: var(--transition-colors);
display: flex;
align-items: center;
- gap: 4px;
+ gap: var(--spacing-1);
}
.course-overview .module-notes-header .module-download-btn:hover {
- background: #5a6268;
+ background: var(--color-neutral-1100);
}
.course-overview .module-notes-list {
@@ -779,7 +779,7 @@
}
.course-overview .module-notes-list .note-item {
- border-bottom: 1px solid #f0f0f0;
+ border-bottom: var(--border-width-thin) solid var(--color-border-lighter);
}
.course-overview .module-notes-list .note-item:last-child {
@@ -788,17 +788,17 @@
/* Testout specific styles */
.course-overview .no-testout-modules {
- padding: 40px 20px;
+ padding: var(--spacing-4xl) var(--spacing-xl);
text-align: center;
- color: #666;
+ color: var(--color-text-secondary);
}
.course-overview .no-testout-modules p {
margin: 0;
- font-size: 1rem;
+ font-size: var(--font-size-base);
}
/* Testout module icon styling */
.course-overview .module-item .module-icon.testout-icon {
- color: #dc3545;
+ color: var(--color-error);
}
diff --git a/blocks/mylearnings/mylearnings.css b/blocks/mylearnings/mylearnings.css
index 5897f1c..cf52db1 100644
--- a/blocks/mylearnings/mylearnings.css
+++ b/blocks/mylearnings/mylearnings.css
@@ -1,7 +1,7 @@
.mylearning-wrapper {
- max-width: 1400px;
+ max-width: var(--container-2xl);
margin: 0 auto;
- padding: 0 24px;
+ padding: 0 var(--spacing-2xl);
}
.mylearning {
@@ -12,64 +12,64 @@
display: flex;
justify-content: space-between;
align-items: center;
- margin-bottom: 32px;
+ margin-bottom: var(--spacing-8);
}
.mylearning-header h2 {
- font-size: 32px;
- font-weight: 400;
- color: #2c2c2c;
+ font-size: var(--font-size-3xl);
+ font-weight: var(--font-weight-normal);
+ color: var(--color-text-dark);
margin: 0;
}
.mylearning-navigation {
display: flex;
- gap: 12px;
+ gap: var(--spacing-md);
}
.mylearning-nav-button {
- width: 48px;
- height: 48px;
- border: 1px solid #d0d0d0;
- border-radius: 50%;
- background: white;
+ width: var(--spacing-10);
+ height: var(--spacing-10);
+ border: var(--border-width-thin) solid var(--color-border-dark);
+ border-radius: var(--radius-full);
+ background: var(--color-background);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
- transition: all 0.3s ease;
+ transition: var(--transition-all);
padding: 0;
margin: 0;
}
.mylearning-nav-button:hover {
- background: #f5f5f5;
- border-color: #999;
+ background: var(--color-background-gray);
+ border-color: var(--color-neutral-700);
}
.mylearning-nav-button:disabled {
opacity: 0.3;
cursor: not-allowed;
- background: white;
+ background: var(--color-background);
}
.mylearning-nav-button::before {
content: '';
display: block;
- width: 12px;
- height: 12px;
- border-top: 2px solid #333;
- border-right: 2px solid #333;
+ width: var(--spacing-md);
+ height: var(--spacing-md);
+ border-top: var(--border-width-medium) solid var(--color-neutral-1100);
+ border-right: var(--border-width-medium) solid var(--color-neutral-1100);
}
.mylearning-nav-button.prev::before {
transform: rotate(-135deg);
- margin-left: 4px;
+ margin-left: var(--spacing-1);
}
.mylearning-nav-button.next::before {
transform: rotate(45deg);
- margin-right: 4px;
+ margin-right: var(--spacing-1);
}
.mylearning-scroll-container {
@@ -86,7 +86,7 @@
.mylearning-list {
display: flex;
- gap: 24px;
+ gap: var(--spacing-2xl);
list-style: none;
margin: 0;
padding: 0;
@@ -94,16 +94,16 @@
.mylearning-card {
flex: 0 0 400px;
- background: white;
- border: 1px solid #e0e0e0;
- border-radius: 4px;
+ background: var(--color-background);
+ border: var(--border-width-thin) solid var(--color-border);
+ border-radius: var(--radius-sm);
overflow: hidden;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
- transition: box-shadow 0.3s ease;
+ box-shadow: var(--shadow-sm);
+ transition: var(--transition-shadow);
}
.mylearning-card:hover {
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+ box-shadow: var(--shadow-lg);
}
.mylearning-card-image {
@@ -121,93 +121,93 @@
.mylearning-badge {
position: absolute;
- top: 12px;
- right: 12px;
+ top: var(--spacing-md);
+ right: var(--spacing-md);
width: 44px;
height: 44px;
- background: rgba(100, 100, 100, 0.85);
- border-radius: 50%;
+ background: var(--color-overlay-dark);
+ border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
- color: white;
- font-size: 14px;
- font-weight: 600;
+ color: var(--color-text-inverse);
+ font-size: var(--font-size-sm);
+ font-weight: var(--font-weight-semibold);
}
.mylearning-badge.has-rating {
width: auto;
height: auto;
- background: rgba(255, 255, 255, 0.95);
- border-radius: 20px;
- padding: 6px 12px;
+ background: var(--color-overlay-white);
+ border-radius: var(--radius-button-sm);
+ padding: var(--spacing-2) var(--spacing-md);
display: flex;
align-items: center;
- gap: 6px;
- top: 12px;
- left: 12px;
+ gap: var(--spacing-2);
+ top: var(--spacing-md);
+ left: var(--spacing-md);
right: auto;
}
.mylearning-stars {
display: flex;
- gap: 2px;
+ gap: var(--spacing-0);
}
.mylearning-star {
- font-size: 16px;
- color: #ddd;
+ font-size: var(--font-size-sm);
+ color: var(--color-neutral-400);
}
.mylearning-star.filled {
- color: #ffc107;
+ color: var(--color-warning-light);
}
.mylearning-rating-count {
- font-size: 14px;
- font-weight: 600;
- color: #333;
- margin-left: 4px;
+ font-size: var(--font-size-sm);
+ font-weight: var(--font-weight-semibold);
+ color: var(--color-text-primary);
+ margin-left: var(--spacing-1);
}
.mylearning-card-body {
- padding: 20px;
+ padding: var(--spacing-xl);
}
.mylearning-card-title {
- font-size: 18px;
- font-weight: 400;
- color: #2c2c2c;
- margin: 0 0 8px 0;
- line-height: 1.4;
+ font-size: var(--font-size-lg);
+ font-weight: var(--font-weight-normal);
+ color: var(--color-text-dark);
+ margin: 0 0 var(--spacing-sm) 0;
+ line-height: var(--line-height-normal);
min-height: 50px;
}
.mylearning-card-category {
- font-size: 14px;
- color: #707070;
- margin: 0 0 8px 0;
+ font-size: var(--font-size-sm);
+ color: var(--color-text-tertiary);
+ margin: 0 0 var(--spacing-sm) 0;
}
.mylearning-card-meta {
- font-size: 14px;
- color: #707070;
- margin: 0 0 16px 0;
+ font-size: var(--font-size-sm);
+ color: var(--color-text-tertiary);
+ margin: 0 0 var(--spacing-lg) 0;
display: flex;
align-items: center;
- gap: 8px;
+ gap: var(--spacing-sm);
}
.mylearning-card-meta::after {
content: '•';
- margin: 0 4px;
+ margin: 0 var(--spacing-1);
}
.mylearning-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
- gap: 16px;
+ gap: var(--spacing-lg);
}
.mylearning-progress {
@@ -216,48 +216,48 @@
.mylearning-progress-text {
font-size: 13px;
- color: #707070;
- margin: 0 0 8px 0;
+ color: var(--color-text-tertiary);
+ margin: 0 0 var(--spacing-sm) 0;
}
.mylearning-progress-bar {
width: 100%;
- height: 6px;
- background: #e8e8e8;
+ height: var(--spacing-2);
+ background: var(--color-border-light);
border-radius: 3px;
overflow: hidden;
}
.mylearning-progress-fill {
height: 100%;
- background: #4a4a4a;
+ background: var(--color-neutral-1200);
border-radius: 3px;
- transition: width 0.3s ease;
+ transition: width var(--transition-slow) var(--ease-default);
}
.mylearning-continue-btn {
- padding: 10px 32px;
- background: white;
- color: #1473e6;
- border: 2px solid #1473e6;
- border-radius: 20px;
- font-size: 14px;
- font-weight: 600;
+ padding: var(--spacing-4) var(--spacing-8);
+ background: var(--color-background);
+ color: var(--color-blue-500);
+ border: var(--border-width-medium) solid var(--color-blue-500);
+ border-radius: var(--radius-button-sm);
+ font-size: var(--font-size-sm);
+ font-weight: var(--font-weight-semibold);
cursor: pointer;
- transition: all 0.3s ease;
+ transition: var(--transition-all);
text-transform: uppercase;
white-space: nowrap;
margin: 0;
}
.mylearning-continue-btn:hover {
- background: #1473e6;
- color: white;
+ background: var(--color-blue-500);
+ color: var(--color-text-inverse);
}
/* Go to My Learning card styles */
.mylearning-card-goto {
- background: #f5f5f5;
+ background: var(--color-background-gray);
display: flex;
align-items: center;
justify-content: center;
@@ -271,7 +271,7 @@
align-items: center;
justify-content: center;
text-decoration: none;
- padding: 40px 20px;
+ padding: var(--spacing-4xl) var(--spacing-xl);
}
.mylearning-goto-body {
@@ -283,15 +283,15 @@
}
.mylearning-goto-title {
- color: #1473e6;
- font-size: 24px;
- font-weight: 400;
+ color: var(--color-blue-500);
+ font-size: var(--font-size-xl);
+ font-weight: var(--font-weight-normal);
margin: 0;
min-height: auto;
}
.mylearning-card-goto:hover {
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+ box-shadow: var(--shadow-lg);
}
.mylearning-card-goto:hover .mylearning-goto-title {
@@ -304,16 +304,16 @@
}
.mylearning-header h2 {
- font-size: 24px;
+ font-size: var(--font-size-xl);
}
.mylearning-card-title {
- font-size: 16px;
+ font-size: var(--font-size-sm);
min-height: auto;
}
.mylearning-continue-btn {
- padding: 8px 24px;
+ padding: var(--spacing-sm) var(--spacing-2xl);
font-size: 13px;
}
}
@@ -324,15 +324,15 @@
}
.mylearning-wrapper {
- padding: 0 16px;
+ padding: 0 var(--spacing-lg);
}
.mylearning-navigation {
- gap: 8px;
+ gap: var(--spacing-sm);
}
.mylearning-nav-button {
- width: 40px;
- height: 40px;
+ width: var(--spacing-4xl);
+ height: var(--spacing-4xl);
}
}
diff --git a/blocks/profile/profile.css b/blocks/profile/profile.css
index ffaefd6..7b867dc 100644
--- a/blocks/profile/profile.css
+++ b/blocks/profile/profile.css
@@ -1,41 +1,41 @@
/* Profile Block Styles */
.profile {
- max-width: 1200px;
+ max-width: var(--container-max);
margin: 0 auto;
- padding: 40px 20px;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
- background-color: #f8f9fa;
+ padding: var(--spacing-4xl) var(--spacing-xl);
+ font-family: var(--font-family-system);
+ background-color: var(--color-background-light);
min-height: 100vh;
}
/* Profile Container */
.profile-container {
- background: white;
- border-radius: 8px;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ background: var(--color-background);
+ border-radius: var(--radius-card);
+ box-shadow: var(--shadow-md);
overflow: hidden;
}
/* Profile Header */
.profile-header {
- padding: 40px 40px 20px 40px;
- background: white;
+ padding: var(--spacing-4xl) var(--spacing-4xl) var(--spacing-xl) var(--spacing-4xl);
+ background: var(--color-background);
}
.profile-title {
font-size: 2rem;
- font-weight: 600;
- color: #333;
+ font-weight: var(--font-weight-semibold);
+ color: var(--color-text-primary);
margin: 0;
}
/* User Info Section */
.user-info-section {
- padding: 20px 40px 40px 40px;
- background: #f8f9fa;
+ padding: var(--spacing-xl) var(--spacing-4xl) var(--spacing-4xl) var(--spacing-4xl);
+ background: var(--color-background-light);
display: flex;
align-items: flex-start;
- gap: 24px;
+ gap: var(--spacing-2xl);
position: relative;
}
@@ -49,101 +49,101 @@
.avatar-image {
width: 120px;
height: 120px;
- border-radius: 50%;
+ border-radius: var(--radius-full);
object-fit: cover;
- border: 4px solid white;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ border: var(--border-width-thick) solid var(--color-background);
+ box-shadow: var(--shadow-md);
}
.avatar-placeholder {
width: 120px;
height: 120px;
- border-radius: 50%;
- background: #e0e0e0;
+ border-radius: var(--radius-full);
+ background: var(--color-border);
display: flex;
align-items: center;
justify-content: center;
- border: 4px solid white;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ border: var(--border-width-thick) solid var(--color-background);
+ box-shadow: var(--shadow-md);
}
.user-details {
flex: 1;
- padding-top: 20px;
+ padding-top: var(--spacing-xl);
}
.user-name {
font-size: 1.75rem;
- font-weight: 600;
- color: #333;
- margin: 0 0 8px 0;
+ font-weight: var(--font-weight-semibold);
+ color: var(--color-text-primary);
+ margin: 0 0 var(--spacing-sm) 0;
}
.user-email {
- font-size: 1rem;
- color: #666;
+ font-size: var(--font-size-base);
+ color: var(--color-text-secondary);
margin: 0;
}
.change-image-btn {
background: none;
border: none;
- color: #4f46e5;
- font-size: 0.875rem;
- font-weight: 500;
+ color: var(--color-primary-600);
+ font-size: var(--font-size-sm);
+ font-weight: var(--font-weight-medium);
cursor: pointer;
text-decoration: underline;
padding: 0;
- margin-top: 16px;
+ margin-top: var(--spacing-lg);
}
.change-image-btn:hover {
- color: #4338ca;
+ color: var(--color-primary-700);
}
/* Skills Section */
.skills-section {
- padding: 40px;
- background: white;
- border-top: 1px solid #e0e0e0;
+ padding: var(--spacing-4xl);
+ background: var(--color-background);
+ border-top: var(--border-width-thin) solid var(--color-border);
}
.section-title {
font-size: 1.5rem;
- font-weight: 600;
- color: #333;
- margin: 0 0 16px 0;
+ font-weight: var(--font-weight-semibold);
+ color: var(--color-text-primary);
+ margin: 0 0 var(--spacing-lg) 0;
}
.section-description {
- font-size: 1rem;
- color: #666;
- margin: 0 0 32px 0;
- line-height: 1.5;
+ font-size: var(--font-size-base);
+ color: var(--color-text-secondary);
+ margin: 0 0 var(--spacing-8) 0;
+ line-height: var(--line-height-relaxed);
}
/* Skills Grid */
.skills-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
- gap: 16px;
- margin-bottom: 32px;
+ gap: var(--spacing-lg);
+ margin-bottom: var(--spacing-8);
}
.skill-interest-item {
- background: #f8f9fa;
- border: 1px solid #e0e0e0;
- border-radius: 8px;
- padding: 24px;
+ background: var(--color-background-light);
+ border: var(--border-width-thin) solid var(--color-border);
+ border-radius: var(--radius-card);
+ padding: var(--spacing-2xl);
text-align: center;
- transition: all 0.2s;
+ transition: var(--transition-all);
cursor: pointer;
position: relative;
}
.skill-interest-item:hover {
- background: #f0f0f0;
- border-color: #d0d0d0;
+ background: var(--color-background-hover);
+ border-color: var(--color-border-dark);
}
.skill-interest-item:hover .delete-skill-btn {
@@ -152,20 +152,20 @@
}
.skill-name {
- font-size: 1rem;
- font-weight: 500;
- color: #333;
+ font-size: var(--font-size-base);
+ font-weight: var(--font-weight-medium);
+ color: var(--color-text-primary);
}
/* Delete Skill Button */
.delete-skill-btn {
position: absolute;
- top: 8px;
- right: 8px;
+ top: var(--spacing-sm);
+ right: var(--spacing-sm);
background: rgba(102, 102, 102, 0.9);
- color: white;
+ color: var(--color-text-inverse);
border: none;
- border-radius: 4px;
+ border-radius: var(--radius-sm);
width: 28px;
height: 28px;
display: flex;
@@ -174,9 +174,9 @@
cursor: pointer;
opacity: 0;
visibility: hidden;
- transition: all 0.2s;
+ transition: var(--transition-all);
z-index: 2;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+ box-shadow: var(--shadow-sm);
}
.delete-skill-btn:hover {
@@ -205,12 +205,12 @@
position: absolute;
top: 50%;
left: 50%;
- width: 20px;
- height: 20px;
+ width: var(--spacing-xl);
+ height: var(--spacing-xl);
margin: -10px 0 0 -10px;
- border: 2px solid #ccc;
- border-top-color: #4f46e5;
- border-radius: 50%;
+ border: var(--border-width-medium) solid var(--color-neutral-400);
+ border-top-color: var(--color-primary-600);
+ border-radius: var(--radius-full);
animation: spin 1s linear infinite;
}
@@ -240,26 +240,26 @@
}
.tooltip-content {
- background: #333;
- color: white;
- padding: 16px;
- border-radius: 8px;
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+ background: var(--color-neutral-1100);
+ color: var(--color-text-inverse);
+ padding: var(--spacing-lg);
+ border-radius: var(--radius-card);
+ box-shadow: var(--shadow-3xl);
min-width: 200px;
text-align: left;
}
.tooltip-content h4 {
- margin: 0 0 8px 0;
- font-size: 1rem;
- font-weight: 600;
- color: white;
+ margin: 0 0 var(--spacing-sm) 0;
+ font-size: var(--font-size-base);
+ font-weight: var(--font-weight-semibold);
+ color: var(--color-text-inverse);
}
.tooltip-content p {
- margin: 0 0 12px 0;
- font-size: 0.875rem;
- color: #ccc;
+ margin: 0 0 var(--spacing-md) 0;
+ font-size: var(--font-size-sm);
+ color: var(--color-neutral-400);
}
@@ -270,20 +270,20 @@
transform: translateX(-50%);
width: 0;
height: 0;
- border-left: 8px solid transparent;
- border-right: 8px solid transparent;
- border-top: 8px solid #333;
+ border-left: var(--spacing-sm) solid transparent;
+ border-right: var(--spacing-sm) solid transparent;
+ border-top: var(--spacing-sm) solid var(--color-neutral-1100);
}
/* No Skills State */
.no-skills {
text-align: center;
- padding: 40px 20px;
- color: #666;
+ padding: var(--spacing-4xl) var(--spacing-xl);
+ color: var(--color-text-secondary);
}
.no-skills p {
- font-size: 1rem;
+ font-size: var(--font-size-base);
margin: 0;
}
@@ -294,73 +294,73 @@
}
.modify-interest-btn {
- background: #4f46e5;
- color: white;
+ background: var(--color-primary-600);
+ color: var(--color-text-inverse);
border: none;
- padding: 12px 24px;
- border-radius: 6px;
- font-size: 0.875rem;
- font-weight: 500;
+ padding: var(--spacing-md) var(--spacing-2xl);
+ border-radius: var(--radius-md);
+ font-size: var(--font-size-sm);
+ font-weight: var(--font-weight-medium);
cursor: pointer;
- transition: background-color 0.2s;
+ transition: var(--transition-colors);
}
.modify-interest-btn:hover {
- background: #4338ca;
+ background: var(--color-primary-700);
}
/* Profile Footer */
.profile-footer {
- padding: 40px;
- background: white;
- border-top: 1px solid #e0e0e0;
+ padding: var(--spacing-4xl);
+ background: var(--color-background);
+ border-top: var(--border-width-thin) solid var(--color-border);
display: flex;
justify-content: flex-end;
}
.save-changes-btn {
- background: #4f46e5;
- color: white;
+ background: var(--color-primary-600);
+ color: var(--color-text-inverse);
border: none;
- padding: 14px 28px;
- border-radius: 6px;
- font-size: 1rem;
- font-weight: 500;
+ padding: var(--spacing-4) 28px;
+ border-radius: var(--radius-md);
+ font-size: var(--font-size-base);
+ font-weight: var(--font-weight-medium);
cursor: pointer;
- transition: background-color 0.2s;
+ transition: var(--transition-colors);
}
.save-changes-btn:hover {
- background: #4338ca;
+ background: var(--color-primary-700);
}
/* Loading and Error States */
.loading {
text-align: center;
- padding: 60px 20px;
+ padding: 60px var(--spacing-xl);
font-size: 1.1rem;
- color: #666;
+ color: var(--color-text-secondary);
}
.error {
text-align: center;
- padding: 60px 20px;
+ padding: 60px var(--spacing-xl);
font-size: 1.1rem;
- color: #dc3545;
- background: #f8d7da;
- border: 1px solid #f5c6cb;
- border-radius: 8px;
- margin: 20px;
+ color: var(--color-error);
+ background: var(--color-error-bg);
+ border: var(--border-width-thin) solid var(--color-error-border);
+ border-radius: var(--radius-card);
+ margin: var(--spacing-xl);
}
/* Responsive Design */
@media (max-width: 768px) {
.profile {
- padding: 20px 10px;
+ padding: var(--spacing-xl) 10px;
}
.profile-header {
- padding: 30px 20px 15px 20px;
+ padding: var(--spacing-8) var(--spacing-xl) var(--spacing-4) var(--spacing-xl);
}
.profile-title {
@@ -368,14 +368,14 @@
}
.user-info-section {
- padding: 15px 20px 30px 20px;
+ padding: var(--spacing-4) var(--spacing-xl) var(--spacing-8) var(--spacing-xl);
flex-direction: column;
align-items: center;
text-align: center;
}
.user-details {
- padding-top: 16px;
+ padding-top: var(--spacing-lg);
}
.user-name {
@@ -384,11 +384,11 @@
.change-image-btn {
position: static;
- margin-top: 16px;
+ margin-top: var(--spacing-lg);
}
.skills-section {
- padding: 30px 20px;
+ padding: var(--spacing-8) var(--spacing-xl);
}
.section-title {
@@ -397,15 +397,15 @@
.skills-grid {
grid-template-columns: 1fr;
- gap: 12px;
+ gap: var(--spacing-md);
}
.skill-interest-item {
- padding: 20px;
+ padding: var(--spacing-xl);
}
.profile-footer {
- padding: 30px 20px;
+ padding: var(--spacing-8) var(--spacing-xl);
}
.save-changes-btn {
@@ -425,97 +425,97 @@
}
.user-email {
- font-size: 0.875rem;
+ font-size: var(--font-size-sm);
}
.skill-interest-item {
- padding: 16px;
+ padding: var(--spacing-lg);
}
.skill-name {
- font-size: 0.875rem;
+ font-size: var(--font-size-sm);
}
}
/* Skill Selection Styles */
.skill-selection-item {
- background: #f8f9fa;
- border: 1px solid #e0e0e0;
- border-radius: 8px;
- padding: 24px;
+ background: var(--color-background-light);
+ border: var(--border-width-thin) solid var(--color-border);
+ border-radius: var(--radius-card);
+ padding: var(--spacing-2xl);
text-align: center;
- transition: all 0.2s;
+ transition: var(--transition-all);
cursor: pointer;
position: relative;
}
.skill-selection-item:hover {
- background: #f0f0f0;
- border-color: #d0d0d0;
+ background: var(--color-background-hover);
+ border-color: var(--color-border-dark);
}
.skill-selection-item.selected {
background: #e3f2fd;
- border: 2px solid #4f46e5;
- border-color: #4f46e5;
+ border: var(--border-width-medium) solid var(--color-primary-600);
+ border-color: var(--color-primary-600);
}
.skill-selection-item.selected .skill-name {
- color: #4f46e5;
- font-weight: 600;
+ color: var(--color-primary-600);
+ font-weight: var(--font-weight-semibold);
}
/* Skill Selection Actions */
.skill-selection-actions {
display: flex;
- gap: 16px;
- margin-top: 32px;
+ gap: var(--spacing-lg);
+ margin-top: var(--spacing-8);
justify-content: flex-start;
}
.add-interest-btn {
- background: #4f46e5;
- color: white;
+ background: var(--color-primary-600);
+ color: var(--color-text-inverse);
border: none;
- padding: 12px 24px;
- border-radius: 6px;
- font-size: 0.875rem;
- font-weight: 500;
+ padding: var(--spacing-md) var(--spacing-2xl);
+ border-radius: var(--radius-md);
+ font-size: var(--font-size-sm);
+ font-weight: var(--font-weight-medium);
cursor: pointer;
- transition: all 0.2s;
+ transition: var(--transition-all);
}
.add-interest-btn:hover:not(:disabled) {
- background: #4338ca;
+ background: var(--color-primary-700);
}
.add-interest-btn:disabled {
- background: #9ca3af;
+ background: var(--color-neutral-700);
cursor: not-allowed;
}
.cancel-selection-btn {
background: transparent;
- color: #4f46e5;
- border: 2px solid #4f46e5;
- padding: 10px 24px;
- border-radius: 6px;
- font-size: 0.875rem;
- font-weight: 500;
+ color: var(--color-primary-600);
+ border: var(--border-width-medium) solid var(--color-primary-600);
+ padding: var(--spacing-4) var(--spacing-2xl);
+ border-radius: var(--radius-md);
+ font-size: var(--font-size-sm);
+ font-weight: var(--font-weight-medium);
cursor: pointer;
- transition: all 0.2s;
+ transition: var(--transition-all);
}
.cancel-selection-btn:hover {
- background: #4f46e5;
- color: white;
+ background: var(--color-primary-600);
+ color: var(--color-text-inverse);
}
/* Animation for skill items */
@keyframes fadeIn {
from {
opacity: 0;
- transform: translateY(10px);
+ transform: translateY(var(--spacing-4));
}
to {
opacity: 1;
@@ -525,18 +525,18 @@
.skill-interest-item,
.skill-selection-item {
- animation: fadeIn 0.3s ease-out;
+ animation: fadeIn var(--transition-slow) var(--ease-out);
}
/* Focus states for accessibility */
.modify-interest-btn:focus,
.save-changes-btn:focus,
.change-image-btn:focus {
- outline: 2px solid #4f46e5;
- outline-offset: 2px;
+ outline: var(--border-width-medium) solid var(--color-primary-600);
+ outline-offset: var(--spacing-0);
}
.skill-interest-item:focus {
- outline: 2px solid #4f46e5;
- outline-offset: 2px;
+ outline: var(--border-width-medium) solid var(--color-primary-600);
+ outline-offset: var(--spacing-0);
}
diff --git a/blocks/recommendation/recommendation.css b/blocks/recommendation/recommendation.css
index d2f52c5..085f6f3 100644
--- a/blocks/recommendation/recommendation.css
+++ b/blocks/recommendation/recommendation.css
@@ -1,8 +1,8 @@
/* Recommendation Block Container */
.recommendation {
- max-width: 1400px;
+ max-width: var(--container-2xl);
margin: 0 auto;
- padding: 40px 20px;
+ padding: var(--spacing-4xl) var(--spacing-xl);
}
/* Recommendations Container */
@@ -15,68 +15,68 @@
display: flex;
justify-content: space-between;
align-items: center;
- margin-bottom: 32px;
- gap: 20px;
+ margin-bottom: var(--spacing-8);
+ gap: var(--spacing-xl);
}
.recommendation .recommendations-header h2 {
- font-size: 24px;
- font-weight: 400;
- color: #2c2c2c;
+ font-size: var(--font-size-xl);
+ font-weight: var(--font-weight-normal);
+ color: var(--color-text-dark);
margin: 0;
flex: 1;
- line-height: 1.3;
+ line-height: var(--line-height-normal);
}
.recommendation .navigation-arrows {
display: flex;
- gap: 12px;
+ gap: var(--spacing-md);
}
/* Navigation buttons styled like myLearning - circular with arrow pseudo-elements */
.recommendation .nav-arrow {
- width: 48px;
- height: 48px;
- border: 1px solid #d0d0d0;
- border-radius: 50%;
- background: white;
+ width: var(--spacing-10);
+ height: var(--spacing-10);
+ border: var(--border-width-thin) solid var(--color-border-dark);
+ border-radius: var(--radius-full);
+ background: var(--color-background);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
- transition: all 0.3s ease;
+ transition: var(--transition-all);
padding: 0;
margin: 0;
}
.recommendation .nav-arrow:hover {
- background: #f5f5f5;
- border-color: #999;
+ background: var(--color-background-gray);
+ border-color: var(--color-neutral-700);
}
.recommendation .nav-arrow:disabled {
opacity: 0.3;
cursor: not-allowed;
- background: white;
+ background: var(--color-background);
}
.recommendation .nav-arrow::before {
content: '';
display: block;
- width: 12px;
- height: 12px;
- border-top: 2px solid #333;
- border-right: 2px solid #333;
+ width: var(--spacing-md);
+ height: var(--spacing-md);
+ border-top: var(--border-width-medium) solid var(--color-neutral-1100);
+ border-right: var(--border-width-medium) solid var(--color-neutral-1100);
}
.recommendation .nav-arrow.prev::before {
transform: rotate(-135deg);
- margin-left: 4px;
+ margin-left: var(--spacing-1);
}
.recommendation .nav-arrow.next::before {
transform: rotate(45deg);
- margin-right: 4px;
+ margin-right: var(--spacing-1);
}
/* Scroll Container */
@@ -95,26 +95,26 @@
/* Grid Layout */
.recommendation .recommendations-grid {
display: flex;
- gap: 24px;
- padding-bottom: 20px;
+ gap: var(--spacing-2xl);
+ padding-bottom: var(--spacing-xl);
}
/* Card Styling */
.recommendation .recommendation-card {
flex: 0 0 380px; /* Fixed width for consistent scrolling */
- background: #ffffff;
- border-radius: 8px;
+ background: var(--color-background);
+ border-radius: var(--radius-card);
overflow: hidden;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
- transition: box-shadow 0.3s ease, transform 0.2s ease;
+ box-shadow: var(--shadow-md);
+ transition: var(--transition-shadow), var(--transition-transform);
display: flex;
flex-direction: column;
- border: 1px solid #e8e8e8;
+ border: var(--border-width-thin) solid var(--color-border-light);
height: auto;
}
.recommendation .recommendation-card:hover {
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+ box-shadow: var(--shadow-xl);
transform: translateY(-2px);
}
@@ -124,7 +124,7 @@
width: 100%;
height: 220px;
overflow: hidden;
- background: #e8e8e8;
+ background: var(--color-border-light);
}
.recommendation .card-image picture,
@@ -138,62 +138,62 @@
/* Badge styling - matches myLearning */
.recommendation .recommendation-badge {
position: absolute;
- top: 12px;
- right: 12px;
+ top: var(--spacing-md);
+ right: var(--spacing-md);
width: 44px;
height: 44px;
- background: rgba(100, 100, 100, 0.85);
- border-radius: 50%;
+ background: var(--color-overlay-dark);
+ border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
- color: white;
- font-size: 14px;
- font-weight: 600;
+ color: var(--color-text-inverse);
+ font-size: var(--font-size-sm);
+ font-weight: var(--font-weight-semibold);
}
/* Badge with rating - positioned on left like myLearning */
.recommendation .recommendation-badge.has-rating {
width: auto;
height: auto;
- background: rgba(255, 255, 255, 0.95);
- border-radius: 20px;
- padding: 6px 12px;
+ background: var(--color-overlay-white);
+ border-radius: var(--radius-button-sm);
+ padding: var(--spacing-2) var(--spacing-md);
display: flex;
align-items: center;
- gap: 6px;
- top: 12px;
- left: 12px;
+ gap: var(--spacing-2);
+ top: var(--spacing-md);
+ left: var(--spacing-md);
right: auto;
}
.recommendation .recommendation-stars {
display: flex;
- gap: 2px;
+ gap: var(--spacing-0);
}
.recommendation .recommendation-star {
- font-size: 16px;
- color: #ddd;
+ font-size: var(--font-size-sm);
+ color: var(--color-neutral-400);
}
.recommendation .recommendation-star.filled {
- color: #ffc107;
+ color: var(--color-warning-light);
}
.recommendation .recommendation-rating-count {
- font-size: 14px;
- font-weight: 600;
- color: #333;
- margin-left: 4px;
+ font-size: var(--font-size-sm);
+ font-weight: var(--font-weight-semibold);
+ color: var(--color-text-primary);
+ margin-left: var(--spacing-1);
}
/* Card Content */
.recommendation .card-content {
- padding: 20px 24px 24px;
+ padding: var(--spacing-xl) var(--spacing-2xl) var(--spacing-2xl);
display: flex;
flex-direction: column;
- gap: 12px;
+ gap: var(--spacing-md);
flex: 1;
}
@@ -201,14 +201,14 @@
display: flex;
justify-content: space-between;
align-items: flex-start;
- gap: 12px;
+ gap: var(--spacing-md);
}
.recommendation .card-title {
- font-size: 18px;
- font-weight: 600;
- color: #2c2c2c;
- line-height: 1.4;
+ font-size: var(--font-size-lg);
+ font-weight: var(--font-weight-semibold);
+ color: var(--color-text-dark);
+ line-height: var(--line-height-normal);
margin: 0;
flex: 1;
}
@@ -218,10 +218,10 @@
border: none;
cursor: pointer;
padding: 0;
- width: 24px;
- height: 24px;
+ width: var(--spacing-2xl);
+ height: var(--spacing-2xl);
flex-shrink: 0;
- transition: transform 0.2s ease;
+ transition: var(--transition-transform);
}
.recommendation .add-button:hover {
@@ -238,88 +238,88 @@
.recommendation .card-meta {
display: flex;
align-items: center;
- gap: 8px;
- font-size: 14px;
- color: #6e6e6e;
+ gap: var(--spacing-sm);
+ font-size: var(--font-size-sm);
+ color: var(--color-text-quaternary);
flex-wrap: wrap;
}
.recommendation .card-meta .separator {
- color: #d4d4d4;
- margin: 0 4px;
+ color: var(--color-border-darker);
+ margin: 0 var(--spacing-1);
}
.recommendation .card-meta .date {
- font-weight: 500;
- color: #2c2c2c;
+ font-weight: var(--font-weight-medium);
+ color: var(--color-text-dark);
}
.recommendation .card-meta .author,
.recommendation .card-meta .duration {
- color: #6e6e6e;
+ color: var(--color-text-quaternary);
}
/* Label */
.recommendation .card-label {
- font-size: 14px;
- color: #6e6e6e;
- margin: 4px 0 12px 0;
+ font-size: var(--font-size-sm);
+ color: var(--color-text-quaternary);
+ margin: var(--spacing-1) 0 var(--spacing-md) 0;
}
/* Actions */
.recommendation .card-actions {
display: flex;
align-items: center;
- gap: 12px;
+ gap: var(--spacing-md);
margin-top: auto;
}
.recommendation .action-button {
flex: 1;
- padding: 12px 24px;
- border: 2px solid #0D66D0;
- background: #ffffff;
- color: #0D66D0;
- font-size: 14px;
- font-weight: 600;
- letter-spacing: 0.5px;
- border-radius: 24px;
+ padding: var(--spacing-md) var(--spacing-2xl);
+ border: var(--border-width-medium) solid var(--color-blue-600);
+ background: var(--color-background);
+ color: var(--color-blue-600);
+ font-size: var(--font-size-sm);
+ font-weight: var(--font-weight-semibold);
+ letter-spacing: var(--letter-spacing-wider);
+ border-radius: var(--radius-3xl);
cursor: pointer;
- transition: all 0.2s ease;
+ transition: var(--transition-all);
text-decoration: none;
text-align: center;
display: block;
}
.recommendation .action-button:hover {
- background: #0D66D0;
- color: #ffffff;
+ background: var(--color-blue-600);
+ color: var(--color-text-inverse);
}
.recommendation .more-options {
- width: 40px;
- height: 40px;
- border: 1px solid #d4d4d4;
- background: #ffffff;
- border-radius: 50%;
+ width: var(--spacing-4xl);
+ height: var(--spacing-4xl);
+ border: var(--border-width-thin) solid var(--color-border-darker);
+ background: var(--color-background);
+ border-radius: var(--radius-full);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
- font-size: 20px;
- color: #6e6e6e;
- transition: all 0.2s ease;
+ font-size: var(--spacing-xl);
+ color: var(--color-text-quaternary);
+ transition: var(--transition-all);
flex-shrink: 0;
}
.recommendation .more-options:hover {
- background: #f5f5f5;
- border-color: #b8b8b8;
+ background: var(--color-background-gray);
+ border-color: var(--color-neutral-700);
}
/* Go To Catalog card styles */
.recommendation .recommendation-card-goto {
- background: #f5f5f5;
+ background: var(--color-background-gray);
display: flex;
align-items: center;
justify-content: center;
@@ -333,7 +333,7 @@
align-items: center;
justify-content: center;
text-decoration: none;
- padding: 40px 20px;
+ padding: var(--spacing-4xl) var(--spacing-xl);
}
.recommendation .recommendation-goto-body {
@@ -345,14 +345,14 @@
}
.recommendation .recommendation-goto-title {
- color: #1473e6;
- font-size: 24px;
- font-weight: 400;
+ color: var(--color-blue-500);
+ font-size: var(--font-size-xl);
+ font-weight: var(--font-weight-normal);
margin: 0;
}
.recommendation .recommendation-card-goto:hover {
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+ box-shadow: var(--shadow-lg);
}
.recommendation .recommendation-card-goto:hover .recommendation-goto-title {
@@ -365,16 +365,16 @@
bottom: 0;
left: 0;
right: 0;
- background: white;
- border-radius: 0 0 8px 8px;
- box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
+ background: var(--color-background);
+ border-radius: 0 0 var(--radius-card) var(--radius-card);
+ box-shadow: var(--shadow-xl);
z-index: 10;
- animation: slideUp 0.2s ease-out;
+ animation: slideUp var(--transition-base) var(--ease-out);
}
@keyframes slideUp {
from {
- transform: translateY(20px);
+ transform: translateY(var(--spacing-xl));
opacity: 0;
}
to {
@@ -385,29 +385,29 @@
.recommendation .bookmark-overlay-content {
position: relative;
- padding: 20px 24px;
+ padding: var(--spacing-xl) var(--spacing-2xl);
}
.recommendation .bookmark-overlay-close {
position: absolute;
- top: 12px;
- right: 12px;
- width: 32px;
- height: 32px;
- border-radius: 50%;
- background: #f5f5f5;
+ top: var(--spacing-md);
+ right: var(--spacing-md);
+ width: var(--spacing-8);
+ height: var(--spacing-8);
+ border-radius: var(--radius-full);
+ background: var(--color-background-gray);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
- font-size: 18px;
- color: #333;
- transition: background 0.2s ease;
+ font-size: var(--font-size-lg);
+ color: var(--color-text-primary);
+ transition: var(--transition-colors);
}
.recommendation .bookmark-overlay-close:hover {
- background: #e0e0e0;
+ background: var(--color-border);
}
.recommendation .bookmark-button {
@@ -418,10 +418,10 @@
cursor: pointer;
display: flex;
align-items: center;
- gap: 12px;
- font-size: 16px;
- color: #333;
- transition: opacity 0.2s ease;
+ gap: var(--spacing-md);
+ font-size: var(--font-size-sm);
+ color: var(--color-text-primary);
+ transition: var(--transition-opacity);
}
.recommendation .bookmark-button:hover {
@@ -441,9 +441,9 @@
.recommendation .loading-state,
.recommendation .error-state {
text-align: center;
- padding: 40px;
- color: #707070;
- font-size: 16px;
+ padding: var(--spacing-4xl);
+ color: var(--color-text-tertiary);
+ font-size: var(--font-size-sm);
}
/* Responsive Design */
@@ -455,17 +455,17 @@
@media (max-width: 768px) {
.recommendation {
- padding: 20px 16px;
+ padding: var(--spacing-xl) var(--spacing-lg);
}
.recommendation .recommendations-header {
flex-direction: column;
align-items: flex-start;
- gap: 16px;
+ gap: var(--spacing-lg);
}
.recommendation .recommendations-header h2 {
- font-size: 20px;
+ font-size: var(--font-size-lg);
}
.recommendation .navigation-arrows {
@@ -473,8 +473,8 @@
}
.recommendation .nav-arrow {
- width: 40px;
- height: 40px;
+ width: var(--spacing-4xl);
+ height: var(--spacing-4xl);
}
.recommendation .nav-arrow::before {
@@ -491,26 +491,26 @@
}
.recommendation .card-content {
- padding: 16px 20px 20px;
+ padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-xl);
}
.recommendation .card-title {
- font-size: 16px;
+ font-size: var(--font-size-sm);
}
.recommendation .action-button {
- padding: 10px 20px;
+ padding: var(--spacing-4) var(--spacing-xl);
font-size: 13px;
}
}
@media (max-width: 480px) {
.recommendation {
- padding: 16px 12px;
+ padding: var(--spacing-lg) var(--spacing-md);
}
.recommendation .recommendations-header h2 {
- font-size: 18px;
+ font-size: var(--font-size-base);
}
.recommendation .recommendation-card {
@@ -518,18 +518,18 @@
}
.recommendation .recommendations-grid {
- gap: 16px;
+ gap: var(--spacing-lg);
}
.recommendation .navigation-arrows {
- gap: 8px;
+ gap: var(--spacing-sm);
}
}
/* Skill sections */
.recommendation .skill-section {
display: none;
- margin-bottom: 40px;
+ margin-bottom: var(--spacing-4xl);
}
.recommendation .skill-section.visible {
@@ -543,22 +543,22 @@
/* Show more/Show less button */
.recommendation .show-more-button {
display: block;
- margin: 40px auto 0;
- padding: 12px 32px;
- background: white;
- border: 2px solid #0D66D0;
- border-radius: 24px;
- color: #0D66D0;
- font-size: 14px;
- font-weight: 600;
+ margin: var(--spacing-4xl) auto 0;
+ padding: var(--spacing-md) var(--spacing-8);
+ background: var(--color-background);
+ border: var(--border-width-medium) solid var(--color-blue-600);
+ border-radius: var(--radius-3xl);
+ color: var(--color-blue-600);
+ font-size: var(--font-size-sm);
+ font-weight: var(--font-weight-semibold);
cursor: pointer;
- transition: all 0.2s ease;
- letter-spacing: 0.5px;
+ transition: var(--transition-all);
+ letter-spacing: var(--letter-spacing-wider);
}
.recommendation .show-more-button:hover {
- background: #0D66D0;
- color: white;
+ background: var(--color-blue-600);
+ color: var(--color-text-inverse);
}
/* Container expanded state */
diff --git a/head.html b/head.html
index f55175f..daf780d 100644
--- a/head.html
+++ b/head.html
@@ -6,4 +6,5 @@
+
diff --git a/styles/tokens.css b/styles/tokens.css
new file mode 100644
index 0000000..4b276c5
--- /dev/null
+++ b/styles/tokens.css
@@ -0,0 +1,331 @@
+/*
+ * Design Tokens
+ *
+ * This file contains all design system tokens (CSS custom properties) used across the application.
+ * These tokens provide a single source of truth for colors, spacing, typography, borders, shadows, and transitions.
+ *
+ * Usage: Use these tokens in component CSS files instead of hardcoded values.
+ * Example: color: var(--color-primary-600); instead of color: #4f46e5;
+ */
+
+:root {
+ /* ============================================
+ COLOR SYSTEM
+ ============================================ */
+
+ /* Primary Colors (Blue variants) */
+ --color-primary-50: #eef2ff;
+ --color-primary-100: #e0e7ff;
+ --color-primary-200: #c7d2fe;
+ --color-primary-300: #a5b4fc;
+ --color-primary-400: #818cf8;
+ --color-primary-500: #6366f1;
+ --color-primary-600: #4f46e5; /* Main primary color */
+ --color-primary-700: #4338ca; /* Primary hover/dark */
+ --color-primary-800: #3730a3;
+ --color-primary-900: #312e81;
+
+ /* Alternative Primary Blues */
+ --color-blue-500: #1473e6;
+ --color-blue-600: #0D66D0;
+ --color-blue-700: #0052a3;
+ --color-blue-800: #0066cc;
+ --color-link: #3b63fb;
+ --color-link-hover: #1d3ecf;
+
+ /* Neutral Colors (Gray scale) */
+ --color-neutral-50: #fafafa;
+ --color-neutral-100: #f5f5f5;
+ --color-neutral-200: #f0f0f0;
+ --color-neutral-300: #e8e8e8;
+ --color-neutral-400: #e0e0e0;
+ --color-neutral-500: #d0d0d0;
+ --color-neutral-600: #d4d4d4;
+ --color-neutral-700: #999;
+ --color-neutral-800: #707070;
+ --color-neutral-900: #6e6e6e;
+ --color-neutral-950: #666;
+ --color-neutral-1000: #505050;
+ --color-neutral-1100: #333;
+ --color-neutral-1200: #2c2c2c;
+ --color-neutral-1300: #131313;
+
+ /* Semantic Colors */
+ --color-success: #4caf50;
+ --color-success-light: #2e7d32;
+ --color-success-bg: #e8f5e8;
+ --color-success-border: #c8e6c9;
+
+ --color-warning: #ff9800;
+ --color-warning-light: #ffc107;
+ --color-warning-bg: #fff3e0;
+ --color-warning-border: #ffcc02;
+ --color-warning-text: #f57c00;
+
+ --color-error: #dc3545;
+ --color-error-light: #c62828;
+ --color-error-bg: #f8d7da;
+ --color-error-border: #f5c6cb;
+ --color-error-border-alt: #ffcdd2;
+
+ --color-info: #4285f4;
+
+ /* Background Colors */
+ --color-background: white;
+ --color-background-light: #f8f9fa;
+ --color-background-lighter: #f8f8f8;
+ --color-background-gray: #f5f5f5;
+ --color-background-hover: #f0f0f0;
+
+ /* Text Colors */
+ --color-text: #131313;
+ --color-text-primary: #333;
+ --color-text-secondary: #666;
+ --color-text-tertiary: #707070;
+ --color-text-quaternary: #6e6e6e;
+ --color-text-muted: #64748b;
+ --color-text-light: #475569;
+ --color-text-dark: #2c2c2c;
+ --color-text-inverse: white;
+
+ /* Border Colors */
+ --color-border: #e0e0e0;
+ --color-border-light: #e8e8e8;
+ --color-border-lighter: #f0f0f0;
+ --color-border-dark: #d0d0d0;
+ --color-border-darker: #d4d4d4;
+ --color-border-hover: #999;
+ --color-border-focus: #4f46e5;
+
+ /* Overlay Colors */
+ --color-overlay: rgba(0, 0, 0, 0.8);
+ --color-overlay-light: rgba(0, 0, 0, 0.3);
+ --color-overlay-dark: rgba(100, 100, 100, 0.85);
+ --color-overlay-white: rgba(255, 255, 255, 0.95);
+ --color-overlay-white-light: rgba(255, 255, 255, 0.2);
+ --color-overlay-white-medium: rgba(255, 255, 255, 0.3);
+
+ /* ============================================
+ SPACING SYSTEM
+ ============================================ */
+
+ /* Base Spacing Scale (4px increments) */
+ --spacing-0: 0;
+ --spacing-1: 4px;
+ --spacing-2: 6px;
+ --spacing-3: 8px;
+ --spacing-4: 12px;
+ --spacing-5: 16px;
+ --spacing-6: 20px;
+ --spacing-7: 24px;
+ --spacing-8: 32px;
+ --spacing-9: 40px;
+ --spacing-10: 48px;
+ --spacing-11: 56px;
+ --spacing-12: 64px;
+
+ /* Semantic Spacing */
+ --spacing-xs: var(--spacing-1); /* 4px */
+ --spacing-sm: var(--spacing-3); /* 8px */
+ --spacing-md: var(--spacing-4); /* 12px */
+ --spacing-lg: var(--spacing-5); /* 16px */
+ --spacing-xl: var(--spacing-6); /* 20px */
+ --spacing-2xl: var(--spacing-7); /* 24px */
+ --spacing-3xl: var(--spacing-8); /* 32px */
+ --spacing-4xl: var(--spacing-9); /* 40px */
+
+ /* Component-specific Spacing */
+ --spacing-card-padding: var(--spacing-6);
+ --spacing-card-padding-sm: var(--spacing-5);
+ --spacing-section-padding: var(--spacing-9);
+ --spacing-section-padding-sm: var(--spacing-6);
+ --spacing-button-padding-x: var(--spacing-7);
+ --spacing-button-padding-y: var(--spacing-4);
+ --spacing-button-padding-y-sm: var(--spacing-3);
+ --spacing-input-padding-x: var(--spacing-4);
+ --spacing-input-padding-y: var(--spacing-3);
+
+ /* ============================================
+ TYPOGRAPHY
+ ============================================ */
+
+ /* Font Families (from existing styles.css) */
+ --font-family-body: roboto, roboto-fallback, sans-serif;
+ --font-family-heading: roboto-condensed, roboto-condensed-fallback, sans-serif;
+ --font-family-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+
+ /* Font Weights */
+ --font-weight-normal: 400;
+ --font-weight-medium: 500;
+ --font-weight-semibold: 600;
+ --font-weight-bold: 700;
+
+ /* Font Sizes (from existing styles.css, expanded) */
+ --font-size-xs: 14px;
+ --font-size-sm: 16px;
+ --font-size-base: 18px;
+ --font-size-lg: 20px;
+ --font-size-xl: 24px;
+ --font-size-2xl: 28px;
+ --font-size-3xl: 32px;
+ --font-size-4xl: 36px;
+ --font-size-5xl: 44px;
+ --font-size-6xl: 45px;
+ --font-size-7xl: 55px;
+
+ /* Body Font Sizes (from existing styles.css) */
+ --body-font-size-xs: 17px;
+ --body-font-size-s: 19px;
+ --body-font-size-m: 22px;
+
+ /* Heading Font Sizes (from existing styles.css) */
+ --heading-font-size-xs: 22px;
+ --heading-font-size-s: 24px;
+ --heading-font-size-m: 27px;
+ --heading-font-size-l: 34px;
+ --heading-font-size-xl: 44px;
+ --heading-font-size-xxl: 55px;
+
+ /* Line Heights */
+ --line-height-tight: 1.2;
+ --line-height-normal: 1.4;
+ --line-height-relaxed: 1.5;
+ --line-height-loose: 1.6;
+ --line-height-base: 1.25;
+
+ /* Letter Spacing */
+ --letter-spacing-tight: -0.025em;
+ --letter-spacing-normal: 0;
+ --letter-spacing-wide: 0.025em;
+ --letter-spacing-wider: 0.5px;
+
+ /* ============================================
+ BORDERS & RADIUS
+ ============================================ */
+
+ /* Border Width */
+ --border-width-none: 0;
+ --border-width-thin: 1px;
+ --border-width-medium: 2px;
+ --border-width-thick: 4px;
+
+ /* Border Radius */
+ --radius-none: 0;
+ --radius-sm: 4px;
+ --radius-md: 6px;
+ --radius-lg: 8px;
+ --radius-xl: 12px;
+ --radius-2xl: 20px;
+ --radius-3xl: 24px;
+ --radius-4xl: 25px;
+ --radius-full: 50%;
+ --radius-button: 25px;
+ --radius-button-sm: 20px;
+ --radius-card: 8px;
+ --radius-input: 5px;
+
+ /* ============================================
+ SHADOWS
+ ============================================ */
+
+ /* Elevation Levels */
+ --shadow-none: none;
+ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
+ --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
+ --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
+ --shadow-xl: 0 4px 16px rgba(0, 0, 0, 0.15);
+ --shadow-2xl: 0 8px 30px rgba(0, 0, 0, 0.15);
+ --shadow-3xl: 0 20px 40px rgba(0, 0, 0, 0.3);
+
+ /* Colored Shadows */
+ --shadow-primary: 0 4px 12px rgba(0, 102, 204, 0.3);
+ --shadow-primary-sm: 0 2px 10px rgba(0, 0, 0, 0.1);
+ --shadow-primary-lg: 0 2px 15px rgba(0, 0, 0, 0.08);
+
+ /* ============================================
+ TRANSITIONS
+ ============================================ */
+
+ /* Duration */
+ --transition-fast: 0.15s;
+ --transition-base: 0.2s;
+ --transition-slow: 0.3s;
+ --transition-slower: 0.4s;
+
+ /* Easing Functions */
+ --ease-linear: linear;
+ --ease-in: ease-in;
+ --ease-out: ease-out;
+ --ease-in-out: ease-in-out;
+ --ease-default: ease;
+
+ /* Common Transitions */
+ --transition-all: all var(--transition-base) var(--ease-default);
+ --transition-colors: color var(--transition-base) var(--ease-default), background-color var(--transition-base) var(--ease-default), border-color var(--transition-base) var(--ease-default);
+ --transition-opacity: opacity var(--transition-base) var(--ease-default);
+ --transition-transform: transform var(--transition-base) var(--ease-default);
+ --transition-shadow: box-shadow var(--transition-base) var(--ease-default);
+
+ /* ============================================
+ Z-INDEX SCALE
+ ============================================ */
+
+ --z-index-base: 0;
+ --z-index-dropdown: 1000;
+ --z-index-sticky: 1020;
+ --z-index-fixed: 1030;
+ --z-index-modal-backdrop: 1040;
+ --z-index-modal: 1050;
+ --z-index-popover: 1060;
+ --z-index-tooltip: 1070;
+ --z-index-max: 10000;
+
+ /* ============================================
+ LAYOUT
+ ============================================ */
+
+ /* Container Widths */
+ --container-sm: 640px;
+ --container-md: 768px;
+ --container-lg: 1024px;
+ --container-xl: 1280px;
+ --container-2xl: 1400px;
+ --container-max: 1200px;
+
+ /* Nav Heights */
+ --nav-height: 64px;
+ --breadcrumbs-height: 34px;
+ --header-height: var(--nav-height);
+
+ /* ============================================
+ RESPONSIVE BREAKPOINTS
+ ============================================ */
+
+ /* Note: These are for reference in comments. Actual breakpoints should use media queries */
+ /* Mobile: < 600px */
+ /* Tablet: 600px - 900px */
+ /* Desktop: >= 900px */
+ /* Large Desktop: >= 1200px */
+}
+
+/* Responsive Typography Adjustments (from existing styles.css) */
+@media (width >= 900px) {
+ :root {
+ --body-font-size-xs: 14px;
+ --body-font-size-s: 16px;
+ --body-font-size-m: 18px;
+
+ --heading-font-size-xxl: 45px;
+ --heading-font-size-xl: 36px;
+ --heading-font-size-l: 28px;
+ --heading-font-size-m: 22px;
+ --heading-font-size-s: 20px;
+ --heading-font-size-xs: 18px;
+ }
+}
+
+@media (width >= 900px) {
+ :root {
+ --header-height: calc(var(--nav-height) + var(--breadcrumbs-height));
+ }
+}