iSharkFly-Open
/
python-peps
mirror of https://github.com/python/peps.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Infra: Make colour theme cycler button accessible (#2619)

This commit is contained in:
Hugo van Kemenade 2022-06-18 21:07:06 +03:00 committed by GitHub
parent 2849a582b3
commit b4032e7e3d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
pep_sphinx_extensions/pep_theme/static/style.css
View File

@ -2,7 +2,7 @@
/* Styles for PEPs */
/*
* `initial` works like undefined variables, so `var(intial, x)` will resolve to `x`.
* `initial` works like undefined variables, so `var(initial, x)` will resolve to `x`.
* A space means an empty value, so `var( , x) y` will resolve to `y`.
*/
@media (prefers-color-scheme: dark) {
@ -359,3 +359,15 @@ dl.footnote > dd {
.reference.external > strong {
font-weight: normal; /* Fix strong links for :pep: and :rfc: roles */
}
.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0,0,0,0) !important;
white-space: nowrap !important;
border: 0 !important;
}

7
pep_sphinx_extensions/pep_theme/templates/page.html
View File

@ -31,9 +31,10 @@
<li>{{ title.split("–")[0].strip() }}</li>
</ul>
<button id="colour-scheme-cycler" onClick="setColourScheme(nextColourScheme())">
<svg class="colour-scheme-icon-when-auto"><use href="#svg-sun-half"></use></svg>
<svg class="colour-scheme-icon-when-dark"><use href="#svg-moon"></use></svg>
<svg class="colour-scheme-icon-when-light"><use href="#svg-sun"></use></svg>
<svg aria-hidden="true" class="colour-scheme-icon-when-auto"><use href="#svg-sun-half"></use></svg>
<svg aria-hidden="true" class="colour-scheme-icon-when-dark"><use href="#svg-moon"></use></svg>
<svg aria-hidden="true" class="colour-scheme-icon-when-light"><use href="#svg-sun"></use></svg>
<span class="visually-hidden">Toggle light / dark / auto colour theme</span>
</button>
</header>
<article>