diff --git a/CREDITS b/CREDITS index bcb2bf4..0d4b88a 100644 --- a/CREDITS +++ b/CREDITS @@ -71,10 +71,6 @@ N: userChrome.css W: https://gist.github.com/Dragoner7/ec2319e5038a6b4722d3e692713f9471 L: MPL 2.0 -N: userChrome.css -W: https://github.com/xarantolus/userchrome.css -L: MIT - N: userChrome.org W: https://www.userchrome.org/what-is-userchrome-css.html L: CC BY 4.0 diff --git a/userChrome.css b/userChrome.css index 551e86d..f97ca1d 100644 --- a/userChrome.css +++ b/userChrome.css @@ -4,7 +4,8 @@ :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]) { --lwt-accent-color: rgb(229, 229, 235) !important; /* Original: rgb(240, 240, 244) */ } - @media not all and ((-moz-os-version: windows-win7) or (-moz-os-version: windows-win8)) { /* Level 4 */ + @media not all and ((-moz-os-version: windows-win7) or (-moz-os-version: windows-win8)) { + /* Level 4 */ :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]) #navigator-toolbox { background-color: var(--lwt-accent-color) !important; } @@ -29,8 +30,8 @@ } /*= Zoom in button's plus icon horizontal rate =============================*/ - #customization-palette-container #zoom-in-button > .toolbarbutton-icon, - #customization-panel-container #zoom-in-button > .toolbarbutton-icon, + #customization-palette-container #zoom-in-button > .toolbarbutton-icon, + #customization-panel-container #zoom-in-button > .toolbarbutton-icon, #widget-overflow-mainView #zoom-in-button > .toolbarbutton-icon { padding-inline-start: 0px !important; } @@ -46,7 +47,7 @@ /*= Light Weight Theme =====================================================*/ /* Header Image */ :root[lwtheme-image] { - background-image: var(--lwt-header-image) !important; /* Original: var(--lwt-header-image) */ + background-image: var(--lwt-header-image) !important; /* Original: var(--lwt-header-image) */ background-repeat: no-repeat !important; background-position: right top !important; } @@ -56,20 +57,21 @@ } } :root[lwtheme-image] #navigator-toolbox:-moz-lwtheme { - background-image: var(--lwt-additional-images) !important; /* Original: var(--lwt-header-image), var(--lwt-additional-images); */ - background-repeat: var(--lwt-background-tiling) !important; + background-image: var( + --lwt-additional-images + ) !important; /* Original: var(--lwt-header-image), var(--lwt-additional-images); */ + background-repeat: var(--lwt-background-tiling) !important; background-position: var(--lwt-background-alignment) !important; - background-color: unset !important; /* Original: var(--lwt-accent-color) */ + background-color: unset !important; /* Original: var(--lwt-accent-color) */ } /* Navbar Border */ #navigator-toolbox:-moz-lwtheme { - --tabs-border-color: rgba(0,0,0,.3); + --tabs-border-color: rgba(0, 0, 0, 0.3); } /** Windows 7, 8 - Compatibility ********************************************/ - @media (-moz-os-version: windows-win7), - (-moz-os-version: windows-win8) { + @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8) { /* Header Color */ :root:not([lwtheme-image]) #navigator-toolbox:-moz-lwtheme { background-color: var(--lwt-accent-color) !important; @@ -89,8 +91,7 @@ /** System Default Theme ****************************************************/ /*= Common - URL Bar focus color ===========================================*/ - @media (-moz-windows-accent-color-in-titlebar), - (-moz-gtk-csd-available) { + @media (-moz-windows-accent-color-in-titlebar), (-moz-gtk-csd-available) { /* URL Bar */ :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme), :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) { @@ -98,8 +99,14 @@ } :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #urlbar[open] > #urlbar-background, - :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #urlbar[open] > #urlbar-background { - border-color: color-mix(in srgb, -moz-accent-color 50%, transparent) !important; /* Like: --toolbar-field-focus-border-color */ + :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) + #urlbar[open] + > #urlbar-background { + border-color: color-mix( + in srgb, + -moz-accent-color 50%, + transparent + ) !important; /* Like: --toolbar-field-focus-border-color */ } } @@ -108,12 +115,22 @@ #TabsToolbar:not(:-moz-lwtheme) { --background-color: rgb(229, 229, 235); } - #TabsToolbar:not(:-moz-lwtheme) .tabbrowser-tab > .tab-stack > .tab-background:not([selected="true"], [multiselected]) { + #TabsToolbar:not(:-moz-lwtheme) + .tabbrowser-tab + > .tab-stack + > .tab-background:not([selected="true"], [multiselected]) { color: var(--background-color); background-color: color-mix(in srgb, currentColor 60%, transparent); } - #TabsToolbar:not(:-moz-lwtheme) .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"], [multiselected]) { - background-color: color-mix(in srgb, currentColor 85%, transparent) !important; /* Original: color-mix(in srgb, currentColor 11%, transparent) */ + #TabsToolbar:not(:-moz-lwtheme) + .tabbrowser-tab:hover + > .tab-stack + > .tab-background:not([selected="true"], [multiselected]) { + background-color: color-mix( + in srgb, + currentColor 85%, + transparent + ) !important; /* Original: color-mix(in srgb, currentColor 11%, transparent) */ } #scrollbutton-up:not(:-moz-lwtheme), #scrollbutton-down:not(:-moz-lwtheme), @@ -177,7 +194,7 @@ --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-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); @@ -191,10 +208,10 @@ /* button background states are also used for checkboxes and radiobuttons */ --in-content-button-text-color: var(--in-content-text-color); --in-content-button-text-color-hover: var(--in-content-text-color); - --in-content-button-background: rgba(207,207,216,.33); - --in-content-button-background-hover: rgba(207,207,216,.66); - --in-content-button-background-active: rgb(207,207,216); - --in-content-primary-button-text-color: rgb(251,251,254); + --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; @@ -271,36 +288,36 @@ :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-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-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-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-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-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-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: rgba(249,249,250,0.2); + --in-content-table-border-dark-color: rgba(249, 249, 250, 0.2); --in-content-table-header-background: rgb(5, 64, 150); --in-content-table-header-color: var(--in-content-page-color); @@ -317,17 +334,27 @@ } } - /*== Menu color ===========================================================*/ - html#main-window menupopup { + /*== Menu color ===========================================================*/ + html#main-window menupopup { /* is same as toolbar color https://github.com/mozilla/gecko-dev/blob/master/toolkit/themes/windows/global/global.css#L17-L67 */ --menu-color: var(--arrowpanel-color, var(--in-content-page-color)) !important; --menu-background-color: var(--arrowpanel-background, var(--in-content-button-background)) !important; - --menu-border-color: var(--toolbarbutton-active-background, var(--button-active-bgcolor, var(--card-outline-color))) !important; - --menuitem-hover-background-color: var(--toolbarbutton-hover-background, var(--button-hover-bgcolor, var(--in-content-button-background-hover))) !important; + --menu-border-color: var( + --toolbarbutton-active-background, + var(--button-active-bgcolor, var(--card-outline-color)) + ) !important; + --menuitem-hover-background-color: var( + --toolbarbutton-hover-background, + var(--button-hover-bgcolor, var(--in-content-button-background-hover)) + ) !important; --menu-disabled-color: color-mix(in srgb, var(--menu-color) 40%, transparent) !important; - --menuitem-disabled-hover-background-color: color-mix(in srgb, var(--menuitem-hover-background-color) 40%, transparent) !important; + --menuitem-disabled-hover-background-color: color-mix( + in srgb, + var(--menuitem-hover-background-color) 40%, + transparent + ) !important; } @media not all and (-moz-gtk-csd-available) { @@ -336,8 +363,13 @@ --panel-background: var(--lwt-sidebar-background-color, var(--menu-background-color)) !important; } window:is(#bookmarksPanel, #history-panel)[lwt-sidebar="true"] menu[_moz-menuactive="true"]:not([disabled="true"]), - window:is(#bookmarksPanel, #history-panel)[lwt-sidebar="true"] menuitem[_moz-menuactive="true"]:not([disabled="true"]) { - --menuitem-hover-background-color: color-mix(in srgb, currentColor 17%, transparent); /* Looks like toolbar button */ + window:is(#bookmarksPanel, #history-panel)[lwt-sidebar="true"] + menuitem[_moz-menuactive="true"]:not([disabled="true"]) { + --menuitem-hover-background-color: color-mix( + in srgb, + currentColor 17%, + transparent + ); /* Looks like toolbar button */ /* or var(--lwt-sidebar-highlight-background-color) If this value is used, unset is required in the default theme. */ @@ -353,11 +385,15 @@ :root[lwtheme-mozlightdark] menupopup:not(#BMB_bookmarksPopup, [placespopup="true"]), :root[lwtheme-mozlightdark] menupopup:is(#goPopup, #bookmarksMenuPopup) { --menu-color: var(--toolbar-color, var(--in-content-page-color)) !important; - --arrowpanel-background: var(--toolbar-bgcolor, var(--in-content-button-background)) !important; /* --menu-background-color */ + --arrowpanel-background: var( + --toolbar-bgcolor, + var(--in-content-button-background) + ) !important; /* --menu-background-color */ } @media not all and (-moz-gtk-csd-available) { window:is(#bookmarksPanel, #history-panel)[style*="--newtab-background-color: rgba(249, 249, 251, 1);"] menupopup, /* Default Light Mode */ - window:is(#bookmarksPanel, #history-panel)[style*="--newtab-background-color: rgba(43, 42, 51, 1);"] menupopup { /* Default Dark Mode */ + window:is(#bookmarksPanel, #history-panel)[style*="--newtab-background-color: rgba(43, 42, 51, 1);"] menupopup { + /* Default Dark Mode */ --panel-color: var(--menu-color) !important; --panel-background: var(--menu-background-color) !important; } @@ -373,26 +409,31 @@ } /*= Notification ===========================================================*/ - @-moz-document url("chrome://global/content/alerts/alert.xhtml") { + @-moz-document url("chrome://global/content/alerts/alert.xhtml") + { /* Color */ - :root{ + :root { --menu-color: #15141a; --menu-background-color: #f9f9fb; --menu-border-color: #cfcfd8; --menuitem-hover-background-color: #e0e0e6; } - @media (-moz-toolbar-prefers-color-scheme:dark) { + @media (-moz-toolbar-prefers-color-scheme: dark) { :root { - --menu-border-color: rgba(107,107,107,.3); + --menu-border-color: rgba(107, 107, 107, 0.3); --menu-color: #fbfbfe; --menu-background-color: #2b2a33; --menuitem-hover-background-color: #52525e; } - #alertSourceLabel { color: rgb(5,209,241) !important; } + #alertSourceLabel { + color: rgb(5, 209, 241) !important; + } } /* line below removes background from the notification "window" on linux */ - #alertNotification{ background: transparent !important; } + #alertNotification { + background: transparent !important; + } #alertBox { color: var(--menu-color) !important; @@ -410,10 +451,10 @@ } .close-icon, #alertSettings { - background: transparent !important + background: transparent !important; } .close-icon:hover > .toolbarbutton-icon, - #alertSettings:is(:hover,[open]) > .button-box > .box-inherit { + #alertSettings:is(:hover, [open]) > .button-box > .box-inherit { background-color: var(--menuitem-hover-background-color, #e0e0e6) !important; } @@ -433,8 +474,9 @@ } /*= Downloads ==============================================================*/ - @-moz-document url("chrome://mozapps/content/downloads/unknownContentType.xhtml") { - @media (-moz-toolbar-prefers-color-scheme:dark) { + @-moz-document url("chrome://mozapps/content/downloads/unknownContentType.xhtml") + { + @media (-moz-toolbar-prefers-color-scheme: dark) { :root { --in-content-page-background: #42414d; } @@ -533,15 +575,15 @@ :root { /* Tab Bar */ --proton-tab-block-margin: 0px !important; /* Original: 4px, Legacy */ - --tab-block-margin: 0px !important; /* New version of --proton-tab-block-margin */ - --tab-border-radius: 0px !important; /* Original: 4px */ - --inline-tab-padding: 6px !important; /* Original: 8px */ + --tab-block-margin: 0px !important; /* New version of --proton-tab-block-margin */ + --tab-border-radius: 0px !important; /* Original: 4px */ + --inline-tab-padding: 6px !important; /* Original: 8px */ /* Panel */ --arrowpanel-menuicon-padding: 8px; --arrowpanel-menuitem-margin: 0 var(--arrowpanel-menuicon-padding) !important; /* Original: 0 8px */ --arrowpanel-menuitem-padding: 5px !important; /* Original: 8px */ - --arrowpanel-padding: 0.8em !important; /* Original: 16px or .cui-widget-panel, .cui-widget-panel::part(arrowcontent) => 4px 0 */ + --arrowpanel-padding: 0.8em !important; /* Original: 16px or .cui-widget-panel, .cui-widget-panel::part(arrowcontent) => 4px 0 */ } :root[uidensity="compact"] { @@ -549,17 +591,17 @@ --toolbarbutton-outer-padding: 2px !important; /* Original: 3px, General is 2px */ /* Panel */ - --arrowpanel-menuitem-padding: 3px !important; /* Original: 8px */ + --arrowpanel-menuitem-padding: 3px !important; /* Original: 8px */ } :root[uidensity="touch"] { /* Tab Bar - Like Original */ --proton-tab-block-margin: 4px !important; /* Original: 4px */ - --tab-block-margin: 4px !important; /* New version of --proton-tab-block-margin */ - --inline-tab-padding: 8px !important; /* Original: 8px */ + --tab-block-margin: 4px !important; /* New version of --proton-tab-block-margin */ + --inline-tab-padding: 8px !important; /* Original: 8px */ /* Panel - Like Original */ - --arrowpanel-menuitem-padding: 8px !important; /* Original: 8px */ + --arrowpanel-menuitem-padding: 8px !important; /* Original: 8px */ } /* Fix Tab bar button radious */ @@ -582,17 +624,19 @@ --newtab-button-minus-width-padding: 2px; --newtab-button-width-padding: calc(var(--toolbarbutton-inner-padding) - var(--newtab-button-minus-width-padding)); } - #new-tab-button > .toolbarbutton-icon, - #alltabs-button > .toolbarbutton-badge-stack { + #new-tab-button > .toolbarbutton-icon, + #alltabs-button > .toolbarbutton-badge-stack { /* Original: calc(2 * var(--toolbarbutton-inner-padding) + 16px) */ width: calc(2 * var(--newtab-button-width-padding) + 16px) !important; /* Original: --toolbarbutton-inner-padding */ - padding-left: var(--newtab-button-width-padding) !important; + padding-left: var(--newtab-button-width-padding) !important; padding-right: var(--newtab-button-width-padding) !important; } - #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] { + #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) + > #tabbrowser-arrowscrollbox + > .tabbrowser-tab[first-visible-unpinned-tab] { margin-inline-start: 0 !important; } @@ -601,15 +645,16 @@ --scrollbtn-outer-padding: 3px; } #scrollbutton-up { - padding-left: var(--scrollbtn-inner-padding, 4px) !important; /* Original: 4px */ + padding-left: var(--scrollbtn-inner-padding, 4px) !important; /* Original: 4px */ padding-right: var(--scrollbtn-outer-padding, 4px) !important; } #scrollbutton-down { - padding-left: var(--scrollbtn-outer-padding, 4px) !important; /* Original: 4px */ + padding-left: var(--scrollbtn-outer-padding, 4px) !important; /* Original: 4px */ padding-right: var(--scrollbtn-inner-padding, 4px) !important; } - :root:not([uidensity="touch"]) #new-tab-button, #alltabs-button { + :root:not([uidensity="touch"]) #new-tab-button, + #alltabs-button { --toolbarbutton-outer-padding: 1px; /* Original: 2px*/ } @@ -629,10 +674,10 @@ --tab-min-height: 33px !important; --toolbarbutton-inner-padding: unset !important; } - :root[uidensity=compact] #TabsToolbar { + :root[uidensity="compact"] #TabsToolbar { --tab-min-height: 29px !important; } - :root[uidensity=touch] #TabsToolbar { + :root[uidensity="touch"] #TabsToolbar { --tab-min-height: 41px !important; } #tabbrowser-tabs, @@ -642,48 +687,61 @@ } /* Top Margin */ - .tab-background, .tab-content { + .tab-background, + .tab-content { margin-top: 0 !important; } /* Scroll Button - Size Fix */ :root #tabbrowser-arrowscrollbox { --scrollbtn-vertical-padding: 3px; - --scrollbtn-vertical-border: 2px; - --scrollbtn-border-radius: 7px; + --scrollbtn-vertical-border: 2px; + --scrollbtn-border-radius: 7px; } #scrollbutton-up, #scrollbutton-down { /* Original: var(--toolbarbutton-inner-padding) calc(var(--toolbarbutton-inner-padding) - 6px) = 9px */ /* https://github.com/mozilla/gecko-dev/blob/71b1259afd1cdaf41871ae675c2dadb967ea5b34/browser/themes/shared/toolbarbuttons.inc.css#L142 */ - padding-top: var(--scrollbtn-vertical-padding, var(--toolbarbutton-inner-padding)) !important; + padding-top: var(--scrollbtn-vertical-padding, var(--toolbarbutton-inner-padding)) !important; padding-bottom: var(--scrollbtn-vertical-padding, var(--toolbarbutton-inner-padding)) !important; /* Original: 4px */ - border-top-width: var(--scrollbtn-vertical-border, 4px) !important; + border-top-width: var(--scrollbtn-vertical-border, 4px) !important; border-bottom-width: var(--scrollbtn-vertical-border, 4px) !important; /* Original: calc(var(--tab-border-radius) + 4px) = 8px */ border-radius: var(--scrollbtn-border-radius, calc(var(--tab-border-radius) + 4px)) !important; } :root[tabsintitlebar]:not([uidensity="compact"]) #toolbar-menubar[autohide="true"] { - height: calc(var(--tab-min-height) - var(--tabs-navbar-shadow-size) - 2px); /* Compact: 28px, Normal: 33px, Touch: 38px */ + height: calc( + var(--tab-min-height) - var(--tabs-navbar-shadow-size) - 2px + ); /* Compact: 28px, Normal: 33px, Touch: 38px */ } /* Pinned Tab - Titlechanged Indicator position fix */ - :root:not([uidensity="touch"]) .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), - :root:not([uidensity="touch"]) .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { + :root:not([uidensity="touch"]) + .tabbrowser-tab:is([image], [pinned]) + > .tab-stack + > .tab-content[attention]:not([selected="true"]), + :root:not([uidensity="touch"]) + .tabbrowser-tab + > .tab-stack + > .tab-content[pinned][titlechanged]:not([selected="true"]) { /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */ background-position-y: bottom calc(4.5px + var(--tabs-navbar-shadow-size)) !important; } - :root[uidensity="compact"] .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), + :root[uidensity="compact"] + .tabbrowser-tab:is([image], [pinned]) + > .tab-stack + > .tab-content[attention]:not([selected="true"]), :root[uidensity="compact"] .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */ - background-position-y: bottom calc(.5px + var(--tabs-navbar-shadow-size)) !important; + background-position-y: bottom calc(0.5px + var(--tabs-navbar-shadow-size)) !important; } /*= URL Bar - Reduce Padding ===============================================*/ - :root:not([uidensity="touch"]) #urlbar-container, #search-container { + :root:not([uidensity="touch"]) #urlbar-container, + #search-container { padding-block: 2px; /* Original: 4px */ margin-inline: 5px; /* Original: 5px */ } @@ -728,7 +786,7 @@ --infobar-button-vertical-margin: 2px; } .infobar > .icon { - margin-block: var(--infobar-vertical-margin, 8px) !important; /* Original: 8px */ + margin-block: var(--infobar-vertical-margin, 8px) !important; /* Original: 8px */ } .notification-message { padding-block: var(--infobar-vertical-margin, 8px) !important; /* Original: 8px */ @@ -779,13 +837,13 @@ padding-inline-end: 0 !important; /* Original: 2px */ } :root:not([uidensity="touch"]) .menupopup-arrowscrollbox { - padding-block: 1px !important; /* Original: 4px*/ + padding-block: 1px !important; /* Original: 4px*/ } :root:not([uidensity="touch"]) #context-navigation:not([hidden]) { - padding: 0 0 1px !important; /* Original: 0 0 4px*/ + padding: 0 0 1px !important; /* Original: 0 0 4px*/ } :root:not([uidensity="touch"]) .menu-right { - margin-right: 6px !important; /* Original: 12px */ + margin-right: 6px !important; /* Original: 12px */ } } @@ -907,7 +965,7 @@ } .tab-stack { - margin-top: 0px !important; + margin-top: 0px !important; margin-bottom: 0px !important; } @@ -924,27 +982,35 @@ /* Fix for windows's system default theme. Using --toolbar-bgcolor fallback */ --tab-selected-bgcolor: unset !important; /* Original: rgb(255,255,255); */ } -#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[selected="true"]:-moz-lwtheme { + #tabbrowser-tabs:not([movingtab]) + > #tabbrowser-arrowscrollbox + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected="true"]:-moz-lwtheme { /* Original: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) */ background-image: linear-gradient(transparent, transparent), - linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), - var(--lwt-header-image, none) !important; + linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important; } /* Multi Selected Color */ - #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[multiselected]:not([selected]):-moz-lwtheme { + #tabbrowser-tabs:not([movingtab]) + > #tabbrowser-arrowscrollbox + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]):-moz-lwtheme { background-image: linear-gradient(var(--toolbar-bgcolor, transparent), var(--toolbar-bgcolor, transparent)), - linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), - var(--lwt-header-image, none) !important; + linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important; } .tab-background[multiselected="true"]:not([selected="true"]) > .tab-loading-burst:not([bursting]) { background: color-mix(in srgb, currentColor 65%, transparent); - opacity: .3; + opacity: 0.3; } - #TabsToolbar[brighttext] .tab-background[multiselected="true"]:not([selected="true"]) > .tab-loading-burst:not([bursting]) { - opacity: .15; + #TabsToolbar[brighttext] + .tab-background[multiselected="true"]:not([selected="true"]) + > .tab-loading-burst:not([bursting]) { + opacity: 0.15; } /** Selected Tab - Photon like contextline **********************************/ @@ -971,12 +1037,16 @@ } .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line { - background-color: rgba(0,0,0,.2) !important; + background-color: rgba(0, 0, 0, 0.2) !important; opacity: 1 !important; transform: none !important; } - #TabsToolbar[brighttext] .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line { - background-color: rgba(255,255,255,.2) !important; + #TabsToolbar[brighttext] + .tabbrowser-tab:hover:not([selected="true"], [multiselected]) + > .tab-stack + > .tab-background + > .tab-context-line { + background-color: rgba(255, 255, 255, 0.2) !important; } /* Prevent identitiy color flashing */ @@ -994,12 +1064,20 @@ } /* Remove side's background color border */ - #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background:-moz-lwtheme { - --tabs-border-color: rgba(0,0,0,.3) !important; + #TabsToolbar[brighttext] + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) + > .tab-stack + > .tab-background:-moz-lwtheme { + --tabs-border-color: rgba(0, 0, 0, 0.3) !important; box-shadow: 0 0 1px var(--tabs-border-color) !important; /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)) */ } - #TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background { - box-shadow: 0 0 1px var(--tabs-border-color), 0 0 4px rgba(128,128,142,0.5) !important; /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */ + #TabsToolbar:not([brighttext]) + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) + > .tab-stack + > .tab-background { + box-shadow: 0 0 1px var(--tabs-border-color), 0 0 4px rgba(128, 128, 142, 0.5) !important; /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */ } /* Container Tab */ @@ -1066,17 +1144,24 @@ } #tabbrowser-tabs[closebuttons="activetab"] .tab-label-container[textoverflow][labeldirection="ltr"]:not([pinned]), - #tabbrowser-tabs[closebuttons="activetab"] .tab-label-container[textoverflow]:not([labeldirection]):-moz-locale-dir(ltr):not([pinned]) { + #tabbrowser-tabs[closebuttons="activetab"] + .tab-label-container[textoverflow]:not([labeldirection]):-moz-locale-dir(ltr):not([pinned]) { mask-image: linear-gradient(to right, black 70%, transparent) !important; } #tabbrowser-tabs[closebuttons="activetab"] .tab-label-container[textoverflow][labeldirection="rtl"]:not([pinned]), - #tabbrowser-tabs[closebuttons="activetab"] .tab-label-container[textoverflow]:not([labeldirection]):-moz-locale-dir(rtl):not([pinned]) { + #tabbrowser-tabs[closebuttons="activetab"] + .tab-label-container[textoverflow]:not([labeldirection]):-moz-locale-dir(rtl):not([pinned]) { mask-image: linear-gradient(to left, black 70%, transparent) !important; } /** Clipped tabs - Show close button at hover *******************************/ - #tabbrowser-tabs[closebuttons="activetab"] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([pinned]) > .tab-stack > .tab-content > .tab-close-button:not([selected="true"]) { + #tabbrowser-tabs[closebuttons="activetab"] + > #tabbrowser-arrowscrollbox + > .tabbrowser-tab:not([pinned]) + > .tab-stack + > .tab-content + > .tab-close-button:not([selected="true"]) { display: -moz-inline-box !important; } @@ -1100,25 +1185,31 @@ /* Closed Button's padding reduce */ #tabbrowser-tabs[closebuttons="activetab"] .tab-content > .tab-close-button { - margin-inline-end: calc((var(--inline-tab-padding) / -2) + 2px) !important; /* Original: calc(var(--inline-tab-padding) / -2)*/ + margin-inline-end: calc( + (var(--inline-tab-padding) / -2) + 2px + ) !important; /* Original: calc(var(--inline-tab-padding) / -2)*/ padding: 4px !important; /* Original: 7px */ - width: 20px !important; /* Original: 24px */ + width: 20px !important; /* Original: 24px */ height: 20px !important; /* Original: 24px */ } - #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-close-button { + #tabbrowser-tabs[closebuttons="activetab"] + .tabbrowser-tab:not(:hover) + > .tab-stack + > .tab-content + > .tab-close-button { padding-inline-start: 3px !important; /* Original: 0px */ width: 19px !important; /* Redefine from 19px !important, Original: 17px = (width - padding) */ } /** Sound Tab - Hide Label **************************************************/ - .tab-secondary-label:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]){ + .tab-secondary-label:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]) { display: none !important; } /** Sound Tab - Show with Favicons ******************************************/ /* Makes the favicons always visible (also on hover) */ - .tab-icon-image:not([pinned]){ - opacity: 1 !important + .tab-icon-image:not([pinned]) { + opacity: 1 !important; } /* Makes the speaker icon to always appear if the tab is playing (not only on hover) */ @@ -1132,12 +1223,12 @@ /* Shape */ padding: 1.5px !important; border-radius: 10px !important; - width: 17px !important; + width: 17px !important; height: 17px !important; } .tab-icon-overlay:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) { /* Color */ - color: currentColor !important; + color: currentColor !important; stroke: transparent !important; background: transparent !important; fill-opacity: 0.8 !important; @@ -1148,33 +1239,36 @@ } /* None exist favicon - Size bigger */ - .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing],[crashed]) { + .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]) { top: 0 !important; inset-inline-end: 0 !important; margin-inline-end: 5.5px !important; padding: 2px 0 !important; } - .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) { + .tabbrowser-tab:not([image]) + .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) { box-sizing: content-box; padding: 3px 0; border-radius: 0 !important; } - .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]):hover { + .tabbrowser-tab:not([image]) + .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]):hover { padding: 0; border-radius: 10px !important; } /* Busy - Show */ - .tab-throbber[busy], .tab-icon-pending[busy] { + .tab-throbber[busy], + .tab-icon-pending[busy] { opacity: 1 !important; } /* Busy - Overlay Position */ .tabbrowser-tab:not([pinned])[busy] .tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked]) { - transform: translateX(-.5px) translateY(-2.5px); + transform: translateX(-0.5px) translateY(-2.5px); } - .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing],[crashed])[busy] { + .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed])[busy] { top: -3.5px !important; inset-inline-end: -9px !important; margin-inline-end: 9.5px !important; @@ -1185,7 +1279,7 @@ .tab-icon-overlay:not([crashed])[soundplaying]:hover, .tab-icon-overlay:not([crashed])[muted]:hover, .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover { - color: var(--toolbar-bgcolor, white) !important; + color: var(--toolbar-bgcolor, white) !important; stroke: var(--lwt-tab-text, var(--toolbar-color)) !important; background-color: var(--lwt-tab-text, var(--toolbar-color)) !important; fill-opacity: 0.95 !important; @@ -1197,7 +1291,7 @@ color: var(--toolbar-bgcolor, black) !important; } - .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing],[crashed]):hover { + .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]):hover { padding: 0 !important; } @@ -1205,7 +1299,7 @@ .tab-icon-sound[pictureinpicture]:not([pinned]) { /* Shape */ display: -moz-inline-box !important; - width: 14px; + width: 14px; height: 14px; -moz-box-ordinal-group: 2 !important; @@ -1234,7 +1328,7 @@ .tabbrowser-tab:not([pinned]) .tab-content::before, .tabbrowser-tab[pinned][busy] .tab-content::before { /* Box Model */ - content: ''; + content: ""; display: block; position: absolute !important; @@ -1251,7 +1345,8 @@ } /* Pinned Tab */ - .tabbrowser-tab[pinned] .tab-icon-image, .tab-sharing-icon-overlay { + .tabbrowser-tab[pinned] .tab-icon-image, + .tab-sharing-icon-overlay { box-sizing: content-box; padding: 3px 0; @@ -1272,23 +1367,44 @@ .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected="true"]), .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */ - --dotted-identity-image: radial-gradient(circle, var(--identity-icon-color), var(--identity-icon-color) 2px, transparent 2px); + --dotted-identity-image: radial-gradient( + circle, + var(--identity-icon-color), + var(--identity-icon-color) 2px, + transparent 2px + ); background-image: var(--dotted-identity-image), var(--dotted-identity-image), var(--dotted-identity-image) !important; background-position-x: 32%, 50%, 70% !important; } - :root[uidensity="compact"] .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected="true"]), - :root[uidensity="compact"] .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { + :root[uidensity="compact"] + .tabbrowser-tab:is([image], [pinned])[usercontextid] + > .tab-stack + > .tab-content[attention]:not([selected="true"]), + :root[uidensity="compact"] + .tabbrowser-tab[usercontextid] + > .tab-stack + > .tab-content[pinned][titlechanged]:not([selected="true"]) { /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */ background-position-x: 30%, 50%, 70% !important; } /* Pinned Tab - Titlechanged & soundplaying */ - .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack > .tab-content[attention]:not([selected="true"]), - .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { + .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[attention]:not([selected="true"]), + .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[pinned][titlechanged]:not([selected="true"]) { background-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px) !important; } - :root[uidensity="compact"] .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack > .tab-content[attention]:not([selected="true"]), - :root[uidensity="compact"] .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { + :root[uidensity="compact"] + .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[attention]:not([selected="true"]), + :root[uidensity="compact"] + .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[pinned][titlechanged]:not([selected="true"]) { background-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px) !important; } @@ -1308,13 +1424,15 @@ #editBMPanel_folderMenuList:not([selectedGuid="toolbar_____"], [selectedGuid="menu________"]), #editBMPanel_folderMenuList .folder-icon:not([id]), /* Download Popup */ - .downloadIconShow > .button-box > .button-icon { + .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) { + :-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; } @@ -1335,8 +1453,10 @@ #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_____) { + :-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-big.svg") !important; } @@ -1350,7 +1470,8 @@ /* 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) { + :-moz-any(#historyTree, #placesList, #placeContent) + treechildren::-moz-tree-image(query, OrganizerQuery_history____v) { list-style-image: url("chrome://browser/skin/history.svg") !important; } @@ -1378,24 +1499,30 @@ } /* Bookmark Menu */ - :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, queryFolder_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 { + :-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) { + :-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(#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; @@ -1409,12 +1536,14 @@ /* 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_____) { + :-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________) { + :-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) + treechildren::-moz-tree-image(container, open, queryFolder_menu________) { list-style-image: url("./icons/bookmarksMenu-open.svg") !important; /* or bookmarksMenu-open2.svg" */ } @@ -1428,10 +1557,10 @@ --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding) - 3px); --arrowpanel-menuitemblank-padding: calc(var(--arrowpanel-menuitem-padding) + 1px); } - :root[uidensity=compact] { + :root[uidensity="compact"] { --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding) - 5px); } - :root[uidensity=touch] { + :root[uidensity="touch"] { --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding)); } :root { @@ -1443,7 +1572,9 @@ --arrowpanel-menuimageblank-padding: calc(var(--arrowpanel-menuitem-padding) - 2px) !important; /* Blank Menu Left Padding */ - --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menuicon-paddingx2) + var(--arrowpanel-menuitem-padding)); + --arrowpanel-menuimageblank-padding-horizontal: calc( + var(--arrowpanel-menuicon-paddingx2) + var(--arrowpanel-menuitem-padding) + ); --arrowpanel-menuitemblank-padding: calc(var(--arrowpanel-menuitem-padding) + 1px); } @@ -1455,7 +1586,7 @@ padding-inline-start: 0 !important; } #panelMenu_bookmarksMenu .subviewbutton[disabled="true"] .toolbarbutton-text, - #appMenu_historyMenu .subviewbutton[disabled="true"] .toolbarbutton-text { + #appMenu_historyMenu .subviewbutton[disabled="true"] .toolbarbutton-text { padding-inline-start: var(--arrowpanel-menublank-padding) !important; } #appMenu-proton-update-banner .toolbarbutton-text { @@ -1466,7 +1597,7 @@ #appMenu-proton-update-banner::before { display: -moz-inline-box; margin-inline-end: var(--arrowpanel-menuicon-padding); - width: 16px; + width: 16px; height: 16px; } #appMenu-proton-update-banner { @@ -1478,7 +1609,7 @@ #appMenu-fxa-status2, #appMenu-zoom-controls2 { align-items: center; - padding-top: var(--arrowpanel-menuimageblank-padding) !important; + padding-top: var(--arrowpanel-menuimageblank-padding) !important; padding-bottom: var(--arrowpanel-menuimageblank-padding) !important; } #appMenu-zoom-controls2::before { @@ -1503,7 +1634,8 @@ stroke: var(--zoom-controls-bgcolor, var(--button-bgcolor, ButtonFace)) !important; -moz-context-properties: fill, stroke !important; } - #appMenu-zoomReduce-button2:not([disabled], [open], :active):is(:hover) > .toolbarbutton-icon, #appMenu-zoomEnlarge-button2:not([disabled], [open], :active):is(:hover) > .toolbarbutton-icon { + #appMenu-zoomReduce-button2:not([disabled], [open], :active):is(:hover) > .toolbarbutton-icon, + #appMenu-zoomEnlarge-button2:not([disabled], [open], :active):is(:hover) > .toolbarbutton-icon { stroke: var(--button-hover-bgcolor) !important; } @@ -1522,15 +1654,17 @@ #appMenu-proton-update-banner::before { content: url("chrome://browser/skin/whatsnew.svg"); } - #appMenu-fxa-status2::before { /* Don't exist img tag */ + #appMenu-fxa-status2::before { + /* Don't exist img tag */ content: url("chrome://browser/skin/fxa/avatar-empty.svg"); } #appMenu-fxa-status2:is([fxastatus="signedin"], [fxastatus="unverified"], [fxastatus="login-failed"])::before { display: none; } - #appMenu-fxa-status2:is([fxastatus="signedin"], [fxastatus="unverified"], [fxastatus="login-failed"]) #appMenu-fxa-label2::before { + #appMenu-fxa-status2:is([fxastatus="signedin"], [fxastatus="unverified"], [fxastatus="login-failed"]) + #appMenu-fxa-label2::before { /* url("https://profile.accounts.firefox.com/v1/avatar/a") */ - content: ''; + content: ""; border-radius: 50% !important; background-size: 16px !important; background-image: var(--avatar-image-url) !important; @@ -1578,15 +1712,15 @@ } /*= Panel - Account ========================================================*/ - #PanelUI-fxa-menu-connect-device-button .toolbarbutton-icon, + #PanelUI-fxa-menu-connect-device-button .toolbarbutton-icon, #PanelUI-fxa-menu-account-signout-button .toolbarbutton-icon { - width: 16px !important; + width: 16px !important; height: 16px !important; } /* Default */ #fxa-manage-account-button::before { - content: ''; + content: ""; display: -moz-inline-box; width: 32px !important; height: 32px !important; @@ -1625,14 +1759,14 @@ } /* Change Separator */ - #PanelUI-fxa-menu::before{ + #PanelUI-fxa-menu::before { content: ""; display: -moz-box; border-bottom: 1px solid var(--panel-separator-color); margin: var(--panel-separator-margin); padding: 0; } - #PanelUI-fxa-menu > :first-child{ + #PanelUI-fxa-menu > :first-child { -moz-box-ordinal-group: 0; } #PanelUI-sign-out-separator { @@ -1696,34 +1830,44 @@ list-style-image: url("chrome://browser/skin/customize.svg"); } - #appmenu-developer-tools-view .subviewbutton:nth-child(1) { /* Web Developer Tools */ + #appmenu-developer-tools-view .subviewbutton:nth-child(1) { + /* Web Developer Tools */ list-style-image: url("chrome://browser/skin/developer.svg"); } - #appmenu-developer-tools-view .subviewbutton:nth-child(2) { /* Task Manager */ + #appmenu-developer-tools-view .subviewbutton:nth-child(2) { + /* Task Manager */ list-style-image: url("./icons/performance.svg"); } - #appmenu-developer-tools-view .subviewbutton:nth-child(3) { /* Remote Debugging - Edge bug.svg */ + #appmenu-developer-tools-view .subviewbutton:nth-child(3) { + /* Remote Debugging - Edge bug.svg */ list-style-image: url("./icons/bug.svg"); } - #appmenu-developer-tools-view .subviewbutton:nth-child(4) { /* Browser Toolbox - Edge webdeveloper.svg */ + #appmenu-developer-tools-view .subviewbutton:nth-child(4) { + /* Browser Toolbox - Edge webdeveloper.svg */ list-style-image: url("./icons/webdeveloper.svg"); } - #appmenu-developer-tools-view .subviewbutton:nth-child(5) { /* Browser Content Toolbaox - */ + #appmenu-developer-tools-view .subviewbutton:nth-child(5) { + /* Browser Content Toolbaox - */ list-style-image: url("./icons/command-frames.svg"); } - #appmenu-developer-tools-view .subviewbutton:nth-last-child(5) { /* Browser Console */ + #appmenu-developer-tools-view .subviewbutton:nth-last-child(5) { + /* Browser Console */ list-style-image: url("chrome://devtools/skin/images/command-console.svg"); } - #appmenu-developer-tools-view .subviewbutton:nth-last-child(4) { /* Responsive Design Mode */ + #appmenu-developer-tools-view .subviewbutton:nth-last-child(4) { + /* Responsive Design Mode */ list-style-image: url("./icons/command-responsivemode.svg"); } - #appmenu-developer-tools-view .subviewbutton:nth-last-child(3) { /* Eyedropper */ + #appmenu-developer-tools-view .subviewbutton:nth-last-child(3) { + /* Eyedropper */ list-style-image: url("chrome://devtools/skin/images/command-eyedropper.svg"); } - #appmenu-developer-tools-view .subviewbutton:nth-last-child(2) { /* Page Source - Edge file-search.svg */ + #appmenu-developer-tools-view .subviewbutton:nth-last-child(2) { + /* Page Source - Edge file-search.svg */ list-style-image: url("./icons/search-file.svg"); } - #appmenu-developer-tools-view .subviewbutton:nth-last-child(1) { /* Extensions for Devel */ + #appmenu-developer-tools-view .subviewbutton:nth-last-child(1) { + /* Extensions for Devel */ list-style-image: url("chrome://devtools/skin/images/debugging-addons.svg"); } #appmenu-developer-tools-view .subviewbutton:last-child { @@ -1749,7 +1893,7 @@ #appMenu_menu_HelpPopup_reportPhishingtoolmenu { list-style-image: url("chrome://global/skin/icons/warning.svg"); } - #appMenu_aboutName{ + #appMenu_aboutName { list-style-image: url("chrome://global/skin/icons/info.svg"); } @@ -1760,7 +1904,7 @@ #appMenu-library-history-button { list-style-image: url("chrome://browser/skin/history.svg"); } - #appMenu-library-downloads-button{ + #appMenu-library-downloads-button { list-style-image: url("chrome://browser/skin/downloads/downloads.svg"); } @@ -1829,15 +1973,21 @@ menupopup menuitem:not([type="checkbox"], [type="radio"]), menupopup menu:not([type="checkbox"], [type="radio"]), #main-menubar > menu { - -moz-appearance: none !important; /* Linux: menulist */ + -moz-appearance: none !important; /* Linux: menulist */ } /* Icon */ - :not(menu, #ContentSelectDropdown) > menupopup > menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]), - :not(menu, #ContentSelectDropdown) > menupopup > menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), + :not(menu, #ContentSelectDropdown) + > menupopup + > menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]), + :not(menu, #ContentSelectDropdown) + > menupopup + > menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), #main-menubar > menu, - menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]), - menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), + menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) + menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]), + menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) + menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), #blockedPopupDontShowMessage { /* Color */ -moz-context-properties: fill, fill-opacity !important; @@ -1851,8 +2001,12 @@ /* For native context menus on macOS */ @supports -moz-bool-pref("widget.macos.native-context-menus") { - :not(menu, #ContentSelectDropdown) > menupopup > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist), - :not(menu, #ContentSelectDropdown) > menupopup > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist) { + :not(menu, #ContentSelectDropdown) + > menupopup + > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist), + :not(menu, #ContentSelectDropdown) + > menupopup + > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist) { list-style-image: var(--menuitem-image) !important; } } @@ -1864,8 +2018,10 @@ } :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem:not(.menuitem-iconic), :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu:not(.menu-iconic), - menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item), - menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), + menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) + menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item), + menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) + menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), #blockedPopupDontShowMessage { background-position: left var(--context-menu-background-padding) center !important; padding-inline-start: var(--context-menu-background-padding) !important; @@ -1886,27 +2042,33 @@ } /* Padding - Windows */ - @media (-moz-os-version: windows-win7 ), - (-moz-os-version: windows-win8 ), - (-moz-os-version: windows-win10) { + @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), (-moz-os-version: windows-win10) { /* Checkbox */ :root { --context-menu-text-padding: calc(var(--menu-padding) + var(--context-menu-background-padding-default) + 16px); } - :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem[type="checkbox"][checked="false"] > .menu-iconic-left { + :not(menu, #ContentSelectDropdown, #context-navigation) + > menupopup + > menuitem[type="checkbox"][checked="false"] + > .menu-iconic-left { padding-inline-start: var(--context-menu-text-padding); } } - @media (-moz-os-version: windows-win7 ), - (-moz-os-version: windows-win8 ) { + @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8) { :root { --context-menu-background-padding-default: 3px; } - :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist), - :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist), - menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item), - menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), + :not(menu, #ContentSelectDropdown, #context-navigation) + > menupopup + > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist), + :not(menu, #ContentSelectDropdown, #context-navigation) + > menupopup + > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist), + menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) + menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item), + menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) + menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), #blockedPopupDontShowMessage { background-position: left var(--context-menu-background-padding) center !important; padding-inline-start: 0 !important; @@ -1915,13 +2077,21 @@ @media (-moz-os-version: windows-win10) { :root { --context-menu-background-padding: 1em; - --menu-background-padding-default: calc(var(--context-menu-background-padding) + var(--context-menu-text-padding)); + --menu-background-padding-default: calc( + var(--context-menu-background-padding) + var(--context-menu-text-padding) + ); } - :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist), - :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist), - menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item), - menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), + :not(menu, #ContentSelectDropdown, #context-navigation) + > menupopup + > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist), + :not(menu, #ContentSelectDropdown, #context-navigation) + > menupopup + > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist), + menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) + menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item), + menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) + menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), #blockedPopupDontShowMessage { padding-inline-start: var(--menu-background-padding-default) !important; margin-left: 0 !important; @@ -1929,7 +2099,9 @@ menupopup:is(#BMB_bookmarksPopup, [placespopup="true"]) > menuitem:not(.menuitem-iconic, [disabled="true"]), menupopup:is(#BMB_bookmarksPopup, [placespopup="true"]) > menu:not(.menu-iconic) { margin-inline: var(--arrowpanel-menuicon-padding) !important; - padding-inline-start: calc(var(--menu-background-padding-default) - var(--arrowpanel-menuicon-padding)) !important; + padding-inline-start: calc( + var(--menu-background-padding-default) - var(--arrowpanel-menuicon-padding) + ) !important; background-position: left calc(var(--arrowpanel-menuitem-padding) + 1px) center !important; } } @@ -1942,8 +2114,12 @@ } /* context menu width */ - :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist), - :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist), + :not(menu, #ContentSelectDropdown, #context-navigation) + > menupopup + > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist), + :not(menu, #ContentSelectDropdown, #context-navigation) + > menupopup + > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist), #blockedPopupDontShowMessage { padding-inline-end: var(--context-menu-background-padding) !important; } @@ -2004,7 +2180,8 @@ } #context_sendTabToDevice:is([disabled="true"]) + #context_shareTabURL, /* Legacy */ - #context_sendTabToDevice:is([disabled="true"]) + menuitem.share-tab-url-item { /* At windows */ + #context_sendTabToDevice:is([disabled="true"]) + menuitem.share-tab-url-item { + /* At windows */ --menuitem-image: url("./icons/share.svg"); } #context_reopenInContainer { @@ -2067,10 +2244,12 @@ --menuitem-image: url("chrome://global/skin/icons/undo.svg"); } - #toggle_toolbar-menubar { /* checkbox */ + #toggle_toolbar-menubar { + /* checkbox */ /* --menuitem-image: url("./icons/calendar-agenda.svg"); */ } - #toggle_PersonalToolbar { /* Also placeContext */ + #toggle_PersonalToolbar { + /* Also placeContext */ --menuitem-image: url("chrome://browser/skin/bookmarks-toolbar.svg"); } @@ -2085,12 +2264,14 @@ #blockedPopupOptions > menuitem[oncommand="gPopupBlockerObserver.editPopupSettings();"] { --menuitem-image: url("chrome://global/skin/icons/edit.svg"); } - #blockedPopupDontShowMessage { /* checkbox */ + #blockedPopupDontShowMessage { + /* checkbox */ --menuitem-image: url("chrome://global/skin/icons/blocked.svg"); } /*= autohide-context =======================================================*/ - #autohide-context > menuitem[data-l10n-id="full-screen-autohide"] { /* checkbox */ + #autohide-context > menuitem[data-l10n-id="full-screen-autohide"] { + /* checkbox */ } #autohide-context > menuitem[data-l10n-id="full-screen-exit"] { @@ -2101,11 +2282,13 @@ #context-viewsource-goToLine { --menuitem-image: url("./icons/text-number-format.svg"); } - #context-viewsource-wrapLongLines { /* checkbox */ + #context-viewsource-wrapLongLines { + /* checkbox */ /* --menuitem-image: url("./icons/arrow-sort-down-lines.svg"); */ } - #context-viewsource-highlightSyntax { /* checkbox */ + #context-viewsource-highlightSyntax { + /* checkbox */ /* --menuitem-image: url("./icons/code.svg"); */ } @@ -2172,7 +2355,8 @@ #context-media-playbackrate { --menuitem-image: url("./icons/time-picker.svg"); } - #context-media-loop { /* checkbox */ + #context-media-loop { + /* checkbox */ /* --menuitem-image: url("./icons/arrow-repeat-all.svg"); */ } #context-leave-dom-fullscreen { @@ -2191,7 +2375,8 @@ #context-viewvideo { --menuitem-image: url("./icons/video.svg"); } - #context-video-pictureinpicture { /* checkbox */ + #context-video-pictureinpicture { + /* checkbox */ /* --menuitem-image: url("chrome://global/skin/media/picture-in-picture-open.svg"); */ } @@ -2302,7 +2487,8 @@ --menuitem-image: url("./icons/command-frames.svg"); } - #spell-check-enabled { /* checkbox */ + #spell-check-enabled { + /* checkbox */ } #spell-add-dictionaries-main { --menuitem-image: url("./icons/book-add.svg"); @@ -2326,10 +2512,11 @@ --menuitem-image: url("chrome://devtools/skin/images/tool-accessibility.svg"); } #context-inspect { - --menuitem-image: url("chrome://devtools/skin/images/command-pick.sv"g) + --menuitem-image: url("chrome://devtools/skin/images/command-pick.sv"g); } - #context-media-eme-learnmore { /* iconic */ + #context-media-eme-learnmore { + /* iconic */ } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { @@ -2361,7 +2548,7 @@ --menuitem-image: url("./icons/link-square.svg"); } #placesContext_openBookmarkContainer\:tabs, - #placesContext_openBookmarkLinks\:tabs { + #placesContext_openBookmarkLinks\:tabs { --menuitem-image: url("./icons/movetowindow-16.svg"); } #placesContext_open\:newtab, @@ -2421,14 +2608,15 @@ #placesContext_createBookmark { --menuitem-image: url("chrome://browser/skin/bookmark.svg"); } - #show-other-bookmarks_PersonalToolbar { /* checkbox */ + #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"); } - menupopup[context="placesContext"] > .openintabs-menuitem, + menupopup[context="placesContext"] > .openintabs-menuitem, menuitem.openintabs-menuitem.subviewbutton { --menuitem-image: url("./icons/movetowindow-16.svg"); } @@ -2463,7 +2651,8 @@ } /*= downloads-button-autohide-panel ========================================*/ - #downloads-button-autohide-checkbox { /* checkbox */ + #downloads-button-autohide-checkbox { + /* checkbox */ } /*= downloadsContextMenu ===================================================*/ @@ -2479,7 +2668,8 @@ .downloadUseSystemDefaultMenuItem { --menuitem-image: url("chrome://browser/skin/open.svg"); } - .downloadAlwaysUseSystemDefaultMenuItem { /* checkbox */ + .downloadAlwaysUseSystemDefaultMenuItem { + /* checkbox */ } .downloadShowMenuItem { --menuitem-image: url("chrome://global/skin/icons/folder.svg"); @@ -2538,17 +2728,17 @@ #SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_cut"] { --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); } - #SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_copy"]{ + #SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_copy"] { --menuitem-image: url("chrome://browser/skin/edit-copy.svg"); } - #SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_paste"]{ + #SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_paste"] { --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); } - #SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_delete"]{ + #SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_delete"] { --menuitem-image: url("chrome://global/skin/icons/delete.svg"); } - #SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_selectAll"]{ + #SyncedTabsSidebarTabsFilterContext > menuitem[cmd="cmd_selectAll"] { --menuitem-image: url("./icons/select-all-on.svg"); } @@ -2557,27 +2747,27 @@ } /*= urlbar-input-container =================================================*/ - #urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_undo"] { + #urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_undo"] { --menuitem-image: url("chrome://global/skin/icons/undo.svg"); } - #urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_redo"] { + #urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_redo"] { } - #urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_cut"] { + #urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_cut"] { --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); } - #urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_copy"] { + #urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_copy"] { --menuitem-image: url("chrome://browser/skin/edit-copy.svg"); } - #urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_paste"] { + #urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_paste"] { --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); } #paste-and-go { } - #urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_delete"] { - --menuitem-image: url("chrome://global/skin/icons/delete.svg"); + #urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_delete"] { + --menuitem-image: url("chrome://global/skin/icons/delete.svg"); } - #urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_selectAll"] { + #urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_selectAll"] { --menuitem-image: url("./icons/select-all-on.svg"); } @@ -2692,7 +2882,7 @@ #textfieldDirection-swap { } - #menu_preferences{ + #menu_preferences { --menuitem-image: url("chrome://global/skin/icons/settings.svg"); } @@ -2759,7 +2949,7 @@ } #hiddenTabsMenu { } - #historyUndoMenu{ + #historyUndoMenu { --menuitem-image: url("chrome://browser/skin/tab.svg"); } #historyUndoWindowMenu { diff --git a/userContent.css b/userContent.css index 368de28..d94cd2b 100644 --- a/userContent.css +++ b/userContent.css @@ -7,13 +7,18 @@ body[style*="--newtab-background-color: rgba(42, 42, 46, 1);"], body[style*="--newtab-background-color: rgba(43, 42, 51, 1);"] { /* inner */ - --newtab-focus-border: rgba(0, 221, 255, 0.5) !important; /* Original: #B5D3FF, Better color-mix(in srgb, #B5D3FF 70%, transparent) */ + --newtab-focus-border: rgba( + 0, + 221, + 255, + 0.5 + ) !important; /* Original: #B5D3FF, Better color-mix(in srgb, #B5D3FF 70%, transparent) */ --newtab-focus-border-selected: rgba(0, 221, 255, 0.5) !important; /* Original: #B5D3FF */ } /** Activity Stream - Web Site Icon: full size ****************************/ .top-site-outer .tile .icon-wrapper { - width: 100% !important; /* Original: 48px */ + width: 100% !important; /* Original: 48px */ height: 100% !important; /* Original: 48px */ } @@ -56,7 +61,7 @@ /* Border */ border-radius: 4px !important; - border-image: none !important; /* Original: linear-gradient(transparent 18%, var(--newtab-border-secondary-color) 18%, var(--newtab-border-secondary-color) 82%, transparent 82%) 1; */ + border-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; */ } @@ -83,9 +88,11 @@ /** Error Page - Restore illustrations **************************************/ @-moz-document url-prefix("about:neterror"), url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml"), - url("about:sessionrestore"), url(chrome://browser/content/aboutSessionRestore.xhtml) { + url("about:sessionrestore"), url(chrome://browser/content/aboutSessionRestore.xhtml) + { /* Illustrations Position */ - #errorPageContainer, .description-wrapper { + #errorPageContainer, + .description-wrapper { min-height: 300px; background-position: left center; background-repeat: no-repeat; @@ -118,7 +125,8 @@ url-prefix("about:neterror?e=netTimeout"), url-prefix("about:neterror?e=netReset"), url-prefix("about:neterror?e=netOffline"), - url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml") { + url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml") + { #errorPageContainer { background-image: url("./icons/error-connection-failure.svg"); } @@ -141,7 +149,8 @@ } } - @-moz-document url("about:sessionrestore"), url(chrome://browser/content/aboutSessionRestore.xhtml) { + @-moz-document url("about:sessionrestore"), url(chrome://browser/content/aboutSessionRestore.xhtml) + { .description-wrapper { background-image: url("./icons/error-session-restore.svg"); } @@ -150,8 +159,7 @@ @-moz-document url-prefix("about:neterror?e=fileNotFound") { @media (min-width: 970px) { .title { - background-image: - url("chrome://global/skin/icons/info.svg") !important; + background-image: url("chrome://global/skin/icons/info.svg") !important; } } @@ -166,14 +174,16 @@ } } } - @-moz-document url("about:robots"), url("chrome://browser/content/aboutRobots.xhtml") { + @-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") { + @-moz-document url("about:welcomeBack"), url("chrome://browser/content/aboutWelcomeBack.xhtml") + { @media (min-width: 970px) { .title { background-image: url("./icons/welcome-back.svg") !important; @@ -198,7 +208,7 @@ --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-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); @@ -212,10 +222,10 @@ /* button background states are also used for checkboxes and radiobuttons */ --in-content-button-text-color: var(--in-content-text-color); --in-content-button-text-color-hover: var(--in-content-text-color); - --in-content-button-background: rgba(207,207,216,.33); - --in-content-button-background-hover: rgba(207,207,216,.66); - --in-content-button-background-active: rgb(207,207,216); - --in-content-primary-button-text-color: rgb(251,251,254); + --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; @@ -293,36 +303,36 @@ :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-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-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-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-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-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-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: rgba(249,249,250,0.2); + --in-content-table-border-dark-color: rgba(249, 249, 250, 0.2); --in-content-table-header-background: rgb(5, 64, 150); --in-content-table-header-color: var(--in-content-page-color); @@ -338,8 +348,9 @@ --dialog-warning-text-color: var(--red-40); } - /*= Addons.org =============================================================*/ - @-moz-document url-prefix("https://addons.mozilla.org") { + /*= Addons.org ===========================================================*/ + @-moz-document url-prefix("https://addons.mozilla.org") + { /* Basic */ .Page-content, .SecondaryHero, @@ -430,7 +441,7 @@ color: var(--in-content-deemphasized-text) !important; } .PromotedBadge-label--recommended { - color: color-mix(in srgb, #712b00 15%, #ff9400) !important; + color: color-mix(in srgb, #712b00 15%, #ff9400) !important; } /* Background */ @@ -455,7 +466,7 @@ background: var(--in-content-primary-button-background-hover) !important; } .ShowMoreCard-contents::after { - background: linear-gradient(hsla(0,0%,100%,0), var(--in-content-table-background)) !important; + background: linear-gradient(hsla(0, 0%, 100%, 0), var(--in-content-table-background)) !important; } .AutoSearchInput-query, .AutoSearchInput-suggestions-list, @@ -481,8 +492,12 @@ } .Notice-generic, .Notice-genericWarning { - background: color-mix(in srgb, var(--in-content-page-background) 40%, var(--in-content-table-background)) !important; - } + 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; @@ -494,7 +509,7 @@ /* Fill */ .Icon-arrow-blue.SearchSuggestion-icon-arrow { - filter: hue-rotate(330deg) brightness(1.3) !important; + filter: hue-rotate(330deg) brightness(1.3) !important; } .SecondaryHero-module-icon { -moz-context-properties: fill, fill-opacity !important; @@ -509,12 +524,12 @@ filter: invert(100%) !important; } .Icon-heart { - filter: brightness(0) !important; + filter: brightness(0) !important; } /* Others */ .DropdownMenu-items { - box-shadow: 0 0 2px var(--in-content-border-color) !important; + box-shadow: 0 0 2px var(--in-content-border-color) !important; } .AutoSearchInput-query { @@ -535,18 +550,19 @@ border-color: var(--in-content-link-color) !important; } - .blogpost-nav-arrow-left .cls-1, + .blogpost-nav-arrow-left .cls-1, .blogpost-nav-arrow-right .cls-1 { - stroke: var(--in-content-text-color) !important; + stroke: var(--in-content-text-color) !important; } } - /*= Support.org ============================================================*/ - @-moz-document url-prefix("https://support.mozilla.org") { + /*= 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-07: var(--in-content-link-color-hover) !important; --page-bg: var(--in-content-page-background) !important; --color-white: var(--in-content-page-background) !important; @@ -565,7 +581,8 @@ --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); + --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); } body, #main-content, @@ -583,7 +600,7 @@ .mzp-c-menu-item .mzp-c-menu-item-list a, #doc-content .menu, .document--content .menu, - .forum--entry-content .menu{ + .forum--entry-content .menu { color: var(--in-content-page-color) !important; } @@ -604,12 +621,13 @@ .document--content .button, .document--content .key, .forum--entry-content .button, - .forum--entry-content .key{ + .forum--entry-content .key { color: var(--in-content-deemphasized-text) !important; } /* Background */ - .sidebar-nav.topics, .sidebar-nav.topics > li { + .sidebar-nav.topics, + .sidebar-nav.topics > li { background: var(--in-content-page-background) !important; } @@ -631,7 +649,7 @@ } /* Others */ - .support-callouts > .card.is-inverse { + .support-callouts > .card.is-inverse { background: #20133a !important; } .support-callouts > .card.is-inverse :is(h1, h2, h3, h4, h5, h6, li, p) { @@ -650,20 +668,20 @@ @media screen and (min-width: 768px) { .mzp-c-menu-panel { - box-shadow: 0 16px 16px -16px rgba(255,255,255,.3) !important; + 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, .12), - 0 3px 16px 2px rgba(91, 91, 102, .12), - 0 8px 12px 1px rgba(82, 82, 94, .04) !important; + 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") { + /*= Accounts.com ===========================================================*/ + @-moz-document url-prefix("https://accounts.firefox.com") + { /* Basic */ body { color: var(--in-content-page-color) !important; @@ -673,7 +691,8 @@ .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) { + 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; } @@ -714,10 +733,9 @@ color: var(--in-content-deemphasized-text) !important; } - /* Background */ .password-row .show-password-label { - background-color: unset !important; + background-color: unset !important; } #main-content, .modal, @@ -769,7 +787,7 @@ filter: brightness(15) !important; } button.relative, - #fxa-settings nav svg{ + #fxa-settings nav svg { filter: brightness(2) !important; } @@ -779,8 +797,7 @@ .input-row input[type="password"], .input-row input[type="tel"], .input-row input[type="text"], - .unit-row-hr - .border-grey-100 { + .unit-row-hr .border-grey-100 { border-color: var(--in-content-border-color) !important; } .input-row input[type="email"]:hover, @@ -791,9 +808,8 @@ border-color: var(--in-content-border-hover) !important; } #main-content { - box-shadow: 0 12px 18px 2px rgba(249, 249, 250, .12) , - 0 6px 22px 4px rgba(91, 91, 102, .12), - 0 6px 10px -4px rgba(82, 82, 94, .04) !important; + 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, @@ -812,7 +828,8 @@ url-prefix("about:checkerboard"), url-prefix("about:sync-log"), url-prefix("about:memory"), - regexp("^[file:///].*[^(html|svg|pdf|json)]$") { + regexp("^[file:///].*[^(html|svg|pdf|json)]$") + { /* Base */ html, body { @@ -944,7 +961,7 @@ input[type="checkbox"] { appearance: none !important; height: 16px !important; - width: 16px !important; + width: 16px !important; border: 1px solid var(--checkbox-border-color) !important; background-color: var(--checkbox-unchecked-bgcolor) !important; border-radius: 2px !important; @@ -1029,7 +1046,8 @@ } @-moz-document url-prefix("about:cache"), url-prefix("about:checkerboard") { - th, td { + th, + td { border: 1px solid var(--in-content-border-color) !important; } th { @@ -1040,7 +1058,8 @@ /*= Directory View =========================================================*/ @-moz-document url-prefix("about:sync-log"), - regexp("^[file:///].*[^(html|svg|pdf|json)]$") { + regexp("^[file:///].*[^(html|svg|pdf|json)]$") + { body { background-color: var(--in-content-box-background) !important; } @@ -1066,7 +1085,8 @@ padding: 0 !important; } - th, td { + th, + td { padding: 4px !important; text-align: match-parent !important; }