Last active
June 6, 2020 02:36
-
-
Save chadlavi/1c57c8568a0ff295668b80a366f10a0d to your computer and use it in GitHub Desktop.
fp6 accessibility
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ==UserScript== | |
// @name 6dot accessibility patch | |
// @version 4.0.6 | |
// @namespace https://gist.github.com/chadlavi/1c57c8568a0ff295668b80a366f10a0d | |
// @author Chad Lavimoniere | |
// @grant none | |
// @include http*://6.*.org/* | |
// @downloadURL https://gist.github.com/chadlavi/1c57c8568a0ff295668b80a366f10a0d/raw/fp6.user.js | |
// @updateURL https://gist.github.com/chadlavi/1c57c8568a0ff295668b80a366f10a0d/raw/fp6.user.js | |
// ==/UserScript== | |
const setStyle = () => { | |
// convenience function for inserting one or more HTML snippets at a given position in a given parent element | |
const ins = (html, position, parent) => { | |
const el = Array.isArray(html) ? html : [html] | |
el.forEach(e => parent.insertAdjacentHTML(position, e)) | |
} | |
// convenience function that iterates through a list of CSS selectors and returns the first element that matches | |
const findFirst = e => {for (const f of e) {if (document.querySelector(f)) {return document.querySelector(f)}}} | |
// style tag that inserts CSS for an accessible focus state site-wide | |
const globalStyle = `<style type="text/css"> | |
:root { | |
--link-color: #000099; | |
--grey-color: #757575; | |
--light-grey-color: #efefef; | |
--text-color: black; | |
--background-color: white; | |
--navy-color: #072284; | |
--orange-color: #c75300; | |
--yellow-color: #f2d037; | |
--base-font-size: 15px; | |
--line-height: 1.2; | |
} | |
@media (prefers-color-scheme: dark) { | |
:root { | |
--link-color: rgb(119, 141, 223); | |
--text-color: white; | |
--background-color: black; | |
--light-grey-color: black; | |
--navy-color: black; | |
} | |
} | |
:focus { | |
box-shadow: 0 0 0 2px var(--background-color), 0 0 0 6px var(--orange-color); | |
outline: none; | |
} | |
body, .thisis { | |
color: var(--text-color) !important; | |
} | |
body { | |
background-color: var(--background-color); | |
color: var(--text-color); | |
font-size: var(--base-font-size); | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
line-height: var(--line-height); | |
margin: 0; | |
padding: 24px; | |
} | |
textarea { | |
color: var(--text-color); | |
background-color: var(--background-color); | |
border-radius: 5px; | |
border: 1px solid var(--grey-color); | |
margin-bottom: 10px; | |
padding: 5px; | |
} | |
input[type="submit"], input[type="button"] { | |
color: inherit; | |
background-color: var(--light-grey-color); | |
margin-top: 5px; | |
border: 1px solid var(--grey-color); | |
border-radius: 5px; | |
padding: 5px 10px | |
} | |
.comment-footer, .posted-by-footer a.favorite-link, .fileline:nth-child(2n), .filelist .fileline:nth-child(2n) a, span.optional, .posted-by-footer, .posted-by-footer .date, #loggedin { | |
color: var(--grey-color) !important; | |
} | |
.fileline:nth-child(odd) { | |
color: var(--text-color) !important; | |
} | |
#sitemenu a, div.pilebanner a { | |
color: var(--orange-color) !important; | |
} | |
a:not(.fname):not(.fcomments):not(.fdate):not(.favorite-link):not(.favd), #loggedin a { | |
color: var(--link-color) !important; | |
} | |
body, .archivepile .filelist, .popular .filelist { | |
box-sizing: border-box; | |
} | |
.commentbody a, .topic-comment-body a, .topic-body a { | |
display: inline-block; | |
} | |
.commentbody, .topic-comment-body, .topic-body { | |
max-width: 920px; | |
width: calc(100% - 150px); | |
} | |
.fcomments, .fname, .fdate { | |
width: 25%; | |
} | |
.fileline { | |
display: flex; | |
justify-content: space-between; | |
} | |
.pilebanner h2 { | |
width: unset; | |
color: var(--link-color) !important; | |
} | |
.pile, #content, #banner, #footer { | |
width: 100% !important; | |
} | |
img#picture_file { | |
max-width: 100%; | |
} | |
.tabnav { | |
overflow: unset; | |
} | |
.tabnav > li { | |
float: unset; | |
display: inline-block; | |
} | |
.fileline, .nav, .pagination, .pilebanner a, .pilebanner h2, .posted-by-footer, .topic, .topic-comment, .comment, .topic, #discussmotd, #fileinfo ul, #sitemenu li, #uploadedby, div.comment, input, span.posted-by-footer>a.newcomments-link, .fileline a.newcomments-link, .fileline .newcomments, textarea, .fileline { | |
font-size: inherit !important; | |
line-height: inherit !important; | |
} | |
.fileline:hover, .fileline:hover a, a:hover { | |
background-color: var(--background-color) !important; | |
color: var(--text-color) !important; | |
} | |
.tabnav a.selected { | |
background: var(--background-color); | |
border-bottom: 2px solid var(--link-color); | |
} | |
.fileline:nth-child(2n+1) a { | |
color: var(--text-color); | |
} | |
.comment-footer a.favorite-link, .posted-by-footer a.favorite-link { | |
background-position: 3px center !important; | |
background-size: 14px !important; | |
display: inline-block; | |
margin-top: 3px; | |
padding: 3px 5px 3px 19px; | |
} | |
span.posted-by-footer>a.newcomments-link, .fileline a.newcomments-link, .fileline .newcomments { | |
display: inline-block; | |
margin: 0; | |
vertical-align: top; | |
} | |
span.posted-by-footer>a.newcomments-link { | |
padding: 5px 0 0 0; | |
} | |
.fileline a.newcomments-link, .fileline .newcomments, article .topic-comment-body a, article .topic-body>a, article .commentbody a, span.posted-by-footer>a.newcomments-link { | |
color: var(--orange-color) !important; | |
} | |
a.favorite-link.favd { | |
background-color: var(--navy-color) !important; | |
border-radius: 5px; | |
color: var(--yellow-color) !important; | |
} | |
#skipnavcontainer, #backtotopcontainer { | |
display: block; | |
left: 0; | |
position: fixed; | |
width: 100%; | |
z-index: 1000; | |
} | |
#skipnavcontainer { | |
top: -300px; | |
} | |
#skipnavcontainer:focus-within { | |
top: 0; | |
} | |
#backtotopcontainer { | |
bottom: -300px; | |
} | |
#backtotopcontainer:focus-within { | |
bottom: 0; | |
} | |
a#skipnav, a#backtotop { | |
background: var(--background-color); | |
display: block; | |
margin-left: auto; | |
margin-right: auto; | |
padding: 15px; | |
width: -moz-fit-content; | |
width: fit-content; | |
} | |
</style>` | |
// HTML snippet to insert a skipnav link | |
const skipLink = `<div id="skipnavcontainer"><a id="skipnav" href="#main">Skip to main content</a></div>` | |
// HTML snippet to insert an anchor that the skip nav can link to | |
const mainSpan = `<span id="main"></span>` | |
// HTML snippet to insert a "back to top" link at the end of the HTML body | |
const backToTop = `<div id="backtotopcontainer"><a id="backtotop" href="#filepile">Back to top</a></div>` | |
// prioritized cascading attempts to find an entry point for the #main anchor | |
const mainInsertionPoint = findFirst(['section.topics>article', 'section.topics', '#content', 'header + div', 'div']) | |
/* INSERT DOM NODES */ | |
// insert the focus CSS defined above, the skipnav link defined above, the relevant skipnav styles | |
// defined above, and accessible styling for stars | |
ins([globalStyle, skipLink], 'afterbegin', document.body) | |
// insert the anchor defined above, being sure to insert it directly to the start of the content | |
ins(mainSpan, 'afterbegin', mainInsertionPoint) | |
// insert the "Back to top" link defined above at the end of the HTML body | |
ins(backToTop, 'beforeend', document.body) | |
} | |
setStyle() |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment