corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revert "Bug 1606785 - Enable Prettier for CSS files r=desktop-theme-reviewers,Standard8,frontend-codestyle-reviewers,emilio" for causing multiple failures.

Browse Source 
This reverts commit ec5fa1d4c0.

Revert "Bug 1606785 - Format Firefox CSS files with Prettier r=desktop-theme-reviewers,perftest-reviewers,places-reviewers,translations-reviewers,omc-reviewers,backup-reviewers,browser-installer-reviewers,sparky,dao,pdahiya,nrishel,kpatenio"

This reverts commit baa5d72bbd.

Revert "Bug 1606785 - Format browser/themes and toolkit/themes CSS files with Prettier r=desktop-theme-reviewers,pip-reviewers,tabbrowser-reviewers,places-reviewers,dao,mconley"

This reverts commit 9604b0a8ae.

Revert "Bug 1606785 - Format browser/themes/preferences CSS files with Prettier r=settings-reviewers,desktop-theme-reviewers,dao,mconley"

This reverts commit 686c1cf85f.

Revert "Bug 1606785 - Format urlbar CSS files with Prettier r=urlbar-reviewers,desktop-theme-reviewers,dao"

This reverts commit a7a4f31251.

Revert "Bug 1606785 - Format webcompat CSS files with Prettier r=webcompat-reviewers,denschub"

This reverts commit 41bc4d5237.

Revert "Bug 1606785 - Format search CSS files with Prettier r=search-reviewers,jteow"

This reverts commit 7bb7f82374.

Revert "Bug 1606785 - Format dom CSS files with Prettier r=emilio"

This reverts commit c22e910235.

Revert "Bug 1606785 - Format android CSS files with Prettier r=geckoview-reviewers,hiro"

This reverts commit c08e43fc3d.

Revert "Bug 1606785 - Format layout CSS files with Prettier r=layout-reviewers,dholbert"

This reverts commit 4f2a32d1a4.

Revert "Bug 1606785 - Format devtools CSS files with Prettier r=devtools-reviewers,nchevobbe,frontend-codestyle-reviewers"

This reverts commit c05f675ddf.

Revert "Bug 1606785 - Format recomp CSS files with Prettier r=reusable-components-reviewers,desktop-theme-reviewers,dao,mkennedy"

This reverts commit b10c7de8d0.

Revert "Bug 1606785 - Format sidebar CSS files with Prettier r=sidebar-reviewers,desktop-theme-reviewers,dao,nsharpley"

This reverts commit d32c555e37.

Revert "Bug 1606785 - Format shopping CSS files with Prettier r=shopping-reviewers,desktop-theme-reviewers,dao,rking"

This reverts commit 965887a708.

Revert "Bug 1606785 - Format profiles CSS files with Prettier r=profiles-reviewers,desktop-theme-reviewers,dao,mossop"

This reverts commit 8338860f74.

Revert "Bug 1606785 - Format genai and ml CSS files with Prettier r=firefox-ai-ml-reviewers,Mardak"

This reverts commit d66681f553.

Revert "Bug 1606785 - Format firefoxview CSS files with Prettier r=fxview-reviewers,desktop-theme-reviewers,dao,jsudiaman"

This reverts commit 530b815cad.

Revert "Bug 1606785 - Format aboutlogins, megalist, and form autofill CSS files with Prettier r=credential-management-reviewers,mtigley,desktop-theme-reviewers,dao"

This reverts commit 813c864381.
This commit is contained in:
agoloman
2025-05-21 07:44:03 +03:00
committed by agoloman@mozilla.com
parent 502863a556
commit 63c83deb26
394 changed files with 3351 additions and 3895 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
.prettierignore
View File

@@ -8,7 +8,6 @@
!*.xhtml !*.xhtml
!*.html !*.html
!*.ts !*.ts
!*.css
# Prettier currently fails to parse this. # Prettier currently fails to parse this.
toolkit/components/extensions/types/ext-tabs-base.d.ts toolkit/components/extensions/types/ext-tabs-base.d.ts
@@ -1253,95 +1252,6 @@ browser/extensions/translations/extension/
toolkit/components/uniffi-bindgen-gecko-js/src/templates/js/ toolkit/components/uniffi-bindgen-gecko-js/src/templates/js/
toolkit/components/uniffi-bindgen-gecko-js/components/generated/* toolkit/components/uniffi-bindgen-gecko-js/components/generated/*
# This is intended to simulate a css file generated from a scss file in order to
# test sourcemaps.
devtools/client/inspector/rules/test/doc_sourcemaps2.css
##############################################################################
# The list below is copied from .stylelintignore. Prettier doesn't currently
# support multiple ignore files or dynamic ignore configurations.
# When this is implemented, we'll update the configuration below (bug 1825508)
##############################################################################
# These files are generated in some way.
browser/components/pocket/content/panels/css/main.compiled.css
browser/components/aboutwelcome/**/*.css
browser/components/asrouter/**/*.css
browser/extensions/newtab/**/*.css
# Note that the debugger has its own stylelint setup, but that currently
# produces errors. Bug 1831302 tracks making this better
devtools/client/debugger/src/components/PrimaryPanes/Outline.css
devtools/client/debugger/src/components/PrimaryPanes/Sources.css
devtools/client/debugger/src/components/shared/AccessibleImage.css
devtools/client/debugger/src/utils/editor/source-editor.css
devtools/client/debugger/test/mochitest/examples/
# These get their sourcemap annotations autofixed, though they produce
# no errors at all.
devtools/client/inspector/rules/test/doc_sourcemaps.css
# This is intended to simulate a css file generated from a scss file in order to
# test sourcemaps.
devtools/client/inspector/rules/test/doc_sourcemaps2.css
# Some of these produce parse errors, some have sourcemaps modified.
# They're tests, so let's just ignore all of them:
devtools/client/inspector/computed/test/doc_sourcemaps.css
devtools/client/inspector/rules/test/doc_invalid_sourcemap.css
devtools/client/shared/sourceeditor/test/css_statemachine_testcases.css
devtools/client/webconsole/test/browser/*.css
# Style editor tests check how it copes with invalid or "special" CSS,
# so don't try to "fix" those.
devtools/client/styleeditor/test/
# These are empty or have funky charsets
dom/base/test/bug466409-empty.css
dom/encoding/test/file_utf16_be_bom.css
dom/encoding/test/file_utf16_le_bom.css
dom/security/test/cors/file_cors_logging_test.html.css
dom/tests/mochitest/general/cssA.css
dom/tests/mochitest/general/cssC.css
# These are test-only and cause us to complain about font families or
# similar, but we don't want to touch these tests at this point.
dom/security/test/csp/file_CSP.css
dom/security/test/sri/style2.css
dom/xml/test/old/docbook.css
dom/xml/test/old/toc/book.css
dom/xml/test/old/toc/toc.css
# Tests we don't want to modify at this point:
layout/base/tests/stylesheet_change_events.css
layout/inspector/tests/bug856317.css
layout/inspector/tests/chrome/test_bug467669.css
layout/inspector/tests/chrome/test_bug708874.css
layout/style/test/gtest/example.css
layout/style/test/mapped2.css
layout/style/test/unstyled-frame.css
# Bug 1893763
mobile/android/android-components/components/feature/readerview/src/main/assets/extensions/readerview/readerview.css
# Three dashes at top of file (for Jekyll?) cause syntax error:
mobile/android/android-components/docs/assets/main.scss
# Empty test files:
netwerk/test/mochitests/test1.css
netwerk/test/mochitests/test2.css
# Has substitution gunk in it:
python/mozbuild/mozbuild/test/backend/data/build/foo.css
# This is third-party in a way:
toolkit/components/pdfjs/content/web/debugger.css
toolkit/components/pdfjs/content/web/viewer.css
toolkit/components/pdfjs/content/web/viewer-geckoview.css
build/pgo/blueprint/**/*.css
# Ignore web-platform tests as they are not necessarily under our control.
testing/web-platform/tests/
############################################################################## ##############################################################################
# The list below is copied from ThirdPartyPaths.txt. Prettier doesn't currently # The list below is copied from ThirdPartyPaths.txt. Prettier doesn't currently
# support multiple ignore files or dynamic ignore configurations. # support multiple ignore files or dynamic ignore configurations.
@@ -1560,6 +1470,7 @@ xpcom/build/mach_override.h
xpcom/io/crc32c.c xpcom/io/crc32c.c
rlbox/rlbox_sandbox.hpp rlbox/rlbox_sandbox.hpp
############################################################################## ##############################################################################
# The list below is copied from Generated.txt. Prettier doesn't currently # The list below is copied from Generated.txt. Prettier doesn't currently
# support multiple ignore files or dynamic ignore configurations. # support multiple ignore files or dynamic ignore configurations.

2
.prettierignore-css
View File

@@ -1,2 +0,0 @@
# When running Prettier via ESlint ignore these filetypes.
*.css

9
.prettierignore-non-css
View File

@@ -1,9 +0,0 @@
# When running Prettier via Stylelint ignore these filetypes.
*.js
*.json
*.jsx
*.mjs
*.sjs
*.xhtml
*.html
*.ts

10
.prettierrc.js
View File

@@ -10,14 +10,4 @@ module.exports = {
printWidth: 80, printWidth: 80,
tabWidth: 2, tabWidth: 2,
trailingComma: "es5", trailingComma: "es5",
overrides: [
{
files: "*.css",
options: {
parser: "css",
// Using a larger printWidth to avoid wrapping selectors.
printWidth: 160,
},
},
],
}; };

6
.stylelintignore
View File

@@ -41,10 +41,6 @@ devtools/client/debugger/test/mochitest/examples/
# no errors at all. # no errors at all.
devtools/client/inspector/rules/test/doc_sourcemaps.css devtools/client/inspector/rules/test/doc_sourcemaps.css
# This is intended to simulate a css file generated from a scss file in order to
# test sourcemaps.
devtools/client/inspector/rules/test/doc_sourcemaps2.css
# Some of these produce parse errors, some have sourcemaps modified. # Some of these produce parse errors, some have sourcemaps modified.
# They're tests, so let's just ignore all of them: # They're tests, so let's just ignore all of them:
devtools/client/inspector/computed/test/doc_sourcemaps.css devtools/client/inspector/computed/test/doc_sourcemaps.css
@@ -97,7 +93,7 @@ python/mozbuild/mozbuild/test/backend/data/build/foo.css
toolkit/components/pdfjs/content/web/debugger.css toolkit/components/pdfjs/content/web/debugger.css
toolkit/components/pdfjs/content/web/viewer.css toolkit/components/pdfjs/content/web/viewer.css
toolkit/components/pdfjs/content/web/viewer-geckoview.css toolkit/components/pdfjs/content/web/viewer-geckoview.css
build/pgo/blueprint/**/*.css
# Ignore web-platform tests as they are not necessarily under our control. # Ignore web-platform tests as they are not necessarily under our control.
testing/web-platform/tests/ testing/web-platform/tests/

2
browser/base/content/aboutDialog.css
View File

@@ -121,7 +121,7 @@
} }
#submit-feedback { #submit-feedback {
margin-inline-start: 0.9em; margin-inline-start: .9em;
} }
.bottom-link { .bottom-link {

5
browser/base/content/pageinfo/pageInfo.css
View File

@@ -44,15 +44,14 @@ table {
height: 6px; height: 6px;
} }
th, th, td {
td {
padding: 0; padding: 0;
} }
th { th {
font: inherit; font: inherit;
text-align: start; text-align: start;
padding-inline-end: 0.5em; padding-inline-end: .5em;
} }
/* /*

4
browser/base/content/test/pageStyle/style.css
View File

@@ -1,3 +1 @@
.unused { .unused { /* This sheet is here for testing purposes. */ }
/* This sheet is here for testing purposes. */
}

2
browser/base/content/test/siteIdentity/test_no_mcb_on_http_site_img.css
View File

@@ -1,3 +1,3 @@
#testDiv { #testDiv {
background: url(http://example.com/tests/image/test/mochitest/blue.png); background: url(http://example.com/tests/image/test/mochitest/blue.png)
} }

5
browser/branding/aurora/stubinstaller/installing_page.css
View File

@@ -35,7 +35,7 @@ body.high-contrast #progress_background {
width: 0%; width: 0%;
max-width: 100%; max-width: 100%;
height: 100%; height: 100%;
background-color: #00aaff; background-color: #00AAFF;
} }
/* In high contrast mode, fill the entire progress bar with its border. */ /* In high contrast mode, fill the entire progress bar with its border. */
@@ -46,8 +46,7 @@ body.high-contrast #progress_bar {
} }
/* This layout doesn't want the header or content text. */ /* This layout doesn't want the header or content text. */
#header, #header, #content {
#content {
display: none; display: none;
} }

2
browser/branding/nightly/content/aboutDialog.css
View File

@@ -14,6 +14,6 @@
} }
#bottomBox { #bottomBox {
background-color: hsla(235, 43%, 10%, 0.5); background-color: hsla(235, 43%, 10%, .5);
padding: 15px 10px 15px; padding: 15px 10px 15px;
} }

5
browser/branding/nightly/stubinstaller/installing_page.css
View File

@@ -34,7 +34,7 @@ body.high-contrast #progress_background {
margin: 0; margin: 0;
width: 0%; width: 0%;
height: 100%; height: 100%;
background-color: #00aaff; background-color: #00AAFF;
} }
/* In high contrast mode, fill the entire progress bar with its border. */ /* In high contrast mode, fill the entire progress bar with its border. */
@@ -45,8 +45,7 @@ body.high-contrast #progress_bar {
} }
/* This layout doesn't want the header or content text. */ /* This layout doesn't want the header or content text. */
#header, #header, #content {
#content {
display: none; display: none;
} }

2
browser/branding/official/content/aboutDialog.css
View File

@@ -13,7 +13,7 @@
} }
#bottomBox { #bottomBox {
background-color: hsla(235, 43%, 10%, 0.5); background-color: hsla(235, 43%, 10%, .5);
padding: 15px 10px 15px; padding: 15px 10px 15px;
} }

2
browser/branding/official/stubinstaller/installing_page.css
View File

@@ -70,7 +70,7 @@ body.high-contrast #progress_background {
margin: 0; margin: 0;
width: 0%; width: 0%;
height: 100%; height: 100%;
background-color: #00aaff; background-color: #00AAFF;
} }
/* In high contrast mode, fill the entire progress bar with its border. */ /* In high contrast mode, fill the entire progress bar with its border. */

2
browser/branding/unofficial/content/aboutDialog.css
View File

@@ -15,6 +15,6 @@
} }
#bottomBox { #bottomBox {
background-color: hsla(235, 43%, 10%, 0.5); background-color: hsla(235, 43%, 10%, .5);
padding: 15px 10px 15px; padding: 15px 10px 15px;
} }

5
browser/branding/unofficial/stubinstaller/installing_page.css
View File

@@ -34,7 +34,7 @@ body.high-contrast #progress_background {
margin: 0; margin: 0;
width: 0%; width: 0%;
height: 100%; height: 100%;
background-color: #00aaff; background-color: #00AAFF;
} }
/* In high contrast mode, fill the entire progress bar with its border. */ /* In high contrast mode, fill the entire progress bar with its border. */
@@ -45,8 +45,7 @@ body.high-contrast #progress_bar {
} }
/* This layout doesn't want the header or content text. */ /* This layout doesn't want the header or content text. */
#header, #header, #content {
#content {
display: none; display: none;
} }

4
browser/components/aboutlogins/content/aboutLogins.css
View File

@@ -82,7 +82,7 @@ login-item[data-editing="true"] + login-intro,
.primary-password-auth-required > body > header, .primary-password-auth-required > body > header,
.primary-password-auth-required > body > login-list, .primary-password-auth-required > body > login-list,
.primary-password-auth-required > body > section { .primary-password-auth-required > body > section {
filter: blur(2px); filter: blur(2px)
} }
#primary-password-required-overlay { #primary-password-required-overlay {
@@ -90,7 +90,7 @@ login-item[data-editing="true"] + login-intro,
position: fixed; position: fixed;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-color: rgba(0, 0, 0, 0.2); background-color: rgba(0,0,0,0.2);
} }
body > section { body > section {

1
browser/components/aboutlogins/content/aboutLoginsImportReport.css
View File

@@ -33,6 +33,7 @@
margin-block: 32px 8px; margin-block: 32px 8px;
} }
.summary > a { .summary > a {
margin-top: 12px; margin-top: 12px;
} }

4
browser/components/aboutlogins/content/components/confirmation-dialog.css
View File

@@ -2,13 +2,13 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this * 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/. */ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
.overlay { .overlay {
position: fixed; position: fixed;
z-index: 1; z-index: 1;
inset: 0; inset: 0;
/* TODO: this color is used in the about:preferences overlay, but /* TODO: this color is used in the about:preferences overlay, but
why isn't it declared as a variable? */ why isn't it declared as a variable? */
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0,0,0,0.5);
display: flex; display: flex;
} }

3
browser/components/aboutlogins/content/components/fxaccounts-button.css
View File

@@ -53,7 +53,8 @@
.fxaccount-avatar { .fxaccount-avatar {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
background-image: var(--avatar-url), url(chrome://browser/skin/fxa/avatar-color.svg); background-image: var(--avatar-url),
url(chrome://browser/skin/fxa/avatar-color.svg);
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;

2
browser/components/aboutlogins/content/components/generic-dialog.css
View File

@@ -8,7 +8,7 @@
inset: 0; inset: 0;
/* TODO: this color is used in the about:preferences overlay, but /* TODO: this color is used in the about:preferences overlay, but
why isn't it declared as a variable? */ why isn't it declared as a variable? */
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0,0,0,0.5);
display: flex; display: flex;
} }

2
browser/components/aboutlogins/content/components/import-error-dialog.css
View File

@@ -24,5 +24,5 @@
.warning-icon { .warning-icon {
-moz-context-properties: fill; -moz-context-properties: fill;
fill: #ffbf00; fill: #FFBF00;
} }

4
browser/components/aboutlogins/content/components/login-alert.css
View File

@@ -12,8 +12,8 @@
background-color: var(--background-color-box); background-color: var(--background-color-box);
border-radius: 4px; border-radius: 4px;
border: 1px solid var(--in-content-border-color); border: 1px solid var(--in-content-border-color);
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .1);
font-size: 0.9em; font-size: .9em;
} }
:host([variant="info"]) { :host([variant="info"]) {

2
browser/components/aboutlogins/content/components/login-intro.css
View File

@@ -19,5 +19,5 @@ section {
} }
.illustration.logged-in { .illustration.logged-in {
opacity: 0.5; opacity: .5;
} }

20
browser/components/aboutlogins/content/components/login-item.css
View File

@@ -2,11 +2,11 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this * 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/. */ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
:host { :host {
overflow: hidden; overflow: hidden;
--reveal-checkbox-opacity: 0.8; --reveal-checkbox-opacity: .8;
--reveal-checkbox-opacity-hover: 0.6; --reveal-checkbox-opacity-hover: .6;
--reveal-checkbox-opacity-active: 1; --reveal-checkbox-opacity-active: 1;
} }
@@ -19,9 +19,9 @@
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:host { :host {
--reveal-checkbox-opacity: 0.8; --reveal-checkbox-opacity: .8;
--reveal-checkbox-opacity-hover: 1; --reveal-checkbox-opacity-hover: 1;
--reveal-checkbox-opacity-active: 0.6; --reveal-checkbox-opacity-active: .6;
} }
} }
@@ -64,6 +64,7 @@ form {
display: none; display: none;
} }
:host(:not([data-editing])) input[type="password"]:read-only, :host(:not([data-editing])) input[type="password"]:read-only,
input[type="text"]:read-only, input[type="text"]:read-only,
input[type="url"]:read-only { input[type="url"]:read-only {
@@ -114,17 +115,16 @@ input[name="password"] {
flex-grow: 1; flex-grow: 1;
} }
origin-warning, origin-warning, password-warning {
password-warning {
display: none; display: none;
} }
input[type="url"]:focus:not(:user-invalid):invalid ~ origin-warning, input[type = "url"]:focus:not(:user-invalid):invalid ~ origin-warning,
input[type="url"]:focus:user-invalid:not(:placeholder-shown) ~ origin-warning { input[type = "url"]:focus:user-invalid:not(:placeholder-shown) ~ origin-warning {
display: block; display: block;
} }
input[name="password"]:focus ~ password-warning { input[name = "password"]:focus ~ password-warning {
display: block; display: block;
} }

2
browser/components/aboutlogins/content/components/login-list.css
View File

@@ -106,7 +106,7 @@ ol {
display: block; display: block;
position: sticky; position: sticky;
top: 0; top: 0;
font-size: 0.85em; font-size: .85em;
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
padding: 4px 16px; padding: 4px 16px;
border-bottom: 1px solid var(--in-content-border-color); border-bottom: 1px solid var(--in-content-border-color);

2
browser/components/aboutlogins/content/components/login-message-popup.css
View File

@@ -6,7 +6,7 @@
position: absolute; position: absolute;
inset-inline-start: 315px; inset-inline-start: 315px;
width: 232px; width: 232px;
box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.18); box-shadow: 2px 2px 10px 1px rgba(0,0,0,0.18);
top: 0; top: 0;
} }

