Modern, light visual theme for Math Academy. Keeps a slim top progress bar.
// ==UserScript==
// @name Math Academy – Clean Visual Skin (Light, w/ Topbar)
// @namespace https://tampermonkey.net/
// @version 0.2.0
// @license MIT
// @description Modern, light visual theme for Math Academy. Keeps a slim top progress bar.
// @author You
// @match *://mathacademy.com/*
// @match *://*.mathacademy.com/*
// @match *://app.mathacademy.com/*
// @include /^https?:\/\/.*mathacademy.*\/.*/
// @run-at document-idle
// @grant GM_addStyle
// ==/UserScript==
(function () {
'use strict';
// =====================
// THEME
// =====================
const THEME = {
accent: '#7C5CFF',
bg: '#f6f8fc',
cardBg: '#ffffff',
text: '#1b2130',
subtle: '#5a678a',
title: '#2d3a8c',
border: 'rgba(24, 32, 56, 0.08)',
shadow: '0 6px 24px rgba(24, 32, 56, 0.10)'
};
const css = `
:root {
--ma-accent: ${THEME.accent};
--ma-bg: ${THEME.bg};
--ma-card-bg: ${THEME.cardBg};
--ma-text: ${THEME.text};
--ma-subtle: ${THEME.subtle};
--ma-title: ${THEME.title};
--ma-border: ${THEME.border};
--ma-shadow: ${THEME.shadow};
}
/* Page baseline */
html, body { background: var(--ma-bg) !important; }
body { color: var(--ma-text); font: 500 16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Inter, sans-serif; letter-spacing: .1px; }
/* Header & progress dots */
#header { position: sticky; top: 0; background: #eef1f6 !important; border-bottom: 1px solid rgba(24,32,56,.06); backdrop-filter: blur(6px); z-index: 25; }
#progressBar { background: rgb(255,254,254) !important; padding: 8px 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; }
#progressBar .stepButton { background: rgba(24,32,56,.18) !important; border-radius: 999px !important; width: 36px; height: 8px; margin: 0 2px; display:inline-block; }
#progressBar .stepButton.current { background: var(--ma-accent) !important; box-shadow: 0 0 0 2px rgba(124,92,255,.25) !important; }
/* Cards */
.step, #finalScreen, [id^="step-"] {
background: var(--ma-card-bg) !important;
border: 1px solid var(--ma-border) !important;
border-radius: 18px !important;
box-shadow: var(--ma-shadow) !important;
}
/* Typography polish inside cards */
[id^="step-"] h1, [id^="step-"] h2, [id^="step-"] .questionTitle { color: var(--ma-title) !important; font-weight: 700 !important; letter-spacing: .2px; }
[id^="step-"] p { color: var(--ma-text) !important; }
[id^="step-"] .mjx-chtml, [id^="step-"] .mjx-math { color: var(--ma-text) !important; font-size: 1.03em; }
[id^="step-"] hr { border: 0; height: 1px; background: var(--ma-border); margin: 16px 0; }
[id^="step-"] li { margin: 6px 0; }
[id^="step-"] li::marker { color: rgba(24,32,56,.35); }
/* Continue button – inline (style only, do not change visibility) */
.continueButtonFrame { position: static !important; text-align: left; padding: 16px 0 24px; background: transparent !important; }
.continueButton, #finalScreen-doneButton {
/* Do NOT set display here; MA uses inline display:none/block to toggle visibility */
min-width: 180px;
border-radius: 12px !important; padding: .85rem 1.2rem !important;
background: var(--ma-accent) !important; color: white !important; border: none !important;
box-shadow: 0 10px 22px rgba(124,92,255,.20) !important; transition: transform .08s ease, box-shadow .2s ease !important; margin: 0 !important;
}
.continueButton:hover, #finalScreen-doneButton:hover { transform: translateY(-1px) !important; box-shadow: 0 14px 30px rgba(124,92,255,.26) !important; }
.continueButton, #finalScreen-doneButton {
min-width: 180px;
border-radius: 12px !important; padding: .85rem 1.2rem !important;
background: var(--ma-accent) !important; color: white !important; border: none !important;
box-shadow: 0 10px 22px rgba(124,92,255,.20) !important; transition: transform .08s ease, box-shadow .2s ease !important; margin: 0 !important;
}
.continueButton:hover, #finalScreen-doneButton:hover { transform: translateY(-1px) !important; box-shadow: 0 14px 30px rgba(124,92,255,.26) !important; }
#stepsFrame { padding-bottom: 24px !important; }
div#steps {
display: inline-block;
background: transparent !important;
margin-top: 15px;
margin-bottom: 50px;
}
/* Kill stray white gutters */
#wrap, #stepsFrame { background: transparent !important; }
[style*="background: white"], [style*="background-color: white"] { background-color: var(--ma-card-bg) !important; }
/* Subtle selection + focus */
::selection { background: rgba(124,92,255,.18); }
input:focus, textarea:focus, select:focus { outline: none !important; box-shadow: 0 0 0 3px rgba(124,92,255,.25) !important; border-color: transparent !important; }
/* Choice pills (if present) */
.multipleChoiceOption, .option, .choice, [class*="choice" i] {
border: 1px solid var(--ma-border) !important; border-radius: 12px !important; padding: 10px 12px !important;
transition: background .15s ease, box-shadow .2s ease, transform .05s ease; background: white; box-shadow: 0 2px 8px rgba(24,32,56,.05);
}
.multipleChoiceOption:hover, .option:hover, .choice:hover, [class*="choice" i]:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(24,32,56,.10); }
/* Primary submit buttons */
.questionWidget-submitButton {
/* do NOT set display here */
background: var(--ma-accent) !important;
color: #fff !important;
border: none !important;
border-radius: 10px !important;
padding: .75rem 1.1rem !important;
box-shadow: 0 6px 16px rgba(124,92,255,.22) !important;
transition: transform .08s ease, box-shadow .2s ease !important;
}
/* Enabled/hover */
.questionWidget-submitButton.enabledButton:hover {
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(124,92,255,.28) !important;
}
/* Disabled-looking state */
.questionWidget-submitButton:not(.enabledButton) {
background: rgba(124,92,255,.35) !important;
color: rgba(255,255,255,.85) !important;
box-shadow: none !important;
cursor: default !important;
filter: saturate(.9) brightness(.98);
}
/* Top micro progress bar */
#ma-topbar { position: fixed; inset: 0 0 auto 0; height: 3px; background: rgba(24,32,56,.10); z-index: 2147483647; overflow: hidden; }
#ma-topbar > div { height: 100%; width: 0%; background: linear-gradient(90deg, var(--ma-accent), #B39CFF); transition: width .5s ease; }
`;
if (typeof GM_addStyle === 'function') GM_addStyle(css); else injectStyle(css);
// =====================
// TOP BAR ONLY
// =====================
const topbar = document.createElement('div');
topbar.id = 'ma-topbar';
topbar.innerHTML = '<div></div>';
document.documentElement.appendChild(topbar);
function updateTopbar() {
const steps = Array.from(document.querySelectorAll('#progressBar .stepButton'));
if (!steps.length) return;
const idx = Math.max(steps.findIndex(el => el.classList.contains('current')), 0);
const pct = Math.round(((idx + 1) / steps.length) * 100);
const inner = topbar.firstElementChild; if (inner) inner.style.width = pct + '%';
}
const pb = document.querySelector('#progressBar');
if (pb) new MutationObserver(updateTopbar).observe(pb, {subtree:true, attributes:true, attributeFilter:['class']});
updateTopbar();
// =====================
// UTIL
// =====================
function injectStyle(s){ const st = document.createElement('style'); st.textContent = s; document.head.appendChild(st); }
})();