Bug 1361986 - Update the about:privatebrowsing design for photon. r?johannh
MozReview-Commit-ID: 8czyGdaoyLI
--- a/browser/components/privatebrowsing/content/aboutPrivateBrowsing.xhtml
+++ b/browser/components/privatebrowsing/content/aboutPrivateBrowsing.xhtml
@@ -27,17 +27,17 @@
<body dir="&locale.dir;">
<p class="showNormal">&aboutPrivateBrowsing.notPrivate;</p>
<button xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
id="startPrivateBrowsing"
class="showNormal"
label="&privatebrowsingpage.openPrivateWindow.label;"
accesskey="&privatebrowsingpage.openPrivateWindow.accesskey;"/>
- <div class="showPrivate about-content-container">
+ <div class="showPrivate container">
<h1 class="title">
<span id="title">&privateBrowsing.title;</span>
<span id="titleTracking">&privateBrowsing.title.tracking;</span>
</h1>
<section class="section-main">
<p>&aboutPrivateBrowsing.info.notsaved.before;<strong>&aboutPrivateBrowsing.info.notsaved.emphasize;</strong>&aboutPrivateBrowsing.info.notsaved.after;</p>
<div class="list-row">
<ul>--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -171,17 +171,16 @@
skin/classic/browser/panic-panel/header@2x.png (../shared/panic-panel/header@2x.png)
skin/classic/browser/panic-panel/header-small.png (../shared/panic-panel/header-small.png)
skin/classic/browser/panic-panel/header-small@2x.png (../shared/panic-panel/header-small@2x.png)
skin/classic/browser/panic-panel/icons.png (../shared/panic-panel/icons.png)
skin/classic/browser/panic-panel/icons@2x.png (../shared/panic-panel/icons@2x.png)
skin/classic/browser/places/bookmarks-notification-finish.png (../shared/places/bookmarks-notification-finish.png)
skin/classic/browser/places/bookmarks-notification-finish@2x.png (../shared/places/bookmarks-notification-finish@2x.png)
skin/classic/browser/privatebrowsing/aboutPrivateBrowsing.css (../shared/privatebrowsing/aboutPrivateBrowsing.css)
- skin/classic/browser/privatebrowsing/check.svg (../shared/privatebrowsing/check.svg)
skin/classic/browser/privatebrowsing/favicon.svg (../shared/privatebrowsing/favicon.svg)
skin/classic/browser/privatebrowsing/private-browsing.svg (../shared/privatebrowsing/private-browsing.svg)
skin/classic/browser/privatebrowsing/tracking-protection-off.svg (../shared/privatebrowsing/tracking-protection-off.svg)
skin/classic/browser/privatebrowsing/tracking-protection.svg (../shared/privatebrowsing/tracking-protection.svg)
skin/classic/browser/compacttheme/loading-inverted.png (../shared/compacttheme/loading-inverted.png)
skin/classic/browser/compacttheme/loading-inverted@2x.png (../shared/compacttheme/loading-inverted@2x.png)
skin/classic/browser/compacttheme/urlbar-history-dropmarker.svg (../shared/compacttheme/urlbar-history-dropmarker.svg)
skin/classic/browser/urlbar-star.svg (../shared/urlbar-star.svg)
--- a/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
+++ b/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
@@ -1,141 +1,108 @@
/* 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;
+ --in-content-page-color: white;
+ --in-content-text-color: white;
+ --in-content-page-background: #25003e;
}
a:link {
- color: var(--color-blue);
- text-decoration: none;
-}
-
-a:hover {
- color: var(--color-blue-dark);
+ color: inherit;
text-decoration: underline;
}
-a:hover:active {
- color: var(--color-blue-darker);
-}
-
-a:visited {
- color: var(--color-blue-darker);
-}
-
-.about-content-container {
- max-width: 780px;
+.container {
+ max-width: 48em;
}
.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;
+ width: 16em;
+ line-height: 2em;
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);
+ background-position: left center;
+ background-size: 2em;
+ line-height: 2em;
+ margin-inline-start: calc(-2em - 10px);
+ padding-inline-start: calc(2em + 10px);
}
.title:dir(rtl) {
- background-position: right, center;
+ 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;
+ background-position: left center;
+ background-size: 1.5em;
+ line-height: 1.5em;
+ margin-inline-start: calc(-1.5em - 10px);
+ padding-inline-start: calc(1.5em + 10px);
}
.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;
+ font-size: .9em;
}
.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;
+ padding: 3px 20px;
+ background-color: #8000d7;
+ border: 1px solid #6000a1;
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
@@ -150,78 +117,51 @@ a.button {
width: 0;
pointer-events: none;
position: absolute;
}
.toggle + .toggle-btn {
box-sizing: border-box;
cursor: pointer;
- min-width: 60px;
- height: 24px;
- border-radius: 12px;
+ min-width: 42px;
+ height: 26px;
+ border-radius: 13px;
background-color: var(--color-grey);
- border: 1px var(--color-grey) solid;
- padding: 2px;
+ padding: 1px;
}
-.toggle + .toggle-btn::after,
-.toggle + .toggle-btn::before {
+.toggle + .toggle-btn::after {
position: relative;
display: block;
content: "";
- width: 19px;
+ width: 24px;
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;
+ background: #16da00;
}
.toggle:checked + .toggle-btn::after {
- left: 35px;
+ left: 16px;
}
.toggle:checked + .toggle-btn:dir(rtl)::after {
- right: 35px;
-}
-
-.toggle:checked + .toggle-btn::before {
- visibility: visible;
+ left: auto;
+ right: 16px;
}
.toggle:-moz-focusring + .toggle-btn {
outline: 2px solid rgba(0, 149, 221, 0.5);
outline-offset: 1px;
-moz-outline-radius: 2px;
}deleted file mode 100644
--- a/browser/themes/shared/privatebrowsing/check.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- 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/. -->
-
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
- <path fill="#fff" d="M30.057,9.752L15.9,23.909h0l-4.044,4.045-4.045-4.045h0l-6.068-6.067,4.045-4.045,6.068,6.067L26.012,5.707Z"/>
-</svg>
--- a/toolkit/themes/shared/in-content/info-pages.inc.css
+++ b/toolkit/themes/shared/in-content/info-pages.inc.css
@@ -4,20 +4,17 @@
@import url("chrome://global/skin/in-content/common.css");
/* Body and container */
body {
display: flex;
flex-direction: column;
box-sizing: border-box;
min-height: 100vh;
- padding-top: 0;
- padding-bottom: 0;
- padding-inline-start: calc(48px + 4.6em);
- padding-inline-end: 48px;
+ padding: 0 48px;
align-items: center;
justify-content: center;
}
.container {
min-width: 13em;
max-width: 52em;
}
@@ -32,35 +29,31 @@ body {
/* Typography */
.title {
background-image: url("chrome://global/skin/icons/info.svg");
background-position: left 0;
background-repeat: no-repeat;
background-size: 1.6em;
margin-inline-start: -2.3em;
padding-inline-start: 2.3em;
- font-size: 2.5em;
+ font-size: 2.2em;
}
.title:-moz-locale-dir(rtl),
.title:dir(rtl) {
background-position: right 0;
}
.title-text {
border-bottom: 1px solid #C1C1C1;
font-size: inherit;
padding-bottom: 0.4em;
}
-@media (max-width: 675px) {
- body {
- padding: 0 48px;
- }
-
+@media (max-width: 970px) {
.title {
background-image: none !important;
padding-inline-start: 0;
margin-inline-start: 0;
}
.title-text {
padding-top: 0;
