diff options
Diffstat (limited to '')
| -rw-r--r-- | .librewolf/hibiki.default/chrome/lepton.userContent.css | 7622 |
1 files changed, 7622 insertions, 0 deletions
diff --git a/.librewolf/hibiki.default/chrome/lepton.userContent.css b/.librewolf/hibiki.default/chrome/lepton.userContent.css new file mode 100644 index 0000000..d8e968d --- /dev/null +++ b/.librewolf/hibiki.default/chrome/lepton.userContent.css @@ -0,0 +1,7622 @@ +@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +@namespace html url("http://www.w3.org/1999/xhtml"); +/** Compatibility *************************************************************/ +@-moz-document url-prefix("about:preferences") { + .content-blocking-warning.info-box-container > hbox > .content-blocking-warning-image { + margin-inline-start: -7px !important; + margin-inline-end: 8px !important; + width: 20px !important; + } + #pane-experimental-search-results-header, + #pane-experimental-subtitle { + min-height: 27px !important; + padding-inline-start: 35px !important; + } + .translations-manage-language:first-child { + padding-block: 4px !important; + margin-bottom: 4px !important; + } + .translations-manage-language button { + min-height: var(--size-item-medium, 28px) !important; + max-height: var(--size-item-medium, 28px) !important; + } + #firefoxExperimentalCategory:not([hidden="true"]) { + display: inline-block; + } + #firefoxExperimentalCategory > label { + float: left; + } + #firefoxExperimentalCategory > hbox { + transform: translateY(5px); + } + #firefoxExperimentalCategory .description-deemphasized { + display: none; + } + #pane-experimental-featureGates > html|p[data-l10n-id="pane-experimental-description2"] { + border-bottom: 1px solid var(--in-content-border-color); + padding-bottom: 1.5em; + } +} +@-moz-document url-prefix("about:addons") { + #updates-message + .page-options-menu > .more-options-button { + box-sizing: content-box; + padding: 0 !important; + } + button[data-l10n-id="addon-updates-manual-updates-found"] { + height: 100%; + } + #categories { + padding-inline-end: 1px !important; /* Original: 4px */ + } +} +@-moz-document url-prefix("about:policies") { + #categories > .category { + box-sizing: border-box; + } +} +/** Video player **************************************************************/ +/* Control Bar Size */ +@media -moz-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 */ +@media -moz-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 (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 */ + } + @media -moz-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; + } + } +} +@media -moz-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; + } +} +@media -moz-pref("userContent.player.noaudio") { + #controlsContainer .muteButton[noAudio] { + /* Remove volume button at noAudio */ + display: none !important; + } +} +/* Click to play UI */ +@media -moz-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 */ +@media -moz-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 *************************/ + @media -moz-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; + } + @media -moz-pref("userContent.page.proton_color") { + @media -moz-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 ********************************************/ + @media -moz-pref("userChrome.icon.context_menu") { + .context-menu-list .context-menu-item button { + padding-inline-start: 0 !important; + } + .context-menu-list .context-menu-item button span { + /* Color */ + -moz-context-properties: fill, fill-opacity, stroke !important; + fill: currentColor !important; + stroke: currentColor; + /* Layout */ + background-size: 16px !important; + background-repeat: no-repeat !important; + background-image: var(--menuitem-image); + padding-inline-start: 24px; /* 16p + (4px * 2) */ + background-position: var(--uc-menu-background-position, left) 4px center; + } + .context-menu-list .context-menu-item button span:dir(rtl) { + --uc-menu-background-position: right; + } + .context-menu-item span[data-l10n-id="newtab-menu-pin"] { + --menuitem-image: url("../icons/pin-tab.svg"); + } + .context-menu-item span[data-l10n-id="newtab-menu-unpin"] { + --menuitem-image: url("../icons/unpin-tab.svg"); + } + .context-menu-item span[data-l10n-id="newtab-menu-edit-topsites"] { + --menuitem-image: url("../icons/edit-active.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"); + } + @media -moz-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 ******************************/ + @media -moz-pref("userContent.newTab.full_icon") { + .top-site-outer { + width: 120px !important; /* v135: calc(var(--size-item-large) * 3); */ + } + .top-site-outer .tile { + width: 80px !important; /* v135: calc(var(--size-item-large) * 2); */ + height: 80px !important; /* v135: calc(var(--size-item-large) * 2); */ + overflow: hidden; + } + .top-site-outer .icon-wrapper { + width: 100% !important; /* Original: 48px */ + height: 100% !important; /* Original: 48px */ + } + .top-site-outer.add-button .tile .icon-wrapper { + width: 24px !important; + height: 24px !important; + } + .top-site-outer .context-menu-button { + top: 0px !important; /* Original: -20px */ + right: 0px !important; + width: 22px !important; + height: 22px !important; + } + .top-site-outer .context-menu { + top: 16.75px !important; /* Original: 6.75px */ + } + } + /** Activity Stream - Animate ***********************************************/ + @media -moz-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-wrapper .search-inner-wrapper > input, + .search-wrapper .search-inner-wrapper > .search-handoff-button { + transition: 1s var(--animation-easing-function); + transition-property: border-color, box-shadow; + } + .search-wrapper .search-inner-wrapper:active > input, + .search-wrapper .search-inner-wrapper:active > .search-handoff-button, + .search-wrapper .search-inner-wrapper > input:focus, + .search-wrapper .search-inner-wrapper > .search-handoff-button:focus { + transition: border-color 0.5s var(--animation-easing-function), box-shadow 1s var(--animation-easing-function); + } + @media -moz-pref("userContent.page.field_border") { + .search-wrapper .search-inner-wrapper:hover > input, + .search-wrapper .search-inner-wrapper:hover > .search-handoff-button { + border-color: var(--newtab-primary-action-background) !important; + transition: border-color 0.5s var(--animation-easing-function); + } + } + } + } + /** Activity Stream - Pocket order to last **********************************/ + @media -moz-pref("userContent.newTab.pocket_to_last") { + .body-wrapper.on { + display: flex; + flex-wrap: wrap !important; + flex-direction: row !important; + } + .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 *********************/ + @media -moz-pref("userContent.newTab.searchbar") { + /* Dropdown Colors */ + #root { + --newtab-search-background-color: rgba(255, 255, 255, 1); /* Same as light theme's --panel-background */ + /* Set search dropdown background */ + --newtab-search-dropdown-header-color: var(--newtab-search-background-color) !important; + --newtab-search-dropdown-color: var(--newtab-search-background-color) !important; + --newtab-element-hover-color: color-mix(in srgb, currentColor 9%, transparent) !important; + } + @media (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: inline-flex; + 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; + } + } + /** Activity Stream - Hide Firefox's logo ***********************************/ + @media -moz-pref("userContent.newTab.hidden_logo") { + .logo-and-wordmark { + display: none !important; + } + .outer-wrapper:not(.fixed-search) .search-wrapper { + padding-top: 0 !important; + } + } + /** Activity Stream - Custom background image *******************************/ + @media -moz-pref("userContent.newTab.background_image") { + body::before { + content: ""; + position: fixed; + width: 100%; + height: 100%; + background-image: var(--uc-newTab-wallpaper, url("../icons/horizon-sunrise.svg")); + background-size: cover; /* or auto auto */ + background-repeat: no-repeat; + background-position: right top; + background-attachment: fixed; + /** Use night sky version in dark mode **********************************/ + } + @media (prefers-color-scheme: dark) { + body::before { + background-image: var(--uc-newTab-wallpaper, url("../icons/horizon-night.svg")); + } + } + } +} +/** Error Page - Restore illustrations ****************************************/ +@media -moz-pref("userContent.page.illustration") { + @-moz-document url-prefix("about:neterror"), url-prefix("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml"), url("about:sessionrestore"), url("chrome://browser/content/aboutSessionRestore.xhtml") + { + /* Illustrations Position */ + #errorPageContainer, + .neterror > .container, + .description-wrapper { + min-height: 300px; + background-position: left center; + background-repeat: no-repeat; + background-size: 38%; + background-image: var(--uc-error-llustration); + } + #errorPageContainer { + display: flex; + flex-direction: column; + } + .description-wrapper { + padding-inline-start: 38%; + } + /* Container */ + .container { + min-width: var(--in-content-container-min-width); /* 13em */ + max-width: var(--in-content-container-max-width); /* 52em */ + } + /* Text Position */ + #text-container { + margin: auto; + padding-inline-start: 38%; + } + } + @-moz-document url-prefix("about:neterror?e=connectionFailure"), url-prefix("about:neterror?e=netInterrupt"), url-prefix("about:neterror?e=netReset"), url-prefix("about:neterror?e=netTimeout"), url-prefix("about:neterror?e=netOffline"), url-prefix("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml") + { + :root { + --uc-error-llustration: url(../icons/error-connection-failure.svg); + } + } + @-moz-document url-prefix("about:neterror?e=dnsNotFound") { + :root { + --uc-error-llustration: url(../icons/error-server-not-found.svg); + } + } + @-moz-document url-prefix("about:neterror?e=blockedByPolicy"), url-prefix("about:neterror?e=deniedPortAccess"), url-prefix("about:neterror?e=malformedURI") { + :root { + --uc-error-llustration: url(chrome://browser/skin/illustrations/error-malformed-url.svg); + } + } + @-moz-document url-prefix("about:neterror?e=clockSkewError"), url-prefix("about:neterror?e=nssFailure") { + :root { + --uc-error-llustration: url(../icons/blue-berror.svg); + } + #errorPageContainer, + .neterror > .container { + background-size: 18.5em; + } + } + @-moz-document url("about:sessionrestore"), url("chrome://browser/content/aboutSessionRestore.xhtml") + { + :root { + --uc-error-llustration: url(../icons/error-session-restore.svg); + } + } + @-moz-document url-prefix("about:neterror?e=fileNotFound") { + @media (min-width: 970px) { + .title { + background-image: url("chrome://global/skin/icons/info.svg") !important; + } + } + #text-container { + padding-inline-start: 0; + } + } + @-moz-document url-prefix("about:tabcrashed") { + @media (min-width: 970px) { + .title { + background-image: url("chrome://browser/skin/tab-crashed.svg") !important; + } + } + } + @-moz-document url("about:robots"), url("chrome://browser/content/aboutRobots.xhtml") + { + @media (min-width: 970px) { + .title { + background-image: url("chrome://browser/content/aboutRobots-icon.png") !important; + } + } + } + @-moz-document url("about:welcomeBack"), url("chrome://browser/content/aboutWelcomeBack.xhtml") + { + @media (min-width: 970px) { + .title { + background-image: url("../icons/welcome-back.svg") !important; + } + } + } + @-moz-document url-prefix("about:preferences") { + #no-results-message::after { + content: url("../icons/no-search-results.svg"); + width: 380px; + height: 293px; + margin-top: 64px; + margin-inline: auto; + } + } +} +/** Fully Dark Mode ***********************************************************/ +/*= Fully Dark Mode - Dark Mode Colors =======================================*/ +@media -moz-pref("userContent.page.proton_color") { + @-moz-document url-prefix("about:"), url-prefix("chrome://"), 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:///).*/$") + { + /*= Default Colors - Hard Coded ==============================================*/ + /* Based on chrome://global/skin/in-content/common.css */ + :host, + :root { + --in-content-page-color: rgb(21, 20, 26); + --in-content-page-background: #fff; + --in-content-text-color: var(--in-content-page-color); + --in-content-deemphasized-text: rgb(91, 91, 102); + --in-content-box-background: #fff; + --in-content-box-background-odd: rgba(12, 12, 13, 0.05); /* grey 90 a05 */ + --in-content-box-border-color: color-mix(in srgb, currentColor 41%, transparent); + --in-content-box-info-background: #f0f0f4; + --in-content-item-hover: color-mix(in srgb, var(--in-content-primary-button-background) 20%, transparent); + --in-content-item-hover-text: var(--in-content-page-color); + --in-content-item-selected: var(--in-content-primary-button-background); + --in-content-item-selected-text: var(--in-content-primary-button-text-color); + --in-content-icon-color: rgb(91, 91, 102); + --in-content-accent-color: #0a84ff; + --in-content-accent-color-active: #0060df; + --in-content-border-hover: var(--grey-90-a50); + --in-content-border-invalid: var(--red-50); + --in-content-border-color: #d7d7db; + --in-content-error-text-color: #c50042; + --in-content-link-color: var(--blue-60); + --in-content-link-color-hover: var(--blue-70); + --in-content-link-color-active: var(--blue-80); + --in-content-link-color-visited: var(--blue-60); + /* button background states are also used for checkboxes and radio buttons */ + --in-content-button-text-color: var(--in-content-text-color); + --in-content-button-text-color-hover: var(--in-content-text-color); + --in-content-button-background: rgba(207, 207, 216, 0.33); + --in-content-button-background-hover: rgba(207, 207, 216, 0.66); + --in-content-button-background-active: rgb(207, 207, 216); + --in-content-primary-button-text-color: rgb(251, 251, 254); + --in-content-primary-button-text-color-hover: var(--in-content-primary-button-text-color); + --in-content-primary-button-background: #0061e0; + --in-content-primary-button-background-hover: #0250bb; + --in-content-primary-button-background-active: #053e94; + --in-content-danger-button-background: #e22850; + --in-content-danger-button-background-hover: #c50042; + --in-content-danger-button-background-active: #810220; + --in-content-focus-outline-color: var(--in-content-primary-button-background); + /* Note: 1px smaller than we want because we have a 1px transparent border. */ + /* Once proton ships, these can probably stop being variables. */ + --in-content-button-border-radius: 4px; + --in-content-button-horizontal-padding: 15px; + --in-content-button-vertical-padding: 7px; + --in-content-table-background: #f8f8fa; + --in-content-table-border-color: var( + --in-content-box-border-color + ); /* Legacy: #d1d1d1; rgba(249, 249, 250, 0.2) */ + --in-content-table-border-dark-color: var(--in-content-table-border-color); + --in-content-table-header-background: var( + --in-content-primary-button-background + ); /* Legacy: #0a84ff; rgb(5, 64, 150); */ + --in-content-table-header-color: var( + --in-content-primary-button-text-color + ); /* Legacy: #ffffff; var(--in-content-page-color); */ + --in-content-sidebar-width: 240px; + --dialog-warning-text-color: var(--red-60); + --checkbox-border-color: var(--in-content-box-border-color); + --checkbox-unchecked-bgcolor: var(--in-content-button-background); + --checkbox-unchecked-hover-bgcolor: var(--in-content-button-background-hover); + --checkbox-unchecked-active-bgcolor: var(--in-content-button-background-active); + --checkbox-checked-bgcolor: var(--in-content-primary-button-background); + --checkbox-checked-color: var(--in-content-primary-button-text-color); + --checkbox-checked-border-color: transparent; + --checkbox-checked-hover-bgcolor: var(--in-content-primary-button-background-hover); + --checkbox-checked-active-bgcolor: var(--in-content-primary-button-background-active); + --blue-40: #45a1ff; + --blue-50: #0a84ff; + --blue-60: #0060df; + --blue-70: #003eaa; + --blue-80: #002275; + --grey-30: #d7d7db; + --grey-60: #4a4a4f; + --grey-90-a10: rgba(12, 12, 13, 0.1); + --grey-90-a20: rgba(12, 12, 13, 0.2); + --grey-90-a30: rgba(12, 12, 13, 0.3); + --grey-90-a50: rgba(12, 12, 13, 0.5); + --grey-90-a60: rgba(12, 12, 13, 0.6); + --green-50: #30e60b; + --green-60: #12bc00; + --green-70: #058b00; + --green-80: #006504; + --green-90: #003706; + --orange-50: #ff9400; + --red-40: #ff4f5e; + --red-50: #ff0039; + --red-60: #d70022; + --red-70: #a4000f; + --red-80: #5a0002; + --red-90: #3e0200; + --yellow-50: #ffe900; + --yellow-60: #d7b600; + --yellow-60-a30: rgba(215, 182, 0, 0.3); + --yellow-70: #a47f00; + --yellow-80: #715100; + --yellow-90: #3e2800; + --shadow-10: 0 1px 4px var(--grey-90-a10); + --shadow-30: 0 4px 16px var(--grey-90-a10); + --card-padding: 16px; + --card-shadow: var(--shadow-10); + --card-outline-color: var(--grey-30); + --card-shadow-hover: var(--card-shadow), 0 0 0 5px var(--card-outline-color); + --uc-warning-icon-bgcolor: #ffa436; + } + @media (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); + --uc-warning-icon-bgcolor: #ffbd4f; + } + } + @media (prefers-contrast) { + :host, + :root { + --uc-warning-icon-bgcolor: var(--in-content-page-color); + } + } + /*= Menu color #477 ==========================================================*/ + @media (-moz-platform: windows) { + :root { + /* Override some menu color variables for light browser themes. */ + --menuitem-hover-background-color: #e0e0e6; + --menu-background-color: #f9f9fb; + --menu-color: #15141a; + --menuitem-disabled-hover-background-color: rgba(224, 224, 230, 0.4); + --menu-disabled-color: rgba(21, 20, 26, 0.4); + --menu-border-color: #cfcfd8; + --menu-icon-opacity: 0.7; + /* Declare menu colors for dark themes, but don't override anything yet. */ + --dark-menuitem-hover-background-color: #52525e; + --dark-menu-background-color: #2b2a33; + --dark-menu-color: #fbfbfe; + --dark-menuitem-disabled-hover-background-color: rgba(82, 82, 94, 0.4); + --dark-menu-disabled-color: rgba(251, 251, 254, 0.4); + --dark-menu-border-color: #5b5b66; + --dark-menu-icon-opacity: 1; + } + /* Override the menu color variables for dark browser themes. */ + } + @media (-moz-platform: windows) and (prefers-color-scheme: dark) { + :root { + --menuitem-hover-background-color: var(--dark-menuitem-hover-background-color); + --menu-background-color: var(--dark-menu-background-color); + --menu-color: var(--dark-menu-color); + --menuitem-disabled-hover-background-color: var(--dark-menuitem-disabled-hover-background-color); + --menu-disabled-color: var(--dark-menu-disabled-color); + --menu-border-color: var(--dark-menu-border-color); + --menu-icon-opacity: var(--dark-menu-icon-opacity); + } + } + @media -moz-pref("userChrome.theme.non_native_menu") { + @media (-moz-gtk-csd-available) { + :root { + /* Override some menu color variables for light browser themes. */ + --menuitem-hover-background-color: #e0e0e6; + --menu-background-color: #f9f9fb; + --menu-color: #15141a; + --menuitem-disabled-hover-background-color: rgba(224, 224, 230, 0.4); + --menu-disabled-color: rgba(21, 20, 26, 0.4); + --menu-border-color: #cfcfd8; + --menu-icon-opacity: 0.7; + /* Declare menu colors for dark themes, but don't override anything yet. */ + --dark-menuitem-hover-background-color: #52525e; + --dark-menu-background-color: #2b2a33; + --dark-menu-color: #fbfbfe; + --dark-menuitem-disabled-hover-background-color: rgba(82, 82, 94, 0.4); + --dark-menu-disabled-color: rgba(251, 251, 254, 0.4); + --dark-menu-border-color: #5b5b66; + --dark-menu-icon-opacity: 1; + } + /* Override the menu color variables for dark browser themes. */ + } + @media (-moz-gtk-csd-available) and (prefers-color-scheme: dark) { + :root { + --menuitem-hover-background-color: var(--dark-menuitem-hover-background-color); + --menu-background-color: var(--dark-menu-background-color); + --menu-color: var(--dark-menu-color); + --menuitem-disabled-hover-background-color: var(--dark-menuitem-disabled-hover-background-color); + --menu-disabled-color: var(--dark-menu-disabled-color); + --menu-border-color: var(--dark-menu-border-color); + --menu-icon-opacity: var(--dark-menu-icon-opacity); + } + } + } + @media -moz-pref("userContent.page.proton_color.dark_blue_accent") or -moz-pref("userContent.page.proton_color.system_accent") { + :root, + :host(.anonymous-content-host) { + --color-accent-primary: var(--in-content-primary-button-background) !important; + --color-accent-primary-hover: var(--in-content-primary-button-background-hover) !important; + --color-accent-primary-active: light-dark(var(--color-blue-70), var(--color-cyan-20)); + } + } + @media -moz-pref("userContent.page.proton_color.dark_blue_accent") { + @media (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; + } + } + } + @media -moz-pref("userContent.page.proton_color.system_accent") { + :host, + :root { + --in-content-primary-button-text-color: AccentColorText !important; + --in-content-primary-button-background: AccentColor !important; + --in-content-primary-button-background-hover: color-mix(in srgb, black 10%, AccentColor) !important; + --in-content-primary-button-background-active: color-mix(in srgb, black 20%, AccentColor) !important; + } + @media -moz-pref("userChrome.compatibility.accent_color") { + :host, + :root { + --in-content-primary-button-text-color: HighlightText !important; + --in-content-primary-button-background: Highlight !important; + --in-content-primary-button-background-hover: color-mix(in srgb, black 10%, Highlight) !important; + --in-content-primary-button-background-active: color-mix(in srgb, black 20%, Highlight) !important; + } + } + } + } +} +@media -moz-pref("userContent.page.dark_mode") { + @media (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, + .SearchResult-note, + .AddonMeta .MetadataCard-content a.AddonMeta-reviews-content-link, + .AddonMeta .MetadataCard-title a.AddonMeta-reviews-content-link, + .PermissionsCard-subhead--optional, + .PermissionsCard-subhead--required, + .Definition-dt, + .RatingsByStar-count a, + .RatingsByStar-star a, + .Paginate-page-number, + .AddonSummaryCard-addonAverage, + .AddonReviewCard-authorByLine, + .UserReview-byLine, + .UserReview-reply-header, + .Home-heroHeader-subtitle, + .blog-entry-date, + .blogpost-breadcrumb *, + .AddonTitle-author, + .ExpandableCard-ToggleLink, + .SearchFilters-label, + .PromotedBadge-label--line { + color: var(--in-content-deemphasized-text) !important; + } + .PromotedBadge-label--recommended { + color: color-mix(in srgb, #712b00 15%, #ff9400) !important; + } + /* Background */ + .Button--action, + .DevHub-Navigation ul li.DevHub-Navigation-Register .Button, + .DevHub-MyAddons-item-buttons-submit .Button { + color: var(--in-content-primary-button-text-color) !important; + background: var(--in-content-primary-button-background) !important; + } + select, + .Select, + .Button--primary, + .Button--neutral, + .Button--neutral:link, + .Notice-button, + .AMInstallButton .AMInstallButton-loading-button { + background-color: var(--in-content-button-background) !important; + } + .Button--primary:hover, + .Button--neutral.Button--micro:not(.Button--disabled):hover, + .Button--neutral:not(.Button--disabled):hover, + .Notice-button:hover { + background: var(--in-content-button-background-hover) !important; + } + .Button--action.Button--micro:not(.Button--disabled):hover, + .Button--action:not(.Button--disabled):hover, + .DevHub-Navigation ul li.DevHub-Navigation-Register .Button:hover, + .DevHub-MyAddons-item-buttons-submit .Button:hover { + background: var(--in-content-primary-button-background-hover) !important; + } + .ShowMoreCard-contents::after { + background: linear-gradient(hsla(0deg, 0%, 100%, 0), var(--in-content-table-background)) !important; + } + input, + textarea, + .AutoSearchInput-query, + .AutoSearchInput-suggestions-list, + .SecondaryHero-module, + .Card-header, + .Card-contents, + .CardList ul > li, + .AddonsCard--horizontal ul.AddonsCard-list .SearchResult-wrapper:is(:focus, :hover), + .Paginate, + .LandingPage-header, + .DropdownMenu-items, + .DropdownMenu-items::after, + .MetadataCard, + .AddonsCard-list, + .Card-footer, + .StaticAddonCard, + .blogpost-nav, + .blogpost-nav * { + background: var(--in-content-table-background) !important; + } + .Paginate .Button.Paginate-item:is(:active, :hover) { + background: var(--in-content-button-background-hover) !important; + } + .Notice-generic, + .Notice-genericWarning { + background: color-mix( + in srgb, + var(--in-content-page-background) 40%, + var(--in-content-table-background) + ) !important; + } + .LanguageTools-header-row { + color: var(--in-content-table-header-color) !important; + background: var(--in-content-table-header-background) !important; + } + .LanguageTools-table.responsiveTable tbody tr:nth-child(2n) { + background-color: var(--in-content-box-background-odd) !important; + } + /* Fill */ + .Icon-arrow-blue.SearchSuggestion-icon-arrow { + filter: hue-rotate(330deg) brightness(1.3) !important; + } + .SecondaryHero-module-icon { + filter: invert(85%) !important; + } + .Icon-magnifying-glass, + .Notice-icon { + filter: invert(65%) !important; + } + .PermissionsCard-learn-more .Icon, + .Permission .Icon { + filter: invert(100%) !important; + } + .Icon-heart { + filter: brightness(0) !important; + } + /* Others */ + .DropdownMenu-items { + box-shadow: 0 0 2px var(--in-content-border-color) !important; + } + input, + textarea, + select { + border-color: var(--in-content-box-border-color) !important; + } + .UserProfileEdit input:disabled, + .UserProfileEdit textarea:disabled { + background-color: var(--in-content-box-background-odd) !important; + } + .AutoSearchInput-query { + border: 1px solid var(--in-content-table-background) !important; + } + .AutoSearchInput-query:is(:hover, :focus), + .UserProfileEditNotifications .UserProfileEditNotification-input:checked ~ .UserProfileEditNotification-checkbox { + border-color: var(--in-content-primary-button-background) !important; + } + .UserProfileEdit input:focus, + .UserProfileEdit textarea:focus, + .AutoSearchInput-query:focus, + .UserProfileEditNotifications .UserProfileEditNotification-input:focus ~ .UserProfileEditNotification-checkbox { + box-shadow: inset 0 0 0 1px var(--in-content-primary-button-background), + 0 0 0 1px var(--in-content-primary-button-background), 0 0 0 4px rgba(0, 211, 255, 0.3) !important; + } + .PromotedBadge-link--line { + border-color: var(--in-content-deemphasized-text) !important; + } + .PromotedBadge-link--line:hover { + border-color: var(--in-content-button-background-hover) !important; + } + .blog-entry-read-more-link { + border-color: var(--in-content-link-color) !important; + } + .blogpost-nav-arrow-left .cls-1, + .blogpost-nav-arrow-right .cls-1 { + stroke: var(--in-content-text-color) !important; + } + /* /developers/ */ + .DevHub-Navigation-Logo > .Logo::before { + -moz-context-properties: fill !important; + fill: var(--in-content-primary-button-background) !important; + background-image: url("../icons/addons-logo.svg") !important; + } + .DevHub-Navigation, + .DevHub-submit-addon, + .DevHub-get-involved, + .DevHub-MyAddons > * { + background: var(--in-content-page-background) !important; + color: var(--in-content-page-color) !important; + } + .DevHub-Footer { + background: var(--in-content-box-background) !important; + color: var(--in-content-page-color) !important; + } + .DevHub-callout-box { + background: var(--in-content-box-background-odd) !important; + color: var(--in-content-page-color) !important; + } + .DevHub-Navigation.scheme-light ul li a, + .DevHub-Footer-sections-header, + .DevHub-Footer-section h4, + .DevHub-Footer-section p, + .DevHub-content-copy h2 { + color: var(--in-content-page-color) !important; + } + .DevHub-content-copy p, + .DevHub-callout-box p { + color: var(--in-content-deemphasized-text) !important; + } + .DevHub-Banner a, + .DevHub-Footer a, + .DevHub-MyAddons-list a, + .DevHub-MyAddons-item-buttons-all, + .DevHub-content-copy a, + .DevHub-callout-box a { + color: var(--in-content-link-color) !important; + } + body:is(.developer-hub, .statistics) { + /* Elements */ + /* .developer-hub */ + /* Text */ + /* .developer-hub */ + /* Background */ + /* Border */ + /* Others */ + } + body:is(.developer-hub, .statistics) #main-wrapper, + body:is(.developer-hub, .statistics) .menu-nav > ul > li > ul::after, + body:is(.developer-hub, .statistics) .menu-nav > ul > li:hover::after, + body:is(.developer-hub, .statistics) .menu-nav > ul > li > ul, + body:is(.developer-hub, .statistics) .menu-nav > ul > li > ul a, + body:is(.developer-hub, .statistics) .menu-nav em, + body:is(.developer-hub, .statistics) .primary, + body:is(.developer-hub, .statistics) .secondary, + body:is(.developer-hub, .statistics) .dashboard .listing .item { + background: var(--in-content-page-background) !important; + color: var(--in-content-page-color) !important; + } + body:is(.developer-hub, .statistics) .menu-nav > ul > li > ul a:hover, + body:is(.developer-hub, .statistics) .install-note, + body:is(.developer-hub, .statistics) .modal, + body:is(.developer-hub, .statistics) .popup { + background: var(--in-content-box-background-odd) !important; + } + body:is(.developer-hub, .statistics) .menu-nav > ul > li > ul::after, + body:is(.developer-hub, .statistics) .menu-nav > ul > li > ul { + box-shadow: 0 0 3px var(--in-content-border-color) !important; + } + body:is(.developer-hub, .statistics) #footer { + background: linear-gradient( + to bottom, + var(--in-content-page-background) 0, + var(--in-content-page-background) 123px, + #0c99d5 123px, + #0c99d5 200px, + var(--in-content-page-background) 200px, + rgba(12, 153, 213, 0) 400px + ) !important; + } + body:is(.developer-hub, .statistics) #homepage h2, + body:is(.developer-hub, .statistics) header h2, + body:is(.developer-hub, .statistics) .primary h2, + body:is(.developer-hub, .statistics) h1, + body:is(.developer-hub, .statistics) hgroup h2.addon, + body:is(.developer-hub, .statistics) hgroup h2.collection, + body:is(.developer-hub, .statistics) h3, + body:is(.developer-hub, .statistics) .results h4, + body:is(.developer-hub, .statistics) .dashboard .listing .item, + body:is(.developer-hub, .statistics) .dashboard .listing .item:hover h5, + body:is(.developer-hub, .statistics) .secondary .addon-status, + body:is(.developer-hub, .statistics) .secondary .addon-status .addon-details li.addon-listed-status, + body:is(.developer-hub, .statistics) #refine-results h5, + body:is(.developer-hub, .statistics) .island.criteria li, + body:is(.developer-hub, .statistics) .two-up div { + color: var(--in-content-page-color) !important; + } + body:is(.developer-hub, .statistics) .item-actions h5, + body:is(.developer-hub, .statistics) .item-actions > ul, + body:is(.developer-hub, .statistics) .item-actions > ul > li, + body:is(.developer-hub, .statistics) .dashboard .listing .item .item-actions a, + body:is(.developer-hub, .statistics) .edit-media-details, + body:is(.developer-hub, .statistics) .devhub-form table th, + body:is(.developer-hub, .statistics) #recent-activity .listing .item .timestamp, + body:is(.developer-hub, .statistics) #upload-file .upload-status #uploadstatus, + body:is(.developer-hub, .statistics) #addon-validator-suite, + body:is(.developer-hub, .statistics) #addon-validator-suite .msg > *, + body:is(.developer-hub, .statistics) .island.criteria li a.inactive { + color: var(--in-content-deemphasized-text) !important; + } + body:is(.developer-hub, .statistics) section[role="main"] a, + body:is(.developer-hub, .statistics) header a, + body:is(.developer-hub, .statistics) .more-info, + body:is(.developer-hub, .statistics) .primary a, + body:is(.developer-hub, .statistics) .secondary a, + body:is(.developer-hub, .statistics) .submission-type-tabs a, + body:is(.developer-hub, .statistics) .popup a, + body:is(.developer-hub, .statistics) .dashboard .listing .item:hover a, + body:is(.developer-hub, .statistics) .dashboard .listing .item:hover .item-actions a, + body:is(.developer-hub, .statistics) #upload-status-results.status-pass strong, + body:is(.developer-hub, .statistics) #addon-validator-suite a, + body:is(.developer-hub, .statistics) #create-addon a, + body:is(.developer-hub, .statistics) .html-support { + color: var(--in-content-link-color) !important; + } + body:is(.developer-hub, .statistics) .dashboard .listing .item:hover a { + color: var(--in-content-link-color-hover) !important; + } + body:is(.developer-hub, .statistics) .dashboard .listing .item .item-info .downloads, + body:is(.developer-hub, .statistics) .dashboard .listing .item .item-info .price, + body:is(.developer-hub, .statistics) .dashboard .listing .item .item-info .users { + color: var(--green-60) !important; + } + body:is(.developer-hub, .statistics) .status-admin-disabled b, + body:is(.developer-hub, .statistics) .status-disabled b, + body:is(.developer-hub, .statistics) .status-incomplete b, + body:is(.developer-hub, .statistics) .status-purgatory b { + color: var(--red-60) !important; + } + body:is(.developer-hub, .statistics) .submission-type-tabs a.active, + body:is(.developer-hub, .statistics) .island.criteria li.selected a { + color: var(--orange-50) !important; + } + body:is(.developer-hub, .statistics) .secondary .addon-status, + body:is(.developer-hub, .statistics) .devhub-form .item, + body:is(.developer-hub, .statistics) #icons_default, + body:is(.developer-hub, .statistics) .listing .item, + body:is(.developer-hub, .statistics) .object-lead, + body:is(.developer-hub, .statistics) #addon-validator-suite .results .tier-results, + body:is(.developer-hub, .statistics) #addon-validator-suite .suite, + body:is(.developer-hub, .statistics) #addon-validator-suite .suite-container { + border-color: var(--in-content-border-color) !important; + background: var(--in-content-box-background) !important; + } + body:is(.developer-hub, .statistics) .highlight, + body:is(.developer-hub, .statistics) .listing-footer, + body:is(.developer-hub, .statistics) .tab-wrapper .fm-control { + color: var(--in-content-page-color) !important; + background: var(--in-content-box-info-background) !important; + } + body:is(.developer-hub, .statistics) .submission-type-tabs a, + body:is(.developer-hub, .statistics) #head-chart { + background: var(--in-content-page-background) !important; + } + body:is(.developer-hub, .statistics) #head-chart rect { + fill: var(--in-content-page-background) !important; + } + body:is(.developer-hub, .statistics) #head-chart text { + fill: var(--in-content-deemphasized-text) !important; + } + body:is(.developer-hub, .statistics) #head-chart .highcharts-legend .highcharts-legend-item:hover text { + fill: var(--in-content-page-color) !important; + paint-order: stroke !important; + stroke: var(--in-content-page-color) !important; + stroke-width: 0.4px !important; + stroke-linecap: butt !important; + stroke-linejoin: miter !important; + } + body:is(.developer-hub, .statistics) + #head-chart + .highcharts-legend + .highcharts-legend-item + path[stroke="#CCC"] + ~ text { + fill: #ccc !important; + } + body:is(.developer-hub, .statistics) #icons_default li a:hover, + body:is(.developer-hub, .statistics) #side-nav .active a, + body:is(.developer-hub, .statistics) span.tip, + body:is(.developer-hub, .statistics) .addon-submission-process .tip, + body:is(.developer-hub, .statistics) .devhub-form .tip, + body:is(.developer-hub, .statistics) a.remove, + body:is(.developer-hub, .statistics) span.remove, + body:is(.developer-hub, .statistics) ul.errorlist li span.tip { + background-color: var(--in-content-box-info-background) !important; + } + body:is(.developer-hub, .statistics) a.remove:hover, + body:is(.developer-hub, .statistics) span.tip:hover { + background-color: var(--in-content-primary-button-background-hover) !important; + } + body:is(.developer-hub, .statistics) .submission-type-tabs a, + body:is(.developer-hub, .statistics) .devhub-sidebar, + body:is(.developer-hub, .statistics) .devhub-sidebar div.item, + body:is(.developer-hub, .statistics) .devhub-form .listing-footer { + border-color: var(--in-content-border-color) !important; + } + body:is(.developer-hub, .statistics) #background-wrapper, + body:is(.developer-hub, .statistics) #main-wrapper { + border-color: var(--in-content-page-background) !important; + } + body:is(.developer-hub, .statistics) .item-actions a.more-actions:hover:after, + body:is(.developer-hub, .statistics) .item-actions button.link.more-actions:hover:after, + body:is(.developer-hub, .statistics) #change-locale::after { + border-top-color: var(--in-content-link-color) !important; + } + body:is(.developer-hub, .statistics) install-note::after, + body:is(.developer-hub, .statistics) .popup::after { + border-bottom-color: var(--in-content-box-background) !important; + } + body:is(.developer-hub, .statistics) .install-note::before, + body:is(.developer-hub, .statistics) .popup::before { + border-bottom-color: grey !important; + } + body:is(.developer-hub, .statistics) #refine-results, + body:is(.developer-hub, .statistics) .other-categories, + body:is(.developer-hub, .statistics) .versions .primary > .warning { + border-color: transparent !important; + } + body:is(.developer-hub, .statistics) .results { + border-color: var(--in-content-box-background-odd) !important; + background: transparent !important; + } + body:is(.developer-hub, .statistics) .results-inner { + border-color: var(--in-content-border-color) !important; + background: var(--in-content-border-color) !important; + } + body:is(.developer-hub, .statistics) #promos .view-button a, + body:is(.developer-hub, .statistics) #upload-file-finish.button, + body:is(.developer-hub, .statistics) #upload-file-widget .button.prominent, + body:is(.developer-hub, .statistics) .button, + body:is(.developer-hub, .statistics) .cta a.button:link, + body:is(.developer-hub, .statistics) .cta a.button:visited, + body:is(.developer-hub, .statistics) .linux .button.linux, + body:is(.developer-hub, .statistics) .mac .button.mac, + body:is(.developer-hub, .statistics) .other .button.bsd, + body:is(.developer-hub, .statistics) .other .button.solaris, + body:is(.developer-hub, .statistics) .sidebar a.button, + body:is(.developer-hub, .statistics) .sidebar button, + body:is(.developer-hub, .statistics) .theme .choices button, + body:is(.developer-hub, .statistics) .theme-queue a.button, + body:is(.developer-hub, .statistics) .theme-queue button, + body:is(.developer-hub, .statistics) .windows .button.windows, + body:is(.developer-hub, .statistics) a.button:link, + body:is(.developer-hub, .statistics) a.button:visited, + body:is(.developer-hub, .statistics) a.delete-button.delete-addon, + body:is(.developer-hub, .statistics) button, + body:is(.developer-hub, .statistics) button.button, + body:is(.developer-hub, .statistics) input:not(.upvotes):not(.downvotes)[type="submit"] { + color: var(--in-content-primary-button-text-color) !important; + background: var(--in-content-primary-button-background) !important; + } + body:is(.developer-hub, .statistics) #promos .view-button a:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) #upload-file-finish.button:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) #upload-file-widget .button.prominent:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) .button:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) .cta a.button:link:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) .cta a.button:visited:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) .linux .button.linux:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) .mac .button.mac:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) .other .button.bsd:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) .other .button.solaris:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) .sidebar a.button:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) .sidebar button:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) .theme .choices button:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) .theme-queue a.button:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) .theme-queue button:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) .windows .button.windows:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) a.button:link:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) a.button:visited:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) a.delete-button.delete-addon:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) button:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) button.button:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) + input:not(.upvotes):not(.downvotes)[type="submit"]:is(.selected, :focus, :hover) { + background: var(--in-content-primary-button-background-hover) !important; + } + body:is(.developer-hub, .statistics) .edit_with_prefix span, + body:is(.developer-hub, .statistics) .edit_with_suffix span { + border-color: var(--in-content-box-border-color) !important; + background-color: var(--in-content-box-background-odd) !important; + color: var(--in-content-deemphasized-text) !important; + padding-block: 3px !important; + cursor: not-allowed; + } + body:is(.developer-hub, .statistics) .devhub-form .item_wrapper input[type="email"] { + appearance: none !important; + padding: 2px 5px; + border: 1px solid; + } + body:is(.developer-hub, .statistics) #addon-validator-suite .suite-summary { + color: var(--in-content-deemphasized-text) !important; + background: var(--in-content-button-background) !important; + border-top-color: var(--in-content-border-color) !important; + } + body:is(.developer-hub, .statistics) #addon-validator-suite .context { + border-color: var(--in-content-box-border-color) !important; + background-color: var(--in-content-button-background) !important; + background: var(--in-content-table-background) !important; + } + } + /*= Support.org ============================================================*/ + @-moz-document url-prefix("https://support.mozilla.org") + { + /* Basic */ + :root { + --color-blue-06: var(--in-content-link-color) !important; + --color-blue-07: var(--in-content-link-color-hover) !important; + --color-blue-09: var(--in-content-link-color-active) !important; + --page-bg: var(--in-content-page-background) !important; + --color-white: var(--in-content-page-background) !important; + --color-shade-bg: var(--in-content-page-background) !important; + --color-marketing-gray-02: var(--card-outline-color) !important; + --color-inverse-bg: var(--in-content-page-color) !important; + --color-inverse: var(--in-content-page-background) !important; + --color-text: var(--in-content-page-color) !important; + --color-moz-text: var(--in-content-page-color) !important; + --color-moz-heading: var(--in-content-page-color) !important; + --color-text-light: var(--in-content-deemphasized-text) !important; + --color-link: var(--in-content-link-color) !important; + --color-success: var(--green-70) !important; + --color-warning: var(--yellow-80) !important; + --color-error: var(--red-60) !important; + --color-error-hover: var(--red-50) !important; + --color-moz-heading: #fff; + --color-moz-inverse-bg: var(red) !important; + --focus-shadow: 0 0 0 4px color-mix(in srgb, var(--in-content-primary-button-background) 30%, transparent), + 0 0 0 2px var(--in-content-primary-button-background-active); + --color-dark-gray-10: var(--in-content-deemphasized-text) !important; + } + .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 */ + blockquote, + .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, + img:is(.pencil, .thumbsup, .syncing.icon), + #step-indicator li:not([status="done"])::before { + 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; + } + blockquote { + border-color: var(--in-content-border-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 (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, + .nav-active, + .links a, + .link-blue, + .text-blue-500 { + color: var(--in-content-link-color) !important; + } + .link-blue:hover { + color: var(--in-content-link-color-hover) !important; + } + .signed-in-email-message, + .verification-email-message, + .verification-message, + .verification-recovery-code-message, + .verification-totp-message, + .input-row input[type="email"], + .input-row input[type="number"], + .input-row input[type="password"], + .input-row input[type="tel"], + .input-row input[type="text"], + .input-row input::placeholder, + .input-text, + .firefox-family-services > ul > .firefox-service, + .faint, + .faint a, + .text-grey-400 { + color: var(--in-content-deemphasized-text) !important; + } + /* Background */ + .flex .flex-wrap { + background: var(--in-content-page-background); + } + .password-row .show-password-label { + background-color: unset !important; + } + #main-content, + .modal, + .firefox-family-services, + .input-row input[type="email"], + .input-row input[type="number"], + .input-row input[type="password"], + .input-row input[type="tel"], + .input-row input[type="text"], + .input-text, + header, + .card, + .card-base, + .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; + } + .nav-active, + .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; + } + div[data-testid="settings-connected-service"] + svg:is( + [data-testid="mobile-icon"], + [data-testid="desktop-icon"], + [data-testid="tablet-icon"], + [data-testid="vr-icon"], + [data-testid="addon-icon"] + ), + header button svg, + header .rounded svg, + #service svg { + filter: brightness(15) !important; + } + button.relative, + #fxa-settings nav svg { + filter: brightness(2) !important; + } + /* Others */ + .border-grey-100, + .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; + } + .border-grey-100:hover, + .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; + } + } + @media -moz-pref("userContent.page.dark_mode.pdf") { + @-moz-document unobservable-document() { + @-moz-document regexp("^(?!.*\\.pdf\\?n).*") { + #outerContainer { + --sidebaritem-bg-color: #38383d; + --uc-pdf-dark-filter: grayscale(10%) invert(90%); + } + #sidebarContainer > #sidebarContent > #thumbnailView .thumbnailImage { + filter: var(--uc-pdf-dark-filter); + box-shadow: 0 0 0 1px hsla(0deg, 0%, 100%, 0.5), 0 2px 8px hsla(0deg, 0%, 100%, 0.3) !important; + } + #viewerContainer > #viewer > .page > .canvasWrapper > canvas { + filter: var(--uc-pdf-dark-filter); + } + } + } + } + } +} +/** Fully Proton Mode *********************************************************/ +@media -moz-pref("userContent.page.proton") { + /*= Common contents ==========================================================*/ /*= abouts' common ===========================================================*/ + @-moz-document url-prefix("about:"), url-prefix("chrome://pippki/content/"), url-prefix("chrome://browser/content/") + { + xul|treecols { + border-bottom-color: var(--in-content-box-border-color) !important; + } + } + @-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; + } + @media -moz-pref("userChrome.rounding.square_button") { + button, + select, + input[type="color"] { + border-radius: 0 !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 */ + } + @media -moz-pref("userChrome.rounding.square_checklabel") { + input[type="checkbox"] { + border-radius: 0 !important; + } + } + input[type="checkbox"]:enabled:hover { + background-color: var(--checkbox-unchecked-hover-bgcolor) !important; + } + input[type="checkbox"]:enabled:hover:active { + background-color: var(--checkbox-unchecked-active-bgcolor) !important; + } + input[type="checkbox"]:checked { + border-color: var(--checkbox-checked-border-color) !important; + background-color: var(--checkbox-checked-bgcolor) !important; + background-image: url("chrome://global/skin/icons/check.svg") !important; + background-position: center !important; + background-repeat: no-repeat !important; + -moz-context-properties: fill !important; + fill: currentColor !important; + color: var(--checkbox-checked-color) !important; + /* Style the button also when printing with "Print Backgrounds" unchecked */ + color-adjust: exact !important; + } + input[type="checkbox"]:enabled:checked:hover { + background-color: var(--checkbox-checked-hover-bgcolor) !important; + } + input[type="checkbox"]:enabled:checked:hover:active { + background-color: var(--checkbox-checked-active-bgcolor) !important; + } + /* Textarea */ + input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]), + textarea { + appearance: none !important; + border: 1px solid var(--in-content-box-border-color) !important; + border-radius: 4px !important; + color: inherit !important; + background-color: var(--in-content-box-background) !important; + } + input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]), + textarea { + font-family: inherit !important; + font-size: inherit !important; + padding: 8px !important; + margin: 2px 4px !important; + } + input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):focus, + textarea:focus, + search-textbox[focused], + tree:focus-visible, + richlistbox:focus-visible { + border-color: transparent !important; + outline: 2px solid var(--in-content-focus-outline-color) !important; + outline-offset: -1px !important; /* Prevents antialiasing around the corners */ + } + input:is( + [type="email"], + [type="tel"], + [type="text"], + [type="password"], + [type="url"], + [type="number"] + ):-moz-ui-invalid, + textarea:-moz-ui-invalid { + border-color: transparent !important; + outline: 2px solid var(--in-content-border-invalid) !important; + outline-offset: -1px !important; /* Prevents antialiasing around the corners */ + } + input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):disabled, + textarea:disabled, + search-textbox[disabled="true"] { + opacity: 0.4 !important; + } + /* Table */ + table { + width: 100% !important; + } + } + @-moz-document url-prefix("about:plugins"), url-prefix("about:cache"), url-prefix("about:checkerboard") { + table { + border: 1px solid var(--in-content-table-border-color) !important; + border-radius: 0 !important; + } + } + @-moz-document url-prefix("about:cache"), url-prefix("about:checkerboard") { + th, + td { + border: 1px solid var(--in-content-table-border-color) !important; + } + th { + background-color: var(--in-content-table-header-background) !important; + color: var(--in-content-table-header-color) !important; + } + } + /*= Field Border =============================================================*/ + @media -moz-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 (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; + } + } + /*= about:preferences ========================================================*/ + @-moz-document url-prefix("chrome://browser/content") + { + #sanitizeEverythingWarningIcon { + list-style-image: url("chrome://global/skin/icons/warning.svg") !important; + -moz-context-properties: fill; + fill: var(--uc-warning-icon-bgcolor); + width: 48px; + height: 48px; + } + } + @-moz-document url-prefix("about:preferences"), url-prefix("chrome://browser/content/preferences/dialogs/"), url-prefix("chrome://pippki/content/") + { + :is(.contentPane, .main-content, #certmanagertabs) richlistbox > richlistitem:hover, + #translations-manage-install-list > .translations-manage-language:hover { + background-color: var(--in-content-item-hover); + color: var(--in-content-item-hover-text); + } + :is(.contentPane, .main-content, #certmanagertabs) richlistbox > richlistitem[selected="true"], + #translations-manage-install-list > .translations-manage-language[selected="true"] { + background-color: var(--in-content-item-selected); + color: var(--in-content-item-selected-text); + } + :is(.contentPane, .main-content, #certmanagertabs) + richlistbox + > richlistitem:nth-child(even):not([selected="true"], :hover), + #translations-manage-install-list > .translations-manage-language:nth-child(even):not([selected="true"], :hover) { + background-color: var(--in-content-box-background-odd); + } + } + @-moz-document url-prefix("about:preferences") { + .privacy-extra-information > .custom-option:not(:first-child) { + margin-block: 2px !important; /* Original: 10px */ + } + .extra-information-label:not(:first-child) { + margin-top: 4px !important; /* Original: 19px */ + } + } + /*= about:processes ==========================================================*/ + @-moz-document url-prefix("about:processes"), url-prefix("about:performance") { + td.type.favicon[style*='background-image: url("chrome://global/skin/icons/link.svg");'] + { + background-image: url("../icons/link.svg") !important; + } + .profiler-icon { + cursor: pointer; + background-image: url("../icons/performance.svg") !important; + background-repeat: no-repeat !important; + background-position: center !important; + color: inherit !important; + } + @media not -moz-pref("userChrome.rounding.square_button") { + .profiler-icon { + border-radius: 8px !important; + } + } + } + @-moz-document url-prefix("about:profiling") { + .perf-intro-icon { + background-image: url("../icons/performance.svg") !important; + } + } + /*= about:processes ==========================================================*/ + @-moz-document url-prefix("about:support") { + #reset-box-button { + --in-content-focus-outline-color: var(--in-content-danger-button-background) !important; + background-color: var(--in-content-danger-button-background) !important; + color: var(--in-content-primary-button-text-color) !important; + border-color: var(--in-content-primary-button-border-color) !important; + } + #reset-box-button:enabled:hover { + background-color: var(--in-content-danger-button-background-hover) !important; + color: var(--in-content-primary-button-text-color-hover) !important; + border-color: var(--in-content-primary-button-border-hover) !important; + } + #reset-box-button:enabled:hover:active { + background-color: var(--in-content-danger-button-background-active) !important; + color: var(--in-content-primary-button-text-color-active) !important; + border-color: var(--in-content-primary-button-border-active) !important; + } + } + /*= chrome://browser/content/places/places.xhtml =============================*/ + @-moz-document url("chrome://browser/content/places/places.xhtml") + { + /** Library - Icons Replace *************************************************/ + @media -moz-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: var(--uc-folder-icon) !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), + .bookmark-item[query][tagContainer] { + list-style-image: url("../icons/tag.svg") !important; + } + /* Bookmark */ + :-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, OrganizerQuery_allbms_____v) { + list-style-image: url("chrome://browser/skin/bookmark.svg") !important; + } + /* Bookmark Toolbar */ + #BMB_bookmarksPopup #BMB_bookmarksToolbar, + #bookmarksMenuPopup #bookmarksToolbarFolderMenu, + :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) + treechildren::-moz-tree-image(container, queryFolder_toolbar_____), + #editBMPanel_folderMenuList[selectedGuid="toolbar_____"], + #editBMPanel_toolbarFolderItem, + #bookmarksToolbarFolderMenu, + #BMB_bookmarksToolbar, + #panelMenu_bookmarksToolbar, + #bookmarks-toolbar-button, + #bookmarks-toolbar-placeholder { + list-style-image: url("../icons/bookmarks-toolbar-alt.svg") !important; + } + /* Bookmark Menu */ + :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) + treechildren::-moz-tree-image(container, queryFolder_menu________) { + list-style-image: url("chrome://browser/skin/places/bookmarksMenu.svg") !important; + } + /*= Default Icon - Open ======================================================*/ + /* Query */ + :-moz-any(#PlacesToolbar, #BMB_bookmarksPopup, #bookmarksMenu) + .bookmark-item[container="true"][query="true"]:not([tagContainer])[open="true"] + > .menu-iconic-left + > .menu-iconic-icon { + transform: rotate(15deg) !important; + } + /* History */ + :-moz-any(#historyTree, #placesList, #placeContent) + treechildren::-moz-tree-image(title, query, open, dayContainer), + :-moz-any(#historyTree, #placesList, #placeContent) + treechildren::-moz-tree-image(query, open, OrganizerQuery_history____v) { + list-style-image: url("../icons/history-reverse.svg") !important; + } + /* Tag */ + :-moz-any(#PlacesToolbar, #BMB_bookmarksPopup, #bookmarksMenu) + .bookmark-item[container="true"][tagContainer="true"][open="true"], + :-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(title, query, open, tagContainer), + :-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, open, OrganizerQuery_tags_______v) { + list-style-image: url("../icons/tag-open.svg") !important; + } + /* Bookmark */ + :-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, open, OrganizerQuery_allbms_____v) { + list-style-image: url("chrome://browser/skin/bookmark-hollow.svg") !important; + } + /* Bookmark Toolbar */ + #BMB_bookmarksPopup #BMB_bookmarksToolbar[open="true"], + #bookmarksMenuPopup #bookmarksToolbarFolderMenu[open="true"], + :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) + treechildren::-moz-tree-image(container, open, queryFolder_toolbar_____) { + list-style-image: url("../icons/bookmarksToolbar-open-alt.svg") !important; + } + /* Bookmark Menu */ + :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) + treechildren::-moz-tree-image(container, open, queryFolder_menu________) { + list-style-image: url("../icons/bookmarksMenu-open.svg") !important; /* or bookmarksMenu-open2.svg" */ + } + /*= Menubar - Icons ==========================================================*/ + #organizeButton, + #viewMenu, + #maintenanceButton, + #back-button, + #forward-button, + #clearDownloadsButton { + fill: currentColor !important; + -moz-context-properties: fill, fill-opacity, stroke !important; + } + /* Add */ + #organizeButton { + list-style-image: url("chrome://global/skin/icons/settings.svg") !important; + } + #viewMenu { + list-style-image: url("../icons/sort.svg") !important; + } + #maintenanceButton { + list-style-image: url("../icons/import-export.svg") !important; + } + #clearDownloadsButton { + list-style-image: url("chrome://global/skin/icons/delete.svg") !important; + } + #clearDownloadsButton > .toolbarbutton-icon { + display: inline-flex !important; + 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 ===============================================================*/ + @media -moz-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 (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; + } + @media -moz-pref("userChrome.rounding.square_button") { + #placesToolbar > toolbarbutton { + border-radius: 0 !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 > :is(.menubar-text, .menu-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; + padding-block: 5px !important; + padding-inline-start: 5px !important; + border-radius: 4px !important; + margin-inline-end: 2px !important; + } + @media -moz-pref("userChrome.rounding.square_button") { + #placesMenu > menu { + border-radius: 0 !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 > :is(.menubar-text, .menu-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; + } + @media -moz-pref("userChrome.rounding.square_field") { + #searchFilter, + #detailsPane html|input { + border-radius: 0 !important; + } + } + #searchFilter[focused] { + box-shadow: var(--organizer-toolbar-field-focus-box-shadow) !important; + background-color: var(--organizer-toolbar-field-background-focused) !important; + border-color: transparent !important; + outline: 2px solid var(--organizer-toolbar-field-focus-border-color) !important; + outline-offset: -2px !important; + } + /*- Sidebar & Splitter ---------------------------------------------------*/ + #placesList { + background-color: var(--organizer-pane-background) !important; + } + #placesView > splitter { + border: 0 !important; + border-inline-end: 1px solid var(--organizer-border-color) !important; + min-width: 0 !important; + width: 3px !important; + background-color: transparent !important; + margin-inline-start: -3px !important; + position: relative !important; + } + /*- Downloads Pane -------------------------------------------------------*/ + #downloadsRichListBox, + #downloadsListBox { + color: var(--organizer-color) !important; + background-color: var(--organizer-content-background) !important; + } + #clearDownloadsButton:focus-visible { + outline: 2px solid var(--organizer-outline-color) !important; + } + richlistitem[selected="true"], + richlistitem:hover { + background-color: var(--organizer-hover-background) !important; + color: var(--organizer-color) !important; + } + richlistbox:where(:focus) > richlistitem[selected="true"] { + background-color: var(--organizer-selected-background) !important; + } + /*- Tree -----------------------------------------------------------------*/ + #contentView treecol { + /* Use box-shadow to draw a bottom border instead of border-bottom + * because otherwise the items on contentView won't be perfectly + * aligned with the items on the sidebar. */ + box-shadow: inset 0 -1px var(--organizer-border-color) !important; + } + tree { + background-color: var(--organizer-content-background) !important; + color: var(--organizer-color) !important; + } + treecol:not([hideheader="true"]), + treecolpicker { + appearance: none !important; + border: none !important; + background-color: var(--in-content-button-background) !important; + color: var(--organizer-color, inherit) !important; + padding: 5px 10px !important; + } + treecol:not([hideheader="true"], [sortable="false"]):hover, + treecolpicker:hover { + background-color: var(--organizer-hover-background) !important; + color: var(--organizer-color) !important; + } + treecol:not([hideheader="true"], [sortable="false"]):hover:active, + treecolpicker:hover:active { + background-color: var(--organizer-selected-background) !important; + } + treecol:not([hideheader="true"], :first-child), + treecolpicker { + padding-left: 10px !important; + border-inline-start-width: 1px !important; + border-inline-start-style: solid !important; + border-image: linear-gradient( + transparent 0%, + transparent 20%, + var(--organizer-border-color) 20%, + var(--organizer-border-color) 80%, + transparent 80%, + transparent 100% + ) + 1 1 !important; + } + treecol[sortDirection]:not([hideheader="true"]) > xul|*.treecol-sortdirection { + fill: currentColor !important; + width: 18px !important; + height: 18px !important; + } + treechildren::-moz-tree-row { + background-color: transparent !important; + } + treechildren::-moz-tree-row(hover) { + background-color: var(--organizer-hover-background) !important; + } + treechildren::-moz-tree-row(selected) { + background-color: var(--organizer-selected-background) !important; + color: var(--organizer-selected-color) !important; + border: 1px solid transparent !important; + } + treechildren::-moz-tree-image(hover), + treechildren::-moz-tree-twisty(hover), + treechildren::-moz-tree-cell-text(hover) { + color: var(--organizer-hover-color) !important; + } + treechildren::-moz-tree-image(selected), + treechildren::-moz-tree-twisty(selected), + treechildren::-moz-tree-cell-text(selected) { + color: var(--organizer-selected-color) !important; + } + treechildren::-moz-tree-separator { + height: 1px !important; + border-color: var(--organizer-separator-color) !important; + } + treechildren::-moz-tree-separator(hover) { + border-color: var(--organizer-hover-color) !important; + } + treechildren::-moz-tree-separator(selected) { + border-color: var(--organizer-selected-color) !important; + } + treechildren::-moz-tree-cell-text(primary, dropOn), + treechildren::-moz-tree-drop-feedback { + background-color: var(--organizer-outline-color) !important; + } + /*- Info Box -------------------------------------------------------------*/ + #detailsPane { + background-color: var(--organizer-pane-background) !important; + color: var(--organizer-color) !important; + padding: 5px !important; + border-top: 1px solid var(--organizer-border-color) !important; + } + #editBookmarkPanelRows .expander-up, + #editBookmarkPanelRows .expander-down { + appearance: none !important; + min-width: 0 !important; + padding: 5px !important; + margin: 0 !important; + margin-inline-end: 4px !important; + border: 1px solid var(--organizer-pane-field-border-color) !important; + border-radius: 4px !important; + color: var(--organizer-color) !important; + background-color: var(--organizer-content-background) !important; + -moz-context-properties: fill !important; + fill: currentColor !important; + } + @media -moz-pref("userChrome.rounding.square_button") { + #editBookmarkPanelRows .expander-up, + #editBookmarkPanelRows .expander-down { + border-radius: 0 !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; + } + @media -moz-pref("userChrome.rounding.square_field") { + #places input { + border-radius: 0 !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; + } + @media -moz-pref("userChrome.rounding.square_field") { + #editBMPanel_tagsSelectorRow > richlistbox { + border-radius: 0 !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("../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; + align-items: center !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; + } + @media -moz-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; + } + @media -moz-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; + } + @media -moz-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; + } + @media -moz-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; + } + @media -moz-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; + } + @media -moz-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 (-moz-gtk-csd-available) and (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; + } + @media -moz-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; + } + @media -moz-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; + } + @media -moz-pref("userChrome.compatibility.accent_color") { + menuitem[type="checkbox"]:not([disabled="true"]):hover:active + > .menu-iconic-left[checked="true"] + > .menu-iconic-icon, + menuitem[type="checkbox"]:not([disabled="true"]):hover + > .menu-iconic-left[checked="true"] + > .menu-iconic-icon { + color: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important; + fill: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important; + } + } + } + menuitem[type="checkbox"] > .menu-iconic-text { + margin: 1px 0 !important; + } + menuitem[type="checkbox"][disabled="true"] { + opacity: 0.4 !important; + } + /*- Menu Separator -----------------------------------------------------------*/ + menuseparator { + appearance: none !important; + min-width: 2px; + min-height: 0; + border-top: 1px solid var(--in-content-box-border-color, ThreeDDarkShadow); + border-bottom: none; + padding: 0; + margin: var(--panel-separator-margin, 6px); + } + } + } + } +} +/** Rounding ******************************************************************/ +@media -moz-pref("userChrome.rounding.square_button") { + .all-buttons-container, + .highlight-buttons > button, + .cancel-shot, + #pictureInPictureToggle > .pip-small { + border-radius: 0 !important; + } + @-moz-document url-prefix("about:"), regexp("^chrome://\\w+/content/.*.xhtml$") + { + button:not(.toggle-button), + .close-icon, + .action-icon::before, + .page-section-header > .twisty, + .closed-tab-li-main, + #categories > .category, + .sidebar-footer-link { + border-radius: 0 !important; + } + } + @-moz-document url-prefix("about:debugging") { + .sidebar-item { + border-radius: 0 !important; + } + } + @-moz-document url-prefix("chrome://browser/content/places/places.xhtml"), url-prefix("about:downloads") + { + .downloadButton > .button-box { + border-radius: 0 !important; + } + } + @-moz-document url-prefix("about:protections") { + #manage-protections, + #sign-up-for-monitor-link, + #get-proxy-extension-link, + #get-vpn-link, + #vpn-banner-link, + .monitor-partial-breaches-link-wrapper, + .monitor-breaches-link-wrapper { + border-radius: 0 !important; + } + } + @-moz-document regexp(".*.pdf$") { + .toolbarButton, + .dropdownToolbarButton, + .secondaryToolbarButton, + .dialogButton { + border-radius: 0 !important; + } + } +} +@media -moz-pref("userChrome.rounding.square_dialog") { + @-moz-document url("about:home"), url("about:newtab") { + .modal { + border-radius: 0 !important; + } + } +} +@media -moz-pref("userChrome.rounding.square_checklabel") { + @-moz-document url-prefix("about:"), regexp("^chrome://\\w+/content/.*.xhtml$") + { + input[type="checkbox"]:not(.toggle-button), + .checkbox-check { + border-radius: 0 !important; + } + } +} +@media -moz-pref("userChrome.rounding.square_field") { + @-moz-document url-prefix("about:"), regexp("^chrome://\\w+/content/.*.xhtml$") + { + input:is( + [type="color"], + [type="email"], + [type="tel"], + [type="text"], + [type="password"], + [type="url"], + [type="number"] + ), + textarea, + select, + menulist, + tree, + treecols, + listheader, + richlistbox, + search-textbox, + .web-appearance-choice, + .content-blocking-category, + #translations-manage-install-list { + border-radius: 0 !important; + } + } + @-moz-document url-prefix("about:debugging") { + .default-input { + border-radius: 0 !important; + } + } + @-moz-document url("about:home"), url("about:newtab") { + .search-wrapper .search-handoff-button, + .search-wrapper input { + border-radius: 0 !important; + } + } + @-moz-document regexp(".*.pdf$") { + .toolbarField, + .thumbnailSelectionRing { + border-radius: 0 !important; + } + } +} +@media -moz-pref("userChrome.rounding.square_menupopup") { + @-moz-document url-prefix("about:"), url-prefix("chrome://") + { + panel, + menupopup { + --panel-border-radius: 0 !important; + } + } + @-moz-document url-prefix("about:addons") { + panel-list { + border-radius: 0 !important; + } + } + @-moz-document url-prefix("about:logins") { + .menu { + border-radius: 0 !important; + } + } + @-moz-document url("about:home"), url("about:newtab") { + .context-menu { + border-radius: 0 !important; + } + } + @-moz-document regexp(".*.pdf$") { + .doorHanger, + .doorHangerRight { + border-radius: 0 !important; + } + } +} +@media -moz-pref("userChrome.rounding.square_infobox") { + @-moz-document url-prefix("about:"), regexp("^chrome://\\w+/content/.*.xhtml$") + { + /* + * .container is inside shadow DOM, + * and it does not have any other classes, + * but there may be other elements with the same class, + * hence the weird selector. + */ + link[href="chrome://global/content/elements/message-bar.css"] + .container, + .info-box-container:not(.content-blocking-category), + .options-container, + #sanitizeEverythingWarningBox { + border-radius: 0 !important; + } + } + @-moz-document url-prefix("about:debugging") { + .message { + border-radius: 0 !important; + } + } + @-moz-document url-prefix("about:firefoxview") { + .card, + .card::before, + .empty-container, + .synced-tab-a, + .synced-tab-li-placeholder { + border-radius: 0 !important; + } + } +} +@-moz-document url-prefix("about:"), regexp(".*.pdf$") { + @media -moz-pref("userChrome.rounding.square_dialog") { + dialog, + .dialogBox { + border-radius: 0 !important; + } + } +} +@-moz-document url("chrome://browser/content/places/places.xhtml") +{ + /*= Library ==============================================================*/ + @media -moz-pref("userChrome.rounding.square_button") { + #placesToolbar > toolbarbutton, + #placesMenu > menu, + #editBookmarkPanelRows .expander-up, + #editBookmarkPanelRows .expander-down { + border-radius: 0 !important; + } + } + @media -moz-pref("userChrome.rounding.square_field") { + #searchFilter, + #detailsPane html|input, + #places input #editBMPanel_tagsSelectorRow > richlistbox { + border-radius: 0 !important; + } + } +} +/** Monospace *****************************************************************/ +@media -moz-pref("userContent.page.monospace") { + @-moz-document url-prefix("about:"), url-prefix("chrome://"), regexp("^((jar:)?file:///).*/$") + { + * { + font-family: -moz-fixed; + } + } +} +/** Menu - Icons Layout *******************************************************/ +@media not -moz-pref("userChrome.icon.disabled") { + @media -moz-pref("userChrome.icon.menu") { + @-moz-document url-prefix("about:"), url-prefix("chrome://"), regexp("^((jar:)?file:///).*/$") + { + :root { + --uc-folder-icon: url("chrome://global/skin/icons/folder.svg"); + } + @media -moz-pref("userChrome.icon.library") { + :root { + --uc-folder-icon: url("../icons/folder.svg"); + } + } + } + @-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"]), + menupopup menuitem:not([type="checkbox"][checked="true"], [type="radio"]) > .menu-iconic-left > .menu-iconic-icon, + menupopup menuitem:not([type="checkbox"][checked="true"], [type="radio"]) > .menu-icon, + menupopup menu:not([type="checkbox"][checked="true"], [type="radio"]) > .menu-iconic-left > .menu-iconic-icon, + menupopup menu:not([type="checkbox"][checked="true"], [type="radio"]) > .menu-icon { + -moz-appearance: none !important; /* Linux: menulist */ + } + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) + menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) + menu:not(.menu-iconic, .in-menulist, [checked="true"]), + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]) { + /* Color */ + -moz-context-properties: fill, fill-opacity, stroke !important; + fill: currentColor !important; + stroke: currentColor; + /* Layout */ + background-size: 16px !important; + background-repeat: no-repeat !important; + background-image: var(--menuitem-image); + } + /* For native context menus */ + @media -moz-pref("widget.macos.native-context-menus") or -moz-pref("widget.gtk.native-context-menus") { + :not(menu, #ContentSelectDropdown) + > menupopup:not(.in-menulist) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), + :not(menu, #ContentSelectDropdown) + > menupopup:not(.in-menulist) + > menu:not(.menu-iconic, .in-menulist, [checked="true"]) { + list-style-image: var(--menuitem-image, url("../icons/blank.svg")) !important; + } + } + /* Padding */ + :root { + --uc-menu-background-position: left; + --context-menu-background-padding-default: 5px; + --context-menu-background-padding: var(--context-menu-background-padding-default); + } + :root:-moz-locale-dir(rtl) { + --uc-menu-background-position: right; + } + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) + menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) + menu:not(.menu-iconic, .in-menulist, [checked="true"]), + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]) { + background-position: var(--uc-menu-background-position) var(--context-menu-background-padding) center !important; + padding-inline-start: var(--context-menu-background-padding) !important; + } + /* Padding - Non Native */ + @media (-moz-platform: windows) and (-moz-platform: windows), + (-moz-gtk-csd-available) and (-moz-platform: windows) { + :root { + --context-menu-background-padding: 1em; + --context-menu-text-padding-default: 24px; + --context-menu-text-padding: var(--context-menu-text-padding-default); + --menu-background-padding-default: calc( + var(--context-menu-background-padding) + var(--context-menu-text-padding) + ); + --bookmark-menu-icon-align-padding: 0px; + } + 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; + } + } + @media (-moz-platform: windows), (-moz-gtk-csd-available) { + @media -moz-pref("userChrome.theme.non_native_menu") { + @media (-moz-platform: windows) and (-moz-gtk-csd-available), + (-moz-gtk-csd-available) and (-moz-gtk-csd-available) { + :root { + --context-menu-background-padding: 1em; + --context-menu-text-padding-default: 24px; + --context-menu-text-padding: var(--context-menu-text-padding-default); + --menu-background-padding-default: calc( + var(--context-menu-background-padding) + var(--context-menu-text-padding) + ); + --bookmark-menu-icon-align-padding: 0px; + } + 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 - Windows */ + @media (-moz-platform: windows) { + :root { + --bookmark-menu-icon-text-padding: calc( + var(--context-menu-text-padding) + var(--arrowpanel-menuitem-padding-inline) + ); + --bookmark-menu-icon-background-padding: calc( + var(--arrowpanel-menuitem-padding-inline) + var(--bookmark-menu-icon-align-padding) + ); + } + } + /* Padding - Linux */ + @media (-moz-gtk-csd-available) { + :root { + --context-menu-background-padding-default: 6px; + --context-menu-text-padding: 21px; + } + .menu-icon { + display: unset !important; + } + #main-menubar > menu > .menu-icon { + display: none !important; + } + /* 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, + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) + menuitem[type="checkbox"] + > .menu-icon { + margin-inline-end: 0 !important; + } + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) + menuitem[type="checkbox"]:not([checked="true"]) + > .menu-iconic-left + > .menu-iconic-icon, + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) + menuitem[type="checkbox"]:not([checked="true"]) + > .menu-icon { + border: none !important; + background-color: unset !important; + } + } + /* Padding - Mac */ + @media -moz-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 ===========================================================*/ + @media -moz-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("../icons/toolbarButton-upload.svg"); + } + .downloadAlwaysUseSystemDefaultMenuItem { + /* checkbox */ + --menuitem-image: url("../icons/folder-globe.svg"); + } + .downloadAlwaysOpenSimilarFilesMenuItem { + /* checkbox */ + --menuitem-image: url("../icons/fluid.svg"); + } + .downloadShowMenuItem { + --menuitem-image: var(--uc-folder-icon); + } + #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: var(--uc-new-tab-icon); + } + #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("../icons/edit-active.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("../icons/edit-cut.svg"); + } + #placesContext_copy { + --menuitem-image: url("../icons/edit-copy.svg"); + } + #placesContext_paste_group { + --menuitem-image: url("../icons/edit-paste.svg"); + } + #placesContext_new\:bookmark { + --menuitem-image: url("chrome://browser/skin/bookmark.svg"); + } + #placesContext_showInFolder, + #placesContext_new\:folder { + --menuitem-image: var(--uc-folder-icon); + } + #placesContext_new\:separator { + --menuitem-image: url("../icons/vertical-line.svg"); + } + #placesContext_paste { + --menuitem-image: url("../icons/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"); + } + } + @media -moz-pref("userChrome.icon.global_menu") { + /*= organizeButtonPopup ======================================================*/ + #newbookmark { + --menuitem-image: url("chrome://browser/skin/bookmark.svg"); + } + #newfolder { + --menuitem-image: var(--uc-folder-icon); + } + #newseparator { + --menuitem-image: url("../icons/vertical-line.svg"); + } + #orgUndo { + --menuitem-image: url("../icons/undo.svg"); + } + @media -moz-pref("userChrome.icon.menu.full") { + #orgRedo { + --menuitem-image: url("../icons/redo.svg"); + } + } + #orgCut { + --menuitem-image: url("../icons/edit-cut.svg"); + } + #orgCopy { + --menuitem-image: url("../icons/edit-copy.svg"); + } + #orgPaste { + --menuitem-image: url("../icons/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("../icons/datastore.svg"); + } + @media -moz-pref("userChrome.icon.menu.full") { + #fileRestoreMenu { + --menuitem-image: url("../icons/datarestore.svg"); + } + } + #fileImport { + --menuitem-image: url("../icons/toolbarButton-download.svg"); + } + #fileExport { + --menuitem-image: url("../icons/toolbarButton-upload.svg"); + } + #browserImport { + --menuitem-image: url("chrome://browser/skin/import.svg"); + } + } + } + @-moz-document url-prefix("about:addons") { + @media -moz-pref("userChrome.icon.context_menu") { + button:is([role="menuitem"], [role="menuitemcheckbox"]) { + background-image: var(--icon, url("../icons/blank.svg")); /* Don't use !important. because of [checked] */ + } + panel-item[action="check-for-updates"] { + --icon: url("../icons/refresh-cw.svg"); + } + panel-item[action="view-recent-updates"] { + --icon: url("chrome://global/skin/icons/info.svg"); + } + panel-item[action="install-from-file"] { + --icon: url("chrome://devtools/skin/images/import.svg"); + } + panel-item[action="debug-addons"] { + --icon: url("../icons/bug.svg"); + } + panel-item[action="set-update-automatically"] { + --icon: url("chrome://devtools/skin/images/profiler-stopwatch.svg"); + } + panel-item[action="reset-update-states"] { + --icon: url("chrome://devtools/skin/images/debugging-workers.svg"); + } + panel-item[action="manage-shortcuts"], + panel-item[data-l10n-id="preferences-addon-button"], + panel-item[data-l10n-id="manage-addon-button"] { + --icon: url("chrome://global/skin/icons/settings.svg"); + } + } + } + @-moz-document url-prefix("about:logins") { + @media -moz-pref("userChrome.icon.context_menu") { + .menuitem-export { + background-image: url("../icons/toolbarButton-download.svg") !important; + } + } + } + } +} +/** Download Panel ************************************************************/ +@-moz-document url-prefix("about:downloads") { + @media (prefers-reduced-motion: no-preference) { + @media -moz-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; + } + } + } +} /*@ DEPRECATED @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/ +/** Compatibility *************************************************************/ +@-moz-document url-prefix("about:preferences") { + .content-blocking-warning.info-box-container > hbox > .content-blocking-warning-image { + margin-inline-start: -7px !important; + margin-inline-end: 8px !important; + width: 20px !important; + } + #pane-experimental-search-results-header, + #pane-experimental-subtitle { + min-height: 27px !important; + padding-inline-start: 35px !important; + } + .translations-manage-language:first-child { + padding-block: 4px !important; + margin-bottom: 4px !important; + } + .translations-manage-language button { + min-height: var(--size-item-medium, 28px) !important; + max-height: var(--size-item-medium, 28px) !important; + } + #firefoxExperimentalCategory:not([hidden="true"]) { + display: inline-block; + } + #firefoxExperimentalCategory > label { + float: left; + } + #firefoxExperimentalCategory > hbox { + transform: translateY(5px); + } + #firefoxExperimentalCategory .description-deemphasized { + display: none; + } + #pane-experimental-featureGates > html|p[data-l10n-id="pane-experimental-description2"] { + border-bottom: 1px solid var(--in-content-border-color); + padding-bottom: 1.5em; + } +} +@-moz-document url-prefix("about:addons") { + #updates-message + .page-options-menu > .more-options-button { + box-sizing: content-box; + padding: 0 !important; + } + button[data-l10n-id="addon-updates-manual-updates-found"] { + height: 100%; + } + #categories { + padding-inline-end: 1px !important; /* Original: 4px */ + } +} +@-moz-document url-prefix("about:policies") { + #categories > .category { + box-sizing: border-box; + } +} +/** Video player **************************************************************/ +/* Control Bar Size */ +@media (-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 */ +@media (-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-bool-pref: "userContent.player.ui") and (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); + } +} +@media (-moz-bool-pref: "userContent.player.ui") { + video { + --duration-color: #eee; + --media-background: linear-gradient(transparent, rgba(26, 26, 26, 0.85)); + } +} +@media (-moz-bool-pref: "userContent.player.ui") and (prefers-contrast) { + video { + --duration-color: #929292; /* Like Original */ + --media-background: rgba(26, 26, 26, 0.8); /* Like Original */ + } +} +@media (-moz-bool-pref: "userContent.player.ui") { + #controlsContainer .controlBar { + background: var(--media-background) !important; + } + #controlsContainer .duration { + color: var(--duration-color) !important; /* Original: #929292 */ + } +} +@media (-moz-bool-pref: "userContent.player.ui") and (-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; + } +} +@media (-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; + } +} +@media (-moz-bool-pref: "userContent.player.noaudio") { + #controlsContainer .muteButton[noAudio] { + /* Remove volume button at noAudio */ + display: none !important; + } +} +/* Click to play UI */ +@media (-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 */ +@media (-moz-bool-pref: "userContent.player.animate") and (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 *************************/ + @media (-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; + } + } + @media (-moz-bool-pref: "userContent.page.field_border") and (-moz-bool-pref: "userContent.page.proton_color") and (-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 ********************************************/ + @media (-moz-bool-pref: "userChrome.icon.context_menu") { + .context-menu-list .context-menu-item button { + padding-inline-start: 0 !important; + } + .context-menu-list .context-menu-item button span { + /* Color */ + -moz-context-properties: fill, fill-opacity, stroke !important; + fill: currentColor !important; + stroke: currentColor; + /* Layout */ + background-size: 16px !important; + background-repeat: no-repeat !important; + background-image: var(--menuitem-image); + padding-inline-start: 24px; /* 16p + (4px * 2) */ + background-position: var(--uc-menu-background-position, left) 4px center; + } + .context-menu-list .context-menu-item button span:dir(rtl) { + --uc-menu-background-position: right; + } + .context-menu-item span[data-l10n-id="newtab-menu-pin"] { + --menuitem-image: url("../icons/pin-tab.svg"); + } + .context-menu-item span[data-l10n-id="newtab-menu-unpin"] { + --menuitem-image: url("../icons/unpin-tab.svg"); + } + .context-menu-item span[data-l10n-id="newtab-menu-edit-topsites"] { + --menuitem-image: url("../icons/edit-active.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"); + } + } + @media (-moz-bool-pref: "userChrome.icon.context_menu") and (-moz-bool-pref: "userChrome.icon.library") { + .context-menu-item span[data-l10n-id="newtab-menu-show-file"] { + --menuitem-image: url("../icons/folder.svg"); + } + } + @media (-moz-bool-pref: "userChrome.icon.context_menu") { + .context-menu-item span[data-l10n-id="newtab-menu-open-new-window"] { + --menuitem-image: url("chrome://browser/skin/window.svg"); + } + } + @media (-moz-bool-pref: "userChrome.icon.context_menu") { + .context-menu-item span[data-l10n-id="newtab-menu-open-new-private-window"] { + --menuitem-image: url("chrome://browser/skin/privateBrowsing.svg"); + } + } + @media (-moz-bool-pref: "userChrome.icon.context_menu") { + .context-menu-item span[data-l10n-id="newtab-menu-dismiss"] { + --menuitem-image: url("chrome://global/skin/icons/delete.svg"); + } + } + @media (-moz-bool-pref: "userChrome.icon.context_menu") { + .context-menu-item span[data-l10n-id="newtab-menu-delete-history"] { + --menuitem-image: url("../icons/eraser.svg"); + } + } + /** Activity Stream - Web Site Icon: full size ******************************/ + @media (-moz-bool-pref: "userContent.newTab.full_icon") { + .top-site-outer { + width: 120px !important; /* v135: calc(var(--size-item-large) * 3); */ + } + .top-site-outer .tile { + width: 80px !important; /* v135: calc(var(--size-item-large) * 2); */ + height: 80px !important; /* v135: calc(var(--size-item-large) * 2); */ + overflow: hidden; + } + .top-site-outer .icon-wrapper { + width: 100% !important; /* Original: 48px */ + height: 100% !important; /* Original: 48px */ + } + .top-site-outer.add-button .tile .icon-wrapper { + width: 24px !important; + height: 24px !important; + } + .top-site-outer .context-menu-button { + top: 0px !important; /* Original: -20px */ + right: 0px !important; + width: 22px !important; + height: 22px !important; + } + .top-site-outer .context-menu { + top: 16.75px !important; /* Original: 6.75px */ + } + } + /** Activity Stream - Animate ***********************************************/ + @media (-moz-bool-pref: "userContent.newTab.animate") and (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-wrapper .search-inner-wrapper > input, + .search-wrapper .search-inner-wrapper > .search-handoff-button { + transition: 1s var(--animation-easing-function); + transition-property: border-color, box-shadow; + } + .search-wrapper .search-inner-wrapper:active > input, + .search-wrapper .search-inner-wrapper:active > .search-handoff-button, + .search-wrapper .search-inner-wrapper > input:focus, + .search-wrapper .search-inner-wrapper > .search-handoff-button:focus { + transition: border-color 0.5s var(--animation-easing-function), box-shadow 1s var(--animation-easing-function); + } + } + @media (-moz-bool-pref: "userContent.newTab.animate") and (prefers-reduced-motion: no-preference) and (-moz-bool-pref: "userContent.page.field_border") { + .search-wrapper .search-inner-wrapper:hover > input, + .search-wrapper .search-inner-wrapper:hover > .search-handoff-button { + border-color: var(--newtab-primary-action-background) !important; + transition: border-color 0.5s var(--animation-easing-function); + } + } /** Activity Stream - Pocket order to last **********************************/ + @media (-moz-bool-pref: "userContent.newTab.pocket_to_last") { + .body-wrapper.on { + display: flex; + flex-wrap: wrap !important; + flex-direction: row !important; + } + .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 *********************/ + @media (-moz-bool-pref: "userContent.newTab.searchbar") { + /* Dropdown Colors */ + #root { + --newtab-search-background-color: rgba(255, 255, 255, 1); /* Same as light theme's --panel-background */ + /* Set search dropdown background */ + --newtab-search-dropdown-header-color: var(--newtab-search-background-color) !important; + --newtab-search-dropdown-color: var(--newtab-search-background-color) !important; + --newtab-element-hover-color: color-mix(in srgb, currentColor 9%, transparent) !important; + } + /* Padding */ + /* Pointer */ + /*- Fix Color For Nightly ------------------------------------------------*/ + } + @media (-moz-bool-pref: "userContent.newTab.searchbar") and (prefers-color-scheme: dark) { + #root { + /* Default Dark Mode */ + --newtab-search-background-color: rgba(66, 65, 77, 1); /* Same as dark theme's --panel-background */ + } + } + @media (-moz-bool-pref: "userContent.newTab.searchbar") { + .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); + } + } + @media (-moz-bool-pref: "userContent.newTab.searchbar") { + #searchSuggestionTable { + border-radius: 4px !important; + -moz-window-shadow: cliprounded; + } + } + @media (-moz-bool-pref: "userContent.newTab.searchbar") { + .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; */ + } + } + @media (-moz-bool-pref: "userContent.newTab.searchbar") { + #contentSearchSettingsButton::before { + content: url("chrome://global/skin/icons/settings.svg") !important; + display: inline-flex; + display: -moz-inline-box; + /* Color */ + -moz-context-properties: fill, fill-opacity !important; + fill: currentColor !important; + /* Align */ + margin-inline-end: 5px; + vertical-align: -25%; + } + } + @media (-moz-bool-pref: "userContent.newTab.searchbar") { + .contentSearchSuggestionTable .contentSearchOneOffItem, + #contentSearchSettingsButton { + cursor: pointer; + } + } + @media (-moz-bool-pref: "userContent.newTab.searchbar") { + .contentSearchSuggestionTable, + .contentSearchHeaderRow, + .contentSearchHeader, + .contentSearchSuggestionsContainer { + color: var(--newtab-text-primary-color) !important; + background: var(--newtab-search-background-color) !important; + } + } + @media (-moz-bool-pref: "userContent.newTab.searchbar") { + .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; + } + } + /** Activity Stream - Hide Firefox's logo ***********************************/ + @media (-moz-bool-pref: "userContent.newTab.hidden_logo") { + .logo-and-wordmark { + display: none !important; + } + .outer-wrapper:not(.fixed-search) .search-wrapper { + padding-top: 0 !important; + } + } + /** Activity Stream - Custom background image *******************************/ + @media (-moz-bool-pref: "userContent.newTab.background_image") { + body::before { + content: ""; + position: fixed; + width: 100%; + height: 100%; + background-image: var(--uc-newTab-wallpaper, url("../icons/horizon-sunrise.svg")); + background-size: cover; /* or auto auto */ + background-repeat: no-repeat; + background-position: right top; + background-attachment: fixed; + /** Use night sky version in dark mode **********************************/ + } + } + @media (-moz-bool-pref: "userContent.newTab.background_image") and (prefers-color-scheme: dark) { + body::before { + background-image: var(--uc-newTab-wallpaper, url("../icons/horizon-night.svg")); + } + } +} +/** Error Page - Restore illustrations ****************************************/ +@media (-moz-bool-pref: "userContent.page.illustration") { + @-moz-document url-prefix("about:neterror"), url-prefix("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml"), url("about:sessionrestore"), url("chrome://browser/content/aboutSessionRestore.xhtml") + { + /* Illustrations Position */ + #errorPageContainer, + .neterror > .container, + .description-wrapper { + min-height: 300px; + background-position: left center; + background-repeat: no-repeat; + background-size: 38%; + background-image: var(--uc-error-llustration); + } + #errorPageContainer { + display: flex; + flex-direction: column; + } + .description-wrapper { + padding-inline-start: 38%; + } + /* Container */ + .container { + min-width: var(--in-content-container-min-width); /* 13em */ + max-width: var(--in-content-container-max-width); /* 52em */ + } + /* Text Position */ + #text-container { + margin: auto; + padding-inline-start: 38%; + } + } + @-moz-document url-prefix("about:neterror?e=connectionFailure"), url-prefix("about:neterror?e=netInterrupt"), url-prefix("about:neterror?e=netReset"), url-prefix("about:neterror?e=netTimeout"), url-prefix("about:neterror?e=netOffline"), url-prefix("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml") + { + :root { + --uc-error-llustration: url(../icons/error-connection-failure.svg); + } + } + @-moz-document url-prefix("about:neterror?e=dnsNotFound") { + :root { + --uc-error-llustration: url(../icons/error-server-not-found.svg); + } + } + @-moz-document url-prefix("about:neterror?e=blockedByPolicy"), url-prefix("about:neterror?e=deniedPortAccess"), url-prefix("about:neterror?e=malformedURI") { + :root { + --uc-error-llustration: url(chrome://browser/skin/illustrations/error-malformed-url.svg); + } + } + @-moz-document url-prefix("about:neterror?e=clockSkewError"), url-prefix("about:neterror?e=nssFailure") { + :root { + --uc-error-llustration: url(../icons/blue-berror.svg); + } + #errorPageContainer, + .neterror > .container { + background-size: 18.5em; + } + } + @-moz-document url("about:sessionrestore"), url("chrome://browser/content/aboutSessionRestore.xhtml") + { + :root { + --uc-error-llustration: url(../icons/error-session-restore.svg); + } + } + @-moz-document url-prefix("about:neterror?e=fileNotFound") { + @media (-moz-bool-pref: "userContent.page.illustration") and (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 (-moz-bool-pref: "userContent.page.illustration") and (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 (-moz-bool-pref: "userContent.page.illustration") and (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 (-moz-bool-pref: "userContent.page.illustration") and (min-width: 970px) { + .title { + background-image: url("../icons/welcome-back.svg") !important; + } + } + } + @-moz-document url-prefix("about:preferences") { + #no-results-message::after { + content: url("../icons/no-search-results.svg"); + width: 380px; + height: 293px; + margin-top: 64px; + margin-inline: auto; + } + } +} +/** Fully Dark Mode ***********************************************************/ +/*= Fully Dark Mode - Dark Mode Colors =======================================*/ +@media (-moz-bool-pref: "userContent.page.proton_color") { + @-moz-document url-prefix("about:"), url-prefix("chrome://"), 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:///).*/$") + { + /*= Default Colors - Hard Coded ==============================================*/ + /* Based on chrome://global/skin/in-content/common.css */ + :host, + :root { + --in-content-page-color: rgb(21, 20, 26); + --in-content-page-background: #fff; + --in-content-text-color: var(--in-content-page-color); + --in-content-deemphasized-text: rgb(91, 91, 102); + --in-content-box-background: #fff; + --in-content-box-background-odd: rgba(12, 12, 13, 0.05); /* grey 90 a05 */ + --in-content-box-border-color: color-mix(in srgb, currentColor 41%, transparent); + --in-content-box-info-background: #f0f0f4; + --in-content-item-hover: color-mix(in srgb, var(--in-content-primary-button-background) 20%, transparent); + --in-content-item-hover-text: var(--in-content-page-color); + --in-content-item-selected: var(--in-content-primary-button-background); + --in-content-item-selected-text: var(--in-content-primary-button-text-color); + --in-content-icon-color: rgb(91, 91, 102); + --in-content-accent-color: #0a84ff; + --in-content-accent-color-active: #0060df; + --in-content-border-hover: var(--grey-90-a50); + --in-content-border-invalid: var(--red-50); + --in-content-border-color: #d7d7db; + --in-content-error-text-color: #c50042; + --in-content-link-color: var(--blue-60); + --in-content-link-color-hover: var(--blue-70); + --in-content-link-color-active: var(--blue-80); + --in-content-link-color-visited: var(--blue-60); + /* button background states are also used for checkboxes and radio buttons */ + --in-content-button-text-color: var(--in-content-text-color); + --in-content-button-text-color-hover: var(--in-content-text-color); + --in-content-button-background: rgba(207, 207, 216, 0.33); + --in-content-button-background-hover: rgba(207, 207, 216, 0.66); + --in-content-button-background-active: rgb(207, 207, 216); + --in-content-primary-button-text-color: rgb(251, 251, 254); + --in-content-primary-button-text-color-hover: var(--in-content-primary-button-text-color); + --in-content-primary-button-background: #0061e0; + --in-content-primary-button-background-hover: #0250bb; + --in-content-primary-button-background-active: #053e94; + --in-content-danger-button-background: #e22850; + --in-content-danger-button-background-hover: #c50042; + --in-content-danger-button-background-active: #810220; + --in-content-focus-outline-color: var(--in-content-primary-button-background); + /* Note: 1px smaller than we want because we have a 1px transparent border. */ + /* Once proton ships, these can probably stop being variables. */ + --in-content-button-border-radius: 4px; + --in-content-button-horizontal-padding: 15px; + --in-content-button-vertical-padding: 7px; + --in-content-table-background: #f8f8fa; + --in-content-table-border-color: var( + --in-content-box-border-color + ); /* Legacy: #d1d1d1; rgba(249, 249, 250, 0.2) */ + --in-content-table-border-dark-color: var(--in-content-table-border-color); + --in-content-table-header-background: var( + --in-content-primary-button-background + ); /* Legacy: #0a84ff; rgb(5, 64, 150); */ + --in-content-table-header-color: var( + --in-content-primary-button-text-color + ); /* Legacy: #ffffff; var(--in-content-page-color); */ + --in-content-sidebar-width: 240px; + --dialog-warning-text-color: var(--red-60); + --checkbox-border-color: var(--in-content-box-border-color); + --checkbox-unchecked-bgcolor: var(--in-content-button-background); + --checkbox-unchecked-hover-bgcolor: var(--in-content-button-background-hover); + --checkbox-unchecked-active-bgcolor: var(--in-content-button-background-active); + --checkbox-checked-bgcolor: var(--in-content-primary-button-background); + --checkbox-checked-color: var(--in-content-primary-button-text-color); + --checkbox-checked-border-color: transparent; + --checkbox-checked-hover-bgcolor: var(--in-content-primary-button-background-hover); + --checkbox-checked-active-bgcolor: var(--in-content-primary-button-background-active); + --blue-40: #45a1ff; + --blue-50: #0a84ff; + --blue-60: #0060df; + --blue-70: #003eaa; + --blue-80: #002275; + --grey-30: #d7d7db; + --grey-60: #4a4a4f; + --grey-90-a10: rgba(12, 12, 13, 0.1); + --grey-90-a20: rgba(12, 12, 13, 0.2); + --grey-90-a30: rgba(12, 12, 13, 0.3); + --grey-90-a50: rgba(12, 12, 13, 0.5); + --grey-90-a60: rgba(12, 12, 13, 0.6); + --green-50: #30e60b; + --green-60: #12bc00; + --green-70: #058b00; + --green-80: #006504; + --green-90: #003706; + --orange-50: #ff9400; + --red-40: #ff4f5e; + --red-50: #ff0039; + --red-60: #d70022; + --red-70: #a4000f; + --red-80: #5a0002; + --red-90: #3e0200; + --yellow-50: #ffe900; + --yellow-60: #d7b600; + --yellow-60-a30: rgba(215, 182, 0, 0.3); + --yellow-70: #a47f00; + --yellow-80: #715100; + --yellow-90: #3e2800; + --shadow-10: 0 1px 4px var(--grey-90-a10); + --shadow-30: 0 4px 16px var(--grey-90-a10); + --card-padding: 16px; + --card-shadow: var(--shadow-10); + --card-outline-color: var(--grey-30); + --card-shadow-hover: var(--card-shadow), 0 0 0 5px var(--card-outline-color); + --uc-warning-icon-bgcolor: #ffa436; + } + @media (-moz-bool-pref: "userContent.page.proton_color") and (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); + --uc-warning-icon-bgcolor: #ffbd4f; + } + } + @media (-moz-bool-pref: "userContent.page.proton_color") and (prefers-contrast) { + :host, + :root { + --uc-warning-icon-bgcolor: var(--in-content-page-color); + } + } + /*= Menu color #477 ==========================================================*/ + @media (-moz-bool-pref: "userContent.page.proton_color") and (-moz-platform: windows) { + :root { + /* Override some menu color variables for light browser themes. */ + --menuitem-hover-background-color: #e0e0e6; + --menu-background-color: #f9f9fb; + --menu-color: #15141a; + --menuitem-disabled-hover-background-color: rgba(224, 224, 230, 0.4); + --menu-disabled-color: rgba(21, 20, 26, 0.4); + --menu-border-color: #cfcfd8; + --menu-icon-opacity: 0.7; + /* Declare menu colors for dark themes, but don't override anything yet. */ + --dark-menuitem-hover-background-color: #52525e; + --dark-menu-background-color: #2b2a33; + --dark-menu-color: #fbfbfe; + --dark-menuitem-disabled-hover-background-color: rgba(82, 82, 94, 0.4); + --dark-menu-disabled-color: rgba(251, 251, 254, 0.4); + --dark-menu-border-color: #5b5b66; + --dark-menu-icon-opacity: 1; + } + /* Override the menu color variables for dark browser themes. */ + } + @media (-moz-bool-pref: "userContent.page.proton_color") and (-moz-platform: windows) and (prefers-color-scheme: dark) { + :root { + --menuitem-hover-background-color: var(--dark-menuitem-hover-background-color); + --menu-background-color: var(--dark-menu-background-color); + --menu-color: var(--dark-menu-color); + --menuitem-disabled-hover-background-color: var(--dark-menuitem-disabled-hover-background-color); + --menu-disabled-color: var(--dark-menu-disabled-color); + --menu-border-color: var(--dark-menu-border-color); + --menu-icon-opacity: var(--dark-menu-icon-opacity); + } + } + @media (-moz-bool-pref: "userContent.page.proton_color") and (-moz-bool-pref: "userChrome.theme.non_native_menu") and (-moz-gtk-csd-available) { + :root { + /* Override some menu color variables for light browser themes. */ + --menuitem-hover-background-color: #e0e0e6; + --menu-background-color: #f9f9fb; + --menu-color: #15141a; + --menuitem-disabled-hover-background-color: rgba(224, 224, 230, 0.4); + --menu-disabled-color: rgba(21, 20, 26, 0.4); + --menu-border-color: #cfcfd8; + --menu-icon-opacity: 0.7; + /* Declare menu colors for dark themes, but don't override anything yet. */ + --dark-menuitem-hover-background-color: #52525e; + --dark-menu-background-color: #2b2a33; + --dark-menu-color: #fbfbfe; + --dark-menuitem-disabled-hover-background-color: rgba(82, 82, 94, 0.4); + --dark-menu-disabled-color: rgba(251, 251, 254, 0.4); + --dark-menu-border-color: #5b5b66; + --dark-menu-icon-opacity: 1; + } + /* Override the menu color variables for dark browser themes. */ + } + @media (-moz-bool-pref: "userContent.page.proton_color") and (-moz-bool-pref: "userChrome.theme.non_native_menu") and (-moz-gtk-csd-available) and (prefers-color-scheme: dark) { + :root { + --menuitem-hover-background-color: var(--dark-menuitem-hover-background-color); + --menu-background-color: var(--dark-menu-background-color); + --menu-color: var(--dark-menu-color); + --menuitem-disabled-hover-background-color: var(--dark-menuitem-disabled-hover-background-color); + --menu-disabled-color: var(--dark-menu-disabled-color); + --menu-border-color: var(--dark-menu-border-color); + --menu-icon-opacity: var(--dark-menu-icon-opacity); + } + } + @media (-moz-bool-pref: "userContent.page.proton_color") and (-moz-bool-pref: "userContent.page.proton_color.dark_blue_accent"), + (-moz-bool-pref: "userContent.page.proton_color") and (-moz-bool-pref: "userContent.page.proton_color.system_accent") { + :root, + :host(.anonymous-content-host) { + --color-accent-primary: var(--in-content-primary-button-background) !important; + --color-accent-primary-hover: var(--in-content-primary-button-background-hover) !important; + --color-accent-primary-active: light-dark(var(--color-blue-70), var(--color-cyan-20)); + } + } + @media (-moz-bool-pref: "userContent.page.proton_color") and (-moz-bool-pref: "userContent.page.proton_color.dark_blue_accent") and (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; + } + } + @media (-moz-bool-pref: "userContent.page.proton_color") and (-moz-bool-pref: "userContent.page.proton_color.system_accent") { + :host, + :root { + --in-content-primary-button-text-color: AccentColorText !important; + --in-content-primary-button-background: AccentColor !important; + --in-content-primary-button-background-hover: color-mix(in srgb, black 10%, AccentColor) !important; + --in-content-primary-button-background-active: color-mix(in srgb, black 20%, AccentColor) !important; + } + } + @media (-moz-bool-pref: "userContent.page.proton_color") and (-moz-bool-pref: "userContent.page.proton_color.system_accent") and (-moz-bool-pref: "userChrome.compatibility.accent_color") { + :host, + :root { + --in-content-primary-button-text-color: HighlightText !important; + --in-content-primary-button-background: Highlight !important; + --in-content-primary-button-background-hover: color-mix(in srgb, black 10%, Highlight) !important; + --in-content-primary-button-background-active: color-mix(in srgb, black 20%, Highlight) !important; + } + } + } +} +@media (-moz-bool-pref: "userContent.page.dark_mode") and (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, + .SearchResult-note, + .AddonMeta .MetadataCard-content a.AddonMeta-reviews-content-link, + .AddonMeta .MetadataCard-title a.AddonMeta-reviews-content-link, + .PermissionsCard-subhead--optional, + .PermissionsCard-subhead--required, + .Definition-dt, + .RatingsByStar-count a, + .RatingsByStar-star a, + .Paginate-page-number, + .AddonSummaryCard-addonAverage, + .AddonReviewCard-authorByLine, + .UserReview-byLine, + .UserReview-reply-header, + .Home-heroHeader-subtitle, + .blog-entry-date, + .blogpost-breadcrumb *, + .AddonTitle-author, + .ExpandableCard-ToggleLink, + .SearchFilters-label, + .PromotedBadge-label--line { + color: var(--in-content-deemphasized-text) !important; + } + .PromotedBadge-label--recommended { + color: color-mix(in srgb, #712b00 15%, #ff9400) !important; + } + /* Background */ + .Button--action, + .DevHub-Navigation ul li.DevHub-Navigation-Register .Button, + .DevHub-MyAddons-item-buttons-submit .Button { + color: var(--in-content-primary-button-text-color) !important; + background: var(--in-content-primary-button-background) !important; + } + select, + .Select, + .Button--primary, + .Button--neutral, + .Button--neutral:link, + .Notice-button, + .AMInstallButton .AMInstallButton-loading-button { + background-color: var(--in-content-button-background) !important; + } + .Button--primary:hover, + .Button--neutral.Button--micro:not(.Button--disabled):hover, + .Button--neutral:not(.Button--disabled):hover, + .Notice-button:hover { + background: var(--in-content-button-background-hover) !important; + } + .Button--action.Button--micro:not(.Button--disabled):hover, + .Button--action:not(.Button--disabled):hover, + .DevHub-Navigation ul li.DevHub-Navigation-Register .Button:hover, + .DevHub-MyAddons-item-buttons-submit .Button:hover { + background: var(--in-content-primary-button-background-hover) !important; + } + .ShowMoreCard-contents::after { + background: linear-gradient(hsla(0deg, 0%, 100%, 0), var(--in-content-table-background)) !important; + } + input, + textarea, + .AutoSearchInput-query, + .AutoSearchInput-suggestions-list, + .SecondaryHero-module, + .Card-header, + .Card-contents, + .CardList ul > li, + .AddonsCard--horizontal ul.AddonsCard-list .SearchResult-wrapper:is(:focus, :hover), + .Paginate, + .LandingPage-header, + .DropdownMenu-items, + .DropdownMenu-items::after, + .MetadataCard, + .AddonsCard-list, + .Card-footer, + .StaticAddonCard, + .blogpost-nav, + .blogpost-nav * { + background: var(--in-content-table-background) !important; + } + .Paginate .Button.Paginate-item:is(:active, :hover) { + background: var(--in-content-button-background-hover) !important; + } + .Notice-generic, + .Notice-genericWarning { + background: color-mix( + in srgb, + var(--in-content-page-background) 40%, + var(--in-content-table-background) + ) !important; + } + .LanguageTools-header-row { + color: var(--in-content-table-header-color) !important; + background: var(--in-content-table-header-background) !important; + } + .LanguageTools-table.responsiveTable tbody tr:nth-child(2n) { + background-color: var(--in-content-box-background-odd) !important; + } + /* Fill */ + .Icon-arrow-blue.SearchSuggestion-icon-arrow { + filter: hue-rotate(330deg) brightness(1.3) !important; + } + .SecondaryHero-module-icon { + filter: invert(85%) !important; + } + .Icon-magnifying-glass, + .Notice-icon { + filter: invert(65%) !important; + } + .PermissionsCard-learn-more .Icon, + .Permission .Icon { + filter: invert(100%) !important; + } + .Icon-heart { + filter: brightness(0) !important; + } + /* Others */ + .DropdownMenu-items { + box-shadow: 0 0 2px var(--in-content-border-color) !important; + } + input, + textarea, + select { + border-color: var(--in-content-box-border-color) !important; + } + .UserProfileEdit input:disabled, + .UserProfileEdit textarea:disabled { + background-color: var(--in-content-box-background-odd) !important; + } + .AutoSearchInput-query { + border: 1px solid var(--in-content-table-background) !important; + } + .AutoSearchInput-query:is(:hover, :focus), + .UserProfileEditNotifications .UserProfileEditNotification-input:checked ~ .UserProfileEditNotification-checkbox { + border-color: var(--in-content-primary-button-background) !important; + } + .UserProfileEdit input:focus, + .UserProfileEdit textarea:focus, + .AutoSearchInput-query:focus, + .UserProfileEditNotifications .UserProfileEditNotification-input:focus ~ .UserProfileEditNotification-checkbox { + box-shadow: inset 0 0 0 1px var(--in-content-primary-button-background), + 0 0 0 1px var(--in-content-primary-button-background), 0 0 0 4px rgba(0, 211, 255, 0.3) !important; + } + .PromotedBadge-link--line { + border-color: var(--in-content-deemphasized-text) !important; + } + .PromotedBadge-link--line:hover { + border-color: var(--in-content-button-background-hover) !important; + } + .blog-entry-read-more-link { + border-color: var(--in-content-link-color) !important; + } + .blogpost-nav-arrow-left .cls-1, + .blogpost-nav-arrow-right .cls-1 { + stroke: var(--in-content-text-color) !important; + } + /* /developers/ */ + .DevHub-Navigation-Logo > .Logo::before { + -moz-context-properties: fill !important; + fill: var(--in-content-primary-button-background) !important; + background-image: url("../icons/addons-logo.svg") !important; + } + .DevHub-Navigation, + .DevHub-submit-addon, + .DevHub-get-involved, + .DevHub-MyAddons > * { + background: var(--in-content-page-background) !important; + color: var(--in-content-page-color) !important; + } + .DevHub-Footer { + background: var(--in-content-box-background) !important; + color: var(--in-content-page-color) !important; + } + .DevHub-callout-box { + background: var(--in-content-box-background-odd) !important; + color: var(--in-content-page-color) !important; + } + .DevHub-Navigation.scheme-light ul li a, + .DevHub-Footer-sections-header, + .DevHub-Footer-section h4, + .DevHub-Footer-section p, + .DevHub-content-copy h2 { + color: var(--in-content-page-color) !important; + } + .DevHub-content-copy p, + .DevHub-callout-box p { + color: var(--in-content-deemphasized-text) !important; + } + .DevHub-Banner a, + .DevHub-Footer a, + .DevHub-MyAddons-list a, + .DevHub-MyAddons-item-buttons-all, + .DevHub-content-copy a, + .DevHub-callout-box a { + color: var(--in-content-link-color) !important; + } + body:is(.developer-hub, .statistics) { + /* Elements */ + /* .developer-hub */ + /* Text */ + /* .developer-hub */ + /* Background */ + /* Border */ + /* Others */ + } + body:is(.developer-hub, .statistics) #main-wrapper, + body:is(.developer-hub, .statistics) .menu-nav > ul > li > ul::after, + body:is(.developer-hub, .statistics) .menu-nav > ul > li:hover::after, + body:is(.developer-hub, .statistics) .menu-nav > ul > li > ul, + body:is(.developer-hub, .statistics) .menu-nav > ul > li > ul a, + body:is(.developer-hub, .statistics) .menu-nav em, + body:is(.developer-hub, .statistics) .primary, + body:is(.developer-hub, .statistics) .secondary, + body:is(.developer-hub, .statistics) .dashboard .listing .item { + background: var(--in-content-page-background) !important; + color: var(--in-content-page-color) !important; + } + body:is(.developer-hub, .statistics) .menu-nav > ul > li > ul a:hover, + body:is(.developer-hub, .statistics) .install-note, + body:is(.developer-hub, .statistics) .modal, + body:is(.developer-hub, .statistics) .popup { + background: var(--in-content-box-background-odd) !important; + } + body:is(.developer-hub, .statistics) .menu-nav > ul > li > ul::after, + body:is(.developer-hub, .statistics) .menu-nav > ul > li > ul { + box-shadow: 0 0 3px var(--in-content-border-color) !important; + } + body:is(.developer-hub, .statistics) #footer { + background: linear-gradient( + to bottom, + var(--in-content-page-background) 0, + var(--in-content-page-background) 123px, + #0c99d5 123px, + #0c99d5 200px, + var(--in-content-page-background) 200px, + rgba(12, 153, 213, 0) 400px + ) !important; + } + body:is(.developer-hub, .statistics) #homepage h2, + body:is(.developer-hub, .statistics) header h2, + body:is(.developer-hub, .statistics) .primary h2, + body:is(.developer-hub, .statistics) h1, + body:is(.developer-hub, .statistics) hgroup h2.addon, + body:is(.developer-hub, .statistics) hgroup h2.collection, + body:is(.developer-hub, .statistics) h3, + body:is(.developer-hub, .statistics) .results h4, + body:is(.developer-hub, .statistics) .dashboard .listing .item, + body:is(.developer-hub, .statistics) .dashboard .listing .item:hover h5, + body:is(.developer-hub, .statistics) .secondary .addon-status, + body:is(.developer-hub, .statistics) .secondary .addon-status .addon-details li.addon-listed-status, + body:is(.developer-hub, .statistics) #refine-results h5, + body:is(.developer-hub, .statistics) .island.criteria li, + body:is(.developer-hub, .statistics) .two-up div { + color: var(--in-content-page-color) !important; + } + body:is(.developer-hub, .statistics) .item-actions h5, + body:is(.developer-hub, .statistics) .item-actions > ul, + body:is(.developer-hub, .statistics) .item-actions > ul > li, + body:is(.developer-hub, .statistics) .dashboard .listing .item .item-actions a, + body:is(.developer-hub, .statistics) .edit-media-details, + body:is(.developer-hub, .statistics) .devhub-form table th, + body:is(.developer-hub, .statistics) #recent-activity .listing .item .timestamp, + body:is(.developer-hub, .statistics) #upload-file .upload-status #uploadstatus, + body:is(.developer-hub, .statistics) #addon-validator-suite, + body:is(.developer-hub, .statistics) #addon-validator-suite .msg > *, + body:is(.developer-hub, .statistics) .island.criteria li a.inactive { + color: var(--in-content-deemphasized-text) !important; + } + body:is(.developer-hub, .statistics) section[role="main"] a, + body:is(.developer-hub, .statistics) header a, + body:is(.developer-hub, .statistics) .more-info, + body:is(.developer-hub, .statistics) .primary a, + body:is(.developer-hub, .statistics) .secondary a, + body:is(.developer-hub, .statistics) .submission-type-tabs a, + body:is(.developer-hub, .statistics) .popup a, + body:is(.developer-hub, .statistics) .dashboard .listing .item:hover a, + body:is(.developer-hub, .statistics) .dashboard .listing .item:hover .item-actions a, + body:is(.developer-hub, .statistics) #upload-status-results.status-pass strong, + body:is(.developer-hub, .statistics) #addon-validator-suite a, + body:is(.developer-hub, .statistics) #create-addon a, + body:is(.developer-hub, .statistics) .html-support { + color: var(--in-content-link-color) !important; + } + body:is(.developer-hub, .statistics) .dashboard .listing .item:hover a { + color: var(--in-content-link-color-hover) !important; + } + body:is(.developer-hub, .statistics) .dashboard .listing .item .item-info .downloads, + body:is(.developer-hub, .statistics) .dashboard .listing .item .item-info .price, + body:is(.developer-hub, .statistics) .dashboard .listing .item .item-info .users { + color: var(--green-60) !important; + } + body:is(.developer-hub, .statistics) .status-admin-disabled b, + body:is(.developer-hub, .statistics) .status-disabled b, + body:is(.developer-hub, .statistics) .status-incomplete b, + body:is(.developer-hub, .statistics) .status-purgatory b { + color: var(--red-60) !important; + } + body:is(.developer-hub, .statistics) .submission-type-tabs a.active, + body:is(.developer-hub, .statistics) .island.criteria li.selected a { + color: var(--orange-50) !important; + } + body:is(.developer-hub, .statistics) .secondary .addon-status, + body:is(.developer-hub, .statistics) .devhub-form .item, + body:is(.developer-hub, .statistics) #icons_default, + body:is(.developer-hub, .statistics) .listing .item, + body:is(.developer-hub, .statistics) .object-lead, + body:is(.developer-hub, .statistics) #addon-validator-suite .results .tier-results, + body:is(.developer-hub, .statistics) #addon-validator-suite .suite, + body:is(.developer-hub, .statistics) #addon-validator-suite .suite-container { + border-color: var(--in-content-border-color) !important; + background: var(--in-content-box-background) !important; + } + body:is(.developer-hub, .statistics) .highlight, + body:is(.developer-hub, .statistics) .listing-footer, + body:is(.developer-hub, .statistics) .tab-wrapper .fm-control { + color: var(--in-content-page-color) !important; + background: var(--in-content-box-info-background) !important; + } + body:is(.developer-hub, .statistics) .submission-type-tabs a, + body:is(.developer-hub, .statistics) #head-chart { + background: var(--in-content-page-background) !important; + } + body:is(.developer-hub, .statistics) #head-chart rect { + fill: var(--in-content-page-background) !important; + } + body:is(.developer-hub, .statistics) #head-chart text { + fill: var(--in-content-deemphasized-text) !important; + } + body:is(.developer-hub, .statistics) #head-chart .highcharts-legend .highcharts-legend-item:hover text { + fill: var(--in-content-page-color) !important; + paint-order: stroke !important; + stroke: var(--in-content-page-color) !important; + stroke-width: 0.4px !important; + stroke-linecap: butt !important; + stroke-linejoin: miter !important; + } + body:is(.developer-hub, .statistics) + #head-chart + .highcharts-legend + .highcharts-legend-item + path[stroke="#CCC"] + ~ text { + fill: #ccc !important; + } + body:is(.developer-hub, .statistics) #icons_default li a:hover, + body:is(.developer-hub, .statistics) #side-nav .active a, + body:is(.developer-hub, .statistics) span.tip, + body:is(.developer-hub, .statistics) .addon-submission-process .tip, + body:is(.developer-hub, .statistics) .devhub-form .tip, + body:is(.developer-hub, .statistics) a.remove, + body:is(.developer-hub, .statistics) span.remove, + body:is(.developer-hub, .statistics) ul.errorlist li span.tip { + background-color: var(--in-content-box-info-background) !important; + } + body:is(.developer-hub, .statistics) a.remove:hover, + body:is(.developer-hub, .statistics) span.tip:hover { + background-color: var(--in-content-primary-button-background-hover) !important; + } + body:is(.developer-hub, .statistics) .submission-type-tabs a, + body:is(.developer-hub, .statistics) .devhub-sidebar, + body:is(.developer-hub, .statistics) .devhub-sidebar div.item, + body:is(.developer-hub, .statistics) .devhub-form .listing-footer { + border-color: var(--in-content-border-color) !important; + } + body:is(.developer-hub, .statistics) #background-wrapper, + body:is(.developer-hub, .statistics) #main-wrapper { + border-color: var(--in-content-page-background) !important; + } + body:is(.developer-hub, .statistics) .item-actions a.more-actions:hover:after, + body:is(.developer-hub, .statistics) .item-actions button.link.more-actions:hover:after, + body:is(.developer-hub, .statistics) #change-locale::after { + border-top-color: var(--in-content-link-color) !important; + } + body:is(.developer-hub, .statistics) install-note::after, + body:is(.developer-hub, .statistics) .popup::after { + border-bottom-color: var(--in-content-box-background) !important; + } + body:is(.developer-hub, .statistics) .install-note::before, + body:is(.developer-hub, .statistics) .popup::before { + border-bottom-color: grey !important; + } + body:is(.developer-hub, .statistics) #refine-results, + body:is(.developer-hub, .statistics) .other-categories, + body:is(.developer-hub, .statistics) .versions .primary > .warning { + border-color: transparent !important; + } + body:is(.developer-hub, .statistics) .results { + border-color: var(--in-content-box-background-odd) !important; + background: transparent !important; + } + body:is(.developer-hub, .statistics) .results-inner { + border-color: var(--in-content-border-color) !important; + background: var(--in-content-border-color) !important; + } + body:is(.developer-hub, .statistics) #promos .view-button a, + body:is(.developer-hub, .statistics) #upload-file-finish.button, + body:is(.developer-hub, .statistics) #upload-file-widget .button.prominent, + body:is(.developer-hub, .statistics) .button, + body:is(.developer-hub, .statistics) .cta a.button:link, + body:is(.developer-hub, .statistics) .cta a.button:visited, + body:is(.developer-hub, .statistics) .linux .button.linux, + body:is(.developer-hub, .statistics) .mac .button.mac, + body:is(.developer-hub, .statistics) .other .button.bsd, + body:is(.developer-hub, .statistics) .other .button.solaris, + body:is(.developer-hub, .statistics) .sidebar a.button, + body:is(.developer-hub, .statistics) .sidebar button, + body:is(.developer-hub, .statistics) .theme .choices button, + body:is(.developer-hub, .statistics) .theme-queue a.button, + body:is(.developer-hub, .statistics) .theme-queue button, + body:is(.developer-hub, .statistics) .windows .button.windows, + body:is(.developer-hub, .statistics) a.button:link, + body:is(.developer-hub, .statistics) a.button:visited, + body:is(.developer-hub, .statistics) a.delete-button.delete-addon, + body:is(.developer-hub, .statistics) button, + body:is(.developer-hub, .statistics) button.button, + body:is(.developer-hub, .statistics) input:not(.upvotes):not(.downvotes)[type="submit"] { + color: var(--in-content-primary-button-text-color) !important; + background: var(--in-content-primary-button-background) !important; + } + body:is(.developer-hub, .statistics) #promos .view-button a:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) #upload-file-finish.button:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) #upload-file-widget .button.prominent:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) .button:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) .cta a.button:link:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) .cta a.button:visited:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) .linux .button.linux:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) .mac .button.mac:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) .other .button.bsd:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) .other .button.solaris:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) .sidebar a.button:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) .sidebar button:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) .theme .choices button:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) .theme-queue a.button:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) .theme-queue button:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) .windows .button.windows:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) a.button:link:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) a.button:visited:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) a.delete-button.delete-addon:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) button:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) button.button:is(.selected, :focus, :hover), + body:is(.developer-hub, .statistics) + input:not(.upvotes):not(.downvotes)[type="submit"]:is(.selected, :focus, :hover) { + background: var(--in-content-primary-button-background-hover) !important; + } + body:is(.developer-hub, .statistics) .edit_with_prefix span, + body:is(.developer-hub, .statistics) .edit_with_suffix span { + border-color: var(--in-content-box-border-color) !important; + background-color: var(--in-content-box-background-odd) !important; + color: var(--in-content-deemphasized-text) !important; + padding-block: 3px !important; + cursor: not-allowed; + } + body:is(.developer-hub, .statistics) .devhub-form .item_wrapper input[type="email"] { + appearance: none !important; + padding: 2px 5px; + border: 1px solid; + } + body:is(.developer-hub, .statistics) #addon-validator-suite .suite-summary { + color: var(--in-content-deemphasized-text) !important; + background: var(--in-content-button-background) !important; + border-top-color: var(--in-content-border-color) !important; + } + body:is(.developer-hub, .statistics) #addon-validator-suite .context { + border-color: var(--in-content-box-border-color) !important; + background-color: var(--in-content-button-background) !important; + background: var(--in-content-table-background) !important; + } + } + /*= Support.org ============================================================*/ + @-moz-document url-prefix("https://support.mozilla.org") + { + /* Basic */ + :root { + --color-blue-06: var(--in-content-link-color) !important; + --color-blue-07: var(--in-content-link-color-hover) !important; + --color-blue-09: var(--in-content-link-color-active) !important; + --page-bg: var(--in-content-page-background) !important; + --color-white: var(--in-content-page-background) !important; + --color-shade-bg: var(--in-content-page-background) !important; + --color-marketing-gray-02: var(--card-outline-color) !important; + --color-inverse-bg: var(--in-content-page-color) !important; + --color-inverse: var(--in-content-page-background) !important; + --color-text: var(--in-content-page-color) !important; + --color-moz-text: var(--in-content-page-color) !important; + --color-moz-heading: var(--in-content-page-color) !important; + --color-text-light: var(--in-content-deemphasized-text) !important; + --color-link: var(--in-content-link-color) !important; + --color-success: var(--green-70) !important; + --color-warning: var(--yellow-80) !important; + --color-error: var(--red-60) !important; + --color-error-hover: var(--red-50) !important; + --color-moz-heading: #fff; + --color-moz-inverse-bg: var(red) !important; + --focus-shadow: 0 0 0 4px color-mix(in srgb, var(--in-content-primary-button-background) 30%, transparent), + 0 0 0 2px var(--in-content-primary-button-background-active); + --color-dark-gray-10: var(--in-content-deemphasized-text) !important; + } + .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 */ + blockquote, + .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, + img:is(.pencil, .thumbsup, .syncing.icon), + #step-indicator li:not([status="done"])::before { + 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; + } + blockquote { + border-color: var(--in-content-border-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-bool-pref: "userContent.page.dark_mode") 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, + .nav-active, + .links a, + .link-blue, + .text-blue-500 { + color: var(--in-content-link-color) !important; + } + .link-blue:hover { + color: var(--in-content-link-color-hover) !important; + } + .signed-in-email-message, + .verification-email-message, + .verification-message, + .verification-recovery-code-message, + .verification-totp-message, + .input-row input[type="email"], + .input-row input[type="number"], + .input-row input[type="password"], + .input-row input[type="tel"], + .input-row input[type="text"], + .input-row input::placeholder, + .input-text, + .firefox-family-services > ul > .firefox-service, + .faint, + .faint a, + .text-grey-400 { + color: var(--in-content-deemphasized-text) !important; + } + /* Background */ + .flex .flex-wrap { + background: var(--in-content-page-background); + } + .password-row .show-password-label { + background-color: unset !important; + } + #main-content, + .modal, + .firefox-family-services, + .input-row input[type="email"], + .input-row input[type="number"], + .input-row input[type="password"], + .input-row input[type="tel"], + .input-row input[type="text"], + .input-text, + header, + .card, + .card-base, + .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; + } + .nav-active, + .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; + } + div[data-testid="settings-connected-service"] + svg:is( + [data-testid="mobile-icon"], + [data-testid="desktop-icon"], + [data-testid="tablet-icon"], + [data-testid="vr-icon"], + [data-testid="addon-icon"] + ), + header button svg, + header .rounded svg, + #service svg { + filter: brightness(15) !important; + } + button.relative, + #fxa-settings nav svg { + filter: brightness(2) !important; + } + /* Others */ + .border-grey-100, + .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; + } + .border-grey-100:hover, + .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; + } + } +} +@media (-moz-bool-pref: "userContent.page.dark_mode") and (prefers-color-scheme: dark) and (-moz-bool-pref: "userContent.page.dark_mode.pdf") { + @-moz-document unobservable-document() { + @-moz-document regexp("^(?!.*\\.pdf\\?n).*") { + #outerContainer { + --sidebaritem-bg-color: #38383d; + --uc-pdf-dark-filter: grayscale(10%) invert(90%); + } + #sidebarContainer > #sidebarContent > #thumbnailView .thumbnailImage { + filter: var(--uc-pdf-dark-filter); + box-shadow: 0 0 0 1px hsla(0deg, 0%, 100%, 0.5), 0 2px 8px hsla(0deg, 0%, 100%, 0.3) !important; + } + #viewerContainer > #viewer > .page > .canvasWrapper > canvas { + filter: var(--uc-pdf-dark-filter); + } + } + } +} +/** Fully Proton Mode *********************************************************/ +@media (-moz-bool-pref: "userContent.page.proton") { + /*= Common contents ==========================================================*/ /*= abouts' common ===========================================================*/ + @-moz-document url-prefix("about:"), url-prefix("chrome://pippki/content/"), url-prefix("chrome://browser/content/") + { + xul|treecols { + border-bottom-color: var(--in-content-box-border-color) !important; + } + } + @-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; + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-bool-pref: "userChrome.rounding.square_button") { + button, + select, + input[type="color"] { + border-radius: 0 !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 */ + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-bool-pref: "userChrome.rounding.square_checklabel") { + input[type="checkbox"] { + border-radius: 0 !important; + } + } + input[type="checkbox"]:enabled:hover { + background-color: var(--checkbox-unchecked-hover-bgcolor) !important; + } + input[type="checkbox"]:enabled:hover:active { + background-color: var(--checkbox-unchecked-active-bgcolor) !important; + } + input[type="checkbox"]:checked { + border-color: var(--checkbox-checked-border-color) !important; + background-color: var(--checkbox-checked-bgcolor) !important; + background-image: url("chrome://global/skin/icons/check.svg") !important; + background-position: center !important; + background-repeat: no-repeat !important; + -moz-context-properties: fill !important; + fill: currentColor !important; + color: var(--checkbox-checked-color) !important; + /* Style the button also when printing with "Print Backgrounds" unchecked */ + color-adjust: exact !important; + } + input[type="checkbox"]:enabled:checked:hover { + background-color: var(--checkbox-checked-hover-bgcolor) !important; + } + input[type="checkbox"]:enabled:checked:hover:active { + background-color: var(--checkbox-checked-active-bgcolor) !important; + } + /* Textarea */ + input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]), + textarea { + appearance: none !important; + border: 1px solid var(--in-content-box-border-color) !important; + border-radius: 4px !important; + color: inherit !important; + background-color: var(--in-content-box-background) !important; + } + input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]), + textarea { + font-family: inherit !important; + font-size: inherit !important; + padding: 8px !important; + margin: 2px 4px !important; + } + input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):focus, + textarea:focus, + search-textbox[focused], + tree:focus-visible, + richlistbox:focus-visible { + border-color: transparent !important; + outline: 2px solid var(--in-content-focus-outline-color) !important; + outline-offset: -1px !important; /* Prevents antialiasing around the corners */ + } + input:is( + [type="email"], + [type="tel"], + [type="text"], + [type="password"], + [type="url"], + [type="number"] + ):-moz-ui-invalid, + textarea:-moz-ui-invalid { + border-color: transparent !important; + outline: 2px solid var(--in-content-border-invalid) !important; + outline-offset: -1px !important; /* Prevents antialiasing around the corners */ + } + input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):disabled, + textarea:disabled, + search-textbox[disabled="true"] { + opacity: 0.4 !important; + } + /* Table */ + table { + width: 100% !important; + } + } + @-moz-document url-prefix("about:plugins"), url-prefix("about:cache"), url-prefix("about:checkerboard") { + table { + border: 1px solid var(--in-content-table-border-color) !important; + border-radius: 0 !important; + } + } + @-moz-document url-prefix("about:cache"), url-prefix("about:checkerboard") { + th, + td { + border: 1px solid var(--in-content-table-border-color) !important; + } + th { + background-color: var(--in-content-table-header-background) !important; + color: var(--in-content-table-header-color) !important; + } + } + /*= Field Border =============================================================*/ + /*= View Source ==============================================================*/ + /*= Directory View ===========================================================*/ + /*= about:plugins ============================================================*/ + /*= about:cache ==============================================================*/ + /*= about:checkerboard =======================================================*/ + /*= about:memory =============================================================*/ + /*= about:preferences ========================================================*/ + /*= about:processes ==========================================================*/ + /*= about:processes ==========================================================*/ + /*= chrome://browser/content/places/places.xhtml =============================*/ +} +@media (-moz-bool-pref: "userContent.page.proton") and (-moz-bool-pref: "userContent.page.field_border") and (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); + } + } +} +@media (-moz-bool-pref: "userContent.page.proton") { + @-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-bool-pref: "userContent.page.proton") and (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 */ + } + } +} +@media (-moz-bool-pref: "userContent.page.proton") { + @-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; + } + } +} +@media (-moz-bool-pref: "userContent.page.proton") { + @-moz-document url-prefix("about:plugins") { + .notice { + background: var(--in-content-box-background) !important; + border: 1px solid var(--in-content-border-color) !important; + } + } +} +@media (-moz-bool-pref: "userContent.page.proton") { + @-moz-document url-prefix("about:cache") { + table { + padding: 0 !important; + } + th, + td { + padding: 4px !important; + text-align: match-parent !important; + } + } +} +@media (-moz-bool-pref: "userContent.page.proton") { + @-moz-document url-prefix("about:checkerboard") { + #canvas { + border: 1px solid var(--in-content-border-color) !important; + } + #excludePageFromZoom { + vertical-align: bottom !important; + } + } +} +@media (-moz-bool-pref: "userContent.page.proton") { + @-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; + } + } +} +@media (-moz-bool-pref: "userContent.page.proton") { + @-moz-document url-prefix("chrome://browser/content") + { + #sanitizeEverythingWarningIcon { + list-style-image: url("chrome://global/skin/icons/warning.svg") !important; + -moz-context-properties: fill; + fill: var(--uc-warning-icon-bgcolor); + width: 48px; + height: 48px; + } + } +} +@media (-moz-bool-pref: "userContent.page.proton") { + @-moz-document url-prefix("about:preferences"), url-prefix("chrome://browser/content/preferences/dialogs/"), url-prefix("chrome://pippki/content/") + { + :is(.contentPane, .main-content, #certmanagertabs) richlistbox > richlistitem:hover, + #translations-manage-install-list > .translations-manage-language:hover { + background-color: var(--in-content-item-hover); + color: var(--in-content-item-hover-text); + } + :is(.contentPane, .main-content, #certmanagertabs) richlistbox > richlistitem[selected="true"], + #translations-manage-install-list > .translations-manage-language[selected="true"] { + background-color: var(--in-content-item-selected); + color: var(--in-content-item-selected-text); + } + :is(.contentPane, .main-content, #certmanagertabs) + richlistbox + > richlistitem:nth-child(even):not([selected="true"], :hover), + #translations-manage-install-list > .translations-manage-language:nth-child(even):not([selected="true"], :hover) { + background-color: var(--in-content-box-background-odd); + } + } +} +@media (-moz-bool-pref: "userContent.page.proton") { + @-moz-document url-prefix("about:preferences") { + .privacy-extra-information > .custom-option:not(:first-child) { + margin-block: 2px !important; /* Original: 10px */ + } + .extra-information-label:not(:first-child) { + margin-top: 4px !important; /* Original: 19px */ + } + } +} +@media (-moz-bool-pref: "userContent.page.proton") { + @-moz-document url-prefix("about:processes"), url-prefix("about:performance") { + td.type.favicon[style*='background-image: url("chrome://global/skin/icons/link.svg");'] + { + background-image: url("../icons/link.svg") !important; + } + .profiler-icon { + cursor: pointer; + background-image: url("../icons/performance.svg") !important; + background-repeat: no-repeat !important; + background-position: center !important; + color: inherit !important; + } + @media (-moz-bool-pref: "userContent.page.proton") and (not (-moz-bool-pref: "userChrome.rounding.square_button")) { + .profiler-icon { + border-radius: 8px !important; + } + } + } +} +@media (-moz-bool-pref: "userContent.page.proton") { + @-moz-document url-prefix("about:profiling") { + .perf-intro-icon { + background-image: url("../icons/performance.svg") !important; + } + } +} +@media (-moz-bool-pref: "userContent.page.proton") { + @-moz-document url-prefix("about:support") { + #reset-box-button { + --in-content-focus-outline-color: var(--in-content-danger-button-background) !important; + background-color: var(--in-content-danger-button-background) !important; + color: var(--in-content-primary-button-text-color) !important; + border-color: var(--in-content-primary-button-border-color) !important; + } + #reset-box-button:enabled:hover { + background-color: var(--in-content-danger-button-background-hover) !important; + color: var(--in-content-primary-button-text-color-hover) !important; + border-color: var(--in-content-primary-button-border-hover) !important; + } + #reset-box-button:enabled:hover:active { + background-color: var(--in-content-danger-button-background-active) !important; + color: var(--in-content-primary-button-text-color-active) !important; + border-color: var(--in-content-primary-button-border-active) !important; + } + } +} +@media (-moz-bool-pref: "userContent.page.proton") { + @-moz-document url("chrome://browser/content/places/places.xhtml") + { + /** Library - Icons Replace *************************************************/ + @media (-moz-bool-pref: "userContent.page.proton") and (-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: var(--uc-folder-icon) !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), + .bookmark-item[query][tagContainer] { + list-style-image: url("../icons/tag.svg") !important; + } + /* Bookmark */ + :-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, OrganizerQuery_allbms_____v) { + list-style-image: url("chrome://browser/skin/bookmark.svg") !important; + } + /* Bookmark Toolbar */ + #BMB_bookmarksPopup #BMB_bookmarksToolbar, + #bookmarksMenuPopup #bookmarksToolbarFolderMenu, + :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) + treechildren::-moz-tree-image(container, queryFolder_toolbar_____), + #editBMPanel_folderMenuList[selectedGuid="toolbar_____"], + #editBMPanel_toolbarFolderItem, + #bookmarksToolbarFolderMenu, + #BMB_bookmarksToolbar, + #panelMenu_bookmarksToolbar, + #bookmarks-toolbar-button, + #bookmarks-toolbar-placeholder { + list-style-image: url("../icons/bookmarks-toolbar-alt.svg") !important; + } + /* Bookmark Menu */ + :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) + treechildren::-moz-tree-image(container, queryFolder_menu________) { + list-style-image: url("chrome://browser/skin/places/bookmarksMenu.svg") !important; + } + /*= Default Icon - Open ======================================================*/ + /* Query */ + :-moz-any(#PlacesToolbar, #BMB_bookmarksPopup, #bookmarksMenu) + .bookmark-item[container="true"][query="true"]:not([tagContainer])[open="true"] + > .menu-iconic-left + > .menu-iconic-icon { + transform: rotate(15deg) !important; + } + /* History */ + :-moz-any(#historyTree, #placesList, #placeContent) + treechildren::-moz-tree-image(title, query, open, dayContainer), + :-moz-any(#historyTree, #placesList, #placeContent) + treechildren::-moz-tree-image(query, open, OrganizerQuery_history____v) { + list-style-image: url("../icons/history-reverse.svg") !important; + } + /* Tag */ + :-moz-any(#PlacesToolbar, #BMB_bookmarksPopup, #bookmarksMenu) + .bookmark-item[container="true"][tagContainer="true"][open="true"], + :-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(title, query, open, tagContainer), + :-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, open, OrganizerQuery_tags_______v) { + list-style-image: url("../icons/tag-open.svg") !important; + } + /* Bookmark */ + :-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, open, OrganizerQuery_allbms_____v) { + list-style-image: url("chrome://browser/skin/bookmark-hollow.svg") !important; + } + /* Bookmark Toolbar */ + #BMB_bookmarksPopup #BMB_bookmarksToolbar[open="true"], + #bookmarksMenuPopup #bookmarksToolbarFolderMenu[open="true"], + :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) + treechildren::-moz-tree-image(container, open, queryFolder_toolbar_____) { + list-style-image: url("../icons/bookmarksToolbar-open-alt.svg") !important; + } + /* Bookmark Menu */ + :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) + treechildren::-moz-tree-image(container, open, queryFolder_menu________) { + list-style-image: url("../icons/bookmarksMenu-open.svg") !important; /* or bookmarksMenu-open2.svg" */ + } + /*= Menubar - Icons ==========================================================*/ + #organizeButton, + #viewMenu, + #maintenanceButton, + #back-button, + #forward-button, + #clearDownloadsButton { + fill: currentColor !important; + -moz-context-properties: fill, fill-opacity, stroke !important; + } + /* Add */ + #organizeButton { + list-style-image: url("chrome://global/skin/icons/settings.svg") !important; + } + #viewMenu { + list-style-image: url("../icons/sort.svg") !important; + } + #maintenanceButton { + list-style-image: url("../icons/import-export.svg") !important; + } + #clearDownloadsButton { + list-style-image: url("chrome://global/skin/icons/delete.svg") !important; + } + #clearDownloadsButton > .toolbarbutton-icon { + display: inline-flex !important; + 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-bool-pref: "userContent.page.proton") and (-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 ===============================================================*/ + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-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 (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; + } + /*- Search Bar & Input ---------------------------------------------------*/ + /*- Sidebar & Splitter ---------------------------------------------------*/ + /*- Downloads Pane -------------------------------------------------------*/ + /*- Tree -----------------------------------------------------------------*/ + /*- Info Box -------------------------------------------------------------*/ + /*- Radio Button -------------------------------------------------------------*/ + /* Disabled checkboxes, radios and labels */ + /*- Check Box ----------------------------------------------------------------*/ + /* From checkbox.css */ + /*- Menu Separator -----------------------------------------------------------*/ + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") and (-moz-bool-pref: "userChrome.rounding.square_button") { + #placesToolbar > toolbarbutton { + border-radius: 0 !important; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") { + #placesToolbar > toolbarbutton[disabled] { + opacity: 0.6 !important; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") { + #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; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") { + #placesToolbar > toolbarbutton > .toolbarbutton-icon, + #placesMenu > menu > image, + #placesMenu > menu > :is(.menubar-text, .menu-text) { + -moz-context-properties: fill !important; + fill: currentColor !important; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") { + #placesMenu { + margin-inline-start: 6px !important; + } + #placesMenu > menu { + appearance: none !important; + color: var(--organizer-color) !important; + padding-block: 5px !important; + padding-inline-start: 5px !important; + border-radius: 4px !important; + margin-inline-end: 2px !important; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") and (-moz-bool-pref: "userChrome.rounding.square_button") { + #placesMenu > menu { + border-radius: 0 !important; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") { + #placesMenu > menu[_moz-menuactive="true"], + #placesMenu > menu:hover { + background-color: var(--organizer-hover-background) !important; + color: var(--organizer-hover-color) !important; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") { + #placesMenu > menu:hover:active, + #placesMenu > menu[open] { + background-color: var(--organizer-selected-background) !important; + color: var(--organizer-selected-color) !important; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") { + #placesMenu > menu > :is(.menubar-text, .menu-text) { + margin-block: 0 !important; /* override menu.css */ + padding-inline-end: 4px !important; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") { + #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; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") and (-moz-bool-pref: "userChrome.rounding.square_field") { + #searchFilter, + #detailsPane html|input { + border-radius: 0 !important; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") { + #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; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") { + #placesList { + background-color: var(--organizer-pane-background) !important; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") { + #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; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") { + #downloadsRichListBox, + #downloadsListBox { + color: var(--organizer-color) !important; + background-color: var(--organizer-content-background) !important; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") { + #clearDownloadsButton:focus-visible { + outline: 2px solid var(--organizer-outline-color) !important; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") { + richlistitem[selected="true"], + richlistitem:hover { + background-color: var(--organizer-hover-background) !important; + color: var(--organizer-color) !important; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") { + richlistbox:where(:focus) > richlistitem[selected="true"] { + background-color: var(--organizer-selected-background) !important; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") { + #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; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") { + tree { + background-color: var(--organizer-content-background) !important; + color: var(--organizer-color) !important; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") { + 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; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") { + 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; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") { + 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; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") { + treecol[sortDirection]:not([hideheader="true"]) > xul|*.treecol-sortdirection { + fill: currentColor !important; + width: 18px !important; + height: 18px !important; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") { + treechildren::-moz-tree-row { + background-color: transparent !important; + } + treechildren::-moz-tree-row(hover) { + background-color: var(--organizer-hover-background) !important; + } + treechildren::-moz-tree-row(selected) { + background-color: var(--organizer-selected-background) !important; + color: var(--organizer-selected-color) !important; + border: 1px solid transparent !important; + } + treechildren::-moz-tree-image(hover), + treechildren::-moz-tree-twisty(hover), + treechildren::-moz-tree-cell-text(hover) { + color: var(--organizer-hover-color) !important; + } + treechildren::-moz-tree-image(selected), + treechildren::-moz-tree-twisty(selected), + treechildren::-moz-tree-cell-text(selected) { + color: var(--organizer-selected-color) !important; + } + treechildren::-moz-tree-separator { + height: 1px !important; + border-color: var(--organizer-separator-color) !important; + } + treechildren::-moz-tree-separator(hover) { + border-color: var(--organizer-hover-color) !important; + } + treechildren::-moz-tree-separator(selected) { + border-color: var(--organizer-selected-color) !important; + } + treechildren::-moz-tree-cell-text(primary, dropOn), + treechildren::-moz-tree-drop-feedback { + background-color: var(--organizer-outline-color) !important; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") { + #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; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") { + #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; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") and (-moz-bool-pref: "userChrome.rounding.square_button") { + #editBookmarkPanelRows .expander-up, + #editBookmarkPanelRows .expander-down { + border-radius: 0 !important; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") { + #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; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") { + #editBookmarkPanelRows .expander-up:focus-visible, + #editBookmarkPanelRows .expander-down:focus-visible { + outline: 2px solid var(--organizer-outline-color) !important; + outline-offset: -1px !important; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") { + #editBookmarkPanelRows .expander-up > .button-box, + #editBookmarkPanelRows .expander-down > .button-box { + padding: 0 !important; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") { + #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"); + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") { + #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; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") and (-moz-bool-pref: "userChrome.rounding.square_field") { + #places input { + border-radius: 0 !important; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") { + #places input:focus { + outline: 2px solid var(--organizer-outline-color) !important; + outline-offset: -1px !important; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") { + #places input:not(:read-write):focus { + outline: none !important; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") { + .caption-label { + margin-inline-start: 8px !important; + color: var(--organizer-deemphasized-color) !important; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") { + #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; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") and (-moz-bool-pref: "userChrome.rounding.square_field") { + #editBMPanel_tagsSelectorRow > richlistbox { + border-radius: 0 !important; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") { + #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; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") { + 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("../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; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") { + menuitem[type="radio"][disabled="true"], + menuitem[type="checkbox"][disabled="true"] { + color: inherit !important; + opacity: 0.5 !important; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") { + menuitem[type="checkbox"] { + appearance: none !important; + align-items: center !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; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") and (-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; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") { + 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; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") and (-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; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") { + 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; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") and (-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; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") { + 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; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") and (-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; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") { + 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; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") and (-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; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") { + 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; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") and (-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 (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") and (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; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") and (prefers-contrast) and (-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; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") and (prefers-contrast) { + menuitem[type="checkbox"] > .menu-iconic-left[checked="true"] { + color: var(--checkbox-checked-border-color, currentColor) !important; + fill: var(--checkbox-checked-color, AccentColorText) !important; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") and (prefers-contrast) and (-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; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") and (prefers-contrast) { + 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; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") and (prefers-contrast) and (-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; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") { + menuitem[type="checkbox"] > .menu-iconic-text { + margin: 1px 0 !important; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") { + menuitem[type="checkbox"][disabled="true"] { + opacity: 0.4 !important; + } + } + @media (-moz-bool-pref: "userContent.page.proton") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userContent.page.proton") { + 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); + } + } + } +} +/** Rounding ******************************************************************/ +@media (-moz-bool-pref: "userChrome.rounding.square_button") { + .all-buttons-container, + .highlight-buttons > button, + .cancel-shot, + #pictureInPictureToggle > .pip-small { + border-radius: 0 !important; + } + @-moz-document url-prefix("about:"), regexp("^chrome://\\w+/content/.*.xhtml$") + { + button:not(.toggle-button), + .close-icon, + .action-icon::before, + .page-section-header > .twisty, + .closed-tab-li-main, + #categories > .category, + .sidebar-footer-link { + border-radius: 0 !important; + } + } + @-moz-document url-prefix("about:debugging") { + .sidebar-item { + border-radius: 0 !important; + } + } + @-moz-document url-prefix("chrome://browser/content/places/places.xhtml"), url-prefix("about:downloads") + { + .downloadButton > .button-box { + border-radius: 0 !important; + } + } + @-moz-document url-prefix("about:protections") { + #manage-protections, + #sign-up-for-monitor-link, + #get-proxy-extension-link, + #get-vpn-link, + #vpn-banner-link, + .monitor-partial-breaches-link-wrapper, + .monitor-breaches-link-wrapper { + border-radius: 0 !important; + } + } + @-moz-document regexp(".*.pdf$") { + .toolbarButton, + .dropdownToolbarButton, + .secondaryToolbarButton, + .dialogButton { + border-radius: 0 !important; + } + } +} +@media (-moz-bool-pref: "userChrome.rounding.square_dialog") { + @-moz-document url("about:home"), url("about:newtab") { + .modal { + border-radius: 0 !important; + } + } +} +@media (-moz-bool-pref: "userChrome.rounding.square_checklabel") { + @-moz-document url-prefix("about:"), regexp("^chrome://\\w+/content/.*.xhtml$") + { + input[type="checkbox"]:not(.toggle-button), + .checkbox-check { + border-radius: 0 !important; + } + } +} +@media (-moz-bool-pref: "userChrome.rounding.square_field") { + @-moz-document url-prefix("about:"), regexp("^chrome://\\w+/content/.*.xhtml$") + { + input:is( + [type="color"], + [type="email"], + [type="tel"], + [type="text"], + [type="password"], + [type="url"], + [type="number"] + ), + textarea, + select, + menulist, + tree, + treecols, + listheader, + richlistbox, + search-textbox, + .web-appearance-choice, + .content-blocking-category, + #translations-manage-install-list { + border-radius: 0 !important; + } + } + @-moz-document url-prefix("about:debugging") { + .default-input { + border-radius: 0 !important; + } + } + @-moz-document url("about:home"), url("about:newtab") { + .search-wrapper .search-handoff-button, + .search-wrapper input { + border-radius: 0 !important; + } + } + @-moz-document regexp(".*.pdf$") { + .toolbarField, + .thumbnailSelectionRing { + border-radius: 0 !important; + } + } +} +@media (-moz-bool-pref: "userChrome.rounding.square_menupopup") { + @-moz-document url-prefix("about:"), url-prefix("chrome://") + { + panel, + menupopup { + --panel-border-radius: 0 !important; + } + } + @-moz-document url-prefix("about:addons") { + panel-list { + border-radius: 0 !important; + } + } + @-moz-document url-prefix("about:logins") { + .menu { + border-radius: 0 !important; + } + } + @-moz-document url("about:home"), url("about:newtab") { + .context-menu { + border-radius: 0 !important; + } + } + @-moz-document regexp(".*.pdf$") { + .doorHanger, + .doorHangerRight { + border-radius: 0 !important; + } + } +} +@media (-moz-bool-pref: "userChrome.rounding.square_infobox") { + @-moz-document url-prefix("about:"), regexp("^chrome://\\w+/content/.*.xhtml$") + { + /* + * .container is inside shadow DOM, + * and it does not have any other classes, + * but there may be other elements with the same class, + * hence the weird selector. + */ + link[href="chrome://global/content/elements/message-bar.css"] + .container, + .info-box-container:not(.content-blocking-category), + .options-container, + #sanitizeEverythingWarningBox { + border-radius: 0 !important; + } + } + @-moz-document url-prefix("about:debugging") { + .message { + border-radius: 0 !important; + } + } + @-moz-document url-prefix("about:firefoxview") { + .card, + .card::before, + .empty-container, + .synced-tab-a, + .synced-tab-li-placeholder { + border-radius: 0 !important; + } + } +} +@-moz-document url-prefix("about:"), regexp(".*.pdf$") { + @media (-moz-bool-pref: "userChrome.rounding.square_dialog") { + dialog, + .dialogBox { + border-radius: 0 !important; + } + } +} +@-moz-document url("chrome://browser/content/places/places.xhtml") +{ + /*= Library ==============================================================*/ + @media (-moz-bool-pref: "userChrome.rounding.square_button") { + #placesToolbar > toolbarbutton, + #placesMenu > menu, + #editBookmarkPanelRows .expander-up, + #editBookmarkPanelRows .expander-down { + border-radius: 0 !important; + } + } + @media (-moz-bool-pref: "userChrome.rounding.square_field") { + #searchFilter, + #detailsPane html|input, + #places input #editBMPanel_tagsSelectorRow > richlistbox { + border-radius: 0 !important; + } + } +} +/** Monospace *****************************************************************/ +@media (-moz-bool-pref: "userContent.page.monospace") { + @-moz-document url-prefix("about:"), url-prefix("chrome://"), regexp("^((jar:)?file:///).*/$") + { + * { + font-family: -moz-fixed; + } + } +} +/** Menu - Icons Layout *******************************************************/ +@media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") { + @-moz-document url-prefix("about:"), url-prefix("chrome://"), regexp("^((jar:)?file:///).*/$") + { + :root { + --uc-folder-icon: url("chrome://global/skin/icons/folder.svg"); + } + @media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-moz-bool-pref: "userChrome.icon.library") { + :root { + --uc-folder-icon: url("../icons/folder.svg"); + } + } + } + @-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"]), + menupopup menuitem:not([type="checkbox"][checked="true"], [type="radio"]) > .menu-iconic-left > .menu-iconic-icon, + menupopup menuitem:not([type="checkbox"][checked="true"], [type="radio"]) > .menu-icon, + menupopup menu:not([type="checkbox"][checked="true"], [type="radio"]) > .menu-iconic-left > .menu-iconic-icon, + menupopup menu:not([type="checkbox"][checked="true"], [type="radio"]) > .menu-icon { + -moz-appearance: none !important; /* Linux: menulist */ + } + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) + menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) + menu:not(.menu-iconic, .in-menulist, [checked="true"]), + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]) { + /* Color */ + -moz-context-properties: fill, fill-opacity, stroke !important; + fill: currentColor !important; + stroke: currentColor; + /* Layout */ + background-size: 16px !important; + background-repeat: no-repeat !important; + background-image: var(--menuitem-image); + } + /* For native context menus */ + @media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-moz-bool-pref: "widget.macos.native-context-menus"), + (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-moz-bool-pref: "widget.gtk.native-context-menus") { + :not(menu, #ContentSelectDropdown) + > menupopup:not(.in-menulist) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), + :not(menu, #ContentSelectDropdown) + > menupopup:not(.in-menulist) + > menu:not(.menu-iconic, .in-menulist, [checked="true"]) { + list-style-image: var(--menuitem-image, url("../icons/blank.svg")) !important; + } + } + /* Padding */ + :root { + --uc-menu-background-position: left; + --context-menu-background-padding-default: 5px; + --context-menu-background-padding: var(--context-menu-background-padding-default); + } + :root:-moz-locale-dir(rtl) { + --uc-menu-background-position: right; + } + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) + menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) + menu:not(.menu-iconic, .in-menulist, [checked="true"]), + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]) { + background-position: var(--uc-menu-background-position) var(--context-menu-background-padding) center !important; + padding-inline-start: var(--context-menu-background-padding) !important; + } + /* Padding - Non Native */ + @media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-moz-platform: windows) and (-moz-platform: windows), + (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-moz-gtk-csd-available) and (-moz-platform: windows) { + :root { + --context-menu-background-padding: 1em; + --context-menu-text-padding-default: 24px; + --context-menu-text-padding: var(--context-menu-text-padding-default); + --menu-background-padding-default: calc( + var(--context-menu-background-padding) + var(--context-menu-text-padding) + ); + --bookmark-menu-icon-align-padding: 0px; + } + 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; + } + } + @media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-moz-platform: windows) and (-moz-bool-pref: "userChrome.theme.non_native_menu") and (-moz-gtk-csd-available), + (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userChrome.theme.non_native_menu") and (-moz-gtk-csd-available) { + :root { + --context-menu-background-padding: 1em; + --context-menu-text-padding-default: 24px; + --context-menu-text-padding: var(--context-menu-text-padding-default); + --menu-background-padding-default: calc( + var(--context-menu-background-padding) + var(--context-menu-text-padding) + ); + --bookmark-menu-icon-align-padding: 0px; + } + 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 - Windows */ + @media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-moz-platform: windows) { + :root { + --bookmark-menu-icon-text-padding: calc( + var(--context-menu-text-padding) + var(--arrowpanel-menuitem-padding-inline) + ); + --bookmark-menu-icon-background-padding: calc( + var(--arrowpanel-menuitem-padding-inline) + var(--bookmark-menu-icon-align-padding) + ); + } + } + /* Padding - Linux */ + @media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-moz-gtk-csd-available) { + :root { + --context-menu-background-padding-default: 6px; + --context-menu-text-padding: 21px; + } + .menu-icon { + display: unset !important; + } + #main-menubar > menu > .menu-icon { + display: none !important; + } + /* 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, + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) + menuitem[type="checkbox"] + > .menu-icon { + margin-inline-end: 0 !important; + } + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) + menuitem[type="checkbox"]:not([checked="true"]) + > .menu-iconic-left + > .menu-iconic-icon, + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) + menuitem[type="checkbox"]:not([checked="true"]) + > .menu-icon { + border: none !important; + background-color: unset !important; + } + } + /* Padding - Mac */ + @media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-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 ===========================================================*/ + @media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-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("../icons/toolbarButton-upload.svg"); + } + .downloadAlwaysUseSystemDefaultMenuItem { + /* checkbox */ + --menuitem-image: url("../icons/folder-globe.svg"); + } + .downloadAlwaysOpenSimilarFilesMenuItem { + /* checkbox */ + --menuitem-image: url("../icons/fluid.svg"); + } + .downloadShowMenuItem { + --menuitem-image: var(--uc-folder-icon); + } + #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: var(--uc-new-tab-icon); + } + #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("../icons/edit-active.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("../icons/edit-cut.svg"); + } + #placesContext_copy { + --menuitem-image: url("../icons/edit-copy.svg"); + } + #placesContext_paste_group { + --menuitem-image: url("../icons/edit-paste.svg"); + } + #placesContext_new\:bookmark { + --menuitem-image: url("chrome://browser/skin/bookmark.svg"); + } + #placesContext_showInFolder, + #placesContext_new\:folder { + --menuitem-image: var(--uc-folder-icon); + } + #placesContext_new\:separator { + --menuitem-image: url("../icons/vertical-line.svg"); + } + #placesContext_paste { + --menuitem-image: url("../icons/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"); + } + } + @media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-moz-bool-pref: "userChrome.icon.global_menu") { + /*= organizeButtonPopup ======================================================*/ + #newbookmark { + --menuitem-image: url("chrome://browser/skin/bookmark.svg"); + } + #newfolder { + --menuitem-image: var(--uc-folder-icon); + } + #newseparator { + --menuitem-image: url("../icons/vertical-line.svg"); + } + #orgUndo { + --menuitem-image: url("../icons/undo.svg"); + } + /*= viewMenuPopup ============================================================*/ + /*= maintenanceButtonPopup ===================================================*/ + } + @media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-moz-bool-pref: "userChrome.icon.global_menu") and (-moz-bool-pref: "userChrome.icon.menu.full") { + #orgRedo { + --menuitem-image: url("../icons/redo.svg"); + } + } + @media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-moz-bool-pref: "userChrome.icon.global_menu") { + #orgCut { + --menuitem-image: url("../icons/edit-cut.svg"); + } + } + @media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-moz-bool-pref: "userChrome.icon.global_menu") { + #orgCopy { + --menuitem-image: url("../icons/edit-copy.svg"); + } + } + @media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-moz-bool-pref: "userChrome.icon.global_menu") { + #orgPaste { + --menuitem-image: url("../icons/edit-paste.svg"); + } + } + @media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-moz-bool-pref: "userChrome.icon.global_menu") { + #orgDelete { + --menuitem-image: url("chrome://global/skin/icons/delete.svg"); + } + } + @media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-moz-bool-pref: "userChrome.icon.global_menu") { + #orgSelectAll { + --menuitem-image: url("../icons/select-all-on.svg"); + } + } + @media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-moz-bool-pref: "userChrome.icon.global_menu") { + #orgClose { + --menuitem-image: url("chrome://global/skin/icons/close.svg"); + } + } + @media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-moz-bool-pref: "userChrome.icon.global_menu") { + #viewColumns { + --menuitem-image: url("chrome://global/skin/icons/columnpicker.svg"); + } + } + @media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-moz-bool-pref: "userChrome.icon.global_menu") { + #viewSort { + --menuitem-image: url("../icons/text-sort-ascending.svg"); + } + } + @media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-moz-bool-pref: "userChrome.icon.global_menu") { + #backupBookmarks { + --menuitem-image: url("../icons/datastore.svg"); + } + } + @media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-moz-bool-pref: "userChrome.icon.global_menu") and (-moz-bool-pref: "userChrome.icon.menu.full") { + #fileRestoreMenu { + --menuitem-image: url("../icons/datarestore.svg"); + } + } + @media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-moz-bool-pref: "userChrome.icon.global_menu") { + #fileImport { + --menuitem-image: url("../icons/toolbarButton-download.svg"); + } + } + @media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-moz-bool-pref: "userChrome.icon.global_menu") { + #fileExport { + --menuitem-image: url("../icons/toolbarButton-upload.svg"); + } + } + @media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-moz-bool-pref: "userChrome.icon.global_menu") { + #browserImport { + --menuitem-image: url("chrome://browser/skin/import.svg"); + } + } + } + @-moz-document url-prefix("about:addons") { + @media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-moz-bool-pref: "userChrome.icon.context_menu") { + button:is([role="menuitem"], [role="menuitemcheckbox"]) { + background-image: var(--icon, url("../icons/blank.svg")); /* Don't use !important. because of [checked] */ + } + panel-item[action="check-for-updates"] { + --icon: url("../icons/refresh-cw.svg"); + } + panel-item[action="view-recent-updates"] { + --icon: url("chrome://global/skin/icons/info.svg"); + } + panel-item[action="install-from-file"] { + --icon: url("chrome://devtools/skin/images/import.svg"); + } + panel-item[action="debug-addons"] { + --icon: url("../icons/bug.svg"); + } + panel-item[action="set-update-automatically"] { + --icon: url("chrome://devtools/skin/images/profiler-stopwatch.svg"); + } + panel-item[action="reset-update-states"] { + --icon: url("chrome://devtools/skin/images/debugging-workers.svg"); + } + panel-item[action="manage-shortcuts"], + panel-item[data-l10n-id="preferences-addon-button"], + panel-item[data-l10n-id="manage-addon-button"] { + --icon: url("chrome://global/skin/icons/settings.svg"); + } + } + } + @-moz-document url-prefix("about:logins") { + @media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-moz-bool-pref: "userChrome.icon.context_menu") { + .menuitem-export { + background-image: url("../icons/toolbarButton-download.svg") !important; + } + } + } +} +/** Download Panel ************************************************************/ +@-moz-document url-prefix("about:downloads") { + @media (prefers-reduced-motion: no-preference) and (-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; + } + } +} |