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

Side by Side Diff: skin/desktop-options.css

Issue 29601581: Issue 5872 - apply style changes (Closed)
Patch Set: Created Nov. 15, 2017, 2:50 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
« no previous file with comments | « desktop-options.html ('k') | skin/icons/checkbox.svg » ('j') | 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-present eyeo GmbH 3 * Copyright (C) 2006-present 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 38 matching lines...) Expand 10 before | Expand all | Expand 10 after
49 font-size: 16px; 49 font-size: 16px;
50 } 50 }
51 51
52 body 52 body
53 { 53 {
54 background-color: #F3F3F3; 54 background-color: #F3F3F3;
55 display: flex; 55 display: flex;
56 justify-content: center; 56 justify-content: center;
57 /* We force vertical scrollbars to keep the content centered */ 57 /* We force vertical scrollbars to keep the content centered */
58 overflow-y: scroll; 58 overflow-y: scroll;
59 margin: 1.2rem 0.3rem; 59 margin: 1rem 0.3rem;
60 font-family: "Source Sans Pro", sans-serif; 60 font-family: "Source Sans Pro", sans-serif;
61 font-size: 1.25rem; 61 font-size: 1rem;
62 color: #494949; 62 line-height: 1.5rem;
63 color: #4A4A4A;
63 } 64 }
64 65
65 h1 66 h1
66 { 67 {
67 font-size: 3rem; 68 font-size: 3rem;
68 font-weight: 300; 69 font-weight: 300;
70 line-height: 3rem;
69 } 71 }
70 72
71 h2 73 h2
72 { 74 {
73 font-size: 1.375rem; 75 font-size: 1.125rem;
74 font-weight: 700; 76 font-weight: 700;
75 } 77 }
76 78
77 a 79 a
78 { 80 {
79 color: #099CD0; 81 color: #077CA6;
80 text-decoration: none;
81 } 82 }
82 83
83 a:hover 84 a:hover
84 { 85 {
85 color: #5CBCE1; 86 color: #5CBCE1;
86 } 87 }
87 88
88 ul 89 ul
89 { 90 {
90 margin: 0rem; 91 margin: 0rem;
91 } 92 }
92 93
93 [aria-hidden="true"] 94 [aria-hidden="true"]
94 { 95 {
95 display: none !important; 96 display: none !important;
96 } 97 }
97 98
98 input[type="text"], 99 input[type="text"],
99 input[type="url"], 100 input[type="url"],
100 textarea, 101 textarea,
101 main 102 main
102 { 103 {
103 -webkit-box-sizing: border-box; 104 -webkit-box-sizing: border-box;
104 -moz-box-sizing: border-box; 105 -moz-box-sizing: border-box;
105 box-sizing: border-box; 106 box-sizing: border-box;
106 } 107 }
107 108
108 /* 109 /*
110 Normalization
111 */
112
113 input,
114 button
115 {
116 font-family: inherit;
117 }
118
119 button
120 {
121 border-radius: 0rem;
122 }
123
124 /*
109 Buttons and links 125 Buttons and links
110 */ 126 */
111 127
112 button, 128 button,
113 .button 129 .button
114 { 130 {
115 display: block; 131 display: block;
116 padding: 0.8rem 1.2rem; 132 padding: 0.6rem 0.8rem;
117 background-color: transparent; 133 background-color: transparent;
118 font-size: 1.125rem; 134 font-size: 1rem;
119 font-weight: 700; 135 font-weight: 700;
120 text-decoration: none; 136 text-decoration: none;
121 text-transform: uppercase; 137 text-transform: uppercase;
122 cursor: pointer; 138 cursor: pointer;
123 } 139 }
124 140
125 button.primary, 141 button.primary,
126 .button.primary 142 .button.primary
127 { 143 {
128 border: 0px; 144 border: 0px;
129 color: #FFF; 145 color: #FFF;
130 background-color: #099CD0; 146 background-color: #077CA6;
131 } 147 }
132 148
133 button.primary:not([disabled]):hover, 149 button.primary:not([disabled]):hover,
134 .button.primary:hover 150 .button.primary:hover
135 { 151 {
136 box-shadow: inset 0 0 0 3px #005D80; 152 box-shadow: inset 0 0 0 3px #005D80;
137 } 153 }
138 154
139 button.primary[disabled] 155 button.primary[disabled]
140 { 156 {
141 background-color: #5CBCE1; 157 background-color: #5CBCE1;
142 } 158 }
143 159
144 button.secondary, 160 button.secondary,
145 .button.secondary 161 .button.secondary
146 { 162 {
147 border: 1px solid #099CD0; 163 border: 2px solid #077CA6;
148 color: #099CD0; 164 color: #077CA6;
149 } 165 }
150 166
151 button.secondary:hover, 167 button.secondary:hover,
152 .button.secondary:hover 168 .button.secondary:hover
153 { 169 {
154 box-shadow: inset 0 0 0 2px #099CD0; 170 box-shadow: inset 0 0 0 1px #077CA6;
155 } 171 }
156 172
157 button[role="checkbox"] 173 button[role="checkbox"]
158 { 174 {
159 width: 18px; 175 width: 1.2rem;
160 height: 18px; 176 height: 1.2rem;
161 padding: 0px; 177 padding: 0px;
162 border: 0px; 178 border: 0px;
163 background-color: transparent; 179 background-color: transparent;
164 } 180 }
165 181
166 button[role="checkbox"]:not(.toggle) 182 button[role="checkbox"]:not(.toggle)
167 { 183 {
168 background-image: url(icons/checkbox.png); 184 background-image: url(icons/checkbox.svg#off);
169 display: inline-block; 185 display: inline-block;
170 } 186 }
171 187
172 button[role="checkbox"][aria-checked="true"]:not(.toggle) 188 button[role="checkbox"][aria-checked="true"]:not(.toggle)
173 { 189 {
174 background-position: 0px 18px; 190 background-image: url(icons/checkbox.svg#on);
175 } 191 }
176 192
177 button[role="checkbox"][disabled], 193 button[role="checkbox"][disabled],
178 button[role="checkbox"][aria-disabled="true"] 194 button[role="checkbox"][aria-disabled="true"]
179 { 195 {
180 border-radius: 2px; 196 border-radius: 2px;
181 background-color: #ccc; 197 background-color: #ccc;
182 } 198 }
183 199
184 button[role="checkbox"].toggle 200 button[role="checkbox"].toggle
185 { 201 {
186 background: url(icons/toggle.svg#on); 202 background: url(icons/toggle.svg#on);
187 } 203 }
188 204
189 button[role="checkbox"][aria-checked="false"].toggle 205 button[role="checkbox"][aria-checked="false"].toggle
190 { 206 {
191 background: url(icons/toggle.svg#off); 207 background: url(icons/toggle.svg#off);
192 } 208 }
193 209
194 button[role="checkbox"][aria-checked="true"].toggle 210 button[role="checkbox"][aria-checked="true"].toggle
195 { 211 {
196 background: url(icons/toggle.svg#on); 212 background: url(icons/toggle.svg#on);
197 } 213 }
198 214
199 button[role="checkbox"].toggle 215 button[role="checkbox"].toggle
200 { 216 {
201 background-position: initial; 217 background-position: initial;
202 width: 2.25rem; 218 width: 1.9rem;
203 height: 1.3rem; 219 height: 1rem;
220 vertical-align: middle;
204 } 221 }
205 222
206 button[role="checkbox"][disabled].toggle 223 button[role="checkbox"][disabled].toggle
207 { 224 {
208 background-image: none; 225 background-image: none;
209 } 226 }
210 227
211 button.delete::before 228 button.delete::before
212 { 229 {
213 background-image: url(icons/trash.svg#default); 230 background-image: url(icons/trash.svg#default);
(...skipping 20 matching lines...) Expand all
234 border: 0px; 251 border: 0px;
235 padding: 0px; 252 padding: 0px;
236 background-color: transparent; 253 background-color: transparent;
237 } 254 }
238 255
239 button.gear::before, 256 button.gear::before,
240 button.delete::before 257 button.delete::before
241 { 258 {
242 content: ""; 259 content: "";
243 display: block; 260 display: block;
244 height: 1.9rem; 261 height: 1rem;
245 width: 1.9rem; 262 width: 1rem;
263 border: 0.2rem solid transparent;
264 background-repeat: no-repeat;
265 background-position: center;
246 } 266 }
247 267
248 button.link, 268 button.link,
249 button.list 269 button.list
250 { 270 {
251 color: #099CD0; 271 color: #077CA6;
252 } 272 }
253 273
254 button.link 274 button.link
255 { 275 {
256 border: 0px; 276 border: 0px;
257 background-color: transparent; 277 background-color: transparent;
258 font-weight: 300; 278 font-weight: 400;
259 font-family: inherit; 279 font-family: inherit;
260 text-transform: none; 280 text-transform: none;
281 text-decoration: underline;
261 padding: 0.2rem; 282 padding: 0.2rem;
262 } 283 }
263 284
264 button.link:hover 285 button.link:hover
265 { 286 {
266 color: #5CBCE1; 287 color: #5CBCE1;
267 } 288 }
268 289
269 button.list 290 button.list
270 { 291 {
271 border-style: solid;; 292 border-style: solid;;
272 border-color: #CDCDCD; 293 border-color: #CDCDCD;
273 border-width: 0px 1px 1px 1px; 294 border-width: 1px;
274 width: 100%; 295 width: 100%;
275 background-color: #E1F2FA; 296 background-color: #E1F2FA;
276 text-align: initial; 297 text-align: initial;
277 } 298 }
278 299
279 button.list:hover 300 button.list:hover
280 { 301 {
281 box-shadow: inset 0 0 0 3px #099CD0; 302 box-shadow: inset 0 0 0 3px #077CA6;
282 border-color: #099CD0; 303 border-color: #077CA6;
283 } 304 }
284 305
285 .side-controls:not(.wrap) 306 .side-controls:not(.wrap)
286 { 307 {
287 margin: 0.8rem 0rem; 308 margin: 0.8rem 0rem;
288 display: flex; 309 display: flex;
289 justify-content: flex-end; 310 justify-content: flex-end;
290 } 311 }
291 312
292 .side-controls button 313 .side-controls button
(...skipping 19 matching lines...) Expand all
312 position: relative; 333 position: relative;
313 padding-top: 0.7rem; 334 padding-top: 0.7rem;
314 margin: 1.8rem 0rem 0.5rem 0rem; 335 margin: 1.8rem 0rem 0.5rem 0rem;
315 } 336 }
316 337
317 .floating-input input 338 .floating-input input
318 { 339 {
319 border-color: #CDCDCD; 340 border-color: #CDCDCD;
320 border-width: 0px 0px 1px 0px; 341 border-width: 0px 0px 1px 0px;
321 outline: none; 342 outline: none;
322 font-size: 1.3rem; 343 font-size: 1rem;
323 padding: 5px; 344 padding: 5px;
324 width: 100%; 345 width: 100%;
325 } 346 }
326 347
327 .floating-input input:placeholder-shown ~ label, 348 .floating-input input:placeholder-shown ~ label,
328 .floating-input input + label, 349 .floating-input input + label,
329 .floating-input input:focus + label 350 .floating-input input:focus + label
330 { 351 {
331 position: absolute; 352 position: absolute;
332 top: 0.9rem; 353 top: 0.9rem;
333 left: 0.3rem; 354 left: 0.3rem;
334 font-size: 1.3rem; 355 font-size: 1rem;
335 } 356 }
336 357
337 .floating-input input + label, 358 .floating-input input + label,
338 .floating-input input:focus + label 359 .floating-input input:focus + label
339 { 360 {
340 top: -0.5rem; 361 top: -0.5rem;
341 font-size: 0.9rem; 362 font-size: 0.9rem;
342 } 363 }
343 364
344 html[dir="rtl"] .floating-input input:placeholder-shown ~ label, 365 html[dir="rtl"] .floating-input input:placeholder-shown ~ label,
(...skipping 12 matching lines...) Expand all
357 [data-validation] .floating-input input:focus:invalid ~ .attention::before, 378 [data-validation] .floating-input input:focus:invalid ~ .attention::before,
358 [data-validation] .floating-input input:valid ~ .attention::before 379 [data-validation] .floating-input input:valid ~ .attention::before
359 { 380 {
360 content: ""; 381 content: "";
361 position: absolute; 382 position: absolute;
362 display: block; 383 display: block;
363 margin: 0.5rem; 384 margin: 0.5rem;
364 height: 1.5rem; 385 height: 1.5rem;
365 width: 1.5rem; 386 width: 1.5rem;
366 border: 0rem; 387 border: 0rem;
367 top: 0.5rem; 388 top: 0.3rem;
368 right: 0rem; 389 right: 0rem;
369 } 390 }
370 391
371 html[dir="rtl"] [data-validation] .floating-input input:focus:invalid ~ .attenti on::before, 392 html[dir="rtl"] [data-validation] .floating-input input:focus:invalid ~ .attenti on::before,
372 html[dir="rtl"] [data-validation] .floating-input input:valid ~ .attention::befo re 393 html[dir="rtl"] [data-validation] .floating-input input:valid ~ .attention::befo re
373 { 394 {
374 left: 0rem; 395 left: 0rem;
375 right: auto; 396 right: auto;
376 } 397 }
377 398
378 [data-validation] .floating-input input:focus:invalid ~ .attention::before 399 [data-validation] .floating-input input:focus:invalid ~ .attention::before
379 { 400 {
380 background-image: url(icons/attention.svg); 401 background-image: url(icons/attention.svg);
381 } 402 }
382 403
383 [data-validation] .floating-input input:valid ~ .attention::before 404 [data-validation] .floating-input input:valid ~ .attention::before
384 { 405 {
385 top: 0.8rem; 406 top: 0.5rem;
386 background-image: url(icons/checkmark.svg#approved); 407 background-image: url(icons/checkmark.svg#approved);
387 } 408 }
388 409
389 [data-validation] .floating-input input ~ .error-msg 410 [data-validation] .floating-input input ~ .error-msg
390 { 411 {
391 margin-top: 0.5rem; 412 margin-top: 0.5rem;
392 color: #C11D27; 413 color: #C11D27;
393 display: block; 414 display: block;
394 visibility: hidden; 415 visibility: hidden;
395 } 416 }
(...skipping 45 matching lines...) Expand 10 before | Expand all | Expand 10 after
441 462
442 #sidebar header h1 strong 463 #sidebar header h1 strong
443 { 464 {
444 font-weight: 700; 465 font-weight: 700;
445 } 466 }
446 467
447 #sidebar header p 468 #sidebar header p
448 { 469 {
449 margin: 0rem; 470 margin: 0rem;
450 font-size: 2.4rem; 471 font-size: 2.4rem;
472 line-height: 2.6rem;
451 } 473 }
452 474
453 html[dir="rtl"] #sidebar header 475 html[dir="rtl"] #sidebar header
454 { 476 {
455 text-align: left; 477 text-align: left;
456 } 478 }
457 479
458 #sidebar-logo 480 #sidebar-logo
459 { 481 {
460 width: 3rem; 482 width: 3rem;
461 margin-bottom: 0.7rem; 483 margin-bottom: 0.7rem;
462 } 484 }
463 485
464 #sidebar nav, 486 #sidebar nav,
465 #sidebar footer 487 #sidebar footer
466 { 488 {
467 margin: 1.4rem 0rem; 489 margin: 1.4rem 0rem;
468 } 490 }
469 491
470 [role="tablist"] 492 [role="tablist"]
471 { 493 {
472 list-style: none; 494 list-style: none;
473 margin: 0rem; 495 margin: 0rem;
474 padding: 0rem; 496 padding: 0rem;
475 position: relative; 497 position: relative;
476 font-size: 1.25rem; 498 font-size: 1rem;
477 } 499 }
478 500
479 [role="tablist"] li a 501 [role="tablist"] li a
480 { 502 {
481 display: flex; 503 display: flex;
482 margin-top: -1px; 504 margin-top: -1px;
483 padding: 1rem 0.8rem; 505 padding: 1rem 0.8rem;
484 -moz-margin-end: -1px; 506 -moz-margin-end: -1px;
485 -webkit-margin-end: -1px; 507 -webkit-margin-end: -1px;
486 -moz-margin-start: -1px; 508 -moz-margin-start: -1px;
(...skipping 22 matching lines...) Expand all
509 531
510 #sidebar footer 532 #sidebar footer
511 { 533 {
512 width: 100%; 534 width: 100%;
513 } 535 }
514 536
515 #sidebar footer p 537 #sidebar footer p
516 { 538 {
517 display: flex; 539 display: flex;
518 justify-content: center; 540 justify-content: center;
519 margin: 1.2rem 0rem; 541 margin: 1rem 0rem;
520 } 542 }
521 543
522 /* This is a stopgap solution of footer overlapping tabs on low resolutions */ 544 /* This is a stopgap solution of footer overlapping tabs on low resolutions */
523 @media (min-height: 37rem) 545 @media (min-height: 37rem)
524 { 546 {
525 #sidebar .fixed 547 #sidebar .fixed
526 { 548 {
527 position: fixed; 549 position: fixed;
528 } 550 }
529 551
(...skipping 13 matching lines...) Expand all
543 body[data-tab|="whitelist"] #content-whitelist, 565 body[data-tab|="whitelist"] #content-whitelist,
544 body[data-tab|="help"] #content-help 566 body[data-tab|="help"] #content-help
545 { 567 {
546 display: block; 568 display: block;
547 } 569 }
548 570
549 main 571 main
550 { 572 {
551 background-color: #FFFFFF; 573 background-color: #FFFFFF;
552 border: 1px solid #CDCDCD; 574 border: 1px solid #CDCDCD;
553 max-width: 46.3rem; 575 width: 46.3rem;
554 padding: 0px 0rem 1.4rem 0rem; 576 padding: 0px 0rem 1.4rem 0rem;
555 } 577 }
556 578
557 main > div 579 main > div
558 { 580 {
559 display: none; 581 display: none;
560 } 582 }
561 583
562 main p 584 main p
563 { 585 {
564 margin: 0.8rem 0rem; 586 margin: 0.8rem 0rem;
565 } 587 }
566 588
567 /* 589 /*
568 Sections 590 Sections
569 */ 591 */
570 592
571 [role="tabpanel"] > section, 593 [role="tabpanel"] > section,
572 [role="tabpanel"] > .section 594 [role="tabpanel"] > .section
573 { 595 {
574 padding: 2rem; 596 padding: 1.4rem 2rem;
575 border-top: 1px solid #CDCDCD; 597 border-top: 1px solid #CDCDCD;
576 } 598 }
577 599
578 [role="tabpanel"] > header h1, 600 [role="tabpanel"] > header h1,
579 [role="tabpanel"] > header p 601 [role="tabpanel"] > header p
580 { 602 {
581 padding: 0rem 2rem; 603 padding: 0rem 2rem;
582 margin: 1.4rem 0rem; 604 margin: 1.4rem 0rem;
583 } 605 }
584 606
(...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after
616 flex: 3; 638 flex: 3;
617 } 639 }
618 640
619 /* 641 /*
620 Acceptable ads 642 Acceptable ads
621 */ 643 */
622 644
623 #acceptable-ads ul 645 #acceptable-ads ul
624 { 646 {
625 position: relative; 647 position: relative;
626 padding-left: 2rem; 648 padding-left: 2.2rem;
627 list-style: none; 649 list-style: none;
628 } 650 }
629 651
630 html[dir="rtl"] #acceptable-ads ul 652 html[dir="rtl"] #acceptable-ads ul
631 { 653 {
632 padding-left: 0rem; 654 padding-left: 0rem;
633 padding-right: 2rem; 655 padding-right: 2.2rem;
634 } 656 }
635 657
636 #acceptable-ads button 658 #acceptable-ads button
637 { 659 {
638 position: absolute; 660 position: absolute;
639 margin-top: 0.3rem; 661 margin-top: 0.3rem;
640 left: 0rem; 662 left: 0rem;
641 } 663 }
642 664
643 html[dir="rtl"] button 665 html[dir="rtl"] button
644 { 666 {
645 left: auto; 667 left: auto;
646 right: 0rem; 668 right: 0rem;
647 } 669 }
648 670
649 #acceptable-ads label 671 #acceptable-ads label
650 { 672 {
651 font-weight: 700; 673 font-weight: 700;
652 font-size: 1.375rem; 674 font-size: 1rem;
675 -moz-margin-end: 0.5rem;
676 -webkit-margin-end: 0.5rem;
653 } 677 }
654 678
655 #dnt 679 #dnt
656 { 680 {
657 padding: 0.8rem; 681 padding: 0.8rem;
658 border: 1px solid #099CD0; 682 border: 1px solid #077CA6;
659 } 683 }
660 684
661 .new 685 .new
662 { 686 {
663 display: inline-block; 687 display: inline-block;
664 margin: 0rem 0.5rem; 688 padding: 0.2rem 0.5rem;
665 padding: 0.3rem 0.6rem;
666 border-radius: 0.2rem; 689 border-radius: 0.2rem;
667 background-color: #099CD0; 690 background-color: #077CA6;
668 color: #FFF; 691 color: #FFF;
669 line-height: 100%; 692 line-height: 100%;
670 font-size: 1rem; 693 font-size: 0.8rem;
671 text-transform: uppercase; 694 text-transform: uppercase;
672 } 695 }
673 696
674 /* 697 /*
675 Tables 698 Tables
676 */ 699 */
677 700
678 ul.table, 701 ul.table,
679 ul.list 702 ul.list
680 { 703 {
(...skipping 13 matching lines...) Expand all
694 { 717 {
695 margin: 0rem; 718 margin: 0rem;
696 border-style: solid; 719 border-style: solid;
697 border-color: #CDCDCD; 720 border-color: #CDCDCD;
698 border-width: 0px 1px 1px 1px; 721 border-width: 0px 1px 1px 1px;
699 } 722 }
700 723
701 .list li 724 .list li
702 { 725 {
703 padding: 0rem; 726 padding: 0rem;
704 margin: 0rem 0rem 1.3rem 0rem; 727 margin-bottom: 0.8rem;
705 } 728 }
706 729
707 .list li [role="checkbox"] 730 .list li [role="checkbox"]
708 { 731 {
709 flex-shrink: 0; 732 flex-shrink: 0;
710 } 733 }
711 734
712 .table li:first-of-type 735 .table li:first-of-type
713 { 736 {
714 border-top: 1px solid #CDCDCD; 737 border-top: 1px solid #CDCDCD;
715 } 738 }
716 739
717 .table.list li 740 .table.list li
718 { 741 {
719 padding: 0.5rem 1.1rem; 742 padding: 0.5rem 1rem;
720 margin: 0rem; 743 margin: 0rem;
721 } 744 }
722 745
746 .table.list.bottom-control li:last-of-type
747 {
748 border-bottom: 0px;
749 }
750
723 li .display 751 li .display
724 { 752 {
725 margin: 0rem 1rem; 753 margin: 0rem 1rem;
726 } 754 }
727 755
728 .table.list li .display 756 .table.list li .display
729 { 757 {
730 flex: 1; 758 flex: 1;
759 margin: 0rem;
731 } 760 }
732 761
733 .table.list li.empty-placeholder 762 .table.list li.empty-placeholder
734 { 763 {
735 padding: 1.3em 1.9em; 764 padding: 1rem 1.4rem;
736 } 765 }
737 766
738 .table.list li.empty-placeholder:not(:last-of-type) 767 .table.list li.empty-placeholder:not(:last-of-type)
739 { 768 {
740 border-bottom: 0px; 769 border-bottom: 0px;
741 } 770 }
742 771
743 #blocking-languages-table .display
744 {
745 font-weight: 700;
746 }
747
748 .table.list button.link 772 .table.list button.link
749 { 773 {
750 font-weight: 700; 774 font-weight: 700;
751 text-transform: uppercase; 775 text-transform: uppercase;
776 text-decoration: none;
752 } 777 }
753 778
754 .table:not(.list):not(.cols) li 779 .table:not(.list):not(.cols) li
755 { 780 {
756 padding-top: 0px; 781 padding-top: 0px;
757 padding-bottom: 6px; 782 padding-bottom: 6px;
758 } 783 }
759 784
760 .table li [data-single="visible"], 785 .table li [data-single="visible"],
761 .table li:first-of-type:last-of-type [data-single="hidden"] 786 .table li:first-of-type:last-of-type [data-single="hidden"]
762 { 787 {
763 display: none; 788 display: none;
764 } 789 }
765 790
766 .table li:first-of-type:last-of-type [data-single="visible"] 791 .table li:first-of-type:last-of-type [data-single="visible"]
767 { 792 {
768 display: block; 793 display: block;
769 } 794 }
770 795
771 .th 796 .th
772 { 797 {
773 display: flex; 798 display: flex;
774 } 799 }
775 800
776 .col4 > * 801 .col5 > *
777 { 802 {
778 display: inline-block; 803 display: inline-block;
779 } 804 }
780 805
781 .col4 806 .col5
782 { 807 {
783 margin: 0rem 0.9rem; 808 margin: 0rem 1rem;
784 } 809 }
785 810
786 .th .col4:nth-of-type(1), 811 .th .col5:nth-of-type(1),
787 .table .col4:nth-of-type(1) 812 .table .col5:nth-of-type(1)
788 { 813 {
789 flex: 2; 814 flex: 4;
790 } 815 }
791 816
792 .th .col4:nth-of-type(2), 817 .th .col5:nth-of-type(2),
793 .table .col4:nth-of-type(2) 818 .table .col5:nth-of-type(2)
794 { 819 {
795 flex: 3; 820 flex: 8;
796 } 821 }
797 822
798 .th .col4:nth-of-type(3), 823 .th .col5:nth-of-type(3),
799 .table .col4:nth-of-type(3) 824 .table .col5:nth-of-type(3)
800 { 825 {
801 flex: 2; 826 flex: 4;
802 } 827 }
803 828
804 .th .col4:nth-of-type(4), 829 .th .col5:nth-of-type(4),
805 .table .col4:nth-of-type(4) 830 .table .col5:nth-of-type(4)
806 { 831 {
807 flex: 1; 832 flex: 1;
808 } 833 }
809 834
810 .table.cols 835 .th .col5:nth-of-type(5),
836 .table .col5:nth-of-type(5)
811 { 837 {
812 font-size: 1.1rem; 838 flex: 1;
839 -moz-margin-start: 0;
840 -webkit-margin-start: 0;
841 -moz-margin-end: 1.8rem;
842 -webkit-margin-end: 1.8rem;
813 } 843 }
814 844
815 .table.cols .display 845 .table.cols .display
816 { 846 {
817 margin: 0rem; 847 margin: 0rem;
818 } 848 }
819 849
820 .table.cols li 850 .table.cols li
821 { 851 {
822 padding: 0.9rem 0rem; 852 padding: 0.9rem 0rem;
(...skipping 49 matching lines...) Expand 10 before | Expand all | Expand 10 after
872 height: 1.3rem; 902 height: 1.3rem;
873 background-image: url(icons/checkmark.svg#default); 903 background-image: url(icons/checkmark.svg#default);
874 margin: 0rem; 904 margin: 0rem;
875 } 905 }
876 906
877 #dialog .table.list li button .display 907 #dialog .table.list li button .display
878 { 908 {
879 flex: none; 909 flex: none;
880 margin: 0rem 0.8rem; 910 margin: 0rem 0.8rem;
881 text-transform: none; 911 text-transform: none;
912 font-weight: 400;
882 } 913 }
883 914
884 /* 915 /*
885 Tooltips 916 Tooltips
886 */ 917 */
887 918
888 .tooltip 919 .tooltip
889 { 920 {
890 display: inline-block; 921 display: inline-block;
891 position: relative; 922 position: relative;
892 margin: 0rem; 923 margin: 0rem;
893 -moz-margin-end: 1rem; 924 -moz-margin-end: 1rem;
894 -webkit-margin-end: 1rem; 925 -webkit-margin-end: 1rem;
895 line-height: 1.5rem; 926 line-height: 1.5rem;
896 text-decoration: none; 927 text-decoration: none;
897 cursor: help; 928 cursor: help;
898 } 929 }
899 930
900 .tooltip::before 931 .tooltip::before
901 { 932 {
902 content: ""; 933 content: "";
903 width: 1.3rem; 934 width: 1.1rem;
904 height: 1.3rem; 935 height: 1.1rem;
905 display: block; 936 display: block;
906 background-image: url(icons/tooltip.svg); 937 background-image: url(icons/tooltip.svg);
907 } 938 }
908 939
909 /* 940 /*
910 Used for translatable screen reader only conten. 941 Used for translatable screen reader only conten.
911 e.g.: Use instead of aria-label to avoid complex attribute value translation 942 e.g.: Use instead of aria-label to avoid complex attribute value translation
912 */ 943 */
913 .sr-only 944 .sr-only
914 { 945 {
(...skipping 29 matching lines...) Expand all
944 */ 975 */
945 976
946 #content-whitelist form 977 #content-whitelist form
947 { 978 {
948 display: flex; 979 display: flex;
949 } 980 }
950 981
951 #content-whitelist form input 982 #content-whitelist form input
952 { 983 {
953 flex: 1; 984 flex: 1;
985 height: 100%;
954 padding: 0.5rem 1rem; 986 padding: 0.5rem 1rem;
955 font-size: 1.25rem; 987 font-size: 1rem;
956 border: 2px solid #099CD0; 988 border: 2px solid #077CA6;
957 } 989 }
958 990
959 #content-whitelist form button 991 #content-whitelist form button
960 { 992 {
961 -moz-margin-start: 0.7rem; 993 -moz-margin-start: 0.7rem;
962 -webkit-margin-start: 0.7rem; 994 -webkit-margin-start: 0.7rem;
963 } 995 }
964 996
965 #whitelisting-table li 997 #whitelisting-table li
966 { 998 {
999 padding-left: 1.4rem;
1000 padding-right: 1.4rem;
967 border-left: 0rem; 1001 border-left: 0rem;
968 border-right: 0rem; 1002 border-right: 0rem;
969 } 1003 }
970 1004
971 /* 1005 /*
972 Advanced tab content 1006 Advanced tab content
973 */ 1007 */
974 1008
975 #all-filter-lists-table li.show-message .last-update, 1009 #all-filter-lists-table li.show-message .last-update,
976 #all-filter-lists-table li:not(.show-message) .message, 1010 #all-filter-lists-table li:not(.show-message) .message,
(...skipping 30 matching lines...) Expand all
1007 #custom-filters-raw 1041 #custom-filters-raw
1008 { 1042 {
1009 width: 100%; 1043 width: 100%;
1010 height: 23.6rem; 1044 height: 23.6rem;
1011 padding: 0.8rem 1.3rem; 1045 padding: 0.8rem 1.3rem;
1012 } 1046 }
1013 1047
1014 #custom-filters-raw:focus 1048 #custom-filters-raw:focus
1015 { 1049 {
1016 outline: none; 1050 outline: none;
1017 border: 2px solid #099CD0; 1051 border: 2px solid #077CA6;
1018 } 1052 }
1019 1053
1020 #empty-custom-filters 1054 #empty-custom-filters
1021 { 1055 {
1022 padding: 1.5rem; 1056 padding: 1.5rem;
1023 border: 1px solid #CDCDCD; 1057 border: 1px solid #CDCDCD;
1024 } 1058 }
1025 1059
1026 /* 1060 /*
1027 Context menu 1061 Context menu
1028 */ 1062 */
1029 1063
1030 li [role="menubar"] 1064 li [role="menubar"]
1031 { 1065 {
1032 position: relative; 1066 position: relative;
1033 } 1067 }
1034 1068
1035 [role="tooltip"] 1069 [role="tooltip"]
1036 { 1070 {
1037 right: -1rem; 1071 right: -1rem;
1038 margin-top: 1rem; 1072 margin-top: 1rem;
1039 opacity: 1; 1073 opacity: 1;
1040 padding: 1.3rem; 1074 padding: 0.2rem 1rem;
1041 position: absolute; 1075 position: absolute;
1042 -webkit-transition: opacity 200ms ease-in-out 400ms, 1076 -webkit-transition: opacity 200ms ease-in-out 400ms,
1043 visibility 0ms linear 400ms; 1077 visibility 0ms linear 400ms;
1044 transition: opacity 200ms ease-in-out 400ms, 1078 transition: opacity 200ms ease-in-out 400ms,
1045 visibility 0ms linear 400ms; 1079 visibility 0ms linear 400ms;
1046 visibility: visible; 1080 visibility: visible;
1047 width: 15rem; 1081 width: 15rem;
1048 z-index: 1; 1082 z-index: 1;
1049 } 1083 }
1050 1084
1051 html[dir="rtl"] [role="tooltip"] 1085 html[dir="rtl"] [role="tooltip"]
1052 { 1086 {
1053 right: auto; 1087 right: auto;
1054 left: -1rem; 1088 left: -1rem;
1055 } 1089 }
1056 1090
1057 [role="tooltip"], 1091 [role="tooltip"],
1058 .context-menu .content 1092 .context-menu .content
1059 { 1093 {
1060 border: 1px solid #099CD0; 1094 border: 1px solid #077CA6;
1061 border-radius: 3px; 1095 border-radius: 3px;
1062 background-color: #FFFFFF; 1096 background-color: #FFFFFF;
1063 } 1097 }
1064 1098
1065 1099
1066 .tooltip:not(:hover) > [role="tooltip"], 1100 .tooltip:not(:hover) > [role="tooltip"],
1067 [role="tooltip"]:hover 1101 [role="tooltip"]:hover
1068 { 1102 {
1069 visibility: hidden; 1103 visibility: hidden;
1070 opacity: 0; 1104 opacity: 0;
1071 -webkit-transition-delay: 0ms; 1105 -webkit-transition-delay: 0ms;
1072 transition-delay: 0ms; 1106 transition-delay: 0ms;
1073 } 1107 }
1074 1108
1075 .context-menu 1109 .context-menu
1076 { 1110 {
1077 position: absolute; 1111 position: absolute;
1078 right: 3rem; 1112 right: 2.5rem;
1079 top: -3rem; 1113 top: -2.7rem;
1080 z-index: 1; 1114 z-index: 1;
1081 visibility: hidden; 1115 visibility: hidden;
1082 } 1116 }
1083 1117
1084 html[dir="rtl"] .context-menu 1118 html[dir="rtl"] .context-menu
1085 { 1119 {
1086 right: auto; 1120 right: auto;
1087 left: 3rem; 1121 left: 2.5rem;
1088 } 1122 }
1089 1123
1090 .context-menu .content 1124 .context-menu .content
1091 { 1125 {
1092 padding: 0rem; 1126 padding: 0rem;
1093 position: relative; 1127 position: relative;
1094 cursor: default; 1128 cursor: default;
1095 } 1129 }
1096 1130
1097 li.show-context-menu .context-menu 1131 li.show-context-menu .context-menu
1098 { 1132 {
1099 visibility: visible; 1133 visibility: visible;
1100 } 1134 }
1101 1135
1102 [role="tooltip"]::before, 1136 [role="tooltip"]::before,
1103 .context-menu::before 1137 .context-menu::before
1104 { 1138 {
1105 content: ""; 1139 content: "";
1106 width: 0rem; 1140 width: 0rem;
1107 height: 0rem; 1141 height: 0rem;
1108 position: absolute; 1142 position: absolute;
1109 } 1143 }
1110 1144
1111 [role="tooltip"]::before 1145 [role="tooltip"]::before
1112 { 1146 {
1113 border-left: 10px solid transparent; 1147 border-left: 10px solid transparent;
1114 border-right: 10px solid transparent; 1148 border-right: 10px solid transparent;
1115 border-bottom: 10px solid #099CD0; 1149 border-bottom: 10px solid #077CA6;
1116 top: -10px; 1150 top: -10px;
1117 right: 15px; 1151 right: 15px;
1118 } 1152 }
1119 1153
1120 html[dir="rtl"] [role="tooltip"]::before 1154 html[dir="rtl"] [role="tooltip"]::before
1121 { 1155 {
1122 right: auto; 1156 right: auto;
1123 left: 15px; 1157 left: 15px;
1124 } 1158 }
1125 1159
1126 .context-menu::before 1160 .context-menu::before
1127 { 1161 {
1128 border-left: 10px solid #099CD0; 1162 border-left: 10px solid #077CA6;
1129 border-top: 10px solid transparent; 1163 border-top: 10px solid transparent;
1130 border-bottom: 10px solid transparent; 1164 border-bottom: 10px solid transparent;
1131 top: 22px; 1165 top: 22px;
1132 right: -0.5rem; 1166 right: -0.5rem;
1133 } 1167 }
1134 1168
1135 html[dir="rtl"] .context-menu::before 1169 html[dir="rtl"] .context-menu::before
1136 { 1170 {
1137 border-left: 0rem; 1171 border-left: 0rem;
1138 border-right: 10px solid #099CD0; 1172 border-right: 10px solid #077CA6;
1139 right: auto; 1173 right: auto;
1140 left: -0.5rem; 1174 left: -0.5rem;
1141 } 1175 }
1142 1176
1143 .context-menu li[role="menuitem"] 1177 .context-menu li[role="menuitem"]
1144 { 1178 {
1145 width: 12.2rem; 1179 width: 12.2rem;
1146 border: 0rem; 1180 border: 0rem;
1147 padding: 0rem; 1181 padding: 0rem;
1148 } 1182 }
1149 1183
1150 .context-menu li[role="menuitem"] > * 1184 .context-menu li[role="menuitem"] > *
1151 { 1185 {
1152 width: 100%; 1186 width: 100%;
1153 display: flex; 1187 display: flex;
1154 border: 0rem; 1188 border: 0rem;
1155 padding: 1rem 0rem; 1189 padding: 0.7rem 0rem;
1156 color: #099CD0; 1190 color: #077CA6;
1157 font-size: 1.1rem; 1191 align-items: center;
1158 font-weight: 700; 1192 font-size: 1rem;
1193 font-weight: 400;
1159 text-transform: none; 1194 text-transform: none;
1195 text-decoration: none;
1160 } 1196 }
1161 1197
1162 .context-menu li[role="menuitem"] > *:hover, 1198 .context-menu li[role="menuitem"] > *:hover,
1163 .context-menu li[role="menuitem"] > *:focus 1199 .context-menu li[role="menuitem"] > *:focus
1164 { 1200 {
1165 background-color: #E1F2FA; 1201 background-color: #E1F2FA;
1166 cursor: pointer; 1202 cursor: pointer;
1167 } 1203 }
1168 1204
1169 .context-menu li[role="menuitem"] > *::before 1205 .context-menu li[role="menuitem"] > *::before
1170 { 1206 {
1171 content: ""; 1207 content: "";
1172 height: 1.5rem; 1208 height: 1rem;
1173 width: 1.5rem; 1209 width: 1rem;
1174 margin: 0rem 1.1rem; 1210 margin: 0rem 1.1rem;
1211 border: 0rem;
1175 } 1212 }
1176 1213
1177 .context-menu .update-subscription::before 1214 .context-menu .update-subscription::before
1178 { 1215 {
1179 background-image: url(icons/reload.svg); 1216 background-image: url(icons/reload.svg);
1180 } 1217 }
1181 1218
1182 .context-menu .website::before 1219 .context-menu .website::before
1183 { 1220 {
1184 background-image: url(icons/globe.svg); 1221 background-image: url(icons/globe.svg);
(...skipping 29 matching lines...) Expand all
1214 { 1251 {
1215 display: inline-block; 1252 display: inline-block;
1216 -moz-margin-end: 1rem; 1253 -moz-margin-end: 1rem;
1217 -webkit-margin-end: 1rem; 1254 -webkit-margin-end: 1rem;
1218 } 1255 }
1219 1256
1220 #social ul li a 1257 #social ul li a
1221 { 1258 {
1222 display: block; 1259 display: block;
1223 text-align: center; 1260 text-align: center;
1261 text-decoration: none;
1224 } 1262 }
1225 1263
1226 #social ul li a::before 1264 #social ul li a::before
1227 { 1265 {
1228 display: block; 1266 display: block;
1229 margin: 0em auto; 1267 margin: 0em auto;
1230 width: 2.5rem; 1268 width: 2.5rem;
1231 height: 2.5rem; 1269 height: 2.5rem;
1232 content: ""; 1270 content: "";
1233 } 1271 }
(...skipping 45 matching lines...) Expand 10 before | Expand all | Expand 10 after
1279 width: 50vw; 1317 width: 50vw;
1280 margin: auto; 1318 margin: auto;
1281 border-radius: 3px; 1319 border-radius: 3px;
1282 background-color: #FFFFFF; 1320 background-color: #FFFFFF;
1283 } 1321 }
1284 1322
1285 #dialog header 1323 #dialog header
1286 { 1324 {
1287 display: flex; 1325 display: flex;
1288 padding: 0.7rem 1.5rem; 1326 padding: 0.7rem 1.5rem;
1289 background-color: #099CD0; 1327 background-color: #077CA6;
1290 } 1328 }
1291 1329
1292 #dialog header h3 1330 #dialog header h3
1293 { 1331 {
1294 margin: 0rem; 1332 margin: 0rem;
1295 font-size: 1.375rem; 1333 font-size: 1rem;
1296 font-weight: 700; 1334 font-weight: 700;
1297 } 1335 }
1298 1336
1299 #dialog-close, 1337 #dialog-close,
1300 #hide-notification 1338 #hide-notification
1301 { 1339 {
1302 border: 0rem; 1340 border: 0rem;
1303 padding: 0rem; 1341 padding: 0rem;
1304 margin: 0rem; 1342 margin: 0rem;
1305 background-color: transparent; 1343 background-color: transparent;
(...skipping 41 matching lines...) Expand 10 before | Expand all | Expand 10 after
1347 [data-dialog="about"] button 1385 [data-dialog="about"] button
1348 { 1386 {
1349 margin: 1.5rem auto 1.8rem auto; 1387 margin: 1.5rem auto 1.8rem auto;
1350 } 1388 }
1351 1389
1352 [data-dialog="about"] p 1390 [data-dialog="about"] p
1353 { 1391 {
1354 margin: 0.5rem 0rem; 1392 margin: 0.5rem 0rem;
1355 } 1393 }
1356 1394
1357 #abp-version
1358 {
1359 margin-bottom: 2rem;
1360 }
1361
1362 [data-dialog="import"] .side-controls 1395 [data-dialog="import"] .side-controls
1363 { 1396 {
1364 margin-top: 2.45rem; 1397 margin-top: 2.45rem;
1365 } 1398 }
1366 1399
1367 #dialog .table 1400 #dialog .table
1368 { 1401 {
1369 width: 100%; 1402 width: 100%;
1370 } 1403 }
1371 1404
(...skipping 45 matching lines...) Expand 10 before | Expand all | Expand 10 after
1417 { 1450 {
1418 position: fixed; 1451 position: fixed;
1419 top: 0rem; 1452 top: 0rem;
1420 left: 0rem; 1453 left: 0rem;
1421 display: flex; 1454 display: flex;
1422 padding: 1rem 1.9rem; 1455 padding: 1rem 1.9rem;
1423 width: 100%; 1456 width: 100%;
1424 box-sizing: border-box; 1457 box-sizing: border-box;
1425 opacity: 0.8; 1458 opacity: 0.8;
1426 font-size: 1rem; 1459 font-size: 1rem;
1427 color: #099CD0; 1460 color: #077CA6;
1428 background-color: #E1F2FA; 1461 background-color: #E1F2FA;
1429 } 1462 }
1430 1463
1431 #notification strong 1464 #notification strong
1432 { 1465 {
1433 flex: 1; 1466 flex: 1;
1434 text-align: center; 1467 text-align: center;
1435 } 1468 }
1436 1469
1437 #hide-notification 1470 #hide-notification
1438 { 1471 {
1439 margin: 0rem 1rem; 1472 margin: 0rem 1rem;
1440 } 1473 }
1441 1474
1442 #hide-notification::after 1475 #hide-notification::after
1443 { 1476 {
1444 background-image: url(icons/delete.svg#secondary); 1477 background-image: url(icons/delete.svg#secondary);
1445 } 1478 }
1446 1479
1447 #hide-notification:hover::after 1480 #hide-notification:hover::after
1448 { 1481 {
1449 background-image: url(icons/delete.svg#secondary-hover); 1482 background-image: url(icons/delete.svg#secondary-hover);
1450 } 1483 }
OLDNEW
« no previous file with comments | « desktop-options.html ('k') | skin/icons/checkbox.svg » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld