mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-23 12:51:06 +00:00
Bug 1865371 - Replace --in-content-box-background with --background-color-box r=cmkm,desktop-theme-reviewers,credential-management-reviewers,omc-reviewers,aminomancer,dao,issammani
Differential Revision: https://phabricator.services.mozilla.com/D222674
This commit is contained in:
parent
28496b0baf
commit
8aaaadc045
@ -23,7 +23,7 @@
|
||||
/* Sanitize everything warning box */
|
||||
#sanitizeEverythingWarningBox {
|
||||
/* Fallback colors are used when the dialog is open outside of in-content prefs */
|
||||
background-color: var(--in-content-box-background, Window);
|
||||
background-color: var(--background-color-box);
|
||||
border: 1px solid var(--in-content-box-border-color, ThreeDDarkShadow);
|
||||
border-radius: 5px;
|
||||
padding: 16px;
|
||||
|
@ -9,7 +9,7 @@
|
||||
grid-template-columns: min-content 1fr auto;
|
||||
padding: 16px 32px;
|
||||
color: var(--in-content-text-color);
|
||||
background-color: var(--in-content-box-background);
|
||||
background-color: var(--background-color-box);
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--in-content-border-color);
|
||||
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .1);
|
||||
@ -17,7 +17,7 @@
|
||||
}
|
||||
|
||||
:host([variant="info"]) {
|
||||
background-color: var(--in-content-box-background);
|
||||
background-color: var(--background-color-box);
|
||||
}
|
||||
|
||||
:host([variant="error"]) {
|
||||
|
@ -4,7 +4,7 @@
|
||||
|
||||
:host {
|
||||
border-inline-end: 1px solid var(--in-content-border-color);
|
||||
background-color: var(--in-content-box-background);
|
||||
background-color: var(--background-color-box);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
@ -15,7 +15,7 @@
|
||||
align-items: center;
|
||||
padding: 0 16px 16px;
|
||||
border-bottom: 1px solid var(--in-content-border-color);
|
||||
background-color: var(--in-content-box-background);
|
||||
background-color: var(--background-color-box);
|
||||
}
|
||||
|
||||
.meta > label > span {
|
||||
@ -110,7 +110,7 @@ ol {
|
||||
font-weight: var(--font-weight-bold);
|
||||
padding: 4px 16px;
|
||||
border-bottom: 1px solid var(--in-content-border-color);
|
||||
background-color: var(--in-content-box-background);
|
||||
background-color: var(--background-color-box);
|
||||
margin-block-start: 2px;
|
||||
margin-inline: 2px;
|
||||
}
|
||||
|
@ -18,7 +18,7 @@
|
||||
:host .arrow-box {
|
||||
position: relative;
|
||||
padding: 12px;
|
||||
background-color: var(--in-content-box-background);
|
||||
background-color: var(--background-color-box);
|
||||
border: 1px solid var(--in-content-border-color);
|
||||
border-radius: 4px;
|
||||
}
|
||||
@ -36,7 +36,7 @@
|
||||
}
|
||||
|
||||
:host .arrow-box::after {
|
||||
border-inline-end-color: var(--in-content-box-background);
|
||||
border-inline-end-color: var(--background-color-box);
|
||||
border-width: 10px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
@ -17,7 +17,7 @@
|
||||
|
||||
.timeline > svg {
|
||||
grid-row: 1 / 1;
|
||||
fill: var(--in-content-box-background);
|
||||
fill: var(--background-color-box);
|
||||
}
|
||||
|
||||
.timeline > .line {
|
||||
|
@ -22,7 +22,7 @@
|
||||
inset-inline-end: 0;
|
||||
margin: 0;
|
||||
padding: 5px 0;
|
||||
background-color: var(--in-content-box-background);
|
||||
background-color: var(--background-color-box);
|
||||
border: 1px solid var(--in-content-box-border-color);
|
||||
border-radius: 4px;
|
||||
box-shadow: var(--shadow-30);
|
||||
|
@ -232,7 +232,7 @@
|
||||
}
|
||||
|
||||
.sourceLabel:not(:empty) {
|
||||
background: var(--in-content-box-background);
|
||||
background: var(--background-color-box);
|
||||
padding: 2px 5px;
|
||||
border-radius: 3px;
|
||||
|
||||
|
@ -175,7 +175,7 @@
|
||||
margin: 0;
|
||||
}
|
||||
.asrouter-admin .sourceLabel:not(:empty) {
|
||||
background: var(--in-content-box-background);
|
||||
background: var(--background-color-box);
|
||||
padding: 2px 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
@ -134,7 +134,7 @@ tbody:nth-child(4n + 1) {
|
||||
}
|
||||
|
||||
.content-style {
|
||||
background-color: var(--in-content-box-background);
|
||||
background-color: var(--background-color-box);
|
||||
color: var(--blue-50);
|
||||
}
|
||||
|
||||
|
@ -3,7 +3,7 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
.options-container {
|
||||
background-color: var(--in-content-box-background);
|
||||
background-color: var(--background-color-box);
|
||||
border: 1px solid var(--in-content-box-border-color);
|
||||
border-radius: 2px;
|
||||
color: var(--in-content-text-color);
|
||||
|
@ -1037,7 +1037,7 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover {
|
||||
height: 110px;
|
||||
width: 765px;
|
||||
content: "";
|
||||
background-image: linear-gradient(to right, var(--in-content-box-background) 0%, var(--protection-report-loader-color-stop) 30%, var(--in-content-box-background) 40%, var(--in-content-box-background) 100%);
|
||||
background-image: linear-gradient(to right, var(--background-color-box) 0%, var(--protection-report-loader-color-stop) 30%, var(--background-color-box) 40%, var(--background-color-box) 100%);
|
||||
background-repeat: no-repeat;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
@ -1049,7 +1049,7 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover {
|
||||
|
||||
.monitor-card.loading:dir(rtl)::after,
|
||||
.lockwise-card.loading:dir(rtl)::after {
|
||||
background-image: linear-gradient(to left, var(--in-content-box-background) 0%, var(--protection-report-loader-color-stop) 30%, var(--in-content-box-background) 40%, var(--in-content-box-background) 100%);
|
||||
background-image: linear-gradient(to left, var(--background-color-box) 0%, var(--protection-report-loader-color-stop) 30%, var(--background-color-box) 40%, var(--background-color-box) 100%);
|
||||
animation-name: loading-rtl;
|
||||
}
|
||||
|
||||
|
@ -24,7 +24,7 @@ fieldset {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 0.4em 0.7em;
|
||||
background-color: var(--in-content-box-background);
|
||||
background-color: var(--background-color-box);
|
||||
border: 1px solid var(--in-content-box-border-color);
|
||||
border-radius: 2px 2px 0 0;
|
||||
user-select: none;
|
||||
|
@ -1456,7 +1456,7 @@ richlistitem .text-link:hover {
|
||||
#translations-manage-install-list {
|
||||
height: 220px;
|
||||
overflow: auto;
|
||||
background-color: var(--in-content-box-background);
|
||||
background-color: var(--background-color-box);
|
||||
border: 1px solid var(--in-content-box-border-color);
|
||||
border-radius: 4px;
|
||||
resize: vertical;
|
||||
|
@ -31,7 +31,7 @@
|
||||
/* Sanitize everything warning box */
|
||||
#sanitizeEverythingWarningBox {
|
||||
/* Fallback colors are used when the dialog is open outside of in-content prefs */
|
||||
background-color: var(--in-content-box-background, Window);
|
||||
background-color: var(--background-color-box);
|
||||
border: 1px solid var(--in-content-box-border-color, ThreeDDarkShadow);
|
||||
border-radius: 5px;
|
||||
padding: 16px;
|
||||
|
@ -126,7 +126,7 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
background-color: var(--in-content-box-background);
|
||||
background-color: var(--background-color-box);
|
||||
}
|
||||
|
||||
.perf-settings-dir-list:hover {
|
||||
|
@ -98,7 +98,7 @@
|
||||
}
|
||||
|
||||
#prefs {
|
||||
background-color: var(--in-content-box-background);
|
||||
background-color: var(--background-color-box);
|
||||
color: var(--in-content-text-color);
|
||||
margin: 10px;
|
||||
table-layout: fixed;
|
||||
|
@ -48,7 +48,7 @@ td {
|
||||
}
|
||||
|
||||
tr:nth-child(even) td {
|
||||
background-color: var(--in-content-box-background);
|
||||
background-color: var(--background-color-box);
|
||||
}
|
||||
|
||||
tr:nth-child(odd) td {
|
||||
|
@ -33,7 +33,7 @@ div.section {
|
||||
margin: 1em 0em;
|
||||
border: 1px solid var(--in-content-border-color);
|
||||
border-radius: var(--border-radius-small);
|
||||
background: var(--in-content-box-background);
|
||||
background: var(--background-color-box);
|
||||
}
|
||||
|
||||
div.outputContainer {
|
||||
@ -60,7 +60,7 @@ div.sidebarItem {
|
||||
margin: 1em 0em;
|
||||
border: 1px solid var(--in-content-border-color);
|
||||
border-radius: var(--border-radius-small);
|
||||
background: var(--in-content-box-background);
|
||||
background: var(--background-color-box);
|
||||
user-select: none; /* no need to include this when cutting+pasting */
|
||||
}
|
||||
|
||||
@ -84,7 +84,7 @@ div.opsRow {
|
||||
margin-top: 0.5em;
|
||||
border: 1px solid var(--in-content-border-color);
|
||||
border-radius: var(--border-radius-small);
|
||||
background: var(--in-content-box-background);
|
||||
background: var(--background-color-box);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
@ -15,7 +15,7 @@ body {
|
||||
user-select: none;
|
||||
font-size: 1em;
|
||||
border-spacing: 0;
|
||||
background-color: var(--in-content-box-background);
|
||||
background-color: var(--background-color-box);
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -35,7 +35,7 @@ body {
|
||||
height: 2em;
|
||||
border-bottom: 1px solid var(--in-content-border-color);
|
||||
width: 100%;
|
||||
background-color: var(--in-content-box-background);
|
||||
background-color: var(--background-color-box);
|
||||
}
|
||||
tr {
|
||||
display: grid;
|
||||
|
@ -18,7 +18,7 @@ h1 {
|
||||
.info-groups {
|
||||
display: none;
|
||||
outline: none;
|
||||
background-color: var(--in-content-box-background);
|
||||
background-color: var(--background-color-box);
|
||||
box-shadow: var(--card-shadow);
|
||||
margin-bottom: 2em;
|
||||
border-radius: 0 0 4px 4px;
|
||||
@ -35,7 +35,7 @@ h1 {
|
||||
padding-bottom: 15px; /* compensate for border-bottom below */
|
||||
border: none;
|
||||
border-bottom: 3px solid transparent;
|
||||
background-color: var(--in-content-box-background);
|
||||
background-color: var(--background-color-box);
|
||||
color: var(--in-content-text-color);
|
||||
flex: 1 1 auto;
|
||||
text-overflow: ellipsis;
|
||||
|
@ -252,7 +252,7 @@ virtualized-list {
|
||||
display: grid;
|
||||
padding: 16px 32px;
|
||||
color: var(--in-content-text-color);
|
||||
background-color: var(--in-content-box-background);
|
||||
background-color: var(--background-color-box);
|
||||
border: 1px solid var(--in-content-border-color);
|
||||
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
@ -9,7 +9,7 @@
|
||||
|
||||
/* Provide backup values for some of the variables used in "browser" so that the styles
|
||||
look nice by default in "toolkit". */
|
||||
--AT-box-background: var(--in-content-box-background, #fff);
|
||||
--AT-box-background: var(--background-color-box);
|
||||
--AT-box-border-color: var(--in-content-box-border-color, #9e9ea0);
|
||||
--AT-box-info-background: var(--in-content-box-info-background, #f0f0f4);
|
||||
|
||||
|
@ -192,7 +192,7 @@ section:not(.active) {
|
||||
display: flex;
|
||||
padding: 24px;
|
||||
flex-direction: column;
|
||||
background-color: var(--in-content-box-background);
|
||||
background-color: var(--background-color-box);
|
||||
border: 1px solid var(--in-content-box-border-color);
|
||||
margin: 12px 0;
|
||||
inset-inline-start: 12px;
|
||||
@ -229,7 +229,7 @@ section:not(.active) {
|
||||
padding-block: 12px;
|
||||
padding-inline: 20px;
|
||||
border: 1px solid var(--in-content-box-border-color);
|
||||
background-color: var(--in-content-box-background);
|
||||
background-color: var(--background-color-box);
|
||||
border-radius: 2px;
|
||||
margin-bottom: 24px;
|
||||
margin-inline-end: 24px;
|
||||
|
@ -41,7 +41,7 @@ table {
|
||||
margin: 1em 0;
|
||||
border: 1px solid var(--in-content-box-border-color);
|
||||
border-radius: 10px;
|
||||
background-color: var(--in-content-box-background);
|
||||
background-color: var(--background-color-box);
|
||||
}
|
||||
|
||||
.autorefresh {
|
||||
|
@ -98,14 +98,14 @@ button:disabled {
|
||||
}
|
||||
|
||||
.trr-message-container {
|
||||
background-color: var(--in-content-box-background);
|
||||
background-color: var(--background-color-box);
|
||||
border: 1px solid var(--in-content-box-border-color);
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#badCertAdvancedPanel {
|
||||
background-color: var(--in-content-box-background);
|
||||
background-color: var(--background-color-box);
|
||||
border: 1px solid var(--in-content-box-border-color);
|
||||
}
|
||||
|
||||
|
@ -20,7 +20,7 @@
|
||||
border: 1px solid var(--in-content-box-border-color);
|
||||
border-radius: 10px;
|
||||
padding: 3em;
|
||||
background-color: var(--in-content-box-background);
|
||||
background-color: var(--background-color-box);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
@ -37,7 +37,7 @@ td.integer {
|
||||
--codec-bg-supported-odd: #54ffbd;
|
||||
--codec-bg-unsupported-even: #ffdfe7;
|
||||
--codec-bg-unsupported-odd: #ffbdc5;
|
||||
--codec-text-name-even: var(--in-content-box-background);
|
||||
--codec-text-name-even: var(--background-color-box);
|
||||
--codec-text-name-odd: var(--in-content-box-background-odd);
|
||||
--codec-text-other: var(--in-content-text-color);
|
||||
--codec-text-supported: #15141a;
|
||||
|
@ -13,7 +13,6 @@
|
||||
--in-content-page-color: rgb(21, 20, 26);
|
||||
--in-content-page-background: var(--background-color-canvas);
|
||||
--in-content-text-color: var(--in-content-page-color);
|
||||
--in-content-box-background: var(--background-color-box);
|
||||
--in-content-box-background-odd: rgba(12, 12, 13, 0.05); /* grey 90 a05 */
|
||||
--in-content-box-border-color: color-mix(in srgb, currentColor 41%, transparent);
|
||||
--in-content-box-info-background: #f0f0f4;
|
||||
@ -150,9 +149,9 @@
|
||||
:root {
|
||||
--in-content-page-color: CanvasText;
|
||||
|
||||
--in-content-box-background-odd: var(--in-content-box-background);
|
||||
--in-content-box-background-odd: var(--background-color-box);
|
||||
--in-content-box-border-color: -moz-DialogText;
|
||||
--in-content-box-info-background: var(--in-content-box-background);
|
||||
--in-content-box-info-background: var(--background-color-box);
|
||||
|
||||
--in-content-item-hover: SelectedItem;
|
||||
--in-content-item-hover-text: SelectedItemText;
|
||||
@ -397,7 +396,7 @@ html|select:not([size], [multiple]):dir(rtl) {
|
||||
}
|
||||
|
||||
html|select:not([size], [multiple]) > html|option {
|
||||
background-color: var(--in-content-box-background);
|
||||
background-color: var(--background-color-box);
|
||||
color: var(--in-content-text-color);
|
||||
}
|
||||
|
||||
@ -526,7 +525,7 @@ xul|menulist > xul|menupopup {
|
||||
|
||||
--panel-border-color: var(--in-content-box-border-color);
|
||||
--panel-border-radius: 2px;
|
||||
--panel-background: var(--in-content-box-background);
|
||||
--panel-background: var(--background-color-box);
|
||||
--panel-color: var(--in-content-text-color);
|
||||
--panel-padding: 0;
|
||||
}
|
||||
@ -576,7 +575,7 @@ xul|search-textbox {
|
||||
border: 1px solid var(--in-content-box-border-color);
|
||||
border-radius: 4px;
|
||||
color: inherit;
|
||||
background-color: var(--in-content-box-background);
|
||||
background-color: var(--background-color-box);
|
||||
}
|
||||
|
||||
xul|search-textbox {
|
||||
@ -901,7 +900,7 @@ xul|listheader,
|
||||
xul|richlistbox {
|
||||
appearance: none;
|
||||
margin-inline: 0;
|
||||
background-color: var(--in-content-box-background);
|
||||
background-color: var(--background-color-box);
|
||||
border: 1px solid var(--in-content-box-border-color);
|
||||
border-radius: 4px;
|
||||
color: var(--in-content-text-color);
|
||||
@ -972,7 +971,7 @@ xul|richlistitem[selected] xul|menulist:focus-visible {
|
||||
}
|
||||
|
||||
xul|panel[type="autocomplete-richlistbox"] {
|
||||
background-color: var(--in-content-box-background);
|
||||
background-color: var(--background-color-box);
|
||||
border: 1px solid var(--in-content-box-border-color);
|
||||
color: var(--in-content-text-color);
|
||||
}
|
||||
@ -984,7 +983,7 @@ xul|tree {
|
||||
font-size: 1em;
|
||||
border: 1px solid var(--in-content-box-border-color);
|
||||
border-radius: 4px;
|
||||
background-color: var(--in-content-box-background);
|
||||
background-color: var(--background-color-box);
|
||||
color: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
@ -1130,7 +1129,7 @@ input[type="text"][warning]:enabled:not(:focus) {
|
||||
/* Cards */
|
||||
|
||||
.card {
|
||||
background: var(--in-content-box-background);
|
||||
background: var(--background-color-box);
|
||||
/* Needed for high-contrast where the border will appear. */
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
|
@ -757,7 +757,7 @@ Maybe<nscolor> nsXPLookAndFeel::GenericDarkColor(ColorID aID) {
|
||||
|
||||
case ColorID::MozEventreerow:
|
||||
case ColorID::MozOddtreerow:
|
||||
case ColorID::MozDialog: // --in-content-box-background
|
||||
case ColorID::MozDialog: // --background-color-box
|
||||
color = NS_RGB(35, 34, 43);
|
||||
break;
|
||||
case ColorID::Windowtext: // --in-content-page-color
|
||||
|
Loading…
Reference in New Issue
Block a user