/* * Uses CSS variables so a school can re-skin the portal to match its * branding just by overriding these values in a child theme or * "Additional CSS" (Appearance → Customize), without editing the plugin. */ :root { --sms-primary: #2271b1; --sms-primary-dark: #135e96; --sms-text: #1d2327; --sms-border: #dcdcde; --sms-bg: #ffffff; --sms-success: #1a7a3c; --sms-warning: #8a6d00; --sms-radius: 8px; --sms-accent: #2271b1; --sms-font-heading: Georgia, 'Times New Roman', serif; --sms-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .sms-box h1, .sms-box h2, .sms-box h3, .sms-box h4, .sms-box h5 { font-family: var(--sms-font-heading); line-height: 1.25; margin: 0.6em 0 0.4em; } .sms-box { font-family: var(--sms-font-body); font-size: 14px; background: var(--sms-bg); border: 1px solid var(--sms-border); border-radius: var(--sms-radius); padding: 24px; color: var(--sms-text); margin-bottom: 20px; } /* A deliberately restrained type scale — many WordPress themes apply * their own oversized heading defaults globally (some block themes size * h1/h2/h3 well past 2em), which reads as jarring inside a dense * dashboard UI. Setting explicit sizes here means the plugin's own * screens look consistent regardless of which theme is active. */ .sms-box h1 { font-size: 1.6em; } .sms-box h2 { font-size: 1.35em; } .sms-box h3 { font-size: 1.15em; margin-top: 0; } .sms-box h4 { font-size: 1em; } .sms-box h5 { font-size: 0.92em; } .sms-box p, .sms-box label, .sms-box td, .sms-box th { font-size: 1em; } .sms-box input, .sms-box select, .sms-box textarea { font-size: 1em; color: var(--sms-text) !important; background: #fff !important; border: 1px solid var(--sms-border); border-radius: 6px; padding: 6px 8px; font-family: var(--sms-font-body); } .sms-box input[type=checkbox], .sms-box input[type=radio] { width: auto; padding: 0; background: initial !important; } .sms-box button { font-size: 1em; } .sms-table { width: 100%; border-collapse: collapse; margin: 12px 0; } .sms-table th, .sms-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--sms-border); } @media (max-width: 700px) { .sms-table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; } .sms-table thead, .sms-table tbody, .sms-table tr { display: table; width: 100%; table-layout: auto; } .sms-btn { padding: 12px 18px; min-height: 44px; box-sizing: border-box; } .sms-box input, .sms-box select, .sms-box textarea { min-height: 44px; box-sizing: border-box; font-size: 16px; } .sms-box input[type=checkbox], .sms-box input[type=radio] { min-height: auto; width: 20px; height: 20px; } .sms-nav-btn { min-height: 40px; } } .sms-btn { display: inline-block; padding: 8px 16px; border-radius: var(--sms-radius); border: 1px solid var(--sms-border); background: #f6f7f7; color: var(--sms-text) !important; cursor: pointer; text-decoration: none; font-family: var(--sms-font-body); line-height: 1.4; } .sms-btn:hover, .sms-btn:focus { background: #e9eaeb; color: var(--sms-text) !important; } .sms-btn:visited { color: var(--sms-text) !important; } .sms-btn-primary { background: var(--sms-primary); border-color: var(--sms-primary); color: #fff !important; } .sms-btn-primary:hover, .sms-btn-primary:focus { background: var(--sms-primary-dark); color: #fff !important; } .sms-btn-primary:visited { color: #fff !important; } .sms-success { color: var(--sms-success); font-weight: 600; } .sms-warning { color: var(--sms-warning); font-weight: 600; } .sms-child-card h4, .sms-announcement h4 { border-left: 3px solid var(--sms-accent); padding-left: 10px; } .sms-child-card { border-top: 1px solid var(--sms-border); padding-top: 16px; margin-top: 16px; } .sms-child-card:first-of-type { border-top: none; margin-top: 0; } .sms-announcement { border-bottom: 1px solid var(--sms-border); padding-bottom: 14px; margin-bottom: 14px; } .sms-announcement:last-child { border-bottom: none; margin-bottom: 0; } .sms-announcement h4 { margin: 0 0 4px; } .sms-announcement-meta { margin: 0 0 6px; color: #646970; } .sms-exam-topbar { display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; background: var(--sms-bg); padding: 8px 0; z-index: 5; border-bottom: 1px solid var(--sms-border); } .sms-exam-timer { font-size: 1.4em; font-weight: 700; font-variant-numeric: tabular-nums; padding: 4px 12px; border-radius: var(--sms-radius); background: var(--sms-accent); color: var(--sms-bg); } .sms-exam-toolbar { display: flex; gap: 8px; margin: 12px 0; } .sms-exam-panel { position: fixed; bottom: 16px; right: 16px; width: 280px; background: #fff; border: 1px solid var(--sms-border); border-radius: var(--sms-radius); box-shadow: 0 4px 16px rgba(0,0,0,.15); padding: 12px; z-index: 100; } .sms-exam-panel-header { display: flex; justify-content: space-between; align-items: center; font-weight: 600; margin-bottom: 8px; } .sms-panel-close { background: none; border: none; font-size: 1.3em; cursor: pointer; line-height: 1; } #sms-calc-display { width: 100%; box-sizing: border-box; text-align: right; font-size: 1.3em; padding: 6px; margin-bottom: 8px; } .sms-calc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .sms-calc-btn { padding: 10px 0; border: 1px solid var(--sms-border); border-radius: 4px; background: #f6f7f7; cursor: pointer; } .sms-calc-eq { grid-column: span 4; background: var(--sms-primary); color: #fff; } #sms-scratch-pad { width: 100%; box-sizing: border-box; } /* JAMB/UTME-style question navigator + one-question-at-a-time layout */ .sms-exam-layout { display: flex; gap: 20px; align-items: flex-start; margin-top: 12px; } .sms-nav-toggle-btn { display: none; width: 100%; margin-bottom: 10px; } .sms-question-nav { flex: 0 0 230px; background: #fff; border: 1px solid var(--sms-border); border-radius: var(--sms-radius); padding: 14px; position: sticky; top: 60px; } .sms-nav-close { display: none; } .sms-nav-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 0.78em; color: #555; margin: 0 0 10px; align-items: center; } .sms-nav-dot { display: inline-block; width: 11px; height: 11px; border-radius: 3px; border: 1px solid var(--sms-border); background: #fff; vertical-align: -1px; margin-right: 2px; } .sms-nav-dot.sms-nav-answered { background: #06d6a0; border-color: #06d6a0; } .sms-nav-dot.sms-nav-current { background: #4361ee; border-color: #4361ee; } .sms-nav-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 14px; } .sms-nav-btn { aspect-ratio: 1; border: 1px solid var(--sms-border); border-radius: 6px; background: #fff; cursor: pointer; font-weight: 600; font-size: 0.9em; padding: 0; } .sms-nav-btn.sms-nav-answered { background: #d4f4dd; border-color: #06d6a0; color: #1a7a3d; } .sms-nav-btn.sms-nav-current { background: #4361ee; border-color: #4361ee; color: #fff; } .sms-submit-btn-nav { width: 100%; } .sms-exam-question-col { flex: 1 1 auto; min-width: 0; } .sms-question-counter { font-weight: 700; color: var(--sms-primary); margin: 0 0 10px; font-size: 1.05em; } .sms-option-label { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--sms-border); border-radius: 8px; margin-bottom: 8px; cursor: pointer; } .sms-option-label:hover { background: #f9fafb; } .sms-option-letter { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #eef1f5; font-weight: 700; font-size: 0.85em; flex-shrink: 0; } .sms-exam-prevnext { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; } .sms-exam-prevnext .sms-btn { flex: 1; } @media (max-width: 782px) { .sms-exam-layout { flex-direction: column; } .sms-nav-toggle-btn { display: block; } .sms-question-nav { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 200; border-radius: 0; display: none; overflow-y: auto; flex: none; } .sms-question-nav.sms-nav-open { display: block; } .sms-nav-close { display: block; position: sticky; top: 0; margin-left: auto; background: none; border: none; font-size: 1.6em; cursor: pointer; line-height: 1; padding: 4px 8px; } .sms-nav-grid { grid-template-columns: repeat(6, 1fr); } } .sms-dash-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--sms-border); } .sms-dash-welcome { font-weight: 600; font-size: 1.05em; } .sms-logout-btn { background: #fdecea; border-color: #f3c6c2; color: #b3261e; } .sms-logout-btn:hover { background: #f9d5d1; } .sms-dash-layout { display: flex; gap: 20px; align-items: flex-start; } .sms-dash-nav { flex: 0 0 200px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 16px; } .sms-dash-group { font-weight: 700; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sms-primary); margin: 14px 0 4px; } .sms-dash-group:first-child { margin-top: 0; } .sms-dash-link { display: block; width: 100%; text-align: left; background: none; border: none; border-radius: var(--sms-radius); padding: 8px 10px; cursor: pointer; font-family: var(--sms-font-body); color: var(--sms-text); } .sms-dash-link:hover { background: var(--sms-border); } .sms-dash-link-active { background: var(--sms-primary); color: var(--sms-bg); } .sms-dash-content { flex: 1; min-width: 0; } .sms-dash-content .sms-box { border: none; padding: 0; margin-bottom: 0; } @media (max-width: 700px) { .sms-dash-layout { flex-direction: column; } .sms-dash-nav { flex-direction: row; flex-wrap: wrap; position: static; width: 100%; } .sms-dash-group { display: none; } } .sms-bulk-upload { border: 1px dashed var(--sms-border); border-radius: var(--sms-radius); padding: 10px 14px; margin: 10px 0; background: #f9fafb; } .sms-bulk-upload summary { cursor: pointer; font-weight: 600; color: var(--sms-primary); } .sms-bulk-upload form { margin-top: 8px; } .sms-bulk-upload ul { margin: 6px 0 0 20px; font-size: 0.9em; color: #8a6d00; } .sms-inline-popup { display: inline-block; position: relative; } .sms-inline-popup summary { cursor: pointer; color: var(--sms-primary); font-weight: 600; list-style: none; } .sms-inline-popup summary::-webkit-details-marker { display: none; } .sms-inline-popup[open] summary::after { content: ' ▲'; } .sms-inline-popup:not([open]) summary::after { content: ' ▾'; } .sms-inline-popup form { position: absolute; z-index: 20; top: 100%; left: 0; margin-top: 4px; background: #fff; border: 1px solid var(--sms-border); border-radius: var(--sms-radius); box-shadow: 0 4px 14px rgba(0,0,0,0.14); padding: 12px; min-width: 220px; display: flex; flex-direction: column; gap: 8px; white-space: normal; } .sms-inline-popup form select { width: 100%; padding: 6px; border-radius: 6px; border: 1px solid var(--sms-border); } /* Statistics overview: colorful stat cards + charts */ .sms-stats-overview h3 { margin: 24px 0 12px; } .sms-stats-overview h3:first-child { margin-top: 0; } .sms-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 20px; } .sms-stat-card { border-radius: 14px; padding: 18px 16px; color: #fff; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 4px 14px rgba(0,0,0,0.12); transition: transform 0.15s ease; } .sms-stat-card:hover { transform: translateY(-3px); } .sms-stat-icon { font-size: 1.6em; line-height: 1; margin-bottom: 4px; } .sms-stat-number { font-size: 1.8em; font-weight: 700; line-height: 1.1; } .sms-stat-label { font-size: 0.85em; opacity: 0.92; } .sms-chart-box { position: relative; height: 280px; max-width: 480px; margin: 10px 0 28px; background: #fff; border: 1px solid var(--sms-border); border-radius: var(--sms-radius); padding: 16px; } @media (max-width: 500px) { .sms-stat-grid { grid-template-columns: repeat(2, 1fr); } .sms-chart-box { max-width: 100%; height: 240px; } } .sms-chart-row { display: flex; flex-wrap: wrap; gap: 16px; } .sms-chart-row .sms-chart-box { flex: 1 1 340px; margin: 0; } /* Reusable attractive table-based form layout: label | input rows, * instead of stacked