4
browser/components/aboutlogins/content/components/remove-logins-dialog.css
View File

@@ -2,13 +2,13 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this * 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/. */ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
.overlay { .overlay {
position: fixed; position: fixed;
z-index: 1; z-index: 1;
inset: 0; inset: 0;
/* TODO: this color is used in the about:preferences overlay, but /* TODO: this color is used in the about:preferences overlay, but
why isn't it declared as a variable? */ why isn't it declared as a variable? */
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0,0,0,0.5);
display: flex; display: flex;
} }

4
browser/components/backup/content/archive.css
View File

@@ -31,7 +31,7 @@ h1 {
} }
a { a {
color: #0060df; color: #0060DF;
} }
ul { ul {
@@ -44,7 +44,7 @@ ul > li {
} }
hr { hr {
border-color: #f0f0f4; border-color: #F0F0F4;
border-style: solid; border-style: solid;
border-width: 1px 0 0 0; border-width: 1px 0 0 0;
margin: 0; margin: 0;

13
browser/components/enterprisepolicies/content/aboutPolicies.css
View File

@@ -5,8 +5,7 @@
@import url("chrome://global/skin/in-content/common.css"); @import url("chrome://global/skin/in-content/common.css");
@media not print { @media not print {
html, html, body {
body {
height: 100%; height: 100%;
} }
} }
@@ -37,7 +36,7 @@ body {
} }
tbody tr { tbody tr {
transition: background cubic-bezier(0.07, 0.95, 0, 1) 250ms; transition: background cubic-bezier(.07, .95, 0, 1) 250ms;
} }
tbody tr:hover { tbody tr:hover {
@@ -45,9 +44,7 @@ tbody tr:hover {
color: var(--in-content-item-hover-text); color: var(--in-content-item-hover-text);
} }
th, th, td, table {
td,
table {
border-collapse: collapse; border-collapse: collapse;
border: none; border: none;
text-align: start; text-align: start;
@@ -97,8 +94,8 @@ tbody:nth-child(4n + 1) {
height: 14px; height: 14px;
vertical-align: middle; vertical-align: middle;
width: 14px; width: 14px;
margin-top: -0.125rem; margin-top: -.125rem;
margin-left: 0.5rem; margin-left: .5rem;
} }
.collapsible { .collapsible {

19
browser/components/extensions/extension.css
View File

@@ -15,6 +15,7 @@
* browser_style: false or by switching to MV3. * browser_style: false or by switching to MV3.
*/ */
@layer { @layer {
/* Global */ /* Global */
html, html,
body { body {
@@ -113,7 +114,7 @@
button.browser-style:disabled, button.browser-style:disabled,
select.browser-style:disabled { select.browser-style:disabled {
color: #999; color: #999;
opacity: 0.5; opacity: .5;
} }
button.browser-style.focused, button.browser-style.focused,
@@ -148,7 +149,7 @@
.browser-style.disabled > label { .browser-style.disabled > label {
color: #999; color: #999;
opacity: 0.5; opacity: .5;
} }
/* Radio Buttons */ /* Radio Buttons */
@@ -320,7 +321,7 @@
.browser-style > input[type="text"]:disabled, .browser-style > input[type="text"]:disabled,
textarea.browser-style:disabled { textarea.browser-style:disabled {
color: #999; color: #999;
opacity: 0.5; opacity: .5;
} }
.browser-style > input[type="text"].focused, .browser-style > input[type="text"].focused,
@@ -346,8 +347,7 @@
.browser-style > input[type="text"]:invalid:not(:focus), .browser-style > input[type="text"]:invalid:not(:focus),
textarea.browser-style:invalid:not(:focus) { textarea.browser-style:invalid:not(:focus) {
border-color: var(--red-60); border-color: var(--red-60);
box-shadow: box-shadow: 0 0 0 1px var(--red-60),
0 0 0 1px var(--red-60),
0 0 0 4px rgba(251, 0, 34, 0.3); 0 0 0 4px rgba(251, 0, 34, 0.3);
} }
@@ -421,7 +421,7 @@
.panel-list-item > .text-shortcut { .panel-list-item > .text-shortcut {
color: #808080; color: #808080;
font-family: "Lucida Grande", caption; font-family: "Lucida Grande", caption;
font-size: 0.847em; font-size: .847em;
justify-content: flex-end; justify-content: flex-end;
} }
@@ -481,7 +481,7 @@
.panel-section-footer-button > .text-shortcut { .panel-section-footer-button > .text-shortcut {
color: #808080; color: #808080;
font-family: "Lucida Grande", caption; font-family: "Lucida Grande", caption;
font-size: 0.847em; font-size: .847em;
} }
.panel-section-footer-button:hover { .panel-section-footer-button:hover {
@@ -541,9 +541,7 @@
} }
.panel-section-tabs-button.selected { .panel-section-tabs-button.selected {
box-shadow: box-shadow: 0 -1px 0 #0670cc inset, 0 -4px 0 #0996f8 inset;
0 -1px 0 #0670cc inset,
0 -4px 0 #0996f8 inset;
color: #0996f8; color: #0996f8;
} }
@@ -570,4 +568,5 @@
overflow: hidden; overflow: hidden;
} }
} }
} /* end of @layer */ } /* end of @layer */

10
browser/components/firefoxview/card-container.css
View File

@@ -113,8 +113,8 @@
display: none; display: none;
} }
::slotted([slot="header"]), ::slotted([slot=header]),
::slotted([slot="secondary-header"]) { ::slotted([slot=secondary-header]) {
align-self: center; align-self: center;
margin: 0; margin: 0;
font-size: 1.13em; font-size: 1.13em;
@@ -125,12 +125,12 @@
white-space: nowrap; white-space: nowrap;
} }
::slotted([slot="header"]) { ::slotted([slot=header]) {
flex: 1; flex: 1;
width: 0; width: 0;
} }
::slotted([slot="secondary-header"]) { ::slotted([slot=secondary-header]) {
padding-inline-end: 1em; padding-inline-end: 1em;
} }
@@ -141,7 +141,7 @@
cursor: pointer; cursor: pointer;
} }
::slotted([slot="footer"]:not([hidden])) { ::slotted([slot=footer]:not([hidden])) {
text-decoration: underline; text-decoration: underline;
display: inline-block; display: inline-block;
outline-offset: 2px; outline-offset: 2px;

20
browser/components/firefoxview/firefoxview.css
View File

@@ -2,13 +2,13 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this * 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/. */ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
@import url("chrome://global/skin/in-content/common.css"); @import url("chrome://global/skin/in-content/common.css");
:root { :root {
/* override --in-content-page-background from common-shared.css */ /* override --in-content-page-background from common-shared.css */
background-color: transparent; background-color: transparent;
--fxview-background-color: var(--newtab-background-color, var(--in-content-page-background)); --fxview-background-color: var(--newtab-background-color, var(--in-content-page-background));
--fxview-background-color-secondary: var(--newtab-background-color-secondary, #ffffff); --fxview-background-color-secondary: var(--newtab-background-color-secondary, #FFFFFF);
--fxview-element-background-hover: color-mix(in srgb, var(--fxview-background-color) 90%, currentColor); --fxview-element-background-hover: color-mix(in srgb, var(--fxview-background-color) 90%, currentColor);
--fxview-element-background-active: color-mix(in srgb, var(--fxview-background-color) 80%, currentColor); --fxview-element-background-active: color-mix(in srgb, var(--fxview-background-color) 80%, currentColor);
--fxview-text-primary-color: var(--newtab-text-primary-color, var(--in-content-page-color)); --fxview-text-primary-color: var(--newtab-text-primary-color, var(--in-content-page-color));
@@ -17,7 +17,7 @@
--fxview-primary-action-background: var(--newtab-primary-action-background, #0061e0); --fxview-primary-action-background: var(--newtab-primary-action-background, #0061e0);
--fxview-border: var(--border-color-transparent); --fxview-border: var(--border-color-transparent);
--fxview-border-interactive: var(--border-color-interactive); --fxview-border-interactive: var(--border-color-interactive);
--fxview-indicator-stroke-color-hover: #deddde; --fxview-indicator-stroke-color-hover: #DEDDDE;
/* ensure utility button hover states match those of the rest of the page */ /* ensure utility button hover states match those of the rest of the page */
--in-content-button-background-hover: var(--fxview-element-background-hover); --in-content-button-background-hover: var(--fxview-element-background-hover);
@@ -29,7 +29,7 @@
--fxview-card-padding-inline: 4px; --fxview-card-padding-inline: 4px;
/* copy over newtab background color from activity-stream-[os].css files */ /* copy over newtab background color from activity-stream-[os].css files */
--newtab-background-color: #f9f9fb; --newtab-background-color: #F9F9FB;
--fxview-card-header-font-weight: 500; --fxview-card-header-font-weight: 500;
} }
@@ -38,10 +38,10 @@
:root { :root {
--fxview-element-background-hover: color-mix(in srgb, var(--fxview-background-color) 80%, white); --fxview-element-background-hover: color-mix(in srgb, var(--fxview-background-color) 80%, white);
--fxview-element-background-active: color-mix(in srgb, var(--fxview-background-color) 60%, white); --fxview-element-background-active: color-mix(in srgb, var(--fxview-background-color) 60%, white);
--fxview-indicator-stroke-color-hover: #5d5c66; --fxview-indicator-stroke-color-hover:#5D5C66;
/* copy over newtab colors from activity-stream-[os].css files */ /* copy over newtab colors from activity-stream-[os].css files */
--newtab-background-color: #2b2a33; --newtab-background-color: #2B2A33;
--newtab-background-color-secondary: #42414d; --newtab-background-color-secondary: #42414d;
--newtab-primary-action-background: #00ddff; --newtab-primary-action-background: #00ddff;
} }
@@ -111,7 +111,13 @@ body {
padding-inline: calc(var(--fxview-card-padding-inline) * 2); padding-inline: calc(var(--fxview-card-padding-inline) * 2);
margin: 0 calc(var(--fxview-card-padding-inline) * -1); margin: 0 calc(var(--fxview-card-padding-inline) * -1);
background: linear-gradient(to bottom, var(--fxview-background-color) 0%, var(--fxview-background-color) 95%, transparent 100%); background:
linear-gradient(
to bottom,
var(--fxview-background-color) 0%,
var(--fxview-background-color) 95%,
transparent 100%
);
/* When you use HCM or set custom colors, you can't use a gradient. */ /* When you use HCM or set custom colors, you can't use a gradient. */
@media (forced-colors) { @media (forced-colors) {
background: var(--fxview-background-color); background: var(--fxview-background-color);

2
browser/components/firefoxview/fxview-tab-row.css
View File

@@ -108,7 +108,7 @@
} }
.fxview-tab-row-button::part(button) { .fxview-tab-row-button::part(button) {
color: var(--fxview-text-primary-color); color: var(--fxview-text-primary-color)
} }
.fxview-tab-row-button[muted="true"]::part(button) { .fxview-tab-row-button[muted="true"]::part(button) {

2
browser/components/firefoxview/history.css
View File

@@ -59,7 +59,7 @@ moz-button.close::part(button) {
dialog { dialog {
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3); box-shadow: 0 2px 6px 0 rgba(0,0,0,0.3);
padding: 24px; padding: 24px;
} }

3
browser/components/firefoxview/view-opentabs.css
View File

@@ -24,8 +24,7 @@
} }
} }
.open-tabs-options, .open-tabs-options, .open-tabs-sort-wrapper {
.open-tabs-sort-wrapper {
display: flex; display: flex;
gap: 24px; gap: 24px;
} }

6
browser/components/firefoxview/view-syncedtabs.css
View File

@@ -16,15 +16,15 @@
.phone, .phone,
.mobile { .mobile {
background-image: url("chrome://browser/skin/device-phone.svg"); background-image: url('chrome://browser/skin/device-phone.svg');
} }
.desktop { .desktop {
background-image: url("chrome://browser/skin/device-desktop.svg"); background-image: url('chrome://browser/skin/device-desktop.svg');
} }
.tablet { .tablet {
background-image: url("chrome://browser/skin/device-tablet.svg"); background-image: url('chrome://browser/skin/device-tablet.svg');
} }
h2 { h2 {

12
browser/components/genai/chat.css
View File

@@ -76,7 +76,7 @@ browser {
} }
#multi-stage-message-root { #multi-stage-message-root {
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, .5);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
inset: 0; inset: 0;
@@ -235,16 +235,16 @@ browser {
margin-block: var(--space-small); margin-block: var(--space-small);
padding-inline-start: 24px; padding-inline-start: 24px;
&[data-l10n-id*="generate"] { &[data-l10n-id*=generate] {
background-image: url(chrome://global/skin/icons/edit-outline.svg); background-image: url(chrome://global/skin/icons/edit-outline.svg);
} }
&[data-l10n-id*="analyze"] { &[data-l10n-id*=analyze] {
background-image: url(chrome://global/skin/icons/eye.svg); background-image: url(chrome://global/skin/icons/eye.svg);
} }
&[data-l10n-id*="switch"] { &[data-l10n-id*=switch] {
background-image: url(chrome://global/skin/icons/arrows-updown.svg); background-image: url(chrome://global/skin/icons/arrows-updown.svg);
} }
&[data-l10n-id*="price"] { &[data-l10n-id*=price] {
background-image: url(chrome://browser/skin/price.svg); background-image: url(chrome://browser/skin/price.svg);
} }
} }
@@ -252,7 +252,7 @@ browser {
.link-paragraph { .link-paragraph {
color: var(--text-color-deemphasized); color: var(--text-color-deemphasized);
font-size: 0.8em; font-size: .8em;
} }
.inline-image { .inline-image {

4
browser/components/genai/content/link-preview-card.css
View File

@@ -6,7 +6,7 @@
.og-card { .og-card {
--og-main-font-size: 1.4rem; --og-main-font-size: 1.4rem;
background-color: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05)); background-color: light-dark(rgba(0,0,0,0.05), rgba(255,255,255,0.05));
font-size: 1.2em; font-size: 1.2em;
} }
@@ -52,7 +52,7 @@
position: relative; position: relative;
padding: var(--og-padding); padding: var(--og-padding);
.og-error-message-container { .og-error-message-container {
margin: 0; margin:0;
font-size: var(--og-main-font-size); font-size: var(--og-main-font-size);
.og-error-message { .og-error-message {

17
browser/components/genai/content/model-optin.css
View File

@@ -60,17 +60,26 @@
} }
&:indeterminate { &:indeterminate {
--optin-animation-base-color-1: light-dark(var(--color-blue-50), var(--color-blue-30)); --optin-animation-base-color-1: light-dark(
--optin-animation-base-color-2: color-mix(in srgb, var(--optin-animation-base-color-1) 25%, transparent); var(--color-blue-50),
var(--color-blue-30)
);
--optin-animation-base-color-2: color-mix(
in srgb,
var(--optin-animation-base-color-1) 25%,
transparent
);
animation: optin-loading-bar-animation 3s infinite; animation: optin-loading-bar-animation 3s infinite;
outline-color: var(--optin-animation-base-color-1); outline-color: var(--optin-animation-base-color-1);
border-color: var(--optin-animation-base-color-2); border-color: var(--optin-animation-base-color-2);
background: linear-gradient( background: linear-gradient(
100deg, 100deg,
color-mix(in srgb, var(--optin-animation-base-color-1), transparent 25%) 30%, color-mix(in srgb, var(--optin-animation-base-color-1), transparent 25%)
30%,
var(--optin-animation-base-color-2) 50%, var(--optin-animation-base-color-2) 50%,
color-mix(in srgb, var(--optin-animation-base-color-1), transparent 25%) 70% color-mix(in srgb, var(--optin-animation-base-color-1), transparent 25%)
70%
); );
background-size: 200% 100%; background-size: 200% 100%;

3
browser/components/messagepreview/messagepreview.css
View File

@@ -13,7 +13,8 @@ body {
} }
body { body {
background: url(chrome://browser/content/messagepreview/limelight.svg) center/contain no-repeat; background: url(chrome://browser/content/messagepreview/limelight.svg)
center/contain no-repeat;
-moz-context-properties: fill, fill-opacity; -moz-context-properties: fill, fill-opacity;
fill: var(--icon-color); fill: var(--icon-color);
fill-opacity: 0.2; fill-opacity: 0.2;

6
browser/components/places/metadataViewer/interactionsViewer.css
View File

@@ -3,7 +3,7 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
body { body {
padding: 0.5em 2em; padding: .5em 2em;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
@@ -19,7 +19,7 @@ body {
.message-bar-icon { .message-bar-icon {
vertical-align: middle; vertical-align: middle;
-moz-context-properties: fill; -moz-context-properties: fill;
fill: #ffbf00; fill: #FFBF00;
} }
#categories { #categories {
@@ -60,7 +60,7 @@ body {
} }
#tableViewer > div { #tableViewer > div {
padding: 0.3em 1em; padding: .3em 1em;
overflow-x: hidden; overflow-x: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;

2
browser/components/profiles/content/avatar.css
View File

@@ -33,6 +33,8 @@
background-color: var(--button-background-color-hover); background-color: var(--button-background-color-hover);
} }
@media (forced-colors) { @media (forced-colors) {
&:hover { &:hover {
border-color: SelectedItem; border-color: SelectedItem;

7
browser/components/profiles/content/profile-card.css
View File

@@ -7,7 +7,9 @@
:host { :host {
--avatar-size: 80px; --avatar-size: 80px;
--profile-card-radius: 12px; --profile-card-radius: 12px;
--profile-card-radius-inner: calc(var(--profile-card-radius) - var(--border-width)); --profile-card-radius-inner: calc(
var(--profile-card-radius) - var(--border-width)
);
} }
.profile-card { .profile-card {
@@ -74,7 +76,8 @@
background-position: center; background-position: center;
-moz-context-properties: fill, stroke; -moz-context-properties: fill, stroke;
fill: var(--icon-color); fill: var(--icon-color);
border-radius: var(--profile-card-radius-inner) var(--profile-card-radius-inner) 0 0; border-radius: var(--profile-card-radius-inner)
var(--profile-card-radius-inner) 0 0;
} }
.profile-avatar { .profile-avatar {

5
browser/components/profiles/content/profiles-pages.css
View File

@@ -17,7 +17,10 @@ body {
display: flex; display: flex;
justify-content: center; justify-content: center;
background-color: var(--newtab-background-color, var(--background-color-canvas)); background-color: var(
--newtab-background-color,
var(--background-color-canvas)
);
} }
edit-profile-card, edit-profile-card,

112
browser/components/protections/content/protections.css
View File

@@ -6,29 +6,29 @@
--card-padding: 24px; --card-padding: 24px;
--exit-icon-size: 12px; --exit-icon-size: 12px;
--exit-icon-position: calc((var(--card-padding) - var(--exit-icon-size)) / 2); --exit-icon-position: calc((var(--card-padding) - var(--exit-icon-size)) / 2);
--social-color: #9059ff; --social-color: #9059FF;
--cookie-color: #0090f4; --cookie-color: #0090F4;
--tracker-color: #2ac3a2; --tracker-color: #2AC3A2;
--fingerprinter-color: #ffa436; --fingerprinter-color: #FFA436;
--cryptominer-color: #adadbc; --cryptominer-color: #ADADBC;
/* Highlight colors for trackers */ /* Highlight colors for trackers */
--social-highlight-color: #7b4cdb; --social-highlight-color: #7B4CDB;
--cookie-highlight-color: #0081db; --cookie-highlight-color: #0081DB;
--tracker-highlight-color: #23a488; --tracker-highlight-color: #23A488;
--fingerprinter-highlight-color: #d37f17; --fingerprinter-highlight-color: #D37F17;
--cryptominer-highlight-color: #9292a0; --cryptominer-highlight-color: #9292A0;
--tab-highlight: var(--social-color); /* start with social selected */ --tab-highlight: var(--social-color); /* start with social selected */
--column-width: 16px; --column-width: 16px;
--graph-empty: #cececf; --graph-empty: #CECECF;
--graph-curve: cubic-bezier(0.66, 0.75, 0.59, 0.91); --graph-curve: cubic-bezier(.66,.75,.59,.91);
/* Colors for the loading indicator */ /* Colors for the loading indicator */
--protection-report-loader-color-stop: #aeaeae3d; --protection-report-loader-color-stop: #AEAEAE3D;
--protection-report-loader-gradient-opacity: 0.95; --protection-report-loader-gradient-opacity: 0.95;
--grey-70: #38383d; --grey-70: #38383D;
--grey-90-a60: rgba(12, 12, 13, 0.6); --grey-90-a60: rgba(12, 12, 13, 0.6);
--gear-icon-fill: var(--grey-90-a60); --gear-icon-fill: var(--grey-90-a60);
@@ -40,29 +40,27 @@ body {
box-sizing: border-box; box-sizing: border-box;
} }
*, *, *:before, *:after {
*:before,
*:after {
box-sizing: inherit; box-sizing: inherit;
} }
body[focuseddatatype="social"] { body[focuseddatatype=social] {
--tab-highlight: var(--social-color); --tab-highlight: var(--social-color);
} }
body[focuseddatatype="cookie"] { body[focuseddatatype=cookie] {
--tab-highlight: var(--cookie-color); --tab-highlight: var(--cookie-color);
} }
body[focuseddatatype="tracker"] { body[focuseddatatype=tracker] {
--tab-highlight: var(--tracker-color); --tab-highlight: var(--tracker-color);
} }
body[focuseddatatype="fingerprinter"] { body[focuseddatatype=fingerprinter] {
--tab-highlight: var(--fingerprinter-color); --tab-highlight: var(--fingerprinter-color);
} }
body[focuseddatatype="cryptominer"] { body[focuseddatatype=cryptominer] {
--tab-highlight: var(--cryptominer-color); --tab-highlight: var(--cryptominer-color);
} }
@@ -200,13 +198,13 @@ a.hidden,
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--social-highlight-color: #9661ff; --social-highlight-color: #9661FF;
--cookie-highlight-color: #2ba8ff; --cookie-highlight-color: #2BA8FF;
--tracker-highlight-color: #39e1bc; --tracker-highlight-color: #39E1BC;
--fingerprinter-highlight-color: #ffb65e; --fingerprinter-highlight-color: #FFB65E;
--cryptominer-highlight-color: #bebeca; --cryptominer-highlight-color: #BEBECA;
--gear-icon-fill: rgba(249, 249, 250, 0.6); --gear-icon-fill: rgba(249, 249, 250, 0.60);
--hover-grey-link: var(--grey-30); --hover-grey-link: var(--grey-30);
--feature-banner-color: rgba(255, 255, 255, 0.1); --feature-banner-color: rgba(255, 255, 255, 0.1);
} }
@@ -248,7 +246,7 @@ a.hidden,
.card .content { .card .content {
margin-block: 5px 0; margin-block: 5px 0;
font-size: 0.93em; font-size: .93em;
cursor: default; cursor: default;
color: var(--text-color-deemphasized); color: var(--text-color-deemphasized);
} }
@@ -744,7 +742,7 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover {
} }
#monitor-partial-breaches-percentage { #monitor-partial-breaches-percentage {
font-size: 0.93em; font-size: .93em;
cursor: default; cursor: default;
color: var(--text-color-deemphasized); color: var(--text-color-deemphasized);
float: inline-end; float: inline-end;
@@ -757,17 +755,17 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover {
height: 25px; height: 25px;
box-shadow: 0 0 0 1px rgba(202, 201, 213, 0.5); box-shadow: 0 0 0 1px rgba(202, 201, 213, 0.5);
border: none; border: none;
background: linear-gradient(-45deg, #0250bb 0%, #9059ff 100%); background: linear-gradient(-45deg, #0250BB 0%, #9059FF 100%);
direction: rtl; direction: rtl;
} }
.progress-bar:dir(rtl) { .progress-bar:dir(rtl) {
direction: ltr; direction: ltr;
background: linear-gradient(-45deg, #0250bb 0%, #9059ff 100%); background: linear-gradient(-45deg, #0250BB 0%, #9059FF 100%);
} }
.progress-bar::-moz-progress-bar { .progress-bar::-moz-progress-bar {
background: #ffffff; background: #FFFFFF;
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
} }
@@ -875,64 +873,64 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover {
.monitor-block a { .monitor-block a {
outline: none; outline: none;
color: #ffffff; color: #FFFFFF;
padding: 19px 0; padding: 19px 0;
} }
.monitor-block a:hover { .monitor-block a:hover {
text-decoration: none; text-decoration: none;
color: #ffffff; color: #FFFFFF;
} }
.email { .email {
background: linear-gradient(162.33deg, #ab71ff 0%, #9059ff 100%); background: linear-gradient(162.33deg, #AB71FF 0%, #9059FF 100%);
grid-column: 1; grid-column: 1;
} }
.email:hover { .email:hover {
background: linear-gradient(162.33deg, #7d43d1 0%, #7740e6 100%); background: linear-gradient(162.33deg, #7D43D1 0%, #7740E6 100%);
} }
.email:dir(rtl) { .email:dir(rtl) {
background: linear-gradient(197.67deg, #ab71ff 0%, #9059ff 100%); background: linear-gradient(197.67deg, #AB71FF 0%, #9059FF 100%);
} }
.email:dir(rtl):hover { .email:dir(rtl):hover {
background: linear-gradient(197.67deg, #7d43d1 0%, #7740e6 100%); background: linear-gradient(197.67deg, #7D43D1 0%, #7740E6 100%);
} }
.breaches { .breaches {
background: linear-gradient(162.33deg, #9059ff 0%, #7542e5 100%); background: linear-gradient(162.33deg, #9059FF 0%, #7542E5 100%);
grid-column: 2; grid-column: 2;
} }
.breaches:hover { .breaches:hover {
background: linear-gradient(162.33deg, #7740e6 0%, #4714b7 100%); background: linear-gradient(162.33deg, #7740E6 0%, #4714B7 100%);
} }
.breaches:dir(rtl) { .breaches:dir(rtl) {
background: linear-gradient(197.67deg, #9059ff 0%, #7542e5 100%); background: linear-gradient(197.67deg, #9059FF 0%, #7542E5 100%)
} }
.breaches:dir(rtl):hover { .breaches:dir(rtl):hover {
background: linear-gradient(197.67deg, #7740e6 0%, #4714b7 100%); background: linear-gradient(197.67deg, #7740E6 0%, #4714B7 100%)
} }
.passwords { .passwords {
background: linear-gradient(162.33deg, #7542e5 0%, #592acb 100%); background: linear-gradient(162.33deg, #7542E5 0%, #592ACB 100%);
grid-column: 3; grid-column: 3;
} }
.passwords:hover { .passwords:hover {
background: linear-gradient(162.33deg, #4714b7 0%, #2b009d 100%); background: linear-gradient(162.33deg, #4714B7 0%, #2B009D 100%);
} }
.passwords:dir(rtl) { .passwords:dir(rtl) {
background: linear-gradient(197.67deg, #7542e5 0%, #592acb 100%); background: linear-gradient(197.67deg, #7542E5 0%, #592ACB 100%)
} }
.passwords:dir(rtl):hover { .passwords:dir(rtl):hover {
background: linear-gradient(197.67deg, #4714b7 0%, #2b009d 100%); background: linear-gradient(197.67deg, #4714B7 0%, #2B009D 100%)
} }
.monitor-stat { .monitor-stat {
@@ -952,7 +950,7 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover {
.icon-med { .icon-med {
width: 24px; width: 24px;
height: 24px; height: 24px;
-moz-context-properties: fill, fill-opacity; -moz-context-properties: fill,fill-opacity;
fill: white; fill: white;
fill-opacity: 0.65; fill-opacity: 0.65;
padding: 5px; padding: 5px;
@@ -1033,31 +1031,19 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover {
height: 110px; height: 110px;
width: 765px; width: 765px;
content: ""; content: "";
background-image: linear-gradient( 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%);
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; background-repeat: no-repeat;
animation-duration: 2s; animation-duration: 2s;
animation-iteration-count: infinite; animation-iteration-count: infinite;
animation-name: loading; animation-name: loading;
animation-timing-function: cubic-bezier(0.07, 0.95, 1, 1); animation-timing-function: cubic-bezier(.07,.95,1,1);
background-size: 700px 100%; background-size: 700px 100%;
opacity: var(--protection-report-loader-gradient-opacity); opacity: var(--protection-report-loader-gradient-opacity);
} }
.monitor-card.loading:dir(rtl)::after, .monitor-card.loading:dir(rtl)::after,
.lockwise-card.loading:dir(rtl)::after { .lockwise-card.loading:dir(rtl)::after {
background-image: linear-gradient( 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%);
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; animation-name: loading-rtl;
} }

3
browser/components/screenshots/screenshots-buttons.css
View File

@@ -24,8 +24,7 @@
background-image: url("chrome://browser/content/screenshots/menu-visible.svg"); background-image: url("chrome://browser/content/screenshots/menu-visible.svg");
} }
#full-page, #full-page, #visible-page {
#visible-page {
-moz-context-properties: fill, stroke; -moz-context-properties: fill, stroke;
fill: currentColor; fill: currentColor;
/* stroke is the secondary fill color used to define the viewport shape in the SVGs */ /* stroke is the secondary fill color used to define the viewport shape in the SVGs */

4
browser/components/search/content/addEngine.css
View File

@@ -12,7 +12,7 @@ hbox {
#titleContainer { #titleContainer {
padding-bottom: var(--space-xlarge); padding-bottom: var(--space-xlarge);
--icon-url: url("chrome://browser/skin/preferences/category-search.svg"); --icon-url: url("chrome://browser/skin/preferences/category-search.svg")
} }
.dialogRow { .dialogRow {
@@ -34,6 +34,8 @@ input[type="url"] {
flex-direction: column; flex-direction: column;
} }
.error-label { .error-label {
display: flex; display: flex;
font-size: var(--font-size-small); font-size: var(--font-size-small);

10
browser/components/search/content/contentSearchUI.css
View File

@@ -3,11 +3,11 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
.contentSearchSuggestionTable { .contentSearchSuggestionTable {
background-color: hsla(0, 0%, 100%, 0.99); background-color: hsla(0,0%,100%,.99);
color: black; color: black;
border: 1px solid hsla(0, 0%, 0%, 0.2); border: 1px solid hsla(0, 0%, 0%, .2);
border-top: none; border-top: none;
box-shadow: 0 5px 10px hsla(0, 0%, 0%, 0.1); box-shadow: 0 5px 10px hsla(0, 0%, 0%, .1);
position: absolute; position: absolute;
inset-inline-start: 0; inset-inline-start: 0;
z-index: 1001; z-index: 1001;
@@ -108,7 +108,7 @@
padding: 0; padding: 0;
border: none; border: none;
background: none; background: none;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAWCAYAAAABxvaqAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gofECQNNVW2/AAAABBJREFUGFdjOHPmzH8GehEA/KpKg9YTf4AAAAAASUVORK5CYII="); background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAWCAYAAAABxvaqAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gofECQNNVW2/AAAABBJREFUGFdjOHPmzH8GehEA/KpKg9YTf4AAAAAASUVORK5CYII=');
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right center; background-position: right center;
} }
@@ -146,7 +146,7 @@
padding: 0; padding: 0;
height: 32px; height: 32px;
border: none; border: none;
border-top: 1px solid hsla(0, 0%, 0%, 0.08); border-top: 1px solid hsla(0, 0%, 0%, .08);
text-align: center; text-align: center;
width: 100%; width: 100%;
} }

16
browser/components/search/test/browser/telemetry/serp.css
View File

@@ -33,7 +33,7 @@ nav {
margin-bottom: 20px; margin-bottom: 20px;
} }
nav > div, nav>div,
#searchform, #searchform,
.moz-carousel, .moz-carousel,
.factrow { .factrow {
@@ -41,12 +41,12 @@ nav > div,
align-items: center; align-items: center;
} }
nav > div, nav>div,
#searchform { #searchform {
gap: 40px; gap: 40px;
} }
nav > div, nav>div,
#searchform, #searchform,
#searchresults, #searchresults,
#top { #top {
@@ -68,7 +68,7 @@ nav > div,
overflow-y: hidden; overflow-y: hidden;
} }
.card-container > .card { .card-container>.card {
height: 160px; height: 160px;
border-radius: 3px; border-radius: 3px;
border: 1px solid var(--subtle); border: 1px solid var(--subtle);
@@ -77,11 +77,11 @@ nav > div,
padding: 10px; padding: 10px;
} }
.card-container > .card:not(:last-child) { .card-container>.card:not(:last-child) {
margin-right: 10px; margin-right: 10px;
} }
.card-container > .card > a { .card-container>.card>a {
display: block; display: block;
margin-bottom: 2px; margin-bottom: 2px;
} }
@@ -111,13 +111,13 @@ nav > div,
width: calc(var(--carousel-card-width) * 4 + (3 * 10px)); width: calc(var(--carousel-card-width) * 4 + (3 * 10px));
} }
.moz-carousel > .moz-inner { .moz-carousel>.moz-inner {
border: 1px solid var(--subtle); border: 1px solid var(--subtle);
border-radius: 10px; border-radius: 10px;
padding: 10px; padding: 10px;
} }
.moz-carousel > .moz-carousel-card { .moz-carousel>.moz-carousel-card {
flex: 1 0 var(--carousel-card-width); flex: 1 0 var(--carousel-card-width);
border: 1px solid var(--subtle); border: 1px solid var(--subtle);
font-size: 14px; font-size: 14px;

10
browser/components/shopping/content/letter-grade.css
View File

@@ -5,11 +5,11 @@
@import url("chrome://global/skin/in-content/common.css"); @import url("chrome://global/skin/in-content/common.css");
:host { :host {
--background-term-a: #b3ffe3; --background-term-a: #B3FFE3;
--background-term-b: #80ebff; --background-term-b: #80EBFF;
--background-term-c: #ffea80; --background-term-c: #FFEA80;
--background-term-d: #ffb587; --background-term-d: #FFB587;
--background-term-f: #ff848b; --background-term-f: #FF848B;
--in-content-box-border-color: rgba(0, 0, 0, 0.15); --in-content-box-border-color: rgba(0, 0, 0, 0.15);
--inner-border: 1px solid var(--in-content-box-border-color); --inner-border: 1px solid var(--in-content-box-border-color);
--letter-grade-width: 1.5rem; --letter-grade-width: 1.5rem;

4
browser/components/shopping/content/shopping-container.css
View File

@@ -46,7 +46,7 @@
} }
.header-wrapper-shadow { .header-wrapper-shadow {
box-shadow: 0 1px 2px 0 rgba(58, 57, 68, 0.2); box-shadow: 0 1px 2px 0 rgba(58, 57, 68, 0.20);
} }
#beta-marker { #beta-marker {
@@ -148,7 +148,7 @@
@keyframes fade-in { @keyframes fade-in {
from { from {
opacity: 0.25; opacity: .25;
} }
to { to {
opacity: 1; opacity: 1;

4
browser/components/shopping/content/shopping-message-bar.css
View File

@@ -58,8 +58,8 @@ button {
} }
} }
:host([type="analysis-in-progress"]) .icon, :host([type=analysis-in-progress]) .icon,
:host([type="reanalysis-in-progress"]) .icon { :host([type=reanalysis-in-progress]) .icon {
--message-bar-icon-url: conic-gradient(var(--icon-color-information) var(--analysis-progress-pcent, 0%), transparent var(--analysis-progress-pcent, 0%)); --message-bar-icon-url: conic-gradient(var(--icon-color-information) var(--analysis-progress-pcent, 0%), transparent var(--analysis-progress-pcent, 0%));
border: 1px solid var(--icon-color); border: 1px solid var(--icon-color);
border-radius: 50%; border-radius: 50%;

2
browser/components/sidebar/sidebar-customize.css
View File

@@ -55,7 +55,7 @@
padding-block: var(--space-medium); padding-block: var(--space-medium);
box-sizing: border-box; box-sizing: border-box;
&:not(:last-of-type) { &:not(:last-of-type){
border-bottom: 0.5px solid var(--panel-separator-color); border-bottom: 0.5px solid var(--panel-separator-color);
} }
} }

2
browser/components/sidebar/sidebar-main.css
View File

@@ -64,7 +64,7 @@
} }
moz-button:not([type~="ghost"]):not(:hover) { moz-button:not([type~="ghost"]):not(:hover) {
&::part(button) { &::part(button){
background-color: var(--toolbarbutton-active-background); background-color: var(--toolbarbutton-active-background);
} }
} }

5
browser/components/sidebar/sidebar-tab-row.css
View File

@@ -2,7 +2,7 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this * 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/. */ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
#fxview-tab-row-secondary-button { #fxview-tab-row-secondary-button {
display: none; display: none;
:host(:hover) & { :host(:hover) & {
@@ -25,8 +25,7 @@
gap: 8px; gap: 8px;
flex: 1; flex: 1;
&:hover, &:hover, &:hover:active {
&:hover:active {
background-color: unset; background-color: unset;
} }
} }

4
browser/components/sidebar/sidebar.css
View File

@@ -9,7 +9,7 @@
--sidebar-box-border-color: light-dark(color-mix(in srgb, currentColor 10%, transparent), var(--border-color-deemphasized)); --sidebar-box-border-color: light-dark(color-mix(in srgb, currentColor 10%, transparent), var(--border-color-deemphasized));
--sidebar-box-border-width: 0.5px; --sidebar-box-border-width: 0.5px;
--sidebar-box-border: var(--sidebar-box-border-width) solid var(--sidebar-box-border-color); --sidebar-box-border: var(--sidebar-box-border-width) solid var(--sidebar-box-border-color);
--sidebar-box-background: light-dark(rgba(0, 0, 0, 0.03), rgba(255, 255, 255, 0.05)); --sidebar-box-background: light-dark(rgba(0, 0, 0, .03), rgba(255, 255, 255, .05));
--sidebar-box-color: currentColor; --sidebar-box-color: currentColor;
background-color: transparent; background-color: transparent;
color: var(--sidebar-text-color); color: var(--sidebar-text-color);
@@ -75,7 +75,7 @@ fxview-search-textbox {
&::part(container) { &::part(container) {
width: 100%; width: 100%;
height: var(--size-item-large); height: var(--size-item-large)
} }
} }

6
browser/components/storybook/.storybook/addon-fluent/fluent-panel.css
View File

@@ -7,11 +7,11 @@
} }
.addon-panel-message { .addon-panel-message {
background: #fff5cf; background: #FFF5CF;
color: #333333; color: #333333;
padding: 10px 15px; padding: 10px 15px;
line-height: 20px; line-height: 20px;
box-shadow: rgba(0, 0, 0, 0.1) 0 -1px 0 0 inset; box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset;
font-size: 13px; font-size: 13px;
} }
@@ -29,7 +29,7 @@ table.addon-panel-table thead.addon-panel-table-head th {
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
table.addon-panel-table thead.addon-panel-table-head th { table.addon-panel-table thead.addon-panel-table-head th {
color: rgba(201, 205, 207, 0.55); color: rgba(201, 205, 207, 0.55)
} }
} }

24
browser/components/textrecognition/textrecognition.css
View File

@@ -84,8 +84,8 @@
.textRecognitionSuccessIcon { .textRecognitionSuccessIcon {
display: inline-block; display: inline-block;
background-color: #2ac3a2; background-color: #2AC3A2;
border: 3px solid #2ac3a2; border: 3px solid #2AC3A2;
fill: var(--in-content-page-background); fill: var(--in-content-page-background);
-moz-context-properties: fill; -moz-context-properties: fill;
border-radius: 10px; border-radius: 10px;
@@ -96,13 +96,13 @@
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
.textRecognitionSuccessIcon { .textRecognitionSuccessIcon {
animation: success-animation 0.3s cubic-bezier(0.3, 2, 0.48, 0.94); animation: success-animation 0.3s cubic-bezier(.3,2,.48,.94);
} }
} }
.textRecognitionNoResultIcon { .textRecognitionNoResultIcon {
display: inline-block; display: inline-block;
fill: #ffbf00; fill: #FFBF00;
-moz-context-properties: fill; -moz-context-properties: fill;
width: 18px; width: 18px;
height: 18px; height: 18px;
@@ -122,21 +122,13 @@
} }
@keyframes throbber-animation-ltr { @keyframes throbber-animation-ltr {
0% { 0% { transform: translateX(0); }
transform: translateX(0); 100% { transform: translateX(-100%); }
}
100% {
transform: translateX(-100%);
}
} }
@keyframes throbber-animation-rtl { @keyframes throbber-animation-rtl {
0% { 0% { transform: translateX(0); }
transform: translateX(0); 100% { transform: translateX(100%); }
}
100% {
transform: translateX(100%);
}
} }
@keyframes success-animation { @keyframes success-animation {

7
browser/components/urlbar/tests/browser/dynamicResult0.css
View File

@@ -5,7 +5,7 @@
--testDynamicResult0: ok0; --testDynamicResult0: ok0;
} }
.urlbarView-row[dynamicType="test"] > .urlbarView-row-inner { .urlbarView-row[dynamicType=test] > .urlbarView-row-inner {
display: flex; display: flex;
align-items: center; align-items: center;
min-height: 32px; min-height: 32px;
@@ -46,8 +46,5 @@
.urlbarView-dynamic-test-button2[selected] { .urlbarView-dynamic-test-button2[selected] {
color: white; color: white;
background-color: var(--urlbarView-primary-button-background); background-color: var(--urlbarView-primary-button-background);
box-shadow: box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3);
0 0 0 1px #0a84ff inset,
0 0 0 1px #0a84ff,
0 0 0 4px rgba(10, 132, 255, 0.3);
} }

7
browser/components/urlbar/tests/browser/dynamicResult1.css
View File

@@ -5,7 +5,7 @@
--testDynamicResult1: ok1; --testDynamicResult1: ok1;
} }
.urlbarView-row[dynamicType="test"] > .urlbarView-row-inner { .urlbarView-row[dynamicType=test] > .urlbarView-row-inner {
display: flex; display: flex;
align-items: center; align-items: center;
min-height: 32px; min-height: 32px;
@@ -46,8 +46,5 @@
.urlbarView-dynamic-test-button2[selected] { .urlbarView-dynamic-test-button2[selected] {
color: white; color: white;
background-color: var(--urlbarView-primary-button-background); background-color: var(--urlbarView-primary-button-background);
box-shadow: box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3);
0 0 0 1px #0a84ff inset,
0 0 0 1px #0a84ff,
0 0 0 4px rgba(10, 132, 255, 0.3);
} }

6
browser/extensions/formautofill/skin/shared/editAddress.css
View File

@@ -19,9 +19,7 @@
flex: 0 1 100%; flex: 0 1 100%;
} }
input, input, textarea, select {
textarea,
select {
width: 100%; width: 100%;
margin: 0; margin: 0;
} }
@@ -46,7 +44,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
text-align: start; text-align: start;
opacity: 0.5; opacity: .5;
padding-inline-start: 1em; padding-inline-start: 1em;
flex: 1; flex: 1;
} }

15
browser/extensions/formautofill/skin/shared/editDialog-shared.css
View File

@@ -3,10 +3,10 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
:root { :root {
--in-field-label-size: 0.8em; --in-field-label-size: .8em;
--grid-column-row-gap: 8px; --grid-column-row-gap: 8px;
/* Use the animation-easing-function that is defined in global-shared.css. */ /* Use the animation-easing-function that is defined in global-shared.css. */
--animation-easing-function: cubic-bezier(0.07, 0.95, 0, 1); --animation-easing-function: cubic-bezier(.07,.95,0,1);
} }
/* The overly specific input attributes are required to override /* The overly specific input attributes are required to override
@@ -17,7 +17,7 @@ form input[type="text"],
form textarea, form textarea,
form select { form select {
flex-grow: 1; flex-grow: 1;
padding-top: calc(var(--in-field-label-size) + 0.4em); padding-top: calc(var(--in-field-label-size) + .4em);
} }
form input[type="tel"] { form input[type="tel"] {
@@ -50,13 +50,12 @@ form div {
form :is(label, div) .label-text { form :is(label, div) .label-text {
position: absolute; position: absolute;
opacity: 0.5; opacity: .5;
pointer-events: none; pointer-events: none;
inset-inline-start: 10px; inset-inline-start: 10px;
top: 0.2em; top: .2em;
transition: transition: top .2s var(--animation-easing-function),
top 0.2s var(--animation-easing-function), font-size .2s var(--animation-easing-function);
font-size 0.2s var(--animation-easing-function);
} }
form :is(label, div):focus-within .label-text, form :is(label, div):focus-within .label-text,

7
browser/extensions/webcompat/injections/css/bug1770962-coldwellbankerhomes.com-image-height.css
View File

@@ -8,6 +8,11 @@
* WebCompat issue #102872 - https://webcompat.com/issues/102872 * WebCompat issue #102872 - https://webcompat.com/issues/102872
*/ */
.property-snapshot-psr-panel .prop-pix .photo-carousel.owl .owl-stage-outer .owl-item img { .property-snapshot-psr-panel
.prop-pix
.photo-carousel.owl
.owl-stage-outer
.owl-item
img {
height: -moz-available; height: -moz-available;
} }

3
browser/extensions/webcompat/injections/css/bug1886293-futurePLC-sites-trending_scrollbars.css
View File

@@ -29,5 +29,6 @@
.trending__list { .trending__list {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: var(--trending-scrollbar-color) var(--trending-scrollbar-background-color); scrollbar-color: var(--trending-scrollbar-color)
var(--trending-scrollbar-background-color);
} }

4
browser/extensions/webcompat/injections/css/bug1947105-pexels.com-nudge-thanks-popup-onscreen.css
View File

@@ -9,6 +9,8 @@
* *
* The site is using a faulty -moz-transform rule, which we can unset. * The site is using a faulty -moz-transform rule, which we can unset.
*/ */
[class*="Modal_overlay"][class*="Modal_positionContentCenter"]:has([class*="after-open"]) { [class*="Modal_overlay"][class*="Modal_positionContentCenter"]:has(
[class*="after-open"]
) {
justify-content: unset; justify-content: unset;
} }

8
browser/fxr/content/common.css
View File

@@ -2,16 +2,16 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this * 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/. */ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
user-select: none; user-select: none;
font-family: "Open Sans", sans-serif; font-family: 'Open Sans', sans-serif;
} }
.modal_mask:not([hidden]) { .modal_mask:not([hidden]) {
background-color: #00cc00; background-color: #00CC00;
height: 100%; height: 100%;
width: 100%; width: 100%;
@@ -32,7 +32,7 @@
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left :0;
} }
.modal_hide { .modal_hide {

10
browser/fxr/content/fxrui.css
View File

@@ -4,11 +4,11 @@
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
html, html, body {
body {
height: 100%; height: 100%;
} }
body { body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -55,7 +55,7 @@ body {
} }
.icon_disabled_hide:disabled { .icon_disabled_hide:disabled {
display: none; display:none;
} }
.icon_backward { .icon_backward {
background-image: url("assets/icon-backward.svg"); background-image: url("assets/icon-backward.svg");
@@ -113,7 +113,7 @@ body {
border: none; border: none;
font-size: 18px; font-size: 18px;
font-family: "Open Sans", sans-serif; font-family: 'Open Sans', sans-serif;
mask-image: linear-gradient(to left, transparent, black 8ch); mask-image: linear-gradient(to left, transparent, black 8ch);
} }
@@ -132,7 +132,7 @@ body {
* fill the entire viewport * fill the entire viewport
*/ */
:root[inFullScreen] .navbar_container { :root[inFullScreen] .navbar_container {
display: none; display:none;
} }
.browser_settings { .browser_settings {

30
browser/fxr/content/fxrui_blue.css
View File

@@ -2,25 +2,25 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this * 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/. */ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
/* These not-very-descriptive variable names for colors come /* These not-very-descriptive variable names for colors come
* from the design documents and are maintained to make it * from the design documents and are maintained to make it
* easier to map between the stylesheet and the design doc. * easier to map between the stylesheet and the design doc.
*/ */
:root { :root {
--num01: #1d2e3b; --num01: #1D2E3B;
--num02: #4c495c; --num02: #4C495C;
--num03: #7d8896; --num03: #7D8896;
--num04: #b3becc; --num04: #B3BECC;
--num06: #ffffff; --num06: #FFFFFF;
--num07: #00b3e3; --num07: #00B3E3;
--num08: #56d9f6; --num08: #56D9F6;
--num09: #0968b6; --num09: #0968B6;
--num13: #2c3a50; --num13: #2C3A50;
--num13_alpha: #2c3a5080; --num13_alpha: #2C3A5080;
--num14: #596677; --num14: #596677;
--num14_alpha: #59667780; --num14_alpha: #59667780;
--num16: #e7eaf0; --num16: #E7EAF0;
--num19: #ffffff; --num19: #FFFFFF;
--secure: #f7ce4d; --secure: #f7ce4d;
} }
@@ -53,10 +53,10 @@ body {
background-color: var(--num02); background-color: var(--num02);
} }
.urlbar_container:hover { .urlbar_container:hover {
border-color: var(--num04); border-color:var(--num04);
} }
.urlbar_container:focus-within { .urlbar_container:focus-within {
border-color: var(--num08); border-color:var(--num08);
background-color: var(--num01); background-color: var(--num01);
} }

4
browser/fxr/content/prefs.css
View File

@@ -13,7 +13,7 @@ body {
background-color: transparent; background-color: transparent;
} }
.settings_header { .settings_header{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
@@ -77,7 +77,7 @@ body {
} }
.button_report_issue_icon { .button_report_issue_icon {
float: left; float:left;
height: 30px; height: 30px;
margin: 5px; margin: 5px;
} }

4
browser/themes/linux/browser.css
View File

@@ -133,7 +133,7 @@
/* Opacity rounds to 0 or 1 on Linux without an X compositor, making the /* Opacity rounds to 0 or 1 on Linux without an X compositor, making the
background color not visible. Anti-aliasing is not available either. Make a background color not visible. Anti-aliasing is not available either. Make a
thicker outline and cancel border-radius for that case. */ thicker outline and cancel border-radius for that case. */
outline: 4px solid rgb(0, 200, 215); outline: 4px solid rgb(0,200,215);
border-radius: 0 !important; border-radius: 0 !important;
} }
@@ -185,7 +185,7 @@
width: 24px; width: 24px;
height: 24px; height: 24px;
/* Matches the libadwaita transition */ /* Matches the libadwaita transition */
transition: background-color 0.2s ease; transition: background-color .2s ease;
} }
&:hover > .toolbarbutton-icon { &:hover > .toolbarbutton-icon {

1
browser/themes/linux/sanitizeDialog.css
View File

@@ -11,7 +11,6 @@
margin-inline-start: 3px; margin-inline-start: 3px;
} }
/* prettier-ignore */
#sanitizeEverythingWarningIcon { #sanitizeEverythingWarningIcon {
list-style-image: image-set( list-style-image: image-set(
"moz-icon://stock/dialog-warning?size=48" 1x, "moz-icon://stock/dialog-warning?size=48" 1x,

20
browser/themes/osx/browser.css
View File

@@ -5,7 +5,7 @@
@import url("chrome://browser/skin/browser-shared.css"); @import url("chrome://browser/skin/browser-shared.css");
:root { :root {
--arrowpanel-field-background: light-dark(rgba(249, 249, 250, 0.3), rgba(12, 12, 13, 0.3)); --arrowpanel-field-background: light-dark(rgba(249, 249, 250, .3), rgba(12, 12, 13, .3));
} }
/* stylelint-disable-next-line media-query-no-invalid */ /* stylelint-disable-next-line media-query-no-invalid */
@@ -57,7 +57,7 @@
/** End titlebar **/ /** End titlebar **/
:root[chromehidden~="toolbar"][chromehidden~="location"][chromehidden~="directories"] { :root[chromehidden~="toolbar"][chromehidden~="location"][chromehidden~="directories"] {
border-top: 1px solid rgba(0, 0, 0, 0.65); border-top: 1px solid rgba(0,0,0,0.65);
} }
/* ----- BOOKMARK TOOLBAR ----- */ /* ----- BOOKMARK TOOLBAR ----- */
@@ -96,7 +96,7 @@
resembles the system outline, bringing the Urlbar in line with panels and resembles the system outline, bringing the Urlbar in line with panels and
other Mac apps. */ other Mac apps. */
#urlbar[open] > #urlbar-background { #urlbar[open] > #urlbar-background {
outline: 1px solid var(--focus-outline-color); outline: 1px solid var(--focus-outline-color)
} }
} }
@@ -115,7 +115,7 @@
/* ----- AUTOCOMPLETE ----- */ /* ----- AUTOCOMPLETE ----- */
#PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] { #PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
border-top: 1px solid #c7c7c7; border-top: 1px solid #C7C7C7;
} }
/* Bookmarking panel */ /* Bookmarking panel */
@@ -137,14 +137,14 @@
margin: 0; margin: 0;
} }
#editBMPanel_folderTree > treechildren::-moz-tree-row(blur, selected), #editBMPanel_folderTree > treechildren::-moz-tree-row(blur,selected),
#editBMPanel_tagsSelector:not(:focus) > richlistitem[selected] { #editBMPanel_tagsSelector:not(:focus) > richlistitem[selected] {
background-color: var(--arrowpanel-dimmed); background-color: var(--arrowpanel-dimmed);
} }
#editBMPanel_folderTree > treechildren::-moz-tree-twisty(blur, selected), #editBMPanel_folderTree > treechildren::-moz-tree-twisty(blur,selected),
#editBMPanel_folderTree > treechildren::-moz-tree-image(blur, selected), #editBMPanel_folderTree > treechildren::-moz-tree-image(blur,selected),
#editBMPanel_folderTree > treechildren::-moz-tree-cell-text(blur, selected), #editBMPanel_folderTree > treechildren::-moz-tree-cell-text(blur,selected),
#editBMPanel_tagsSelector:not(:focus) > richlistitem[selected] { #editBMPanel_tagsSelector:not(:focus) > richlistitem[selected] {
color: inherit; color: inherit;
} }
@@ -174,7 +174,7 @@
} }
.tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-icon-image:not([selected], [multiselected]) { .tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-icon-image:not([selected], [multiselected]) {
opacity: 0.9; opacity: .9;
} }
/* /*
@@ -186,7 +186,7 @@
} }
.tab-label-container:not([selected], [multiselected]) { .tab-label-container:not([selected], [multiselected]) {
opacity: 0.7; opacity: .7;
} }
.tabbrowser-tab { .tabbrowser-tab {

2
browser/themes/osx/customizableui/panelUI.css
View File

@@ -8,7 +8,7 @@
scrollbar-color: color-mix(in srgb, currentColor 26%, transparent) transparent; scrollbar-color: color-mix(in srgb, currentColor 26%, transparent) transparent;
} }
.subviewbutton:not([image], [targetURI], .bookmark-item) > .menu-icon { .subviewbutton:not([image],[targetURI],.bookmark-item) > .menu-icon {
display: none; display: none;
} }

2
browser/themes/osx/downloads/downloads.css
View File

@@ -6,7 +6,7 @@
:root { :root {
--downloads-item-height: 6em; --downloads-item-height: 6em;
--downloads-item-font-size-factor: 0.8; --downloads-item-font-size-factor: 0.80;
--downloads-item-details-opacity: 0.7; --downloads-item-details-opacity: 0.7;
--downloads-item-disabled-opacity: 0.7; --downloads-item-disabled-opacity: 0.7;
} }

4
browser/themes/osx/places/organizer.css
View File

@@ -45,12 +45,12 @@
&:not(:hover):-moz-window-inactive > .toolbarbutton-icon, &:not(:hover):-moz-window-inactive > .toolbarbutton-icon,
&[type="menu"][disabled] > .toolbarbutton-menu-dropmarker, &[type="menu"][disabled] > .toolbarbutton-menu-dropmarker,
&:not(:hover):-moz-window-inactive[type="menu"] > .toolbarbutton-menu-dropmarker { &:not(:hover):-moz-window-inactive[type="menu"] > .toolbarbutton-menu-dropmarker {
opacity: 0.5; opacity: .5;
} }
&:-moz-window-inactive[disabled] > .toolbarbutton-icon, &:-moz-window-inactive[disabled] > .toolbarbutton-icon,
&:-moz-window-inactive[type="menu"][disabled] > .toolbarbutton-menu-dropmarker { &:-moz-window-inactive[type="menu"][disabled] > .toolbarbutton-menu-dropmarker {
opacity: 0.25; opacity: .25;
} }
> menupopup { > menupopup {

24
browser/themes/shared/UITour.css
View File

@@ -23,7 +23,7 @@
transform: scale(0.8); transform: scale(0.8);
} }
50% { 50% {
transform: scale(1); transform: scale(1.0);
} }
to { to {
transform: scale(0.8); transform: scale(0.8);
@@ -32,13 +32,13 @@
@keyframes uitour-color { @keyframes uitour-color {
from { from {
border-color: #5b9cd9; border-color: #5B9CD9;
} }
50% { 50% {
border-color: #ff0000; border-color: #FF0000;
} }
to { to {
border-color: #5b9cd9; border-color: #5B9CD9;
} }
} }
@@ -177,20 +177,20 @@
#UITourTooltipButtons > button:not(.button-link) { #UITourTooltipButtons > button:not(.button-link) {
appearance: none; appearance: none;
background-color: rgb(251, 251, 251); background-color: rgb(251,251,251);
border-radius: 3px; border-radius: 3px;
border: 1px solid; border: 1px solid;
border-color: rgb(192, 192, 192); border-color: rgb(192,192,192);
color: rgb(71, 71, 71); color: rgb(71,71,71);
padding: 4px 30px; padding: 4px 30px;
transition-property: background-color, border-color; transition-property: background-color, border-color;
transition-duration: 150ms; transition-duration: 150ms;
} }
#UITourTooltipButtons > button:not(.button-link, :active):hover { #UITourTooltipButtons > button:not(.button-link, :active):hover {
background-color: hsla(210, 4%, 10%, 0.15); background-color: hsla(210,4%,10%,.15);
border-color: hsla(210, 4%, 10%, 0.15); border-color: hsla(210,4%,10%,.15);
box-shadow: 0 1px 0 0 hsla(210, 4%, 10%, 0.05) inset; box-shadow: 0 1px 0 0 hsla(210,4%,10%,.05) inset;
} }
#UITourTooltipButtons > label, #UITourTooltipButtons > label,
@@ -205,11 +205,11 @@
/* The primary button gets the same color as the customize button. */ /* The primary button gets the same color as the customize button. */
#UITourTooltipButtons > button.button-primary { #UITourTooltipButtons > button.button-primary {
background-color: rgb(116, 191, 67); background-color: rgb(116,191,67);
color: white; color: white;
padding-inline: 30px; padding-inline: 30px;
} }
#UITourTooltipButtons > button.button-primary:not(:active):hover { #UITourTooltipButtons > button.button-primary:not(:active):hover {
background-color: rgb(105, 173, 61); background-color: rgb(105,173,61);
} }

