Bug 1398050 - Polish preferences page to match visual spec.
* Remove transparency from the menu icons and labels in Normal state.
* Adding Firefox Support's hover state.
* Make the size of radio buttons as 20x20 px.
* Make minimum width of action buttons as 150px.
* Fix margin issues of When Nightly starts and Nightly Updates sections.
MozReview-Commit-ID: DHwdKTO1wxM
--- a/browser/components/preferences/in-content/main.xul
+++ b/browser/components/preferences/in-content/main.xul
@@ -428,16 +428,17 @@
<hbox id="browserContainersExtensionContent" align="center">
<description control="disableContainersExtension" flex="1" />
<button id="disableContainersExtension"
class="extension-controlled-button accessory-button"
label="&disableExtension.label;" />
</hbox>
<hbox align="center">
<checkbox id="browserContainersCheckbox"
+ class="tail-with-learn-more"
label="&browserContainersEnabled.label;"
accesskey="&browserContainersEnabled.accesskey;"
preference="privacy.userContext.enabled"
onsyncfrompreference="return gMainPane.readBrowserContainersCheckbox();"/>
<label id="browserContainersLearnMore" class="learnMore text-link">
&browserContainersLearnMore.label;
</label>
<spacer flex="1"/>
@@ -732,17 +733,17 @@
<columns>
<column flex="1"/>
<column/>
</columns>
<rows id="contentRows-2">
<row id="playDRMContentRow">
<hbox align="center">
<checkbox id="playDRMContent" preference="media.eme.enabled"
- label="&playDRMContent2.label;" accesskey="&playDRMContent2.accesskey;"/>
+ class="tail-with-learn-more" label="&playDRMContent2.label;" accesskey="&playDRMContent2.accesskey;"/>
<label id="playDRMContentLink" class="learnMore text-link">
&playDRMContent.learnMore.label;
</label>
</hbox>
</row>
</rows>
</grid>
</groupbox>
@@ -759,20 +760,20 @@
<label class="header-name" flex="1">&updateApplication.label;</label>
</hbox>
<!-- Update -->
<groupbox id="updateApp" data-category="paneGeneral" hidden="true">
<caption class="search-header" hidden="true"><label>&updateApplication.label;</label></caption>
<label>&updateApplicationDescription.label;</label>
- <hbox align="start">
+ <hbox align="center">
<vbox flex="1">
<description>
- &updateApplication.version.pre;<label id="version"/>&updateApplication.version.post;
+ &updateApplication.version.pre;<label id="version" class="tail-with-learn-more" />&updateApplication.version.post;
<label id="releasenotes" class="learnMore text-link" hidden="true">&releaseNotes.link;</label>
</description>
<description id="distribution" class="text-blurb" hidden="true"/>
<description id="distributionId" class="text-blurb" hidden="true"/>
</vbox>
#ifdef MOZ_UPDATER
<spacer flex="1"/>
<!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
@@ -916,16 +917,17 @@
</hbox>
<!-- Performance -->
<groupbox id="performanceGroup" data-category="paneGeneral" hidden="true">
<caption class="search-header" hidden="true"><label>&performance.label;</label></caption>
<hbox align="center">
<checkbox id="useRecommendedPerformanceSettings"
+ class="tail-with-learn-more"
label="&useRecommendedPerformanceSettings2.label;"
accesskey="&useRecommendedPerformanceSettings2.accesskey;"
preference="browser.preferences.defaultPerformanceSettings.enabled"/>
<label id="performanceSettingsLearnMore" class="learnMore text-link">&performanceSettingsLearnMore.label;</label>
</hbox>
<description class="indent tip-caption">&useRecommendedPerformanceSettings2.description;</description>
<vbox id="performanceSettings" class="indent" hidden="true">
--- a/browser/components/preferences/in-content/privacy.xul
+++ b/browser/components/preferences/in-content/privacy.xul
@@ -267,38 +267,35 @@
</hbox>
<label>&historyHeader.post.label;</label>
</hbox>
<deck id="historyPane">
<vbox id="historyRememberPane">
<hbox align="center" flex="1">
<vbox flex="1">
<description>&rememberDescription.label;</description>
- <separator class="thin"/>
<description>&rememberActions.pre.label;<label
class="text-link" id="historyRememberClear"
>&rememberActions.clearHistory.label;</label>&rememberActions.middle.label;<label
class="text-link" id="historyRememberCookies"
>&rememberActions.removeCookies.label;</label>&rememberActions.post.label;</description>
</vbox>
</hbox>
</vbox>
<vbox id="historyDontRememberPane">
<hbox align="center" flex="1">
<vbox flex="1">
<description>&dontrememberDescription.label;</description>
- <separator class="thin"/>
<description>&dontrememberActions.pre.label;<label
class="text-link" id="historyDontRememberClear"
>&dontrememberActions.clearHistory.label;</label>&dontrememberActions.post.label;</description>
</vbox>
</hbox>
</vbox>
<vbox id="historyCustomPane">
- <separator class="thin"/>
<vbox>
<checkbox id="privateBrowsingAutoStart"
label="&privateBrowsingPermanent2.label;"
accesskey="&privateBrowsingPermanent2.accesskey;"
preference="browser.privatebrowsing.autostart"/>
<vbox class="indent">
<checkbox id="rememberHistory"
label="&rememberHistory2.label;"
@@ -455,17 +452,17 @@
<!-- Site Data -->
<groupbox id="siteDataGroup" hidden="true" data-category="panePrivacy" data-hidden-from-search="true">
<caption><label>&siteData.label;</label></caption>
<hbox align="baseline">
<vbox flex="1">
<description flex="1">
- <label id="totalSiteDataSize"></label>
+ <label id="totalSiteDataSize" class="tail-with-learn-more"></label>
<label id="siteDataLearnMoreLink" class="learnMore text-link">&siteDataLearnMoreLink.label;</label>
</description>
</vbox>
<vbox align="end">
<button id="siteDataSettings"
class="accessory-button"
label="&siteDataSettings.label;"
accesskey="&siteDataSettings.accesskey;"
@@ -492,17 +489,17 @@
</description>
</vbox>
<spacer flex="1"/>
</hbox>
<hbox>
<vbox id="trackingProtectionBox" flex="1" hidden="true">
<description id="trackingProtectionDesc"
control="trackingProtectionRadioGroup">
- &trackingProtection2.radioGroupLabel;
+ <label class="tail-with-learn-more">&trackingProtection2.radioGroupLabel;</label>
<label id="trackingProtectionLearnMore" class="learnMore text-link">&trackingProtectionLearnMore.label;</label>
</description>
<radiogroup id="trackingProtectionRadioGroup" aria-labelledby="trackingProtectionDesc">
<radio value="always"
label="&trackingProtectionAlways.label;"
accesskey="&trackingProtectionAlways.accesskey;"/>
<radio value="private"
label="&trackingProtectionPrivate.label;"
@@ -545,17 +542,17 @@
label="&changeBlockList2.label;"
accesskey="&changeBlockList2.accesskey;"
preference="pref.privacy.disable_button.change_blocklist"
searchkeywords="&button.cancel.label; &button.ok.label;"/>
</hbox>
</vbox>
</hbox>
<vbox id="doNotTrackLearnMoreBox">
- <label>&doNotTrack.description;<label
+ <label><label class="tail-with-learn-more">&doNotTrack.description;</label><label
class="learnMore text-link" href="https://www.mozilla.org/dnt"
>&doNotTrack.learnMore.label;</label></label>
<radiogroup id="doNotTrackRadioGroup" aria-labelledby="doNotTrackDesc" preference="privacy.donottrackheader.enabled">
<radio value="false" label="&doNotTrack.default.label;"/>
<radio value="true" label="&doNotTrack.always.label;"/>
</radiogroup>
</vbox>
</vbox>
@@ -631,17 +628,17 @@
&button.ok.label;"/>
</hbox>
</row>
<row id="notificationSettingsRow" align="center">
<description flex="1">
<image class="desktop-notification-icon permission-icon" />
<separator orient="vertical" class="thin"/>
- <label id="notificationPermissionsLabel">¬ificationPermissions.label;</label>
+ <label id="notificationPermissionsLabel" class="tail-with-learn-more">¬ificationPermissions.label;</label>
<label id="notificationPermissionsLearnMore"
class="learnMore text-link">¬ificationPermissionsLearnMore.label;</label>
</description>
<hbox pack="end">
<button id="notificationSettingsButton"
class="accessory-button"
label="¬ificationSettingsButton.label;"
accesskey="¬ificationSettingsButton.accesskey;"
@@ -654,18 +651,18 @@
</rows>
</grid>
<separator flex="1"/>
<vbox id="notificationsDoNotDisturbBox" hidden="true">
<checkbox id="notificationsDoNotDisturb" label="¬ificationsDoNotDisturb.label;"
accesskey="¬ificationsDoNotDisturb.accesskey;"/>
- <label id="notificationsDoNotDisturbDetails"
- class="indent">¬ificationsDoNotDisturbDetails.value;</label>
+ <description id="notificationsDoNotDisturbDetails"
+ class="indent tip-caption">¬ificationsDoNotDisturbDetails.value;</description>
</vbox>
<hbox align="start">
<checkbox id="popupPolicy" preference="dom.disable_open_during_load"
label="&blockPopups.label;" accesskey="&blockPopups.accesskey;"
onsyncfrompreference="return gPrivacyPane.updateButtons('popupPolicyButton',
'dom.disable_open_during_load');"
flex="1" />
@@ -697,23 +694,24 @@
&removepermission2.label;
&removeallpermissions2.label;
&button.cancel.label;
&button.ok.label;"/>
</hbox>
</hbox>
<vbox id="a11yPermissionsBox">
- <description flex="1">
- <checkbox id="a11yPrivacyCheckbox" label="&a11yPrivacy.checkbox.label;"
+ <hbox flex="1" align="center">
+ <checkbox id="a11yPrivacyCheckbox" class="tail-with-learn-more"
+ label="&a11yPrivacy.checkbox.label;"
accesskey="&a11yPrivacy.checkbox.accesskey;"
oncommand="return gPrivacyPane.updateA11yPrefs(this.checked)"/>
<label id="a11yLearnMoreLink" class="learnMore text-link"
value="&a11yPrivacy.learnmore.label;"></label>
- </description>
+ </hbox>
</vbox>
</groupbox>
<hbox id="dataCollectionCategory"
class="subcategory"
hidden="true"
data-category="panePrivacy"
data-subcategory="reports">
@@ -722,31 +720,33 @@
<!-- Firefox Data Collection and Use -->
#ifdef MOZ_DATA_REPORTING
<groupbox id="dataCollectionGroup" data-category="panePrivacy" data-subcategory="reports" hidden="true">
<caption class="search-header" hidden="true"><label>&dataCollection.label;</label></caption>
<vbox>
<description>
- &dataCollectionDesc.label;<label id="dataCollectionPrivacyNotice" class="learnMore text-link">&dataCollectionPrivacyNotice.label;</label>
+ <label class="tail-with-learn-more">&dataCollectionDesc.label;</label><label id="dataCollectionPrivacyNotice" class="learnMore text-link">&dataCollectionPrivacyNotice.label;</label>
</description>
<description flex="1">
<checkbox id="submitHealthReportBox" label="&enableHealthReport2.label;"
+ class="tail-with-learn-more"
accesskey="&enableHealthReport2.accesskey;"/>
<label id="FHRLearnMore"
class="learnMore text-link">&healthReportLearnMore.label;</label>
</description>
#ifndef MOZ_TELEMETRY_REPORTING
<description id="TelemetryDisabledDesc" class="indent tip-caption" control="telemetryGroup">&healthReportingDisabled.label;</description>
#endif
</vbox>
#ifdef MOZ_CRASHREPORTER
<hbox align="center">
<checkbox id="automaticallySubmitCrashesBox"
+ class="tail-with-learn-more"
preference="browser.crashReports.unsubmittedCheck.autoSubmit"
label="&alwaysSubmitCrashReports1.label;"
accesskey="&alwaysSubmitCrashReports1.accesskey;"/>
<label id="crashReporterLearnMore"
class="learnMore text-link">&crashReporterLearnMore.label;</label>
</hbox>
#endif
</groupbox>
@@ -760,16 +760,17 @@
</hbox>
<!-- addons, forgery (phishing) UI Security -->
<groupbox id="browsingProtectionGroup" data-category="panePrivacy" hidden="true">
<caption><label>&browsingProtection.label;</label></caption>
<hbox align = "center">
<checkbox id="enableSafeBrowsing"
label="&enableSafeBrowsing.label;"
+ class="tail-with-learn-more"
accesskey="&enableSafeBrowsing.accesskey;" />
<label id="enableSafeBrowsingLearnMore"
class="learnMore text-link">&enableSafeBrowsingLearnMore.label;</label>
</hbox>
<vbox class="indent">
#ifdef MOZILLA_OFFICIAL
<checkbox id="blockDownloads"
label="&blockDownloads.label;"
--- a/browser/extensions/formautofill/FormAutofillPreferences.jsm
+++ b/browser/extensions/formautofill/FormAutofillPreferences.jsm
@@ -75,16 +75,17 @@ FormAutofillPreferences.prototype = {
let addressAutofillCheckbox = document.createElementNS(XUL_NS, "checkbox");
let addressAutofillLearnMore = document.createElementNS(XUL_NS, "label");
let savedAddressesBtn = document.createElementNS(XUL_NS, "button");
// Wrappers are used to properly compute the search tooltip positions
let savedAddressesBtnWrapper = document.createElementNS(XUL_NS, "hbox");
let savedCreditCardsBtnWrapper = document.createElementNS(XUL_NS, "hbox");
savedAddressesBtn.className = "accessory-button";
+ addressAutofillCheckbox.className = "tail-with-learn-more";
addressAutofillLearnMore.className = "learnMore text-link";
formAutofillGroup.id = "formAutofillGroup";
addressAutofill.id = "addressAutofill";
addressAutofillLearnMore.id = "addressAutofillLearnMore";
addressAutofillLearnMore.setAttribute("value", this.bundle.GetStringFromName("learnMore"));
addressAutofillCheckbox.setAttribute("label", this.bundle.GetStringFromName("enableAddressAutofill"));
@@ -118,16 +119,17 @@ FormAutofillPreferences.prototype = {
if (FormAutofillUtils.isAutofillCreditCardsAvailable) {
let creditCardAutofill = document.createElementNS(XUL_NS, "hbox");
let creditCardAutofillCheckboxGroup = document.createElementNS(XUL_NS, "description");
let creditCardAutofillCheckbox = document.createElementNS(XUL_NS, "checkbox");
let creditCardAutofillLearnMore = document.createElementNS(XUL_NS, "label");
let savedCreditCardsBtn = document.createElementNS(XUL_NS, "button");
savedCreditCardsBtn.className = "accessory-button";
+ creditCardAutofillCheckbox.className = "tail-with-learn-more";
creditCardAutofillLearnMore.className = "learnMore text-link";
creditCardAutofill.id = "creditCardAutofill";
creditCardAutofillLearnMore.id = "creditCardAutofillLearnMore";
creditCardAutofillLearnMore.setAttribute("value", this.bundle.GetStringFromName("learnMore"));
creditCardAutofillCheckbox.setAttribute("label", this.bundle.GetStringFromName("enableCreditCardAutofill"));
savedCreditCardsBtn.setAttribute("label", this.bundle.GetStringFromName("savedCreditCards"));
--- a/browser/extensions/shield-recipe-client/lib/ShieldPreferences.jsm
+++ b/browser/extensions/shield-recipe-client/lib/ShieldPreferences.jsm
@@ -101,16 +101,17 @@ this.ShieldPreferences = {
container.classList.add("indent");
const hContainer = doc.createElementNS(XUL_NS, "hbox");
hContainer.setAttribute("align", "center");
container.appendChild(hContainer);
const checkbox = doc.createElementNS(XUL_NS, "checkbox");
checkbox.setAttribute("id", "optOutStudiesEnabled");
+ checkbox.setAttribute("class", "tail-with-learn-more");
checkbox.setAttribute("label", "Allow Firefox to install and run studies");
checkbox.setAttribute("preference", OPT_OUT_STUDIES_ENABLED_PREF);
checkbox.setAttribute("disabled", !Services.prefs.getBoolPref(FHR_UPLOAD_ENABLED_PREF));
hContainer.appendChild(checkbox);
const viewStudies = doc.createElementNS(XUL_NS, "label");
viewStudies.setAttribute("id", "viewShieldStudies");
viewStudies.setAttribute("href", "about:studies");
--- a/browser/themes/linux/preferences/in-content/preferences.css
+++ b/browser/themes/linux/preferences/in-content/preferences.css
@@ -40,12 +40,11 @@ caption > label:not(.dialogTitle) {
margin-top: 2px !important;
}
menulist.actionsMenu > .menulist-dropmarker {
margin-top: 11px;
margin-bottom: 11px;
}
-textbox + button,
filefield + button {
margin-inline-start: -4px;
}
--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -25,17 +25,17 @@
#mainPrefPane {
width: 100%;
padding: 0;
font: message-box;
color: currentColor;
}
-groupbox + groupbox {
+prefpane > groupbox + groupbox {
margin-top: 16px;
}
groupbox + groupbox > .groupbox-body,
groupbox + vbox groupbox > .groupbox-body {
margin-top: 4px;
}
@@ -57,43 +57,46 @@ html|option {
description,
label {
line-height: 30px;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
-description > checkbox {
- vertical-align: bottom;
+menuitem > label,
+button > hbox > label {
+ line-height: unset;
}
.indent {
margin-inline-start: 28px !important;
}
-separator.thin:not([orient="vertical"]) {
- height: 8px;
-}
-
.checkbox-check {
margin-inline-end: 8px;
width: 20px;
height: 20px;
}
+.tail-with-learn-more {
+ margin-inline-start: 0px;
+ margin-inline-end: 10px;
+}
+
.learnMore {
- margin-inline-start: 10px;
+ margin-inline-start: 0px;
font-weight: normal;
white-space: nowrap;
}
.accessory-button {
- min-width: 145px;
- margin: 2px 0;
+ height: 30px;
+ min-width: 150px;
+ margin: 4px 0;
}
#searchInput {
border-radius: 0;
}
/* Subcategory title */
@@ -144,16 +147,17 @@ separator.thin:not([orient="vertical"])
#startupPageBox {
padding-top: 32px;
}
#browserHomePage {
margin-inline-start: 0;
margin-inline-end: 0;
+ margin-bottom: 4px;
}
.homepage-button:first-of-type {
margin-inline-start: 0;
}
.homepage-button:last-of-type {
margin-inline-end: 0;
@@ -185,17 +189,17 @@ separator.thin:not([orient="vertical"])
}
#updateApp > .groupbox-body > description {
line-height: 30px;
margin: 0;
}
#updateBox {
- margin-top: 8px;
+ margin-top: 4px;
margin-bottom: 32px;
}
#updateDeck > hbox > button {
margin-top: 0;
margin-bottom: 0;
margin-inline-end: 0;
}
@@ -203,17 +207,18 @@ separator.thin:not([orient="vertical"])
#updateDeck > hbox > label {
-moz-box-flex: 1;
}
#manualLink {
margin-inline-start: 6px !important;
}
-#updateRadioGroup > radio {
+#updateRadioGroup > radio,
+#browserStartupPage > radio {
height: 30px;
margin: 2px 0;
}
#filter {
margin: 4px 0 8px 0;
}
@@ -252,21 +257,16 @@ separator.thin:not([orient="vertical"])
}
.actionsMenu > menupopup > menuitem > .menu-iconic-left {
margin-inline-end: 8px !important;
}
/* 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;
@@ -489,19 +489,23 @@ separator.thin:not([orient="vertical"])
}
#fxaNoLoginStatus {
margin-top: 46px;
margin-bottom: 64px;
}
#fxaSyncComputerName {
- margin-top: 3px;
margin-inline-start: 0;
- margin-bottom: 0;
+ margin-bottom: 4px;
+}
+
+#fxaChangeDeviceName {
+ margin-top: 4px;
+ margin-bottom: 4px;
}
#tosPP-small-ToS {
margin-bottom: 14px;
}
#noFxaCaption {
line-height: 30px;
@@ -670,17 +674,17 @@ separator.thin:not([orient="vertical"])
.search-tooltip {
font-size: 1.25rem;
position: absolute;
padding: 0 10px;
background-color: #ffe900;
border: 1px solid #d7b600;
-moz-user-select: none;
- bottom: 35px;
+ bottom: 36px;
}
.search-tooltip:hover,
.search-tooltip:hover::before {
opacity: .1;
}
.search-tooltip::before {
@@ -704,16 +708,22 @@ separator.thin:not([orient="vertical"])
.search-tooltip-parent {
position: relative;
}
.visually-hidden {
visibility: hidden;
}
+menulist {
+ height: 30px;
+ margin-top: 4px;
+ margin-bottom: 4px;
+}
+
menulist[indicator=true] > menupopup menuitem:not([image]) > .menu-iconic-left {
display: -moz-box;
min-width: auto; /* Override the min-width defined in menu.css */
margin-inline-end: 6px;
}
menulist[indicator=true] > menupopup menuitem:not([image]) > .menu-iconic-left > .menu-iconic-icon {
width: 8px;
--- a/browser/themes/windows/preferences/in-content/preferences.css
+++ b/browser/themes/windows/preferences/in-content/preferences.css
@@ -18,14 +18,13 @@ caption > label:not(.dialogTitle) {
.help-button {
font-size: 1.08rem;
}
.actionsMenu > .menulist-label-box > .menulist-icon {
margin-inline-end: 9px;
}
-textbox + button,
filefield + button {
margin-inline-start: -4px;
margin-top: 4px;
margin-bottom: 4px;
}
--- a/toolkit/themes/linux/global/in-content/common.css
+++ b/toolkit/themes/linux/global/in-content/common.css
@@ -7,23 +7,16 @@
xul|tab[visuallyselected] {
/* Override styles for tab[selected] from
toolkit/themes/linux/global/tabbox.css */
margin-bottom: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
-xul|button,
-html|button,
-xul|colorpicker[type="button"],
-xul|menulist {
- margin: 2px 4px;
-}
-
xul|button:-moz-focusring {
outline: 1px dotted;
outline-offset: -2px;
}
xul|button > xul|*.button-box,
xul|menulist > xul|*.menulist-label-box {
-moz-appearance: none;
--- a/toolkit/themes/osx/global/in-content/common.css
+++ b/toolkit/themes/osx/global/in-content/common.css
@@ -9,23 +9,16 @@ xul|tabs {
padding-right: 0;
padding-left: 0;
}
xul|tab[visuallyselected] {
text-shadow: none;
}
-xul|button,
-html|button {
- /* use the same margin of other elements for the alignment */
- margin-left: 4px;
- margin-right: 4px;
-}
-
xul|button[dlgtype="help"] {
-moz-appearance: none;
width: auto;
}
xul|caption {
padding-inline-start: 0;
}
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -17,17 +17,17 @@
--in-content-box-background-active: #dadada;
--in-content-box-border-color: #d7d7db;
--in-content-item-hover: rgba(0,149,221,0.25);
--in-content-item-selected: #0a84ff;
--in-content-border-highlight: #0a84ff;
--in-content-border-focus: #0a84ff;
--in-content-border-color: #d7d7db;
--in-content-category-border-focus: 1px dotted #0a84ff;
- --in-content-category-text: rgba(12,12,13,0.8);
+ --in-content-category-text: rgba(12,12,13);
--in-content-category-text-active: #0c0c0d;
--in-content-category-text-selected: #0a84ff;
--in-content-category-text-selected-active: #0060df;
--in-content-category-background-hover: rgba(12,12,13,0.1);
--in-content-category-background-active: rgba(12,12,13,0.15);
--in-content-category-background-selected-hover: rgba(12,12,13,0.15);
--in-content-category-background-selected-active: rgba(12,12,13,0.2);
--in-content-tab-color: #424f5a;
@@ -106,17 +106,17 @@ xul|groupbox {
padding: 0;
font-size: 1.25rem;
}
xul|groupbox > xul|caption {
padding: 4px 0;
}
-xul|groupbox xul|label:not(.menu-accel):not(.menu-text):not(.indent):not(.learnMore),
+xul|groupbox xul|label:not(.menu-accel):not(.menu-text):not(.indent):not(.learnMore):not(.tail-with-learn-more),
xul|groupbox xul|description {
/* !important needed to override toolkit !important rule */
margin-inline-start: 0 !important;
margin-inline-end: 0 !important;
}
/* tabpanels and tabs */
@@ -187,17 +187,24 @@ xul|menulist {
color: var(--in-content-text-color);
border: 1px solid var(--in-content-box-border-color);
-moz-border-top-colors: none !important;
-moz-border-right-colors: none !important;
-moz-border-bottom-colors: none !important;
-moz-border-left-colors: none !important;
border-radius: 2px;
background-color: var(--in-content-page-background);
- margin: 0 8px;
+ margin: 4px 8px;
+}
+
+xul|button,
+html|button {
+ /* use the same margin of other elements for the alignment */
+ margin-left: 4px;
+ margin-right: 4px;
}
html|select:not([size]):not([multiple]) {
background-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown");
background-position: right 3px center;
background-repeat: no-repeat;
background-size: auto 18px;
font-size: inherit;
@@ -336,21 +343,22 @@ html|*.help-button {
background-position: center center;
background-size: contain;
}
html|*.help-button:hover {
fill: white;
stroke: #808080;
stroke-opacity: 1;
- background-color: var(--in-content-category-hover);
+ background-color: var(--in-content-category-background-hover);
}
html|*.help-button:hover:active {
stroke: #666;
+ background-color: var(--in-content-category-background-active);
}
xul|*.spinbuttons-button {
min-height: initial;
margin-inline-start: 10px !important;
margin-inline-end: 2px !important;
}
@@ -600,18 +608,18 @@ html|*.toggle-container-with-text {
xul|radio {
margin-inline-start: 0;
-moz-appearance: none;
}
xul|*.radio-check {
-moz-appearance: none;
- width: 23px;
- height: 23px;
+ width: 20px;
+ height: 20px;
border: 1px solid var(--in-content-box-border-color);
border-radius: 50%;
margin-inline-end: 10px;
background-color: #f1f1f1;
background-image: linear-gradient(#fff, rgba(255,255,255,0.80));
box-shadow: 0 1px 1px 0 #fff, inset 0 2px 0 0 rgba(0,0,0,0.03);
}
@@ -695,17 +703,16 @@ xul|*.radio-label-box {
-moz-user-select: none;
}
*|*.category-icon {
width: 24px;
height: 24px;
-moz-context-properties: fill, fill-opacity;
fill: currentColor;
- fill-opacity: 0.8;
}
*|*.category[selected] > *|*.category-icon,
*|*.category.selected > *|*.category-icon {
fill-opacity: 1;
}
@media (max-width: 830px) {
--- a/toolkit/themes/windows/global/in-content/common.css
+++ b/toolkit/themes/windows/global/in-content/common.css
@@ -3,23 +3,16 @@
- You can obtain one at http://mozilla.org/MPL/2.0/. */
%include ../../../shared/in-content/common.inc.css
xul|caption {
background-color: transparent;
}
-xul|button,
-html|button,
-xul|colorpicker[type="button"],
-xul|menulist {
- margin: 2px 4px;
-}
-
xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker {
margin-top: 1px;
margin-bottom: 1px;
}
xul|checkbox {
padding-inline-start: 0;
}