@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 { padding-inline-start: 24px; /* 16p + (4px * 2) */ -moz-context-properties: fill, fill-opacity !important; fill: currentColor !important; /* Layout */ background-size: 16px; background-repeat: no-repeat; background-image: var(--menuitem-image); background-position: left 4px center; } .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.animate") { /* 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, .description-wrapper { min-height: 300px; background-position: left center; background-repeat: no-repeat; background-size: 38%; } #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=netTimeout"), url-prefix("about:neterror?e=netReset"), url-prefix("about:neterror?e=netOffline"), url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml") { #errorPageContainer { background-image: url("../icons/error-connection-failure.svg"); } } @-moz-document url-prefix("about:neterror?e=dnsNotFound") { #errorPageContainer { background-image: url("../icons/error-server-not-found.svg"); } } @-moz-document url-prefix("about:neterror?e=malformedURI") { #errorPageContainer { background-image: url("chrome://browser/skin/illustrations/error-malformed-url.svg"); } } @-moz-document url-prefix("about:neterror?e=clockSkewError"), url-prefix("about:neterror?e=nssFailure") { #errorPageContainer { background-image: url("../icons/blue-berror.svg"); background-size: 18.5em; } } @-moz-document url("about:sessionrestore"), url("chrome://browser/content/aboutSessionRestore.xhtml") { .description-wrapper { background-image: 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 radiobuttons */ --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: 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("userChrome.compatibility.accent_color") { :host, :root { --in-content-primary-button-text-color: -moz-accent-color-foreground !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(rgba(255, 255, 255, 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 */ /* Othres */ } 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, .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"], header, .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 antialising 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 antialising 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; } /* Boomark */ :-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; } /* Boomark */ :-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 !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; } /*- 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 Separtor --------------------------------------------------------*/ 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 -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 !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 { --context-menu-background-padding-default: 5px; --context-menu-background-padding: var(--context-menu-background-padding-default); } 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: 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("chrome://browser/skin/save.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; } } } }