diff --git a/Private Mode Style/userChrome.css b/Private Mode Style/userChrome.css index 2b4ff96..491fa58 100644 --- a/Private Mode Style/userChrome.css +++ b/Private Mode Style/userChrome.css @@ -4,20 +4,29 @@ /* This Private Mode Style of the elementary OS Firefox theme will blend Firefox in elementary OS. Currently tested on Linux on Nightly */ - /****************************** COLOURS & LAYOUT OF MENU POPUPS *******************************/ +/* normal system colors mode */ menubar > menu[open] { border-bottom-color: transparent !important; } -menu, menuitem, menucaption { +menu:not(#file-menu, #edit-menu, #view-menu, #history-menu, #bookmarksMenu, #tools-menu, #helpMenu), menuitem:not(#context-back, #context-forward, #context-reload, #context-bookmarkpage), menucaption { appearance: none !important; padding: 7px 12px !important; border-radius: 0px !important; max-width: 100% !important; } +#file-menu, #edit-menu, #view-menu, #history-menu, #bookmarksMenu, #tools-menu, #helpMenu { + appearance: none !important; + padding: 5px 10px !important; + border-radius: 4px !important; + margin: 0px 4px !important; +} +#context-back, #context-forward, #context-reload, #context-bookmarkpage { + margin: 0px 6px !important; +} menu[disabled="true"], menuitem[disabled="true"], menucaption[disabled="true"] { background: none !important; } @@ -37,9 +46,6 @@ menupopup, panel { #BMB_bookmarksPopup .menu-text { margin-left: 0px !important; } -.toolbaritem-combined-buttons { - margin-right: -3px !important; -} .menupopup-arrowscrollbox { border-radius: 7px !important; overflow: auto !important; @@ -69,15 +75,6 @@ menupopup, panel { --panel-color: #fff !important; --panel-border-color: rgba(0,0,0,0.6) !important; } -menupopup:-moz-lwtheme-brighttext, panel:-moz-lwtheme-brighttext { - --panel-background: #8266C4 !important; - --panel-color: #fff !important; -} -@media (prefers-color-scheme: dark ) { -menupopup, panel { - --panel-background: #8266C4 !important; - --panel-color: #fff !important; -}} menupopup, panel { --arrowpanel-background: #8266C4 !important; --arrowpanel-color: #fff !important; @@ -88,40 +85,50 @@ menupopup, panel { --button-hover-bgcolor: rgba(0,0,0,0.2) !important; --panel-item-hover-bgcolor: rgba(0,0,0,0.1) !important; } -menupopup:-moz-lwtheme-brighttext, panel:-moz-lwtheme-brighttext { - --arrowpanel-background: #8266C4 !important; - --arrowpanel-border-color: rgba(0,0,0,0.3) !important; +.panel-header > .subviewbutton-back:hover, +#appMenu-fxa-label2 { + border-radius: 4px !important; } -@media (prefers-color-scheme: dark ) { -menupopup, panel { - --arrowpanel-background: #8266C4 !important; - --arrowpanel-border-color: rgba(0,0,0,0.3) !important; -}} -.expander-down > .button-box, -.expander-up > .button-box { - filter: invert(1) brightness(500%) !important; +#appMenu-fxa-label2 { + background-color: rgba(0,0,0,0.1) !important; } -@media (prefers-color-scheme: dark) { -.expander-down > .button-box, -.expander-up > .button-box { - filter: none !important; -}} -.openintabs-menuitem:hover { - background: rgba(255,255,255,0.15) !important; - color: #fff !important; + +/* extensions pull down menu */ +#unified-extensions-panel .unified-extensions-item > .unified-extensions-item-action-button { + margin-inline-start: 4px !important; + margin-inline-end: 4px !important; + border-radius: 4px !important; + background-color: transparent !important; + padding: 7px 7px !important; } -#screenshots_mozilla_org-menuitem-_create-screenshot > .menu-iconic-left > .menu-iconic-icon, -.menu-right { - filter: invert(1) !important; +#unified-extensions-panel .unified-extensions-item > .unified-extensions-item-action-button:hover { + margin-inline-start: 4px !important; + margin-inline-end: 4px !important; + border-radius: 4px !important; + background-color: rgba(0,0,0,0.1) !important; + padding: 7px 7px !important; } -.subviewbutton > .menu-right { - filter: none !important; +#unified-extensions-panel .unified-extensions-item > .unified-extensions-item-menu-button > .toolbarbutton-icon { + margin-inline-end: 4px !important; + padding: 20px !important; + border-radius: 4px !important; + background-color: transparent !important; +} +#unified-extensions-panel .unified-extensions-item > .unified-extensions-item-menu-button:hover > .toolbarbutton-icon { + margin-inline-end: 4px !important; + padding: 20px !important; + border-radius: 4px !important; + background-color: rgba(0,0,0,0.1) !important; } -@media (prefers-color-scheme: dark) { -.menu-right { - filter: none !important; -}} +/* dark mode */ +@media (prefers-color-scheme: dark ) { +menupopup, panel { + --panel-background: #8266C4 !important; + --panel-color: #fff !important; + --arrowpanel-background: #8266C4 !important; + --arrowpanel-border-color: rgba(0,0,0,0.3) !important; +}} /***** LAYOUT @@ -170,16 +177,11 @@ LAYOUT /*** NAV BAR ***/ #navigator-toolbox { - border: none !important; - background-color: rgba(0,0,0,0.6) !important; - border-radius: 6px 6px 0 0 !important; + border-bottom: none !important; } #nav-bar { - -moz-box-ordinal-group: 0; - border-top: 0px !important; - border-bottom: 1px solid rgba(0,0,0,0.2) !important; order: -1; - border-radius: 6px 6px 0 0 !important; + border-top: none !important; height: 45px !important; padding: 0px 41px 0px 45px !important; } @@ -189,31 +191,54 @@ LAYOUT } /*** URLBAR + MEGABAR ***/ + +/* make Megabar hovers full width */ +.urlbarView { + margin-inline: 0px !important; + width: 100% !important; + border-inline: none !important; +} +.urlbarView-row { + border-radius: 0px !important; + border: none !important; + padding-inline-start: 6px !important; + padding-inline-end: 6px !important; +} +.urlbarView-row:hover { + background-color: rgba(0,0,0,0.08) !important; +} +.urlbarView-row[label]::before { + margin-inline-start: 4px !important; +} + +/* urlbar and searchbar with all buttons and icons */ +:root { + --urlbar-min-height: 24px !important; +} #urlbar[breakout][breakout-extend][breakout-extend-animate]:not([open]), #urlbar[breakout][breakout-extend]:not([open]), #urlbar[breakout]:not([open]) { - --urlbar-height: 25px !important; - --urlbar-toolbar-height: 25px !important; + --urlbar-height: 26px !important; + --urlbar-toolbar-height: 26px !important; } #urlbar[open] { - top: 7px !important; + --urlbar-min-height: 22px !important; /* takes care of password key icon not jumping in open urlbar */ + top: 5px !important; /* adjust when all urlbar icons and input text are jumping */ } #urlbar[open] .urlbar-input-container { - margin-top: 4px !important; + height: 24px !important; + margin-top: 3px !important; margin-bottom: 3px !important; margin-left: 6px !important; padding-right: 12px !important; } -.urlbar-input-container label { - line-height: 15px !important; -} #urlbar-container, #search-container { -moz-window-dragging: drag !important; - padding-block: 10px !important; + padding-top: 3px !important; } .urlbar-input-container { - height: 21px !important; + height: 22px !important; border-radius: 2px !important; padding: 0px 2px 0px 0px !important; margin: 1px !important; @@ -222,25 +247,25 @@ LAYOUT -moz-window-dragging: no-drag !important; } #urlbar { - min-height: 25px !important; + min-height: 26px !important; } #searchbar { - min-height: 25px !important; - max-height: 25px !important; + min-height: 26px !important; + max-height: 26px !important; } .searchbar-separator { border-top: none !important; } -#urlbar[focused] { - border-radius: 3px !important; -} -#searchbar[focused] { +#urlbar[focused]:not([open]), +#searchbar:focus-within { border-radius: 3px !important; } -#searchbar:not([focused]) { - border-radius: 3px !important; +#urlbar[focused][open], +#urlbar[open]:not([focused]) { + border-radius: 6px !important; } -#urlbar:not([focused]) { +#urlbar:not([focused]), +#searchbar:not(:focus-within) { border-radius: 3px !important; } #urlbar-background { @@ -254,52 +279,56 @@ LAYOUT outline: none !important; } #PopupSearchAutoComplete { - border-radius: 0 0 7px 7px !important; + margin-top: -1px !important; } .urlbar-icon:not(.urlbar-revert-button ):not(.search-go-button):not(.urlbar-go-button) { - margin: -3px 0px 0px 0px !important; + margin: -2px 0px 0px 0px !important; } .urlbar-page-action:not(#translations-button[translationsactive="true"]) { - height: 19px !important; + height: 20px !important; width: 23px !important; margin-left: 2px !important; } #translations-button[translationsactive="true"] { - height: 19px !important; + height: 20px !important; } #translations-button-locale { height: 17px !important; margin: -3px 2px !important; } -#notification-popup-box { - height: 19px !important; -} -#identity-permission-box { - height: 19px !important; - padding: 0px 4px 0px 4px !important; + +/* makes icons same height in open urlbar */ +#urlbar[breakout-extend] #identity-box, +#urlbar[breakout-extend] #tracking-protection-icon-container, +#urlbar[breakout-extend] #page-action-buttons { + height: 20px !important; + margin-top: 2px !important; } -#urlbar[breakout-extend] #identity-permission-box, #urlbar[breakout-extend] #notification-popup-box { - margin-top: -1px !important; -} - -/* delete when stable is version 134 or when these urlbar icons are jumping in Nightly */ -/* :root[data-title-default="Firefox Nightly"] #urlbar[breakout-extend] #identity-permission-box, -:root[data-title-default="Firefox Nightly"] #urlbar[breakout-extend] #notification-popup-box { + height: 20px !important; margin-top: 0px !important; -} */ - -#identity-icon, -#tracking-protection-icon-box { - margin: 0px 0px 1px 0px !important; } +#urlbar[breakout-extend] #identity-box:not(.verifiedDomain) { + height: 20px !important; + margin-top: 2px !important; +} +#urlbar[breakout-extend] #identity-box:not(.verifiedDomain) #identity-icon-box label { + margin-top: -2px !important; +} + .urlbar-go-button, .urlbar-revert-button { - padding: 6px !important; - margin: -5px 0px !important; + width: 20px !important; + height: 20px !important; + padding: 2px !important; + margin: 2px 0px !important; } .search-go-button { - padding: 6px !important; + padding: 2px !important; + margin: 0px 2px !important; +} +#PopupSearchAutoComplete .search-setting-button { + margin-inline: 6px !important; } :root { --urlbar-icon-padding: 4px !important; @@ -310,15 +339,11 @@ LAYOUT padding: 0px 3px !important; margin: 0px 2px !important; } -#notification-popup-box image { - width: 16px !important; - height: 16px !important; - padding: 0px !important; - margin: 0px 4px 2px 4px !important; -} #urlbar .search-one-offs:not([hidden]) { - padding-block: 5px !important; - min-height: 25px !important; + padding-block: 2px !important; + padding-inline-start: 6px !important; + padding-inline-end: 2px !important; + min-height: 26px !important; } .search-one-offs[is_searchbar="true"]) { border-top: none !important; @@ -327,42 +352,33 @@ LAYOUT #urlbar .search-panel-one-offs, #urlbar .search-panel-one-offs-container, #urlbar .searchbar-engine-one-off-item { - min-height: 25px !important; -} -#urlbar-searchmode-switcher image { - margin-bottom: 1px !important; + min-height: 26px !important; } + +/* makes new searchmode box same look and height in open urlbar */ #searchmode-switcher-chicklet { border-start-end-radius: 2px !important; border-end-end-radius: 2px !important; } +#urlbar[breakout-extend] #searchmode-switcher-chicklet { + height: 20px !important; + margin-top: 2px !important; + padding-bottom: 1px !important; +} +#urlbar[breakout-extend] #urlbar-searchmode-switcher { + height: 20px !important; + margin-top: 2px !important; +} -/* selected text and icons url bar */ +/* selected text in system accent color */ ::selection { - color: #FFFFFF !important; - background-color: #1E90FF !important; -} -:root { - --toolbarbutton-icon-fill-attention: #1E90FF !important; + color: #fff !important; + background-color: var(--accentcolor-percentage) !important; } /*** TOOLBAR ***/ -toolbar:not(.customization-target) .toolbarbutton-1 > .toolbarbutton-icon, -toolbar:not(.customization-target):not(#PersonalToolbar):not(#TabsToolbar) .toolbarbutton-1:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack { - width: 28px !important; - height: 28px !important; - padding: 6px !important; - margin-right: 0px !important; -} -toolbar .toolbarbutton-1:hover > .toolbarbutton-icon { - background: none !important; - box-shadow: none !important; -} -toolbar[customizing] > .overflow-button:hover > .toolbarbutton-icon { - background: rgba(51,51,51, 0.3) !important; -} -/* keep default icons small while below icons are bigger */ +/* keep default navigation icons small while below icons are bigger */ #back-button > .toolbarbutton-icon, #forward-button .toolbarbutton-icon, #reload-button .toolbarbutton-icon, @@ -374,11 +390,13 @@ toolbar[customizing] > .overflow-button:hover > .toolbarbutton-icon { clip-path: circle(50%) !important; } -/* buttons in normal mode */ +/* back button color in checked state */ #nav-bar #back-button[checked] > .toolbarbutton-icon { - background: rgba(51,51,51, 0.15) !important; + background: var(--accentcolor-percentage) !important; box-shadow: none !important; } + +/* write elementary OS style menu button */ #PanelUI-menu-button { list-style-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' id='svg3879'%3E%3Cdefs id='defs3881'%3E%3ClinearGradient x1='12' y1='16' x2='12' y2='8' id='linearGradient3830' xlink:href='%23linearGradient3805' gradientUnits='userSpaceOnUse' /%3E%3ClinearGradient id='linearGradient3805'%3E%3Cstop id='stop3807' style='stop-color:%23ffffff;stop-opacity:1' offset='0' /%3E%3Cstop id='stop3809' style='stop-color:%23ffffff;stop-opacity:0' offset='1' /%3E%3C/linearGradient%3E%3ClinearGradient x1='12.47939' y1='2' x2='12.47939' y2='22.006775' id='linearGradient3814' xlink:href='%23linearGradient3805' gradientUnits='userSpaceOnUse' gradientTransform='translate%280,8%29' /%3E%3ClinearGradient x1='86.132919' y1='105.105' x2='84.63858' y2='20.895' id='linearGradient3610' xlink:href='%23linearGradient5128' gradientUnits='userSpaceOnUse' gradientTransform='matrix%280.15623116,0,0,0.15623125,2.0012002,10.157431%29' /%3E%3ClinearGradient id='linearGradient5128'%3E%3Cstop id='stop5130' style='stop-color:%23ffffff;stop-opacity:1' offset='0' /%3E%3Cstop id='stop5132' style='stop-color:%23959595;stop-opacity:1' offset='1' /%3E%3C/linearGradient%3E%3ClinearGradient x1='32.036148' y1='19' x2='32.036148' y2='47.012184' id='linearGradient3614-2' xlink:href='%23linearGradient3309-1' gradientUnits='userSpaceOnUse' gradientTransform='matrix%280.77777782,0,0,0.77777782,-12.111112,-5.666669%29' /%3E%3ClinearGradient x1='63.9995' y1='3.1001' x2='63.9995' y2='122.8994' id='linearGradient3309-1' gradientUnits='userSpaceOnUse'%3E%3Cstop id='stop3311-5' style='stop-color:%23f6f6f6;stop-opacity:1' offset='0' /%3E%3Cstop id='stop3313-0' style='stop-color:%23d2d2d2;stop-opacity:1' offset='1' /%3E%3C/linearGradient%3E%3ClinearGradient x1='25.922546' y1='19' x2='25.922546' y2='47.044857' id='linearGradient3616-9' xlink:href='%23linearGradient3397-0' gradientUnits='userSpaceOnUse' gradientTransform='matrix%280.77777782,0,0,0.77777782,-12.111112,-5.666669%29' /%3E%3ClinearGradient id='linearGradient3397-0'%3E%3Cstop id='stop3399-4' style='stop-color:%23aaaaaa;stop-opacity:1' offset='0' /%3E%3Cstop id='stop3401-0' style='stop-color:%238c8c8c;stop-opacity:1' offset='1' /%3E%3C/linearGradient%3E%3ClinearGradient id='linearGradient10691'%3E%3Cstop id='stop10693' style='stop-color:%23000000;stop-opacity:1' offset='0' /%3E%3Cstop id='stop10695' style='stop-color:%23000000;stop-opacity:0' offset='1' /%3E%3C/linearGradient%3E%3CradialGradient cx='6.702713' cy='73.615715' r='7.228416' fx='6.702713' fy='73.615715' id='radialGradient3877' xlink:href='%23linearGradient10691' gradientUnits='userSpaceOnUse' gradientTransform='matrix%281.6600963,0,0,0.36315008,0.8728521,2.6414479%29' /%3E%3ClinearGradient x1='12' y1='16' x2='12' y2='8' id='linearGradient3011' xlink:href='%23linearGradient3805' gradientUnits='userSpaceOnUse' gradientTransform='matrix%281.0116033,0,0,1.0116033,-0.13923977,-0.1392394%29' /%3E%3ClinearGradient x1='12.47939' y1='2' x2='12.47939' y2='22.006775' id='linearGradient3014' xlink:href='%23linearGradient3805' gradientUnits='userSpaceOnUse' /%3E%3ClinearGradient x1='86.132919' y1='105.105' x2='84.63858' y2='20.895' id='linearGradient3017' xlink:href='%23linearGradient5128' gradientUnits='userSpaceOnUse' gradientTransform='matrix%280.15623116,0,0,0.15623125,2.0012002,2.157431%29' /%3E%3ClinearGradient x1='32.036148' y1='19' x2='32.036148' y2='47.012184' id='linearGradient3021' xlink:href='%23linearGradient3309-1' gradientUnits='userSpaceOnUse' gradientTransform='matrix%280.77777782,0,0,0.77777782,-12.111112,-13.666669%29' /%3E%3CradialGradient cx='6.702713' cy='73.615715' r='7.228416' fx='6.702713' fy='73.615715' id='radialGradient3026' xlink:href='%23linearGradient10691' gradientUnits='userSpaceOnUse' gradientTransform='matrix%281.6600963,0,0,0.36315008,0.8728521,-5.3585521%29' /%3E%3ClinearGradient x1='32.036148' y1='19' x2='32.036148' y2='47.012184' id='linearGradient3021-0' xlink:href='%23linearGradient3309-1-9' gradientUnits='userSpaceOnUse' gradientTransform='matrix%280.77777782,0,0,0.77777782,-12.111112,-13.666669%29' /%3E%3ClinearGradient x1='63.9995' y1='3.1001' x2='63.9995' y2='122.8994' id='linearGradient3309-1-9' gradientUnits='userSpaceOnUse'%3E%3Cstop id='stop3311-5-9' style='stop-color:%23f6f6f6;stop-opacity:1' offset='0' /%3E%3Cstop id='stop3313-0-9' style='stop-color:%23d2d2d2;stop-opacity:1' offset='1' /%3E%3C/linearGradient%3E%3ClinearGradient x1='25.922546' y1='19' x2='25.922546' y2='47.044857' id='linearGradient3023' xlink:href='%23linearGradient3397-0-3' gradientUnits='userSpaceOnUse' gradientTransform='matrix%280.77777782,0,0,0.77777782,-12.111112,-13.666669%29' /%3E%3ClinearGradient id='linearGradient3397-0-3'%3E%3Cstop id='stop3399-4-5' style='stop-color:%23aaaaaa;stop-opacity:1' offset='0' /%3E%3Cstop id='stop3401-0-8' style='stop-color:%238c8c8c;stop-opacity:1' offset='1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cmetadata id='metadata3884'%3E%3Crdf:RDF%3E%3Ccc:Work rdf:about=''%3E%3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E%3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage' /%3E%3Cdc:title /%3E%3C/cc:Work%3E%3C/rdf:RDF%3E%3C/metadata%3E%3Cpath d='M 23.999865,21.375 C 23.999865,22.824748 18.627342,24 12,24 5.3726571,24 1.348125e-4,22.824748 1.348125e-4,21.375 1.348125e-4,19.925253 5.3726571,18.75 12,18.75 c 6.627342,0 11.999865,1.175253 11.999865,2.625 z' id='path10689' style='opacity:0.2;fill:url%28%23radialGradient3026%29;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.80000001;marker:none;visibility:visible;display:inline;overflow:visible' /%3E%3Cpath d='m 10.5,1.5 c -0.554,0 -1,0.446 -1,1 l 0,1.375 C 8.9926705,4.030783 8.4932312,4.225474 8.03125,4.46875 L 7.0625,3.5 C 6.6707628,3.108263 6.0167372,3.108263 5.625,3.5 L 3.5,5.625 C 3.1082628,6.016737 3.1082628,6.670763 3.5,7.0625 L 4.46875,8.03125 C 4.2254741,8.493231 4.0307828,8.99267 3.875,9.5 L 2.5,9.5 c -0.554,0 -1,0.446 -1,1 l 0,3 c 0,0.554 0.446,1 1,1 l 1.375,0 c 0.1557828,0.507329 0.3504741,1.006769 0.59375,1.46875 L 3.5,16.9375 c -0.3917372,0.391737 -0.3917372,1.045763 0,1.4375 L 5.625,20.5 c 0.3917372,0.391737 1.0457628,0.391737 1.4375,0 L 8.03125,19.53125 C 8.4932312,19.774526 8.9926705,19.969217 9.5,20.125 l 0,1.375 c 0,0.554 0.446,1 1,1 l 3,0 c 0.554,0 1,-0.446 1,-1 l 0,-1.375 c 0.507329,-0.155783 1.006769,-0.350474 1.46875,-0.59375 L 16.9375,20.5 c 0.391737,0.391737 1.045763,0.391737 1.4375,0 L 20.5,18.375 c 0.391737,-0.391737 0.391737,-1.045763 0,-1.4375 L 19.53125,15.96875 C 19.774526,15.506769 19.969217,15.007329 20.125,14.5 l 1.375,0 c 0.554,0 1,-0.446 1,-1 l 0,-3 c 0,-0.554 -0.446,-1 -1,-1 l -1.375,0 C 19.969217,8.99267 19.774526,8.493231 19.53125,8.03125 L 20.5,7.0625 c 0.391737,-0.391737 0.391737,-1.045763 0,-1.4375 L 18.375,3.5 C 17.983263,3.108263 17.329237,3.108263 16.9375,3.5 L 15.96875,4.46875 C 15.506769,4.225474 15.007329,4.030783 14.5,3.875 l 0,-1.375 c 0,-0.554 -0.446,-1 -1,-1 l -3,0 z m 1.5,8 c 1.380712,0 2.5,1.119288 2.5,2.5 0,1.380712 -1.119288,2.5 -2.5,2.5 -1.380712,0 -2.5,-1.119288 -2.5,-2.5 0,-1.380712 1.119288,-2.5 2.5,-2.5 z' id='rect3623' style='color:%23000000;fill:url%28%23linearGradient3021%29;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:block;overflow:visible;enable-background:accumulate' /%3E%3Cpath d='m 12,6 c -3.310303,0 -6,2.689698 -6,6 0,3.310302 2.689697,6 6,6 3.310301,0 6,-2.689698 6,-6 0,-3.310302 -2.689699,-6 -6,-6 z m 0,3 c 1.656854,0 3,1.343146 3,3 0,1.656854 -1.343146,3 -3,3 -1.656854,0 -3,-1.343146 -3,-3 0,-1.656854 1.343146,-3 3,-3 z' id='path3315' style='opacity:0.05;fill:%23000000;fill-opacity:1;stroke:none' /%3E%3Cpath d='m 12,5.499999 c -3.5841018,0 -6.5,2.9159 -6.5,6.499999 C 5.5,15.5841 8.4158982,18.5 12,18.5 c 3.584101,0 6.5,-2.9159 6.5,-6.500002 0,-3.584099 -2.915899,-6.499999 -6.5,-6.499999 z' id='path28' style='fill:none;stroke:url%28%23linearGradient3017%29;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none' /%3E%3Cpath d='M 10.5,2.46875 C 10.42583,2.857469 10.4905,3.369858 10.46875,3.805183 10.53344,4.583262 9.6984733,4.858037 9.1004648,5.021793 8.5534413,5.333029 7.7514701,5.693691 7.2634975,5.075993 6.9673317,4.779832 6.6711658,4.483666 6.375,4.1875 5.9432707,4.474172 5.5902425,4.950845 5.1889654,5.311035 4.8695012,5.671637 4.4334278,5.983938 4.1875,6.375 4.5945204,6.865131 5.2360159,7.212591 5.413298,7.851969 5.388634,8.650433 4.8731381,9.381187 4.6009101,10.118994 4.0990892,10.683344 3.2858688,10.399662 2.6265645,10.46875 2.2819972,10.45587 2.5562355,11.055097 2.46875,11.294459 c 0.00121,0.744981 -0.0024,1.490108 0.00179,2.234998 0.6455598,0.06419 1.3569859,-0.150581 1.9454937,0.179668 0.5556121,0.579212 0.6756354,1.474124 1.0067725,2.188766 0.04177,0.75274 -0.7323134,1.126431 -1.1493366,1.641136 -0.2173877,0.272406 0.385277,0.504146 0.5159207,0.750367 0.5077022,0.507702 1.0154043,1.015404 1.5231065,1.523106 0.5224633,-0.304869 0.8397278,-0.98896 1.4454346,-1.204942 0.8151392,-0.106648 1.5136871,0.546448 2.2838276,0.733976 0.650694,0.452082 0.363529,1.310427 0.426988,1.975154 -0.08851,0.418476 0.527859,0.12987 0.768962,0.214562 0.763896,-0.0012 1.527939,0.0024 2.291745,-0.0018 0.06419,-0.64556 -0.150581,-1.356986 0.179668,-1.945494 0.579212,-0.555612 1.474124,-0.675635 2.188766,-1.006772 0.75274,-0.04177 1.126431,0.732313 1.641136,1.149336 0.272406,0.217388 0.504146,-0.385277 0.750367,-0.515921 0.507702,-0.507702 1.015404,-1.015404 1.523106,-1.523106 -0.304869,-0.522463 -0.98896,-0.839728 -1.204942,-1.445435 -0.106648,-0.815139 0.546448,-1.513687 0.733976,-2.283827 0.452082,-0.650694 1.310427,-0.363529 1.975154,-0.426988 0.418476,0.08851 0.12987,-0.527859 0.214562,-0.768962 -0.0012,-0.763896 0.0024,-1.527939 -0.0018,-2.291745 -0.64556,-0.06419 -1.356986,0.150581 -1.945494,-0.179668 C 19.028351,9.711663 18.908328,8.816751 18.577191,8.102109 18.535421,7.349369 19.309504,6.975678 19.726527,6.460973 19.943915,6.188567 19.34125,5.956827 19.210606,5.710607 18.702904,5.202904 18.195202,4.695202 17.6875,4.1875 17.165037,4.492369 16.847772,5.17646 16.242065,5.392442 15.426926,5.49909 14.728378,4.845994 13.958238,4.658466 13.307544,4.206384 13.594709,3.348039 13.53125,2.683312 13.61976,2.264836 13.003391,2.553442 12.762288,2.46875 c -0.754096,0 -1.508192,0 -2.262288,0 z' id='path3799' style='opacity:0.8;color:%23000000;fill:none;stroke:url%28%23linearGradient3014%29;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:block;overflow:visible;enable-background:accumulate' /%3E%3Cpath d='m 15.5,12 a 3.5,3.5 0 1 1 -7,0 3.5,3.5 0 1 1 7,0 z' id='path3822' style='opacity:0.4;color:%23000000;fill:none;stroke:url%28%23linearGradient3011%29;stroke-width:0.99999994;stroke-opacity:1;marker:none;visibility:visible;display:block;overflow:visible;enable-background:accumulate' /%3E%3Cpath d='m 10.5,1.5 c -0.554,0 -1,0.446 -1,1 l 0,1.375 C 8.9926705,4.030783 8.4932312,4.225474 8.03125,4.46875 L 7.0625,3.5 C 6.6707628,3.108263 6.0167372,3.108263 5.625,3.5 L 3.5,5.625 C 3.1082628,6.016737 3.1082628,6.670763 3.5,7.0625 L 4.46875,8.03125 C 4.2254741,8.493231 4.0307828,8.99267 3.875,9.5 L 2.5,9.5 c -0.554,0 -1,0.446 -1,1 l 0,3 c 0,0.554 0.446,1 1,1 l 1.375,0 c 0.1557828,0.507329 0.3504741,1.006769 0.59375,1.46875 L 3.5,16.9375 c -0.3917372,0.391737 -0.3917372,1.045763 0,1.4375 L 5.625,20.5 c 0.3917372,0.391737 1.0457628,0.391737 1.4375,0 L 8.03125,19.53125 C 8.4932312,19.774526 8.9926705,19.969217 9.5,20.125 l 0,1.375 c 0,0.554 0.446,1 1,1 l 3,0 c 0.554,0 1,-0.446 1,-1 l 0,-1.375 c 0.507329,-0.155783 1.006769,-0.350474 1.46875,-0.59375 L 16.9375,20.5 c 0.391737,0.391737 1.045763,0.391737 1.4375,0 L 20.5,18.375 c 0.391737,-0.391737 0.391737,-1.045763 0,-1.4375 L 19.53125,15.96875 C 19.774526,15.506769 19.969217,15.007329 20.125,14.5 l 1.375,0 c 0.554,0 1,-0.446 1,-1 l 0,-3 c 0,-0.554 -0.446,-1 -1,-1 l -1.375,0 C 19.969217,8.99267 19.774526,8.493231 19.53125,8.03125 L 20.5,7.0625 c 0.391737,-0.391737 0.391737,-1.045763 0,-1.4375 L 18.375,3.5 C 17.983263,3.108263 17.329237,3.108263 16.9375,3.5 L 15.96875,4.46875 C 15.506769,4.225474 15.007329,4.030783 14.5,3.875 l 0,-1.375 c 0,-0.554 -0.446,-1 -1,-1 l -3,0 z m 1.5,8 c 1.380712,0 2.5,1.119288 2.5,2.5 0,1.380712 -1.119288,2.5 -2.5,2.5 -1.380712,0 -2.5,-1.119288 -2.5,-2.5 0,-1.380712 1.119288,-2.5 2.5,-2.5 z' id='rect3623-2' style='opacity:0.3;color:%23000000;fill:none;stroke:%23000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:block;overflow:visible;enable-background:accumulate' /%3E%3C/svg%3E") !important; } @@ -386,9 +404,6 @@ toolbar[customizing] > .overflow-button:hover > .toolbarbutton-icon { #stop-reload-button > #stop-button:not([displayreload]) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image { background-image: none !important; } -:root:not([customizing]) .toolbarbutton-1[disabled="true"]{ - opacity: 0.35 !important; -} #PanelUI-menu-button .toolbarbutton-badge-stack > .toolbarbutton-icon { background: none !important; box-shadow: none !important; @@ -397,40 +412,70 @@ toolbar[customizing] > .overflow-button:hover > .toolbarbutton-icon { padding: 0px !important; margin: -4px !important; } -#PanelUI-menu-button:hover:not([open]):not([checked]):not(:active) > .toolbarbutton-badge-stack, -#fxa-toolbar-menu-button:hover:not([open]):not([checked]):not(:active) > .toolbarbutton-badge-stack { - background: none !important; + +/* circled extension icons */ +toolbar .toolbarbutton-1:not([disabled="true"]) { + &[data-extensionid] { + margin-inline: 0px !important; + } } -toolbar .toolbarbutton-1:not(#alltabs-button):not(#PanelUI-menu-button) > .toolbarbutton-badge-stack, -toolbar .toolbaritem-combined-buttons > .toolbarbutton-1 { +toolbar:not(.customization-target):not(#PersonalToolbar):not(#TabsToolbar) .toolbarbutton-1:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack { + border-radius: 50% !important; +} +toolbar .toolbarbutton-1 { + &:not([disabled]):not(#PanelUI-menu-button) { + &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack) { + background-color: var(--accentcolor-percentage) !important; + } + } +} + +/* make circled toolbar icons with accent color + other buttons in other bars with no circle */ +toolbar:not(.customization-target) .toolbarbutton-1 > .toolbarbutton-icon, +toolbar:not(.customization-target):not(#PersonalToolbar):not(#TabsToolbar) .toolbarbutton-1:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack { + width: 28px !important; + height: 28px !important; + padding: 6px !important; +} +toolbar .toolbarbutton-1:hover > .toolbarbutton-icon, +toolbar .toolbarbutton-1:hover > .toolbarbutton-badge-stack { background: none !important; box-shadow: none !important; - padding: 8px !important; - margin: -4px !important; - border-radius: 50% !important; } -toolbar:not(#PersonalToolbar):not(#TabsToolbar) .toolbarbutton-1:not([disabled="true"]):not([data-extensionid]):-moz-any([open], [checked], :active) > .toolbarbutton-icon, -toolbar:not(#PersonalToolbar):not(#TabsToolbar) .toolbarbutton-1:not(#PanelUI-menu-button):not([disabled="true"]):not([data-extensionid]):-moz-any([open], [checked], :active) > .toolbarbutton-badge-stack { - background-color: rgba(255,255,255,0.2) !important; - clip-path: circle(50%) !important; +#PanelUI-menu-button:hover:not([open]):not([checked]):not(:active) > .toolbarbutton-badge-stack, +#fxa-toolbar-menu-button:hover:not([open]):not([checked]):not(:active) > .toolbarbutton-badge-stack { + background: none !important; } -toolbar .toolbarbutton-1:not([disabled="true"]):not([data-extensionid]):-moz-any([open], [checked], :hover, :active) > .toolbarbutton-badge-stack { - background-color: rgba(255,255,255,0.2) !important; +toolbar:not(#PersonalToolbar):not(#TabsToolbar) .toolbarbutton-1:not([disabled="true"], [data-extensionid], #nav-bar-overflow-button):is([open], [checked], :active) > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack) { + background: var(--accentcolor-percentage) !important; clip-path: circle(50%) !important; } -toolbar .toolbaritem-combined-buttons > .toolbarbutton-1:-moz-any([open], [checked], :active), -toolbar .toolbarbutton-1[data-extensionid]:-moz-any([open], [checked], :active) { - background: radial-gradient(circle, rgba(255,255,255,0.2) 49%, rgba(255,255,255,0) 50%) !important; +toolbar[customizing] #nav-bar-overflow-button > .toolbarbutton-icon { + background: none !important; } -#TabsToolbar .toolbarbutton-1:not([disabled="true"]):-moz-any([open], [checked], :active) > .toolbarbutton-icon, -#TabsToolbar .toolbarbutton-1:not([disabled="true"]):-moz-any([open], [checked], :hover, :active) > .toolbarbutton-badge-stack { - background: rgba(255,255,255, 0.2) !important; +#nav-bar-overflow-button:is([open], [checked], :active) > .toolbarbutton-icon { + background: var(--accentcolor-percentage) !important; clip-path: none !important; + border-radius: 3px !important; +} +#TabsToolbar .toolbarbutton-1:not([disabled="true"], #alltabs-button, #new-tab-button, #tabs-newtab-button, #firefox-view-button):is([open], [checked], :active) > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack) { + background: var(--accentcolor-percentage) !important; + clip-path: none !important; + border-radius: 3px !important; } -#PersonalToolbar .toolbarbutton-1:not([disabled="true"]):-moz-any([open], [checked], :hover, :active), -#PersonalToolbar .toolbarbutton-1:not([disabled="true"]):-moz-any([open], [checked], :hover, :active) > .toolbarbutton-badge-stack { - background: rgba(255,255,255,0.2) !important; +#PersonalToolbar .toolbarbutton-1:not([disabled="true"]):is([open], [checked], :active) > .toolbarbutton-icon, +#PersonalToolbar .toolbarbutton-1:not([disabled="true"]):is([open], [checked], :active) > .toolbarbutton-badge-stack { + background: var(--accentcolor-percentage) !important; clip-path: none !important; + border-radius: 3px !important; +} + +/* buttons styles in toolbar */ +#TabsToolbar .toolbarbutton-1:not(#alltabs-button, #new-tab-button, #tabs-newtab-button, #firefox-view-button) > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack) { + margin-bottom: 2px !important; +} +:root:not([customizing]) .toolbarbutton-1[disabled="true"] { + opacity: 0.20 !important; } #PanelUI-button { border: none !important; @@ -467,39 +512,38 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt } #scrollbutton-up image:active, #scrollbutton-down:-moz-locale-dir(ltr) image:active { - background: rgba(255,255,255,0.2) !important; + background-color: rgba(0,0,0,0.1) !important; } :root { - --toolbarbutton-hover-background: rgba(255,255,255,0.2) !important; - --toolbarbutton-active-background: rgba(255,255,255,0.2) !important; + --toolbarbutton-hover-background: rgba(0,0,0,0.1) !important; + --toolbarbutton-active-background: rgba(0,0,0,0.1) !important; } - -/*** TAB BAR ***/ -#tabbrowser-tabs { - &[orient="horizontal"] { - min-height: 36px !important; - max-height: 36px !important; - } +#TabsToolbar #fxa-toolbar-menu-button > .toolbarbutton-badge-stack { + width: 28px !important; + height: 28px !important; + padding: 6px !important; } -#tabbrowser-arrowscrollbox { - &[orient="horizontal"] { - min-height: 36px !important; - max-height: 36px !important; - } +#TabsToolbar .toolbarbutton-1:not([disabled="true"])[data-extensionid] > .toolbarbutton-badge-stack { + width: 28px !important; + height: 28px !important; + padding: 6px !important; } + +/*** TAB BAR ***/ + +/* tab bar */ #TabsToolbar { -moz-appearance: none !important; - padding: 0 !important; + padding-left: 2px !important; width: 100vw !important; - min-height: 35px !important; - max-height: 35px !important; - border-bottom: 1px solid rgba(0,0,0,0.2) !important; + min-height: 36px !important; + max-height: 36px !important; } #TabsToolbar .toolbarbutton-1:not(#new-tab-button):not(#tabs-newtab-button):not(#firefox-view-button):not(#alltabs-button) { - margin: auto 2px !important; + margin: auto auto !important; } .toolbar-items { - min-height: 36px !important; + min-height: 35px !important; } .titlebar-spacer[type="post-tabs"] { width: 0px !important; @@ -510,6 +554,40 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt #tabbrowser-arrowscrollbox { padding-left: 2px !important; } + +/* make horizontal tab bar and tabs same height */ +#tabbrowser-tabs { + &[orient="horizontal"] { + min-height: 36px !important; + max-height: 36px !important; + } +} +#tabbrowser-arrowscrollbox { + &[orient="horizontal"] { + min-height: 36px !important; + max-height: 36px !important; + } +} + +/* make tab separators: thanks to MrOtherGuy, source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tab_separator_lines.css */ +#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab { + border-inline-start: 1px solid transparent !important; + border-image: 0 1 linear-gradient(transparent 20%, color-mix(in srgb, rgba(0,0,0,0.5), transparent) 20%, color-mix(in srgb, rgba(0,0,0,0.5), transparent) 90%, transparent 90%) !important; +} +#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab:hover, +#tabbrowser-tabs[orient="horizontal"]:not([movingtab]) .tabbrowser-tab:hover + .tabbrowser-tab:not([first-visible-unpinned-tab]), +#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab:first-child, +#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab[selected], +#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab[multiselected], +#tabbrowser-tabs[orient="horizontal"] #tabbrowser-arrowscrollbox[overflowing] > .tabbrowser-tab[first-visible-unpinned-tab], +#tabbrowser-tabs[orient="horizontal"]:not([movingtab]) .tabbrowser-tab[multiselected] + .tabbrowser-tab, +#tabbrowser-tabs[orient="horizontal"]:not([movingtab]) .tabbrowser-tab[selected] + .tabbrowser-tab, +#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab:is([selected],[multiselected]) + .tabbrowser-tab[hidden] + .tabbrowser-tab { + border-inline-start: 1px solid transparent !important; + border-image: none !important; +} + +/* tabs */ .tab-content:not([pinned]) { -moz-box-direction: reverse !important; flex-direction: row-reverse !important; @@ -539,8 +617,9 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt .tab-background:not([selected]) { min-height: 30px !important; max-height: 30px !important; + border: none !important; border-radius: 3.5px !important; - margin: 2px -1px 2px -1px !important; + margin: 2px 0px 2px 0px !important; } .tab-background:is([selected], [multiselected]) { min-height: 32px !important; @@ -556,6 +635,9 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt margin: 1px -2px 1px -2px !important; box-shadow: none !important; } +.tabbrowser-tab:not([selected]):hover .tab-background { + background-color: rgba(0,0,0,0.1) !important; +} .tabbrowser-tab[usercontextid] > .tab-stack > .tab-background[selected] > .tab-context-line { margin: 0px !important; } @@ -568,6 +650,8 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] { margin-inline-start: 0px !important; } + +/* write elementary OS style icon for new tab button */ #new-tab-button .toolbarbutton-icon { list-style-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg color='%23333333' transform='translate%28-293 -117%29'%3E%3Cpath d='M300 120v4h-4v2h4v4h2v-4h4v-2h-4v-4z' fill='%23333333' overflow='visible' style='marker:none'/%3E%3C/g%3E%3C/svg%3E") !important; width: 28px !important; @@ -588,14 +672,16 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt border-radius: 3px !important; margin: -2px 0px 0px 0px !important; } -#new-tab-button, -#tabs-newtab-button { - margin: 0px 0px 0px 2px !important; +#new-tab-button:-moz-any([open], [checked], :active) .toolbarbutton-icon, +#tabs-newtab-button:-moz-any([open], [checked], :active) .toolbarbutton-icon { + background-color: var(--accentcolor-percentage) !important; } #nav-bar #new-tab-button, #nav-bar #tabs-newtab-button { margin: 0px 0px 0px 0px !important; } + +/* misc tab bar buttons styles */ .all-tabs-item { margin-inline: 0px !important; border-radius: 0px !important; @@ -610,14 +696,13 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt #nav-bar #firefox-view-button .toolbarbutton-icon { margin: 0px 0px 0px 0px !important; } -#firefox-view-button { - margin: 0px 0px 0px 2px !important; -} #firefox-view-button[open] { - padding: 5px 2px 5px 2px !important; + padding: 4px 2px 4px 2px !important; } #TabsToolbar #firefox-view-button[open] > .toolbarbutton-icon { box-shadow: none !important; + background: var(--accentcolor-percentage) !important; + color-scheme: dark !important; } #tabbrowser-tabs { border-inline-start: none !important; @@ -627,6 +712,9 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt border-radius: 3px !important; padding: 6px !important; } +#alltabs-button[open] stack { + background: var(--accentcolor-percentage) !important; +} #nav-bar #alltabs-button stack { margin: 0px 0px 0px 0px !important; } @@ -643,9 +731,8 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt /* hide and show close tab button */ #TabsToolbar .tab-close-button { - list-style-image: url("data:image/svg+xml,%3Csvg height='16' width='16' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1' /%3E%3Cpath id='rect1' style='opacity:1;fill:%23333333;fill-opacity:1;stroke:none;stroke-width:1;stroke-opacity:0.498039;-inkscape-stroke:none' d='M 0.78168445 6.4081552 C 0.64612209 6.2725928 0.45772309 6.1885654 0.2499733 6.1885654 L -0.2499733 6.1885654 C -0.66547288 6.1885654 -0.99989318 6.5229857 -0.99989318 6.9384853 L -0.99989318 10.313815 L -4.3752232 10.313815 C -4.7907228 10.313815 -5.1251431 10.648236 -5.1251431 11.063735 L -5.1251431 11.563682 C -5.1251431 11.979181 -4.7907228 12.313602 -4.3752232 12.313602 L -0.99989318 12.313602 L -0.99989318 15.688932 C -0.99989318 16.104431 -0.66547288 16.438852 -0.2499733 16.438852 L 0.2499733 16.438852 C 0.66547288 16.438852 0.99989318 16.104431 0.99989318 15.688932 L 0.99989318 12.313602 L 4.3752232 12.313602 C 4.7907228 12.313602 5.1251431 11.979181 5.1251431 11.563682 L 5.1251431 11.063735 C 5.1251431 10.648236 4.7907228 10.313815 4.3752232 10.313815 L 0.99989318 10.313815 L 0.99989318 6.9384853 C 0.99989318 6.7307355 0.91724681 6.5437176 0.78168445 6.4081552 z ' transform='rotate(-45)' /%3E%3C/svg%3E") !important; - margin-left: -2px !important; - margin-right: 0px !important; + margin-left: 0px !important; + margin-right: 3px !important; width: 24px !important; height: 24px !important; padding: 4px !important; @@ -665,7 +752,7 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt background: none !important; } -/* touch density adjustment */ +/* touch density adjustment close tab button */ :root[uidensity="touch"] .tab-close-button { padding: 0px !important; } @@ -697,7 +784,7 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt margin-inline-end: 0px !important; } -/* drag space */ +/* drag space in tab bar */ .titlebar-spacer[type="pre-tabs"] { margin-left: -40px !important; border-inline-end: none !important; @@ -719,7 +806,7 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt margin-inline-end: auto; } -/* Override vertical shifts when moving a tab */ +/* override vertical shifts when moving a tab in tab bar */ #navigator-toolbox[movingtab] > #titlebar > #TabsToolbar { padding-bottom: unset !important; } @@ -731,11 +818,27 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt margin-top: unset !important; } +/* all tabs buttons + close button */ +.all-tabs-item { + & > toolbarbutton { + border-radius: 3px !important; + margin-inline: 8px !important; + } +} +.all-tabs-item { + & > toolbarbutton > .toolbarbutton-icon { + margin-left: -15px !important; + } +} +.all-tabs-close-button { + & > .toolbarbutton-icon { + margin-inline: 0px !important; + margin-left: -15px !important; + } +} + /*** VERTICAL TABS ***/ -#TabsToolbar[collapsed] ~ #nav-bar { - box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0px 0px 3px 0px rgba(0,0,0,0.3) !important; -} #TabsToolbar[collapsed] ~ #nav-bar ~ #PersonalToolbar { z-index: -1 !important; } @@ -761,7 +864,7 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt } } -/* not expanded */ +/* not expanded vertical tabs */ #tabbrowser-tabs[orient="vertical"] { &:not([expanded]) { & .tabbrowser-tab:is([selected], [multiselected]) { @@ -835,7 +938,7 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt background: none !important; } -/* expanded */ +/* expanded vertical tabs */ #tabbrowser-tabs[orient="vertical"][expanded] #tabs-newtab-button { margin: 4px 0px 4px -1px !important; background: none !important; @@ -895,7 +998,6 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt } } #tabbrowser-tabs[orient="vertical"][expanded] .tab-close-button { - list-style-image: url("data:image/svg+xml,%3Csvg height='16' width='16' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1' /%3E%3Cpath id='rect1' style='opacity:1;fill:%23333333;fill-opacity:1;stroke:none;stroke-width:1;stroke-opacity:0.498039;-inkscape-stroke:none' d='M 0.78168445 6.4081552 C 0.64612209 6.2725928 0.45772309 6.1885654 0.2499733 6.1885654 L -0.2499733 6.1885654 C -0.66547288 6.1885654 -0.99989318 6.5229857 -0.99989318 6.9384853 L -0.99989318 10.313815 L -4.3752232 10.313815 C -4.7907228 10.313815 -5.1251431 10.648236 -5.1251431 11.063735 L -5.1251431 11.563682 C -5.1251431 11.979181 -4.7907228 12.313602 -4.3752232 12.313602 L -0.99989318 12.313602 L -0.99989318 15.688932 C -0.99989318 16.104431 -0.66547288 16.438852 -0.2499733 16.438852 L 0.2499733 16.438852 C 0.66547288 16.438852 0.99989318 16.104431 0.99989318 15.688932 L 0.99989318 12.313602 L 4.3752232 12.313602 C 4.7907228 12.313602 5.1251431 11.979181 5.1251431 11.563682 L 5.1251431 11.063735 C 5.1251431 10.648236 4.7907228 10.313815 4.3752232 10.313815 L 0.99989318 10.313815 L 0.99989318 6.9384853 C 0.99989318 6.7307355 0.91724681 6.5437176 0.78168445 6.4081552 z ' transform='rotate(-45)' /%3E%3C/svg%3E") !important; background: none !important; margin: 4px !important; padding: 4px !important; @@ -932,15 +1034,11 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt height: 33px !important; } #toolbar-menubar { - -moz-box-ordinal-group: 1; order: 0; margin: 0px !important; padding: 0px !important; - border-top: none !important; - border-bottom: 1px solid rgba(0,0,0,0.2) !important; } #toolbar-menubar[autohide="true"] { - -moz-box-ordinal-group: 1; order: 0; border-bottom: none !important; } @@ -949,50 +1047,59 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt } /*** BOOKMARKS BAR ***/ +#PersonalToolbar { + & .toolbarbutton-1 { + align-items: center !important; + } +} +toolbarbutton.bookmark-item:not(.subviewbutton) { + padding: 6px !important; + min-height: 28px !important; + max-height: 28px !important; +} #PersonalToolbar .toolbarbutton-1:-moz-any([open], [checked], :hover, :active) { background-color: transparent !important; } #PersonalToolbar { - -moz-box-ordinal-group: 2; - order: 2; - padding: 0px !important; + order: 1; + padding: 0px 0px 4px 0px !important; max-height: 35px !important; min-height: 35px !important; - border-top: none !important; - border-bottom: 1px solid rgba(0,0,0,0.2) !important; + background: none !important; } #PlacesToolbar { min-height: 33px !important; } -#PlacesToolbarItems .bookmark-item:not(menuitem):not(menu):-moz-any([open], [checked], :hover, :active) { - background: rgba(255,255,255, 0.2) !important; -} -#PersonalToolbar .toolbarbutton-1:not(#PlacesChevron):not(#import-button) > .toolbarbutton-icon { - max-width: 16px !important; - max-height: 16px !important; - margin: 6px !important; +#PlacesToolbarItems { + padding: 0px 0px 4px 0px !important; } #personal-toolbar-empty-description { margin: 3px !important; padding: 6px 6px !important; } -#wrapper-personal-bookmarks, -#wrapper-import-button { - min-height: 33px !important; +#wrapper-personal-bookmarks { + padding: 0px 0px !important; } -#PlacesChevron { +#PlacesChevron > .toolbarbutton-icon { width: 28px !important; height: 28px !important; - padding: 2px 3px !important; - margin: 3px !important; + padding: 6px !important; + margin: 2px !important; border-radius: 3px !important; } +#PlacesChevron { + margin: 2px 2px 4px 2px !important; +} #PlacesChevron image { background: none !important; } #import-button { - margin-left: 3px !important; - padding: 4px !important; + margin-left: 4px !important; + margin-top: 2px !important; + padding: 6px !important; +} +#import-button:-moz-any([open], [checked], :hover, :active) { + background: var(--accentcolor-percentage) !important; } /*** DROPDOWN MENU CONTENT ***/ @@ -1001,180 +1108,167 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt border-radius: 7px !important; } -/*** EXTENSIONS ICONS SPACING ***/ -.webextension-browser-action { - padding-left: 4px !important; - padding-right: 4px !important; -} - /*** CTRL TAB PANEL ***/ #ctrlTab-panel { border-radius: 7px !important; } -/*** CHECKBOXES ***/ -.checkbox-check:not(@-moz-document url("chrome://global/content/commonDialog.xhtml")) { - appearance: none !important; - height: 16px !important; - width: 16px !important; - border-radius: 3px !important; -} - /*** MISC. ***/ .button-menu-dropmarker { margin-left: 3px !important; } - -/*** Override titlebar-buttons default styling in all modes to get back the elementary OS buttons ***/ -.titlebar-button:-moz-lwtheme { - appearance: auto !important; - border-radius: none !important; -} -.titlebar-button > .toolbarbutton-icon:-moz-lwtheme { - padding: initial !important; - -moz-context-properties: none !important; - stroke: none !important; -} -.titlebar-min:-moz-lwtheme { - list-style-image: initial !important; -} -.titlebar-max:-moz-lwtheme { - list-style-image: initial !important; -} -.titlebar-restore:-moz-lwtheme { - list-style-image: initial !important; +.private-browsing-indicator-icon, +.private-browsing-indicator-with-label { + display: none !important; } -.titlebar-close:-moz-lwtheme { - list-style-image: initial !important; +#tab-notification-deck { + order: 2; } - /****** COLOURS *******/ +/* system accent color variables */ +:root { + color-scheme: dark !important; + --accentcolor-percentage: color-mix(in srgb, LinkText 70%, transparent 100%); +} + /* make main window background dark for tiled windows */ #main-window { background: black !important; } /*** TILED/MAXIMIZED/FULLSCREEN WINDOW FIXES ***/ -:root[gtktiledwindow="true"] #nav-bar, -:root[gtktiledwindow="true"] #nav-bar:-moz-window-inactive{ - box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05) !important; +:root[gtktiledwindow="true"] #navigator-toolbox, +:root[gtktiledwindow="true"] #navigator-toolbox:-moz-window-inactive { + border-radius: 6px 6px 0 0 !important; + box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.4) !important; /* this makes the border bottom to avoid double borders in vertical tabs */ } -:root[sizemode="maximized"] #nav-bar, -:root[sizemode="maximized"] #nav-bar:-moz-window-inactive, -:root[inFullscreen="true"] #nav-bar { +:root[sizemode="maximized"] #navigator-toolbox, +:root[sizemode="maximized"] #navigator-toolbox:-moz-window-inactive, +:root[inFullscreen="true"] #navigator-toolbox { border-radius: 0 0 0 0 !important; - box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05) !important; + box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.4) !important; /* this makes the border bottom to avoid double borders in vertical tabs */ } :root[inFullscreen="true"] #TabsToolbar { min-height: 36px !important; max-height: 36px !important; - border-top: 1px solid rgba(0,0,0,0.4) !important; - border-bottom: 1px solid rgba(0,0,0,0.4) !important; } /*** FOCUS FIX for PRIVATE MODE ***/ :root { --inactive-titlebar-opacity: 1 !important; } -#nav-bar:-moz-window-inactive { - background: linear-gradient(to right, rgba(139,121,226,1), rgba(199,128,188,1)) !important; -} -#TabsToolbar[collapsed] ~ #nav-bar:-moz-window-inactive { - box-shadow: linear-gradient(to right, rgba(139,121,226,1), rgba(199,128,188,1)), 0px 0px 3px 0px rgba(0,0,0,0.3) !important; -} -#urlbar:not([focused="true"]):-moz-window-inactive { - background: linear-gradient(to right, #A793FF, #D198E5) !important; +#navigator-toolbox:-moz-window-inactive { + border-radius: 6px 6px 0 0 !important; + background: linear-gradient(to right, rgba(105,75,188,1) 0%, rgba(105,75,188,1) 20%, rgba(162,76,141,1) 100%) !important; + box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.4) !important; /* this makes the border bottom to avoid double borders in vertical tabs */ } -#searchbar:not([focused="true"]):-moz-window-inactive { - background: #D198E5 !important; +#nav-bar:-moz-window-inactive { + border-radius: 6px 6px 0 0 !important; + background: linear-gradient(to right, rgba(105,75,188,1) 0%, rgba(105,75,188,1) 20%, rgba(162,76,141,1) 100%) !important; + box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05) !important; } #TabsToolbar:-moz-window-inactive { - background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0) 6%), - linear-gradient(90deg, rgba(167,147,255,1), rgba(229,155,216,1) 100%) !important; + background: none !important; } #PersonalToolbar:-moz-window-inactive { - background: linear-gradient(90deg, rgba(167,147,255,1), rgba(229,155,216,1) 100%) !important; + background: none !important; } #toolbar-menubar:-moz-window-inactive { - background: linear-gradient(to right, rgba(139,121,226,1), rgba(199,128,188,1)) !important; + background: none !important; } -#PanelUI-menu-button:-moz-window-inactive { +#PanelUI-menu-button:-moz-window-inactive, +.titlebar-min image:-moz-window-inactive, +.titlebar-max image:-moz-window-inactive, +.titlebar-restore image:-moz-window-inactive, +.titlebar-close image:-moz-window-inactive, +#nav-bar #back-button > .toolbarbutton-icon:-moz-window-inactive, +#nav-bar #forward-button > .toolbarbutton-icon:-moz-window-inactive, +#nav-bar #reload-button > .toolbarbutton-icon:-moz-window-inactive, +#nav-bar #home-button > .toolbarbutton-icon:-moz-window-inactive, +toolbar .toolbarbutton-1:not(#PanelUI-menu-button) > .toolbarbutton-icon:-moz-window-inactive, +toolbar .toolbarbutton-1:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack:-moz-window-inactive, +#TabsToolbar .tab-close-button:-moz-window-inactive { opacity: 0.5 !important; } -#sidebar-main:-moz-window-inactive { - background: linear-gradient(to right, rgba(167,147,255,1), rgba(177,148,249,1)) !important; +.notificationbox-stack:-moz-window-inactive { + background: linear-gradient(to right, rgba(105,75,188,1) 0%, rgba(105,75,188,1) 20%, rgba(162,76,141,1) 100%) !important; } /*** ELEMENTS IN PRIVATE MODE ***/ :root { --toolbarseparator-color: rgba(255,255,255,0.6) !important; } +#navigator-toolbox { + border-radius: 6px 6px 0 0 !important; + background: linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0.1) 100%), + linear-gradient(to right, rgba(105,75,188,1) 0%, rgba(105,75,188,1) 20%, rgba(162,76,141,1) 100%) !important; + box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.4) !important; /* this makes the border bottom to avoid double borders in vertical tabs */ +} #nav-bar { -moz-appearance: none !important; + box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 1px 1px 0 rgba(0,0,0,0.06) !important; + border-radius: 6px 6px 0 0 !important; border-bottom: 1px solid rgba(0,0,0,0.4) !important; - background: linear-gradient(to right, rgba(94,75,197,1), rgba(162,76,141,1)) !important; - box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05) !important; + background: linear-gradient(to right, rgba(105,75,188,1) 0%, rgba(105,75,188,1) 20%, rgba(162,76,141,1) 100%) !important; } -#TabsToolbar[collapsed] ~ #nav-bar { - box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0px 0px 3px 0px rgba(0,0,0,0.3) !important; +input:not(#urlbar-input, .searchbar-textbox)::selection, +textarea::selection { + color: #000 !important; + background: SelectedItem !important; } -#navigator-toolbox { - background-color: rgba(0,0,0,1) !important; +@media (prefers-color-scheme: dark ) { +input:not(#urlbar-input, .searchbar-textbox)::selection, +textarea::selection { + color: #fff !important; + background: SelectedItem !important; +}} +.urlbarView-row:hover, +.autocomplete-richlistitem:not([disabled="true"]):not([selected]):hover { + background-color: rgba(0,0,0,0.1) !important; } -#searchbar:not([focused="true"]) { +#PopupSearchAutoComplete .autocomplete-richlistitem[selected], +.searchbar-engine-one-off-item[selected], +.urlbarView-row[selected] { + background: SelectedItem !important; + color-scheme: dark !important; +} +#urlbar[focused]:not([open]) { + border: 1px solid rgba(0,0,0,0.4) !important; + background: linear-gradient(to right, #8266C4, #A267A9) !important; + box-shadow: inset 0px 0.1px 0.5px 0.2px rgba(0,0,0,0.18), 0 0 0 2px var(--accentcolor-percentage) !important; +} +#searchbar:focus-within { border: 1px solid rgba(0,0,0,0.4) !important; - border-radius: 3px !important; background: #A267A9 !important; - box-shadow: inset 0 0 1px 0 rgba(0,0,0,0.3), 0 1px 0 0 rgba(255,255,255,0.05) !important; + box-shadow: inset 0px 0.1px 0.5px 0.2px rgba(0,0,0,0.18), 0 0 0 2px var(--accentcolor-percentage) !important; } -#urlbar:not([focused="true"]) { +#urlbar[focused][open], +#urlbar[open]:not([focused]) { border: 1px solid rgba(0,0,0,0.4) !important; - border-radius: 3px !important; background: linear-gradient(to right, #8266C4, #A267A9) !important; - box-shadow: inset 0 0 1px 0 rgba(0,0,0,0.3), 0 1px 0 0 rgba(255,255,255,0.05) !important; + box-shadow: 0 2px 2px 1px rgba(0,0,0,0.1) !important; } -#urlbar[focused="true"] { +#urlbar[focused] > #urlbar-background { + box-shadow: none !important; +} +#urlbar:not([focused]){ border: 1px solid rgba(0,0,0,0.4) !important; - border-radius: 4px !important; background: linear-gradient(to right, #8266C4, #A267A9) !important; + box-shadow: inset 0px 0.1px 0.5px 0.2px rgba(0,0,0,0.18), 0 1px 0 0 rgba(255,255,255,0.05) !important; +} +#searchbar:not(:focus-within) { + border: 1px solid rgba(0,0,0,0.4) !important; + background: #A267A9 !important; + box-shadow: inset 0px 0.1px 0.5px 0.2px rgba(0,0,0,0.18), 0 1px 0 0 rgba(255,255,255,0.05) !important; } .urlbarView-url, .urlbarView-title:not(:empty) ~ .urlbarView-action { color: rgba(255,255,255,0.4) !important; } -.urlbarView-row:not([type="tip"]):not([type="dynamic"])[selected] > .urlbarView-row-inner, -.search-one-offs button[selected], -.autocomplete-richlistitem[selected], -#urlbar-search-mode-indicator { - background: rgba(0,0,0,0.2) !important; -} -#urlbar-container image:not(#userContext-indicator), -.urlbarView-favicon, -#customization-palette-container image, -#nav-bar-customization-target > toolbarbutton:not(hbox) > image, -#nav-bar-customization-target > toolbarpaletteitem image, -#nav-bar-overflow-button image, -#nav-bar-customization-target stack, -#PopupSearchAutoComplete image, -#searchbar image, -.tab-content > image:not(.tab-icon-image), -.toolbarbutton-icon[type="menu"], -#bookmarks-toolbar-placeholder image, -#PlacesChevron .toolbarbutton-icon, -#import-button image, -#TabsToolbar-customization-target > toolbarbutton:not(hbox) > image, -#TabsToolbar-customization-target > toolbarpaletteitem image, -#nav-bar-customization-target > #zoom-controls > toolbarbutton > image, -#TabsToolbar-customization-target > #zoom-controls > toolbarbutton > image, -#urlbar-search-mode-indicator-close, -#alltabs-button image, -#unified-extensions-button image { - fill: #fff !important; -} :root { --urlbar-separator-color: rgba(255,255,255,0.3) !important; } @@ -1183,30 +1277,6 @@ COLOURS #customization-footer { border-top: 1px solid rgba(255,255,255,0.2) !important; } -#urlbar-input, -.urlbarView-title, -.urlbarView-body-inner label, -.urlbarView-row[label]::before, -#urlbar-one-offs-header-label, -.urlbarView-title-separator, -#customization-palette-container label, -#customization-palette-container, -#customization-footer checkbox, -.searchbar-textbox, -#PopupSearchAutoComplete label, -#PopupSearchAutoComplete button, -#PopupSearchAutoComplete richlistitem, -#identity-icon-label, -#import-button label, -#nav-bar-customization-target > #zoom-controls > toolbarbutton > label, -#TabsToolbar-customization-target > #zoom-controls > toolbarbutton > label, -#TabsToolbar-customization-target > #wrapper-zoom-controls > #zoom-controls > toolbarbutton > label, -#nav-bar-customization-target > #wrapper-zoom-controls > #zoom-controls > toolbarbutton > label, -#urlbar-zoom-button label, -#urlbar-search-mode-indicator-title, -#wrapper-personal-bookmarks label { - color: #fff !important; -} toolbar .toolbaritem-combined-buttons:not(:hover) > separator { background-image: linear-gradient( #fff 0, #fff 100%) !important; } @@ -1220,9 +1290,7 @@ toolbar .toolbaritem-combined-buttons:not(:hover) > separator { } #TabsToolbar { appearance: none !important; - background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0) 6%), - linear-gradient(90deg, rgba(115,98,200,1), rgba(171,100,157,1) 100%) !important; - border-bottom: 1px solid rgba(0,0,0,0.2) !important; + background: none !important; } .tab-background:is([selected], [multiselected]) { background: rgba(255,255,255,0.25) !important; @@ -1232,22 +1300,14 @@ toolbar .toolbaritem-combined-buttons:not(:hover) > separator { background: rgba(141,32,174,1) !important; border: none !important; } -.tab-content > image:not(.tab-icon-image) { - fill: rgba(255,255,255,1) !important; -} -.tab-icon-pending, -.tab-throbber, -.tab-loading-burst { - --tab-loading-fill: #fff !important; - color: #fff !important; +#TabsToolbar #firefox-view-button[open] > .toolbarbutton-icon { + fill: white !important; } #PersonalToolbar { - background: linear-gradient(90deg, rgba(115,98,200,1), rgba(171,100,157,1) 100%) !important; - border-top: none !important; - border-bottom: 1px solid rgba(0,0,0,0.2) !important; + background: none !important; } #toolbar-menubar { - background: linear-gradient(to right, rgba(94,75,197,1), rgba(162,76,141,1)) !important; + background: none !important; } menu[_moz-menuactive="true"], menubar > menu[open] { @@ -1255,56 +1315,36 @@ menubar > menu[open] { color: black !important; } #PlacesToolbarItems .bookmark-item:not(menuitem):not(menu):-moz-any([open], [checked], :hover, :active) { - background-color: rgba(255,255,255,0.3) !important; -} -#customization-container { - background: #2d0b44 !important; + background: rgba(0,0,0,0.1) !important; } #sidebar-main { - background: linear-gradient(to right, rgba(115,98,200,1), rgba(126,98,192,1)) !important; + background: rgba(105,75,188,1) !important; } #tabbrowser-arrowscrollbox[orient="vertical"] > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button, #vertical-tabs-newtab-button { & > .toolbarbutton-text { color: white !important; } } -:root { - --button-text-color-ghost: white !important; - --button-icon-color-ghost: white !important; - --button-text-color-ghost-hover: white !important; - --button-icon-color-ghost-hover: white !important; - --tab-icon-overlay-stroke: white !important; - --tab-icon-overlay-fill: black !important; +.notificationbox-stack { + background: transparent !important; } -.button-menu-dropmarker { - margin-left: 3px !important; - filter: invert(1) brightness(500%) !important; -} -@media (prefers-color-scheme: dark) { -.button-menu-dropmarker { - margin-left: 3px !important; - filter: none !important; -}} -#alltabs-button:not(:-moz-lwtheme-brighttext), -#profiler-button > .toolbarbutton-menu-dropmarker:not(:-moz-lwtheme-brighttext) { - filter: invert(1) brightness(500%) !important; -} -#wrapper-alltabs-button:not(:-moz-lwtheme-brighttext) { - filter: none !important; -} -.tab-secondary-label { - color: rgba(255,255,255,1) !important; -} -@media (prefers-color-scheme: dark) { -#alltabs-button:not(:-moz-lwtheme-darktext), -#wrapper-alltabs-button:not(:-moz-lwtheme-darktext), -#profiler-button > .toolbarbutton-menu-dropmarker:not(:-moz-lwtheme-brighttext) { - filter: none !important; -}} :root { --toolbarbutton-hover-background: #503da8 !important; --toolbarbutton-active-background: #503da8 !important; } +.tab-icon-image { + fill: white !important; +} + +/* make tab animation in system accent color */ +.tab-throbber::before { + fill: LinkText !important; + filter: saturate(150%) !important; +} +.tab-loading-burst[bursting]::before { + fill: LinkText !important; + filter: saturate(150%) !important; +} /*** MAKE WINDOW CONTROLS WHITE for PRIVATE MODE ***/ .titlebar-min image { @@ -1359,11 +1399,6 @@ menubar > menu[open] { box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.15), 0 1px 0 0 rgba(255,255,255,0.1) !important; } -/*** PROTECTIONS ICON for PRIVATE MODE ***/ -#tracking-protection-icon-box:not([hasException])[active] > #tracking-protection-icon-animatable-box > #tracking-protection-icon-animatable-image { - filter: invert(100%) brightness(500%) opacity(60%) !important; -} - /*** TEXT COLOR for PRIVATE MODE ***/ scrollbox > toolbarbutton > .toolbarbutton-text { color: #fff !important; @@ -1373,7 +1408,7 @@ scrollbox > toolbarbutton > .toolbarbutton-text { color: #fff !important; text-shadow: none !important; } -.tab-label[selected="true"] { +.tab-label[selected] { color: #FFF !important; } .tab-label { @@ -1429,42 +1464,3 @@ scrollbox > toolbarbutton > .toolbarbutton-text { fill: white !important; stroke: white !important; } - -/*** CUSTOMIZATION BUTTONS for PRIVATE MODE ***/ -#customization-lwtheme-button, -#customization-toolbar-visibility-button, -#customization-uidensity-button, -#customization-reset-button, -#customization-done-button { - appearance: none !important; - padding: 5px !important; - background-color: rgba(255,255,255,0.2) !important; - border: 1px solid rgba(0,0,0,0.50) !important; - border-radius: 3px !important; - box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.10) !important; - color: #fff !important; -} -#customization-lwtheme-button[open="true"], -#customization-toolbar-visibility-button[open="true"], -#customization-uidensity-button[open="true"], -#customization-reset-button:active, -#customization-done-button:active { - appearance: none !important; - padding: 5px !important; - background-color: rgba(255,255,255,0.2) !important; - border: 1px solid rgba(0,0,0,0.50) !important; - border-radius: 3px !important; - box-shadow: inset 0 0 3px 0 rgba(0,0,0,0.2) !important; - color: #fff !important; -} - -/*** CHECKBOX BUTTONS CUSTOMIZATION PANEL for PRIVATE MODE ***/ -.checkbox-check { - appearance: none !important; - height: 16px !important; - width: 16px !important; - background-color: white !important; - border: 1px solid rgba(0,0,0,0.50) !important; - border-radius: 3px !important; - box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.10) !important; -} diff --git a/Promo_image_november-2024.png b/Promo_image_november-2024.png deleted file mode 100644 index 3ed6dd3..0000000 Binary files a/Promo_image_november-2024.png and /dev/null differ diff --git a/Titlebar Enabled/userChrome.css b/Titlebar Enabled/userChrome.css index 3e1c453..01cae4e 100644 --- a/Titlebar Enabled/userChrome.css +++ b/Titlebar Enabled/userChrome.css @@ -4,22 +4,41 @@ /*This style will blend Firefox 65+ in elementary OS. Currently tested on Linux on Nightly*/ -/* This userChrome is for button layout With Titlebar Enabled */ +@import "flatpak.css"; + +/* dont show window controls */ +.titlebar-buttonbox { + display: none !important; +} + +/* dont show window controls in fullscreen */ +:root[sizemode="fullscreen"] .titlebar-buttonbox { + display: none !important; +} /************************************ MENU POPUPS + right mouse click menus *************************************/ -/* Normal Mode menu popups */ +/*** Normal Mode menu popups ***/ menubar > menu[open] { border-bottom-color: transparent !important; } -menu, menuitem, menucaption { +menu:not(#file-menu, #edit-menu, #view-menu, #history-menu, #bookmarksMenu, #tools-menu, #helpMenu), menuitem:not(#context-back, #context-forward, #context-reload, #context-bookmarkpage), menucaption { appearance: none !important; padding: 7px 12px !important; border-radius: 0px !important; max-width: 100% !important; } +#file-menu, #edit-menu, #view-menu, #history-menu, #bookmarksMenu, #tools-menu, #helpMenu { + appearance: none !important; + padding: 5px 10px !important; + border-radius: 4px !important; + margin: 0px 4px !important; +} +#context-back, #context-forward, #context-reload, #context-bookmarkpage { + margin: 0px 6px !important; +} menu:hover:not([disabled="true"]), menuitem:hover:not([disabled="true"]), menucaption:hover:not([disabled="true"]) { background-color: rgba(0,0,0,0.08) !important; } @@ -41,9 +60,6 @@ menupopup, panel { #BMB_bookmarksPopup .menu-text { margin-left: 0px !important; } -.toolbaritem-combined-buttons { - margin-right: -3px !important; -} .menupopup-arrowscrollbox { border-radius: 7px !important; overflow: auto !important; @@ -62,12 +78,40 @@ menuseparator::before, toolbarseparator::before { border-top: none !important; } -menu, menuitem { - &:where([_moz-menuactive]:not([disabled="true"])) { - color: black !important; -}} +.panel-header > .subviewbutton-back:hover, +#appMenu-fxa-label2 { + border-radius: 4px !important; +} -/* Dark Mode in Tweaks menu popups */ +/* extensions pull down menu */ +#unified-extensions-panel .unified-extensions-item > .unified-extensions-item-action-button { + margin-inline-start: 4px !important; + margin-inline-end: 4px !important; + border-radius: 4px !important; + background-color: transparent !important; + padding: 7px 7px !important; +} +#unified-extensions-panel .unified-extensions-item > .unified-extensions-item-action-button:hover { + margin-inline-start: 4px !important; + margin-inline-end: 4px !important; + border-radius: 4px !important; + background-color: rgba(0,0,0,0.08) !important; + padding: 7px 7px !important; +} +#unified-extensions-panel .unified-extensions-item > .unified-extensions-item-menu-button > .toolbarbutton-icon { + margin-inline-end: 4px !important; + padding: 20px !important; + border-radius: 4px !important; + background-color: transparent !important; +} +#unified-extensions-panel .unified-extensions-item > .unified-extensions-item-menu-button:hover > .toolbarbutton-icon { + margin-inline-end: 4px !important; + padding: 20px !important; + border-radius: 4px !important; + background-color: rgba(0,0,0,0.08) !important; +} + +/*** Dark Mode in Tweaks menu popups ***/ @media (prefers-color-scheme: dark) { menu:hover:not([disabled="true"]), menuitem:hover:not([disabled="true"]), menucaption:hover:not([disabled="true"]) { background-color: rgba(255,255,255,0.10) !important; @@ -92,12 +136,25 @@ menupopup, panel { --panel-item-hover-bgcolor: rgba(255,255,255,0.10) !important; --button-hover-bgcolor: rgba(255,255,255,0.10) !important; } -menu, menuitem { - &:where([_moz-menuactive]:not([disabled="true"])) { - color: white !important; -}}} +#appMenu-fxa-label2 { + background-color: rgba(255,255,255,0.05) !important; +} + +/* extensions pull down menu */ +#unified-extensions-panel .unified-extensions-item > .unified-extensions-item-action-button { + background-color: transparent !important; +} +#unified-extensions-panel .unified-extensions-item > .unified-extensions-item-action-button:hover { + background-color: rgba(255,255,255,0.10) !important; +} +#unified-extensions-panel .unified-extensions-item > .unified-extensions-item-menu-button > .toolbarbutton-icon { + background-color: transparent !important; +} +#unified-extensions-panel .unified-extensions-item > .unified-extensions-item-menu-button:hover > .toolbarbutton-icon { + background-color: rgba(255,255,255,0.10) !important; +}} -/* Private Mode menu popups */ +/*** Private Mode menu popups ***/ :root[privatebrowsingmode="temporary"] menupopup:not(#BMB_bookmarksPopup) menu[_moz-menuactive="true"]:not([disabled="true"]):not(.subviewbutton), :root[privatebrowsingmode="temporary"] menupopup:not(#BMB_bookmarksPopup) menuitem[_moz-menuactive="true"]:not([disabled="true"]):not(.subviewbutton) { appearance: none !important; @@ -182,7 +239,6 @@ menu, menuitem { background: rgba(255,255,255,0.15) !important; color: #fff !important; } -:root[privatebrowsingmode="temporary"] #screenshots_mozilla_org-menuitem-_create-screenshot > .menu-iconic-left > .menu-iconic-icon, :root[privatebrowsingmode="temporary"] .menu-right { filter: invert(1) !important; } @@ -193,11 +249,38 @@ menu, menuitem { :root[privatebrowsingmode="temporary"] .menu-right { filter: none !important; }} +:root[privatebrowsingmode="temporary"] #appMenu-fxa-label2 { + background-color: rgba(0,0,0,0.1) !important; +} + +/* extensions pull down menu */ +:root[privatebrowsingmode="temporary"] #unified-extensions-panel .unified-extensions-item > .unified-extensions-item-action-button { + background-color: transparent !important; +} +:root[privatebrowsingmode="temporary"] #unified-extensions-panel .unified-extensions-item > .unified-extensions-item-action-button:hover { + background-color: rgba(0,0,0,0.1) !important; +} +:root[privatebrowsingmode="temporary"] #unified-extensions-panel .unified-extensions-item > .unified-extensions-item-menu-button > .toolbarbutton-icon { + background-color: transparent !important; +} +:root[privatebrowsingmode="temporary"] #unified-extensions-panel .unified-extensions-item > .unified-extensions-item-menu-button:hover > .toolbarbutton-icon { + background-color: rgba(0,0,0,0.1) !important; +} /********** Normal mode ***********/ +/* system accent color variables */ +:root { + --accentcolor-percentage: color-mix(in srgb, LinkText 20%, transparent); + --accentcolor-main: color-mix(in srgb, LinkText 70%, transparent); + --color-accent-primary: color-mix(in srgb, LinkText 70%, transparent) !important; + --button-background-color: color-mix(in srgb, black 5%, transparent) !important; + --button-background-color-hover: color-mix(in srgb, black 8%, transparent) !important; + --button-background-color-active: color-mix(in srgb, black 8%, transparent) !important; +} + /* make main window background dark for tiled windows */ #main-window { background: black !important; @@ -208,28 +291,39 @@ Normal mode --inactive-titlebar-opacity: 1 !important; } #navigator-toolbox:-moz-window-inactive { - background: #E9E9E9 !important; + background: #FAFAFA !important; + border-bottom: none !important; + box-shadow: inset 0 -1px 0 0 #C8C8C8 !important; /* this makes the border bottom to avoid double borders in vertical tabs */ } #nav-bar:-moz-window-inactive { - background: linear-gradient(to bottom, #EAEAEA, #E9E9E9) !important; - box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2) !important; + background: #FAFAFA !important; + border-bottom: 1px solid #C8C8C8 !important; + box-shadow: inset 0 0 0 1px rgba(255,255,255,1) !important; } #TabsToolbar:-moz-window-inactive { - background: linear-gradient(180deg, rgba(236,236,236,1) 0%, rgba(250,250,250,1) 10%, rgba(250,250,250,1) 100%) !important; - border-bottom: 1px solid #C9C9C9 !important; + background: none !important; } -.tab-background[selected="true"]:-moz-window-inactive { +.tab-background:is([selected], [multiselected]):-moz-window-inactive { background: #FAFAFA !important; } -#toolbar-menubar:-moz-window-inactive { - background: #E9E9E9 !important; - border-bottom: 1px solid #D9D9D9 !important; -} #PersonalToolbar:-moz-window-inactive { - background: rgba(250,250,250,1) !important; - border-bottom: 1px solid #D9D9D9 !important; + background: none !important; +} +#toolbar-menubar:-moz-window-inactive { + background: none !important; } -#PanelUI-menu-button:-moz-window-inactive { +#PanelUI-menu-button:-moz-window-inactive, +.titlebar-min image:-moz-window-inactive, +.titlebar-max image:-moz-window-inactive, +.titlebar-restore image:-moz-window-inactive, +.titlebar-close image:-moz-window-inactive, +#nav-bar #back-button > .toolbarbutton-icon:-moz-window-inactive, +#nav-bar #forward-button > .toolbarbutton-icon:-moz-window-inactive, +#nav-bar #reload-button > .toolbarbutton-icon:-moz-window-inactive, +#nav-bar #home-button > .toolbarbutton-icon:-moz-window-inactive, +toolbar .toolbarbutton-1:not(#PanelUI-menu-button) > .toolbarbutton-icon:-moz-window-inactive, +toolbar .toolbarbutton-1:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack:-moz-window-inactive, +#TabsToolbar .tab-close-button:-moz-window-inactive { opacity: 0.5 !important; } #sidebar-main:-moz-window-inactive { @@ -237,21 +331,18 @@ Normal mode } /*** TILED/MAXIMIZED/FULLSCREEN WINDOW FIXES ***/ -:root[gtktiledwindow="true"] #nav-bar, -:root[gtktiledwindow="true"] #nav-bar:-moz-window-inactive{ - box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2) !important; +:root[gtktiledwindow="true"] #navigator-toolbox, +:root[gtktiledwindow="true"] #navigator-toolbox:-moz-window-inactive { + box-shadow: inset 0 -1px 0 0 #C8C8C8 !important; /* this makes the border bottom to avoid double borders in vertical tabs */ } -:root[sizemode="maximized"] #nav-bar, -:root[sizemode="maximized"] #nav-bar:-moz-window-inactive, -:root[inFullscreen="true"] #nav-bar { - border-radius: 0 0 0 0 !important; - box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2) !important; +:root[sizemode="maximized"] #navigator-toolbox, +:root[sizemode="maximized"] #navigator-toolbox:-moz-window-inactive, +:root[inFullscreen="true"] #navigator-toolbox { + box-shadow: inset 0 -1px 0 0 #C8C8C8 !important; /* this makes the border bottom to avoid double borders in vertical tabs */ } :root[inFullscreen="true"] #TabsToolbar { min-height: 36px !important; max-height: 36px !important; - border-top: 1px solid #B5B5B5 !important; - border-bottom: 1px solid #D9D9D9 !important; } #fullscr-toggler { height: 3px !important; @@ -261,6 +352,59 @@ Normal mode } /*** TITLEBAR BUTTONS ***/ +.titlebar-min image { + appearance: none !important; + background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1' /%3E%3Cg color='%23bebebe' transform='translate(-733 -157)' id='g1' style='fill:%23333333'%3E%3Cpath d='M740 160v4h-3l3.156 4H737v2h8v-2h-3.156l3.156-4h-3v-4z' fill='%23333333' overflow='visible' style='marker:none;fill:%23333333' id='path1' /%3E%3C/g%3E%3C/svg%3E") !important; + background-repeat: no-repeat !important; + background-position: center !important; + padding: 12px !important; + margin: 1px !important; + border: 1px solid transparent !important; +} +.titlebar-max image { + appearance: none !important; + background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1' /%3E%3Cpath id='path1-0' style='fill:%23333333;fill-opacity:1;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none' d='M 9.5625 2 C 8.9219462 1.9980564 8.6014518 2.7739255 9.0566406 3.2246094 L 10.216797 4.3730469 L 8.2246094 6.3652344 C 7.9308343 6.6590638 7.9308077 7.1319795 8.2246094 7.4257812 L 8.578125 7.7792969 C 8.8719266 8.0730986 9.3448695 8.0730994 9.6386719 7.7792969 L 11.638672 5.7792969 L 12.755859 6.8847656 C 13.216533 7.3406302 13.998589 7.0152847 14 6.3671875 L 14 2.7519531 C 13.999671 2.33756 13.664392 2.0014067 13.25 2 L 9.5625 2 z M 6.8964844 8 C 6.7047983 7.9999999 6.5121352 8.0738019 6.3652344 8.2207031 L 4.3652344 10.220703 L 3.2480469 9.1152344 C 2.7873733 8.6593698 2.0053172 8.9847153 2.0039062 9.6328125 L 2.0039062 13.248047 C 2.0042352 13.66244 2.3395147 13.998594 2.7539062 14 L 6.4414062 14 C 7.0819596 14.0019 7.4024542 13.226074 6.9472656 12.775391 L 5.7871094 11.626953 L 7.7792969 9.6347656 C 8.0730726 9.3409362 8.0730986 8.8680205 7.7792969 8.5742188 L 7.4257812 8.2207031 C 7.2788804 8.0738023 7.0881704 8.0000001 6.8964844 8 z ' /%3E%3C/svg%3E") !important; + background-repeat: no-repeat !important; + background-position: center !important; + padding: 12px !important; + margin: 1px !important; + border: 1px solid transparent !important; +} +.titlebar-restore image { + appearance: none !important; + background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1' /%3E%3Cpath id='path1-0' style='fill:%23333333;fill-opacity:1;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none' d='M 12.896484 2 C 12.704798 1.9999999 12.512135 2.0738019 12.365234 2.2207031 L 10.365234 4.2207031 L 9.2480469 3.1152344 C 8.7873733 2.6593698 8.0053172 2.9847153 8.0039062 3.6328125 L 8.0039062 7.2480469 C 8.0042352 7.6624405 8.3395147 7.998594 8.7539062 8 L 12.441406 8 C 13.08196 8.00194 13.402454 7.2260742 12.947266 6.7753906 L 11.787109 5.6269531 L 13.779297 3.6347656 C 14.073073 3.3409362 14.073099 2.8680205 13.779297 2.5742188 L 13.425781 2.2207031 C 13.27888 2.0738023 13.08817 2.0000001 12.896484 2 z M 3.5625 8 C 2.9219466 7.9981 2.6014521 8.7739258 3.0566406 9.2246094 L 4.2167969 10.373047 L 2.2246094 12.365234 C 1.9308337 12.659064 1.9308077 13.13198 2.2246094 13.425781 L 2.578125 13.779297 C 2.8719267 14.073099 3.3448702 14.0731 3.6386719 13.779297 L 5.6386719 11.779297 L 6.7558594 12.884766 C 7.2165329 13.34063 7.998589 13.015285 8 12.367188 L 8 8.7519531 C 7.999671 8.3375595 7.6643916 8.001406 7.25 8 L 3.5625 8 z ' /%3E%3C/svg%3E") !important; + background-repeat: no-repeat !important; + background-position: center !important; + padding: 12px !important; + margin: 1px !important; + border: 1px solid transparent !important; +} +.titlebar-close image { + appearance: none !important; + background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1' /%3E%3Cpath id='rect1' style='opacity:1;fill:%23333333;fill-opacity:1;stroke:none;stroke-width:1;stroke-opacity:0.498039;-inkscape-stroke:none' d='M 0.78168445 6.4081552 C 0.64612209 6.2725928 0.45772309 6.1885654 0.2499733 6.1885654 L -0.2499733 6.1885654 C -0.66547288 6.1885654 -0.99989318 6.5229857 -0.99989318 6.9384853 L -0.99989318 10.313815 L -4.3752232 10.313815 C -4.7907228 10.313815 -5.1251431 10.648236 -5.1251431 11.063735 L -5.1251431 11.563682 C -5.1251431 11.979181 -4.7907228 12.313602 -4.3752232 12.313602 L -0.99989318 12.313602 L -0.99989318 15.688932 C -0.99989318 16.104431 -0.66547288 16.438852 -0.2499733 16.438852 L 0.2499733 16.438852 C 0.66547288 16.438852 0.99989318 16.104431 0.99989318 15.688932 L 0.99989318 12.313602 L 4.3752232 12.313602 C 4.7907228 12.313602 5.1251431 11.979181 5.1251431 11.563682 L 5.1251431 11.063735 C 5.1251431 10.648236 4.7907228 10.313815 4.3752232 10.313815 L 0.99989318 10.313815 L 0.99989318 6.9384853 C 0.99989318 6.7307355 0.91724681 6.5437176 0.78168445 6.4081552 z ' transform='rotate(-45)' /%3E%3C/svg%3E") !important; + background-repeat: no-repeat !important; + background-position: center !important; + padding: 12px !important; + margin: 1px !important; + border: 1px solid transparent !important; +} +.titlebar-close:hover image, +.titlebar-min:hover image, +.titlebar-max:hover image, +.titlebar-restore:hover image { + background-color: transparent !important; +} +.titlebar-close:active image, +.titlebar-min:active image, +.titlebar-max:active image, +.titlebar-restore:active image { + background-color: rgba(0,0,0,0.05) !important; + border-radius: 3px !important; + border: 1px solid rgba(0,0,0,0.2) !important; + box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.07), 0 1px 0 0 rgba(255,255,255,0.5) !important; +} + +/* misc titlebar button styles */ .titlebar-close, .titlebar-min, .titlebar-max, @@ -283,63 +427,78 @@ Normal mode display: none !important; } -/* dont show window controls */ -.titlebar-buttonbox { - display: none !important; -} - -/* dont show window controls in fullscreen */ -:root[sizemode="fullscreen"] .titlebar-buttonbox { - display: none !important; -} - /*** NAV BAR ***/ #navigator-toolbox { + background: #F2F2F2 !important; border: none !important; - background: #DFDFDF !important; - border-radius: 6px 6px 0 0 !important; + box-shadow: inset 0 -1px 0 0 #C8C8C8 !important; /* this makes the border bottom to avoid double borders in vertical tabs */ } #nav-bar { - -moz-box-ordinal-group: 0; border-top: 0px !important; - border-bottom: 1px solid #B5B5B5 !important; order: -1; - background: linear-gradient(to bottom, #E5E5E5, #DFDFDF) !important; height: 45px !important; - padding: 0px 0px 0px 0px !important; - box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2) !important; + padding: 0px 0px 0px 0px !important; /* this removes the space of the windows controls */ + background: #FAFAFA !important; + border-bottom: 1px solid #C8C8C8 !important; + box-shadow: inset 0 0 0 1px rgba(255,255,255,1), 0 1px 1px 0 rgba(0,0,0,0.06) !important; } /* fullscreen fixes for the nav bar */ :root[sizemode="fullscreen"] #nav-bar { - padding: 0px 0px 0px 0px !important; + padding: 0px 0px 0px 0px !important; /* this removes the space of the windows controls */ } /*** URLBAR + MEGABAR ***/ + +/* make open urlbar hovers full width */ +.urlbarView { + margin-inline: 0px !important; + width: 100% !important; + border-inline: none !important; +} +.urlbarView-row { + border-radius: 0px !important; + border: none !important; + padding-inline-start: 6px !important; + padding-inline-end: 6px !important; +} +.urlbarView-row:hover { + background-color: rgba(0,0,0,0.08) !important; +} +.urlbarView-row[label]::before { + margin-inline-start: 4px !important; +} +.urlbarView-row[selected] { + background-color: SelectedItem !important; +} + +/* urlbar and searchbar with all buttons and icons */ +:root { + --urlbar-min-height: 24px !important; +} #urlbar[breakout][breakout-extend][breakout-extend-animate]:not([open]), #urlbar[breakout][breakout-extend]:not([open]), #urlbar[breakout]:not([open]) { - --urlbar-height: 25px !important; - --urlbar-toolbar-height: 25px !important; + --urlbar-height: 26px !important; + --urlbar-toolbar-height: 26px !important; } #urlbar[open] { - top: 7px !important; + --urlbar-min-height: 22px !important; /* takes care of password key icon not jumping in open urlbar */ + top: 5px !important; } #urlbar[open] .urlbar-input-container { - margin-top: 4px !important; + height: 24px !important; + margin-top: 3px !important; margin-bottom: 3px !important; margin-left: 6px !important; padding-right: 12px !important; } -.urlbar-input-container label { - line-height: 15px !important; -} #urlbar-container, #search-container { -moz-window-dragging: drag !important; - padding-block: 10px !important; + padding-top: 3px !important; /* adjust when all urlbar icons and input text are jumping */ } .urlbar-input-container { - height: 21px !important; + height: 22px !important; border-radius: 2px !important; padding: 0px 2px 0px 0px !important; margin: 1px !important; @@ -348,33 +507,36 @@ Normal mode -moz-window-dragging: no-drag !important; } #urlbar { - min-height: 25px !important; + min-height: 26px !important; } #searchbar { - min-height: 25px !important; - max-height: 25px !important; + min-height: 26px !important; + max-height: 26px !important; } -#urlbar[focused] { - border: 1px solid silver !important; +#urlbar[focused]:not([open]), +#searchbar:focus-within { + border: 1px solid var(--accentcolor-main) !important; border-radius: 3px !important; background: #ffffff !important; + box-shadow: inset 0px 0.1px 0.5px 0.2px var(--accentcolor-percentage), 0 0 0 2px var(--accentcolor-percentage) !important; + filter: saturate(150%) !important; } -#searchbar[focused] { - border: 1px solid silver !important; - border-radius: 3px !important; +#urlbar[focused][open], +#urlbar[open]:not([focused]) { + border: 1px solid #C8C8C8 !important; + border-radius: 6px !important; background: #ffffff !important; + box-shadow: 0 2px 2px 1px rgba(0,0,0,0.1) !important; } -#searchbar:not([focused]) { - border: 1px solid #B8B8B8 !important; - border-radius: 3px !important; - background: #ffffff !important; - box-shadow: inset 0 0 1px 0 rgba(0,0,0,0.3), 0 1px 0 0 rgba(255,255,255,0.7) !important; +#urlbar[focused] > #urlbar-background { + box-shadow: none !important; } -#urlbar:not([focused]) { - border: 1px solid #B8B8B8 !important; - border-radius: 3px !important; +#urlbar:not([focused]), +#searchbar:not(:focus-within) { + border: 1px solid #C8C8C8 !important; + border-radius: 3px !important; background: #ffffff !important; - box-shadow: inset 0 0 1px 0 rgba(0,0,0,0.3), 0 1px 0 0 rgba(255,255,255,0.8) !important; + box-shadow: inset 0px 0.1px 0.5px 0.2px rgba(0,0,0,0.18), 0 1px 0 0 rgba(255,255,255,1) !important; } #urlbar-background { border: none !important; @@ -384,55 +546,60 @@ Normal mode outline: none !important; } #searchbar:focus-within { - outline: none !important; + outline: var(--accentcolor-percentage) !important; + filter: saturate(150%) !important; } #PopupSearchAutoComplete { - border-radius: 3px !important; + margin-top: -1px !important; } .urlbar-icon:not(.urlbar-revert-button ):not(.search-go-button):not(.urlbar-go-button) { - margin: -3px 0px 0px 0px !important; + margin: -2px 0px 0px 0px !important; } .urlbar-page-action:not(#translations-button[translationsactive="true"]) { - height: 19px !important; + height: 20px !important; width: 23px !important; margin-left: 2px !important; } #translations-button[translationsactive="true"] { - height: 19px !important; + height: 20px !important; } #translations-button-locale { height: 17px !important; margin: -3px 2px !important; } -#notification-popup-box { - height: 19px !important; -} -#identity-permission-box { - height: 19px !important; - padding: 0px 4px 0px 4px !important; + +/* makes icons same height in open urlbar */ +#urlbar[breakout-extend] #identity-box, +#urlbar[breakout-extend] #tracking-protection-icon-container, +#urlbar[breakout-extend] #page-action-buttons { + height: 20px !important; + margin-top: 2px !important; } -#urlbar[breakout-extend] #identity-permission-box, #urlbar[breakout-extend] #notification-popup-box { - margin-top: -1px !important; -} - -/* delete when stable is version 134 or when these urlbar icons are jumping in Nightly */ -/* :root[data-title-default="Firefox Nightly"] #urlbar[breakout-extend] #identity-permission-box, -:root[data-title-default="Firefox Nightly"] #urlbar[breakout-extend] #notification-popup-box { + height: 20px !important; margin-top: 0px !important; -} */ - -#identity-icon, -#tracking-protection-icon-box { - margin: 0px 0px 1px 0px !important; } +#urlbar[breakout-extend] #identity-box:not(.verifiedDomain) { + height: 20px !important; + margin-top: 2px !important; +} +#urlbar[breakout-extend] #identity-box:not(.verifiedDomain) #identity-icon-box label { + margin-top: -2px !important; +} + .urlbar-go-button, .urlbar-revert-button { - padding: 6px !important; - margin: -5px 0px !important; + width: 20px !important; + height: 20px !important; + padding: 2px !important; + margin: 2px 0px !important; } .search-go-button { - padding: 6px !important; + padding: 2px !important; + margin: 0px 2px !important; +} +#PopupSearchAutoComplete .search-setting-button { + margin-inline: 6px !important; } :root { --urlbar-icon-padding: 4px !important; @@ -443,15 +610,11 @@ Normal mode padding: 0px 3px !important; margin: 0px 2px !important; } -#notification-popup-box image { - width: 16px !important; - height: 16px !important; - padding: 0px !important; - margin: 0px 4px 2px 4px !important; -} #urlbar .search-one-offs:not([hidden]) { padding-block: 2px !important; - min-height: 25px !important; + padding-inline-start: 6px !important; + padding-inline-end: 2px !important; + min-height: 26px !important; } .search-one-offs[is_searchbar="true"]) { border-top: none !important; @@ -460,40 +623,35 @@ Normal mode #urlbar .search-panel-one-offs, #urlbar .search-panel-one-offs-container, #urlbar .searchbar-engine-one-off-item { - min-height: 25px !important; -} -#urlbar-searchmode-switcher image { - margin-bottom: 1px !important; + min-height: 26px !important; } + +/* makes new searchmode box same look and height in open urlbar */ #searchmode-switcher-chicklet { border-start-end-radius: 2px !important; border-end-end-radius: 2px !important; } +#urlbar[breakout-extend] #searchmode-switcher-chicklet { + height: 20px !important; + margin-top: 2px !important; + padding-bottom: 1px !important; +} +#urlbar[breakout-extend] #urlbar-searchmode-switcher { + height: 20px !important; + margin-top: 2px !important; +} -/* selected text and icons url bar */ +/* selected text in system accent color */ ::selection { - color: #FFFFFF !important; - background-color: #1E90FF !important; + color: #000 !important; + background-color: var(--accentcolor-percentage) !important; + filter: saturate(150%) !important; } :root { - --toolbarbutton-icon-fill-attention: #1E90FF !important; + --toolbarbutton-icon-fill-attention: var(--accentcolor-main) !important; } /*** TOOLBAR ***/ -toolbar:not(.customization-target) .toolbarbutton-1 > .toolbarbutton-icon, -toolbar:not(.customization-target):not(#PersonalToolbar):not(#TabsToolbar) .toolbarbutton-1:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack { - width: 28px !important; - height: 28px !important; - padding: 6px !important; - margin-right: 0px !important; -} -toolbar .toolbarbutton-1:hover > .toolbarbutton-icon { - background: none !important; - box-shadow: none !important; -} -toolbar[customizing] > .overflow-button:hover > .toolbarbutton-icon { - background: rgba(51,51,51, 0.3) !important; -} /* keep default icons small while below icons are bigger */ #back-button > .toolbarbutton-icon, @@ -507,19 +665,23 @@ toolbar[customizing] > .overflow-button:hover > .toolbarbutton-icon { clip-path: circle(50%) !important; } -/* buttons in normal mode */ -#back-button > .toolbarbutton-icon { +/* navigation buttons */ +#nav-bar #back-button > .toolbarbutton-icon { list-style-image: url("data:image/svg+xml,%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' id='svg6' version='1.1' width='16' height='16'%3E%3Cmetadata id='metadata12'%3E%3Crdf:RDF%3E%3Ccc:Work rdf:about=''%3E%3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E%3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage' /%3E%3Cdc:title%3E%3C/dc:title%3E%3C/cc:Work%3E%3C/rdf:RDF%3E%3C/metadata%3E%3Cdefs id='defs10' /%3E%3Cpath id='path873-5' style='opacity:1;fill:%23000000;stroke:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stop-color:%23000000' d='m 7.2260666,2.5 c 0.4312184,0 0.7783725,0.3346464 0.7783725,0.7503279 V 6 H 13.221628 C 13.652847,6 14,6.3346463 14,6.7503279 V 8.249672 C 14,8.6653541 13.652847,9.0004099 13.221628,9 H 8.0044391 v 2.749674 C 8.0044391,12.165354 7.657285,12.5 7.2260666,12.5 6.9936571,12.5 6.7861919,12.40264 6.6438073,12.247938 L 2.212837,8.0241533 C 2.081227,7.8897736 2,7.7091601 2,7.5097679 2,7.3103755 2.081225,7.129763 2.212837,6.995383 L 6.6438073,2.7520634 C 6.7861919,2.5973529 6.9936571,2.5 7.2260666,2.5 Z' /%3E%3C/svg%3E") !important; border: none !important; background: none !important; margin-right: 3px !important; margin-left: 3px !important; } + +/* back button color in checked state */ #nav-bar #back-button[checked] > .toolbarbutton-icon { - background: rgba(51,51,51, 0.15) !important; + background: var(--accentcolor-percentage) !important; box-shadow: none !important; + filter: saturate(150%) !important; } -#forward-button { + +#nav-bar #forward-button { list-style-image: url("data:image/svg+xml,%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' id='svg6' version='1.1' width='16' height='16'%3E%3Cmetadata id='metadata12'%3E%3Crdf:RDF%3E%3Ccc:Work rdf:about=''%3E%3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E%3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage' /%3E%3Cdc:title%3E%3C/dc:title%3E%3C/cc:Work%3E%3C/rdf:RDF%3E%3C/metadata%3E%3Cdefs id='defs10' /%3E%3Cpath id='path873-5' style='opacity:1;fill:%23000000;stroke:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stop-color:%23000000' d='M 8.7739334,2.5 C 8.342715,2.5 7.9955609,2.8346464 7.9955609,3.2503279 L 7.9955609,6 H 2.778372 C 2.347153,6 2,6.3346463 2,6.7503279 L 2,8.249672 C 2,8.6653541 2.3471532,9.0004099 2.778372,9 h 5.2171889 l 0,2.749674 c 0,0.41568 0.3471541,0.750326 0.7783725,0.750326 0.2324095,0 0.4398747,-0.09736 0.5822593,-0.252062 L 13.787163,8.0241533 C 13.918773,7.8897736 14,7.7091601 14,7.5097679 14,7.3103755 13.918775,7.129763 13.787163,6.995383 L 9.3561927,2.7520634 C 9.2138081,2.5973529 9.0063429,2.5 8.7739334,2.5 Z' /%3E%3C/svg%3E") !important; margin-right: 3px !important; } @@ -529,7 +691,7 @@ toolbar[customizing] > .overflow-button:hover > .toolbarbutton-icon { } #stop-button { list-style-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' height='24' width='24' version='1.1' id='svg6'%3E%3Cmetadata id='metadata12'%3E%3Crdf:RDF%3E%3Ccc:Work rdf:about=''%3E%3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E%3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage' /%3E%3Cdc:title /%3E%3C/cc:Work%3E%3C/rdf:RDF%3E%3C/metadata%3E%3Cdefs id='defs10' /%3E%3Cpath d='m 7.1875,5.0026092 c -0.243988,0.0069 -0.474752,0.112716 -0.65625,0.3125 l -1.25,1.375 c -0.362996,0.399568 -0.353579,1.027726 0.03125,1.40625 l 3.96875,3.9062498 -3.96875,3.90625 c -0.384829,0.378524 -0.394246,1.006682 -0.03125,1.40625 l 1.25,1.375 c 0.362996,0.399568 0.958921,0.409774 1.34375,0.03125 l 4.125,-4.0625 4.125,4.0625 c 0.384829,0.378524 0.980754,0.368318 1.34375,-0.03125 l 1.25,-1.375 c 0.362996,-0.399568 0.353579,-1.027726 -0.03125,-1.40625 l -3.96875,-3.90625 3.96875,-3.9062498 c 0.384829,-0.378524 0.394246,-1.006682 0.03125,-1.40625 l -1.25,-1.375 C 17.105754,4.9155411 16.509829,4.9053351 16.125,5.2838592 L 12,9.3463592 7.875,5.2838592 C 7.682586,5.0945972 7.431488,4.9957431 7.1875,5.0026092 Z' id='rect3280' style='color:%23333333;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:%23000000;solid-opacity:1;fill:%23333333;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate' /%3E%3C/svg%3E") !important; - margin-right: 6px !important; + margin-right: 3px !important; } #home-button { list-style-image: url("data:image/svg+xml,%3Csvg height='24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate%28-353 255%29'%3E%3Cpath color='%23333333' d='M365-251l-8.844 8.844 1.688 1.719 1.156-1.157V-235h5v-4c0-.554.446-1 1-1s1 .446 1 1v4h5v-6.594l1.156 1.156 1.688-1.718zm4 1v1.531l2 2.094V-250z' fill='%23333333' overflow='visible' style='isolation:auto;mix-blend-mode:normal;marker:none'/%3E%3C/g%3E%3C/svg%3E") !important; @@ -542,9 +704,6 @@ toolbar[customizing] > .overflow-button:hover > .toolbarbutton-icon { #stop-reload-button > #stop-button:not([displayreload]) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image { background-image: none !important; } -:root:not([customizing]) .toolbarbutton-1[disabled="true"]{ - opacity: 0.35 !important; -} #PanelUI-menu-button .toolbarbutton-badge-stack > .toolbarbutton-icon { background: none !important; box-shadow: none !important; @@ -553,39 +712,75 @@ toolbar[customizing] > .overflow-button:hover > .toolbarbutton-icon { padding: 0px !important; margin: -4px !important; } -#PanelUI-menu-button:hover:not([open]):not([checked]):not(:active) > .toolbarbutton-badge-stack, -#fxa-toolbar-menu-button:hover:not([open]):not([checked]):not(:active) > .toolbarbutton-badge-stack { - background: none !important; + +/* circled extension icons */ +toolbar .toolbarbutton-1:not([disabled="true"]) { + &[data-extensionid] { + margin-inline: 0px !important; + } +} +toolbar:not(.customization-target):not(#PersonalToolbar):not(#TabsToolbar) .toolbarbutton-1:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack { + border-radius: 50% !important; +} +toolbar .toolbarbutton-1 { + &:not([disabled]):not(#PanelUI-menu-button) { + &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack) { + background-color: var(--accentcolor-percentage) !important; + filter: saturate(150%) !important; + } + } } -toolbar .toolbaritem-combined-buttons > .toolbarbutton-1 { + +/* make circled toolbar icons with accent color + other buttons in other bars with no circle */ +toolbar:not(.customization-target) .toolbarbutton-1 > .toolbarbutton-icon, +toolbar:not(.customization-target):not(#PersonalToolbar):not(#TabsToolbar) .toolbarbutton-1:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack { + width: 28px !important; + height: 28px !important; + padding: 6px !important; +} +toolbar .toolbarbutton-1:hover > .toolbarbutton-icon, +toolbar .toolbarbutton-1:hover > .toolbarbutton-badge-stack { background: none !important; box-shadow: none !important; - padding: 8px !important; - margin: -4px !important; - border-radius: 50% !important; } -toolbar:not(#PersonalToolbar):not(#TabsToolbar) .toolbarbutton-1:not([disabled="true"]):not([data-extensionid]):-moz-any([open], [checked], :active) > .toolbarbutton-icon, -toolbar:not(#PersonalToolbar):not(#TabsToolbar) .toolbarbutton-1:not(#PanelUI-menu-button):not([disabled="true"]):not([data-extensionid]):-moz-any([open], [checked], :active) > .toolbarbutton-badge-stack { - background: rgba(51,51,51, 0.15) !important; - clip-path: circle(50%) !important; +#PanelUI-menu-button:hover:not([open]):not([checked]):not(:active) > .toolbarbutton-badge-stack, +#fxa-toolbar-menu-button:hover:not([open]):not([checked]):not(:active) > .toolbarbutton-badge-stack { + background: none !important; } -toolbar .toolbarbutton-1:not([disabled="true"]):not([data-extensionid]):-moz-any([open], [checked], :hover, :active) > .toolbarbutton-badge-stack { - background: rgba(51,51,51, 0.15) !important; +toolbar:not(#PersonalToolbar):not(#TabsToolbar) .toolbarbutton-1:not([disabled="true"], [data-extensionid], #nav-bar-overflow-button):is([open], [checked], :active) > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack) { + background: var(--accentcolor-percentage) !important; clip-path: circle(50%) !important; + filter: saturate(150%) !important; +} +toolbar[customizing] #nav-bar-overflow-button > .toolbarbutton-icon { + background: none !important; } -toolbar .toolbaritem-combined-buttons > .toolbarbutton-1:-moz-any([open], [checked], :active), -toolbar .toolbarbutton-1[data-extensionid]:-moz-any([open], [checked], :active) { - background: radial-gradient(circle, rgba(51,51,51, 0.15) 49%, rgba(51,51,51, 0) 50%) !important; +#nav-bar-overflow-button:is([open], [checked], :active) > .toolbarbutton-icon { + background: var(--accentcolor-percentage) !important; + clip-path: none !important; + filter: saturate(150%) !important; + border-radius: 3px !important; } -#TabsToolbar .toolbarbutton-1:not([disabled="true"]):-moz-any([open], [checked], :active) > .toolbarbutton-icon, -#TabsToolbar .toolbarbutton-1:not([disabled="true"]):-moz-any([open], [checked], :hover, :active) > .toolbarbutton-badge-stack { - background: rgba(51,51,51, 0.15) !important; +#TabsToolbar .toolbarbutton-1:not([disabled="true"], #alltabs-button, #new-tab-button, #tabs-newtab-button, #firefox-view-button):is([open], [checked], :active) > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack) { + background: var(--accentcolor-percentage) !important; clip-path: none !important; + filter: saturate(150%) !important; + border-radius: 3px !important; } -#PersonalToolbar .toolbarbutton-1:not([disabled="true"]):-moz-any([open], [checked], :hover, :active), -#PersonalToolbar .toolbarbutton-1:not([disabled="true"]):-moz-any([open], [checked], :hover, :active) > .toolbarbutton-badge-stack { - background: rgba(51,51,51, 0.15) !important; +#PersonalToolbar .toolbarbutton-1:not([disabled="true"]):is([open], [checked], :active) > .toolbarbutton-icon, +#PersonalToolbar .toolbarbutton-1:not([disabled="true"]):is([open], [checked], :active) > .toolbarbutton-badge-stack { + background: var(--accentcolor-percentage) !important; clip-path: none !important; + filter: saturate(150%) !important; + border-radius: 3px !important; +} + +/* buttons styles in toolbar */ +#TabsToolbar .toolbarbutton-1:not(#alltabs-button, #new-tab-button, #tabs-newtab-button, #firefox-view-button) > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack) { + margin-bottom: 2px !important; +} +:root:not([customizing]) .toolbarbutton-1[disabled="true"] { + opacity: 0.20 !important; } #PanelUI-button { border: none !important; @@ -608,9 +803,6 @@ toolbar .toolbarbutton-1[data-extensionid]:-moz-any([open], [checked], :active) toolbarpaletteitem > #stop-reload-button { -moz-box-pack: center !important; } -toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-button):not(#stop-button):not(#home-button):not(.webextension-browser-action):not(#fxa-toolbar-menu-button):not(#downloads-button):not(#import-button):not(#new-tab-button):not(#tabs-newtab-button):not(#alltabs-button):not(#firefox-view-button):not(#PlacesChevron) { - margin-right: 0px !important; -} #PanelUI-menu-button { padding-inline-start: var(--toolbar-start-end-padding) !important; } @@ -622,43 +814,42 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt } #scrollbutton-up image:active, #scrollbutton-down:-moz-locale-dir(ltr) image:active { - background: rgba(51,51,51, 0.15) !important; + background: rgba(0,0,0,0.08) !important; } :root { --toolbarbutton-hover-background: rgba(51,51,51, 0.15) !important; --toolbarbutton-active-background: rgba(51,51,51, 0.15) !important; } - -/*** TAB BAR ***/ -#tabbrowser-tabs { - &[orient="horizontal"] { - min-height: 36px !important; - max-height: 36px !important; - } +#TabsToolbar #fxa-toolbar-menu-button > .toolbarbutton-badge-stack { + width: 28px !important; + height: 28px !important; + padding: 6px !important; } -#tabbrowser-arrowscrollbox { - &[orient="horizontal"] { - min-height: 36px !important; - max-height: 36px !important; - } +#TabsToolbar .toolbarbutton-1:not([disabled="true"])[data-extensionid] > .toolbarbutton-badge-stack { + width: 28px !important; + height: 28px !important; + padding: 6px !important; } + +/*** TAB BAR ***/ + +/* tab bar */ #TabsToolbar { -moz-appearance: none !important; - padding: 0 !important; + padding-left: 2px !important; width: 100vw !important; - min-height: 35px !important; - max-height: 35px !important; - border-bottom: 1px solid #D9D9D9 !important; - background: linear-gradient(180deg, rgba(223,223,223,1) 0%, rgba(241,241,241,1) 10%, rgba(241,241,241,1) 98%, rgba(223,223,223,1) 100%) !important; + min-height: 36px !important; + max-height: 36px !important; + background: none !important; } #TabsToolbar .toolbarbutton-1:not(#new-tab-button):not(#tabs-newtab-button):not(#firefox-view-button):not(#alltabs-button) { - margin: auto 2px !important; + margin: auto auto !important; } .toolbar-items { - min-height: 36px !important; + min-height: 35px !important; } .titlebar-spacer[type="post-tabs"] { - width: 0px !important; + width: 0px !important; } :root[sizemode="fullscreen"] #TabsToolbar { margin-top: -1px !important; @@ -666,6 +857,40 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt #tabbrowser-arrowscrollbox { padding-left: 2px !important; } + +/* make horizontal tab bar and tabs same height */ +#tabbrowser-tabs { + &[orient="horizontal"] { + min-height: 36px !important; + max-height: 36px !important; + } +} +#tabbrowser-arrowscrollbox { + &[orient="horizontal"] { + min-height: 36px !important; + max-height: 36px !important; + } +} + +/* make tab separators: thanks to MrOtherGuy, source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tab_separator_lines.css */ +#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab { + border-inline-start: 1px solid transparent !important; + border-image: 0 1 linear-gradient(transparent 20%, color-mix(in srgb, #D9D9D9 100%, transparent) 20%, color-mix(in srgb, #D9D9D9 100%, transparent) 90%, transparent 90%) !important; +} +#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab:hover, +#tabbrowser-tabs[orient="horizontal"]:not([movingtab]) .tabbrowser-tab:hover + .tabbrowser-tab:not([first-visible-unpinned-tab]), +#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab:first-child, +#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab[selected], +#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab[multiselected], +#tabbrowser-tabs[orient="horizontal"] #tabbrowser-arrowscrollbox[overflowing] > .tabbrowser-tab[first-visible-unpinned-tab], +#tabbrowser-tabs[orient="horizontal"]:not([movingtab]) .tabbrowser-tab[multiselected] + .tabbrowser-tab, +#tabbrowser-tabs[orient="horizontal"]:not([movingtab]) .tabbrowser-tab[selected] + .tabbrowser-tab, +#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab:is([selected],[multiselected]) + .tabbrowser-tab[hidden] + .tabbrowser-tab { + border-inline-start: 1px solid transparent !important; + border-image: none !important; +} + +/* tabs */ .tab-content:not([pinned]) { -moz-box-direction: reverse !important; flex-direction: row-reverse !important; @@ -674,12 +899,6 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt .tab-content[pinned] { padding: 0px 10px 1px 10px !important; } -.tabbrowser-tab:after { - display: none !important; /* don't show border between tabs */ -} -.tabbrowser-tab:before { - display: none !important; /* don't show border between tabs */ -} .tabbrowser-tab[selected] { min-height: 32px !important; max-height: 32px !important; @@ -695,21 +914,23 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt .tab-background:not([selected]) { min-height: 30px !important; max-height: 30px !important; + border: none !important; border-radius: 3.5px !important; - margin: 2px -1px 2px -1px !important; + margin: 2px 0px 2px 0px !important; } .tab-background:is([selected], [multiselected]) { min-height: 32px !important; max-height: 32px !important; background: #FFFFFF !important; border-radius: 3.5px !important; - border-left: 1px solid #D5D5D5 !important; - border-right: 1px solid #D5D5D5 !important; - border-top: 1px solid #D5D5D5 !important; - border-bottom: 1px solid #C2C2C2 !important; - margin: 1px -1px 1px -1px !important; + border: 1px solid #C8C8C8 !important; + margin: 1px 0px 1px 0px !important; box-shadow: none !important; } +.tabbrowser-tab:not([selected]):hover .tab-background { + background-color: rgba(0,0,0,0.06) !important; + border-radius: 4px !important; +} .tabbrowser-tab[usercontextid] > .tab-stack > .tab-background[selected] > .tab-context-line { margin: 0px !important; } @@ -722,6 +943,8 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] { margin-inline-start: 0px !important; } + +/* write elementary OS style icon for new tab button */ #new-tab-button .toolbarbutton-icon { list-style-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg color='%23333333' transform='translate%28-293 -117%29'%3E%3Cpath d='M300 120v4h-4v2h4v4h2v-4h4v-2h-4v-4z' fill='%23333333' overflow='visible' style='marker:none'/%3E%3C/g%3E%3C/svg%3E") !important; width: 28px !important; @@ -742,18 +965,16 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt border-radius: 3px !important; margin: -2px 0px 0px 0px !important; } -#new-tab-button, -#tabs-newtab-button { - margin: 0px 0px 0px 2px !important; +#new-tab-button:-moz-any([open], [checked], :active) .toolbarbutton-icon, +#tabs-newtab-button:-moz-any([open], [checked], :active) .toolbarbutton-icon { + background-color: var(--accentcolor-percentage) !important; } #nav-bar #new-tab-button, #nav-bar #tabs-newtab-button { margin: 0px 0px 0px 0px !important; } -.all-tabs-item { - margin-inline: 0px !important; - border-radius: 0px !important; -} + +/* misc tab bar buttons styles */ #firefox-view-button .toolbarbutton-icon { width: 28px !important; height: 28px !important; @@ -764,14 +985,12 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt #nav-bar #firefox-view-button .toolbarbutton-icon { margin: 0px 0px 0px 0px !important; } -#firefox-view-button { - margin: 0px 0px 0px 2px !important; -} #firefox-view-button[open] { - padding: 5px 2px 5px 2px !important; + padding: 4px 2px 4px 2px !important; } #TabsToolbar #firefox-view-button[open] > .toolbarbutton-icon { box-shadow: none !important; + background: var(--accentcolor-percentage) !important; } #tabbrowser-tabs { border-inline-start: none !important; @@ -781,13 +1000,14 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt border-radius: 3px !important; padding: 6px !important; } +#alltabs-button[open] stack { + background: var(--accentcolor-percentage) !important; +} #nav-bar #alltabs-button stack { margin: 0px 0px 0px 0px !important; } - -/* all tabs */ -.all-tabs-close-button .toolbarbutton-icon { - list-style-image: url("data:image/svg+xml,%3Csvg height='16' width='16' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1' /%3E%3Cpath id='rect1' style='opacity:1;fill:%23333333;fill-opacity:1;stroke:none;stroke-width:1;stroke-opacity:0.498039;-inkscape-stroke:none' d='M 0.78168445 6.4081552 C 0.64612209 6.2725928 0.45772309 6.1885654 0.2499733 6.1885654 L -0.2499733 6.1885654 C -0.66547288 6.1885654 -0.99989318 6.5229857 -0.99989318 6.9384853 L -0.99989318 10.313815 L -4.3752232 10.313815 C -4.7907228 10.313815 -5.1251431 10.648236 -5.1251431 11.063735 L -5.1251431 11.563682 C -5.1251431 11.979181 -4.7907228 12.313602 -4.3752232 12.313602 L -0.99989318 12.313602 L -0.99989318 15.688932 C -0.99989318 16.104431 -0.66547288 16.438852 -0.2499733 16.438852 L 0.2499733 16.438852 C 0.66547288 16.438852 0.99989318 16.104431 0.99989318 15.688932 L 0.99989318 12.313602 L 4.3752232 12.313602 C 4.7907228 12.313602 5.1251431 11.979181 5.1251431 11.563682 L 5.1251431 11.063735 C 5.1251431 10.648236 4.7907228 10.313815 4.3752232 10.313815 L 0.99989318 10.313815 L 0.99989318 6.9384853 C 0.99989318 6.7307355 0.91724681 6.5437176 0.78168445 6.4081552 z ' transform='rotate(-45)' /%3E%3C/svg%3E") !important; +.tab-label:is([selected], [attention]) { + font-weight: normal !important; } /* get rid of privatebrowsing icon in tab bar */ @@ -803,8 +1023,8 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt /* hide and show close tab button */ #TabsToolbar .tab-close-button { list-style-image: url("data:image/svg+xml,%3Csvg height='16' width='16' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1' /%3E%3Cpath id='rect1' style='opacity:1;fill:%23333333;fill-opacity:1;stroke:none;stroke-width:1;stroke-opacity:0.498039;-inkscape-stroke:none' d='M 0.78168445 6.4081552 C 0.64612209 6.2725928 0.45772309 6.1885654 0.2499733 6.1885654 L -0.2499733 6.1885654 C -0.66547288 6.1885654 -0.99989318 6.5229857 -0.99989318 6.9384853 L -0.99989318 10.313815 L -4.3752232 10.313815 C -4.7907228 10.313815 -5.1251431 10.648236 -5.1251431 11.063735 L -5.1251431 11.563682 C -5.1251431 11.979181 -4.7907228 12.313602 -4.3752232 12.313602 L -0.99989318 12.313602 L -0.99989318 15.688932 C -0.99989318 16.104431 -0.66547288 16.438852 -0.2499733 16.438852 L 0.2499733 16.438852 C 0.66547288 16.438852 0.99989318 16.104431 0.99989318 15.688932 L 0.99989318 12.313602 L 4.3752232 12.313602 C 4.7907228 12.313602 5.1251431 11.979181 5.1251431 11.563682 L 5.1251431 11.063735 C 5.1251431 10.648236 4.7907228 10.313815 4.3752232 10.313815 L 0.99989318 10.313815 L 0.99989318 6.9384853 C 0.99989318 6.7307355 0.91724681 6.5437176 0.78168445 6.4081552 z ' transform='rotate(-45)' /%3E%3C/svg%3E") !important; - margin-left: -2px !important; - margin-right: 0px !important; + margin-left: 0px !important; + margin-right: 3px !important; width: 24px !important; height: 24px !important; padding: 4px !important; @@ -824,7 +1044,7 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt background: none !important; } -/* touch density adjustment */ +/* touch density adjustment close tab button */ :root[uidensity="touch"] .tab-close-button { padding: 0px !important; } @@ -840,15 +1060,15 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt .tab-line { display: none !important; /* strip of color at the top of tab */ } -.tab-secondary-label { - margin-top: -2px !important; - margin-left: 6px !important; -} .tabbrowser-tab { -moz-box-direction: reverse !important; flex-direction: row-reverse !important; } -.tab-icon-overlay:not([crashed]):is([pinned], [sharing]) { +.tab-secondary-label { + margin-top: -2px !important; + margin-left: 6px !important; +} +.tab-icon-overlay:not([crashed]):is([pinned], [sharing]) { inset-inline-end: -10px !important; } .tab-icon-image:not([pinned]), @@ -856,7 +1076,7 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt margin-inline-end: 0px !important; } -/* drag space */ +/* drag space in tab bar */ .titlebar-spacer[type="pre-tabs"] { margin-left: -40px !important; border-inline-end: none !important; @@ -878,12 +1098,43 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt margin-inline-end: auto; } +/* override vertical shifts when moving a tab in tab bar */ +#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar { + padding-bottom: unset !important; +} +#navigator-toolbox[movingtab] #tabbrowser-tabs { + padding-bottom: unset !important; + margin-bottom: unset !important; +} +#navigator-toolbox[movingtab] > #nav-bar { + margin-top: unset !important; +} + +/* all tabs close button */ +.all-tabs-close-button .toolbarbutton-icon { + list-style-image: url("data:image/svg+xml,%3Csvg height='16' width='16' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1' /%3E%3Cpath id='rect1' style='opacity:1;fill:%23333333;fill-opacity:1;stroke:none;stroke-width:1;stroke-opacity:0.498039;-inkscape-stroke:none' d='M 0.78168445 6.4081552 C 0.64612209 6.2725928 0.45772309 6.1885654 0.2499733 6.1885654 L -0.2499733 6.1885654 C -0.66547288 6.1885654 -0.99989318 6.5229857 -0.99989318 6.9384853 L -0.99989318 10.313815 L -4.3752232 10.313815 C -4.7907228 10.313815 -5.1251431 10.648236 -5.1251431 11.063735 L -5.1251431 11.563682 C -5.1251431 11.979181 -4.7907228 12.313602 -4.3752232 12.313602 L -0.99989318 12.313602 L -0.99989318 15.688932 C -0.99989318 16.104431 -0.66547288 16.438852 -0.2499733 16.438852 L 0.2499733 16.438852 C 0.66547288 16.438852 0.99989318 16.104431 0.99989318 15.688932 L 0.99989318 12.313602 L 4.3752232 12.313602 C 4.7907228 12.313602 5.1251431 11.979181 5.1251431 11.563682 L 5.1251431 11.063735 C 5.1251431 10.648236 4.7907228 10.313815 4.3752232 10.313815 L 0.99989318 10.313815 L 0.99989318 6.9384853 C 0.99989318 6.7307355 0.91724681 6.5437176 0.78168445 6.4081552 z ' transform='rotate(-45)' /%3E%3C/svg%3E") !important; +} +.all-tabs-item { + & > toolbarbutton { + border-radius: 3px !important; + } +} +.all-tabs-item { + & > toolbarbutton > .toolbarbutton-icon { + margin-left: -15px !important; + } +} +.all-tabs-close-button { + & > .toolbarbutton-icon { + margin-inline: 0px !important; + margin-left: -15px !important; + } +} + /*** VERTICAL TABS ***/ + #sidebar-main { - background: rgba(241,241,241,1) !important; -} -#TabsToolbar[collapsed] ~ #nav-bar { - box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2), 0px 0px 3px 0px rgba(0,0,0,0.15) !important; + background: #FAFAFA !important; } #TabsToolbar[collapsed] ~ #nav-bar ~ #PersonalToolbar { z-index: -1 !important; @@ -895,7 +1146,7 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt } } -/* not expanded */ +/* not expanded vertical tabs */ #tabbrowser-tabs[orient="vertical"] { &:not([expanded]) { & .tabbrowser-tab:is([selected], [multiselected]) { @@ -969,7 +1220,7 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt background: none !important; } -/* expanded */ +/* expanded vertical tabs */ #tabbrowser-tabs[orient="vertical"][expanded] #tabs-newtab-button { margin: 4px 0px 4px -1px !important; background: none !important; @@ -1060,22 +1311,30 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt } } +/* make tab animation in system accent color */ +.tab-throbber::before { + fill: LinkText !important; + filter: saturate(150%) !important; +} +.tab-loading-burst[bursting]::before { + fill: LinkText !important; + filter: saturate(150%) !important; +} + /*** MENUBAR ***/ #menubar-items { padding-top: 2px !important; height: 33px !important; } #toolbar-menubar { - -moz-box-ordinal-group: 1; order: 0; margin: 0px !important; padding: 0px !important; - background: #DFDFDF !important; + background: none !important; border-top: none !important; - border-bottom: 1px solid #B5B5B5 !important; + border-bottom: none !important; } #toolbar-menubar[autohide="true"] { - -moz-box-ordinal-group: 1; order: 0; border-bottom: none !important; } @@ -1084,51 +1343,61 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt } /*** BOOKMARKS BAR ***/ +#PersonalToolbar { + & .toolbarbutton-1 { + align-items: center !important; + } +} +toolbarbutton.bookmark-item:not(.subviewbutton) { + padding: 6px !important; + min-height: 28px !important; + max-height: 28px !important; +} #PersonalToolbar .toolbarbutton-1:-moz-any([open], [checked], :hover, :active) { background-color: transparent !important; } #PersonalToolbar { - -moz-box-ordinal-group: 2; - order: 2; - padding: 0px !important; + order: 1; + padding: 0px 0px 4px 0px !important; max-height: 35px !important; min-height: 35px !important; - background: rgba(241,241,241,1) !important; - border-top: none !important; - border-bottom: 1px solid #D9D9D9 !important; + background: none !important; } #PlacesToolbar { min-height: 33px !important; } -#PlacesToolbarItems .bookmark-item:not(menuitem):not(menu):-moz-any([open], [checked], :hover, :active) { - background: rgba(51,51,51, 0.15) !important; +#PlacesToolbarItems { + padding: 0px 0px 4px 0px !important; } -#PersonalToolbar .toolbarbutton-1:not(#PlacesChevron):not(#import-button) > .toolbarbutton-icon { - max-width: 16px !important; - max-height: 16px !important; - margin: 6px !important; +#PlacesToolbarItems .bookmark-item:not(menuitem):not(menu):-moz-any([open], [checked], :hover, :active) { + background: rgba(0,0,0,0.08) !important; } #personal-toolbar-empty-description { margin: 3px !important; padding: 6px 6px !important; } -#wrapper-personal-bookmarks, -#wrapper-import-button { - min-height: 33px !important; +#wrapper-personal-bookmarks { + padding: 0px 0px !important; } -#PlacesChevron { +#PlacesChevron > .toolbarbutton-icon { width: 28px !important; height: 28px !important; - padding: 2px 3px !important; - margin: 3px !important; + padding: 6px !important; border-radius: 3px !important; } +#PlacesChevron { + margin: 2px 2px 4px 2px !important; +} #PlacesChevron image { background: none !important; } #import-button { - margin-left: 3px !important; - padding: 4px !important; + margin-left: 4px !important; + margin-top: 2px !important; + padding: 6px !important; +} +#import-button:-moz-any([open], [checked], :hover, :active) { + background: var(--accentcolor-percentage) !important; } /*** DROPDOWN MENU CONTENT ***/ @@ -1138,32 +1407,25 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.4) !important; } -/*** EXTENSIONS ICONS SPACING ***/ -.webextension-browser-action { - padding-left: 4px !important; - padding-right: 4px !important; -} - /*** CTRL TAB PANEL ***/ #ctrlTab-panel { border-radius: 7px !important; } -/*** CHECKBOXES ***/ -.checkbox-check:not(@-moz-document url("chrome://global/content/commonDialog.xhtml")) { - appearance: none !important; - height: 16px !important; - width: 16px !important; - background-color: white !important; - border: 1px solid rgba(0,0,0,0.20) !important; - border-radius: 3px !important; - box-shadow: 0 1px 0 0 rgba(0,0,0,0.1) !important; -} - /*** MISC. ***/ .button-menu-dropmarker { margin-left: 3px !important; } +.private-browsing-indicator-icon, +.private-browsing-indicator-with-label { + display: none !important; +} +.notificationbox-stack { + background-color: transparent !important; +} +#tab-notification-deck { + order: 2; +} /************************************************** DARK MODE with elementary Tweaks dark mode enabled @@ -1171,6 +1433,10 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt @media (prefers-color-scheme: dark) { +/* system accent color variables */ +:root { + --accentcolor-percentage: color-mix(in srgb, SelectedItem 95%, transparent 100%); +} :root { --button-primary-bgcolor: #3689e6 !important; --button-primary-hover-bgcolor: #64baff !important; @@ -1185,39 +1451,33 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt }} /*** TILED/MAXIMIZED/FULLSCREEN WINDOW FIXES ***/ -:root[gtktiledwindow="true"] #nav-bar, -:root[gtktiledwindow="true"] #nav-bar:-moz-window-inactive { - box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05) !important; +:root[gtktiledwindow="true"] #navigator-toolbox, +:root[gtktiledwindow="true"] #navigator-toolbox:-moz-window-inactive{ + box-shadow: inset 0 -1px 0 0 #131313 !important; /* this makes the border bottom to avoid double borders in vertical tabs */ } -:root[sizemode="maximized"] #nav-bar, -:root[sizemode="maximized"] #nav-bar:-moz-window-inactive, -:root[inFullscreen="true"] #nav-bar { - border-radius: 0 0 0 0 !important; - box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05) !important; +:root[sizemode="maximized"] #navigator-toolbox, +:root[sizemode="maximized"] #navigator-toolbox:-moz-window-inactive, +:root[inFullscreen="true"] #navigator-toolbox { + box-shadow: inset 0 -1px 0 0 #131313 !important; /* this makes the border bottom to avoid double borders in vertical tabs */ } :root[inFullscreen="true"] #TabsToolbar { min-height: 36px !important; max-height: 36px !important; - border-top: 1px solid rgba(0,0,0,0.4) !important; - border-bottom: 1px solid rgb(36, 38, 39) !important; } /*** FOCUS FIX for Tweaks ***/ #navigator-toolbox:-moz-window-inactive { - background-color: #383838 !important; + background: #333333 !important; + box-shadow: inset 0 -1px 0 0 #131313 !important; /* this makes the border bottom to avoid double borders in vertical tabs */ } #nav-bar:-moz-window-inactive { appearance: none !important; - border-bottom: 1px solid #292929 !important; - background: linear-gradient(to bottom, #3B3B3B, #383838) !important; - box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05) !important; -} -#TabsToolbar[collapsed] ~ #nav-bar:-moz-window-inactive { - box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0px 0px 3px 0px rgba(0,0,0,0.15) !important; + background: #333333 !important; + border-bottom: 1px solid #131313 !important; + box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 1px 1px 0 rgb(0,0,0,0.06) !important; } #TabsToolbar:-moz-window-inactive { - background: linear-gradient(180deg, rgb(48, 48, 48) 0%, rgb(51, 51, 51) 10%, rgb(51, 51, 51) 100%) !important; - border-bottom: 1px solid rgb(36, 38, 39) !important; + background: none !important; } #urlbar:not([focused="true"]):-moz-window-inactive { border: 1px solid #282828 !important; @@ -1227,23 +1487,21 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt } .tab-background:is([selected], [multiselected]):-moz-window-inactive { background: rgb(51,51,51) !important; - border: 1px solid rgba(45,45,45,1) !important; + border: 1px solid rgba(0,0,0,0.3) !important; } #toolbar-menubar:-moz-window-inactive { - background: #383838 !important; + background: none !important; border-top: none !important; - border-bottom: 1px solid rgb(36, 38, 39) !important; + border-bottom: none !important; } #PersonalToolbar:-moz-window-inactive { - background: rgb(51, 51, 51) !important; - border-top: none !important; - border-bottom: 1px solid rgb(36, 38, 39) !important; + background: none !important; } #PlacesToolbarItems .bookmark-item:not(menuitem):not(menu):-moz-any([open], [checked], :hover, :active) { background-color: rgba(255,255,255,0.1) !important; } #sidebar-main:-moz-window-inactive { - background: linear-gradient(180deg, rgb(48, 48, 48) 0%, rgb(51, 51, 51) 10%, rgb(51, 51, 51) 100%) !important; + background: #333333 !important; } #tabbrowser-tabbox:-moz-window-inactive { @media (-moz-bool-pref: "sidebar.revamp") { @@ -1260,35 +1518,44 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt /*** ELEMENTS IN DARK MODE for Tweaks ***/ #navigator-toolbox { - border: none !important; background-color: #2C2C2C !important; - border-radius: 6px 6px 0 0 !important; + box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.5) !important; /* this makes the border bottom to avoid double borders in vertical tabs */ } #nav-bar { appearance: none !important; - border-bottom: 1px solid #1D1D1D !important; - background: linear-gradient(to bottom, #343434, #2C2C2C) !important; - box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05) !important; + background: #333333 !important; + border-bottom: 1px solid rgba(0,0,0,0.5) !important; + box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 1px 1px 0 rgb(0,0,0,0.06) !important; } -#TabsToolbar[collapsed] ~ #nav-bar { - box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0px 0px 3px 0px rgba(0,0,0,0.15) !important; +.urlbarView-row:hover { + background-color: rgba(255,255,255,0.10) !important; } -#urlbar[focused="true"] { - border: 1px solid #2B2C2C !important; - border-radius: 4px !important; +.urlbarView-row[selected] { + background-color: SelectedItem !important; +} +#urlbar[focused]:not([open]), +#searchbar:focus-within { + border: 1px solid #222222 !important; + border-radius: 3px !important; background: #3A3A3A !important; + box-shadow: inset 0px 0.1px 0.5px 0.2px rgba(0,0,0,0.18), 0 0 0 2px var(--accentcolor-percentage) !important; } -#searchbar[focused="true"] { - border: 1px solid #2B2C2C !important; - border-radius: 4px !important; - background: #3A3A3A !important; +#urlbar[focused][open], +#urlbar[open]:not([focused]) { + border: 1px solid #222222 !important; + border-radius: 6px !important; + background: #3A3A3A !important; + box-shadow: 0 2px 2px 1px rgba(0,0,0,0.1) !important; +} +#urlbar[focused] > #urlbar-background { + box-shadow: none !important; } -#urlbar:not([focused="true"]), -#searchbar:not([focused="true"]) { +#urlbar:not([focused]), +#searchbar:not(:focus-within) { border: 1px solid #222222 !important; - border-radius: 3px !important; - background: linear-gradient(#3C3C3C, #404040) !important; - box-shadow: inset 0 0 1px 0 rgba(0,0,0,0.3), 0 1px 0 0 rgba(255,255,255,0.1) !important; + border-radius: 3px !important; + background: #3A3A3A !important; + box-shadow: inset 0px 0.1px 0.5px 0.2px rgba(0,0,0,0.18), 0 1px 0 0 rgba(255,255,255,0.05) !important; } #urlbar-background { border: none !important; @@ -1296,43 +1563,39 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt } .urlbarView-body-inner, .search-one-offs:not([is_searchbar="true"]) { - border-top: 1px solid #5F6670 !important; + border-top: 1px solid rgba(255,255,255,0.05) !important; } :root { --panel-separator-color: #5C5C61 !important; --urlbar-separator-color: #5F6670 !important; } -.urlbarView-row:not([type="tip"]):not([type="dynamic"])[selected] > .urlbarView-row-inner, -.search-one-offs button[selected], -.autocomplete-richlistitem[selected] { - background: rgba(0,0,0,0.2) !important; - color: #fff !important; -} #PopupSearchAutoComplete { --panel-color: #fff !important; --panel-background: linear-gradient(#3C3C3C, #404040) !important; } + +/* tab separators in dark mode */ +#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab { + border-inline-start: 1px solid transparent !important; + border-image: 0 1 linear-gradient(transparent 20%, color-mix(in srgb, rgba(0,0,0,0.7), transparent) 20%, color-mix(in srgb, rgba(0,0,0,0.7), transparent) 90%, transparent 90%) !important; +} + #TabsToolbar { - background: linear-gradient(180deg, rgb(42, 42, 42) 0%, rgb(45, 45, 45) 10%, rgb(45, 45, 45) 100%) !important; - border-bottom: 1px solid rgb(36, 38, 39) !important; + background: none !important; } .tab-background:is([selected], [multiselected]) { box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.08), inset 0 -1px 0 0 rgba(255,255,255,0.05) !important; - border: 1px solid rgba(40,40,40,1) !important; + border: 1px solid rgba(0,0,0,0.5) !important; background: #3A3A3A !important; } -.tab-background { - background: unset !important; +.tabbrowser-tab:not([selected]):hover .tab-background { + background-color: rgba(0,0,0,0.1) !important; } #PersonalToolbar { - background: rgb(45, 45, 45) !important; - border-top: none !important; - border-bottom: 1px solid rgb(36, 38, 39) !important; + background: none !important; } #toolbar-menubar { - background: #2C2C2C !important; - border-top: none !important; - border-bottom: 1px solid rgb(36, 38, 39) !important; + background: none !important; } menubar > menu[open="true"] { color: #d1d1d1 !important; @@ -1341,31 +1604,23 @@ menubar > menu[open="true"] { --urlbar-separator-color: #5F6670 !important; } toolbar[customizing] > .overflow-button:hover > .toolbarbutton-icon { - background: rgba(255,255,255, 0.3) !important; -} -toolbar:not(#PersonalToolbar):not(#TabsToolbar) .toolbarbutton-1:not([disabled="true"]):not([data-extensionid]):-moz-any([open], [checked], :active) > .toolbarbutton-icon, -toolbar:not(#PersonalToolbar):not(#TabsToolbar) .toolbarbutton-1:not(#PanelUI-menu-button):not([disabled="true"]):not([data-extensionid]):-moz-any([open], [checked], :active) > .toolbarbutton-badge-stack { - background-color: rgba(255,255,255,0.2) !important; + background: var(--accentcolor-percentage) !important; } -toolbar .toolbarbutton-1:not([disabled="true"]):not([data-extensionid]):-moz-any([open], [checked], :hover, :active) > .toolbarbutton-badge-stack { - background-color: rgba(255,255,255,0.2) !important; -} -toolbar .toolbaritem-combined-buttons > .toolbarbutton-1:-moz-any([open], [checked], :active), -toolbar .toolbarbutton-1[data-extensionid]:-moz-any([open], [checked], :active) { - background: radial-gradient(circle, rgba(255,255,255,0.2) 49%, rgba(255,255,255,0) 50%) !important; +toolbar:not(#PersonalToolbar):not(#TabsToolbar) .toolbarbutton-1:not([disabled="true"], [data-extensionid], #nav-bar-overflow-button):is([open], [checked], :active) > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack) { + background: var(--accentcolor-percentage) !important; + clip-path: circle(50%) !important; } -#TabsToolbar .toolbarbutton-1:not([disabled="true"]):-moz-any([open], [checked], :active) > .toolbarbutton-icon, -#TabsToolbar .toolbarbutton-1:not([disabled="true"]):-moz-any([open], [checked], :hover, :active) > .toolbarbutton-badge-stack { - background: rgba(255,255,255, 0.2) !important; +#TabsToolbar .toolbarbutton-1:not([disabled="true"], #alltabs-button, #new-tab-button, #tabs-newtab-button, #firefox-view-button):is([open], [checked], :active) > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack) { + background: var(--accentcolor-percentage) !important; clip-path: none !important; } -#PersonalToolbar .toolbarbutton-1:not([disabled="true"]):-moz-any([open], [checked], :hover, :active), -#PersonalToolbar .toolbarbutton-1:not([disabled="true"]):-moz-any([open], [checked], :hover, :active) > .toolbarbutton-badge-stack { - background: rgba(255,255,255, 0.2) !important; +#PersonalToolbar .toolbarbutton-1:not([disabled="true"], #PlacesChevron):is([open], [checked], :active), +#PersonalToolbar .toolbarbutton-1:not([disabled="true"]):is([open], [checked], :active) > .toolbarbutton-badge-stack { + background: var(--accentcolor-percentage) !important; clip-path: none !important; } #sidebar-main { - background: linear-gradient(180deg, rgb(42, 42, 42) 0%, rgb(45, 45, 45) 10%, rgb(45, 45, 45) 100%) !important; + background: #333333 !important; } #tabbrowser-tabbox { @media (-moz-bool-pref: "sidebar.revamp") { @@ -1377,16 +1632,76 @@ toolbar .toolbarbutton-1[data-extensionid]:-moz-any([open], [checked], :active) --toolbarbutton-hover-background: #2d5b86 !important; --toolbarbutton-active-background: #2d5b86 !important; } +.notificationbox-stack { + background-color: transparent !important; +} + +/* selected text and icons url bar */ +::selection { + color: #fff !important; + background-color: var(--accentcolor-percentage) !important; +} /*** BUTTONS IN DARK MODE for Tweaks ***/ -#back-button > .toolbarbutton-icon { +.titlebar-min image { + appearance: none !important; + background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1' /%3E%3Cg color='%23bebebe' transform='translate(-733 -157)' id='g1' style='fill:%23ffffff'%3E%3Cpath d='M740 160v4h-3l3.156 4H737v2h8v-2h-3.156l3.156-4h-3v-4z' fill='%23ffffff' overflow='visible' style='marker:none;fill:%23ffffff' id='path1' /%3E%3C/g%3E%3C/svg%3E") !important; + background-repeat: no-repeat !important; + background-position: center !important; + padding: 12px !important; + margin: 1px !important; + border: 1px solid transparent !important; +} +.titlebar-max image { + appearance: none !important; + background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1' /%3E%3Cpath id='path1-0' style='fill:%23ffffff;fill-opacity:1;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none' d='M 9.5625 2 C 8.9219462 1.9980564 8.6014518 2.7739255 9.0566406 3.2246094 L 10.216797 4.3730469 L 8.2246094 6.3652344 C 7.9308343 6.6590638 7.9308077 7.1319795 8.2246094 7.4257812 L 8.578125 7.7792969 C 8.8719266 8.0730986 9.3448695 8.0730994 9.6386719 7.7792969 L 11.638672 5.7792969 L 12.755859 6.8847656 C 13.216533 7.3406302 13.998589 7.0152847 14 6.3671875 L 14 2.7519531 C 13.999671 2.33756 13.664392 2.0014067 13.25 2 L 9.5625 2 z M 6.8964844 8 C 6.7047983 7.9999999 6.5121352 8.0738019 6.3652344 8.2207031 L 4.3652344 10.220703 L 3.2480469 9.1152344 C 2.7873733 8.6593698 2.0053172 8.9847153 2.0039062 9.6328125 L 2.0039062 13.248047 C 2.0042352 13.66244 2.3395147 13.998594 2.7539062 14 L 6.4414062 14 C 7.0819596 14.0019 7.4024542 13.226074 6.9472656 12.775391 L 5.7871094 11.626953 L 7.7792969 9.6347656 C 8.0730726 9.3409362 8.0730986 8.8680205 7.7792969 8.5742188 L 7.4257812 8.2207031 C 7.2788804 8.0738023 7.0881704 8.0000001 6.8964844 8 z ' /%3E%3C/svg%3E") !important; + background-repeat: no-repeat !important; + background-position: center !important; + padding: 12px !important; + margin: 1px !important; + border: 1px solid transparent !important; +} +.titlebar-restore image { + appearance: none !important; + background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1' /%3E%3Cpath id='path1-0' style='fill:%23ffffff;fill-opacity:1;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none' d='M 12.896484 2 C 12.704798 1.9999999 12.512135 2.0738019 12.365234 2.2207031 L 10.365234 4.2207031 L 9.2480469 3.1152344 C 8.7873733 2.6593698 8.0053172 2.9847153 8.0039062 3.6328125 L 8.0039062 7.2480469 C 8.0042352 7.6624405 8.3395147 7.998594 8.7539062 8 L 12.441406 8 C 13.08196 8.00194 13.402454 7.2260742 12.947266 6.7753906 L 11.787109 5.6269531 L 13.779297 3.6347656 C 14.073073 3.3409362 14.073099 2.8680205 13.779297 2.5742188 L 13.425781 2.2207031 C 13.27888 2.0738023 13.08817 2.0000001 12.896484 2 z M 3.5625 8 C 2.9219466 7.9981 2.6014521 8.7739258 3.0566406 9.2246094 L 4.2167969 10.373047 L 2.2246094 12.365234 C 1.9308337 12.659064 1.9308077 13.13198 2.2246094 13.425781 L 2.578125 13.779297 C 2.8719267 14.073099 3.3448702 14.0731 3.6386719 13.779297 L 5.6386719 11.779297 L 6.7558594 12.884766 C 7.2165329 13.34063 7.998589 13.015285 8 12.367188 L 8 8.7519531 C 7.999671 8.3375595 7.6643916 8.001406 7.25 8 L 3.5625 8 z ' /%3E%3C/svg%3E") !important; + background-repeat: no-repeat !important; + background-position: center !important; + padding: 12px !important; + margin: 1px !important; + border: 1px solid transparent !important; +} +.titlebar-close image { + appearance: none !important; + background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1' /%3E%3Cpath id='rect1' style='opacity:1;fill:%23ffffff;fill-opacity:1;stroke:none;stroke-width:1;stroke-opacity:0.498039;-inkscape-stroke:none' d='M 0.78168445 6.4081552 C 0.64612209 6.2725928 0.45772309 6.1885654 0.2499733 6.1885654 L -0.2499733 6.1885654 C -0.66547288 6.1885654 -0.99989318 6.5229857 -0.99989318 6.9384853 L -0.99989318 10.313815 L -4.3752232 10.313815 C -4.7907228 10.313815 -5.1251431 10.648236 -5.1251431 11.063735 L -5.1251431 11.563682 C -5.1251431 11.979181 -4.7907228 12.313602 -4.3752232 12.313602 L -0.99989318 12.313602 L -0.99989318 15.688932 C -0.99989318 16.104431 -0.66547288 16.438852 -0.2499733 16.438852 L 0.2499733 16.438852 C 0.66547288 16.438852 0.99989318 16.104431 0.99989318 15.688932 L 0.99989318 12.313602 L 4.3752232 12.313602 C 4.7907228 12.313602 5.1251431 11.979181 5.1251431 11.563682 L 5.1251431 11.063735 C 5.1251431 10.648236 4.7907228 10.313815 4.3752232 10.313815 L 0.99989318 10.313815 L 0.99989318 6.9384853 C 0.99989318 6.7307355 0.91724681 6.5437176 0.78168445 6.4081552 z ' transform='rotate(-45)' /%3E%3C/svg%3E") !important; + background-repeat: no-repeat !important; + background-position: center !important; + padding: 12px !important; + margin: 1px !important; + border: 1px solid transparent !important; +} +.titlebar-close:hover image, +.titlebar-min:hover image, +.titlebar-max:hover image, +.titlebar-restore:hover image { + background-color: transparent !important; +} +.titlebar-close:active image, +.titlebar-min:active image, +.titlebar-max:active image, +.titlebar-restore:active image { + background-color: rgba(0,0,0,0.1) !important; + border-radius: 3px !important; + border: 1px solid rgba(0,0,0,0.5) !important; + box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.15), 0 1px 0 0 rgba(255,255,255,0.1) !important; +} +#nav-bar #back-button > .toolbarbutton-icon { list-style-image: url("data:image/svg+xml,%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' id='svg6' version='1.1' width='16' height='16'%3E%3Cmetadata id='metadata12'%3E%3Crdf:RDF%3E%3Ccc:Work rdf:about=''%3E%3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E%3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage' /%3E%3Cdc:title%3E%3C/dc:title%3E%3C/cc:Work%3E%3C/rdf:RDF%3E%3C/metadata%3E%3Cdefs id='defs10' /%3E%3Cpath id='path873-5' style='opacity:1;fill:%23ffffff;stroke:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stop-color:%23000000' d='m 7.2260666,2.5 c 0.4312184,0 0.7783725,0.3346464 0.7783725,0.7503279 V 6 H 13.221628 C 13.652847,6 14,6.3346463 14,6.7503279 V 8.249672 C 14,8.6653541 13.652847,9.0004099 13.221628,9 H 8.0044391 v 2.749674 C 8.0044391,12.165354 7.657285,12.5 7.2260666,12.5 6.9936571,12.5 6.7861919,12.40264 6.6438073,12.247938 L 2.212837,8.0241533 C 2.081227,7.8897736 2,7.7091601 2,7.5097679 2,7.3103755 2.081225,7.129763 2.212837,6.995383 L 6.6438073,2.7520634 C 6.7861919,2.5973529 6.9936571,2.5 7.2260666,2.5 Z' /%3E%3C/svg%3E") !important; } -#back-button[checked] > .toolbarbutton-icon { - background-color: rgba(255,255,255,0.2) !important; +#nav-bar #back-button[checked] > .toolbarbutton-icon { + background-color: var(--accentcolor-percentage) !important; box-shadow: none !important; } -#forward-button { +#nav-bar #forward-button { list-style-image: url("data:image/svg+xml,%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' id='svg6' version='1.1' width='16' height='16'%3E%3Cmetadata id='metadata12'%3E%3Crdf:RDF%3E%3Ccc:Work rdf:about=''%3E%3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E%3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage' /%3E%3Cdc:title%3E%3C/dc:title%3E%3C/cc:Work%3E%3C/rdf:RDF%3E%3C/metadata%3E%3Cdefs id='defs10' /%3E%3Cpath id='path873-5' style='opacity:1;fill:%23ffffff;stroke:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stop-color:%23000000' d='M 8.7739334,2.5 C 8.342715,2.5 7.9955609,2.8346464 7.9955609,3.2503279 L 7.9955609,6 H 2.778372 C 2.347153,6 2,6.3346463 2,6.7503279 L 2,8.249672 C 2,8.6653541 2.3471532,9.0004099 2.778372,9 h 5.2171889 l 0,2.749674 c 0,0.41568 0.3471541,0.750326 0.7783725,0.750326 0.2324095,0 0.4398747,-0.09736 0.5822593,-0.252062 L 13.787163,8.0241533 C 13.918773,7.8897736 14,7.7091601 14,7.5097679 14,7.3103755 13.918775,7.129763 13.787163,6.995383 L 9.3561927,2.7520634 C 9.2138081,2.5973529 9.0063429,2.5 8.7739334,2.5 Z' /%3E%3C/svg%3E") !important; } #reload-button { @@ -1407,6 +1722,10 @@ toolbar .toolbarbutton-1[data-extensionid]:-moz-any([open], [checked], :active) #tabs-newtab-button .toolbarbutton-icon { list-style-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg color='%235b5b5b' transform='translate%28-293 -117%29'%3E%3Cpath d='M300 120v4h-4v2h4v4h2v-4h4v-2h-4v-4z' fill='rgb(255, 255, 255)' overflow='visible' style='marker:none'/%3E%3C/g%3E%3C/svg%3E") !important; } +#new-tab-button:-moz-any([open], [checked], :active) .toolbarbutton-icon, +#tabs-newtab-button:-moz-any([open], [checked], :active) .toolbarbutton-icon { + background-color: var(--accentcolor-percentage) !important; +} #TabsToolbar .tab-close-button { list-style-image: url("data:image/svg+xml,%3Csvg height='16' width='16' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1' /%3E%3Cpath id='rect1' style='opacity:1;fill:%23ffffff;fill-opacity:1;stroke:none;stroke-width:1;stroke-opacity:0.498039;-inkscape-stroke:none' d='M 0.78168445 6.4081552 C 0.64612209 6.2725928 0.45772309 6.1885654 0.2499733 6.1885654 L -0.2499733 6.1885654 C -0.66547288 6.1885654 -0.99989318 6.5229857 -0.99989318 6.9384853 L -0.99989318 10.313815 L -4.3752232 10.313815 C -4.7907228 10.313815 -5.1251431 10.648236 -5.1251431 11.063735 L -5.1251431 11.563682 C -5.1251431 11.979181 -4.7907228 12.313602 -4.3752232 12.313602 L -0.99989318 12.313602 L -0.99989318 15.688932 C -0.99989318 16.104431 -0.66547288 16.438852 -0.2499733 16.438852 L 0.2499733 16.438852 C 0.66547288 16.438852 0.99989318 16.104431 0.99989318 15.688932 L 0.99989318 12.313602 L 4.3752232 12.313602 C 4.7907228 12.313602 5.1251431 11.979181 5.1251431 11.563682 L 5.1251431 11.063735 C 5.1251431 10.648236 4.7907228 10.313815 4.3752232 10.313815 L 0.99989318 10.313815 L 0.99989318 6.9384853 C 0.99989318 6.7307355 0.91724681 6.5437176 0.78168445 6.4081552 z ' transform='rotate(-45)' /%3E%3C/svg%3E") !important; } @@ -1414,48 +1733,11 @@ toolbar .toolbarbutton-1[data-extensionid]:-moz-any([open], [checked], :active) opacity: 1 !important; background: rgba(255,255,255, 0.2) !important; } -#tabbrowser-tabs[orient="vertical"][expanded] .tab-close-button { - list-style-image: url("data:image/svg+xml,%3Csvg height='16' width='16' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1' /%3E%3Cpath id='rect1' style='opacity:1;fill:%23ffffff;fill-opacity:1;stroke:none;stroke-width:1;stroke-opacity:0.498039;-inkscape-stroke:none' d='M 0.78168445 6.4081552 C 0.64612209 6.2725928 0.45772309 6.1885654 0.2499733 6.1885654 L -0.2499733 6.1885654 C -0.66547288 6.1885654 -0.99989318 6.5229857 -0.99989318 6.9384853 L -0.99989318 10.313815 L -4.3752232 10.313815 C -4.7907228 10.313815 -5.1251431 10.648236 -5.1251431 11.063735 L -5.1251431 11.563682 C -5.1251431 11.979181 -4.7907228 12.313602 -4.3752232 12.313602 L -0.99989318 12.313602 L -0.99989318 15.688932 C -0.99989318 16.104431 -0.66547288 16.438852 -0.2499733 16.438852 L 0.2499733 16.438852 C 0.66547288 16.438852 0.99989318 16.104431 0.99989318 15.688932 L 0.99989318 12.313602 L 4.3752232 12.313602 C 4.7907228 12.313602 5.1251431 11.979181 5.1251431 11.563682 L 5.1251431 11.063735 C 5.1251431 10.648236 4.7907228 10.313815 4.3752232 10.313815 L 0.99989318 10.313815 L 0.99989318 6.9384853 C 0.99989318 6.7307355 0.91724681 6.5437176 0.78168445 6.4081552 z ' transform='rotate(-45)' /%3E%3C/svg%3E") !important; -} .all-tabs-close-button .toolbarbutton-icon { list-style-image: url("data:image/svg+xml,%3Csvg height='16' width='16' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1' /%3E%3Cpath id='rect1' style='opacity:1;fill:%23ffffff;fill-opacity:1;stroke:none;stroke-width:1;stroke-opacity:0.498039;-inkscape-stroke:none' d='M 0.78168445 6.4081552 C 0.64612209 6.2725928 0.45772309 6.1885654 0.2499733 6.1885654 L -0.2499733 6.1885654 C -0.66547288 6.1885654 -0.99989318 6.5229857 -0.99989318 6.9384853 L -0.99989318 10.313815 L -4.3752232 10.313815 C -4.7907228 10.313815 -5.1251431 10.648236 -5.1251431 11.063735 L -5.1251431 11.563682 C -5.1251431 11.979181 -4.7907228 12.313602 -4.3752232 12.313602 L -0.99989318 12.313602 L -0.99989318 15.688932 C -0.99989318 16.104431 -0.66547288 16.438852 -0.2499733 16.438852 L 0.2499733 16.438852 C 0.66547288 16.438852 0.99989318 16.104431 0.99989318 15.688932 L 0.99989318 12.313602 L 4.3752232 12.313602 C 4.7907228 12.313602 5.1251431 11.979181 5.1251431 11.563682 L 5.1251431 11.063735 C 5.1251431 10.648236 4.7907228 10.313815 4.3752232 10.313815 L 0.99989318 10.313815 L 0.99989318 6.9384853 C 0.99989318 6.7307355 0.91724681 6.5437176 0.78168445 6.4081552 z ' transform='rotate(-45)' /%3E%3C/svg%3E") !important; } -#customization-lwtheme-button, -#customization-toolbar-visibility-button, -#customization-uidensity-button, -#customization-reset-button, -#customization-done-button { - appearance: none !important; - padding: 5px !important; - background-color: rgba(68,68,68,1) !important; - border: 1px solid rgba(0,0,0,0.50) !important; - border-radius: 3px !important; - box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.10) !important; - color: #fff !important; -} -#customization-lwtheme-button[open="true"], -#customization-toolbar-visibility-button[open="true"], -#customization-uidensity-button[open="true"], -#customization-reset-button:active, -#customization-done-button:active { - appearance: none !important; - padding: 5px !important; - background-color: rgba(68,68,68,1) !important; - border: 1px solid rgba(0,0,0,0.50) !important; - border-radius: 3px !important; - box-shadow: inset 0 0 3px 0 rgba(0,0,0,0.2) !important; - color: #fff !important; -} -.button-menu-dropmarker { - margin-left: 3px !important; -} -.checkbox-check { - height: 16px !important; - width: 16px !important; - background-color: rgba(68,68,68,1) !important; - border: 1px solid rgba(56,56,56,1) !important; - border-radius: 3px !important; - box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.10) !important; +#tabbrowser-tabs[orient="vertical"][expanded] .tab-close-button { + list-style-image: url("data:image/svg+xml,%3Csvg height='16' width='16' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1' /%3E%3Cpath id='rect1' style='opacity:1;fill:%23ffffff;fill-opacity:1;stroke:none;stroke-width:1;stroke-opacity:0.498039;-inkscape-stroke:none' d='M 0.78168445 6.4081552 C 0.64612209 6.2725928 0.45772309 6.1885654 0.2499733 6.1885654 L -0.2499733 6.1885654 C -0.66547288 6.1885654 -0.99989318 6.5229857 -0.99989318 6.9384853 L -0.99989318 10.313815 L -4.3752232 10.313815 C -4.7907228 10.313815 -5.1251431 10.648236 -5.1251431 11.063735 L -5.1251431 11.563682 C -5.1251431 11.979181 -4.7907228 12.313602 -4.3752232 12.313602 L -0.99989318 12.313602 L -0.99989318 15.688932 C -0.99989318 16.104431 -0.66547288 16.438852 -0.2499733 16.438852 L 0.2499733 16.438852 C 0.66547288 16.438852 0.99989318 16.104431 0.99989318 15.688932 L 0.99989318 12.313602 L 4.3752232 12.313602 C 4.7907228 12.313602 5.1251431 11.979181 5.1251431 11.563682 L 5.1251431 11.063735 C 5.1251431 10.648236 4.7907228 10.313815 4.3752232 10.313815 L 0.99989318 10.313815 L 0.99989318 6.9384853 C 0.99989318 6.7307355 0.91724681 6.5437176 0.78168445 6.4081552 z ' transform='rotate(-45)' /%3E%3C/svg%3E") !important; } /*** TEXT COLOR DARK MODE for Tweaks ***/ @@ -1463,11 +1745,7 @@ toolbar .toolbarbutton-1[data-extensionid]:-moz-any([open], [checked], :active) color: #fff !important; text-shadow: none !important; } -.subviewbutton > .toolbarbutton-text { - color: #fff !important; - text-shadow: none !important; -} -.menubar-text { +#toolbar-menubar > #menubar-items > #main-menubar > menu > label { color: #fff !important; text-shadow: none !important; } @@ -1483,49 +1761,37 @@ toolbar .toolbarbutton-1[data-extensionid]:-moz-any([open], [checked], :active) private browsing ****************/ -/*** TILED/MAXIMIZED/FULLSCREEN WINDOW FIXES ***/ -#main-window[privatebrowsingmode="temporary"][gtktiledwindow="true"] #nav-bar, -#main-window[privatebrowsingmode="temporary"][gtktiledwindow="true"] #nav-bar:-moz-window-inactive{ - box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05) !important; -} -#main-window[privatebrowsingmode="temporary"][sizemode="maximized"] #nav-bar, -#main-window[privatebrowsingmode="temporary"][sizemode="maximized"] #nav-bar:-moz-window-inactive, -#main-window[privatebrowsingmode="temporary"][inFullscreen="true"] #nav-bar { - border-radius: 0 0 0 0 !important; - box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05) !important; +/* system accent color variables */ +:root[privatebrowsingmode="temporary"] { + --accentcolor-percentage: color-mix(in srgb, LinkText 70%, transparent 100%); } + +/*** TILED/MAXIMIZED/FULLSCREEN WINDOW FIXES ***/ #main-window[privatebrowsingmode="temporary"][inFullscreen="true"] #TabsToolbar { min-height: 36px !important; max-height: 36px !important; - border-top: 1px solid rgba(0,0,0,0.4) !important; - border-bottom: 1px solid rgba(0,0,0,0.4) !important; } /*** FOCUS FIX for PRIVATE MODE ***/ -#main-window[privatebrowsingmode="temporary"] #TabsToolbar[collapsed] ~ #nav-bar:-moz-window-inactive { - box-shadow: linear-gradient(to right, rgba(139,121,226,1), rgba(199,128,188,1)), 0px 0px 3px 0px rgba(0,0,0,0.3) !important; +#main-window[privatebrowsingmode="temporary"] #navigator-toolbox:-moz-window-inactive { + background: linear-gradient(to right, rgba(105,75,188,1) 0%, rgba(105,75,188,1) 20%, rgba(162,76,141,1) 100%) !important; + box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.4) !important; /* this makes the border bottom to avoid double borders in vertical tabs */ } #main-window[privatebrowsingmode="temporary"] #nav-bar:-moz-window-inactive { - background: linear-gradient(to right, rgba(139,121,226,1), rgba(199,128,188,1)) !important; -} -#main-window[privatebrowsingmode="temporary"] #urlbar:not([focused="true"]):-moz-window-inactive { - background: linear-gradient(to right, #A793FF, #D198E5) !important; -} -#main-window[privatebrowsingmode="temporary"] #searchbar:not([focused="true"]):-moz-window-inactive { - background: #D198E5 !important; + background: linear-gradient(to right, rgba(105,75,188,1) 0%, rgba(105,75,188,1) 20%, rgba(162,76,141,1) 100%) !important; + border-bottom: 1px solid rgba(0,0,0,0.4) !important; + box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 1px 1px 0 rgb(0,0,0,0.06) !important; } #main-window[privatebrowsingmode="temporary"] #TabsToolbar:-moz-window-inactive { - background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0) 6%), - linear-gradient(90deg, rgba(167,147,255,1), rgba(229,155,216,1) 100%) !important; + background: none !important; + box-shadow: none !important; } #main-window[privatebrowsingmode="temporary"] #PersonalToolbar:-moz-window-inactive { - background: linear-gradient(90deg, rgba(167,147,255,1), rgba(229,155,216,1) 100%) !important; + background: none !important; + box-shadow: none !important; } #main-window[privatebrowsingmode="temporary"] #toolbar-menubar[autohide="false"]:-moz-window-inactive { - background: linear-gradient(to right, rgba(139,121,226,1), rgba(199,128,188,1)) !important; -} -#main-window[privatebrowsingmode="temporary"] #sidebar-main:-moz-window-inactive { - background: linear-gradient(to right, rgba(167,147,255,1), rgba(177,148,249,1)) !important; + background: none !important; } /*** ELEMENTS IN PRIVATE MODE ***/ @@ -1535,96 +1801,68 @@ private browsing :root[privatebrowsingmode="temporary"] { --toolbarseparator-color: rgba(255,255,255,0.6) !important; } +#main-window[privatebrowsingmode="temporary"] #navigator-toolbox { + background: linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0.1) 100%), + linear-gradient(to right, rgba(105,75,188,1) 0%, rgba(105,75,188,1) 20%, rgba(162,76,141,1) 100%) !important; + box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.4) !important; /* this makes the border bottom to avoid double borders in vertical tabs */ +} #main-window[privatebrowsingmode="temporary"] #nav-bar { -moz-appearance: none !important; border-bottom: 1px solid rgba(0,0,0,0.4) !important; - background: linear-gradient(to right, rgba(94,75,197,1), rgba(162,76,141,1)) !important; - box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05) !important; + box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 1px 1px 0 rgba(0,0,0,0.06) !important; + background: linear-gradient(to right, rgba(105,75,188,1) 0%, rgba(105,75,188,1) 20%, rgba(162,76,141,1) 100%) !important; +} +#main-window[privatebrowsingmode="temporary"] .urlbarView-row:hover { + background-color: rgba(0,0,0,0.1) !important; } -#main-window[privatebrowsingmode="temporary"] #TabsToolbar[collapsed] ~ #nav-bar { - box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0px 0px 3px 0px rgba(0,0,0,0.3) !important; +#main-window[privatebrowsingmode="temporary"] .urlbarView-row[selected] { + background-color: SelectedItem !important; } -#main-window[privatebrowsingmode="temporary"] #searchbar:not([focused="true"]) { +#main-window[privatebrowsingmode="temporary"] #urlbar[focused]:not([open]) { border: 1px solid rgba(0,0,0,0.4) !important; - border-radius: 3px !important; + border-radius: 3px !important; + background: linear-gradient(to right, #8266C4, #A267A9) !important; + box-shadow: inset 0px 0.1px 0.5px 0.2px rgba(0,0,0,0.18), 0 0 0 2px var(--accentcolor-percentage) !important; + filter: none !important; +} +#main-window[privatebrowsingmode="temporary"] #searchbar:focus-within { + border: 1px solid rgba(0,0,0,0.4) !important; + border-radius: 3px !important; background: #A267A9 !important; - box-shadow: inset 0 0 1px 0 rgba(0,0,0,0.3), 0 1px 0 0 rgba(255,255,255,0.05) !important; + box-shadow: inset 0px 0.1px 0.5px 0.2px rgba(0,0,0,0.18), 0 0 0 2px var(--accentcolor-percentage) !important; + filter: none !important; } -#main-window[privatebrowsingmode="temporary"] #urlbar:not([focused="true"]) { +#main-window[privatebrowsingmode="temporary"] #urlbar[focused][open], +#main-window[privatebrowsingmode="temporary"] #urlbar[open]:not([focused]) { border: 1px solid rgba(0,0,0,0.4) !important; - border-radius: 3px !important; + border-radius: 6px !important; background: linear-gradient(to right, #8266C4, #A267A9) !important; - box-shadow: inset 0 0 1px 0 rgba(0,0,0,0.3), 0 1px 0 0 rgba(255,255,255,0.05) !important; + box-shadow: 0 2px 2px 1px rgba(0,0,0,0.1) !important; +} +#main-window[privatebrowsingmode="temporary"] #urlbar[focused] > #urlbar-background { + box-shadow: none !important; } -#main-window[privatebrowsingmode="temporary"] #urlbar[focused="true"] { +#main-window[privatebrowsingmode="temporary"] #urlbar:not([focused]){ border: 1px solid rgba(0,0,0,0.4) !important; - border-radius: 4px !important; + border-radius: 3px !important; background: linear-gradient(to right, #8266C4, #A267A9) !important; + box-shadow: inset 0px 0.1px 0.5px 0.2px rgba(0,0,0,0.18), 0 1px 0 0 rgba(255,255,255,0.05) !important; +} +#main-window[privatebrowsingmode="temporary"] #searchbar:not(:focus-within) { + border: 1px solid rgba(0,0,0,0.4) !important; + border-radius: 3px !important; + background: #A267A9 !important; + box-shadow: inset 0px 0.1px 0.5px 0.2px rgba(0,0,0,0.18), 0 1px 0 0 rgba(255,255,255,0.05) !important; } -#main-window[privatebrowsingmode="temporary"] .urlbarView-url, -#main-window[privatebrowsingmode="temporary"] .urlbarView-title:not(:empty) ~ .urlbarView-action { - color: rgba(255,255,255,0.4) !important; -} -#main-window[privatebrowsingmode="temporary"] .urlbarView-row:not([type="tip"]):not([type="dynamic"])[selected] > .urlbarView-row-inner, -#main-window[privatebrowsingmode="temporary"] .search-one-offs button[selected], -#main-window[privatebrowsingmode="temporary"] .autocomplete-richlistitem[selected], -#main-window[privatebrowsingmode="temporary"] #urlbar-search-mode-indicator { - background: rgba(0,0,0,0.2) !important; -} -#main-window[privatebrowsingmode="temporary"] #urlbar-input-container image:not(#userContext-indicator), -#main-window[privatebrowsingmode="temporary"] .urlbarView image, -#main-window[privatebrowsingmode="temporary"] #customization-palette-container image, -#main-window[privatebrowsingmode="temporary"] #nav-bar-customization-target > toolbarbutton:not(hbox) > image, -#main-window[privatebrowsingmode="temporary"] #nav-bar-customization-target > toolbarpaletteitem image, -#main-window[privatebrowsingmode="temporary"] #nav-bar-overflow-button image, -#main-window[privatebrowsingmode="temporary"] #nav-bar-customization-target stack, -#main-window[privatebrowsingmode="temporary"] #PopupSearchAutoComplete image, -#main-window[privatebrowsingmode="temporary"] #searchbar image, -#main-window[privatebrowsingmode="temporary"] .tab-content > image:not(.tab-icon-image), -#main-window[privatebrowsingmode="temporary"] .toolbarbutton-icon[type="menu"], -#main-window[privatebrowsingmode="temporary"] #bookmarks-toolbar-placeholder image, -#main-window[privatebrowsingmode="temporary"] #PlacesChevron .toolbarbutton-icon, -#main-window[privatebrowsingmode="temporary"] #import-button image, -#main-window[privatebrowsingmode="temporary"] #TabsToolbar-customization-target > toolbarbutton:not(hbox) > image, -#main-window[privatebrowsingmode="temporary"] #TabsToolbar-customization-target > toolbarpaletteitem image, -#main-window[privatebrowsingmode="temporary"] #nav-bar-customization-target > #zoom-controls > toolbarbutton > image, -#main-window[privatebrowsingmode="temporary"] #TabsToolbar-customization-target > #zoom-controls > toolbarbutton > image, -#main-window[privatebrowsingmode="temporary"] #urlbar-search-mode-indicator-close { - fill: #fff !important; -} -:root[privatebrowsingmode="temporary"] { - --urlbar-separator-color: rgba(255,255,255,0.3) !important; +#main-window[privatebrowsingmode="temporary"] #PopupSearchAutoComplete .autocomplete-richlistitem[selected], +#main-window[privatebrowsingmode="temporary"] .searchbar-engine-one-off-item[selected] { + background: var(--accentcolor-percentage) !important; } #main-window[privatebrowsingmode="temporary"] .urlbarView-body-inner, #main-window[privatebrowsingmode="temporary"] .search-one-offs:not([is_searchbar="true"]), #main-window[privatebrowsingmode="temporary"] #customization-footer { border-top: 1px solid rgba(255,255,255,0.2) !important; } -#main-window[privatebrowsingmode="temporary"] #urlbar-input, -#main-window[privatebrowsingmode="temporary"] .urlbarView-title, -#main-window[privatebrowsingmode="temporary"] #urlbar-one-offs-header-label, -#main-window[privatebrowsingmode="temporary"] .urlbarView-title-separator, -#main-window[privatebrowsingmode="temporary"] #customization-palette-container label, -#main-window[privatebrowsingmode="temporary"] #customization-palette-container, -#main-window[privatebrowsingmode="temporary"] #customization-footer checkbox, -#main-window[privatebrowsingmode="temporary"] .searchbar-textbox, -#main-window[privatebrowsingmode="temporary"] #PopupSearchAutoComplete label, -#main-window[privatebrowsingmode="temporary"] #PopupSearchAutoComplete button, -#main-window[privatebrowsingmode="temporary"] #PopupSearchAutoComplete richlistitem, -#main-window[privatebrowsingmode="temporary"] #identity-icon-label, -#main-window[privatebrowsingmode="temporary"] #import-button label, -#main-window[privatebrowsingmode="temporary"] #nav-bar-customization-target > #zoom-controls > toolbarbutton > label, -#main-window[privatebrowsingmode="temporary"] #TabsToolbar-customization-target > #zoom-controls > toolbarbutton > label, -#main-window[privatebrowsingmode="temporary"] #TabsToolbar-customization-target > #wrapper-zoom-controls > #zoom-controls > toolbarbutton > label, -#main-window[privatebrowsingmode="temporary"] #nav-bar-customization-target > #wrapper-zoom-controls > #zoom-controls > toolbarbutton > label, -#main-window[privatebrowsingmode="temporary"] #urlbar-zoom-button label, -#main-window[privatebrowsingmode="temporary"] #urlbar-search-mode-indicator-title, -#main-window[privatebrowsingmode="temporary"] #wrapper-personal-bookmarks label { - color: #fff !important; -} -#main-window[privatebrowsingmode="temporary"] toolbar .toolbaritem-combined-buttons:not(:hover) > separator { - background-image: linear-gradient( #fff 0, #fff 100%) !important; -} #main-window[privatebrowsingmode="temporary"] #PopupSearchAutoComplete { --panel-color: #fff !important; --panel-background: #A267A9 !important; @@ -1635,129 +1873,145 @@ private browsing } #main-window[privatebrowsingmode="temporary"] #TabsToolbar { appearance: none !important; - background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0) 6%), - linear-gradient(90deg, rgba(115,98,200,1), rgba(171,100,157,1) 100%) !important; - border-bottom: 1px solid rgba(0,0,0,0.2) !important; + background: none !important; } #main-window[privatebrowsingmode="temporary"] .tab-background:is([selected], [multiselected]) { background: rgba(255,255,255,0.25) !important; border: 1px solid rgba(0,0,0,0.4) !important; } -#main-window[privatebrowsingmode="temporary"] #tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[selected="true"] { +#main-window[privatebrowsingmode="temporary"] #tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[selected] { background: rgba(141,32,174,1) !important; border: none !important; } -#main-window[privatebrowsingmode="temporary"] .tab-content > image:not(.tab-icon-image) { - fill: rgba(255,255,255,1) !important; + +/* tab separators in private mode */ +#main-window[privatebrowsingmode="temporary"] #tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab { + border-inline-start: 1px solid transparent !important; + border-image: 0 1 linear-gradient(transparent 20%, color-mix(in srgb, rgba(0,0,0,0.5), transparent) 20%, color-mix(in srgb, rgba(0,0,0,0.5), transparent) 90%, transparent 90%) !important; +} +#main-window[privatebrowsingmode="temporary"] #tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab:hover, +#main-window[privatebrowsingmode="temporary"] #tabbrowser-tabs[orient="horizontal"]:not([movingtab]) .tabbrowser-tab:hover + .tabbrowser-tab:not([first-visible-unpinned-tab]), +#main-window[privatebrowsingmode="temporary"] #tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab:first-child, +#main-window[privatebrowsingmode="temporary"] #tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab[selected], +#main-window[privatebrowsingmode="temporary"] #tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab[multiselected], +#main-window[privatebrowsingmode="temporary"] #tabbrowser-tabs[orient="horizontal"] #tabbrowser-arrowscrollbox[overflowing] > .tabbrowser-tab[first-visible-unpinned-tab], +#main-window[privatebrowsingmode="temporary"] #tabbrowser-tabs[orient="horizontal"]:not([movingtab]) .tabbrowser-tab[multiselected] + .tabbrowser-tab, +#main-window[privatebrowsingmode="temporary"] #tabbrowser-tabs[orient="horizontal"]:not([movingtab]) .tabbrowser-tab[selected] + .tabbrowser-tab, +#main-window[privatebrowsingmode="temporary"] #tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab:is([selected],[multiselected]) + .tabbrowser-tab[hidden] + .tabbrowser-tab { + border-inline-start: 1px solid transparent !important; + border-image: none !important; } -#main-window[privatebrowsingmode="temporary"] .tab-icon-pending, -#main-window[privatebrowsingmode="temporary"] .tab-throbber, -#main-window[privatebrowsingmode="temporary"] .tab-loading-burst { - --tab-loading-fill: #fff !important; - color: #fff !important; + +#main-window[privatebrowsingmode="temporary"] .tabbrowser-tab:not([selected]):hover .tab-background { + background-color: rgba(0,0,0,0.1) !important; } #main-window[privatebrowsingmode="temporary"] #PersonalToolbar { - background: linear-gradient(90deg, rgba(115,98,200,1), rgba(171,100,157,1) 100%) !important; - border-top: none !important; - border-bottom: 1px solid rgba(0,0,0,0.2) !important; + background: none !important; } #main-window[privatebrowsingmode="temporary"] #toolbar-menubar[autohide="false"] { - background: linear-gradient(to right, rgba(94,75,197,1), rgba(162,76,141,1)) !important; - border-top: none !important; - border-bottom: 1px solid rgba(0,0,0,0.4) !important; + background: none !important; } #main-window[privatebrowsingmode="temporary"] #PlacesToolbarItems .bookmark-item:not(menuitem):not(menu):-moz-any([open], [checked], :hover, :active) { background-color: rgba(255,255,255,0.3) !important; } -#main-window[privatebrowsingmode="temporary"] #customization-container { - background: #2d0b44 !important; -} -#main-window[privatebrowsingmode="temporary"] .button-menu-dropmarker { - margin-left: 3px !important; - filter: invert(1) brightness(500%) !important; -} -@media (prefers-color-scheme: dark) { -#main-window[privatebrowsingmode="temporary"] .button-menu-dropmarker { - margin-left: 3px !important; - filter: none !important; -}} -#main-window[privatebrowsingmode="temporary"] #alltabs-button:not(:-moz-lwtheme-brighttext), -#main-window[privatebrowsingmode="temporary"] #profiler-button > .toolbarbutton-menu-dropmarker:not(:-moz-lwtheme-brighttext) { - filter: invert(1) brightness(500%) !important; -} -#main-window[privatebrowsingmode="temporary"] #wrapper-alltabs-button:not(:-moz-lwtheme-brighttext) { - filter: none !important; -} -#main-window[privatebrowsingmode="temporary"] .tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture], [crashed]):not(:is([pinned])) { - fill: #fff !important; -} -#main-window[privatebrowsingmode="temporary"] .tab-secondary-label { - color: rgba(255,255,255,1) !important; -} -@media (prefers-color-scheme: dark) { -#main-window[privatebrowsingmode="temporary"] #alltabs-button:not(:-moz-lwtheme-darktext), -#main-window[privatebrowsingmode="temporary"] #wrapper-alltabs-button:not(:-moz-lwtheme-darktext), -#main-window[privatebrowsingmode="temporary"] #profiler-button > .toolbarbutton-menu-dropmarker:not(:-moz-lwtheme-brighttext) { - filter: none !important; -}} #main-window[privatebrowsingmode="temporary"] #PanelUI-menu-button:hover:not([open]):not([checked]):not(:active) > .toolbarbutton-badge-stack, #main-window[privatebrowsingmode="temporary"] #fxa-toolbar-menu-button:hover:not([open]):not([checked]):not(:active) > .toolbarbutton-badge-stack { background: none !important; } -#main-window[privatebrowsingmode="temporary"] toolbar:not(#PersonalToolbar):not(#TabsToolbar) .toolbarbutton-1:not([disabled="true"]):not([data-extensionid]):-moz-any([open], [checked], :active) > .toolbarbutton-icon, -#main-window[privatebrowsingmode="temporary"] toolbar:not(#PersonalToolbar):not(#TabsToolbar) .toolbarbutton-1:not(#PanelUI-menu-button):not([disabled="true"]):not([data-extensionid]):-moz-any([open], [checked], :active) > .toolbarbutton-badge-stack { - background-color: rgba(255,255,255,0.2) !important; -} -#main-window[privatebrowsingmode="temporary"] toolbar .toolbarbutton-1:not([disabled="true"]):not([data-extensionid]):-moz-any([open], [checked], :hover, :active) > .toolbarbutton-badge-stack { - background-color: rgba(255,255,255,0.2) !important; +#main-window[privatebrowsingmode="temporary"] toolbar:not(#PersonalToolbar):not(#TabsToolbar) .toolbarbutton-1:not([disabled="true"], [data-extensionid], #nav-bar-overflow-button):is([open], [checked], :active) > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack) { + background: var(--accentcolor-percentage) !important; + clip-path: circle(50%) !important; } -#main-window[privatebrowsingmode="temporary"] #TabsToolbar .toolbarbutton-1:not([disabled="true"]):-moz-any([open], [checked], :active) > .toolbarbutton-icon, -#main-window[privatebrowsingmode="temporary"] #TabsToolbar .toolbarbutton-1:not([disabled="true"]):-moz-any([open], [checked], :hover, :active) > .toolbarbutton-badge-stack { - background: rgba(255,255,255, 0.2) !important; +#main-window[privatebrowsingmode="temporary"] #TabsToolbar .toolbarbutton-1:not([disabled="true"], #alltabs-button, #new-tab-button, #tabs-newtab-button, #firefox-view-button):is([open], [checked], :active) > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack) { + background: var(--accentcolor-percentage) !important; clip-path: none !important; } -#main-window[privatebrowsingmode="temporary"] #PersonalToolbar .toolbarbutton-1:not([disabled="true"]):-moz-any([open], [checked], :hover, :active), -#main-window[privatebrowsingmode="temporary"] #PersonalToolbar .toolbarbutton-1:not([disabled="true"]):-moz-any([open], [checked], :hover, :active) > .toolbarbutton-badge-stack { - background: rgba(255,255,255, 0.2) !important; +#main-window[privatebrowsingmode="temporary"] #PersonalToolbar .toolbarbutton-1:not([disabled="true"], #PlacesChevron):is([open], [checked], :active), +#main-window[privatebrowsingmode="temporary"] #PersonalToolbar .toolbarbutton-1:not([disabled="true"]):is([open], [checked], :active) > .toolbarbutton-badge-stack { + background: var(--accentcolor-percentage) !important; clip-path: none !important; } #main-window[privatebrowsingmode="temporary"] #sidebar-main { - background: linear-gradient(to right, rgba(115,98,200,1), rgba(126,98,192,1)) !important; + background: rgba(105,75,188,1) !important; } :root[privatebrowsingmode="temporary"] { - --toolbarbutton-hover-background: #503da8 !important; - --toolbarbutton-active-background: #503da8 !important; + --toolbarbutton-hover-background: rgba(255,255,255,0.3) !important; + --toolbarbutton-active-background: rgba(255,255,255,0.3) !important; +} +#main-window[privatebrowsingmode="temporary"] #PlacesToolbarItems .bookmark-item:not(menuitem):not(menu):-moz-any([open], [checked], :hover, :active) { + background: rgba(0,0,0,0.1) !important;; +} +#main-window[privatebrowsingmode="temporary"] .notificationbox-stack { + background: transparent !important; } -/*** MAKE WINDOW CONTROLS WHITE for PRIVATE MODE ***/ - - -/*** PROTECTIONS ICON for PRIVATE MODE ***/ -#main-window[privatebrowsingmode="temporary"] #tracking-protection-icon-box:not([hasException])[active] > #tracking-protection-icon-animatable-box > #tracking-protection-icon-animatable-image { - filter: invert(100%) brightness(500%) opacity(60%) !important; +/* selected text and icons url bar */ +#main-window[privatebrowsingmode="temporary"] ::selection { + color: #fff !important; + background-color: var(--accentcolor-percentage) !important; } -/*** TEXT COLOR for PRIVATE MODE ***/ -#main-window[privatebrowsingmode="temporary"] scrollbox > toolbarbutton > .toolbarbutton-text { - color: #fff !important; - text-shadow: none !important; +/*** MAKE WINDOW CONTROLS WHITE for PRIVATE MODE ***/ +#main-window[privatebrowsingmode="temporary"] .titlebar-min image { + appearance: none !important; + background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1' /%3E%3Cg color='%23bebebe' transform='translate(-733 -157)' id='g1' style='fill:%23ffffff'%3E%3Cpath d='M740 160v4h-3l3.156 4H737v2h8v-2h-3.156l3.156-4h-3v-4z' fill='%23ffffff' overflow='visible' style='marker:none;fill:%23ffffff' id='path1' /%3E%3C/g%3E%3C/svg%3E") !important; + background-repeat: no-repeat !important; + background-position: center !important; + padding: 12px !important; + margin: 1px !important; + border: 1px solid transparent !important; } -#main-window[privatebrowsingmode="temporary"] .menubar-text { - color: #fff !important; - text-shadow: none !important; +#main-window[privatebrowsingmode="temporary"] .titlebar-max image { + appearance: none !important; + background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1' /%3E%3Cpath id='path1-0' style='fill:%23ffffff;fill-opacity:1;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none' d='M 9.5625 2 C 8.9219462 1.9980564 8.6014518 2.7739255 9.0566406 3.2246094 L 10.216797 4.3730469 L 8.2246094 6.3652344 C 7.9308343 6.6590638 7.9308077 7.1319795 8.2246094 7.4257812 L 8.578125 7.7792969 C 8.8719266 8.0730986 9.3448695 8.0730994 9.6386719 7.7792969 L 11.638672 5.7792969 L 12.755859 6.8847656 C 13.216533 7.3406302 13.998589 7.0152847 14 6.3671875 L 14 2.7519531 C 13.999671 2.33756 13.664392 2.0014067 13.25 2 L 9.5625 2 z M 6.8964844 8 C 6.7047983 7.9999999 6.5121352 8.0738019 6.3652344 8.2207031 L 4.3652344 10.220703 L 3.2480469 9.1152344 C 2.7873733 8.6593698 2.0053172 8.9847153 2.0039062 9.6328125 L 2.0039062 13.248047 C 2.0042352 13.66244 2.3395147 13.998594 2.7539062 14 L 6.4414062 14 C 7.0819596 14.0019 7.4024542 13.226074 6.9472656 12.775391 L 5.7871094 11.626953 L 7.7792969 9.6347656 C 8.0730726 9.3409362 8.0730986 8.8680205 7.7792969 8.5742188 L 7.4257812 8.2207031 C 7.2788804 8.0738023 7.0881704 8.0000001 6.8964844 8 z ' /%3E%3C/svg%3E") !important; + background-repeat: no-repeat !important; + background-position: center !important; + padding: 12px !important; + margin: 1px !important; + border: 1px solid transparent !important; } -#main-window[privatebrowsingmode="temporary"] .tab-label[selected="true"] { - color: #FFF !important; +#main-window[privatebrowsingmode="temporary"] .titlebar-restore image { + appearance: none !important; + background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1' /%3E%3Cpath id='path1-0' style='fill:%23ffffff;fill-opacity:1;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none' d='M 12.896484 2 C 12.704798 1.9999999 12.512135 2.0738019 12.365234 2.2207031 L 10.365234 4.2207031 L 9.2480469 3.1152344 C 8.7873733 2.6593698 8.0053172 2.9847153 8.0039062 3.6328125 L 8.0039062 7.2480469 C 8.0042352 7.6624405 8.3395147 7.998594 8.7539062 8 L 12.441406 8 C 13.08196 8.00194 13.402454 7.2260742 12.947266 6.7753906 L 11.787109 5.6269531 L 13.779297 3.6347656 C 14.073073 3.3409362 14.073099 2.8680205 13.779297 2.5742188 L 13.425781 2.2207031 C 13.27888 2.0738023 13.08817 2.0000001 12.896484 2 z M 3.5625 8 C 2.9219466 7.9981 2.6014521 8.7739258 3.0566406 9.2246094 L 4.2167969 10.373047 L 2.2246094 12.365234 C 1.9308337 12.659064 1.9308077 13.13198 2.2246094 13.425781 L 2.578125 13.779297 C 2.8719267 14.073099 3.3448702 14.0731 3.6386719 13.779297 L 5.6386719 11.779297 L 6.7558594 12.884766 C 7.2165329 13.34063 7.998589 13.015285 8 12.367188 L 8 8.7519531 C 7.999671 8.3375595 7.6643916 8.001406 7.25 8 L 3.5625 8 z ' /%3E%3C/svg%3E") !important; + background-repeat: no-repeat !important; + background-position: center !important; + padding: 12px !important; + margin: 1px !important; + border: 1px solid transparent !important; } -#main-window[privatebrowsingmode="temporary"] .tab-label { - color: #fff !important; - text-shadow: none !important; +#main-window[privatebrowsingmode="temporary"] .titlebar-close image { + appearance: none !important; + background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1' /%3E%3Cpath id='rect1' style='opacity:1;fill:%23ffffff;fill-opacity:1;stroke:none;stroke-width:1;stroke-opacity:0.498039;-inkscape-stroke:none' d='M 0.78168445 6.4081552 C 0.64612209 6.2725928 0.45772309 6.1885654 0.2499733 6.1885654 L -0.2499733 6.1885654 C -0.66547288 6.1885654 -0.99989318 6.5229857 -0.99989318 6.9384853 L -0.99989318 10.313815 L -4.3752232 10.313815 C -4.7907228 10.313815 -5.1251431 10.648236 -5.1251431 11.063735 L -5.1251431 11.563682 C -5.1251431 11.979181 -4.7907228 12.313602 -4.3752232 12.313602 L -0.99989318 12.313602 L -0.99989318 15.688932 C -0.99989318 16.104431 -0.66547288 16.438852 -0.2499733 16.438852 L 0.2499733 16.438852 C 0.66547288 16.438852 0.99989318 16.104431 0.99989318 15.688932 L 0.99989318 12.313602 L 4.3752232 12.313602 C 4.7907228 12.313602 5.1251431 11.979181 5.1251431 11.563682 L 5.1251431 11.063735 C 5.1251431 10.648236 4.7907228 10.313815 4.3752232 10.313815 L 0.99989318 10.313815 L 0.99989318 6.9384853 C 0.99989318 6.7307355 0.91724681 6.5437176 0.78168445 6.4081552 z ' transform='rotate(-45)' /%3E%3C/svg%3E") !important; + background-repeat: no-repeat !important; + background-position: center !important; + padding: 12px !important; + margin: 1px !important; + border: 1px solid transparent !important; +} +#main-window[privatebrowsingmode="temporary"] .titlebar-close:hover image, +#main-window[privatebrowsingmode="temporary"] .titlebar-min:hover image, +#main-window[privatebrowsingmode="temporary"] .titlebar-max:hover image, +#main-window[privatebrowsingmode="temporary"] .titlebar-restore:hover image { + background-color: transparent !important; +} +#main-window[privatebrowsingmode="temporary"] .titlebar-close:active image, +#main-window[privatebrowsingmode="temporary"] .titlebar-min:active image, +#main-window[privatebrowsingmode="temporary"] .titlebar-max:active image, +#main-window[privatebrowsingmode="temporary"] .titlebar-restore:active image { + background-color: rgba(255,255,255,0.2) !important; + border-radius: 3px !important; + border: 1px solid rgba(0,0,0,0.4) !important; + box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.15), 0 1px 0 0 rgba(255,255,255,0.1) !important; } /*** BUTTONS for PRIVATE MODE ***/ #main-window[privatebrowsingmode="temporary"] #back-button > .toolbarbutton-icon { list-style-image: url("data:image/svg+xml,%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' id='svg6' version='1.1' width='16' height='16'%3E%3Cmetadata id='metadata12'%3E%3Crdf:RDF%3E%3Ccc:Work rdf:about=''%3E%3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E%3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage' /%3E%3Cdc:title%3E%3C/dc:title%3E%3C/cc:Work%3E%3C/rdf:RDF%3E%3C/metadata%3E%3Cdefs id='defs10' /%3E%3Cpath id='path873-5' style='opacity:1;fill:%23ffffff;stroke:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stop-color:%23000000' d='m 7.2260666,2.5 c 0.4312184,0 0.7783725,0.3346464 0.7783725,0.7503279 V 6 H 13.221628 C 13.652847,6 14,6.3346463 14,6.7503279 V 8.249672 C 14,8.6653541 13.652847,9.0004099 13.221628,9 H 8.0044391 v 2.749674 C 8.0044391,12.165354 7.657285,12.5 7.2260666,12.5 6.9936571,12.5 6.7861919,12.40264 6.6438073,12.247938 L 2.212837,8.0241533 C 2.081227,7.8897736 2,7.7091601 2,7.5097679 2,7.3103755 2.081225,7.129763 2.212837,6.995383 L 6.6438073,2.7520634 C 6.7861919,2.5973529 6.9936571,2.5 7.2260666,2.5 Z' /%3E%3C/svg%3E") !important; } +#main-window[privatebrowsingmode="temporary"] #back-button[checked] > .toolbarbutton-icon { + background-color: var(--accentcolor-percentage) !important; + box-shadow: none !important; +} #main-window[privatebrowsingmode="temporary"] #forward-button { list-style-image: url("data:image/svg+xml,%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' id='svg6' version='1.1' width='16' height='16'%3E%3Cmetadata id='metadata12'%3E%3Crdf:RDF%3E%3Ccc:Work rdf:about=''%3E%3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E%3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage' /%3E%3Cdc:title%3E%3C/dc:title%3E%3C/cc:Work%3E%3C/rdf:RDF%3E%3C/metadata%3E%3Cdefs id='defs10' /%3E%3Cpath id='path873-5' style='opacity:1;fill:%23ffffff;stroke:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stop-color:%23000000' d='M 8.7739334,2.5 C 8.342715,2.5 7.9955609,2.8346464 7.9955609,3.2503279 L 7.9955609,6 H 2.778372 C 2.347153,6 2,6.3346463 2,6.7503279 L 2,8.249672 C 2,8.6653541 2.3471532,9.0004099 2.778372,9 h 5.2171889 l 0,2.749674 c 0,0.41568 0.3471541,0.750326 0.7783725,0.750326 0.2324095,0 0.4398747,-0.09736 0.5822593,-0.252062 L 13.787163,8.0241533 C 13.918773,7.8897736 14,7.7091601 14,7.5097679 14,7.3103755 13.918775,7.129763 13.787163,6.995383 L 9.3561927,2.7520634 C 9.2138081,2.5973529 9.0063429,2.5 8.7739334,2.5 Z' /%3E%3C/svg%3E") !important; } @@ -1779,6 +2033,10 @@ private browsing #main-window[privatebrowsingmode="temporary"] #tabs-newtab-button .toolbarbutton-icon { list-style-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg color='%235b5b5b' transform='translate%28-293 -117%29'%3E%3Cpath d='M300 120v4h-4v2h4v4h2v-4h4v-2h-4v-4z' fill='rgb(255, 255, 255)' overflow='visible' style='marker:none'/%3E%3C/g%3E%3C/svg%3E") !important; } +#main-window[privatebrowsingmode="temporary"] #new-tab-button:-moz-any([open], [checked], :active) .toolbarbutton-icon, +#main-window[privatebrowsingmode="temporary"] #tabs-newtab-button:-moz-any([open], [checked], :active) .toolbarbutton-icon { + background-color: var(--accentcolor-percentage) !important; +} #main-window[privatebrowsingmode="temporary"] #TabsToolbar .tab-close-button { list-style-image: url("data:image/svg+xml,%3Csvg height='16' width='16' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1' /%3E%3Cpath id='rect1' style='opacity:1;fill:%23ffffff;fill-opacity:1;stroke:none;stroke-width:1;stroke-opacity:0.498039;-inkscape-stroke:none' d='M 0.78168445 6.4081552 C 0.64612209 6.2725928 0.45772309 6.1885654 0.2499733 6.1885654 L -0.2499733 6.1885654 C -0.66547288 6.1885654 -0.99989318 6.5229857 -0.99989318 6.9384853 L -0.99989318 10.313815 L -4.3752232 10.313815 C -4.7907228 10.313815 -5.1251431 10.648236 -5.1251431 11.063735 L -5.1251431 11.563682 C -5.1251431 11.979181 -4.7907228 12.313602 -4.3752232 12.313602 L -0.99989318 12.313602 L -0.99989318 15.688932 C -0.99989318 16.104431 -0.66547288 16.438852 -0.2499733 16.438852 L 0.2499733 16.438852 C 0.66547288 16.438852 0.99989318 16.104431 0.99989318 15.688932 L 0.99989318 12.313602 L 4.3752232 12.313602 C 4.7907228 12.313602 5.1251431 11.979181 5.1251431 11.563682 L 5.1251431 11.063735 C 5.1251431 10.648236 4.7907228 10.313815 4.3752232 10.313815 L 0.99989318 10.313815 L 0.99989318 6.9384853 C 0.99989318 6.7307355 0.91724681 6.5437176 0.78168445 6.4081552 z ' transform='rotate(-45)' /%3E%3C/svg%3E") !important; } @@ -1786,48 +2044,6 @@ private browsing opacity: 1 !important; background: none !important; } -#main-window[privatebrowsingmode="temporary"] .all-tabs-close-button .toolbarbutton-icon { - list-style-image: url("data:image/svg+xml,%3Csvg height='16' width='16' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1' /%3E%3Cpath id='rect1' style='opacity:1;fill:%23ffffff;fill-opacity:1;stroke:none;stroke-width:1;stroke-opacity:0.498039;-inkscape-stroke:none' d='M 0.78168445 6.4081552 C 0.64612209 6.2725928 0.45772309 6.1885654 0.2499733 6.1885654 L -0.2499733 6.1885654 C -0.66547288 6.1885654 -0.99989318 6.5229857 -0.99989318 6.9384853 L -0.99989318 10.313815 L -4.3752232 10.313815 C -4.7907228 10.313815 -5.1251431 10.648236 -5.1251431 11.063735 L -5.1251431 11.563682 C -5.1251431 11.979181 -4.7907228 12.313602 -4.3752232 12.313602 L -0.99989318 12.313602 L -0.99989318 15.688932 C -0.99989318 16.104431 -0.66547288 16.438852 -0.2499733 16.438852 L 0.2499733 16.438852 C 0.66547288 16.438852 0.99989318 16.104431 0.99989318 15.688932 L 0.99989318 12.313602 L 4.3752232 12.313602 C 4.7907228 12.313602 5.1251431 11.979181 5.1251431 11.563682 L 5.1251431 11.063735 C 5.1251431 10.648236 4.7907228 10.313815 4.3752232 10.313815 L 0.99989318 10.313815 L 0.99989318 6.9384853 C 0.99989318 6.7307355 0.91724681 6.5437176 0.78168445 6.4081552 z ' transform='rotate(-45)' /%3E%3C/svg%3E") !important; -} #main-window[privatebrowsingmode="temporary"] #tabbrowser-tabs[orient="vertical"][expanded] .tab-close-button { list-style-image: url("data:image/svg+xml,%3Csvg height='16' width='16' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1' /%3E%3Cpath id='rect1' style='opacity:1;fill:%23ffffff;fill-opacity:1;stroke:none;stroke-width:1;stroke-opacity:0.498039;-inkscape-stroke:none' d='M 0.78168445 6.4081552 C 0.64612209 6.2725928 0.45772309 6.1885654 0.2499733 6.1885654 L -0.2499733 6.1885654 C -0.66547288 6.1885654 -0.99989318 6.5229857 -0.99989318 6.9384853 L -0.99989318 10.313815 L -4.3752232 10.313815 C -4.7907228 10.313815 -5.1251431 10.648236 -5.1251431 11.063735 L -5.1251431 11.563682 C -5.1251431 11.979181 -4.7907228 12.313602 -4.3752232 12.313602 L -0.99989318 12.313602 L -0.99989318 15.688932 C -0.99989318 16.104431 -0.66547288 16.438852 -0.2499733 16.438852 L 0.2499733 16.438852 C 0.66547288 16.438852 0.99989318 16.104431 0.99989318 15.688932 L 0.99989318 12.313602 L 4.3752232 12.313602 C 4.7907228 12.313602 5.1251431 11.979181 5.1251431 11.563682 L 5.1251431 11.063735 C 5.1251431 10.648236 4.7907228 10.313815 4.3752232 10.313815 L 0.99989318 10.313815 L 0.99989318 6.9384853 C 0.99989318 6.7307355 0.91724681 6.5437176 0.78168445 6.4081552 z ' transform='rotate(-45)' /%3E%3C/svg%3E") !important; } - -/*** CUSTOMIZATION BUTTONS for PRIVATE MODE ***/ -#main-window[privatebrowsingmode="temporary"] #customization-lwtheme-button, -#main-window[privatebrowsingmode="temporary"] #customization-toolbar-visibility-button, -#main-window[privatebrowsingmode="temporary"] #customization-uidensity-button, -#main-window[privatebrowsingmode="temporary"] #customization-reset-button, -#main-window[privatebrowsingmode="temporary"] #customization-done-button { - appearance: none !important; - padding: 5px !important; - background-color: rgba(255,255,255,0.2) !important; - border: 1px solid rgba(0,0,0,0.50) !important; - border-radius: 3px !important; - box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.10) !important; - color: #fff !important; -} -#main-window[privatebrowsingmode="temporary"] #customization-lwtheme-button[open="true"], -#main-window[privatebrowsingmode="temporary"] #customization-toolbar-visibility-button[open="true"], -#main-window[privatebrowsingmode="temporary"] #customization-uidensity-button[open="true"], -#main-window[privatebrowsingmode="temporary"] #customization-reset-button:active, -#main-window[privatebrowsingmode="temporary"] #customization-done-button:active { - appearance: none !important; - padding: 5px !important; - background-color: rgba(255,255,255,0.2) !important; - border: 1px solid rgba(0,0,0,0.50) !important; - border-radius: 3px !important; - box-shadow: inset 0 0 3px 0 rgba(0,0,0,0.2) !important; - color: #fff !important; -} - -/*** CHECKBOX BUTTONS CUSTOMIZATION PANEL for PRIVATE MODE ***/ -#main-window[privatebrowsingmode="temporary"] .checkbox-check { - appearance: none !important; - height: 16px !important; - width: 16px !important; - background-color: white !important; - border: 1px solid rgba(0,0,0,0.50) !important; - border-radius: 3px !important; - box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.10) !important; -} diff --git a/base.css b/base.css index ccd91d7..8710e3f 100644 --- a/base.css +++ b/base.css @@ -8,16 +8,25 @@ MENU POPUPS + right mouse click menus *************************************/ -/* Normal Mode menu popups */ +/*** Normal Mode menu popups ***/ menubar > menu[open] { border-bottom-color: transparent !important; } -menu, menuitem, menucaption { +menu:not(#file-menu, #edit-menu, #view-menu, #history-menu, #bookmarksMenu, #tools-menu, #helpMenu), menuitem:not(#context-back, #context-forward, #context-reload, #context-bookmarkpage), menucaption { appearance: none !important; padding: 7px 12px !important; border-radius: 0px !important; max-width: 100% !important; } +#file-menu, #edit-menu, #view-menu, #history-menu, #bookmarksMenu, #tools-menu, #helpMenu { + appearance: none !important; + padding: 5px 10px !important; + border-radius: 4px !important; + margin: 0px 4px !important; +} +#context-back, #context-forward, #context-reload, #context-bookmarkpage { + margin: 0px 6px !important; +} menu:hover:not([disabled="true"]), menuitem:hover:not([disabled="true"]), menucaption:hover:not([disabled="true"]) { background-color: rgba(0,0,0,0.08) !important; } @@ -39,9 +48,6 @@ menupopup, panel { #BMB_bookmarksPopup .menu-text { margin-left: 0px !important; } -.toolbaritem-combined-buttons { - margin-right: -3px !important; -} .menupopup-arrowscrollbox { border-radius: 7px !important; overflow: auto !important; @@ -60,8 +66,40 @@ menuseparator::before, toolbarseparator::before { border-top: none !important; } +.panel-header > .subviewbutton-back:hover, +#appMenu-fxa-label2 { + border-radius: 4px !important; +} + +/* extensions pull down menu */ +#unified-extensions-panel .unified-extensions-item > .unified-extensions-item-action-button { + margin-inline-start: 4px !important; + margin-inline-end: 4px !important; + border-radius: 4px !important; + background-color: transparent !important; + padding: 7px 7px !important; +} +#unified-extensions-panel .unified-extensions-item > .unified-extensions-item-action-button:hover { + margin-inline-start: 4px !important; + margin-inline-end: 4px !important; + border-radius: 4px !important; + background-color: rgba(0,0,0,0.08) !important; + padding: 7px 7px !important; +} +#unified-extensions-panel .unified-extensions-item > .unified-extensions-item-menu-button > .toolbarbutton-icon { + margin-inline-end: 4px !important; + padding: 20px !important; + border-radius: 4px !important; + background-color: transparent !important; +} +#unified-extensions-panel .unified-extensions-item > .unified-extensions-item-menu-button:hover > .toolbarbutton-icon { + margin-inline-end: 4px !important; + padding: 20px !important; + border-radius: 4px !important; + background-color: rgba(0,0,0,0.08) !important; +} -/* Dark Mode in Tweaks menu popups */ +/*** Dark Mode in Tweaks menu popups ***/ @media (prefers-color-scheme: dark) { menu:hover:not([disabled="true"]), menuitem:hover:not([disabled="true"]), menucaption:hover:not([disabled="true"]) { background-color: rgba(255,255,255,0.10) !important; @@ -85,9 +123,26 @@ menupopup, panel { --arrowpanel-background: Field !important; --panel-item-hover-bgcolor: rgba(255,255,255,0.10) !important; --button-hover-bgcolor: rgba(255,255,255,0.10) !important; +} +#appMenu-fxa-label2 { + background-color: rgba(255,255,255,0.05) !important; +} + +/* extensions pull down menu */ +#unified-extensions-panel .unified-extensions-item > .unified-extensions-item-action-button { + background-color: transparent !important; +} +#unified-extensions-panel .unified-extensions-item > .unified-extensions-item-action-button:hover { + background-color: rgba(255,255,255,0.10) !important; +} +#unified-extensions-panel .unified-extensions-item > .unified-extensions-item-menu-button > .toolbarbutton-icon { + background-color: transparent !important; +} +#unified-extensions-panel .unified-extensions-item > .unified-extensions-item-menu-button:hover > .toolbarbutton-icon { + background-color: rgba(255,255,255,0.10) !important; }} -/* Private Mode menu popups */ +/*** Private Mode menu popups ***/ :root[privatebrowsingmode="temporary"] menupopup:not(#BMB_bookmarksPopup) menu[_moz-menuactive="true"]:not([disabled="true"]):not(.subviewbutton), :root[privatebrowsingmode="temporary"] menupopup:not(#BMB_bookmarksPopup) menuitem[_moz-menuactive="true"]:not([disabled="true"]):not(.subviewbutton) { appearance: none !important; @@ -172,7 +227,6 @@ menupopup, panel { background: rgba(255,255,255,0.15) !important; color: #fff !important; } -:root[privatebrowsingmode="temporary"] #screenshots_mozilla_org-menuitem-_create-screenshot > .menu-iconic-left > .menu-iconic-icon, :root[privatebrowsingmode="temporary"] .menu-right { filter: invert(1) !important; } @@ -183,11 +237,38 @@ menupopup, panel { :root[privatebrowsingmode="temporary"] .menu-right { filter: none !important; }} +:root[privatebrowsingmode="temporary"] #appMenu-fxa-label2 { + background-color: rgba(0,0,0,0.1) !important; +} + +/* extensions pull down menu */ +:root[privatebrowsingmode="temporary"] #unified-extensions-panel .unified-extensions-item > .unified-extensions-item-action-button { + background-color: transparent !important; +} +:root[privatebrowsingmode="temporary"] #unified-extensions-panel .unified-extensions-item > .unified-extensions-item-action-button:hover { + background-color: rgba(0,0,0,0.1) !important; +} +:root[privatebrowsingmode="temporary"] #unified-extensions-panel .unified-extensions-item > .unified-extensions-item-menu-button > .toolbarbutton-icon { + background-color: transparent !important; +} +:root[privatebrowsingmode="temporary"] #unified-extensions-panel .unified-extensions-item > .unified-extensions-item-menu-button:hover > .toolbarbutton-icon { + background-color: rgba(0,0,0,0.1) !important; +} /********** Normal mode ***********/ +/* system accent color variables */ +:root { + --accentcolor-percentage: color-mix(in srgb, LinkText 20%, transparent); + --accentcolor-main: color-mix(in srgb, LinkText 70%, transparent); + --color-accent-primary: color-mix(in srgb, LinkText 70%, transparent) !important; + --button-background-color: color-mix(in srgb, black 5%, transparent) !important; + --button-background-color-hover: color-mix(in srgb, black 8%, transparent) !important; + --button-background-color-active: color-mix(in srgb, black 8%, transparent) !important; +} + /* make main window background dark for tiled windows */ #main-window { background: black !important; @@ -197,26 +278,42 @@ Normal mode :root { --inactive-titlebar-opacity: 1 !important; } +#navigator-toolbox:-moz-window-inactive { + background: #FAFAFA !important; + border-radius: 6px 6px 0 0 !important; + border-bottom: none !important; + box-shadow: inset 0 -1px 0 0 #C8C8C8 !important; /* this makes the border bottom to avoid double borders in vertical tabs */ +} #nav-bar:-moz-window-inactive { - background: linear-gradient(to bottom, #EAEAEA, #E9E9E9) !important; + background: #FAFAFA !important; border-radius: 6px 6px 0 0 !important; - box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2) !important; + border-bottom: 1px solid #C8C8C8 !important; + box-shadow: inset 0 0 0 1px rgba(255,255,255,1) !important; } #TabsToolbar:-moz-window-inactive { - background: linear-gradient(180deg, rgba(236,236,236,1) 0%, rgba(250,250,250,1) 10%, rgba(250,250,250,1) 100%) !important; - border-bottom: 1px solid #D9D9D9 !important; + background: none !important; } -.tab-background[selected="true"]:-moz-window-inactive { +.tab-background:is([selected], [multiselected]):-moz-window-inactive { background: #FAFAFA !important; } #PersonalToolbar:-moz-window-inactive { - background: #FAFAFA !important; - border-bottom: 1px solid #D9D9D9 !important; + background: none !important; } #toolbar-menubar:-moz-window-inactive { - background: #E9E9E9 !important; + background: none !important; } -#PanelUI-menu-button:-moz-window-inactive { +#PanelUI-menu-button:-moz-window-inactive, +.titlebar-min image:-moz-window-inactive, +.titlebar-max image:-moz-window-inactive, +.titlebar-restore image:-moz-window-inactive, +.titlebar-close image:-moz-window-inactive, +#nav-bar #back-button > .toolbarbutton-icon:-moz-window-inactive, +#nav-bar #forward-button > .toolbarbutton-icon:-moz-window-inactive, +#nav-bar #reload-button > .toolbarbutton-icon:-moz-window-inactive, +#nav-bar #home-button > .toolbarbutton-icon:-moz-window-inactive, +toolbar .toolbarbutton-1:not(#PanelUI-menu-button) > .toolbarbutton-icon:-moz-window-inactive, +toolbar .toolbarbutton-1:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack:-moz-window-inactive, +#TabsToolbar .tab-close-button:-moz-window-inactive { opacity: 0.5 !important; } #sidebar-main:-moz-window-inactive { @@ -224,22 +321,20 @@ Normal mode } /*** TILED/MAXIMIZED/FULLSCREEN WINDOW FIXES ***/ -:root[gtktiledwindow="true"] #nav-bar, -:root[gtktiledwindow="true"] #nav-bar:-moz-window-inactive{ +:root[gtktiledwindow="true"] #navigator-toolbox, +:root[gtktiledwindow="true"] #navigator-toolbox:-moz-window-inactive { border-radius: 6px 6px 0 0 !important; - box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2) !important; + box-shadow: inset 0 -1px 0 0 #C8C8C8 !important; /* this makes the border bottom to avoid double borders in vertical tabs */ } -:root[sizemode="maximized"] #nav-bar, -:root[sizemode="maximized"] #nav-bar:-moz-window-inactive, -:root[inFullscreen="true"] #nav-bar { +:root[sizemode="maximized"] #navigator-toolbox, +:root[sizemode="maximized"] #navigator-toolbox:-moz-window-inactive, +:root[inFullscreen="true"] #navigator-toolbox { border-radius: 0 0 0 0 !important; - box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2) !important; + box-shadow: inset 0 -1px 0 0 #C8C8C8 !important; /* this makes the border bottom to avoid double borders in vertical tabs */ } :root[inFullscreen="true"] #TabsToolbar { min-height: 36px !important; max-height: 36px !important; - border-top: 1px solid #B5B5B5 !important; - border-bottom: 1px solid #D9D9D9 !important; } #fullscr-toggler { height: 3px !important; @@ -301,6 +396,7 @@ Normal mode box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.07), 0 1px 0 0 rgba(255,255,255,0.5) !important; } +/* misc titlebar button styles */ .titlebar-close, .titlebar-min, .titlebar-max, @@ -325,19 +421,19 @@ Normal mode /*** NAV BAR ***/ #navigator-toolbox { - border: none !important; - background-color: rgba(0,0,0,0.6) !important; + background: #F2F2F2 !important; border-radius: 6px 6px 0 0 !important; + border: none !important; + box-shadow: inset 0 -1px 0 0 #C8C8C8 !important; /* this makes the border bottom to avoid double borders in vertical tabs */ } #nav-bar { - -moz-box-ordinal-group: 0; + border-radius: 6px 6px 0 0 !important; border-top: 0px !important; - border-bottom: 1px solid #B5B5B5 !important; order: -1; - background: linear-gradient(to bottom, #E5E5E5, #DFDFDF) !important; - border-radius: 6px 6px 0 0 !important; height: 45px !important; - box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2) !important; + background: #FAFAFA !important; + border-bottom: 1px solid #C8C8C8 !important; + box-shadow: inset 0 0 0 1px rgba(255,255,255,1), 0 1px 1px 0 rgba(0,0,0,0.06) !important; } /* fullscreen fixes for the nav bar */ :root[sizemode="fullscreen"] #nav-bar { @@ -345,31 +441,57 @@ Normal mode } /*** URLBAR + MEGABAR ***/ + +/* make open urlbar hovers full width */ +.urlbarView { + margin-inline: 0px !important; + width: 100% !important; + border-inline: none !important; +} +.urlbarView-row { + border-radius: 0px !important; + border: none !important; + padding-inline-start: 6px !important; + padding-inline-end: 6px !important; +} +.urlbarView-row:hover { + background-color: rgba(0,0,0,0.08) !important; +} +.urlbarView-row[label]::before { + margin-inline-start: 4px !important; +} +.urlbarView-row[selected] { + background-color: SelectedItem !important; +} + +/* urlbar and searchbar with all buttons and icons */ +:root { + --urlbar-min-height: 24px !important; +} #urlbar[breakout][breakout-extend][breakout-extend-animate]:not([open]), #urlbar[breakout][breakout-extend]:not([open]), #urlbar[breakout]:not([open]) { - --urlbar-height: 25px !important; - --urlbar-toolbar-height: 25px !important; + --urlbar-height: 26px !important; + --urlbar-toolbar-height: 26px !important; } #urlbar[open] { - top: 7px !important; + --urlbar-min-height: 22px !important; /* takes care of password key icon not jumping in open urlbar */ + top: 5px !important; } #urlbar[open] .urlbar-input-container { - margin-top: 4px !important; + height: 24px !important; + margin-top: 3px !important; margin-bottom: 3px !important; margin-left: 6px !important; padding-right: 12px !important; } -.urlbar-input-container label { - line-height: 15px !important; -} #urlbar-container, #search-container { -moz-window-dragging: drag !important; - padding-block: 10px !important; + padding-top: 3px !important; /* adjust when all urlbar icons and input text are jumping */ } .urlbar-input-container { - height: 21px !important; + height: 22px !important; border-radius: 2px !important; padding: 0px 2px 0px 0px !important; margin: 1px !important; @@ -378,33 +500,36 @@ Normal mode -moz-window-dragging: no-drag !important; } #urlbar { - min-height: 25px !important; + min-height: 26px !important; } #searchbar { - min-height: 25px !important; - max-height: 25px !important; + min-height: 26px !important; + max-height: 26px !important; } -#urlbar[focused] { - border: 1px solid silver !important; +#urlbar[focused]:not([open]), +#searchbar:focus-within { + border: 1px solid var(--accentcolor-main) !important; border-radius: 3px !important; background: #ffffff !important; + box-shadow: inset 0px 0.1px 0.5px 0.2px var(--accentcolor-percentage), 0 0 0 2px var(--accentcolor-percentage) !important; + filter: saturate(150%) !important; } -#searchbar[focused] { - border: 1px solid silver !important; - border-radius: 3px !important; +#urlbar[focused][open], +#urlbar[open]:not([focused]) { + border: 1px solid #C8C8C8 !important; + border-radius: 6px !important; background: #ffffff !important; + box-shadow: 0 2px 2px 1px rgba(0,0,0,0.1) !important; } -#searchbar:not([focused]) { - border: 1px solid #B8B8B8 !important; - border-radius: 3px !important; - background: #ffffff !important; - box-shadow: inset 0 0 1px 0 rgba(0,0,0,0.3), 0 1px 0 0 rgba(255,255,255,0.5) !important; +#urlbar[focused] > #urlbar-background { + box-shadow: none !important; } -#urlbar:not([focused]) { - border: 1px solid #B8B8B8 !important; - border-radius: 3px !important; +#urlbar:not([focused]), +#searchbar:not(:focus-within) { + border: 1px solid #C8C8C8 !important; + border-radius: 3px !important; background: #ffffff !important; - box-shadow: inset 0 0 1px 0 rgba(0,0,0,0.3), 0 1px 0 0 rgba(255,255,255,0.5) !important; + box-shadow: inset 0px 0.1px 0.5px 0.2px rgba(0,0,0,0.18), 0 1px 0 0 rgba(255,255,255,1) !important; } #urlbar-background { border: none !important; @@ -414,55 +539,60 @@ Normal mode outline: none !important; } #searchbar:focus-within { - outline: none !important; + outline: var(--accentcolor-percentage) !important; + filter: saturate(150%) !important; } #PopupSearchAutoComplete { - border-radius: 3px !important; + margin-top: -1px !important; } .urlbar-icon:not(.urlbar-revert-button ):not(.search-go-button):not(.urlbar-go-button) { - margin: -3px 0px 0px 0px !important; + margin: -2px 0px 0px 0px !important; } .urlbar-page-action:not(#translations-button[translationsactive="true"]) { - height: 19px !important; + height: 20px !important; width: 23px !important; margin-left: 2px !important; } #translations-button[translationsactive="true"] { - height: 19px !important; + height: 20px !important; } #translations-button-locale { height: 17px !important; margin: -3px 2px !important; } -#notification-popup-box { - height: 19px !important; -} -#identity-permission-box { - height: 19px !important; - padding: 0px 4px 0px 4px !important; + +/* makes icons same height in open urlbar */ +#urlbar[breakout-extend] #identity-box, +#urlbar[breakout-extend] #tracking-protection-icon-container, +#urlbar[breakout-extend] #page-action-buttons { + height: 20px !important; + margin-top: 2px !important; } -#urlbar[breakout-extend] #identity-permission-box, #urlbar[breakout-extend] #notification-popup-box { - margin-top: -1px !important; -} - -/* delete when stable is version 134 or when these urlbar icons are jumping in Nightly */ -/* :root[data-title-default="Firefox Nightly"] #urlbar[breakout-extend] #identity-permission-box, -:root[data-title-default="Firefox Nightly"] #urlbar[breakout-extend] #notification-popup-box { + height: 20px !important; margin-top: 0px !important; -} */ - -#identity-icon, -#tracking-protection-icon-box { - margin: 0px 0px 1px 0px !important; } +#urlbar[breakout-extend] #identity-box:not(.verifiedDomain) { + height: 20px !important; + margin-top: 2px !important; +} +#urlbar[breakout-extend] #identity-box:not(.verifiedDomain) #identity-icon-box label { + margin-top: -2px !important; +} + .urlbar-go-button, .urlbar-revert-button { - padding: 6px !important; - margin: -5px 0px !important; + width: 20px !important; + height: 20px !important; + padding: 2px !important; + margin: 2px 0px !important; } .search-go-button { - padding: 6px !important; + padding: 2px !important; + margin: 0px 2px !important; +} +#PopupSearchAutoComplete .search-setting-button { + margin-inline: 6px !important; } :root { --urlbar-icon-padding: 4px !important; @@ -473,15 +603,11 @@ Normal mode padding: 0px 3px !important; margin: 0px 2px !important; } -#notification-popup-box image { - width: 16px !important; - height: 16px !important; - padding: 0px !important; - margin: 0px 4px 2px 4px !important; -} #urlbar .search-one-offs:not([hidden]) { padding-block: 2px !important; - min-height: 25px !important; + padding-inline-start: 6px !important; + padding-inline-end: 2px !important; + min-height: 26px !important; } .search-one-offs[is_searchbar="true"]) { border-top: none !important; @@ -490,40 +616,35 @@ Normal mode #urlbar .search-panel-one-offs, #urlbar .search-panel-one-offs-container, #urlbar .searchbar-engine-one-off-item { - min-height: 25px !important; -} -#urlbar-searchmode-switcher image { - margin-bottom: 1px !important; + min-height: 26px !important; } + +/* makes new searchmode box same look and height in open urlbar */ #searchmode-switcher-chicklet { border-start-end-radius: 2px !important; border-end-end-radius: 2px !important; } +#urlbar[breakout-extend] #searchmode-switcher-chicklet { + height: 20px !important; + margin-top: 2px !important; + padding-bottom: 1px !important; +} +#urlbar[breakout-extend] #urlbar-searchmode-switcher { + height: 20px !important; + margin-top: 2px !important; +} -/* selected text and icons url bar */ +/* selected text in system accent color */ ::selection { - color: #FFFFFF !important; - background-color: #1E90FF !important; + color: #000 !important; + background-color: var(--accentcolor-percentage) !important; + filter: saturate(150%) !important; } :root { - --toolbarbutton-icon-fill-attention: #1E90FF !important; + --toolbarbutton-icon-fill-attention: var(--accentcolor-main) !important; } /*** TOOLBAR ***/ -toolbar:not(.customization-target) .toolbarbutton-1 > .toolbarbutton-icon, -toolbar:not(.customization-target):not(#PersonalToolbar):not(#TabsToolbar) .toolbarbutton-1:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack { - width: 28px !important; - height: 28px !important; - padding: 6px !important; - margin-right: 0px !important; -} -toolbar .toolbarbutton-1:hover > .toolbarbutton-icon { - background: none !important; - box-shadow: none !important; -} -toolbar[customizing] > .overflow-button:hover > .toolbarbutton-icon { - background: rgba(51,51,51, 0.3) !important; -} /* keep default icons small while below icons are bigger */ #back-button > .toolbarbutton-icon, @@ -537,7 +658,7 @@ toolbar[customizing] > .overflow-button:hover > .toolbarbutton-icon { clip-path: circle(50%) !important; } -/* buttons in normal mode */ +/* navigation buttons */ #nav-bar #back-button > .toolbarbutton-icon { list-style-image: url("data:image/svg+xml,%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' id='svg6' version='1.1' width='16' height='16'%3E%3Cmetadata id='metadata12'%3E%3Crdf:RDF%3E%3Ccc:Work rdf:about=''%3E%3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E%3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage' /%3E%3Cdc:title%3E%3C/dc:title%3E%3C/cc:Work%3E%3C/rdf:RDF%3E%3C/metadata%3E%3Cdefs id='defs10' /%3E%3Cpath id='path873-5' style='opacity:1;fill:%23000000;stroke:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stop-color:%23000000' d='m 7.2260666,2.5 c 0.4312184,0 0.7783725,0.3346464 0.7783725,0.7503279 V 6 H 13.221628 C 13.652847,6 14,6.3346463 14,6.7503279 V 8.249672 C 14,8.6653541 13.652847,9.0004099 13.221628,9 H 8.0044391 v 2.749674 C 8.0044391,12.165354 7.657285,12.5 7.2260666,12.5 6.9936571,12.5 6.7861919,12.40264 6.6438073,12.247938 L 2.212837,8.0241533 C 2.081227,7.8897736 2,7.7091601 2,7.5097679 2,7.3103755 2.081225,7.129763 2.212837,6.995383 L 6.6438073,2.7520634 C 6.7861919,2.5973529 6.9936571,2.5 7.2260666,2.5 Z' /%3E%3C/svg%3E") !important; border: none !important; @@ -545,10 +666,14 @@ toolbar[customizing] > .overflow-button:hover > .toolbarbutton-icon { margin-right: 3px !important; margin-left: 3px !important; } + +/* back button color in checked state */ #nav-bar #back-button[checked] > .toolbarbutton-icon { - background: rgba(51,51,51, 0.15) !important; + background: var(--accentcolor-percentage) !important; box-shadow: none !important; + filter: saturate(150%) !important; } + #nav-bar #forward-button { list-style-image: url("data:image/svg+xml,%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' id='svg6' version='1.1' width='16' height='16'%3E%3Cmetadata id='metadata12'%3E%3Crdf:RDF%3E%3Ccc:Work rdf:about=''%3E%3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E%3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage' /%3E%3Cdc:title%3E%3C/dc:title%3E%3C/cc:Work%3E%3C/rdf:RDF%3E%3C/metadata%3E%3Cdefs id='defs10' /%3E%3Cpath id='path873-5' style='opacity:1;fill:%23000000;stroke:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stop-color:%23000000' d='M 8.7739334,2.5 C 8.342715,2.5 7.9955609,2.8346464 7.9955609,3.2503279 L 7.9955609,6 H 2.778372 C 2.347153,6 2,6.3346463 2,6.7503279 L 2,8.249672 C 2,8.6653541 2.3471532,9.0004099 2.778372,9 h 5.2171889 l 0,2.749674 c 0,0.41568 0.3471541,0.750326 0.7783725,0.750326 0.2324095,0 0.4398747,-0.09736 0.5822593,-0.252062 L 13.787163,8.0241533 C 13.918773,7.8897736 14,7.7091601 14,7.5097679 14,7.3103755 13.918775,7.129763 13.787163,6.995383 L 9.3561927,2.7520634 C 9.2138081,2.5973529 9.0063429,2.5 8.7739334,2.5 Z' /%3E%3C/svg%3E") !important; margin-right: 3px !important; @@ -572,9 +697,6 @@ toolbar[customizing] > .overflow-button:hover > .toolbarbutton-icon { #stop-reload-button > #stop-button:not([displayreload]) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image { background-image: none !important; } -:root:not([customizing]) .toolbarbutton-1[disabled="true"]{ - opacity: 0.35 !important; -} #PanelUI-menu-button .toolbarbutton-badge-stack > .toolbarbutton-icon { background: none !important; box-shadow: none !important; @@ -583,39 +705,75 @@ toolbar[customizing] > .overflow-button:hover > .toolbarbutton-icon { padding: 0px !important; margin: -4px !important; } -#PanelUI-menu-button:hover:not([open]):not([checked]):not(:active) > .toolbarbutton-badge-stack, -#fxa-toolbar-menu-button:hover:not([open]):not([checked]):not(:active) > .toolbarbutton-badge-stack { - background: none !important; + +/* circled extension icons */ +toolbar .toolbarbutton-1:not([disabled="true"]) { + &[data-extensionid] { + margin-inline: 0px !important; + } } -toolbar .toolbaritem-combined-buttons > .toolbarbutton-1 { +toolbar:not(.customization-target):not(#PersonalToolbar):not(#TabsToolbar) .toolbarbutton-1:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack { + border-radius: 50% !important; +} +toolbar .toolbarbutton-1 { + &:not([disabled]):not(#PanelUI-menu-button) { + &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack) { + background-color: var(--accentcolor-percentage) !important; + filter: saturate(150%) !important; + } + } +} + +/* make circled toolbar icons with accent color + other buttons in other bars with no circle */ +toolbar:not(.customization-target) .toolbarbutton-1 > .toolbarbutton-icon, +toolbar:not(.customization-target):not(#PersonalToolbar):not(#TabsToolbar) .toolbarbutton-1:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack { + width: 28px !important; + height: 28px !important; + padding: 6px !important; +} +toolbar .toolbarbutton-1:hover > .toolbarbutton-icon, +toolbar .toolbarbutton-1:hover > .toolbarbutton-badge-stack { background: none !important; box-shadow: none !important; - padding: 8px !important; - margin: -4px !important; - border-radius: 50% !important; } -toolbar:not(#PersonalToolbar):not(#TabsToolbar) .toolbarbutton-1:not([disabled="true"]):not([data-extensionid]):-moz-any([open], [checked], :active) > .toolbarbutton-icon, -toolbar:not(#PersonalToolbar):not(#TabsToolbar) .toolbarbutton-1:not(#PanelUI-menu-button):not([disabled="true"]):not([data-extensionid]):-moz-any([open], [checked], :active) > .toolbarbutton-badge-stack { - background: rgba(51,51,51, 0.15) !important; - clip-path: circle(50%) !important; +#PanelUI-menu-button:hover:not([open]):not([checked]):not(:active) > .toolbarbutton-badge-stack, +#fxa-toolbar-menu-button:hover:not([open]):not([checked]):not(:active) > .toolbarbutton-badge-stack { + background: none !important; } -toolbar .toolbarbutton-1:not([disabled="true"]):not([data-extensionid]):-moz-any([open], [checked], :hover, :active) > .toolbarbutton-badge-stack { - background: rgba(51,51,51, 0.15) !important; +toolbar:not(#PersonalToolbar):not(#TabsToolbar) .toolbarbutton-1:not([disabled="true"], [data-extensionid], #nav-bar-overflow-button):is([open], [checked], :active) > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack) { + background: var(--accentcolor-percentage) !important; clip-path: circle(50%) !important; + filter: saturate(150%) !important; +} +toolbar[customizing] #nav-bar-overflow-button > .toolbarbutton-icon { + background: none !important; } -toolbar .toolbaritem-combined-buttons > .toolbarbutton-1:-moz-any([open], [checked], :active), -toolbar .toolbarbutton-1[data-extensionid]:-moz-any([open], [checked], :active) { - background: radial-gradient(circle, rgba(51,51,51, 0.15) 49%, rgba(51,51,51, 0) 50%) !important; +#nav-bar-overflow-button:is([open], [checked], :active) > .toolbarbutton-icon { + background: var(--accentcolor-percentage) !important; + clip-path: none !important; + filter: saturate(150%) !important; + border-radius: 3px !important; } -#TabsToolbar .toolbarbutton-1:not([disabled="true"]):-moz-any([open], [checked], :active) > .toolbarbutton-icon, -#TabsToolbar .toolbarbutton-1:not([disabled="true"]):-moz-any([open], [checked], :hover, :active) > .toolbarbutton-badge-stack { - background: rgba(51,51,51, 0.15) !important; +#TabsToolbar .toolbarbutton-1:not([disabled="true"], #alltabs-button, #new-tab-button, #tabs-newtab-button, #firefox-view-button):is([open], [checked], :active) > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack) { + background: var(--accentcolor-percentage) !important; clip-path: none !important; + filter: saturate(150%) !important; + border-radius: 3px !important; } -#PersonalToolbar .toolbarbutton-1:not([disabled="true"]):-moz-any([open], [checked], :hover, :active), -#PersonalToolbar .toolbarbutton-1:not([disabled="true"]):-moz-any([open], [checked], :hover, :active) > .toolbarbutton-badge-stack { - background: rgba(51,51,51, 0.15) !important; +#PersonalToolbar .toolbarbutton-1:not([disabled="true"]):is([open], [checked], :active) > .toolbarbutton-icon, +#PersonalToolbar .toolbarbutton-1:not([disabled="true"]):is([open], [checked], :active) > .toolbarbutton-badge-stack { + background: var(--accentcolor-percentage) !important; clip-path: none !important; + filter: saturate(150%) !important; + border-radius: 3px !important; +} + +/* buttons styles in toolbar */ +#TabsToolbar .toolbarbutton-1:not(#alltabs-button, #new-tab-button, #tabs-newtab-button, #firefox-view-button) > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack) { + margin-bottom: 2px !important; +} +:root:not([customizing]) .toolbarbutton-1[disabled="true"] { + opacity: 0.20 !important; } #PanelUI-button { border: none !important; @@ -638,9 +796,6 @@ toolbar .toolbarbutton-1[data-extensionid]:-moz-any([open], [checked], :active) toolbarpaletteitem > #stop-reload-button { -moz-box-pack: center !important; } -toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-button):not(#stop-button):not(#home-button):not(.webextension-browser-action):not(#fxa-toolbar-menu-button):not(#downloads-button):not(#import-button):not(#new-tab-button):not(#tabs-newtab-button):not(#alltabs-button):not(#firefox-view-button):not(#PlacesChevron) { - margin-right: 0px !important; -} #PanelUI-menu-button { padding-inline-start: var(--toolbar-start-end-padding) !important; } @@ -652,40 +807,39 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt } #scrollbutton-up image:active, #scrollbutton-down:-moz-locale-dir(ltr) image:active { - background: rgba(51,51,51, 0.15) !important; + background: rgba(0,0,0,0.08) !important; } :root { --toolbarbutton-hover-background: rgba(51,51,51, 0.15) !important; --toolbarbutton-active-background: rgba(51,51,51, 0.15) !important; } - -/*** TAB BAR ***/ -#tabbrowser-tabs { - &[orient="horizontal"] { - min-height: 36px !important; - max-height: 36px !important; - } +#TabsToolbar #fxa-toolbar-menu-button > .toolbarbutton-badge-stack { + width: 28px !important; + height: 28px !important; + padding: 6px !important; } -#tabbrowser-arrowscrollbox { - &[orient="horizontal"] { - min-height: 36px !important; - max-height: 36px !important; - } +#TabsToolbar .toolbarbutton-1:not([disabled="true"])[data-extensionid] > .toolbarbutton-badge-stack { + width: 28px !important; + height: 28px !important; + padding: 6px !important; } + +/*** TAB BAR ***/ + +/* tab bar */ #TabsToolbar { -moz-appearance: none !important; - padding: 0px !important; + padding-left: 2px !important; width: 100vw !important; - min-height: 35px !important; - max-height: 35px !important; - border-bottom: 1px solid #D9D9D9 !important; - background: linear-gradient(180deg, rgba(223,223,223,1) 0%, rgba(241,241,241,1) 10%, rgba(241,241,241,1) 98%, rgba(223,223,223,1) 100%) !important; + min-height: 36px !important; + max-height: 36px !important; + background: none !important; } #TabsToolbar .toolbarbutton-1:not(#new-tab-button):not(#tabs-newtab-button):not(#firefox-view-button):not(#alltabs-button) { - margin: auto 2px !important; + margin: auto auto !important; } .toolbar-items { - min-height: 36px !important; + min-height: 35px !important; } .titlebar-spacer[type="post-tabs"] { width: 0px !important; @@ -696,6 +850,40 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt #tabbrowser-arrowscrollbox { padding-left: 2px !important; } + +/* make horizontal tab bar and tabs same height */ +#tabbrowser-tabs { + &[orient="horizontal"] { + min-height: 36px !important; + max-height: 36px !important; + } +} +#tabbrowser-arrowscrollbox { + &[orient="horizontal"] { + min-height: 36px !important; + max-height: 36px !important; + } +} + +/* make tab separators: thanks to MrOtherGuy, source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tab_separator_lines.css */ +#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab { + border-inline-start: 1px solid transparent !important; + border-image: 0 1 linear-gradient(transparent 20%, color-mix(in srgb, #D9D9D9 100%, transparent) 20%, color-mix(in srgb, #D9D9D9 100%, transparent) 90%, transparent 90%) !important; +} +#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab:hover, +#tabbrowser-tabs[orient="horizontal"]:not([movingtab]) .tabbrowser-tab:hover + .tabbrowser-tab:not([first-visible-unpinned-tab]), +#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab:first-child, +#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab[selected], +#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab[multiselected], +#tabbrowser-tabs[orient="horizontal"] #tabbrowser-arrowscrollbox[overflowing] > .tabbrowser-tab[first-visible-unpinned-tab], +#tabbrowser-tabs[orient="horizontal"]:not([movingtab]) .tabbrowser-tab[multiselected] + .tabbrowser-tab, +#tabbrowser-tabs[orient="horizontal"]:not([movingtab]) .tabbrowser-tab[selected] + .tabbrowser-tab, +#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab:is([selected],[multiselected]) + .tabbrowser-tab[hidden] + .tabbrowser-tab { + border-inline-start: 1px solid transparent !important; + border-image: none !important; +} + +/* tabs */ .tab-content:not([pinned]) { -moz-box-direction: reverse !important; flex-direction: row-reverse !important; @@ -704,12 +892,6 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt .tab-content[pinned] { padding: 0px 10px 1px 10px !important; } -.tabbrowser-tab:after { - display: none !important; /* don't show border between tabs */ -} -.tabbrowser-tab:before { - display: none !important; /* don't show border between tabs */ -} .tabbrowser-tab[selected] { min-height: 32px !important; max-height: 32px !important; @@ -725,21 +907,23 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt .tab-background:not([selected]) { min-height: 30px !important; max-height: 30px !important; + border: none !important; border-radius: 3.5px !important; - margin: 2px -1px 2px -1px !important; + margin: 2px 0px 2px 0px !important; } .tab-background:is([selected], [multiselected]) { min-height: 32px !important; max-height: 32px !important; background: #FFFFFF !important; border-radius: 3.5px !important; - border-left: 1px solid #D5D5D5 !important; - border-right: 1px solid #D5D5D5 !important; - border-top: 1px solid #D5D5D5 !important; - border-bottom: 1px solid #C2C2C2 !important; - margin: 1px -1px 1px -1px !important; + border: 1px solid #C8C8C8 !important; + margin: 1px 0px 1px 0px !important; box-shadow: none !important; } +.tabbrowser-tab:not([selected]):hover .tab-background { + background-color: rgba(0,0,0,0.06) !important; + border-radius: 4px !important; +} .tabbrowser-tab[usercontextid] > .tab-stack > .tab-background[selected] > .tab-context-line { margin: 0px !important; } @@ -752,6 +936,8 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] { margin-inline-start: 0px !important; } + +/* write elementary OS style icon for new tab button */ #new-tab-button .toolbarbutton-icon { list-style-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg color='%23333333' transform='translate%28-293 -117%29'%3E%3Cpath d='M300 120v4h-4v2h4v4h2v-4h4v-2h-4v-4z' fill='%23333333' overflow='visible' style='marker:none'/%3E%3C/g%3E%3C/svg%3E") !important; width: 28px !important; @@ -772,18 +958,16 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt border-radius: 3px !important; margin: -2px 0px 0px 0px !important; } -#new-tab-button, -#tabs-newtab-button { - margin: 0px 0px 0px 2px !important; +#new-tab-button:-moz-any([open], [checked], :active) .toolbarbutton-icon, +#tabs-newtab-button:-moz-any([open], [checked], :active) .toolbarbutton-icon { + background-color: var(--accentcolor-percentage) !important; } #nav-bar #new-tab-button, #nav-bar #tabs-newtab-button { margin: 0px 0px 0px 0px !important; } -.all-tabs-item { - margin-inline: 0px !important; - border-radius: 0px !important; -} + +/* misc tab bar buttons styles */ #firefox-view-button .toolbarbutton-icon { width: 28px !important; height: 28px !important; @@ -794,14 +978,12 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt #nav-bar #firefox-view-button .toolbarbutton-icon { margin: 0px 0px 0px 0px !important; } -#firefox-view-button { - margin: 0px 0px 0px 2px !important; -} #firefox-view-button[open] { - padding: 5px 2px 5px 2px !important; + padding: 4px 2px 4px 2px !important; } #TabsToolbar #firefox-view-button[open] > .toolbarbutton-icon { box-shadow: none !important; + background: var(--accentcolor-percentage) !important; } #tabbrowser-tabs { border-inline-start: none !important; @@ -811,6 +993,9 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt border-radius: 3px !important; padding: 6px !important; } +#alltabs-button[open] stack { + background: var(--accentcolor-percentage) !important; +} #nav-bar #alltabs-button stack { margin: 0px 0px 0px 0px !important; } @@ -831,8 +1016,8 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt /* hide and show close tab button */ #TabsToolbar .tab-close-button { list-style-image: url("data:image/svg+xml,%3Csvg height='16' width='16' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1' /%3E%3Cpath id='rect1' style='opacity:1;fill:%23333333;fill-opacity:1;stroke:none;stroke-width:1;stroke-opacity:0.498039;-inkscape-stroke:none' d='M 0.78168445 6.4081552 C 0.64612209 6.2725928 0.45772309 6.1885654 0.2499733 6.1885654 L -0.2499733 6.1885654 C -0.66547288 6.1885654 -0.99989318 6.5229857 -0.99989318 6.9384853 L -0.99989318 10.313815 L -4.3752232 10.313815 C -4.7907228 10.313815 -5.1251431 10.648236 -5.1251431 11.063735 L -5.1251431 11.563682 C -5.1251431 11.979181 -4.7907228 12.313602 -4.3752232 12.313602 L -0.99989318 12.313602 L -0.99989318 15.688932 C -0.99989318 16.104431 -0.66547288 16.438852 -0.2499733 16.438852 L 0.2499733 16.438852 C 0.66547288 16.438852 0.99989318 16.104431 0.99989318 15.688932 L 0.99989318 12.313602 L 4.3752232 12.313602 C 4.7907228 12.313602 5.1251431 11.979181 5.1251431 11.563682 L 5.1251431 11.063735 C 5.1251431 10.648236 4.7907228 10.313815 4.3752232 10.313815 L 0.99989318 10.313815 L 0.99989318 6.9384853 C 0.99989318 6.7307355 0.91724681 6.5437176 0.78168445 6.4081552 z ' transform='rotate(-45)' /%3E%3C/svg%3E") !important; - margin-left: -2px !important; - margin-right: 0px !important; + margin-left: 0px !important; + margin-right: 3px !important; width: 24px !important; height: 24px !important; padding: 4px !important; @@ -852,7 +1037,7 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt background: none !important; } -/* touch density adjustment */ +/* touch density adjustment close tab button */ :root[uidensity="touch"] .tab-close-button { padding: 0px !important; } @@ -884,7 +1069,7 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt margin-inline-end: 0px !important; } -/* drag space */ +/* drag space in tab bar */ .titlebar-spacer[type="pre-tabs"] { margin-left: -40px !important; border-inline-end: none !important; @@ -893,7 +1078,20 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt padding-top: unset !important; } -/* Override vertical shifts when moving a tab */ +/* make tab content centered except tabs close button */ +.tab-icon-stack:not([pinned]) { + order: 1 !important; + margin-inline-start: auto; +} +.tab-close-button { + order: 2 !important; +} +.tab-label-container { + max-width: min-content; + margin-inline-end: auto; +} + +/* override vertical shifts when moving a tab in tab bar */ #navigator-toolbox[movingtab] > #titlebar > #TabsToolbar { padding-bottom: unset !important; } @@ -905,30 +1103,31 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt margin-top: unset !important; } -/* all tabs */ +/* all tabs close button */ .all-tabs-close-button .toolbarbutton-icon { list-style-image: url("data:image/svg+xml,%3Csvg height='16' width='16' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1' /%3E%3Cpath id='rect1' style='opacity:1;fill:%23333333;fill-opacity:1;stroke:none;stroke-width:1;stroke-opacity:0.498039;-inkscape-stroke:none' d='M 0.78168445 6.4081552 C 0.64612209 6.2725928 0.45772309 6.1885654 0.2499733 6.1885654 L -0.2499733 6.1885654 C -0.66547288 6.1885654 -0.99989318 6.5229857 -0.99989318 6.9384853 L -0.99989318 10.313815 L -4.3752232 10.313815 C -4.7907228 10.313815 -5.1251431 10.648236 -5.1251431 11.063735 L -5.1251431 11.563682 C -5.1251431 11.979181 -4.7907228 12.313602 -4.3752232 12.313602 L -0.99989318 12.313602 L -0.99989318 15.688932 C -0.99989318 16.104431 -0.66547288 16.438852 -0.2499733 16.438852 L 0.2499733 16.438852 C 0.66547288 16.438852 0.99989318 16.104431 0.99989318 15.688932 L 0.99989318 12.313602 L 4.3752232 12.313602 C 4.7907228 12.313602 5.1251431 11.979181 5.1251431 11.563682 L 5.1251431 11.063735 C 5.1251431 10.648236 4.7907228 10.313815 4.3752232 10.313815 L 0.99989318 10.313815 L 0.99989318 6.9384853 C 0.99989318 6.7307355 0.91724681 6.5437176 0.78168445 6.4081552 z ' transform='rotate(-45)' /%3E%3C/svg%3E") !important; } - -/* make tab content centered except tabs close button */ -.tab-icon-stack:not([pinned]) { - order: 1 !important; - margin-inline-start: auto; +.all-tabs-item { + & > toolbarbutton { + border-radius: 3px !important; + } } -.tab-close-button { - order: 2 !important; +.all-tabs-item { + & > toolbarbutton > .toolbarbutton-icon { + margin-left: -15px !important; + } } -.tab-label-container { - max-width: min-content; - margin-inline-end: auto; +.all-tabs-close-button { + & > .toolbarbutton-icon { + margin-inline: 0px !important; + margin-left: -15px !important; + } } /*** VERTICAL TABS ***/ + #sidebar-main { - background: rgba(241,241,241,1) !important; -} -#TabsToolbar[collapsed] ~ #nav-bar { - box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2), 0px 0px 3px 0px rgba(0,0,0,0.15) !important; + background: #FAFAFA !important; } #TabsToolbar[collapsed] ~ #nav-bar ~ #PersonalToolbar { z-index: -1 !important; @@ -940,7 +1139,7 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt } } -/* not expanded */ +/* not expanded vertical tabs */ #tabbrowser-tabs[orient="vertical"] { &:not([expanded]) { & .tabbrowser-tab:is([selected], [multiselected]) { @@ -1014,7 +1213,7 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt background: none !important; } -/* expanded */ +/* expanded vertical tabs */ #tabbrowser-tabs[orient="vertical"][expanded] #tabs-newtab-button { margin: 4px 0px 4px -1px !important; background: none !important; @@ -1105,22 +1304,30 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt } } +/* make tab animation in system accent color */ +.tab-throbber::before { + fill: LinkText !important; + filter: saturate(150%) !important; +} +.tab-loading-burst[bursting]::before { + fill: LinkText !important; + filter: saturate(150%) !important; +} + /*** MENUBAR ***/ #menubar-items { padding-top: 2px !important; height: 33px !important; } #toolbar-menubar { - -moz-box-ordinal-group: 1; order: 0; margin: 0px !important; padding: 0px !important; - background: #DFDFDF !important; + background: none !important; border-top: none !important; - border-bottom: 1px solid #B5B5B5 !important; + border-bottom: none !important; } #toolbar-menubar[autohide="true"] { - -moz-box-ordinal-group: 1; order: 0; border-bottom: none !important; } @@ -1129,51 +1336,61 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt } /*** BOOKMARKS BAR ***/ +#PersonalToolbar { + & .toolbarbutton-1 { + align-items: center !important; + } +} +toolbarbutton.bookmark-item:not(.subviewbutton) { + padding: 6px !important; + min-height: 28px !important; + max-height: 28px !important; +} #PersonalToolbar .toolbarbutton-1:-moz-any([open], [checked], :hover, :active) { background-color: transparent !important; } -#PersonalToolbar { - -moz-box-ordinal-group: 2; - order: 2; - padding: 0px !important; +#PersonalToolbar { + order: 1; + padding: 0px 0px 4px 0px !important; max-height: 35px !important; min-height: 35px !important; - background: rgba(241,241,241,1) !important; - border-top: none !important; - border-bottom: 1px solid #D9D9D9 !important; + background: none !important; } #PlacesToolbar { min-height: 33px !important; } -#PlacesToolbarItems .bookmark-item:not(menuitem):not(menu):-moz-any([open], [checked], :hover, :active) { - background: rgba(51,51,51, 0.15) !important; +#PlacesToolbarItems { + padding: 0px 0px 4px 0px !important; } -#PersonalToolbar .toolbarbutton-1:not(#PlacesChevron):not(#import-button) > .toolbarbutton-icon { - max-width: 16px !important; - max-height: 16px !important; - margin: 6px !important; +#PlacesToolbarItems .bookmark-item:not(menuitem):not(menu):-moz-any([open], [checked], :hover, :active) { + background: rgba(0,0,0,0.08) !important; } #personal-toolbar-empty-description { margin: 3px !important; padding: 6px 6px !important; } -#wrapper-personal-bookmarks, -#wrapper-import-button { - min-height: 33px !important; +#wrapper-personal-bookmarks { + padding: 0px 0px !important; } -#PlacesChevron { +#PlacesChevron > .toolbarbutton-icon { width: 28px !important; height: 28px !important; - padding: 2px 3px !important; - margin: 3px !important; + padding: 6px !important; border-radius: 3px !important; } +#PlacesChevron { + margin: 2px 2px 4px 2px !important; +} #PlacesChevron image { background: none !important; } #import-button { - margin-left: 3px !important; - padding: 4px !important; + margin-left: 4px !important; + margin-top: 2px !important; + padding: 6px !important; +} +#import-button:-moz-any([open], [checked], :hover, :active) { + background: var(--accentcolor-percentage) !important; } /*** DROPDOWN MENU CONTENT ***/ @@ -1183,32 +1400,25 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.4) !important; } -/*** EXTENSIONS ICONS SPACING ***/ -.webextension-browser-action { - padding-left: 4px !important; - padding-right: 4px !important; -} - /*** CTRL TAB PANEL ***/ #ctrlTab-panel { border-radius: 7px !important; } -/*** CHECKBOXES ***/ -.checkbox-check:not(@-moz-document url("chrome://global/content/commonDialog.xhtml")) { - appearance: none !important; - height: 16px !important; - width: 16px !important; - background-color: white !important; - border: 1px solid rgba(0,0,0,0.20) !important; - border-radius: 3px !important; - box-shadow: 0 1px 0 0 rgba(0,0,0,0.1) !important; -} - /*** MISC. ***/ .button-menu-dropmarker { margin-left: 3px !important; } +.private-browsing-indicator-icon, +.private-browsing-indicator-with-label { + display: none !important; +} +.notificationbox-stack { + background-color: transparent !important; +} +#tab-notification-deck { + order: 2; +} /************************************************** DARK MODE with elementary Tweaks dark mode enabled @@ -1216,6 +1426,10 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt @media (prefers-color-scheme: dark) { +/* system accent color variables */ +:root { + --accentcolor-percentage: color-mix(in srgb, SelectedItem 95%, transparent 100%); +} :root { --button-primary-bgcolor: #3689e6 !important; --button-primary-hover-bgcolor: #64baff !important; @@ -1230,38 +1444,35 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt }} /*** TILED/MAXIMIZED/FULLSCREEN WINDOW FIXES ***/ -:root[gtktiledwindow="true"] #nav-bar, -:root[gtktiledwindow="true"] #nav-bar:-moz-window-inactive{ +:root[gtktiledwindow="true"] #navigator-toolbox, +:root[gtktiledwindow="true"] #navigator-toolbox:-moz-window-inactive{ border-radius: 6px 6px 0 0 !important; - box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05) !important; + box-shadow: inset 0 -1px 0 0 #131313 !important; /* this makes the border bottom to avoid double borders in vertical tabs */ } -:root[sizemode="maximized"] #nav-bar, -:root[sizemode="maximized"] #nav-bar:-moz-window-inactive, -:root[inFullscreen="true"] #nav-bar { +:root[sizemode="maximized"] #navigator-toolbox, +:root[sizemode="maximized"] #navigator-toolbox:-moz-window-inactive, +:root[inFullscreen="true"] #navigator-toolbox { border-radius: 0 0 0 0 !important; - box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05) !important; + box-shadow: inset 0 -1px 0 0 #131313 !important; /* this makes the border bottom to avoid double borders in vertical tabs */ } :root[inFullscreen="true"] #TabsToolbar { min-height: 36px !important; max-height: 36px !important; - border-top: 1px solid rgba(0,0,0,0.4) !important; - border-bottom: 1px solid rgb(36, 38, 39) !important; } /*** FOCUS FIX for Tweaks ***/ -#TabsToolbar[collapsed] ~ #nav-bar:-moz-window-inactive { - box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0px 0px 3px 0px rgba(0,0,0,0.15) !important; +#navigator-toolbox:-moz-window-inactive { + background: #333333 !important; + box-shadow: inset 0 -1px 0 0 #131313 !important; /* this makes the border bottom to avoid double borders in vertical tabs */ } #nav-bar:-moz-window-inactive { appearance: none !important; - border-radius: 6px 6px 0 0 !important; - border-bottom: 1px solid #292929 !important; - background: linear-gradient(to bottom, #3B3B3B, #383838) !important; - box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05) !important; + background: #333333 !important; + border-bottom: 1px solid #131313 !important; + box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 1px 1px 0 rgb(0,0,0,0.06) !important; } #TabsToolbar:-moz-window-inactive { - background: linear-gradient(180deg, rgb(48, 48, 48) 0%, rgb(51, 51, 51) 10%, rgb(51, 51, 51) 100%) !important; - border-bottom: 1px solid rgb(36, 38, 39) !important; + background: none !important; } #urlbar:not([focused="true"]):-moz-window-inactive { border: 1px solid #282828 !important; @@ -1271,23 +1482,21 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt } .tab-background:is([selected], [multiselected]):-moz-window-inactive { background: rgb(51,51,51) !important; - border: 1px solid rgba(45,45,45,1) !important; + border: 1px solid rgba(0,0,0,0.3) !important; } #toolbar-menubar:-moz-window-inactive { - background: #383838 !important; + background: none !important; border-top: none !important; border-bottom: none !important; } #PersonalToolbar:-moz-window-inactive { - background: rgb(51, 51, 51) !important; - border-top: none !important; - border-bottom: 1px solid rgb(36, 38, 39) !important; + background: none !important; } #PlacesToolbarItems .bookmark-item:not(menuitem):not(menu):-moz-any([open], [checked], :hover, :active) { background-color: rgba(255,255,255,0.1) !important; } #sidebar-main:-moz-window-inactive { - background: linear-gradient(180deg, rgb(48, 48, 48) 0%, rgb(51, 51, 51) 10%, rgb(51, 51, 51) 100%) !important; + background: #333333 !important; } #tabbrowser-tabbox:-moz-window-inactive { @media (-moz-bool-pref: "sidebar.revamp") { @@ -1304,36 +1513,44 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt /*** ELEMENTS IN DARK MODE for Tweaks ***/ #navigator-toolbox { - border: none !important; - background-color: rgba(255,255,255,0.2) !important; - border-radius: 6px 6px 0 0 !important; + background-color: #2C2C2C !important; + box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.5) !important; /* this makes the border bottom to avoid double borders in vertical tabs */ } #nav-bar { appearance: none !important; - border-radius: 6px 6px 0 0 !important; - border-bottom: 1px solid #1D1D1D !important; - background: linear-gradient(to bottom, #343434, #2C2C2C) !important; - box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05) !important; + background: #333333 !important; + border-bottom: 1px solid rgba(0,0,0,0.5) !important; + box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 1px 1px 0 rgb(0,0,0,0.06) !important; +} +.urlbarView-row:hover { + background-color: rgba(255,255,255,0.10) !important; } -#TabsToolbar[collapsed] ~ #nav-bar { - box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0px 0px 3px 0px rgba(0,0,0,0.15) !important; +.urlbarView-row[selected] { + background-color: SelectedItem !important; } -#urlbar[focused="true"] { - border: 1px solid #2B2C2C !important; - border-radius: 4px !important; +#urlbar[focused]:not([open]), +#searchbar:focus-within { + border: 1px solid #222222 !important; + border-radius: 3px !important; background: #3A3A3A !important; + box-shadow: inset 0px 0.1px 0.5px 0.2px rgba(0,0,0,0.18), 0 0 0 2px var(--accentcolor-percentage) !important; } -#searchbar[focused="true"] { - border: 1px solid #2B2C2C !important; - border-radius: 4px !important; - background: #3A3A3A !important; +#urlbar[focused][open], +#urlbar[open]:not([focused]) { + border: 1px solid #222222 !important; + border-radius: 6px !important; + background: #3A3A3A !important; + box-shadow: 0 2px 2px 1px rgba(0,0,0,0.1) !important; +} +#urlbar[focused] > #urlbar-background { + box-shadow: none !important; } -#urlbar:not([focused="true"]), -#searchbar:not([focused="true"]) { +#urlbar:not([focused]), +#searchbar:not(:focus-within) { border: 1px solid #222222 !important; - border-radius: 3px !important; - background: linear-gradient(#3C3C3C, #404040) !important; - box-shadow: inset 0 0 1px 0 rgba(0,0,0,0.3), 0 1px 0 0 rgba(255,255,255,0.05) !important; + border-radius: 3px !important; + background: #3A3A3A !important; + box-shadow: inset 0px 0.1px 0.5px 0.2px rgba(0,0,0,0.18), 0 1px 0 0 rgba(255,255,255,0.05) !important; } #urlbar-background { border: none !important; @@ -1341,43 +1558,39 @@ toolbar .toolbarbutton-1:not(#back-button):not(#forward-button):not(#reload-butt } .urlbarView-body-inner, .search-one-offs:not([is_searchbar="true"]) { - border-top: 1px solid #5F6670 !important; + border-top: 1px solid rgba(255,255,255,0.05) !important; } :root { --panel-separator-color: #5C5C61 !important; --urlbar-separator-color: #5F6670 !important; } -.urlbarView-row:not([type="tip"]):not([type="dynamic"])[selected] > .urlbarView-row-inner, -.search-one-offs button[selected], -.autocomplete-richlistitem[selected] { - background: rgba(0,0,0,0.2) !important; - color: #fff !important; -} #PopupSearchAutoComplete { --panel-color: #fff !important; --panel-background: linear-gradient(#3C3C3C, #404040) !important; } + +/* tab separators in dark mode */ +#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab { + border-inline-start: 1px solid transparent !important; + border-image: 0 1 linear-gradient(transparent 20%, color-mix(in srgb, rgba(0,0,0,0.7), transparent) 20%, color-mix(in srgb, rgba(0,0,0,0.7), transparent) 90%, transparent 90%) !important; +} + #TabsToolbar { - background: linear-gradient(180deg, rgb(42, 42, 42) 0%, rgb(45, 45, 45) 10%, rgb(45, 45, 45) 100%) !important; - border-bottom: 1px solid rgb(36, 38, 39) !important; + background: none !important; } .tab-background:is([selected], [multiselected]) { box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.08), inset 0 -1px 0 0 rgba(255,255,255,0.05) !important; - border: 1px solid rgba(40,40,40,1) !important; + border: 1px solid rgba(0,0,0,0.5) !important; background: #3A3A3A !important; } -.tab-background { - background: unset !important; +.tabbrowser-tab:not([selected]):hover .tab-background { + background-color: rgba(0,0,0,0.1) !important; } #PersonalToolbar { - background: rgb(45, 45, 45) !important; - border-top: none !important; - border-bottom: 1px solid rgb(36, 38, 39) !important; + background: none !important; } #toolbar-menubar { - background: #2C2C2C !important; - border-top: none !important; - border-bottom: none !important; + background: none !important; } menubar > menu[open="true"] { color: #d1d1d1 !important; @@ -1386,31 +1599,23 @@ menubar > menu[open="true"] { --urlbar-separator-color: #5F6670 !important; } toolbar[customizing] > .overflow-button:hover > .toolbarbutton-icon { - background: rgba(255,255,255, 0.3) !important; + background: var(--accentcolor-percentage) !important; } -toolbar:not(#PersonalToolbar):not(#TabsToolbar) .toolbarbutton-1:not([disabled="true"]):not([data-extensionid]):-moz-any([open], [checked], :active) > .toolbarbutton-icon, -toolbar:not(#PersonalToolbar):not(#TabsToolbar) .toolbarbutton-1:not(#PanelUI-menu-button):not([disabled="true"]):not([data-extensionid]):-moz-any([open], [checked], :active) > .toolbarbutton-badge-stack { - background-color: rgba(255,255,255,0.2) !important; -} -toolbar .toolbarbutton-1:not([disabled="true"]):not([data-extensionid]):-moz-any([open], [checked], :hover, :active) > .toolbarbutton-badge-stack { - background-color: rgba(255,255,255,0.2) !important; -} -toolbar .toolbaritem-combined-buttons > .toolbarbutton-1:-moz-any([open], [checked], :active), -toolbar .toolbarbutton-1[data-extensionid]:-moz-any([open], [checked], :active) { - background: radial-gradient(circle, rgba(255,255,255,0.2) 49%, rgba(255,255,255,0) 50%) !important; +toolbar:not(#PersonalToolbar):not(#TabsToolbar) .toolbarbutton-1:not([disabled="true"], [data-extensionid], #nav-bar-overflow-button):is([open], [checked], :active) > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack) { + background: var(--accentcolor-percentage) !important; + clip-path: circle(50%) !important; } -#TabsToolbar .toolbarbutton-1:not([disabled="true"]):-moz-any([open], [checked], :active) > .toolbarbutton-icon, -#TabsToolbar .toolbarbutton-1:not([disabled="true"]):-moz-any([open], [checked], :active) > .toolbarbutton-badge-stack { - background: rgba(255,255,255, 0.2) !important; +#TabsToolbar .toolbarbutton-1:not([disabled="true"], #alltabs-button, #new-tab-button, #tabs-newtab-button, #firefox-view-button):is([open], [checked], :active) > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack) { + background: var(--accentcolor-percentage) !important; clip-path: none !important; } -#PersonalToolbar .toolbarbutton-1:not([disabled="true"]):-moz-any([open], [checked], :hover, :active), -#PersonalToolbar .toolbarbutton-1:not([disabled="true"]):-moz-any([open], [checked], :hover, :active) > .toolbarbutton-badge-stack { - background: rgba(255,255,255, 0.2) !important; +#PersonalToolbar .toolbarbutton-1:not([disabled="true"], #PlacesChevron):is([open], [checked], :active), +#PersonalToolbar .toolbarbutton-1:not([disabled="true"]):is([open], [checked], :active) > .toolbarbutton-badge-stack { + background: var(--accentcolor-percentage) !important; clip-path: none !important; } #sidebar-main { - background: linear-gradient(180deg, rgb(42, 42, 42) 0%, rgb(45, 45, 45) 10%, rgb(45, 45, 45) 100%) !important; + background: #333333 !important; } #tabbrowser-tabbox { @media (-moz-bool-pref: "sidebar.revamp") { @@ -1422,6 +1627,15 @@ toolbar .toolbarbutton-1[data-extensionid]:-moz-any([open], [checked], :active) --toolbarbutton-hover-background: #2d5b86 !important; --toolbarbutton-active-background: #2d5b86 !important; } +.notificationbox-stack { + background-color: transparent !important; +} + +/* selected text and icons url bar */ +::selection { + color: #fff !important; + background-color: var(--accentcolor-percentage) !important; +} /*** BUTTONS IN DARK MODE for Tweaks ***/ .titlebar-min image { @@ -1479,7 +1693,7 @@ toolbar .toolbarbutton-1[data-extensionid]:-moz-any([open], [checked], :active) list-style-image: url("data:image/svg+xml,%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' id='svg6' version='1.1' width='16' height='16'%3E%3Cmetadata id='metadata12'%3E%3Crdf:RDF%3E%3Ccc:Work rdf:about=''%3E%3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E%3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage' /%3E%3Cdc:title%3E%3C/dc:title%3E%3C/cc:Work%3E%3C/rdf:RDF%3E%3C/metadata%3E%3Cdefs id='defs10' /%3E%3Cpath id='path873-5' style='opacity:1;fill:%23ffffff;stroke:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stop-color:%23000000' d='m 7.2260666,2.5 c 0.4312184,0 0.7783725,0.3346464 0.7783725,0.7503279 V 6 H 13.221628 C 13.652847,6 14,6.3346463 14,6.7503279 V 8.249672 C 14,8.6653541 13.652847,9.0004099 13.221628,9 H 8.0044391 v 2.749674 C 8.0044391,12.165354 7.657285,12.5 7.2260666,12.5 6.9936571,12.5 6.7861919,12.40264 6.6438073,12.247938 L 2.212837,8.0241533 C 2.081227,7.8897736 2,7.7091601 2,7.5097679 2,7.3103755 2.081225,7.129763 2.212837,6.995383 L 6.6438073,2.7520634 C 6.7861919,2.5973529 6.9936571,2.5 7.2260666,2.5 Z' /%3E%3C/svg%3E") !important; } #nav-bar #back-button[checked] > .toolbarbutton-icon { - background-color: rgba(255,255,255,0.2) !important; + background-color: var(--accentcolor-percentage) !important; box-shadow: none !important; } #nav-bar #forward-button { @@ -1503,6 +1717,10 @@ toolbar .toolbarbutton-1[data-extensionid]:-moz-any([open], [checked], :active) #tabs-newtab-button .toolbarbutton-icon { list-style-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg color='%235b5b5b' transform='translate%28-293 -117%29'%3E%3Cpath d='M300 120v4h-4v2h4v4h2v-4h4v-2h-4v-4z' fill='rgb(255, 255, 255)' overflow='visible' style='marker:none'/%3E%3C/g%3E%3C/svg%3E") !important; } +#new-tab-button:-moz-any([open], [checked], :active) .toolbarbutton-icon, +#tabs-newtab-button:-moz-any([open], [checked], :active) .toolbarbutton-icon { + background-color: var(--accentcolor-percentage) !important; +} #TabsToolbar .tab-close-button { list-style-image: url("data:image/svg+xml,%3Csvg height='16' width='16' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1' /%3E%3Cpath id='rect1' style='opacity:1;fill:%23ffffff;fill-opacity:1;stroke:none;stroke-width:1;stroke-opacity:0.498039;-inkscape-stroke:none' d='M 0.78168445 6.4081552 C 0.64612209 6.2725928 0.45772309 6.1885654 0.2499733 6.1885654 L -0.2499733 6.1885654 C -0.66547288 6.1885654 -0.99989318 6.5229857 -0.99989318 6.9384853 L -0.99989318 10.313815 L -4.3752232 10.313815 C -4.7907228 10.313815 -5.1251431 10.648236 -5.1251431 11.063735 L -5.1251431 11.563682 C -5.1251431 11.979181 -4.7907228 12.313602 -4.3752232 12.313602 L -0.99989318 12.313602 L -0.99989318 15.688932 C -0.99989318 16.104431 -0.66547288 16.438852 -0.2499733 16.438852 L 0.2499733 16.438852 C 0.66547288 16.438852 0.99989318 16.104431 0.99989318 15.688932 L 0.99989318 12.313602 L 4.3752232 12.313602 C 4.7907228 12.313602 5.1251431 11.979181 5.1251431 11.563682 L 5.1251431 11.063735 C 5.1251431 10.648236 4.7907228 10.313815 4.3752232 10.313815 L 0.99989318 10.313815 L 0.99989318 6.9384853 C 0.99989318 6.7307355 0.91724681 6.5437176 0.78168445 6.4081552 z ' transform='rotate(-45)' /%3E%3C/svg%3E") !important; } @@ -1516,53 +1734,12 @@ toolbar .toolbarbutton-1[data-extensionid]:-moz-any([open], [checked], :active) #tabbrowser-tabs[orient="vertical"][expanded] .tab-close-button { list-style-image: url("data:image/svg+xml,%3Csvg height='16' width='16' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1' /%3E%3Cpath id='rect1' style='opacity:1;fill:%23ffffff;fill-opacity:1;stroke:none;stroke-width:1;stroke-opacity:0.498039;-inkscape-stroke:none' d='M 0.78168445 6.4081552 C 0.64612209 6.2725928 0.45772309 6.1885654 0.2499733 6.1885654 L -0.2499733 6.1885654 C -0.66547288 6.1885654 -0.99989318 6.5229857 -0.99989318 6.9384853 L -0.99989318 10.313815 L -4.3752232 10.313815 C -4.7907228 10.313815 -5.1251431 10.648236 -5.1251431 11.063735 L -5.1251431 11.563682 C -5.1251431 11.979181 -4.7907228 12.313602 -4.3752232 12.313602 L -0.99989318 12.313602 L -0.99989318 15.688932 C -0.99989318 16.104431 -0.66547288 16.438852 -0.2499733 16.438852 L 0.2499733 16.438852 C 0.66547288 16.438852 0.99989318 16.104431 0.99989318 15.688932 L 0.99989318 12.313602 L 4.3752232 12.313602 C 4.7907228 12.313602 5.1251431 11.979181 5.1251431 11.563682 L 5.1251431 11.063735 C 5.1251431 10.648236 4.7907228 10.313815 4.3752232 10.313815 L 0.99989318 10.313815 L 0.99989318 6.9384853 C 0.99989318 6.7307355 0.91724681 6.5437176 0.78168445 6.4081552 z ' transform='rotate(-45)' /%3E%3C/svg%3E") !important; } -#customization-lwtheme-button, -#customization-toolbar-visibility-button, -#customization-uidensity-button, -#customization-reset-button, -#customization-done-button { - appearance: none !important; - padding: 5px !important; - background-color: rgba(68,68,68,1) !important; - border: 1px solid rgba(0,0,0,0.50) !important; - border-radius: 3px !important; - box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.10) !important; - color: #fff !important; -} -#customization-lwtheme-button[open="true"], -#customization-toolbar-visibility-button[open="true"], -#customization-uidensity-button[open="true"], -#customization-reset-button:active, -#customization-done-button:active { - appearance: none !important; - padding: 5px !important; - background-color: rgba(68,68,68,1) !important; - border: 1px solid rgba(0,0,0,0.50) !important; - border-radius: 3px !important; - box-shadow: inset 0 0 3px 0 rgba(0,0,0,0.2) !important; - color: #fff !important; -} -.button-menu-dropmarker { - margin-left: 3px !important; -} -.checkbox-check { - height: 16px !important; - width: 16px !important; - background-color: rgba(68,68,68,1) !important; - border: 1px solid rgba(56,56,56,1) !important; - border-radius: 3px !important; - box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.10) !important; -} /*** TEXT COLOR DARK MODE for Tweaks ***/ .bookmark-item > .toolbarbutton-text { color: #fff !important; text-shadow: none !important; } -.subviewbutton > .toolbarbutton-text { - color: #fff !important; - text-shadow: none !important; -} #toolbar-menubar > #menubar-items > #main-menubar > menu > label { color: #fff !important; text-shadow: none !important; @@ -1579,49 +1756,46 @@ toolbar .toolbarbutton-1[data-extensionid]:-moz-any([open], [checked], :active) private browsing ****************/ +/* system accent color variables */ +:root[privatebrowsingmode="temporary"] { + --accentcolor-percentage: color-mix(in srgb, LinkText 70%, transparent 100%); +} + /*** TILED/MAXIMIZED/FULLSCREEN WINDOW FIXES ***/ -#main-window[privatebrowsingmode="temporary"][gtktiledwindow="true"] #nav-bar, -#main-window[privatebrowsingmode="temporary"][gtktiledwindow="true"] #nav-bar:-moz-window-inactive{ - box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05) !important; +#main-window[privatebrowsingmode="temporary"][gtktiledwindow="true"] #navigator-toolbox, +#main-window[privatebrowsingmode="temporary"][gtktiledwindow="true"] #navigator-toolbox:-moz-window-inactive { + border-radius: 6px 6px 0 0 !important; } -#main-window[privatebrowsingmode="temporary"][sizemode="maximized"] #nav-bar, -#main-window[privatebrowsingmode="temporary"][sizemode="maximized"] #nav-bar:-moz-window-inactive, -#main-window[privatebrowsingmode="temporary"][inFullscreen="true"] #nav-bar { +#main-window[privatebrowsingmode="temporary"][sizemode="maximized"] #navigator-toolbox, +#main-window[privatebrowsingmode="temporary"][sizemode="maximized"] #navigator-toolbox:-moz-window-inactive, +#main-window[privatebrowsingmode="temporary"][inFullscreen="true"] #navigator-toolbox { border-radius: 0 0 0 0 !important; - box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05) !important; } #main-window[privatebrowsingmode="temporary"][inFullscreen="true"] #TabsToolbar { min-height: 36px !important; max-height: 36px !important; - border-top: 1px solid rgba(0,0,0,0.4) !important; - border-bottom: 1px solid rgba(0,0,0,0.4) !important; } /*** FOCUS FIX for PRIVATE MODE ***/ -#main-window[privatebrowsingmode="temporary"] #TabsToolbar[collapsed] ~ #nav-bar:-moz-window-inactive { - box-shadow: linear-gradient(to right, rgba(139,121,226,1), rgba(199,128,188,1)), 0px 0px 3px 0px rgba(0,0,0,0.3) !important; +#main-window[privatebrowsingmode="temporary"] #navigator-toolbox:-moz-window-inactive { + background: linear-gradient(to right, rgba(105,75,188,1) 0%, rgba(105,75,188,1) 20%, rgba(162,76,141,1) 100%) !important; + box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.4) !important; /* this makes the border bottom to avoid double borders in vertical tabs */ } #main-window[privatebrowsingmode="temporary"] #nav-bar:-moz-window-inactive { - background: linear-gradient(to right, rgba(139,121,226,1), rgba(199,128,188,1)) !important; -} -#main-window[privatebrowsingmode="temporary"] #urlbar:not([focused="true"]):-moz-window-inactive { - background: linear-gradient(to right, #A793FF, #D198E5) !important; -} -#main-window[privatebrowsingmode="temporary"] #searchbar:not([focused="true"]):-moz-window-inactive { - background: #D198E5 !important; + background: linear-gradient(to right, rgba(105,75,188,1) 0%, rgba(105,75,188,1) 20%, rgba(162,76,141,1) 100%) !important; + border-bottom: 1px solid rgba(0,0,0,0.4) !important; + box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 1px 1px 0 rgb(0,0,0,0.06) !important; } #main-window[privatebrowsingmode="temporary"] #TabsToolbar:-moz-window-inactive { - background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0) 6%), - linear-gradient(90deg, rgba(167,147,255,1), rgba(229,155,216,1) 100%) !important; + background: none !important; + box-shadow: none !important; } #main-window[privatebrowsingmode="temporary"] #PersonalToolbar:-moz-window-inactive { - background: linear-gradient(90deg, rgba(167,147,255,1), rgba(229,155,216,1) 100%) !important; + background: none !important; + box-shadow: none !important; } #main-window[privatebrowsingmode="temporary"] #toolbar-menubar[autohide="false"]:-moz-window-inactive { - background: linear-gradient(to right, rgba(139,121,226,1), rgba(199,128,188,1)) !important; -} -#main-window[privatebrowsingmode="temporary"] #sidebar-main:-moz-window-inactive { - background: linear-gradient(to right, rgba(167,147,255,1), rgba(177,148,249,1)) !important; + background: none !important; } /*** ELEMENTS IN PRIVATE MODE ***/ @@ -1632,33 +1806,61 @@ private browsing --toolbarseparator-color: rgba(255,255,255,0.6) !important; } #main-window[privatebrowsingmode="temporary"] #navigator-toolbox { - background-color: rgba(0,0,0,1) !important; + background: linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0.1) 100%), + linear-gradient(to right, rgba(105,75,188,1) 0%, rgba(105,75,188,1) 20%, rgba(162,76,141,1) 100%) !important; + box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.4) !important; /* this makes the border bottom to avoid double borders in vertical tabs */ } #main-window[privatebrowsingmode="temporary"] #nav-bar { -moz-appearance: none !important; border-bottom: 1px solid rgba(0,0,0,0.4) !important; - background: linear-gradient(to right, rgba(94,75,197,1), rgba(162,76,141,1)) !important; - box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05) !important; + box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 1px 1px 0 rgba(0,0,0,0.06) !important; + background: linear-gradient(to right, rgba(105,75,188,1) 0%, rgba(105,75,188,1) 20%, rgba(162,76,141,1) 100%) !important; } -#main-window[privatebrowsingmode="temporary"] #TabsToolbar[collapsed] ~ #nav-bar { - box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0px 0px 3px 0px rgba(0,0,0,0.3) !important; +#main-window[privatebrowsingmode="temporary"] .urlbarView-row:hover { + background-color: rgba(0,0,0,0.1) !important; +} +#main-window[privatebrowsingmode="temporary"] .urlbarView-row[selected] { + background-color: SelectedItem !important; +} +#main-window[privatebrowsingmode="temporary"] #urlbar[focused]:not([open]) { + border: 1px solid rgba(0,0,0,0.4) !important; + border-radius: 3px !important; + background: linear-gradient(to right, #8266C4, #A267A9) !important; + box-shadow: inset 0px 0.1px 0.5px 0.2px rgba(0,0,0,0.18), 0 0 0 2px var(--accentcolor-percentage) !important; + filter: none !important; } -#main-window[privatebrowsingmode="temporary"] #searchbar:not([focused="true"]) { +#main-window[privatebrowsingmode="temporary"] #searchbar:focus-within { border: 1px solid rgba(0,0,0,0.4) !important; - border-radius: 3px !important; + border-radius: 3px !important; background: #A267A9 !important; - box-shadow: inset 0 0 1px 0 rgba(0,0,0,0.3), 0 1px 0 0 rgba(255,255,255,0.05) !important; + box-shadow: inset 0px 0.1px 0.5px 0.2px rgba(0,0,0,0.18), 0 0 0 2px var(--accentcolor-percentage) !important; + filter: none !important; } -#main-window[privatebrowsingmode="temporary"] #urlbar:not([focused="true"]) { +#main-window[privatebrowsingmode="temporary"] #urlbar[focused][open], +#main-window[privatebrowsingmode="temporary"] #urlbar[open]:not([focused]) { border: 1px solid rgba(0,0,0,0.4) !important; - border-radius: 3px !important; + border-radius: 6px !important; background: linear-gradient(to right, #8266C4, #A267A9) !important; - box-shadow: inset 0 0 1px 0 rgba(0,0,0,0.3), 0 1px 0 0 rgba(255,255,255,0.05) !important; + box-shadow: 0 2px 2px 1px rgba(0,0,0,0.1) !important; +} +#main-window[privatebrowsingmode="temporary"] #urlbar[focused] > #urlbar-background { + box-shadow: none !important; } -#main-window[privatebrowsingmode="temporary"] #urlbar[focused="true"] { +#main-window[privatebrowsingmode="temporary"] #urlbar:not([focused]){ border: 1px solid rgba(0,0,0,0.4) !important; - border-radius: 4px !important; + border-radius: 3px !important; background: linear-gradient(to right, #8266C4, #A267A9) !important; + box-shadow: inset 0px 0.1px 0.5px 0.2px rgba(0,0,0,0.18), 0 1px 0 0 rgba(255,255,255,0.05) !important; +} +#main-window[privatebrowsingmode="temporary"] #searchbar:not(:focus-within) { + border: 1px solid rgba(0,0,0,0.4) !important; + border-radius: 3px !important; + background: #A267A9 !important; + box-shadow: inset 0px 0.1px 0.5px 0.2px rgba(0,0,0,0.18), 0 1px 0 0 rgba(255,255,255,0.05) !important; +} +#main-window[privatebrowsingmode="temporary"] #PopupSearchAutoComplete .autocomplete-richlistitem[selected], +#main-window[privatebrowsingmode="temporary"] .searchbar-engine-one-off-item[selected] { + background: var(--accentcolor-percentage) !important; } #main-window[privatebrowsingmode="temporary"] .urlbarView-body-inner, #main-window[privatebrowsingmode="temporary"] .search-one-offs:not([is_searchbar="true"]), @@ -1675,66 +1877,83 @@ private browsing } #main-window[privatebrowsingmode="temporary"] #TabsToolbar { appearance: none !important; - background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0) 6%), - linear-gradient(90deg, rgba(115,98,200,1), rgba(171,100,157,1) 100%) !important; - border-bottom: 1px solid rgba(0,0,0,0.2) !important; + background: none !important; } #main-window[privatebrowsingmode="temporary"] .tab-background:is([selected], [multiselected]) { background: rgba(255,255,255,0.25) !important; border: 1px solid rgba(0,0,0,0.4) !important; } -#main-window[privatebrowsingmode="temporary"] #tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[selected="true"] { +#main-window[privatebrowsingmode="temporary"] #tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[selected] { background: rgba(141,32,174,1) !important; border: none !important; } + +/* tab separators in private mode */ +#main-window[privatebrowsingmode="temporary"] #tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab { + border-inline-start: 1px solid transparent !important; + border-image: 0 1 linear-gradient(transparent 20%, color-mix(in srgb, rgba(0,0,0,0.5), transparent) 20%, color-mix(in srgb, rgba(0,0,0,0.5), transparent) 90%, transparent 90%) !important; +} +#main-window[privatebrowsingmode="temporary"] #tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab:hover, +#main-window[privatebrowsingmode="temporary"] #tabbrowser-tabs[orient="horizontal"]:not([movingtab]) .tabbrowser-tab:hover + .tabbrowser-tab:not([first-visible-unpinned-tab]), +#main-window[privatebrowsingmode="temporary"] #tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab:first-child, +#main-window[privatebrowsingmode="temporary"] #tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab[selected], +#main-window[privatebrowsingmode="temporary"] #tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab[multiselected], +#main-window[privatebrowsingmode="temporary"] #tabbrowser-tabs[orient="horizontal"] #tabbrowser-arrowscrollbox[overflowing] > .tabbrowser-tab[first-visible-unpinned-tab], +#main-window[privatebrowsingmode="temporary"] #tabbrowser-tabs[orient="horizontal"]:not([movingtab]) .tabbrowser-tab[multiselected] + .tabbrowser-tab, +#main-window[privatebrowsingmode="temporary"] #tabbrowser-tabs[orient="horizontal"]:not([movingtab]) .tabbrowser-tab[selected] + .tabbrowser-tab, +#main-window[privatebrowsingmode="temporary"] #tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab:is([selected],[multiselected]) + .tabbrowser-tab[hidden] + .tabbrowser-tab { + border-inline-start: 1px solid transparent !important; + border-image: none !important; +} + +#main-window[privatebrowsingmode="temporary"] .tabbrowser-tab:not([selected]):hover .tab-background { + background-color: rgba(0,0,0,0.1) !important; +} #main-window[privatebrowsingmode="temporary"] #PersonalToolbar { - background: linear-gradient(90deg, rgba(115,98,200,1), rgba(171,100,157,1) 100%) !important; - border-top: none !important; - border-bottom: 1px solid rgba(0,0,0,0.2) !important; + background: none !important; } #main-window[privatebrowsingmode="temporary"] #toolbar-menubar[autohide="false"] { - background: linear-gradient(to right, rgba(94,75,197,1), rgba(162,76,141,1)) !important; - border-top: none !important; - border-bottom: 1px solid rgba(0,0,0,0.4) !important; + background: none !important; } #main-window[privatebrowsingmode="temporary"] #PlacesToolbarItems .bookmark-item:not(menuitem):not(menu):-moz-any([open], [checked], :hover, :active) { background-color: rgba(255,255,255,0.3) !important; } -#main-window[privatebrowsingmode="temporary"] #customization-container { - background: #2d0b44 !important; -} #main-window[privatebrowsingmode="temporary"] #PanelUI-menu-button:hover:not([open]):not([checked]):not(:active) > .toolbarbutton-badge-stack, #main-window[privatebrowsingmode="temporary"] #fxa-toolbar-menu-button:hover:not([open]):not([checked]):not(:active) > .toolbarbutton-badge-stack { background: none !important; } -#main-window[privatebrowsingmode="temporary"] toolbar:not(#PersonalToolbar):not(#TabsToolbar) .toolbarbutton-1:not([disabled="true"]):not([data-extensionid]):-moz-any([open], [checked], :active) > .toolbarbutton-icon, -#main-window[privatebrowsingmode="temporary"] toolbar:not(#PersonalToolbar):not(#TabsToolbar) .toolbarbutton-1:not(#PanelUI-menu-button):not([disabled="true"]):not([data-extensionid]):-moz-any([open], [checked], :active) > .toolbarbutton-badge-stack { - background-color: rgba(255,255,255,0.2) !important; -} -#main-window[privatebrowsingmode="temporary"] toolbar .toolbarbutton-1:not([disabled="true"]):not([data-extensionid]):-moz-any([open], [checked], :hover, :active) > .toolbarbutton-badge-stack { - background-color: rgba(255,255,255,0.2) !important; -} -#main-window[privatebrowsingmode="temporary"] toolbar .toolbaritem-combined-buttons > .toolbarbutton-1:-moz-any([open], [checked], :active), -#main-window[privatebrowsingmode="temporary"] toolbar .toolbarbutton-1[data-extensionid]:-moz-any([open], [checked], :active){ - background: radial-gradient(circle, rgba(255,255,255,0.2) 49%, rgba(255,255,255,0) 50%) !important; +#main-window[privatebrowsingmode="temporary"] toolbar:not(#PersonalToolbar):not(#TabsToolbar) .toolbarbutton-1:not([disabled="true"], [data-extensionid], #nav-bar-overflow-button):is([open], [checked], :active) > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack) { + background: var(--accentcolor-percentage) !important; + clip-path: circle(50%) !important; } -#main-window[privatebrowsingmode="temporary"] #TabsToolbar .toolbarbutton-1:not([disabled="true"]):-moz-any([open], [checked], :active) > .toolbarbutton-icon, -#main-window[privatebrowsingmode="temporary"] #TabsToolbar .toolbarbutton-1:not([disabled="true"]):-moz-any([open], [checked], :hover, :active) > .toolbarbutton-badge-stack { - background: rgba(255,255,255,0.2) !important; +#main-window[privatebrowsingmode="temporary"] #TabsToolbar .toolbarbutton-1:not([disabled="true"], #alltabs-button, #new-tab-button, #tabs-newtab-button, #firefox-view-button):is([open], [checked], :active) > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack) { + background: var(--accentcolor-percentage) !important; clip-path: none !important; } -#main-window[privatebrowsingmode="temporary"] #PersonalToolbar .toolbarbutton-1:not([disabled="true"]):-moz-any([open], [checked], :hover, :active), -#main-window[privatebrowsingmode="temporary"] #PersonalToolbar .toolbarbutton-1:not([disabled="true"]):-moz-any([open], [checked], :hover, :active) > .toolbarbutton-badge-stack { - background: rgba(255,255,255, 0.2) !important; +#main-window[privatebrowsingmode="temporary"] #PersonalToolbar .toolbarbutton-1:not([disabled="true"], #PlacesChevron):is([open], [checked], :active), +#main-window[privatebrowsingmode="temporary"] #PersonalToolbar .toolbarbutton-1:not([disabled="true"]):is([open], [checked], :active) > .toolbarbutton-badge-stack { + background: var(--accentcolor-percentage) !important; clip-path: none !important; } #main-window[privatebrowsingmode="temporary"] #sidebar-main { - background: linear-gradient(to right, rgba(115,98,200,1), rgba(126,98,192,1)) !important; + background: rgba(105,75,188,1) !important; } :root[privatebrowsingmode="temporary"] { --toolbarbutton-hover-background: rgba(255,255,255,0.3) !important; --toolbarbutton-active-background: rgba(255,255,255,0.3) !important; } +#main-window[privatebrowsingmode="temporary"] #PlacesToolbarItems .bookmark-item:not(menuitem):not(menu):-moz-any([open], [checked], :hover, :active) { + background: rgba(0,0,0,0.1) !important;; +} +#main-window[privatebrowsingmode="temporary"] .notificationbox-stack { + background: transparent !important; +} + +/* selected text and icons url bar */ +#main-window[privatebrowsingmode="temporary"] ::selection { + color: #fff !important; + background-color: var(--accentcolor-percentage) !important; +} /*** MAKE WINDOW CONTROLS WHITE for PRIVATE MODE ***/ #main-window[privatebrowsingmode="temporary"] .titlebar-min image { @@ -1793,6 +2012,10 @@ private browsing #main-window[privatebrowsingmode="temporary"] #back-button > .toolbarbutton-icon { list-style-image: url("data:image/svg+xml,%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' id='svg6' version='1.1' width='16' height='16'%3E%3Cmetadata id='metadata12'%3E%3Crdf:RDF%3E%3Ccc:Work rdf:about=''%3E%3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E%3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage' /%3E%3Cdc:title%3E%3C/dc:title%3E%3C/cc:Work%3E%3C/rdf:RDF%3E%3C/metadata%3E%3Cdefs id='defs10' /%3E%3Cpath id='path873-5' style='opacity:1;fill:%23ffffff;stroke:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stop-color:%23000000' d='m 7.2260666,2.5 c 0.4312184,0 0.7783725,0.3346464 0.7783725,0.7503279 V 6 H 13.221628 C 13.652847,6 14,6.3346463 14,6.7503279 V 8.249672 C 14,8.6653541 13.652847,9.0004099 13.221628,9 H 8.0044391 v 2.749674 C 8.0044391,12.165354 7.657285,12.5 7.2260666,12.5 6.9936571,12.5 6.7861919,12.40264 6.6438073,12.247938 L 2.212837,8.0241533 C 2.081227,7.8897736 2,7.7091601 2,7.5097679 2,7.3103755 2.081225,7.129763 2.212837,6.995383 L 6.6438073,2.7520634 C 6.7861919,2.5973529 6.9936571,2.5 7.2260666,2.5 Z' /%3E%3C/svg%3E") !important; } +#main-window[privatebrowsingmode="temporary"] #back-button[checked] > .toolbarbutton-icon { + background-color: var(--accentcolor-percentage) !important; + box-shadow: none !important; +} #main-window[privatebrowsingmode="temporary"] #forward-button { list-style-image: url("data:image/svg+xml,%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' id='svg6' version='1.1' width='16' height='16'%3E%3Cmetadata id='metadata12'%3E%3Crdf:RDF%3E%3Ccc:Work rdf:about=''%3E%3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E%3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage' /%3E%3Cdc:title%3E%3C/dc:title%3E%3C/cc:Work%3E%3C/rdf:RDF%3E%3C/metadata%3E%3Cdefs id='defs10' /%3E%3Cpath id='path873-5' style='opacity:1;fill:%23ffffff;stroke:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stop-color:%23000000' d='M 8.7739334,2.5 C 8.342715,2.5 7.9955609,2.8346464 7.9955609,3.2503279 L 7.9955609,6 H 2.778372 C 2.347153,6 2,6.3346463 2,6.7503279 L 2,8.249672 C 2,8.6653541 2.3471532,9.0004099 2.778372,9 h 5.2171889 l 0,2.749674 c 0,0.41568 0.3471541,0.750326 0.7783725,0.750326 0.2324095,0 0.4398747,-0.09736 0.5822593,-0.252062 L 13.787163,8.0241533 C 13.918773,7.8897736 14,7.7091601 14,7.5097679 14,7.3103755 13.918775,7.129763 13.787163,6.995383 L 9.3561927,2.7520634 C 9.2138081,2.5973529 9.0063429,2.5 8.7739334,2.5 Z' /%3E%3C/svg%3E") !important; } @@ -1814,6 +2037,10 @@ private browsing #main-window[privatebrowsingmode="temporary"] #tabs-newtab-button .toolbarbutton-icon { list-style-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg color='%235b5b5b' transform='translate%28-293 -117%29'%3E%3Cpath d='M300 120v4h-4v2h4v4h2v-4h4v-2h-4v-4z' fill='rgb(255, 255, 255)' overflow='visible' style='marker:none'/%3E%3C/g%3E%3C/svg%3E") !important; } +#main-window[privatebrowsingmode="temporary"] #new-tab-button:-moz-any([open], [checked], :active) .toolbarbutton-icon, +#main-window[privatebrowsingmode="temporary"] #tabs-newtab-button:-moz-any([open], [checked], :active) .toolbarbutton-icon { + background-color: var(--accentcolor-percentage) !important; +} #main-window[privatebrowsingmode="temporary"] #TabsToolbar .tab-close-button { list-style-image: url("data:image/svg+xml,%3Csvg height='16' width='16' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1' /%3E%3Cpath id='rect1' style='opacity:1;fill:%23ffffff;fill-opacity:1;stroke:none;stroke-width:1;stroke-opacity:0.498039;-inkscape-stroke:none' d='M 0.78168445 6.4081552 C 0.64612209 6.2725928 0.45772309 6.1885654 0.2499733 6.1885654 L -0.2499733 6.1885654 C -0.66547288 6.1885654 -0.99989318 6.5229857 -0.99989318 6.9384853 L -0.99989318 10.313815 L -4.3752232 10.313815 C -4.7907228 10.313815 -5.1251431 10.648236 -5.1251431 11.063735 L -5.1251431 11.563682 C -5.1251431 11.979181 -4.7907228 12.313602 -4.3752232 12.313602 L -0.99989318 12.313602 L -0.99989318 15.688932 C -0.99989318 16.104431 -0.66547288 16.438852 -0.2499733 16.438852 L 0.2499733 16.438852 C 0.66547288 16.438852 0.99989318 16.104431 0.99989318 15.688932 L 0.99989318 12.313602 L 4.3752232 12.313602 C 4.7907228 12.313602 5.1251431 11.979181 5.1251431 11.563682 L 5.1251431 11.063735 C 5.1251431 10.648236 4.7907228 10.313815 4.3752232 10.313815 L 0.99989318 10.313815 L 0.99989318 6.9384853 C 0.99989318 6.7307355 0.91724681 6.5437176 0.78168445 6.4081552 z ' transform='rotate(-45)' /%3E%3C/svg%3E") !important; } @@ -1824,42 +2051,3 @@ private browsing #main-window[privatebrowsingmode="temporary"] #tabbrowser-tabs[orient="vertical"][expanded] .tab-close-button { list-style-image: url("data:image/svg+xml,%3Csvg height='16' width='16' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1' /%3E%3Cpath id='rect1' style='opacity:1;fill:%23ffffff;fill-opacity:1;stroke:none;stroke-width:1;stroke-opacity:0.498039;-inkscape-stroke:none' d='M 0.78168445 6.4081552 C 0.64612209 6.2725928 0.45772309 6.1885654 0.2499733 6.1885654 L -0.2499733 6.1885654 C -0.66547288 6.1885654 -0.99989318 6.5229857 -0.99989318 6.9384853 L -0.99989318 10.313815 L -4.3752232 10.313815 C -4.7907228 10.313815 -5.1251431 10.648236 -5.1251431 11.063735 L -5.1251431 11.563682 C -5.1251431 11.979181 -4.7907228 12.313602 -4.3752232 12.313602 L -0.99989318 12.313602 L -0.99989318 15.688932 C -0.99989318 16.104431 -0.66547288 16.438852 -0.2499733 16.438852 L 0.2499733 16.438852 C 0.66547288 16.438852 0.99989318 16.104431 0.99989318 15.688932 L 0.99989318 12.313602 L 4.3752232 12.313602 C 4.7907228 12.313602 5.1251431 11.979181 5.1251431 11.563682 L 5.1251431 11.063735 C 5.1251431 10.648236 4.7907228 10.313815 4.3752232 10.313815 L 0.99989318 10.313815 L 0.99989318 6.9384853 C 0.99989318 6.7307355 0.91724681 6.5437176 0.78168445 6.4081552 z ' transform='rotate(-45)' /%3E%3C/svg%3E") !important; } - -/*** CUSTOMIZATION BUTTONS for PRIVATE MODE ***/ -#main-window[privatebrowsingmode="temporary"] #customization-lwtheme-button, -#main-window[privatebrowsingmode="temporary"] #customization-toolbar-visibility-button, -#main-window[privatebrowsingmode="temporary"] #customization-uidensity-button, -#main-window[privatebrowsingmode="temporary"] #customization-reset-button, -#main-window[privatebrowsingmode="temporary"] #customization-done-button { - appearance: none !important; - padding: 5px !important; - background-color: rgba(255,255,255,0.2) !important; - border: 1px solid rgba(0,0,0,0.50) !important; - border-radius: 3px !important; - box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.10) !important; - color: #fff !important; -} -#main-window[privatebrowsingmode="temporary"] #customization-lwtheme-button[open="true"], -#main-window[privatebrowsingmode="temporary"] #customization-toolbar-visibility-button[open="true"], -#main-window[privatebrowsingmode="temporary"] #customization-uidensity-button[open="true"], -#main-window[privatebrowsingmode="temporary"] #customization-reset-button:active, -#main-window[privatebrowsingmode="temporary"] #customization-done-button:active { - appearance: none !important; - padding: 5px !important; - background-color: rgba(255,255,255,0.2) !important; - border: 1px solid rgba(0,0,0,0.50) !important; - border-radius: 3px !important; - box-shadow: inset 0 0 3px 0 rgba(0,0,0,0.2) !important; - color: #fff !important; -} - -/*** CHECKBOX BUTTONS CUSTOMIZATION PANEL for PRIVATE MODE ***/ -#main-window[privatebrowsingmode="temporary"] .checkbox-check { - appearance: none !important; - height: 16px !important; - width: 16px !important; - background-color: white !important; - border: 1px solid rgba(0,0,0,0.50) !important; - border-radius: 3px !important; - box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.10) !important; -} diff --git a/eos8_style_update.png b/eos8_style_update.png new file mode 100644 index 0000000..bff2ad5 Binary files /dev/null and b/eos8_style_update.png differ diff --git a/flatpak.css b/flatpak.css index 1d1e435..3cb1a53 100644 --- a/flatpak.css +++ b/flatpak.css @@ -27,116 +27,6 @@ menubar > menu[_moz-menuactive="true"][open="true"] { color: black !important; } -/* Dark Mode in Firefox */ -menupopup:-moz-lwtheme-brighttext, panel:-moz-lwtheme-brighttext { - --panel-background: #303030 !important; - --panel-color: #fff !important; - --panel-border-color: #000 !important; - --arrowpanel-background: #303030 !important; - --arrowpanel-color: #fff !important; - --arrowpanel-border-color: #000 !important; - --button-hover-bgcolor: rgba(255,255,255,0.10) !important; - --panel-item-hover-bgcolor: rgba(255,255,255,0.10) !important; -} -menupopup:not(#BMB_bookmarksPopup) menu[_moz-menuactive="true"]:not([disabled="true"]):not(.subviewbutton):-moz-lwtheme-brighttext, -menupopup:not(#BMB_bookmarksPopup) menuitem[_moz-menuactive="true"]:not([disabled="true"]):not(.subviewbutton):-moz-lwtheme-brighttext { - appearance: none !important; - color: #FFF !important; - background-color: rgba(255,255,255,0.10) !important; -} -#BMB_unsortedBookmarksPopup menu[_moz-menuactive="true"][disabled="true"]:-moz-lwtheme-brighttext, -#BMB_unsortedBookmarksPopup menuitem[_moz-menuactive="true"][disabled="true"]:-moz-lwtheme-brighttext { - appearance: none !important; - background-color: #303030 !important; -} -menubar > menu[_moz-menuactive="true"][open="true"]:-moz-lwtheme-brighttext { - appearance: none !important; - color: #d1d1d1 !important; - background-color: rgba(255,255,255,0.10) !important; - margin: 0px 6px !important; -} - -/* Dark Mode in Tweaks */ -.urlbarView-favicon:-moz-lwtheme-brighttext, -#urlbar-input-container image:not(#userContext-indicator):-moz-lwtheme-brighttext, -.urlbarView image:-moz-lwtheme-brighttext, -#customization-palette-container image:-moz-lwtheme-brighttext, -#nav-bar-customization-target > toolbarbutton:not(hbox) > image:-moz-lwtheme-brighttext, -#nav-bar-customization-target > toolbarpaletteitem image:-moz-lwtheme-brighttext, -#nav-bar-overflow-button image:-moz-lwtheme-brighttext, -#nav-bar-customization-target stack:-moz-lwtheme-brighttext, -#PopupSearchAutoComplete image:-moz-lwtheme-brighttext, -#searchbar image:-moz-lwtheme-brighttext, -.tab-content > image:not(.tab-icon-image):-moz-lwtheme-brighttext, -.toolbarbutton-icon[type="menu"]:-moz-lwtheme-brighttext, -#bookmarks-toolbar-placeholder image:-moz-lwtheme-brighttext, -#PlacesChevron .toolbarbutton-icon:-moz-lwtheme-brighttext, -#import-button image:-moz-lwtheme-brighttext, -#TabsToolbar-customization-target > toolbarbutton:not(hbox) > image:-moz-lwtheme-brighttext, -#TabsToolbar-customization-target > toolbarpaletteitem image:-moz-lwtheme-brighttext, -#nav-bar-customization-target > #zoom-controls > toolbarbutton > image:-moz-lwtheme-brighttext, -#TabsToolbar-customization-target > #zoom-controls > toolbarbutton > image:-moz-lwtheme-brighttext, -#urlbar-search-mode-indicator-close:-moz-lwtheme-brighttext { - fill: #fff !important; -} -.urlbarView-body-inner:-moz-lwtheme-brighttext, -.search-one-offs:not([is_searchbar="true"]):-moz-lwtheme-brighttext, - #customization-footer:-moz-lwtheme-brighttext { - border-top: 1px solid rgba(255,255,255,0.2) !important; -} -.urlbarView-row[label]:-moz-lwtheme-brighttext, -#urlbar-input:-moz-lwtheme-brighttext, -.urlbarView-title:-moz-lwtheme-brighttext, -#urlbar-one-offs-header-label:-moz-lwtheme-brighttext, -.urlbarView-title-separator:-moz-lwtheme-brighttext, -#customization-palette-container label:-moz-lwtheme-brighttext, -#customization-palette-container:-moz-lwtheme-brighttext, -#customization-footer checkbox:-moz-lwtheme-brighttext, -.searchbar-textbox:-moz-lwtheme-brighttext, -#PopupSearchAutoComplete label:-moz-lwtheme-brighttext, -#PopupSearchAutoComplete button:-moz-lwtheme-brighttext, -#PopupSearchAutoComplete richlistitem:-moz-lwtheme-brighttext, -#identity-icon-label:-moz-lwtheme-brighttext, -#import-button label:-moz-lwtheme-brighttext, -#nav-bar-customization-target > #zoom-controls > toolbarbutton > label:-moz-lwtheme-brighttext, -#TabsToolbar-customization-target > #zoom-controls > toolbarbutton > label:-moz-lwtheme-brighttext, -#TabsToolbar-customization-target > #wrapper-zoom-controls > #zoom-controls > toolbarbutton > label:-moz-lwtheme-brighttext, -#nav-bar-customization-target > #wrapper-zoom-controls > #zoom-controls > toolbarbutton > label:-moz-lwtheme-brighttext, -#urlbar-zoom-button label:-moz-lwtheme-brighttext, -#urlbar-search-mode-indicator-title:-moz-lwtheme-brighttext, -#wrapper-personal-bookmarks label:-moz-lwtheme-brighttext, -.tab-secondary-label label:-moz-lwtheme-brighttext { - color: #fff !important; -} -.tab-content > image:not(.tab-icon-image):-moz-lwtheme-brighttext { - fill: rgba(255,255,255,1) !important; -} -.tab-icon-pending:-moz-lwtheme-brighttext, -.tab-throbber:-moz-lwtheme-brighttext, -.tab-loading-burst:-moz-lwtheme-brighttext { - --tab-loading-fill: #fff !important; - color: #fff !important; -} -.tab-icon-image:-moz-lwtheme-brighttext { - fill: #fff !important; -} -#customization-container:-moz-lwtheme-brighttext { - background: #2A2A2E !important; -} -.browserContainer > findbar:-moz-lwtheme-brighttext { - background-color: #303030 !important; - color: #fff !important; - border: 1px solid rgba(56,56,56,1) !important; -} -.findbar-textbox:-moz-lwtheme-brighttext { - background-color: rgba(68,68,68,1) !important; - color: #fff !important; - border: 1px solid rgba(56,56,56,1) !important; -} -.tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture], [crashed]):not(:is([pinned])):-moz-lwtheme-brighttext { - fill: #fff !important; -} - /* Dark Mode in Tweaks and elementary OS System */ @media (prefers-color-scheme: dark) { menupopup, panel { @@ -163,85 +53,4 @@ menupopup:not(#BMB_bookmarksPopup) menuitem[_moz-menuactive="true"]:not([disable menubar > menu[_moz-menuactive="true"][open="true"] { color: #fff !important; background-color: rgba(255,255,255,0.10) !important; -} - -/* Dark Mode in Tweaks */ -.urlbarView-favicon, -#urlbar-input-container image:not(#userContext-indicator), -.urlbarView image, -#customization-palette-container image, -#nav-bar-customization-target > toolbarbutton:not(hbox) > image, -#nav-bar-customization-target > toolbarpaletteitem image, -#nav-bar-overflow-button image, -#nav-bar-customization-target stack, -#PopupSearchAutoComplete image, -#searchbar image, -.tab-content > image:not(.tab-icon-image), -.toolbarbutton-icon[type="menu"], -#bookmarks-toolbar-placeholder image, -#PlacesChevron .toolbarbutton-icon, -#import-button image, -#TabsToolbar-customization-target > toolbarbutton:not(hbox) > image, -#TabsToolbar-customization-target > toolbarpaletteitem image, -#nav-bar-customization-target > #zoom-controls > toolbarbutton > image, -#TabsToolbar-customization-target > #zoom-controls > toolbarbutton > image, -#urlbar-search-mode-indicator-close { - fill: #fff !important; -} -.urlbarView-body-inner, -.search-one-offs:not([is_searchbar="true"]), - #customization-footer { - border-top: 1px solid rgba(255,255,255,0.2) !important; -} -.urlbarView-row[label], -#urlbar-input, -.urlbarView-title, -#urlbar-one-offs-header-label, -.urlbarView-title-separator, -#customization-palette-container label, -#customization-palette-container, -#customization-footer checkbox, -.searchbar-textbox, -#PopupSearchAutoComplete label, -#PopupSearchAutoComplete button, -#PopupSearchAutoComplete richlistitem, -#identity-icon-label, -#import-button label, -#nav-bar-customization-target > #zoom-controls > toolbarbutton > label, -#TabsToolbar-customization-target > #zoom-controls > toolbarbutton > label, -#TabsToolbar-customization-target > #wrapper-zoom-controls > #zoom-controls > toolbarbutton > label, -#nav-bar-customization-target > #wrapper-zoom-controls > #zoom-controls > toolbarbutton > label, -#urlbar-zoom-button label, -#urlbar-search-mode-indicator-title, -#wrapper-personal-bookmarks label, -.tab-secondary-label label { - color: #fff !important; -} -.tab-content > image:not(.tab-icon-image) { - fill: rgba(255,255,255,1) !important; -} -.tab-icon-pending, -.tab-throbber, -.tab-loading-burst { - --tab-loading-fill: #fff !important; - color: #fff !important; -} -.tab-icon-image { - fill: #fff !important; -} -#customization-container { - background: #2A2A2E !important; -} -.browserContainer > findbar { - background-color: #303030 !important; - color: #fff !important; - border: 1px solid rgba(56,56,56,1) !important; -} -.findbar-textbox { - background-color: rgba(68,68,68,1) !important; - color: #fff !important; - border: 1px solid rgba(56,56,56,1) !important; -} -.tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture], [crashed]):not(:is([pinned])) { - fill: #fff !important; }} diff --git a/readme.md b/readme.md index 20c9c36..8548a1d 100644 --- a/readme.md +++ b/readme.md @@ -1,5 +1,5 @@ # An elementary OS theme for Firefox -![Screenshot](Promo_image_november-2024.png) +![Screenshot](eos8_style_update.png) ## 🙏 Credits Credits to [Harvey Cabaguio](https://github.com/harveycabaguio/firefox-elementary-theme) for setting the theme up, [sempasha](https://github.com/sempasha) and [Ryo Nakano](https://github.com/ryonakano) for the install script and the elementary team for the UI design and icons. @@ -9,8 +9,26 @@ Credits to [Harvey Cabaguio](https://github.com/harveycabaguio/firefox-elementar For now theme installation is supported for: 1. [🦊 Firefox 📦 Flatpak version](https://flathub.org/apps/details/org.mozilla.firefox). -2. [🦊 Firefox 📦 Snap version](https://snapcraft.io/firefox). -3. [🐺 Librewolf 📦 Flatpak version](https://flathub.org/apps/details/io.gitlab.librewolf-community). +2. [🐺 Librewolf 📦 Flatpak version](https://flathub.org/apps/details/io.gitlab.librewolf-community). +3. [🦊 Firefox 📦 download package](https://www.mozilla.org/en-US/firefox/new/). + +**You can use Main menu to create a Firefox desktop entry:** +- Download Firefox from the [website](https://www.mozilla.org/en-US/firefox/new/) and extract in a folder of your choice. +- Open [Main menu](https://flathub.org/apps/page.codeberg.libre_menu_editor.LibreMenuEditor) (install it in AppCenter), click on the Settings wheel in the app list on the top right and select `New launcher`. +- Fill in each section starting with Icon. Press the search glass and go to your Firefox folder `browser/chrome/icons/default` and select `default256.png`. +- Under that section you can fill in `Firefox` as name of the launcher. +- Under `Execute > Command` you fill in your Firefox folder location like `home//Apps/firefox/firefox` where the last "firefox" is the run file. +- You can toggle "show this application in the main menu" `on`. +- Then under that you can choose in which category the launcher is showing like `Internet`. +- Then you can toggle animation `on` too. +- Save by clicking the `save` button in the top bar of the window. + +**Now you need a dot under the Firefox icon when opened in the dock. Edit the desktop entry file:** +- In the left list of Main menu, select Firefox icon and click on the Settings wheel and select `Edit document`, this opens Code with the desktop entry file visible. +- Then open Firefox and Terminal. +- Type `xprop WM_CLASS` in the Terminal, the result: your mouse cursor changes into a crosshair. +- You can now click your crosshair cursor on the Firefox window and you will see the WM_Class of Firefox in Terminal. +- Go to Code and type a new line in the `Desktop Entry` section, something like: `StartupWMClass=firefox`. Code will automatically save the file so just close all and move the Firefox icon from Slingshot to the Dock and enjoy the fully working and integrated Firefox. ❗*For other versions of Firefox, like Tor Browser for example, the theme needs to be installed manually. [We welcome contributions](https://github.com/Zonnev/elementaryos-firefox-theme/blob/elementaryos-firefox-theme/CONTRIBUTING.md) like editing a userChrome,* *for example to make a fully supported other version possible. Thanks in advance.* @@ -40,9 +58,9 @@ This will make purple colors of Private Mode as default style. ## ➕ After installation -1. In the customization panel in Firefox you can move the new tab button to the left and select System theme. You can also use the dark theme option but light theme is not supported. -2. If you use [Pantheon Tweaks](https://github.com/pantheon-tweaks/pantheon-tweaks/) with the dark mode on, the theme changes to dark mode by itself. Firefox 98 and newer are changing to dark mode when the elementary OS system dark mode is set. -3. In `about:config` you can make the bottom window corners rounded by setting `widget.gtk.rounded-bottom-corners.enabled` to `true`. +1. In the customization panel in Firefox you can move the new tab button to the left. The default is System theme, you can also use the Dark theme option but Light theme is not supported. +2. In `about:config` you can make the bottom window corners rounded by setting `widget.gtk.rounded-bottom-corners.enabled` to `true`. +3. If you installed the **Flatpak** version of Firefox and you want to make use of the elementary OS **accent colors**, you have to copy the `usr/share/themes` folder to `home/.themes`. Type or copy-paste in Terminal `mkdir -p $HOME/.themes` to make the folder, then type `cp -r /usr/share/themes/* $HOME/.themes/` to copy the folder and place the files in the folder you have made. And after that `flatpak override --user org.mozilla.firefox --filesystem=$HOME/.themes` to make Flatpak version follow the elementary OS style sheets in the folder. ## 🔁 Update diff --git a/userContent.css b/userContent.css index c804316..4656be7 100644 --- a/userContent.css +++ b/userContent.css @@ -40,10 +40,10 @@ @media (prefers-color-scheme: dark) { @-moz-document url-prefix("about:"), url-prefix("chrome://browser/content") { :root { - --in-content-page-background: var(--eOS-black-500) !important; - --in-content-background-color: var(--eOS-black-500) !important; + --in-content-page-background: var(--eOS-black-700) !important; + --in-content-background-color: var(--eOS-black-700) !important; --in-content-page-color: var(--eOS-silver-100) !important; - --in-content-table-background: var(--eOS-black-300) !important; + --in-content-table-background: var(--eOS-black-500) !important; --in-content-primary-button-text-color: var(--eOS-silver-100) !important; --in-content-primary-button-background: var(--eOS-blueberry-500) !important; --in-content-primary-button-background-hover: var(--eOS-blueberry-300) !important; @@ -52,15 +52,15 @@ --in-content-button-border-color-hover: transparent !important; --in-content-button-border-color-active: transparent !important; - --newtab-background-color: var(--eOS-black-500) !important; - --newtab-background-color-secondary: var(--eOS-black-300) !important; - --newtab-element-hover-color: var(--eOS-black-300) !important; + --newtab-background-color: var(--eOS-black-700) !important; + --newtab-background-color-secondary: var(--eOS-black-500) !important; + --newtab-element-hover-color: var(--eOS-black-500) !important; --newtab-overlay-color: rgba(0,0,0,0.8) !important; --newtab-primary-action-background: var(--eOS-blueberry-100) !important; --newtab-primary-action-background-pocket: var(--eOS-blueberry-100) !important; - --box-background-color: var(--eOS-black-300) !important; - --box-background: var(--eOS-black-500) !important; + --box-background-color: var(--eOS-black-500) !important; + --box-background: var(--eOS-black-700) !important; --brand-color-accent: var(--eOS-blueberry-300) !important; --brand-color-accent-hover: var(--eOS-blueberry-100) !important; @@ -74,12 +74,12 @@ --primary-button-active-background-color: var(--eOS-blueberry-100) !important; --primary-button-color: var(--eOS-silver-100) !important; - --card-background-color: var(--eOS-black-500) !important; + --card-background-color: var(--eOS-black-700) !important; --button-color: var(--eOS-silver-100) !important; - --button-background-color: var(--eOS-black-300) !important; + --button-background-color: var(--eOS-black-500) !important; --button-hover-background-color: var(--eOS-black-100) !important; - --sidebar-background-hover: var(--eOS-black-300) !important; + --sidebar-background-hover: var(--eOS-black-500) !important; /* Reader mode */ --dark-theme-foreground: var(--eOS-silver-300) !important; @@ -93,7 +93,7 @@ /* Dialog */ .dialogBox, dialog { - background-color: var(--eOS-black-500) !important; + background-color: var(--eOS-black-700) !important; } /* Separator */ @@ -106,26 +106,26 @@ separator { checkbox:not(:hover) .checkbox-check:not([checked="true"]), input[type="checkbox"]:not(:hover):not(:checked) { appearance: none !important; border: 2px solid var(--eOS-silver-300) !important; - background: var(--eOS-black-500) !important; + background: var(--eOS-black-700) !important; border-radius: 2px !important; } checkbox:hover .checkbox-check:not([checked="true"]), input[type="checkbox"]:hover:not(:checked) { appearance: none !important; border: 2px solid var(--eOS-silver-100) !important; - background: var(--eOS-black-500) !important; + background: var(--eOS-black-700) !important; border-radius: 2px !important; } /* Radio */ radio:not(:hover) .radio-check:not([selected="true"]), input[type="radio"]:not(:hover):not(:checked) { appearance: none !important; - background: var(--eOS-black-500) !important; + background: var(--eOS-black-700) !important; border: 0.15em solid var(--eOS-silver-300) !important; border-radius: 50% !important; } radio:hover .radio-check:not([selected="true"]), input[type="radio"]:hover:not(:checked) { appearance: none !important; - background: var(--eOS-black-500) !important; + background: var(--eOS-black-700) !important; border: 0.15em solid var(--eOS-silver-100) !important; border-radius: 50% !important; }}