2
browser/themes/shared/addon-notification.css
View File

@@ -115,5 +115,5 @@ html|ul.webext-perm-domains-list {
.addon-warning-icon { .addon-warning-icon {
-moz-context-properties: fill; -moz-context-properties: fill;
fill: #ffbf00; fill: #FFBF00;
} }

1
browser/themes/shared/addons/extension-controlled.css
View File

@@ -30,7 +30,6 @@
} }
} }
/* prettier-ignore */
.extension-controlled-notification > .popup-notification-body-container > .popup-notification-body > .popup-notification-bottom-content > .popup-notification-warning, .extension-controlled-notification > .popup-notification-body-container > .popup-notification-body > .popup-notification-bottom-content > .popup-notification-warning,
.extension-controlled-notification > .popup-notification-body-container > .popup-notification-icon { .extension-controlled-notification > .popup-notification-body-container > .popup-notification-icon {
display: none; display: none;

7
browser/themes/shared/addons/unified-extensions.css
View File

@@ -137,7 +137,7 @@ unified-extensions-item {
.unified-extensions-item-name, .unified-extensions-item-name,
.unified-extensions-item-message { .unified-extensions-item-message {
margin: 0; margin: 0;
padding-inline-start: 0.5em; padding-inline-start: .5em;
word-break: break-word; word-break: break-word;
} }
@@ -148,7 +148,8 @@ unified-extensions-item {
.unified-extensions-item-menu-button.subviewbutton { .unified-extensions-item-menu-button.subviewbutton {
list-style-image: url("chrome://global/skin/icons/settings.svg"); list-style-image: url("chrome://global/skin/icons/settings.svg");
/* subtract the child's ~1px border from the block padding */ /* subtract the child's ~1px border from the block padding */
padding: calc(var(--arrowpanel-menuitem-margin-inline) - 1px) var(--arrowpanel-menuitem-margin-inline); padding: calc(var(--arrowpanel-menuitem-margin-inline) - 1px)
var(--arrowpanel-menuitem-margin-inline);
padding-inline-end: 0; padding-inline-end: 0;
border-radius: 0; border-radius: 0;
/* override panelUI-shared.css */ /* override panelUI-shared.css */
@@ -175,7 +176,7 @@ unified-extensions-item {
&:hover:active > .toolbarbutton-icon { &:hover:active > .toolbarbutton-icon {
color: var(--uei-button-active-color); color: var(--uei-button-active-color);
background-color: var(--uei-button-active-bgcolor); background-color: var(--uei-button-active-bgcolor);
box-shadow: 0 1px 0 hsla(210, 4%, 10%, 0.03) inset; box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
} }
&:focus-visible > .toolbarbutton-icon { &:focus-visible > .toolbarbutton-icon {

6
browser/themes/shared/autocomplete.css
View File

@@ -27,7 +27,7 @@
padding: 0 1px; padding: 0 1px;
--status-text-color: currentColor; --status-text-color: currentColor;
--status-background-color: rgba(248, 232, 28, 0.2); --status-background-color: rgba(248, 232, 28, .2);
> .ac-site-icon { > .ac-site-icon {
margin-inline: 4px 0; margin-inline: 4px 0;
@@ -75,7 +75,7 @@
&:hover, &:hover,
&[selected] { &[selected] {
background-color: hsla(0, 0%, 80%, 0.5); /* match arrowpanel-dimmed-further */ background-color: hsla(0,0%,80%,.5); /* match arrowpanel-dimmed-further */
} }
} }
@@ -219,7 +219,7 @@
&[originaltype="loginWithOrigin"] + richlistitem[originaltype="generatedPassword"] { &[originaltype="loginWithOrigin"] + richlistitem[originaltype="generatedPassword"] {
/* Separator between logins and generated passwords. This uses --panel-separator-color from default /* Separator between logins and generated passwords. This uses --panel-separator-color from default
* themes since autocomplete doesn't yet switch to dark. */ * themes since autocomplete doesn't yet switch to dark. */
border-top: 1px solid hsla(210, 4%, 10%, 0.14); border-top: 1px solid hsla(210,4%,10%,.14);
} }
&[originaltype="action"] { &[originaltype="action"] {

2
browser/themes/shared/blockedSite.css
View File

@@ -6,7 +6,7 @@
@media not (prefers-contrast) { @media not (prefers-contrast) {
:root { :root {
--in-content-page-background: #a4000f; --in-content-page-background: #A4000F;
--in-content-page-color: white; --in-content-page-color: white;
--in-content-text-color: white; --in-content-text-color: white;
--in-content-primary-button-text-color: black; --in-content-primary-button-text-color: black;

32
browser/themes/shared/browser-colors.css
View File

@@ -22,9 +22,9 @@
--tabs-navbar-separator-color: ThreeDShadow; --tabs-navbar-separator-color: ThreeDShadow;
--tabs-navbar-separator-style: solid; --tabs-navbar-separator-style: solid;
--short-notification-background: #0250bb; --short-notification-background: #0250BB;
--short-notification-gradient: #9059ff; --short-notification-gradient: #9059FF;
--warning-icon-bgcolor: light-dark(#ffa436, #ffbd4f); --warning-icon-bgcolor: light-dark(#FFA436, #FFBD4F);
--urlbar-box-bgcolor: var(--button-background-color-hover); --urlbar-box-bgcolor: var(--button-background-color-hover);
--urlbar-box-focus-bgcolor: var(--button-background-color); --urlbar-box-focus-bgcolor: var(--button-background-color);
@@ -52,7 +52,7 @@
--link-color: light-dark(var(--color-blue-50), var(--color-cyan-50)); --link-color: light-dark(var(--color-blue-50), var(--color-cyan-50));
--link-color-hover: light-dark(var(--color-blue-60), var(--color-cyan-30)); --link-color-hover: light-dark(var(--color-blue-60), var(--color-cyan-30));
--link-color-active: light-dark(var(--color-blue-70), var(--color-cyan-20)); --link-color-active: light-dark(var(--color-blue-70), var(--color-cyan-20));
--tabs-navbar-separator-color: light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)); --tabs-navbar-separator-color: light-dark(rgba(0,0,0,.1), rgba(0,0,0,.3));
--attention-dot-color: light-dark(#2ac3a2, #54ffbd); --attention-dot-color: light-dark(#2ac3a2, #54ffbd);
--toolbox-bgcolor: var(--lwt-accent-color); --toolbox-bgcolor: var(--lwt-accent-color);
@@ -61,7 +61,7 @@
--toolbox-textcolor-inactive: var(--lwt-text-color, currentColor); --toolbox-textcolor-inactive: var(--lwt-text-color, currentColor);
@media not (prefers-contrast) { @media not (prefers-contrast) {
--focus-outline-color: light-dark(#0061e0, #00ddff); --focus-outline-color: light-dark(#0061E0, #00DDFF);
} }
} }
@@ -84,17 +84,23 @@
:root:not([lwtheme]) { :root:not([lwtheme]) {
--color-accent-primary: light-dark(rgb(0, 97, 224), rgb(0, 221, 255)); --color-accent-primary: light-dark(rgb(0, 97, 224), rgb(0, 221, 255));
--button-text-color-primary: light-dark(rgb(251, 251, 254), rgb(43, 42, 51)); --button-text-color-primary: light-dark(rgb(251, 251, 254), rgb(43, 42, 51));
--button-background-color: light-dark(rgba(207, 207, 216, 0.33), rgba(0, 0, 0, 0.33)); --button-background-color: light-dark(rgba(207, 207, 216, .33), rgba(0, 0, 0, .33));
--button-background-color-hover: light-dark(rgba(207, 207, 216, 0.66), rgba(207, 207, 216, 0.2)); --button-background-color-hover: light-dark(rgba(207, 207, 216, .66), rgba(207, 207, 216, .20));
--button-background-color-active: light-dark(rgb(207, 207, 216), rgba(207, 207, 216, 0.4)); --button-background-color-active: light-dark(rgb(207, 207, 216), rgba(207, 207, 216, .40));
--button-text-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254)); --button-text-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254));
--arrowpanel-background: light-dark(white, rgb(66, 65, 77)); --arrowpanel-background: light-dark(white, rgb(66, 65, 77));
--arrowpanel-color: light-dark(black, rgb(251, 251, 254)); --arrowpanel-color: light-dark(black, rgb(251, 251, 254));
--arrowpanel-border-color: light-dark(rgb(240, 240, 244), rgb(82, 82, 94)); --arrowpanel-border-color: light-dark(rgb(240, 240, 244), rgb(82,82,94));
--arrowpanel-dimmed: light-dark(color-mix(in srgb, currentColor 12%, transparent), color-mix(in srgb, currentColor 17%, transparent)); --arrowpanel-dimmed: light-dark(
--arrowpanel-dimmed-further: light-dark(color-mix(in srgb, currentColor 20%, transparent), color-mix(in srgb, currentColor 14%, transparent)); color-mix(in srgb, currentColor 12%, transparent),
color-mix(in srgb, currentColor 17%, transparent)
);
--arrowpanel-dimmed-further: light-dark(
color-mix(in srgb, currentColor 20%, transparent),
color-mix(in srgb, currentColor 14%, transparent)
);
--input-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254)); --input-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254));
--input-bgcolor: light-dark(rgb(255, 255, 255), #42414d); --input-bgcolor: light-dark(rgb(255, 255, 255), #42414d);
@@ -122,14 +128,14 @@
--toolbarbutton-icon-fill-attention-text: light-dark(rgb(240, 240, 244), rgb(28, 27, 34)); --toolbarbutton-icon-fill-attention-text: light-dark(rgb(240, 240, 244), rgb(28, 27, 34));
--toolbar-field-border-color: transparent; --toolbar-field-border-color: transparent;
--toolbar-field-background-color: light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.3)); --toolbar-field-background-color: light-dark(rgba(0, 0, 0, .05), rgba(0, 0, 0, .3));
--toolbar-field-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254)); --toolbar-field-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254));
--toolbar-field-focus-background-color: light-dark(white, rgb(66, 65, 77)); --toolbar-field-focus-background-color: light-dark(white, rgb(66, 65, 77));
--toolbar-field-focus-color: light-dark(black, rgb(251, 251, 254)); --toolbar-field-focus-color: light-dark(black, rgb(251, 251, 254));
--urlbarView-action-color: light-dark(rgb(91, 91, 102), rgb(191, 191, 201)); --urlbarView-action-color: light-dark(rgb(91, 91, 102), rgb(191, 191, 201));
--urlbarView-separator-color: light-dark(rgb(240, 240, 244), rgb(82, 82, 94)); --urlbarView-separator-color: light-dark(rgb(240, 240, 244), rgb(82, 82, 94));
--urlbarView-highlight-background: light-dark(#e0e0e6, rgb(43, 42, 51)); --urlbarView-highlight-background: light-dark(#e0e0e6, rgb(43,42,51));
--urlbarView-highlight-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254)); --urlbarView-highlight-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254));
--urlbarView-hover-background: light-dark(rgb(240, 240, 244), var(--arrowpanel-dimmed)); --urlbarView-hover-background: light-dark(rgb(240, 240, 244), var(--arrowpanel-dimmed));

87
browser/themes/shared/browser-shared.css
View File

@@ -101,7 +101,7 @@ body {
the gap around them more uniform when they are close to the field edges */ the gap around them more uniform when they are close to the field edges */
--urlbar-icon-border-radius: calc(var(--toolbarbutton-border-radius) - 1px); --urlbar-icon-border-radius: calc(var(--toolbarbutton-border-radius) - 1px);
--urlbar-searchmodeswitcher-inline-padding: 6px; --urlbar-searchmodeswitcher-inline-padding: 6px;
--urlbar-searchmodeswitcher-margin-inline-end: 0.45em; --urlbar-searchmodeswitcher-margin-inline-end: .45em;
--pocket-icon-fill: #ef4056; --pocket-icon-fill: #ef4056;
@@ -109,10 +109,10 @@ body {
--lwt-background-alignment: right top; --lwt-background-alignment: right top;
--lwt-background-tiling: no-repeat; --lwt-background-tiling: no-repeat;
--ext-theme-background-transition: background-color 0.1s cubic-bezier(0.17, 0.67, 0.83, 0.67); --ext-theme-background-transition: background-color 0.1s cubic-bezier(.17,.67,.83,.67);
--inactive-window-transition: 0.2s ease; --inactive-window-transition: 0.2s ease;
--inactive-titlebar-opacity: 0.6; --inactive-titlebar-opacity: .6;
/** /**
* On macOS and Linux, fading the whole titlebar is the native behavior. * On macOS and Linux, fading the whole titlebar is the native behavior.
* *
@@ -122,7 +122,7 @@ body {
* to account for this platform difference. * to account for this platform difference.
*/ */
@media (-moz-platform: windows) { @media (-moz-platform: windows) {
--inactive-titlebar-opacity: 0.75; --inactive-titlebar-opacity: .75;
} }
@media (prefers-reduced-motion) { @media (prefers-reduced-motion) {
--inactive-window-transition: 0s; --inactive-window-transition: 0s;
@@ -132,11 +132,11 @@ body {
color: var(--lwt-text-color); color: var(--lwt-text-color);
} }
&[uidensity="compact"] { &[uidensity=compact] {
--urlbar-min-height: max(26px, 1.4em); --urlbar-min-height: max(26px, 1.4em);
} }
&[uidensity="touch"] { &[uidensity=touch] {
--urlbar-min-height: max(34px, 1.4em); --urlbar-min-height: max(34px, 1.4em);
} }
} }
@@ -186,9 +186,7 @@ body {
:root[lwtheme-image] & { :root[lwtheme-image] & {
background-image: var(--lwt-header-image), var(--lwt-additional-images); background-image: var(--lwt-header-image), var(--lwt-additional-images);
background-repeat: no-repeat, var(--lwt-background-tiling); background-repeat: no-repeat, var(--lwt-background-tiling);
background-position: background-position: right top, var(--lwt-background-alignment);
right top,
var(--lwt-background-alignment);
} }
} }
@@ -304,21 +302,21 @@ body {
} }
@media (-moz-platform: windows) { @media (-moz-platform: windows) {
:root:not([sizemode="normal"]) &[type="pre-tabs"] { :root:not([sizemode=normal]) &[type="pre-tabs"] {
display: none; display: none;
} }
} }
@media (-moz-platform: linux) and (-moz-gtk-csd-reversed-placement: 0) { @media (-moz-platform: linux) and (-moz-gtk-csd-reversed-placement: 0) {
:root:not([sizemode="normal"]) &[type="pre-tabs"], :root:not([sizemode=normal]) &[type="pre-tabs"],
:root[gtktiledwindow="true"] &[type="pre-tabs"] { :root[gtktiledwindow=true] &[type="pre-tabs"] {
display: none; display: none;
} }
} }
@media (-moz-gtk-csd-reversed-placement) { @media (-moz-gtk-csd-reversed-placement) {
:root:not([sizemode="normal"]) &[type="post-tabs"], :root:not([sizemode=normal]) &[type="post-tabs"],
:root[gtktiledwindow="true"] &[type="post-tabs"] { :root[gtktiledwindow=true] &[type="post-tabs"] {
display: none; display: none;
} }
} }
@@ -331,8 +329,7 @@ body {
/* stylelint-disable-next-line media-query-no-invalid */ /* stylelint-disable-next-line media-query-no-invalid */
@media -moz-pref("sidebar.verticalTabs") { @media -moz-pref("sidebar.verticalTabs") {
&[type="pre-tabs"], &[type="pre-tabs"], &[type="post-tabs"] {
&[type="post-tabs"] {
display: none; display: none;
} }
} }
@@ -341,10 +338,7 @@ body {
/* Hide the TabsToolbar/nav-bar titlebar controls if the menubar is permanently shown. /* Hide the TabsToolbar/nav-bar titlebar controls if the menubar is permanently shown.
* (That is, if the menu bar doesn't autohide, and we're not in a fullscreen or * (That is, if the menu bar doesn't autohide, and we're not in a fullscreen or
* popup window.) */ * popup window.) */
:root:not([chromehidden~="menubar"], [inFullscreen]) :root:not([chromehidden~="menubar"], [inFullscreen]) #toolbar-menubar[autohide="false"] ~ :is(#TabsToolbar, #nav-bar) > :is(.titlebar-buttonbox-container, .titlebar-spacer) {
#toolbar-menubar[autohide="false"]
~ :is(#TabsToolbar, #nav-bar)
> :is(.titlebar-buttonbox-container, .titlebar-spacer) {
display: none; display: none;
} }
@@ -353,8 +347,8 @@ body {
display: none; display: none;
} }
:root:not([sizemode="maximized"], [sizemode="fullscreen"]) .titlebar-restore, :root:not([sizemode=maximized], [sizemode=fullscreen]) .titlebar-restore,
:root:is([sizemode="maximized"], [sizemode="fullscreen"]) .titlebar-max { :root:is([sizemode=maximized], [sizemode=fullscreen]) .titlebar-max {
display: none; display: none;
} }
@@ -363,7 +357,7 @@ body {
-moz-default-appearance: -moz-window-button-box; -moz-default-appearance: -moz-window-button-box;
position: relative; position: relative;
:root:not([customtitlebar], [sizemode="fullscreen"]) & { :root:not([customtitlebar], [sizemode=fullscreen]) & {
display: none; display: none;
} }
} }
@@ -401,7 +395,7 @@ body {
} }
/* Hide menu elements intended for keyboard access support */ /* Hide menu elements intended for keyboard access support */
#main-menubar[openedwithkey="false"] .show-only-for-keyboard { #main-menubar[openedwithkey=false] .show-only-for-keyboard {
display: none; display: none;
} }
@@ -461,7 +455,7 @@ body {
min-height: 0; min-height: 0;
padding-inline: 6px; padding-inline: 6px;
:root[uidensity="compact"] & { :root[uidensity=compact] & {
padding-inline: 2px; padding-inline: 2px;
} }
@@ -471,20 +465,14 @@ body {
max-height: 4em; max-height: 4em;
:root[sessionrestored] &:not(.instant) { :root[sessionrestored] &:not(.instant) {
transition: transition: min-height 170ms ease-out, max-height 170ms ease-out, var(--ext-theme-background-transition);
min-height 170ms ease-out,
max-height 170ms ease-out,
var(--ext-theme-background-transition);
&[collapsed="true"] { &[collapsed=true] {
transition: transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear;
min-height 170ms ease-out,
max-height 170ms ease-out,
visibility 170ms linear;
} }
} }
&[collapsed="true"] { &[collapsed=true] {
max-height: 0; max-height: 0;
&.instant { &.instant {
@@ -495,7 +483,7 @@ body {
/* Bookmarks toolbar empty message */ /* Bookmarks toolbar empty message */
/* If the toolbar is not initialized set a zero width, but retain height. */ /* If the toolbar is not initialized set a zero width, but retain height. */
&[collapsed="false"]:not([initialized]) > #personal-toolbar-empty { &[collapsed=false]:not([initialized]) > #personal-toolbar-empty {
visibility: hidden; visibility: hidden;
width: 0; width: 0;
overflow-x: hidden; overflow-x: hidden;
@@ -522,7 +510,7 @@ body {
#fxms-bmb-button-wrapper, #fxms-bmb-button-wrapper,
toolbarpaletteitem > #personal-bookmarks > #PlacesToolbar, toolbarpaletteitem > #personal-bookmarks > #PlacesToolbar,
#personal-bookmarks:is([overflowedItem="true"], [cui-areatype="panel"]) > #PlacesToolbar { #personal-bookmarks:is([overflowedItem=true], [cui-areatype="panel"]) > #PlacesToolbar {
display: none; display: none;
} }
@@ -616,9 +604,7 @@ menupopup::part(drop-indicator) {
background-color: var(--lwt-accent-color); background-color: var(--lwt-accent-color);
background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-additional-images); background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-additional-images);
background-repeat: no-repeat, var(--lwt-background-tiling); background-repeat: no-repeat, var(--lwt-background-tiling);
background-position: background-position: right bottom, var(--lwt-background-alignment);
right bottom,
var(--lwt-background-alignment);
background-position-y: bottom !important; background-position-y: bottom !important;
} }
@@ -629,10 +615,7 @@ menupopup::part(drop-indicator) {
:root[lwtheme-image] & { :root[lwtheme-image] & {
background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image), var(--lwt-additional-images); background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image), var(--lwt-additional-images);
background-repeat: no-repeat, no-repeat, var(--lwt-background-tiling); background-repeat: no-repeat, no-repeat, var(--lwt-background-tiling);
background-position: background-position: center, right bottom, var(--lwt-background-alignment);
center,
right bottom,
var(--lwt-background-alignment);
} }
} }
@@ -642,7 +625,7 @@ menupopup::part(drop-indicator) {
align-items: center; align-items: center;
margin-inline: 7px; margin-inline: 7px;
:root:not([privatebrowsingmode="temporary"]) &, :root:not([privatebrowsingmode=temporary]) &,
#navigator-toolbox:not([tabs-hidden]) #nav-bar > & { #navigator-toolbox:not([tabs-hidden]) #nav-bar > & {
display: none; display: none;
} }
@@ -714,7 +697,7 @@ menupopup::part(drop-indicator) {
box-shadow: 0 0 1.5px 1px red; box-shadow: 0 0 1.5px 1px red;
&[focused] { &[focused] {
box-shadow: 0 0 2px 2px rgba(255, 0, 0, 0.4); box-shadow: 0 0 2px 2px rgba(255,0,0,0.4);
} }
} }
@@ -757,7 +740,7 @@ menupopup::part(drop-indicator) {
list-style-image: url(chrome://global/skin/icons/help.svg); list-style-image: url(chrome://global/skin/icons/help.svg);
&:hover { &:hover {
background-color: hsla(0, 0%, 70%, 0.2); background-color: hsla(0,0%,70%,.2);
border-radius: 2px; border-radius: 2px;
} }
} }
@@ -1026,15 +1009,15 @@ menupopup::part(drop-indicator) {
appearance: none; appearance: none;
border-style: none; border-style: none;
margin: 0; margin: 0;
background-color: rgb(0, 96, 223); background-color: rgb(0,96,223);
color: rgb(255, 255, 255); color: rgb(255,255,255);
border-radius: 5px; border-radius: 5px;
padding: 10px; padding: 10px;
margin-top: 15px; margin-top: 15px;
margin-bottom: 10px; margin-bottom: 10px;
&:hover { &:hover {
background-color: rgb(0, 62, 170); background-color: rgb(0,62,170);
} }
} }
@@ -1257,8 +1240,8 @@ popupnotificationcontent {
@media not (prefers-contrast) { @media not (prefers-contrast) {
/* TODO: Should this be in browser-colors to respect system theming on Linux? */ /* TODO: Should this be in browser-colors to respect system theming on Linux? */
--swipe-nav-icon-primary-color: light-dark(#0060df, #00ddff); --swipe-nav-icon-primary-color: light-dark(#0060DF, #00DDFF);
--swipe-nav-icon-accent-color: light-dark(#ffffff, #000000); --swipe-nav-icon-accent-color: light-dark(#FFFFFF, #000000);
} }
> svg { > svg {

2
browser/themes/shared/contextmenu.css
View File

@@ -47,7 +47,7 @@
list-style-image: url("chrome://browser/skin/bookmark-hollow.svg"); list-style-image: url("chrome://browser/skin/bookmark-hollow.svg");
} }
#context-bookmarkpage[starred="true"] { #context-bookmarkpage[starred=true] {
list-style-image: url("chrome://browser/skin/bookmark.svg"); list-style-image: url("chrome://browser/skin/bookmark.svg");
} }

33
browser/themes/shared/controlcenter/panel.css
View File

@@ -3,7 +3,7 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
/* Hide all conditional elements by default. */ /* Hide all conditional elements by default. */
:is([when-connection], [when-customroot], [when-mixedcontent], [when-ciphers], [when-httpsonlystatus]) { :is([when-connection],[when-customroot],[when-mixedcontent],[when-ciphers],[when-httpsonlystatus]) {
display: none; display: none;
} }
@@ -143,7 +143,6 @@
/* The protections popup panel header text needs a different calculation because it contains an info button. /* The protections popup panel header text needs a different calculation because it contains an info button.
* icon-full-width is included twice to compensate for the margin-inline-start of the text, * icon-full-width is included twice to compensate for the margin-inline-start of the text,
* used to center it even if the header includes a info button. See .panel-header-with-info-button */ * used to center it even if the header includes a info button. See .panel-header-with-info-button */
/* prettier-ignore */
max-width: calc(var(--popup-width) max-width: calc(var(--popup-width)
- var(--arrowpanel-menuitem-margin-inline) * 2 - var(--arrowpanel-menuitem-margin-inline) * 2
- var(--arrowpanel-header-info-icon-full-width) * 2); - var(--arrowpanel-header-info-icon-full-width) * 2);
@@ -151,7 +150,6 @@
#identity-popup .panel-header > .subviewbutton-back + h1 > span { #identity-popup .panel-header > .subviewbutton-back + h1 > span {
/* Same idea as above, but in the identity popup when there's a back button. */ /* Same idea as above, but in the identity popup when there's a back button. */
/* prettier-ignore */
max-width: calc(var(--popup-width) max-width: calc(var(--popup-width)
- var(--arrowpanel-menuitem-margin-inline) * 2 - var(--arrowpanel-menuitem-margin-inline) * 2
- var(--arrowpanel-header-back-icon-full-width) * 2); - var(--arrowpanel-header-back-icon-full-width) * 2);
@@ -178,7 +176,7 @@
/* SECURITY */ /* SECURITY */
#identity-popup[mixedcontent~="active-loaded"] .identity-popup-connection-not-secure, #identity-popup[mixedcontent~=active-loaded] .identity-popup-connection-not-secure,
#identity-popup:not([mixedcontent]) .identity-popup-connection-not-secure { #identity-popup:not([mixedcontent]) .identity-popup-connection-not-secure {
font-weight: bold; font-weight: bold;
} }
@@ -210,45 +208,45 @@
min-height: 24px; min-height: 24px;
} }
#identity-popup[connection="chrome"] .identity-popup-security-connection { #identity-popup[connection=chrome] .identity-popup-security-connection {
list-style-image: url(chrome://branding/content/icon48.png); list-style-image: url(chrome://branding/content/icon48.png);
} }
#identity-popup[connection="file"] .identity-popup-security-connection { #identity-popup[connection=file] .identity-popup-security-connection {
list-style-image: url(chrome://global/skin/icons/page-portrait.svg); list-style-image: url(chrome://global/skin/icons/page-portrait.svg);
} }
#identity-popup[connection="associated"] .identity-popup-security-connection { #identity-popup[connection=associated] .identity-popup-security-connection {
list-style-image: url(chrome://global/skin/icons/info.svg); list-style-image: url(chrome://global/skin/icons/info.svg);
} }
#identity-popup[connection^="secure"] .identity-popup-security-connection { #identity-popup[connection^=secure] .identity-popup-security-connection {
list-style-image: url(chrome://global/skin/icons/security.svg); list-style-image: url(chrome://global/skin/icons/security.svg);
} }
/* Use [isbroken] to make sure we don't show a warning lock on an http page. See Bug 1192162. */ /* Use [isbroken] to make sure we don't show a warning lock on an http page. See Bug 1192162. */
#identity-popup[ciphers="weak"] .identity-popup-security-connection, #identity-popup[ciphers=weak] .identity-popup-security-connection,
#identity-popup[mixedcontent~="passive-loaded"][isbroken] .identity-popup-security-connection { #identity-popup[mixedcontent~=passive-loaded][isbroken] .identity-popup-security-connection {
list-style-image: url(chrome://global/skin/icons/security-warning.svg); list-style-image: url(chrome://global/skin/icons/security-warning.svg);
-moz-context-properties: fill, fill-opacity; -moz-context-properties: fill, fill-opacity;
} }
#identity-popup[connection="secure-cert-user-overridden"] .identity-popup-security-connection, #identity-popup[connection=secure-cert-user-overridden] .identity-popup-security-connection,
#identity-popup[connection="cert-error-page"] .identity-popup-security-connection { #identity-popup[connection=cert-error-page] .identity-popup-security-connection {
list-style-image: url(chrome://global/skin/icons/security-warning.svg); list-style-image: url(chrome://global/skin/icons/security-warning.svg);
fill: unset; fill: unset;
} }
#identity-popup[connection="net-error-page"] .identity-popup-security-connection { #identity-popup[connection=net-error-page] .identity-popup-security-connection {
list-style-image: url(chrome://global/skin/icons/info.svg); list-style-image: url(chrome://global/skin/icons/info.svg);
fill: unset; fill: unset;
} }
#identity-popup[mixedcontent~="active-loaded"][isbroken] .identity-popup-security-connection { #identity-popup[mixedcontent~=active-loaded][isbroken] .identity-popup-security-connection {
list-style-image: url(chrome://browser/skin/controlcenter/mcb-disabled.svg); list-style-image: url(chrome://browser/skin/controlcenter/mcb-disabled.svg);
} }
#identity-popup[connection="extension"] .identity-popup-security-connection { #identity-popup[connection=extension] .identity-popup-security-connection {
list-style-image: url(chrome://mozapps/skin/extensions/extension.svg); list-style-image: url(chrome://mozapps/skin/extensions/extension.svg);
} }
@@ -522,7 +520,7 @@
&:hover:active { &:hover:active {
color: var(--button-text-color-active); color: var(--button-text-color-active);
background-color: var(--button-background-color-active); background-color: var(--button-background-color-active)
} }
} }
@@ -699,7 +697,7 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
fill: light-dark(#0090ed, #80ebff); fill: light-dark(#0090ED, #80EBFF);
} }
.protections-popup-shim-allow-hint-icon { .protections-popup-shim-allow-hint-icon {
@@ -732,6 +730,7 @@
margin-top: auto; margin-top: auto;
} }
/* Cookie banner state toggles for the popup menu item */ /* Cookie banner state toggles for the popup menu item */
#protections-popup-cookie-banner-section:not([data-state="detected"]) description#protections-popup-cookie-banner-detected, #protections-popup-cookie-banner-section:not([data-state="detected"]) description#protections-popup-cookie-banner-detected,

