2022-05-11 21:19:02 +02:00
@ namespace xul url ( "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" ) ;
@ namespace html url ( "http://www.w3.org/1999/xhtml" ) ;
/** Video player **************************************************************/
/* Control Bar Size */
@ supports -moz-bool-pref ( "userContent.player.size" ) {
# controlsContainer {
2022-12-04 09:37:08 +01:00
--controlBar-height : 40px ; /* Original: 40px, Replace to this value */
2022-05-11 21:19:02 +02:00
}
# controlsContainer . touch {
2022-12-04 09:37:08 +01:00
--button-size : 48px ! important ; /* Original: 40px */
--controlBar-height : 52px ; /* Original: 52px */
2022-05-11 21:19:02 +02:00
}
2022-06-29 20:07:26 +02:00
# controlsContainer . controlBar {
2022-12-04 09:37:08 +01:00
height : var ( --controlBar-height ) ! important ; /* Original: 40px */
2022-06-29 20:07:26 +02:00
}
2022-05-11 21:19:02 +02:00
. videocontrols [ inDOMFullscreen ] # controlsContainer {
2022-12-04 09:37:08 +01:00
--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 */
2022-05-11 21:19:02 +02:00
}
. videocontrols [ inDOMFullscreen ] # controlsContainer . touch {
2022-12-04 09:37:08 +01:00
--button-size : 72px ! important ; /* Original: 40px */
--controlBar-height : 64px ; /* Original: 52px */
2022-05-11 21:19:02 +02:00
}
. videocontrols [ inDOMFullscreen ] # controlsContainer . controlBar {
padding-bottom : 8px ! important ;
}
}
/* Control Bar UI */
@ supports -moz-bool-pref ( "userContent.player.ui" ) {
audio {
2022-12-04 09:37:08 +01:00
--duration-color : # 929292 ; /* Like Original */
--media-background : rgba ( 26 , 26 , 26 , 0 . 8 ) ; /* Like Original */
2022-05-11 21:19:02 +02:00
border-radius : 8px ;
--box-shadow1 : rgba ( 14 , 13 , 26 , 0 . 12 ) ;
--box-shadow2 : rgba ( 7 , 48 , 114 , 0 . 12 ) ;
--box-shadow3 : rgba ( 34 , 0 , 51 , 0 . 04 ) ;
box-shadow : 0 5px 10px -3px var ( --box-shadow1 ) , 0 3px 16px 2px var ( --box-shadow2 ) , 0 8px 12px 1px var ( --box-shadow3 ) ;
/* Or: 0 2px 15px rgba(0,0,0,.1); */
}
@ media ( -moz-toolbar-prefers-color-scheme : dark ) , ( prefers-color-scheme : dark ) {
audio {
--box-shadow1 : rgba ( 249 , 249 , 250 , 0 . 12 ) ;
--box-shadow2 : rgba ( 91 , 91 , 102 , 0 . 12 ) ;
--box-shadow3 : rgba ( 82 , 82 , 94 , 0 . 04 ) ;
}
}
2022-06-29 20:07:26 +02:00
video {
--duration-color : # eee ;
--media-background : linear-gradient ( transparent , rgba ( 26 , 26 , 26 , 0 . 85 ) ) ;
}
2022-05-11 21:19:02 +02:00
@ media ( prefers-contrast ) {
video {
2022-12-04 09:37:08 +01:00
--duration-color : # 929292 ; /* Like Original */
--media-background : rgba ( 26 , 26 , 26 , 0 . 8 ) ; /* Like Original */
2022-05-11 21:19:02 +02:00
}
}
# controlsContainer . controlBar {
background : var ( --media-background ) ! important ;
}
# controlsContainer . duration {
2022-12-04 09:37:08 +01:00
color : var ( --duration-color ) ! important ; /* Original: #929292 */
2022-05-11 21:19:02 +02:00
}
@ supports -moz-bool-pref ( "userContent.player.ui.twoline" ) {
audio {
/* #controlsContainer .controlBar */
--controlBar-flex-wrap : unset ;
--controlBar-justify-content : center ;
--controlBar-align-content : unset ;
--controlBar-twoline-more-height : 0px ;
--controlBar-padding-inline : 9px ;
/* #controlsContainer .scrubberStack */
/* .scrubberStack - Vertical */
--scrubberStack-order : unset ;
--scrubberStack-height : 100 % ;
--scrubberStack-transform : none ;
/* .scrubberStack - Horizontal */
--scrubberStack-margin-inline : 9px ;
/* #controlsContainer .positionDurationBox */
--positionDurationBox-flex-grow : unset ;
--positionDurationBox-margin-left : unset ;
--positionDurationBox-text-align : center ;
/* Others */
--button-outside-margin : 0 ;
}
video {
/* #scrubber .scrubber::-moz-range-thumb */
--scrubber-thumb-scale : 0 ;
2022-12-04 09:37:08 +01:00
--scrubber-thumb-color : # 48a0f7 ; /* Color as hover, Prevent flashing */
2022-05-11 21:19:02 +02:00
/* .progressBar::-moz-progress-bar */
--progressBar-scale : 0 . 65 ;
/* #controlsContainer .controlBar */
--controlBar-flex-wrap : wrap ;
--controlBar-justify-content : space-between ;
--controlBar-align-content : space-around ;
2022-12-04 09:37:08 +01:00
--controlBar-padding-inline : 0 ! important ; /* Original: 9px */
2022-05-11 21:19:02 +02:00
/* #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 ;
2022-12-04 09:37:08 +01:00
padding-inline : var ( --controlBar-padding-inline ) ! important ; /* Original: 9px */
2022-05-11 21:19:02 +02:00
}
# controlsContainer . scrubberStack {
/* Vertical */
order : var ( --scrubberStack-order ) ;
height : var ( --scrubberStack-height , var ( --thumb-size ) ) ! important ;
transform : var ( --scrubberStack-transform , translateY ( calc ( var ( --thumb-size ) / 2 ) ) ) ;
/* Horizontal */
flex-basis : var ( --scrubberStack-flex-basis , calc ( var ( --scrubberStack-width ) - 18px ) ) ! important ;
width : var ( --scrubberStack-twoline-width , var ( --scrubberStack-width ) ) ;
margin-inline : var ( --scrubberStack-margin-inline ) ! important ;
}
# controlsContainer . positionDurationBox {
flex-grow : var ( --positionDurationBox-flex-grow ) ;
margin-left : var ( --positionDurationBox-margin-left ) ;
text-align : var ( --positionDurationBox-text-align ) ! important ;
}
# playButton {
margin-left : var ( --button-outside-margin ) ! important ;
}
# fullscreenButton {
margin-right : var ( --button-outside-margin ) ! important ;
}
}
}
@ supports -moz-bool-pref ( "userContent.player.icon" ) {
# controlsContainer . fullscreenButton {
background-image : url ( "../icons/enter-fullscreen.svg" ) ! important ;
}
# controlsContainer . fullscreenButton [ fullscreened ] {
background-image : url ( "../icons/exit-fullscreen.svg" ) ! important ;
}
}
@ supports -moz-bool-pref ( "userContent.player.noaudio" ) {
# controlsContainer . muteButton [ noAudio ] {
/* Remove volume button at noAudio */
display : none ! important ;
}
}
/* Click to play UI */
@ supports -moz-bool-pref ( "userContent.player.click_to_play" ) {
# controlsContainer . clickToPlay {
cursor : pointer ;
opacity : 0 . 65 ! important ;
}
# controlsContainer . controlsSpacerStack : hover > . clickToPlay {
opacity : 0 . 85 ! important ;
}
# controlsContainer . controlsSpacerStack : hover > . clickToPlay : hover {
opacity : 1 ! important ;
2022-12-04 09:37:08 +01:00
fill : # 48a0f7 ! important ; /* color as .scrubber */
2022-05-11 21:19:02 +02:00
}
}
/* Animation */
@ supports -moz-bool-pref ( "userContent.player.animate" ) {
@ media ( prefers-reduced-motion : no-preference ) {
/* Control Bar */
# controlsContainer . controlBar {
transition : transform 350ms ease ;
opacity : 1 ! important ;
}
# controlsContainer . controlBar [ hidden ] {
transform : translateY ( 100 % ) ;
transition : transform 350ms ease-in-out , opacity 1s ease 100ms ! important ;
opacity : 0 ! important ;
}
# controlsContainer . controlBar [ hidden ] . progressBar ,
# controlsContainer . controlBar [ hidden ] . bufferBar {
display : unset ! important ;
opacity : 0 . 55 ;
transition : opacity 150ms ease 50ms ;
}
/* Two line Control Bar */
. scrubber :: -moz-range-thumb ,
. progressStack {
transition : transform 0 . 1s cubic-bezier ( 0 , 0 , 0 . 2 , 1 ) ;
}
/* Click to play */
# controlsContainer . clickToPlay {
transition : opacity 150ms ease-in-out , fill 150ms ease-in-out ;
}
}
}
/** Activity Stream ***********************************************************/
@ -moz-document url ( "about:home" ) , url ( "about:newtab" ) {
/** Activity Stream - Search Focus Border: like URL *************************/
@ supports -moz-bool-pref ( "userContent.page.field_border" ) {
/* At DarkMode, Color */
body [ style * = "--newtab-background-color:rgba(28, 27, 34, 1);" ] ,
body [ style * = "--newtab-background-color:rgba(42, 42, 46, 1);" ] ,
body [ style * = "--newtab-background-color: rgba(42, 42, 46, 1);" ] ,
body [ style * = "--newtab-background-color: rgba(43, 42, 51, 1);" ] ,
body [ style * = "--newtab-background-color: rgb(43, 42, 51);" ] {
/* inner */
2022-12-04 09:37:08 +01:00
--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 */
2022-05-11 21:19:02 +02:00
/* For Nightly */
--newtab-primary-action-background : var ( --newtab-focus-border ) ! important ;
}
@ supports -moz-bool-pref ( "userContent.page.proton_color" ) {
@ supports -moz-bool-pref ( "userContent.page.proton_color.dark_blue_accent" ) {
body [ style * = "--newtab-background-color:rgba(28, 27, 34, 1);" ] ,
body [ style * = "--newtab-background-color:rgba(42, 42, 46, 1);" ] ,
body [ style * = "--newtab-background-color: rgba(42, 42, 46, 1);" ] ,
body [ style * = "--newtab-background-color: rgba(43, 42, 51, 1);" ] ,
body [ style * = "--newtab-background-color: rgb(43, 42, 51);" ] {
--newtab-focus-border : var ( --in-content-focus-outline-color ) ! important ;
}
}
}
2023-02-22 20:02:05 +01:00
}
/** Activity Stream - Menu Icons ********************************************/
2022-07-27 15:53:22 +02:00
@ supports -moz-bool-pref ( "userChrome.icon.context_menu" ) {
. context-menu-list . context-menu-item button {
padding-inline-start : 0 ! important ;
}
. context-menu-list . context-menu-item button span {
2022-09-21 21:21:27 +02:00
/* Color */
2022-12-04 09:37:08 +01:00
-moz-context-properties : fill , fill-opacity , stroke ! important ;
2022-07-27 15:53:22 +02:00
fill : currentColor ! important ;
2023-02-22 20:02:05 +01:00
stroke : transparent ;
2022-07-27 15:53:22 +02:00
/* Layout */
2022-09-21 21:21:27 +02:00
background-size : 16px ! important ;
background-repeat : no-repeat ! important ;
2022-07-27 15:53:22 +02:00
background-image : var ( --menuitem-image ) ;
2022-12-04 09:37:08 +01:00
padding-inline-start : 24px ; /* 16p + (4px * 2) */
2022-09-21 21:21:27 +02:00
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 ;
2022-07-27 15:53:22 +02:00
}
. context-menu-item span [ data-l10n-id = "newtab-menu-pin" ] {
--menuitem-image : url ( "../icons/pin-tab.svg" ) ;
}
. context-menu-item span [ data-l10n-id = "newtab-menu-unpin" ] {
--menuitem-image : url ( "../icons/unpin-tab.svg" ) ;
}
. context-menu-item span [ data-l10n-id = "newtab-menu-edit-topsites" ] {
--menuitem-image : url ( "chrome://global/skin/icons/edit.svg" ) ;
}
. context-menu-item span [ data-l10n-id = "newtab-menu-bookmark" ] {
--menuitem-image : url ( "chrome://browser/skin/bookmark.svg" ) ;
}
. context-menu-item span [ data-l10n-id = "newtab-menu-remove-bookmark" ] {
--menuitem-image : url ( "chrome://browser/skin/bookmark-hollow.svg" ) ;
}
. context-menu-item span [ data-l10n-id = "newtab-menu-save-to-pocket" ] {
--menuitem-image : url ( "../icons/pocket-outline.svg" ) ;
}
. context-menu-item span [ data-l10n-id = "newtab-menu-open-file" ] {
--menuitem-image : url ( "../icons/fluid.svg" ) ;
}
. context-menu-item span [ data-l10n-id = "newtab-menu-show-file" ] {
--menuitem-image : url ( "chrome://global/skin/icons/folder.svg" ) ;
}
@ supports -moz-bool-pref ( "userChrome.icon.library" ) {
. context-menu-item span [ data-l10n-id = "newtab-menu-show-file" ] {
--menuitem-image : url ( "../icons/folder.svg" ) ;
}
}
. context-menu-item span [ data-l10n-id = "newtab-menu-open-new-window" ] {
--menuitem-image : url ( "chrome://browser/skin/window.svg" ) ;
}
. context-menu-item span [ data-l10n-id = "newtab-menu-open-new-private-window" ] {
--menuitem-image : url ( "chrome://browser/skin/privateBrowsing.svg" ) ;
}
. context-menu-item span [ data-l10n-id = "newtab-menu-dismiss" ] {
--menuitem-image : url ( "chrome://global/skin/icons/delete.svg" ) ;
}
. context-menu-item span [ data-l10n-id = "newtab-menu-delete-history" ] {
--menuitem-image : url ( "../icons/eraser.svg" ) ;
}
}
2022-05-11 21:19:02 +02:00
/** Activity Stream - Web Site Icon: full size ******************************/
@ supports -moz-bool-pref ( "userContent.newTab.full_icon" ) {
. top-site-outer . tile {
overflow : hidden ;
}
. top-site-outer . tile . icon-wrapper {
2022-12-04 09:37:08 +01:00
width : 100 % ! important ; /* Original: 48px */
height : 100 % ! important ; /* Original: 48px */
2022-05-11 21:19:02 +02:00
}
}
/** Activity Stream - Animate ***********************************************/
@ supports -moz-bool-pref ( "userContent.newTab.animate" ) {
@ media ( prefers-reduced-motion : no-preference ) {
: root {
--animation-easing-function : cubic-bezier ( 0 . 07 , 0 . 95 , 0 , 1 ) ;
}
/* Background */
. top-site-outer ,
# searchSubmit ,
button . icon ,
button . close-button {
transition : background 1 . 5s var ( --animation-easing-function ) ;
}
. top-site-outer : hover ,
# searchSubmit : hover ,
button . icon : hover ,
button . close-button : hover {
transition : background 0 . 5s var ( --animation-easing-function ) ;
}
/* Search Bar */
2023-02-22 20:02:05 +01:00
. search-wrapper . search-inner-wrapper > input ,
. search-wrapper . search-inner-wrapper > . search-handoff-button {
2022-05-11 21:19:02 +02:00
transition : 1s var ( --animation-easing-function ) ;
transition-property : border-color , box-shadow ;
}
2023-02-22 20:02:05 +01:00
. 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 {
2022-05-11 21:19:02 +02:00
transition : border-color 0 . 5s var ( --animation-easing-function ) , box-shadow 1s var ( --animation-easing-function ) ;
}
@ supports -moz-bool-pref ( "userContent.page.field_border" ) {
2023-02-22 20:02:05 +01:00
. search-wrapper . search-inner-wrapper : hover > input ,
. search-wrapper . search-inner-wrapper : hover > . search-handoff-button {
2022-05-11 21:19:02 +02:00
border-color : var ( --newtab-primary-action-background ) ! important ;
transition : border-color 0 . 5s var ( --animation-easing-function ) ;
}
}
}
}
/** Activity Stream - Pocket order to last **********************************/
@ supports -moz-bool-pref ( "userContent.newTab.pocket_to_last" ) {
. body-wrapper . on {
display : flex ;
flex-wrap : wrap ;
}
. body-wrapper . on > . discovery-stream . ds-layout {
flex-basis : 100 % ;
}
. body-wrapper . on > . collapsible-section [ data-section-id = "topstories" ] ,
. home-section > # pocket-section ,
. home-section > . divider ,
. home-section > div : not ( . section ) {
order : 2 ;
}
}
/** Activity Stream - Home Search Bar looks like proton *********************/
2022-12-04 09:37:08 +01:00
@ supports -moz-bool-pref ( "userContent.newTab.searchbar" ) {
2022-05-11 21:19:02 +02:00
/* Dropdown Colors */
# root {
2022-12-04 09:37:08 +01:00
--newtab-search-background-color : rgba ( 255 , 255 , 255 , 1 ) ; /* Same as light theme's --panel-background */
2022-05-11 21:19:02 +02:00
/* Set search dropdown background */
--newtab-search-dropdown-header-color : var ( --newtab-search-background-color ) ! important ;
--newtab-search-dropdown-color : var ( --newtab-search-background-color ) ! important ;
--newtab-element-hover-color : color-mix ( in srgb , currentColor 9 % , transparent ) ! important ;
}
@ media ( -moz-toolbar-prefers-color-scheme : dark ) , ( prefers-color-scheme : dark ) {
# root {
/* Default Dark Mode */
2022-12-04 09:37:08 +01:00
--newtab-search-background-color : rgba ( 66 , 65 , 77 , 1 ) ; /* Same as dark theme's --panel-background */
2022-05-11 21:19:02 +02:00
}
}
. 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 ;
2022-12-04 09:37:08 +01:00
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; */
2022-05-11 21:19:02 +02:00
}
# contentSearchSettingsButton :: before {
content : url ( "chrome://global/skin/icons/settings.svg" ) ! important ;
display : -moz-inline-box ;
/* Color */
-moz-context-properties : fill , fill-opacity ! important ;
fill : currentColor ! important ;
/* Align */
margin-inline-end : 5px ;
vertical-align : -25 % ;
}
/* Pointer */
. contentSearchSuggestionTable . contentSearchOneOffItem ,
# contentSearchSettingsButton {
cursor : pointer ;
}
/*- Fix Color For Nightly ------------------------------------------------*/
. contentSearchSuggestionTable ,
. contentSearchHeaderRow ,
. contentSearchHeader ,
. contentSearchSuggestionsContainer {
color : var ( --newtab-text-primary-color ) ! important ;
background : var ( --newtab-search-background-color ) ! important ;
}
. contentSearchSuggestionTable . contentSearchSuggestionRow . selected ,
. contentSearchSuggestionTable . contentSearchSettingsButton : hover {
color : var ( --newtab-text-primary-color ) ! important ;
}
. contentSearchSuggestionTable . contentSearchSuggestionRow . selected ,
. contentSearchSuggestionTable . contentSearchSettingsButton : hover ,
. contentSearchSuggestionTable . contentSearchOneOffItem . selected {
background : var ( --newtab-element-hover-color ) ! important ;
}
. contentSearchSuggestionTable . contentSearchSuggestionRow . selected : active ,
. contentSearchSuggestionTable . contentSearchOneOffItem : active {
background : var ( --newtab-element-active-color ) ! important ;
}
. contentSearchSuggestionTable . contentSearchSuggestionRow . selected . historyIcon {
fill : var ( --newtab-icon-secondary-color ) ! important ;
}
}
2023-02-22 20:02:05 +01:00
/** Activity Stream - Hide Firefox's logo ***********************************/
@ supports -moz-bool-pref ( "userContent.newTab.hidden_logo" ) {
. logo-and-wordmark {
display : none ! important ;
}
. outer-wrapper : not ( . fixed-search ) . search-wrapper {
padding-top : 0 ! important ;
}
}
2022-05-11 21:19:02 +02:00
}
/** Error Page - Restore illustrations ****************************************/
@ supports -moz-bool-pref ( "userContent.page.illustration" ) {
2023-02-22 20:02:05 +01:00
@ -moz-document url-prefix ( "about:neterror" ) , url ( "about:restartrequired" ) , url ( "chrome://browser/content/aboutRestartRequired.xhtml" ) , url ( "about:sessionrestore" ) , url ( "chrome://browser/content/aboutSessionRestore.xhtml" )
2022-05-11 21:19:02 +02:00
{
/* Illustrations Position */
# errorPageContainer ,
2022-12-04 09:37:08 +01:00
. neterror > . container ,
2022-05-11 21:19:02 +02:00
. description-wrapper {
min-height : 300px ;
background-position : left center ;
background-repeat : no-repeat ;
background-size : 38 % ;
2022-12-04 09:37:08 +01:00
background-image : var ( --uc-error-llustration ) ;
2022-05-11 21:19:02 +02:00
}
# errorPageContainer {
display : flex ;
flex-direction : column ;
}
. description-wrapper {
padding-inline-start : 38 % ;
}
/* Container */
. container {
2022-12-04 09:37:08 +01:00
min-width : var ( --in-content-container-min-width ) ; /* 13em */
max-width : var ( --in-content-container-max-width ) ; /* 52em */
2022-05-11 21:19:02 +02:00
}
/* Text Position */
# text-container {
margin : auto ;
padding-inline-start : 38 % ;
}
}
2023-02-22 20:02:05 +01:00
@ -moz-document url-prefix ( "about:neterror?e=connectionFailure" ) , url-prefix ( "about:neterror?e=netInterrupt" ) , url-prefix ( "about:neterror?e=netReset" ) , url-prefix ( "about:neterror?e=netTimeout" ) , url-prefix ( "about:neterror?e=netOffline" ) , url ( "about:restartrequired" ) , url ( "chrome://browser/content/aboutRestartRequired.xhtml" )
2022-05-11 21:19:02 +02:00
{
2022-12-04 09:37:08 +01:00
: root {
--uc-error-llustration : url ( . . / icons / error-connection-failure . svg ) ;
2022-05-11 21:19:02 +02:00
}
}
@ -moz-document url-prefix ( "about:neterror?e=dnsNotFound" ) {
2022-12-04 09:37:08 +01:00
: root {
--uc-error-llustration : url ( . . / icons / error-server-not-found . svg ) ;
2022-05-11 21:19:02 +02:00
}
}
2023-02-22 20:02:05 +01:00
@ -moz-document url-prefix ( "about:neterror?e=blockedByPolicy" ) , url-prefix ( "about:neterror?e=deniedPortAccess" ) , url-prefix ( "about:neterror?e=malformedURI" ) {
2022-12-04 09:37:08 +01:00
: root {
--uc-error-llustration : url ( chrome : / / browser / skin / illustrations / error-malformed-url . svg ) ;
2022-05-11 21:19:02 +02:00
}
}
2023-02-22 20:02:05 +01:00
@ -moz-document url-prefix ( "about:neterror?e=clockSkewError" ) , url-prefix ( "about:neterror?e=nssFailure" ) {
2022-12-04 09:37:08 +01:00
: root {
--uc-error-llustration : url ( . . / icons / blue-berror . svg ) ;
}
# errorPageContainer ,
. neterror > . container {
2022-05-11 21:19:02 +02:00
background-size : 18 . 5em ;
}
}
@ -moz-document url ( "about:sessionrestore" ) , url ( "chrome://browser/content/aboutSessionRestore.xhtml" )
{
2022-12-04 09:37:08 +01:00
: root {
--uc-error-llustration : url ( . . / icons / error-session-restore . svg ) ;
2022-05-11 21:19:02 +02:00
}
}
@ -moz-document url-prefix ( "about:neterror?e=fileNotFound" ) {
@ media ( min-width : 970px ) {
. title {
background-image : url ( "chrome://global/skin/icons/info.svg" ) ! important ;
}
}
# text-container {
padding-inline-start : 0 ;
}
}
@ -moz-document url-prefix ( "about:tabcrashed" ) {
@ media ( min-width : 970px ) {
. title {
background-image : url ( "chrome://browser/skin/tab-crashed.svg" ) ! important ;
}
}
}
@ -moz-document url ( "about:robots" ) , url ( "chrome://browser/content/aboutRobots.xhtml" )
{
@ media ( min-width : 970px ) {
. title {
background-image : url ( "chrome://browser/content/aboutRobots-icon.png" ) ! important ;
}
}
}
@ -moz-document url ( "about:welcomeBack" ) , url ( "chrome://browser/content/aboutWelcomeBack.xhtml" )
{
@ media ( min-width : 970px ) {
. title {
background-image : url ( "../icons/welcome-back.svg" ) ! important ;
}
}
}
}
/** Fully Dark Mode ***********************************************************/
/*= Fully Dark Mode - Dark Mode Colors =======================================*/
@ supports -moz-bool-pref ( "userContent.page.proton_color" ) {
2023-02-22 20:02:05 +01:00
@ -moz-document url-prefix ( "about:" ) , url-prefix ( "chrome://browser/content/places/places.xhtml" ) , url-prefix ( "https://addons.mozilla.org" ) , url-prefix ( "https://support.mozilla.org" ) , url-prefix ( "https://accounts.firefox.com" ) , url-prefix ( "view-source" ) , regexp ( "^(((jar:)?file:///)|(chrome://)).*/$" )
2022-05-11 21:19:02 +02:00
{
/*= 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 ;
2022-12-04 09:37:08 +01:00
--in-content-box-background-odd : rgba ( 12 , 12 , 13 , 0 . 05 ) ; /* grey 90 a05 */
2022-05-11 21:19:02 +02:00
--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 ) ;
2022-10-17 19:50:35 +02:00
/* button background states are also used for checkboxes and radio buttons */
2022-05-11 21:19:02 +02:00
--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 ;
2022-12-04 09:37:08 +01:00
--in-content-table-border-color : var (
--in-content-box-border-color
) ; /* Legacy: #d1d1d1; rgba(249, 249, 250, 0.2) */
2022-05-11 21:19:02 +02:00
--in-content-table-border-dark-color : var ( --in-content-table-border-color ) ;
2022-12-04 09:37:08 +01:00
--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); */
2022-05-11 21:19:02 +02:00
--in-content-sidebar-width : 240px ;
--dialog-warning-text-color : var ( --red-60 ) ;
--checkbox-border-color : var ( --in-content-box-border-color ) ;
--checkbox-unchecked-bgcolor : var ( --in-content-button-background ) ;
--checkbox-unchecked-hover-bgcolor : var ( --in-content-button-background-hover ) ;
--checkbox-unchecked-active-bgcolor : var ( --in-content-button-background-active ) ;
--checkbox-checked-bgcolor : var ( --in-content-primary-button-background ) ;
--checkbox-checked-color : var ( --in-content-primary-button-text-color ) ;
--checkbox-checked-border-color : transparent ;
--checkbox-checked-hover-bgcolor : var ( --in-content-primary-button-background-hover ) ;
--checkbox-checked-active-bgcolor : var ( --in-content-primary-button-background-active ) ;
--blue-40 : # 45a1ff ;
--blue-50 : # 0a84ff ;
--blue-60 : # 0060df ;
--blue-70 : # 003eaa ;
--blue-80 : # 002275 ;
--grey-30 : # d7d7db ;
--grey-60 : # 4a4a4f ;
--grey-90-a10 : rgba ( 12 , 12 , 13 , 0 . 1 ) ;
--grey-90-a20 : rgba ( 12 , 12 , 13 , 0 . 2 ) ;
--grey-90-a30 : rgba ( 12 , 12 , 13 , 0 . 3 ) ;
--grey-90-a50 : rgba ( 12 , 12 , 13 , 0 . 5 ) ;
--grey-90-a60 : rgba ( 12 , 12 , 13 , 0 . 6 ) ;
--green-50 : # 30e60b ;
--green-60 : # 12bc00 ;
--green-70 : # 058b00 ;
--green-80 : # 006504 ;
--green-90 : # 003706 ;
--orange-50 : # ff9400 ;
--red-40 : # ff4f5e ;
--red-50 : # ff0039 ;
--red-60 : # d70022 ;
--red-70 : # a4000f ;
--red-80 : # 5a0002 ;
--red-90 : # 3e0200 ;
--yellow-50 : # ffe900 ;
--yellow-60 : # d7b600 ;
--yellow-60-a30 : rgba ( 215 , 182 , 0 , 0 . 3 ) ;
--yellow-70 : # a47f00 ;
--yellow-80 : # 715100 ;
--yellow-90 : # 3e2800 ;
--shadow-10 : 0 1px 4px var ( --grey-90-a10 ) ;
--shadow-30 : 0 4px 16px var ( --grey-90-a10 ) ;
--card-padding : 16px ;
--card-shadow : var ( --shadow-10 ) ;
--card-outline-color : var ( --grey-30 ) ;
--card-shadow-hover : var ( --card-shadow ) , 0 0 0 5px var ( --card-outline-color ) ;
}
@ media ( -moz-toolbar-prefers-color-scheme : dark ) , ( prefers-color-scheme : dark ) {
: host ,
: root {
/* Keep these in sync with layout/base/PresShell.cpp, and plaintext.css */
--in-content-page-background : rgb ( 28 , 27 , 34 ) ;
--in-content-page-color : rgb ( 251 , 251 , 254 ) ;
--in-content-deemphasized-text : rgb ( 191 , 191 , 201 ) ;
--in-content-box-background : rgb ( 35 , 34 , 43 ) ;
--in-content-box-background-odd : rgba ( 249 , 249 , 250 , 0 . 05 ) ;
--in-content-box-info-background : rgba ( 249 , 249 , 250 , 0 . 15 ) ;
--in-content-border-color : rgba ( 249 , 249 , 250 , 0 . 2 ) ;
--in-content-border-hover : rgba ( 249 , 249 , 250 , 0 . 3 ) ;
--in-content-border-invalid : rgb ( 255 , 132 , 139 ) ;
--in-content-error-text-color : # ff9aa2 ;
--in-content-button-background : rgb ( 43 , 42 , 51 ) ;
--in-content-button-background-hover : rgb ( 82 , 82 , 94 ) ;
--in-content-button-background-active : rgb ( 91 , 91 , 102 ) ;
--in-content-icon-color : rgb ( 251 , 251 , 254 ) ;
--in-content-primary-button-text-color : rgb ( 43 , 42 , 51 ) ;
--in-content-primary-button-background : rgb ( 0 , 221 , 255 ) ;
--in-content-primary-button-background-hover : rgb ( 128 , 235 , 255 ) ;
--in-content-primary-button-background-active : rgb ( 170 , 242 , 255 ) ;
--in-content-danger-button-background : # ff848b ;
--in-content-danger-button-background-hover : # ffbdc5 ;
--in-content-danger-button-background-active : # ffdfe7 ;
--in-content-table-background : rgb ( 35 , 34 , 43 ) ;
--in-content-table-border-dark-color : var ( --in-content-box-border-color ) ;
--in-content-accent-color : var ( --in-content-primary-button-background ) ;
--in-content-accent-color-active : var ( --in-content-primary-button-background-hover ) ;
--in-content-link-color : var ( --in-content-primary-button-background ) ;
--in-content-link-color-hover : var ( --in-content-primary-button-background-hover ) ;
--in-content-link-color-active : var ( --in-content-primary-button-background-active ) ;
--in-content-link-color-visited : var ( --in-content-link-color ) ;
--card-outline-color : var ( --grey-60 ) ;
--dialog-warning-text-color : var ( --red-40 ) ;
}
}
@ supports -moz-bool-pref ( "userContent.page.proton_color.dark_blue_accent" ) {
@ media ( -moz-toolbar-prefers-color-scheme : dark ) , ( prefers-color-scheme : dark ) {
: host ,
: root {
/ * Color Memo
Just refer - Photon ' s dark color
--button-primary-bgcolor : # 0060DF ;
--button-primary-hover-bgcolor : # 003EAA ;
--button-primary-active-bgcolor : # 002275 ;
--lwt-brighttext-url-color : # 74c0ff ;
--lwt-toolbarbutton-icon-fill-attention : # 45a1ff ;
Just refer - Proton ' s light color
--in-content-accent-color : # 0a84ff ;
--in-content-accent-color-active : # 0060df ;
--in-content-primary-button-background : # 0061e0 ;
--in-content-primary-button-background-hover : # 0250bb ;
--in-content-primary-button-background-active : # 053e94 ;
--blue-40 : # 45a1ff ; rgb ( 69 , 161 , 255 )
--blue-50 : # 0a84ff ; rgb ( 10 , 132 , 255 )
--blue-60 : # 0060df ; rgb ( 0 , 96 , 223 )
--blue-70 : # 003eaa ; rgb ( 0 , 62 , 170 )
--blue-80 : # 002275 ; rgb ( 0 , 34 , 117 )
Relation
lighten ( # 0060df , 29 % ) : # 74b0ff ;
lighten ( # 0060df , 19 . 8 % ) : # 4595ff
lighten ( # 0060df , 8 . 3 % ) : # 0a74ff
# 0060df
darken ( # 0060df , 15 . 5 % ) : # 003e90 ;
darken ( # 0060df , 28 . 1 % ) : # 002250 ;
* /
2022-12-04 09:37:08 +01:00
--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 */
2022-05-11 21:19:02 +02:00
}
: host ,
: root {
--in-content-primary-button-text-color : var ( --in-content-page-color ) ! important ;
--in-content-primary-button-background : var ( --blue-60 ) ! important ;
--in-content-primary-button-background-hover : var ( --blue-50 ) ! important ;
--in-content-primary-button-background-active : var ( --blue-40 ) ! important ;
--in-content-focus-outline-color : var ( --blue-40 ) ! important ;
--in-content-accent-color : var ( --blue-40 ) ! important ;
--in-content-accent-color-active : var ( --blue-30 ) ! important ;
--in-content-table-background : rgb ( 35 , 34 , 43 ) ! important ;
--in-content-table-border-color : rgba ( 249 , 249 , 250 , 0 . 2 ) ! important ;
--in-content-table-header-background : rgb ( 5 , 64 , 150 ) ! important ;
--in-content-table-header-color : var ( --in-content-page-color ) ! important ;
--in-content-link-color : var ( --blue-40 ) ! important ;
--in-content-link-color-hover : var ( --blue-30 ) ! important ;
--in-content-link-color-active : var ( --blue-20 ) ! important ;
--in-content-link-color-visited : var ( --blue-40 ) ! important ;
}
}
}
@ supports -moz-bool-pref ( "userContent.page.proton_color.system_accent" ) {
: host ,
: root {
2022-07-27 15:53:22 +02:00
--in-content-primary-button-text-color : AccentColorText ! important ;
2022-09-21 21:21:27 +02:00
--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 ;
2022-05-11 21:19:02 +02:00
}
2022-07-27 15:53:22 +02:00
@ supports -moz-bool-pref ( "userChrome.compatibility.accent_color" ) {
: host ,
: root {
2022-09-21 21:21:27 +02:00
--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 ;
2022-07-27 15:53:22 +02:00
}
}
2022-05-11 21:19:02 +02:00
}
}
}
@ supports -moz-bool-pref ( "userContent.page.dark_mode" ) {
@ media ( -moz-toolbar-prefers-color-scheme : dark ) , ( prefers-color-scheme : dark ) {
/*= Addons.org =============================================================*/
@ -moz-document url-prefix ( "https://addons.mozilla.org" )
{
/* Basic */
. Page-content ,
. SecondaryHero ,
2022-06-29 20:07:26 +02:00
body ,
2022-05-11 21:19:02 +02:00
main [ aria-label = "Content" ] {
color : var ( --in-content-page-color ) ! important ;
background : var ( --in-content-page-background ) ! important ;
}
/* Text */
2022-06-29 20:07:26 +02:00
input ,
textarea ,
select ,
2022-05-11 21:19:02 +02:00
. AutoSearchInput-query ,
. AutoSearchInput-suggestions-list ,
. Page-content h1 ,
. Page-content h2 ,
. SearchResult-link ,
. Home-SubjectShelf-link : link ,
. Home-SubjectShelf-link : visited ,
. DropdownMenuItem-link a ,
2022-06-29 20:07:26 +02:00
. DropdownMenuItem-link button ,
2022-05-11 21:19:02 +02:00
. 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 ) ,
2022-06-29 20:07:26 +02:00
. DropdownMenuItem-link button : is ( : active , : focus , : hover ) ,
2022-05-11 21:19:02 +02:00
. 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 ,
2022-06-29 20:07:26 +02:00
. Button--primary ,
2022-05-11 21:19:02 +02:00
. blog-entry-read-more-link ,
. blogpost-nav-next . blogpost-nav-no-prev : hover p ,
. blogpost-content-wrapper p a ,
. blogpost-nav-prev : hover p ,
. blogpost-nav-next : hover p {
color : var ( --in-content-link-color ) ! important ;
}
. SearchResult--meta-section ,
. MetadataCard-title ,
. MetadataCard-title a ,
. MetadataCard-content a ,
. CollectionSort-label ,
. SearchResult-summary ,
. AddonMeta . MetadataCard-content a . AddonMeta-reviews-content-link ,
. AddonMeta . MetadataCard-title a . AddonMeta-reviews-content-link ,
. PermissionsCard-subhead--optional ,
. PermissionsCard-subhead--required ,
. Definition-dt ,
. RatingsByStar-count a ,
. RatingsByStar-star a ,
. Paginate-page-number ,
. AddonSummaryCard-addonAverage ,
. AddonReviewCard-authorByLine ,
. UserReview-byLine ,
. UserReview-reply-header ,
. Home-heroHeader-subtitle ,
. blog-entry-date ,
. blogpost-breadcrumb * ,
. AddonTitle-author ,
. ExpandableCard-ToggleLink ,
. SearchFilters-label ,
. PromotedBadge-label--line {
color : var ( --in-content-deemphasized-text ) ! important ;
}
. PromotedBadge-label--recommended {
color : color-mix ( in srgb , # 712b00 15 % , # ff9400 ) ! important ;
}
/* Background */
2022-06-29 20:07:26 +02:00
. Button--action ,
. DevHub-Navigation ul li . DevHub-Navigation-Register . Button ,
. DevHub-MyAddons-item-buttons-submit . Button {
2022-05-11 21:19:02 +02:00
color : var ( --in-content-primary-button-text-color ) ! important ;
background : var ( --in-content-primary-button-background ) ! important ;
}
2022-06-29 20:07:26 +02:00
select ,
2022-05-11 21:19:02 +02:00
. Select ,
2022-06-29 20:07:26 +02:00
. Button--primary ,
2022-05-11 21:19:02 +02:00
. Button--neutral ,
. Button--neutral : link ,
. Notice-button ,
. AMInstallButton . AMInstallButton-loading-button {
background-color : var ( --in-content-button-background ) ! important ;
}
2022-06-29 20:07:26 +02:00
. Button--primary : hover ,
2022-05-11 21:19:02 +02:00
. 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 ,
2022-06-29 20:07:26 +02:00
. Button--action : not ( . Button--disabled ) : hover ,
. DevHub-Navigation ul li . DevHub-Navigation-Register . Button : hover ,
. DevHub-MyAddons-item-buttons-submit . Button : hover {
2022-05-11 21:19:02 +02:00
background : var ( --in-content-primary-button-background-hover ) ! important ;
}
. ShowMoreCard-contents :: after {
2022-12-04 09:37:08 +01:00
background : linear-gradient ( hsla ( 0deg , 0 % , 100 % , 0 ) , var ( --in-content-table-background ) ) ! important ;
2022-05-11 21:19:02 +02:00
}
2022-06-29 20:07:26 +02:00
input ,
textarea ,
2022-05-11 21:19:02 +02:00
. 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 ;
}
2022-06-29 20:07:26 +02:00
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 ;
}
2022-05-11 21:19:02 +02:00
. AutoSearchInput-query {
border : 1px solid var ( --in-content-table-background ) ! important ;
}
2022-06-29 20:07:26 +02:00
. AutoSearchInput-query : is ( : hover , : focus ) ,
. UserProfileEditNotifications . UserProfileEditNotification-input : checked ~ . UserProfileEditNotification-checkbox {
2022-05-11 21:19:02 +02:00
border-color : var ( --in-content-primary-button-background ) ! important ;
}
2022-06-29 20:07:26 +02:00
. UserProfileEdit input : focus ,
. UserProfileEdit textarea : focus ,
. AutoSearchInput-query : focus ,
. UserProfileEditNotifications . UserProfileEditNotification-input : focus ~ . UserProfileEditNotification-checkbox {
2022-05-11 21:19:02 +02:00
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/ */
2022-06-29 20:07:26 +02:00
. 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 ;
}
2022-05-11 21:19:02 +02:00
. DevHub-Navigation ,
. DevHub-submit-addon ,
. DevHub-get-involved ,
. DevHub-MyAddons > * {
background : var ( --in-content-page-background ) ! important ;
color : var ( --in-content-page-color ) ! important ;
}
2022-06-29 20:07:26 +02:00
. DevHub-Footer {
2022-05-11 21:19:02 +02:00
background : var ( --in-content-box-background ) ! important ;
color : var ( --in-content-page-color ) ! important ;
}
2022-06-29 20:07:26 +02:00
. DevHub-callout-box {
background : var ( --in-content-box-background-odd ) ! important ;
color : var ( --in-content-page-color ) ! important ;
}
2022-05-11 21:19:02 +02:00
. 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 ;
}
2022-06-29 20:07:26 +02:00
. DevHub-content-copy p ,
. DevHub-callout-box p {
color : var ( --in-content-deemphasized-text ) ! important ;
}
2022-05-11 21:19:02 +02:00
. DevHub-Banner a ,
. DevHub-Footer a ,
. DevHub-MyAddons-list a ,
2022-06-29 20:07:26 +02:00
. 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 */
2022-10-17 19:50:35 +02:00
/* Others */
2022-06-29 20:07:26 +02:00
}
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 {
2022-05-11 21:19:02 +02:00
color : var ( --in-content-link-color ) ! important ;
}
2022-06-29 20:07:26 +02:00
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 ;
}
2022-05-11 21:19:02 +02:00
}
/*= Support.org ============================================================*/
@ -moz-document url-prefix ( "https://support.mozilla.org" )
{
/* Basic */
: root {
--color-blue-06 : var ( --in-content-link-color ) ! important ;
--color-blue-07 : var ( --in-content-link-color-hover ) ! important ;
--color-blue-09 : var ( --in-content-link-color-active ) ! important ;
--page-bg : var ( --in-content-page-background ) ! important ;
--color-white : var ( --in-content-page-background ) ! important ;
--color-shade-bg : var ( --in-content-page-background ) ! important ;
--color-marketing-gray-02 : var ( --card-outline-color ) ! important ;
--color-inverse-bg : var ( --in-content-page-color ) ! important ;
--color-inverse : var ( --in-content-page-background ) ! important ;
--color-text : var ( --in-content-page-color ) ! important ;
--color-moz-text : var ( --in-content-page-color ) ! important ;
--color-moz-heading : var ( --in-content-page-color ) ! important ;
--color-text-light : var ( --in-content-deemphasized-text ) ! important ;
--color-link : var ( --in-content-link-color ) ! important ;
--color-success : var ( --green-70 ) ! important ;
--color-warning : var ( --yellow-80 ) ! important ;
--color-error : var ( --red-60 ) ! important ;
--color-error-hover : var ( --red-50 ) ! important ;
--color-moz-heading : # fff ;
--color-moz-inverse-bg : var ( red ) ! important ;
--focus-shadow : 0 0 0 4px color-mix ( in srgb , var ( --in-content-primary-button-background ) 30 % , transparent ) ,
0 0 0 2px var ( --in-content-primary-button-background-active ) ;
}
. warning {
--color-link : rgb ( 55 , 255 , 255 ) ! important ;
}
body ,
# main-content ,
# instant-search-content ,
# mzp-c-menu-panel-help ,
. mzp-c-navigation ,
. kbox-container {
color : var ( --in-content-page-color ) ! important ;
background : var ( --in-content-page-background ) ! important ;
}
# editor {
border : 2px solid var ( --in-content-border-color ) ! important ;
}
. CodeMirror-linenumbers {
background : var ( --in-content-table-background ) ;
}
. CodeMirror-lines {
color : var ( --in-content-deemphasized-text ) ! important ;
background : var ( --in-content-page-background ) ! important ;
}
. CodeMirror-scroll {
background : var ( --in-content-page-background ) ! important ;
}
/* Text */
. mzp-c-menu-category . mzp-c-menu-title ,
. mzp-c-menu-item . mzp-c-menu-item-link ,
. mzp-c-menu-item . mzp-c-menu-item-link > * ,
. mzp-c-menu-item . mzp-c-menu-item-list a ,
# doc-content . menu ,
. document--content . menu ,
. forum--entry-content . menu ,
. tag-name a {
color : var ( --in-content-page-color ) ! important ;
}
. ts-select-trigger ,
input [ type = "date" ] ,
input [ type = "email" ] ,
input [ type = "number" ] ,
input [ type = "password" ] ,
input [ type = "search" ] ,
input [ type = "tel" ] ,
input [ type = "text" ] ,
input [ type = "time" ] ,
input [ type = "url" ] ,
select ,
textarea ,
# doc-content . button ,
# doc-content . key ,
. document--content . button ,
. document--content . key ,
. forum--entry-content . button ,
. forum--entry-content . key {
color : var ( --in-content-deemphasized-text ) ! important ;
}
. tag-list a {
color : var ( --color-marketing-gray-10 ) ! important ;
}
. tag-list a : hover ,
. sidebar-nav a : hover {
color : var ( --color-link ) ! important ;
}
. tag-list li {
background : var ( --in-content-page-color ) ! important ;
}
. tag-list li : hover {
background : var ( --in-content-deemphasized-text ) ! important ;
}
# remaining-characters {
color : var ( --in-content-page-color ) ! important ;
}
/* Background */
. sidebar-nav . topics ,
. sidebar-nav . topics > li {
background : var ( --in-content-page-background ) ! important ;
}
. mzp-c-menu-panel {
color : var ( --in-content-page-color ) ! important ;
background : var ( --in-content-page-background ) ! important ;
}
. mzp-c-menu-list-list ,
. mzp-c-menu-list-list : hover {
color : var ( --in-content-page-color ) ! important ;
background : var ( --in-content-box-background ) ! important ;
}
. mzp-c-menu-list-item : focus ,
. mzp-c-menu-list-item : hover {
background : var ( --in-content-button-background-hover ) ! important ;
}
. cm-bold {
color : var ( --in-content-page-color ) ! important ;
}
/* Fill */
. sumo-nav--logo ,
. sumo-nav--search-button ,
. sumo-nav--toggle-button ,
. card : not ( . is-inverse ) . card--icon-sm ,
. mzp-c-menu-item-icon ,
. mzp-c-menu-button-close ,
. topic-article--icon ,
. card--topic > . card--icon ,
. mzp-c-details . is-summary button :: before ,
details . is-summary button :: before ,
summary :: before ,
. icon-button > button ,
. search-button {
filter : invert ( 95 % ) ! important ;
}
button . markup-toolbar-button {
/*using 0.5 because in middle*/
filter : invert ( 0 . 5 ) ! important ;
}
/* Others */
. support-callouts > . card . is-inverse {
background : # 20133a ! important ;
}
. support-callouts > . card . is-inverse : is ( h1 , h2 , h3 , h4 , h5 , h6 , li , p ) {
color : var ( --in-content-page-color ) ! important ;
}
. sumo-button . secondary-button {
border-color : transparent ! important ;
}
. mzp-c-menu-panel {
border-color : var ( --in-content-button-background-hover ) ! important ;
}
. mzp-c-menu-item : is ( : focus , : hover , : active ) . mzp-c-menu-item-link . mzp-c-menu-item-title {
border-color : var ( --in-content-page-color ) ! important ;
}
@ media screen and ( -moz-toolbar-prefers-color-scheme : dark ) and ( min-width : 768px ) ,
screen and ( prefers-color-scheme : dark ) and ( min-width : 768px ) {
. mzp-c-menu-panel {
box-shadow : 0 16px 16px -16px rgba ( 255 , 255 , 255 , 0 . 3 ) ! important ;
}
}
. card--product ,
. card--topic ,
. card--article {
box-shadow : 0 5px 10px -3px rgba ( 249 , 249 , 250 , 0 . 12 ) , 0 3px 16px 2px rgba ( 91 , 91 , 102 , 0 . 12 ) ,
0 8px 12px 1px rgba ( 82 , 82 , 94 , 0 . 04 ) ! important ;
}
}
/*= Accounts.com ===========================================================*/
@ -moz-document url-prefix ( "https://accounts.firefox.com" )
{
/* Basic */
body {
color : var ( --in-content-page-color ) ! important ;
background : var ( --in-content-page-background ) ! important ;
}
. button . primary-button ,
. button [ type = "submit" ] : not ( . secondary-button ) ,
. settings-button . primary-button ,
. settings-button [ type = "submit" ] : not ( . secondary-button ) ,
button . primary-button ,
button [ type = "submit" ] : not ( . secondary-button ) {
color : var ( --in-content-primary-button-text-color ) ! important ;
background : var ( --in-content-primary-button-background ) ! important ;
}
/* Text */
header h1 ,
. info ,
. info a ,
. prefillEmail ,
. faint a : hover ,
. cta-neutral : hover {
color : var ( --in-content-page-color ) ! important ;
}
# main-content . panel a ,
. links a ,
. link-blue ,
. text-blue-500 {
color : var ( --in-content-link-color ) ! important ;
}
. link-blue : hover {
color : var ( --in-content-link-color-hover ) ! important ;
}
. signed-in-email-message ,
. verification-email-message ,
. verification-message ,
. verification-recovery-code-message ,
. verification-totp-message ,
. input-row input [ type = "email" ] ,
. input-row input [ type = "number" ] ,
. input-row input [ type = "password" ] ,
. input-row input [ type = "tel" ] ,
. input-row input [ type = "text" ] ,
. input-row input :: placeholder ,
2022-12-04 09:37:08 +01:00
. input-text ,
2022-05-11 21:19:02 +02:00
. 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" ] ,
2022-12-04 09:37:08 +01:00
. input-text ,
2022-05-11 21:19:02 +02:00
header ,
2022-12-04 09:37:08 +01:00
. card ,
2022-05-11 21:19:02 +02:00
. bg-white : not ( nav ) {
background : var ( --in-content-box-background ) ! important ;
}
# suggest-sync ,
. cta-neutral {
background : var ( --in-content-button-background ) ! important ;
}
. cta-neutral : hover ,
. bg-grey-50 : hover ,
. hover \ : bg-grey-100 : hover {
background : var ( --in-content-button-background-hover ) ! important ;
}
. text-blue-500 . cta-neutral ,
. text-blue-500 . bg-grey-50 ,
. text-blue-500 . hover \ : bg-grey-100 {
background : var ( --in-content-button-background ) ! important ;
}
. hover \ : bg-grey-200 : hover {
background : var ( --in-content-button-background-active ) ! important ;
}
. button . primary-button : hover : enabled ,
. button [ type = "submit" ] : not ( . secondary-button ) : hover : enabled ,
. settings-button . primary-button : hover : enabled ,
. settings-button [ type = "submit" ] : not ( . secondary-button ) : hover : enabled ,
button . primary-button : hover : enabled ,
button [ type = "submit" ] : not ( . secondary-button ) : hover : enabled {
background : var ( --in-content-primary-button-background-hover ) ! important ;
}
. tooltip ,
. tooltip :: before {
background : var ( --in-content-danger-button-background ) ! important ;
}
/* Fill */
. dismiss ,
# about-mozilla ,
. show-password-label ,
footer a [ data-testid = "link-mozilla" ] {
filter : invert ( 95 % ) ! important ;
}
header button svg ,
header . rounded svg ,
# service svg {
filter : brightness ( 15 ) ! important ;
}
button . relative ,
# fxa-settings nav svg {
filter : brightness ( 2 ) ! important ;
}
/* Others */
. input-row input [ type = "email" ] ,
. input-row input [ type = "number" ] ,
. input-row input [ type = "password" ] ,
. input-row input [ type = "tel" ] ,
. input-row input [ type = "text" ] ,
. unit-row-hr . border-grey-100 {
border-color : var ( --in-content-border-color ) ! important ;
}
. input-row input [ type = "email" ] : hover ,
. input-row input [ type = "number" ] : hover ,
. input-row input [ type = "password" ] : hover ,
. input-row input [ type = "tel" ] : hover ,
. input-row input [ type = "text" ] : hover {
border-color : var ( --in-content-border-hover ) ! important ;
}
# main-content {
box-shadow : 0 12px 18px 2px rgba ( 249 , 249 , 250 , 0 . 12 ) , 0 6px 22px 4px rgba ( 91 , 91 , 102 , 0 . 12 ) ,
0 6px 10px -4px rgba ( 82 , 82 , 94 , 0 . 04 ) ! important ;
}
. input-row input [ type = "email" ] : focus ,
. input-row input [ type = "number" ] : focus ,
. input-row input [ type = "password" ] : focus ,
. input-row input [ type = "tel" ] : focus ,
. input-row input [ type = "text" ] : focus {
box-shadow : 0 0 0 3px color-mix ( in srgb , var ( --in-content-primary-button-background-hover ) 80 % , transparent ) ! important ;
}
}
}
}
/** Fully Proton Mode *********************************************************/
@ supports -moz-bool-pref ( "userContent.page.proton" ) {
2022-12-04 09:37:08 +01:00
/*= Common contents ==========================================================*/ /*= abouts' common ===========================================================*/
2023-02-22 20:02:05 +01:00
@ -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://)).*/$" )
2022-05-11 21:19:02 +02:00
{
/* 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 ;
2022-12-04 09:37:08 +01:00
border : 1px solid transparent ! important ; /* shows up in high-contrast mode */
2022-05-11 21:19:02 +02:00
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 ;
}
2023-02-22 20:02:05 +01:00
@ supports -moz-bool-pref ( "userChrome.rounding.square_button" ) {
button ,
select ,
input [ type = "color" ] {
border-radius : 0 ! important ;
}
}
2022-05-11 21:19:02 +02:00
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 ;
2022-12-04 09:37:08 +01:00
flex-shrink : 0 ! important ; /* avoid shrinking inside flex container */
2022-05-11 21:19:02 +02:00
}
2023-02-22 20:02:05 +01:00
@ supports -moz-bool-pref ( "userChrome.rounding.square_checklabel" ) {
input [ type = "checkbox" ] {
border-radius : 0 ! important ;
}
}
2022-05-11 21:19:02 +02:00
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 ;
2022-12-04 09:37:08 +01:00
outline-offset : -1px ! important ; /* Prevents antialiasing around the corners */
2022-05-11 21:19:02 +02:00
}
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 ;
2022-12-04 09:37:08 +01:00
outline-offset : -1px ! important ; /* Prevents antialiasing around the corners */
2022-05-11 21:19:02 +02:00
}
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 ;
}
}
2023-02-22 20:02:05 +01:00
@ -moz-document url-prefix ( "about:plugins" ) , url-prefix ( "about:cache" ) , url-prefix ( "about:checkerboard" ) {
2022-05-11 21:19:02 +02:00
table {
border : 1px solid var ( --in-content-table-border-color ) ! important ;
border-radius : 0 ! important ;
}
}
2023-02-22 20:02:05 +01:00
@ -moz-document url-prefix ( "about:cache" ) , url-prefix ( "about:checkerboard" ) {
2022-05-11 21:19:02 +02:00
th ,
td {
border : 1px solid var ( --in-content-table-border-color ) ! important ;
}
th {
background-color : var ( --in-content-table-header-background ) ! important ;
color : var ( --in-content-table-header-color ) ! important ;
}
}
/*= Field Border =============================================================*/
@ supports -moz-bool-pref ( "userContent.page.field_border" ) {
@ media ( prefers-reduced-motion : no-preference ) {
@ -moz-document url-prefix ( "about:" ) {
2022-06-29 20:07:26 +02:00
html | input : is ( [ type = "email" ] , [ type = "tel" ] , [ type = "text" ] , [ type = "password" ] , [ type = "url" ] , [ type = "number" ] ) : not ( # newtab-search-text ) : hover ,
html | textarea : hover ,
2022-05-11 21:19:02 +02:00
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 {
2022-12-04 09:37:08 +01:00
background-color : var ( --in-content-page-background ) ! important ; /* Original: white */
color : var ( --in-content-page-color ) ! important ; /* Original: black */
2022-05-11 21:19:02 +02:00
/* Colors */
--view-source-green : var ( --green-80 ) ;
2022-12-04 09:37:08 +01:00
--view-source-purple : # 800080 ; /* Like alphenglow */
2022-05-11 21:19:02 +02:00
}
@ media ( -moz-toolbar-prefers-color-scheme : dark ) , ( prefers-color-scheme : dark ) {
: root {
--view-source-green : var ( --green-60 ) ;
--view-source-purple : # c68aff ;
}
}
pre [ id ] :: before ,
span [ id ] :: before {
2022-12-04 09:37:08 +01:00
color : color-mix (
in srgb ,
var ( --in-content-page-color ) 70 % ,
var ( --in-content-page-background )
) ! important ; /* Original: #ccc */
2022-05-11 21:19:02 +02:00
}
. highlight . start-tag ,
. highlight . end-tag {
2022-12-04 09:37:08 +01:00
color : var ( --view-source-purple ) ! important ; /* Original: purple */
2022-05-11 21:19:02 +02:00
}
. highlight . comment {
2022-12-04 09:37:08 +01:00
color : var ( --view-source-green ) ! important ; /* Original: green */
2022-05-11 21:19:02 +02:00
}
. highlight . cdata {
2022-12-04 09:37:08 +01:00
color : var ( --in-content-border-invalid ) ! important ; /* Original: #CC0066 */
2022-05-11 21:19:02 +02:00
}
. highlight . doctype {
2022-12-04 09:37:08 +01:00
color : # 4682b4 ! important ; /* Original: steelblue */
2022-05-11 21:19:02 +02:00
}
. highlight . pi {
2022-12-04 09:37:08 +01:00
color : orchid ! important ; /* Original: orchid */
2022-05-11 21:19:02 +02:00
}
. highlight . entity {
2022-12-04 09:37:08 +01:00
color : # ff4500 ! important ; /* Original: #FF4500 */
2022-05-11 21:19:02 +02:00
}
. highlight . attribute-name {
2022-12-04 09:37:08 +01:00
color : var ( --view-source-green ) ! important ; /* Original: black */
2022-05-11 21:19:02 +02:00
}
. highlight . attribute-value {
2022-12-04 09:37:08 +01:00
color : var ( --in-content-link-color ) ! important ; /* Original: blue */
2022-05-11 21:19:02 +02:00
}
. highlight . markupdeclaration {
2022-12-04 09:37:08 +01:00
color : # 4682b4 ! important ; /* Original: steelblue */
2022-05-11 21:19:02 +02:00
}
. highlight . error ,
. highlight
. error
> : -moz-any ( . start-tag , . end-tag , . comment , . cdata , . doctype , . pi , . entity , . attribute-name , . attribute-value ) {
2022-12-04 09:37:08 +01:00
color : var ( --in-content-error-text-color ) ! important ; /* Original: red */
2022-05-11 21:19:02 +02:00
}
}
/*= Directory View ===========================================================*/
2023-02-22 20:02:05 +01:00
@ -moz-document url-prefix ( "about:sync-log" ) , regexp ( "^(((jar:)?file:///)|(chrome://)).*/$" )
2022-05-11 21:19:02 +02:00
{
body {
background-color : var ( --in-content-box-background ) ! important ;
2022-12-04 09:37:08 +01:00
margin : 4em auto ! important ; /* Override to default */
2022-05-11 21:19:02 +02:00
}
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 ;
}
}
2023-02-22 20:02:05 +01:00
/*= 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 : # ffa436 ;
width : 48px ;
height : 48px ;
}
@ media ( -moz-toolbar-prefers-color-scheme : dark ) , ( prefers-color-scheme : dark ) {
# sanitizeEverythingWarningIcon {
fill : # ffbd4f ;
}
}
@ media ( prefers-contrast ) {
# sanitizeEverythingWarningIcon {
fill : var ( --in-content-page-color ) ;
}
}
}
2022-05-11 21:19:02 +02:00
/*= chrome://browser/content/places/places.xhtml =============================*/
@ -moz-document url ( "chrome://browser/content/places/places.xhtml" )
{
/** Library - Icons Replace *************************************************/
@ supports -moz-bool-pref ( "userChrome.icon.library" ) {
/*= Standard Folder - More Visible ===========================================*/
/* on Toolbar and Menus */
: -moz-any ( # PlacesToolbar , # BMB_bookmarksPopup , # bookmarksMenu )
. bookmark-item [ container = "true" ] : not ( [ query = "true" ] , [ tagContainer ] , [ dayContainer ] ) ,
: -moz-any ( # bookmarks-view , # historyTree , # editBMPanel_folderTree , # placesList , # placeContent )
treechildren :: -moz-tree-image ( title , container ) ,
# editBMPanel_folderMenuList : not ( [ selectedGuid = "toolbar_____" ] , [ selectedGuid = "menu________" ] ) ,
# editBMPanel_folderMenuList . folder-icon : not ( [ id ] ) ,
. downloadIconShow > . button-box > . button-icon {
list-style-image : url ( "../icons/folder.svg" ) ! important ;
}
/* Standard Folder - Open */
: -moz-any ( # PlacesToolbar , # BMB_bookmarksPopup , # bookmarksMenu )
. bookmark-item [ container = "true" ] : not ( [ query = "true" ] , [ tagContainer ] , [ dayContainer ] ) [ open = "true" ] ,
: -moz-any ( # bookmarks-view , # historyTree , # editBMPanel_folderTree , # placesList , # placeContent )
treechildren :: -moz-tree-image ( title , container , open ) {
list-style-image : url ( "../icons/folder-open.svg" ) ! important ;
}
/*= Other Folder - Inbox Icon ================================================*/
/* on Menus */
# PlacesToolbar # OtherBookmarks ,
# BMB_bookmarksPopup # BMB_unsortedBookmarks ,
# bookmarksMenuPopup # menu_unsortedBookmarks ,
: -moz-any ( # bookmarks-view , # editBMPanel_folderTree , # placesList , # placeContent )
treechildren :: -moz-tree-image ( container , OrganizerQuery_UnfiledBookmarks ) ,
: -moz-any ( # bookmarks-view , # editBMPanel_folderTree , # placesList , # placeContent )
treechildren :: -moz-tree-image ( container , queryFolder_unfiled_____ ) ,
# editBMPanel_unfiledRootItem ,
# editBMPanel_folderMenuList [ selectedGuid = "unfiled_____" ] {
list-style-image : url ( "../icons/mail-inbox-all.svg" ) ! important ;
}
/* Other Folder - Open */
# PlacesToolbar # OtherBookmarks [ open = "true" ] ,
# BMB_bookmarksPopup # BMB_unsortedBookmarks [ open = "true" ] ,
# bookmarksMenuPopup # menu_unsortedBookmarks [ open = "true" ] ,
: -moz-any ( # bookmarks-view , # editBMPanel_folderTree , # placesList , # placeContent )
treechildren :: -moz-tree-image ( container , open , OrganizerQuery_UnfiledBookmarks ) ,
: -moz-any ( # bookmarks-view , # editBMPanel_folderTree , # placesList , # placeContent )
treechildren :: -moz-tree-image ( container , open , queryFolder_unfiled_____ ) {
list-style-image : url ( "../icons/mail-inbox.svg" ) ! important ;
}
/*= Default Icon - Override ===================================================*/
/* https://github.com/mozilla/gecko-dev/blob/master/browser/themes/shared/places/tree-icons.css */
/* Query */
: -moz-any ( # historyTree , # placesList , # placeContent ) treechildren :: -moz-tree-image ( title , query ) {
list-style-image : url ( "chrome://browser/skin/places/folder-smart.svg" ) ! important ;
}
/* History */
: -moz-any ( # historyTree , # placesList , # placeContent ) treechildren :: -moz-tree-image ( title , query , dayContainer ) ,
: -moz-any ( # historyTree , # placesList , # placeContent )
treechildren :: -moz-tree-image ( query , OrganizerQuery_history____v ) {
list-style-image : url ( "chrome://browser/skin/history.svg" ) ! important ;
}
/* Downloads */
: -moz-any ( # placesList , # placeContent ) treechildren :: -moz-tree-image ( query , OrganizerQuery_downloads__v ) {
list-style-image : url ( "chrome://browser/skin/downloads/downloads.svg" ) ! important ;
}
/* Tag */
: -moz-any ( # placesList , # placeContent ) treechildren :: -moz-tree-image ( title , query , tagContainer ) ,
: -moz-any ( # placesList , # placeContent ) treechildren :: -moz-tree-image ( query , OrganizerQuery_tags_______v ) {
list-style-image : url ( "chrome://browser/skin/places/tag.svg" ) ! important ;
}
2022-10-17 19:50:35 +02:00
/* Bookmark */
2022-05-11 21:19:02 +02:00
: -moz-any ( # placesList , # placeContent ) treechildren :: -moz-tree-image ( query , OrganizerQuery_allbms_____v ) {
list-style-image : url ( "chrome://browser/skin/bookmark.svg" ) ! important ;
}
/* Bookmark Toolbar */
# BMB_bookmarksPopup # BMB_bookmarksToolbar ,
# bookmarksMenuPopup # bookmarksToolbarFolderMenu ,
: -moz-any ( # bookmarks-view , # editBMPanel_folderTree , # placesList , # placeContent )
treechildren :: -moz-tree-image ( container , queryFolder_toolbar_____ ) {
list-style-image : url ( "chrome://browser/skin/places/bookmarksToolbar.svg" ) ! important ;
}
/* Bookmark Menu */
: -moz-any ( # bookmarks-view , # editBMPanel_folderTree , # placesList , # placeContent )
treechildren :: -moz-tree-image ( container , queryFolder_menu________ ) {
list-style-image : url ( "chrome://browser/skin/places/bookmarksMenu.svg" ) ! important ;
}
/*= Default Icon - Open ======================================================*/
/* Query */
: -moz-any ( # PlacesToolbar , # BMB_bookmarksPopup , # bookmarksMenu )
. bookmark-item [ container = "true" ] [ query = "true" ] : not ( [ tagContainer ] ) [ open = "true" ]
> . menu-iconic-left
> . menu-iconic-icon {
transform : rotate ( 15deg ) ! important ;
}
/* History */
: -moz-any ( # historyTree , # placesList , # placeContent )
treechildren :: -moz-tree-image ( title , query , open , dayContainer ) ,
: -moz-any ( # historyTree , # placesList , # placeContent )
treechildren :: -moz-tree-image ( query , open , OrganizerQuery_history____v ) {
list-style-image : url ( "../icons/history-reverse.svg" ) ! important ;
}
/* Tag */
: -moz-any ( # PlacesToolbar , # BMB_bookmarksPopup , # bookmarksMenu )
. bookmark-item [ container = "true" ] [ tagContainer = "true" ] [ open = "true" ] ,
: -moz-any ( # placesList , # placeContent ) treechildren :: -moz-tree-image ( title , query , open , tagContainer ) ,
: -moz-any ( # placesList , # placeContent ) treechildren :: -moz-tree-image ( query , open , OrganizerQuery_tags_______v ) {
list-style-image : url ( "../icons/tag-open.svg" ) ! important ;
}
2022-10-17 19:50:35 +02:00
/* Bookmark */
2022-05-11 21:19:02 +02:00
: -moz-any ( # placesList , # placeContent ) treechildren :: -moz-tree-image ( query , open , OrganizerQuery_allbms_____v ) {
list-style-image : url ( "chrome://browser/skin/bookmark-hollow.svg" ) ! important ;
}
/* Bookmark Toolbar */
# BMB_bookmarksPopup # BMB_bookmarksToolbar [ open = "true" ] ,
# bookmarksMenuPopup # bookmarksToolbarFolderMenu [ open = "true" ] ,
: -moz-any ( # bookmarks-view , # editBMPanel_folderTree , # placesList , # placeContent )
treechildren :: -moz-tree-image ( container , open , queryFolder_toolbar_____ ) {
list-style-image : url ( "../icons/bookmarksToolbar-open.svg" ) ! important ;
}
/* Bookmark Menu */
: -moz-any ( # bookmarks-view , # editBMPanel_folderTree , # placesList , # placeContent )
treechildren :: -moz-tree-image ( container , open , queryFolder_menu________ ) {
2022-12-04 09:37:08 +01:00
list-style-image : url ( "../icons/bookmarksMenu-open.svg" ) ! important ; /* or bookmarksMenu-open2.svg" */
2022-05-11 21:19:02 +02:00
}
/*= Menubar - Icons ==========================================================*/
# organizeButton ,
# viewMenu ,
# maintenanceButton ,
# back-button ,
# forward-button ,
# clearDownloadsButton {
fill : currentColor ! important ;
2022-12-04 09:37:08 +01:00
-moz-context-properties : fill , fill-opacity , stroke ! important ;
2022-05-11 21:19:02 +02:00
}
/* Add */
# organizeButton {
list-style-image : url ( "chrome://global/skin/icons/settings.svg" ) ! important ;
}
# viewMenu {
list-style-image : url ( "../icons/sort.svg" ) ! important ;
}
# maintenanceButton {
list-style-image : url ( "../icons/import-export.svg" ) ! important ;
}
# clearDownloadsButton {
list-style-image : url ( "chrome://global/skin/icons/delete.svg" ) ! important ;
}
# clearDownloadsButton > . toolbarbutton-icon {
display : -moz-inline-box ! important ;
margin-top : 0 ;
margin-bottom : 0 ;
margin-inline-start : 0 ;
margin-inline-end : 2px ;
}
/* Replace */
# back-button {
list-style-image : url ( "chrome://browser/skin/back.svg" ) ! important ;
}
# forward-button {
list-style-image : url ( "chrome://browser/skin/forward.svg" ) ! important ;
}
# back-button : -moz-locale-dir ( rtl ) > . toolbarbutton-icon ,
# forward-button : -moz-locale-dir ( rtl ) > . toolbarbutton-icon {
transform : scaleX ( -1 ) ! important ;
}
}
2022-06-29 20:07:26 +02:00
@ media ( -moz-gtk-csd-available ) {
/*= Layout Fixes =========================================================*/
menupopup menu {
padding-block : 4px ;
2022-05-11 21:19:02 +02:00
}
2022-06-29 20:07:26 +02:00
. menu-right {
2022-12-04 09:37:08 +01:00
width : 16px ! important ; /* Original: 1ex */
2022-06-29 20:07:26 +02:00
background-image : url ( "chrome://global/skin/icons/arrow-right.svg" ) ;
background-position : right center ;
2022-05-11 21:19:02 +02:00
}
2022-06-29 20:07:26 +02:00
/*= Proton ===============================================================*/
@ supports -moz-bool-pref ( "userContent.page.proton" ) {
2022-05-11 21:19:02 +02:00
: root {
2022-06-29 20:07:26 +02:00
--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 ) ;
2022-12-04 09:37:08 +01:00
--organizer-toolbar-background : rgb ( 249 , 249 , 251 ) ; /* --toolbar-bgcolor */
--organizer-pane-background : rgb ( 229 , 229 , 235 ) ; /* --lwt-accent-color */
2022-06-29 20:07:26 +02:00
--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 ) ;
2022-12-04 09:37:08 +01:00
--organizer-toolbar-field-background : rgb ( 240 , 240 , 244 ) ; /* --lwt-accent-color */
2022-06-29 20:07:26 +02:00
--organizer-toolbar-field-background-focused : Field ;
--organizer-toolbar-field-border-color : transparent ;
--organizer-toolbar-field-focus-border-color : color-mix (
in srgb ,
var ( --organizer-outline-color ) 50 % ,
transparent
) ;
--organizer-toolbar-field-focus-box-shadow : 0 1px 3px rgba ( 0 , 0 , 0 , 0 . 23 ) ;
--organizer-pane-field-border-color : color-mix ( in srgb , currentColor 41 % , transparent ) ;
}
@ media ( -moz-toolbar-prefers-color-scheme : dark ) , ( prefers-color-scheme : dark ) {
: root {
--organizer-color : rgb ( 251 , 251 , 254 ) ;
--organizer-deemphasized-color : rgb ( 191 , 191 , 201 ) ;
--organizer-toolbar-background : rgb ( 43 , 42 , 51 ) ;
--organizer-pane-background : rgb ( 35 , 34 , 43 ) ;
--organizer-content-background : rgb ( 28 , 27 , 34 ) ;
--organizer-hover-background : rgb ( 82 , 82 , 94 ) ;
--organizer-selected-background : rgb ( 91 , 91 , 102 ) ;
--organizer-toolbar-field-background : var ( --in-content-page-background ) ;
--organizer-toolbar-field-background-focused : rgb ( 66 , 65 , 77 ) ;
scrollbar-color : rgba ( 249 , 249 , 250 , 0 . 4 ) rgba ( 20 , 20 , 25 , 0 . 3 ) ;
}
}
2022-05-11 21:19:02 +02:00
}
2022-06-29 20:07:26 +02:00
/*- 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 ;
2022-05-11 21:19:02 +02:00
}
2022-06-29 20:07:26 +02:00
# placesToolbar > toolbarbutton {
appearance : none ! important ;
padding : 5px ! important ;
border-radius : 4px ! important ;
2022-05-11 21:19:02 +02:00
}
2023-02-22 20:02:05 +01:00
@ supports -moz-bool-pref ( "userChrome.rounding.square_button" ) {
# placesToolbar > toolbarbutton {
border-radius : 0 ! important ;
}
}
2022-06-29 20:07:26 +02:00
# placesToolbar > toolbarbutton [ disabled ] {
opacity : 0 . 6 ! important ;
2022-05-11 21:19:02 +02:00
}
2022-06-29 20:07:26 +02:00
# placesToolbar > toolbarbutton : not ( [ disabled ] ) : hover {
background-color : var ( --organizer-hover-background ) ! important ;
color : var ( --organizer-hover-color ) ! important ;
}
# placesToolbar > toolbarbutton : not ( [ disabled ] ) : hover : active {
background-color : var ( --organizer-selected-background ) ! important ;
}
# placesToolbar > toolbarbutton > . toolbarbutton-icon ,
# placesMenu > menu > image ,
# placesMenu > menu > . menubar-text {
-moz-context-properties : fill ! important ;
fill : currentColor ! important ;
2022-05-11 21:19:02 +02:00
}
2022-06-29 20:07:26 +02:00
# placesMenu {
margin-inline-start : 6px ! important ;
2022-05-11 21:19:02 +02:00
}
2022-06-29 20:07:26 +02:00
# placesMenu > menu {
appearance : none ! important ;
color : var ( --organizer-color ) ! important ;
padding-block : 5px ! important ;
padding-inline-start : 5px ! important ;
2023-02-22 20:02:05 +01:00
border-radius : 4px ! important ;
2022-06-29 20:07:26 +02:00
margin-inline-end : 2px ! important ;
2022-05-11 21:19:02 +02:00
}
2023-02-22 20:02:05 +01:00
@ supports -moz-bool-pref ( "userChrome.rounding.square_button" ) {
# placesMenu > menu {
border-radius : 0 ! important ;
}
}
2022-06-29 20:07:26 +02:00
# placesMenu > menu [ _moz-menuactive = "true" ] ,
# placesMenu > menu : hover {
background-color : var ( --organizer-hover-background ) ! important ;
color : var ( --organizer-hover-color ) ! important ;
2022-05-11 21:19:02 +02:00
}
2022-06-29 20:07:26 +02:00
# placesMenu > menu : hover : active ,
# placesMenu > menu [ open ] {
background-color : var ( --organizer-selected-background ) ! important ;
color : var ( --organizer-selected-color ) ! important ;
2022-05-11 21:19:02 +02:00
}
2022-06-29 20:07:26 +02:00
# placesMenu > menu > . menubar-text {
2022-12-04 09:37:08 +01:00
margin-block : 0 ! important ; /* override menu.css */
2022-06-29 20:07:26 +02:00
padding-inline-end : 4px ! important ;
2022-05-11 21:19:02 +02:00
}
2022-06-29 20:07:26 +02:00
/*- 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 ;
2022-05-11 21:19:02 +02:00
}
2023-02-22 20:02:05 +01:00
@ supports -moz-bool-pref ( "userChrome.rounding.square_field" ) {
# searchFilter ,
# detailsPane html | input {
border-radius : 0 ! important ;
}
}
2022-06-29 20:07:26 +02:00
# 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 ;
2022-05-11 21:19:02 +02:00
}
2022-06-29 20:07:26 +02:00
/*- Sidebar & Splitter ---------------------------------------------------*/
# placesList {
background-color : var ( --organizer-pane-background ) ! important ;
2022-05-11 21:19:02 +02:00
}
2022-06-29 20:07:26 +02:00
# 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 ;
2022-05-11 21:19:02 +02:00
}
2022-06-29 20:07:26 +02:00
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 ;
}
2022-10-17 19:50:35 +02:00
treechildren :: -moz-tree-cell-text ( primary , dropOn ) ,
treechildren :: -moz-tree-drop-feedback {
background-color : var ( --organizer-outline-color ) ! important ;
}
2022-06-29 20:07:26 +02:00
/*- 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 ;
2022-05-11 21:19:02 +02:00
}
2022-06-29 20:07:26 +02:00
# editBookmarkPanelRows . expander-up ,
# editBookmarkPanelRows . expander-down {
2022-05-11 21:19:02 +02:00
appearance : none ! important ;
2022-06-29 20:07:26 +02:00
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 ;
2022-05-11 21:19:02 +02:00
color : var ( --organizer-color ) ! important ;
2022-06-29 20:07:26 +02:00
background-color : var ( --organizer-content-background ) ! important ;
-moz-context-properties : fill ! important ;
fill : currentColor ! important ;
}
2023-02-22 20:02:05 +01:00
@ supports -moz-bool-pref ( "userChrome.rounding.square_button" ) {
# editBookmarkPanelRows . expander-up ,
# editBookmarkPanelRows . expander-down {
border-radius : 0 ! important ;
}
}
2022-06-29 20:07:26 +02:00
# 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 ;
2022-05-11 21:19:02 +02:00
}
2022-06-29 20:07:26 +02:00
# editBookmarkPanelRows . expander-up > . button-box ,
# editBookmarkPanelRows . expander-down > . button-box {
padding : 0 ! important ;
2022-05-11 21:19:02 +02:00
}
2022-06-29 20:07:26 +02:00
# editBookmarkPanelRows . expander-up {
list-style-image : url ( "chrome://global/skin/icons/arrow-up-12.svg" ) ;
2022-05-11 21:19:02 +02:00
}
2022-06-29 20:07:26 +02:00
# editBookmarkPanelRows . expander-down {
list-style-image : url ( "chrome://global/skin/icons/arrow-down-12.svg" ) ;
2022-05-11 21:19:02 +02:00
}
2022-06-29 20:07:26 +02:00
# 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 ;
2022-05-11 21:19:02 +02:00
}
2023-02-22 20:02:05 +01:00
@ supports -moz-bool-pref ( "userChrome.rounding.square_field" ) {
# places input {
border-radius : 0 ! important ;
}
}
2022-06-29 20:07:26 +02:00
# places input : focus {
outline : 2px solid var ( --organizer-outline-color ) ! important ;
outline-offset : -1px ! important ;
}
# places input : not ( : read-write ) : focus {
outline : none ! important ;
2022-05-11 21:19:02 +02:00
}
2022-06-29 20:07:26 +02:00
. caption-label {
margin-inline-start : 8px ! important ;
color : var ( --organizer-deemphasized-color ) ! important ;
2022-05-11 21:19:02 +02:00
}
2022-06-29 20:07:26 +02:00
# editBMPanel_tagsSelectorRow > richlistbox {
2022-05-11 21:19:02 +02:00
appearance : none ! important ;
color : var ( --organizer-color ) ! important ;
2022-06-29 20:07:26 +02:00
background-color : var ( --organizer-content-background ) ! important ;
border : 1px solid var ( --organizer-border-color ) ! important ;
2022-05-11 21:19:02 +02:00
border-radius : 4px ! important ;
}
2023-02-22 20:02:05 +01:00
@ supports -moz-bool-pref ( "userChrome.rounding.square_field" ) {
# editBMPanel_tagsSelectorRow > richlistbox {
border-radius : 0 ! important ;
}
}
2022-06-29 20:07:26 +02:00
# editBMPanel_tagsSelectorRow > richlistbox > richlistitem {
border : 1px solid transparent ! important ;
}
# editBMPanel_tagsSelectorRow > richlistbox > richlistitem : hover {
2022-05-11 21:19:02 +02:00
background-color : var ( --organizer-hover-background ) ! important ;
color : var ( --organizer-hover-color ) ! important ;
}
2022-06-29 20:07:26 +02:00
# editBMPanel_tagsSelectorRow > richlistbox > richlistitem [ selected ] {
2022-05-11 21:19:02 +02:00
background-color : var ( --organizer-selected-background ) ! important ;
color : var ( --organizer-selected-color ) ! important ;
}
2022-10-17 19:50:35 +02:00
/*- Radio Button -------------------------------------------------------------*/
2022-06-29 20:07:26 +02:00
menuitem [ type = "radio" ] {
/* margin-inline-start: 0 !important; */
appearance : none ! important ;
2022-05-11 21:19:02 +02:00
}
2022-06-29 20:07:26 +02:00
menuitem [ type = "radio" ] > . menu-iconic-left > . menu-iconic-icon {
2022-05-11 21:19:02 +02:00
appearance : none ! important ;
2022-06-29 20:07:26 +02:00
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 ;
2022-12-04 09:37:08 +01:00
margin-block : 2px ! important ; /* extend the vertical clicktarget */
2022-06-29 20:07:26 +02:00
background-color : var ( --in-content-button-background ) ! important ;
background-position : center ! important ;
2022-12-04 09:37:08 +01:00
flex-shrink : 0 ! important ; /* avoid shrinking inside flex container */
2022-05-11 21:19:02 +02:00
}
2022-06-29 20:07:26 +02:00
menuitem [ type = "radio" ] > . menu-iconic-left [ checked = "true" ] > . menu-iconic-icon {
-moz-context-properties : fill ! important ;
fill : currentColor ! important ;
color : var ( --in-content-primary-button-text-color ) ! important ;
background-color : var ( --in-content-primary-button-background ) ! important ;
background-image : url ( "chrome://global/skin/icons/radio.svg" ) ! important ;
2022-05-11 21:19:02 +02:00
border-color : transparent ! important ;
2022-06-29 20:07:26 +02:00
/* Style the button also when printing with "Print Backgrounds" unchecked */
color-adjust : exact ! important ;
2022-05-11 21:19:02 +02:00
}
2022-06-29 20:07:26 +02:00
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 ;
2022-05-11 21:19:02 +02:00
}
2022-06-29 20:07:26 +02:00
menuitem [ type = "radio" ] : not ( [ disabled = "true" ] ) : hover : active > . menu-iconic-left > . menu-iconic-icon {
background-color : var ( --in-content-button-background-active ) ! important ;
2022-05-11 21:19:02 +02:00
}
2022-06-29 20:07:26 +02:00
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 ;
2022-05-11 21:19:02 +02:00
}
2022-06-29 20:07:26 +02:00
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 ;
2022-05-11 21:19:02 +02:00
}
2022-06-29 20:07:26 +02:00
menuitem [ type = "radio" ] > . menu-iconic-text {
margin-inline : 0 8px ! important ;
padding-inline-start : 0 ! important ;
2022-05-11 21:19:02 +02:00
}
2022-06-29 20:07:26 +02:00
/* Disabled checkboxes, radios and labels */
menuitem [ type = "radio" ] [ disabled = "true" ] ,
menuitem [ type = "checkbox" ] [ disabled = "true" ] {
color : inherit ! important ;
opacity : 0 . 5 ! important ;
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
/*- Check Box ----------------------------------------------------------------*/
2022-06-29 20:07:26 +02:00
/* From checkbox.css */
menuitem [ type = "checkbox" ] {
appearance : none ! important ;
-moz-box-align : center ! important ;
margin : 0px 2px ! important ;
2022-05-11 21:19:02 +02:00
}
2022-06-29 20:07:26 +02:00
menuitem [ type = "checkbox" ] > . menu-iconic-left > . menu-iconic-icon {
2022-05-11 21:19:02 +02:00
appearance : none ! important ;
2022-06-29 20:07:26 +02:00
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 ;
2022-12-04 09:37:08 +01:00
margin-inline-end : 6px ! important ; /* or 2px */
margin-block : 2px ! important ; /* From common.css */
2022-06-29 20:07:26 +02:00
}
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 ;
2022-07-27 15:53:22 +02:00
color : var ( --checkbox-checked-color , AccentColorText ) ! important ;
background-color : var ( --checkbox-checked-bgcolor , AccentColor ) ! important ;
}
@ supports -moz-bool-pref ( "userChrome.compatibility.accent_color" ) {
menuitem [ type = "checkbox" ] > . menu-iconic-left [ checked = "true" ] > . menu-iconic-icon {
color : var ( --checkbox-checked-color , -moz-accent-color-foreground ) ! important ;
background-color : var ( --checkbox-checked-bgcolor , -moz-accent-color ) ! important ;
}
2022-06-29 20:07:26 +02:00
}
menuitem [ type = "checkbox" ] : not ( [ disabled = "true" ] ) : hover > . menu-iconic-left > . menu-iconic-icon {
background-color : var (
--checkbox-unchecked-hover-bgcolor ,
2022-07-27 15:53:22 +02:00
color-mix ( in srgb , AccentColor 4 % , Field )
2022-06-29 20:07:26 +02:00
) ! important ;
}
2022-07-27 15:53:22 +02:00
@ supports -moz-bool-pref ( "userChrome.compatibility.accent_color" ) {
menuitem [ type = "checkbox" ] : not ( [ disabled = "true" ] ) : hover > . menu-iconic-left > . menu-iconic-icon {
background-color : var (
--checkbox-unchecked-hover-bgcolor ,
color-mix ( in srgb , -moz-accent-color 4 % , Field )
) ! important ;
}
}
2022-06-29 20:07:26 +02:00
menuitem [ type = "checkbox" ] : not ( [ disabled = "true" ] ) : hover : active > . menu-iconic-left > . menu-iconic-icon {
background-color : var (
--checkbox-unchecked-active-bgcolor ,
2022-07-27 15:53:22 +02:00
color-mix ( in srgb , AccentColor 8 % , Field )
2022-06-29 20:07:26 +02:00
) ! important ;
}
2022-07-27 15:53:22 +02:00
@ supports -moz-bool-pref ( "userChrome.compatibility.accent_color" ) {
menuitem [ type = "checkbox" ] : not ( [ disabled = "true" ] ) : hover : active > . menu-iconic-left > . menu-iconic-icon {
background-color : var (
--checkbox-unchecked-active-bgcolor ,
color-mix ( in srgb , -moz-accent-color 8 % , Field )
) ! important ;
}
}
2022-06-29 20:07:26 +02:00
menuitem [ type = "checkbox" ] : not ( [ disabled = "true" ] ) : hover > . menu-iconic-left [ checked = "true" ] > . menu-iconic-icon {
background-color : var (
--checkbox-checked-hover-bgcolor ,
2022-07-27 15:53:22 +02:00
color-mix ( in srgb , currentColor 12 . 5 % , AccentColor )
2022-06-29 20:07:26 +02:00
) ! important ;
}
2022-07-27 15:53:22 +02:00
@ supports -moz-bool-pref ( "userChrome.compatibility.accent_color" ) {
menuitem [ type = "checkbox" ] : not ( [ disabled = "true" ] ) : hover
> . menu-iconic-left [ checked = "true" ]
> . menu-iconic-icon {
background-color : var (
--checkbox-checked-hover-bgcolor ,
color-mix ( in srgb , currentColor 12 . 5 % , -moz-accent-color )
) ! important ;
}
}
2022-06-29 20:07:26 +02:00
menuitem [ type = "checkbox" ] : not ( [ disabled = "true" ] ) : hover : active
> . menu-iconic-left [ checked = "true" ]
> . menu-iconic-icon {
background-color : var (
--checkbox-checked-active-bgcolor ,
2022-07-27 15:53:22 +02:00
color-mix ( in srgb , currentColor 25 % , AccentColor )
2022-06-29 20:07:26 +02:00
) ! important ;
}
2022-07-27 15:53:22 +02:00
@ supports -moz-bool-pref ( "userChrome.compatibility.accent_color" ) {
menuitem [ type = "checkbox" ] : not ( [ disabled = "true" ] ) : hover : active
> . menu-iconic-left [ checked = "true" ]
> . menu-iconic-icon {
background-color : var (
--checkbox-checked-active-bgcolor ,
color-mix ( in srgb , currentColor 25 % , -moz-accent-color )
) ! important ;
}
}
2022-06-29 20:07:26 +02:00
menuitem [ type = "checkbox" ] : focus > . menu-iconic-left > . menu-iconic-icon {
2022-07-27 15:53:22 +02:00
outline : 2px solid var ( --focus-outline-color , AccentColor ) ! important ;
2022-06-29 20:07:26 +02:00
outline-offset : var ( --focus-outline-offset , 2px ) ! important ;
}
2022-07-27 15:53:22 +02:00
@ supports -moz-bool-pref ( "userChrome.compatibility.accent_color" ) {
menuitem [ type = "checkbox" ] : focus > . menu-iconic-left > . menu-iconic-icon {
outline : 2px solid var ( --focus-outline-color , -moz-accent-color ) ! important ;
}
}
2022-06-29 20:07:26 +02:00
@ media ( prefers-contrast ) {
menuitem [ type = "checkbox" ] : not ( [ disabled = "true" ] ) > . menu-iconic-left > . menu-iconic-icon {
/* color will set the border-color on the check due to how HCM works for in-content pages. */
2022-07-27 15:53:22 +02:00
color : var ( --checkbox-checked-border-color , color-mix ( in srgb , AccentColor 4 % , Field ) ) ! important ;
}
@ supports -moz-bool-pref ( "userChrome.compatibility.accent_color" ) {
menuitem [ type = "checkbox" ] : not ( [ disabled = "true" ] ) > . menu-iconic-left > . menu-iconic-icon {
/* color will set the border-color on the check due to how HCM works for in-content pages. */
color : var ( --checkbox-checked-border-color , color-mix ( in srgb , -moz-accent-color 4 % , Field ) ) ! important ;
}
2022-06-29 20:07:26 +02:00
}
menuitem [ type = "checkbox" ] > . menu-iconic-left [ checked = "true" ] {
color : var ( --checkbox-checked-border-color , currentColor ) ! important ;
2022-07-27 15:53:22 +02:00
fill : var ( --checkbox-checked-color , AccentColorText ) ! important ;
}
@ supports -moz-bool-pref ( "userChrome.compatibility.accent_color" ) {
menuitem [ type = "checkbox" ] > . menu-iconic-left [ checked = "true" ] {
fill : var ( --checkbox-checked-color , -moz-accent-color-foreground ) ! important ;
}
2022-06-29 20:07:26 +02:00
}
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 {
2022-07-27 15:53:22 +02:00
color : var ( --checkbox-checked-border-color-hover , AccentColorText ) ! important ;
fill : var ( --checkbox-checked-border-color-hover , AccentColorText ) ! important ;
}
@ supports -moz-bool-pref ( "userChrome.compatibility.accent_color" ) {
menuitem [ type = "checkbox" ] : not ( [ disabled = "true" ] ) : hover : active
> . menu-iconic-left [ checked = "true" ]
> . menu-iconic-icon ,
menuitem [ type = "checkbox" ] : not ( [ disabled = "true" ] ) : hover
> . menu-iconic-left [ checked = "true" ]
> . menu-iconic-icon {
color : var ( --checkbox-checked-border-color-hover , -moz-accent-color-foreground ) ! important ;
fill : var ( --checkbox-checked-border-color-hover , -moz-accent-color-foreground ) ! important ;
}
2022-06-29 20:07:26 +02:00
}
}
menuitem [ type = "checkbox" ] > . menu-iconic-text {
margin : 1px 0 ! important ;
2022-05-11 21:19:02 +02:00
}
2022-06-29 20:07:26 +02:00
menuitem [ type = "checkbox" ] [ disabled = "true" ] {
opacity : 0 . 4 ! important ;
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
/*- Menu Separator -----------------------------------------------------------*/
2022-06-29 20:07:26 +02:00
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 ) ;
2022-05-11 21:19:02 +02:00
}
2022-06-29 20:07:26 +02:00
}
}
}
}
2023-02-22 20:02:05 +01:00
/** Rounding ******************************************************************/
@ supports -moz-bool-pref ( "userChrome.rounding.square_button" ) {
@ -moz-document url-prefix ( "about:" ) , url-prefix ( "chrome://browser/content/" ) , url-prefix ( "chrome://pippki/content/" )
{
button ,
. close-icon ,
. action-icon :: before ,
. web-appearance-choice ,
# 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 ;
}
}
}
@ supports -moz-bool-pref ( "userChrome.rounding.square_dialog" ) {
@ -moz-document url-prefix ( "about:" ) {
. dialogBox {
border-radius : 0 ! important ;
}
}
@ -moz-document url ( "about:home" ) , url ( "about:newtab" ) {
. modal {
border-radius : 0 ! important ;
}
}
}
@ supports -moz-bool-pref ( "userChrome.rounding.square_checklabel" ) {
@ -moz-document url-prefix ( "about:" ) , url-prefix ( "chrome://browser/content/" ) , url-prefix ( "chrome://pippki/content/" )
{
input [ type = "checkbox" ] : not ( . toggle-button ) ,
. checkbox-check {
border-radius : 0 ! important ;
}
}
}
@ supports -moz-bool-pref ( "userChrome.rounding.square_field" ) {
@ -moz-document url-prefix ( "about:" ) , url-prefix ( "chrome://browser/content/" ) , url-prefix ( "chrome://pippki/content/" )
{
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 {
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 ;
}
}
}
@ supports -moz-bool-pref ( "userChrome.rounding.square_menupopup" ) {
@ -moz-document url-prefix ( "about:" ) , url-prefix ( "chrome://" )
{
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 url ( "chrome://browser/content/places/places.xhtml" )
{
/*= Library ==============================================================*/
@ supports -moz-bool-pref ( "userChrome.rounding.square_button" ) {
# placesToolbar > toolbarbutton ,
# placesMenu > menu ,
# editBookmarkPanelRows . expander-up ,
# editBookmarkPanelRows . expander-down {
border-radius : 0 ! important ;
}
}
@ supports -moz-bool-pref ( "userChrome.rounding.square_field" ) {
# searchFilter ,
# detailsPane html | input ,
# places input # editBMPanel_tagsSelectorRow > richlistbox {
border-radius : 0 ! important ;
}
}
}
2022-08-29 19:20:12 +02:00
/** Monospace *****************************************************************/
@ supports -moz-bool-pref ( "userContent.page.monospace" ) {
2023-02-22 20:02:05 +01:00
@ -moz-document url-prefix ( "about:" ) , url-prefix ( "chrome://browser/content/places/places.xhtml" ) , regexp ( "^(((jar:)?file:///)|(chrome://)).*/$" )
2022-08-29 19:20:12 +02:00
{
* {
font-family : -moz-fixed ;
}
}
}
2022-06-29 20:07:26 +02:00
/** Menu - Icons Layout *******************************************************/
2022-10-17 19:50:35 +02:00
@ supports not -moz-bool-pref ( "userChrome.icon.disabled" ) {
@ supports -moz-bool-pref ( "userChrome.icon.menu" ) {
2023-02-22 20:02:05 +01:00
@ -moz-document url ( "chrome://browser/content/places/places.xhtml" ) , url ( "about:downloads" )
{
2022-10-17 19:50:35 +02:00
menupopup menuitem : not ( [ type = "checkbox" ] [ checked = "true" ] , [ type = "radio" ] ) ,
menupopup menu : not ( [ type = "checkbox" ] [ checked = "true" ] , [ type = "radio" ] ) {
2022-12-04 09:37:08 +01:00
-moz-appearance : none ! important ; /* Linux: menulist */
2022-06-29 20:07:26 +02:00
}
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" ] ) {
2022-10-17 19:50:35 +02:00
/* Color */
2022-12-04 09:37:08 +01:00
-moz-context-properties : fill , fill-opacity , stroke ! important ;
2022-10-17 19:50:35 +02:00
fill : currentColor ! important ;
2023-02-22 20:02:05 +01:00
stroke : transparent ;
2022-10-17 19:50:35 +02:00
/* Layout */
background-size : 16px ! important ;
background-repeat : no-repeat ! important ;
background-image : var ( --menuitem-image ) ;
2022-06-29 20:07:26 +02:00
}
2022-10-17 19:50:35 +02:00
/* For native context menus */
@ supports -moz-bool-pref ( "widget.macos.native-context-menus" ) or -moz-bool-pref ( "widget.gtk.native-context-menus" ) {
: not ( menu , # ContentSelectDropdown )
> menupopup
> menuitem : not ( . menuitem-iconic , . bookmark-item , . in-menulist , [ checked = "true" ] ) ,
: not ( menu , # ContentSelectDropdown ) > menupopup > menu : not ( . menu-iconic , . in-menulist , [ checked = "true" ] ) {
list-style-image : var ( --menuitem-image , url ( "../icons/blank.svg" ) ) ! important ;
}
}
/* Padding */
2022-06-29 20:07:26 +02:00
: root {
2022-10-17 19:50:35 +02:00
--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 ;
2022-06-29 20:07:26 +02:00
}
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" ] ) {
2022-10-17 19:50:35 +02:00
background-position : var ( --uc-menu-background-position ) var ( --context-menu-background-padding ) center ! important ;
padding-inline-start : var ( --context-menu-background-padding ) ! important ;
2022-06-29 20:07:26 +02:00
}
2022-10-17 19:50:35 +02:00
/* Padding - Windows */
@ media ( -moz-os-version : windows-win7 ) , ( -moz-platform : windows-win7 ) {
: root {
--context-menu-background-padding-default : 2px ;
}
2023-02-22 20:02:05 +01:00
@ media ( -moz-windows-classic ) {
: root {
--context-menu-background-padding-default : -0 . 5px ;
}
}
2022-06-29 20:07:26 +02:00
}
2022-10-17 19:50:35 +02:00
@ media ( -moz-os-version : windows-win8 ) , ( -moz-platform : windows-win8 ) {
: root {
--context-menu-background-padding-default : 3px ;
}
}
@ media ( -moz-os-version : windows-win7 ) ,
( -moz-platform : windows-win7 ) ,
( -moz-os-version : windows-win8 ) ,
( -moz-platform : windows-win8 ) {
menupopup : is ( # placesContext , # placesColumnsContext , # downloadsContextMenu )
menuitem : not ( . menuitem-iconic , . bookmark-item , . in-menulist , [ checked = "true" ] ) ,
menupopup : is ( # placesContext , # placesColumnsContext , # downloadsContextMenu )
menu : not ( . menu-iconic , . in-menulist , [ checked = "true" ] ) ,
menupopup : is ( # organizeButtonPopup , # maintenanceButtonPopup )
> menuitem : not ( . menuitem-iconic , . bookmark-item , . in-menulist , [ checked = "true" ] ) ,
menupopup : is ( # viewMenuPopup , # maintenanceButtonPopup ) > menu : not ( . menu-iconic , . in-menulist , [ checked = "true" ] ) {
background-position : left var ( --context-menu-background-padding ) center ! important ;
padding-inline-start : 0 ! important ;
}
2022-06-29 20:07:26 +02:00
}
2022-10-17 19:50:35 +02:00
@ media ( -moz-os-version : windows-win10 ) , ( -moz-platform : windows-win10 ) {
: root {
--context-menu-background-padding : 1em ;
2022-12-04 09:37:08 +01:00
--context-menu-text-padding : 24px ; /* 16px + 8px */
2022-10-17 19:50:35 +02:00
--menu-background-padding-default : calc (
var ( --context-menu-background-padding ) + var ( --context-menu-text-padding )
) ;
}
2023-02-22 20:02:05 +01:00
@ media not ( -moz-windows-non-native-menus ) {
: root {
--context-menu-background-padding : 3px ;
--menu-background-padding-default : 0px ;
}
@ supports -moz-bool-pref ( "userChrome.compatibility.os.win11" ) {
: root {
--context-menu-background-padding : 5px ;
}
}
menupopup : is ( # historyMenuPopup , # bookmarksMenuPopup ) . menu-iconic > . menu-iconic-left ,
menupopup : is ( # historyMenuPopup , # bookmarksMenuPopup ) . menuitem-iconic > . menu-iconic-left ,
menupopup : not ( [ placespopup = "true" ] ) . menu-iconic > . menu-iconic-left ,
menupopup : not ( [ placespopup = "true" ] ) . menuitem-iconic > . menu-iconic-left {
appearance : none ! important ;
padding-block : 0 ! important ;
padding-inline-start : 5px ! important ;
margin-inline-end : 8px ! important ;
}
@ supports -moz-bool-pref ( "userChrome.compatibility.os.win11" ) {
menupopup : is ( # historyMenuPopup , # bookmarksMenuPopup ) . menu-iconic > . menu-iconic-left ,
menupopup : is ( # historyMenuPopup , # bookmarksMenuPopup ) . menuitem-iconic > . menu-iconic-left ,
menupopup : not ( [ placespopup = "true" ] ) . menu-iconic > . menu-iconic-left ,
menupopup : not ( [ placespopup = "true" ] ) . menuitem-iconic > . menu-iconic-left {
box-sizing : content-box ;
}
}
menupopup : is ( # historyMenuPopup , # bookmarksMenuPopup ) . menu-accel ,
menupopup : is ( # historyMenuPopup , # bookmarksMenuPopup ) . menu-iconic-accel ,
menupopup : not ( [ placespopup = "true" ] ) . menu-accel ,
menupopup : not ( [ placespopup = "true" ] ) . menu-iconic-accel {
box-sizing : content-box ;
min-height : 16px ;
}
menupopup : is ( # historyMenuPopup , # bookmarksMenuPopup ) . menu-accel ,
menupopup : is ( # historyMenuPopup , # bookmarksMenuPopup ) . menu-iconic-accel ,
menupopup : is ( # historyMenuPopup , # bookmarksMenuPopup ) . menu-text ,
menupopup : is ( # historyMenuPopup , # bookmarksMenuPopup ) . menu-iconic-text ,
menupopup : not ( [ placespopup = "true" ] ) . menu-accel ,
menupopup : not ( [ placespopup = "true" ] ) . menu-iconic-accel ,
menupopup : not ( [ placespopup = "true" ] ) . menu-text ,
menupopup : not ( [ placespopup = "true" ] ) . menu-iconic-text {
padding-block : 0 ! important ;
}
}
2022-10-17 19:50:35 +02:00
menupopup : is ( # placesContext , # placesColumnsContext , # downloadsContextMenu )
menuitem : not ( . menuitem-iconic , . bookmark-item , . in-menulist , [ checked = "true" ] ) ,
menupopup : is ( # placesContext , # placesColumnsContext , # downloadsContextMenu )
menu : not ( . menu-iconic , . in-menulist , [ checked = "true" ] ) ,
menupopup : is ( # organizeButtonPopup , # maintenanceButtonPopup )
> menuitem : not ( . menuitem-iconic , . bookmark-item , . in-menulist , [ checked = "true" ] ) ,
menupopup : is ( # viewMenuPopup , # maintenanceButtonPopup ) > menu : not ( . menu-iconic , . in-menulist , [ checked = "true" ] ) {
padding-inline-start : var ( --menu-background-padding-default ) ! important ;
margin-left : 0 ! important ;
}
}
/* Padding - Linux */
@ media ( -moz-gtk-csd-available ) {
: root {
--context-menu-background-padding-default : 6px ;
}
/* Contextmenu Checkbox Unset */
menupopup : is ( # placesContext , # placesColumnsContext , # downloadsContextMenu ) menuitem [ type = "checkbox" ] {
margin-inline : 0 ! important ;
}
menupopup : is ( # placesContext , # placesColumnsContext , # downloadsContextMenu )
menuitem [ type = "checkbox" ]
> . menu-iconic-left
> . menu-iconic-icon {
margin-inline-end : 0 ! important ;
}
menupopup : is ( # placesContext , # placesColumnsContext , # downloadsContextMenu )
menuitem [ type = "checkbox" ] : not ( [ checked = "true" ] )
> . menu-iconic-left
> . menu-iconic-icon {
border : none ! important ;
background-color : unset ! important ;
}
2022-06-29 20:07:26 +02:00
}
2022-10-17 19:50:35 +02:00
/* Padding - Mac */
@ supports -moz-bool-pref ( "layout.css.osx-font-smoothing.enabled" ) {
: root {
--context-menu-background-padding-default : 10px ;
--context-menu-mac-padding : 21px ;
}
/* context menu width */
menupopup : is ( # placesContext , # placesColumnsContext , # downloadsContextMenu )
menuitem : not ( . menuitem-iconic , . bookmark-item , . in-menulist , [ checked = "true" ] ) ,
menupopup : is ( # placesContext , # placesColumnsContext , # downloadsContextMenu )
menu : not ( . menu-iconic , . in-menulist , [ checked = "true" ] ) {
padding-inline-end : var ( --context-menu-background-padding ) ! important ;
}
menupopup : is ( # placesContext , # placesColumnsContext , # downloadsContextMenu )
menuitem : not ( . menuitem-iconic , . bookmark-item , . in-menulist , [ checked = "true" ] )
> . menu-text ,
menupopup : is ( # placesContext , # placesColumnsContext , # downloadsContextMenu )
menu : not ( . menu-iconic , . in-menulist , [ checked = "true" ] )
> . menu-text {
/* text position */
padding-inline-start : var ( --context-menu-mac-padding ) ! important ;
}
/* Checkbox menuitem, None iconic menu */
menupopup : is ( # placesContext , # placesColumnsContext , # downloadsContextMenu ) menuitem [ checked = "true" ] ,
menupopup : is ( # placesContext , # placesColumnsContext , # downloadsContextMenu ) menu : not ( . menu-iconic ) {
padding-inline-start : calc (
var ( --context-menu-background-padding ) + var ( --context-menu-mac-padding )
) ! important ;
}
2022-06-29 20:07:26 +02:00
}
2022-10-17 19:50:35 +02:00
/*= Context Menu ===========================================================*/
@ supports -moz-bool-pref ( "userChrome.icon.context_menu" ) {
/* Icon lists */
/*= downloadsContextMenu =====================================================*/
. downloadPauseMenuItem {
--menuitem-image : url ( "chrome://global/skin/media/pause-fill.svg" ) ;
}
. downloadResumeMenuItem {
--menuitem-image : url ( "chrome://global/skin/media/play-fill.svg" ) ;
}
. downloadUnblockMenuItem {
--menuitem-image : url ( "../icons/checkmark-circle.svg" ) ;
}
. downloadUseSystemDefaultMenuItem {
--menuitem-image : url ( "chrome://browser/skin/open.svg" ) ;
}
. downloadAlwaysUseSystemDefaultMenuItem {
/* checkbox */
--menuitem-image : url ( "../icons/folder-globe.svg" ) ;
}
. downloadAlwaysOpenSimilarFilesMenuItem {
/* checkbox */
--menuitem-image : url ( "../icons/fluid.svg" ) ;
}
2022-06-29 20:07:26 +02:00
. downloadShowMenuItem {
2022-10-17 19:50:35 +02:00
--menuitem-image : url ( "chrome://global/skin/icons/folder.svg" ) ;
}
@ supports -moz-bool-pref ( "userChrome.icon.library" ) {
. downloadShowMenuItem {
--menuitem-image : url ( "../icons/folder.svg" ) ;
}
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
# downloadsContextMenu > menuitem . downloadOpenReferrerMenuItem ,
# downloadsContextMenu > menuitem [ command = "downloadsCmd_openReferrer" ] {
--menuitem-image : url ( "../icons/link-square.svg" ) ;
}
# downloadsContextMenu > menuitem . downloadCopyLocationMenuItem ,
# downloadsContextMenu > menuitem [ command = "downloadsCmd_copyLocation" ] {
--menuitem-image : url ( "../icons/link.svg" ) ;
}
. downloadDeleteFileMenuItem {
--menuitem-image : url ( "chrome://global/skin/icons/delete.svg" ) ;
}
. downloadRemoveFromHistoryMenuItem {
--menuitem-image : url ( "../icons/eraser.svg" ) ;
}
# downloadsContextMenu > menuitem [ command = "downloadsCmd_clearList" ] ,
# downloadsContextMenu > menuitem [ command = "downloadsCmd_clearDownloads" ] {
--menuitem-image : url ( "../icons/broom.svg" ) ;
}
/*= placeContext =============================================================*/
# placesContext_open {
--menuitem-image : url ( "../icons/link-square.svg" ) ;
}
# placesContext_openBookmarkContainer \ : tabs ,
# placesContext_openBookmarkLinks \ : tabs {
--menuitem-image : url ( "../icons/movetowindow-16.svg" ) ;
}
# placesContext_open \ : newtab ,
# placesContext_openContainer \ : tabs ,
# placesContext_openLinks \ : tabs {
--menuitem-image : url ( "chrome://browser/skin/new-tab.svg" ) ;
}
# placesContext_open \ : newcontainertab {
--menuitem-image : url ( "../icons/container-openin-16.svg" ) ;
}
# placesContext_open \ : newwindow {
--menuitem-image : url ( "chrome://browser/skin/window.svg" ) ;
}
# placesContext_open \ : newprivatewindow {
--menuitem-image : url ( "chrome://browser/skin/privateBrowsing.svg" ) ;
}
# placesContext_show_bookmark \ : info ,
# placesContext_show \ : info ,
# placesContext_show_folder \ : info {
--menuitem-image : url ( "chrome://global/skin/icons/edit.svg" ) ;
}
# placesContext_deleteBookmark ,
# placesContext_deleteFolder ,
# placesContext_delete ,
# placesContext_delete_history {
--menuitem-image : url ( "chrome://global/skin/icons/delete.svg" ) ;
}
# placesContext_deleteHost {
--menuitem-image : url ( "../icons/eye-hide.svg" ) ;
}
# placesContext_sortBy \ : name {
--menuitem-image : url ( "../icons/text-sort-ascending.svg" ) ;
}
# placesContext_cut {
--menuitem-image : url ( "chrome://browser/skin/edit-cut.svg" ) ;
}
# placesContext_copy {
--menuitem-image : url ( "../icons/edit-copy.svg" ) ;
}
# placesContext_paste_group {
--menuitem-image : url ( "chrome://browser/skin/edit-paste.svg" ) ;
}
# placesContext_new \ : bookmark {
--menuitem-image : url ( "chrome://browser/skin/bookmark.svg" ) ;
}
2022-06-29 20:07:26 +02:00
# placesContext_showInFolder ,
# placesContext_new \ : folder {
2022-10-17 19:50:35 +02:00
--menuitem-image : url ( "chrome://global/skin/icons/folder.svg" ) ;
}
@ supports -moz-bool-pref ( "userChrome.icon.library" ) {
# placesContext_showInFolder ,
# placesContext_new \ : folder {
--menuitem-image : url ( "../icons/folder.svg" ) ;
}
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
# placesContext_new \ : separator {
--menuitem-image : url ( "../icons/vertical-line.svg" ) ;
}
# placesContext_paste {
--menuitem-image : url ( "chrome://browser/skin/edit-paste.svg" ) ;
}
# placesContext_createBookmark {
--menuitem-image : url ( "chrome://browser/skin/bookmark.svg" ) ;
}
# show-other-bookmarks_PersonalToolbar {
/* checkbox */
--menuitem-image : url ( "../icons/star-line-horizontal.svg" ) ;
}
# placesContext_showAllBookmarks {
--menuitem-image : url ( "chrome://browser/skin/bookmark-star-on-tray.svg" ) ;
}
. openintabs-menuitem {
--menuitem-image : url ( "../icons/movetowindow-16.svg" ) ;
}
2022-06-29 20:07:26 +02:00
}
2022-10-17 19:50:35 +02:00
@ supports -moz-bool-pref ( "userChrome.icon.global_menu" ) {
/*= organizeButtonPopup ======================================================*/
# newbookmark {
--menuitem-image : url ( "chrome://browser/skin/bookmark.svg" ) ;
}
2022-06-29 20:07:26 +02:00
# newfolder {
2022-10-17 19:50:35 +02:00
--menuitem-image : url ( "chrome://global/skin/icons/folder.svg" ) ;
}
@ supports -moz-bool-pref ( "userChrome.icon.library" ) {
# newfolder {
--menuitem-image : url ( "../icons/folder.svg" ) ;
}
2022-05-11 21:19:02 +02:00
}
2022-10-17 19:50:35 +02:00
# newseparator {
--menuitem-image : url ( "../icons/vertical-line.svg" ) ;
}
# orgUndo {
--menuitem-image : url ( "../icons/undo.svg" ) ;
}
# orgCut {
--menuitem-image : url ( "chrome://browser/skin/edit-cut.svg" ) ;
}
# orgCopy {
--menuitem-image : url ( "../icons/edit-copy.svg" ) ;
}
# orgPaste {
--menuitem-image : url ( "chrome://browser/skin/edit-paste.svg" ) ;
}
# orgDelete {
--menuitem-image : url ( "chrome://global/skin/icons/delete.svg" ) ;
}
# orgSelectAll {
--menuitem-image : url ( "../icons/select-all-on.svg" ) ;
}
# orgClose {
--menuitem-image : url ( "chrome://global/skin/icons/close.svg" ) ;
}
/*= viewMenuPopup ============================================================*/
# viewColumns {
--menuitem-image : url ( "chrome://global/skin/icons/columnpicker.svg" ) ;
}
# viewSort {
--menuitem-image : url ( "../icons/text-sort-ascending.svg" ) ;
}
/*= maintenanceButtonPopup ===================================================*/
# backupBookmarks {
--menuitem-image : url ( "chrome://devtools/skin/images/datastore.svg" ) ;
}
# fileImport {
2022-12-04 09:37:08 +01:00
--menuitem-image : url ( "../icons/toolbarButton-download.svg" ) ;
2022-10-17 19:50:35 +02:00
}
# fileExport {
--menuitem-image : url ( "chrome://browser/skin/open.svg" ) ;
}
# browserImport {
--menuitem-image : url ( "chrome://browser/skin/import.svg" ) ;
}
2022-06-29 20:07:26 +02:00
}
}
}
}
/** Download Panel ************************************************************/
@ -moz-document url-prefix ( "about:downloads" ) {
@ media ( prefers-reduced-motion : no-preference ) {
@ supports -moz-bool-pref ( "userChrome.decoration.download_panel" ) {
/* Accent Color for downloaded item */
# downloadsListBox . download-state [ exists ] . downloadDetails {
color : var ( --button-primary-bgcolor ) ;
}
# downloadsListBox . download-state [ exists ] . downloadDetails . downloadDetailsHover {
color : var ( --button-primary-hover-bgcolor ) ;
}
/* File moved or missing */
# downloadsListBox . download-state : not ( [ exists ] , [ state = "0" ] ) . downloadTarget {
text-decoration : line-through ;
text-decoration-color : color-mix ( in srgb , currentColor 65 % , transparent ) ;
}
2022-08-29 19:20:12 +02:00
# downloadsListBox . download-state : not ( [ exists ] , [ state = "0" ] ) . downloadTarget : hover {
text-decoration : none ;
}
2022-06-29 20:07:26 +02:00
# downloadsListBox . download-state : not ( [ exists ] , [ state = "0" ] ) . downloadTypeIcon {
filter : grayscale ( 100 % ) ! important ;
2022-05-11 21:19:02 +02:00
}
}
}
}