--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -7,24 +7,24 @@
.main-content {
padding-top: 0;
background-color: #fafafc;
}
.pane-container {
display: block;
- max-width: 800px;
+ max-width: 664px;
}
#mainPrefPane {
width: 100%;
padding: 0;
font: message-box;
- color: #0c0c0d;
+ color: currentColor;
}
#mainPrefPane groupbox,
#mainPrefPane deck,
#mainPrefPane description {
font-size: 1.36rem;
}
@@ -50,49 +50,90 @@ html|option {
-moz-user-select: none;
}
caption > label {
font-size: 1.55rem;
font-weight: 600;
}
-#engineList treechildren::-moz-tree-image(engineShown, checked),
-#blocklistsTree treechildren::-moz-tree-image(selectionCol, checked) {
- list-style-image: url("chrome://global/skin/in-content/check.svg");
- -moz-context-properties: fill, stroke;
- fill: #2292d0;
- stroke: none;
- width: 21px;
- height: 21px;
+checkbox {
+ height: 30px;
+ margin: 2px 0;
+}
+
+groupbox {
+ margin-top: 0px;
+ padding: 0;
+}
+
+groupbox > caption {
+ padding: 4px 0;
+}
+
+.groupbox-body {
+ margin-bottom: 32px;
+ margin-top: 4px;
+}
+
+description {
+ line-height: 30px;
+ margin-top: 0 !important;
+ margin-bottom: 0 !important;
+}
+
+/* XXX This style is for bug 740213 and should be removed once that
+ bug has a solution. */
+description > html|a {
+ cursor: pointer;
}
-#engineList treechildren::-moz-tree-image(engineShown, checked, selected),
-#blocklistsTree treechildren::-moz-tree-image(selectionCol, checked, selected) {
- fill: white;
- stroke: #0095dd;
+description > checkbox {
+ vertical-align: bottom;
+}
+
+.indent {
+ /* !important needed to override margin-inline-start:0 !important; rule
+ define in common.css for labels */
+ margin-inline-start: 28px !important;
+}
+
+description.indent,
+.indent > description {
+ font-size: 1.18rem;
+ color: #737373;
}
-#engineList treechildren::-moz-tree-row,
-#blocklistsTree treechildren::-moz-tree-row {
- min-height: 36px;
+menulist {
+ margin: 0 8px;
+}
+
+separator.thin:not([orient="vertical"]) {
+ height: 8px;
}
-#selectionCol {
- min-width: 26px;
+.checkbox-check {
+ margin-inline-end: 8px;
+ width: 20px;
+ height: 20px;
+}
+
+.radio-label-box {
+ margin-inline-end: 8px;
}
.learnMore {
margin-inline-start: 10px;
font-weight: normal;
white-space: nowrap;
}
.accessory-button {
min-width: 145px;
+ margin: 2px 0;
}
/* Subcategory title */
/**
* The first subcategory title for each category should not have margin-top.
*/
#generalCategory,
@@ -100,77 +141,77 @@ caption > label {
#browserPrivacyCategory,
#firefoxAccountCategory {
margin-top: 0;
}
.header-name {
font-size: 2rem;
font-weight: 300;
+ line-height: 30px;
}
.subcategory {
- margin-top: 48px;
+ margin: 16px 0;
}
/* Category List */
#categories {
max-height: 100vh;
background-color: #fafafc;
+ padding-top: 70px;
}
#categories > scrollbox {
overflow-x: hidden !important;
}
.category-name {
font-size: 1.45rem;
- color: #0c0c0d;
}
.category,
.category:hover,
.category[selected] {
+ width: 240px;
+ height: 48px;
background-color: transparent;
- border-inline-start: initial;
padding-inline-start: 44px;
-}
-
-richlistitem[selected='true'] .category-name {
- color: #0a84ff;
+ padding-inline-end: 10px;
+ border-inline-start: none;
}
/**
* We want the last category to always have non-0 getBoundingClientRect().bottom
* so we can use the value to figure out the max-height of the list in
* preferences.js, so use collapse instead of display: none; if it's hidden
*/
#categories > .category[hidden="true"] {
display: -moz-box;
visibility: collapse;
}
#category-general > .category-icon {
- list-style-image: url("chrome://browser/skin/preferences/in-content-new/icons.svg#general");
+ list-style-image: url("chrome://browser/skin/preferences/in-content-new/general.svg");
}
#category-search > .category-icon {
- list-style-image: url("chrome://browser/skin/preferences/in-content-new/icons.svg#search");
+ list-style-image: url("chrome://browser/skin/preferences/in-content-new/search.svg");
}
#category-privacy > .category-icon {
- list-style-image: url("chrome://browser/skin/preferences/in-content-new/icons.svg#security");
+ list-style-image: url("chrome://browser/skin/preferences/in-content-new/privacy-security.svg");
}
#category-sync > .category-icon {
- list-style-image: url("chrome://browser/skin/preferences/in-content-new/icons.svg#sync");
+ list-style-image: url("chrome://browser/skin/preferences/in-content-new/sync.svg");
}
-@media (max-width: 800px) {
+@media (max-width: 960px) {
.category-name {
display: none;
}
.help-button {
font-size: 0 !important;
}
}
@@ -182,33 +223,46 @@ richlistitem[selected='true'] .category-
}
.header[hidden=true] {
display: none;
}
/* General Pane */
+#startupGroup {
+ margin-top: 0px !important;
+}
+
#startupTable {
+ margin-top: 32px;
border-collapse: collapse;
}
#startupTable > tr > td {
padding: 0; /* remove the padding from html.css */
}
-#startupTable > tr:not(:first-child) > td {
- padding-top: 0.5em; /* add a spacing between the rows */
+#startupTable > .tableGroup > td {
+ padding-top: 32px;
+}
+
+#startupTable > .tableSubGroup > td {
+ padding-top: 8px;
}
#startupTable > tr > .label-cell {
text-align: end;
width: 0; /* make the column as small as possible */
}
+#startupTable > tr > .content-cell:not(:first-child) {
+ padding-inline-start: 8px;
+}
+
#startupTable > tr > .label-cell > label {
white-space: nowrap;
}
#startupTable > tr > .content-cell > menulist,
#startupTable > tr > .content-cell > textbox {
width: calc(100% - 8px);
margin-left: 4px;
@@ -219,19 +273,18 @@ richlistitem[selected='true'] .category-
display: flex;
flex-wrap: wrap;
}
#startupTable > tr > .homepage-buttons > .content-cell-item {
flex-grow: 1;
}
-#useFirefoxSync {
- font-size: 90%;
- margin-inline-end: 8px !important;
+.content-cell-item {
+ margin: 0 4px;
}
#getStarted {
font-size: 90%;
}
#isNotDefaultLabel,
#signedOutAccountBoxTitle {
@@ -242,25 +295,44 @@ richlistitem[selected='true'] .category-
margin-inline-start: 0;
}
#browserHomePage:-moz-locale-dir(rtl) input {
unicode-bidi: plaintext;
direction: rtl;
}
-#defaultFontSizeLabel {
- /* !important needed to override common !important rule */
- margin-inline-start: 4px !important;
+#updateApp > .groupbox-body > label {
+ margin: 0 0 4px 0;
+ line-height: 30px;
+}
+
+#updateApp > .groupbox-body > description {
+ line-height: 30px;
+ margin: 0;
}
-/* Applications Pane Styles */
+#updateBox {
+ margin-top: 8px;
+ margin-bottom: 32px;
+}
+
+#updateBox button {
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+#updateRadioGroup radio {
+ height: 30px;
+ margin: 2px 0;
+}
#filter {
margin-inline-start: 0;
+ margin-bottom: 8px;
}
#handlersView {
height: 25em;
}
#handlersView > richlistitem {
min-height: 36px !important;
@@ -283,81 +355,117 @@ richlistitem[selected='true'] .category-
.actionsMenu > menupopup > menuitem {
padding-inline-start: 10px !important;
}
.actionsMenu > menupopup > menuitem > .menu-iconic-left {
margin-inline-end: 8px !important;
}
-/* Privacy pane */
+/* Search Pane */
+
+#defaultEngine {
+ margin-top: 2px;
+ margin-bottom: 6px;
+}
+
+#engineList {
+ margin: 2px 0 5px 0;
+}
+
+#engineList > treechildren::-moz-tree-image(engineShown, checked),
+#blocklistsTree > treechildren::-moz-tree-image(selectionCol, checked) {
+ list-style-image: url("chrome://global/skin/in-content/check.svg");
+ -moz-context-properties: fill, stroke;
+ fill: #2292d0;
+ stroke: none;
+ width: 21px;
+ height: 21px;
+}
+
+#engineList > treechildren::-moz-tree-image(engineShown, checked, selected),
+#blocklistsTree > treechildren::-moz-tree-image(selectionCol, checked, selected) {
+ fill: white;
+ stroke: #0095dd;
+}
+
+#engineList > treechildren::-moz-tree-row,
+#blocklistsTree > treechildren::-moz-tree-row {
+ min-height: 36px;
+}
+
+#selectionCol {
+ min-width: 26px;
+}
+
+#addEnginesBox {
+ margin: 4px 0 0 0;
+}
+
+/* Privacy Pane */
+
+#formAutofillGroup {
+ margin-top: 28px;
+}
.doNotTrackLearnMore {
margin-inline-start: calc(1em + 30px);
margin-bottom: 1em;
font-weight: normal;
}
.doNotTrackLearnMore > label {
font-size: 1em !important;
margin-left: 0;
}
+#locationBarGroup > .text-link {
+ margin-top: 6px;
+}
+
+#allowSmartSize {
+ margin-top: 0;
+ margin-bottom: 4px;
+}
+
#doNotTrackLearnMoreBox {
- margin-top: 30px
+ margin-top: 32px;
}
#trackingProtectionAdvancedSettings {
margin-inline-start: 15px;
}
+#historyPane {
+ margin-top: 4px;
+}
+
/* Collapse the non-active vboxes in decks to use only the height the
active vbox needs */
#historyPane:not([selectedIndex="1"]) > #historyDontRememberPane,
#historyPane:not([selectedIndex="2"]) > #historyCustomPane,
#weavePrefsDeck:not([selectedIndex="1"]) > #hasFxaAccount,
#fxaLoginStatus:not([selectedIndex="1"]) > #fxaLoginUnverified,
#fxaLoginStatus:not([selectedIndex="2"]) > #fxaLoginRejected {
visibility: collapse;
}
-/* XXX This style is for bug 740213 and should be removed once that
- bug has a solution. */
-description > html|a {
- cursor: pointer;
-}
-
-description > checkbox {
- vertical-align: middle;
-}
-
#weavePrefsDeck > vbox > label,
#weavePrefsDeck > vbox > groupbox,
#weavePrefsDeck > vbox > description,
#weavePrefsDeck > #hasFxaAccount > vbox > label,
#weavePrefsDeck > #hasFxaAccount > hbox > label {
/* no margin-inline-start for elements at the beginning of a line */
margin-inline-start: 0;
}
-groupbox {
- /* Give more available space for displaying tooltip on scrollable groupbox */
- margin-top: 15px !important;
-}
-
#tabsElement {
margin-inline-end: 4px; /* add the 4px end-margin of other elements */
}
-.indent {
- /* !important needed to override margin-inline-start:0 !important; rule
- define in common.css for labels */
- margin-inline-start: 33px !important;
-}
-
.text-link {
margin-bottom: 0;
}
#showUpdateHistory {
margin-inline-start: 0;
}
@@ -447,20 +555,21 @@ groupbox {
/**
* Sync
*/
#fxaProfileImage {
width: 60px;
height: 60px;
border-radius: 50%;
- list-style-image: url(chrome://browser/skin/fxa/default-avatar.svg);
+ list-style-image: url("chrome://browser/skin/preferences/in-content-new/fxa-avatar.svg");
margin-inline-end: 15px;
image-rendering: auto;
border: 1px solid transparent;
+ -moz-user-focus: normal;
}
#fxaLoginStatus[hasName] #fxaProfileImage {
width: 80px;
height: 80px;
}
#fxaProfileImage.actionable {
@@ -478,16 +587,21 @@ groupbox {
#noFxaAccount {
padding-top: 15px;
}
#fxaContentWrapper {
-moz-box-flex: 1;
}
+#useFirefoxSync {
+ font-size: 90%;
+ margin-inline-end: 8px !important;
+}
+
#noFxaGroup {
-moz-box-flex: 1;
margin: 0;
}
#fxaContentWrapper {
padding-right: 15px;
}
@@ -576,17 +690,17 @@ groupbox {
#fxaEmailAddress1,
#fxaEmailAddress2,
#fxaEmailAddress3 {
word-break: break-all;
}
.fxaFirefoxLogo {
- list-style-image: url(chrome://browser/skin/fxa/logo.png);
+ list-style-image: url("chrome://browser/skin/preferences/in-content-new/fxa-avatar.svg");
width: 64px;
height: 64px;
margin-inline-end: 14px;
}
.fxaMobilePromo {
line-height: 28px;
margin-bottom: 20px;
@@ -599,47 +713,35 @@ groupbox {
margin: 4px 8px 0px 0px;
}
#syncOptions {
margin-bottom: 27.5px;
}
.androidLink {
- list-style-image: url("chrome://browser/skin/fxa/android.png");
+ list-style-image: url("chrome://browser/skin/preferences/in-content-new/logo-android.svg");
}
.iOSLink {
- list-style-image: url("chrome://browser/skin/fxa/ios.png");
+ list-style-image: url("chrome://browser/skin/preferences/in-content-new/logo-ios.svg");
}
.androidLink,
.iOSLink {
- vertical-align: bottom;
- padding: 0 5px;
- height: 28px;
+ width: 20px;
+ height: 20px;
+ vertical-align: text-bottom;
}
#tosPP-small {
margin-top: 20px;
margin-bottom: 20px;
}
-@media (min-resolution: 1.1dppx) {
- .androidLink {
- list-style-image: url("chrome://browser/skin/fxa/android@2x.png");
- }
- .iOSLink {
- list-style-image: url("chrome://browser/skin/fxa/ios@2x.png");
- }
- .fxaFirefoxLogo {
- list-style-image: url(chrome://browser/skin/fxa/logo@2x.png);
- }
-}
-
#updateDeck > hbox > label {
margin-inline-end: 5px ! important;
}
.update-throbber {
width: 16px;
min-height: 16px;
margin-inline-end: 3px;
@@ -650,60 +752,71 @@ groupbox {
.update-throbber {
list-style-image: url("chrome://global/skin/icons/loading@2x.png");
}
}
.help-button {
position: fixed;
left: 0;
- /* Needs to have enough gap from the bottom to not
- get behind the status panel (bug 1357841). */
- bottom: 2rem;
+ bottom: 36px;
+ background-image: url("chrome://browser/skin/preferences/in-content-new/help.svg");
+ -moz-context-properties: fill, fill-opacity;
+ fill: currentColor;
+ fill-opacity: 0.8;
font-size: 13px;
- line-height: 13px;
- height: 14px;
- background-position: 15px;
- padding-inline-start: 35px;
+ line-height: 16px;
+ height: 16px;
+ background-position: 8px;
+ padding-inline-start: 38px;
+ margin-inline-start: 44px;
white-space: nowrap;
- fill: #0c0c0d;
- stroke: #0c0c0d;
}
.help-button:-moz-locale-dir(rtl) {
+ background-position: right 8px top 0;
left: auto;
right: 0;
- background-position: right 15px top 0;
+}
+
+.help-button:hover {
+ fill: currentColor;
+ fill-opacity: 0.9;
}
.help-button:link,
.help-button:visited {
- color: #0c0c0d !important;
- opacity: 0.8;
+ color: var(--in-content-category-text);
text-decoration: none;
}
-.help-button:hover {
- color: #0c0c0d !important;
- fill: #0c0c0d !important;
- stroke: #0c0c0d !important;
- stroke-opacity: 0!important;
- opacity: 0.9;
+.face-sad {
+ list-style-image: url("chrome://browser/skin/preferences/in-content-new/face-sad.svg");
+ width: 20px;
+ height: 20px;
+ margin-inline-end: 8px;
+}
+
+.face-smile {
+ list-style-image: url("chrome://browser/skin/preferences/in-content-new/face-smile.svg");
+ width: 20px;
+ height: 20px;
+ margin-inline-end: 8px;
}
.search-container {
position: sticky;
background-color: var(--in-content-page-background);
width: 100%;
top: 0;
z-index: 1;
}
#searchInput {
- width: 230px;
+ width: 250px;
margin: 20px 0;
}
#searchInput .textbox-search-icons:not([selectedIndex="1"]) {
display: none;
}
.search-tooltip {