194 lines
3.6 KiB
CSS
194 lines
3.6 KiB
CSS
|
/* 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/common.css");
|
||
|
|
||
|
body {
|
||
|
min-height: 100vh;
|
||
|
display: flex;
|
||
|
flex-direction: column;
|
||
|
align-items: center;
|
||
|
justify-content: center;
|
||
|
font-weight: 300;
|
||
|
}
|
||
|
|
||
|
body.private .showNormal,
|
||
|
body.normal .showPrivate,
|
||
|
body[tpEnabled] .showTpDisabled,
|
||
|
body:not([tpEnabled]) .showTpEnabled {
|
||
|
display: none !important;
|
||
|
}
|
||
|
body[globalTpEnabled] .showGlobalTpDisabled {
|
||
|
display: none !important;
|
||
|
}
|
||
|
|
||
|
@media screen and (min-width: 1200px) and (min-height: 700px) {
|
||
|
body.private {
|
||
|
font-size: 1.25em;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
#bar {
|
||
|
align-self: stretch;
|
||
|
background: url("chrome://browser/skin/privatebrowsing/mask.svg") no-repeat 22px 50%,
|
||
|
#8d20ae;
|
||
|
background-size: 47px 26px;
|
||
|
padding-inline-start: 87px;
|
||
|
color: white;
|
||
|
font-size: 1.5em;
|
||
|
font-weight: 200;
|
||
|
line-height: 2.5em;
|
||
|
}
|
||
|
|
||
|
#bar:-moz-dir(rtl) {
|
||
|
background-position: right 22px top 50%;
|
||
|
}
|
||
|
|
||
|
#main {
|
||
|
padding: 0 2em;
|
||
|
flex: 1;
|
||
|
display: flex;
|
||
|
flex-flow: row wrap;
|
||
|
align-items: center;
|
||
|
justify-content: center;
|
||
|
}
|
||
|
|
||
|
.sectionHeader {
|
||
|
font-size: 1.75em;
|
||
|
}
|
||
|
|
||
|
/* PRIVATE BROWSING SECTION */
|
||
|
|
||
|
#privateBrowsingSection {
|
||
|
margin: 1em;
|
||
|
padding: 0 1em;
|
||
|
}
|
||
|
|
||
|
ul {
|
||
|
margin: 0;
|
||
|
padding-inline-start: 8px;
|
||
|
}
|
||
|
|
||
|
li {
|
||
|
list-style: none;
|
||
|
padding-inline-start: 24px;
|
||
|
background-size: 16px 16px;
|
||
|
background-repeat: no-repeat;
|
||
|
background-position: 0 50%;
|
||
|
}
|
||
|
|
||
|
li:-moz-dir(rtl) {
|
||
|
background-position: 100% 50%;
|
||
|
}
|
||
|
|
||
|
#forgotten > li {
|
||
|
background-image: url("chrome://browser/skin/privatebrowsing/check.png");
|
||
|
}
|
||
|
|
||
|
#kept > li {
|
||
|
background-image: url("chrome://browser/skin/privatebrowsing/attention.png");
|
||
|
}
|
||
|
|
||
|
@media (min-resolution: 1.1dppx) {
|
||
|
#forgotten li {
|
||
|
background-image: url("chrome://browser/skin/privatebrowsing/check@2x.png");
|
||
|
}
|
||
|
|
||
|
#kept li {
|
||
|
background-image: url("chrome://browser/skin/privatebrowsing/attention@2x.png");
|
||
|
}
|
||
|
}
|
||
|
|
||
|
#list-area {
|
||
|
display: flex;
|
||
|
flex-direction: row;
|
||
|
justify-content: flex-start;
|
||
|
align-items: flex-start;
|
||
|
}
|
||
|
|
||
|
#list-area > div {
|
||
|
margin-inline-end: 3em;
|
||
|
}
|
||
|
|
||
|
.list-header {
|
||
|
margin-bottom: 0.4em;
|
||
|
font-weight: bold;
|
||
|
}
|
||
|
|
||
|
/* TRACKING PROTECTION SECTION */
|
||
|
|
||
|
#trackingProtectionSection {
|
||
|
margin: 1em;
|
||
|
padding: 1em;
|
||
|
text-align: center;
|
||
|
border: lightgray 2px solid;
|
||
|
border-radius: 10px;
|
||
|
}
|
||
|
|
||
|
#tpEnabled,
|
||
|
#tpDisabled {
|
||
|
display: inline-block;
|
||
|
margin-inline-start: 0.5em;
|
||
|
border-radius: 3px;
|
||
|
padding: 0.1em;
|
||
|
color: white;
|
||
|
font-size: 0.78em;
|
||
|
font-weight: bold;
|
||
|
}
|
||
|
|
||
|
#tpEnabled {
|
||
|
background-color: #6fbe4a;
|
||
|
}
|
||
|
|
||
|
#tpDisabled {
|
||
|
background-color: #c33b32;
|
||
|
}
|
||
|
|
||
|
#tpDiagram {
|
||
|
margin-left: auto;
|
||
|
margin-right: auto;
|
||
|
width: 145px;
|
||
|
height: 90px;
|
||
|
background: url("chrome://browser/skin/privatebrowsing/shield-page.png") no-repeat;
|
||
|
background-size: 145px 90px;
|
||
|
}
|
||
|
|
||
|
@media (min-resolution: 1.1dppx) {
|
||
|
#tpDiagram {
|
||
|
background-image: url("chrome://browser/skin/privatebrowsing/shield-page@2x.png");
|
||
|
}
|
||
|
}
|
||
|
|
||
|
#tpStartTour {
|
||
|
margin-bottom: 0;
|
||
|
}
|
||
|
|
||
|
#startTour {
|
||
|
display: block;
|
||
|
border-radius: 2px;
|
||
|
background-color: var(--in-content-primary-button-background);
|
||
|
color: var(--in-content-selected-text);
|
||
|
padding: 0.1em 0.3em;
|
||
|
line-height: 2.25em;
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
|
||
|
#startTour:hover {
|
||
|
background-color: var(--in-content-primary-button-background-hover);
|
||
|
}
|
||
|
|
||
|
#startTour:hover:active {
|
||
|
background-color: var(--in-content-primary-button-background-active);
|
||
|
}
|
||
|
|
||
|
#startTour:-moz-focusring {
|
||
|
outline: 1px dotted var(--in-content-border-focus);
|
||
|
}
|
||
|
|
||
|
#enableTrackingProtection,
|
||
|
#disableTrackingProtection {
|
||
|
font-size: 0.875em;
|
||
|
cursor: pointer;
|
||
|
}
|