Unified Diff: skin/new-options.css
Issue 29348642:
Issue 2409 - Improved accessibility of tabs in options page (Closed)
Patch Set:
Created July 25, 2016, 3:01 p.m.
Use n/p to move between diff chunks;
N/P to move between comments.
« new-options.js ('K')
|
« new-options.js ('k')
|
no next file »
|
no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
| Index: skin/new-options.css |
| =================================================================== |
| --- a/skin/new-options.css |
| +++ b/skin/new-options.css |
| @@ -198,39 +198,43 @@ |
| .tabs.vertical li |
| { |
| + height: 46px; |
| + margin-top: -1px; |
| + -moz-margin-end: -1px; |
| + -webkit-margin-end: -1px; |
| + -moz-margin-start: -1px; |
| + -webkit-margin-start: -1px; |
| border-color: #CDCDCD transparent; |
| border-style: solid; |
| border-width: 1px; |
| font-size: 16px; |
| font-weight: 300; |
| line-height: 1em; |
| - margin-top: -1px; |
| - padding: 14px 20px; |
| } |
| -body[data-tab|="general"] #tab-general, |
| -body[data-tab|="advanced"] #tab-advanced, |
| -body[data-tab|="help"] #tab-help |
| +.tabs.vertical li a, |
| +.tabs.vertical li span, |
| +.tabs.vertical li::after |
| { |
| - background-color: #FFFFFF; |
| + margin: auto 20px; |
| +} |
| + |
| +.tabs li[role="tab"]:focus |
|
saroyanm
2016/07/25 17:13:34
Side note: This feels to be distracting for eyes,
Thomas Greiner
2016/07/26 12:50:50
I don't know. We have yet to discuss what the scop
saroyanm
2016/07/26 15:44:37
I think it's fine for now, we can tackle that sepa
|
| +{ |
| + outline: none; |
| + text-shadow: 0px 0px 1px #888; |
| +} |
| + |
| +.tabs li[role="tab"][aria-selected] |
| +{ |
| border-radius: 3px 0px 0px 3px; |
| - border-width: 1px; |
| - font-weight: 600; |
| -moz-border-start-color: #CDCDCD; |
| -webkit-border-start-color: #CDCDCD; |
| - -moz-margin-end: -1px; |
| - -webkit-margin-end: -1px; |
| - -moz-margin-start: -1px; |
| - -webkit-margin-start: -1px; |
| - -moz-padding-end: 21px; |
| - -webkit-padding-end: 21px; |
| - -moz-padding-start: 21px; |
| - -webkit-padding-start: 21px; |
| + font-weight: 600; |
| + background-color: #FFF; |
| } |
| -html[dir="rtl"] body[data-tab|="general"] #tab-general, |
| -html[dir="rtl"] body[data-tab|="advanced"] #tab-advanced, |
| -html[dir="rtl"] body[data-tab|="help"] #tab-help |
| +html[dir="rtl"] .tabs li[role="tab"][aria-selected] |
| { |
| border-radius: 0px 3px 3px 0px; |
| } |
| @@ -251,33 +255,40 @@ |
| border-bottom: none; |
| } |
| -#nav-sidebar ul li .icon |
| +#nav-sidebar ul li span |
| { |
| - height: 14px; |
| - width: 14px; |
| + width: 100%; |
| } |
| -#tab-general .icon |
| +#nav-sidebar ul li::after |
| +{ |
| + content: ""; |
| + min-width: 14px; |
| + height: 14px; |
| + background-image: url(options-sprite.png); |
| +} |
| + |
| +#tab-general::after |
| { |
| background-position: -16px -18px; |
| } |
| -#tab-advanced .icon |
| +#tab-advanced::after |
| { |
| background-position: -46px -18px; |
| } |
| -#tab-help .icon |
| +#tab-help::after |
| { |
| background-position: -1px -18px; |
| } |
| -#tab-share .icon |
| +#tab-share::after |
| { |
| background-position: -61px -18px; |
| } |
| -#tab-contribute .icon |
| +#tab-contribute::after |
| { |
| background-position: -31px -18px; |
| } |