51
browser/themes/shared/customizableui/customizeMode.css
View File

@@ -7,7 +7,7 @@
/* Customization mode */ /* Customization mode */
:root { :root {
--drag-drop-transition-duration: 0.3s; --drag-drop-transition-duration: .3s;
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
--drag-drop-transition-duration: 0s; --drag-drop-transition-duration: 0s;
@@ -78,7 +78,7 @@ toolbar[overflowable][customizing] > .customization-target {
align-items: center; align-items: center;
flex-shrink: 0; flex-shrink: 0;
flex-wrap: wrap; flex-wrap: wrap;
border-top: 1px solid rgba(0, 0, 0, 0.15); border-top: 1px solid rgba(0,0,0,.15);
padding: 10px; padding: 10px;
> .footer-button, > .footer-button,
@@ -96,7 +96,7 @@ toolbar[overflowable][customizing] > .customization-target {
#customization-palette { #customization-palette {
padding: 5px 20px 20px; padding: 5px 20px 20px;
transition: opacity 0.3s ease-in-out; transition: opacity .3s ease-in-out;
opacity: 0; opacity: 0;
&:not([hidden]) { &:not([hidden]) {
@@ -144,7 +144,7 @@ toolbarpaletteitem {
> toolbarspring { > toolbarspring {
outline: 1px solid; outline: 1px solid;
opacity: 0.6; opacity: .6;
&[removable="false"] { &[removable="false"] {
outline: 1px dashed; outline: 1px dashed;
@@ -238,7 +238,7 @@ toolbarpaletteitem {
&:not([mousedown]):focus-visible { &:not([mousedown]):focus-visible {
/* Delay adding the focusring back until after the transform transition completes. */ /* Delay adding the focusring back until after the transform transition completes. */
transition: outline-width 0.01s linear var(--drag-drop-transition-duration); transition: outline-width .01s linear var(--drag-drop-transition-duration);
outline: var(--default-focusring); outline: var(--default-focusring);
&[place="toolbar"] { &[place="toolbar"] {
@@ -263,7 +263,8 @@ toolbarpaletteitem {
} }
#PersonalToolbar & toolbarbutton[checked="true"], #PersonalToolbar & toolbarbutton[checked="true"],
toolbar & toolbarbutton[checked="true"] > :where(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack) { toolbar & toolbarbutton[checked="true"]
> :where(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack) {
background-color: revert !important; background-color: revert !important;
} }
@@ -271,7 +272,7 @@ toolbarpaletteitem {
> toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon, > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
> #search-container, > #search-container,
> toolbaritem.toolbaritem-combined-buttons { > toolbaritem.toolbaritem-combined-buttons {
transition: transform var(--drag-drop-transition-duration) cubic-bezier(0.6, 2, 0.75, 1.5) !important; transition: transform var(--drag-drop-transition-duration) cubic-bezier(.6, 2, .75, 1.5) !important;
} }
&[mousedown] { &[mousedown] {
@@ -413,9 +414,7 @@ toolbarpaletteitem {
@media (-moz-platform: macos) { @media (-moz-platform: macos) {
/* Native styling adds more 'oompf' to the popup box-shadow, so simulate that /* Native styling adds more 'oompf' to the popup box-shadow, so simulate that
* as best as we can here: */ * as best as we can here: */
box-shadow: box-shadow: 0 0 1px hsla(0,0%,0%,.3), 0 4px 10px hsla(0,0%,0%,.3);
0 0 1px hsla(0, 0%, 0%, 0.3),
0 4px 10px hsla(0, 0%, 0%, 0.3);
appearance: none; appearance: none;
border-radius: var(--arrowpanel-border-radius); border-radius: var(--arrowpanel-border-radius);
} }
@@ -423,7 +422,7 @@ toolbarpaletteitem {
@media not (-moz-platform: macos) { @media not (-moz-platform: macos) {
border: 1px solid var(--arrowpanel-border-color); border: 1px solid var(--arrowpanel-border-color);
margin: 0; margin: 0;
box-shadow: 0 0 4px hsla(0, 0%, 0%, 0.2); box-shadow: 0 0 4px hsla(0,0%,0%,.2);
} }
} }
} }
@@ -658,28 +657,10 @@ toolbarpaletteitem {
} }
@keyframes kcode { @keyframes kcode {
0% { 0% { border-color: rgb(195,17,206); color: rgb(195,17,206); }
border-color: rgb(195, 17, 206); 20% { border-color: rgb(252,82,27); color: rgb(252,82,27); }
color: rgb(195, 17, 206); 40% { border-color: rgb(251,179,0); color: rgb(251,179,0); }
} 60% { border-color: rgb(105,211,0); color: rgb(105,211,0); }
20% { 80% { border-color: rgb(20,155,249); color: rgb(20,155,249); }
border-color: rgb(252, 82, 27); 100% { border-color: rgb(195,17,206); color: rgb(195,17,206); }
color: rgb(252, 82, 27);
}
40% {
border-color: rgb(251, 179, 0);
color: rgb(251, 179, 0);
}
60% {
border-color: rgb(105, 211, 0);
color: rgb(105, 211, 0);
}
80% {
border-color: rgb(20, 155, 249);
color: rgb(20, 155, 249);
}
100% {
border-color: rgb(195, 17, 206);
color: rgb(195, 17, 206);
}
} }

122
browser/themes/shared/customizableui/panelUI-shared.css
View File

@@ -27,10 +27,10 @@
--panel-and-palette-icon-size: 16px; --panel-and-palette-icon-size: 16px;
&:not([lwtheme]) { &:not([lwtheme]) {
--panel-separator-zap-gradient: linear-gradient(90deg, #9059ff 0%, #ff4aa2 52.08%, #ffbd4f 100%); --panel-separator-zap-gradient: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%);
} }
&[uidensity="compact"] { &[uidensity=compact] {
--arrowpanel-menuitem-margin-inline: 4px; --arrowpanel-menuitem-margin-inline: 4px;
--arrowpanel-menuitem-padding-block: 4px; --arrowpanel-menuitem-padding-block: 4px;
--panel-separator-margin-horizontal: 4px; --panel-separator-margin-horizontal: 4px;
@@ -55,7 +55,8 @@ menupopup {
/* The min-height is calculated with the separator's horizontal margin rather /* The min-height is calculated with the separator's horizontal margin rather
* than the vertical, to let the back icon have even spacing all around * than the vertical, to let the back icon have even spacing all around
* while being aligned with the separator. */ * while being aligned with the separator. */
--arrowpanel-header-min-height: calc(var(--arrowpanel-header-back-icon-full-width) + (var(--panel-separator-margin-horizontal) * 2)); --arrowpanel-header-min-height: calc(var(--arrowpanel-header-back-icon-full-width)
+ (var(--panel-separator-margin-horizontal) * 2));
} }
#PanelUI-menu-button { #PanelUI-menu-button {
@@ -253,7 +254,7 @@ panelview {
border-radius: var(--toolbarbutton-border-radius); border-radius: var(--toolbarbutton-border-radius);
flex-shrink: 0; flex-shrink: 0;
&[disabled="true"] { &[disabled=true] {
visibility: hidden; visibility: hidden;
} }
@@ -285,8 +286,8 @@ panelview {
display: none; display: none;
} }
#wrapper-edit-controls:is([place="palette"], [place="panel"]) > #edit-controls, #wrapper-edit-controls:is([place="palette"],[place="panel"]) > #edit-controls,
#wrapper-zoom-controls:is([place="palette"], [place="panel"]) > #zoom-controls, #wrapper-zoom-controls:is([place="palette"],[place="panel"]) > #zoom-controls,
:is(panelview, #widget-overflow-fixed-list) .toolbaritem-combined-buttons { :is(panelview, #widget-overflow-fixed-list) .toolbaritem-combined-buttons {
margin: var(--arrowpanel-menuitem-margin); margin: var(--arrowpanel-menuitem-margin);
} }
@@ -405,7 +406,7 @@ menupopup[emptyplacesresult] > .hide-if-empty-places-result {
background-image: url("chrome://global/skin/icons/delete.svg"); background-image: url("chrome://global/skin/icons/delete.svg");
background-size: contain; background-size: contain;
-moz-context-properties: fill; -moz-context-properties: fill;
fill: #fff; fill: #FFF;
animation: none; animation: none;
} }
} }
@@ -473,10 +474,9 @@ menupopup[emptyplacesresult] > .hide-if-empty-places-result {
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
#confirmation-hint-message-container { #confirmation-hint-message-container {
transform: scale(0.8); transform: scale(.8);
opacity: 0; opacity: 0;
transition: transition: transform 120ms cubic-bezier(.25,1.27,.35,1.18),
transform 120ms cubic-bezier(0.25, 1.27, 0.35, 1.18),
opacity 60ms linear; opacity 60ms linear;
#confirmation-hint-checkmark-animation-container[animate] + & { #confirmation-hint-checkmark-animation-container[animate] + & {
@@ -517,7 +517,10 @@ menupopup[emptyplacesresult] > .hide-if-empty-places-result {
min-width: calc(var(--menu-panel-width) + 32px); min-width: calc(var(--menu-panel-width) + 32px);
} }
.toolbaritem-combined-buttons:is(:not([cui-areatype="toolbar"]), [overflowedItem="true"]) > toolbarbutton > .toolbarbutton-icon { .toolbaritem-combined-buttons:is(
:not([cui-areatype="toolbar"]),
[overflowedItem=true]
) > toolbarbutton > .toolbarbutton-icon {
min-width: 0; min-width: 0;
min-height: 0; min-height: 0;
margin: 0; margin: 0;
@@ -536,8 +539,8 @@ menupopup[emptyplacesresult] > .hide-if-empty-places-result {
transform: scale(1); transform: scale(1);
} }
100% { 100% {
opacity: 0; opacity: 0 ;
transform: scale(0.5); transform: scale(.5);
} }
} }
@@ -621,12 +624,8 @@ toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-badg
/* FxAccount indicator bits. */ /* FxAccount indicator bits. */
@keyframes syncRotate { @keyframes syncRotate {
from { from { transform: rotate(0); }
transform: rotate(0); to { transform: rotate(360deg); }
}
to {
transform: rotate(360deg);
}
} }
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
@@ -672,7 +671,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-badg
} }
#PanelUI-fxa[showing-fxa-menu-message] #fxa-manage-account-button { #PanelUI-fxa[showing-fxa-menu-message] #fxa-manage-account-button {
display: none; display: none
} }
:root:not([fxastatus="signedin"]) #PanelUI-fxa-menu-syncnow-button { :root:not([fxastatus="signedin"]) #PanelUI-fxa-menu-syncnow-button {
@@ -723,8 +722,8 @@ toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-badg
font-weight: 600; font-weight: 600;
} }
:root[fxadisabled="true"] #appMenu-fxa-status2, :root[fxadisabled=true] #appMenu-fxa-status2,
:root[fxadisabled="true"] #appMenu-fxa-separator { :root[fxadisabled=true] #appMenu-fxa-separator {
display: none; display: none;
} }
@@ -821,6 +820,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-badg
} }
} }
/* Firefox Account Toolbar Panel */ /* Firefox Account Toolbar Panel */
#fxa-avatar-image { #fxa-avatar-image {
@@ -1041,23 +1041,23 @@ panelmultiview[mainViewId="PanelUI-fxa"] #PanelUI-remotetabs-syncnow {
} }
.sendToDevice-device { .sendToDevice-device {
&[clientType="phone"] { &[clientType=phone] {
list-style-image: url("chrome://browser/skin/device-phone.svg"); list-style-image: url("chrome://browser/skin/device-phone.svg");
} }
&[clientType="tablet"] { &[clientType=tablet] {
list-style-image: url("chrome://browser/skin/device-tablet.svg"); list-style-image: url("chrome://browser/skin/device-tablet.svg");
} }
&[clientType="desktop"] { &[clientType=desktop] {
list-style-image: url("chrome://browser/skin/device-desktop.svg"); list-style-image: url("chrome://browser/skin/device-desktop.svg");
} }
&[clientType="tv"] { &[clientType=tv] {
list-style-image: url("chrome://browser/skin/device-tv.svg"); list-style-image: url("chrome://browser/skin/device-tv.svg");
} }
&[clientType="vr"] { &[clientType=vr] {
list-style-image: url("chrome://browser/skin/device-vr.svg"); list-style-image: url("chrome://browser/skin/device-vr.svg");
} }
@@ -1138,8 +1138,7 @@ panelmultiview[mainViewId="PanelUI-fxa"] #PanelUI-remotetabs-syncnow {
display: block; display: block;
} }
#PanelUI-remotetabs[mainview] { #PanelUI-remotetabs[mainview] { /* panel anchored to toolbar button might be too skinny */
/* panel anchored to toolbar button might be too skinny */
min-width: 19em; min-width: 19em;
.PanelUI-remotetabs-notabsforclient-label { .PanelUI-remotetabs-notabsforclient-label {
@@ -1149,7 +1148,6 @@ panelmultiview[mainViewId="PanelUI-fxa"] #PanelUI-remotetabs-syncnow {
/* Work around bug 1224412 - these boxes will cause scrollbars to appear when /* Work around bug 1224412 - these boxes will cause scrollbars to appear when
the panel is anchored to a toolbar button. the panel is anchored to a toolbar button.
*/ */
/* prettier-ignore */
#PanelUI-remotetabs-setupsync, #PanelUI-remotetabs-setupsync,
#PanelUI-remotetabs-syncdisabled, #PanelUI-remotetabs-syncdisabled,
#PanelUI-remotetabs-reauthsync, #PanelUI-remotetabs-reauthsync,
@@ -1475,7 +1473,10 @@ panelview .toolbarbutton-1 {
panelview .toolbarbutton-1, panelview .toolbarbutton-1,
toolbarbutton.subviewbutton, toolbarbutton.subviewbutton,
.widget-overflow-list .toolbarbutton-1, .widget-overflow-list .toolbarbutton-1,
.toolbaritem-combined-buttons:is(:not([cui-areatype="toolbar"]), [overflowedItem="true"]) > toolbarbutton .toolbaritem-combined-buttons:is(
:not([cui-areatype="toolbar"]),
[overflowedItem=true]
) > toolbarbutton
) { ) {
color: var(--button-text-color-ghost); color: var(--button-text-color-ghost);
background-color: var(--button-background-color-ghost); background-color: var(--button-background-color-ghost);
@@ -1498,7 +1499,7 @@ panelview .toolbarbutton-1 {
&:active { &:active {
color: var(--button-text-color-ghost-active); color: var(--button-text-color-ghost-active);
background-color: var(--button-background-color-ghost-active); background-color: var(--button-background-color-ghost-active);
box-shadow: 0 1px 0 hsla(210, 4%, 10%, 0.03) inset; box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
} }
} }
} }
@@ -1533,9 +1534,7 @@ panelview .toolbarbutton-1 {
} }
.PanelUI-tabitem-container { .PanelUI-tabitem-container {
transition: transition: opacity 0.2s ease, transform 0.2s ease;
opacity 0.2s ease,
transform 0.2s ease;
&.tabitem-removed { &.tabitem-removed {
opacity: 0; opacity: 0;
@@ -1554,14 +1553,14 @@ panelview .toolbarbutton-1 {
} }
toolbarbutton[itemtype="showmorebutton"], toolbarbutton[itemtype="showmorebutton"],
toolbarbutton[itemtype="showinactivebutton"] { toolbarbutton[itemtype="showinactivebutton"] {
padding-inline-start: 0; padding-inline-start: 0;
> label { > label {
/* Needed to properly left-align with the rest of list */ /* Needed to properly left-align with the rest of list */
margin-inline-start: -8px; margin-inline-start: -8px;
} }
} }
.remote-tabs-close-button { .remote-tabs-close-button {
.toolbarbutton-icon { .toolbarbutton-icon {
@@ -1570,6 +1569,7 @@ toolbarbutton[itemtype="showinactivebutton"] {
fill: currentColor; fill: currentColor;
fill-opacity: 0.6; fill-opacity: 0.6;
display: flex; display: flex;
} }
} }
@@ -1579,7 +1579,10 @@ toolbarbutton[itemtype="showinactivebutton"] {
} }
.toolbaritem-combined-buttons { .toolbaritem-combined-buttons {
&:where(:not(.unified-extensions-item)):is(:not([cui-areatype="toolbar"]), [overflowedItem="true"]) > toolbarbutton { &:where(:not(.unified-extensions-item)):is(
:not([cui-areatype="toolbar"]),
[overflowedItem=true]
) > toolbarbutton {
border: 0; border: 0;
margin: 0; margin: 0;
flex: 1; flex: 1;
@@ -1592,16 +1595,22 @@ toolbarbutton[itemtype="showinactivebutton"] {
display: none; display: none;
} }
&:is(:not([cui-areatype="toolbar"]), [overflowedItem="true"]) > toolbarbutton:not(.toolbarbutton-1)[disabled] { &:is(
:not([cui-areatype="toolbar"]),
[overflowedItem=true]
) > toolbarbutton:not(.toolbarbutton-1)[disabled] {
opacity: 0.4; opacity: 0.4;
/* Override toolbarbutton.css which sets the color to GrayText */ /* Override toolbarbutton.css which sets the color to GrayText */
color: inherit; color: inherit;
} }
&:is(:not([cui-areatype="toolbar"]), [overflowedItem="true"]) > separator { &:is(
:not([cui-areatype="toolbar"]),
[overflowedItem=true]
) > separator {
appearance: none; appearance: none;
align-items: stretch; align-items: stretch;
margin: 0.5em 0; margin: .5em 0;
width: 1px; width: 1px;
height: auto; height: auto;
background: var(--panel-separator-color); background: var(--panel-separator-color);
@@ -1610,7 +1619,10 @@ toolbarbutton[itemtype="showinactivebutton"] {
transition-timing-function: ease; transition-timing-function: ease;
} }
&:is(:not([cui-areatype="toolbar"]), [overflowedItem="true"]):hover > separator { &:is(
:not([cui-areatype="toolbar"]),
[overflowedItem=true]
):hover > separator {
margin: 0; margin: 0;
} }
} }
@@ -1629,7 +1641,7 @@ toolbarbutton[itemtype="showinactivebutton"] {
.toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text { .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text {
text-align: start; text-align: start;
padding-inline-start: 0.5em; padding-inline-start: .5em;
} }
> #stop-reload-button > .toolbarbutton-1 { > #stop-reload-button > .toolbarbutton-1 {
@@ -1700,7 +1712,7 @@ toolbarbutton[itemtype="showinactivebutton"] {
border: 1px solid rgba(110, 110, 110, 0.4); border: 1px solid rgba(110, 110, 110, 0.4);
border-radius: 50%; border-radius: 50%;
margin: 1px 5px; margin: 1px 5px;
background-color: rgba(150, 150, 150, 0.2); background-color: rgba(150,150,150,0.2);
} }
> .radio-check[selected] { > .radio-check[selected] {
@@ -1841,7 +1853,8 @@ radiogroup:focus-visible > .subviewradio[focused="true"] {
&.panel-header-with-info-button > .subviewbutton-back + h1 { &.panel-header-with-info-button > .subviewbutton-back + h1 {
margin-inline-start: 0; margin-inline-start: 0;
margin-inline-end: calc(var(--arrowpanel-header-back-icon-full-width) - var(--arrowpanel-header-info-icon-full-width)); margin-inline-end: calc(var(--arrowpanel-header-back-icon-full-width)
- var(--arrowpanel-header-info-icon-full-width));
} }
&:not(.panel-header-with-additional-element) > .subviewbutton-back + h1 { &:not(.panel-header-with-additional-element) > .subviewbutton-back + h1 {
@@ -1887,7 +1900,7 @@ radiogroup:focus-visible > .subviewradio[focused="true"] {
#info-message-container { #info-message-container {
height: 260px; height: 260px;
overflow: hidden; overflow: hidden;
transition: margin-bottom 0.25s; transition: margin-bottom .25s;
} }
#info-message-container[disabled] { #info-message-container[disabled] {
@@ -1908,7 +1921,7 @@ radiogroup:focus-visible > .subviewradio[focused="true"] {
align-items: flex-end; align-items: flex-end;
height: calc(100% - 20px); height: calc(100% - 20px);
margin: 10px; margin: 10px;
transition: opacity 0.25s; transition: opacity .25s;
opacity: 1; opacity: 1;
background-image: url(chrome://browser/skin/controlcenter/hero-message-background.svg); background-image: url(chrome://browser/skin/controlcenter/hero-message-background.svg);
background-repeat: no-repeat; background-repeat: no-repeat;
@@ -1960,7 +1973,7 @@ radiogroup:focus-visible > .subviewradio[focused="true"] {
/* Override themes for the Pocket panel, because the Pocket /* Override themes for the Pocket panel, because the Pocket
panel currently only supports dark and light themes. */ panel currently only supports dark and light themes. */
@media not (prefers-color-scheme: dark) { @media not (prefers-color-scheme: dark){
&[viewId="PanelUI-savetopocket"] { &[viewId="PanelUI-savetopocket"] {
--arrowpanel-background: #fbfbfb; --arrowpanel-background: #fbfbfb;
} }
@@ -1998,16 +2011,15 @@ radiogroup:focus-visible > .subviewradio[focused="true"] {
"false". When the DOM is being initialized it is set to "false" so that animations "false". When the DOM is being initialized it is set to "false" so that animations
do not run. */ do not run. */
&[animationready="true"] #PanelUI-profiler-info { &[animationready="true"] #PanelUI-profiler-info {
transition: transition: margin-block-end 250ms, opacity 250ms;
margin-block-end 250ms,
opacity 250ms;
} }
} }
#PanelUI-profiler-info { #PanelUI-profiler-info {
min-height: 180px; min-height: 180px;
padding: 0 15px 15px; padding: 0 15px 15px;
background: top 10px right no-repeat url("chrome://browser/skin/profiler-popup-backdrop.png"); background: top 10px right no-repeat
url("chrome://browser/skin/profiler-popup-backdrop.png");
opacity: 1; opacity: 1;
} }
@@ -2045,7 +2057,7 @@ radiogroup:focus-visible > .subviewradio[focused="true"] {
} }
#PanelUI-profiler-content-edit-settings { #PanelUI-profiler-content-edit-settings {
font-size: 0.9em; font-size: .9em;
} }
.PanelUI-profiler-content-label { .PanelUI-profiler-content-label {
@@ -2054,7 +2066,7 @@ radiogroup:focus-visible > .subviewradio[focused="true"] {
#PanelUI-profiler-content-description { #PanelUI-profiler-content-description {
margin-block: 4px; margin-block: 4px;
font-size: 0.9em; font-size: .9em;
color: var(--text-color-deemphasized); color: var(--text-color-deemphasized);
} }
@@ -2129,7 +2141,7 @@ radiogroup:focus-visible > .subviewradio[focused="true"] {
/* Web-extension pop-ups */ /* Web-extension pop-ups */
.cui-widget-panelview[id^="PanelUI-webext-"] { .cui-widget-panelview[id^=PanelUI-webext-] {
border-radius: var(--arrowpanel-border-radius); border-radius: var(--arrowpanel-border-radius);
} }

4
browser/themes/shared/downloads/download-blockedStates.css
View File

@@ -16,14 +16,14 @@
#downloadsListBox > richlistitem[verdict="Malware"] .downloadBlockedBadge { #downloadsListBox > richlistitem[verdict="Malware"] .downloadBlockedBadge {
background-image: url("chrome://global/skin/icons/error.svg"); background-image: url("chrome://global/skin/icons/error.svg");
-moz-context-properties: fill; -moz-context-properties: fill;
fill: light-dark(#e22850, #ff9aa2); fill: light-dark(#e22850, #FF9AA2);
} }
#downloadsPanel-blockedSubview[verdict="Uncommon"] .downloadsPanel-blockedSubview-image, #downloadsPanel-blockedSubview[verdict="Uncommon"] .downloadsPanel-blockedSubview-image,
#downloadsListBox > richlistitem[verdict="Uncommon"] .downloadBlockedBadge { #downloadsListBox > richlistitem[verdict="Uncommon"] .downloadBlockedBadge {
background-image: url("chrome://global/skin/icons/info-filled.svg"); background-image: url("chrome://global/skin/icons/info-filled.svg");
-moz-context-properties: fill; -moz-context-properties: fill;
fill: light-dark(#0090ed, #80ebff); fill: light-dark(#0090ED, #80EBFF);
} }
.downloadsPanel-blockedSubview-image { .downloadsPanel-blockedSubview-image {

8
browser/themes/shared/downloads/indicator.css
View File

@@ -116,7 +116,7 @@ toolbarpaletteitem > #downloads-button > .toolbarbutton-badge-stack > #downloads
#downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { #downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
background: url(chrome://browser/skin/notification-fill-12.svg) no-repeat center; background: url(chrome://browser/skin/notification-fill-12.svg) no-repeat center;
fill: light-dark(rgb(226, 40, 80), rgb(255, 132, 138)); fill: light-dark(rgb(226,40,80), rgb(255,132,138));
} }
#downloads-button[animate] > .toolbarbutton-badge-stack > .toolbarbutton-badge { #downloads-button[animate] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
@@ -202,12 +202,10 @@ toolbarpaletteitem > #downloads-button > .toolbarbutton-badge-stack > #downloads
animation-timing-function: steps(18); animation-timing-function: steps(18);
transform: translateX(0); transform: translateX(0);
} }
14.28% { 14.28% { /* 18th frame (18/126) */
/* 18th frame (18/126) */
transform: translateX(calc(18 * -20px)); transform: translateX(calc(18 * -20px));
} }
93.65% { 93.65% { /* Wait 100 frames of time, but resume from 18th frame (118/126) */
/* Wait 100 frames of time, but resume from 18th frame (118/126) */
animation-timing-function: steps(8); animation-timing-function: steps(8);
transform: translateX(calc(18 * -20px)); transform: translateX(calc(18 * -20px));
} }

9
browser/themes/shared/downloads/progressmeter.css
View File

@@ -7,7 +7,7 @@
:root { :root {
--download-progress-fill-color: var(--toolbarbutton-icon-fill-attention); --download-progress-fill-color: var(--toolbarbutton-icon-fill-attention);
--download-progress-paused-color: GrayText; --download-progress-paused-color: GrayText;
--download-progress-flare-color: rgba(255, 255, 255, 0.75); --download-progress-flare-color: rgba(255,255,255,0.75);
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@@ -61,14 +61,11 @@
Create a gradient with 2 identical patterns, and enlarge the size to 200%. Create a gradient with 2 identical patterns, and enlarge the size to 200%.
This allows us to animate background-position with percentage. */ This allows us to animate background-position with percentage. */
background-color: var(--download-progress-fill-color); background-color: var(--download-progress-fill-color);
background-image: linear-gradient( background-image: linear-gradient(90deg, transparent 0%,
90deg,
transparent 0%,
var(--download-progress-flare-color) 25%, var(--download-progress-flare-color) 25%,
transparent 50%, transparent 50%,
var(--download-progress-flare-color) 75%, var(--download-progress-flare-color) 75%,
transparent 100% transparent 100%);
);
background-blend-mode: normal; background-blend-mode: normal;
background-size: 200% 100%; background-size: 200% 100%;
animation: downloadProgressSlideX 1.5s linear infinite; animation: downloadProgressSlideX 1.5s linear infinite;

1
browser/themes/shared/formautofill-notification.css
View File

@@ -174,6 +174,7 @@
} }
} }
/* Default size for input fields in address edit doorhanger */ /* Default size for input fields in address edit doorhanger */
.address-edit-notification-content { .address-edit-notification-content {
:is(input, textarea) { :is(input, textarea) {

7
browser/themes/shared/identity-block/identity-block.css
View File

@@ -46,14 +46,14 @@
outline: var(--toolbarbutton-outline); outline: var(--toolbarbutton-outline);
outline-offset: var(--toolbarbutton-outline-offset); outline-offset: var(--toolbarbutton-outline-offset);
&:hover:not([open="true"]) { &:hover:not([open=true]) {
background-color: var(--urlbar-box-hover-bgcolor); background-color: var(--urlbar-box-hover-bgcolor);
color: var(--urlbar-box-hover-text-color); color: var(--urlbar-box-hover-text-color);
outline-color: var(--toolbarbutton-hover-outline-color); outline-color: var(--toolbarbutton-hover-outline-color);
} }
&:hover:active, &:hover:active,
&[open="true"] { &[open=true] {
background-color: var(--urlbar-box-active-bgcolor); background-color: var(--urlbar-box-active-bgcolor);
color: var(--urlbar-box-hover-text-color); color: var(--urlbar-box-hover-text-color);
outline-color: var(--toolbarbutton-active-outline-color); outline-color: var(--toolbarbutton-active-outline-color);
@@ -201,6 +201,7 @@
fill: unset; fill: unset;
} }
#identity-box[pageproxystate="valid"].notSecure #identity-icon, #identity-box[pageproxystate="valid"].notSecure #identity-icon,
#identity-box[pageproxystate="valid"].mixedActiveContent #identity-icon, #identity-box[pageproxystate="valid"].mixedActiveContent #identity-icon,
#identity-box[pageproxystate="valid"].httpsOnlyErrorPage #identity-icon { #identity-box[pageproxystate="valid"].httpsOnlyErrorPage #identity-icon {
@@ -215,7 +216,7 @@
display: none; display: none;
} }
#identity-permission-box[open="true"], #identity-permission-box[open=true],
#identity-permission-box[hasPermissions], #identity-permission-box[hasPermissions],
#identity-permission-box[hasSharingIcon] { #identity-permission-box[hasSharingIcon] {
display: flex; display: flex;

16
browser/themes/shared/migration/migration-wizard.css
View File

@@ -13,7 +13,7 @@
} }
h1 { h1 {
font-size: var(--embedded-wizard-header-font-size, 1.3em); font-size: var(--embedded-wizard-header-font-size, 1.30em);
font-weight: var(--embedded-wizard-header-font-weight, normal); font-weight: var(--embedded-wizard-header-font-weight, normal);
margin-block: var(--embedded-wizard-header-margin-block, 0 16px); margin-block: var(--embedded-wizard-header-margin-block, 0 16px);
min-height: 1em; min-height: 1em;
@@ -239,8 +239,7 @@ summary {
.resource-progress-group { .resource-progress-group {
display: grid; display: grid;
grid-template-columns: min-content auto; grid-template-columns: min-content auto;
grid-template-areas: grid-template-areas: "icon type"
"icon type"
"icon status" "icon status"
"icon support"; "icon support";
align-items: center; align-items: center;
@@ -361,8 +360,8 @@ summary {
* Stroke and fill colours were sampled from built-in dark and light theme * Stroke and fill colours were sampled from built-in dark and light theme
* from Chrome on Windows * from Chrome on Windows
*/ */
fill: light-dark(#474747, #c7c7c7); fill: light-dark(#474747, #C7C7C7);
stroke: light-dark(#474747, #c7c7c7); stroke: light-dark(#474747, #C7C7C7);
} }
.no-browsers-found-message { .no-browsers-found-message {
@@ -386,7 +385,7 @@ summary {
div[name="page-selection"]:not([no-resources]) .no-resources-found, div[name="page-selection"]:not([no-resources]) .no-resources-found,
div[name="page-selection"]:not([no-permissions]) .no-permissions-message, div[name="page-selection"]:not([no-permissions]) .no-permissions-message,
div[name="page-selection"]:is([no-resources], [no-permissions]) .hide-on-error, div[name="page-selection"]:is([no-resources],[no-permissions]) .hide-on-error,
div[name="page-selection"]:not([file-import-error]) .file-import-error { div[name="page-selection"]:not([file-import-error]) .file-import-error {
display: none; display: none;
} }
@@ -398,8 +397,7 @@ div[name="page-selection"][show-import-all] .resource-selection-details {
.resource-selection-details > summary { .resource-selection-details > summary {
list-style: none; list-style: none;
display: grid; display: grid;
grid-template-areas: grid-template-areas: "a b"
"a b"
"c b"; "c b";
margin-block: 16px 0; margin-block: 16px 0;
} }
@@ -409,7 +407,7 @@ div[name="page-selection"][show-import-all] .resource-selection-details {
} }
p.migration-wizard-subheader { p.migration-wizard-subheader {
font-size: var(--embedded-wizard-subheader-font-size, 0.85em); font-size: var(--embedded-wizard-subheader-font-size, .85em);
font-weight: var(--embedded-wizard-subheader-font-weight, 400); font-weight: var(--embedded-wizard-subheader-font-weight, 400);
margin-block: var(--embedded-wizard-subheader-margin-block, 0 28px); margin-block: var(--embedded-wizard-subheader-margin-block, 0 28px);
line-height: 1.2em; line-height: 1.2em;

25
browser/themes/shared/notification-icons.css
View File

@@ -13,12 +13,12 @@
border-radius: var(--urlbar-icon-border-radius); border-radius: var(--urlbar-icon-border-radius);
&:hover { &:hover {
background-color: hsla(0, 0%, 70%, 0.2); background-color: hsla(0,0%,70%,.2);
} }
&:hover:active, &:hover:active,
&[open] { &[open] {
background-color: hsla(0, 0%, 70%, 0.3); background-color: hsla(0,0%,70%,.3);
} }
} }
@@ -158,6 +158,7 @@
} }
} }
.screen-icon { .screen-icon {
list-style-image: url(chrome://browser/skin/notification-icons/screen.svg); list-style-image: url(chrome://browser/skin/notification-icons/screen.svg);
@@ -249,24 +250,16 @@
list-style-image: url("chrome://browser/skin/drm-icon.svg"); list-style-image: url("chrome://browser/skin/drm-icon.svg");
} }
.notification-anchor-icon[animate="true"], .notification-anchor-icon[animate=true],
#eme-notification-icon[firstplay="true"] { #eme-notification-icon[firstplay=true] {
animation: emeTeachingMoment 0.2s linear 0s 5 normal; animation: emeTeachingMoment 0.2s linear 0s 5 normal;
} }
@keyframes emeTeachingMoment { @keyframes emeTeachingMoment {
0% { 0% {transform: translateX(0); }
transform: translateX(0); 25% {transform: translateX(3px) }
} 75% {transform: translateX(-3px) }
25% { 100% { transform: translateX(0); }
transform: translateX(3px);
}
75% {
transform: translateX(-3px);
}
100% {
transform: translateX(0);
}
} }
/* INSTALL ADDONS */ /* INSTALL ADDONS */

18
browser/themes/shared/pageInfo.css
View File

@@ -96,12 +96,12 @@
} }
#viewGroup > radio:hover { #viewGroup > radio:hover {
background-color: #e0e8f6; background-color: #E0E8F6;
color: black; color: black;
} }
#viewGroup > radio[selected="true"] { #viewGroup > radio[selected="true"] {
background-color: #c1d2ee; background-color: #C1D2EE;
color: black; color: black;
} }
@@ -128,9 +128,9 @@
} }
@media (-moz-mac-big-sur-theme: 0) { @media (-moz-mac-big-sur-theme: 0) {
#viewGroup > radio[selected="true"], #viewGroup > radio[selected=true],
#viewGroup > toolbarbutton[checked="true"] { #viewGroup > toolbarbutton[checked=true] {
color: #fff !important; color: #FFF !important;
text-shadow: rgba(0, 0, 0, 0.4) 0 1px; text-shadow: rgba(0, 0, 0, 0.4) 0 1px;
} }
} }
@@ -138,7 +138,7 @@
/* Misc */ /* Misc */
tree { tree {
margin: 0.5em; margin: .5em;
} }
html|input { html|input {
@@ -152,7 +152,7 @@ html|input.header {
} }
#imagecontainerbox { #imagecontainerbox {
margin: 0.5em; margin: .5em;
background: white; background: white;
overflow: auto; overflow: auto;
border: 1px solid ThreeDLightShadow; border: 1px solid ThreeDLightShadow;
@@ -200,7 +200,7 @@ html|input:disabled {
@media not (-moz-platform: macos) { @media not (-moz-platform: macos) {
#mediaSplitter { #mediaSplitter {
height: 0.8em; height: .8em;
} }
} }
@@ -222,7 +222,7 @@ treechildren::-moz-tree-cell-text(broken) {
#permList { #permList {
appearance: auto; appearance: auto;
-moz-default-appearance: listbox; -moz-default-appearance: listbox;
margin: 0.5em; margin: .5em;
overflow: auto; overflow: auto;
color: FieldText; color: FieldText;
} }

