michael/pyfedi
1
0
Fork 0
mirror of https://codeberg.org/rimu/pyfedi synced 2025-01-23 19:36:56 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

use prefers-contrast media query to automatically enable high contrast mode

Browse source
This commit is contained in:
rimu 2024-02-16 14:24:13 +13:00
parent db2d234a65
commit e4e02dcc6c
2 changed files with 188 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

99
app/static/styles.css
View file

@ -693,4 +693,103 @@ div.navbar {
} }
} }
@media (prefers-contrast: more) {
:root {
--bs-link-color: black;
--bs-link-color-rgb: black;
--bs-link-hover-color-rgb: #333;
}
[data-bs-theme=dark] {
--bs-body-bg: black;
--bs-link-color: white;
--bs-link-color-rgb: white;
--bs-link-hover-color-rgb: #eee;
--bs-heading-color: white;
--bs-body-color: white;
--bs-body-color-rgb: white;
}
.btn-primary {
--bs-btn-bg: black;
--bs-btn-border-color: black;
--bs-btn-hover-bg: #333;
}
[data-bs-theme=dark] .btn-primary {
--bs-btn-bg: white;
--bs-btn-border-color: white;
--bs-btn-hover-bg: white;
--bs-btn-color: black;
}
[data-bs-theme=dark] .btn-primary:hover {
--bs-btn-hover-color: black;
}
.btn-outline-secondary {
--bs-btn-color: black;
}
[data-bs-theme=dark] .btn-outline-secondary {
--bs-btn-color: white;
}
.post_list .post_teaser {
border-bottom: solid 1px black;
}
[data-bs-theme=dark] .post_list .post_teaser {
border-bottom: solid 1px white;
}
.domain_link, .domain_link a {
color: black;
}
[data-bs-theme=dark] .domain_link, [data-bs-theme=dark] .domain_link a {
color: ghostwhite;
}
.main_pane, .voting_buttons div {
border: solid 1px #333;
}
[data-bs-theme=dark] .main_pane, [data-bs-theme=dark] .voting_buttons div {
border: solid 1px #eee;
}
div.navbar {
border-bottom: solid 1px #333;
}
[data-bs-theme=dark] div.navbar {
border-bottom: solid 1px #fff;
}
.nav-link {
color: black;
}
[data-bs-theme=dark] .nav-link {
color: white;
}
.card {
--bs-card-border-color: #333;
}
[data-bs-theme=dark] .card {
--bs-card-border-color: #fff;
}
.coolfieldset.collapsed legend, .coolfieldset legend, .coolfieldset.expanded legend {
background-color: white;
}
[data-bs-theme=dark] .coolfieldset.collapsed legend, [data-bs-theme=dark] .coolfieldset legend, [data-bs-theme=dark] .coolfieldset.expanded legend {
background-color: black;
}
}
/*# sourceMappingURL=styles.css.map */ /*# sourceMappingURL=styles.css.map */

89
app/static/styles.scss
View file

@ -318,3 +318,92 @@ div.navbar {
font-size: 1.6rem; font-size: 1.6rem;
} }
} }
@media (prefers-contrast: more) {
:root {
--bs-link-color: black;
--bs-link-color-rgb: black;
--bs-link-hover-color-rgb: #333;
}
[data-bs-theme="dark"] {
--bs-body-bg: black;
--bs-link-color: white;
--bs-link-color-rgb: white;
--bs-link-hover-color-rgb: #eee;
--bs-heading-color: white;
--bs-body-color: white;
--bs-body-color-rgb: white;
}
.btn-primary {
--bs-btn-bg: black;
--bs-btn-border-color: black;
--bs-btn-hover-bg: #333;
}
[data-bs-theme="dark"] .btn-primary {
--bs-btn-bg: white;
--bs-btn-border-color: white;
--bs-btn-hover-bg: white;
--bs-btn-color: black;
}
[data-bs-theme="dark"] .btn-primary:hover {
--bs-btn-hover-color: black;
}
.btn-outline-secondary {
--bs-btn-color: black;
}
[data-bs-theme="dark"] .btn-outline-secondary {
--bs-btn-color: white;
}
.post_list .post_teaser {
border-bottom: solid 1px black;
}
[data-bs-theme="dark"] .post_list .post_teaser {
border-bottom: solid 1px white;
}
.domain_link, .domain_link a {
color: black;
}
[data-bs-theme="dark"] .domain_link, [data-bs-theme="dark"] .domain_link a {
color: ghostwhite;
}
.main_pane, .voting_buttons div {
border: solid 1px #333;
}
[data-bs-theme="dark"] .main_pane, [data-bs-theme="dark"] .voting_buttons div {
border: solid 1px #eee;
}
div.navbar {
border-bottom: solid 1px #333;
}
[data-bs-theme="dark"] div.navbar {
border-bottom: solid 1px #fff;
}
.nav-link {
color: black;
}
[data-bs-theme="dark"] .nav-link {
color: white;
}
.card {
--bs-card-border-color: #333;
}
[data-bs-theme="dark"] .card {
--bs-card-border-color: #fff;
}
.coolfieldset.collapsed legend, .coolfieldset legend, .coolfieldset.expanded legend {
background-color: white;
}
[data-bs-theme="dark"] .coolfieldset.collapsed legend, [data-bs-theme="dark"] .coolfieldset legend, [data-bs-theme="dark"] .coolfieldset.expanded legend {
background-color: black;
}
}