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

Delta Between Two Patch Sets: skin/options.css

Issue 6088024630755328: issue 1526 - Implement new options page design for Chrome/Opera/Safari (Closed)
Left Patch Set: Created Jan. 27, 2015, 11:16 a.m.
Right Patch Set: Comment about solution being temprorary is added to subscriptions.xml Created June 13, 2015, 12:59 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
Left: Side by side diff | Download
Right: Side by side diff | Download
« no previous file with change/comment | « options.js ('k') | skin/options-sprite.png » ('j') | no next file with change/comment »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
LEFTRIGHT
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-2015 Eyeo GmbH 3 * Copyright (C) 2006-2015 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
11 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 11 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12 * GNU General Public License for more details. 12 * GNU General Public License for more details.
13 * 13 *
14 * You should have received a copy of the GNU General Public License 14 * You should have received a copy of the GNU General Public License
15 * along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>. 15 * along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>.
16 */ 16 */
17 17
18 body 18 body
19 { 19 {
20 background-color: #F5F5F5; 20 background-color: #F5F5F5;
21 display: flex; 21 display: flex;
22 font-family: 'Source Sans Pro', sans-serif; 22 font-family: "Source Sans Pro", sans-serif;
23 font-size: 14px; 23 font-size: 14px;
24 white-space: nowrap; 24 white-space: nowrap;
25 } 25 }
26 26
27 h1 27 h1
28 { 28 {
29 font-size: 24px; 29 font-size: 24px;
30 font-weight: 100; 30 font-weight: 100;
31 } 31 }
32 32
33 h2 33 h2
34 { 34 {
35 font-size: 16px; 35 font-size: 16px;
36 font-weight: 500; 36 font-weight: 500;
37 } 37 }
38 38
39 p 39 p
40 { 40 {
41 font-weight: 100; 41 font-weight: 100;
42 } 42 }
43
43 hr 44 hr
44 { 45 {
45 background-color: #CDCDCD; 46 background-color: #CDCDCD;
46 border: 0px; 47 border: 0px;
47 height: 1px; 48 height: 1px;
48 margin: 0px; 49 margin: 0px;
50 }
51
52 input[type="search"]::-webkit-search-cancel-button
53 {
54 display: none;
49 } 55 }
50 56
51 .option-name 57 .option-name
52 { 58 {
53 display: flex; 59 display: flex;
54 } 60 }
55 61
56 .option-name > * 62 .option-name > *
57 { 63 {
58 -moz-margin-end: 6px; 64 -moz-margin-end: 6px;
59 -webkit-margin-end: 6px; 65 -webkit-margin-end: 6px;
60 } 66 }
61 67
62 #nav-sidebar 68 #nav-sidebar
63 { 69 {
64 position: relative; 70 position: relative;
65 padding: 0px 0px 16px 0px; 71 padding: 0px 0px 16px 0px;
66 -moz-padding-start: 10px; 72 -moz-padding-start: 10px;
67 -webkit-padding-start: 10px; 73 -webkit-padding-start: 10px;
68 min-width: 198px; 74 min-width: 198px;
69 } 75 }
70 76
71 #nav-sidebar .fixed 77 #nav-sidebar .fixed
72 { 78 {
73 height: 100%; 79 height: 100%;
74 position: fixed; 80 position: fixed;
75 }
76
77 #blocking-languages,
78 #acceptable-ads
79 {
80 -moz-padding-end: 40px;
81 -webkit-padding-end: 40px;
82 } 81 }
83 82
84 #page-title 83 #page-title
85 { 84 {
86 -webkit-margin-start: 10px; 85 -webkit-margin-start: 10px;
87 -moz-margin-start: 10px; 86 -moz-margin-start: 10px;
88 } 87 }
89 88
90 #page-title p 89 #page-title p
91 { 90 {
(...skipping 41 matching lines...) Expand 10 before | Expand all | Expand 10 after
133 border-width: 1px 0px 0px 0px; 132 border-width: 1px 0px 0px 0px;
134 font-size: 16px; 133 font-size: 16px;
135 font-weight: 100; 134 font-weight: 100;
136 padding: 16px 0px; 135 padding: 16px 0px;
137 -moz-padding-end: 20px; 136 -moz-padding-end: 20px;
138 -webkit-padding-end: 20px; 137 -webkit-padding-end: 20px;
139 -moz-padding-start: 11px; 138 -moz-padding-start: 11px;
140 -webkit-padding-start: 11px; 139 -webkit-padding-start: 11px;
141 } 140 }
142 141
143 .tabs.vertical li.active + li 142 body[data-tab="general"] #tab-general + li,
143 body[data-tab="advanced"] #tab-advanced + li,
144 body[data-tab="help"] #tab-help + li
144 { 145 {
145 border-width: 0px; 146 border-width: 0px;
146 } 147 }
147 148
148 .tabs.vertical li:last-child 149 #tab-help,
149 { 150 body[data-tab="advanced"] #tab-advanced + li
150 border-bottom-width: 1px !important; 151 {
151 } 152 border-bottom-width: 1px;
152 153 }
153 .tabs.vertical li.active 154
155 body[data-tab="general"] #tab-general,
156 body[data-tab="advanced"] #tab-advanced,
157 body[data-tab="help"] #tab-help
154 { 158 {
155 background-color: #FFFFFF; 159 background-color: #FFFFFF;
156 border-radius: 3px 0px 0px 3px; 160 border-radius: 3px 0px 0px 3px;
157 border-width: 1px; 161 border-width: 1px;
158 -moz-border-end: 0px; 162 -moz-border-end: 0px;
159 -webkit-border-end: 0px; 163 -webkit-border-end: 0px;
160 font-weight: 900; 164 font-weight: 900;
161 -moz-margin-end: -1px; 165 -moz-margin-end: -1px;
162 -webkit-margin-end: -1px; 166 -webkit-margin-end: -1px;
163 -moz-padding-start: 10px; 167 -moz-padding-start: 10px;
(...skipping 61 matching lines...) Expand 10 before | Expand all | Expand 10 after
225 width: 960px; 229 width: 960px;
226 } 230 }
227 231
228 #tab-content h1 232 #tab-content h1
229 { 233 {
230 border-bottom: 1px solid #CDCDCD; 234 border-bottom: 1px solid #CDCDCD;
231 margin: 0px; 235 margin: 0px;
232 padding: 40px 0px 16px 0px; 236 padding: 40px 0px 16px 0px;
233 } 237 }
234 238
235 #modal-background 239 .nav-link
236 { 240 {
237 background-color: white; 241 -moz-margin-start: 12px;
238 position: absolute; 242 -webkit-margin-start: 12px;
239 opacity: 0.7; 243 color: #3A7BA6;
240 top: 0px;
241 right: 0;
242 bottom: 0px;
243 left: 0;
244 z-index: 2;
245 } 244 }
246 245
247 #content-wrapper 246 #content-wrapper
248 { 247 {
249 position: relative; 248 position: relative;
250 } 249 }
251 250
252 #content-wrapper > div, 251 #content-wrapper > div
253 #blocking-list > div
254 { 252 {
255 display: none; 253 display: none;
254 }
255
256 body[data-tab="general"] #content-general,
257 body[data-tab="advanced"] #content-advanced,
258 body[data-tab="help"] #content-help
259 {
260 display: block;
256 } 261 }
257 262
258 div.button 263 div.button
259 { 264 {
260 cursor: pointer; 265 cursor: pointer;
261 display: flex; 266 display: flex;
262 } 267 }
263 268
264 .table 269 .table
265 { 270 {
266 list-style: none; 271 list-style: none;
267 margin: 0px; 272 margin: 0px;
268 padding: 0px; 273 padding: 0px;
269 position: relative; 274 position: relative;
270 width: 400px; 275 width: 400px;
271 } 276 }
272 277
273 .table li 278 .table li
274 { 279 {
275 display: flex; 280 display: flex;
276 padding: 14px 0px; 281 padding: 14px 0px;
277 -webkit-padding-start: 16px; 282 -webkit-padding-start: 16px;
278 -moz-padding-start: 16px; 283 -moz-padding-start: 16px;
279 } 284 }
280 285
286 .table.list li .display
287 {
288 flex: 1;
289 }
290
281 .table.list li:nth-child(odd) 291 .table.list li:nth-child(odd)
282 { 292 {
283 background-color: #F5F5F5; 293 background-color: #F5F5F5;
284 } 294 }
285 295
286 .table.list li .display
287 {
288 flex: 1;
289 }
290
291 .table.cols li:nth-child(even) 296 .table.cols li:nth-child(even)
292 { 297 {
293 background-color: #F5F5F5; 298 background-color: #F5F5F5;
294 }
295
296 #blocking-list-own .table
297 {
298 height: 290px;
299 overflow: auto;
300 width: auto;
301 } 299 }
302 300
303 .table label 301 .table label
304 { 302 {
305 vertical-align: top; 303 vertical-align: top;
306 } 304 }
307 305
308 .table.cols span 306 .table.cols span
309 { 307 {
310 display: inline-block; 308 display: inline-block;
311 width: 30%; 309 width: 30%;
312 } 310 }
313 311
314 .table.cols .col-name 312 .table.cols .col-name
315 { 313 {
316 border-bottom: 1px solid #CDCDCD; 314 border-bottom: 1px solid #CDCDCD;
317 } 315 }
318 316
319 .table.cols .col-name span 317 .table.cols .col-name span
320 { 318 {
321 display: inline-block; 319 display: inline-block;
322 width: 30%; 320 width: 30%;
323 } 321 }
324 322
325 .table.cols .col-name span:first-child 323 .table.cols .col-name span:first-child
326 { 324 {
327 padding-left: 38px; 325 -webkit-padding-start: 38px;
328 } 326 -moz-padding-start: 38px;
329 327 }
330 #further-blocking .table 328
331 { 329 .table::-webkit-scrollbar,
332 height: 290px; 330 #custom-wrapper::-webkit-scrollbar
333 overflow: auto; 331 {
334 } 332 -webkit-padding-end: 10px;
335
336 .table::-webkit-scrollbar
337 {
338 padding-right: 10px;
339 width: 5px; 333 width: 5px;
340 } 334 }
341 335
342 .table::-webkit-scrollbar-thumb 336 .table::-webkit-scrollbar-thumb,
337 #custom-wrapper::-webkit-scrollbar-thumb
343 { 338 {
344 background-color: #CDCDCD; 339 background-color: #CDCDCD;
345 border-radius: 5px; 340 border-radius: 5px;
346 padding: 0px 40px; 341 padding: 0px 40px;
347 } 342 }
348 343
349 .table::-webkit-scrollbar-thumb:hover 344 .table::-webkit-scrollbar-thumb:hover,
345 #custom-wrapper::-webkit-scrollbar-thumb:hover
350 { 346 {
351 background-color: #A1A1A1; 347 background-color: #A1A1A1;
352 } 348 }
353 349
354 .table input[type=checkbox] 350 .table input[type="checkbox"]
355 { 351 {
356 display:none; 352 margin-top: 0px;
357 }
358
359 .table input[type=checkbox] + span
360 {
361 background-position: -51px 0px;
362 height: 18px;
363 -moz-margin-end: 20px; 353 -moz-margin-end: 20px;
364 -webkit-margin-end: 20px; 354 -webkit-margin-end: 20px;
365 padding: 0px 0px 0px 0px; 355 padding: 0px 0px 0px 0px;
356 visibility: hidden;
357 }
358
359 .table input[type="checkbox"]::before
360 {
361 content: "";
362 background-position: -51px 0px;
363 height: 18px;
366 width: 18px; 364 width: 18px;
367 } 365 visibility: visible;
368 366 }
369 .table input[type=checkbox]:checked + span 367
370 { 368 .table input[type="checkbox"]:checked::before
369 {
370 content: "";
371 background-position: -68px 0px; 371 background-position: -68px 0px;
372 height: 18px; 372 height: 18px;
373 padding: 0px; 373 padding: 0px;
374 width: 18px; 374 width: 18px;
375 visibility: visible;
375 } 376 }
376 377
377 .table button.delete 378 .table button.delete
378 { 379 {
379 background-color: transparent; 380 background-color: transparent;
380 background-position: -9px -32px; 381 background-position: -9px -32px;
381 border: 0px; 382 border: 0px;
382 height: 10px; 383 height: 10px;
383 margin-top: 5px; 384 margin-top: 5px;
384 -moz-margin-end: 20px; 385 -moz-margin-end: 20px;
(...skipping 28 matching lines...) Expand all
413 } 414 }
414 415
415 .tabs.horizontal li.active 416 .tabs.horizontal li.active
416 { 417 {
417 border-bottom: 2px solid #1E8728; 418 border-bottom: 2px solid #1E8728;
418 color: black; 419 color: black;
419 font-weight: bold; 420 font-weight: bold;
420 padding-bottom: 10px; 421 padding-bottom: 10px;
421 } 422 }
422 423
423 .icon, .table input[type=checkbox] + span, .table button.delete, 424 .icon, .table input[type="checkbox"]::before, .table button.delete,
424 #content-help a:before, #modal-close:before 425 #content-help a::before, #dialog-close::before
425 { 426 {
426 background-image: url(options-sprite.png); 427 background-image: url(options-sprite.png);
427 display: inline-block; 428 display: inline-block;
428 } 429 }
429 430
430 .icon-add 431 .icon-add
431 { 432 {
432 background-position: -0px -0px; 433 background-position: -0px -0px;
433 cursor: pointer; 434 cursor: pointer;
434 height: 18px; 435 height: 18px;
(...skipping 10 matching lines...) Expand all
445 446
446 .icon-edit 447 .icon-edit
447 { 448 {
448 background-position: -17px -0px; 449 background-position: -17px -0px;
449 cursor: pointer; 450 cursor: pointer;
450 height: 18px; 451 height: 18px;
451 width: 18px; 452 width: 18px;
452 } 453 }
453 454
454 .icon-arrow, 455 .icon-arrow,
455 #content-help a:before 456 #content-help a::before
456 { 457 {
457 background-position: 0px -42px; 458 background-position: 0px -42px;
458 content: ""; 459 content: "";
459 cursor: pointer; 460 cursor: pointer;
460 height: 11px; 461 height: 11px;
461 vertical-align: middle; 462 vertical-align: middle;
462 width: 7px; 463 width: 7px;
463 } 464 }
464 465
465 .controls 466 .controls
466 { 467 {
467 border-top: 1px solid #CDCDCD; 468 border-top: 1px solid #CDCDCD;
468 padding-top: 8px; 469 padding-top: 8px;
469 -moz-padding-start: 16px; 470 -moz-padding-start: 16px;
470 -webkit-padding-start: 16px; 471 -webkit-padding-start: 16px;
471 position: relative; 472 position: relative;
472 } 473 }
473 474
474 .controls > div 475 .controls > div
475 { 476 {
476 display: flex; 477 display: flex;
477 } 478 }
478 479
480 .controls button,
481 #dialog-close
482 {
483 background: none;
484 border: none;
485 cursor: pointer;
486 display: block;
487 padding: 0;
488 }
489
490 .controls button span:not(.icon)
491 {
492 color: #3A7BA6;
493 display: inline-block;
494 -moz-margin-start: 15px;
495 -webkit-margin-start: 15px;
496 padding-top: 1px;
497 vertical-align: top;
498 }
499
500 /*
501 General tab content
502 */
503
504 #blocking-languages,
505 #acceptable-ads
506 {
507 -moz-padding-end: 40px;
508 -webkit-padding-end: 40px;
509 }
510
511 #custom-wrapper
512 {
513 width: 400px;
514 height: 290px;
515 overflow: auto;
516 }
517
518 #custom-wrapper .table
519 {
520 width: 100%;
521 }
522
479 #whitelisting .controls 523 #whitelisting .controls
480 { 524 {
481 -moz-padding-start: 12px; 525 -moz-padding-start: 12px;
482 -webkit-padding-start: 12px; 526 -webkit-padding-start: 12px;
483 } 527 }
484 528
485 #whitelisting .controls input[type=text], 529 #whitelisting .controls input[type="text"]
486 #whitelisting .controls input[type=text]:focus
487 { 530 {
488 border: 0px; 531 border: 0px;
489 border-bottom: 1px solid #A1A1A1; 532 border-bottom: 1px solid #A1A1A1;
490 -moz-padding-end: 25px; 533 -moz-padding-end: 25px;
491 -webkit-padding-end: 25px; 534 -webkit-padding-end: 25px;
492 -moz-margin-start: 14px; 535 -moz-margin-start: 14px;
493 -webkit-margin-start: 14px; 536 -webkit-margin-start: 14px;
494 outline: 0px; 537 outline: 0px;
495 padding-bottom: 5px; 538 padding-bottom: 5px;
496 vertical-align: text-bottom; 539 vertical-align: text-bottom;
497 width: 330px; 540 width: 330px;
498 } 541 }
499 542
500 .controls button, 543 #whitelisting .controls .button-add span
501 #modal-close 544 {
502 { 545 -moz-margin-start: 5px;
503 background: none; 546 -webkit-margin-start: 5px;
504 border: none; 547 }
505 cursor: pointer; 548
506 display: block; 549 #whitelisting .button-add
507 padding: 0; 550 {
508 } 551 -moz-margin-start: 32px;
509 552 -webkit-margin-start: 32px;
510 .controls button span:not(.icon) 553 }
511 { 554
555 #whitelisting-add-button + span
556 {
557 flex: 1;
558 }
559
560 .icon-enter
561 {
562 background-position: -18px -85px;
563 cursor: pointer;
564 height: 10px;
565 position: absolute;
566 top: 10px;
567 -moz-margin-start: -20px;
568 -webkit-margin-start: -20px;
569 width: 10px;
570 }
571
572 .button-add, .cancel-button
573 {
574 background-color: transparent;
575 border: 0px;
512 color: #3A7BA6; 576 color: #3A7BA6;
513 display: inline-block; 577 cursor: pointer;
514 -moz-margin-start: 15px; 578 }
515 -webkit-margin-start: 15px; 579
516 padding-top: 1px; 580 /*
517 vertical-align: top; 581 Advanced tab content
582 */
583
584 #blocking-list-own .table
585 {
586 height: 290px;
587 overflow: auto;
588 width: auto;
518 } 589 }
519 590
520 #blocking-list-own .controls 591 #blocking-list-own .controls
521 { 592 {
593 display: flex;
522 padding: 0px; 594 padding: 0px;
523 border: none; 595 border: none;
524 } 596 }
525 597
526 #modal .btn-wrapper span:not(.icon) 598 #blocking-list-own input[type="text"],
527 { 599 #blocking-list-own input[type="text"]:focus
528 color: #3A7BA6;
529 display: inline-block;
530 -moz-margin-start: 15px;
531 -webkit-margin-start: 15px;
532 vertical-align: top;
533 }
534
535 #content-help
536 {
537 counter-reset: section;
538 }
539
540 #content-help h1:before
541 {
542 counter-increment: section;
543 content: counter(section) ". ";
544 }
545
546 #content-help a
547 {
548 color: #3A7BA6;
549 display: inline-block;
550 text-decoration: none;
551 -moz-margin-end: 16px;
552 -webkit-margin-end: 16px;
553 vertical-align: top;
554 }
555
556 #content-help a:before
557 {
558 -moz-margin-end: 6px;
559 -webkit-margin-end: 6px;
560 }
561
562 .nav-link
563 {
564 -moz-margin-start: 12px;
565 -webkit-margin-start: 12px;
566 color: #3A7BA6;
567 }
568
569 #blocking-list-own input[type=text],
570 #blocking-list-own input[type=text]:focus
571 { 600 {
572 border: 0px; 601 border: 0px;
573 border-bottom: 1px solid; 602 border-bottom: 1px solid;
574 border-top: 1px solid; 603 border-top: 1px solid;
575 border-color: #1E8728; 604 border-color: #1E8728;
576 box-sizing: border-box; 605 box-sizing: border-box;
577 height: 25px; 606 height: 25px;
578 outline: 0px; 607 outline: 0px;
579 padding-left: 10px; 608 -moz-padding-start: 10px;
609 -webkit-padding-start: 10px;
580 width: 100%; 610 width: 100%;
581 } 611 }
582 612
583 .icon-enter-blue 613 .icon-enter-blue
584 { 614 {
585 background-position: -28px -85px; 615 background-position: -28px -85px;
586 cursor: pointer; 616 cursor: pointer;
587 height: 10px; 617 height: 10px;
588 margin: 0px 0px -2px 2px; 618 margin: 0px 0px -2px 2px;
589 width: 10px; 619 width: 10px;
590 } 620 }
591 621
592 #blocking-list-own .input-control 622 #blocking-list-own .input-control
593 { 623 {
594 position: absolute; 624 position: absolute;
625 -webkit-margin-start: -50px;
626 -moz-margin-start: -50px;
595 bottom: 5px; 627 bottom: 5px;
596 right: 10px;
597 } 628 }
598 629
599 #blocking-list-own .input-separator 630 #blocking-list-own .input-separator
600 { 631 {
601 display: inline-block; 632 display: inline-block;
602 border-right: 1px solid #CDCDCD; 633 -moz-border-end: 1px solid #CDCDCD;
634 -webkit-border-end: 1px solid #CDCDCD;
603 height: 15px; 635 height: 15px;
604 margin: 0px 4px -4px 0px; 636 margin: 0px 4px -4px 0px;
605 width: 1px; 637 width: 1px;
606 } 638 }
607 639
608 #blocking-list-own .input-btn-text 640 #blocking-list-own .input-button-text
609 { 641 {
610 font-size: 12px; 642 font-size: 12px;
611 }
612
613 .icon-enter
614 {
615 background-position: -18px -85px;
616 cursor: pointer;
617 height: 10px;
618 position: absolute;
619 top: 2px;
620 -moz-margin-start: -20px;
621 -webkit-margin-start: -20px;
622 width: 10px;
623 }
624
625 .button-add, .cancelbtn
626 {
627 background-color: transparent;
628 border: 0px;
629 color: #3A7BA6;
630 cursor: pointer;
631 }
632
633 .controls .button-add span
634 {
635 -moz-margin-start: 5px !important;
636 -webkit-margin-start: 5px !important;
637 }
638
639 #other-language .button-add
640 {
641 -webkit-border-end: 1px solid #CDCDCD;
642 -moz-border-end: 1px solid #CDCDCD;
643 -webkit-padding-end: 10px;
644 -moz-padding-end: 10px;
645 -webkit-padding-start: 0px;
646 -moz-padding-start: 0px;
647 }
648
649 #other-language .display
650 {
651 -webkit-margin-start: 10px;
652 -moz-margin-start: 10px;
653 }
654
655 #whitelisting .button-add
656 {
657 -moz-margin-start: 32px;
658 -webkit-margin-start: 32px;
659 }
660
661 #whitelisting-add-btn + span
662 {
663 flex: 1;
664 }
665
666 .cancelbtn
667 {
668 float: right;
669 } 643 }
670 644
671 .tooltip, #block-element-explanation a 645 .tooltip, #block-element-explanation a
672 { 646 {
673 border-bottom: dotted 2px; 647 border-bottom: dotted 2px;
674 color: #3A7BA6; 648 color: #3A7BA6;
675 font-size: 12px; 649 font-size: 12px;
676 text-decoration: none; 650 text-decoration: none;
677 } 651 }
678 652
679 #content-advanced .tooltip 653 #content-advanced .tooltip
680 { 654 {
681 -moz-margin-start: 8px; 655 -moz-margin-start: 8px;
682 -webkit-margin-start: 8px; 656 -webkit-margin-start: 8px;
683 } 657 }
684 658
685 #block-element-explanation a 659 #block-element-explanation a
686 { 660 {
687 color: black; 661 color: black;
688 border-bottom-color: #3A7BA6; 662 border-bottom-color: #3A7BA6;
689 font-weight: bold; 663 font-weight: bold;
690 padding-left: 0px !important; 664 -moz-padding-start: 0px;
691 } 665 -webkit-padding-start: 0px;
692 666 }
693 #modal 667
668 /*
669 Help tab content
670 */
671
672 #content-help
673 {
674 counter-reset: section;
675 }
676
677 #content-help h1::before
678 {
679 counter-increment: section;
680 content: counter(section) ". ";
681 }
682
683 #content-help a
684 {
685 color: #3A7BA6;
686 display: inline-block;
687 text-decoration: none;
688 -moz-margin-end: 16px;
689 -webkit-margin-end: 16px;
690 vertical-align: top;
691 }
692
693 #content-help a::before
694 {
695 -moz-margin-end: 6px;
696 -webkit-margin-end: 6px;
697 }
698
699 /*
700 Dialog
701 */
702
703 #dialog-background
704 {
705 display: none;
706 background-color: white;
707 position: absolute;
708 opacity: 0.7;
709 top: 0px;
710 right: 0px;
711 bottom: 0px;
712 left: 0px;
713 z-index: 2;
714 }
715
716 body[data-dialog] #dialog-background
717 {
718 display: block;
719 }
720
721 #dialog
694 { 722 {
695 background-color: #FFFFFF; 723 background-color: #FFFFFF;
696 border: 2px solid #4D9D4B; 724 border: 2px solid #4D9D4B;
697 border-radius: 3px; 725 border-radius: 3px;
698 left:50%; 726 display: none;
699 top:50%; 727 margin: auto;
700 margin:0 auto;
701 margin-left:-200px;
702 margin-top:-200px;
703 position:absolute; 728 position:absolute;
729 top:100px;
730 left: 0px;
731 right: 0px;
704 z-index: 2; 732 z-index: 2;
705 visibility: hidden;
706 width: 400px; 733 width: 400px;
707 } 734 }
708 735
709 #modal header 736 #dialog header
710 { 737 {
711 background-color: #4D9D4B; 738 background-color: #4D9D4B;
712 display: flex; 739 display: flex;
713 height: 25px; 740 height: 25px;
714 padding: 10px; 741 padding: 10px;
715 } 742 }
716 743
717 #modal-close 744 #dialog-close
718 { 745 {
719 -moz-border-start: 1px solid #25612B; 746 -moz-border-start: 1px solid #25612B;
720 -webkit-border-start: 1px solid #25612B; 747 -webkit-border-start: 1px solid #25612B;
721 color: #0F660F; 748 color: #0F660F;
722 display: inline-block; 749 display: inline-block;
723 height: 20px; 750 height: 20px;
724 font-size: 15px; 751 font-size: 15px;
725 -moz-padding-start: 10px; 752 -moz-padding-start: 10px;
726 -webkit-padding-start: 10px; 753 -webkit-padding-start: 10px;
727 } 754 }
728 755
729 #modal-close:before 756 #dialog-close::before
730 { 757 {
731 background-position: -9px -32px; 758 background-position: -9px -32px;
732 content: ""; 759 content: "";
733 cursor: pointer; 760 cursor: pointer;
734 height: 12px; 761 height: 12px;
735 width: 12px; 762 width: 12px;
736 vertical-align: middle; 763 vertical-align: middle;
737 -moz-margin-end: 6px; 764 -moz-margin-end: 6px;
738 -webkit-margin-end: 6px; 765 -webkit-margin-end: 6px;
739 } 766 }
740 767
741 #modal .content 768 #dialog #dialog-body
742 { 769 {
743 margin: 4px 24px; 770 margin: 4px 24px;
744 } 771 }
745 772
746 #modal h3 773 #dialog h3
747 { 774 {
748 font-size: 14px; 775 font-size: 14px;
749 margin: 0px; 776 margin: 0px;
750 } 777 }
751 778
752 #modal .content input[type=text] 779 #dialog input[type="text"],
780 #dialog input[type="search"]
753 { 781 {
754 -webkit-box-sizing: border-box; 782 -webkit-box-sizing: border-box;
755 -moz-box-sizing: border-box; 783 -moz-box-sizing: border-box;
756 box-sizing: border-box; 784 box-sizing: border-box;
757 font-size: 16px; 785 font-size: 16px;
758 margin-top: 10px; 786 margin-top: 10px;
759 padding: 5px; 787 padding: 5px;
760 width: 100%; 788 width: 100%;
761 } 789 }
762 790
763 #modal .table 791 #dialog .table
764 { 792 {
765 width: 100%; 793 width: 100%;
766 } 794 }
767 795
768 #modal #other-language .table 796 #dialog #other-language .table
769 { 797 {
770 height: 200px; 798 height: 200px;
771 overflow: auto; 799 overflow: auto;
772 } 800 }
773 801
774 #modal .section:not(:first-child) 802 #dialog .section:not(:first-child)
775 { 803 {
776 margin-top: 24px; 804 margin-top: 24px;
777 } 805 }
778 806
779 #modal .close-wrapper 807 #dialog-title
780 {
781 margin-right: 16px !important;
782 }
783
784 #modal-title
785 { 808 {
786 -moz-margin-start: 16px; 809 -moz-margin-start: 16px;
787 -webkit-margin-start: 16px; 810 -webkit-margin-start: 16px;
788 flex: 1; 811 flex: 1;
789 font-size: 16px; 812 font-size: 16px;
790 color: #FFFFFF; 813 color: #FFFFFF;
791 } 814 }
792 815
793 #modal .content > div > div 816 #dialog-title > span
817 {
818 display: none;
819 }
820
821 body[data-dialog="customlist"] #dialog-title-customlist,
822 body[data-dialog="language"] #dialog-title-language
823 {
824 display: inline;
825 }
826
827 #dialog-body .dialog-content-block
794 { 828 {
795 padding: 12px 0px; 829 padding: 12px 0px;
796 } 830 }
797 831
798 #modal-content > div 832 #dialog-body .dialog-content
799 { 833 {
800 display: none; 834 display: none;
801 } 835 }
802 836
803 #modal .btn-wrapper 837 #dialog .button-wrapper
804 { 838 {
805 background-color: #F5F5F5; 839 background-color: #F5F5F5;
806 margin-top: 8px; 840 margin-top: 8px;
807 padding: 10px 16px; 841 padding: 10px 16px;
808 cursor: pointer; 842 cursor: pointer;
809 width: auto; 843 width: auto;
810 } 844 }
845
846 #dialog .button-wrapper span:not(.icon)
847 {
848 color: #3A7BA6;
849 display: inline-block;
850 -moz-margin-start: 15px;
851 -webkit-margin-start: 15px;
852 vertical-align: top;
853 }
854
855 body[data-dialog="customlist"] #dialog-content-customlist,
856 body[data-dialog="language"] #dialog-content-language,
857 body[data-dialog] #dialog
858 {
859 display: block;
860 }
861
862 #other-language .button-add
863 {
864 -webkit-border-end: 1px solid #CDCDCD;
865 -moz-border-end: 1px solid #CDCDCD;
866 -webkit-padding-end: 10px;
867 -moz-padding-end: 10px;
868 -webkit-padding-start: 0px;
869 -moz-padding-start: 0px;
870 }
871
872 #other-language .display
873 {
874 -webkit-margin-start: 10px;
875 -moz-margin-start: 10px;
876 }
LEFTRIGHT

Powered by Google App Engine
This is Rietveld