26
browser/themes/shared/places/sidebar.css
View File

@@ -35,7 +35,15 @@
color: var(--lwt-sidebar-text-color); color: var(--lwt-sidebar-text-color);
color-scheme: light; color-scheme: light;
scrollbar-color: light-dark(rgba(204, 204, 204, 0.5), rgba(249, 249, 250, 0.4)) light-dark(rgba(230, 230, 235, 0.5), rgba(20, 20, 25, 0.3)); scrollbar-color:
light-dark(
rgba(204,204,204,.5),
rgba(249,249,250,.4)
)
light-dark(
rgba(230,230,235,.5),
rgba(20,20,25,.3)
);
} }
.sidebar-panel[lwt-sidebar="dark"] { .sidebar-panel[lwt-sidebar="dark"] {
@@ -44,7 +52,7 @@
.sidebar-panel[lwt-sidebar] .sidebar-placesTreechildren { .sidebar-panel[lwt-sidebar] .sidebar-placesTreechildren {
&::-moz-tree-row(selected) { &::-moz-tree-row(selected) {
background-color: light-dark(hsla(0, 0%, 80%, 0.3), rgba(249, 249, 250, 0.1)); background-color: light-dark(hsla(0,0%,80%,.3), rgba(249,249,250,.1));
} }
&::-moz-tree-image(selected), &::-moz-tree-image(selected),
@@ -108,8 +116,8 @@
} }
@media (-moz-platform: windows) { @media (-moz-platform: windows) {
:root[uidensity="touch"] #search-box, :root[uidensity=touch] #search-box,
:root[uidensity="touch"] .sidebar-placesTreechildren::-moz-tree-row { :root[uidensity=touch] .sidebar-placesTreechildren::-moz-tree-row {
min-height: 32px; min-height: 32px;
} }
@@ -118,7 +126,7 @@
padding: 0 4px; padding: 0 4px;
} }
.sidebar-placesTreechildren::-moz-tree-cell(leaf), .sidebar-placesTreechildren::-moz-tree-cell(leaf) ,
.sidebar-placesTreechildren::-moz-tree-image(leaf) { .sidebar-placesTreechildren::-moz-tree-image(leaf) {
cursor: pointer; cursor: pointer;
} }
@@ -168,12 +176,12 @@
margin-inline-start: 4px; margin-inline-start: 4px;
} }
:root[uidensity="touch"] #search-box, :root[uidensity=touch] #search-box,
:root[uidensity="touch"] .sidebar-placesTreechildren::-moz-tree-row { :root[uidensity=touch] .sidebar-placesTreechildren::-moz-tree-row {
min-height: 32px; min-height: 32px;
} }
.sidebar-placesTreechildren::-moz-tree-cell(leaf), .sidebar-placesTreechildren::-moz-tree-cell(leaf) ,
.sidebar-placesTreechildren::-moz-tree-image(leaf) { .sidebar-placesTreechildren::-moz-tree-image(leaf) {
cursor: pointer; cursor: pointer;
} }
@@ -195,7 +203,7 @@
font-size: 1.0909rem; font-size: 1.0909rem;
} }
:root[uidensity="touch"] .sidebar-placesTreechildren::-moz-tree-row { :root[uidensity=touch] .sidebar-placesTreechildren::-moz-tree-row {
min-height: 32px; min-height: 32px;
} }

