summaryrefslogtreecommitdiffstats
path: root/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
diff options
context:
space:
mode:
Diffstat (limited to 'browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css')
-rw-r--r--browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css227
1 files changed, 227 insertions, 0 deletions
diff --git a/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css b/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
new file mode 100644
index 000000000..923aa929b
--- /dev/null
+++ b/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
@@ -0,0 +1,227 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@import url("chrome://global/skin/in-content/info-pages.css");
+
+:root {
+ --color-grey-lightest: #fbfbfb;
+ --color-grey: #b1b1b1;
+
+ --color-blue: #0996f8;
+ --color-blue-dark: #0670cc;
+ --color-blue-darker: #005bab;
+
+ --icon-margin: 64px;
+}
+
+html.private {
+ --in-content-page-color: #beb8cc;
+ --in-content-text-color: #beb8cc;
+ --in-content-page-background: #1c023c;
+}
+
+body {
+ padding: 40px;
+}
+
+a:link {
+ color: var(--color-blue);
+ text-decoration: none;
+}
+
+a:hover {
+ color: var(--color-blue-dark);
+ text-decoration: underline;
+}
+
+a:hover:active {
+ color: var(--color-blue-darker);
+}
+
+a:visited {
+ color: var(--color-blue-darker);
+}
+
+.about-content-container {
+ max-width: 780px;
+}
+
+.section-main {
+ margin-bottom: 48px;
+ margin-inline-start: var(--icon-margin);
+ padding-inline-start: 24px;
+}
+
+.section-main:last-child {
+ margin-bottom: 0;
+}
+
+p {
+ line-height: 1.5em;
+}
+
+.list-row {
+ overflow: auto;
+}
+
+.list-row > ul > li {
+ float: left;
+ width: 220px;
+ line-height: 1.5em;
+ margin-inline-start: 1em;
+ margin-bottom: 0;
+}
+
+.list-row > ul > li:dir(rtl) {
+ float: right;
+}
+
+.title {
+ background-image: url("chrome://browser/skin/privatebrowsing/private-browsing.svg");
+ background-size: 64px;
+ background-position: left, center;
+ font-weight: lighter;
+ line-height: 1.5em;
+ min-height: 64px;
+ margin-inline-start: 0;
+ padding-inline-start: calc(var(--icon-margin) + 24px);
+}
+
+.title:dir(rtl) {
+ background-position: right, center;
+}
+
+.about-subheader {
+ display: flex;
+ align-items: center;
+ font-size: 1.5em;
+ font-weight: lighter;
+ min-height: 32px;
+ background-image: url("chrome://browser/skin/privatebrowsing/tracking-protection.svg");
+ background-repeat: no-repeat;
+ background-size: 32px;
+ margin-inline-start: calc(var(--icon-margin) - 32px);
+ padding-inline-start: 56px;
+}
+
+.about-subheader:dir(rtl) {
+ background-position: right;
+}
+
+.about-subheader.tp-off {
+ background-image: url("chrome://browser/skin/privatebrowsing/tracking-protection-off.svg");
+}
+
+.about-info {
+ font-size: .875em;
+}
+
+.tpTitle {
+ margin-inline-end: 12px;
+}
+
+.private strong {
+ color: var(--color-grey-lightest);
+ font-weight: normal;
+}
+
+a.button {
+ padding: 5px 40px;
+ background-color: #381e59;
+ border: 1px solid #43256a;
+ border-radius: 4px;
+ text-decoration: none;
+ display: inline-block;
+}
+
+/**
+ * We want to hide the checkbox in lieu of the toggle-btn
+ * "slider toggle". We need to make the toggle keyboard
+ * focusable, however, which is not possible if it's
+ * display:none. We work around this by making the toggle
+ * invisible but still present in the display list, allowing
+ * it to receive keyboard events. When it is focused by keyboard,
+ * we use the -moz-focusring selector on the invisible checkbox
+ * to show a focus ring around the slider toggle.
+ */
+.toggle-input {
+ opacity: 0;
+ width: 0;
+ pointer-events: none;
+ position: absolute;
+}
+
+.toggle + .toggle-btn {
+ box-sizing: border-box;
+ cursor: pointer;
+ min-width: 60px;
+ height: 24px;
+ border-radius: 12px;
+ background-color: var(--color-grey);
+ border: 1px var(--color-grey) solid;
+ padding: 2px;
+}
+
+.toggle + .toggle-btn::after,
+.toggle + .toggle-btn::before {
+ position: relative;
+ display: block;
+ content: "";
+ width: 19px;
+ height: 100%;
+}
+
+.toggle + .toggle-btn::after {
+ left: 0;
+ box-shadow: 0 0 1px 1px hsla(0, 0%, 0%, .1),
+ 0 1px 0 hsla(0, 0%, 0%, .2);
+ border-radius: 50%;
+ background: white;
+ transition: left .2s ease;
+}
+
+.toggle + .toggle-btn::before {
+ float: left;
+ left: 9px;
+ visibility: hidden;
+ background-size: 16px;
+ background-repeat: no-repeat;
+ background-color: transparent;
+ background-image: url("chrome://browser/skin/privatebrowsing/check.svg");
+}
+
+.toggle + .toggle-btn:dir(rtl)::after {
+ left: auto;
+ right: 0;
+ transition-property: right;
+}
+
+.toggle + .toggle-btn:dir(rtl)::before {
+ float: right;
+ left: auto;
+ right: 9px;
+}
+
+.toggle:checked + .toggle-btn {
+ background: #3fc455;
+ border: 1px solid #269939;
+}
+
+.toggle:checked + .toggle-btn::after {
+ left: 35px;
+}
+
+.toggle:checked + .toggle-btn:dir(rtl)::after {
+ right: 35px;
+}
+
+.toggle:checked + .toggle-btn::before {
+ visibility: visible;
+}
+
+.toggle:-moz-focusring + .toggle-btn {
+ outline: 2px solid rgba(0, 149, 221, 0.5);
+ outline-offset: 1px;
+ -moz-outline-radius: 2px;
+}