thegamer/Cable-Desktop
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Install flow accessibility tweaks

Browse source 
* Make everything bigger and bolder to account for inverse (light on
  dark) text.
* Give links better hover/focus state for the sake of tab navigation.

// FREEBIE
This commit is contained in:
lilia 2015-11-07 21:39:36 -08:00
parent 6fc4bada2e
commit 7105307dd9
2 changed files with 25 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
stylesheets/options.css
View file

@ -858,7 +858,9 @@ input, button, select, textarea {
p { p {
max-width: 30em; max-width: 30em;
margin: 1em auto; margin: 1em auto;
line-height: 1.5em; } line-height: 1.5em;
font-size: 1.2em;
font-weight: bold; }
a { a {
cursor: pointer; } cursor: pointer; }
@ -896,10 +898,14 @@ a {
.nav .dot.selected { .nav .dot.selected {
background: #a2d2f4; } background: #a2d2f4; }
.link:hover, .link:focus {
background: rgba(255, 255, 255, 0.3);
outline: none; }
.link, .link:visited, .link:hover { .link, .link:visited, .link:hover {
padding: 0 3px;
color: white; color: white;
font-weight: bold; font-weight: bold;
border-bottom: dashed 1px white; border-bottom: dashed 2px white;
text-decoration: none; } text-decoration: none; }
.container { .container {
@ -947,7 +953,9 @@ h3.step {
color: #454545; color: #454545;
background: white; } background: white; }
#device-name:focus { #device-name:focus {
outline: white auto 5px; } outline: none; }
#device-name:hover, #device-name:focus {
background: rgba(255, 255, 255, 0.3); }
#verifyCode, #verifyCode,
#code, #code,

16
stylesheets/options.scss
View file

@ -58,6 +58,8 @@ p {
max-width: 30em; max-width: 30em;
margin: 1em auto; margin: 1em auto;
line-height: 1.5em; line-height: 1.5em;
font-size: 1.2em;
font-weight: bold;
} }
a { a {
@ -107,10 +109,15 @@ a {
} }
.link { .link {
&:hover, &:focus {
background: rgba(255,255,255,0.3);
outline: none;
}
&, &:visited, &:hover { &, &:visited, &:hover {
padding: 0 3px;
color: white; color: white;
font-weight: bold; font-weight: bold;
border-bottom: dashed 1px white; border-bottom: dashed 2px white;
text-decoration: none; text-decoration: none;
} }
} }
@ -174,8 +181,13 @@ h3.step {
} }
&:focus { &:focus {
outline: white auto 5px; outline: none;
} }
&:hover, &:focus {
background: rgba(255,255,255,0.3);
}
} }
#verifyCode, #verifyCode,