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

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

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D249181
This commit is contained in:
hannajones
2025-05-21 03:51:45 +00:00
committed by hjones@mozilla.com
parent 686c1cf85f
commit 9604b0a8ae
83 changed files with 888 additions and 788 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -133,8 +133,8 @@
/* 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
thicker outline and cancel border-radius for that case. */
outline: 4px solid rgb(0,200,215);
border-radius: 0 !important;
outline: 4px solid rgb(0, 200, 215);
border-radius: 0 !important;
}
#UITourTooltipDescription {
@@ -185,7 +185,7 @@
width: 24px;
height: 24px;
/* Matches the libadwaita transition */
transition: background-color .2s ease;
transition: background-color 0.2s ease;
}
&:hover > .toolbarbutton-icon {

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

@@ -11,6 +11,7 @@
margin-inline-start: 3px;
}
/* prettier-ignore */
#sanitizeEverythingWarningIcon {
list-style-image: image-set(
"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");
:root {
--arrowpanel-field-background: light-dark(rgba(249, 249, 250, .3), rgba(12, 12, 13, .3));
--arrowpanel-field-background: light-dark(rgba(249, 249, 250, 0.3), rgba(12, 12, 13, 0.3));
}
/* stylelint-disable-next-line media-query-no-invalid */
@@ -57,7 +57,7 @@
/** End titlebar **/
: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 ----- */
@@ -96,7 +96,7 @@
resembles the system outline, bringing the Urlbar in line with panels and
other Mac apps. */
#urlbar[open] > #urlbar-background {
outline: 1px solid var(--focus-outline-color)
outline: 1px solid var(--focus-outline-color);
}
}
@@ -115,7 +115,7 @@
/* ----- AUTOCOMPLETE ----- */
#PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
border-top: 1px solid #C7C7C7;
border-top: 1px solid #c7c7c7;
}
/* Bookmarking panel */
@@ -137,14 +137,14 @@
margin: 0;
}
#editBMPanel_folderTree > treechildren::-moz-tree-row(blur,selected),
#editBMPanel_folderTree > treechildren::-moz-tree-row(blur, selected),
#editBMPanel_tagsSelector:not(:focus) > richlistitem[selected] {
background-color: var(--arrowpanel-dimmed);
}
#editBMPanel_folderTree > treechildren::-moz-tree-twisty(blur,selected),
#editBMPanel_folderTree > treechildren::-moz-tree-image(blur,selected),
#editBMPanel_folderTree > treechildren::-moz-tree-cell-text(blur,selected),
#editBMPanel_folderTree > treechildren::-moz-tree-twisty(blur, selected),
#editBMPanel_folderTree > treechildren::-moz-tree-image(blur, selected),
#editBMPanel_folderTree > treechildren::-moz-tree-cell-text(blur, selected),
#editBMPanel_tagsSelector:not(:focus) > richlistitem[selected] {
color: inherit;
}
@@ -174,7 +174,7 @@
}
.tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-icon-image:not([selected], [multiselected]) {
opacity: .9;
opacity: 0.9;
}
/*
@@ -186,7 +186,7 @@
}
.tab-label-container:not([selected], [multiselected]) {
opacity: .7;
opacity: 0.7;
}
.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;
}
.subviewbutton:not([image],[targetURI],.bookmark-item) > .menu-icon {
.subviewbutton:not([image], [targetURI], .bookmark-item) > .menu-icon {
display: none;
}

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

@@ -6,7 +6,7 @@
:root {
--downloads-item-height: 6em;
--downloads-item-font-size-factor: 0.80;
--downloads-item-font-size-factor: 0.8;
--downloads-item-details-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,
&[type="menu"][disabled] > .toolbarbutton-menu-dropmarker,
&:not(:hover):-moz-window-inactive[type="menu"] > .toolbarbutton-menu-dropmarker {
opacity: .5;
opacity: 0.5;
}
&:-moz-window-inactive[disabled] > .toolbarbutton-icon,
&:-moz-window-inactive[type="menu"][disabled] > .toolbarbutton-menu-dropmarker {
opacity: .25;
opacity: 0.25;
}
> menupopup {

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

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

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

@@ -30,6 +30,7 @@
}
}
/* 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-icon {
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-message {
margin: 0;
padding-inline-start: .5em;
padding-inline-start: 0.5em;
word-break: break-word;
}
@@ -148,8 +148,7 @@ unified-extensions-item {
.unified-extensions-item-menu-button.subviewbutton {
list-style-image: url("chrome://global/skin/icons/settings.svg");
/* 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;
border-radius: 0;
/* override panelUI-shared.css */
@@ -176,7 +175,7 @@ unified-extensions-item {
&:hover:active > .toolbarbutton-icon {
color: var(--uei-button-active-color);
background-color: var(--uei-button-active-bgcolor);
box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
box-shadow: 0 1px 0 hsla(210, 4%, 10%, 0.03) inset;
}
&:focus-visible > .toolbarbutton-icon {

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

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

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

@@ -6,7 +6,7 @@
@media not (prefers-contrast) {
:root {
--in-content-page-background: #A4000F;
--in-content-page-background: #a4000f;
--in-content-page-color: white;
--in-content-text-color: white;
--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-style: solid;
--short-notification-background: #0250BB;
--short-notification-gradient: #9059FF;
--warning-icon-bgcolor: light-dark(#FFA436, #FFBD4F);
--short-notification-background: #0250bb;
--short-notification-gradient: #9059ff;
--warning-icon-bgcolor: light-dark(#ffa436, #ffbd4f);
--urlbar-box-bgcolor: var(--button-background-color-hover);
--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-hover: light-dark(var(--color-blue-60), var(--color-cyan-30));
--link-color-active: light-dark(var(--color-blue-70), var(--color-cyan-20));
--tabs-navbar-separator-color: light-dark(rgba(0,0,0,.1), rgba(0,0,0,.3));
--tabs-navbar-separator-color: light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
--attention-dot-color: light-dark(#2ac3a2, #54ffbd);
--toolbox-bgcolor: var(--lwt-accent-color);
@@ -61,7 +61,7 @@
--toolbox-textcolor-inactive: var(--lwt-text-color, currentColor);
@media not (prefers-contrast) {
--focus-outline-color: light-dark(#0061E0, #00DDFF);
--focus-outline-color: light-dark(#0061e0, #00ddff);
}
}
@@ -84,23 +84,17 @@
:root:not([lwtheme]) {
--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-background-color: light-dark(rgba(207, 207, 216, .33), rgba(0, 0, 0, .33));
--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, .40));
--button-background-color: light-dark(rgba(207, 207, 216, 0.33), rgba(0, 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-active: light-dark(rgb(207, 207, 216), rgba(207, 207, 216, 0.4));
--button-text-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254));
--arrowpanel-background: light-dark(white, rgb(66, 65, 77));
--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-further: light-dark(
color-mix(in srgb, currentColor 20%, transparent),
color-mix(in srgb, currentColor 14%, transparent)
);
--arrowpanel-dimmed: light-dark(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-bgcolor: light-dark(rgb(255, 255, 255), #42414d);
@@ -128,14 +122,14 @@
--toolbarbutton-icon-fill-attention-text: light-dark(rgb(240, 240, 244), rgb(28, 27, 34));
--toolbar-field-border-color: transparent;
--toolbar-field-background-color: light-dark(rgba(0, 0, 0, .05), rgba(0, 0, 0, .3));
--toolbar-field-background-color: light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.3));
--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-color: light-dark(black, rgb(251, 251, 254));
--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-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-hover-background: light-dark(rgb(240, 240, 244), var(--arrowpanel-dimmed));

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

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

@@ -47,7 +47,7 @@
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");
}

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/. */
/* 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;
}
@@ -143,6 +143,7 @@
/* 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,
* 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)
- var(--arrowpanel-menuitem-margin-inline) * 2
- var(--arrowpanel-header-info-icon-full-width) * 2);
@@ -150,6 +151,7 @@
#identity-popup .panel-header > .subviewbutton-back + h1 > span {
/* Same idea as above, but in the identity popup when there's a back button. */
/* prettier-ignore */
max-width: calc(var(--popup-width)
- var(--arrowpanel-menuitem-margin-inline) * 2
- var(--arrowpanel-header-back-icon-full-width) * 2);
@@ -176,7 +178,7 @@
/* 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 {
font-weight: bold;
}
@@ -208,45 +210,45 @@
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);
}
#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);
}
#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);
}
#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);
}
/* 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[mixedcontent~=passive-loaded][isbroken] .identity-popup-security-connection {
#identity-popup[ciphers="weak"] .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);
-moz-context-properties: fill, fill-opacity;
}
#identity-popup[connection=secure-cert-user-overridden] .identity-popup-security-connection,
#identity-popup[connection=cert-error-page] .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 {
list-style-image: url(chrome://global/skin/icons/security-warning.svg);
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);
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);
}
#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);
}
@@ -520,7 +522,7 @@
&:hover:active {
color: var(--button-text-color-active);
background-color: var(--button-background-color-active)
background-color: var(--button-background-color-active);
}
}
@@ -697,7 +699,7 @@
background-repeat: no-repeat;
background-position: center;
fill: light-dark(#0090ED, #80EBFF);
fill: light-dark(#0090ed, #80ebff);
}
.protections-popup-shim-allow-hint-icon {
@@ -730,7 +732,6 @@
margin-top: auto;
}
/* Cookie banner state toggles for the popup menu item */
#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 */
:root {
--drag-drop-transition-duration: .3s;
--drag-drop-transition-duration: 0.3s;
@media (prefers-reduced-motion: reduce) {
--drag-drop-transition-duration: 0s;
@@ -78,7 +78,7 @@ toolbar[overflowable][customizing] > .customization-target {
align-items: center;
flex-shrink: 0;
flex-wrap: wrap;
border-top: 1px solid rgba(0,0,0,.15);
border-top: 1px solid rgba(0, 0, 0, 0.15);
padding: 10px;
> .footer-button,
@@ -96,7 +96,7 @@ toolbar[overflowable][customizing] > .customization-target {
#customization-palette {
padding: 5px 20px 20px;
transition: opacity .3s ease-in-out;
transition: opacity 0.3s ease-in-out;
opacity: 0;
&:not([hidden]) {
@@ -144,7 +144,7 @@ toolbarpaletteitem {
> toolbarspring {
outline: 1px solid;
opacity: .6;
opacity: 0.6;
&[removable="false"] {
outline: 1px dashed;
@@ -238,7 +238,7 @@ toolbarpaletteitem {
&:not([mousedown]):focus-visible {
/* Delay adding the focusring back until after the transform transition completes. */
transition: outline-width .01s linear var(--drag-drop-transition-duration);
transition: outline-width 0.01s linear var(--drag-drop-transition-duration);
outline: var(--default-focusring);
&[place="toolbar"] {
@@ -263,8 +263,7 @@ toolbarpaletteitem {
}
#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;
}
@@ -272,7 +271,7 @@ toolbarpaletteitem {
> toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
> #search-container,
> toolbaritem.toolbaritem-combined-buttons {
transition: transform var(--drag-drop-transition-duration) cubic-bezier(.6, 2, .75, 1.5) !important;
transition: transform var(--drag-drop-transition-duration) cubic-bezier(0.6, 2, 0.75, 1.5) !important;
}
&[mousedown] {
@@ -414,7 +413,9 @@ toolbarpaletteitem {
@media (-moz-platform: macos) {
/* Native styling adds more 'oompf' to the popup box-shadow, so simulate that
* as best as we can here: */
box-shadow: 0 0 1px hsla(0,0%,0%,.3), 0 4px 10px hsla(0,0%,0%,.3);
box-shadow:
0 0 1px hsla(0, 0%, 0%, 0.3),
0 4px 10px hsla(0, 0%, 0%, 0.3);
appearance: none;
border-radius: var(--arrowpanel-border-radius);
}
@@ -422,7 +423,7 @@ toolbarpaletteitem {
@media not (-moz-platform: macos) {
border: 1px solid var(--arrowpanel-border-color);
margin: 0;
box-shadow: 0 0 4px hsla(0,0%,0%,.2);
box-shadow: 0 0 4px hsla(0, 0%, 0%, 0.2);
}
}
}
@@ -657,10 +658,28 @@ toolbarpaletteitem {
}
@keyframes kcode {
0% { border-color: rgb(195,17,206); color: rgb(195,17,206); }
20% { border-color: rgb(252,82,27); 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); }
0% {
border-color: rgb(195, 17, 206);
color: rgb(195, 17, 206);
}
20% {
border-color: rgb(252, 82, 27);
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);
}
}

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

@@ -27,10 +27,10 @@
--panel-and-palette-icon-size: 16px;
&: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-padding-block: 4px;
--panel-separator-margin-horizontal: 4px;
@@ -55,8 +55,7 @@ menupopup {
/* 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
* 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 {
@@ -254,7 +253,7 @@ panelview {
border-radius: var(--toolbarbutton-border-radius);
flex-shrink: 0;
&[disabled=true] {
&[disabled="true"] {
visibility: hidden;
}
@@ -286,8 +285,8 @@ panelview {
display: none;
}
#wrapper-edit-controls:is([place="palette"],[place="panel"]) > #edit-controls,
#wrapper-zoom-controls:is([place="palette"],[place="panel"]) > #zoom-controls,
#wrapper-edit-controls:is([place="palette"], [place="panel"]) > #edit-controls,
#wrapper-zoom-controls:is([place="palette"], [place="panel"]) > #zoom-controls,
:is(panelview, #widget-overflow-fixed-list) .toolbaritem-combined-buttons {
margin: var(--arrowpanel-menuitem-margin);
}
@@ -406,7 +405,7 @@ menupopup[emptyplacesresult] > .hide-if-empty-places-result {
background-image: url("chrome://global/skin/icons/delete.svg");
background-size: contain;
-moz-context-properties: fill;
fill: #FFF;
fill: #fff;
animation: none;
}
}
@@ -474,10 +473,11 @@ menupopup[emptyplacesresult] > .hide-if-empty-places-result {
@media (prefers-reduced-motion: no-preference) {
#confirmation-hint-message-container {
transform: scale(.8);
transform: scale(0.8);
opacity: 0;
transition: transform 120ms cubic-bezier(.25,1.27,.35,1.18),
opacity 60ms linear;
transition:
transform 120ms cubic-bezier(0.25, 1.27, 0.35, 1.18),
opacity 60ms linear;
#confirmation-hint-checkmark-animation-container[animate] + & {
transform: scale(1);
@@ -517,10 +517,7 @@ menupopup[emptyplacesresult] > .hide-if-empty-places-result {
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-height: 0;
margin: 0;
@@ -539,8 +536,8 @@ menupopup[emptyplacesresult] > .hide-if-empty-places-result {
transform: scale(1);
}
100% {
opacity: 0 ;
transform: scale(.5);
opacity: 0;
transform: scale(0.5);
}
}
@@ -624,8 +621,12 @@ toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-badg
/* FxAccount indicator bits. */
@keyframes syncRotate {
from { transform: rotate(0); }
to { transform: rotate(360deg); }
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
@@ -671,7 +672,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-badg
}
#PanelUI-fxa[showing-fxa-menu-message] #fxa-manage-account-button {
display: none
display: none;
}
:root:not([fxastatus="signedin"]) #PanelUI-fxa-menu-syncnow-button {
@@ -722,8 +723,8 @@ toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-badg
font-weight: 600;
}
:root[fxadisabled=true] #appMenu-fxa-status2,
:root[fxadisabled=true] #appMenu-fxa-separator {
:root[fxadisabled="true"] #appMenu-fxa-status2,
:root[fxadisabled="true"] #appMenu-fxa-separator {
display: none;
}
@@ -820,7 +821,6 @@ toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-badg
}
}
/* Firefox Account Toolbar Panel */
#fxa-avatar-image {
@@ -944,9 +944,9 @@ toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-badg
font-weight: lighter;
@media (-moz-platform: linux) {
/* Use 300 on Linux because 100 is too light (lacks contrast with
/* Use 300 on Linux because 100 is too light (lacks contrast with
* the background) for some fonts in combination with anti-aliasing. */
font-weight: 300;
font-weight: 300;
}
}
@@ -1041,23 +1041,23 @@ panelmultiview[mainViewId="PanelUI-fxa"] #PanelUI-remotetabs-syncnow {
}
.sendToDevice-device {
&[clientType=phone] {
&[clientType="phone"] {
list-style-image: url("chrome://browser/skin/device-phone.svg");
}
&[clientType=tablet] {
&[clientType="tablet"] {
list-style-image: url("chrome://browser/skin/device-tablet.svg");
}
&[clientType=desktop] {
&[clientType="desktop"] {
list-style-image: url("chrome://browser/skin/device-desktop.svg");
}
&[clientType=tv] {
&[clientType="tv"] {
list-style-image: url("chrome://browser/skin/device-tv.svg");
}
&[clientType=vr] {
&[clientType="vr"] {
list-style-image: url("chrome://browser/skin/device-vr.svg");
}
@@ -1138,7 +1138,8 @@ panelmultiview[mainViewId="PanelUI-fxa"] #PanelUI-remotetabs-syncnow {
display: block;
}
#PanelUI-remotetabs[mainview] { /* panel anchored to toolbar button might be too skinny */
#PanelUI-remotetabs[mainview] {
/* panel anchored to toolbar button might be too skinny */
min-width: 19em;
.PanelUI-remotetabs-notabsforclient-label {
@@ -1148,6 +1149,7 @@ panelmultiview[mainViewId="PanelUI-fxa"] #PanelUI-remotetabs-syncnow {
/* Work around bug 1224412 - these boxes will cause scrollbars to appear when
the panel is anchored to a toolbar button.
*/
/* prettier-ignore */
#PanelUI-remotetabs-setupsync,
#PanelUI-remotetabs-syncdisabled,
#PanelUI-remotetabs-reauthsync,
@@ -1341,7 +1343,7 @@ panelview .toolbarbutton-1,
}
#appMenu-zoomReset-button2 > .toolbarbutton-text,
#appMenu-fullscreen-button2 > .toolbarbutton-icon {
#appMenu-fullscreen-button2 > .toolbarbutton-icon {
border-radius: 2px;
}
@@ -1473,10 +1475,7 @@ panelview .toolbarbutton-1 {
panelview .toolbarbutton-1,
toolbarbutton.subviewbutton,
.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);
background-color: var(--button-background-color-ghost);
@@ -1499,7 +1498,7 @@ panelview .toolbarbutton-1 {
&:active {
color: var(--button-text-color-ghost-active);
background-color: var(--button-background-color-ghost-active);
box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
box-shadow: 0 1px 0 hsla(210, 4%, 10%, 0.03) inset;
}
}
}
@@ -1534,7 +1533,9 @@ panelview .toolbarbutton-1 {
}
.PanelUI-tabitem-container {
transition: opacity 0.2s ease, transform 0.2s ease;
transition:
opacity 0.2s ease,
transform 0.2s ease;
&.tabitem-removed {
opacity: 0;
@@ -1553,23 +1554,22 @@ panelview .toolbarbutton-1 {
}
toolbarbutton[itemtype="showmorebutton"],
toolbarbutton[itemtype="showinactivebutton"] {
padding-inline-start: 0;
toolbarbutton[itemtype="showinactivebutton"] {
padding-inline-start: 0;
> label {
/* Needed to properly left-align with the rest of list */
margin-inline-start: -8px;
}
> label {
/* Needed to properly left-align with the rest of list */
margin-inline-start: -8px;
}
}
.remote-tabs-close-button {
.toolbarbutton-icon {
/* To match the nav elements in the panel */
-moz-context-properties: fill, fill-opacity;
fill: currentColor;
fill-opacity: 0.6;
display: flex;
/* To match the nav elements in the panel */
-moz-context-properties: fill, fill-opacity;
fill: currentColor;
fill-opacity: 0.6;
display: flex;
}
}
@@ -1579,10 +1579,7 @@ toolbarbutton[itemtype="showmorebutton"],
}
.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;
margin: 0;
flex: 1;
@@ -1595,22 +1592,16 @@ toolbarbutton[itemtype="showmorebutton"],
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;
/* Override toolbarbutton.css which sets the color to GrayText */
color: inherit;
}
&:is(
:not([cui-areatype="toolbar"]),
[overflowedItem=true]
) > separator {
&:is(:not([cui-areatype="toolbar"]), [overflowedItem="true"]) > separator {
appearance: none;
align-items: stretch;
margin: .5em 0;
margin: 0.5em 0;
width: 1px;
height: auto;
background: var(--panel-separator-color);
@@ -1619,10 +1610,7 @@ toolbarbutton[itemtype="showmorebutton"],
transition-timing-function: ease;
}
&:is(
:not([cui-areatype="toolbar"]),
[overflowedItem=true]
):hover > separator {
&:is(:not([cui-areatype="toolbar"]), [overflowedItem="true"]):hover > separator {
margin: 0;
}
}
@@ -1641,7 +1629,7 @@ toolbarbutton[itemtype="showmorebutton"],
.toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text {
text-align: start;
padding-inline-start: .5em;
padding-inline-start: 0.5em;
}
> #stop-reload-button > .toolbarbutton-1 {
@@ -1712,7 +1700,7 @@ toolbarbutton[itemtype="showmorebutton"],
border: 1px solid rgba(110, 110, 110, 0.4);
border-radius: 50%;
margin: 1px 5px;
background-color: rgba(150,150,150,0.2);
background-color: rgba(150, 150, 150, 0.2);
}
> .radio-check[selected] {
@@ -1853,8 +1841,7 @@ radiogroup:focus-visible > .subviewradio[focused="true"] {
&.panel-header-with-info-button > .subviewbutton-back + h1 {
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 {
@@ -1900,16 +1887,16 @@ radiogroup:focus-visible > .subviewradio[focused="true"] {
#info-message-container {
height: 260px;
overflow: hidden;
transition: margin-bottom .25s;
transition: margin-bottom 0.25s;
}
#info-message-container[disabled] {
/* Offset the height when hidden. This makes the panel content
* cover the info message and reveal it as it slides down, rather
* than the info message growing in height. */
margin-bottom: -260px;
pointer-events: none;
}
margin-bottom: -260px;
pointer-events: none;
}
#info-message-container[disabled] #protections-popup-message {
opacity: 0;
@@ -1921,7 +1908,7 @@ radiogroup:focus-visible > .subviewradio[focused="true"] {
align-items: flex-end;
height: calc(100% - 20px);
margin: 10px;
transition: opacity .25s;
transition: opacity 0.25s;
opacity: 1;
background-image: url(chrome://browser/skin/controlcenter/hero-message-background.svg);
background-repeat: no-repeat;
@@ -1969,11 +1956,11 @@ radiogroup:focus-visible > .subviewradio[focused="true"] {
&[viewId="PanelUI-profiler"] {
--panel-width: 319px;
}
}
/* 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. */
@media not (prefers-color-scheme: dark){
@media not (prefers-color-scheme: dark) {
&[viewId="PanelUI-savetopocket"] {
--arrowpanel-background: #fbfbfb;
}
@@ -1989,7 +1976,7 @@ radiogroup:focus-visible > .subviewradio[focused="true"] {
background: radial-gradient(circle farthest-side at top right, #03b1f4, #0556cd);
color: #fff;
&:-moz-locale-dir(rtl) {
&:-moz-locale-dir(rtl) {
background: radial-gradient(circle farthest-side at top left, #03b1f4, #0556cd);
}
@@ -2011,15 +1998,16 @@ radiogroup:focus-visible > .subviewradio[focused="true"] {
"false". When the DOM is being initialized it is set to "false" so that animations
do not run. */
&[animationready="true"] #PanelUI-profiler-info {
transition: margin-block-end 250ms, opacity 250ms;
transition:
margin-block-end 250ms,
opacity 250ms;
}
}
#PanelUI-profiler-info {
min-height: 180px;
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;
}
@@ -2057,7 +2045,7 @@ radiogroup:focus-visible > .subviewradio[focused="true"] {
}
#PanelUI-profiler-content-edit-settings {
font-size: .9em;
font-size: 0.9em;
}
.PanelUI-profiler-content-label {
@@ -2066,7 +2054,7 @@ radiogroup:focus-visible > .subviewradio[focused="true"] {
#PanelUI-profiler-content-description {
margin-block: 4px;
font-size: .9em;
font-size: 0.9em;
color: var(--text-color-deemphasized);
}
@@ -2141,7 +2129,7 @@ radiogroup:focus-visible > .subviewradio[focused="true"] {
/* Web-extension pop-ups */
.cui-widget-panelview[id^=PanelUI-webext-] {
.cui-widget-panelview[id^="PanelUI-webext-"] {
border-radius: var(--arrowpanel-border-radius);
}

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

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

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

@@ -105,7 +105,7 @@ toolbarpaletteitem > #downloads-button > .toolbarbutton-badge-stack > #downloads
}
#downloads-button[attention="info"] > .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: var(--panel-banner-item-info-icon-bgcolor);
}
@@ -116,7 +116,7 @@ toolbarpaletteitem > #downloads-button > .toolbarbutton-badge-stack > #downloads
#downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
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 {
@@ -179,7 +179,7 @@ toolbarpaletteitem > #downloads-button > .toolbarbutton-badge-stack > #downloads
transform: translateX(0);
}
#downloads-button[open] > .toolbarbutton-badge-stack > #downloads-indicator-finish-box > #downloads-indicator-finish-image {
stroke: currentColor;
stroke: currentColor;
}
#downloads-button[animate][notification="finish"] > .toolbarbutton-badge-stack > #downloads-indicator-finish-box > #downloads-indicator-finish-image {
@@ -202,10 +202,12 @@ toolbarpaletteitem > #downloads-button > .toolbarbutton-badge-stack > #downloads
animation-timing-function: steps(18);
transform: translateX(0);
}
14.28% { /* 18th frame (18/126) */
14.28% {
/* 18th frame (18/126) */
transform: translateX(calc(18 * -20px));
}
93.65% { /* Wait 100 frames of time, but resume from 18th frame (118/126) */
93.65% {
/* Wait 100 frames of time, but resume from 18th frame (118/126) */
animation-timing-function: steps(8);
transform: translateX(calc(18 * -20px));
}

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

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

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

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

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

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

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

@@ -13,7 +13,7 @@
}
h1 {
font-size: var(--embedded-wizard-header-font-size, 1.30em);
font-size: var(--embedded-wizard-header-font-size, 1.3em);
font-weight: var(--embedded-wizard-header-font-weight, normal);
margin-block: var(--embedded-wizard-header-margin-block, 0 16px);
min-height: 1em;
@@ -156,15 +156,15 @@ div[name="page-selection"]:not([show-import-all]) summary {
display: none;
}
div[name="page-selection"][show-import-all]:not([single-item]) label:not(#select-all) {
div[name="page-selection"][show-import-all]:not([single-item]) label:not(#select-all) {
margin-inline: var(--resource-type-label-margin-inline, 24px 0);
}
div[name="page-selection"][show-import-all] #select-all {
div[name="page-selection"][show-import-all] #select-all {
display: flex;
}
div[name="page-selection"][show-import-all][hide-select-all] #select-all {
div[name="page-selection"][show-import-all][hide-select-all] #select-all {
display: none;
}
@@ -239,9 +239,10 @@ summary {
.resource-progress-group {
display: grid;
grid-template-columns: min-content auto;
grid-template-areas: "icon type"
"icon status"
"icon support";
grid-template-areas:
"icon type"
"icon status"
"icon support";
align-items: center;
justify-items: start;
}
@@ -385,7 +386,7 @@ summary {
div[name="page-selection"]:not([no-resources]) .no-resources-found,
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 {
display: none;
}
@@ -397,8 +398,9 @@ div[name="page-selection"][show-import-all] .resource-selection-details {
.resource-selection-details > summary {
list-style: none;
display: grid;
grid-template-areas: "a b"
"c b";
grid-template-areas:
"a b"
"c b";
margin-block: 16px 0;
}
@@ -407,7 +409,7 @@ div[name="page-selection"][show-import-all] .resource-selection-details {
}
p.migration-wizard-subheader {
font-size: var(--embedded-wizard-subheader-font-size, .85em);
font-size: var(--embedded-wizard-subheader-font-size, 0.85em);
font-weight: var(--embedded-wizard-subheader-font-weight, 400);
margin-block: var(--embedded-wizard-subheader-margin-block, 0 28px);
line-height: 1.2em;

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

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

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

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

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

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

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

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

61
browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
View File

@@ -5,18 +5,18 @@
@import url("chrome://global/skin/in-content/info-pages.css");
@media not (prefers-contrast) {
html.private {
--in-content-page-color: white;
--in-content-text-color: white;
--in-content-page-background: #25003e;
--link-color: white;
--link-color-hover: white;
--link-color-active: white;
--in-content-banner-background: #f9f9fe;
--in-content-banner-text-color: #0c0c0d;
--in-content-button-background-hover: rgba(12,12,13,.1);
--in-content-button-background-active: rgba(12,12,13,.15);
}
html.private {
--in-content-page-color: white;
--in-content-text-color: white;
--in-content-page-background: #25003e;
--link-color: white;
--link-color-hover: white;
--link-color-active: white;
--in-content-banner-background: #f9f9fe;
--in-content-banner-text-color: #0c0c0d;
--in-content-button-background-hover: rgba(12, 12, 13, 0.1);
--in-content-button-background-active: rgba(12, 12, 13, 0.15);
}
}
/**
@@ -63,7 +63,8 @@ p {
}
.logo {
background: image-set(url("chrome://branding/content/about-logo-private.png"), url('chrome://branding/content/about-logo-private@2x.png') 2x) no-repeat center center;
background: image-set(url("chrome://branding/content/about-logo-private.png"), url("chrome://branding/content/about-logo-private@2x.png") 2x) no-repeat center
center;
background-size: 96px;
display: inline-block;
height: 96px;
@@ -106,12 +107,12 @@ p {
}
.promo.top {
background: rgba(255, 255, 255, .2);
background: rgba(255, 255, 255, 0.2);
position: absolute;
top: 0;
left: 0;
right: 0;
border-bottom: 1px solid rgba(255, 255, 255, .3);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.promo.top .promo-image-large {
@@ -165,7 +166,9 @@ p {
background-size: 24px;
border: solid 1px rgba(249, 249, 250, 0.2);
border-radius: 3px;
box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.15);
box-shadow:
0 1px 4px 0 rgba(12, 12, 13, 0.2),
0 0 0 1px rgba(0, 0, 0, 0.15);
cursor: text;
font-size: 15px;
font-weight: normal;
@@ -181,7 +184,9 @@ p {
.search-handoff-button.focused:not(.disabled) {
border: solid 1px #0060df;
box-shadow: 0 0 0 1px #0060df, 0 0 0 4px rgba(0, 96, 223, 0.3);
box-shadow:
0 0 0 1px #0060df,
0 0 0 4px rgba(0, 96, 223, 0.3);
}
.search-handoff-button.disabled {
@@ -326,7 +331,7 @@ p {
background-position: left 0 top 50px;
background-repeat: no-repeat;
background-size: 32px;
letter-spacing: -.2px;
letter-spacing: -0.2px;
padding: 50px 0;
padding-inline-start: 44px;
}
@@ -391,7 +396,7 @@ p {
padding: 17px;
@media not (prefers-contrast) {
box-shadow: 0 2px 6px 0 rgba(58, 57, 68, 0.20);
box-shadow: 0 2px 6px 0 rgba(58, 57, 68, 0.2);
background: rgba(149, 43, 185, 0.5);
}
}
@@ -406,7 +411,7 @@ p {
@media not (prefers-contrast) {
background-color: #321c64;
box-shadow: 0 2px 6px 0 rgba(58, 57, 68, 0.20);
box-shadow: 0 2px 6px 0 rgba(58, 57, 68, 0.2);
}
}
@@ -501,22 +506,22 @@ p {
margin: 8px 0;
font-weight: 600;
cursor: pointer;
background-color: rgb(0,221,255);
color: rgb(43,42,51);
background-color: rgb(0, 221, 255);
color: rgb(43, 42, 51);
}
.promo-cta .primary:focus-visible {
outline-color: rgb(0,221,255);
outline-color: rgb(0, 221, 255);
}
.promo-cta .primary:hover {
background-color: rgb(128,235,255) !important;
color: rgb(43,42,51) !important;
background-color: rgb(128, 235, 255) !important;
color: rgb(43, 42, 51) !important;
}
.promo-cta .primary:hover:active {
background-color: rgb(170,242,255) !important;
color: rgb(43,42,51) !important;
background-color: rgb(170, 242, 255) !important;
color: rgb(43, 42, 51) !important;
}
@media (prefers-contrast) {
@@ -616,7 +621,7 @@ p {
@media not (prefers-contrast) {
html.private {
background: linear-gradient(45deg, #722291 0%, #45278D 50%, #393473 100%);
background: linear-gradient(45deg, #722291 0%, #45278d 50%, #393473 100%);
}
}
}

4
browser/themes/shared/search/searchbar.css
View File

@@ -27,7 +27,7 @@
.search-panel-header > label {
margin-top: 2px;
margin-bottom: 1px;
opacity: .6;
opacity: 0.6;
}
/* Make the contrast stronger in dark mode */
@@ -150,7 +150,7 @@
color: inherit;
}
.search-panel-tree[collapsed=true] + .searchbar-separator {
.search-panel-tree[collapsed="true"] + .searchbar-separator {
display: none;
}

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

@@ -18,6 +18,6 @@ html|canvas#screen {
html|p#preview-unavailable {
margin: 12px 11px;
text-align: center;
color: #9B2423;
color: #9b2423;
font-weight: bold;
}

28
browser/themes/shared/syncedtabs/sidebar.css
View File

@@ -111,23 +111,23 @@ body {
fill: currentColor;
}
.item.client[clientType=phone] > .item-title-container > .item-icon-container {
.item.client[clientType="phone"] > .item-title-container > .item-icon-container {
background-image: url("chrome://browser/skin/device-phone.svg");
}
.item.client[clientType=tablet] > .item-title-container > .item-icon-container {
.item.client[clientType="tablet"] > .item-title-container > .item-icon-container {
background-image: url("chrome://browser/skin/device-tablet.svg");
}
.item.client[clientType=desktop] > .item-title-container > .item-icon-container {
.item.client[clientType="desktop"] > .item-title-container > .item-icon-container {
background-image: url("chrome://browser/skin/device-desktop.svg");
}
.item.client[clientType=tv] > .item-title-container > .item-icon-container {
.item.client[clientType="tv"] > .item-title-container > .item-icon-container {
background-image: url("chrome://browser/skin/device-tv.svg");
}
.item.client[clientType=vr] > .item-title-container > .item-icon-container {
.item.client[clientType="vr"] > .item-title-container > .item-icon-container {
background-image: url("chrome://browser/skin/device-vr.svg");
}
@@ -171,7 +171,9 @@ body {
.item[hidden] {
opacity: 0;
max-height: 0;
transition: opacity 150ms ease-in-out, max-height 150ms ease-in-out 150ms;
transition:
opacity 150ms ease-in-out,
max-height 150ms ease-in-out 150ms;
}
.item.empty .item-title-container {
@@ -285,15 +287,7 @@ body {
:root[lwt-sidebar] {
background-color: var(--lwt-sidebar-background-color);
color: var(--lwt-sidebar-text-color);
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)
);
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));
color-scheme: light;
}
@@ -302,7 +296,7 @@ body {
}
:root[lwt-sidebar] .item.selected > .item-title-container {
background-color: light-dark(hsla(0,0%,80%,.3), rgba(249,249,250,.1));
background-color: light-dark(hsla(0, 0%, 80%, 0.3), rgba(249, 249, 250, 0.1));
color: inherit;
}
@@ -314,7 +308,7 @@ body {
/* Platform specific styling */
@media (-moz-platform: macos) {
:root {
/* let the -moz-appearance of the sidebar shine through */
/* let the -moz-appearance of the sidebar shine through */
background-color: transparent;
}

77
browser/themes/shared/tabbrowser/content-area.css
View File

@@ -7,11 +7,11 @@
:root {
/* --tabpanel-background-color matches $in-content-page-background in newtab
(browser/extensions/newtab/content-src/styles/_variables.scss) */
--tabpanel-background-color: #F9F9FB;
--tabpanel-background-color: #f9f9fb;
@media (-moz-content-prefers-color-scheme: dark) {
--tabpanel-background-color: #2B2A33;
--tabpanel-background-color: #2b2a33;
}
&[privatebrowsingmode=temporary] {
&[privatebrowsingmode="temporary"] {
/* Value for --in-content-page-background in aboutPrivateBrowsing.css.
!important overrides the direct setting of this variable in
ThemeVariableMap.sys.mjs when the user has a theme that defines
@@ -20,7 +20,7 @@
/* stylelint-disable-next-line media-query-no-invalid */
@media -moz-pref("browser.privatebrowsing.felt-privacy-v1") {
--tabpanel-background-color: linear-gradient(45deg, #722291 0%, #45278D 50%, #393473 100%) !important;
--tabpanel-background-color: linear-gradient(45deg, #722291 0%, #45278d 50%, #393473 100%) !important;
}
}
}
@@ -137,7 +137,7 @@
opacity: 0;
}
browser[type=content] {
browser[type="content"] {
color-scheme: env(-moz-content-preferred-color-scheme);
}
@@ -172,26 +172,30 @@
max-width: 50%;
}
&[type=status] {
&[type="status"] {
min-width: min(23em, 33%);
}
&[type=overLink] {
transition: opacity 120ms ease-out, visibility 120ms;
&[type="overLink"] {
transition:
opacity 120ms ease-out,
visibility 120ms;
}
&:is([type=overLink], [inactive][previoustype=overLink]) {
&:is([type="overLink"], [inactive][previoustype="overLink"]) {
direction: ltr;
}
&[inactive],
:root[inDOMFullscreen] &:not([type=overLink]) {
:root[inDOMFullscreen] &:not([type="overLink"]) {
transition: none;
opacity: 0;
visibility: hidden;
&[previoustype=overLink] {
transition: opacity 200ms ease-out, visibility 200ms;
&[previoustype="overLink"] {
transition:
opacity 200ms ease-out,
visibility 200ms;
}
}
@@ -212,17 +216,17 @@
text-shadow: none;
@media (not (prefers-contrast)) and (not (-moz-platform: linux)) {
background-color: light-dark(#f9f9fa, hsl(240,1%,20%));
border-color: light-dark(#ddd, hsl(240,1%,40%));
color: light-dark(#444, rgb(249,249,250));
background-color: light-dark(#f9f9fa, hsl(240, 1%, 20%));
border-color: light-dark(#ddd, hsl(240, 1%, 40%));
color: light-dark(#444, rgb(249, 249, 250));
}
#statuspanel:not([mirror]) > &:-moz-locale-dir(ltr),
#statuspanel[mirror] > &:-moz-locale-dir(rtl) {
border-right-style: solid;
/* disabled on Windows for triggering grayscale AA (bug 659213): */
@media not (-moz-platform: windows) {
border-top-right-radius: .3em;
@media not (-moz-platform: windows) {
border-top-right-radius: 0.3em;
}
margin-right: 1em;
}
@@ -231,8 +235,8 @@
#statuspanel[mirror] > &:-moz-locale-dir(ltr) {
border-left-style: solid;
/* disabled on Windows for triggering grayscale AA (bug 659213): */
@media not (-moz-platform: windows) {
border-top-left-radius: .3em;
@media not (-moz-platform: windows) {
border-top-left-radius: 0.3em;
}
margin-left: 1em;
}
@@ -243,7 +247,7 @@
*/
#selection-shortcut-action-panel {
--panel-subview-body-padding: 0;
}
}
#ai-action-button {
--button-min-height: 34px;
@@ -252,7 +256,6 @@
margin: 1px;
}
#ask-chat-shortcuts {
max-width: 345px;
}
@@ -267,7 +270,6 @@
margin-top: var(--space-small);
}
/**
* Dialogs
*/
@@ -359,7 +361,30 @@
}
@media (min-width: 800px) {
--box-inline-margin: min(calc(16px + (100% - 800px) / 4), 32px);
--box-inline-margin: min(calc(16px + (100vw - 800px) / 4), 32px);
}
@media (min-height: 350px) {
--box-block-margin: min(calc(4px + (100vh - 350px) / 4), 16px);
}
@media (min-height: 550px) {
--box-block-margin: min(calc(16px + (100vh - 550px) / 4), 32px);
}
&:not(.spotlightBox) {
max-width: min(max(var(--box-ideal-width) * 1px, var(--box-max-width-ratio)), var(--box-max-width-margin), var(--box-max-width-requested));
max-height: min(
max(var(--box-ideal-height) * 1px, var(--box-max-height-ratio)),
var(--box-max-height-margin),
var(--box-max-height-requested),
var(--box-max-height-remaining)
);
}
.dialogStack &.spotlightBox {
/* Tab modal: subtract the navigator toolbox height from the dialog height. */
height: calc(100vh - var(--box-top-px));
}
}
@@ -381,11 +406,7 @@
/* Do not go below 3px (as otherwise the top of the dialog would be
* adjacent to or clipped by the top of the window), or above the window
* size. */
margin-top: clamp(
3px,
var(--chrome-offset, 20px) - 5px,
calc(100vh - var(--subdialog-inner-height) - 5px)
);
margin-top: clamp(3px, var(--chrome-offset, 20px) - 5px, calc(100vh - var(--subdialog-inner-height) - 5px));
}
}

22
browser/themes/shared/tabbrowser/ctrlTab.css
View File

@@ -8,7 +8,7 @@
#ctrlTab-panel {
appearance: none;
--panel-background: hsla(0,0%,40%,.85);
--panel-background: hsla(0, 0%, 40%, 0.85);
--panel-color: white;
--panel-border-color: transparent;
--panel-padding: 20px 10px 10px;
@@ -33,7 +33,9 @@
/* remove the :-moz-focusring outline from button.css on Windows */
outline: none !important;
margin: 0;
text-shadow: 0 0 1px hsl(0,0%,12%), 0 0 2px hsl(0,0%,12%);
text-shadow:
0 0 1px hsl(0, 0%, 12%),
0 0 2px hsl(0, 0%, 12%);
border: none;
background-color: transparent;
}
@@ -62,16 +64,16 @@
margin-bottom: 2px;
margin-inline-end: -6px;
padding: 5px;
background-color: #F9F9FA;
background-color: #f9f9fa;
border-radius: 6px;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.ctrlTab-canvas {
color-scheme: light;
background-color: Canvas;
color: CanvasText;
box-shadow: 1px 1px 2px hsl(0,0%,12%);
box-shadow: 1px 1px 2px hsl(0, 0%, 12%);
margin-bottom: 8px;
}
@@ -90,14 +92,14 @@
background: url("chrome://global/skin/icons/defaultFavicon.svg") center/20% no-repeat;
-moz-context-properties: fill;
fill: currentColor;
filter: drop-shadow(0 0 2px hsla(0,0%,0%,0.5));
filter: drop-shadow(0 0 2px hsla(0, 0%, 0%, 0.5));
}
.ctrlTab-preview-inner,
#ctrlTab-showAll {
padding: 8px;
border: 2px solid transparent;
border-radius: .5em;
border-radius: 0.5em;
}
.ctrlTab-preview-inner {
@@ -105,13 +107,13 @@
}
#ctrlTab-showAll {
background-color: rgba(255,255,255,.2);
margin-top: .5em;
background-color: rgba(255, 255, 255, 0.2);
margin-top: 0.5em;
}
.ctrlTab-preview:focus > .ctrlTab-preview-inner,
#ctrlTab-showAll:focus {
background-color: rgba(0,0,0,.75);
background-color: rgba(0, 0, 0, 0.75);
text-shadow: none;
border-color: #45a1ff;
}

2
browser/themes/shared/tabbrowser/fullscreen-and-pointerlock.css
View File

@@ -8,7 +8,7 @@
:root[inDOMFullscreen] #sidebar-main,
:root[inDOMFullscreen] #sidebar-splitter,
:root[inDOMFullscreen] #sidebar-launcher-splitter,
:root[inFullscreen]:not([macOSNativeFullscreen]) toolbar:not([fullscreentoolbar=true]),
:root[inFullscreen]:not([macOSNativeFullscreen]) toolbar:not([fullscreentoolbar="true"]),
:root[inFullscreen] .global-notificationbox {
visibility: collapse;
}

8
browser/themes/shared/tabbrowser/tab-hover-preview.css
View File

@@ -49,6 +49,10 @@
}
@keyframes tab-hover-preview-fadein {
from { opacity: 0; }
to { opacity: 100; }
from {
opacity: 0;
}
to {
opacity: 100;
}
}

223
browser/themes/shared/tabbrowser/tabs.css
View File

@@ -8,10 +8,10 @@
--tab-min-height: 36px;
--tab-group-suggestions-loading-animation-color-1: color-mix(in srgb, currentColor 5%, transparent);
--tab-group-suggestions-loading-animation-color-2: color-mix(in srgb, currentColor 35%, transparent);
&[uidensity=compact] {
&[uidensity="compact"] {
--tab-min-height: 29px;
}
&[uidensity=touch] {
&[uidensity="touch"] {
--tab-min-height: 41px;
}
--tab-group-label-height: max(1.5em, var(--tab-min-height) - 14px);
@@ -33,7 +33,7 @@
--tab-block-margin: 4px;
--tab-icon-end-margin: 5.5px;
--tab-label-line-height: 1.7;
--tab-loading-fill: #0A84FF;
--tab-loading-fill: #0a84ff;
--tab-hover-background-color: color-mix(in srgb, currentColor 11%, transparent);
--tab-selected-textcolor: var(--toolbar-color);
--tab-selected-bgcolor: var(--toolbar-bgcolor);
@@ -100,9 +100,9 @@
--tab-group-color-red: var(--color-red-70);
--tab-group-color-red-invert: var(--color-red-20);
--tab-group-color-red-pale: var(--color-red-0);
--tab-group-color-gray: #5E6A77;
--tab-group-color-gray-invert: #99A6B4;
--tab-group-color-gray-pale: #F2F9FF;
--tab-group-color-gray: #5e6a77;
--tab-group-color-gray-invert: #99a6b4;
--tab-group-color-gray-pale: #f2f9ff;
--tab-group-label-text-dark: var(--color-gray-100);
/* 5px of padding-block are adding to .tabbrowser-tab */
@@ -171,7 +171,7 @@
pointer-events: none;
#tabbrowser-arrowscrollbox:not(:hover) > #tabbrowser-arrowscrollbox-periphery > & {
transition: width .15s ease-out;
transition: width 0.15s ease-out;
}
}
@@ -198,8 +198,9 @@
&:not([pinned]) {
flex: 100 100;
max-width: 225px;
transition: min-width 100ms ease-out,
max-width 100ms ease-out;
transition:
min-width 100ms ease-out,
max-width 100ms ease-out;
#tabbrowser-tabs[orient="horizontal"] &[fadein] {
min-width: var(--tab-min-width-pref, var(--tab-min-width));
@@ -244,7 +245,7 @@
&:is([muted], [soundplaying], [activemedia-blocked]) {
--tab-icon-end-margin: 2px;
#tabbrowser-tabs[orient=horizontal] &:not([pinned]) {
#tabbrowser-tabs[orient="horizontal"] &:not([pinned]) {
min-width: max(var(--tab-min-width-pref, var(--tab-min-width)), 100px);
}
}
@@ -259,7 +260,7 @@
min-width: 0;
}
:root:not([uidensity=compact], [sidebar-expand-on-hover]) &[pinned] {
:root:not([uidensity="compact"], [sidebar-expand-on-hover]) &[pinned] {
padding: 0 10px;
}
@@ -300,7 +301,7 @@
background-position: center center;
background-size: 100% auto;
background-repeat: no-repeat;
animation: tab-burst-animation 375ms cubic-bezier(0,0,.58,1);
animation: tab-burst-animation 375ms cubic-bezier(0, 0, 0.58, 1);
-moz-context-properties: fill;
fill: var(--tab-loading-fill);
}
@@ -432,13 +433,21 @@
}
@keyframes tab-throbber-animation {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
@keyframes tab-throbber-animation-rtl {
0% { transform: translateX(0); }
100% { transform: translateX(100%); }
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}
.tab-icon-pending:is(:not([pendingicon]), [busy], [pinned]) {
@@ -450,10 +459,14 @@
}
@keyframes tab-sharing-icon-pulse {
0%, 16.66%, 83.33%, 100% {
0%,
16.66%,
83.33%,
100% {
opacity: 0;
}
33.33%, 66.66% {
33.33%,
66.66% {
opacity: 1;
}
}
@@ -560,7 +573,7 @@
inset-inline-end: -7px;
z-index: 1; /* Overlay tab title */
#tabbrowser-tabs[orient=vertical] & {
#tabbrowser-tabs[orient="vertical"] & {
top: 7px;
}
@@ -594,18 +607,16 @@
* We also apply one extra color on top (--audio-overlay-extra-background)
* for hover / active feedback.
*/
--audio-overlay-extra-background: transparent;
--audio-overlay-extra-background: transparent;
background-color: var(--lwt-accent-color);
background-image: linear-gradient(var(--audio-overlay-extra-background)),
linear-gradient(var(--toolbox-bgcolor));
background-image: linear-gradient(var(--audio-overlay-extra-background)), linear-gradient(var(--toolbox-bgcolor));
-moz-context-properties: fill;
fill: var(--tab-selected-textcolor);
color-scheme: var(--tab-selected-color-scheme);
border-radius: var(--border-radius-circle);
.browser-toolbox-background:-moz-window-inactive &:not([selected]) {
background-image: linear-gradient(var(--audio-overlay-extra-background)),
linear-gradient(var(--toolbox-bgcolor-inactive));
background-image: linear-gradient(var(--audio-overlay-extra-background)), linear-gradient(var(--toolbox-bgcolor-inactive));
}
&:hover {
@@ -617,15 +628,13 @@
}
&[selected] {
background-image: linear-gradient(var(--audio-overlay-extra-background)),
linear-gradient(var(--tab-selected-bgcolor)),
linear-gradient(var(--toolbox-bgcolor));
background-image:
linear-gradient(var(--audio-overlay-extra-background)), linear-gradient(var(--tab-selected-bgcolor)), linear-gradient(var(--toolbox-bgcolor));
}
.browser-toolbox-background:-moz-window-inactive &[selected] {
background-image: linear-gradient(var(--audio-overlay-extra-background)),
linear-gradient(var(--tab-selected-bgcolor)),
linear-gradient(var(--toolbox-bgcolor-inactive));
background-image:
linear-gradient(var(--audio-overlay-extra-background)), linear-gradient(var(--tab-selected-bgcolor)), linear-gradient(var(--toolbox-bgcolor-inactive));
}
}
}
@@ -670,18 +679,16 @@
* We also apply one extra color on top (--audio-overlay-extra-background)
* for hover / active feedback.
*/
--audio-overlay-extra-background: transparent;
--audio-overlay-extra-background: transparent;
background-color: var(--lwt-accent-color);
background-image: linear-gradient(var(--audio-overlay-extra-background)),
linear-gradient(var(--toolbox-bgcolor));
background-image: linear-gradient(var(--audio-overlay-extra-background)), linear-gradient(var(--toolbox-bgcolor));
-moz-context-properties: fill;
fill: var(--tab-selected-textcolor);
color-scheme: var(--tab-selected-color-scheme);
border-radius: var(--border-radius-circle);
.browser-toolbox-background:-moz-window-inactive &:not([selected]) {
background-image: linear-gradient(var(--audio-overlay-extra-background)),
linear-gradient(var(--toolbox-bgcolor-inactive));
background-image: linear-gradient(var(--audio-overlay-extra-background)), linear-gradient(var(--toolbox-bgcolor-inactive));
}
&:hover {
@@ -693,15 +700,14 @@
}
&[selected] {
background-image: linear-gradient(var(--audio-overlay-extra-background)),
linear-gradient(var(--tab-selected-bgcolor)),
linear-gradient(var(--toolbox-bgcolor));
background-image:
linear-gradient(var(--audio-overlay-extra-background)), linear-gradient(var(--tab-selected-bgcolor)), linear-gradient(var(--toolbox-bgcolor));
}
.browser-toolbox-background:-moz-window-inactive &[selected] {
background-image: linear-gradient(var(--audio-overlay-extra-background)),
linear-gradient(var(--tab-selected-bgcolor)),
linear-gradient(var(--toolbox-bgcolor-inactive));
background-image:
linear-gradient(var(--audio-overlay-extra-background)), linear-gradient(var(--tab-selected-bgcolor)),
linear-gradient(var(--toolbox-bgcolor-inactive));
}
}
}
@@ -727,37 +733,37 @@
--button-min-height-small: 24px;
--button-border-radius: var(--border-radius-small);
/* stylelint-disable-next-line media-query-no-invalid */
@media not -moz-pref("sidebar.visibility", "expand-on-hover") {
/* We need these rules to apply at all times when the sidebar.visibility
/* stylelint-disable-next-line media-query-no-invalid */
@media not -moz-pref("sidebar.visibility", "expand-on-hover") {
/* We need these rules to apply at all times when the sidebar.visibility
pref is not set to "expand-on-hover" as opposed to when the "sidebar-expand-on-hover" attribute
has not been added to root. There are certain scenarios when that attribute is temporarily
removed from root such as when toggling the sidebar to expand with the toolbar button. */
#tabbrowser-tabs[orient="horizontal"] &:not([pinned]):not([crashed]),
:root:not([sidebar-expand-on-hover]) #tabbrowser-tabs[orient="vertical"][expanded] &:not([pinned]):not([crashed]) {
&:is([soundplaying], [muted], [activemedia-blocked]) {
display: block;
}
#tabbrowser-tabs[orient="horizontal"] &:not([pinned]):not([crashed]),
:root:not([sidebar-expand-on-hover]) #tabbrowser-tabs[orient="vertical"][expanded] &:not([pinned]):not([crashed]) {
&:is([soundplaying], [muted], [activemedia-blocked]) {
display: block;
}
&[soundplaying]::part(button) {
background-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
}
&[soundplaying]::part(button) {
background-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
}
&[muted]::part(button) {
background-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg");
}
&[muted]::part(button) {
background-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg");
}
&[activemedia-blocked]::part(button) {
background-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-circle-12.svg");
}
&[activemedia-blocked]::part(button) {
background-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-circle-12.svg");
}
}
}
}
.tab-label-container {
overflow: hidden;
#tabbrowser-tabs:not([secondarytext-unsupported], [orient=vertical]) & {
#tabbrowser-tabs:not([secondarytext-unsupported], [orient="vertical"]) & {
height: 2.7em;
}
@@ -766,13 +772,13 @@
}
&[textoverflow] {
&[labeldirection=ltr],
&[labeldirection="ltr"],
&:not([labeldirection]):-moz-locale-dir(ltr) {
direction: ltr;
mask-image: linear-gradient(to left, transparent, black var(--tab-label-mask-size));
}
&[labeldirection=rtl],
&[labeldirection="rtl"],
&:not([labeldirection]):-moz-locale-dir(rtl) {
direction: rtl;
mask-image: linear-gradient(to right, transparent, black var(--tab-label-mask-size));
@@ -782,7 +788,7 @@
.tab-label {
margin-inline: 0;
line-height: var(--tab-label-line-height); /* override 'normal' in case of fallback math fonts with huge metrics */
line-height: var(--tab-label-line-height); /* override 'normal' in case of fallback math fonts with huge metrics */
white-space: nowrap;
}
@@ -821,12 +827,12 @@
}
.tab-secondary-label {
font-size: .75em;
margin: -.3em 0 .3em; /* adjust margins to compensate for line-height of .tab-label */
opacity: .8;
font-size: 0.75em;
margin: -0.3em 0 0.3em; /* adjust margins to compensate for line-height of .tab-label */
opacity: 0.8;
#tabbrowser-tabs:is([secondarytext-unsupported], [orient="vertical"]) &,
:root[uidensity=compact] &,
:root[uidensity="compact"] &,
&:not([pictureinpicture]) {
display: none;
}
@@ -868,7 +874,10 @@
}
#tabbrowser-tabs[movingtab-createGroup] & {
transition: background-color 50ms ease, color 50ms ease, outline-color 50ms ease;
transition:
background-color 50ms ease,
color 50ms ease,
outline-color 50ms ease;
&[dragover-createGroup] {
background-color: light-dark(var(--dragover-tab-group-color-pale), var(--dragover-tab-group-color));
@@ -928,7 +937,9 @@
}
}
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])[orient="horizontal"] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])[orient="horizontal"]
> #tabbrowser-arrowscrollbox
> .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
margin-inline-start: 12px;
}
@@ -982,13 +993,14 @@
display: flex;
}
/* prettier-ignore */
#tabbrowser-tabs[movingtab]:not([movingtab-createGroup],[movingtab-ungroup]) .tabbrowser-tab:is(:active,[multiselected]) > .tab-stack > .tab-background > & {
display: flex;
background-color: light-dark(var(--dragover-tab-group-color), var(--dragover-tab-group-color-invert));
border-radius: 1px;
}
#tabbrowser-tabs:is([movingtab-createGroup],[movingtab-ungroup]) &:is([selected],[multiselected]) {
#tabbrowser-tabs:is([movingtab-createGroup], [movingtab-ungroup]) &:is([selected], [multiselected]) {
display: none;
}
}
@@ -1014,7 +1026,7 @@ tab-group {
#tabbrowser-tabs[orient="vertical"][expanded] {
tab-group > :is(.tab-group-label-container, .tabbrowser-tab),
&[movingtab][movingtab-addToGroup]:not([movingtab-createGroup],[movingtab-ungroup]) .tabbrowser-tab:is(:active,[multiselected]) {
&[movingtab][movingtab-addToGroup]:not([movingtab-createGroup], [movingtab-ungroup]) .tabbrowser-tab:is(:active, [multiselected]) {
margin-inline-start: var(--space-medium);
}
}
@@ -1187,13 +1199,13 @@ tab-group {
}
input[name="tab-group-color"] {
width: 0;
height: 0;
opacity: 0;
margin: 0;
position: absolute;
pointer-events: none;
top: -100px;
width: 0;
height: 0;
opacity: 0;
margin: 0;
position: absolute;
pointer-events: none;
top: -100px;
}
.tab-group-editor-swatch {
@@ -1224,7 +1236,7 @@ tab-group {
.tab-group-delete {
padding-block: 0;
> toolbarbutton {
justify-content: flex-start;
justify-content: flex-start;
}
}
@@ -1256,24 +1268,25 @@ tab-group {
&:not([scrolledtostart])::part(overflow-start-indicator),
&:not([scrolledtoend])::part(overflow-end-indicator) {
width: 7px; /* The width is the sum of the inline margins */
/* prettier-ignore */
background-image: radial-gradient(ellipse at bottom,
rgba(0,0,0,0.1) 0%,
rgba(0,0,0,0.1) 7.6%,
rgba(0,0,0,0) 87.5%);
background-repeat: no-repeat;
background-position: -3px;
border-left: .5px solid rgba(255,255,255,.2);
border-left: 0.5px solid rgba(255, 255, 255, 0.2);
pointer-events: none;
position: relative;
border-bottom: .5px solid transparent;
border-bottom: 0.5px solid transparent;
}
&:not([scrolledtostart])::part(overflow-start-indicator) {
margin-inline: -.5px -6.5px;
margin-inline: -0.5px -6.5px;
}
&:not([scrolledtoend])::part(overflow-end-indicator) {
margin-inline: -6.5px -.5px;
margin-inline: -6.5px -0.5px;
}
&:-moz-locale-dir(rtl)::part(overflow-start-indicator),
@@ -1282,15 +1295,10 @@ tab-group {
}
}
&[orient="vertical"] {
&::part(overflow-start-indicator),
&::part(overflow-end-indicator) {
background-image: linear-gradient(
to top,
transparent 0%,
light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .05))
);
background-image: linear-gradient(to top, transparent 0%, light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05)));
background-repeat: no-repeat;
pointer-events: none;
@@ -1449,11 +1457,7 @@ tab-group {
&:not([scrolledtostart])::part(overflow-start-indicator),
&:not([scrolledtoend])::part(overflow-end-indicator) {
background-image: linear-gradient(
to top,
transparent 0%,
light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .05))
);
background-image: linear-gradient(to top, transparent 0%, light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05)));
background-repeat: no-repeat;
pointer-events: none;
position: relative;
@@ -1483,8 +1487,7 @@ tab-group {
}
:root:not([sidebar-expand-on-hover]) & {
--tab-inline-padding: calc((var(--tab-collapsed-background-width) + 2 *
var(--tab-pinned-margin-inline-expanded) - var(--icon-size-default)) / 2);
--tab-inline-padding: calc((var(--tab-collapsed-background-width) + 2 * var(--tab-pinned-margin-inline-expanded) - var(--icon-size-default)) / 2);
/* stylelint-disable-next-line media-query-no-invalid */
@media not -moz-pref("sidebar.visibility", "expand-on-hover") {
/* We need these rules to apply at all times when the sidebar.visibility
@@ -1492,10 +1495,7 @@ tab-group {
has not been added to root. There are certain scenarios when that attribute is temporarily
removed from root such as when toggling the sidebar to expand with the toolbar button. */
&::part(items-wrapper) {
grid-template-columns: repeat(
auto-fit,
minmax(var(--tab-pinned-min-width-expanded), auto)
);
grid-template-columns: repeat(auto-fit, minmax(var(--tab-pinned-min-width-expanded), auto));
display: grid;
grid-auto-rows: var(--tab-height-with-margin-padding);
}
@@ -1632,9 +1632,8 @@ tab-group {
*/
--close-button-extra-background: transparent;
background-color: var(--lwt-accent-color);
background-image: linear-gradient(var(--close-button-extra-background)),
linear-gradient(var(--tab-selected-bgcolor)),
linear-gradient(var(--toolbox-bgcolor));
background-image:
linear-gradient(var(--close-button-extra-background)), linear-gradient(var(--tab-selected-bgcolor)), linear-gradient(var(--toolbox-bgcolor));
color-scheme: var(--tab-selected-color-scheme);
outline-color: var(--tab-selected-outline-color);
box-shadow: var(--tab-selected-shadow);
@@ -1646,9 +1645,8 @@ tab-group {
inset-inline-start: 2px;
&:-moz-window-inactive {
background-image: linear-gradient(var(--close-button-extra-background)),
linear-gradient(var(--tab-selected-bgcolor)),
linear-gradient(var(--toolbox-bgcolor-inactive));
background-image:
linear-gradient(var(--close-button-extra-background)), linear-gradient(var(--tab-selected-bgcolor)), linear-gradient(var(--toolbox-bgcolor-inactive));
}
&:hover {
@@ -1728,10 +1726,7 @@ tab-group {
}
:root:not([privatebrowsingmode]) :is(toolbarbutton, toolbarpaletteitem) ~ #tabbrowser-tabs,
:root[privatebrowsingmode] :is(
toolbarbutton:not(#firefox-view-button),
toolbarpaletteitem:not(#wrapper-firefox-view-button)
) ~ #tabbrowser-tabs {
:root[privatebrowsingmode] :is(toolbarbutton:not(#firefox-view-button), toolbarpaletteitem:not(#wrapper-firefox-view-button)) ~ #tabbrowser-tabs {
border-inline-start: var(--tabstrip-inner-border);
padding-inline-start: calc(var(--tab-overflow-pinned-tabs-width) + 2px);
margin-inline-start: 2px;
@@ -2071,10 +2066,12 @@ toolbar:not(#TabsToolbar) #firefox-view-button {
animation: tab-group-loading-block-animation 3s infinite;
outline-color: var(--tab-group-suggestions-loading-animation-color-1);
border-color: var(--tab-group-suggestions-loading-animation-color-2);
background: linear-gradient(100deg,
color-mix(in srgb, var(--tab-group-suggestions-loading-animation-color-2), transparent 60%) 30%,
var(--tab-group-suggestions-loading-animation-color-1) 50%,
color-mix(in srgb, var(--tab-group-suggestions-loading-animation-color-2), transparent 60%) 70%);
background: linear-gradient(
100deg,
color-mix(in srgb, var(--tab-group-suggestions-loading-animation-color-2), transparent 60%) 30%,
var(--tab-group-suggestions-loading-animation-color-1) 50%,
color-mix(in srgb, var(--tab-group-suggestions-loading-animation-color-2), transparent 60%) 70%
);
background-size: 200% 100%;
border-radius: var(--border-radius-small);
height: 1.5em;

27
browser/themes/shared/toolbarbuttons.css
View File

@@ -38,13 +38,13 @@
--bookmark-block-padding: 4px;
&[uidensity=compact] {
&[uidensity="compact"] {
--toolbarbutton-outer-padding: 3px;
--toolbarbutton-inner-padding: 6px;
--bookmark-block-padding: 1px;
}
&[uidensity=touch] {
&[uidensity="touch"] {
--toolbarbutton-inner-padding: 9px;
--bookmark-block-padding: 7px;
}
@@ -216,7 +216,7 @@ toolbar .toolbaritem-combined-buttons {
background-position: center;
background-repeat: no-repeat;
background-size: 1px 16px;
opacity: .2;
opacity: 0.2;
}
&:hover > separator {
@@ -225,7 +225,7 @@ toolbar .toolbaritem-combined-buttons {
}
toolbar[brighttext] .toolbaritem-combined-buttons > separator {
opacity: .3;
opacity: 0.3;
}
/* Toolbar button animations */
@@ -327,7 +327,7 @@ toolbar[brighttext] .toolbaritem-combined-buttons > separator {
/* resume at 7/35 and animate across the next 14 frames */
17.14% {
animation-timing-function: steps(14);
transform: translateX(calc(0 * -20px));
transform: translateX(calc(0 * -20px));
}
/* pause on the last frame for the remainder of the duration */
54.29% {
@@ -445,7 +445,7 @@ toolbarbutton.bookmark-item:not(.subviewbutton) {
--toolbarbutton-inner-padding: 4px;
--toolbarbutton-outer-padding: 2px;
:root[uidensity=compact] & {
:root[uidensity="compact"] & {
--toolbarbutton-outer-padding: 1px;
}
@@ -492,7 +492,7 @@ toolbarbutton.bookmark-item:not(.subviewbutton) {
outline-offset: var(--focus-outline-inset);
}
:root[uidensity=compact] & {
:root[uidensity="compact"] & {
margin-inline: 1px;
}
}
@@ -534,7 +534,7 @@ toolbarbutton.bookmark-item:not(.subviewbutton) {
toolbarpaletteitem[place="toolbar"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-button,
#personal-bookmarks:is([overflowedItem=true], [cui-areatype="panel"]) > #bookmarks-toolbar-button {
#personal-bookmarks:is([overflowedItem="true"], [cui-areatype="panel"]) > #bookmarks-toolbar-button {
display: flex;
}
@@ -587,7 +587,8 @@ toolbar:not(#TabsToolbar) > #personal-bookmarks {
transparent 3.75px,
var(--toolbarseparator-color) 3.75px,
var(--toolbarseparator-color) calc(100% - 3.75px),
transparent calc(100% - 3.75px) );
transparent calc(100% - 3.75px)
);
border-image-slice: 1;
}
@@ -606,14 +607,14 @@ toolbar:not(#TabsToolbar) > #personal-bookmarks {
#PersonalToolbar & {
margin-top: -1px !important;
:root[uidensity=touch] & {
:root[uidensity="touch"] & {
margin-top: -4px !important;
}
}
/* Remove a pixel of margin on the end so that the badge doesn't
* overflow the toolbar and push the button into the overflow menu. */
:root[uidensity=compact] & {
:root[uidensity="compact"] & {
margin-inline-end: -7px !important;
}
@@ -634,7 +635,7 @@ toolbar:not(#TabsToolbar) > #personal-bookmarks {
/* Flexible spacer sizing */
toolbarpaletteitem[place=toolbar][id^=wrapper-customizableui-special-spring],
toolbarpaletteitem[place="toolbar"][id^="wrapper-customizableui-special-spring"],
toolbarspring {
flex: 1;
min-width: 28px;
@@ -655,7 +656,7 @@ toolbarspring {
/* Keyboard navigation */
toolbar[keyNav]:not([collapsed=true], [customizing]) toolbartabstop,
toolbar[keyNav]:not([collapsed="true"], [customizing]) toolbartabstop,
#tabbrowser-tabs[orient="vertical"] #tabs-newtab-button,
#vertical-tabs-newtab-button {
-moz-user-focus: normal;

72
browser/themes/shared/webRTC-indicator.css
View File

@@ -11,23 +11,23 @@
border: 0;
border-radius: 5px;
--indicator-height: 32px;
--indicator-background-color: rgb(249,249,250);
--indicator-color: rgb(12,12,13);
--indicator-border-color: hsla(0,0%,0%,.32);
--indicator-background-color: rgb(249, 249, 250);
--indicator-color: rgb(12, 12, 13);
--indicator-border-color: hsla(0, 0%, 0%, 0.32);
--indicator-icon-fill-opacity: 0.8;
--indicator-item-separator: 1px solid hsla(210,4%,10%,.14);
--indicator-stop-button-background-color: rgb(0,96,223);
--indicator-stop-button-hover-background-color: rgb(0,62,170);
--indicator-stop-button-color: rgb(255,255,255);
--minimize-button-background-color: hsla(240,5%,5%,.1);
--minimize-button-hover-background-color: hsla(240,5%,5%,.15);
--minimize-button-active-background-color: hsla(240,5%,5%,.2);
--control-icon-unchecked-hover-background-color: hsla(0,0%,70%,.4);
--control-icon-unchecked-active-background-color: hsla(0,0%,70%,.6);
--control-icon-checked-background-color: hsla(10,100%,50%,.16);
--control-icon-checked-icon-fill: rgb(215,0,34);
--control-icon-checked-hover-background-color: hsla(10,100%,50%,.24);
--control-icon-checked-active-background-color: hsla(10,100%,50%,.32);
--indicator-item-separator: 1px solid hsla(210, 4%, 10%, 0.14);
--indicator-stop-button-background-color: rgb(0, 96, 223);
--indicator-stop-button-hover-background-color: rgb(0, 62, 170);
--indicator-stop-button-color: rgb(255, 255, 255);
--minimize-button-background-color: hsla(240, 5%, 5%, 0.1);
--minimize-button-hover-background-color: hsla(240, 5%, 5%, 0.15);
--minimize-button-active-background-color: hsla(240, 5%, 5%, 0.2);
--control-icon-unchecked-hover-background-color: hsla(0, 0%, 70%, 0.4);
--control-icon-unchecked-active-background-color: hsla(0, 0%, 70%, 0.6);
--control-icon-checked-background-color: hsla(10, 100%, 50%, 0.16);
--control-icon-checked-icon-fill: rgb(215, 0, 34);
--control-icon-checked-hover-background-color: hsla(10, 100%, 50%, 0.24);
--control-icon-checked-active-background-color: hsla(10, 100%, 50%, 0.32);
max-height: var(--indicator-height);
}
@@ -37,15 +37,15 @@
--indicator-color: rgb(249, 249, 250);
--indicator-border-color: hsl(240, 1%, 40%);
--indicator-item-separator: 1px solid rgb(249, 249, 250);
--minimize-button-background-color: rgba(249,249,250,0.1);
--minimize-button-hover-background-color: rgba(249,249,250,0.15);
--minimize-button-active-background-color: rgba(249,249,250,0.2);
--control-icon-unchecked-hover-background-color: rgba(249,249,250,0.15);
--control-icon-unchecked-active-background-color: rgba(249,249,250,0.2);
--control-icon-checked-background-color: hsla(343,100%,58%,.16);
--control-icon-checked-icon-fill: rgb(255,40,102);
--control-icon-checked-hover-background-color: hsla(343,100%,58%,.24);
--control-icon-checked-active-background-color: hsla(343,100%,58%,.32);
--minimize-button-background-color: rgba(249, 249, 250, 0.1);
--minimize-button-hover-background-color: rgba(249, 249, 250, 0.15);
--minimize-button-active-background-color: rgba(249, 249, 250, 0.2);
--control-icon-unchecked-hover-background-color: rgba(249, 249, 250, 0.15);
--control-icon-unchecked-active-background-color: rgba(249, 249, 250, 0.2);
--control-icon-checked-background-color: hsla(343, 100%, 58%, 0.16);
--control-icon-checked-icon-fill: rgb(255, 40, 102);
--control-icon-checked-hover-background-color: hsla(343, 100%, 58%, 0.24);
--control-icon-checked-active-background-color: hsla(343, 100%, 58%, 0.32);
}
}
@@ -120,7 +120,7 @@ input[type="checkbox"] {
:root:not([sharingaudio]) > body > #device-share > #microphone-mute-toggle,
:root:not([sharingvideo],[sharingaudio]) > body > #device-share,
:root:not([sharingvideo],[sharingaudio]) > body > #device-share + .separator {
display:none;
display: none;
}
xul|menu {
@@ -201,7 +201,7 @@ xul|menu {
}
.stop-button:hover {
background-color: var(--indicator-stop-button-hover-background-color);
background-color: var(--indicator-stop-button-hover-background-color);
}
#window-controls {
@@ -312,18 +312,18 @@ xul|menu {
--indicator-color: -moz-DialogText;
--indicator-border-color: InactiveBorder;
--indicator-item-separator: 1px solid ThreeDShadow;
--indicator-stop-button-background-color: hsla(0,0%,70%,.2);
--indicator-stop-button-hover-background-color: hsla(0,0%,70%,.4);
--indicator-stop-button-background-color: hsla(0, 0%, 70%, 0.2);
--indicator-stop-button-hover-background-color: hsla(0, 0%, 70%, 0.4);
--indicator-stop-button-color: inherit;
--minimize-button-background-color: hsla(0,0%,70%,.2);
--minimize-button-hover-background-color: hsla(0,0%,70%,.4);
--minimize-button-active-background-color: hsla(0,0%,70%,.6);
--control-icon-unchecked-hover-background-color: hsla(0,0%,70%,.2);
--control-icon-unchecked-active-background-color: hsla(0,0%,70%,.6);
--minimize-button-background-color: hsla(0, 0%, 70%, 0.2);
--minimize-button-hover-background-color: hsla(0, 0%, 70%, 0.4);
--minimize-button-active-background-color: hsla(0, 0%, 70%, 0.6);
--control-icon-unchecked-hover-background-color: hsla(0, 0%, 70%, 0.2);
--control-icon-unchecked-active-background-color: hsla(0, 0%, 70%, 0.6);
--control-icon-checked-background-color: SelectedItem;
--control-icon-checked-icon-fill: SelectedItemText;
--control-icon-checked-hover-background-color: hsla(0,0%,70%,.2);
--control-icon-checked-active-background-color: hsla(0,0%,70%,.6);
--control-icon-checked-hover-background-color: hsla(0, 0%, 70%, 0.2);
--control-icon-checked-active-background-color: hsla(0, 0%, 70%, 0.6);
}
#minimize,

16
browser/themes/windows/browser.css
View File

@@ -15,7 +15,7 @@
color: inherit;
&[_moz-menuactive] {
background-color: light-dark(hsla(0,0%,0%,.12), hsla(0,0%,100%,.22));
background-color: light-dark(hsla(0, 0%, 0%, 0.12), hsla(0, 0%, 100%, 0.22));
color: inherit;
@media (prefers-contrast) {
@@ -31,7 +31,7 @@
/* stylelint-disable-next-line media-query-no-invalid */
@media -moz-pref("widget.windows.mica.toplevel-backdrop", 2) {
/* For acrylic, do the same we do for popups to guarantee some contrast */
background-color: light-dark(rgba(255, 255, 255, .6), rgba(0, 0, 0, .6));
background-color: light-dark(rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0.6));
}
}
@@ -57,7 +57,7 @@
/* This is needed for Windows 10, see bug 1961257 */
@media (-moz-windows-accent-color-in-titlebar) {
:root[customtitlebar][sizemode="normal"] #navigator-toolbox {
border-top: .5px solid ActiveBorder;
border-top: 0.5px solid ActiveBorder;
&:-moz-window-inactive {
border-top-color: InactiveBorder;
}
@@ -158,19 +158,19 @@
@media not (prefers-contrast) {
.titlebar-button:hover {
background-color: light-dark(hsla(0,0%,0%,.12), hsla(0,0%,100%,.22));
background-color: light-dark(hsla(0, 0%, 0%, 0.12), hsla(0, 0%, 100%, 0.22));
&:active {
background-color: light-dark(hsla(0,0%,0%,.22), hsla(0,0%,100%,.32));
background-color: light-dark(hsla(0, 0%, 0%, 0.22), hsla(0, 0%, 100%, 0.32));
}
}
.titlebar-close:hover {
stroke: white;
background-color: hsl(355,86%,49%);
background-color: hsl(355, 86%, 49%);
&:active {
background-color: hsl(355,82%,69%);
background-color: hsl(355, 82%, 69%);
}
}
}
@@ -324,7 +324,7 @@
@media (prefers-contrast) {
/* For high contrast themes. XXX is this needed anymore? */
#tabbrowser-tabpanels,
:root[privatebrowsingmode=temporary] #tabbrowser-tabpanels {
:root[privatebrowsingmode="temporary"] #tabbrowser-tabpanels {
background-color: -moz-default-background-color;
}
}

3
browser/themes/windows/downloads/allDownloadsView.css
View File

@@ -30,6 +30,7 @@
color: inherit;
background-color: transparent;
/* four gradients for the bevel highlights on each edge, one for blue background */
/* prettier-ignore */
background-image:
linear-gradient(to bottom, rgba(255,255,255,0.9) 3px, transparent 3px),
linear-gradient(to right, rgba(255,255,255,0.5) 3px, transparent 3px),
@@ -38,7 +39,7 @@
linear-gradient(to bottom, rgba(163,196,247,0.3), rgba(122,180,246,0.3));
background-clip: content-box;
border-radius: 6px;
outline: 1px solid rgb(124,163,206);
outline: 1px solid rgb(124, 163, 206);
outline-offset: -2px;
}
}

48
browser/themes/windows/places/organizer.css
View File

@@ -35,25 +35,25 @@
@media not (prefers-contrast) {
:root {
--organizer-color: rgb(21,20,26);
--organizer-deemphasized-color: rgb(91,91,102);
--organizer-color: rgb(21, 20, 26);
--organizer-deemphasized-color: rgb(91, 91, 102);
--organizer-toolbar-background: rgb(249,249,251);
--organizer-pane-background: rgb(240,240,244);
--organizer-toolbar-background: rgb(249, 249, 251);
--organizer-pane-background: rgb(240, 240, 244);
--organizer-content-background: white;
--organizer-hover-background: rgba(207,207,216,.66);
--organizer-hover-background: rgba(207, 207, 216, 0.66);
--organizer-hover-color: var(--organizer-color);
--organizer-selected-background: rgb(207,207,216);
--organizer-selected-background: rgb(207, 207, 216);
--organizer-selected-color: var(--organizer-color);
--organizer-focus-selected-background: rgb(0,97,224);
--organizer-focus-selected-color: rgb(251,251,254);
--organizer-outline-color: rgb(0,97,224);
--organizer-focus-selected-background: rgb(0, 97, 224);
--organizer-focus-selected-color: rgb(251, 251, 254);
--organizer-outline-color: rgb(0, 97, 224);
--organizer-separator-color: var(--organizer-pane-field-border-color);
--organizer-border-color: ThreeDLightShadow;
--organizer-toolbar-field-background: rgb(240,240,244);
--organizer-toolbar-field-background: rgb(240, 240, 244);
--organizer-toolbar-field-background-focused: Field;
--organizer-toolbar-field-border-color: transparent;
--organizer-toolbar-field-focus-border-color: color-mix(in srgb, var(--organizer-outline-color) 50%, transparent);
@@ -63,22 +63,22 @@
@media (prefers-color-scheme: dark) {
:root {
--organizer-color: rgb(251,251,254);
--organizer-deemphasized-color: rgb(191,191,201);
--organizer-color: rgb(251, 251, 254);
--organizer-deemphasized-color: rgb(191, 191, 201);
--organizer-toolbar-background: rgb(43,42,51);
--organizer-pane-background: rgb(35,34,43);
--organizer-content-background: rgb(28,27,34);
--organizer-toolbar-background: rgb(43, 42, 51);
--organizer-pane-background: rgb(35, 34, 43);
--organizer-content-background: rgb(28, 27, 34);
--organizer-hover-background: rgb(82,82,94);
--organizer-selected-background: rgb(91,91,102);
--organizer-focus-selected-background: color-mix(in srgb, rgb(0,221,255) 80%, currentColor);
--organizer-focus-selected-color: rgb(43,42,51);
--organizer-outline-color: rgb(0,221,255);
--organizer-hover-background: rgb(82, 82, 94);
--organizer-selected-background: rgb(91, 91, 102);
--organizer-focus-selected-background: color-mix(in srgb, rgb(0, 221, 255) 80%, currentColor);
--organizer-focus-selected-color: rgb(43, 42, 51);
--organizer-outline-color: rgb(0, 221, 255);
--organizer-toolbar-field-background: rgb(28,27,34);
--organizer-toolbar-field-background-focused: rgb(66,65,77);
scrollbar-color: rgba(249,249,250,.4) rgba(20,20,25,.3);
--organizer-toolbar-field-background: rgb(28, 27, 34);
--organizer-toolbar-field-background-focused: rgb(66, 65, 77);
scrollbar-color: rgba(249, 249, 250, 0.4) rgba(20, 20, 25, 0.3);
}
}
}
@@ -241,7 +241,7 @@
/* Use box-shadow to draw a bottom border instead of border-bottom
* because otherwise the items on contentView won't be perfectly
* aligned with the items on the sidebar. */
box-shadow: inset 0 -1px var(--organizer-border-color)
box-shadow: inset 0 -1px var(--organizer-border-color);
}
tree {

4
toolkit/themes/linux/global/global.css
View File

@@ -19,6 +19,7 @@
/* ::::: Alert icons :::::*/
/* prettier-ignore */
.message-icon {
list-style-image: image-set(
"moz-icon://stock/dialog-information?size=48" 1x,
@@ -26,6 +27,7 @@
);
}
/* prettier-ignore */
.alert-dialog #infoIcon,
.alert-icon {
list-style-image: image-set(
@@ -34,6 +36,7 @@
);
}
/* prettier-ignore */
.error-icon {
list-style-image: image-set(
"moz-icon://stock/dialog-error?size=48" 1x,
@@ -41,6 +44,7 @@
);
}
/* prettier-ignore */
.question-icon {
list-style-image: image-set(
"moz-icon://stock/dialog-question?size=48" 1x,

2
toolkit/themes/linux/global/richlistbox.css
View File

@@ -35,7 +35,7 @@ richlistbox.theme-listbox:focus > richlistitem[current="true"] {
richlistbox[seltype="multiple"]:focus > richlistitem[current="true"][selected="true"],
richlistbox.theme-listbox:focus > richlistitem[current="true"][selected="true"] {
outline-color: #F3D982; /* TODO: find a suitable system color */
outline-color: #f3d982; /* TODO: find a suitable system color */
}
richlistbox.theme-listbox:not(:focus) > richlistitem[selected="true"] {

1
toolkit/themes/linux/global/tabbox.css
View File

@@ -8,7 +8,6 @@
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* ::::: tabs ::::: */
tabs {

2
toolkit/themes/linux/mozapps/update/updates.css
View File

@@ -52,7 +52,7 @@
/* Update History Window */
update {
border-bottom: 1px dotted #C0C0C0;
border-bottom: 1px dotted #c0c0c0;
}
.update-name {

23
toolkit/themes/mobile/global/aboutMemory.css
View File

@@ -22,7 +22,11 @@ body {
/* The comment at the top of aboutMemory.xhtml explains this font choice. */
pre {
font-family: Fira Mono, DejaVu Sans Mono, Liberation Mono, monospace;
font-family:
Fira Mono,
DejaVu Sans Mono,
Liberation Mono,
monospace;
}
div.ancillary {
@@ -65,7 +69,7 @@ div.sidebarItem {
border-radius: 10px;
background: Field;
color: FieldText;
user-select: none; /* no need to include this when cutting+pasting */
user-select: none; /* no need to include this when cutting+pasting */
}
input.filterInput {
@@ -93,7 +97,8 @@ div.opsRow {
display: inline-block;
}
div.opsRowLabel, div.sidebarLabel {
div.opsRowLabel,
div.sidebarLabel {
display: block;
margin-bottom: 0.2em;
font-weight: bold;
@@ -115,10 +120,12 @@ h1 {
}
h2 {
padding-left: .1em;
padding-left: 0.1em;
}
.accuracyWarning, .badInputWarning, .invalid {
.accuracyWarning,
.badInputWarning,
.invalid {
/*
* Technically this should be used with the default background colour,
* instead we're using the default field background colour,
@@ -145,17 +152,17 @@ h2 {
}
.noselect {
user-select: none; /* no need to include this when cutting+pasting */
user-select: none; /* no need to include this when cutting+pasting */
}
.option {
font-size: 80%;
user-select: none; /* no need to include this when cutting+pasting */
user-select: none; /* no need to include this when cutting+pasting */
}
.legend {
font-size: 80%;
user-select: none; /* no need to include this when cutting+pasting */
user-select: none; /* no need to include this when cutting+pasting */
}
.debug {

4
toolkit/themes/mobile/global/aboutNetworking.css
View File

@@ -65,7 +65,9 @@
width: 100%;
}
th, td, table {
th,
td,
table {
border-collapse: collapse;
border: none;
text-align: start;

3
toolkit/themes/mobile/global/aboutSupport.css
View File

@@ -42,7 +42,8 @@ table {
border-spacing: 0;
}
th, td {
th,
td {
border: 1px dotted ThreeDShadow;
padding: 3px;
}

2
toolkit/themes/osx/global/autocomplete.css
View File

@@ -82,5 +82,5 @@ panel[type="autocomplete-richlistbox"] {
/* On Mac, the autocomplete panel changes color in system dark mode. We need
to change the contrast on warning-background-color accordingly. */
#PopupAutoComplete > richlistbox > richlistitem {
--status-background-color: light-dark(rgba(248,232,28,.2), rgba(248,232,28,.6)) !important;
--status-background-color: light-dark(rgba(248, 232, 28, 0.2), rgba(248, 232, 28, 0.6)) !important;
}

4
toolkit/themes/osx/global/global.css
View File

@@ -61,12 +61,12 @@ xul|separator.thin[orient="vertical"] {
}
xul|separator.groove:not([orient="vertical"]) {
border-top: 1px solid #A3A3A3;
border-top: 1px solid #a3a3a3;
height: 0;
margin-block: 0.4em;
}
xul|separator.groove[orient="vertical"] {
border-left: 1px solid #A3A3A3;
border-left: 1px solid #a3a3a3;
width: 0;
margin-inline: 0.4em;
}

4
toolkit/themes/osx/global/tabbox.css
View File

@@ -51,7 +51,7 @@ tab:where(:last-of-type) {
}
tab:where([visuallyselected]:not(:-moz-window-inactive)) {
color: #FFF;
color: #fff;
}
.tab-middle {
@@ -59,6 +59,6 @@ tab:where([visuallyselected]:not(:-moz-window-inactive)) {
}
.tabs-left,
.tabs-right {
.tabs-right {
flex: 1;
}

2
toolkit/themes/osx/mozapps/handling/handling.css
View File

@@ -5,7 +5,7 @@
richlistitem[type] {
min-height: 36px; /* Don't forget to update the richlistbox height! */
padding-inline-start: 2px;
}
}
richlistitem {
align-items: center;

5
toolkit/themes/osx/mozapps/update/updates.css
View File

@@ -5,7 +5,8 @@
/* Elevation Dialog */
/* Specify the size for the UI so it has a fixed size. 3rd
party themes should typically specify the same values. */
#elevationBox, .update-content {
#elevationBox,
.update-content {
height: 360px;
width: 700px;
}
@@ -58,7 +59,7 @@
/* Update History Window */
update {
border-bottom: 1px dotted #C0C0C0;
border-bottom: 1px dotted #c0c0c0;
}
.update-name {

8
toolkit/themes/shared/aboutCache.css
View File

@@ -14,7 +14,7 @@ table {
#disk,
#memory {
background-color: rgba(0, 0, 0, .1);
background-color: rgba(0, 0, 0, 0.1);
}
th {
@@ -49,15 +49,15 @@ td {
}
#entries > tbody > tr:nth-child(odd) {
background-color: rgba(0, 0, 0, .03);
background-color: rgba(0, 0, 0, 0.03);
}
#entries > tbody > tr:nth-child(even) {
background-color: rgba(0, 0, 0, .06);
background-color: rgba(0, 0, 0, 0.06);
}
#entries > tbody > tr > td {
padding: .5em 0;
padding: 0.5em 0;
text-align: center;
}

4
toolkit/themes/shared/aboutNetError.css
View File

@@ -8,7 +8,7 @@ body {
--warning-color: #ffa436;
}
@media (prefers-color-scheme: dark) {
@media (prefers-color-scheme: dark) {
body {
--warning-color: #ffbd4f;
}
@@ -27,7 +27,7 @@ body.certerror {
/* Normally, setting e.g. `display: flex` overrides the hidden attribute.
* This allows for element hiding to be controlled entirely in HTML & JS. */
[hidden] {
display: none !important;
display: none !important;
}
body.captiveportal .title {

6
toolkit/themes/shared/aboutNetworking.css
View File

@@ -42,7 +42,7 @@ body {
pointer-events: none;
}
@media (max-width: 830px){
@media (max-width: 830px) {
#categories > .category {
padding-inline-start: 5px;
margin-inline-start: 0;
@@ -63,7 +63,9 @@ body {
width: 100%;
}
th, td, table {
th,
td,
table {
border-collapse: collapse;
border: none;
text-align: start;

26
toolkit/themes/shared/aboutReader.css
View File

@@ -69,8 +69,8 @@ body {
--custom-theme-background: var(--color-white);
--custom-theme-foreground: var(--color-gray-100);
--custom-theme-unvisited-links: var(--color-blue-50);
--custom-theme-visited-links: #321C64;
--custom-theme-selection-highlight: #FFFFCC;
--custom-theme-visited-links: #321c64;
--custom-theme-selection-highlight: #ffffcc;
/* light colours */
}
@@ -128,11 +128,11 @@ body.dark {
body.contrast {
--main-background: #000000;
--main-foreground: #fff;
--primary-color: #D6B4FD;
--link-color: #8080FF;
--link-color-hover: #D6B4FD;
--toolbar-border: #FFEE32;
--icon-fill: #FFEE32;
--primary-color: #d6b4fd;
--link-color: #8080ff;
--link-color-hover: #d6b4fd;
--toolbar-border: #ffee32;
--icon-fill: #ffee32;
}
body.custom {
@@ -207,7 +207,9 @@ body {
}
body.loaded {
transition: color 0.4s, background-color 0.4s;
transition:
color 0.4s,
background-color 0.4s;
}
*::selection {
@@ -567,7 +569,7 @@ button:disabled {
color: var(--popup-button-foreground-hover);
}
.radiorow > input[type=radio]:focus-visible + label {
.radiorow > input[type="radio"]:focus-visible + label {
outline: 2px solid var(--primary-color);
outline-offset: var(--focus-outline-offset);
z-index: 1;
@@ -898,7 +900,7 @@ div[name="customtheme"] {
.color-scheme-buttons {
.auto-button:before {
background: linear-gradient(to right, var(--light-theme-background) 50%, var(--dark-theme-background) 50%);;
background: linear-gradient(to right, var(--light-theme-background) 50%, var(--dark-theme-background) 50%);
}
.light-button:before {
@@ -1093,7 +1095,7 @@ pre {
}
.moz-reader-content .caption,
.moz-reader-content .wp-caption-text
.moz-reader-content .wp-caption-text,
.moz-reader-content figcaption {
font-size: 0.9em;
line-height: 1.48em;
@@ -1163,7 +1165,7 @@ table {
border-width: 0;
/* height: auto is implied from `.moz-reader-content *` rule. */
width: 1em;
margin: 0 .07em;
margin: 0 0.07em;
padding: 0;
}

2
toolkit/themes/shared/aboutSupport.css
View File

@@ -180,5 +180,5 @@ td.integer {
}
#sandbox-tbody tr > td.feature-unavailable > .user-namespaces-unavailabe-support-link {
margin: 0 5px
margin: 0 5px;
}

18
toolkit/themes/shared/alert.css
View File

@@ -21,14 +21,14 @@
#alertBox {
margin: 10px;
border-radius: 1px;
box-shadow: 0 2px 10px rgba(0,0,0,0.59);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.59);
}
@media (not (prefers-contrast)) and (prefers-color-scheme: light) {
#alertBox {
border-color: rgba(107,107,107,.3);
background-color: rgba(255,255,255,.9);
color: rgba(0,0,0,.9);
border-color: rgba(107, 107, 107, 0.3);
background-color: rgba(255, 255, 255, 0.9);
color: rgba(0, 0, 0, 0.9);
}
}
}
@@ -45,18 +45,18 @@
}
#alertBox[animate] {
animation-timing-function: cubic-bezier(.12,1.23,.48,1.09);
animation-timing-function: cubic-bezier(0.12, 1.23, 0.48, 1.09);
}
#alertBox[animate][clicked] {
animation-duration: .6s;
animation-duration: 0.6s;
animation-name: alert-clicked-animation;
}
/* This is used if the close button is clicked
before the animation has finished. */
#alertBox[animate][closing] {
animation-duration: .6s;
animation-duration: 0.6s;
animation-name: alert-closing-animation;
}
@@ -196,12 +196,12 @@
}
#alertSettings:hover {
background-color: rgb(128,128,128);
background-color: rgb(128, 128, 128);
}
#alertSettings[open],
#alertSettings:hover:active {
background-color: rgb(102,102,102);
background-color: rgb(102, 102, 102);
}
#alertSettings[focusedViaMouse]:-moz-focusring {

1
toolkit/themes/shared/appPicker.css
View File

@@ -2,7 +2,6 @@
* 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/. */
#app-picker {
min-width: 320px;
}

6
toolkit/themes/shared/datetimeinputpickers.css
View File

@@ -181,7 +181,7 @@ button.month-year {
@media not (prefers-contrast) {
button.month-year {
fill-opacity: .5;
fill-opacity: 0.5;
}
}
@@ -229,7 +229,7 @@ button.month-year.active {
}
.week-header > tr > th {
opacity: .5;
opacity: 0.5;
}
.days-view {
@@ -281,7 +281,7 @@ button.month-year.active {
}
.days-view > tr > td.outside {
opacity: .5;
opacity: 0.5;
}
.days-view > tr > td.out-of-range,

4
toolkit/themes/shared/dirListing/dirListing.css
View File

@@ -23,7 +23,7 @@ body {
h1 {
font-size: 160%;
margin: 0 0 .6em;
margin: 0 0 0.6em;
border-bottom: 1px solid ThreeDLightShadow;
font-weight: normal;
}
@@ -84,7 +84,7 @@ td:not(:first-child) {
}
.up {
padding: 0 .5em;
padding: 0 0.5em;
margin-inline-start: 20px;
}

12
toolkit/themes/shared/findbar.css
View File

@@ -96,12 +96,12 @@ xul|findbar {
}
&[status="notfound"] {
background-color: rgba(226,40,80,.3);
background-color: rgba(226, 40, 80, 0.3);
color: inherit;
}
&[flash="true"] {
background-color: rgba(255,233,0,.3);
background-color: rgba(255, 233, 0, 0.3);
color: inherit;
}
}
@@ -123,11 +123,11 @@ xul|findbar {
}
&:not([disabled]):hover {
background-color: var(--toolbarbutton-hover-background, rgba(190,190,190,.2));
background-color: var(--toolbarbutton-hover-background, rgba(190, 190, 190, 0.2));
}
&:not([disabled]):hover:active {
background-color: var(--toolbarbutton-active-background, rgba(190,190,190,.4));
background-color: var(--toolbarbutton-active-background, rgba(190, 190, 190, 0.4));
}
&[disabled="true"] > .toolbarbutton-icon {
@@ -176,11 +176,11 @@ xul|findbar {
transition: opacity 150ms ease-in-out;
&:hover {
background-color: var(--toolbarbutton-hover-background, rgba(190,190,190,.2));
background-color: var(--toolbarbutton-hover-background, rgba(190, 190, 190, 0.2));
outline: none;
}
&:hover:active {
background-color: var(--toolbarbutton-active-background, rgba(190,190,190,.4));
background-color: var(--toolbarbutton-active-background, rgba(190, 190, 190, 0.4));
}
}

24
toolkit/themes/shared/global-shared.css
View File

@@ -19,7 +19,7 @@
--default-focusring-width: 2px;
--default-focusring: var(--default-focusring-width) dotted;
--animation-easing-function: cubic-bezier(.07, .95, 0, 1);
--animation-easing-function: cubic-bezier(0.07, 0.95, 0, 1);
--arrowpanel-background: Field;
--arrowpanel-color: FieldText;
@@ -75,7 +75,7 @@
*/
@media not (prefers-contrast) {
--toolbar-field-border-color: transparent;
--toolbar-field-background-color: light-dark(rgba(0, 0, 0, .05), rgba(0, 0, 0, .3));
--toolbar-field-background-color: light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.3));
--toolbar-field-color: inherit;
@media (prefers-color-scheme: light) {
@@ -84,7 +84,7 @@
}
&[lwtheme] {
--toolbar-bgcolor: rgba(255,255,255,.4);
--toolbar-bgcolor: rgba(255, 255, 255, 0.4);
--toolbar-color: var(--lwt-text-color, inherit);
--toolbarbutton-icon-fill-attention: light-dark(rgb(0, 97, 224), rgb(0, 221, 255));
@@ -138,7 +138,7 @@
}
}
:is(menupopup, panel):where([type=arrow]) {
:is(menupopup, panel):where([type="arrow"]) {
--panel-background: var(--arrowpanel-background);
--panel-color: var(--arrowpanel-color);
--panel-border-color: var(--arrowpanel-border-color);
@@ -201,7 +201,7 @@ html|textarea {
font: inherit;
}
html|input:where(:not([type=radio i], [type=checkbox i], [type=range i])),
html|input:where(:not([type="radio" i], [type="checkbox" i], [type="range" i])),
html|textarea {
appearance: none;
padding: var(--space-small);
@@ -328,7 +328,6 @@ a,
}
}
/* Override properties set on buttons, to display the links without unwanted styling */
button.text-link {
appearance: none;
@@ -341,7 +340,7 @@ button.text-link {
}
button.text-link .button-text {
/* Cancel out the default internal margin */
/* Cancel out the default internal margin */
margin: 0;
}
@@ -363,7 +362,7 @@ button.text-link .button-text {
border-radius: var(--border-radius-small);
color: var(--button-text-color);
background-color: var(--button-background-color);
padding: .45em 1em;
padding: 0.45em 1em;
min-height: var(--size-item-large);
font-weight: 600;
min-width: 0;
@@ -412,7 +411,7 @@ button.text-link .button-text {
}
}
&[type=menu] > .button-box > .button-menu-dropmarker {
&[type="menu"] > .button-box > .button-menu-dropmarker {
appearance: none;
display: flex;
content: url("chrome://global/skin/icons/arrow-down-12.svg");
@@ -432,10 +431,10 @@ button.text-link .button-text {
-moz-window-shadow: none;
--autoscroll-background-image: url("chrome://global/skin/icons/autoscroll.svg");
--panel-border-color: rgba(0,0,0,.4);
--panel-border-color: rgba(0, 0, 0, 0.4);
--panel-padding: 0;
--panel-background: rgba(249,249,250,.8) no-repeat center var(--autoscroll-background-image);
--panel-shadow: 0 0 var(--panel-shadow-margin) rgba(0,0,0,.2);
--panel-background: rgba(249, 249, 250, 0.8) no-repeat center var(--autoscroll-background-image);
--panel-shadow: 0 0 var(--panel-shadow-margin) rgba(0, 0, 0, 0.2);
--panel-shadow-margin: 4px;
--panel-border-radius: 100%;
@@ -457,7 +456,6 @@ button.text-link .button-text {
}
}
/* Combobox dropdown renderer */
#ContentSelectDropdown > menupopup {
/* The menupopup itself should always be rendered LTR to ensure the scrollbar aligns with

42
toolkit/themes/shared/in-content/common-shared.css
View File

@@ -30,7 +30,7 @@
--in-content-button-border-color: transparent;
--in-content-button-border-color-hover: transparent;
--in-content-button-border-color-active: var(--in-content-button-border-color-hover);
--in-content-primary-button-text-color: rgb(251,251,254);
--in-content-primary-button-text-color: rgb(251, 251, 254);
--in-content-primary-button-text-color-hover: var(--in-content-primary-button-text-color);
--in-content-primary-button-text-color-active: var(--in-content-primary-button-text-color);
--in-content-primary-button-background: var(--button-background-color-primary);
@@ -97,20 +97,20 @@
* just replace most of these for system colors and remove all this
* duplication (assuming we honor the preferred color scheme for
* in-content privileged pages and plain-text documents). */
--in-content-page-color: rgb(251,251,254);
--in-content-page-color: rgb(251, 251, 254);
--in-content-box-info-background: rgba(249,249,250,0.15);
--in-content-box-info-background: rgba(249, 249, 250, 0.15);
--in-content-border-color: rgba(249,249,250,0.2);
--in-content-border-invalid: rgb(255,132,139);
--in-content-border-color: rgba(249, 249, 250, 0.2);
--in-content-border-invalid: rgb(255, 132, 139);
--in-content-primary-button-text-color: rgb(43,42,51);
--in-content-primary-button-text-color: rgb(43, 42, 51);
--in-content-table-background: rgb(35, 34, 43);
--dialog-warning-text-color: var(--red-40);
scrollbar-color: rgba(249,249,250,.4) rgba(20,20,25,.3);
scrollbar-color: rgba(249, 249, 250, 0.4) rgba(20, 20, 25, 0.3);
}
/* For dialogs, use a different background colour. We don't do
@@ -293,7 +293,7 @@ xul|menulist {
border-radius: 4px;
background-color: var(--in-content-button-background);
font-weight: 400;
padding: .45em 1em;
padding: 0.45em 1em;
text-decoration: none;
margin: 4px 8px;
/* Ensure font-size isn't overridden by widget styling (e.g. in forms.css) */
@@ -306,7 +306,7 @@ button {
/* Small buttons get sized to 6/12px padding (when adding the 1px border) */
button.small-button {
padding: .25em 1em;
padding: 0.25em 1em;
font-size: var(--font-size-small);
min-height: 28px;
}
@@ -563,13 +563,13 @@ html|textarea {
box-sizing: border-box;
font-family: inherit;
font-size: inherit;
padding: .45em;
padding: 0.45em;
margin: 2px 4px;
min-height: var(--input-text-min-height);
}
html|textarea {
min-height: auto
min-height: auto;
}
html|input:where([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):focus,
@@ -940,8 +940,8 @@ xul|richlistitem[selected] xul|menulist:focus-visible {
an existing forced colors border that uses the background color */
@media (forced-colors) {
xul|treechildren::-moz-tree-row(selected) {
border: 2px solid currentColor;
border-radius: 4px;
border: 2px solid currentColor;
border-radius: 4px;
}
}
@@ -999,7 +999,15 @@ xul|treecol:not([hideheader="true"], :first-child),
.tree-columnpicker-button {
border-inline-start-width: 1px;
border-inline-start-style: solid;
border-image: linear-gradient(transparent 0%, transparent 20%, var(--in-content-box-border-color) 20%, var(--in-content-box-border-color) 80%, transparent 80%, transparent 100%) 1 1;
border-image: linear-gradient(
transparent 0%,
transparent 20%,
var(--in-content-box-border-color) 20%,
var(--in-content-box-border-color) 80%,
transparent 80%,
transparent 100%
)
1 1;
}
@media (forced-colors) {
@@ -1098,7 +1106,9 @@ xul|treechildren::-moz-tree-image(selected) {
input[type="text"][warning]:enabled:not(:focus) {
border-color: var(--yellow-60);
box-shadow: 0 0 0 1px var(--yellow-60), 0 0 0 4px var(--yellow-60-a30);
box-shadow:
0 0 0 1px var(--yellow-60),
0 0 0 4px var(--yellow-60-a30);
}
/* Cards */
@@ -1194,7 +1204,7 @@ xul|*.sidebar-footer-link {
}
.sidebar-footer-label {
font-size: .9em;
font-size: 0.9em;
margin: 0 4px;
user-select: none;
}

11
toolkit/themes/shared/in-content/info-pages.css
View File

@@ -69,14 +69,16 @@ body.wide-container {
margin-bottom: 2em;
}
ul, ol {
ul,
ol {
margin: 1em 0;
padding: 0;
margin-inline-start: 2em;
}
ul > li, ol > li {
margin-bottom: .5em;
ul > li,
ol > li {
margin-bottom: 0.5em;
}
ul {
@@ -139,7 +141,8 @@ table button {
padding-inline: 3px;
}
th, td {
th,
td {
padding: 4px;
text-align: match-parent;
}

20
toolkit/themes/shared/media/pipToggle.css
View File

@@ -212,7 +212,6 @@
}
}
/* NO EXPERIMENT - PIP STYLING */
.controlsOverlay:not(.experiment).hovering > .pip-wrapper:not(:focus-visible) {
@@ -260,7 +259,9 @@
.pip-wrapper:not(.experiment) > .pip-expanded {
border: var(--pip-highlight-width) var(--pip-highlight-style);
transition: opacity 250ms, scale 200ms;
transition:
opacity 250ms,
scale 200ms;
height: var(--pip-expanded-height);
background-color: rgba(12, 12, 13, 0.9);
box-shadow: 0 4px 4px rgba(12, 12, 13, 0.25);
@@ -286,8 +287,10 @@
.pip-wrapper:not(.experiment) > .pip-expanded > .pip-explainer {
padding: 6px 16px 8px 8px;
translate: 0;
transition: opacity 250ms, translate 190ms;
transition-timing-function: cubic-bezier(.07, .95, 0, 1);
transition:
opacity 250ms,
translate 190ms;
transition-timing-function: cubic-bezier(0.07, 0.95, 0, 1);
background: rgba(12, 12, 13, 0.65);
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
@@ -313,14 +316,13 @@
translate: 0 calc(40px - var(--pip-highlight-width));
}
/* EXPERIMENT ONLY - PIP STYLING */
/* Since we change the outline for the first-time PiP toggle VARIANT,
* override the focus outline in videocontrols.css as well so that
* there is design consistency. */
.controlsContainer.experiment {
--control-focus-outline: 2px solid #0060DF;
--control-focus-outline: 2px solid #0060df;
}
.pip-wrapper.experiment > .pip-expanded > .pip-icon-label > .pip-label {
@@ -357,7 +359,11 @@
}
.pip-wrapper.experiment > .pip-expanded {
transition: opacity 250ms, scale 200ms, translate 190ms, background-color 200ms;
transition:
opacity 250ms,
scale 200ms,
translate 190ms,
background-color 200ms;
height: var(--pip-expanded-height);
width: var(--pip-expanded-max-width);
min-width: var(--pip-expanded-min-width);

2
toolkit/themes/shared/media/textrecognition.css
View File

@@ -9,7 +9,7 @@
overflow: clip;
/* Prevent unwanted style inheritance. */
font: normal normal normal 100%/normal sans-serif;
font: normal normal normal 100% / normal sans-serif;
text-align: left;
white-space: normal;
}

28
toolkit/themes/shared/media/videocontrols.css
View File

@@ -19,7 +19,7 @@
/* Prevent unwanted style inheritance. See bug 554717. */
text-align: left;
list-style-image: none !important;
font: normal normal normal 100%/normal sans-serif !important;
font: normal normal normal 100% / normal sans-serif !important;
text-decoration: none !important;
white-space: normal !important;
}
@@ -37,7 +37,7 @@
--thumb-size: 13px;
--label-font-size: 13px;
--pip-toggle-padding: 5px;
--control-focus-outline: 2px solid #00DDFF;
--control-focus-outline: 2px solid #00ddff;
--control-focus-outline-offset: -2px;
--pip-toggle-icon-width-height: 16px;
--pip-toggle-translate-x: calc(100% - var(--pip-toggle-icon-width-height) - 2 * var(--pip-toggle-padding));
@@ -123,7 +123,7 @@
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgb(80,80,80, .85);
background-color: rgb(80, 80, 80, 0.85);
}
.controlsOverlay {
@@ -149,7 +149,7 @@
overflow: hidden;
height: 40px;
padding: 0 9px;
background-color: rgba(26,26,26,.8);
background-color: rgba(26, 26, 26, 0.8);
}
.touch .controlBar {
@@ -253,7 +253,7 @@
border-radius: 50%;
/* this is a foreground element even though it is implemented as a background */
background-color: currentColor;
filter: drop-shadow(0 0 2px rgba(0,0,0,0.65));
filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.65));
}
.volumeControl,
@@ -311,7 +311,7 @@
}
.bufferBar {
background-color: rgba(0,0,0,0.7);
background-color: rgba(0, 0, 0, 0.7);
}
.bufferBar::-moz-progress-bar,
@@ -325,7 +325,7 @@
}
.bufferBar::-moz-progress-bar {
background-color: rgba(255,255,255,0.3);
background-color: rgba(255, 255, 255, 0.3);
border-radius: calc(var(--track-size) / 2);
}
@@ -360,7 +360,7 @@
}
.volumeControl::-moz-range-track {
background-color: rgba(0,0,0,0.7);
background-color: rgba(0, 0, 0, 0.7);
}
@media (prefers-contrast) {
@@ -560,13 +560,13 @@
direction: rtl;
}
[status="errorAborted"] > #errorAborted,
[status="errorNetwork"] > #errorNetwork,
[status="errorDecode"] > #errorDecode,
[status="errorAborted"] > #errorAborted,
[status="errorNetwork"] > #errorNetwork,
[status="errorDecode"] > #errorDecode,
[status="errorSrcNotSupported"] > #errorSrcNotSupported,
[status="errorNoSource"] > #errorNoSource,
[status="errorGeneric"] > #errorGeneric,
[status="pictureInPicture"] > #pictureInPicture {
[status="errorNoSource"] > #errorNoSource,
[status="errorGeneric"] > #errorGeneric,
[status="pictureInPicture"] > #pictureInPicture {
display: inline;
}

10
toolkit/themes/shared/menu.css
View File

@@ -13,7 +13,7 @@ panel {
--menuitem-padding: 0.5em 1em;
@media (-moz-platform: linux) {
--menuitem-padding: .25em .5em;
--menuitem-padding: 0.25em 0.5em;
}
@media (-moz-platform: macos) {
--menuitem-padding: 3px 9px;
@@ -158,7 +158,7 @@ menubar > menu {
color: inherit;
background-color: transparent;
border-radius: 0;
padding: .25em .5em;
padding: 0.25em 0.5em;
padding-bottom: 1px;
border-bottom: 3px solid transparent;
@@ -270,7 +270,7 @@ menupopup > menu::after {
margin-inline: 1em 0;
@media (-moz-platform: linux) {
margin-inline: .5em 0;
margin-inline: 0.5em 0;
}
@media (-moz-platform: macos) {
margin-inline: 22px -3px;
@@ -331,7 +331,7 @@ menuitem[highlightable] > .menu-text {
@media (-moz-platform: linux) {
/* Matches inline menuitem padding */
margin-inline-end: .5em;
margin-inline-end: 0.5em;
}
@media (-moz-platform: windows) {
margin-top: 2px;
@@ -393,7 +393,7 @@ menupopup[needsgutter] {
padding-inline-start: 0;
&::before {
content: '\2713'; /* a checkmark */
content: "\2713"; /* a checkmark */
display: inline-block;
vertical-align: middle;
line-height: 0;

6
toolkit/themes/shared/narrate.css
View File

@@ -42,7 +42,9 @@ body.hcm {
transform: translate(-50%, calc(-50% - 2px));
z-index: -1;
border-bottom: 7px solid var(--narrate-word-highlight-color);
transition: left 0.1s ease, width 0.1s ease;
transition:
left 0.1s ease,
width 0.1s ease;
}
body.hcm .narrate-word-highlight {
@@ -176,7 +178,7 @@ body.hcm .narrate-word-highlight {
/* Rate control */
.narrate-rate-icon {
content: '';
content: "";
width: 48px;
height: 40px;
background-position: center;

4
toolkit/themes/shared/notification.css
View File

@@ -16,5 +16,7 @@
}
notification-message.animated {
transition: margin-top 300ms var(--animation-easing-function), opacity 300ms var(--animation-easing-function);
transition:
margin-top 300ms var(--animation-easing-function),
opacity 300ms var(--animation-easing-function);
}

45
toolkit/themes/shared/pictureinpicture/player.css
View File

@@ -53,7 +53,9 @@ body:fullscreen {
.player-holder {
will-change: opacity, filter;
transition: opacity 160ms linear, filter 160ms linear;
transition:
opacity 160ms linear,
filter 160ms linear;
body:hover:not(:fullscreen) & {
opacity: 0.35;
@@ -85,7 +87,7 @@ browser {
#controls button:focus-visible,
#controls input:focus-visible,
.switch > input:focus-visible + .slider {
outline: 3px solid #0060DF;
outline: 3px solid #0060df;
box-shadow: 1px 2px 5px #000;
}
@@ -95,7 +97,10 @@ browser {
#controls-bottom-gradient {
background: linear-gradient(0deg, #000000 -13.24%, rgba(0, 0, 0, 0) 90.44%);
position: absolute;
height: calc(var(--controls-bottom-distance) + 2 * var(--resize-margin) + var(--player-control-item-height) + var(--controls-bottom-upper-height) + var(--scrubber-vertical-margin));
height: calc(
var(--controls-bottom-distance) + 2 * var(--resize-margin) + var(--player-control-item-height) + var(--controls-bottom-upper-height) +
var(--scrubber-vertical-margin)
);
bottom: 0;
width: 100vw;
margin: 0 calc(-1 * var(--resize-margin)) calc(-1 * var(--resize-margin)) calc(-1 * var(--resize-margin));
@@ -138,7 +143,9 @@ browser {
.control-item {
-moz-window-dragging: no-drag;
transition: opacity 160ms linear, fill-opacity 160ms linear;
transition:
opacity 160ms linear,
fill-opacity 160ms linear;
opacity: 0;
cursor: pointer;
}
@@ -163,7 +170,7 @@ browser {
}
.control-button:hover:enabled {
background-color: rgba(255, 255, 255, .25);
background-color: rgba(255, 255, 255, 0.25);
}
#controls:is([keying], [showing]) .control-button:disabled,
@@ -182,7 +189,7 @@ body:not(:fullscreen) #controls:hover .control-button:disabled {
display: inline-block;
width: max-content;
position: relative;
padding: .4em .5em;
padding: 0.4em 0.5em;
background: #000000;
color: #ffffff;
border-radius: 4px;
@@ -289,14 +296,14 @@ body:not(:fullscreen) #controls:hover #timestamp {
#close,
#unpip {
background-color: rgba(255, 255, 255, .8);
background-color: rgba(255, 255, 255, 0.8);
position: absolute;
fill: var(--close-btn-fill-color);
}
#close:is(:hover, :focus-visible),
#unpip:is(:hover, :focus-visible) {
background-color: rgba(255, 255, 255, .9);
background-color: rgba(255, 255, 255, 0.9);
}
#close {
@@ -339,7 +346,7 @@ body:not(:fullscreen) #controls:hover #timestamp {
&::-moz-range-thumb {
border-radius: 8px;
background-color: #FFFFFF;
background-color: #ffffff;
width: 8px;
height: 8px;
padding: 0;
@@ -350,7 +357,7 @@ body:not(:fullscreen) #controls:hover #timestamp {
}
&::-moz-range-progress {
background-color: #FFFFFF;
background-color: #ffffff;
}
&,
@@ -410,7 +417,7 @@ body:not(:fullscreen) #fullscreen {
.box {
-moz-window-dragging: no-drag;
background-color: #2B2A33;
background-color: #2b2a33;
text-align: start;
font-size: 1em;
width: 186px;
@@ -473,7 +480,7 @@ body:not(:fullscreen) #fullscreen {
.arrow {
border: 10px solid transparent;
border-top-color: #2B2A33;
border-top-color: #2b2a33;
width: 0;
height: 0;
inset-inline-start: 136px;
@@ -483,7 +490,7 @@ body:not(:fullscreen) #fullscreen {
.grey-line {
width: 100%;
height: 1px;
background: #8F8F9D;
background: #8f8f9d;
}
.font-size-selection {
@@ -549,12 +556,12 @@ body:not(:fullscreen) #fullscreen {
.slider::before {
position: absolute;
content: '';
content: "";
height: 12px;
width: 12px;
inset-inline-start: 2px;
bottom: 2px;
background-color: #2B2A33;
background-color: #2b2a33;
transition: transform 250ms;
border-radius: 50%;
}
@@ -600,10 +607,10 @@ input:checked + .slider::before {
&::-moz-range-thumb {
border-radius: 14px;
background-color: #BFBFC9;
background-color: #bfbfc9;
width: 8px;
height: 8px;
border: 3px solid #FFFFFF;
border: 3px solid #ffffff;
padding: 0;
}
@@ -612,7 +619,7 @@ input:checked + .slider::before {
}
&::-moz-range-progress {
background-color: #FFFFFF;
background-color: #ffffff;
}
&,
@@ -625,7 +632,7 @@ input:checked + .slider::before {
#timestamp {
align-self: center;
color: #FFFFFF;
color: #ffffff;
cursor: default;
font-family: system-ui;
font-size: 0.9em;

94
toolkit/themes/shared/pictureinpicture/texttracks.css
View File

@@ -3,12 +3,12 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
:root {
--min-font-size: 14px;
--max-font-size: 40px;
--font-scale: 0.06;
--texttracks-bottom: calc(var(--font-scale) * 100vh);
--min-font-size: 14px;
--max-font-size: 40px;
--font-scale: 0.06;
--texttracks-bottom: calc(var(--font-scale) * 100vh);
/*
/*
* Move text tracks if they visually overlap with pip player controls
* New text tracks position is determined by adding together:
* 1) bottom distance of #controls
@@ -17,58 +17,64 @@
* 4) hardcoded px value (to ensure consistent distance, regardless of pip window size)
* NOTE: if changing player.css values, change values here too.
*/
--resize-margin: 5px;
--player-controls-height: calc(100vh - 2 * var(--resize-margin));
--player-controls-bottom-distance: calc(100vh - var(--player-controls-height));
--player-controls-button-height: 10vmax;
--player-controls-button-max-height: 32px;
--player-controls-button-min-height: 16px;
--player-controls-button-outline-width: 2px;
--player-controls-scrubber-height: 0px;
--player-bottom-controls-height: calc(var(--player-controls-scrubber-height) + clamp(var(--player-controls-button-min-height), var(--player-controls-button-height), var(--player-controls-button-max-height)));
--distance-from-player-controls: 20px;
--texttracks-bottom-overlapped: calc(var(--player-controls-button-outline-width) + var(--player-controls-bottom-distance) + var(--player-bottom-controls-height) + var(--distance-from-player-controls));
--resize-margin: 5px;
--player-controls-height: calc(100vh - 2 * var(--resize-margin));
--player-controls-bottom-distance: calc(100vh - var(--player-controls-height));
--player-controls-button-height: 10vmax;
--player-controls-button-max-height: 32px;
--player-controls-button-min-height: 16px;
--player-controls-button-outline-width: 2px;
--player-controls-scrubber-height: 0px;
--player-bottom-controls-height: calc(
var(--player-controls-scrubber-height) +
clamp(var(--player-controls-button-min-height), var(--player-controls-button-height), var(--player-controls-button-max-height))
);
--distance-from-player-controls: 20px;
--texttracks-bottom-overlapped: calc(
var(--player-controls-button-outline-width) + var(--player-controls-bottom-distance) + var(--player-bottom-controls-height) +
var(--distance-from-player-controls)
);
}
#texttracks {
background-color: black;
opacity: 80%;
position: absolute;
text-align: center;
box-sizing: border-box;
color: white;
margin: 0;
display: block;
left: 50%;
transform: translateX(-50%);
padding: 8px;
max-width: calc(0.88 * 100vw);
bottom: var(--texttracks-bottom);
font-size: clamp(var(--min-font-size), calc(var(--font-scale) * 100vh), var(--max-font-size));
line-height: clamp(14.4px, calc(var(--font-scale) * 1.2 * 100vh), 48px);
white-space: pre-line;
width: max-content;
font-family: sans-serif;
transition: bottom 0.3s;
transition-delay: 0.1s;
background-color: black;
opacity: 80%;
position: absolute;
text-align: center;
box-sizing: border-box;
color: white;
margin: 0;
display: block;
left: 50%;
transform: translateX(-50%);
padding: 8px;
max-width: calc(0.88 * 100vw);
bottom: var(--texttracks-bottom);
font-size: clamp(var(--min-font-size), calc(var(--font-scale) * 100vh), var(--max-font-size));
line-height: clamp(14.4px, calc(var(--font-scale) * 1.2 * 100vh), 48px);
white-space: pre-line;
width: max-content;
font-family: sans-serif;
transition: bottom 0.3s;
transition-delay: 0.1s;
}
#texttracks[overlap-video-controls] {
bottom: var(--texttracks-bottom-overlapped)
bottom: var(--texttracks-bottom-overlapped);
}
#texttracks:empty {
visibility: hidden;
visibility: hidden;
}
@media (prefers-reduced-motion) {
#texttracks {
transition: none;
}
#texttracks {
transition: none;
}
}
@media screen and (max-width: 319px) {
#texttracks {
display: none;
}
#texttracks {
display: none;
}
}

8
toolkit/themes/shared/popup.css
View File

@@ -23,7 +23,7 @@ panel {
--panel-width: initial;
--panel-shadow-margin: 4px;
--panel-shadow: 0 0 var(--panel-shadow-margin) hsla(0,0%,0%,.2);
--panel-shadow: 0 0 var(--panel-shadow-margin) hsla(0, 0%, 0%, 0.2);
-moz-window-input-region-margin: var(--panel-shadow-margin);
margin: calc(-1 * var(--panel-shadow-margin));
@@ -81,7 +81,7 @@ panel {
overflow: clip; /* Don't let panel content overflow the border */
}
&[orient=vertical]::part(content) {
&[orient="vertical"]::part(content) {
flex-direction: column;
}
}
@@ -134,7 +134,9 @@ panel[type="arrow"] {
* other platforms.
*/
@media (-moz-platform: macos) {
transition-property: -moz-window-transform, -moz-window-opacity;
transition-property:
-moz-window-transform,
-moz-window-opacity;
@media not (prefers-reduced-motion) {
-moz-window-transform: translateY(-70px);

6
toolkit/themes/shared/popupnotification.css
View File

@@ -25,7 +25,7 @@ popupnotification {
}
popupnotificationcontent {
margin-top: .5em;
margin-top: 0.5em;
}
.popup-notification-header-container,
@@ -69,7 +69,7 @@ popupnotificationcontent {
}
.popup-notification-origin {
margin-bottom: .3em !important;
margin-bottom: 0.3em !important;
&:not([value]) {
display: none;
@@ -77,7 +77,7 @@ popupnotificationcontent {
}
.popup-notification-hint-text {
margin-top: .5em !important;
margin-top: 0.5em !important;
&:empty {
display: none;

7
toolkit/themes/shared/toolbarbutton.css
View File

@@ -72,9 +72,10 @@ toolbarbutton {
color: #fff;
text-shadow: none;
border-radius: 2px;
box-shadow: 0 1px 0 hsla(0, 100%, 100%, .2) inset,
0 -1px 0 hsla(0, 0%, 0%, .1) inset,
0 1px 0 hsla(206, 50%, 10%, .2);
box-shadow:
0 1px 0 hsla(0, 100%, 100%, 0.2) inset,
0 -1px 0 hsla(0, 0%, 0%, 0.1) inset,
0 1px 0 hsla(206, 50%, 10%, 0.2);
margin: -5px 0 0 !important;
margin-inline-end: -4px !important;
min-width: 14px;

18
toolkit/themes/shared/tree/tree.css
View File

@@ -37,7 +37,6 @@ tree {
z-index: 2147483646;
}
/* ::::: tree rows ::::: */
treechildren::-moz-tree-row {
@@ -56,7 +55,7 @@ treechildren::-moz-tree-row(multicol, odd) {
@media not (prefers-contrast) {
treechildren::-moz-tree-row(hover) {
background-color: hsla(0,0%,50%,.15);
background-color: hsla(0, 0%, 50%, 0.15);
}
}
@@ -75,7 +74,7 @@ treechildren::-moz-tree-row(current, focus) {
}
treechildren::-moz-tree-row(selected, current, focus) {
outline-color: #F3D982;
outline-color: #f3d982;
}
/* ::::: tree cells ::::: */
@@ -100,7 +99,6 @@ treechildren::-moz-tree-cell-text(selected, focus) {
color: SelectedItemText;
}
/* ::::: lines connecting cells ::::: */
treechildren::-moz-tree-line {
@@ -111,7 +109,6 @@ treechildren::-moz-tree-line(selected, focus) {
border: 1px dotted SelectedItemText;
}
/* ::::: tree separator ::::: */
treechildren::-moz-tree-separator {
@@ -119,7 +116,6 @@ treechildren::-moz-tree-separator {
border-bottom: 1px solid ThreeDHighlight;
}
/* ::::: drop feedback ::::: */
treechildren::-moz-tree-cell-text(primary, dropOn) {
@@ -279,11 +275,11 @@ html|input.tree-input {
}
@media (-moz-platform: macos) and (not (prefers-contrast)) {
/* We show a `SelectedItem` background on selected rows, so we do not need the
dotted outline in that case. For users who have Full Keyboard Access
enabled, macOS draws a blue highlight above the row highlight, so keyboard-
only users can still discern the currently-selected row when multiple rows
are selected. */
/* We show a `SelectedItem` background on selected rows, so we do not need the
dotted outline in that case. For users who have Full Keyboard Access
enabled, macOS draws a blue highlight above the row highlight, so keyboard-
only users can still discern the currently-selected row when multiple rows
are selected. */
treechildren::-moz-tree-row(selected, current, focus) {
outline: none;
}

5
toolkit/themes/windows/global/global.css
View File

@@ -106,11 +106,10 @@ xul|separator.groove[orient="vertical"] {
> .menu-text {
/* Padding should follow the 4/12 ratio, where 12px is the default font-size
with 4px being the preferred padding size. */
padding-block: .3333em;
padding-block: 0.3333em;
}
}
> menucaption > .menu-text {
font-weight: bold;
}
@@ -129,5 +128,5 @@ xul|separator.groove[orient="vertical"] {
#ContentSelectDropdown > .isOpenedViaTouch > menuitem > .menu-text {
/* Touch padding should follow the 11/12 ratio, where 12px is the default
font-size with 11px being the preferred padding size. */
padding-block: .9167em;
padding-block: 0.9167em;
}

14
toolkit/themes/windows/global/richlistbox.css
View File

@@ -34,7 +34,7 @@ richlistbox.theme-listbox:focus > richlistitem[current="true"] {
richlistbox[seltype="multiple"]:focus > richlistitem[current="true"][selected="true"],
richlistbox.theme-listbox:focus > richlistitem[current="true"][selected="true"] {
outline-color: #F3D982; /* TODO: find a suitable system color */
outline-color: #f3d982; /* TODO: find a suitable system color */
}
richlistbox.theme-listbox > richlistitem {
@@ -60,16 +60,16 @@ richlistbox.theme-listbox > richlistitem > label {
@media not (prefers-contrast) {
richlistbox.theme-listbox > richlistitem {
--listitem-selectedTextColor: rgb(0,0,0);
--listitem-selectedColor: rgb(217,217,217);
--listitem-selectedTextColor: rgb(0, 0, 0);
--listitem-selectedColor: rgb(217, 217, 217);
--listitem-selectedBorder: var(--listitem-selectedColor);
--listitem-selectedBottomBorder: rgb(204,204,204);
--listitem-selectedBottomBorder: rgb(204, 204, 204);
--listitem-selectedBackground: var(--listitem-selectedColor);
--listitem-selectedImage: none;
--listitem-selectedCurrentBorder: rgb(123,195,255);
--listitem-selectedFocusColor: rgb(205,232,255);
--listitem-selectedCurrentBorder: rgb(123, 195, 255);
--listitem-selectedFocusColor: rgb(205, 232, 255);
--listitem-selectedFocusBorder: var(--listitem-selectedFocusColor);
--listitem-selectedFocusBottomBorder: rgb(165,214,255);
--listitem-selectedFocusBottomBorder: rgb(165, 214, 255);
--listitem-selectedFocusBackground: var(--listitem-selectedFocusColor);
--listitem-selectedFocusImage: none;
--listitem-selectedFocusCurrentBorder: var(--listitem-selectedFocusColor);

2
toolkit/themes/windows/mozapps/handling/handling.css
View File

@@ -5,7 +5,7 @@
richlistitem[type] {
min-height: 36px; /* Don't forget to update the richlistbox height! */
padding-inline-start: 2px;
}
}
richlistitem {
align-items: center;

5
toolkit/themes/windows/mozapps/update/updates.css
View File

@@ -5,7 +5,8 @@
/* Elevation Dialog */
/* Specify the size for the UI so it has a fixed size. 3rd
party themes should typically specify the same values. */
#elevationBox, .update-content {
#elevationBox,
.update-content {
height: 360px;
width: 700px;
}
@@ -52,7 +53,7 @@
/* Update History Window */
update {
border-bottom: 1px dotted #C0C0C0;
border-bottom: 1px dotted #c0c0c0;
}
.update-name {