Commit | Line | Data |
---|---|---|
7c1e433b RK |
1 | /* This Source Code Form is subject to the terms of the Mozilla Public |
2 | * License, v. 2.0. If a copy of the MPL was not distributed with this | |
3 | * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ | |
4 | ||
5 | @import url("chrome://global/skin/in-content/info-pages.css"); | |
6 | ||
7 | :root { | |
7c1e433b | 8 | --color-grey: #A09090; |
7c1e433b RK |
9 | } |
10 | ||
11 | html.private { | |
12 | --in-content-page-color: #FF9F00; | |
13 | --in-content-text-color: #FF9F00; | |
14 | --in-content-page-background: #000000; | |
15 | } | |
16 | ||
7c1e433b | 17 | a:link { |
7c1e433b RK |
18 | text-decoration: underline; |
19 | } | |
20 | ||
7c1e433b RK |
21 | .about-content-container { |
22 | max-width: 780px; | |
23 | } | |
24 | ||
1b1f3d09 RK |
25 | .container { |
26 | max-width: 48em; | |
27 | } | |
28 | ||
7c1e433b RK |
29 | .section-main { |
30 | margin-bottom: 48px; | |
7c1e433b RK |
31 | } |
32 | ||
33 | .section-main:last-child { | |
34 | margin-bottom: 0; | |
35 | } | |
36 | ||
37 | p { | |
38 | line-height: 1.5em; | |
39 | } | |
40 | ||
41 | .list-row { | |
42 | overflow: auto; | |
43 | } | |
44 | ||
45 | .list-row > ul > li { | |
46 | float: left; | |
1b1f3d09 RK |
47 | width: 16em; |
48 | line-height: 2em; | |
dae45075 | 49 | margin-inline-start: 1em; |
7c1e433b RK |
50 | margin-bottom: 0; |
51 | } | |
52 | ||
dae45075 | 53 | .list-row > ul > li:dir(rtl) { |
7c1e433b RK |
54 | float: right; |
55 | } | |
56 | ||
57 | .title { | |
58 | background-image: url("chrome://browser/skin/privatebrowsing/private-browsing.svg"); | |
1b1f3d09 RK |
59 | background-position: left center; |
60 | background-size: 2em; | |
61 | line-height: 2em; | |
62 | margin-inline-start: calc(-2em - 10px); | |
63 | padding-inline-start: calc(2em + 10px); | |
7c1e433b RK |
64 | } |
65 | ||
dae45075 | 66 | .title:dir(rtl) { |
1b1f3d09 | 67 | background-position: right center; |
7c1e433b RK |
68 | } |
69 | ||
70 | .about-subheader { | |
71 | display: flex; | |
72 | align-items: center; | |
73 | font-size: 1.5em; | |
74 | font-weight: lighter; | |
7c1e433b RK |
75 | background-image: url("chrome://browser/skin/privatebrowsing/tracking-protection.svg"); |
76 | background-repeat: no-repeat; | |
1b1f3d09 RK |
77 | background-position: left center; |
78 | background-size: 1.5em; | |
79 | line-height: 1.5em; | |
80 | margin-inline-start: calc(-1.5em - 10px); | |
81 | padding-inline-start: calc(1.5em + 10px); | |
7c1e433b RK |
82 | } |
83 | ||
dae45075 | 84 | .about-subheader:dir(rtl) { |
7c1e433b RK |
85 | background-position: right; |
86 | } | |
87 | ||
88 | .about-subheader.tp-off { | |
89 | background-image: url("chrome://browser/skin/privatebrowsing/tracking-protection-off.svg"); | |
90 | } | |
91 | ||
92 | .about-info { | |
1b1f3d09 | 93 | font-size: .9em; |
7c1e433b RK |
94 | } |
95 | ||
96 | .tpTitle { | |
97 | margin-inline-end: 12px; | |
98 | } | |
99 | ||
7c1e433b | 100 | a.button { |
1b1f3d09 | 101 | padding: 3px 20px; |
7c1e433b RK |
102 | background-color: #C09070; |
103 | color: #000000; | |
104 | border: 0px solid #C09070; | |
105 | border-radius: 3000px; | |
106 | text-decoration: none; | |
107 | display: inline-block; | |
108 | } | |
109 | ||
110 | a.button:hover { | |
111 | background-color: #FFCF00; | |
112 | } | |
113 | ||
114 | a.button:active { | |
115 | background-color: #FF9F00; | |
116 | } | |
117 | ||
b1d1a8bb RK |
118 | /** |
119 | * We want to hide the checkbox in lieu of the toggle-btn | |
120 | * "slider toggle". We need to make the toggle keyboard | |
121 | * focusable, however, which is not possible if it's | |
122 | * display:none. We work around this by making the toggle | |
123 | * invisible but still present in the display list, allowing | |
124 | * it to receive keyboard events. When it is focused by keyboard, | |
125 | * we use the -moz-focusring selector on the invisible checkbox | |
126 | * to show a focus ring around the slider toggle. | |
127 | */ | |
128 | .toggle-input { | |
129 | opacity: 0; | |
130 | width: 0; | |
131 | pointer-events: none; | |
132 | position: absolute; | |
133 | } | |
134 | ||
7c1e433b RK |
135 | .toggle + .toggle-btn { |
136 | box-sizing: border-box; | |
137 | cursor: pointer; | |
1b1f3d09 RK |
138 | min-width: 42px; |
139 | height: 26px; | |
140 | border-radius: 13px; | |
7c1e433b | 141 | background-color: var(--color-grey); |
1b1f3d09 | 142 | padding: 1px; |
7c1e433b RK |
143 | } |
144 | ||
1b1f3d09 | 145 | .toggle + .toggle-btn::after { |
7c1e433b RK |
146 | position: relative; |
147 | display: block; | |
148 | content: ""; | |
1b1f3d09 | 149 | width: 24px; |
7c1e433b | 150 | height: 100%; |
7c1e433b | 151 | left: 0; |
7c1e433b RK |
152 | border-radius: 50%; |
153 | background: #000000; | |
154 | transition: left .2s ease; | |
155 | } | |
156 | ||
dae45075 | 157 | .toggle + .toggle-btn:dir(rtl)::after { |
7c1e433b RK |
158 | left: auto; |
159 | right: 0; | |
160 | transition-property: right; | |
161 | } | |
162 | ||
7c1e433b RK |
163 | .toggle:checked + .toggle-btn { |
164 | background: #008484; | |
7c1e433b RK |
165 | } |
166 | ||
167 | .toggle:checked + .toggle-btn::after { | |
1b1f3d09 | 168 | left: 16px; |
7c1e433b RK |
169 | } |
170 | ||
dae45075 | 171 | .toggle:checked + .toggle-btn:dir(rtl)::after { |
1b1f3d09 RK |
172 | left: auto; |
173 | right: 16px; | |
7c1e433b RK |
174 | } |
175 | ||
176 | .toggle:-moz-focusring + .toggle-btn { | |
177 | outline: 2px solid #A09090; | |
178 | outline-offset: 1px; | |
179 | -moz-outline-radius: 2px; | |
180 | } |