skin/desktop-options.css - Issue 29712640: Issue 6309 - Start using SASS in adblockplusui

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

Issue 29712640: Issue 6309 - Start using SASS in adblockplusui (Closed)

Patch Set: Created March 1, 2018, 2:34 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

OLD	NEW
	(Empty)
1 /*

2 * This file is part of Adblock Plus <https://adblockplus.org/>,

3 * Copyright (C) 2006-present eyeo GmbH

4 *

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

7 * published by the Free Software Foundation.

8 *

9 * Adblock Plus is distributed in the hope that it will be useful,

10 * but WITHOUT ANY WARRANTY; without even the implied warranty of

11 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the

12 * GNU General Public License for more details.

13 *

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/>.

16 */

17

18 html

19 {

20 font-size: 16px;

21 }

22

23 body

24 {

25 background-color: #F3F3F3;

26 display: flex;

27 justify-content: center;

28 /* We force vertical scrollbars to keep the content centered */

29 overflow-y: scroll;

30 margin: 1rem 0.3rem;

31 font-family: "Source Sans Pro", sans-serif;

32 font-size: 1rem;

33 line-height: 1.3rem;

34 color: #4A4A4A;

35 }

36

37 h1

38 {

39 font-size: 3rem;

40 font-weight: 300;

41 line-height: 3rem;

42 }

43

44 h2

45 {

46 font-size: 1.125rem;

47 font-weight: 700;

48 }

49

50 a

51 {

52 color: #077CA6;

53 }

54

55 a:hover

56 {

57 color: #5CBCE1;

58 }

59

60 ul

61 {

62 margin: 0rem;

63 }

64

65 main h3

66 {

67 margin-top: 0rem;

68 margin-bottom: 0.5rem;

69 }

70

71 [aria-hidden="true"]

72 {

73 display: none !important;

74 }

75

76 input[type="text"],

77 input[type="url"],

78 textarea,

79 main

80 {

81 -webkit-box-sizing: border-box;

82 -moz-box-sizing: border-box;

83 box-sizing: border-box;

84 }

85

86 /*

87 Normalization

88 */

89

90 input,

91 button

92 {

93 font-family: inherit;

94 }

95

96 button

97 {

98 border-radius: 0rem;

99 }

100

101 /*

102 Buttons and links

103 */

104

105 button,

106 .button

107 {

108 display: block;

109 padding: 0.6rem 0.8rem;

110 background-color: transparent;

111 font-size: 1rem;

112 font-weight: 700;

113 text-decoration: none;

114 text-transform: uppercase;

115 cursor: pointer;

116 }

117

118 /* Ignore .icon to avoid overriding "specific" (primary, secondary) styles */

119 button.primary:not(.icon),

120 .button.primary:not(.icon)

121 {

122 border: 0px;

123 color: #FFF;

124 background-color: #077CA6;

125 }

126

127 button.primary:not([disabled]):not(.icon):hover,

128 .button.primary:not(.icon):hover

129 {

130 box-shadow: inset 0 0 0 3px #005D80;

131 }

132

133 button.primary[disabled]:not(.icon)

134 {

135 background-color: #5CBCE1;

136 }

137

138 button.secondary:not(.icon),

139 .button.secondary:not(.icon)

140 {

141 border: 2px solid #077CA6;

142 color: #077CA6;

143 }

144

145 button.secondary:not(.icon):hover,

146 .button.secondary:not(.icon):hover

147 {

148 box-shadow: inset 0 0 0 1px #077CA6;

149 }

150

151 button.link,

152 button.list

153 {

154 color: #077CA6;

155 }

156

157 button.link

158 {

159 border: 0px;

160 background-color: transparent;

161 font-weight: 400;

162 font-family: inherit;

163 text-transform: none;

164 text-decoration: underline;

165 padding: 0.2rem;

166 }

167

168 button.link:hover

169 {

170 color: #5CBCE1;

171 }

172

173 button.list

174 {

175 border-style: solid;

176 border-color: #CDCDCD;

177 border-width: 1px;

178 width: 100%;

179 background-color: #E1F2FA;

180 text-align: initial;

181 }

182

183 button.list:hover

184 {

185 box-shadow: inset 0 0 0 3px #077CA6;

186 border-color: #077CA6;

187 }

188

189 .side-controls:not(.wrap)

190 {

191 margin: 0.8rem 0rem;

192 display: flex;

193 justify-content: flex-end;

194 }

195

196 .side-controls button

197 {

198 margin: 0rem;

199 }

200

201 /*

202 Due to Edge adoption as new target browser

203 we cannot use -moz/webkit-margin-start

204 or -moz/webkit-margin-end because

205 these lack Edge support.

206 Yet we need to preserve html direction

207 and potential UI that might swap right to left.

208 */

209 html:not([dir="rtl"]) .side-controls button

210 {

211 margin-left: 1rem;

212 }

213

214 html[dir="rtl"] .side-controls button

215 {

216 margin-right: 1rem;

217 }

218

219 .side-controls.wrap button

220 {

221 margin: 0.6rem 0rem;

222 }

223

224 html:not([dir="rtl"]) .side-controls.wrap button

225 {

226 margin-left: auto;

227 }

228

229 html[dir="rtl"] .side-controls.wrap button

230 {

231 margin-right: auto;

232 }

233

234 /*

235 icons

236 */

237

238 .icon

239 {

240 border: 0px;

241 padding: 0px;

242 background-color: transparent;

243 }

244

245 .icon:hover

246 {

247 box-shadow: none;

248 }

249

250 .icon::before

251 {

252 content: "";

253 display: block;

254 border: 0.2rem solid transparent;

255 background-repeat: no-repeat;

256 }

257

258 button[role="checkbox"].icon::before

259 {

260 width: 1.2rem;

261 height: 1.2rem;

262 padding: 0px;

263 }

264

265 button[role="checkbox"][disabled].icon:not(.toggle)::before,

266 button[role="checkbox"][aria-disabled="true"].icon:not(.toggle)::before

267 {

268 border: 0rem;

269 margin: 0.2rem;

270 border-radius: 2px;

271 background-color: #ccc;

272 }

273

274 button[role="checkbox"].icon:not(.toggle)::before

275 {

276 /* Using ?query as a workaround to chromium bug #643716 */

277 background-image: url(icons/checkbox.svg?off#off);

278 }

279

280 button[role="checkbox"][aria-checked="true"].icon:not(.toggle)::before

281 {

282 background-image: url(icons/checkbox.svg?on#on);

283 }

284

285 button[role="checkbox"].icon.toggle::before

286 {

287 background-image: url(icons/toggle.svg?on#on);

288 }

289

290 button[role="checkbox"][aria-checked="false"].icon.toggle::before

291 {

292 background-image: url(icons/toggle.svg?off#off);

293 }

294

295 button[role="checkbox"].icon.toggle::before

296 {

297 width: 1.9rem;

298 height: 1rem;

299 }

300

301 button[role="checkbox"][disabled].icon.toggle::before

302 {

303 background: none;

304 }

305

306 .icon.delete::before

307 {

308 background-image: url(icons/trash.svg?default#default);

309 }

310

311 .icon.delete:hover::before

312 {

313 background-image: url(icons/trash.svg?hover#hover);

314 }

315

316 .icon.gear::before

317 {

318 background-image: url(icons/gear.svg?default#default);

319 }

320

321 .icon.gear:hover::before

322 {

323 background-image: url(icons/gear.svg?hover#hover);

324 }

325

326 .icon.gear::before,

327 .icon.delete::before

328 {

329 height: 1rem;

330 width: 1rem;

331 }

332

333 [data-validation] .floating-input input:focus:invalid ~ .icon.attention::before

334 {

335 background-image: url(icons/attention.svg);

336 }

337

338 [data-validation] .floating-input input:valid ~ .icon.attention::before

339 {

340 top: 0.5rem;

341 background-image: url(icons/checkmark.svg?approved#approved);

342 }

343

344 .context-menu .icon.update-subscription::before

345 {

346 background-image: url(icons/reload.svg);

347 }

348

349 .context-menu .icon.website::before

350 {

351 background-image: url(icons/globe.svg);

352 }

353

354 .context-menu .icon.source::before

355 {

356 background-image: url(icons/code.svg);

357 }

358

359 .context-menu .icon.delete::before

360 {

361 background-image: url(icons/trash.svg?default#default);

362 }

363

364 .close.icon::before

365 {

366 height: 1rem;

367 width: 1rem;

368 }

369

370 .icon.close.primary::before

371 {

372 background-image: url(icons/delete.svg?primary#primary);

373 }

374

375 .icon.close.primary:hover::before

376 {

377 background-image: url(icons/delete.svg?primary-hover#primary-hover);

378 }

379

380 .icon.close.secondary::before

381 {

382 background-image: url(icons/delete.svg?secondary#secondary);

383 }

384

385 .icon.close.tertiary::before

386 {

387 background-image: url(icons/delete.svg?tertiary#tertiary);

388 }

389

390 .icon.close.secondary:hover::before

391 {

392 background-image: url(icons/delete.svg?secondary-hover#secondary-hover);

393 }

394

395 .icon.close.tertiary:hover::before

396 {

397 background-image: url(icons/delete.svg?tertiary-hover#tertiary-hover);

398 }

399

400 .tooltip::before

401 {

402 width: 1.1rem;

403 height: 1.1rem;

404 }

405

406 .icon.tooltip::before

407 {

408 background-image: url(icons/tooltip.svg);

409 }

410

411 #dialog .table.list li button.icon::before

412 {

413 width: 1.3rem;

414 height: 1.3rem;

415 margin: 0rem;

416 border: 0rem;

417 background-image: none;

418 }

419

420 #dialog .table.list li button[aria-checked="true"].icon::before

421 {

422 background-image: url(icons/checkmark.svg?default#default);

423 }

424

425 #social ul li .icon::before

426 {

427 margin: 0em auto;

428 width: 2.5rem;

429 height: 2.5rem;

430 }

431

432 .icon#twitter::before

433 {

434 background-image: url("social/twitter.svg");

435 }

436

437 .icon#facebook::before

438 {

439 background-image: url("social/facebook.svg");

440 }

441

442 .icon#google-plus::before

443 {

444 background-image: url("social/googleplus.svg");

445 }

446

447 /*

448 Forms

449 */

450

451 .floating-input

452 {

453 position: relative;

454 padding-top: 0.7rem;

455 margin: 1.8rem 0rem 0.5rem 0rem;

456 }

457

458 .floating-input input

459 {

460 border-color: #CDCDCD;

461 border-width: 0px 0px 1px 0px;

462 outline: none;

463 font-size: 1rem;

464 padding: 5px;

465 width: 100%;

466 }

467

468 .floating-input input:placeholder-shown ~ label,

469 .floating-input input + label,

470 .floating-input input:focus + label

471 {

472 position: absolute;

473 top: 0.9rem;

474 left: 0.3rem;

475 font-size: 1rem;

476 }

477

478 .floating-input input + label,

479 .floating-input input:focus + label

480 {

481 top: -0.5rem;

482 font-size: 0.9rem;

483 }

484

485 html[dir="rtl"] .floating-input input:placeholder-shown ~ label,

486 html[dir="rtl"] .floating-input input ~ label,

487 html[dir="rtl"] .floating-input input:focus ~ label

488 {

489 right: 0.3rem;

490 left: auto;

491 }

492

493 [data-validation] .floating-input input:focus:invalid

494 {

495 border-color: #C11D27;

496 }

497

498 [data-validation] .floating-input input:focus:invalid ~ .attention::before,

499 [data-validation] .floating-input input:valid ~ .attention::before

500 {

501 position: absolute;

502 margin: 0.3rem;

503 height: 1.5rem;

504 width: 1.5rem;

505 top: 0.3rem;

506 right: 0rem;

507 }

508

509 html[dir="rtl"] [data-validation] .floating-input input:focus:invalid ~ .attenti on::before,

510 html[dir="rtl"] [data-validation] .floating-input input:valid ~ .attention::befo re

511 {

512 left: 0rem;

513 right: auto;

514 }

515

516 [data-validation] .floating-input input ~ .error-msg

517 {

518 margin-top: 0.5rem;

519 color: #C11D27;

520 display: block;

521 visibility: hidden;

522 }

523

524 [data-validation] .floating-input input:focus:invalid ~ .error-msg

525 {

526 visibility: visible;

527 }

528

529 /*

530 Sidebar

531 */

532

533 #sidebar,

534 #sidebar .fixed,

535 [role="tablist"]

536 {

537 width: 14.3rem;

538 }

539

540 #sidebar

541 {

542 flex-shrink: 0;

543 }

544

545 #sidebar .fixed

546 {

547 top: 1.2rem;

548 bottom: 0rem;

549 height: auto;

550 }

551

552 #sidebar header

553 {

554 text-align: right;

555 margin-right: 2rem;

556 }

557

558 html[dir="rtl"] #sidebar header

559 {

560 margin-left: 2rem;

561 }

562

563 #sidebar header h1

564 {

565 margin: 0rem;

566 font-size: 1.5rem;

567 line-height: 2rem;

568 }

569

570 #sidebar header h1 strong

571 {

572 font-weight: 700;

573 }

574

575 #sidebar header p

576 {

577 margin: 0rem;

578 font-size: 1.8rem;

579 line-height: 2.6rem;

580 }

581

582 html[dir="rtl"] #sidebar header

583 {

584 text-align: left;

585 }

586

587 #sidebar-logo

588 {

589 width: 3rem;

590 margin-bottom: 0.7rem;

591 }

592

593 #sidebar nav,

594 #sidebar footer

595 {

596 margin: 1.4rem 0rem;

597 }

598

599 [role="tablist"]

600 {

601 list-style: none;

602 margin: 0rem;

603 padding: 0rem;

604 position: relative;

605 font-size: 1rem;

606 }

607

608 [role="tablist"] li a

609 {

610 display: flex;

611 margin-top: -1px;

612 padding: 1rem 0.8rem;

613 margin-left: -1px;

614 margin-right: -1px;

615 border-color: #CDCDCD transparent;

616 border-style: solid;

617 border-width: 1px;

618 text-decoration: none;

619 color: inherit;

620 cursor: pointer;

621 }

622

623 li a[role="tab"][aria-selected]

624 {

625 font-weight: 700;

626 background-color: #FFF;

627 }

628

629 html:not([dir="rtl"]) li a[role="tab"][aria-selected]

630 {

631 border-left-color: #CDCDCD;

632 }

633

634 html[dir="rtl"] li a[role="tab"][aria-selected]

635 {

636 border-right-color: #CDCDCD;

637 }

638

639 #sidebar footer

640 {

641 width: 100%;

642 }

643

644 #sidebar footer p

645 {

646 display: flex;

647 justify-content: center;

648 margin: 1rem 0rem;

649 }

650

651 /* This is a stopgap solution of footer overlapping tabs on low resolutions */

652 @media (min-height: 37rem)

653 {

654 #sidebar .fixed

655 {

656 position: fixed;

657 }

658

659 #sidebar footer

660 {

661 bottom: 0px;

662 position: absolute;

663 }

664

665 }

666

667 /*

668 Main content

669 */

670

671 body[data-tab\|="general"] #content-general,

672 body[data-tab\|="advanced"] #content-advanced,

673 body[data-tab\|="whitelist"] #content-whitelist,

674 body[data-tab\|="help"] #content-help

675 {

676 display: block;

677 }

678

679 main

680 {

681 background-color: #FFFFFF;

682 border: 1px solid #CDCDCD;

683 width: 46.3rem;

684 padding: 0px 0rem 1.4rem 0rem;

685 }

686

687 main > div

688 {

689 display: none;

690 }

691

692 main p

693 {

694 margin: 0.8rem 0rem;

695 }

696

697 /*

698 Sections

699 */

700

701 [role="tabpanel"] > section,

702 [role="tabpanel"] > .section

703 {

704 padding: 1.4rem 2rem;

705 border-top: 1px solid #CDCDCD;

706 }

707

708 [role="tabpanel"] > header h1,

709 [role="tabpanel"] > header p

710 {

711 padding: 0rem 2rem;

712 margin: 1.4rem 0rem;

713 }

714

715 section h2,

716 .section h2

717 {

718 margin: 0rem;

719 }

720

721 section h2

722 {

723 text-transform: uppercase;

724 }

725

726 section,

727 .section

728 {

729 clear: both;

730 }

731

732 section.cols

733 {

734 display: flex;

735 }

736

737 section.cols > *:first-child

738 {

739 flex: 1;

740 }

741

742 html:not([dir="rtl"]) section.cols > *:first-child

743 {

744 margin-right: 2rem;

745 }

746

747 html[dir="rtl"] section.cols > *:first-child

748 {

749 margin-left: 2rem;

750 }

751

752 section.cols > *:last-child

753 {

754 flex: 3;

755 }

756

757 /*

758 Acceptable ads

759 */

760

761 #tracking-warning

762 {

763 position: relative;

764 padding: 1.5rem;

765 margin-bottom: 1rem;

766 border: 2px solid #ffd7a3;

767 background-color: #fefbe3;

768 }

769

770 #acceptable-ads:not(.show-warning) #tracking-warning

771 {

772 display: none;

773 }

774

775 #hide-tracking-warning

776 {

777 position: absolute;

778 right: 0.8rem;

779 top: 0.8rem;

780 }

781

782 html[dir="rtl"] #hide-tracking-warning

783 {

784 left: 1rem;

785 right: auto;

786 }

787

788 #tracking-warning .link

789 {

790 color: inherit;

791 text-decoration: underline;

792 font-weight: 700;

793 }

794

795 #acceptable-ads ul

796 {

797 position: relative;

798 padding-left: 2.2rem;

799 list-style: none;

800 }

801

802 html[dir="rtl"] #acceptable-ads ul

803 {

804 padding-left: 0rem;

805 padding-right: 2.2rem;

806 }

807

808 #acceptable-ads ul button

809 {

810 position: absolute;

811 left: 0rem;

812 }

813

814 html[dir="rtl"] button

815 {

816 left: auto;

817 right: 0rem;

818 }

819

820 #acceptable-ads label

821 {

822 font-weight: 700;

823 font-size: 1rem;

824 }

825

826 html:not([dir="rtl"]) #acceptable-ads label

827 {

828 margin-right: 0.5rem;

829 }

830

831 html[dir="rtl"] #acceptable-ads label

832 {

833 margin-left: 0.5rem;

834 }

835

836 #dnt

837 {

838 padding: 0.8rem;

839 border: 1px solid #077CA6;

840 }

841

842 .new

843 {

844 display: inline-block;

845 padding: 0.2rem 0.5rem;

846 border-radius: 0.2rem;

847 background-color: #077CA6;

848 color: #FFF;

849 line-height: 100%;

850 font-size: 0.8rem;

851 text-transform: uppercase;

852 }

853

854 /*

855 Tables

856 */

857

858 ul.table,

859 ul.list

860 {

861 list-style: none;

862 margin: 0rem;

863 padding: 0rem;

864 }

865

866 .table li,

867 .list li

868 {

869 display: flex;

870 align-items: center;

871 }

872

873 .table li

874 {

875 margin: 0rem;

876 border-style: solid;

877 border-color: #CDCDCD;

878 border-width: 0px 1px 1px 1px;

879 }

880

881 .list li

882 {

883 padding: 0rem;

884 margin-bottom: 0.8rem;

885 }

886

887 .list li [role="checkbox"]

888 {

889 flex-shrink: 0;

890 }

891

892 .table li:first-of-type

893 {

894 border-top: 1px solid #CDCDCD;

895 }

896

897 .table.list li

898 {

899 padding: 0.5rem 1rem;

900 margin: 0rem;

901 }

902

903 .table.list.bottom-control li:last-of-type

904 {

905 border-bottom: 0px;

906 }

907

908 .list li > span

909 {

910 margin: 0rem 1rem;

911 }

912

913 .table.list li > span

914 {

915 flex: 1;

916 margin: 0rem;

917 }

918

919 .table.list li.empty-placeholder

920 {

921 padding: 1rem 1.4rem;

922 }

923

924 .table.list li.empty-placeholder:not(:last-of-type)

925 {

926 border-bottom: 0px;

927 }

928

929 .table.list button.link

930 {

931 font-weight: 700;

932 text-transform: uppercase;

933 text-decoration: none;

934 }

935

936 .table:not(.list):not(.cols) li

937 {

938 padding-top: 0px;

939 padding-bottom: 6px;

940 }

941

942 .table li [data-single="visible"],

943 .table li:first-of-type:last-of-type [data-single="hidden"]

944 {

945 display: none;

946 }

947

948 .table li:first-of-type:last-of-type [data-single="visible"]

949 {

950 display: block;

951 }

952

953 .th

954 {

955 display: flex;

956 }

957

958 .col5 > *

959 {

960 display: inline-block;

961 vertical-align: middle;

962 }

963

964 .cols .col5,

965 .th .col5

966 {

967 margin: 0rem 1rem;

968 align-self: center;

969 }

970

971 .th .col5:nth-of-type(1),

972 .table .col5:nth-of-type(1)

973 {

974 flex: 5;

975 }

976

977 .th .col5:nth-of-type(2),

978 .table .col5:nth-of-type(2)

979 {

980 flex: 8;

981 }

982

983 .th .col5:nth-of-type(3),

984 .table .col5:nth-of-type(3)

985 {

986 flex: 4;

987 }

988

989 .th .col5:nth-of-type(4),

990 .table .col5:nth-of-type(4)

991 {

992 flex: 1;

993 }

994

995 .th .col5:nth-of-type(5),

996 .table .col5:nth-of-type(5)

997 {

998 flex: 1;

999 }

1000

1001 html:not([dir="rtl"]) .th .col5:nth-of-type(5),

1002 html:not([dir="rtl"]) .table .col5:nth-of-type(5)

1003 {

1004 margin-left: 0;

1005 margin-right: 1.8rem;

1006 }

1007

1008 html[dir="rtl"] .th .col5:nth-of-type(5),

1009 html[dir="rtl"] .table .col5:nth-of-type(5)

1010 {

1011 margin-right: 0;

1012 margin-left: 1.8rem;

1013 }

1014

1015 .table.cols > span

1016 {

1017 margin: 0rem;

1018 }

1019

1020 .table.cols li

1021 {

1022 padding: 0.5rem 0rem;

1023 }

1024

1025 .table.cols .toggle

1026 {

1027 -moz-margin-end: 0.5rem;

1028 -webkit-margin-end: 0.5rem;

1029 }

1030

1031 .table.cols .gear

1032 {

1033 margin: 0rem

1034 }

1035

1036 #dialog .table.list li

1037 {

1038 display: block;

1039 border-width: 1px 0px 0px 0px;

1040 padding: 0rem;

1041 }

1042

1043 #dialog .table.list li:first-of-type

1044 {

1045 border: 0px;

1046 }

1047

1048 #dialog .table.list li button

1049 {

1050 display: flex;

1051 background-image: none;

1052 width: 100%;

1053 height: auto;

1054 padding: 1.1rem 1rem;

1055 }

1056

1057 #dialog .table.list li button:hover,

1058 #dialog .table.list li button:focus

1059 {

1060 background-color: #E1F2FA;

1061 }

1062

1063 #dialog .table.list li button[aria-checked="true"],

1064 .table.list li .dimmed

1065 {

1066 color: #BBB;

1067 }

1068

1069 #dialog .table.list li button > span

1070 {

1071 flex: none;

1072 margin: 0rem 0.8rem;

1073 text-transform: none;

1074 font-weight: 400;

1075 }

1076

1077 /*

1078 Tooltips

1079 */

1080

1081 .tooltip

1082 {

1083 position: relative;

1084 margin: 0rem;

1085 line-height: 1.5rem;

1086 text-decoration: none;

1087 cursor: help;

1088 }

1089

1090 html:not([dir="rtl"]) .tooltip

1091 {

1092 margin-right: 1rem;

1093 }

1094

1095 html[dir="rtl"] .tooltip

1096 {

1097 margin-left: 1rem;

1098 }

1099

1100 /*

1101 Used for translatable screen reader only content.

1102 e.g.: Use instead of aria-label to avoid complex attribute value translation

1103 */

1104 .sr-only

1105 {

1106 position: absolute;

1107 overflow: hidden;

1108 clip: rect(0, 0, 0, 0);

1109 width: 1px;

1110 height: 1px;

1111 margin: -1px;

1112 padding: 0px;

1113 border: 0px;

1114 }

1115

1116 /*

1117 General tab content

1118 */

1119

1120 #blocking-languages-dialog-table

1121 {

1122 border-bottom: none;

1123 }

1124

1125 .button-add, .cancel-button

1126 {

1127 background-color: transparent;

1128 border: 0px;

1129 color: #3A7BA6;

1130 cursor: pointer;

1131 }

1132

1133 /*

1134 Whitelist tab

1135 */

1136

1137 #content-whitelist form

1138 {

1139 display: flex;

1140 }

1141

1142 #content-whitelist form input

1143 {

1144 flex: 1;

1145 height: 100%;

1146 padding: 0.5rem 1rem;

1147 font-size: 1rem;

1148 border: 2px solid #077CA6;

1149 }

1150

1151 html:not([dir="rtl"]) #content-whitelist form button

1152 {

1153 margin-left: 0.7rem;

1154 }

1155

1156 html[dir="rtl"] #content-whitelist form button

1157 {

1158 margin-right: 0.7rem;

1159 }

1160

1161 #whitelisting-table li

1162 {

1163 padding-left: 1.4rem;

1164 padding-right: 1.4rem;

1165 border-left: 0rem;

1166 border-right: 0rem;

1167 }

1168

1169 /*

1170 Advanced tab content

1171 */

1172

1173 #all-filter-lists-table li.show-message .last-update,

1174 #all-filter-lists-table li:not(.show-message) .message,

1175 #custom-filters:not([data-mode="empty"]) #empty-custom-filters,

1176 #custom-filters[data-mode="empty"] #custom-filters-raw,

1177 #custom-filters:not([data-mode="write"]) #custom-filters-raw-controls,

1178 #custom-filters:not([data-mode="read"]) #custom-filters-edit,

1179 .state span,

1180 #acceptable-ads:not(.show-dnt-notification) #dnt

1181 {

1182 display: none;

1183 }

1184

1185 #all-filter-lists-table button[role="checkbox"][aria-checked="true"] + .state #s tate-active

1186 {

1187 display: inline;

1188 }

1189

1190 #all-filter-lists-table button[role="checkbox"][aria-checked="false"] + .state # state-disabled

1191 {

1192 display: inline;

1193 }

1194

1195 #all-filter-lists-table

1196 {

1197 margin-bottom: 0.8rem;

1198 }

1199

1200 #custom-filters-raw

1201 {

1202 width: 100%;

1203 height: 23.6rem;

1204 padding: 0.8rem;

1205 }

1206

1207 #custom-filters-raw:focus

1208 {

1209 outline: none;

1210 border: 2px solid #077CA6;

1211 }

1212

1213 #empty-custom-filters

1214 {

1215 padding: 1.5rem;

1216 border: 1px solid #CDCDCD;

1217 }

1218

1219 /*

1220 Context menu

1221 */

1222

1223 li [role="menubar"]

1224 {

1225 position: relative;

1226 }

1227

1228 [role="tooltip"]

1229 {

1230 right: -0.8rem;

1231 margin-top: 0.8rem;

1232 opacity: 1;

1233 padding: 0.2rem 1rem;

1234 position: absolute;

1235 -webkit-transition: opacity 200ms ease-in-out 400ms,

1236 visibility 0ms linear 400ms;

1237 transition: opacity 200ms ease-in-out 400ms,

1238 visibility 0ms linear 400ms;

1239 visibility: visible;

1240 width: 15rem;

1241 z-index: 1;

1242 }

1243

1244 html[dir="rtl"] [role="tooltip"]

1245 {

1246 right: auto;

1247 left: -0.8rem;

1248 }

1249

1250 [role="tooltip"],

1251 .context-menu .content

1252 {

1253 border: 1px solid #077CA6;

1254 border-radius: 3px;

1255 background-color: #FFFFFF;

1256 }

1257

1258

1259 .tooltip:not(:hover) > [role="tooltip"],

1260 [role="tooltip"]:hover

1261 {

1262 visibility: hidden;

1263 opacity: 0;

1264 -webkit-transition-delay: 0ms;

1265 transition-delay: 0ms;

1266 }

1267

1268 .context-menu

1269 {

1270 position: absolute;

1271 right: 2.5rem;

1272 top: -2rem;

1273 z-index: 1;

1274 visibility: hidden;

1275 }

1276

1277 html[dir="rtl"] .context-menu

1278 {

1279 right: auto;

1280 left: 2.5rem;

1281 }

1282

1283 .context-menu .content

1284 {

1285 padding: 0rem;

1286 position: relative;

1287 cursor: default;

1288 }

1289

1290 li.show-context-menu .context-menu

1291 {

1292 visibility: visible;

1293 }

1294

1295 [role="tooltip"]::before,

1296 .context-menu::before

1297 {

1298 content: "";

1299 width: 0rem;

1300 height: 0rem;

1301 position: absolute;

1302 }

1303

1304 [role="tooltip"]::before

1305 {

1306 border-left: 10px solid transparent;

1307 border-right: 10px solid transparent;

1308 border-bottom: 10px solid #077CA6;

1309 top: -10px;

1310 right: 15px;

1311 }

1312

1313 html[dir="rtl"] [role="tooltip"]::before

1314 {

1315 right: auto;

1316 left: 15px;

1317 }

1318

1319 .context-menu::before

1320 {

1321 border-left: 10px solid #077CA6;

1322 border-top: 10px solid transparent;

1323 border-bottom: 10px solid transparent;

1324 top: 22px;

1325 right: -0.5rem;

1326 }

1327

1328 html[dir="rtl"] .context-menu::before

1329 {

1330 border-left: 0rem;

1331 border-right: 10px solid #077CA6;

1332 right: auto;

1333 left: -0.5rem;

1334 }

1335

1336 .context-menu li[role="menuitem"]

1337 {

1338 width: 12.2rem;

1339 border: 0rem;

1340 padding: 0rem;

1341 }

1342

1343 .context-menu li[role="menuitem"] > *

1344 {

1345 width: 100%;

1346 display: flex;

1347 border: 0rem;

1348 padding: 0.7rem 0rem;

1349 color: #077CA6;

1350 align-items: center;

1351 font-size: 1rem;

1352 font-weight: 400;

1353 text-transform: none;

1354 text-decoration: none;

1355 }

1356

1357 .context-menu li[role="menuitem"] > *:hover,

1358 .context-menu li[role="menuitem"] > *:focus

1359 {

1360 background-color: #E1F2FA;

1361 cursor: pointer;

1362 }

1363

1364 .context-menu li[role="menuitem"] .icon::before

1365 {

1366 height: 1rem;

1367 width: 1rem;

1368 margin: 0rem 1.1rem;

1369 border: 0rem;

1370 }

1371

1372 /*

1373 Help tab content

1374 */

1375

1376 html:not([lang="zh"]) #social-chinese,

1377 html[lang="zh"] #social-general

1378 {

1379 display: none;

1380 }

1381

1382 #social ul

1383 {

1384 list-style: none;

1385 padding: 0px;

1386 }

1387

1388 #social ul li

1389 {

1390 display: inline-block;

1391 }

1392

1393 html:not([dir="rtl"]) #social ul li

1394 {

1395 margin-right: 1rem;

1396 }

1397

1398 html[dir="rtl"] #social ul li

1399 {

1400 margin-left: 1rem;

1401 }

1402

1403 #social ul li a

1404 {

1405 display: block;

1406 text-align: center;

1407 text-decoration: none;

1408 }

1409

1410 /*

1411 Dialog

1412 */

1413

1414 #dialog-background

1415 {

1416 display: none;

1417 position: fixed;

1418 top: 0px;

1419 right: 0px;

1420 bottom: 0px;

1421 left: 0px;

1422 z-index: 2;

1423 background-color: #000;

1424 opacity: 0.7;

1425 }

1426

1427 body[data-dialog] #dialog-background

1428 {

1429 display: block;

1430 }

1431

1432 #dialog

1433 {

1434 position: fixed;

1435 top: 100px;

1436 left: 0px;

1437 right: 0px;

1438 z-index: 2;

1439 width: 50vw;

1440 margin: auto;

1441 border-radius: 3px;

1442 background-color: #FFFFFF;

1443 }

1444

1445 #dialog header

1446 {

1447 display: flex;

1448 padding: 0.7rem 1.5rem;

1449 background-color: #077CA6;

1450 }

1451

1452 #dialog header h3

1453 {

1454 margin: 0rem;

1455 font-size: 1rem;

1456 font-weight: 700;

1457 }

1458

1459 .close

1460 {

1461 margin: 0rem;

1462 cursor: pointer;

1463 }

1464

1465 #dialog #dialog-body

1466 {

1467 max-height: 60vh;

1468 overflow: auto;

1469 }

1470

1471 .dialog-content

1472 {

1473 margin: 1rem 1.8rem;

1474 }

1475

1476 [data-dialog="language-change"] .dialog-content,

1477 [data-dialog="language-add"] .dialog-content

1478 {

1479 margin: 0rem;

1480 }

1481

1482 [data-dialog="about"] .dialog-content

1483 {

1484 text-align: center;

1485 }

1486

1487 [data-dialog="about"] .content button

1488 {

1489 margin: 1.5rem auto 1.8rem auto;

1490 }

1491

1492 [data-dialog="about"] p

1493 {

1494 margin: 0.5rem 0rem;

1495 }

1496

1497 [data-dialog="import"] .side-controls

1498 {

1499 margin-top: 2.45rem;

1500 }

1501

1502 #dialog .table

1503 {

1504 width: 100%;

1505 }

1506

1507 #dialog .section:not(:first-child)

1508 {

1509 margin-top: 24px;

1510 }

1511

1512 #dialog-title

1513 {

1514 flex: 1;

1515 font-size: 16px;

1516 color: #FFFFFF;

1517 }

1518

1519 #dialog-body .dialog-content-block

1520 {

1521 padding: 12px 0px;

1522 }

1523

1524 #dialog .url

1525 {

1526 margin-top: 10px;

1527 margin-bottom: 20px;

1528 word-wrap: break-word;

1529 }

1530

1531 body:not([data-dialog="about"]) #dialog-title-about,

1532 body:not([data-dialog="about"]) #dialog-content-about,

1533 body:not([data-dialog="import"]) #dialog-title-import,

1534 body:not([data-dialog="import"]) #dialog-content-import,

1535 body:not([data-dialog="language-add"]) #dialog-title-language-add,

1536 body:not([data-dialog="language-change"]) #dialog-title-language-change,

1537 body:not([data-dialog="language-add"]):not([data-dialog="language-change"]) #dia log-content-language-add,

1538 body:not([data-dialog="language-add"]) #dialog-body button.add,

1539 body:not([data-dialog="language-change"]) #dialog-body button.change,

1540 body:not([data-dialog="predefined"]) #dialog-title-predefined,

1541 body:not([data-dialog="predefined"]) #dialog-content-predefined,

1542 body:not([data-dialog]) #dialog

1543 {

1544 display: none;

1545 }

1546

1547 /*

1548 Notification

1549 */

1550

1551 #notification

1552 {

1553 position: fixed;

1554 top: 0rem;

1555 left: 0rem;

1556 display: flex;

1557 padding: 1rem 1.9rem;

1558 width: 100%;

1559 box-sizing: border-box;

1560 opacity: 0.8;

1561 font-size: 1rem;

1562 color: #077CA6;

1563 background-color: #E1F2FA;

1564 }

1565

1566 #notification strong

1567 {

1568 flex: 1;

1569 text-align: center;

1570 }

OLD	NEW

« no previous file with comments | « package.json ('k') | no next file » | no next file with comments »