1
browser/themes/shared/preferences/applications.css
View File

@@ -20,7 +20,6 @@ menuitem[appHandlerIcon="save"] > .menu-icon {
@media not (-moz-platform: linux) { @media not (-moz-platform: linux) {
content: url("chrome://browser/skin/preferences/saveFile.png"); content: url("chrome://browser/skin/preferences/saveFile.png");
} }
/* prettier-ignore */
@media (-moz-platform: linux) { @media (-moz-platform: linux) {
content: image-set( content: image-set(
"moz-icon://stock/document-save?size=16" 1x, "moz-icon://stock/document-save?size=16" 1x,

4
browser/themes/shared/preferences/containers-dialog.css
View File

@@ -37,11 +37,11 @@ radio > .userContext-icon {
block-size: 22px; block-size: 22px;
} }
.radio-buttons > radio[selected="true"] { .radio-buttons > radio[selected=true] {
outline-color: var(--in-content-text-color); outline-color: var(--in-content-text-color);
} }
.radio-buttons > radio[focused="true"] { .radio-buttons > radio[focused=true] {
outline-color: var(--color-accent-primary); outline-color: var(--color-accent-primary);
} }

10
browser/themes/shared/preferences/fxaPairDevice.css
View File

@@ -43,7 +43,7 @@
width: 200px; width: 200px;
background-size: contain; background-size: contain;
image-rendering: -moz-crisp-edges; image-rendering: -moz-crisp-edges;
transition: filter 250ms cubic-bezier(0.07, 0.95, 0, 1); transition: filter 250ms cubic-bezier(.07,.95,0,1);
} }
#qrWrapper:not([pairing-status="ready"]) #qrContainer { #qrWrapper:not([pairing-status="ready"]) #qrContainer {
@@ -73,7 +73,7 @@
height: 200px; height: 200px;
width: 200px; width: 200px;
content: ""; content: "";
transition: opacity 250ms cubic-bezier(0.07, 0.95, 0, 1); transition: opacity 250ms cubic-bezier(.07,.95,0,1);
will-change: transform; will-change: transform;
margin-inline: auto; margin-inline: auto;
} }
@@ -91,7 +91,7 @@
position: absolute; position: absolute;
inset: 0; inset: 0;
margin-inline: auto; margin-inline: auto;
transition: opacity 250ms cubic-bezier(0.07, 0.95, 0, 1); transition: opacity 250ms cubic-bezier(.07,.95,0,1);
cursor: pointer; cursor: pointer;
} }
@@ -99,7 +99,7 @@
text-align: center; text-align: center;
user-select: none; user-select: none;
display: block; display: block;
color: #2484c6; color: #2484C6;
cursor: pointer; cursor: pointer;
} }
@@ -109,7 +109,7 @@
background-image: url("chrome://global/skin/icons/reload.svg"); background-image: url("chrome://global/skin/icons/reload.svg");
background-size: contain; background-size: contain;
-moz-context-properties: fill; -moz-context-properties: fill;
fill: #2484c6; fill: #2484C6;
} }
@keyframes spin { @keyframes spin {

Some files were not shown because too many files have changed in this diff Show More