Repository: Hestenb62/_legacy_backup
Author: Hesten Berger
Commit Message: index update
URL: https://github.com/Hestenb62/_legacy_backup/commit/54900e382d3ed6d95f9a79c1804153eeae9a9451
Code Changes:
diff --git a/assets/css/components/mastery-modals.css b/assets/css/components/mastery-modals.css
new file mode 100644
index 0000000..ba18ec1
--- /dev/null
+++ b/assets/css/components/mastery-modals.css
@@ -0,0 +1,495 @@
+/* ==========================================================================
+ Hesten's Learning - Mastery Popups & Breakdown Modals
+ Curriculum Mastery Modal & Skills Mastered Modal
+ WCAG 2.1/2.2 AA/AAA & UDL Compliant
+ ========================================================================== */
+
+/* Hero Clickable Stat Card Enhancements */
+.stats-card-clickable {
+ cursor: pointer;
+ position: relative;
+ transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+ outline: none;
+}
+
+.stats-card-clickable:hover {
+ transform: translateY(-4px) scale(1.02);
+ border-color: var(--color-primary, #6366f1) !important;
+ box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.12),
+ 0 0 20px rgba(99, 102, 241, 0.25) !important;
+}
+
+.stats-card-clickable:focus-visible {
+ outline: 3px solid var(--color-primary, #6366f1) !important;
+ outline-offset: 3px;
+ transform: translateY(-2px);
+}
+
+.stat-action-hint {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.25rem;
+ font-size: 0.625rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.08em;
+ color: var(--color-primary, #6366f1);
+ margin-top: 0.375rem;
+ opacity: 0.85;
+ transition: opacity 0.2s, transform 0.2s;
+}
+
+.stats-card-clickable:hover .stat-action-hint {
+ opacity: 1;
+ transform: translateX(2px);
+}
+
+/* Modal Content Dimensions */
+.mastery-modal-dialog {
+ width: min(94vw, 56rem);
+ max-width: 56rem;
+ max-height: 88vh;
+}
+
+/* Summary Banner at Top of Modal */
+.mastery-summary-panel {
+ background: var(--summary-bg, rgba(241, 245, 249, 0.7));
+ border: 1px solid var(--summary-border, rgba(226, 232, 240, 0.8));
+ border-radius: var(--radius-xl, 1rem);
+ padding: 1.25rem 1.5rem;
+ margin-bottom: 1.25rem;
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-between;
+ gap: 1rem;
+}
+
+[data-theme="dark"] .mastery-summary-panel,
+.dark .mastery-summary-panel {
+ --summary-bg: rgba(30, 41, 59, 0.6);
+ --summary-border: rgba(51, 65, 85, 0.7);
+}
+
+[data-theme="midnight"] .mastery-summary-panel,
+.midnight .mastery-summary-panel {
+ --summary-bg: rgba(15, 23, 42, 0.7);
+ --summary-border: rgba(30, 41, 59, 0.8);
+}
+
+.mastery-summary-left {
+ display: flex;
+ align-items: center;
+ gap: 1.25rem;
+}
+
+.mastery-score-circle {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 4.5rem;
+ height: 4.5rem;
+ border-radius: 50%;
+ background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(16, 185, 129, 0.15));
+ border: 2px solid var(--color-primary, #6366f1);
+ color: var(--color-text-main, #0f172a);
+ font-weight: 900;
+ font-size: 1.25rem;
+ font-family: var(--font-display, inherit);
+ box-shadow: 0 4px 14px rgba(99, 102, 241, 0.2);
+}
+
+[data-theme="dark"] .mastery-score-circle,
+.dark .mastery-score-circle,
+[data-theme="midnight"] .mastery-score-circle,
+.midnight .mastery-score-circle {
+ color: #f8fafc;
+}
+
+.mastery-summary-title {
+ font-size: 1.125rem;
+ font-weight: 800;
+ color: var(--color-text-main, #0f172a);
+ margin: 0 0 0.25rem 0;
+}
+
+[data-theme="dark"] .mastery-summary-title,
+.dark .mastery-summary-title,
+[data-theme="midnight"] .mastery-summary-title,
+.midnight .mastery-summary-title {
+ color: #f8fafc;
+}
+
+.mastery-summary-sub {
+ font-size: 0.8125rem;
+ color: var(--color-text-muted, #64748b);
+ margin: 0;
+}
+
+/* Modal Search & Filter Toolbar */
+.mastery-controls-bar {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-between;
+ gap: 0.75rem;
+ margin-bottom: 1.25rem;
+}
+
+.mastery-search-input {
+ flex: 1;
+ min-width: 220px;
+ padding: 0.5rem 1rem 0.5rem 2.25rem;
+ border-radius: var(--radius-lg, 0.625rem);
+ background: var(--input-bg, rgba(255, 255, 255, 0.8));
+ border: 1px solid var(--input-border, rgba(203, 213, 225, 0.8));
+ color: var(--color-text-main, #0f172a);
+ font-size: 0.8125rem;
+ transition: all 0.2s ease;
+}
+
+[data-theme="dark"] .mastery-search-input,
+.dark .mastery-search-input {
+ --input-bg: rgba(30, 41, 59, 0.8);
+ --input-border: rgba(51, 65, 85, 0.8);
+ color: #f8fafc;
+}
+
+[data-theme="midnight"] .mastery-search-input,
+.midnight .mastery-search-input {
+ --input-bg: rgba(15, 23, 42, 0.85);
+ --input-border: rgba(30, 41, 59, 0.9);
+ color: #f8fafc;
+}
+
+.mastery-search-wrap {
+ position: relative;
+ display: flex;
+ align-items: center;
+ flex: 1;
+ min-width: 240px;
+}
+
+.mastery-search-icon {
+ position: absolute;
+ left: 0.875rem;
+ font-size: 0.8125rem;
+ color: var(--color-text-muted, #64748b);
+ pointer-events: none;
+}
+
+.mastery-filter-tabs {
+ display: flex;
+ gap: 0.375rem;
+}
+
+.mastery-filter-tab {
+ padding: 0.375rem 0.75rem;
+ border-radius: var(--radius-full, 9999px);
+ background: rgba(100, 116, 139, 0.1);
+ color: var(--color-text-muted, #64748b);
+ border: 1px solid rgba(100, 116, 139, 0.18);
+ font-size: 0.75rem;
+ font-weight: 700;
+ cursor: pointer;
+ transition: all 0.2s ease;
+}
+
+.mastery-filter-tab.active {
+ background: var(--color-primary, #6366f1);
+ color: #ffffff !important;
+ border-color: var(--color-primary, #6366f1);
+}
+
+.mastery-filter-tab:hover:not(.active) {
+ background: rgba(100, 116, 139, 0.18);
+ color: var(--color-text-main, #0f172a);
+}
+
+[data-theme="dark"] .mastery-filter-tab:hover:not(.active),
+.dark .mastery-filter-tab:hover:not(.active),
+[data-theme="midnight"] .mastery-filter-tab:hover:not(.active),
+.midnight .mastery-filter-tab:hover:not(.active) {
+ color: #f8fafc;
+}
+
+/* Items List & Cards */
+.mastery-items-list {
+ display: flex;
+ flex-direction: column;
+ gap: 0.75rem;
+ max-height: 52vh;
+ overflow-y: auto;
+ padding-right: 0.25rem;
+}
+
+.mastery-item-card {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 1rem;
+ padding: 0.875rem 1.125rem;
+ border-radius: var(--radius-xl, 0.875rem);
+ background: var(--card-bg, rgba(255, 255, 255, 0.6));
+ border: 1px solid var(--card-border, rgba(226, 232, 240, 0.8));
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
+ transition: all 0.2s ease;
+}
+
+[data-theme="dark"] .mastery-item-card,
+.dark .mastery-item-card {
+ --card-bg: rgba(30, 41, 59, 0.5);
+ --card-border: rgba(51, 65, 85, 0.6);
+}
+
+[data-theme="midnight"] .mastery-item-card,
+.midnight .mastery-item-card {
+ --card-bg: rgba(15, 23, 42, 0.6);
+ --card-border: rgba(30, 41, 59, 0.7);
+}
+
+.mastery-item-card:hover {
+ background: var(--card-hover-bg, rgba(255, 255, 255, 0.9));
+ border-color: rgba(99, 102, 241, 0.4);
+ transform: translateY(-1px);
+}
+
+[data-theme="dark"] .mastery-item-card:hover,
+.dark .mastery-item-card:hover,
+[data-theme="midnight"] .mastery-item-card:hover,
+.midnight .mastery-item-card:hover {
+ --card-hover-bg: rgba(30, 41, 59, 0.85);
+}
+
+.mastery-item-info {
+ display: flex;
+ align-items: center;
+ gap: 0.875rem;
+ flex: 1;
+ min-width: 0;
+}
+
+.mastery-item-icon-box {
+ width: 2.25rem;
+ height: 2.25rem;
+ border-radius: var(--radius-lg, 0.5rem);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 1rem;
+ flex-shrink: 0;
+}
+
+.mastery-item-text {
+ min-width: 0;
+ flex: 1;
+}
+
+.mastery-item-title-row {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ margin-bottom: 0.25rem;
+ flex-wrap: wrap;