diff --git a/website/app.js b/website/app.js index 6883cae..dab4cd4 100644 --- a/website/app.js +++ b/website/app.js @@ -1291,7 +1291,7 @@ document.addEventListener('DOMContentLoaded', () => { // User is on Chrome: Make Firefox secondary firefoxBtns.forEach(btn => { btn.classList.remove('btn-firefox'); - btn.classList.add('btn-secondary'); + btn.classList.add('btn-secondary', 'btn-firefox-secondary'); btn.style.color = 'var(--text)'; btn.style.background = 'var(--card)'; btn.style.border = '1px solid var(--glass-border)'; diff --git a/website/style.css b/website/style.css index b0fbdc7..583b9f9 100644 --- a/website/style.css +++ b/website/style.css @@ -326,6 +326,25 @@ html.theme-light .btn-secondary:hover { background: #e2e8f0; } +html.theme-light .btn-firefox { + background: #f97316; + color: #ffffff; + box-shadow: 0 10px 18px rgba(249, 115, 22, 0.24); +} + +html.theme-light .btn-firefox:hover { + background: #ea580c; + box-shadow: 0 18px 26px rgba(249, 115, 22, 0.28); +} + +html.theme-light .btn-firefox img { + filter: brightness(0) saturate(100%) invert(13%) sepia(38%) saturate(1084%) hue-rotate(177deg) brightness(89%) contrast(96%); +} + +html.theme-light .btn-firefox-secondary img { + filter: brightness(0) saturate(100%) invert(13%) sepia(38%) saturate(1084%) hue-rotate(177deg) brightness(89%) contrast(96%); +} + html.theme-light .comparison-section { background: rgba(15, 23, 42, 0.02); } @@ -3220,6 +3239,34 @@ html.theme-light .compat-logo img.compat-logo-disneyplus-mark { } } +@media (max-width: 600px) { + html.theme-light .comparison-section { + background: transparent; + } + + html.theme-light .comparison-table tbody tr { + background: #ffffff; + border-color: rgba(15, 23, 42, 0.1); + box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08); + } + + html.theme-light .comparison-table tbody tr:hover { + background: #ffffff; + } + + html.theme-light .comparison-table td { + border-bottom-color: rgba(15, 23, 42, 0.08); + } + + html.theme-light .comparison-table td.feat-name { + background: #ffffff; + } + + html.theme-light .comparison-table td.check.highlight { + background: rgba(91, 93, 232, 0.07); + } +} + /* --- Footnotes & Source Links --- */ .source-link { color: var(--accent);