--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -110,35 +110,22 @@ caption > label {
.subcategory {
margin-top: 48px;
}
/* Category List */
#categories {
max-height: 100vh;
- background-color: #fafafc;
}
#categories > scrollbox {
overflow-x: hidden !important;
}
-.category-name {
- font-size: 1.45rem;
-}
-
-.category,
-.category:hover,
-.category[selected] {
- background-color: transparent;
- border-inline-start: initial;
- padding-inline-start: 44px;
-}
-
/**
* 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;
--- a/devtools/client/themes/images/debugging-addons.svg
+++ b/devtools/client/themes/images/debugging-addons.svg
@@ -1,6 +1,6 @@
<!-- 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 height="16" width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" fill="#fbfbfb">
- <path d="M12,17c0.5,0,1-0.5,1-1v-4c0,0,0.2-0.8,0.8-0.8c0.6,0,0.6,0.8,1.8,0.8 c0.6,0,1.5-0.2,1.5-2c0-1.8-0.9-2-1.5-2c-1.1,0-1.2,0.8-1.8,0.8C13.2,8.8,13,8,13,8V6c0-0.6-0.4-1-1-1H9c0,0-0.8-0.1-0.8-0.8 S9,3.6,9,2.5C9,1.9,8.8,1,7,1S5,1.9,5,2.5c0,1.1,0.8,1.2,0.8,1.8S5,5,5,5H2C1.4,5,1,5.4,1,6l0,2.5c0,0-0.1,1.5,1.1,1.5 c0.8,0,0.9-1,1.9-1c0.5,0,1,0.5,1,1.6c0,1-0.5,1.6-1,1.6c-1,0-1.1-1-1.9-1C0.9,11,1,12.5,1,12.5L1,16c0,0.6,0.4,1,1,1h3.9 c0,0,1.5,0.1,1.5-1.1c0-0.8-1-0.9-1-1.9c0-0.5,0.7-1.2,1.8-1.2s1.9,0.7,1.9,1.2c0,1-1,1.1-1,1.9c0,1.2,1.5,1.1,1.5,1.1H12z" />
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path fill="context-fill" d="M14.5 8c-.971 0-1 1-1.75 1a.765.765 0 0 1-.75-.75V5a1 1 0 0 0-1-1H7.75A.765.765 0 0 1 7 3.25c0-.75 1-.779 1-1.75C8 .635 7.1 0 6 0S4 .635 4 1.5c0 .971 1 1 1 1.75a.765.765 0 0 1-.75.75H1a1 1 0 0 0-1 1v2.25A.765.765 0 0 0 .75 8c.75 0 .779-1 1.75-1C3.365 7 4 7.9 4 9s-.635 2-1.5 2c-.971 0-1-1-1.75-1a.765.765 0 0 0-.75.75V15a1 1 0 0 0 1 1h3.25a.765.765 0 0 0 .75-.75c0-.75-1-.779-1-1.75 0-.865.9-1.5 2-1.5s2 .635 2 1.5c0 .971-1 1-1 1.75a.765.765 0 0 0 .75.75H11a1 1 0 0 0 1-1v-3.25a.765.765 0 0 1 .75-.75c.75 0 .779 1 1.75 1 .865 0 1.5-.9 1.5-2s-.635-2-1.5-2z"></path>
</svg>
--- a/devtools/client/themes/images/debugging-tabs.svg
+++ b/devtools/client/themes/images/debugging-tabs.svg
@@ -1,3 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
- <path d="M17,12v2a1,1,0,0,1-1,1H2a1,1,0,0,1-1-1V12a1,1,0,0,1,1-1H1.142c2.3,0,2.536-1.773,2.874-4,0.351-2.316.083-4,3.13-4h3.707C13.917,3,13.647,4.684,14,7c0.34,2.228.582,4,2.89,4H16A1,1,0,0,1,17,12Z" fill="white"/>
+<!-- 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="16" height="16">
+ <path fill="context-fill" d="M15 11h-1V5a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v6H1a1 1 0 0 0 0 2h14a1 1 0 1 0 0-2z"></path>
</svg>
--- a/devtools/client/themes/images/debugging-workers.svg
+++ b/devtools/client/themes/images/debugging-workers.svg
@@ -1,11 +1,11 @@
<!-- 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 height="16" width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#fbfbfb">
+<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill">
<path d="M14.6,6.1L13.5,5l0,0c0.1-0.1,0.2-0.4,0.2-0.6c0-0.2-0.1-0.4-0.2-0.6l-0.4-0.4c-0.3-0.3-0.8-0.3-1.1,0l0,0
L10.5,2c-0.2-0.2-0.3-0.2-0.5-0.2c-0.2,0-0.3,0.1-0.5,0.2L8.3,3.2C8.1,3.3,8.1,3.4,8.1,3.6S8.2,4,8.3,4.1l1.6,1.6L7.8,7.8L5.6,5.7
l1.5-1.5C7.3,4,7.4,3.8,7.4,3.6c0-0.2-0.1-0.4-0.2-0.6l-1-1C5.8,1.7,5.3,1.7,5,2L0.9,6.1C0.7,6.3,0.6,6.5,0.6,6.7
c0,0.2,0.1,0.4,0.2,0.6l1,1c0.3,0.3,0.9,0.3,1.2,0l1.4-1.4l2,2.1l-3.4,3.3c-0.3,0.3-0.3,0.8,0,1.1l0.3,0.3c0.3,0.3,0.8,0.3,1.1,0
l3.3-3.4l3.3,3.4c0.1,0.1,0.3,0.2,0.6,0.2c0.2,0,0.4-0.1,0.6-0.2l0.3-0.3c0.3-0.3,0.3-0.8,0-1.1L9,9l2-2.1l1.4,1.4
c0.1,0.1,2.3,1.1,2.7,0.7C15.5,8.6,14.8,6.3,14.6,6.1z"/>
</svg>
--- a/toolkit/themes/shared/extensions/extensions.inc.css
+++ b/toolkit/themes/shared/extensions/extensions.inc.css
@@ -6,17 +6,16 @@
@import url("chrome://global/skin/in-content/common.css");
.main-content {
padding: 0;
}
#nav-header {
min-height: 39px;
- background-color: #424f5a;
}
.view-pane > .list > scrollbox {
padding-right: 48px;
padding-left: 48px;
}
@@ -34,17 +33,17 @@
}
#addons-page[warning] .global-warning-container {
background-image: linear-gradient(transparent, rgba(255, 255, 0, 0.1));
}
#detail-view .global-warning {
padding: 4px 12px;
- border-bottom: 1px solid #c1c1c1;
+ border-bottom: 1px solid var(--in-content-border-color);
}
@media (max-width: 600px) {
.global-warning-text {
display: none;
}
.global-warning .warning-icon {
@@ -108,18 +107,18 @@
.alert-spacer-after {
-moz-box-flex: 3;
}
.alert {
-moz-box-align: center;
padding: 10px;
- color: #333;
- border: 1px solid #c1c1c1;
+ color: var(--in-content-text-color);
+ border: 1px solid var(--in-content-box-border-color);
border-radius: 2px;
background-color: #ebebeb;
}
.alert .alert-title {
font-weight: bold;
font-size: 200%;
margin-bottom: 15px;
@@ -149,17 +148,17 @@ button.warning {
/*** category selector ***/
#categories {
padding-top: 0;
}
.category[selected="true"]:hover {
- background-color:#1A2533;
+ color: #0060df;
}
.category[disabled] {
overflow: hidden;
height: 0;
min-height: 0;
opacity: 0;
transition-property: min-height, opacity;
@@ -244,24 +243,24 @@ button.warning {
@media (max-width: 600px) {
#header-search {
width: 12em;
}
}
.view-header {
margin: 0 48px;
- border-bottom: 1px solid #c1c1c1;
+ border-bottom: 1px solid var(--in-content-box-border-color);
}
#header-utils-btn {
height: 30px;
line-height: 20px;
- border-color: #c1c1c1;
- background-color: #fbfbfb;
+ border-color: var(--in-content-box-border-color);
+ background-color: var(--in-content-page-background);
padding-right: 10px;
padding-left: 10px;
}
#header-utils-btn:not([disabled="true"]):active:hover,
#header-utils-btn[open="true"] {
padding-bottom: 0px;
padding-top: 0px;
@@ -330,17 +329,17 @@ button.warning {
.sorter .button-box {
padding-top: 0;
padding-bottom: 0;
}
.sorter[checkState="1"],
.sorter[checkState="2"] {
background-color: #ebebeb;
- box-shadow: 0 -4px 0 0 #ff9500 inset;
+ box-shadow: 0 -4px 0 0 var(--in-content-border-highlight) inset;
}
.sorter .button-icon {
margin-inline-start: 6px;
}
/*** discover view ***/
@@ -386,22 +385,22 @@ button.warning {
background-color: transparent;
}
.list > scrollbox > .scrollbox-innerbox {
border: 1px dotted transparent;
}
.list:-moz-focusring > scrollbox > .scrollbox-innerbox {
- border-color: #0095dd;
+ border-color: var(--in-content-border-focus);
}
.addon {
color: #444;
- border-bottom: 1px solid #c1c1c1;
+ border-bottom: 1px solid var(--in-content-box-border-color);
padding: 5px;
background-origin: border-box;
}
.addon:not(:only-child):last-child {
border-bottom-width: 0;
}
@@ -617,20 +616,20 @@ button.warning {
}
.addon-view[pending="disable"],
.addon-view[pending="uninstall"] {
--view-highlight-color: #F2F2F2;
}
.addon[selected] {
- background-color: #fafafa;
- color: #333;
+ background-color: var(--in-content-page-background);
+ color: var(--in-content-page-color);
padding-inline-start: 1px; /* compensate the 4px border */
- border-inline-start: solid 4px #ff9500;
+ border-inline-start: solid 4px var(--in-content-border-focus);
}
#addon-list .addon[active="false"] > .content-container > .content-inner-container {
color: #999;
}
#addon-list .addon[active="false"][selected] > .content-container > .content-inner-container {
color: #777;
@@ -798,33 +797,31 @@ button.warning {
#detail-contrib-suggested {
color: grey;
font-weight: bold;
}
#detail-contrib-btn {
color: #FFF;
text-shadow: none;
- border: 1px solid #0095dd;
+ border: 1px solid transparent;
list-style-image: url("chrome://mozapps/skin/extensions/heart.png");
- background-color: #0095dd;
+ background-color: var(--in-content-primary-button-background);
}
#detail-contrib-btn .button-icon {
margin-inline-end: 5px;
}
#detail-contrib-btn:not(:active):hover {
- border-color: #008acb;
- background-color: #008acb;
+ background-color: var(--in-content-primary-button-background-hover);
}
#detail-contrib-btn:active:hover {
- background-color: #006b9d;
- border-color: #006b9d;
+ background-color: var(--in-content-primary-button-background-active);
}
#detail-grid {
margin-bottom: 2em;
}
#detail-grid > columns > column:first-child {
min-width: 15em;
@@ -835,17 +832,17 @@ button.warning {
.detail-row-complex[first-row="true"],
setting[first-row="true"] {
border-top: none;
}
.detail-row,
.detail-row-complex,
setting {
- border-top: 1px solid #c1c1c1;
+ border-top: 1px solid var(--in-content-box-border-color);
-moz-box-align: center;
min-height: 35px;
line-height: 20px;
text-shadow: 0 1px 1px #fefffe;
}
#detail-controls {
margin-bottom: 1em;
@@ -901,34 +898,34 @@ setting[type="radio"] > radiogroup {
margin-inline-end: 0;
padding-top: 2px;
}
/*** download progress ***/
.download-progress {
- border: 1px solid #c1c1c1;
+ border: 1px solid var(--in-content-box-border-color);
border-radius: 2px;
background-color: #fbfbfb;
width: 200px;
height: 30px;
margin: 2px 4px;
}
.download-progress[mode="undetermined"] {
- border-color: #0095dd;
+ border-color: var(--in-content-border-highlight);
}
.download-progress .start-cap,
.download-progress[complete] .end-cap,
.download-progress[mode="undetermined"] .end-cap,
.download-progress .progress .progress-bar {
-moz-appearance: none;
- background-color: #0095dd;
+ background-color: var(--in-content-border-highlight);
}
.download-progress .progress .progress-bar {
min-height: 28px;
}
.download-progress .progress {
-moz-appearance: none;
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -2,37 +2,33 @@
/* 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/. */
%endif
@namespace html "http://www.w3.org/1999/xhtml";
@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
*|*:root {
- --in-content-page-color: #424e5a;
- --in-content-page-background: #fbfbfb;
- --in-content-text-color: #333;
+ --in-content-page-color: #0c0c0d;
+ --in-content-page-background: #fafafc;
+ --in-content-text-color: #0c0c0d;
--in-content-selected-text: #fff;
--in-content-header-border-color: #c8c8c8;
--in-content-box-background: #fff;
--in-content-box-background-odd: #f3f6fa;
--in-content-box-background-hover: #ebebeb;
--in-content-box-background-active: #dadada;
--in-content-box-border-color: #c1c1c1;
--in-content-item-hover: rgba(0,149,221,0.25);
--in-content-item-selected: #0a84ff;
- --in-content-border-highlight: #ff9500;
+ --in-content-border-highlight: #0a84ff;
--in-content-border-focus: #0a84ff;
--in-content-border-color: #c1c1c1;
--in-content-category-text: #0c0c0d;
- --in-content-category-border-focus: 1px dotted #fff;
--in-content-category-text-selected: #0a84ff;
- --in-content-category-background: #424f5a;
- --in-content-category-background-hover: #5e6972;
- --in-content-category-background-active: #343f48;
--in-content-tab-color: #424f5a;
--in-content-link-color: #0a84ff;
--in-content-link-color-hover: #0060df;
--in-content-link-color-active: #ff9500;
--in-content-link-color-visited: #551a8b;
--in-content-primary-button-background: #0a84ff;
--in-content-primary-button-background-hover: #0060df;
--in-content-primary-button-background-active: #003EAA;
@@ -642,42 +638,36 @@ xul|*.radio-label-box {
margin: 0;
border-width: 0;
}
*|*.category {
-moz-appearance: none;
color: var(--in-content-category-text);
border-inline-end-width: 0;
- padding-inline-start: 15px;
+ padding-inline-start: 40px;
padding-inline-end: 21px;
min-height: 40px;
transition: background-color 150ms;
}
-*|*.category:hover {
- background-color: var(--in-content-category-background-hover);
-}
-
*|*.category[selected],
*|*.category.selected {
- background-color: var(--in-content-category-background-active);
color: var(--in-content-category-text-selected);
- padding-inline-start: 11px; /* compensate the 4px border */
- border-inline-start: solid 4px var(--in-content-border-highlight);
+ background: none;
}
*|*#categories[keyboard-navigation="true"]:-moz-focusring > *|*.category[current] {
border-top: var(--in-content-category-border-focus);
border-bottom: var(--in-content-category-border-focus);
}
*|*.category-name {
line-height: 22px;
- font-size: 1.25rem;
+ font-size: 1.45rem;
padding-bottom: 2px;
padding-inline-start: 9px;
margin: 0;
-moz-user-select: none;
}
*|*.category-icon {
width: 24px;
