@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");
/** Video player **************************************************************/
/* Control Bar Size */
@supports -moz-bool-pref("userContent.player.size") {
#controlsContainer {
--controlBar-height: 40px; /* Original: 40px, Replace to this value */
}
#controlsContainer .touch {
--button-size: 48px !important; /* Original: 40px */
--controlBar-height: 52px; /* Original: 52px */
}
#controlsContainer .controlBar {
height: var(--controlBar-height) !important; /* Original: 40px */
}
.videocontrols[inDOMFullscreen] #controlsContainer {
--button-size: 64px !important; /* Original: 30px */
--track-size: 6px !important; /* Original: 5px, Touch: 7px */
--thumb-size: 15px !important; /* Original: 13px, Touch: 16px */
--controlBar-height: 64px; /* Original: 40px */
}
.videocontrols[inDOMFullscreen] #controlsContainer .touch {
--button-size: 72px !important; /* Original: 40px */
--controlBar-height: 64px; /* Original: 52px */
}
.videocontrols[inDOMFullscreen] #controlsContainer .controlBar {
padding-bottom: 8px !important;
}
}
/* Control Bar UI */
@supports -moz-bool-pref("userContent.player.ui") {
audio {
--duration-color: #929292; /* Like Original */
--media-background: rgba(26, 26, 26, 0.8); /* Like Original */
border-radius: 8px;
--box-shadow1: rgba(14, 13, 26, 0.12);
--box-shadow2: rgba(7, 48, 114, 0.12);
--box-shadow3: rgba(34, 0, 51, 0.04);
box-shadow: 0 5px 10px -3px var(--box-shadow1), 0 3px 16px 2px var(--box-shadow2), 0 8px 12px 1px var(--box-shadow3);
/* Or: 0 2px 15px rgba(0,0,0,.1); */
}
@media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
audio {
--box-shadow1: rgba(249, 249, 250, 0.12);
--box-shadow2: rgba(91, 91, 102, 0.12);
--box-shadow3: rgba(82, 82, 94, 0.04);
}
}
video {
--duration-color: #eee;
--media-background: linear-gradient(transparent, rgba(26, 26, 26, 0.85));
}
@media (prefers-contrast) {
video {
--duration-color: #929292; /* Like Original */
--media-background: rgba(26, 26, 26, 0.8); /* Like Original */
}
}
#controlsContainer .controlBar {
background: var(--media-background) !important;
}
#controlsContainer .duration {
color: var(--duration-color) !important; /* Original: #929292 */
}
@supports -moz-bool-pref("userContent.player.ui.twoline") {
audio {
/* #controlsContainer .controlBar */
--controlBar-flex-wrap: unset;
--controlBar-justify-content: center;
--controlBar-align-content: unset;
--controlBar-twoline-more-height: 0px;
--controlBar-padding-inline: 9px;
/* #controlsContainer .scrubberStack */
/* .scrubberStack - Vertical */
--scrubberStack-order: unset;
--scrubberStack-height: 100%;
--scrubberStack-transform: none;
/* .scrubberStack - Horizontal */
--scrubberStack-margin-inline: 9px;
/* #controlsContainer .positionDurationBox */
--positionDurationBox-flex-grow: unset;
--positionDurationBox-margin-left: unset;
--positionDurationBox-text-align: center;
/* Others */
--button-outside-margin: 0;
}
video {
/* #scrubber .scrubber::-moz-range-thumb */
--scrubber-thumb-scale: 0;
--scrubber-thumb-color: #48a0f7; /* Color as hover, Prevent flashing */
/* .progressBar::-moz-progress-bar */
--progressBar-scale: 0.65;
/* #controlsContainer .controlBar */
--controlBar-flex-wrap: wrap;
--controlBar-justify-content: space-between;
--controlBar-align-content: space-around;
--controlBar-padding-inline: 0 !important; /* Original: 9px */
/* #controlsContainer .scrubberStack */
/* .scrubberStack - Vertical */
--scrubberStack-order: -1;
/* .scrubberStack - Horizontal */
--scrubberStack-flex-basis: auto;
--scrubberStack-twoline-width: 100%;
--scrubberStack-margin-inline: 0;
/* #controlsContainer .positionDurationBox */
--positionDurationBox-flex-grow: 2;
--positionDurationBox-margin-left: 15px;
--positionDurationBox-text-align: left;
/* Others */
--duration-color: #dadada;
--button-outside-margin: 9px;
}
.scrubber:not(:hover)::-moz-range-thumb {
transform: scale(var(--scrubber-thumb-scale, 1));
background-color: var(--scrubber-thumb-color, currentColor) !important;
}
.progressStack {
transform-origin: bottom;
transform: scaleY(var(--progressBar-scale, 1));
}
.scrubber:hover::-moz-range-thumb,
.progressContainer:hover .progressStack {
transform: scale(1);
}
#controlsContainer .controlBar {
flex-wrap: var(--controlBar-flex-wrap);
justify-content: var(--controlBar-justify-content);
align-content: var(--controlBar-align-content);
height: calc(var(--controlBar-height) + var(--controlBar-twoline-more-height, var(--thumb-size))) !important;
padding-inline: var(--controlBar-padding-inline) !important; /* Original: 9px */
}
#controlsContainer .scrubberStack {
/* Vertical */
order: var(--scrubberStack-order);
height: var(--scrubberStack-height, var(--thumb-size)) !important;
transform: var(--scrubberStack-transform, translateY(calc(var(--thumb-size) / 2)));
/* Horizontal */
flex-basis: var(--scrubberStack-flex-basis, calc(var(--scrubberStack-width) - 18px)) !important;
width: var(--scrubberStack-twoline-width, var(--scrubberStack-width));
margin-inline: var(--scrubberStack-margin-inline) !important;
}
#controlsContainer .positionDurationBox {
flex-grow: var(--positionDurationBox-flex-grow);
margin-left: var(--positionDurationBox-margin-left);
text-align: var(--positionDurationBox-text-align) !important;
}
#playButton {
margin-left: var(--button-outside-margin) !important;
}
#fullscreenButton {
margin-right: var(--button-outside-margin) !important;
}
}
}
@supports -moz-bool-pref("userContent.player.icon") {
#controlsContainer .fullscreenButton {
background-image: url("../icons/enter-fullscreen.svg") !important;
}
#controlsContainer .fullscreenButton[fullscreened] {
background-image: url("../icons/exit-fullscreen.svg") !important;
}
}
@supports -moz-bool-pref("userContent.player.noaudio") {
#controlsContainer .muteButton[noAudio] {
/* Remove volume button at noAudio */
display: none !important;
}
}
/* Click to play UI */
@supports -moz-bool-pref("userContent.player.click_to_play") {
#controlsContainer .clickToPlay {
cursor: pointer;
opacity: 0.65 !important;
}
#controlsContainer .controlsSpacerStack:hover > .clickToPlay {
opacity: 0.85 !important;
}
#controlsContainer .controlsSpacerStack:hover > .clickToPlay:hover {
opacity: 1 !important;
fill: #48a0f7 !important; /* color as .scrubber */
}
}
/* Animation */
@supports -moz-bool-pref("userContent.player.animate") {
@media (prefers-reduced-motion: no-preference) {
/* Control Bar */
#controlsContainer .controlBar {
transition: transform 350ms ease;
opacity: 1 !important;
}
#controlsContainer .controlBar[hidden] {
transform: translateY(100%);
transition: transform 350ms ease-in-out, opacity 1s ease 100ms !important;
opacity: 0 !important;
}
#controlsContainer .controlBar[hidden] .progressBar,
#controlsContainer .controlBar[hidden] .bufferBar {
display: unset !important;
opacity: 0.55;
transition: opacity 150ms ease 50ms;
}
/* Two line Control Bar */
.scrubber::-moz-range-thumb,
.progressStack {
transition: transform 0.1s cubic-bezier(0, 0, 0.2, 1);
}
/* Click to play */
#controlsContainer .clickToPlay {
transition: opacity 150ms ease-in-out, fill 150ms ease-in-out;
}
}
}
/** Activity Stream ***********************************************************/
@-moz-document url("about:home"), url("about:newtab") {
/** Activity Stream - Search Focus Border: like URL *************************/
@supports -moz-bool-pref("userContent.page.field_border") {
/* At DarkMode, Color */
body[style*="--newtab-background-color:rgba(28, 27, 34, 1);"],
body[style*="--newtab-background-color:rgba(42, 42, 46, 1);"],
body[style*="--newtab-background-color: rgba(42, 42, 46, 1);"],
body[style*="--newtab-background-color: rgba(43, 42, 51, 1);"],
body[style*="--newtab-background-color: rgb(43, 42, 51);"] {
/* inner */
--newtab-focus-border: rgba(
0,
221,
255,
0.5
) !important; /* Original: #B5D3FF, Better color-mix(in srgb, #B5D3FF 70%, transparent) */
--newtab-focus-border-selected: var(--newtab-focus-border) !important; /* Original: #B5D3FF */
/* For Nightly */
--newtab-primary-action-background: var(--newtab-focus-border) !important;
}
@supports -moz-bool-pref("userContent.page.proton_color") {
@supports -moz-bool-pref("userContent.page.proton_color.dark_blue_accent") {
body[style*="--newtab-background-color:rgba(28, 27, 34, 1);"],
body[style*="--newtab-background-color:rgba(42, 42, 46, 1);"],
body[style*="--newtab-background-color: rgba(42, 42, 46, 1);"],
body[style*="--newtab-background-color: rgba(43, 42, 51, 1);"],
body[style*="--newtab-background-color: rgb(43, 42, 51);"] {
--newtab-focus-border: var(--in-content-focus-outline-color) !important;
}
}
}
} /** Activity Stream - Menu Icons ********************************************/
@supports -moz-bool-pref("userChrome.icon.context_menu") {
.context-menu-list .context-menu-item button {
padding-inline-start: 0 !important;
}
.context-menu-list .context-menu-item button span {
/* Color */
-moz-context-properties: fill, fill-opacity, stroke !important;
fill: currentColor !important;
/* Layout */
background-size: 16px !important;
background-repeat: no-repeat !important;
background-image: var(--menuitem-image);
padding-inline-start: 24px; /* 16p + (4px * 2) */
background-position: var(--uc-menu-background-position, left) 4px center;
}
.context-menu-list .context-menu-item button span:dir(rtl) {
--uc-menu-background-position: right;
}
.context-menu-item span[data-l10n-id="newtab-menu-pin"] {
--menuitem-image: url("../icons/pin-tab.svg");
}
.context-menu-item span[data-l10n-id="newtab-menu-unpin"] {
--menuitem-image: url("../icons/unpin-tab.svg");
}
.context-menu-item span[data-l10n-id="newtab-menu-edit-topsites"] {
--menuitem-image: url("chrome://global/skin/icons/edit.svg");
}
.context-menu-item span[data-l10n-id="newtab-menu-bookmark"] {
--menuitem-image: url("chrome://browser/skin/bookmark.svg");
}
.context-menu-item span[data-l10n-id="newtab-menu-remove-bookmark"] {
--menuitem-image: url("chrome://browser/skin/bookmark-hollow.svg");
}
.context-menu-item span[data-l10n-id="newtab-menu-save-to-pocket"] {
--menuitem-image: url("../icons/pocket-outline.svg");
}
.context-menu-item span[data-l10n-id="newtab-menu-open-file"] {
--menuitem-image: url("../icons/fluid.svg");
}
.context-menu-item span[data-l10n-id="newtab-menu-show-file"] {
--menuitem-image: url("chrome://global/skin/icons/folder.svg");
}
@supports -moz-bool-pref("userChrome.icon.library") {
.context-menu-item span[data-l10n-id="newtab-menu-show-file"] {
--menuitem-image: url("../icons/folder.svg");
}
}
.context-menu-item span[data-l10n-id="newtab-menu-open-new-window"] {
--menuitem-image: url("chrome://browser/skin/window.svg");
}
.context-menu-item span[data-l10n-id="newtab-menu-open-new-private-window"] {
--menuitem-image: url("chrome://browser/skin/privateBrowsing.svg");
}
.context-menu-item span[data-l10n-id="newtab-menu-dismiss"] {
--menuitem-image: url("chrome://global/skin/icons/delete.svg");
}
.context-menu-item span[data-l10n-id="newtab-menu-delete-history"] {
--menuitem-image: url("../icons/eraser.svg");
}
}
/** Activity Stream - Web Site Icon: full size ******************************/
@supports -moz-bool-pref("userContent.newTab.full_icon") {
.top-site-outer .tile {
overflow: hidden;
}
.top-site-outer .tile .icon-wrapper {
width: 100% !important; /* Original: 48px */
height: 100% !important; /* Original: 48px */
}
}
/** Activity Stream - Animate ***********************************************/
@supports -moz-bool-pref("userContent.newTab.animate") {
@media (prefers-reduced-motion: no-preference) {
:root {
--animation-easing-function: cubic-bezier(0.07, 0.95, 0, 1);
}
/* Background */
.top-site-outer,
#searchSubmit,
button.icon,
button.close-button {
transition: background 1.5s var(--animation-easing-function);
}
.top-site-outer:hover,
#searchSubmit:hover,
button.icon:hover,
button.close-button:hover {
transition: background 0.5s var(--animation-easing-function);
}
/* Search Bar */
.search-inner-wrapper input {
transition: 1s var(--animation-easing-function);
transition-property: border-color, box-shadow;
}
.search-wrapper .search-inner-wrapper:active input,
.search-wrapper input:focus {
transition: border-color 0.5s var(--animation-easing-function), box-shadow 1s var(--animation-easing-function);
}
@supports -moz-bool-pref("userContent.page.field_border") {
.search-wrapper .search-inner-wrapper:hover input {
border-color: var(--newtab-primary-action-background) !important;
transition: border-color 0.5s var(--animation-easing-function);
}
}
}
}
/** Activity Stream - Pocket order to last **********************************/
@supports -moz-bool-pref("userContent.newTab.pocket_to_last") {
.body-wrapper.on {
display: flex;
flex-wrap: wrap;
}
.body-wrapper.on > .discovery-stream.ds-layout {
flex-basis: 100%;
}
.body-wrapper.on > .collapsible-section[data-section-id="topstories"],
.home-section > #pocket-section,
.home-section > .divider,
.home-section > div:not(.section) {
order: 2;
}
}
/** Activity Stream - Home Search Bar looks like proton *********************/
@supports -moz-bool-pref("userContent.newTab.searchbar") {
/* Dropdown Colors */
#root {
--newtab-search-background-color: rgba(255, 255, 255, 1); /* Same as light theme's --panel-background */
/* Set search dropdown background */
--newtab-search-dropdown-header-color: var(--newtab-search-background-color) !important;
--newtab-search-dropdown-color: var(--newtab-search-background-color) !important;
--newtab-element-hover-color: color-mix(in srgb, currentColor 9%, transparent) !important;
}
@media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
#root {
/* Default Dark Mode */
--newtab-search-background-color: rgba(66, 65, 77, 1); /* Same as dark theme's --panel-background */
}
}
.activity-stream[lwt-sidebar]:not([style*="--newtab-background-color: rgba(43, 42, 51, 1);"]) #root {
/* Light weight theme */
--newtab-search-background-color: var(--lwt-sidebar-background-color);
}
/* Padding */
#searchSuggestionTable {
border-radius: 4px !important;
-moz-window-shadow: cliprounded;
}
.contentSearchSuggestionTable .contentSearchOneOffItem {
width: 32px !important;
height: 32px !important;
/* Margin */
margin-block: 5px !important;
margin-inline-start: 5px !important;
margin-inline-end: 8px !important;
/* Border */
border-radius: 4px !important;
border-image: none !important; /* Original: linear-gradient(transparent 18%, var(--newtab-border-secondary-color) 18%, var(--newtab-border-secondary-color) 82%, transparent 82%) 1; */
border-inline-end: none !important; /* Original: 1px solid; */
}
#contentSearchSettingsButton::before {
content: url("chrome://global/skin/icons/settings.svg") !important;
display: -moz-inline-box;
/* Color */
-moz-context-properties: fill, fill-opacity !important;
fill: currentColor !important;
/* Align */
margin-inline-end: 5px;
vertical-align: -25%;
}
/* Pointer */
.contentSearchSuggestionTable .contentSearchOneOffItem,
#contentSearchSettingsButton {
cursor: pointer;
}
/*- Fix Color For Nightly ------------------------------------------------*/
.contentSearchSuggestionTable,
.contentSearchHeaderRow,
.contentSearchHeader,
.contentSearchSuggestionsContainer {
color: var(--newtab-text-primary-color) !important;
background: var(--newtab-search-background-color) !important;
}
.contentSearchSuggestionTable .contentSearchSuggestionRow.selected,
.contentSearchSuggestionTable .contentSearchSettingsButton:hover {
color: var(--newtab-text-primary-color) !important;
}
.contentSearchSuggestionTable .contentSearchSuggestionRow.selected,
.contentSearchSuggestionTable .contentSearchSettingsButton:hover,
.contentSearchSuggestionTable .contentSearchOneOffItem.selected {
background: var(--newtab-element-hover-color) !important;
}
.contentSearchSuggestionTable .contentSearchSuggestionRow.selected:active,
.contentSearchSuggestionTable .contentSearchOneOffItem:active {
background: var(--newtab-element-active-color) !important;
}
.contentSearchSuggestionTable .contentSearchSuggestionRow.selected .historyIcon {
fill: var(--newtab-icon-secondary-color) !important;
}
}
}
/** Error Page - Restore illustrations ****************************************/
@supports -moz-bool-pref("userContent.page.illustration") {
@-moz-document url-prefix("about:neterror"),
url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml"),
url("about:sessionrestore"), url("chrome://browser/content/aboutSessionRestore.xhtml")
{
/* Illustrations Position */
#errorPageContainer,
.neterror > .container,
.description-wrapper {
min-height: 300px;
background-position: left center;
background-repeat: no-repeat;
background-size: 38%;
background-image: var(--uc-error-llustration);
}
#errorPageContainer {
display: flex;
flex-direction: column;
}
.description-wrapper {
padding-inline-start: 38%;
}
/* Container */
.container {
min-width: var(--in-content-container-min-width); /* 13em */
max-width: var(--in-content-container-max-width); /* 52em */
}
/* Text Position */
#text-container {
margin: auto;
padding-inline-start: 38%;
}
}
@-moz-document url-prefix("about:neterror?e=connectionFailure"),
url-prefix("about:neterror?e=netInterrupt"),
url-prefix("about:neterror?e=netReset"),
url-prefix("about:neterror?e=netTimeout"),
url-prefix("about:neterror?e=netOffline"),
url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml")
{
:root {
--uc-error-llustration: url(../icons/error-connection-failure.svg);
}
}
@-moz-document url-prefix("about:neterror?e=dnsNotFound") {
:root {
--uc-error-llustration: url(../icons/error-server-not-found.svg);
}
}
@-moz-document url-prefix("about:neterror?e=blockedByPolicy"),
url-prefix("about:neterror?e=deniedPortAccess"),
url-prefix("about:neterror?e=malformedURI") {
:root {
--uc-error-llustration: url(chrome://browser/skin/illustrations/error-malformed-url.svg);
}
}
@-moz-document url-prefix("about:neterror?e=clockSkewError"),
url-prefix("about:neterror?e=nssFailure") {
:root {
--uc-error-llustration: url(../icons/blue-berror.svg);
}
#errorPageContainer,
.neterror > .container {
background-size: 18.5em;
}
}
@-moz-document url("about:sessionrestore"), url("chrome://browser/content/aboutSessionRestore.xhtml")
{
:root {
--uc-error-llustration: url(../icons/error-session-restore.svg);
}
}
@-moz-document url-prefix("about:neterror?e=fileNotFound") {
@media (min-width: 970px) {
.title {
background-image: url("chrome://global/skin/icons/info.svg") !important;
}
}
#text-container {
padding-inline-start: 0;
}
}
@-moz-document url-prefix("about:tabcrashed") {
@media (min-width: 970px) {
.title {
background-image: url("chrome://browser/skin/tab-crashed.svg") !important;
}
}
}
@-moz-document url("about:robots"), url("chrome://browser/content/aboutRobots.xhtml")
{
@media (min-width: 970px) {
.title {
background-image: url("chrome://browser/content/aboutRobots-icon.png") !important;
}
}
}
@-moz-document url("about:welcomeBack"), url("chrome://browser/content/aboutWelcomeBack.xhtml")
{
@media (min-width: 970px) {
.title {
background-image: url("../icons/welcome-back.svg") !important;
}
}
}
}
/** Fully Dark Mode ***********************************************************/
/*= Fully Dark Mode - Dark Mode Colors =======================================*/
@supports -moz-bool-pref("userContent.page.proton_color") {
@-moz-document url-prefix("about:"),
url-prefix("chrome://browser/content/places/places.xhtml"),
url-prefix("https://addons.mozilla.org"),
url-prefix("https://support.mozilla.org"),
url-prefix("https://accounts.firefox.com"),
url-prefix("view-source"),
regexp("^(((jar:)?file:///)|(chrome://)).*/$")
{
/*= Default Colors - Hard Coded ==============================================*/
/* Based on chrome://global/skin/in-content/common.css */
:host,
:root {
--in-content-page-color: rgb(21, 20, 26);
--in-content-page-background: #fff;
--in-content-text-color: var(--in-content-page-color);
--in-content-deemphasized-text: rgb(91, 91, 102);
--in-content-box-background: #fff;
--in-content-box-background-odd: rgba(12, 12, 13, 0.05); /* grey 90 a05 */
--in-content-box-border-color: color-mix(in srgb, currentColor 41%, transparent);
--in-content-box-info-background: #f0f0f4;
--in-content-item-hover: color-mix(in srgb, var(--in-content-primary-button-background) 20%, transparent);
--in-content-item-hover-text: var(--in-content-page-color);
--in-content-item-selected: var(--in-content-primary-button-background);
--in-content-item-selected-text: var(--in-content-primary-button-text-color);
--in-content-icon-color: rgb(91, 91, 102);
--in-content-accent-color: #0a84ff;
--in-content-accent-color-active: #0060df;
--in-content-border-hover: var(--grey-90-a50);
--in-content-border-invalid: var(--red-50);
--in-content-border-color: #d7d7db;
--in-content-error-text-color: #c50042;
--in-content-link-color: var(--blue-60);
--in-content-link-color-hover: var(--blue-70);
--in-content-link-color-active: var(--blue-80);
--in-content-link-color-visited: var(--blue-60);
/* button background states are also used for checkboxes and radio buttons */
--in-content-button-text-color: var(--in-content-text-color);
--in-content-button-text-color-hover: var(--in-content-text-color);
--in-content-button-background: rgba(207, 207, 216, 0.33);
--in-content-button-background-hover: rgba(207, 207, 216, 0.66);
--in-content-button-background-active: rgb(207, 207, 216);
--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-background: #0061e0;
--in-content-primary-button-background-hover: #0250bb;
--in-content-primary-button-background-active: #053e94;
--in-content-danger-button-background: #e22850;
--in-content-danger-button-background-hover: #c50042;
--in-content-danger-button-background-active: #810220;
--in-content-focus-outline-color: var(--in-content-primary-button-background);
/* Note: 1px smaller than we want because we have a 1px transparent border. */
/* Once proton ships, these can probably stop being variables. */
--in-content-button-border-radius: 4px;
--in-content-button-horizontal-padding: 15px;
--in-content-button-vertical-padding: 7px;
--in-content-table-background: #f8f8fa;
--in-content-table-border-color: var(
--in-content-box-border-color
); /* Legacy: #d1d1d1; rgba(249, 249, 250, 0.2) */
--in-content-table-border-dark-color: var(--in-content-table-border-color);
--in-content-table-header-background: var(
--in-content-primary-button-background
); /* Legacy: #0a84ff; rgb(5, 64, 150); */
--in-content-table-header-color: var(
--in-content-primary-button-text-color
); /* Legacy: #ffffff; var(--in-content-page-color); */
--in-content-sidebar-width: 240px;
--dialog-warning-text-color: var(--red-60);
--checkbox-border-color: var(--in-content-box-border-color);
--checkbox-unchecked-bgcolor: var(--in-content-button-background);
--checkbox-unchecked-hover-bgcolor: var(--in-content-button-background-hover);
--checkbox-unchecked-active-bgcolor: var(--in-content-button-background-active);
--checkbox-checked-bgcolor: var(--in-content-primary-button-background);
--checkbox-checked-color: var(--in-content-primary-button-text-color);
--checkbox-checked-border-color: transparent;
--checkbox-checked-hover-bgcolor: var(--in-content-primary-button-background-hover);
--checkbox-checked-active-bgcolor: var(--in-content-primary-button-background-active);
--blue-40: #45a1ff;
--blue-50: #0a84ff;
--blue-60: #0060df;
--blue-70: #003eaa;
--blue-80: #002275;
--grey-30: #d7d7db;
--grey-60: #4a4a4f;
--grey-90-a10: rgba(12, 12, 13, 0.1);
--grey-90-a20: rgba(12, 12, 13, 0.2);
--grey-90-a30: rgba(12, 12, 13, 0.3);
--grey-90-a50: rgba(12, 12, 13, 0.5);
--grey-90-a60: rgba(12, 12, 13, 0.6);
--green-50: #30e60b;
--green-60: #12bc00;
--green-70: #058b00;
--green-80: #006504;
--green-90: #003706;
--orange-50: #ff9400;
--red-40: #ff4f5e;
--red-50: #ff0039;
--red-60: #d70022;
--red-70: #a4000f;
--red-80: #5a0002;
--red-90: #3e0200;
--yellow-50: #ffe900;
--yellow-60: #d7b600;
--yellow-60-a30: rgba(215, 182, 0, 0.3);
--yellow-70: #a47f00;
--yellow-80: #715100;
--yellow-90: #3e2800;
--shadow-10: 0 1px 4px var(--grey-90-a10);
--shadow-30: 0 4px 16px var(--grey-90-a10);
--card-padding: 16px;
--card-shadow: var(--shadow-10);
--card-outline-color: var(--grey-30);
--card-shadow-hover: var(--card-shadow), 0 0 0 5px var(--card-outline-color);
}
@media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
:host,
:root {
/* Keep these in sync with layout/base/PresShell.cpp, and plaintext.css */
--in-content-page-background: rgb(28, 27, 34);
--in-content-page-color: rgb(251, 251, 254);
--in-content-deemphasized-text: rgb(191, 191, 201);
--in-content-box-background: rgb(35, 34, 43);
--in-content-box-background-odd: rgba(249, 249, 250, 0.05);
--in-content-box-info-background: rgba(249, 249, 250, 0.15);
--in-content-border-color: rgba(249, 249, 250, 0.2);
--in-content-border-hover: rgba(249, 249, 250, 0.3);
--in-content-border-invalid: rgb(255, 132, 139);
--in-content-error-text-color: #ff9aa2;
--in-content-button-background: rgb(43, 42, 51);
--in-content-button-background-hover: rgb(82, 82, 94);
--in-content-button-background-active: rgb(91, 91, 102);
--in-content-icon-color: rgb(251, 251, 254);
--in-content-primary-button-text-color: rgb(43, 42, 51);
--in-content-primary-button-background: rgb(0, 221, 255);
--in-content-primary-button-background-hover: rgb(128, 235, 255);
--in-content-primary-button-background-active: rgb(170, 242, 255);
--in-content-danger-button-background: #ff848b;
--in-content-danger-button-background-hover: #ffbdc5;
--in-content-danger-button-background-active: #ffdfe7;
--in-content-table-background: rgb(35, 34, 43);
--in-content-table-border-dark-color: var(--in-content-box-border-color);
--in-content-accent-color: var(--in-content-primary-button-background);
--in-content-accent-color-active: var(--in-content-primary-button-background-hover);
--in-content-link-color: var(--in-content-primary-button-background);
--in-content-link-color-hover: var(--in-content-primary-button-background-hover);
--in-content-link-color-active: var(--in-content-primary-button-background-active);
--in-content-link-color-visited: var(--in-content-link-color);
--card-outline-color: var(--grey-60);
--dialog-warning-text-color: var(--red-40);
}
}
@supports -moz-bool-pref("userContent.page.proton_color.dark_blue_accent") {
@media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
:host,
:root {
/* Color Memo
Just refer - Photon's dark color
--button-primary-bgcolor: #0060DF;
--button-primary-hover-bgcolor: #003EAA;
--button-primary-active-bgcolor: #002275;
--lwt-brighttext-url-color: #74c0ff;
--lwt-toolbarbutton-icon-fill-attention: #45a1ff;
Just refer - Proton's light color
--in-content-accent-color: #0a84ff;
--in-content-accent-color-active: #0060df;
--in-content-primary-button-background: #0061e0;
--in-content-primary-button-background-hover: #0250bb;
--in-content-primary-button-background-active: #053e94;
--blue-40: #45a1ff; rgb(69, 161, 255)
--blue-50: #0a84ff; rgb(10, 132, 255)
--blue-60: #0060df; rgb(0, 96, 223)
--blue-70: #003eaa; rgb(0, 62, 170)
--blue-80: #002275; rgb(0, 34, 117)
Relation
lighten(#0060df, 29%): #74b0ff;
lighten(#0060df, 19.8%): #4595ff
lighten(#0060df, 8.3%): #0a74ff
#0060df
darken(#0060df, 15.5%): #003e90;
darken(#0060df, 28.1%): #002250;
*/
--blue-20: #b6d6ff; /* lighten(#0060df, 42%) - rgb(182, 214, 255), Add for link active color*/
--blue-30: #74c0ff; /* rgb(116, 192, 255), Add for active color */
}
:host,
:root {
--in-content-primary-button-text-color: var(--in-content-page-color) !important;
--in-content-primary-button-background: var(--blue-60) !important;
--in-content-primary-button-background-hover: var(--blue-50) !important;
--in-content-primary-button-background-active: var(--blue-40) !important;
--in-content-focus-outline-color: var(--blue-40) !important;
--in-content-accent-color: var(--blue-40) !important;
--in-content-accent-color-active: var(--blue-30) !important;
--in-content-table-background: rgb(35, 34, 43) !important;
--in-content-table-border-color: rgba(249, 249, 250, 0.2) !important;
--in-content-table-header-background: rgb(5, 64, 150) !important;
--in-content-table-header-color: var(--in-content-page-color) !important;
--in-content-link-color: var(--blue-40) !important;
--in-content-link-color-hover: var(--blue-30) !important;
--in-content-link-color-active: var(--blue-20) !important;
--in-content-link-color-visited: var(--blue-40) !important;
}
}
}
@supports -moz-bool-pref("userContent.page.proton_color.system_accent") {
:host,
:root {
--in-content-primary-button-text-color: AccentColorText !important;
--in-content-primary-button-background: AccentColor !important;
--in-content-primary-button-background-hover: color-mix(in srgb, black 10%, AccentColor) !important;
--in-content-primary-button-background-active: color-mix(in srgb, black 20%, AccentColor) !important;
}
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
:host,
:root {
--in-content-primary-button-text-color: HighlightText !important;
--in-content-primary-button-background: Highlight !important;
--in-content-primary-button-background-hover: color-mix(in srgb, black 10%, Highlight) !important;
--in-content-primary-button-background-active: color-mix(in srgb, black 20%, Highlight) !important;
}
}
}
}
}
@supports -moz-bool-pref("userContent.page.dark_mode") {
@media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
/*= Addons.org =============================================================*/
@-moz-document url-prefix("https://addons.mozilla.org")
{
/* Basic */
.Page-content,
.SecondaryHero,
body,
main[aria-label="Content"] {
color: var(--in-content-page-color) !important;
background: var(--in-content-page-background) !important;
}
/* Text */
input,
textarea,
select,
.AutoSearchInput-query,
.AutoSearchInput-suggestions-list,
.Page-content h1,
.Page-content h2,
.SearchResult-link,
.Home-SubjectShelf-link:link,
.Home-SubjectShelf-link:visited,
.DropdownMenuItem-link a,
.DropdownMenuItem-link button,
.Select,
.Badge,
.Notice-generic,
.Notice-genericWarning,
.Notice-button,
.Paginate .Button.Paginate-item:first-child,
.Paginate .Button.Paginate-item:last-child,
.Paginate .Button.Paginate-item--current-page,
.Button--neutral,
.blog-entry-title,
.blogpost-nav * {
color: var(--in-content-text-color) !important;
}
.AutoSearchInput-suggestions-item:is(:active, :focus, :hover),
.AutoSearchInput-suggestions-item--highlighted,
.SecondaryHero-message-link,
.SecondaryHero-module-link,
.Card-contents a:not(.Button),
.Card-footer-link a,
.Card-shelf-footer-in-header a,
.SearchResult-link:is(:active, :focus, :hover),
.SearchResult:hover .SearchResult-link,
.Home-SubjectShelf-link:is(:active, :focus, :hover),
.DropdownMenuItem-link a:is(:active, :focus, :hover),
.DropdownMenuItem-link button:is(:active, :focus, :hover),
.AddonMeta .MetadataCard-title a:is(:active, :hover),
.AddonMeta .MetadataCard-title a.AddonMeta-reviews-content-link:is(:active, :hover),
.AddonMeta .MetadataCard-content a:is(:active, :hover),
.AddonMeta .MetadataCard-content a.AddonMeta-reviews-content-link:is(:active, :hover),
.Addon-summary a,
.RatingsByStar-count a:hover,
.RatingsByStar-star a:hover,
.Paginate .Button.Paginate-item:not(:first-child, :last-child, .Paginate-item--current-page),
.AddonTitle-author a,
.PermissionsCard-learn-more,
.DefinitionList a,
.ShowMoreCard-contents a,
.AddonDescription-contents a,
.AddonTitle a,
.TooltipMenu-opener,
.LanguageTools .Card-contents a,
.Button--primary,
.blog-entry-read-more-link,
.blogpost-nav-next.blogpost-nav-no-prev:hover p,
.blogpost-content-wrapper p a,
.blogpost-nav-prev:hover p,
.blogpost-nav-next:hover p {
color: var(--in-content-link-color) !important;
}
.SearchResult--meta-section,
.MetadataCard-title,
.MetadataCard-title a,
.MetadataCard-content a,
.CollectionSort-label,
.SearchResult-summary,
.AddonMeta .MetadataCard-content a.AddonMeta-reviews-content-link,
.AddonMeta .MetadataCard-title a.AddonMeta-reviews-content-link,
.PermissionsCard-subhead--optional,
.PermissionsCard-subhead--required,
.Definition-dt,
.RatingsByStar-count a,
.RatingsByStar-star a,
.Paginate-page-number,
.AddonSummaryCard-addonAverage,
.AddonReviewCard-authorByLine,
.UserReview-byLine,
.UserReview-reply-header,
.Home-heroHeader-subtitle,
.blog-entry-date,
.blogpost-breadcrumb *,
.AddonTitle-author,
.ExpandableCard-ToggleLink,
.SearchFilters-label,
.PromotedBadge-label--line {
color: var(--in-content-deemphasized-text) !important;
}
.PromotedBadge-label--recommended {
color: color-mix(in srgb, #712b00 15%, #ff9400) !important;
}
/* Background */
.Button--action,
.DevHub-Navigation ul li.DevHub-Navigation-Register .Button,
.DevHub-MyAddons-item-buttons-submit .Button {
color: var(--in-content-primary-button-text-color) !important;
background: var(--in-content-primary-button-background) !important;
}
select,
.Select,
.Button--primary,
.Button--neutral,
.Button--neutral:link,
.Notice-button,
.AMInstallButton .AMInstallButton-loading-button {
background-color: var(--in-content-button-background) !important;
}
.Button--primary:hover,
.Button--neutral.Button--micro:not(.Button--disabled):hover,
.Button--neutral:not(.Button--disabled):hover,
.Notice-button:hover {
background: var(--in-content-button-background-hover) !important;
}
.Button--action.Button--micro:not(.Button--disabled):hover,
.Button--action:not(.Button--disabled):hover,
.DevHub-Navigation ul li.DevHub-Navigation-Register .Button:hover,
.DevHub-MyAddons-item-buttons-submit .Button:hover {
background: var(--in-content-primary-button-background-hover) !important;
}
.ShowMoreCard-contents::after {
background: linear-gradient(hsla(0deg, 0%, 100%, 0), var(--in-content-table-background)) !important;
}
input,
textarea,
.AutoSearchInput-query,
.AutoSearchInput-suggestions-list,
.SecondaryHero-module,
.Card-header,
.Card-contents,
.CardList ul > li,
.AddonsCard--horizontal ul.AddonsCard-list .SearchResult-wrapper:is(:focus, :hover),
.Paginate,
.LandingPage-header,
.DropdownMenu-items,
.DropdownMenu-items::after,
.MetadataCard,
.AddonsCard-list,
.Card-footer,
.StaticAddonCard,
.blogpost-nav,
.blogpost-nav * {
background: var(--in-content-table-background) !important;
}
.Paginate .Button.Paginate-item:is(:active, :hover) {
background: var(--in-content-button-background-hover) !important;
}
.Notice-generic,
.Notice-genericWarning {
background: color-mix(
in srgb,
var(--in-content-page-background) 40%,
var(--in-content-table-background)
) !important;
}
.LanguageTools-header-row {
color: var(--in-content-table-header-color) !important;
background: var(--in-content-table-header-background) !important;
}
.LanguageTools-table.responsiveTable tbody tr:nth-child(2n) {
background-color: var(--in-content-box-background-odd) !important;
}
/* Fill */
.Icon-arrow-blue.SearchSuggestion-icon-arrow {
filter: hue-rotate(330deg) brightness(1.3) !important;
}
.SecondaryHero-module-icon {
filter: invert(85%) !important;
}
.Icon-magnifying-glass,
.Notice-icon {
filter: invert(65%) !important;
}
.PermissionsCard-learn-more .Icon,
.Permission .Icon {
filter: invert(100%) !important;
}
.Icon-heart {
filter: brightness(0) !important;
}
/* Others */
.DropdownMenu-items {
box-shadow: 0 0 2px var(--in-content-border-color) !important;
}
input,
textarea,
select {
border-color: var(--in-content-box-border-color) !important;
}
.UserProfileEdit input:disabled,
.UserProfileEdit textarea:disabled {
background-color: var(--in-content-box-background-odd) !important;
}
.AutoSearchInput-query {
border: 1px solid var(--in-content-table-background) !important;
}
.AutoSearchInput-query:is(:hover, :focus),
.UserProfileEditNotifications .UserProfileEditNotification-input:checked ~ .UserProfileEditNotification-checkbox {
border-color: var(--in-content-primary-button-background) !important;
}
.UserProfileEdit input:focus,
.UserProfileEdit textarea:focus,
.AutoSearchInput-query:focus,
.UserProfileEditNotifications .UserProfileEditNotification-input:focus ~ .UserProfileEditNotification-checkbox {
box-shadow: inset 0 0 0 1px var(--in-content-primary-button-background),
0 0 0 1px var(--in-content-primary-button-background), 0 0 0 4px rgba(0, 211, 255, 0.3) !important;
}
.PromotedBadge-link--line {
border-color: var(--in-content-deemphasized-text) !important;
}
.PromotedBadge-link--line:hover {
border-color: var(--in-content-button-background-hover) !important;
}
.blog-entry-read-more-link {
border-color: var(--in-content-link-color) !important;
}
.blogpost-nav-arrow-left .cls-1,
.blogpost-nav-arrow-right .cls-1 {
stroke: var(--in-content-text-color) !important;
}
/* /developers/ */
.DevHub-Navigation-Logo > .Logo::before {
-moz-context-properties: fill !important;
fill: var(--in-content-primary-button-background) !important;
background-image: url("../icons/addons-logo.svg") !important;
}
.DevHub-Navigation,
.DevHub-submit-addon,
.DevHub-get-involved,
.DevHub-MyAddons > * {
background: var(--in-content-page-background) !important;
color: var(--in-content-page-color) !important;
}
.DevHub-Footer {
background: var(--in-content-box-background) !important;
color: var(--in-content-page-color) !important;
}
.DevHub-callout-box {
background: var(--in-content-box-background-odd) !important;
color: var(--in-content-page-color) !important;
}
.DevHub-Navigation.scheme-light ul li a,
.DevHub-Footer-sections-header,
.DevHub-Footer-section h4,
.DevHub-Footer-section p,
.DevHub-content-copy h2 {
color: var(--in-content-page-color) !important;
}
.DevHub-content-copy p,
.DevHub-callout-box p {
color: var(--in-content-deemphasized-text) !important;
}
.DevHub-Banner a,
.DevHub-Footer a,
.DevHub-MyAddons-list a,
.DevHub-MyAddons-item-buttons-all,
.DevHub-content-copy a,
.DevHub-callout-box a {
color: var(--in-content-link-color) !important;
}
body:is(.developer-hub, .statistics) {
/* Elements */
/* .developer-hub */
/* Text */
/* .developer-hub */
/* Background */
/* Border */
/* Others */
}
body:is(.developer-hub, .statistics) #main-wrapper,
body:is(.developer-hub, .statistics) .menu-nav > ul > li > ul::after,
body:is(.developer-hub, .statistics) .menu-nav > ul > li:hover::after,
body:is(.developer-hub, .statistics) .menu-nav > ul > li > ul,
body:is(.developer-hub, .statistics) .menu-nav > ul > li > ul a,
body:is(.developer-hub, .statistics) .menu-nav em,
body:is(.developer-hub, .statistics) .primary,
body:is(.developer-hub, .statistics) .secondary,
body:is(.developer-hub, .statistics) .dashboard .listing .item {
background: var(--in-content-page-background) !important;
color: var(--in-content-page-color) !important;
}
body:is(.developer-hub, .statistics) .menu-nav > ul > li > ul a:hover,
body:is(.developer-hub, .statistics) .install-note,
body:is(.developer-hub, .statistics) .modal,
body:is(.developer-hub, .statistics) .popup {
background: var(--in-content-box-background-odd) !important;
}
body:is(.developer-hub, .statistics) .menu-nav > ul > li > ul::after,
body:is(.developer-hub, .statistics) .menu-nav > ul > li > ul {
box-shadow: 0 0 3px var(--in-content-border-color) !important;
}
body:is(.developer-hub, .statistics) #footer {
background: linear-gradient(
to bottom,
var(--in-content-page-background) 0,
var(--in-content-page-background) 123px,
#0c99d5 123px,
#0c99d5 200px,
var(--in-content-page-background) 200px,
rgba(12, 153, 213, 0) 400px
) !important;
}
body:is(.developer-hub, .statistics) #homepage h2,
body:is(.developer-hub, .statistics) header h2,
body:is(.developer-hub, .statistics) .primary h2,
body:is(.developer-hub, .statistics) h1,
body:is(.developer-hub, .statistics) hgroup h2.addon,
body:is(.developer-hub, .statistics) hgroup h2.collection,
body:is(.developer-hub, .statistics) h3,
body:is(.developer-hub, .statistics) .results h4,
body:is(.developer-hub, .statistics) .dashboard .listing .item,
body:is(.developer-hub, .statistics) .dashboard .listing .item:hover h5,
body:is(.developer-hub, .statistics) .secondary .addon-status,
body:is(.developer-hub, .statistics) .secondary .addon-status .addon-details li.addon-listed-status,
body:is(.developer-hub, .statistics) #refine-results h5,
body:is(.developer-hub, .statistics) .island.criteria li,
body:is(.developer-hub, .statistics) .two-up div {
color: var(--in-content-page-color) !important;
}
body:is(.developer-hub, .statistics) .item-actions h5,
body:is(.developer-hub, .statistics) .item-actions > ul,
body:is(.developer-hub, .statistics) .item-actions > ul > li,
body:is(.developer-hub, .statistics) .dashboard .listing .item .item-actions a,
body:is(.developer-hub, .statistics) .edit-media-details,
body:is(.developer-hub, .statistics) .devhub-form table th,
body:is(.developer-hub, .statistics) #recent-activity .listing .item .timestamp,
body:is(.developer-hub, .statistics) #upload-file .upload-status #uploadstatus,
body:is(.developer-hub, .statistics) #addon-validator-suite,
body:is(.developer-hub, .statistics) #addon-validator-suite .msg > *,
body:is(.developer-hub, .statistics) .island.criteria li a.inactive {
color: var(--in-content-deemphasized-text) !important;
}
body:is(.developer-hub, .statistics) section[role="main"] a,
body:is(.developer-hub, .statistics) header a,
body:is(.developer-hub, .statistics) .more-info,
body:is(.developer-hub, .statistics) .primary a,
body:is(.developer-hub, .statistics) .secondary a,
body:is(.developer-hub, .statistics) .submission-type-tabs a,
body:is(.developer-hub, .statistics) .popup a,
body:is(.developer-hub, .statistics) .dashboard .listing .item:hover a,
body:is(.developer-hub, .statistics) .dashboard .listing .item:hover .item-actions a,
body:is(.developer-hub, .statistics) #upload-status-results.status-pass strong,
body:is(.developer-hub, .statistics) #addon-validator-suite a,
body:is(.developer-hub, .statistics) #create-addon a,
body:is(.developer-hub, .statistics) .html-support {
color: var(--in-content-link-color) !important;
}
body:is(.developer-hub, .statistics) .dashboard .listing .item:hover a {
color: var(--in-content-link-color-hover) !important;
}
body:is(.developer-hub, .statistics) .dashboard .listing .item .item-info .downloads,
body:is(.developer-hub, .statistics) .dashboard .listing .item .item-info .price,
body:is(.developer-hub, .statistics) .dashboard .listing .item .item-info .users {
color: var(--green-60) !important;
}
body:is(.developer-hub, .statistics) .status-admin-disabled b,
body:is(.developer-hub, .statistics) .status-disabled b,
body:is(.developer-hub, .statistics) .status-incomplete b,
body:is(.developer-hub, .statistics) .status-purgatory b {
color: var(--red-60) !important;
}
body:is(.developer-hub, .statistics) .submission-type-tabs a.active,
body:is(.developer-hub, .statistics) .island.criteria li.selected a {
color: var(--orange-50) !important;
}
body:is(.developer-hub, .statistics) .secondary .addon-status,
body:is(.developer-hub, .statistics) .devhub-form .item,
body:is(.developer-hub, .statistics) #icons_default,
body:is(.developer-hub, .statistics) .listing .item,
body:is(.developer-hub, .statistics) .object-lead,
body:is(.developer-hub, .statistics) #addon-validator-suite .results .tier-results,
body:is(.developer-hub, .statistics) #addon-validator-suite .suite,
body:is(.developer-hub, .statistics) #addon-validator-suite .suite-container {
border-color: var(--in-content-border-color) !important;
background: var(--in-content-box-background) !important;
}
body:is(.developer-hub, .statistics) .highlight,
body:is(.developer-hub, .statistics) .listing-footer,
body:is(.developer-hub, .statistics) .tab-wrapper .fm-control {
color: var(--in-content-page-color) !important;
background: var(--in-content-box-info-background) !important;
}
body:is(.developer-hub, .statistics) .submission-type-tabs a,
body:is(.developer-hub, .statistics) #head-chart {
background: var(--in-content-page-background) !important;
}
body:is(.developer-hub, .statistics) #head-chart rect {
fill: var(--in-content-page-background) !important;
}
body:is(.developer-hub, .statistics) #head-chart text {
fill: var(--in-content-deemphasized-text) !important;
}
body:is(.developer-hub, .statistics) #head-chart .highcharts-legend .highcharts-legend-item:hover text {
fill: var(--in-content-page-color) !important;
paint-order: stroke !important;
stroke: var(--in-content-page-color) !important;
stroke-width: 0.4px !important;
stroke-linecap: butt !important;
stroke-linejoin: miter !important;
}
body:is(.developer-hub, .statistics)
#head-chart
.highcharts-legend
.highcharts-legend-item
path[stroke="#CCC"]
~ text {
fill: #ccc !important;
}
body:is(.developer-hub, .statistics) #icons_default li a:hover,
body:is(.developer-hub, .statistics) #side-nav .active a,
body:is(.developer-hub, .statistics) span.tip,
body:is(.developer-hub, .statistics) .addon-submission-process .tip,
body:is(.developer-hub, .statistics) .devhub-form .tip,
body:is(.developer-hub, .statistics) a.remove,
body:is(.developer-hub, .statistics) span.remove,
body:is(.developer-hub, .statistics) ul.errorlist li span.tip {
background-color: var(--in-content-box-info-background) !important;
}
body:is(.developer-hub, .statistics) a.remove:hover,
body:is(.developer-hub, .statistics) span.tip:hover {
background-color: var(--in-content-primary-button-background-hover) !important;
}
body:is(.developer-hub, .statistics) .submission-type-tabs a,
body:is(.developer-hub, .statistics) .devhub-sidebar,
body:is(.developer-hub, .statistics) .devhub-sidebar div.item,
body:is(.developer-hub, .statistics) .devhub-form .listing-footer {
border-color: var(--in-content-border-color) !important;
}
body:is(.developer-hub, .statistics) #background-wrapper,
body:is(.developer-hub, .statistics) #main-wrapper {
border-color: var(--in-content-page-background) !important;
}
body:is(.developer-hub, .statistics) .item-actions a.more-actions:hover:after,
body:is(.developer-hub, .statistics) .item-actions button.link.more-actions:hover:after,
body:is(.developer-hub, .statistics) #change-locale::after {
border-top-color: var(--in-content-link-color) !important;
}
body:is(.developer-hub, .statistics) install-note::after,
body:is(.developer-hub, .statistics) .popup::after {
border-bottom-color: var(--in-content-box-background) !important;
}
body:is(.developer-hub, .statistics) .install-note::before,
body:is(.developer-hub, .statistics) .popup::before {
border-bottom-color: grey !important;
}
body:is(.developer-hub, .statistics) #refine-results,
body:is(.developer-hub, .statistics) .other-categories,
body:is(.developer-hub, .statistics) .versions .primary > .warning {
border-color: transparent !important;
}
body:is(.developer-hub, .statistics) .results {
border-color: var(--in-content-box-background-odd) !important;
background: transparent !important;
}
body:is(.developer-hub, .statistics) .results-inner {
border-color: var(--in-content-border-color) !important;
background: var(--in-content-border-color) !important;
}
body:is(.developer-hub, .statistics) #promos .view-button a,
body:is(.developer-hub, .statistics) #upload-file-finish.button,
body:is(.developer-hub, .statistics) #upload-file-widget .button.prominent,
body:is(.developer-hub, .statistics) .button,
body:is(.developer-hub, .statistics) .cta a.button:link,
body:is(.developer-hub, .statistics) .cta a.button:visited,
body:is(.developer-hub, .statistics) .linux .button.linux,
body:is(.developer-hub, .statistics) .mac .button.mac,
body:is(.developer-hub, .statistics) .other .button.bsd,
body:is(.developer-hub, .statistics) .other .button.solaris,
body:is(.developer-hub, .statistics) .sidebar a.button,
body:is(.developer-hub, .statistics) .sidebar button,
body:is(.developer-hub, .statistics) .theme .choices button,
body:is(.developer-hub, .statistics) .theme-queue a.button,
body:is(.developer-hub, .statistics) .theme-queue button,
body:is(.developer-hub, .statistics) .windows .button.windows,
body:is(.developer-hub, .statistics) a.button:link,
body:is(.developer-hub, .statistics) a.button:visited,
body:is(.developer-hub, .statistics) a.delete-button.delete-addon,
body:is(.developer-hub, .statistics) button,
body:is(.developer-hub, .statistics) button.button,
body:is(.developer-hub, .statistics) input:not(.upvotes):not(.downvotes)[type="submit"] {
color: var(--in-content-primary-button-text-color) !important;
background: var(--in-content-primary-button-background) !important;
}
body:is(.developer-hub, .statistics) #promos .view-button a:is(.selected, :focus, :hover),
body:is(.developer-hub, .statistics) #upload-file-finish.button:is(.selected, :focus, :hover),
body:is(.developer-hub, .statistics) #upload-file-widget .button.prominent:is(.selected, :focus, :hover),
body:is(.developer-hub, .statistics) .button:is(.selected, :focus, :hover),
body:is(.developer-hub, .statistics) .cta a.button:link:is(.selected, :focus, :hover),
body:is(.developer-hub, .statistics) .cta a.button:visited:is(.selected, :focus, :hover),
body:is(.developer-hub, .statistics) .linux .button.linux:is(.selected, :focus, :hover),
body:is(.developer-hub, .statistics) .mac .button.mac:is(.selected, :focus, :hover),
body:is(.developer-hub, .statistics) .other .button.bsd:is(.selected, :focus, :hover),
body:is(.developer-hub, .statistics) .other .button.solaris:is(.selected, :focus, :hover),
body:is(.developer-hub, .statistics) .sidebar a.button:is(.selected, :focus, :hover),
body:is(.developer-hub, .statistics) .sidebar button:is(.selected, :focus, :hover),
body:is(.developer-hub, .statistics) .theme .choices button:is(.selected, :focus, :hover),
body:is(.developer-hub, .statistics) .theme-queue a.button:is(.selected, :focus, :hover),
body:is(.developer-hub, .statistics) .theme-queue button:is(.selected, :focus, :hover),
body:is(.developer-hub, .statistics) .windows .button.windows:is(.selected, :focus, :hover),
body:is(.developer-hub, .statistics) a.button:link:is(.selected, :focus, :hover),
body:is(.developer-hub, .statistics) a.button:visited:is(.selected, :focus, :hover),
body:is(.developer-hub, .statistics) a.delete-button.delete-addon:is(.selected, :focus, :hover),
body:is(.developer-hub, .statistics) button:is(.selected, :focus, :hover),
body:is(.developer-hub, .statistics) button.button:is(.selected, :focus, :hover),
body:is(.developer-hub, .statistics)
input:not(.upvotes):not(.downvotes)[type="submit"]:is(.selected, :focus, :hover) {
background: var(--in-content-primary-button-background-hover) !important;
}
body:is(.developer-hub, .statistics) .edit_with_prefix span,
body:is(.developer-hub, .statistics) .edit_with_suffix span {
border-color: var(--in-content-box-border-color) !important;
background-color: var(--in-content-box-background-odd) !important;
color: var(--in-content-deemphasized-text) !important;
padding-block: 3px !important;
cursor: not-allowed;
}
body:is(.developer-hub, .statistics) .devhub-form .item_wrapper input[type="email"] {
appearance: none !important;
padding: 2px 5px;
border: 1px solid;
}
body:is(.developer-hub, .statistics) #addon-validator-suite .suite-summary {
color: var(--in-content-deemphasized-text) !important;
background: var(--in-content-button-background) !important;
border-top-color: var(--in-content-border-color) !important;
}
body:is(.developer-hub, .statistics) #addon-validator-suite .context {
border-color: var(--in-content-box-border-color) !important;
background-color: var(--in-content-button-background) !important;
background: var(--in-content-table-background) !important;
}
}
/*= Support.org ============================================================*/
@-moz-document url-prefix("https://support.mozilla.org")
{
/* Basic */
:root {
--color-blue-06: var(--in-content-link-color) !important;
--color-blue-07: var(--in-content-link-color-hover) !important;
--color-blue-09: var(--in-content-link-color-active) !important;
--page-bg: var(--in-content-page-background) !important;
--color-white: var(--in-content-page-background) !important;
--color-shade-bg: var(--in-content-page-background) !important;
--color-marketing-gray-02: var(--card-outline-color) !important;
--color-inverse-bg: var(--in-content-page-color) !important;
--color-inverse: var(--in-content-page-background) !important;
--color-text: var(--in-content-page-color) !important;
--color-moz-text: var(--in-content-page-color) !important;
--color-moz-heading: var(--in-content-page-color) !important;
--color-text-light: var(--in-content-deemphasized-text) !important;
--color-link: var(--in-content-link-color) !important;
--color-success: var(--green-70) !important;
--color-warning: var(--yellow-80) !important;
--color-error: var(--red-60) !important;
--color-error-hover: var(--red-50) !important;
--color-moz-heading: #fff;
--color-moz-inverse-bg: var(red) !important;
--focus-shadow: 0 0 0 4px color-mix(in srgb, var(--in-content-primary-button-background) 30%, transparent),
0 0 0 2px var(--in-content-primary-button-background-active);
}
.warning {
--color-link: rgb(55, 255, 255) !important;
}
body,
#main-content,
#instant-search-content,
#mzp-c-menu-panel-help,
.mzp-c-navigation,
.kbox-container {
color: var(--in-content-page-color) !important;
background: var(--in-content-page-background) !important;
}
#editor {
border: 2px solid var(--in-content-border-color) !important;
}
.CodeMirror-linenumbers {
background: var(--in-content-table-background);
}
.CodeMirror-lines {
color: var(--in-content-deemphasized-text) !important;
background: var(--in-content-page-background) !important;
}
.CodeMirror-scroll {
background: var(--in-content-page-background) !important;
}
/* Text */
.mzp-c-menu-category .mzp-c-menu-title,
.mzp-c-menu-item .mzp-c-menu-item-link,
.mzp-c-menu-item .mzp-c-menu-item-link > *,
.mzp-c-menu-item .mzp-c-menu-item-list a,
#doc-content .menu,
.document--content .menu,
.forum--entry-content .menu,
.tag-name a {
color: var(--in-content-page-color) !important;
}
.ts-select-trigger,
input[type="date"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
select,
textarea,
#doc-content .button,
#doc-content .key,
.document--content .button,
.document--content .key,
.forum--entry-content .button,
.forum--entry-content .key {
color: var(--in-content-deemphasized-text) !important;
}
.tag-list a {
color: var(--color-marketing-gray-10) !important;
}
.tag-list a:hover,
.sidebar-nav a:hover {
color: var(--color-link) !important;
}
.tag-list li {
background: var(--in-content-page-color) !important;
}
.tag-list li:hover {
background: var(--in-content-deemphasized-text) !important;
}
#remaining-characters {
color: var(--in-content-page-color) !important;
}
/* Background */
.sidebar-nav.topics,
.sidebar-nav.topics > li {
background: var(--in-content-page-background) !important;
}
.mzp-c-menu-panel {
color: var(--in-content-page-color) !important;
background: var(--in-content-page-background) !important;
}
.mzp-c-menu-list-list,
.mzp-c-menu-list-list:hover {
color: var(--in-content-page-color) !important;
background: var(--in-content-box-background) !important;
}
.mzp-c-menu-list-item:focus,
.mzp-c-menu-list-item:hover {
background: var(--in-content-button-background-hover) !important;
}
.cm-bold {
color: var(--in-content-page-color) !important;
}
/* Fill */
.sumo-nav--logo,
.sumo-nav--search-button,
.sumo-nav--toggle-button,
.card:not(.is-inverse) .card--icon-sm,
.mzp-c-menu-item-icon,
.mzp-c-menu-button-close,
.topic-article--icon,
.card--topic > .card--icon,
.mzp-c-details .is-summary button::before,
details .is-summary button::before,
summary::before,
.icon-button > button,
.search-button {
filter: invert(95%) !important;
}
button.markup-toolbar-button {
/*using 0.5 because in middle*/
filter: invert(0.5) !important;
}
/* Others */
.support-callouts > .card.is-inverse {
background: #20133a !important;
}
.support-callouts > .card.is-inverse :is(h1, h2, h3, h4, h5, h6, li, p) {
color: var(--in-content-page-color) !important;
}
.sumo-button.secondary-button {
border-color: transparent !important;
}
.mzp-c-menu-panel {
border-color: var(--in-content-button-background-hover) !important;
}
.mzp-c-menu-item:is(:focus, :hover, :active) .mzp-c-menu-item-link .mzp-c-menu-item-title {
border-color: var(--in-content-page-color) !important;
}
@media screen and (-moz-toolbar-prefers-color-scheme: dark) and (min-width: 768px),
screen and (prefers-color-scheme: dark) and (min-width: 768px) {
.mzp-c-menu-panel {
box-shadow: 0 16px 16px -16px rgba(255, 255, 255, 0.3) !important;
}
}
.card--product,
.card--topic,
.card--article {
box-shadow: 0 5px 10px -3px rgba(249, 249, 250, 0.12), 0 3px 16px 2px rgba(91, 91, 102, 0.12),
0 8px 12px 1px rgba(82, 82, 94, 0.04) !important;
}
}
/*= Accounts.com ===========================================================*/
@-moz-document url-prefix("https://accounts.firefox.com")
{
/* Basic */
body {
color: var(--in-content-page-color) !important;
background: var(--in-content-page-background) !important;
}
.button.primary-button,
.button[type="submit"]:not(.secondary-button),
.settings-button.primary-button,
.settings-button[type="submit"]:not(.secondary-button),
button.primary-button,
button[type="submit"]:not(.secondary-button) {
color: var(--in-content-primary-button-text-color) !important;
background: var(--in-content-primary-button-background) !important;
}
/* Text */
header h1,
.info,
.info a,
.prefillEmail,
.faint a:hover,
.cta-neutral:hover {
color: var(--in-content-page-color) !important;
}
#main-content.panel a,
.links a,
.link-blue,
.text-blue-500 {
color: var(--in-content-link-color) !important;
}
.link-blue:hover {
color: var(--in-content-link-color-hover) !important;
}
.signed-in-email-message,
.verification-email-message,
.verification-message,
.verification-recovery-code-message,
.verification-totp-message,
.input-row input[type="email"],
.input-row input[type="number"],
.input-row input[type="password"],
.input-row input[type="tel"],
.input-row input[type="text"],
.input-row input::placeholder,
.input-text,
.firefox-family-services > ul > .firefox-service,
.faint,
.faint a,
.text-grey-400 {
color: var(--in-content-deemphasized-text) !important;
}
/* Background */
.flex .flex-wrap {
background: var(--in-content-page-background);
}
.password-row .show-password-label {
background-color: unset !important;
}
#main-content,
.modal,
.firefox-family-services,
.input-row input[type="email"],
.input-row input[type="number"],
.input-row input[type="password"],
.input-row input[type="tel"],
.input-row input[type="text"],
.input-text,
header,
.card,
.bg-white:not(nav) {
background: var(--in-content-box-background) !important;
}
#suggest-sync,
.cta-neutral {
background: var(--in-content-button-background) !important;
}
.cta-neutral:hover,
.bg-grey-50:hover,
.hover\:bg-grey-100:hover {
background: var(--in-content-button-background-hover) !important;
}
.text-blue-500 .cta-neutral,
.text-blue-500 .bg-grey-50,
.text-blue-500 .hover\:bg-grey-100 {
background: var(--in-content-button-background) !important;
}
.hover\:bg-grey-200:hover {
background: var(--in-content-button-background-active) !important;
}
.button.primary-button:hover:enabled,
.button[type="submit"]:not(.secondary-button):hover:enabled,
.settings-button.primary-button:hover:enabled,
.settings-button[type="submit"]:not(.secondary-button):hover:enabled,
button.primary-button:hover:enabled,
button[type="submit"]:not(.secondary-button):hover:enabled {
background: var(--in-content-primary-button-background-hover) !important;
}
.tooltip,
.tooltip::before {
background: var(--in-content-danger-button-background) !important;
}
/* Fill */
.dismiss,
#about-mozilla,
.show-password-label,
footer a[data-testid="link-mozilla"] {
filter: invert(95%) !important;
}
header button svg,
header .rounded svg,
#service svg {
filter: brightness(15) !important;
}
button.relative,
#fxa-settings nav svg {
filter: brightness(2) !important;
}
/* Others */
.input-row input[type="email"],
.input-row input[type="number"],
.input-row input[type="password"],
.input-row input[type="tel"],
.input-row input[type="text"],
.unit-row-hr .border-grey-100 {
border-color: var(--in-content-border-color) !important;
}
.input-row input[type="email"]:hover,
.input-row input[type="number"]:hover,
.input-row input[type="password"]:hover,
.input-row input[type="tel"]:hover,
.input-row input[type="text"]:hover {
border-color: var(--in-content-border-hover) !important;
}
#main-content {
box-shadow: 0 12px 18px 2px rgba(249, 249, 250, 0.12), 0 6px 22px 4px rgba(91, 91, 102, 0.12),
0 6px 10px -4px rgba(82, 82, 94, 0.04) !important;
}
.input-row input[type="email"]:focus,
.input-row input[type="number"]:focus,
.input-row input[type="password"]:focus,
.input-row input[type="tel"]:focus,
.input-row input[type="text"]:focus {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--in-content-primary-button-background-hover) 80%, transparent) !important;
}
}
}
}
/** Fully Proton Mode *********************************************************/
@supports -moz-bool-pref("userContent.page.proton") {
/*= Common contents ==========================================================*/ /*= abouts' common ===========================================================*/
@-moz-document url-prefix("about:plugins"),
url-prefix("about:cache"),
url-prefix("about:checkerboard"),
url-prefix("about:sync-log"),
url-prefix("about:memory"),
regexp("^(((jar:)?file:///)|(chrome://)).*/$")
{
/* Base */
html,
body {
font: message-box !important;
appearance: none !important;
background-color: var(--in-content-page-background) !important;
color: var(--in-content-page-color) !important;
}
body {
font-size: 15px !important;
font-weight: normal !important;
margin: 0 !important;
}
h1 {
line-height: 1.2 !important;
}
h2 {
line-height: 1.4em !important;
}
/* Link */
a {
color: var(--in-content-link-color) !important;
}
a:hover,
.text-link:hover {
color: var(--in-content-link-color-hover) !important;
text-decoration: underline !important;
}
a:visited {
color: var(--in-content-link-color-visited) !important;
}
a:hover:active,
.text-link:hover:active {
color: var(--in-content-link-color-active) !important;
}
a:-moz-focusring,
.text-link:-moz-focusring {
outline: 2px solid var(--in-content-focus-outline-color) !important;
outline-offset: 1px !important;
border-radius: 4px !important;
}
/* Button */
button {
font: inherit;
}
button,
select,
input[type="color"] {
appearance: none !important;
min-height: 32px !important;
color: var(--in-content-button-text-color, inherit) !important;
border: 1px solid transparent !important; /* shows up in high-contrast mode */
border-radius: var(--in-content-button-border-radius) !important;
background-color: var(--in-content-button-background) !important;
font-weight: 400 !important;
padding: var(--in-content-button-vertical-padding) var(--in-content-button-horizontal-padding) !important;
text-decoration: none !important;
margin: 4px 8px !important;
/* Ensure font-size isn't overridden by widget styling (e.g. in forms.css) */
font-size: 1em !important;
}
button {
font-weight: 600 !important;
/* Use the same margin of other elements for the alignment */
margin-inline: 4px !important;
min-width: 6.3em !important;
}
/* Medium and small buttons get sized to 7/14 and 6/12px padding (when adding
* the 1px border): */
button.medium {
--in-content-button-vertical-padding: 6px;
--in-content-button-horizontal-padding: 13px;
min-height: 28px !important;
font-size: 0.95em !important;
}
button.small {
--in-content-button-vertical-padding: 5px;
--in-content-button-horizontal-padding: 11px;
min-height: 24px !important;
font-size: 0.9em !important;
}
::-moz-focus-inner {
border: none !important;
}
button:-moz-focusring {
box-shadow: none !important;
outline: 2px solid var(--in-content-focus-outline-color) !important;
outline-offset: 2px !important;
}
button:enabled:hover,
input[type="color"]:hover {
background-color: var(--in-content-button-background-hover) !important;
color: var(--in-content-button-text-color-hover) !important;
border-color: transparent !important;
}
button:enabled:hover:active,
input[type="color"]:enabled:hover:active {
background-color: var(--in-content-button-background-active) !important;
}
button:disabled,
input[type="color"]:disabled {
opacity: 0.4 !important;
}
button[autofocus],
button[type="submit"],
button.primary {
background-color: var(--in-content-primary-button-background) !important;
color: var(--in-content-primary-button-text-color) !important;
}
button[autofocus]:enabled:hover,
button[type="submit"]:enabled:hover,
button.primary:enabled:hover {
background-color: var(--in-content-primary-button-background-hover) !important;
color: var(--in-content-primary-button-text-color-hover) !important;
}
button[autofocus]:enabled:hover:active,
button[type="submit"]:enabled:hover:active,
button.primary:enabled:hover:active {
background-color: var(--in-content-primary-button-background-active) !important;
}
/* Checkbox */
input[type="checkbox"] {
margin-block: 2px !important;
}
input[type="checkbox"] {
appearance: none !important;
height: 16px !important;
width: 16px !important;
border: 1px solid var(--checkbox-border-color) !important;
background-color: var(--checkbox-unchecked-bgcolor) !important;
border-radius: 2px !important;
margin-inline: 0 6px !important;
flex-shrink: 0 !important; /* avoid shrinking inside flex container */
}
input[type="checkbox"]:enabled:hover {
background-color: var(--checkbox-unchecked-hover-bgcolor) !important;
}
input[type="checkbox"]:enabled:hover:active {
background-color: var(--checkbox-unchecked-active-bgcolor) !important;
}
input[type="checkbox"]:checked {
border-color: var(--checkbox-checked-border-color) !important;
background-color: var(--checkbox-checked-bgcolor) !important;
background-image: url("chrome://global/skin/icons/check.svg") !important;
background-position: center !important;
background-repeat: no-repeat !important;
-moz-context-properties: fill !important;
fill: currentColor !important;
color: var(--checkbox-checked-color) !important;
/* Style the button also when printing with "Print Backgrounds" unchecked */
color-adjust: exact !important;
}
input[type="checkbox"]:enabled:checked:hover {
background-color: var(--checkbox-checked-hover-bgcolor) !important;
}
input[type="checkbox"]:enabled:checked:hover:active {
background-color: var(--checkbox-checked-active-bgcolor) !important;
}
/* Textarea */
input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]),
textarea {
appearance: none !important;
border: 1px solid var(--in-content-box-border-color) !important;
border-radius: 4px !important;
color: inherit !important;
background-color: var(--in-content-box-background) !important;
}
input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]),
textarea {
font-family: inherit !important;
font-size: inherit !important;
padding: 8px !important;
margin: 2px 4px !important;
}
input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):focus,
textarea:focus,
search-textbox[focused],
tree:focus-visible,
richlistbox:focus-visible {
border-color: transparent !important;
outline: 2px solid var(--in-content-focus-outline-color) !important;
outline-offset: -1px !important; /* Prevents antialiasing around the corners */
}
input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):-moz-ui-invalid,
textarea:-moz-ui-invalid {
border-color: transparent !important;
outline: 2px solid var(--in-content-border-invalid) !important;
outline-offset: -1px !important; /* Prevents antialiasing around the corners */
}
input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):disabled,
textarea:disabled,
search-textbox[disabled="true"] {
opacity: 0.4 !important;
}
/* Table */
table {
width: 100% !important;
}
}
@-moz-document url-prefix("about:plugins"),
url-prefix("about:cache"),
url-prefix("about:checkerboard") {
table {
border: 1px solid var(--in-content-table-border-color) !important;
border-radius: 0 !important;
}
}
@-moz-document url-prefix("about:cache"),
url-prefix("about:checkerboard") {
th,
td {
border: 1px solid var(--in-content-table-border-color) !important;
}
th {
background-color: var(--in-content-table-header-background) !important;
color: var(--in-content-table-header-color) !important;
}
}
/*= Field Border =============================================================*/
@supports -moz-bool-pref("userContent.page.field_border") {
@media (prefers-reduced-motion: no-preference) {
@-moz-document url-prefix("about:") {
html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):not(#newtab-search-text):hover,
html|textarea:hover,
xul|search-textbox:hover {
border-color: var(--in-content-focus-outline-color) !important;
transition: border-color 0.5s var(--animation-easing-function);
}
}
}
}
/*= View Source ==============================================================*/
@-moz-document url-prefix("view-source") {
:root {
background-color: var(--in-content-page-background) !important; /* Original: white */
color: var(--in-content-page-color) !important; /* Original: black */
/* Colors */
--view-source-green: var(--green-80);
--view-source-purple: #800080; /* Like alphenglow */
}
@media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
:root {
--view-source-green: var(--green-60);
--view-source-purple: #c68aff;
}
}
pre[id]::before,
span[id]::before {
color: color-mix(
in srgb,
var(--in-content-page-color) 70%,
var(--in-content-page-background)
) !important; /* Original: #ccc */
}
.highlight .start-tag,
.highlight .end-tag {
color: var(--view-source-purple) !important; /* Original: purple */
}
.highlight .comment {
color: var(--view-source-green) !important; /* Original: green */
}
.highlight .cdata {
color: var(--in-content-border-invalid) !important; /* Original: #CC0066 */
}
.highlight .doctype {
color: #4682b4 !important; /* Original: steelblue */
}
.highlight .pi {
color: orchid !important; /* Original: orchid */
}
.highlight .entity {
color: #ff4500 !important; /* Original: #FF4500 */
}
.highlight .attribute-name {
color: var(--view-source-green) !important; /* Original: black */
}
.highlight .attribute-value {
color: var(--in-content-link-color) !important; /* Original: blue */
}
.highlight .markupdeclaration {
color: #4682b4 !important; /* Original: steelblue */
}
.highlight .error,
.highlight
.error
> :-moz-any(.start-tag, .end-tag, .comment, .cdata, .doctype, .pi, .entity, .attribute-name, .attribute-value) {
color: var(--in-content-error-text-color) !important; /* Original: red */
}
}
/*= Directory View ===========================================================*/
@-moz-document url-prefix("about:sync-log"),
regexp("^(((jar:)?file:///)|(chrome://)).*/$")
{
body {
background-color: var(--in-content-box-background) !important;
margin: 4em auto !important; /* Override to default */
}
thead a {
color: var(--in-content-page-color) !important;
}
td ::before {
vertical-align: top !important;
}
}
/*= about:plugins ============================================================*/
@-moz-document url-prefix("about:plugins") {
.notice {
background: var(--in-content-box-background) !important;
border: 1px solid var(--in-content-border-color) !important;
}
}
/*= about:cache ==============================================================*/
@-moz-document url-prefix("about:cache") {
table {
padding: 0 !important;
}
th,
td {
padding: 4px !important;
text-align: match-parent !important;
}
}
/*= about:checkerboard =======================================================*/
@-moz-document url-prefix("about:checkerboard") {
#canvas {
border: 1px solid var(--in-content-border-color) !important;
}
#excludePageFromZoom {
vertical-align: bottom !important;
}
}
/*= about:memory =============================================================*/
@-moz-document url-prefix("about:memory") {
.opsRow,
.section {
background-color: var(--in-content-box-background) !important;
color: var(--in-content-page-color) !important;
}
.opsRowLabel input {
vertical-align: bottom !important;
}
}
/*= chrome://browser/content/places/places.xhtml =============================*/
@-moz-document url("chrome://browser/content/places/places.xhtml")
{
/** Library - Icons Replace *************************************************/
@supports -moz-bool-pref("userChrome.icon.library") {
/*= Standard Folder - More Visible ===========================================*/
/* on Toolbar and Menus */
:-moz-any(#PlacesToolbar, #BMB_bookmarksPopup, #bookmarksMenu)
.bookmark-item[container="true"]:not([query="true"], [tagContainer], [dayContainer]),
:-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent)
treechildren::-moz-tree-image(title, container),
#editBMPanel_folderMenuList:not([selectedGuid="toolbar_____"], [selectedGuid="menu________"]),
#editBMPanel_folderMenuList .folder-icon:not([id]),
.downloadIconShow > .button-box > .button-icon {
list-style-image: url("../icons/folder.svg") !important;
}
/* Standard Folder - Open */
:-moz-any(#PlacesToolbar, #BMB_bookmarksPopup, #bookmarksMenu)
.bookmark-item[container="true"]:not([query="true"], [tagContainer], [dayContainer])[open="true"],
:-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent)
treechildren::-moz-tree-image(title, container, open) {
list-style-image: url("../icons/folder-open.svg") !important;
}
/*= Other Folder - Inbox Icon ================================================*/
/* on Menus */
#PlacesToolbar #OtherBookmarks,
#BMB_bookmarksPopup #BMB_unsortedBookmarks,
#bookmarksMenuPopup #menu_unsortedBookmarks,
:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent)
treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks),
:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent)
treechildren::-moz-tree-image(container, queryFolder_unfiled_____),
#editBMPanel_unfiledRootItem,
#editBMPanel_folderMenuList[selectedGuid="unfiled_____"] {
list-style-image: url("../icons/mail-inbox-all.svg") !important;
}
/* Other Folder - Open */
#PlacesToolbar #OtherBookmarks[open="true"],
#BMB_bookmarksPopup #BMB_unsortedBookmarks[open="true"],
#bookmarksMenuPopup #menu_unsortedBookmarks[open="true"],
:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent)
treechildren::-moz-tree-image(container, open, OrganizerQuery_UnfiledBookmarks),
:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent)
treechildren::-moz-tree-image(container, open, queryFolder_unfiled_____) {
list-style-image: url("../icons/mail-inbox.svg") !important;
}
/*= Default Icon - Override ===================================================*/
/* https://github.com/mozilla/gecko-dev/blob/master/browser/themes/shared/places/tree-icons.css */
/* Query */
:-moz-any(#historyTree, #placesList, #placeContent) treechildren::-moz-tree-image(title, query) {
list-style-image: url("chrome://browser/skin/places/folder-smart.svg") !important;
}
/* History */
:-moz-any(#historyTree, #placesList, #placeContent) treechildren::-moz-tree-image(title, query, dayContainer),
:-moz-any(#historyTree, #placesList, #placeContent)
treechildren::-moz-tree-image(query, OrganizerQuery_history____v) {
list-style-image: url("chrome://browser/skin/history.svg") !important;
}
/* Downloads */
:-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, OrganizerQuery_downloads__v) {
list-style-image: url("chrome://browser/skin/downloads/downloads.svg") !important;
}
/* Tag */
:-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(title, query, tagContainer),
:-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, OrganizerQuery_tags_______v) {
list-style-image: url("chrome://browser/skin/places/tag.svg") !important;
}
/* Bookmark */
:-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, OrganizerQuery_allbms_____v) {
list-style-image: url("chrome://browser/skin/bookmark.svg") !important;
}
/* Bookmark Toolbar */
#BMB_bookmarksPopup #BMB_bookmarksToolbar,
#bookmarksMenuPopup #bookmarksToolbarFolderMenu,
:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent)
treechildren::-moz-tree-image(container, queryFolder_toolbar_____) {
list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.svg") !important;
}
/* Bookmark Menu */
:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent)
treechildren::-moz-tree-image(container, queryFolder_menu________) {
list-style-image: url("chrome://browser/skin/places/bookmarksMenu.svg") !important;
}
/*= Default Icon - Open ======================================================*/
/* Query */
:-moz-any(#PlacesToolbar, #BMB_bookmarksPopup, #bookmarksMenu)
.bookmark-item[container="true"][query="true"]:not([tagContainer])[open="true"]
> .menu-iconic-left
> .menu-iconic-icon {
transform: rotate(15deg) !important;
}
/* History */
:-moz-any(#historyTree, #placesList, #placeContent)
treechildren::-moz-tree-image(title, query, open, dayContainer),
:-moz-any(#historyTree, #placesList, #placeContent)
treechildren::-moz-tree-image(query, open, OrganizerQuery_history____v) {
list-style-image: url("../icons/history-reverse.svg") !important;
}
/* Tag */
:-moz-any(#PlacesToolbar, #BMB_bookmarksPopup, #bookmarksMenu)
.bookmark-item[container="true"][tagContainer="true"][open="true"],
:-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(title, query, open, tagContainer),
:-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, open, OrganizerQuery_tags_______v) {
list-style-image: url("../icons/tag-open.svg") !important;
}
/* Bookmark */
:-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, open, OrganizerQuery_allbms_____v) {
list-style-image: url("chrome://browser/skin/bookmark-hollow.svg") !important;
}
/* Bookmark Toolbar */
#BMB_bookmarksPopup #BMB_bookmarksToolbar[open="true"],
#bookmarksMenuPopup #bookmarksToolbarFolderMenu[open="true"],
:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent)
treechildren::-moz-tree-image(container, open, queryFolder_toolbar_____) {
list-style-image: url("../icons/bookmarksToolbar-open.svg") !important;
}
/* Bookmark Menu */
:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent)
treechildren::-moz-tree-image(container, open, queryFolder_menu________) {
list-style-image: url("../icons/bookmarksMenu-open.svg") !important; /* or bookmarksMenu-open2.svg" */
}
/*= Menubar - Icons ==========================================================*/
#organizeButton,
#viewMenu,
#maintenanceButton,
#back-button,
#forward-button,
#clearDownloadsButton {
fill: currentColor !important;
-moz-context-properties: fill, fill-opacity, stroke !important;
}
/* Add */
#organizeButton {
list-style-image: url("chrome://global/skin/icons/settings.svg") !important;
}
#viewMenu {
list-style-image: url("../icons/sort.svg") !important;
}
#maintenanceButton {
list-style-image: url("../icons/import-export.svg") !important;
}
#clearDownloadsButton {
list-style-image: url("chrome://global/skin/icons/delete.svg") !important;
}
#clearDownloadsButton > .toolbarbutton-icon {
display: -moz-inline-box !important;
margin-top: 0;
margin-bottom: 0;
margin-inline-start: 0;
margin-inline-end: 2px;
}
/* Replace */
#back-button {
list-style-image: url("chrome://browser/skin/back.svg") !important;
}
#forward-button {
list-style-image: url("chrome://browser/skin/forward.svg") !important;
}
#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
#forward-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
transform: scaleX(-1) !important;
}
}
@media (-moz-gtk-csd-available) {
/*= Layout Fixes =========================================================*/
menupopup menu {
padding-block: 4px;
}
.menu-right {
width: 16px !important; /* Original: 1ex */
background-image: url("chrome://global/skin/icons/arrow-right.svg");
background-position: right center;
}
/*= Proton ===============================================================*/
@supports -moz-bool-pref("userContent.page.proton") {
:root {
--organizer-color: -moz-DialogText;
--organizer-deemphasized-color: GrayText;
--organizer-toolbar-background: -moz-Dialog;
--organizer-pane-background: -moz-Dialog;
--organizer-content-background: -moz-Dialog;
--organizer-hover-background: SelectedItem;
--organizer-hover-color: SelectedItemText;
--organizer-selected-background: SelectedItem;
--organizer-selected-color: SelectedItemText;
--organizer-outline-color: SelectedItem;
--organizer-separator-color: ThreeDDarkShadow;
--organizer-border-color: ThreeDShadow;
--organizer-toolbar-field-background: Field;
--organizer-toolbar-field-background-focused: Field;
--organizer-toolbar-field-border-color: ThreeDShadow;
--organizer-toolbar-field-focus-border-color: var(--organizer-outline-color);
--organizer-toolbar-field-focus-box-shadow: unset;
--organizer-pane-field-border-color: ThreeDShadow;
}
@media not all and (prefers-contrast) {
:root {
--organizer-color: var(--in-content-page-color);
--organizer-deemphasized-color: var(--in-content-deemphasized-text);
--organizer-toolbar-background: rgb(249, 249, 251); /* --toolbar-bgcolor */
--organizer-pane-background: rgb(229, 229, 235); /* --lwt-accent-color */
--organizer-content-background: var(--in-content-page-background);
--organizer-hover-background: var(--in-content-button-background-hover);
--organizer-hover-color: var(--organizer-color);
--organizer-selected-background: var(--in-content-button-background-active);
--organizer-selected-color: var(--organizer-color);
--organizer-outline-color: var(--in-content-focus-outline-color);
--organizer-separator-color: var(--organizer-pane-field-border-color);
--organizer-border-color: var(--in-content-border-color);
--organizer-toolbar-field-background: rgb(240, 240, 244); /* --lwt-accent-color */
--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
);
--organizer-toolbar-field-focus-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.23);
--organizer-pane-field-border-color: color-mix(in srgb, currentColor 41%, transparent);
}
@media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
:root {
--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-hover-background: rgb(82, 82, 94);
--organizer-selected-background: rgb(91, 91, 102);
--organizer-toolbar-field-background: var(--in-content-page-background);
--organizer-toolbar-field-background-focused: rgb(66, 65, 77);
scrollbar-color: rgba(249, 249, 250, 0.4) rgba(20, 20, 25, 0.3);
}
}
}
/*- Toolbar & Menus ------------------------------------------------------*/
#placesToolbar {
appearance: none !important;
background-color: var(--organizer-toolbar-background) !important;
color: var(--organizer-color) !important;
border-bottom: 1px solid var(--organizer-border-color) !important;
padding: 4px !important;
padding-inline-end: 6px !important;
}
#placesToolbar > toolbarbutton {
appearance: none !important;
padding: 5px !important;
border-radius: 4px !important;
}
#placesToolbar > toolbarbutton[disabled] {
opacity: 0.6 !important;
}
#placesToolbar > toolbarbutton:not([disabled]):hover {
background-color: var(--organizer-hover-background) !important;
color: var(--organizer-hover-color) !important;
}
#placesToolbar > toolbarbutton:not([disabled]):hover:active {
background-color: var(--organizer-selected-background) !important;
}
#placesToolbar > toolbarbutton > .toolbarbutton-icon,
#placesMenu > menu > image,
#placesMenu > menu > .menubar-text {
-moz-context-properties: fill !important;
fill: currentColor !important;
}
#placesMenu {
margin-inline-start: 6px !important;
}
#placesMenu > menu {
appearance: none !important;
color: var(--organizer-color) !important;
border-radius: 4px !important;
padding-block: 5px !important;
padding-inline-start: 5px !important;
margin-inline-end: 2px !important;
}
#placesMenu > menu[_moz-menuactive="true"],
#placesMenu > menu:hover {
background-color: var(--organizer-hover-background) !important;
color: var(--organizer-hover-color) !important;
}
#placesMenu > menu:hover:active,
#placesMenu > menu[open] {
background-color: var(--organizer-selected-background) !important;
color: var(--organizer-selected-color) !important;
}
#placesMenu > menu > .menubar-text {
margin-block: 0 !important; /* override menu.css */
padding-inline-end: 4px !important;
}
/*- Search Bar & Input ---------------------------------------------------*/
#searchFilter,
#detailsPane html|input {
appearance: none !important;
background-color: var(--organizer-toolbar-field-background) !important;
color: var(--organizer-color) !important;
border: 1px solid var(--organizer-toolbar-field-border-color) !important;
border-radius: 4px !important;
margin: 0 !important;
padding-block: 2px !important;
min-height: 24px !important;
}
#searchFilter[focused] {
box-shadow: var(--organizer-toolbar-field-focus-box-shadow) !important;
background-color: var(--organizer-toolbar-field-background-focused) !important;
border-color: transparent !important;
outline: 2px solid var(--organizer-toolbar-field-focus-border-color) !important;
outline-offset: -2px !important;
}
/*- Sidebar & Splitter ---------------------------------------------------*/
#placesList {
background-color: var(--organizer-pane-background) !important;
}
#placesView > splitter {
border: 0 !important;
border-inline-end: 1px solid var(--organizer-border-color) !important;
min-width: 0 !important;
width: 3px !important;
background-color: transparent !important;
margin-inline-start: -3px !important;
position: relative !important;
}
/*- Downloads Pane -------------------------------------------------------*/
#downloadsRichListBox,
#downloadsListBox {
color: var(--organizer-color) !important;
background-color: var(--organizer-content-background) !important;
}
#clearDownloadsButton:focus-visible {
outline: 2px solid var(--organizer-outline-color) !important;
}
richlistitem[selected="true"],
richlistitem:hover {
background-color: var(--organizer-hover-background) !important;
color: var(--organizer-color) !important;
}
richlistbox:where(:focus) > richlistitem[selected="true"] {
background-color: var(--organizer-selected-background) !important;
}
/*- Tree -----------------------------------------------------------------*/
#contentView treecol {
/* 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) !important;
}
tree {
background-color: var(--organizer-content-background) !important;
color: var(--organizer-color) !important;
}
treecol:not([hideheader="true"]),
treecolpicker {
appearance: none !important;
border: none !important;
background-color: var(--in-content-button-background) !important;
color: var(--organizer-color, inherit) !important;
padding: 5px 10px !important;
}
treecol:not([hideheader="true"], [sortable="false"]):hover,
treecolpicker:hover {
background-color: var(--organizer-hover-background) !important;
color: var(--organizer-color) !important;
}
treecol:not([hideheader="true"], [sortable="false"]):hover:active,
treecolpicker:hover:active {
background-color: var(--organizer-selected-background) !important;
}
treecol:not([hideheader="true"], :first-child),
treecolpicker {
padding-left: 10px !important;
border-inline-start-width: 1px !important;
border-inline-start-style: solid !important;
border-image: linear-gradient(
transparent 0%,
transparent 20%,
var(--organizer-border-color) 20%,
var(--organizer-border-color) 80%,
transparent 80%,
transparent 100%
)
1 1 !important;
}
treecol[sortDirection]:not([hideheader="true"]) > xul|*.treecol-sortdirection {
fill: currentColor !important;
width: 18px !important;
height: 18px !important;
}
treechildren::-moz-tree-row {
background-color: transparent !important;
}
treechildren::-moz-tree-row(hover) {
background-color: var(--organizer-hover-background) !important;
}
treechildren::-moz-tree-row(selected) {
background-color: var(--organizer-selected-background) !important;
color: var(--organizer-selected-color) !important;
border: 1px solid transparent !important;
}
treechildren::-moz-tree-image(hover),
treechildren::-moz-tree-twisty(hover),
treechildren::-moz-tree-cell-text(hover) {
color: var(--organizer-hover-color) !important;
}
treechildren::-moz-tree-image(selected),
treechildren::-moz-tree-twisty(selected),
treechildren::-moz-tree-cell-text(selected) {
color: var(--organizer-selected-color) !important;
}
treechildren::-moz-tree-separator {
height: 1px !important;
border-color: var(--organizer-separator-color) !important;
}
treechildren::-moz-tree-separator(hover) {
border-color: var(--organizer-hover-color) !important;
}
treechildren::-moz-tree-separator(selected) {
border-color: var(--organizer-selected-color) !important;
}
treechildren::-moz-tree-cell-text(primary, dropOn),
treechildren::-moz-tree-drop-feedback {
background-color: var(--organizer-outline-color) !important;
}
/*- Info Box -------------------------------------------------------------*/
#detailsPane {
background-color: var(--organizer-pane-background) !important;
color: var(--organizer-color) !important;
padding: 5px !important;
border-top: 1px solid var(--organizer-border-color) !important;
}
#editBookmarkPanelRows .expander-up,
#editBookmarkPanelRows .expander-down {
appearance: none !important;
min-width: 0 !important;
padding: 5px !important;
margin: 0 !important;
margin-inline-end: 4px !important;
border: 1px solid var(--organizer-pane-field-border-color) !important;
border-radius: 4px !important;
color: var(--organizer-color) !important;
background-color: var(--organizer-content-background) !important;
-moz-context-properties: fill !important;
fill: currentColor !important;
}
#editBookmarkPanelRows .expander-up:hover,
#editBookmarkPanelRows .expander-down:hover {
background-color: var(--organizer-hover-background) !important;
color: var(--organizer-hover-color) !important;
}
#editBookmarkPanelRows .expander-up:hover:active,
#editBookmarkPanelRows .expander-down:hover:active {
background-color: var(--organizer-selected-background) !important;
color: var(--organizer-selected-color) !important;
}
#editBookmarkPanelRows .expander-up:focus-visible,
#editBookmarkPanelRows .expander-down:focus-visible {
outline: 2px solid var(--organizer-outline-color) !important;
outline-offset: -1px !important;
}
#editBookmarkPanelRows .expander-up > .button-box,
#editBookmarkPanelRows .expander-down > .button-box {
padding: 0 !important;
}
#editBookmarkPanelRows .expander-up {
list-style-image: url("chrome://global/skin/icons/arrow-up-12.svg");
}
#editBookmarkPanelRows .expander-down {
list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
}
#places input {
border: 1px solid var(--organizer-pane-field-border-color) !important;
border-radius: 4px !important;
background-color: var(--organizer-content-background) !important;
color: var(--organizer-color) !important;
min-height: 20px !important;
padding-inline: 4px !important;
}
#places input:focus {
outline: 2px solid var(--organizer-outline-color) !important;
outline-offset: -1px !important;
}
#places input:not(:read-write):focus {
outline: none !important;
}
.caption-label {
margin-inline-start: 8px !important;
color: var(--organizer-deemphasized-color) !important;
}
#editBMPanel_tagsSelectorRow > richlistbox {
appearance: none !important;
color: var(--organizer-color) !important;
background-color: var(--organizer-content-background) !important;
border: 1px solid var(--organizer-border-color) !important;
border-radius: 4px !important;
}
#editBMPanel_tagsSelectorRow > richlistbox > richlistitem {
border: 1px solid transparent !important;
}
#editBMPanel_tagsSelectorRow > richlistbox > richlistitem:hover {
background-color: var(--organizer-hover-background) !important;
color: var(--organizer-hover-color) !important;
}
#editBMPanel_tagsSelectorRow > richlistbox > richlistitem[selected] {
background-color: var(--organizer-selected-background) !important;
color: var(--organizer-selected-color) !important;
}
/*- Radio Button -------------------------------------------------------------*/
menuitem[type="radio"] {
/* margin-inline-start: 0 !important; */
appearance: none !important;
}
menuitem[type="radio"] > .menu-iconic-left > .menu-iconic-icon {
appearance: none !important;
width: 16px !important;
height: 16px !important;
border: 1px solid var(--in-content-box-border-color) !important;
border-radius: 100% !important;
padding: 0 !important;
margin-inline: 0 6px !important;
margin-block: 2px !important; /* extend the vertical clicktarget */
background-color: var(--in-content-button-background) !important;
background-position: center !important;
flex-shrink: 0 !important; /* avoid shrinking inside flex container */
}
menuitem[type="radio"] > .menu-iconic-left[checked="true"] > .menu-iconic-icon {
-moz-context-properties: fill !important;
fill: currentColor !important;
color: var(--in-content-primary-button-text-color) !important;
background-color: var(--in-content-primary-button-background) !important;
background-image: url("chrome://global/skin/icons/radio.svg") !important;
border-color: transparent !important;
/* Style the button also when printing with "Print Backgrounds" unchecked */
color-adjust: exact !important;
}
menuitem[type="radio"]:not([disabled="true"]):hover > .menu-iconic-left > .menu-iconic-icon {
background-color: var(--in-content-button-background-hover) !important;
color: var(--in-content-button-text-color-hover) !important;
}
menuitem[type="radio"]:not([disabled="true"]):hover:active > .menu-iconic-left > .menu-iconic-icon {
background-color: var(--in-content-button-background-active) !important;
}
menuitem[type="radio"]:not([disabled="true"])[checked="true"]:hover > .menu-iconic-left > .menu-iconic-icon {
background-color: var(--in-content-primary-button-background-hover) !important;
color: var(--in-content-primary-button-text-color-hover) !important;
}
menuitem[type="radio"]:not([disabled="true"])[checked="true"]:hover:active
> .menu-iconic-left
> .menu-iconic-icon {
background-color: var(--in-content-primary-button-background-active) !important;
}
menuitem[type="radio"] > .menu-iconic-text {
margin-inline: 0 8px !important;
padding-inline-start: 0 !important;
}
/* Disabled checkboxes, radios and labels */
menuitem[type="radio"][disabled="true"],
menuitem[type="checkbox"][disabled="true"] {
color: inherit !important;
opacity: 0.5 !important;
}
/*- Check Box ----------------------------------------------------------------*/
/* From checkbox.css */
menuitem[type="checkbox"] {
appearance: none !important;
-moz-box-align: center !important;
margin: 0px 2px !important;
}
menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon {
appearance: none !important;
width: 16px !important;
height: 16px !important;
border: 1px solid currentColor !important;
border-radius: 2px !important;
color: var(--checkbox-border-color, ThreeDDarkShadow) !important;
background-color: var(--checkbox-unchecked-bgcolor, Field) !important;
margin-inline-end: 6px !important; /* or 2px */
margin-block: 2px !important; /* From common.css */
}
menuitem[type="checkbox"] > .menu-iconic-left[checked="true"] > .menu-iconic-icon {
-moz-context-properties: fill !important;
fill: currentColor !important;
border-color: var(--checkbox-checked-border-color, transparent) !important;
background-image: url("chrome://global/skin/icons/check.svg") !important;
background-position: center !important;
background-repeat: no-repeat !important;
/* Style the button also when printing with "Print Backgrounds" unchecked */
color-adjust: exact !important;
color: var(--checkbox-checked-color, AccentColorText) !important;
background-color: var(--checkbox-checked-bgcolor, AccentColor) !important;
}
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
menuitem[type="checkbox"] > .menu-iconic-left[checked="true"] > .menu-iconic-icon {
color: var(--checkbox-checked-color, -moz-accent-color-foreground) !important;
background-color: var(--checkbox-checked-bgcolor, -moz-accent-color) !important;
}
}
menuitem[type="checkbox"]:not([disabled="true"]):hover > .menu-iconic-left > .menu-iconic-icon {
background-color: var(
--checkbox-unchecked-hover-bgcolor,
color-mix(in srgb, AccentColor 4%, Field)
) !important;
}
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
menuitem[type="checkbox"]:not([disabled="true"]):hover > .menu-iconic-left > .menu-iconic-icon {
background-color: var(
--checkbox-unchecked-hover-bgcolor,
color-mix(in srgb, -moz-accent-color 4%, Field)
) !important;
}
}
menuitem[type="checkbox"]:not([disabled="true"]):hover:active > .menu-iconic-left > .menu-iconic-icon {
background-color: var(
--checkbox-unchecked-active-bgcolor,
color-mix(in srgb, AccentColor 8%, Field)
) !important;
}
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
menuitem[type="checkbox"]:not([disabled="true"]):hover:active > .menu-iconic-left > .menu-iconic-icon {
background-color: var(
--checkbox-unchecked-active-bgcolor,
color-mix(in srgb, -moz-accent-color 8%, Field)
) !important;
}
}
menuitem[type="checkbox"]:not([disabled="true"]):hover > .menu-iconic-left[checked="true"] > .menu-iconic-icon {
background-color: var(
--checkbox-checked-hover-bgcolor,
color-mix(in srgb, currentColor 12.5%, AccentColor)
) !important;
}
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
menuitem[type="checkbox"]:not([disabled="true"]):hover
> .menu-iconic-left[checked="true"]
> .menu-iconic-icon {
background-color: var(
--checkbox-checked-hover-bgcolor,
color-mix(in srgb, currentColor 12.5%, -moz-accent-color)
) !important;
}
}
menuitem[type="checkbox"]:not([disabled="true"]):hover:active
> .menu-iconic-left[checked="true"]
> .menu-iconic-icon {
background-color: var(
--checkbox-checked-active-bgcolor,
color-mix(in srgb, currentColor 25%, AccentColor)
) !important;
}
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
menuitem[type="checkbox"]:not([disabled="true"]):hover:active
> .menu-iconic-left[checked="true"]
> .menu-iconic-icon {
background-color: var(
--checkbox-checked-active-bgcolor,
color-mix(in srgb, currentColor 25%, -moz-accent-color)
) !important;
}
}
menuitem[type="checkbox"]:focus > .menu-iconic-left > .menu-iconic-icon {
outline: 2px solid var(--focus-outline-color, AccentColor) !important;
outline-offset: var(--focus-outline-offset, 2px) !important;
}
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
menuitem[type="checkbox"]:focus > .menu-iconic-left > .menu-iconic-icon {
outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important;
}
}
@media (prefers-contrast) {
menuitem[type="checkbox"]:not([disabled="true"]) > .menu-iconic-left > .menu-iconic-icon {
/* color will set the border-color on the check due to how HCM works for in-content pages. */
color: var(--checkbox-checked-border-color, color-mix(in srgb, AccentColor 4%, Field)) !important;
}
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
menuitem[type="checkbox"]:not([disabled="true"]) > .menu-iconic-left > .menu-iconic-icon {
/* color will set the border-color on the check due to how HCM works for in-content pages. */
color: var(--checkbox-checked-border-color, color-mix(in srgb, -moz-accent-color 4%, Field)) !important;
}
}
menuitem[type="checkbox"] > .menu-iconic-left[checked="true"] {
color: var(--checkbox-checked-border-color, currentColor) !important;
fill: var(--checkbox-checked-color, AccentColorText) !important;
}
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
menuitem[type="checkbox"] > .menu-iconic-left[checked="true"] {
fill: var(--checkbox-checked-color, -moz-accent-color-foreground) !important;
}
}
menuitem[type="checkbox"]:not([disabled="true"]):hover:active
> .menu-iconic-left[checked="true"]
> .menu-iconic-icon,
menuitem[type="checkbox"]:not([disabled="true"]):hover
> .menu-iconic-left[checked="true"]
> .menu-iconic-icon {
color: var(--checkbox-checked-border-color-hover, AccentColorText) !important;
fill: var(--checkbox-checked-border-color-hover, AccentColorText) !important;
}
@supports -moz-bool-pref("userChrome.compatibility.accent_color") {
menuitem[type="checkbox"]:not([disabled="true"]):hover:active
> .menu-iconic-left[checked="true"]
> .menu-iconic-icon,
menuitem[type="checkbox"]:not([disabled="true"]):hover
> .menu-iconic-left[checked="true"]
> .menu-iconic-icon {
color: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important;
fill: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important;
}
}
}
menuitem[type="checkbox"] > .menu-iconic-text {
margin: 1px 0 !important;
}
menuitem[type="checkbox"][disabled="true"] {
opacity: 0.4 !important;
}
/*- Menu Separator -----------------------------------------------------------*/
menuseparator {
appearance: none !important;
min-width: 2px;
min-height: 0;
border-top: 1px solid var(--in-content-box-border-color, ThreeDDarkShadow);
border-bottom: none;
padding: 0;
margin: var(--panel-separator-margin, 6px);
}
}
}
}
}
/** Monospace *****************************************************************/
@supports -moz-bool-pref("userContent.page.monospace") {
@-moz-document url-prefix("about:"),
url-prefix("chrome://browser/content/places/places.xhtml"),
regexp("^(((jar:)?file:///)|(chrome://)).*/$")
{
* {
font-family: -moz-fixed;
}
}
}
/** Menu - Icons Layout *******************************************************/
@supports not -moz-bool-pref("userChrome.icon.disabled") {
@supports -moz-bool-pref("userChrome.icon.menu") {
@-moz-document url("chrome://browser/content/places/places.xhtml"),
url("about:downloads") {
menupopup menuitem:not([type="checkbox"][checked="true"], [type="radio"]),
menupopup menu:not([type="checkbox"][checked="true"], [type="radio"]) {
-moz-appearance: none !important; /* Linux: menulist */
}
menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
menu:not(.menu-iconic, .in-menulist, [checked="true"]),
menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup)
> menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]) {
/* Color */
-moz-context-properties: fill, fill-opacity, stroke !important;
fill: currentColor !important;
/* Layout */
background-size: 16px !important;
background-repeat: no-repeat !important;
background-image: var(--menuitem-image);
}
/* For native context menus */
@supports -moz-bool-pref("widget.macos.native-context-menus") or -moz-bool-pref("widget.gtk.native-context-menus") {
:not(menu, #ContentSelectDropdown)
> menupopup
> menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
:not(menu, #ContentSelectDropdown) > menupopup > menu:not(.menu-iconic, .in-menulist, [checked="true"]) {
list-style-image: var(--menuitem-image, url("../icons/blank.svg")) !important;
}
}
/* Padding */
:root {
--uc-menu-background-position: left;
--context-menu-background-padding-default: 5px;
--context-menu-background-padding: var(--context-menu-background-padding-default);
}
:root:-moz-locale-dir(rtl) {
--uc-menu-background-position: right;
}
menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
menu:not(.menu-iconic, .in-menulist, [checked="true"]),
menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup)
> menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]) {
background-position: var(--uc-menu-background-position) var(--context-menu-background-padding) center !important;
padding-inline-start: var(--context-menu-background-padding) !important;
}
/* Padding - Windows */
@media (-moz-os-version: windows-win7), (-moz-platform: windows-win7) {
:root {
--context-menu-background-padding-default: 2px;
}
}
@media (-moz-os-version: windows-win8), (-moz-platform: windows-win8) {
:root {
--context-menu-background-padding-default: 3px;
}
}
@media (-moz-os-version: windows-win7),
(-moz-platform: windows-win7),
(-moz-os-version: windows-win8),
(-moz-platform: windows-win8) {
menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
menu:not(.menu-iconic, .in-menulist, [checked="true"]),
menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup)
> menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]) {
background-position: left var(--context-menu-background-padding) center !important;
padding-inline-start: 0 !important;
}
}
@media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) {
:root {
--context-menu-background-padding: 1em;
--context-menu-text-padding: 24px; /* 16px + 8px */
--menu-background-padding-default: calc(
var(--context-menu-background-padding) + var(--context-menu-text-padding)
);
}
menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
menu:not(.menu-iconic, .in-menulist, [checked="true"]),
menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup)
> menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]) {
padding-inline-start: var(--menu-background-padding-default) !important;
margin-left: 0 !important;
}
}
/* Padding - Linux */
@media (-moz-gtk-csd-available) {
:root {
--context-menu-background-padding-default: 6px;
}
/* Contextmenu Checkbox Unset */
menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) menuitem[type="checkbox"] {
margin-inline: 0 !important;
}
menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
menuitem[type="checkbox"]
> .menu-iconic-left
> .menu-iconic-icon {
margin-inline-end: 0 !important;
}
menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
menuitem[type="checkbox"]:not([checked="true"])
> .menu-iconic-left
> .menu-iconic-icon {
border: none !important;
background-color: unset !important;
}
}
/* Padding - Mac */
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
:root {
--context-menu-background-padding-default: 10px;
--context-menu-mac-padding: 21px;
}
/* context menu width */
menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
menu:not(.menu-iconic, .in-menulist, [checked="true"]) {
padding-inline-end: var(--context-menu-background-padding) !important;
}
menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"])
> .menu-text,
menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
menu:not(.menu-iconic, .in-menulist, [checked="true"])
> .menu-text {
/* text position */
padding-inline-start: var(--context-menu-mac-padding) !important;
}
/* Checkbox menuitem, None iconic menu */
menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) menuitem[checked="true"],
menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) menu:not(.menu-iconic) {
padding-inline-start: calc(
var(--context-menu-background-padding) + var(--context-menu-mac-padding)
) !important;
}
}
/*= Context Menu ===========================================================*/
@supports -moz-bool-pref("userChrome.icon.context_menu") {
/* Icon lists */
/*= downloadsContextMenu =====================================================*/
.downloadPauseMenuItem {
--menuitem-image: url("chrome://global/skin/media/pause-fill.svg");
}
.downloadResumeMenuItem {
--menuitem-image: url("chrome://global/skin/media/play-fill.svg");
}
.downloadUnblockMenuItem {
--menuitem-image: url("../icons/checkmark-circle.svg");
}
.downloadUseSystemDefaultMenuItem {
--menuitem-image: url("chrome://browser/skin/open.svg");
}
.downloadAlwaysUseSystemDefaultMenuItem {
/* checkbox */
--menuitem-image: url("../icons/folder-globe.svg");
}
.downloadAlwaysOpenSimilarFilesMenuItem {
/* checkbox */
--menuitem-image: url("../icons/fluid.svg");
}
.downloadShowMenuItem {
--menuitem-image: url("chrome://global/skin/icons/folder.svg");
}
@supports -moz-bool-pref("userChrome.icon.library") {
.downloadShowMenuItem {
--menuitem-image: url("../icons/folder.svg");
}
}
#downloadsContextMenu > menuitem.downloadOpenReferrerMenuItem,
#downloadsContextMenu > menuitem[command="downloadsCmd_openReferrer"] {
--menuitem-image: url("../icons/link-square.svg");
}
#downloadsContextMenu > menuitem.downloadCopyLocationMenuItem,
#downloadsContextMenu > menuitem[command="downloadsCmd_copyLocation"] {
--menuitem-image: url("../icons/link.svg");
}
.downloadDeleteFileMenuItem {
--menuitem-image: url("chrome://global/skin/icons/delete.svg");
}
.downloadRemoveFromHistoryMenuItem {
--menuitem-image: url("../icons/eraser.svg");
}
#downloadsContextMenu > menuitem[command="downloadsCmd_clearList"],
#downloadsContextMenu > menuitem[command="downloadsCmd_clearDownloads"] {
--menuitem-image: url("../icons/broom.svg");
}
/*= placeContext =============================================================*/
#placesContext_open {
--menuitem-image: url("../icons/link-square.svg");
}
#placesContext_openBookmarkContainer\:tabs,
#placesContext_openBookmarkLinks\:tabs {
--menuitem-image: url("../icons/movetowindow-16.svg");
}
#placesContext_open\:newtab,
#placesContext_openContainer\:tabs,
#placesContext_openLinks\:tabs {
--menuitem-image: url("chrome://browser/skin/new-tab.svg");
}
#placesContext_open\:newcontainertab {
--menuitem-image: url("../icons/container-openin-16.svg");
}
#placesContext_open\:newwindow {
--menuitem-image: url("chrome://browser/skin/window.svg");
}
#placesContext_open\:newprivatewindow {
--menuitem-image: url("chrome://browser/skin/privateBrowsing.svg");
}
#placesContext_show_bookmark\:info,
#placesContext_show\:info,
#placesContext_show_folder\:info {
--menuitem-image: url("chrome://global/skin/icons/edit.svg");
}
#placesContext_deleteBookmark,
#placesContext_deleteFolder,
#placesContext_delete,
#placesContext_delete_history {
--menuitem-image: url("chrome://global/skin/icons/delete.svg");
}
#placesContext_deleteHost {
--menuitem-image: url("../icons/eye-hide.svg");
}
#placesContext_sortBy\:name {
--menuitem-image: url("../icons/text-sort-ascending.svg");
}
#placesContext_cut {
--menuitem-image: url("chrome://browser/skin/edit-cut.svg");
}
#placesContext_copy {
--menuitem-image: url("../icons/edit-copy.svg");
}
#placesContext_paste_group {
--menuitem-image: url("chrome://browser/skin/edit-paste.svg");
}
#placesContext_new\:bookmark {
--menuitem-image: url("chrome://browser/skin/bookmark.svg");
}
#placesContext_showInFolder,
#placesContext_new\:folder {
--menuitem-image: url("chrome://global/skin/icons/folder.svg");
}
@supports -moz-bool-pref("userChrome.icon.library") {
#placesContext_showInFolder,
#placesContext_new\:folder {
--menuitem-image: url("../icons/folder.svg");
}
}
#placesContext_new\:separator {
--menuitem-image: url("../icons/vertical-line.svg");
}
#placesContext_paste {
--menuitem-image: url("chrome://browser/skin/edit-paste.svg");
}
#placesContext_createBookmark {
--menuitem-image: url("chrome://browser/skin/bookmark.svg");
}
#show-other-bookmarks_PersonalToolbar {
/* checkbox */
--menuitem-image: url("../icons/star-line-horizontal.svg");
}
#placesContext_showAllBookmarks {
--menuitem-image: url("chrome://browser/skin/bookmark-star-on-tray.svg");
}
.openintabs-menuitem {
--menuitem-image: url("../icons/movetowindow-16.svg");
}
}
@supports -moz-bool-pref("userChrome.icon.global_menu") {
/*= organizeButtonPopup ======================================================*/
#newbookmark {
--menuitem-image: url("chrome://browser/skin/bookmark.svg");
}
#newfolder {
--menuitem-image: url("chrome://global/skin/icons/folder.svg");
}
@supports -moz-bool-pref("userChrome.icon.library") {
#newfolder {
--menuitem-image: url("../icons/folder.svg");
}
}
#newseparator {
--menuitem-image: url("../icons/vertical-line.svg");
}
#orgUndo {
--menuitem-image: url("../icons/undo.svg");
}
#orgCut {
--menuitem-image: url("chrome://browser/skin/edit-cut.svg");
}
#orgCopy {
--menuitem-image: url("../icons/edit-copy.svg");
}
#orgPaste {
--menuitem-image: url("chrome://browser/skin/edit-paste.svg");
}
#orgDelete {
--menuitem-image: url("chrome://global/skin/icons/delete.svg");
}
#orgSelectAll {
--menuitem-image: url("../icons/select-all-on.svg");
}
#orgClose {
--menuitem-image: url("chrome://global/skin/icons/close.svg");
}
/*= viewMenuPopup ============================================================*/
#viewColumns {
--menuitem-image: url("chrome://global/skin/icons/columnpicker.svg");
}
#viewSort {
--menuitem-image: url("../icons/text-sort-ascending.svg");
}
/*= maintenanceButtonPopup ===================================================*/
#backupBookmarks {
--menuitem-image: url("chrome://devtools/skin/images/datastore.svg");
}
#fileImport {
--menuitem-image: url("../icons/toolbarButton-download.svg");
}
#fileExport {
--menuitem-image: url("chrome://browser/skin/open.svg");
}
#browserImport {
--menuitem-image: url("chrome://browser/skin/import.svg");
}
}
}
}
}
/** Download Panel ************************************************************/
@-moz-document url-prefix("about:downloads") {
@media (prefers-reduced-motion: no-preference) {
@supports -moz-bool-pref("userChrome.decoration.download_panel") {
/* Accent Color for downloaded item */
#downloadsListBox .download-state[exists] .downloadDetails {
color: var(--button-primary-bgcolor);
}
#downloadsListBox .download-state[exists] .downloadDetails.downloadDetailsHover {
color: var(--button-primary-hover-bgcolor);
}
/* File moved or missing */
#downloadsListBox .download-state:not([exists], [state="0"]) .downloadTarget {
text-decoration: line-through;
text-decoration-color: color-mix(in srgb, currentColor 65%, transparent);
}
#downloadsListBox .download-state:not([exists], [state="0"]) .downloadTarget:hover {
text-decoration: none;
}
#downloadsListBox .download-state:not([exists], [state="0"]) .downloadTypeIcon {
filter: grayscale(100%) !important;
}
}
}
}