Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Side by Side 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.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
« new-options.js ('K') | « new-options.js ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 /* 1 /*
2 * This file is part of Adblock Plus <https://adblockplus.org/>, 2 * This file is part of Adblock Plus <https://adblockplus.org/>,
3 * Copyright (C) 2006-2016 Eyeo GmbH 3 * Copyright (C) 2006-2016 Eyeo GmbH
4 * 4 *
5 * Adblock Plus is free software: you can redistribute it and/or modify 5 * Adblock Plus is free software: you can redistribute it and/or modify
6 * it under the terms of the GNU General Public License version 3 as 6 * it under the terms of the GNU General Public License version 3 as
7 * published by the Free Software Foundation. 7 * published by the Free Software Foundation.
8 * 8 *
9 * Adblock Plus is distributed in the hope that it will be useful, 9 * Adblock Plus is distributed in the hope that it will be useful,
10 * but WITHOUT ANY WARRANTY; without even the implied warranty of 10 * but WITHOUT ANY WARRANTY; without even the implied warranty of
(...skipping 180 matching lines...) Expand 10 before | Expand all | Expand 10 after
191 { 191 {
192 list-style: none; 192 list-style: none;
193 margin: 0px; 193 margin: 0px;
194 position: relative; 194 position: relative;
195 padding: 0px; 195 padding: 0px;
196 width: 198px; 196 width: 198px;
197 } 197 }
198 198
199 .tabs.vertical li 199 .tabs.vertical li
200 { 200 {
201 height: 46px;
202 margin-top: -1px;
203 -moz-margin-end: -1px;
204 -webkit-margin-end: -1px;
205 -moz-margin-start: -1px;
206 -webkit-margin-start: -1px;
201 border-color: #CDCDCD transparent; 207 border-color: #CDCDCD transparent;
202 border-style: solid; 208 border-style: solid;
203 border-width: 1px; 209 border-width: 1px;
204 font-size: 16px; 210 font-size: 16px;
205 font-weight: 300; 211 font-weight: 300;
206 line-height: 1em; 212 line-height: 1em;
207 margin-top: -1px;
208 padding: 14px 20px;
209 } 213 }
210 214
211 body[data-tab|="general"] #tab-general, 215 .tabs.vertical li a,
212 body[data-tab|="advanced"] #tab-advanced, 216 .tabs.vertical li span,
213 body[data-tab|="help"] #tab-help 217 .tabs.vertical li::after
214 { 218 {
215 background-color: #FFFFFF; 219 margin: auto 20px;
220 }
221
222 .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
223 {
224 outline: none;
225 text-shadow: 0px 0px 1px #888;
226 }
227
228 .tabs li[role="tab"][aria-selected]
229 {
216 border-radius: 3px 0px 0px 3px; 230 border-radius: 3px 0px 0px 3px;
217 border-width: 1px;
218 font-weight: 600;
219 -moz-border-start-color: #CDCDCD; 231 -moz-border-start-color: #CDCDCD;
220 -webkit-border-start-color: #CDCDCD; 232 -webkit-border-start-color: #CDCDCD;
221 -moz-margin-end: -1px; 233 font-weight: 600;
222 -webkit-margin-end: -1px; 234 background-color: #FFF;
223 -moz-margin-start: -1px;
224 -webkit-margin-start: -1px;
225 -moz-padding-end: 21px;
226 -webkit-padding-end: 21px;
227 -moz-padding-start: 21px;
228 -webkit-padding-start: 21px;
229 } 235 }
230 236
231 html[dir="rtl"] body[data-tab|="general"] #tab-general, 237 html[dir="rtl"] .tabs li[role="tab"][aria-selected]
232 html[dir="rtl"] body[data-tab|="advanced"] #tab-advanced,
233 html[dir="rtl"] body[data-tab|="help"] #tab-help
234 { 238 {
235 border-radius: 0px 3px 3px 0px; 239 border-radius: 0px 3px 3px 0px;
236 } 240 }
237 241
238 .tabs.vertical.bottom 242 .tabs.vertical.bottom
239 { 243 {
240 bottom: 0px; 244 bottom: 0px;
241 position: absolute; 245 position: absolute;
242 } 246 }
243 247
244 .tabs.vertical.bottom li:first-child 248 .tabs.vertical.bottom li:first-child
245 { 249 {
246 border-top: 0px; 250 border-top: 0px;
247 } 251 }
248 252
249 #tab-contribute 253 #tab-contribute
250 { 254 {
251 border-bottom: none; 255 border-bottom: none;
252 } 256 }
253 257
254 #nav-sidebar ul li .icon 258 #nav-sidebar ul li span
255 { 259 {
256 height: 14px; 260 width: 100%;
257 width: 14px;
258 } 261 }
259 262
260 #tab-general .icon 263 #nav-sidebar ul li::after
264 {
265 content: "";
266 min-width: 14px;
267 height: 14px;
268 background-image: url(options-sprite.png);
269 }
270
271 #tab-general::after
261 { 272 {
262 background-position: -16px -18px; 273 background-position: -16px -18px;
263 } 274 }
264 275
265 #tab-advanced .icon 276 #tab-advanced::after
266 { 277 {
267 background-position: -46px -18px; 278 background-position: -46px -18px;
268 } 279 }
269 280
270 #tab-help .icon 281 #tab-help::after
271 { 282 {
272 background-position: -1px -18px; 283 background-position: -1px -18px;
273 } 284 }
274 285
275 #tab-share .icon 286 #tab-share::after
276 { 287 {
277 background-position: -61px -18px; 288 background-position: -61px -18px;
278 } 289 }
279 290
280 #tab-contribute .icon 291 #tab-contribute::after
281 { 292 {
282 background-position: -31px -18px; 293 background-position: -31px -18px;
283 } 294 }
284 295
285 #tab-share:lang(zh), 296 #tab-share:lang(zh),
286 #tab-share[hidden] 297 #tab-share[hidden]
287 { 298 {
288 display: none; 299 display: none;
289 } 300 }
290 301
(...skipping 1028 matching lines...) Expand 10 before | Expand all | Expand 10 after
1319 #other-language .button-add::before 1330 #other-language .button-add::before
1320 { 1331 {
1321 display: none; 1332 display: none;
1322 } 1333 }
1323 1334
1324 #other-language .display 1335 #other-language .display
1325 { 1336 {
1326 -webkit-margin-start: 10px; 1337 -webkit-margin-start: 10px;
1327 -moz-margin-start: 10px; 1338 -moz-margin-start: 10px;
1328 } 1339 }
OLDNEW
« new-options.js ('K') | « new-options.js ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld