fix: polish light mode landing page

This commit is contained in:
KoalaDev
2026-07-07 02:12:40 +02:00
parent a9687219e0
commit e559b41c93
2 changed files with 48 additions and 1 deletions
+1 -1
View File
@@ -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)';
+47
View File
@@ -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);