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/. */
5 @import url("chrome://global/skin/in-content/info-pages.css");
12 --in-content-page-color: #FF9F00;
13 --in-content-text-color: #FF9F00;
14 --in-content-page-background: #000000;
18 text-decoration: underline;
21 .about-content-container {
33 .section-main:last-child {
49 margin-inline-start: 1em;
53 .list-row > ul > li:dir(rtl) {
58 background-image: url("chrome://browser/skin/privatebrowsing/private-browsing.svg");
59 background-position: left center;
62 margin-inline-start: calc(-2em - 10px);
63 padding-inline-start: calc(2em + 10px);
67 background-position: right center;
75 background-image: url("chrome://browser/skin/privatebrowsing/tracking-protection.svg");
76 background-repeat: no-repeat;
77 background-position: left center;
78 background-size: 1.5em;
80 margin-inline-start: calc(-1.5em - 10px);
81 padding-inline-start: calc(1.5em + 10px);
84 .about-subheader:dir(rtl) {
85 background-position: right;
88 .about-subheader.tp-off {
89 background-image: url("chrome://browser/skin/privatebrowsing/tracking-protection-off.svg");
97 margin-inline-end: 12px;
102 background-color: #C09070;
104 border: 0px solid #C09070;
105 border-radius: 3000px;
106 text-decoration: none;
107 display: inline-block;
111 background-color: #FFCF00;
115 background-color: #FF9F00;
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.
131 pointer-events: none;
135 .toggle + .toggle-btn {
136 box-sizing: border-box;
141 background-color: var(--color-grey);
145 .toggle + .toggle-btn::after {
154 transition: left .2s ease;
157 .toggle + .toggle-btn:dir(rtl)::after {
160 transition-property: right;
163 .toggle:checked + .toggle-btn {
167 .toggle:checked + .toggle-btn::after {
171 .toggle:checked + .toggle-btn:dir(rtl)::after {
176 .toggle:-moz-focusring + .toggle-btn {
177 outline: 2px solid #A09090;
179 -moz-outline-radius: 2px;