A Pen by Chase Harrison on CodePen.
Created
February 28, 2019 12:05
-
-
Save ChaseH88/62164a59dce1a4dbc6200d3cbaa66984 to your computer and use it in GitHub Desktop.
Enhanced Accessibility Tool V2
This file contains hidden or 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
| <div id="accessibilityTool"><a class="toggle" href="#" onclick="return false;"><span class="offScreen">Accessibility Tool</span></a> | |
| <div class="menu"> | |
| <div class="overlay show"> | |
| <div class="message"> | |
| <p>This tool uses cookies, click confirm below to use this tool</p> | |
| <a class="cookies" href="#" onclick="return false;" data-confirm="no">Confirm</a> | |
| </div> | |
| </div> | |
| <div class="row help"> | |
| <p>Press <strong>Shift</strong> + <strong>a</strong> to open/close this menu</p> | |
| </div> | |
| <div class="row"> | |
| <div class="top"><input type="range" min="1" max="100" value="0" id="grayscale" data-num="0" /> | |
| <label for="grayscale" class="offScreen">Grayscale</label></div> | |
| <!--top--> | |
| <div class="bottom"><span>Grayscale</span></div> | |
| <!--bottom--> | |
| </div> | |
| <div class="row"> | |
| <div class="top"> | |
| <ul class="contrast"> | |
| <li><a href="#" onclick="return false;" data-num="1"><span class="offScreen">Contrast Level 1</span></a></li> | |
| <li><a href="#" onclick="return false;" data-num="2"><span class="offScreen">Contrast Level 2</span></a></li> | |
| <li><a href="#" onclick="return false;" data-num="3"><span class="offScreen">Contrast Level 3</span></a></li> | |
| </ul> | |
| </div> | |
| <div class="bottom"><span>Contrast</span></div> | |
| </div> | |
| <div class="row twoCol"> | |
| <div class="left"> | |
| <div class="top"><a href="#" onclick="return false;" class="invert" data-num="0"><span class="offScreen">Invert Colors</span></a></div> | |
| <div class="bottom"><span>Invert</span></div> | |
| </div> | |
| <div class="right"> | |
| <div class="top"><a href="#" onclick="return false;" class="cursor"><img alt="Cursor Size" src="/common/resources/designportfolio/televox/CommonLib/scripts/accessibilityTool/cursor.png" /></a></div> | |
| <div class="bottom"><span>Cursor</span></div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="top"> | |
| <ul class="font"> | |
| <li><a href="#" onclick="return false;" data-num="1">a<span class="offScreen">Font Size Level 1</span></a></li> | |
| <li><a href="#" onclick="return false;" data-num="2">a<span class="offScreen">Font Size Level 2</span></a></li> | |
| <li><a href="#" onclick="return false;" data-num="3">a<span class="offScreen">Font Size Level 3</span></a></li> | |
| </ul> | |
| </div> | |
| <!--top--> | |
| <div class="bottom"><span>Font Size</span></div> | |
| <!--bottom--> | |
| </div> | |
| <div class="row reset"> | |
| <a href="#" onclick="return false;" class="reset option"><span></span><span class="offScreen">Reset Accessibility Options</span></a> | |
| </div> | |
| </div> | |
| <!--menu--> | |
| </div> |
This file contains hidden or 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
| $(document).ready(function() { | |
| $.doc = $("#template"); | |
| $("#accessibilityTool").insertAfter("#template"); | |
| $.fontTags = $( | |
| "#template p, #template a, #content li, #template span, h1, h2, h3, h4, h5, h6" | |
| ); | |
| // $.doc = $("html"); | |
| // $.fontTags = $("p, a"); | |
| getCookie(); // Get page defaults | |
| $("#accessibilityTool").insertBefore("#template"); | |
| $("#accessibilityTool a.toggle").on("click", function() { | |
| $(this).next().toggleClass("show"); | |
| }); | |
| $("#template").on("click", function() { | |
| $("#accessibilityTool div.menu").removeClass("show"); | |
| }); | |
| var filterArray = []; | |
| //Confirm Cookies | |
| $("#accessibilityTool a.cookies").on("click", function() { | |
| var cookieConfirm = $("#accessibilityTool a.cookies").attr("data-confirm"); | |
| if (cookieConfirm === "no") { | |
| $(this).attr("data-confirm", "yes"); | |
| $("#accessibilityTool div.overlay").removeClass("show"); | |
| setCookie("confirmcookie", "confirmcookie1", 365); | |
| } | |
| }); | |
| // Reset Button | |
| $("#accessibilityTool a.reset").on("click", function() { | |
| var resetArray = ["grayscale", "contrast", "invert", "cursor", "fontSize"]; | |
| $.fontClick = 0; | |
| for (i = 0; i < resetArray.length; i++) { | |
| setCookie(resetArray[i] + "=", resetArray[i] + "0", 0); | |
| } | |
| $("#accessibilityTool #grayscale").val("0").attr({ | |
| "data-num": "0", | |
| "value": "0" | |
| }); | |
| $("html").removeClass("largeCursor"); | |
| $.fontTags.css("font-size", ""); | |
| $("#accessibilityTool a").removeClass("active"); | |
| $("#accessibilityTool a.num").attr("data-num", 0); | |
| filterArray = []; | |
| $.doc.css({ | |
| WebkitFilter: filterArray.toString().replace(/,/g, " ") | |
| }); | |
| }); | |
| // ---Grayscale--- | |
| $("#accessibilityTool #grayscale").on("input change", function() { | |
| var effect = "grayscale"; | |
| var value = parseInt($(this).val()); | |
| if ($.doc.css("filter").length > 4) { | |
| filterArray = $.doc.css("filter").split(" "); | |
| for (var i = 0; i < filterArray.length; i++) { | |
| filterArray = filterArray.filter(function(item) { | |
| return item.indexOf(effect) !== 0; | |
| }); | |
| } | |
| } | |
| var level = $(this).attr("data-num"); | |
| $(this).attr("data-num", value); | |
| if (value === 100) { | |
| filterArray.push(effect + "(1)"); | |
| } | |
| if (value < 100 && value > 10) { | |
| filterArray.push(effect + "(." + value + ")"); | |
| } | |
| if (value < 10) { | |
| filterArray.push(effect + "(.0" + value + ")"); | |
| } | |
| setCookie(effect, effect + value, 365); | |
| $.doc.css({ | |
| WebkitFilter: filterArray.toString().replace(/,/g, " ") | |
| }); | |
| }); | |
| // ---Contrast--- | |
| $("#accessibilityTool ul.contrast a").on("click", function() { | |
| var effect = "contrast"; | |
| var level = parseInt($(this).attr("data-num")); | |
| if ($.doc.css("filter").length > 4) { | |
| filterArray = $.doc.css("filter").split(" "); | |
| for (var i = 0; i < filterArray.length; i++) { | |
| filterArray = filterArray.filter(function(item) { | |
| return item.indexOf(effect) !== 0; | |
| }); | |
| } | |
| } | |
| if ($(this).hasClass("active")) { | |
| $("#accessibilityTool ul.contrast a").removeClass("active"); | |
| level = 0; | |
| } else { | |
| $("#accessibilityTool ul.contrast a").removeClass("active"); | |
| $(this).addClass("active"); | |
| } | |
| if (level === 0) { | |
| filterArray.push(effect + "(1)"); | |
| setCookie(effect, effect + "0", 365); | |
| } | |
| if (level === 1) { | |
| filterArray.push(effect + "(1.33)"); | |
| setCookie(effect, effect + "1", 365); | |
| } | |
| if (level === 2) { | |
| filterArray.push(effect + "(1.66)"); | |
| setCookie(effect, effect + "2", 365); | |
| } | |
| if (level === 3) { | |
| filterArray.push(effect + "(2)"); | |
| setCookie(effect, effect + "3", 365); | |
| } | |
| $.doc.css({ | |
| WebkitFilter: filterArray.toString().replace(/,/g, " ") | |
| }); | |
| }); | |
| // ---Invert--- | |
| $("#accessibilityTool a.invert").on("click", function() { | |
| var effect = "invert"; | |
| $(this).toggleClass("active"); | |
| if ($.doc.css("filter").length > 4) { | |
| filterArray = $.doc.css("filter").split(" "); | |
| for (var i = 0; i < filterArray.length; i++) { | |
| filterArray = filterArray.filter(function(item) { | |
| return item.indexOf(effect) !== 0; | |
| }); | |
| } | |
| } | |
| if ($(this).hasClass("active")) { | |
| filterArray.push(effect + "(1)"); | |
| setCookie(effect, effect + "1", 365); | |
| } else { | |
| filterArray.push(effect + "(0)"); | |
| setCookie(effect, effect + "0", 365); | |
| } | |
| $.doc.css({ | |
| WebkitFilter: filterArray.toString().replace(/,/g, " ") | |
| }); | |
| }); | |
| // Large Cursor | |
| $("#accessibilityTool a.cursor").on("click", function() { | |
| var effect = "cursor"; | |
| $("html").toggleClass("largeCursor"); | |
| if ($("html").hasClass("largeCursor")) { | |
| $(this).addClass("active"); | |
| $(this).attr("data-num", 1); | |
| setCookie(effect, effect + "1", 365); | |
| } else { | |
| $(this).attr("data-num", 0); | |
| $(this).removeClass("active"); | |
| setCookie(effect, effect + "0", 0); | |
| } | |
| }); | |
| // Increase Font Size | |
| $("#accessibilityTool ul.font a").on("click", function() { | |
| $.fontTags.each(function() { | |
| $(this).removeAttr("style"); | |
| }); | |
| if ($(this).hasClass("active")) { | |
| $(this).removeClass("active"); | |
| } else { | |
| $("#accessibilityTool ul.font a").removeClass("active"); | |
| $(this).addClass("active"); | |
| var level = parseInt($(this).attr("data-num")); | |
| $.fontTags.each(function() { | |
| var font = $(this).css("font-size"); | |
| font = font.substring(0, font.length - 2); | |
| var fontSize = parseInt(font); | |
| if (level === 1) { | |
| $(this).css("font-size", fontSize + (level + 2) + "px"); | |
| setCookie("fontSize", "fontSize" + (level + 2), 365); | |
| } | |
| if (level === 2) { | |
| $(this).css("font-size", fontSize + (level + 4) + "px"); | |
| setCookie("fontSize", "fontSize" + (level + 4), 365); | |
| } | |
| if (level === 3) { | |
| $(this).css("font-size", fontSize + (level + 8) + "px"); | |
| setCookie("fontSize", "fontSize" + (level + 8), 365); | |
| } | |
| }); | |
| } | |
| }); | |
| }); //Doc Ready | |
| function getCookie() { | |
| var cookiesArray = document.cookie.split("; "); | |
| var filterArray = []; | |
| for (var i = 0; i < cookiesArray.length; i++) { | |
| var nameValueArray = cookiesArray[i].split("="); | |
| // Adds defaults depending on Cookies | |
| // GRAYSCALE | |
| if (nameValueArray[0] === "grayscale") { | |
| var level = nameValueArray[1].replace("grayscale", ""); | |
| level = parseInt(level); | |
| if (level === 100) { | |
| filterArray.push("grayscale(1)"); | |
| } | |
| if (level < 100 && level > 10) { | |
| filterArray.push("grayscale(." + level + ")"); | |
| } | |
| if (level < 10) { | |
| filterArray.push("grayscale(0." + level + ")"); | |
| } | |
| $("#accessibilityTool #grayscale").val(level).attr({ | |
| "data-num": level, | |
| "value": level | |
| }); | |
| } | |
| // CONTRAST | |
| if (nameValueArray[0] === "contrast" && nameValueArray[1] === "contrast1") { | |
| filterArray.push("contrast(1.33)"); | |
| $("#accessibilityTool ul.contrast li:first-child a").addClass("active"); | |
| } | |
| if (nameValueArray[0] === "contrast" && nameValueArray[1] === "contrast2") { | |
| filterArray.push("contrast(1.66)"); | |
| $("#accessibilityTool ul.contrast li:nth-child(2) a").addClass("active"); | |
| } | |
| if (nameValueArray[0] === "contrast" && nameValueArray[1] === "contrast3") { | |
| filterArray.push("contrast(2)"); | |
| $("#accessibilityTool ul.contrast li:last-child a").addClass("active"); | |
| } | |
| // INVERT | |
| if (nameValueArray[0] === "invert" && nameValueArray[1] === "invert1") { | |
| filterArray.push("invert(2)"); | |
| $("#accessibilityTool a.invert").attr("data-num", 1).addClass("active"); | |
| } | |
| // CURSOR | |
| if (nameValueArray[0] === "cursor" && nameValueArray[1] === "cursor1") { | |
| $("html").addClass("largeCursor"); | |
| $("#accessibilityTool a.cursor").attr("data-num", 1).addClass("active"); | |
| } | |
| // FONT SIZE | |
| if (nameValueArray[0] === "fontSize") { | |
| var fontArray = nameValueArray[1].replace(/fontSize/g, " "); | |
| var fontSizeInt = parseInt(fontArray); | |
| if (fontSizeInt === 3) { | |
| $("#accessibilityTool ul.font li:first-child a").addClass("active"); | |
| } | |
| if (fontSizeInt === 6) { | |
| $("#accessibilityTool ul.font li:nth-child(2) a").addClass("active"); | |
| } | |
| if (fontSizeInt === 11) { | |
| $("#accessibilityTool ul.font li:last-child a").addClass("active"); | |
| } | |
| console.log(fontSizeInt); | |
| $.fontClick = fontSizeInt; | |
| $.fontTags.each(function() { | |
| var font = $(this).css("font-size"); | |
| font = font.substring(0, font.length - 2); | |
| var fontSize = parseInt(font); | |
| $(this).css("font-size", fontSize - 1 + $.fontClick + "px"); | |
| }); | |
| } | |
| if (nameValueArray[0] === "confirmcookie" && nameValueArray[1] === "confirmcookie1") { | |
| $("#accessibilityTool div.overlay").removeClass("show"); | |
| $("#accessibilityTool a.cookies").attr("data-confirm", "yes"); | |
| } | |
| } | |
| $.doc.css({ | |
| WebkitFilter: filterArray.toString().replace(/,/g, " ") | |
| }); | |
| } | |
| function setCookie(cname, cvalue, exdays) { | |
| var d = new Date(); | |
| d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000); | |
| var expires = "expires=" + d.toUTCString(); | |
| document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; | |
| } | |
| $(document).bind('keypress', function(event) { | |
| if (event.which === 65 && event.shiftKey) { | |
| $("#accessibilityTool a.toggle").click(); | |
| } | |
| }); |
This file contains hidden or 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
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> |
This file contains hidden or 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
| @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"); | |
| #template {transition: filter 500ms ease;} | |
| #accessibilityTool .offScreen {position: absolute; left: -9999vw;} | |
| /*toggle button*/ | |
| .loggedIn #accessibilityTool a.toggle {top: 65px;} | |
| #accessibilityTool a.toggle {display: flex;align-items: center;justify-content: center;width:2.5em;height:2.5em;margin: 0;padding:0;background-color: #1B4581;border:none;border-radius:4px;outline:0;color:#fff;font-size:16px;line-height:0;cursor:pointer;-webkit-transition:all .25s ease-in-out,box-shadow .15s ease-in-out;transition:all .25s ease-in-out,box-shadow .15s ease-in-out; text-decoration: none;position: fixed;top: 15px;right: 0;z-index: 9999;max-width: 50px;max-height: 50px;} | |
| #accessibilityTool a.toggle:hover, #accessibilityTool a.toggle:focus {-webkit-box-shadow:inset 0 0 0 3px #fff;box-shadow:inset 0 0 0 3px #fff} | |
| #accessibilityTool a.toggle::before{display:inline-block;font-family:FontAwesome;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:auto;line-height:1em} | |
| #accessibilityTool a.toggle::before{content:'\f193'} | |
| /*overlay*/ | |
| #accessibilityTool > div.menu > div.overlay {display: none;position: absolute; background-color: rgba(0,0,0,0.5); width: 100%; height: 100%; left: 0; right: 0; top: 0; bottom: 0; z-index: 9999; justify-content: center; align-items: center;} | |
| #accessibilityTool > div.menu > div.overlay.show {display: flex;} | |
| #accessibilityTool > div.menu > div.overlay > div.message {background-color: #f3f3f3; max-width: 80%; padding: 10px; border: 2px solid #3a3a3a; text-align: center;} | |
| #accessibilityTool > div.menu > div.overlay > div.message p {color: #252525;} | |
| #accessibilityTool > div.menu > div.overlay > div.message a {display: block; max-width: 125px; background-color:#252525; color: #f3f3f3; border: 1px solid #dddddd;margin: 0 auto;text-decoration: none;padding: 5px;} | |
| /*menu*/ | |
| /*first row*/ | |
| #accessibilityTool > div.menu > div.row.help {padding: 0 !important;} | |
| #accessibilityTool > div.menu > div.row.help p {padding: 5px 0 !important;color: #252525 !important;font-size: 12px !important;line-height: normal !important;} | |
| #accessibilityTool > div.menu {visibility: hidden; /*border-radius: 20px;*/ overflow: hidden; border: 1px solid #ABABAB; position: fixed; top: 40px; right: 15px; width: 275px; z-index: 9998; opacity: 0; transition: 200ms ease opacity;} | |
| .loggedIn #accessibilityTool > div.menu {top: 120px;} | |
| #accessibilityTool > div.menu.show {visibility: visible; opacity: 1;} | |
| #accessibilityTool > div.menu > div.row {text-align: center;} | |
| #accessibilityTool > div.menu > div.row:nth-of-type(odd) {background-color: #F0F0F0;} | |
| #accessibilityTool > div.menu > div.row:nth-of-type(even) {background-color: #DEDEDE;} | |
| #accessibilityTool > div.menu > div.row:not(:first-child):not(:last-child) {box-shadow: inset 0 0 0 1px #fff;padding: 15px;} | |
| /*#accessibilityTool > div.menu > div.row:first-child {height: 30px; border-bottom: 1px solid #000;} | |
| #accessibilityTool > div.menu > div.row:last-child {height: 30px; border-top: 1px solid #000;}*/ | |
| #accessibilityTool > div.menu > div.row span {text-transform: uppercase; font-family: Arial; font-weight: 400; display: inline-block; text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.025), 1px -1px 0 rgba(0, 0, 0, 0.025), -1px 1px 0 rgba(0, 0, 0, 0.025), 1px 1px 0 rgba(0, 0, 0, 0.025);} | |
| /*slider for grayscale */ | |
| #accessibilityTool input[type="range"] {-webkit-appearance: none; background: linear-gradient(to right, #000000 5%,#ffffff 85%); border: 1px solid #ABABAB; height: 35px; width: 100%; margin: 0; padding: 0;} | |
| #accessibilityTool input[type=range]::-webkit-slider-thumb {-webkit-appearance: none; border: 7px solid #fff; height: 45px; width: 45px; border-radius: 0px; background: transparent; cursor: pointer; margin-top: -1px; box-shadow: 0;} | |
| #accessibilityTool input[type=range]::-moz-range-thumb {box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; border: 1px solid #000000; height: 36px; width: 16px; border-radius: 3px; background: #ffffff; cursor: pointer;} | |
| #accessibilityTool input[type=range]::-ms-thumb {box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; border: 1px solid #000000; height: 36px; width: 16px; border-radius: 3px; background: #ffffff; cursor: pointer;} | |
| /*contrast and fontsize*/ | |
| #accessibilityTool > div.menu > div.row > div.top ul {list-style-type: none; margin: 0; padding: 0; display: flex; justify-content: space-around;} | |
| #accessibilityTool > div.menu > div.row > div.top ul li {} | |
| #accessibilityTool > div.menu > div.row > div.top ul li a {display: inline-block; text-decoration: none; color: #000;} | |
| /*contrast circles*/ | |
| #accessibilityTool ul.contrast li a {display: inline-block;height: 45px;width: 45px;border-radius: 50%;overflow: hidden;border: 1px solid #C0C0C0;transition: box-shadow 300ms ease;} | |
| #accessibilityTool ul.contrast li:first-child a {background: -moz-linear-gradient(left, #000000 0%, #000000 50%, #c3c3c3 51%, #c3c3c3 100%); background: -webkit-linear-gradient(left, #000000 0%,#000000 50%,#c3c3c3 51%,#c3c3c3 100%); background: linear-gradient(to right, #000000 0%,#000000 50%,#c3c3c3 51%,#c3c3c3 100%);} | |
| #accessibilityTool ul.contrast li:nth-child(2) a {background: -moz-linear-gradient(left, #000000 0%, #000000 50%, #f2f2f2 51%, #f2f2f2 100%); background: -webkit-linear-gradient(left, #000000 0%,#000000 50%,#f2f2f2 51%,#f2f2f2 100%); background: linear-gradient(to right, #000000 0%,#000000 50%,#f2f2f2 51%,#f2f2f2 100%);} | |
| #accessibilityTool ul.contrast li:last-child a {background: -moz-linear-gradient(left, #000000 0%, #000000 50%, #ffffff 51%, #ffffff 100%); background: -webkit-linear-gradient(left, #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%); background: linear-gradient(to right, #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);} | |
| #accessibilityTool ul.contrast a.active, #accessibilityTool ul.contrast a:hover, #accessibilityTool ul.contrast a:focus {box-shadow: 0 0 0 5px #fff;} | |
| /*invert*/ | |
| #accessibilityTool a.invert {margin: 0 10px; border: 1px solid #ABABAB; background-color: #000; height: 37px; position: relative; display: flex; align-items: center; justify-content: center; transition: background-color 250ms ease;} | |
| #accessibilityTool a.invert.active {background-color: #fff;} | |
| #accessibilityTool a.invert:after {content: ""; position: absolute; height: 15px; width: 50%; background-color: #fff; transition: background-color 250ms ease;} | |
| #accessibilityTool a.invert.active:after {background-color: #000;} | |
| #accessibilityTool a.invert:hover:after {position: relative; top: 1px;} | |
| /*font*/ | |
| #accessibilityTool > div.menu > div.row > div.top ul.font {align-items: flex-end;} | |
| #accessibilityTool > div.menu > div.row > div.top ul.font li a {padding: 2px 7px;line-height: normal; transition: background-color 250ms ease;} | |
| #accessibilityTool > div.menu > div.row > div.top ul.font li:first-of-type a {font-size: 20px;} | |
| #accessibilityTool > div.menu > div.row > div.top ul.font li:nth-of-type(2) a {font-size: 30px;} | |
| #accessibilityTool > div.menu > div.row > div.top ul.font li:last-of-type a {font-size: 40px;} | |
| #accessibilityTool > div.menu > div.row > div.top ul.font li a.active, #accessibilityTool > div.menu > div.row > div.top ul.font li a:hover, #accessibilityTool > div.menu > div.row > div.top ul.font li a:focus {background-color: #fff;} | |
| /*two col*/ | |
| #accessibilityTool > div.menu > div.row.twoCol {display: flex;} | |
| #accessibilityTool > div.menu > div.row.twoCol > div {flex: 1 50%;} | |
| /*large cursor */ | |
| #accessibilityTool a.cursor {display: inline-block; background-color: transparent; transition: background-color 250ms ease;} | |
| #accessibilityTool a.cursor.active, #accessibilityTool a.cursor:hover, #accessibilityTool a.cursor:focus {background-color: #fff;} | |
| #accessibilityTool a.cursor img {max-width: 100%; margin: 5px;} | |
| .largeCursor #template *, .largeCursor #template *:hover, .largeCursor #accessibilityTool *, .largeCursor #accessibilityTool *:hover {cursor: url("http://chaseharrison-test.televox.west.com/UserFiles/Servers/Server_363921/Templates/accessibilityTool/largeCursor.png"), auto !important;} | |
| /*reset*/ | |
| @keyframes spin {from {transform:rotate(0deg);} to {transform:rotate(360deg);}} | |
| #accessibilityTool > div.menu > div.row.reset {padding: 0 !important} | |
| #accessibilityTool > div.menu > div.row.reset a {font-size: 25px; display: block; padding: 10px;} | |
| #accessibilityTool > div.menu > div.row.reset a span:before {content: "\f021"; font-family: FontAwesome; color: #000;} | |
| #accessibilityTool > div.menu > div.row.reset a:hover span, #accessibilityTool > div.menu > div.row.reset a:focus span {animation-name: spin; animation-duration: 3000ms; animation-iteration-count: infinite; animation-timing-function: linear;} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment