MediaWiki:Gadget-checkboxList.css
Revision as of 18:06, 3 October 2022 by Jacmob (talk | contribs) (Created page with "→CSS for [[MediaWiki:Gadget-checkboxList.js]]: →Use with [[Template:Checklist]]: →=========================== lighttable checklists ===========================: /* checklist will otherwise render anything floated to the right unclickable due to overlap; 300px is the width of infoboxes and default thumbnail size the first rule is the fallback for ancient browsers; the second rule keeps 350px space to the side, down to 1000px width of its co...")
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
1 /* CSS for [[MediaWiki:Gadget-checkboxList.js]] */
2 /* Use with [[Template:Checklist]] */
3
4 /* ===========================
5 lighttable checklists
6 =========================== */
7
8 /* checklist will otherwise render anything floated to the right unclickable
9 due to overlap; 300px is the width of infoboxes and default thumbnail size
10 the first rule is the fallback for ancient browsers; the second rule keeps
11 350px space to the side, down to 1000px width of its container, after which
12 it stops shrinking. */
13 .lighttable.checklist {
14 max-width: calc(100% - 350px);
15 max-width: max(calc(100% - 350px), 650px);
16 }
17
18 /* No maximum within a table, since tables typically set their own dimensions */
19 td .lighttable.checklist {
20 max-width: none;
21 }
22
23 body.skin-minerva .lighttable.checklist,
24 .questdetails .lighttable.checklist {
25 max-width: 100%;
26 }
27
28 /* kill double margin if nested, when a small indent is specified */
29 .lighttable.checklist.smallindent ul ul {
30 margin: 0;
31 }
32
33 .lighttable.checklist li {
34 padding-left: 1.5rem;
35 margin-bottom: .3em;
36 list-style: none;
37 cursor: pointer;
38 }
39
40 /* unchecked state */
41 .lighttable.checklist li::before {
42 content: '';
43 display: inline-block;
44 height: 1rem;
45 width: 1rem;
46 margin-left: -0.25rem;
47 margin-right: -0.5rem;
48 margin-bottom: -0.15rem;
49 transform: translateX(-100%);
50 background: no-repeat center / 1rem url('images/Checkbox-unchecked.svg');
51 }
52
53 /* unchecked hover state */
54 .lighttable.checklist li:not(.checked):hover::before {
55 background-color: #e4eaee;
56 border-radius: .2rem;
57 }
58
59 body.wgl-darkmode .lighttable.checklist li:not(.checked):hover::before {
60 background-color: #313e59;
61 }
62
63 /* checked state */
64 .lighttable.checklist .checked::before {
65 background-image: url('images/Checkbox-checked.svg');
66 }
67
68 /* checked state - text line */
69 .lighttable.checklist .checked {
70 opacity: .5;
71 }
72
73 /* cancel opacity at deeper levels */
74 .lighttable.checklist .checked .checked {
75 opacity: 1;
76 }