diff --git a/src/userChrome/alt-browser-alt.css b/src/userChrome/alt-browser-alt.css new file mode 100644 index 0000000..c038c1b --- /dev/null +++ b/src/userChrome/alt-browser-alt.css @@ -0,0 +1,78 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/* Apply this customization only on smaller screens */ +@media (max-width: 700px) { + + /* Density variables */ + :root:not([uidensity="touch"]) { + --alltabs-button-position: 3.5px !important; + --widget-overflow-margin: 22px; + --unified-extensions-panel-margin: 22px; + --customizationui-widget-panel-margin: 22px; + --appMenu-popup-margin: 22px; + --BMB_bookmarksPopup-margin: 22px; + } + :root[uidensity="touch"] { + --alltabs-button-position: 4.5px !important; + --widget-overflow-margin: 23px; + --unified-extensions-panel-margin: 23px; + --customizationui-widget-panel-margin: 23px; + --appMenu-popup-margin: 23px; + --BMB_bookmarksPopup-margin: 23px; + } + :root:not([uidensity="touch"],[inFullscreen]) { + --uc-bottom-toolbar-height: calc(39px + var(--toolbarbutton-outer-padding) ) + } + :root[uidensity="touch"]:not([inFullscreen]){ + --uc-bottom-toolbar-height: calc(43px + var(--toolbarbutton-outer-padding) ) + } + + /* Hide Nav Bar and Tab Bar when in Fullscreen mode and hide and Title Bar */ + #nav-bar[inFullscreen], + #TabsToolbar[inFullscreen], + .titlebar-buttonbox-container { + display: none; + } + + /* Move Nav Bar to bottom */ + #browser, + #customization-container { + margin-bottom: var(--uc-bottom-toolbar-height,0px) + } + #nav-bar{ + position: fixed !important; + bottom: 0px; + width: 100%; + z-index: 1; + } + .panel-viewstack { + max-height: unset !important; + } + + /* Adjust Widget Overflow Menu (») spawn height */ + #widget-overflow { + margin-bottom: var(--widget-overflow-margin) !important; + } + + /* Adjust Unified Extensions Menu spawn height */ + #unified-extensions-panel { + margin-bottom: var(--unified-extensions-panel-margin) !important; + } + + /* Adjust Tab Manager Menu spawn height */ + #customizationui-widget-panel { + margin-bottom: var(--customizationui-widget-panel-margin) !important; + } + + /* Adjust Main App Menu (≡) spawn height */ + #appMenu-popup { + margin-bottom: var(--appMenu-popup-margin) !important; + } + + /* Adjust Bookmarks Menu (★) spawn height */ + #BMB_bookmarksPopup { + margin-bottom: var(--BMB_bookmarksPopup-margin) !important; + } + +} diff --git a/src/userChrome/alt-browser.css b/src/userChrome/alt-browser.css deleted file mode 100644 index abfe616..0000000 --- a/src/userChrome/alt-browser.css +++ /dev/null @@ -1,66 +0,0 @@ -/* Copyright 2022 plata - * SPDX-License-Identifier: MPL-2.0 */ - -@media (max-width: 700px) { - /* Move navigation bar to bottom */ - #browser { - -moz-box-ordinal-group: 0 !important; /* before FF 113 */ - order: -1 !important; /* since FF 113 */ - } - - /* Hide navigation bar in kiosk mode (to prevent bug #29). We can assume FF - * is in kiosk mode when fullscreen and max-width conditions are met, - * because at this max-width the fullscreen button is hidden - * (see appMenu.css). */ - #nav-bar[inFullscreen], - #TabsToolbar[inFullscreen] { - display: none; - } - - /* Hide minimize/maximize/close buttons */ - .titlebar-buttonbox-container { - display: none; - } - - /* https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/toolbars_below_content.css */ - #TabsToolbar > .titlebar-buttonbox-container { - display: none; - } - /* Fix panels sizing */ - .panel-viewstack { - max-height: unset !important; - } - /* Tabs below */ - #titlebar { - -moz-box-ordinal-group: 2; /* Fx <112 compatibility */ - order: 2; - } - - /* Adjust Bookmarks Menu (★) spawn height and fix flickering */ - #BMB_bookmarksPopup { - margin-bottom: 22px !important; - width: 100vw; - } - - /* Adjust Unified Extensions Menu spawn height */ - #unified-extensions-view { - margin-top: -44px !important; - margin-bottom: -44px !important; - } - - /* Adjust Widget Overflow Menu (≫) spawn height */ - #widget-overflow { - padding-bottom: 30px !important; - } - - /* Adjust Main App Menu (≡) spawn height */ - #appMenu-popup { - margin-bottom: 26px !important; - } - - /* Adjust Tab Manager Menu spawn height */ - #customizationui-widget-panel { - margin-bottom: 66px !important; - } - -} diff --git a/src/userChrome/alt-single_tab_mode-alt.css b/src/userChrome/alt-single_tab_mode-alt.css new file mode 100644 index 0000000..0ffcaea --- /dev/null +++ b/src/userChrome/alt-single_tab_mode-alt.css @@ -0,0 +1,98 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/******************************************/ +/* IMPORTANT: */ +/* */ +/* One of the things this code will do is */ +/* to move the Tab Manager Menu button to */ +/* the right side of the URL Bar. */ +/* */ +/* For the best results, consider moving */ +/* the Unified Extensions Menu button to */ +/* the left of the URL Bar and removing */ +/* less important toolbar items by using */ +/* the "Customize Toolbar" feature, or by */ +/* using a user.js file in your profile. */ +/******************************************/ + +/* Apply this customization only on smaller screens */ +@media (max-width: 700px) { + + /* Density variables */ + :root:not([uidensity="touch"]) { + --PanelUI-menu-button-position: 4px; + --alltabs-button-height: 32px; + --alltabs-button-width: 32px; + --alltabs-button-position: 3.5px; + --alltabs-number-position: calc(var(--toolbarbutton-inner-padding) * 1.5 ); + --urlbar-width: calc(100vw - 166px); + } + :root[uidensity="touch"] { + --PanelUI-menu-button-position: 5px; + --alltabs-button-height: 34px; + --alltabs-button-width: 34px; + --alltabs-button-position: 4.5px; + --alltabs-number-position: calc(var(--toolbarbutton-inner-padding) * 1.5 ); + --urlbar-width: calc(100vw - 171.5px); + } + + /* Hide Nav Bar and Tab Bar when in Fullscreen mode and hide Title Bar, Newtab button, and New-tab button */ + #nav-bar[inFullscreen], + #TabsToolbar[inFullscreen], + .titlebar-buttonbox-container, + #new-tab-button, + #tabs-newtab-button { + display: none !important; + } + + /* Hide unpinned inactive tabs */ + .tabbrowser-tab:not([pinned]):not([selected]) { + visibility: collapse !important; + min-width: 0 !important; + } + + /* Expand unpinned active tab */ + #tabbrowser-tabs:not([haspinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[selected] { + min-width: 100vw !important; + } + #tabbrowser-tabs[haspinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([pinned])[selected] { + min-width: calc(100vw - 40px) !important; + } + + /* Move Main App Menu (≡) button to allow room for Tab Manager Menu button */ + #PanelUI-menu-button { + position: absolute !important; + right: 0px !important; + bottom: var(--PanelUI-menu-button-position) !important; + } + + /* Move Tab Manager Menu button to right of URL Bar */ + :root { + --tab-border-radius: var(--toolbarbutton-border-radius) !important; + } + #alltabs-button > .toolbarbutton-badge-stack { + height: var(--alltabs-button-height) !important; + width: var(--alltabs-button-width) !important; + } + #alltabs-button { + position: absolute; + bottom: var(--alltabs-button-position) !important; + right: 41.5px; + z-index: 2 !important; + } + #alltabs-button > .toolbarbutton-badge-stack::before { + bottom: calc(var(--toolbarbutton-inner-padding) * 0.7 ) !important; + } + + /* Allow room for Tab Manager Menu button */ + #nav-bar { + padding-right: 67px !important; + } + + /* Reduce URL Bar width */ + #urlbar-container { + max-width: var(--urlbar-width) !important; + } + +} diff --git a/src/userChrome/appMenu.css b/src/userChrome/appMenu.css index 15f5b40..6619281 100644 --- a/src/userChrome/appMenu.css +++ b/src/userChrome/appMenu.css @@ -8,18 +8,19 @@ * the HTML, which we can't override via CSS. */ #appMenu-popup { /*margin-top: -390px !important;*/ - padding-left: 10px !important; - padding-right: 10px !important; /*height: 310px;*/ /*max-height: 310px;*/ - height: 330px; - max-height: 330px; + height: 340px; + max-height: 340px; + padding-left: 10px !important; + padding-right: 10px !important; } #appMenu-protonMainView vbox.panel-subview-body { /*height: 300px !important;*/ /*max-height: 300px !important;*/ height: 318px !important; max-height: 318px !important; + margin-top: 4px !important; } #appMenu-multiView box.panel-viewstack:first-child { /* Use the whole space in the menu, instead of slowly increasing the @@ -54,7 +55,7 @@ #appMenu-fullscreen-button2, #appMenu-passwords-button, /* accessible from settings */ /*#appMenu-extensions-themes-button, /* accessible from settings */ - #appMenu-bookmarks-button, /* submenu */ + /*#appMenu-bookmarks-button, /* submenu */ /*#appMenu-history-button, /* submenu */ /*#appMenu-more-button2, /* submenu */ /*#appMenu-help-button2, /* submenu */ diff --git a/src/userChrome/browser.css b/src/userChrome/browser.css index 17d153c..52ab55b 100644 --- a/src/userChrome/browser.css +++ b/src/userChrome/browser.css @@ -31,31 +31,45 @@ max-height: unset !important; } - /* Adjust Bookmarks Menu (★) spawn height and fix flickering */ - #BMB_bookmarksPopup { - margin-bottom: 52px !important; - width: 100vw; + /* Density variables */ + :root:not([uidensity="touch"]) { + --widget-overflow-margin: 66px; + --unified-extensions-panel-margin: 66px; + --customizationui-widget-panel-margin: 66px; + --appMenu-popup-margin: 66px; + --BMB_bookmarksPopup-margin: 66px; + } + :root[uidensity="touch"] { + --widget-overflow-margin: 72px; + --unified-extensions-panel-margin: 72px; + --customizationui-widget-panel-margin: 72px; + --appMenu-popup-margin: 72px; + --BMB_bookmarksPopup-margin: 72px; + } + + /* Adjust Widget Overflow Menu (») spawn height */ + #widget-overflow { + margin-bottom: var(--widget-overflow-margin) !important; } /* Adjust Unified Extensions Menu spawn height */ - #unified-extensions-view { - margin-top: -44px !important; - margin-bottom: -44px !important; - } - - /* Adjust Widget Overflow Menu (≫) spawn height */ - #widget-overflow { - padding-bottom: 60px !important; - } - - /* Adjust Main App Menu (≡) spawn height */ - #appMenu-popup { - margin-bottom: 56px !important; + #unified-extensions-panel { + margin-bottom: var(--unified-extensions-panel-margin) !important; } /* Adjust Tab Manager Menu spawn height */ #customizationui-widget-panel { - margin-bottom: 20px !important; + margin-bottom: var(--customizationui-widget-panel-margin) !important; + } + + /* Adjust Main App Menu (≡) spawn height */ + #appMenu-popup { + margin-bottom: var(--appMenu-popup-margin) !important; + } + + /* Adjust Bookmarks Menu (★) spawn height */ + #BMB_bookmarksPopup { + margin-bottom: var(--BMB_bookmarksPopup-margin) !important; } } diff --git a/src/userChrome/color_variable_template.css b/src/userChrome/color_variable_template.css deleted file mode 100644 index 2b790e7..0000000 --- a/src/userChrome/color_variable_template.css +++ /dev/null @@ -1,257 +0,0 @@ -/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/color_variable_template.css made available under Mozilla Public License v. 2.0 -See the above repository for updates as well as full license text. */ - -/* You should enable any non-default theme for these to apply properly. Built-in dark and light themes should work */ -:root { - /* Popup panels */ - --arrowpanel-background: black !important; - --arrowpanel-border-color: #dc8add !important; - --arrowpanel-color: #dc8add !important; - --arrowpanel-dimmed: rgba(220,138,221,0.6) !important; - --arrowpanel-dimmed-further: rgba(220,138,221,0.3) !important; -/* - --panel-background: black !important; - --panel-border-color: #dc8add !important; - --panel-color: white !important; - --panel-separator-color: #dc8add !important; -*/ - --panel-item-hover-bgcolor: rgba(220,138,221,0.5) !important; - --panel-item-active-bgcolor: #dc8add !important; - --panel-banner-item-background-color: #dc8add !important; - --panel-banner-item-hover-bgcolor: #dc8add !important; - --panel-banner-item-active-bgcolor: #dc8add !important; - --panel-banner-item-update-supported-bgcolor: #dc8add !important; - --panel-banner-item-info-icon-bgcolor: #dc8add !important; - --panel-banner-item-color: #dc8add !important; - --panel-description-color: #dc8add !important; - --panel-disabled-color: rgba(220,138,221,0.6) !important; - --uc-menu-bkgnd: transparent !important; - --uc-menu-color: #dc8add !important; - --uc-menu-dimmed: #dc8add !important; - --uc-menu-disabled: #dc8add !important; - --menuitem-disabled-hover-background-color: #dc8add !important; - - /* window and toolbar background */ - --lwt-accent-color: #dc8add !important; - --lwt-accent-color-inactive: #e8b1e8 !important; - --toolbar-non-lwt-bgcolor: black !important; - --toolbar-non-lwt-textcolor: #dc8add !important; - --toolbar-bgcolor: black !important; - --toolbar-color: #dc8add !important; - --tabpanel-background-color: black !important; - - /* tabs with system theme - text is not controlled by variable */ - --tab-selected-bgcolor: #dc8add !important; - - /* tabs with any other theme */ - --lwt-text-color: white !important; - --lwt-selected-tab-background-color: #dc8add !important; - - /* toolbar area */ -/* - --toolbarbutton-icon-fill: #dc8add !important; -*/ - --toolbarbutton-icon-fill-attention: white !important; - --toolbarbutton-hover-background: #dc8add !important; - --toolbarbutton-active-background: #dc8add !important; - --lwt-toolbarbutton-icon-fill-attention: white !important; - --lwt-toolbarbutton-hover-background: #dc8add !important; - --lwt-toolbarbutton-active-background: #dc8add !important; - --toolbarseparator-color: black !important; - - /* urlbar */ - --toolbar-field-border-color: #dc8add !important; - --toolbar-field-focus-border-color: #dc8add !important; - --urlbar-popup-url-color: white !important; -/* - --urlbar-box-bgcolor: var(--button-bgcolor); - --urlbar-box-focus-bgcolor: var(--button-bgcolor); - --urlbar-box-hover-bgcolor: var(--button-hover-bgcolor); - --urlbar-box-active-bgcolor: var(--button-active-bgcolor); - --urlbar-box-text-color: inherit; - --urlbar-box-hover-text-color: var(--urlbar-box-text-color); - --lwt-brighttext-url-color: #00ddff; -*/ - - /* urlbar Firefox < 92 */ - --lwt-toolbar-field-background-color: #dc8add !important; - --lwt-toolbar-field-focus: white !important; - --lwt-toolbar-field-color: white !important; - --lwt-toolbar-field-focus-color: white !important; - - /* urlbar Firefox 92+ */ - --toolbar-field-background-color: #dc8add !important; - --toolbar-field-focus-background-color: #dc8add !important; - --toolbar-field-icon-fill-attention: #dc8add !important; - --toolbar-field-color: white !important; - --toolbar-field-focus-color: white !important; - - /* sidebar - note the sidebar-box rule for the header-area */ - --lwt-sidebar-background-color: black !important; - --lwt-sidebar-text-color: black !important; - - /* findbar */ - --focus-outline-color: #dc8add !important; - --input-border-color: #dc8add !important; - -/* buttons and checkboxes */ -/* - --button-bgcolor: black !important; - --button-color: white !important; - --button-hover-bgcolor: #dc8add !important; - --button-active-bgcolor: #dc8add !important; -*/ - --button-primary-bgcolor: #dc8add !important; - --button-primary-hover-bgcolor: #dc8add !important; - --button-primary-active-bgcolor: #dc8add !important; - --button-primary-color: white !important; - --in-content-primary-button-background: #dc8add !important; - --in-content-primary-button-background-hover: #dc8add !important; - --in-content-primary-button-background-active: #dc8add !important; -/* - --buttons-destructive-bgcolor: #e22850; - --buttons-destructive-hover-bgcolor: #c50042; - --buttons-destructive-active-bgcolor: #810220; - --buttons-destructive-color: #fbfbfe; -*/ - --checkbox-unchecked-bgcolor: black !important; - --checkbox-unchecked-hover-bgcolor: black !important; - --checkbox-unchecked-active-bgcolor: black !important; - --checkbox-checked-border-color: transparent !important; - --checkbox-checked-bgcolor: #dc8add !important; - --checkbox-checked-color: white !important; - --checkbox-checked-hover-bgcolor: rgba(220,138,221,0.9) !important; - --checkbox-checked-active-bgcolor: rgba(220,138,221,0.9) !important; - --uc-checkbox-checked-bgcolor: #dc8add !important; - - /* icon glow */ - --uc-icon-glow-primary: #dc8add; - --uc-icon-glow-secondary: white; - --uc-icon-glow-hover-primary: #dc8add; - --uc-icon-glow-hover-secondary: white; -} - -/* line between nav-bar and tabs toolbar, - also fallback color for border around selected tab */ -#navigator-toolbox { - --lwt-tabs-border-color: none !important; -} - -/* Line above tabs */ -#tabbrowser-tabs { - --lwt-tab-line-color: none !important; -} - -/* the header-area of sidebar needs this to work */ -#sidebar-box { - --sidebar-background-color: black !important; -} - -/* (context_menus_more_proton.css) */ - -/* OPTIONAL Set custom context menu colors below */ - -menupopup:not(.in-menulist) { - --panel-background: black !important; - --panel-color: white !important; - --panel-separator-color: #dc8add !important; - --panel-border-color: #dc8add !important; -} -menupopup > menuseparator { - border-color: var(--panel-separator-color,ThreeDShadow) !important; -} - -menupopup { - --panel-item-hover-bgcolor: var(--button-hover-bgcolor) !important; -} -menupopup > menuitem, -menupopup > menu { - appearance: none !important; - background-color: transparent !important; -} - -#context-navigation > menuitem[_moz-menuactive]:not([disabled]) .menu-iconic-icon, -menupopup > menuitem[_moz-menuactive], -menupopup > menu[_moz-menuactive] { - background-color: var(--panel-border-color) !important; - color: var(--panel-color,inherit) !important; -} -menupopup > menuitem[disabled][_moz-menuactive], -menupopup > menu[disabled][_moz-menuactive] { - background-color: var(--menuitem-disabled-hover-background-color) !important; -} - -/* (dark_context_menus.css) */ - -panel richlistbox, -panel tree, -panel button, -panel menulist, -panel textbox, -panel input, -menupopup, -menu, -menuitem { - -moz-appearance: none !important; -} - -panel menulist { - border: 1px solid transparent; -} - -panel richlistbox, -panel tree, -panel button, -panel menulist, -panel textbox, -panel input, -panel #searchbar, -menupopup:not(#BMB_bookmarksPopup), -#main-menubar > menu > menupopup, -#context-navigation { - color: var(--uc-menu-color) !important; - background-color: var(--uc-menu-bkgnd) !important; - border-color: var(--uc-menu-disabled) !important; -} - -panel input { - background-color: rgba(0,0,0,0.1) !important; -} -panel #searchbar { - background-color: rgba(0,0,0,0.1) !important; - padding: 0 !important; -} -panel #searchbar input { - background-color: transparent !important; -} - -panel menulist:hover, -panel menulist[open] { - border-color: Highlight !important; -} - -#editBMPanel_folderMenuList > menupopup > menuitem { - color: var(--uc-menu-color) !important; -} - -panel treechildren::-moz-tree-row(selected), -panel button:hover, -menu:hover, -menu[_moz-menuactive], -menuitem:hover, -menuitem[_moz-menuactive] { - background-color: var(--uc-menu-dimmed) !important; color: var(--lwt-text-color) !important; -} -menu[open] { - background-color: transparent !important; color: inherit !important; -} - -menu[disabled="true"], -menuitem[disabled="true"] { - color: var(--uc-menu-disabled) !important; -} - -menu[disabled="true"]:hover, -menuitem[disabled="true"]:hover { - color: var(--lwt-text-color) !important; -} diff --git a/src/userChrome/colors.css b/src/userChrome/colors.css deleted file mode 100644 index f1eaa35..0000000 --- a/src/userChrome/colors.css +++ /dev/null @@ -1,157 +0,0 @@ -/* Copyright 2023 user0 - * SPDX-License-Identifier: MPL-2.0 */ - -/* Various items color */ -arrowscrollbox, -findbar, -toolbar[type=menubar], -tooltip, -#TabsToolbar, -#navigator-toolbox, -#tabbrowser-arrowscrollbox { - background-color: var(--arrowpanel-background) !important; - color: var(--arrowpanel-color) !important; -} - -/* Tab throbber color */ -.tab-throbber[busy]::before { - fill: var(--lwt-text-color) !important; -} - -/* Inactive Tab throbber color */ -.tabbrowser-tab:not(:hover, [selected]) .tab-throbber[busy]::before { - fill: var(--lwt-accent-color) !important; -} - -/* Inactive tab color on hover */ -.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected]) { - background-color: var(--lwt-accent-color-inactive) !important; -} - -/* Inactive tab text and close button (x) color */ -.tab-text:not([selected]), -.tab-icon-image:not([selected]), -.tab-close-button:not([selected]) { - color: var(--lwt-accent-color) !important; -} - -/* Inactive tab text and close button (x) color on hover */ -.tabbrowser-tab:not([selected]):hover .tab-text, -.tabbrowser-tab:not([selected]):hover .tab-icon-image, -.tabbrowser-tab:not([selected]):hover .tab-close-button { - color: var(--lwt-text-color) !important; -} - -/* Tab text and close button (x) color */ -.tab-text, -.tab-icon-image, -.tab-close-button { - color: var(--lwt-text-color) !important; -} - -/* Tab close button (x) color on hover */ -.tab-close-button:hover, -.tab-close-button:not([selected]):hover { - background-color: var(--lwt-accent-color-inactive) !important; -} - -/* Container tab line color */ -.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line { - background-color: var(--tab-bgcolor) !important; -} - -/* Back button (←) color */ -#back-button > .toolbarbutton-icon { - border: none !important; - background-color: var(--arrowpanel-dimmed) !important; - background-image: none !important; -} - -/* Back button (←) color on hover */ -#back-button:not([disabled]):hover > .toolbarbutton-icon { - background-color: var(--lwt-accent-color) !important; - color: var(--lwt-text-color) !important; -} - -/* Forward button (→) color */ -#forward-button > .toolbarbutton-icon { - border: none !important; - background-color: unset !important; - background-image: none !important; -} - -/* Forward button (→) color on hover */ -#forward-button:not([disabled]):hover > .toolbarbutton-icon { - background-color: var(--lwt-accent-color) !important; - color: var(--lwt-text-color) !important; -} - -/* Urlbar color */ -*::selection { - background-color: var(--urlbar-popup-url-color) !important; - color: var(--lwt-accent-color) !important; -} -#nav-bar { - background-color: var(--arrowpanel-dimmed) !important; - background-image: linear-gradient(#0e0e0e,#0e0e0e) !important; -} -#urlbar:not([focused]) #urlbar-input-container { - filter: saturate(3); -} - -/* Bookmark button (★) post-animation color */ -#star-button, -#star-button[starred] { - color: var(--lwt-text-color) !important; -} - -/* "Saved to Library!" color */ -#confirmation-hint { - --arrowpanel-border-color: var(--lwt-accent-color) !important; - --arrowpanel-color: var(--lwt-text-color) !important; - --arrowpanel-background: var(--lwt-accent-color) !important; -} - -/* Navbar buttons color */ -#navigator-toolbox :-moz-any(.toolbarbutton-1, toolbarbutton.bookmark-item:not(.subviewbutton)):hover:not([disabled]), -#navigator-toolbox :-moz-any(.toolbarbutton-1, toolbarbutton.bookmark-item:not(.subviewbutton)):-moz-any(:hover:active, [checked], [open]):not([disabled]) { - color: var(--lwt-text-color) !important; -} - -/* Main App Menu button (≡) color on hover */ -.subviewbutton:hover { - background-color: var(--arrowpanel-color) !important; - color: var(--lwt-text-color) !important; -} - -/* Findbar color */ -.browserContainer > findbar { - border: none !important; - background-color: var(--toolbar-bgcolor) !important; - color: var(--toolbar-color) !important; - box-shadow: none !important; -} -input.findbar-textbox { - border: 1px solid var(--toolbar-color) !important; - background-color: var(--toolbar-bgcolor) !important; - color: var(--toolbar-color) !important; - box-shadow: 0 0 3px var(--toolbar-color) !important; -} -.findbar-find-previous, -.findbar-find-next { - border: none !important; - background-color: transparent !important; - color: var(--toolbar-color) !important; -} - -/* Status panel color */ -#statuspanel #statuspanel-inner { - border: none !important; - height: 23x !important; - background-color: transparent !important; -} -#statuspanel #statuspanel-label { - border: none !important; - background-color: var(--arrowpanel-background) !important; - color: var(--arrowpanel-color) !important; -} diff --git a/src/userChrome/custom_rules.css b/src/userChrome/custom_rules.css index c463f1d..000a65a 100644 --- a/src/userChrome/custom_rules.css +++ b/src/userChrome/custom_rules.css @@ -1,6 +1,36 @@ /* Copyright 2023 user0 * SPDX-License-Identifier: MPL-2.0 */ +/* Disable tab loading burst + (because it's annoying) */ + .tab-loading-burst { + display: none !important; +} + +/* Tabs Toolbar and Container tab line color + (hides container tab line above tab by making it the same color as the Tabs Toolbar) */ +#TabsToolbar, +.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line { + background-color: var(--tab-bgcolor) !important; +} + +/* Menubar color + (hides the line at the top of the screen when Menubar is hidden) */ +toolbar[type=menubar] { + background-color: black !important; + color: var(--toolbar-color) !important; +} + +/* Navbar bottom border color */ +#navigator-toolbox { + border-bottom-color: black !important; +} + +/* Resist Fingerprinting Letterbox background color */ +:root { + --tabpanel-background-color: black !important; +} + /* Apply this customization only on smaller screens */ @media (max-width: 700px) { @@ -23,7 +53,7 @@ display: none !important; } - /* Remove items from urlbar */ + /* Remove items from URL Bar */ #tracking-protection-icon-container, #identity-permission-box, #userContext-indicator, @@ -32,7 +62,7 @@ display: none !important; } - /* Urlbar font resizing */ + /* URL Bar font resizing */ #urlbar-input { font-size: 10pt !important; } @@ -40,36 +70,11 @@ font-size: calc(var(--urlbar-height) - 9px) !important; } - /* Hide Inactive tab close button (x) + /* Hide inactive tab close button (x) to prevent accidentally closing tabs when selecting them */ .tab-close-button:not([selected]), .tabbrowser-tab:not([selected]):hover .tab-close-button { visibility: hidden !important; } - /* Disable tab loading burst - (because it's annoying) */ - .tab-loading-burst { - display: none !important; - } - - /* Tabs Toolbar and Container tab line color - (hides container tab line above tab by making it the same color as the Tabs Toolbar) */ - #TabsToolbar, - .tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line { - background-color: var(--tab-bgcolor) !important; - } - - /* Menubar color - (hides the line at the top of the screen when Menubar is hidden) */ - toolbar[type=menubar] { - background-color: black !important; - color: var(--toolbar-color) !important; - } - - /* Navbar bottom border color */ - #navigator-toolbox { - border-bottom-color: black !important; - } - } diff --git a/src/userChrome/dynamic_popups.css b/src/userChrome/dynamic_popups.css new file mode 100644 index 0000000..de375fe --- /dev/null +++ b/src/userChrome/dynamic_popups.css @@ -0,0 +1,86 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/* Apply this customization only on smaller screens */ +@media (max-width: 700px) { + + /* Density variables */ + :root:not([uidensity="touch"]) { + --unified-extensions-panel-padding: 112px; + --customizationui-widget-panel-padding: 112px; + } + :root[uidensity="touch"] { + --unified-extensions-panel-padding: 110px; + --customizationui-widget-panel-padding: 110px; + } + + /* Dynamically expand popups */ + #unified-extensions-view { + height: calc(100vh - 171px) !important; + max-height: calc(100vh - 171px) !important; + } + #customizationui-widget-multiview box.panel-viewstack { + height: calc(100vh - 165px) !important; + max-height: calc(100vh - 165px) !important; + } + #appMenu-popup, + #appMenu-protonMainView vbox.panel-subview-body { + margin-top: 0 !important; + height: calc(100vh - 107px) !important; + max-height: calc(100vh - 107px) !important; + } + + /* Adjust Unified Extensions Menu and Tab Manager Menu to fill screen width */ + #unified-extensions-panel, + #customizationui-widget-panel { + padding: 0 !important; + } + #customizationui-widget-multiview { + width: 100vw !important; + } + #allTabsMenu-allTabsView-tabs { + max-width: calc(100vw - 10px) !important; + } + #unified-extensions-view, + #allTabsMenu-containerTabsButton, + .all-tabs-item { + width: calc(100vw - 10px) !important; + } + + /* Adjust Unified Extensions Menu spawn height */ + #unified-extensions-panel { + margin-bottom: 6px !important; + padding-top: var(--unified-extensions-panel-padding) !important; + } + + /* Adjust Tab Manager Menu spawn height */ + #customizationui-widget-panel { + margin-bottom: 6px !important; + padding-top: var(--customizationui-widget-panel-padding) !important; + } + + /* Blend panels into background */ + #unified-extensions-panel, + #customizationui-widget-panel { + background-color: black !important; + } + + /* Allow extensions to use full popup */ + .webextension-popup-browser { + height: 100% !important; + min-height: 100% !important; + width: 100vw !important; + min-width: 100vw !important; + } + + /* Added extra space to bottom of Unified Extensions Menu to compensate for orientation problem that would leave some extensions hidden in portrait mode when Unified Extentions Menu is first opened in landscape mode */ + #unified-extensions-area { + padding-bottom: 350px !important; + } + + /* Added extra space to bottom of Main App Menu (≡) to compensate for orientation problem that would leave some items hidden in portrait mode when Main App Menu (≡) is first opened in landscape mode */ + #appMenu-quit-button2 { + margin-bottom: 300px !important; + } + +} diff --git a/src/userChrome/dynamic_popups_max.css b/src/userChrome/dynamic_popups_max.css new file mode 100644 index 0000000..0076fc2 --- /dev/null +++ b/src/userChrome/dynamic_popups_max.css @@ -0,0 +1,88 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/* Apply this customization only on smaller screens */ +@media (max-width: 700px) { + + /* Density variables */ + :root:not([uidensity="touch"]) { + --unified-extensions-view-height: calc(100vh - 57px); + --customizationui-widget-height: calc(100vh - 51px); + --unified-extensions-panel-margin: 5px; + --customizationui-widget-panel-margin: 5px; + } + :root[uidensity="touch"] { + --unified-extensions-view-height: calc(100vh - 61px); + --customizationui-widget-height: calc(100vh - 55px); + --unified-extensions-panel-margin: 6px; + --customizationui-widget-panel-margin: 6px; + } + + /* Dynamically expand popups */ + #unified-extensions-view { + height: var(--unified-extensions-view-height) !important; + max-height: var(--unified-extensions-view-height) !important; + } + #customizationui-widget-multiview box.panel-viewstack { + height: var(--customizationui-widget-height) !important; + max-height: var(--customizationui-widget-height) !important; + } + #appMenu-popup, + #appMenu-protonMainView vbox.panel-subview-body { + margin-top: 0 !important; + height: calc(100vh - 107px) !important; + max-height: calc(100vh - 107px) !important; + } + + /* Adjust Unified Extensions Menu and Tab Manager Menu to fill screen width */ + #unified-extensions-panel, + #customizationui-widget-panel { + padding: 0 !important; + } + #customizationui-widget-multiview { + width: 100vw !important; + } + #allTabsMenu-allTabsView-tabs { + max-width: calc(100vw - 10px) !important; + } + #unified-extensions-view, + #allTabsMenu-containerTabsButton, + .all-tabs-item { + width: calc(100vw - 10px) !important; + } + + /* Adjust Unified Extensions Menu spawn height */ + #unified-extensions-panel { + margin-bottom: var(--unified-extensions-panel-margin) !important; + } + + /* Adjust Tab Manager Menu spawn height */ + #customizationui-widget-panel { + margin-bottom: var(--customizationui-widget-panel-margin) !important; + } + + /* Blend panels into background */ + #unified-extensions-panel, + #customizationui-widget-panel { + background-color: black !important; + } + + /* Allow extensions to use full popup */ + .webextension-popup-browser { + height: 100% !important; + min-height: 100% !important; + width: 100vw !important; + min-width: 100vw !important; + } + + /* Added extra space to bottom of Unified Extensions Menu to compensate for orientation problem that would leave some extensions hidden in portrait mode when Unified Extentions Menu is first opened in landscape mode */ + #unified-extensions-area { + padding-bottom: 370px !important; + } + + /* Added extra space to bottom of Main App Menu (≡) to compensate for orientation problem that would leave some items hidden in portrait mode when Main App Menu (≡) is first opened in landscape mode */ + #appMenu-quit-button2 { + margin-bottom: 300px !important; + } + +} diff --git a/src/userChrome/dynamic_popups_plus.css b/src/userChrome/dynamic_popups_plus.css new file mode 100644 index 0000000..ae1cf00 --- /dev/null +++ b/src/userChrome/dynamic_popups_plus.css @@ -0,0 +1,71 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/* Apply this customization only on smaller screens */ +@media (max-width: 700px) { + + /* Density variables */ + :root:not([uidensity="touch"]) { + --unified-extensions-panel-padding: 25px; + --customizationui-widget-panel-padding: 25px; + } + :root[uidensity="touch"] { + --unified-extensions-panel-padding: 22px; + --customizationui-widget-panel-padding: 22px; + } + + /* Dynamically expand popups */ + #unified-extensions-view { + height: calc(100vh - 100px) !important; + max-height: calc(100vh - 100px) !important; + } + #customizationui-widget-multiview box.panel-viewstack { + height: calc(100vh - 95px) !important; + max-height: calc(100vh - 95px) !important; + } + #appMenu-popup, + #appMenu-protonMainView vbox.panel-subview-body { + margin-top: 0 !important; + height: calc(100vh - 107px) !important; + max-height: calc(100vh - 107px) !important; + } + + /* Adjust Unified Extensions Menu spawn height */ + #unified-extensions-panel { + margin-bottom: 6px !important; + padding-top: var(--unified-extensions-panel-padding) !important; + padding-bottom: 17px !important; + } + + /* Adjust Tab Manager Menu spawn height */ + #customizationui-widget-panel { + margin-bottom: 6px !important; + padding-top: var(--customizationui-widget-panel-padding) !important; + padding-bottom: 17px !important; + } + + /* Blend panels into background */ + #unified-extensions-panel, + #customizationui-widget-panel { + background-color: black !important; + } + + /* Allow extensions to use full popup */ + .webextension-popup-browser { + height: 100% !important; + min-height: 100% !important; + width: calc(100vw - 20px) !important; + min-width: calc(100vw - 20px) !important; + } + + /* Added extra space to bottom of Unified Extensions Menu to compensate for orientation problem that would leave some extensions hidden in portrait mode when Unified Extentions Menu is first opened in landscape mode */ + #unified-extensions-area { + padding-bottom: 350px !important; + } + + /* Added extra space to bottom of Main App Menu (≡) to compensate for orientation problem that would leave some items hidden in portrait mode when Main App Menu (≡) is first opened in landscape mode */ + #appMenu-quit-button2 { + margin-bottom: 300px !important; + } + +} diff --git a/src/userChrome/dynamic_popups_pro.css b/src/userChrome/dynamic_popups_pro.css new file mode 100644 index 0000000..fffffd3 --- /dev/null +++ b/src/userChrome/dynamic_popups_pro.css @@ -0,0 +1,83 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/* Apply this customization only on smaller screens */ +@media (max-width: 700px) { + + /* Dynamically expand popups */ + #unified-extensions-view { + height: calc(100vh - 171px) !important; + max-height: calc(100vh - 171px) !important; + } + #customizationui-widget-multiview box.panel-viewstack { + height: calc(100vh - 165px) !important; + max-height: calc(100vh - 165px) !important; + } + #appMenu-popup, + #appMenu-protonMainView vbox.panel-subview-body { + margin-top: 0 !important; + height: calc(100vh - 107px) !important; + max-height: calc(100vh - 107px) !important; + } + + /* Adjust Unified Extensions Menu and Tab Manager Menu to fill screen width */ + #unified-extensions-panel, + #customizationui-widget-panel { + padding: 0 !important; + } + #customizationui-widget-multiview { + width: 100vw !important; + } + #allTabsMenu-allTabsView-tabs { + max-width: calc(100vw - 10px) !important; + } + #unified-extensions-view, + #allTabsMenu-containerTabsButton, + .all-tabs-item { + width: calc(100vw - 10px) !important; + } + + /* Adjust Unified Extensions Menu spawn height */ + #unified-extensions-panel { + margin-bottom: 6px !important; + } + + /* Adjust Tab Manager Menu spawn height */ + #customizationui-widget-panel { + margin-bottom: 6px !important; + } + + /* Blend panels with views */ + panel { + --panel-background: none !important; + --panel-shadow: none !important; + } + #unified-extensions-panel { + background-color: var(--arrowpanel-background) !important; + } + #customizationui-widget-panel { + /* Default color: */ + /*background-color: var(--arrowpanel-background) !important;*/ + /* Fenix color: */ + background-color: var(--toolbar-bgcolor) !important; + } + + /* Allow extensions to use full popup */ + .webextension-popup-browser { + height: 100% !important; + min-height: 100% !important; + width: 100vw !important; + min-width: 100vw !important; + } + + /* Added extra space to bottom of Unified Extensions Menu to compensate for orientation problem that would leave some extensions hidden in portrait mode when Unified Extentions Menu is first opened in landscape mode */ + #unified-extensions-area { + padding-bottom: 350px !important; + } + + /* Added extra space to bottom of Main App Menu (≡) to compensate for orientation problem that would leave some items hidden in portrait mode when Main App Menu (≡) is first opened in landscape mode */ + #appMenu-quit-button2 { + margin-bottom: 300px !important; + } + +} diff --git a/src/userChrome/dynamic_popups_pro_max.css b/src/userChrome/dynamic_popups_pro_max.css new file mode 100644 index 0000000..146fa04 --- /dev/null +++ b/src/userChrome/dynamic_popups_pro_max.css @@ -0,0 +1,97 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/* Apply this customization only on smaller screens */ +@media (max-width: 700px) { + + /* Density variables */ + :root:not([uidensity="touch"]) { + --unified-extensions-view-height: calc(100vh - 57px); + --customizationui-widget-height: calc(100vh - 51px); + --unified-extensions-panel-margin: 5px; + --customizationui-widget-panel-margin: 5px; + } + :root[uidensity="touch"] { + --unified-extensions-view-height: calc(100vh - 61px); + --customizationui-widget-height: calc(100vh - 55px); + --unified-extensions-panel-margin: 6px; + --customizationui-widget-panel-margin: 6px; + } + + /* Dynamically expand popups */ + #unified-extensions-view { + height: var(--unified-extensions-view-height) !important; + max-height: var(--unified-extensions-view-height) !important; + } + #customizationui-widget-multiview box.panel-viewstack { + height: var(--customizationui-widget-height) !important; + max-height: var(--customizationui-widget-height) !important; + } + #appMenu-popup, + #appMenu-protonMainView vbox.panel-subview-body { + margin-top: 0 !important; + height: calc(100vh - 107px) !important; + max-height: calc(100vh - 107px) !important; + } + + /* Adjust Unified Extensions Menu and Tab Manager Menu to fill screen width */ + #unified-extensions-panel, + #customizationui-widget-panel { + padding: 0 !important; + } + #customizationui-widget-multiview { + width: 100vw !important; + } + #allTabsMenu-allTabsView-tabs { + max-width: calc(100vw - 10px) !important; + } + #unified-extensions-view, + #allTabsMenu-containerTabsButton, + .all-tabs-item { + width: calc(100vw - 10px) !important; + } + + /* Adjust Unified Extensions Menu spawn height */ + #unified-extensions-panel { + margin-bottom: var(--unified-extensions-panel-margin) !important; + } + + /* Adjust Tab Manager Menu spawn height */ + #customizationui-widget-panel { + margin-bottom: var(--customizationui-widget-panel-margin) !important; + } + + /* Blend panels with views */ + panel { + --panel-background: none !important; + --panel-shadow: none !important; + } + #unified-extensions-panel { + background-color: var(--arrowpanel-background) !important; + } + #customizationui-widget-panel { + /* Default color: */ + /*background-color: var(--arrowpanel-background) !important;*/ + /* Fenix color: */ + background-color: var(--toolbar-bgcolor) !important; + } + + /* Allow extensions to use full popup */ + .webextension-popup-browser { + height: 100% !important; + min-height: 100% !important; + width: 100vw !important; + min-width: 100vw !important; + } + + /* Added extra space to bottom of Unified Extensions Menu to compensate for orientation problem that would leave some extensions hidden in portrait mode when Unified Extentions Menu is first opened in landscape mode */ + #unified-extensions-area { + padding-bottom: 370px !important; + } + + /* Added extra space to bottom of Main App Menu (≡) to compensate for orientation problem that would leave some items hidden in portrait mode when Main App Menu (≡) is first opened in landscape mode */ + #appMenu-quit-button2 { + margin-bottom: 300px !important; + } + +} diff --git a/src/userChrome/editBookmarkPanel.css b/src/userChrome/editBookmarkPanel.css index d0844b0..c60e110 100644 --- a/src/userChrome/editBookmarkPanel.css +++ b/src/userChrome/editBookmarkPanel.css @@ -9,10 +9,15 @@ * testing. */ #editBookmarkPanel { - margin-top: -390px !important; + /*margin-top: -390px !important; height: 200px; max-height: 200px; - max-width: calc(100vw - 100px); + max-width: calc(100vw - 100px);*/ + background-color: var(--arrowpanel-background) !important; + margin-bottom: 225px !important; + max-height: 100vh !important; + max-width: 100vw !important; + width: 100vw !important; } #editBookmarkPanel box.panel-header, @@ -21,9 +26,11 @@ } #editBookmarkPanelContent { - max-width: 250px !important; + /*max-width: 250px !important; width: 250px !important; - padding-right: 20px; + padding-right: 20px;*/ + padding-top: 0 !important; + padding-bottom: 0 !important; } /* Hide the screenshot and the line below it. The page is right there when @@ -44,10 +51,12 @@ } #editBookmarkPanelBottomButtons { - width: 250px !important; + /*width: 250px !important; min-width: 250px !important; padding: 0px !important; justify-content: flex-start !important; - margin: 0px 0px 20px 0px !important; + margin: 0px 0px 20px 0px !important;*/ + margin-top: -5px !important; + margin-left: -50px !important; } } diff --git a/src/userChrome/extensions_menu.css b/src/userChrome/extensions_menu.css new file mode 100644 index 0000000..f896671 --- /dev/null +++ b/src/userChrome/extensions_menu.css @@ -0,0 +1,44 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/* Apply this customization only on smaller screens */ +@media (max-width: 700px) { + + /* Remove header, separators, and manage-extensions button */ + #unified-extensions-panel .panel-header, + #unified-extensions-panel toolbarseparator, + #unified-extensions-manage-extensions { + display: none !important; + } + + /* Adjust button padding and font size for secondary text */ + #unified-extensions-panel .subviewbutton { + padding: 6px !important; + } + .unified-extensions-item-message { + font-size: 75% !important; + } + + /* Fix flickering */ + #unified-extensions-panel { + --uei-icon-size: 20px; + padding-left: 10px !important; + padding-right: 10px !important; + width: 100vw !important; + } + #unified-extensions-view { + margin-top: 6px !important; + height: 325px !important; + max-height: 325px !important; + width: calc(100vw - 30px) !important; + } + + /* Allow extensions to use full popup */ + .webextension-popup-browser { + height: 100% !important; + min-height: 100% !important; + width: calc(100vw - 20px) !important; + min-width: calc(100vw - 20px) !important; + } + +} diff --git a/src/userChrome/fenix-alt.css b/src/userChrome/fenix-alt.css new file mode 100644 index 0000000..49d07ba --- /dev/null +++ b/src/userChrome/fenix-alt.css @@ -0,0 +1,364 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/******************************************/ +/* IMPORTANT: */ +/* */ +/* One of the things this code will do is */ +/* to move the Tab Manager Menu button to */ +/* the right side of the URL Bar. */ +/* */ +/* For the best results, consider moving */ +/* the Unified Extensions Menu button to */ +/* the left of the URL Bar and removing */ +/* less important toolbar items by using */ +/* the "Customize Toolbar" feature, or by */ +/* using a user.js file in your profile. */ +/******************************************/ + +/* Main App Menu (≡) item icons */ +#appMenu-zoom-controls::before, +#appMenu-fxa-status2[fxastatus] > toolbarbutton::before, +#appMenu-protonMainView > .panel-subview-body > toolbarbutton > image { + fill: currentColor; + -moz-context-properties: fill; + margin-inline: 0 20px !important; +} +#appMenu-zoom-controls::before, +#appMenu-fxa-status2[fxastatus] > toolbarbutton::before { + display: flex; + content: ""; + width: 16px; + height: 16px; +} +#appMenu-new-tab-button2 { + order: 1 !important; + list-style-image: url("chrome://global/skin/icons/plus.svg"); +} +#appMenu-bookmarks-button { + order: 2 !important; + list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg"); +} +#appMenu-history-button { + order: 3 !important; + list-style-image: url("chrome://browser/skin/history.svg"); +} +#appMenu-downloads-button { + order: 4 !important; + list-style-image: url("chrome://browser/skin/downloads/downloads.svg"); +} +#appMenu-extensions-themes-button { + order: 5 !important; + list-style-image: url("chrome://mozapps/skin/extensions/extension.svg"); +} +#appMenu-passwords-button { + order: 6 !important; + list-style-image: url("chrome://browser/skin/login.svg"); +} +#appMenu-find-button2 { + order: 7 !important; + list-style-image: url("chrome://global/skin/icons/search-glass.svg"); +} +#appMenu-zoom-controls { + order: 8 !important; +} +#appMenu-zoom-controls::before { + background-image: url("chrome://browser/skin/fullscreen.svg"); +} +#appMenu-new-window-button2 { + order: 9 !important; + list-style-image: url("chrome://browser/skin/window.svg"); +} +#appMenu-new-private-window-button2 { + order: 10 !important; + list-style-image: url("chrome://browser/skin/privateBrowsing.svg"); +} +#appMenu-save-file-button2 { + order: 11 !important; + list-style-image: url("chrome://browser/skin/save.svg"); +} +#appMenu-print-button2 { + order: 12 !important; + list-style-image: url("chrome://global/skin/icons/print.svg"); +} +#appMenu-help-button2 { + order: 13 !important; + list-style-image: url("chrome://global/skin/icons/help.svg"); +} +#appMenu-more-button2 { + order: 14 !important; + list-style-image: url("chrome://global/skin/icons/developer.svg"); +} +#appMenu-settings-button { + order: 15 !important; + list-style-image: url("chrome://global/skin/icons/settings.svg"); +} +#appMenu-quit-button2 { + order: 16 !important; + list-style-image: url("chrome://devtools/skin/images/search-clear.svg"); +} +/* Use account-button icon for signed in sync item */ +#appMenu-fxa-status2[fxastatus] > toolbarbutton::before { + background-image: var(--avatar-image-url) +} + +/* Apply this customization only on smaller screens in landscape mode */ +@media (max-height: 300px) { + + /* Density variables */ + :root:not([uidensity="touch"]) { + --PanelUI-menu-button-position: 4px; + --urlbar-width: calc(100vw - 188.5px); + } + :root[uidensity="touch"] { + --PanelUI-menu-button-position: 5px; + --urlbar-width: calc(100vw - 196.5px); + } + + /* Change Main App Menu (≡) button to its mobile equivalent (⋮) */ + #PanelUI-menu-button { + position: absolute !important; + right: 0px !important; + bottom: var(--PanelUI-menu-button-position) !important; + margin-right: -10px !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack > .toolbarbutton-icon { + visibility: collapse !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack { + position: relative !important; + width: 75% !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack::before { + content: "⋮"; + color: var(--toolbarbutton-icon-fill); + opacity: var(--toolbarbutton-icon-fill-opacity); + position: absolute; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.9 ); + left: 50%; + transform: translateX(-50%); + font-size: 18px !important; + font-weight: bold !important; + } + + /* Find Bar */ + input.findbar-textbox { + font-size: 12pt !important; + } + + /* Tab Manager Menu inspired by Firefox for Android */ + #allTabsMenu-containerTabsButton { + border-radius: 0 !important; + margin: 0 !important; + padding-left: 10px !important; + padding-right: 10px !important; + width: calc(100vw - 207px) !important; + } + .all-tabs-item { + border-radius: 0 !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(100vw - 207px) !important; + } + .all-tabs-close-button { + border-radius: 100% !important; + margin-left: calc(var(--urlbar-min-height) * -0.6 ) !important; + margin-right: calc(var(--urlbar-min-height) * -0.6 ) !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(var(--urlbar-min-height) * 2.25 ) !important; + } + .all-tabs-close-button > .toolbarbutton-icon { + margin-left: calc(var(--urlbar-min-height) * 0.625 ) !important; + height: calc(var(--urlbar-min-height) * 0.5 ) !important; + width: calc(var(--urlbar-min-height) * 0.5 ) !important; + } + + /* Tab Manager Menu button inspired by Firefox for Android */ + #alltabs-button > .toolbarbutton-badge-stack::before { + border: 1px solid var(--toolbarbutton-icon-fill); + border-radius: 2px; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.85 ) !important; + padding: 0 5px 0 5px; + font-size: 8px !important; + font-weight: 600 !important; + font-family: "Noto Sans" !important; + } + + /* Move Tab Manager Menu button to right of URL Bar */ + :root { + --tab-border-radius: var(--toolbarbutton-border-radius) !important; + } + #alltabs-button > .toolbarbutton-badge-stack { + height: var(--alltabs-button-height) !important; + width: var(--alltabs-button-width) !important; + } + #alltabs-button { + position: absolute; + top: var(--alltabs-button-position) !important; + right: 28.5px; + z-index: 2 !important; + } + + /* Allow room for Tab Manager Menu button */ + #nav-bar { + padding-right: 67px !important; + } + + /* URL Bar */ + #urlbar { + width: var(--urlbar-width) !important; + } + #urlbar, + #searchbar, + #urlbar-input, + #urlbar-input-container, + #urlbar-background { + border-radius: 7px !important; + } + + /* Change Unified Extensions Menu button icon to Home button icon */ + #unified-extensions-button { + list-style-image: url("chrome://browser/skin/home.svg") !important; + } + +} + +/* Apply this customization only on smaller screens in portait mode */ +@media (max-width: 700px) { + + /* Density variables */ + :root:not([uidensity="touch"]) { + --PanelUI-menu-button-position: 4px; + --alltabs-button-height: 32px; + --alltabs-button-width: 32px; + --alltabs-button-position: 4px; + --urlbar-width: calc(100vw - 110.5px); + } + :root[uidensity="touch"] { + --PanelUI-menu-button-position: 5px; + --alltabs-button-height: 34px; + --alltabs-button-width: 34px; + --alltabs-button-position: 5px; + --urlbar-width: calc(100vw - 114.5px); + } + + /* Main App Menu (≡) */ + #appMenu-popup { + width: 260px !important; + } + #appMenu-protonMainView vbox.panel-subview-body { + padding-top: 8px !important; + width: 230px !important; + } + + /* Change Main App Menu (≡) button to its mobile equivalent (⋮) */ + #PanelUI-menu-button { + position: absolute !important; + right: 0px !important; + bottom: var(--PanelUI-menu-button-position) !important; + margin-right: -10px !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack > .toolbarbutton-icon { + visibility: collapse !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack { + position: relative !important; + width: 75% !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack::before { + content: "⋮"; + color: var(--toolbarbutton-icon-fill); + opacity: var(--toolbarbutton-icon-fill-opacity); + position: absolute; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.9 ); + left: 50%; + transform: translateX(-50%); + font-size: 18px !important; + font-weight: bold !important; + } + + /* Hide Back button, Tab Bar, and Private Browsing Indicator */ + #back-button, + #tabbrowser-tabs, + #private-browsing-indicator-with-label { + visibility: collapse !important; + } + + /* Find Bar */ + input.findbar-textbox { + font-size: 12pt !important; + } + + /* Tab Manager Menu inspired by Firefox for Android */ + #allTabsMenu-containerTabsButton { + border-radius: 0 !important; + margin: 0 !important; + padding-left: 10px !important; + padding-right: 10px !important; + width: calc(100vw - 30px) !important; + } + .all-tabs-item { + border-radius: 0 !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(100vw - 30px) !important; + } + .all-tabs-close-button { + border-radius: 100% !important; + margin-left: calc(var(--urlbar-min-height) * -0.6 ) !important; + margin-right: calc(var(--urlbar-min-height) * -0.6 ) !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(var(--urlbar-min-height) * 2.25 ) !important; + } + .all-tabs-close-button > .toolbarbutton-icon { + margin-left: calc(var(--urlbar-min-height) * 0.625 ) !important; + height: calc(var(--urlbar-min-height) * 0.5 ) !important; + width: calc(var(--urlbar-min-height) * 0.5 ) !important; + } + + /* Tab Manager Menu button inspired by Firefox for Android */ + #alltabs-button > .toolbarbutton-badge-stack::before { + border: 1px solid var(--toolbarbutton-icon-fill); + border-radius: 2px; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.85 ) !important; + padding: 0 5px 0 5px; + font-size: 9px !important; + font-weight: 600 !important; + } + + /* Move Tab Manager Menu button to right of urlbar */ + :root { + --tab-border-radius: var(--toolbarbutton-border-radius) !important; + } + #alltabs-button > .toolbarbutton-badge-stack { + height: var(--alltabs-button-height) !important; + width: var(--alltabs-button-width) !important; + } + #alltabs-button { + position: absolute; + top: var(--alltabs-button-position) !important; + right: 28.5px; + z-index: 2 !important; + } + + /* Allow room for Tab Manager Menu button */ + #nav-bar { + padding-right: 67px !important; + } + + /* URL Bar */ + #urlbar-container { + max-width: var(--urlbar-width) !important; + } + #urlbar, + #searchbar, + #urlbar-input, + #urlbar-input-container, + #urlbar-background { + border-radius: 7px !important; + } + + /* Change Unified Extensions Menu button icon to Home button icon */ + #unified-extensions-button { + list-style-image: url("chrome://browser/skin/home.svg") !important; + } + +} diff --git a/src/userChrome/fenix.css b/src/userChrome/fenix.css new file mode 100644 index 0000000..a31431b --- /dev/null +++ b/src/userChrome/fenix.css @@ -0,0 +1,364 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/******************************************/ +/* IMPORTANT: */ +/* */ +/* One of the things this code will do is */ +/* to move the Tab Manager Menu button to */ +/* the right side of the URL Bar. */ +/* */ +/* For the best results, consider moving */ +/* the Unified Extensions Menu button to */ +/* the left of the URL Bar and removing */ +/* less important toolbar items by using */ +/* the "Customize Toolbar" feature, or by */ +/* using a user.js file in your profile. */ +/******************************************/ + +/* Main App Menu (≡) item icons */ +#appMenu-zoom-controls::before, +#appMenu-fxa-status2[fxastatus] > toolbarbutton::before, +#appMenu-protonMainView > .panel-subview-body > toolbarbutton > image { + fill: currentColor; + -moz-context-properties: fill; + margin-inline: 0 20px !important; +} +#appMenu-zoom-controls::before, +#appMenu-fxa-status2[fxastatus] > toolbarbutton::before { + display: flex; + content: ""; + width: 16px; + height: 16px; +} +#appMenu-new-tab-button2 { + order: 1 !important; + list-style-image: url("chrome://global/skin/icons/plus.svg"); +} +#appMenu-bookmarks-button { + order: 2 !important; + list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg"); +} +#appMenu-history-button { + order: 3 !important; + list-style-image: url("chrome://browser/skin/history.svg"); +} +#appMenu-downloads-button { + order: 4 !important; + list-style-image: url("chrome://browser/skin/downloads/downloads.svg"); +} +#appMenu-extensions-themes-button { + order: 5 !important; + list-style-image: url("chrome://mozapps/skin/extensions/extension.svg"); +} +#appMenu-passwords-button { + order: 6 !important; + list-style-image: url("chrome://browser/skin/login.svg"); +} +#appMenu-find-button2 { + order: 7 !important; + list-style-image: url("chrome://global/skin/icons/search-glass.svg"); +} +#appMenu-zoom-controls { + order: 8 !important; +} +#appMenu-zoom-controls::before { + background-image: url("chrome://browser/skin/fullscreen.svg"); +} +#appMenu-new-window-button2 { + order: 9 !important; + list-style-image: url("chrome://browser/skin/window.svg"); +} +#appMenu-new-private-window-button2 { + order: 10 !important; + list-style-image: url("chrome://browser/skin/privateBrowsing.svg"); +} +#appMenu-save-file-button2 { + order: 11 !important; + list-style-image: url("chrome://browser/skin/save.svg"); +} +#appMenu-print-button2 { + order: 12 !important; + list-style-image: url("chrome://global/skin/icons/print.svg"); +} +#appMenu-help-button2 { + order: 13 !important; + list-style-image: url("chrome://global/skin/icons/help.svg"); +} +#appMenu-more-button2 { + order: 14 !important; + list-style-image: url("chrome://global/skin/icons/developer.svg"); +} +#appMenu-settings-button { + order: 15 !important; + list-style-image: url("chrome://global/skin/icons/settings.svg"); +} +#appMenu-quit-button2 { + order: 16 !important; + list-style-image: url("chrome://devtools/skin/images/search-clear.svg"); +} +/* Use account-button icon for signed in sync item */ +#appMenu-fxa-status2[fxastatus] > toolbarbutton::before { + background-image: var(--avatar-image-url) +} + +/* Apply this customization only on smaller screens in landscape mode */ +@media (max-height: 300px) { + + /* Density variables */ + :root:not([uidensity="touch"]) { + --PanelUI-menu-button-position: 4px; + --urlbar-width: calc(100vw - 188.5px); + } + :root[uidensity="touch"] { + --PanelUI-menu-button-position: 5px; + --urlbar-width: calc(100vw - 196.5px); + } + + /* Change Main App Menu (≡) button to its mobile equivalent (⋮) */ + #PanelUI-menu-button { + position: absolute !important; + right: 0px !important; + bottom: var(--PanelUI-menu-button-position) !important; + margin-right: -10px !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack > .toolbarbutton-icon { + visibility: collapse !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack { + position: relative !important; + width: 75% !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack::before { + content: "⋮"; + color: var(--toolbarbutton-icon-fill); + opacity: var(--toolbarbutton-icon-fill-opacity); + position: absolute; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.9 ); + left: 50%; + transform: translateX(-50%); + font-size: 18px !important; + font-weight: bold !important; + } + + /* Find Bar */ + input.findbar-textbox { + font-size: 12pt !important; + } + + /* Tab Manager Menu inspired by Firefox for Android */ + #allTabsMenu-containerTabsButton { + border-radius: 0 !important; + margin: 0 !important; + padding-left: 10px !important; + padding-right: 10px !important; + width: calc(100vw - 207px) !important; + } + .all-tabs-item { + border-radius: 0 !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(100vw - 207px) !important; + } + .all-tabs-close-button { + border-radius: 100% !important; + margin-left: calc(var(--urlbar-min-height) * -0.6 ) !important; + margin-right: calc(var(--urlbar-min-height) * -0.6 ) !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(var(--urlbar-min-height) * 2.25 ) !important; + } + .all-tabs-close-button > .toolbarbutton-icon { + margin-left: calc(var(--urlbar-min-height) * 0.625 ) !important; + height: calc(var(--urlbar-min-height) * 0.5 ) !important; + width: calc(var(--urlbar-min-height) * 0.5 ) !important; + } + + /* Tab Manager Menu button inspired by Firefox for Android */ + #alltabs-button > .toolbarbutton-badge-stack::before { + border: 1px solid var(--toolbarbutton-icon-fill); + border-radius: 2px; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.85 ) !important; + padding: 0 5px 0 5px; + font-size: 8px !important; + font-weight: 600 !important; + font-family: "Noto Sans" !important; + } + + /* Move Tab Manager Menu button to right of URL Bar */ + :root { + --tab-border-radius: var(--toolbarbutton-border-radius) !important; + } + #alltabs-button > .toolbarbutton-badge-stack { + height: var(--alltabs-button-height) !important; + width: var(--alltabs-button-width) !important; + } + #alltabs-button { + position: absolute; + bottom: var(--alltabs-button-position) !important; + right: 28.5px; + z-index: 2 !important; + } + + /* Allow room for Tab Manager Menu button */ + #nav-bar { + padding-right: 67px !important; + } + + /* URL Bar */ + #urlbar { + width: var(--urlbar-width) !important; + } + #urlbar, + #searchbar, + #urlbar-input, + #urlbar-input-container, + #urlbar-background { + border-radius: 7px !important; + } + + /* Change Unified Extensions Menu button icon to Home button icon */ + #unified-extensions-button { + list-style-image: url("chrome://browser/skin/home.svg") !important; + } + +} + +/* Apply this customization only on smaller screens in portait mode */ +@media (max-width: 700px) { + + /* Density variables */ + :root:not([uidensity="touch"]) { + --PanelUI-menu-button-position: 4px; + --alltabs-button-height: 32px; + --alltabs-button-width: 32px; + --alltabs-button-position: 3.5px; + --urlbar-width: calc(100vw - 110.5px); + } + :root[uidensity="touch"] { + --PanelUI-menu-button-position: 5px; + --alltabs-button-height: 34px; + --alltabs-button-width: 34px; + --alltabs-button-position: 4.5px; + --urlbar-width: calc(100vw - 114.5px); + } + + /* Main App Menu (≡) */ + #appMenu-popup { + width: 260px !important; + } + #appMenu-protonMainView vbox.panel-subview-body { + padding-top: 8px !important; + width: 230px !important; + } + + /* Change Main App Menu (≡) button to its mobile equivalent (⋮) */ + #PanelUI-menu-button { + position: absolute !important; + right: 0px !important; + bottom: var(--PanelUI-menu-button-position) !important; + margin-right: -10px !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack > .toolbarbutton-icon { + visibility: collapse !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack { + position: relative !important; + width: 75% !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack::before { + content: "⋮"; + color: var(--toolbarbutton-icon-fill); + opacity: var(--toolbarbutton-icon-fill-opacity); + position: absolute; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.9 ); + left: 50%; + transform: translateX(-50%); + font-size: 18px !important; + font-weight: bold !important; + } + + /* Hide Back button, Tab Bar, and Private Browsing Indicator */ + #back-button, + #tabbrowser-tabs, + #private-browsing-indicator-with-label { + visibility: collapse !important; + } + + /* Find Bar */ + input.findbar-textbox { + font-size: 12pt !important; + } + + /* Tab Manager Menu inspired by Firefox for Android */ + #allTabsMenu-containerTabsButton { + border-radius: 0 !important; + margin: 0 !important; + padding-left: 10px !important; + padding-right: 10px !important; + width: calc(100vw - 30px) !important; + } + .all-tabs-item { + border-radius: 0 !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(100vw - 30px) !important; + } + .all-tabs-close-button { + border-radius: 100% !important; + margin-left: calc(var(--urlbar-min-height) * -0.6 ) !important; + margin-right: calc(var(--urlbar-min-height) * -0.6 ) !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(var(--urlbar-min-height) * 2.25 ) !important; + } + .all-tabs-close-button > .toolbarbutton-icon { + margin-left: calc(var(--urlbar-min-height) * 0.625 ) !important; + height: calc(var(--urlbar-min-height) * 0.5 ) !important; + width: calc(var(--urlbar-min-height) * 0.5 ) !important; + } + + /* Tab Manager Menu button inspired by Firefox for Android */ + #alltabs-button > .toolbarbutton-badge-stack::before { + border: 1px solid var(--toolbarbutton-icon-fill); + border-radius: 2px; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.85 ) !important; + padding: 0 5px 0 5px; + font-size: 9px !important; + font-weight: 600 !important; + } + + /* Move Tab Manager Menu button to right of urlbar */ + :root { + --tab-border-radius: var(--toolbarbutton-border-radius) !important; + } + #alltabs-button > .toolbarbutton-badge-stack { + height: var(--alltabs-button-height) !important; + width: var(--alltabs-button-width) !important; + } + #alltabs-button { + position: absolute; + bottom: var(--alltabs-button-position) !important; + right: 28.5px; + z-index: 2 !important; + } + + /* Allow room for Tab Manager Menu button */ + #nav-bar { + padding-right: 67px !important; + } + + /* URL Bar */ + #urlbar-container { + max-width: var(--urlbar-width) !important; + } + #urlbar, + #searchbar, + #urlbar-input, + #urlbar-input-container, + #urlbar-background { + border-radius: 7px !important; + } + + /* Change Unified Extensions Menu button icon to Home button icon */ + #unified-extensions-button { + list-style-image: url("chrome://browser/skin/home.svg") !important; + } + +} diff --git a/src/userChrome/fenix_colors.css b/src/userChrome/fenix_colors.css new file mode 100644 index 0000000..d573fe3 --- /dev/null +++ b/src/userChrome/fenix_colors.css @@ -0,0 +1,242 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/color_variable_template.css made available under Mozilla Public License v. 2.0 +See the above repository for updates as well as full license text. */ + +:root { + /* Popup panels */ + --arrowpanel-background: rgb(41,29,79) !important; + --arrowpanel-border-color: transparent !important; + --arrowpanel-color: white !important; + --arrowpanel-dimmed: rgb(97,84,124) !important; + --arrowpanel-dimmed-further: rgb(66,50,98) !important; + --panel-background: rgb(41,29,79) !important; + --panel-border-color: transparent !important; + --panel-color: white !important; + --panel-separator-color: transparent !important; + --panel-item-hover-bgcolor: rgba(255,255,255,0.2) !important; + --panel-item-active-bgcolor: rgba(255,255,255,0.2) !important; + --panel-banner-item-background-color: rgb(117,66,228) !important; + --panel-banner-item-hover-bgcolor: rgb(69,68,76) !important; + --panel-banner-item-active-bgcolor: rgb(69,68,76) !important; + --panel-banner-item-update-supported-bgcolor: rgb(117,66,228) !important; + --panel-banner-item-info-icon-bgcolor: rgb(117,66,228) !important; + --panel-banner-item-color: white !important; + --panel-description-color: white !important; + --panel-disabled-color: gray !important; + --menuitem-disabled-hover-background-color: transparent !important; + + /* window and toolbar background */ + --lwt-accent-color: rgb(117,66,228) !important; + --lwt-accent-color-inactive: rgba(117,66,228,0.3) !important; + --toolbar-non-lwt-bgcolor: rgb(41,29,79) !important; + --toolbar-non-lwt-textcolor: white !important; + --toolbar-bgcolor: rgb(43,42,51) !important; + --toolbar-color: rgb(171,113,255) !important; + --tabpanel-background-color: black !important; + + /* tabs with system theme - text is not controlled by variable */ + --tab-selected-bgcolor: rgb(117,66,228) !important; + + /* tabs with any other theme */ + --lwt-text-color: white !important; + --lwt-selected-tab-background-color: rgb(117,66,228) !important; + + /* toolbar area */ + --toolbarbutton-icon-fill: white !important; + --toolbarbutton-icon-fill-attention: white !important; + --toolbarbutton-hover-background: rgba(255,255,255,0.2) !important; + --toolbarbutton-active-background: rgba(255,255,255,0.2) !important; + --lwt-toolbarbutton-icon-fill-attention: white !important; + --lwt-toolbarbutton-hover-background: rgba(255,255,255,0.2) !important; + --lwt-toolbarbutton-active-background: rgba(255,255,255,0.2) !important; + --toolbarseparator-color: black !important; + + /* urlbar */ + --toolbar-field-border-color: rgb(28,27,34) !important; + --toolbar-field-focus-border-color: rgb(28,27,34) !important; + --urlbar-popup-url-color: white !important; + --urlbar-box-bgcolor: var(--button-bgcolor); + --urlbar-box-focus-bgcolor: var(--button-bgcolor); + --urlbar-box-hover-bgcolor: var(--button-hover-bgcolor); + --urlbar-box-active-bgcolor: var(--button-active-bgcolor); + --urlbar-box-text-color: inherit; + --urlbar-box-hover-text-color: var(--urlbar-box-text-color); + --lwt-brighttext-url-color: #00ddff; + + /* urlbar Firefox < 92 */ + --lwt-toolbar-field-background-color: rgb(28,27,34) !important; + --lwt-toolbar-field-focus: white !important; + --lwt-toolbar-field-color: white !important; + --lwt-toolbar-field-focus-color: white !important; + + /* urlbar Firefox 92+ */ + --toolbar-field-background-color: rgb(28,27,34) !important; + --toolbar-field-focus-background-color: rgb(28,27,34) !important; + --toolbar-field-icon-fill-attention: rgb(117,66,228) !important; + --toolbar-field-color: white !important; + --toolbar-field-focus-color: white !important; + + /* sidebar - note the sidebar-box rule for the header-area */ + --lwt-sidebar-background-color: rgb(41,29,79) !important; + --lwt-sidebar-text-color: white !important; + + /* findbar */ + --focus-outline-color: rgb(117,66,228) !important; + --input-border-color: rgb(117,66,228) !important; + +/* buttons and checkboxes */ + --button-bgcolor: rgb(117,66,228) !important; + --button-color: white !important; + --button-hover-bgcolor: rgb(144,89,255) !important; + --button-active-bgcolor: rgb(144,89,255) !important; + --button-primary-bgcolor: rgb(117,66,228) !important; + --button-primary-hover-bgcolor: rgb(144,89,255) !important; + --button-primary-active-bgcolor: rgb(144,89,255) !important; + --button-primary-color: white !important; + --in-content-primary-button-background: rgb(117,66,228) !important; + --in-content-primary-button-background-hover: rgb(144,89,255) !important; + --in-content-primary-button-background-active: rgb(144,89,255) !important; + --buttons-destructive-bgcolor: #e22850; + --buttons-destructive-hover-bgcolor: #c50042; + --buttons-destructive-active-bgcolor: #810220; + --buttons-destructive-color: #fbfbfe; + --checkbox-unchecked-bgcolor: rgb(41,29,79) !important; + --checkbox-unchecked-hover-bgcolor: rgb(144,89,255) !important; + --checkbox-unchecked-active-bgcolor: rgb(144,89,255) !important; + --checkbox-checked-border-color: rgb(117,66,228) !important; + --checkbox-checked-bgcolor: rgb(117,66,228) !important; + --checkbox-checked-color: white !important; + --checkbox-checked-hover-bgcolor: rgba(144,89,255) !important; + --checkbox-checked-active-bgcolor: rgba(144,89,255) !important; + --uc-checkbox-checked-bgcolor: rgb(117,66,228) !important; + + /* icon glow */ + --uc-icon-glow-primary: rgb(117,66,228); + --uc-icon-glow-secondary: white; + --uc-icon-glow-hover-primary: rgb(117,66,228); + --uc-icon-glow-hover-secondary: white; +} + +/* line between nav-bar and tabs toolbar, + also fallback color for border around selected tab */ +#navigator-toolbox { + --lwt-tabs-border-color: rgb(65,64,72) !important; +} + +/* Line above tabs */ +#tabbrowser-tabs { + --lwt-tab-line-color: none !important; +} + +/* the header-area of sidebar needs this to work */ +#sidebar-box { + --sidebar-background-color: rgb(41,29,79) !important; +} + +/* Find Bar */ +.findbar-find-previous, +.findbar-find-next, +input.findbar-textbox, +findbar { + border: none !important; + box-shadow: none !important; + background-color: var(--arrowpanel-background) !important; + color: var(--toolbar-field-color) !important; +} + +/* Context Menus */ +menupopup { + --panel-background: rgb(41,29,79) !important; + --panel-border-color: transparent !important; + --panel-color: white !important; + --panel-separator-color: transparent !important; +} +menuseparator { + display: none !important; +} +menu:hover, +menuitem:hover { + background-color: var(--panel-item-hover-bgcolor) !important; + color: var(--panel-color) !important; +} + +/* Menu popup shadow */ +.menupopup-arrowscrollbox { + box-shadow: 0 5px 5px -3px rgba(0,0,0,0.2), + 0 8px 10px 1px rgba(0,0,0,0.14), + 0 3px 14px 2px rgba(0,0,0,0.12) !important; +} + +/* "Saved to Library!" popup notification */ +#confirmation-hint { + --panel-background: var(--lwt-accent-color) !important; + --panel-border-color: var(--lwt-accent-color) !important; + --panel-color: var(--lwt-text-color) !important; +} + +/* "Confirm before closing multiple tabs" popup checkboxes and dialog buttons */ +.checkbox-check { + background-color: var(--buttons-destructive-bgcolor) !important; + color: var(--buttons-destructive-color) !important; +} +.dialog-button-box > button:nth-child(6) { + background-color: var(--buttons-destructive-bgcolor) !important; + color: var(--buttons-destructive-color) !important; +} + +/* Main App Menu (≡), Tab Manager Menu, and Unified Extensions Menu */ +panel { + --panel-background: black !important; + --panel-shadow: none !important; +} +.panel-viewstack { + background-color: var(--arrowpanel-background) !important; + border-color: var(--arrowpanel-background) !important; +} + +/* Tab Manager Menu */ +#allTabsMenu-allTabsView-tabs, +#allTabsMenu-allTabsView, +#allTabsMenu-containerTabsView { + background-color: var(--toolbar-bgcolor) !important; +} +#allTabsMenu-containerTabsButton, +#allTabsMenu-containerTabsView > .panel-header { + color: var(--toolbar-color) !important; +} +#allTabsMenu-containerTabsButton:hover { + background-color: var(--panel-banner-item-hover-bgcolor) !important; +} +.all-tabs-item[selected] { + background-color: var(--arrowpanel-dimmed-further) !important; +} +.all-tabs-item:hover[selected] { + --panel-item-active-bgcolor: transparent !important; + --panel-item-hover-bgcolor: transparent !important; + background-color: var(--arrowpanel-dimmed) !important; +} +.all-tabs-item:hover:not([selected]) { + --panel-item-active-bgcolor: transparent !important; + --panel-item-hover-bgcolor: transparent !important; + background-color: var(--panel-banner-item-hover-bgcolor) !important; +} +.all-tabs-close-button:hover { + background-color: var(--toolbarbutton-hover-background) !important; +} + +/* Private Browsing Mode theme for URL Bar and Nav Bar */ +:root { + --toolbar-field-border-color: var(--arrowpanel-background) !important; + --toolbar-field-focus-border-color: var(--arrowpanel-background) !important; + --lwt-toolbar-field-background-color: var(--arrowpanel-background) !important; + --toolbar-field-background-color: var(--arrowpanel-background) !important; + --toolbar-field-focus-background-color: var(--arrowpanel-background) !important; +} +#nav-bar { + background-image: -moz-linear-gradient(to right, rgb(112,34,145), rgb(57,52,115)) !important; +} +#navigator-toolbox { + --lwt-tabs-border-color: rgb(134,93,180) !important; +} diff --git a/src/userChrome/fenix_fox-alt.css b/src/userChrome/fenix_fox-alt.css new file mode 100644 index 0000000..e20e475 --- /dev/null +++ b/src/userChrome/fenix_fox-alt.css @@ -0,0 +1,818 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/******************************************/ +/* IMPORTANT: */ +/* */ +/* One of the things this code will do is */ +/* to move the Tab Manager Menu button to */ +/* the right side of the URL Bar. */ +/* */ +/* For the best results, consider moving */ +/* the Unified Extensions Menu button to */ +/* the left of the URL Bar and removing */ +/* less important toolbar items by using */ +/* the "Customize Toolbar" feature, or by */ +/* using a user.js file in your profile. */ +/******************************************/ + +/* Resist Fingerprinting Letterbox background color and minimum width for display and URL Bar */ +:root { + --tabpanel-background-color: black !important; + min-width: 300px !important; +} +#urlbar-container { + min-width: 150px !important; + flex-shrink: 1 !important; +} + +/* Menu Bar color + (hides the line at the top/bottom of the screen when Menubar is hidden) */ +toolbar[type=menubar] { + background-color: black !important; + color: var(--toolbar-color) !important; +} + +/* Nav Bar bottom border color */ +#navigator-toolbox { + border-bottom-color: black !important; +} + +/* Remove popup warning when enterimg Fullscreen */ +.pointerlockfswarning { + display: none !important; +} + +/* Main App Menu (≡) item icons */ +#appMenu-zoom-controls::before, +#appMenu-fxa-status2[fxastatus] > toolbarbutton::before, +#appMenu-protonMainView > .panel-subview-body > toolbarbutton > image { + fill: currentColor; + -moz-context-properties: fill; + margin-inline: 0 20px !important; +} +#appMenu-zoom-controls::before, +#appMenu-fxa-status2[fxastatus] > toolbarbutton::before { + display: flex; + content: ""; + width: 16px; + height: 16px; +} +#appMenu-new-tab-button2 { + order: 1 !important; + list-style-image: url("chrome://global/skin/icons/plus.svg"); +} +#appMenu-bookmarks-button { + order: 2 !important; + list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg"); +} +#appMenu-history-button { + order: 3 !important; + list-style-image: url("chrome://browser/skin/history.svg"); +} +#appMenu-downloads-button { + order: 4 !important; + list-style-image: url("chrome://browser/skin/downloads/downloads.svg"); +} +#appMenu-extensions-themes-button { + order: 5 !important; + list-style-image: url("chrome://mozapps/skin/extensions/extension.svg"); +} +#appMenu-passwords-button { + order: 6 !important; + list-style-image: url("chrome://browser/skin/login.svg"); +} +#appMenu-find-button2 { + order: 7 !important; + list-style-image: url("chrome://global/skin/icons/search-glass.svg"); +} +#appMenu-zoom-controls { + order: 8 !important; +} +#appMenu-zoom-controls::before { + background-image: url("chrome://browser/skin/fullscreen.svg"); +} +#appMenu-new-window-button2 { + order: 9 !important; + list-style-image: url("chrome://browser/skin/window.svg"); +} +#appMenu-new-private-window-button2 { + order: 10 !important; + list-style-image: url("chrome://browser/skin/privateBrowsing.svg"); +} +#appMenu-save-file-button2 { + order: 11 !important; + list-style-image: url("chrome://browser/skin/save.svg"); +} +#appMenu-print-button2 { + order: 12 !important; + list-style-image: url("chrome://global/skin/icons/print.svg"); +} +#appMenu-help-button2 { + order: 13 !important; + list-style-image: url("chrome://global/skin/icons/help.svg"); +} +#appMenu-more-button2 { + order: 14 !important; + list-style-image: url("chrome://global/skin/icons/developer.svg"); +} +#appMenu-settings-button { + order: 15 !important; + list-style-image: url("chrome://global/skin/icons/settings.svg"); +} +#appMenu-quit-button2 { + order: 16 !important; + list-style-image: url("chrome://devtools/skin/images/search-clear.svg"); +} +/* Use account-button icon for signed in sync item */ +#appMenu-fxa-status2[fxastatus] > toolbarbutton::before { + background-image: var(--avatar-image-url) +} + +/* Show Tab Manager Menu button */ +#alltabs-button { + display: -moz-box !important; +} + +/* Tab Manager Menu button tab counter */ +#TabsToolbar-customization-target { + counter-reset: tabCount; +} +.tabbrowser-tab { + counter-increment: tabCount; +} +#alltabs-button > .toolbarbutton-badge-stack > .toolbarbutton-icon { + visibility: collapse !important; +} +#alltabs-button > .toolbarbutton-badge-stack { + position: relative !important; +} +#alltabs-button > .toolbarbutton-badge-stack::before { + content: counter(tabCount); + color: var(--toolbarbutton-icon-fill); + opacity: var(--toolbarbutton-icon-fill-opacity); + position: absolute; + bottom: var(--toolbarbutton-inner-padding); + left: 50%; + transform: translateX(-50%); +} +#alltabs-button > .toolbarbutton-badge-stack { + border-radius: var(--toolbarbutton-border-radius); +} + +/* Tab Manager Menu tab counter */ +#allTabsMenu-allTabsViewTabs, /* before FF 106 */ +#allTabsMenu-allTabsView-tabs { /* since FF 106 */ + counter-reset: nn_tabs 0 !important; +} +.all-tabs-button::before { + display: -moz-inline-box !important; + -moz-padding-end: 8px !important; + content: counter(nn_tabs) !important; + font-size: 12px !important; + margin-top: -2px !important; + margin-right: -2px !important; +} +.all-tabs-item { + counter-increment: nn_tabs !important; +} + +/* Apply this customization only on smaller screens in landscape mode */ +@media (max-height: 300px) { + + /* Density variables */ + :root:not([uidensity="touch"]) { + --PanelUI-menu-button-position: 4px; + --alltabs-button-height: 32px; + --alltabs-button-width: 32px; + --alltabs-button-position: 4px; + --urlbar-width: calc(100vw - 188.5px); + } + :root[uidensity="touch"] { + --PanelUI-menu-button-position: 5px; + --alltabs-button-height: 34px; + --alltabs-button-width: 34px; + --alltabs-button-position: 5px; + --urlbar-width: calc(100vw - 196.5px); + } + + /* Remove items from Main App Menu (≡) */ + #appMenu-fxa-status2, + #appMenu-fxa-separator, + #appMenu-protonMainView toolbarseparator, + #appMenu-fullscreen-button2, + #appMenu-passwords-button, + .subviewbutton[shortcut]::after { + display: none !important; + } + + /* Fix flickering of Main App Menu (≡) */ + #appMenu-popup { + width: 260px !important; + } + #appMenu-protonMainView vbox.panel-subview-body { + height: 253px !important; + max-height: 253px !important; + width: 250px !important; + } + + /* Change Main App Menu (≡) button to its mobile equivalent (⋮) */ + #PanelUI-menu-button { + position: absolute !important; + right: 0px !important; + bottom: var(--PanelUI-menu-button-position) !important; + margin-right: -10px !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack > .toolbarbutton-icon { + visibility: collapse !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack { + position: relative !important; + width: 75% !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack::before { + content: "⋮"; + color: var(--toolbarbutton-icon-fill); + opacity: var(--toolbarbutton-icon-fill-opacity); + position: absolute; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.9 ); + left: 50%; + transform: translateX(-50%); + font-size: 18px !important; + font-weight: bold !important; + } + + /* Hide Tab Bar and Private Browsing indicator */ + #tabbrowser-tabs, + #private-browsing-indicator-with-label { + visibility: collapse !important; + } + + /* Hide Nav Bar when in Fullscreen mode */ + #nav-bar[inFullscreen] { + display: none; + } + + /* Edit Bookmark Panel */ + #editBookmarkPanel { + background-color: var(--arrowpanel-background) !important; + max-height: 100vh !important; + max-width: 100vw !important; + width: 100vw !important; + } + #editBookmarkPanel box.panel-header, + #editBookmarkHeaderSeparator, + #editBookmarkPanelInfoArea, + #editBookmarkSeparator, + #editBMPanel_folderRow, + #editBMPanel_tagsRow { + display: none !important; + } + #editBookmarkPanelContent { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + #editBookmarkPanelBottomButtons { + margin-top: -5px !important; + margin-left: -50px !important; + } + + /* Find Bar*/ + input.findbar-textbox { + font-size: 12pt !important; + } + + /* Remove items from Tab Manager Menu */ + #allTabsMenu-searchTabs, + #allTabsMenu-tabsSeparator { + display: none; + } + + /* Fix flickering of Tab Manager Menu and extension popups */ + #customizationui-widget-panel, + #customizationui-widget-multiview box.panel-viewstack { + height: calc(100vh - 35px) !important; + max-height: calc(100vh - 35px) !important; + width: 100vw !important; + max-width: 100vw !important; + } + + /* Tab Manager Menu inspired by Firefox for Android */ + #allTabsMenu-containerTabsButton { + border-radius: 0 !important; + margin: 0 !important; + padding-left: 10px !important; + padding-right: 10px !important; + width: calc(100vw - 207px) !important; + } + .all-tabs-item { + border-radius: 0 !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(100vw - 207px) !important; + } + .all-tabs-close-button { + border-radius: 100% !important; + margin-left: calc(var(--urlbar-min-height) * -0.6 ) !important; + margin-right: calc(var(--urlbar-min-height) * -0.6 ) !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(var(--urlbar-min-height) * 2.25 ) !important; + } + .all-tabs-close-button > .toolbarbutton-icon { + margin-left: calc(var(--urlbar-min-height) * 0.625 ) !important; + height: calc(var(--urlbar-min-height) * 0.5 ) !important; + width: calc(var(--urlbar-min-height) * 0.5 ) !important; + } + + /* Tab Manager Menu button inspired by Firefox for Android */ + #alltabs-button > .toolbarbutton-badge-stack::before { + border: 1px solid var(--toolbarbutton-icon-fill); + border-radius: 2px; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.85 ) !important; + padding: 0 5px 0 5px; + font-size: 8px !important; + font-weight: 600 !important; + font-family: "Noto Sans" !important; + } + + /* Move Tab Manager Menu button to right of URL Bar */ + :root { + --tab-border-radius: var(--toolbarbutton-border-radius) !important; + } + #alltabs-button > .toolbarbutton-badge-stack { + height: var(--alltabs-button-height) !important; + width: var(--alltabs-button-width) !important; + } + #alltabs-button { + position: absolute; + top: var(--alltabs-button-position) !important; + right: 28.5px; + z-index: 2 !important; + } + + /* Allow room for Tab Manager Menu button */ + #nav-bar { + padding-right: 67px !important; + } + + /* URL Bar */ + #urlbar-container { + max-width: var(--urlbar-width) !important; + } + #urlbar, + #searchbar, + #urlbar-input, + #urlbar-input-container, + #urlbar-background { + border-radius: 7px !important; + } + + /* Remove items from Unified Extensions Menu */ + #unified-extensions-panel .panel-header, + #unified-extensions-panel toolbarseparator, + #unified-extensions-manage-extensions { + display: none !important; + } + + /* Adjust button padding and font size for secondary text in Unified Extensions Menu */ + #unified-extensions-panel .subviewbutton { + padding: 6px !important; + } + .unified-extensions-item-message { + font-size: 75% !important; + } + + /* Fix flickering of Unified Extensions Menu */ + #unified-extensions-panel { + --uei-icon-size: 20px; + width: 360px !important; + } + #unified-extensions-view { + margin-top: 6px !important; + height: 230px !important; + max-height: 230px !important; + width: 350px !important; + } + + /* Add padding to bottom of Unified Extensions Menu to look better */ + #unified-extensions-area { + padding-bottom: 5px !important; + } + + /* Allow extensions to use full display */ + .webextension-popup-browser { + height: 100% !important; + min-height: 100% !important; + width: 100vw !important; + min-width: 100vw !important; + } + + /* Change Unified Extensions Menu button icon to Home button icon */ + #unified-extensions-button { + list-style-image: url("chrome://browser/skin/home.svg") !important; + } + + /* Adjust "Saved to Library!" popup notification */ + #confirmation-hint { + padding: 10px !important; + width: 100vw !important; + } + + /* Adjust "Confirm before closing multiple tabs" popup */ + .dialogFrame { + width: 100vw !important; + max-width: 100vw !important; + } + +} + +/* Apply this customization only on smaller screens in portait mode */ +@media (max-width: 700px) { + + /* Density variables */ + :root:not([uidensity="touch"]) { + --PanelUI-menu-button-position: 4px; + --alltabs-button-height: 32px; + --alltabs-button-width: 32px; + --alltabs-button-position: 4px; + --urlbar-width: calc(100vw - 110.5px); + } + :root[uidensity="touch"] { + --PanelUI-menu-button-position: 5px; + --alltabs-button-height: 34px; + --alltabs-button-width: 34px; + --alltabs-button-position: 5px; + --urlbar-width: calc(100vw - 114.5px); + } + + /* Main App Menu (≡) */ + #appMenu-popup { + padding-left: 10px !important; + padding-right: 10px !important; + height: 340px; + max-height: 340px; + width: 260px !important; + } + #appMenu-protonMainView vbox.panel-subview-body { + margin-top: 4px !important; + height: 318px !important; + max-height: 318px !important; + width: 230px !important; + } + #appMenu-multiView box.panel-viewstack:first-child { + height: calc(100vh - 100px) !important; + max-height: calc(100vh - 100px) !important; + } + #appMenu-fxa-status2, + #appMenu-fxa-separator, + #appMenu-protonMainView toolbarseparator, + #appMenu-fullscreen-button2, + #appMenu-passwords-button, + .subviewbutton[shortcut]::after { + display: none !important; + } + + /* Change Main App Menu (≡) button to its mobile equivalent (⋮) */ + #PanelUI-menu-button { + position: absolute !important; + right: 0px !important; + bottom: var(--PanelUI-menu-button-position) !important; + margin-right: -10px !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack > .toolbarbutton-icon { + visibility: collapse !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack { + position: relative !important; + width: 75% !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack::before { + content: "⋮"; + color: var(--toolbarbutton-icon-fill); + opacity: var(--toolbarbutton-icon-fill-opacity); + position: absolute; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.9 ); + left: 50%; + transform: translateX(-50%); + font-size: 18px !important; + font-weight: bold !important; + } + + /* Hide Tab Bar and Private Browsing Indicator */ + #tabbrowser-tabs, + #private-browsing-indicator-with-label { + visibility: collapse !important; + } + + /* Hide Nav Bar when in Fullscreen mode */ + #nav-bar[inFullscreen] { + display: none; + } + + /* Edit Bookmark Panel */ + #editBookmarkPanel { + background-color: var(--arrowpanel-background) !important; + margin-bottom: 225px !important; + max-height: 100vh !important; + max-width: 100vw !important; + width: 100vw !important; + } + #editBookmarkPanel box.panel-header, + #editBookmarkHeaderSeparator, + #editBookmarkPanelInfoArea, + #editBookmarkSeparator, + #editBMPanel_folderRow, + #editBMPanel_tagsRow { + display: none !important; + } + #editBookmarkPanelContent { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + #editBookmarkPanelBottomButtons { + margin-top: -5px !important; + margin-left: -50px !important; + } + + /* Find Bar */ + .findbar-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + height: 40px !important; + } + .findbar-textbox { + width: 100% !important; + } + .findbar-container checkbox { + padding: 10px 0px; + } + .findbar-highlight, + .findbar-case-sensitive, + .findbar-match-diacritics, + .findbar-entire-word, + /*.found-matches,*/ + .findbar-find-status, + .find-status-icon { + display: none; + } + input.findbar-textbox { + font-size: 12pt !important; + } + + /* Fix Popups */ + #notification-popup { + margin-top: -500px !important; + margin-right: -500px !important; + height: calc(100vh - 250px) !important; + max-width: 100vw !important; + } + #downloadsPanel-mainView { + max-width: calc(100vw - 10px); + } + #backForwardMenu { + margin-top: -250px; + height: 200px; + min-height: 200px; + max-width: 100vw !important; + } + #context-inspect, + #context-inspect-a11y, + #context-savelinktopocket, + #context-searchselect, + #context-sendlinktodevice, + #context-viewpartialsource-selection, + #inspect-separator { + display: none !important + } + #protections-popup, + #permission-popup, + #widget-overflow, + #identity-popup { + max-width: 100vw !important; + } + #protections-popup-mainView { + min-width: 100vw !important; + max-width: 100vw !important; + } + #widget-overflow, + #widget-overflow-mainView { + height: calc(100vh - 80px) !important; + } + #customizationui-widget-panel { + width: 100vw !important; + } + #BMB_bookmarksPopup { + padding-left: 10px !important; + padding-right: 10px !important; + width: 100vw !important; + } + + /* Tab Manager Menu */ + #allTabsMenu-searchTabs, + #allTabsMenu-tabsSeparator { + display: none; + } + #customizationui-widget-panel { + padding-left: 10px !important; + padding-right: 10px !important; + } + #allTabsMenu-multiView box.panel-viewstack { + height: calc(100vh - 100px) !important; + max-height: calc(100vh - 100px) !important; + } + #customizationui-widget-multiview box.panel-viewstack { + height: 330px !important; + max-height: 330px !important; + } + #allTabsMenu-allTabsViewTabs, + #allTabsMenu-allTabsView-tabs { + max-width: calc(100vw - 30px); + padding-top: 2px !important; + } + + /* Tab Manager Menu inspired by Firefox for Android */ + #allTabsMenu-containerTabsButton { + border-radius: 0 !important; + margin: 0 !important; + padding-left: 10px !important; + padding-right: 10px !important; + width: calc(100vw - 30px) !important; + } + .all-tabs-item { + border-radius: 0 !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(100vw - 30px) !important; + } + .all-tabs-close-button { + border-radius: 100% !important; + margin-left: calc(var(--urlbar-min-height) * -0.6 ) !important; + margin-right: calc(var(--urlbar-min-height) * -0.6 ) !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(var(--urlbar-min-height) * 2.25 ) !important; + } + .all-tabs-close-button > .toolbarbutton-icon { + margin-left: calc(var(--urlbar-min-height) * 0.625 ) !important; + height: calc(var(--urlbar-min-height) * 0.5 ) !important; + width: calc(var(--urlbar-min-height) * 0.5 ) !important; + } + + /* Tab Manager Menu button inspired by Firefox for Android */ + #alltabs-button > .toolbarbutton-badge-stack::before { + border: 1px solid var(--toolbarbutton-icon-fill); + border-radius: 2px; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.85 ) !important; + padding: 0 5px 0 5px; + font-size: 8px !important; + font-weight: 600 !important; + font-family: "Noto Sans" !important; + } + + /* Move Tab Manager Menu button to right of urlbar */ + :root { + --tab-border-radius: var(--toolbarbutton-border-radius) !important; + } + #alltabs-button > .toolbarbutton-badge-stack { + height: var(--alltabs-button-height) !important; + width: var(--alltabs-button-width) !important; + } + #alltabs-button { + position: absolute; + top: var(--alltabs-button-position) !important; + right: 28.5px; + z-index: 2 !important; + } + + /* Nav Bar */ + #back-button, + #forward-button, + #customizableui-special-spring1, + #customizableui-special-spring2, + #library-button, + #sidebar-button, + #fxa-toolbar-menu-button { + display: none !important; + } + + /* Allow room for Tab Manager Menu button */ + #nav-bar { + padding-right: 67px !important; + } + + /* URL Bar */ + #urlbar-container { + max-width: var(--urlbar-width) !important; + } + #urlbar { + padding: 0px 5px; + } + #urlbar-input { + font-size: 10pt !important; + } + #urlbar[focused] #urlbar-input { + font-size: calc(var(--urlbar-height) - 9px) !important; + } + #urlbar[focused] #remote-control-box, + #urlbar[focused] #identity-box, + #urlbar[focused] #tracking-protection-icon-container, + #urlbar[focused] #reader-mode-button, + #urlbar[focused] #page-action-buttons, + #tracking-protection-icon-container, + #identity-permission-box, + #userContext-indicator, + #pageActionButton { + display: none; + } + #identity-icon-label { + display: none; + } + .urlbarView { + position: fixed !important; + inset: 0px 0px 84px 0px; + width: 100% !important; + background: var(--arrowpanel-background); + margin: 0px !important; + margin-inline: 0px !important; + border-inline: 0px !important; + overflow-y: auto !important; + overflow-x: none !important; + scrollbar-width: none; + } + #PersonalToolbar { + display: none; + } + :root { + --bookmarks-toolbar-overlapping-browser-height: 0 !important; + } + #urlbar, + #searchbar, + #urlbar-input, + #urlbar-input-container, + #urlbar-background { + border-radius: 7px !important; + } + + /* Remove items from Unified Extensions Menu */ + #unified-extensions-panel .panel-header, + #unified-extensions-panel toolbarseparator, + #unified-extensions-manage-extensions { + display: none !important; + } + + /* Adjust button padding and font size for secondary text in Unified Extensions Menu */ + #unified-extensions-panel .subviewbutton { + padding: 6px !important; + } + .unified-extensions-item-message { + font-size: 75% !important; + } + + /* Fix flickering for Unified Extensions Menu */ + #unified-extensions-panel { + --uei-icon-size: 20px; + padding-left: 10px !important; + padding-right: 10px !important; + width: 100vw !important; + } + #unified-extensions-view { + margin-top: 6px !important; + height: 325px !important; + max-height: 325px !important; + width: calc(100vw - 30px) !important; + } + + /* Allow extensions to use full popup */ + .webextension-popup-browser { + height: 100% !important; + min-height: 100% !important; + width: calc(100vw - 20px) !important; + min-width: calc(100vw - 20px) !important; + } + + /* Change Unified Extensions Menu button icon to Home button icon */ + #unified-extensions-button { + list-style-image: url("chrome://browser/skin/home.svg") !important; + } + + /* Adjust "Saved to Library!" popup notification */ + #confirmation-hint { + padding: 10px !important; + width: 100vw !important; + } + + /* Adjust "Confirm before closing multiple tabs" popup */ + .dialogFrame { + width: 100vw !important; + max-width: 100vw !important; + } + + /* Added extra space to bottom of Unified Extensions Menu to compensate for orientation problem that would leave some extensions hidden in portrait mode when Unified Extentions Menu is first opened in landscape mode */ + #unified-extensions-area { + padding-bottom: 120px !important; + } + + /* Added extra space to bottom of Main App Menu (≡) to compensate for orientation problem that would leave some items hidden in portrait mode when Main App Menu (≡) is first opened in landscape mode */ + #appMenu-quit-button2 { + margin-bottom: 64px !important; + } + +} diff --git a/src/userChrome/fenix_fox.css b/src/userChrome/fenix_fox.css new file mode 100644 index 0000000..fd7335c --- /dev/null +++ b/src/userChrome/fenix_fox.css @@ -0,0 +1,895 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/******************************************/ +/* IMPORTANT: */ +/* */ +/* One of the things this code will do is */ +/* to move the Tab Manager Menu button to */ +/* the right side of the URL Bar. */ +/* */ +/* For the best results, consider moving */ +/* the Unified Extensions Menu button to */ +/* the left of the URL Bar and removing */ +/* less important toolbar items by using */ +/* the "Customize Toolbar" feature, or by */ +/* using a user.js file in your profile. */ +/******************************************/ + +/* Resist Fingerprinting Letterbox background color and minimum width for display and URL Bar */ +:root { + --tabpanel-background-color: black !important; + min-width: 300px !important; +} +#urlbar-container { + min-width: 150px !important; + flex-shrink: 1 !important; +} + +/* Menu Bar color + (hides the line at the top/bottom of the screen when Menubar is hidden) */ +toolbar[type=menubar] { + background-color: black !important; + color: var(--toolbar-color) !important; +} + +/* Nav Bar bottom border color */ +#navigator-toolbox { + border-bottom-color: black !important; +} + +/* Remove popup warning when enterimg Fullscreen */ +.pointerlockfswarning { + display: none !important; +} + +/* Main App Menu (≡) item icons */ +#appMenu-zoom-controls::before, +#appMenu-fxa-status2[fxastatus] > toolbarbutton::before, +#appMenu-protonMainView > .panel-subview-body > toolbarbutton > image { + fill: currentColor; + -moz-context-properties: fill; + margin-inline: 0 20px !important; +} +#appMenu-zoom-controls::before, +#appMenu-fxa-status2[fxastatus] > toolbarbutton::before { + display: flex; + content: ""; + width: 16px; + height: 16px; +} +#appMenu-new-tab-button2 { + order: 1 !important; + list-style-image: url("chrome://global/skin/icons/plus.svg"); +} +#appMenu-bookmarks-button { + order: 2 !important; + list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg"); +} +#appMenu-history-button { + order: 3 !important; + list-style-image: url("chrome://browser/skin/history.svg"); +} +#appMenu-downloads-button { + order: 4 !important; + list-style-image: url("chrome://browser/skin/downloads/downloads.svg"); +} +#appMenu-extensions-themes-button { + order: 5 !important; + list-style-image: url("chrome://mozapps/skin/extensions/extension.svg"); +} +#appMenu-passwords-button { + order: 6 !important; + list-style-image: url("chrome://browser/skin/login.svg"); +} +#appMenu-find-button2 { + order: 7 !important; + list-style-image: url("chrome://global/skin/icons/search-glass.svg"); +} +#appMenu-zoom-controls { + order: 8 !important; +} +#appMenu-zoom-controls::before { + background-image: url("chrome://browser/skin/fullscreen.svg"); +} +#appMenu-new-window-button2 { + order: 9 !important; + list-style-image: url("chrome://browser/skin/window.svg"); +} +#appMenu-new-private-window-button2 { + order: 10 !important; + list-style-image: url("chrome://browser/skin/privateBrowsing.svg"); +} +#appMenu-save-file-button2 { + order: 11 !important; + list-style-image: url("chrome://browser/skin/save.svg"); +} +#appMenu-print-button2 { + order: 12 !important; + list-style-image: url("chrome://global/skin/icons/print.svg"); +} +#appMenu-help-button2 { + order: 13 !important; + list-style-image: url("chrome://global/skin/icons/help.svg"); +} +#appMenu-more-button2 { + order: 14 !important; + list-style-image: url("chrome://global/skin/icons/developer.svg"); +} +#appMenu-settings-button { + order: 15 !important; + list-style-image: url("chrome://global/skin/icons/settings.svg"); +} +#appMenu-quit-button2 { + order: 16 !important; + list-style-image: url("chrome://devtools/skin/images/search-clear.svg"); +} +/* Use account-button icon for signed in sync item */ +#appMenu-fxa-status2[fxastatus] > toolbarbutton::before { + background-image: var(--avatar-image-url) +} + +/* Show Tab Manager Menu button */ +#alltabs-button { + display: -moz-box !important; +} + +/* Tab Manager Menu button tab counter */ +#TabsToolbar-customization-target { + counter-reset: tabCount; +} +.tabbrowser-tab { + counter-increment: tabCount; +} +#alltabs-button > .toolbarbutton-badge-stack > .toolbarbutton-icon { + visibility: collapse !important; +} +#alltabs-button > .toolbarbutton-badge-stack { + position: relative !important; +} +#alltabs-button > .toolbarbutton-badge-stack::before { + content: counter(tabCount); + color: var(--toolbarbutton-icon-fill); + opacity: var(--toolbarbutton-icon-fill-opacity); + position: absolute; + bottom: var(--toolbarbutton-inner-padding); + left: 50%; + transform: translateX(-50%); +} +#alltabs-button > .toolbarbutton-badge-stack { + border-radius: var(--toolbarbutton-border-radius); +} + +/* Tab Manager Menu tab counter */ +#allTabsMenu-allTabsViewTabs, /* before FF 106 */ +#allTabsMenu-allTabsView-tabs { /* since FF 106 */ + counter-reset: nn_tabs 0 !important; +} +.all-tabs-button::before { + display: -moz-inline-box !important; + -moz-padding-end: 8px !important; + content: counter(nn_tabs) !important; + font-size: 12px !important; + margin-top: -2px !important; + margin-right: -2px !important; +} +.all-tabs-item { + counter-increment: nn_tabs !important; +} + +/* Apply this customization only on smaller screens in landscape mode */ +@media (max-height: 300px) { + + /* Density variables */ + :root:not([uidensity="touch"]) { + --PanelUI-menu-button-position: 4px; + --alltabs-button-height: 32px; + --alltabs-button-width: 32px; + --alltabs-button-position: 3.5px; + --urlbar-width: calc(100vw - 188.5px); + } + :root[uidensity="touch"] { + --PanelUI-menu-button-position: 5px; + --alltabs-button-height: 34px; + --alltabs-button-width: 34px; + --alltabs-button-position: 4.5px; + --urlbar-width: calc(100vw - 196.5px); + } + + /* Remove items from Main App Menu (≡) */ + #appMenu-fxa-status2, + #appMenu-fxa-separator, + #appMenu-protonMainView toolbarseparator, + #appMenu-fullscreen-button2, + #appMenu-passwords-button, + .subviewbutton[shortcut]::after { + display: none !important; + } + + /* Fix flickering of Main App Menu (≡) */ + #appMenu-popup { + width: 260px !important; + } + #appMenu-protonMainView vbox.panel-subview-body { + height: 253px !important; + max-height: 253px !important; + width: 250px !important; + } + + /* Change Main App Menu (≡) button to its mobile equivalent (⋮) */ + #PanelUI-menu-button { + position: absolute !important; + right: 0px !important; + bottom: var(--PanelUI-menu-button-position) !important; + margin-right: -10px !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack > .toolbarbutton-icon { + visibility: collapse !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack { + position: relative !important; + width: 75% !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack::before { + content: "⋮"; + color: var(--toolbarbutton-icon-fill); + opacity: var(--toolbarbutton-icon-fill-opacity); + position: absolute; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.9 ); + left: 50%; + transform: translateX(-50%); + font-size: 18px !important; + font-weight: bold !important; + } + + /* Hide Tab Bar and Private Browsing indicator */ + #tabbrowser-tabs, + #private-browsing-indicator-with-label { + visibility: collapse !important; + } + + /* Hide Nav Bar when in Fullscreen mode */ + #nav-bar[inFullscreen] { + display: none; + } + + /* Move Nav Bar to bottom */ + :root:not([uidensity="touch"],[inFullscreen]) { + --uc-bottom-toolbar-height: calc(39px + var(--toolbarbutton-outer-padding) ) + } + :root[uidensity="touch"]:not([inFullscreen]){ + --uc-bottom-toolbar-height: calc(43px + var(--toolbarbutton-outer-padding) ) + } + #browser, + #customization-container { + margin-bottom: var(--uc-bottom-toolbar-height,0px) + } + #nav-bar{ + position: fixed !important; + bottom: 0px; + width: 100%; + z-index: 1; + } + .panel-viewstack { + max-height: unset !important; + } + + /* Edit Bookmark Panel */ + #editBookmarkPanel { + background-color: var(--arrowpanel-background) !important; + max-height: 100vh !important; + max-width: 100vw !important; + width: 100vw !important; + } + #editBookmarkPanel box.panel-header, + #editBookmarkHeaderSeparator, + #editBookmarkPanelInfoArea, + #editBookmarkSeparator, + #editBMPanel_folderRow, + #editBMPanel_tagsRow { + display: none !important; + } + #editBookmarkPanelContent { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + #editBookmarkPanelBottomButtons { + margin-top: -5px !important; + margin-left: -50px !important; + } + + /* Find Bar*/ + input.findbar-textbox { + font-size: 12pt !important; + } + + /* Remove items from Tab Manager Menu */ + #allTabsMenu-searchTabs, + #allTabsMenu-tabsSeparator { + display: none; + } + + /* Fix flickering of Tab Manager Menu and extension popups */ + #customizationui-widget-panel, + #customizationui-widget-multiview box.panel-viewstack { + height: calc(100vh - 35px) !important; + max-height: calc(100vh - 35px) !important; + width: 100vw !important; + max-width: 100vw !important; + } + + /* Tab Manager Menu inspired by Firefox for Android */ + #allTabsMenu-containerTabsButton { + border-radius: 0 !important; + margin: 0 !important; + padding-left: 10px !important; + padding-right: 10px !important; + width: calc(100vw - 207px) !important; + } + .all-tabs-item { + border-radius: 0 !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(100vw - 207px) !important; + } + .all-tabs-close-button { + border-radius: 100% !important; + margin-left: calc(var(--urlbar-min-height) * -0.6 ) !important; + margin-right: calc(var(--urlbar-min-height) * -0.6 ) !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(var(--urlbar-min-height) * 2.25 ) !important; + } + .all-tabs-close-button > .toolbarbutton-icon { + margin-left: calc(var(--urlbar-min-height) * 0.625 ) !important; + height: calc(var(--urlbar-min-height) * 0.5 ) !important; + width: calc(var(--urlbar-min-height) * 0.5 ) !important; + } + + /* Tab Manager Menu button inspired by Firefox for Android */ + #alltabs-button > .toolbarbutton-badge-stack::before { + border: 1px solid var(--toolbarbutton-icon-fill); + border-radius: 2px; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.85 ) !important; + padding: 0 5px 0 5px; + font-size: 8px !important; + font-weight: 600 !important; + font-family: "Noto Sans" !important; + } + + /* Move Tab Manager Menu button to right of URL Bar */ + :root { + --tab-border-radius: var(--toolbarbutton-border-radius) !important; + } + #alltabs-button > .toolbarbutton-badge-stack { + height: var(--alltabs-button-height) !important; + width: var(--alltabs-button-width) !important; + } + #alltabs-button { + position: absolute; + bottom: var(--alltabs-button-position) !important; + right: 28.5px; + z-index: 2 !important; + } + + /* Allow room for Tab Manager Menu button */ + #nav-bar { + padding-right: 67px !important; + } + + /* URL Bar */ + #urlbar-container { + max-width: var(--urlbar-width) !important; + } + #urlbar, + #searchbar, + #urlbar-input, + #urlbar-input-container, + #urlbar-background { + border-radius: 7px !important; + } + + /* Remove items from Unified Extensions Menu */ + #unified-extensions-panel .panel-header, + #unified-extensions-panel toolbarseparator, + #unified-extensions-manage-extensions { + display: none !important; + } + + /* Adjust button padding and font size for secondary text in Unified Extensions Menu */ + #unified-extensions-panel .subviewbutton { + padding: 6px !important; + } + .unified-extensions-item-message { + font-size: 75% !important; + } + + /* Fix flickering of Unified Extensions Menu */ + #unified-extensions-panel { + --uei-icon-size: 20px; + width: 360px !important; + } + #unified-extensions-view { + margin-top: 6px !important; + height: 230px !important; + max-height: 230px !important; + width: 350px !important; + } + + /* Add padding to bottom of Unified Extensions Menu to look better */ + #unified-extensions-area { + padding-bottom: 5px !important; + } + + /* Allow extensions to use full display */ + .webextension-popup-browser { + height: 100% !important; + min-height: 100% !important; + width: 100vw !important; + min-width: 100vw !important; + } + + /* Change Unified Extensions Menu button icon to Home button icon */ + #unified-extensions-button { + list-style-image: url("chrome://browser/skin/home.svg") !important; + } + + /* Adjust "Saved to Library!" popup notification */ + #confirmation-hint { + padding: 10px !important; + width: 100vw !important; + } + + /* Adjust "Confirm before closing multiple tabs" popup */ + .dialogFrame { + width: 100vw !important; + max-width: 100vw !important; + } + +} + +/* Apply this customization only on smaller screens in portait mode */ +@media (max-width: 700px) { + + /* Density variables */ + :root:not([uidensity="touch"]) { + --PanelUI-menu-button-position: 4px; + --widget-overflow-margin: 22px; + --unified-extensions-panel-margin: 22px; + --customizationui-widget-panel-margin: 22px; + --appMenu-popup-margin: 22px; + --BMB_bookmarksPopup-margin: 22px; + --alltabs-button-height: 32px; + --alltabs-button-width: 32px; + --alltabs-button-position: 3.5px; + --urlbar-width: calc(100vw - 110.5px); + } + :root[uidensity="touch"] { + --PanelUI-menu-button-position: 5px; + --widget-overflow-margin: 23px; + --unified-extensions-panel-margin: 23px; + --customizationui-widget-panel-margin: 23px; + --appMenu-popup-margin: 23px; + --BMB_bookmarksPopup-margin: 23px; + --alltabs-button-height: 34px; + --alltabs-button-width: 34px; + --alltabs-button-position: 4.5px; + --urlbar-width: calc(100vw - 114.5px); + } + + /* Main App Menu (≡) */ + #appMenu-popup { + padding-left: 10px !important; + padding-right: 10px !important; + height: 340px; + max-height: 340px; + width: 260px !important; + } + #appMenu-protonMainView vbox.panel-subview-body { + margin-top: 4px !important; + height: 318px !important; + max-height: 318px !important; + width: 230px !important; + } + #appMenu-multiView box.panel-viewstack:first-child { + height: calc(100vh - 100px) !important; + max-height: calc(100vh - 100px) !important; + } + #appMenu-fxa-status2, + #appMenu-fxa-separator, + #appMenu-protonMainView toolbarseparator, + #appMenu-fullscreen-button2, + #appMenu-passwords-button, + .subviewbutton[shortcut]::after { + display: none !important; + } + + /* Change Main App Menu (≡) button to its mobile equivalent (⋮) */ + #PanelUI-menu-button { + position: absolute !important; + right: 0px !important; + bottom: var(--PanelUI-menu-button-position) !important; + margin-right: -10px !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack > .toolbarbutton-icon { + visibility: collapse !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack { + position: relative !important; + width: 75% !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack::before { + content: "⋮"; + color: var(--toolbarbutton-icon-fill); + opacity: var(--toolbarbutton-icon-fill-opacity); + position: absolute; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.9 ); + left: 50%; + transform: translateX(-50%); + font-size: 18px !important; + font-weight: bold !important; + } + + /* Hide Tab Bar and Private Browsing Indicator */ + #tabbrowser-tabs, + #private-browsing-indicator-with-label { + visibility: collapse !important; + } + + /* Hide Nav Bar when in Fullscreen mode */ + #nav-bar[inFullscreen] { + display: none; + } + + /* Move Nav Bar to bottom */ + :root:not([uidensity="touch"],[inFullscreen]) { + --uc-bottom-toolbar-height: calc(39px + var(--toolbarbutton-outer-padding) ) + } + :root[uidensity="touch"]:not([inFullscreen]){ + --uc-bottom-toolbar-height: calc(43px + var(--toolbarbutton-outer-padding) ) + } + #browser, + #customization-container { + margin-bottom: var(--uc-bottom-toolbar-height,0px) + } + #nav-bar{ + position: fixed !important; + bottom: 0px; + width: 100%; + z-index: 1; + } + .panel-viewstack { + max-height: unset !important; + } + + /* Adjust Widget Overflow Menu (») spawn height */ + #widget-overflow { + margin-bottom: var(--widget-overflow-margin) !important; + } + + /* Adjust Unified Extensions Menu spawn height */ + #unified-extensions-panel { + margin-bottom: var(--unified-extensions-panel-margin) !important; + } + + /* Adjust Tab Manager Menu spawn height */ + #customizationui-widget-panel { + margin-bottom: var(--customizationui-widget-panel-margin) !important; + } + + /* Adjust Main App Menu (≡) spawn height */ + #appMenu-popup { + margin-bottom: var(--appMenu-popup-margin) !important; + } + + /* Adjust Bookmarks Menu (★) spawn height */ + #BMB_bookmarksPopup { + margin-bottom: var(--BMB_bookmarksPopup-margin) !important; + } + + /* Edit Bookmark Panel */ + #editBookmarkPanel { + background-color: var(--arrowpanel-background) !important; + margin-bottom: 225px !important; + max-height: 100vh !important; + max-width: 100vw !important; + width: 100vw !important; + } + #editBookmarkPanel box.panel-header, + #editBookmarkHeaderSeparator, + #editBookmarkPanelInfoArea, + #editBookmarkSeparator, + #editBMPanel_folderRow, + #editBMPanel_tagsRow { + display: none !important; + } + #editBookmarkPanelContent { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + #editBookmarkPanelBottomButtons { + margin-top: -5px !important; + margin-left: -50px !important; + } + + /* Find Bar */ + .findbar-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + height: 40px !important; + } + .findbar-textbox { + width: 100% !important; + } + .findbar-container checkbox { + padding: 10px 0px; + } + .findbar-highlight, + .findbar-case-sensitive, + .findbar-match-diacritics, + .findbar-entire-word, + /*.found-matches,*/ + .findbar-find-status, + .find-status-icon { + display: none; + } + input.findbar-textbox { + font-size: 12pt !important; + } + + /* Fix Popups */ + #notification-popup { + margin-top: -500px !important; + margin-right: -500px !important; + height: calc(100vh - 250px) !important; + max-width: 100vw !important; + } + #downloadsPanel-mainView { + max-width: calc(100vw - 10px); + } + #backForwardMenu { + margin-top: -250px; + height: 200px; + min-height: 200px; + max-width: 100vw !important; + } + #context-inspect, + #context-inspect-a11y, + #context-savelinktopocket, + #context-searchselect, + #context-sendlinktodevice, + #context-viewpartialsource-selection, + #inspect-separator { + display: none !important + } + #protections-popup, + #permission-popup, + #widget-overflow, + #identity-popup { + max-width: 100vw !important; + } + #protections-popup-mainView { + min-width: 100vw !important; + max-width: 100vw !important; + } + #widget-overflow, + #widget-overflow-mainView { + height: calc(100vh - 80px) !important; + } + #customizationui-widget-panel { + width: 100vw !important; + } + #BMB_bookmarksPopup { + padding-left: 10px !important; + padding-right: 10px !important; + width: 100vw !important; + } + + /* Tab Manager Menu */ + #allTabsMenu-searchTabs, + #allTabsMenu-tabsSeparator { + display: none; + } + #customizationui-widget-panel { + padding-left: 10px !important; + padding-right: 10px !important; + } + #allTabsMenu-multiView box.panel-viewstack { + height: calc(100vh - 100px) !important; + max-height: calc(100vh - 100px) !important; + } + #customizationui-widget-multiview box.panel-viewstack { + height: 330px !important; + max-height: 330px !important; + } + #allTabsMenu-allTabsViewTabs, + #allTabsMenu-allTabsView-tabs { + max-width: calc(100vw - 30px); + padding-top: 2px !important; + } + + /* Tab Manager Menu inspired by Firefox for Android */ + #allTabsMenu-containerTabsButton { + border-radius: 0 !important; + margin: 0 !important; + padding-left: 10px !important; + padding-right: 10px !important; + width: calc(100vw - 30px) !important; + } + .all-tabs-item { + border-radius: 0 !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(100vw - 30px) !important; + } + .all-tabs-close-button { + border-radius: 100% !important; + margin-left: calc(var(--urlbar-min-height) * -0.6 ) !important; + margin-right: calc(var(--urlbar-min-height) * -0.6 ) !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(var(--urlbar-min-height) * 2.25 ) !important; + } + .all-tabs-close-button > .toolbarbutton-icon { + margin-left: calc(var(--urlbar-min-height) * 0.625 ) !important; + height: calc(var(--urlbar-min-height) * 0.5 ) !important; + width: calc(var(--urlbar-min-height) * 0.5 ) !important; + } + + /* Tab Manager Menu button inspired by Firefox for Android */ + #alltabs-button > .toolbarbutton-badge-stack::before { + border: 1px solid var(--toolbarbutton-icon-fill); + border-radius: 2px; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.85 ) !important; + padding: 0 5px 0 5px; + font-size: 8px !important; + font-weight: 600 !important; + font-family: "Noto Sans" !important; + } + + /* Move Tab Manager Menu button to right of urlbar */ + :root { + --tab-border-radius: var(--toolbarbutton-border-radius) !important; + } + #alltabs-button > .toolbarbutton-badge-stack { + height: var(--alltabs-button-height) !important; + width: var(--alltabs-button-width) !important; + } + #alltabs-button { + position: absolute; + bottom: var(--alltabs-button-position) !important; + right: 28.5px; + z-index: 2 !important; + } + + /* Nav Bar */ + #back-button, + #forward-button, + #customizableui-special-spring1, + #customizableui-special-spring2, + #library-button, + #sidebar-button, + #fxa-toolbar-menu-button { + display: none !important; + } + + /* Allow room for Tab Manager Menu button */ + #nav-bar { + padding-right: 67px !important; + } + + /* URL Bar */ + #urlbar-container { + max-width: var(--urlbar-width) !important; + } + #urlbar { + padding: 0px 5px; + } + #urlbar-input { + font-size: 10pt !important; + } + #urlbar[focused] #urlbar-input { + font-size: calc(var(--urlbar-height) - 9px) !important; + } + #urlbar[focused] #remote-control-box, + #urlbar[focused] #identity-box, + #urlbar[focused] #tracking-protection-icon-container, + #urlbar[focused] #reader-mode-button, + #urlbar[focused] #page-action-buttons, + #tracking-protection-icon-container, + #identity-permission-box, + #userContext-indicator, + #pageActionButton { + display: none; + } + #identity-icon-label { + display: none; + } + .urlbarView { + position: fixed !important; + inset: 0px 0px 84px 0px; + width: 100% !important; + background: var(--arrowpanel-background); + margin: 0px !important; + margin-inline: 0px !important; + border-inline: 0px !important; + overflow-y: auto !important; + overflow-x: none !important; + scrollbar-width: none; + } + #PersonalToolbar { + display: none; + } + :root { + --bookmarks-toolbar-overlapping-browser-height: 0 !important; + } + #urlbar, + #searchbar, + #urlbar-input, + #urlbar-input-container, + #urlbar-background { + border-radius: 7px !important; + } + + /* Remove items from Unified Extensions Menu */ + #unified-extensions-panel .panel-header, + #unified-extensions-panel toolbarseparator, + #unified-extensions-manage-extensions { + display: none !important; + } + + /* Adjust button padding and font size for secondary text in Unified Extensions Menu */ + #unified-extensions-panel .subviewbutton { + padding: 6px !important; + } + .unified-extensions-item-message { + font-size: 75% !important; + } + + /* Fix flickering for Unified Extensions Menu */ + #unified-extensions-panel { + --uei-icon-size: 20px; + padding-left: 10px !important; + padding-right: 10px !important; + width: 100vw !important; + } + #unified-extensions-view { + margin-top: 6px !important; + height: 325px !important; + max-height: 325px !important; + width: calc(100vw - 30px) !important; + } + + /* Allow extensions to use full popup */ + .webextension-popup-browser { + height: 100% !important; + min-height: 100% !important; + width: calc(100vw - 20px) !important; + min-width: calc(100vw - 20px) !important; + } + + /* Change Unified Extensions Menu button icon to Home button icon */ + #unified-extensions-button { + list-style-image: url("chrome://browser/skin/home.svg") !important; + } + + /* Adjust "Saved to Library!" popup notification */ + #confirmation-hint { + padding: 10px !important; + width: 100vw !important; + } + + /* Adjust "Confirm before closing multiple tabs" popup */ + .dialogFrame { + width: 100vw !important; + max-width: 100vw !important; + } + + /* Added extra space to bottom of Unified Extensions Menu to compensate for orientation problem that would leave some extensions hidden in portrait mode when Unified Extentions Menu is first opened in landscape mode */ + #unified-extensions-area { + padding-bottom: 120px !important; + } + + /* Added extra space to bottom of Main App Menu (≡) to compensate for orientation problem that would leave some items hidden in portrait mode when Main App Menu (≡) is first opened in landscape mode */ + #appMenu-quit-button2 { + margin-bottom: 64px !important; + } + +} diff --git a/src/userChrome/fenix_one-alt.css b/src/userChrome/fenix_one-alt.css new file mode 100644 index 0000000..558cb91 --- /dev/null +++ b/src/userChrome/fenix_one-alt.css @@ -0,0 +1,1054 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/******************************************/ +/* IMPORTANT: */ +/* */ +/* One of the things this code will do is */ +/* to move the Tab Manager Menu button to */ +/* the right side of the URL Bar. */ +/* */ +/* For the best results, consider moving */ +/* the Unified Extensions Menu button to */ +/* the left of the URL Bar and removing */ +/* less important toolbar items by using */ +/* the "Customize Toolbar" feature, or by */ +/* using a user.js file in your profile. */ +/******************************************/ + +/* Resist Fingerprinting Letterbox background color and minimum width for display and URL Bar */ +:root { + --tabpanel-background-color: black !important; + min-width: 300px !important; +} +#urlbar-container { + min-width: 150px !important; + flex-shrink: 1 !important; +} + +/* Menu Bar color + (hides the line at the top/bottom of the screen when Menubar is hidden) */ +toolbar[type=menubar] { + background-color: black !important; + color: var(--toolbar-color) !important; +} + +/* Nav Bar bottom border color */ +#navigator-toolbox { + border-bottom-color: black !important; +} + +/* Remove popup warning when enterimg Fullscreen */ +.pointerlockfswarning { + display: none !important; +} + +/* Fenix Colors */ +:root { + /* Popup panels */ + --arrowpanel-background: rgb(41,29,79) !important; + --arrowpanel-border-color: transparent !important; + --arrowpanel-color: white !important; + --arrowpanel-dimmed: rgb(97,84,124) !important; + --arrowpanel-dimmed-further: rgb(66,50,98) !important; + --panel-background: rgb(41,29,79) !important; + --panel-border-color: transparent !important; + --panel-color: white !important; + --panel-separator-color: transparent !important; + --panel-item-hover-bgcolor: rgba(255,255,255,0.2) !important; + --panel-item-active-bgcolor: rgba(255,255,255,0.2) !important; + --panel-banner-item-background-color: rgb(117,66,228) !important; + --panel-banner-item-hover-bgcolor: rgb(69,68,76) !important; + --panel-banner-item-active-bgcolor: rgb(69,68,76) !important; + --panel-banner-item-update-supported-bgcolor: rgb(117,66,228) !important; + --panel-banner-item-info-icon-bgcolor: rgb(117,66,228) !important; + --panel-banner-item-color: white !important; + --panel-description-color: white !important; + --panel-disabled-color: gray !important; + --menuitem-disabled-hover-background-color: transparent !important; + + /* window and toolbar background */ + --lwt-accent-color: rgb(117,66,228) !important; + --lwt-accent-color-inactive: rgba(117,66,228,0.3) !important; + --toolbar-non-lwt-bgcolor: rgb(41,29,79) !important; + --toolbar-non-lwt-textcolor: white !important; + --toolbar-bgcolor: rgb(43,42,51) !important; + --toolbar-color: rgb(171,113,255) !important; + --tabpanel-background-color: black !important; + + /* tabs with system theme - text is not controlled by variable */ + --tab-selected-bgcolor: rgb(117,66,228) !important; + + /* tabs with any other theme */ + --lwt-text-color: white !important; + --lwt-selected-tab-background-color: rgb(117,66,228) !important; + + /* toolbar area */ + --toolbarbutton-icon-fill: white !important; + --toolbarbutton-icon-fill-attention: white !important; + --toolbarbutton-hover-background: rgba(255,255,255,0.2) !important; + --toolbarbutton-active-background: rgba(255,255,255,0.2) !important; + --lwt-toolbarbutton-icon-fill-attention: white !important; + --lwt-toolbarbutton-hover-background: rgba(255,255,255,0.2) !important; + --lwt-toolbarbutton-active-background: rgba(255,255,255,0.2) !important; + --toolbarseparator-color: black !important; + + /* urlbar */ + --toolbar-field-border-color: rgb(28,27,34) !important; + --toolbar-field-focus-border-color: rgb(28,27,34) !important; + --urlbar-popup-url-color: white !important; + --urlbar-box-bgcolor: var(--button-bgcolor); + --urlbar-box-focus-bgcolor: var(--button-bgcolor); + --urlbar-box-hover-bgcolor: var(--button-hover-bgcolor); + --urlbar-box-active-bgcolor: var(--button-active-bgcolor); + --urlbar-box-text-color: inherit; + --urlbar-box-hover-text-color: var(--urlbar-box-text-color); + --lwt-brighttext-url-color: #00ddff; + + /* urlbar Firefox < 92 */ + --lwt-toolbar-field-background-color: rgb(28,27,34) !important; + --lwt-toolbar-field-focus: white !important; + --lwt-toolbar-field-color: white !important; + --lwt-toolbar-field-focus-color: white !important; + + /* urlbar Firefox 92+ */ + --toolbar-field-background-color: rgb(28,27,34) !important; + --toolbar-field-focus-background-color: rgb(28,27,34) !important; + --toolbar-field-icon-fill-attention: rgb(117,66,228) !important; + --toolbar-field-color: white !important; + --toolbar-field-focus-color: white !important; + + /* sidebar - note the sidebar-box rule for the header-area */ + --lwt-sidebar-background-color: rgb(41,29,79) !important; + --lwt-sidebar-text-color: white !important; + + /* findbar */ + --focus-outline-color: rgb(117,66,228) !important; + --input-border-color: rgb(117,66,228) !important; + +/* buttons and checkboxes */ + --button-bgcolor: rgb(117,66,228) !important; + --button-color: white !important; + --button-hover-bgcolor: rgb(144,89,255) !important; + --button-active-bgcolor: rgb(144,89,255) !important; + --button-primary-bgcolor: rgb(117,66,228) !important; + --button-primary-hover-bgcolor: rgb(144,89,255) !important; + --button-primary-active-bgcolor: rgb(144,89,255) !important; + --button-primary-color: white !important; + --in-content-primary-button-background: rgb(117,66,228) !important; + --in-content-primary-button-background-hover: rgb(144,89,255) !important; + --in-content-primary-button-background-active: rgb(144,89,255) !important; + --buttons-destructive-bgcolor: #e22850; + --buttons-destructive-hover-bgcolor: #c50042; + --buttons-destructive-active-bgcolor: #810220; + --buttons-destructive-color: #fbfbfe; + --checkbox-unchecked-bgcolor: rgb(41,29,79) !important; + --checkbox-unchecked-hover-bgcolor: rgb(144,89,255) !important; + --checkbox-unchecked-active-bgcolor: rgb(144,89,255) !important; + --checkbox-checked-border-color: rgb(117,66,228) !important; + --checkbox-checked-bgcolor: rgb(117,66,228) !important; + --checkbox-checked-color: white !important; + --checkbox-checked-hover-bgcolor: rgba(144,89,255) !important; + --checkbox-checked-active-bgcolor: rgba(144,89,255) !important; + --uc-checkbox-checked-bgcolor: rgb(117,66,228) !important; + + /* icon glow */ + --uc-icon-glow-primary: rgb(117,66,228); + --uc-icon-glow-secondary: white; + --uc-icon-glow-hover-primary: rgb(117,66,228); + --uc-icon-glow-hover-secondary: white; +} + +/* line between nav-bar and tabs toolbar, + also fallback color for border around selected tab */ +#navigator-toolbox { + --lwt-tabs-border-color: rgb(65,64,72) !important; +} + +/* Line above tabs */ +#tabbrowser-tabs { + --lwt-tab-line-color: none !important; +} + +/* the header-area of sidebar needs this to work */ +#sidebar-box { + --sidebar-background-color: rgb(41,29,79) !important; +} + +/* Find Bar */ +.findbar-find-previous, +.findbar-find-next, +input.findbar-textbox, +findbar { + border: none !important; + box-shadow: none !important; + background-color: var(--arrowpanel-background) !important; + color: var(--toolbar-field-color) !important; +} + +/* Context Menus */ +menupopup { + --panel-background: rgb(41,29,79) !important; + --panel-border-color: transparent !important; + --panel-color: white !important; + --panel-separator-color: transparent !important; +} +menuseparator { + display: none !important; +} +menu:hover, +menuitem:hover { + background-color: var(--panel-item-hover-bgcolor) !important; + color: var(--panel-color) !important; +} + +/* Menu popup shadow */ +.menupopup-arrowscrollbox { + box-shadow: 0 5px 5px -3px rgba(0,0,0,0.2), + 0 8px 10px 1px rgba(0,0,0,0.14), + 0 3px 14px 2px rgba(0,0,0,0.12) !important; +} + +/* "Saved to Library!" popup notification */ +#confirmation-hint { + --panel-background: var(--lwt-accent-color) !important; + --panel-border-color: var(--lwt-accent-color) !important; + --panel-color: var(--lwt-text-color) !important; +} + +/* "Confirm before closing multiple tabs" popup checkboxes and dialog buttons */ +.checkbox-check { + background-color: var(--buttons-destructive-bgcolor) !important; + color: var(--buttons-destructive-color) !important; +} +.dialog-button-box > button:nth-child(6) { + background-color: var(--buttons-destructive-bgcolor) !important; + color: var(--buttons-destructive-color) !important; +} + +/* Main App Menu (≡), Tab Manager Menu, and Unified Extensions Menu */ +panel { + --panel-background: black !important; + --panel-shadow: none !important; +} +.panel-viewstack { + background-color: var(--arrowpanel-background) !important; + border-color: var(--arrowpanel-background) !important; +} + +/* Tab Manager Menu */ +#allTabsMenu-allTabsView-tabs, +#allTabsMenu-allTabsView, +#allTabsMenu-containerTabsView { + background-color: var(--toolbar-bgcolor) !important; +} +#allTabsMenu-containerTabsButton, +#allTabsMenu-containerTabsView > .panel-header { + color: var(--toolbar-color) !important; +} +#allTabsMenu-containerTabsButton:hover { + background-color: var(--panel-banner-item-hover-bgcolor) !important; +} +.all-tabs-item[selected] { + background-color: var(--arrowpanel-dimmed-further) !important; +} +.all-tabs-item:hover[selected] { + --panel-item-active-bgcolor: transparent !important; + --panel-item-hover-bgcolor: transparent !important; + background-color: var(--arrowpanel-dimmed) !important; +} +.all-tabs-item:hover:not([selected]) { + --panel-item-active-bgcolor: transparent !important; + --panel-item-hover-bgcolor: transparent !important; + background-color: var(--panel-banner-item-hover-bgcolor) !important; +} +.all-tabs-close-button:hover { + background-color: var(--toolbarbutton-hover-background) !important; +} + +/* Main App Menu (≡) item icons */ +#appMenu-zoom-controls::before, +#appMenu-fxa-status2[fxastatus] > toolbarbutton::before, +#appMenu-protonMainView > .panel-subview-body > toolbarbutton > image { + fill: currentColor; + -moz-context-properties: fill; + margin-inline: 0 20px !important; +} +#appMenu-zoom-controls::before, +#appMenu-fxa-status2[fxastatus] > toolbarbutton::before { + display: flex; + content: ""; + width: 16px; + height: 16px; +} +#appMenu-new-tab-button2 { + order: 1 !important; + list-style-image: url("chrome://global/skin/icons/plus.svg"); +} +#appMenu-bookmarks-button { + order: 2 !important; + list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg"); +} +#appMenu-history-button { + order: 3 !important; + list-style-image: url("chrome://browser/skin/history.svg"); +} +#appMenu-downloads-button { + order: 4 !important; + list-style-image: url("chrome://browser/skin/downloads/downloads.svg"); +} +#appMenu-extensions-themes-button { + order: 5 !important; + list-style-image: url("chrome://mozapps/skin/extensions/extension.svg"); +} +#appMenu-passwords-button { + order: 6 !important; + list-style-image: url("chrome://browser/skin/login.svg"); +} +#appMenu-find-button2 { + order: 7 !important; + list-style-image: url("chrome://global/skin/icons/search-glass.svg"); +} +#appMenu-zoom-controls { + order: 8 !important; +} +#appMenu-zoom-controls::before { + background-image: url("chrome://browser/skin/fullscreen.svg"); +} +#appMenu-new-window-button2 { + order: 9 !important; + list-style-image: url("chrome://browser/skin/window.svg"); +} +#appMenu-new-private-window-button2 { + order: 10 !important; + list-style-image: url("chrome://browser/skin/privateBrowsing.svg"); +} +#appMenu-save-file-button2 { + order: 11 !important; + list-style-image: url("chrome://browser/skin/save.svg"); +} +#appMenu-print-button2 { + order: 12 !important; + list-style-image: url("chrome://global/skin/icons/print.svg"); +} +#appMenu-help-button2 { + order: 13 !important; + list-style-image: url("chrome://global/skin/icons/help.svg"); +} +#appMenu-more-button2 { + order: 14 !important; + list-style-image: url("chrome://global/skin/icons/developer.svg"); +} +#appMenu-settings-button { + order: 15 !important; + list-style-image: url("chrome://global/skin/icons/settings.svg"); +} +#appMenu-quit-button2 { + order: 16 !important; + list-style-image: url("chrome://devtools/skin/images/search-clear.svg"); +} +/* Use account-button icon for signed in sync item */ +#appMenu-fxa-status2[fxastatus] > toolbarbutton::before { + background-image: var(--avatar-image-url) +} + +/* Tab Manager Menu button tab counter */ +#alltabs-button { + display: -moz-box !important; +} +#TabsToolbar-customization-target { + counter-reset: tabCount; +} +.tabbrowser-tab { + counter-increment: tabCount; +} +#alltabs-button > .toolbarbutton-badge-stack > .toolbarbutton-icon { + visibility: collapse !important; +} +#alltabs-button > .toolbarbutton-badge-stack { + position: relative !important; +} +#alltabs-button > .toolbarbutton-badge-stack::before { + content: counter(tabCount); + color: var(--toolbarbutton-icon-fill); + opacity: var(--toolbarbutton-icon-fill-opacity); + position: absolute; + bottom: var(--toolbarbutton-inner-padding); + left: 50%; + transform: translateX(-50%); +} +#alltabs-button > .toolbarbutton-badge-stack { + border-radius: var(--toolbarbutton-border-radius); +} + +/* Tab Manager Menu tab counter */ +#allTabsMenu-allTabsViewTabs, /* before FF 106 */ +#allTabsMenu-allTabsView-tabs { /* since FF 106 */ + counter-reset: nn_tabs 0 !important; +} +.all-tabs-button::before { + display: -moz-inline-box !important; + -moz-padding-end: 8px !important; + content: counter(nn_tabs) !important; + font-size: 12px !important; + margin-top: -2px !important; + margin-right: -2px !important; +} +.all-tabs-item { + counter-increment: nn_tabs !important; +} + +/* Apply this customization only on smaller screens in landscape mode */ +@media (max-height: 300px) { + + /* Density variables */ + :root:not([uidensity="touch"]) { + --PanelUI-menu-button-position: 4px; + --alltabs-button-height: 32px; + --alltabs-button-width: 32px; + --alltabs-button-position: 4px; + --urlbar-width: calc(100vw - 188.5px); + } + :root[uidensity="touch"] { + --PanelUI-menu-button-position: 5px; + --alltabs-button-height: 34px; + --alltabs-button-width: 34px; + --alltabs-button-position: 5px; + --urlbar-width: calc(100vw - 196.5px); + } + + /* Remove items from Main App Menu (≡) */ + #appMenu-fxa-status2, + #appMenu-fxa-separator, + #appMenu-protonMainView toolbarseparator, + #appMenu-fullscreen-button2, + #appMenu-passwords-button, + .subviewbutton[shortcut]::after { + display: none !important; + } + + /* Fix flickering of Main App Menu (≡) */ + #appMenu-popup { + width: 260px !important; + } + #appMenu-protonMainView vbox.panel-subview-body { + height: 253px !important; + max-height: 253px !important; + width: 250px !important; + } + + /* Change Main App Menu (≡) button to its mobile equivalent (⋮) */ + #PanelUI-menu-button { + position: absolute !important; + right: 0px !important; + bottom: var(--PanelUI-menu-button-position) !important; + margin-right: -10px !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack > .toolbarbutton-icon { + visibility: collapse !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack { + position: relative !important; + width: 75% !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack::before { + content: "⋮"; + color: var(--toolbarbutton-icon-fill); + opacity: var(--toolbarbutton-icon-fill-opacity); + position: absolute; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.9 ); + left: 50%; + transform: translateX(-50%); + font-size: 18px !important; + font-weight: bold !important; + } + + /* Hide Tab Bar and Private Browsing indicator */ + #tabbrowser-tabs, + #private-browsing-indicator-with-label { + visibility: collapse !important; + } + + /* Hide Nav Bar when in Fullscreen mode */ + #nav-bar[inFullscreen] { + display: none; + } + + /* Edit Bookmark Panel */ + #editBookmarkPanel { + background-color: var(--arrowpanel-background) !important; + max-height: 100vh !important; + max-width: 100vw !important; + width: 100vw !important; + } + #editBookmarkPanel box.panel-header, + #editBookmarkHeaderSeparator, + #editBookmarkPanelInfoArea, + #editBookmarkSeparator, + #editBMPanel_folderRow, + #editBMPanel_tagsRow { + display: none !important; + } + #editBookmarkPanelContent { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + #editBookmarkPanelBottomButtons { + margin-top: -5px !important; + margin-left: -50px !important; + } + + /* Find Bar*/ + input.findbar-textbox { + font-size: 12pt !important; + } + + /* Remove items from Tab Manager Menu */ + #allTabsMenu-searchTabs, + #allTabsMenu-tabsSeparator { + display: none; + } + + /* Fix flickering of Tab Manager Menu and extension popups */ + #customizationui-widget-panel, + #customizationui-widget-multiview box.panel-viewstack { + height: calc(100vh - 35px) !important; + max-height: calc(100vh - 35px) !important; + width: 100vw !important; + max-width: 100vw !important; + } + + /* Tab Manager Menu inspired by Firefox for Android */ + #allTabsMenu-containerTabsButton { + border-radius: 0 !important; + margin: 0 !important; + padding-left: 10px !important; + padding-right: 10px !important; + width: calc(100vw - 207px) !important; + } + .all-tabs-item { + border-radius: 0 !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(100vw - 207px) !important; + } + .all-tabs-close-button { + border-radius: 100% !important; + margin-left: calc(var(--urlbar-min-height) * -0.6 ) !important; + margin-right: calc(var(--urlbar-min-height) * -0.6 ) !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(var(--urlbar-min-height) * 2.25 ) !important; + } + .all-tabs-close-button > .toolbarbutton-icon { + margin-left: calc(var(--urlbar-min-height) * 0.625 ) !important; + height: calc(var(--urlbar-min-height) * 0.5 ) !important; + width: calc(var(--urlbar-min-height) * 0.5 ) !important; + } + + /* Tab Manager Menu button inspired by Firefox for Android */ + #alltabs-button > .toolbarbutton-badge-stack::before { + border: 1px solid var(--toolbarbutton-icon-fill); + border-radius: 2px; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.85 ) !important; + padding: 0 5px 0 5px; + font-size: 8px !important; + font-weight: 600 !important; + font-family: "Noto Sans" !important; + } + + /* Move Tab Manager Menu button to right of URL Bar */ + :root { + --tab-border-radius: var(--toolbarbutton-border-radius) !important; + } + #alltabs-button > .toolbarbutton-badge-stack { + height: var(--alltabs-button-height) !important; + width: var(--alltabs-button-width) !important; + } + #alltabs-button { + position: absolute; + top: var(--alltabs-button-position) !important; + right: 28.5px; + z-index: 2 !important; + } + + /* Allow room for Tab Manager Menu button */ + #nav-bar { + padding-right: 67px !important; + } + + /* URL Bar */ + #urlbar-container { + max-width: var(--urlbar-width) !important; + } + #urlbar, + #searchbar, + #urlbar-input, + #urlbar-input-container, + #urlbar-background { + border-radius: 7px !important; + } + + /* Remove items from Unified Extensions Menu */ + #unified-extensions-panel .panel-header, + #unified-extensions-panel toolbarseparator, + #unified-extensions-manage-extensions { + display: none !important; + } + + /* Adjust button padding and font size for secondary text in Unified Extensions Menu */ + #unified-extensions-panel .subviewbutton { + padding: 6px !important; + } + .unified-extensions-item-message { + font-size: 75% !important; + } + + /* Fix flickering of Unified Extensions Menu */ + #unified-extensions-panel { + --uei-icon-size: 20px; + width: 360px !important; + } + #unified-extensions-view { + margin-top: 6px !important; + height: 230px !important; + max-height: 230px !important; + width: 350px !important; + } + + /* Add padding to bottom of Unified Extensions Menu to look better */ + #unified-extensions-area { + padding-bottom: 5px !important; + } + + /* Allow extensions to use full display */ + .webextension-popup-browser { + height: 100% !important; + min-height: 100% !important; + width: 100vw !important; + min-width: 100vw !important; + } + + /* Change Unified Extensions Menu button icon to Home button icon */ + #unified-extensions-button { + list-style-image: url("chrome://browser/skin/home.svg") !important; + } + + /* Adjust "Saved to Library!" popup notification */ + #confirmation-hint { + padding: 10px !important; + width: 100vw !important; + } + + /* Adjust "Confirm before closing multiple tabs" popup */ + .dialogFrame { + width: 100vw !important; + max-width: 100vw !important; + } + +} + +/* Apply this customization only on smaller screens in portait mode */ +@media (max-width: 700px) { + + /* Density variables */ + :root:not([uidensity="touch"]) { + --PanelUI-menu-button-position: 4px; + --alltabs-button-height: 32px; + --alltabs-button-width: 32px; + --alltabs-button-position: 4px; + --urlbar-width: calc(100vw - 110.5px); + } + :root[uidensity="touch"] { + --PanelUI-menu-button-position: 5px; + --alltabs-button-height: 34px; + --alltabs-button-width: 34px; + --alltabs-button-position: 5px; + --urlbar-width: calc(100vw - 114.5px); + } + + /* Main App Menu (≡) */ + #appMenu-popup { + padding-left: 10px !important; + padding-right: 10px !important; + height: 340px; + max-height: 340px; + width: 260px !important; + } + #appMenu-protonMainView vbox.panel-subview-body { + margin-top: 4px !important; + height: 318px !important; + max-height: 318px !important; + width: 230px !important; + } + #appMenu-multiView box.panel-viewstack:first-child { + height: calc(100vh - 100px) !important; + max-height: calc(100vh - 100px) !important; + } + #appMenu-fxa-status2, + #appMenu-fxa-separator, + #appMenu-protonMainView toolbarseparator, + #appMenu-fullscreen-button2, + #appMenu-passwords-button, + .subviewbutton[shortcut]::after { + display: none !important; + } + + /* Change Main App Menu (≡) button to its mobile equivalent (⋮) */ + #PanelUI-menu-button { + position: absolute !important; + right: 0px !important; + bottom: var(--PanelUI-menu-button-position) !important; + margin-right: -10px !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack > .toolbarbutton-icon { + visibility: collapse !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack { + position: relative !important; + width: 75% !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack::before { + content: "⋮"; + color: var(--toolbarbutton-icon-fill); + opacity: var(--toolbarbutton-icon-fill-opacity); + position: absolute; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.9 ); + left: 50%; + transform: translateX(-50%); + font-size: 18px !important; + font-weight: bold !important; + } + + /* Hide Tab Bar and Private Browsing Indicator */ + #tabbrowser-tabs, + #private-browsing-indicator-with-label { + visibility: collapse !important; + } + + /* Hide Nav Bar when in Fullscreen mode */ + #nav-bar[inFullscreen] { + display: none; + } + + /* Edit Bookmark Panel */ + #editBookmarkPanel { + background-color: var(--arrowpanel-background) !important; + margin-bottom: 225px !important; + max-height: 100vh !important; + max-width: 100vw !important; + width: 100vw !important; + } + #editBookmarkPanel box.panel-header, + #editBookmarkHeaderSeparator, + #editBookmarkPanelInfoArea, + #editBookmarkSeparator, + #editBMPanel_folderRow, + #editBMPanel_tagsRow { + display: none !important; + } + #editBookmarkPanelContent { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + #editBookmarkPanelBottomButtons { + margin-top: -5px !important; + margin-left: -50px !important; + } + + /* Find Bar */ + .findbar-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + height: 40px !important; + } + .findbar-textbox { + width: 100% !important; + } + .findbar-container checkbox { + padding: 10px 0px; + } + .findbar-highlight, + .findbar-case-sensitive, + .findbar-match-diacritics, + .findbar-entire-word, + /*.found-matches,*/ + .findbar-find-status, + .find-status-icon { + display: none; + } + input.findbar-textbox { + font-size: 12pt !important; + } + + /* Fix Popups */ + #notification-popup { + margin-top: -500px !important; + margin-right: -500px !important; + height: calc(100vh - 250px) !important; + max-width: 100vw !important; + } + #downloadsPanel-mainView { + max-width: calc(100vw - 10px); + } + #backForwardMenu { + margin-top: -250px; + height: 200px; + min-height: 200px; + max-width: 100vw !important; + } + #context-inspect, + #context-inspect-a11y, + #context-savelinktopocket, + #context-searchselect, + #context-sendlinktodevice, + #context-viewpartialsource-selection, + #inspect-separator { + display: none !important + } + #protections-popup, + #permission-popup, + #widget-overflow, + #identity-popup { + max-width: 100vw !important; + } + #protections-popup-mainView { + min-width: 100vw !important; + max-width: 100vw !important; + } + #widget-overflow, + #widget-overflow-mainView { + height: calc(100vh - 80px) !important; + } + #customizationui-widget-panel { + width: 100vw !important; + } + #BMB_bookmarksPopup { + padding-left: 10px !important; + padding-right: 10px !important; + width: 100vw !important; + } + + /* Tab Manager Menu */ + #allTabsMenu-searchTabs, + #allTabsMenu-tabsSeparator { + display: none; + } + #customizationui-widget-panel { + padding-left: 10px !important; + padding-right: 10px !important; + } + #allTabsMenu-multiView box.panel-viewstack { + height: calc(100vh - 100px) !important; + max-height: calc(100vh - 100px) !important; + } + #customizationui-widget-multiview box.panel-viewstack { + height: 330px !important; + max-height: 330px !important; + } + #allTabsMenu-allTabsViewTabs, + #allTabsMenu-allTabsView-tabs { + max-width: calc(100vw - 30px); + padding-top: 2px !important; + } + + /* Tab Manager Menu inspired by Firefox for Android */ + #allTabsMenu-containerTabsButton { + border-radius: 0 !important; + margin: 0 !important; + padding-left: 10px !important; + padding-right: 10px !important; + width: calc(100vw - 30px) !important; + } + .all-tabs-item { + border-radius: 0 !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(100vw - 30px) !important; + } + .all-tabs-close-button { + border-radius: 100% !important; + margin-left: calc(var(--urlbar-min-height) * -0.6 ) !important; + margin-right: calc(var(--urlbar-min-height) * -0.6 ) !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(var(--urlbar-min-height) * 2.25 ) !important; + } + .all-tabs-close-button > .toolbarbutton-icon { + margin-left: calc(var(--urlbar-min-height) * 0.625 ) !important; + height: calc(var(--urlbar-min-height) * 0.5 ) !important; + width: calc(var(--urlbar-min-height) * 0.5 ) !important; + } + + /* Tab Manager Menu button inspired by Firefox for Android */ + #alltabs-button > .toolbarbutton-badge-stack::before { + border: 1px solid var(--toolbarbutton-icon-fill); + border-radius: 2px; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.85 ) !important; + padding: 0 5px 0 5px; + font-size: 8px !important; + font-weight: 600 !important; + font-family: "Noto Sans" !important; + } + + /* Move Tab Manager Menu button to right of urlbar */ + :root { + --tab-border-radius: var(--toolbarbutton-border-radius) !important; + } + #alltabs-button > .toolbarbutton-badge-stack { + height: var(--alltabs-button-height) !important; + width: var(--alltabs-button-width) !important; + } + #alltabs-button { + position: absolute; + top: var(--alltabs-button-position) !important; + right: 28.5px; + z-index: 2 !important; + } + + /* Nav Bar */ + #back-button, + #forward-button, + #customizableui-special-spring1, + #customizableui-special-spring2, + #library-button, + #sidebar-button, + #fxa-toolbar-menu-button { + display: none !important; + } + + /* Allow room for Tab Manager Menu button */ + #nav-bar { + padding-right: 67px !important; + } + + /* URL Bar */ + #urlbar-container { + max-width: var(--urlbar-width) !important; + } + #urlbar { + padding: 0px 5px; + } + #urlbar-input { + font-size: 10pt !important; + } + #urlbar[focused] #urlbar-input { + font-size: calc(var(--urlbar-height) - 9px) !important; + } + #urlbar[focused] #remote-control-box, + #urlbar[focused] #identity-box, + #urlbar[focused] #tracking-protection-icon-container, + #urlbar[focused] #reader-mode-button, + #urlbar[focused] #page-action-buttons, + #tracking-protection-icon-container, + #identity-permission-box, + #userContext-indicator, + #pageActionButton { + display: none; + } + #identity-icon-label { + display: none; + } + .urlbarView { + position: fixed !important; + inset: 0px 0px 84px 0px; + width: 100% !important; + background: var(--arrowpanel-background); + margin: 0px !important; + margin-inline: 0px !important; + border-inline: 0px !important; + overflow-y: auto !important; + overflow-x: none !important; + scrollbar-width: none; + } + #PersonalToolbar { + display: none; + } + :root { + --bookmarks-toolbar-overlapping-browser-height: 0 !important; + } + #urlbar, + #searchbar, + #urlbar-input, + #urlbar-input-container, + #urlbar-background { + border-radius: 7px !important; + } + + /* Remove items from Unified Extensions Menu */ + #unified-extensions-panel .panel-header, + #unified-extensions-panel toolbarseparator, + #unified-extensions-manage-extensions { + display: none !important; + } + + /* Adjust button padding and font size for secondary text in Unified Extensions Menu */ + #unified-extensions-panel .subviewbutton { + padding: 6px !important; + } + .unified-extensions-item-message { + font-size: 75% !important; + } + + /* Fix flickering for Unified Extensions Menu */ + #unified-extensions-panel { + --uei-icon-size: 20px; + padding-left: 10px !important; + padding-right: 10px !important; + width: 100vw !important; + } + #unified-extensions-view { + margin-top: 6px !important; + height: 325px !important; + max-height: 325px !important; + width: calc(100vw - 30px) !important; + } + + /* Allow extensions to use full popup */ + .webextension-popup-browser { + height: 100% !important; + min-height: 100% !important; + width: calc(100vw - 20px) !important; + min-width: calc(100vw - 20px) !important; + } + + /* Change Unified Extensions Menu button icon to Home button icon */ + #unified-extensions-button { + list-style-image: url("chrome://browser/skin/home.svg") !important; + } + + /* Adjust "Saved to Library!" popup notification */ + #confirmation-hint { + padding: 10px !important; + width: 100vw !important; + } + + /* Adjust "Confirm before closing multiple tabs" popup */ + .dialogFrame { + width: 100vw !important; + max-width: 100vw !important; + } + + /* Added extra space to bottom of Unified Extensions Menu to compensate for orientation problem that would leave some extensions hidden in portrait mode when Unified Extentions Menu is first opened in landscape mode */ + #unified-extensions-area { + padding-bottom: 120px !important; + } + + /* Added extra space to bottom of Main App Menu (≡) to compensate for orientation problem that would leave some items hidden in portrait mode when Main App Menu (≡) is first opened in landscape mode */ + #appMenu-quit-button2 { + margin-bottom: 64px !important; + } + +} + +/* Private Browsing Mode theme for URL Bar and Nav Bar */ +:root { + --toolbar-field-border-color: var(--arrowpanel-background) !important; + --toolbar-field-focus-border-color: var(--arrowpanel-background) !important; + --lwt-toolbar-field-background-color: var(--arrowpanel-background) !important; + --toolbar-field-background-color: var(--arrowpanel-background) !important; + --toolbar-field-focus-background-color: var(--arrowpanel-background) !important; +} +#nav-bar { + background-image: -moz-linear-gradient(to right, rgb(112,34,145), rgb(57,52,115)) !important; +} +#navigator-toolbox { + --lwt-tabs-border-color: rgb(134,93,180) !important; +} diff --git a/src/userChrome/fenix_one.css b/src/userChrome/fenix_one.css new file mode 100644 index 0000000..4e071a3 --- /dev/null +++ b/src/userChrome/fenix_one.css @@ -0,0 +1,1131 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/******************************************/ +/* IMPORTANT: */ +/* */ +/* One of the things this code will do is */ +/* to move the Tab Manager Menu button to */ +/* the right side of the URL Bar. */ +/* */ +/* For the best results, consider moving */ +/* the Unified Extensions Menu button to */ +/* the left of the URL Bar and removing */ +/* less important toolbar items by using */ +/* the "Customize Toolbar" feature, or by */ +/* using a user.js file in your profile. */ +/******************************************/ + +/* Resist Fingerprinting Letterbox background color and minimum width for display and URL Bar */ +:root { + --tabpanel-background-color: black !important; + min-width: 300px !important; +} +#urlbar-container { + min-width: 150px !important; + flex-shrink: 1 !important; +} + +/* Menu Bar color + (hides the line at the top/bottom of the screen when Menubar is hidden) */ +toolbar[type=menubar] { + background-color: black !important; + color: var(--toolbar-color) !important; +} + +/* Nav Bar bottom border color */ +#navigator-toolbox { + border-bottom-color: black !important; +} + +/* Remove popup warning when enterimg Fullscreen */ +.pointerlockfswarning { + display: none !important; +} + +/* Fenix Colors */ +:root { + /* Popup panels */ + --arrowpanel-background: rgb(41,29,79) !important; + --arrowpanel-border-color: transparent !important; + --arrowpanel-color: white !important; + --arrowpanel-dimmed: rgb(97,84,124) !important; + --arrowpanel-dimmed-further: rgb(66,50,98) !important; + --panel-background: rgb(41,29,79) !important; + --panel-border-color: transparent !important; + --panel-color: white !important; + --panel-separator-color: transparent !important; + --panel-item-hover-bgcolor: rgba(255,255,255,0.2) !important; + --panel-item-active-bgcolor: rgba(255,255,255,0.2) !important; + --panel-banner-item-background-color: rgb(117,66,228) !important; + --panel-banner-item-hover-bgcolor: rgb(69,68,76) !important; + --panel-banner-item-active-bgcolor: rgb(69,68,76) !important; + --panel-banner-item-update-supported-bgcolor: rgb(117,66,228) !important; + --panel-banner-item-info-icon-bgcolor: rgb(117,66,228) !important; + --panel-banner-item-color: white !important; + --panel-description-color: white !important; + --panel-disabled-color: gray !important; + --menuitem-disabled-hover-background-color: transparent !important; + + /* window and toolbar background */ + --lwt-accent-color: rgb(117,66,228) !important; + --lwt-accent-color-inactive: rgba(117,66,228,0.3) !important; + --toolbar-non-lwt-bgcolor: rgb(41,29,79) !important; + --toolbar-non-lwt-textcolor: white !important; + --toolbar-bgcolor: rgb(43,42,51) !important; + --toolbar-color: rgb(171,113,255) !important; + --tabpanel-background-color: black !important; + + /* tabs with system theme - text is not controlled by variable */ + --tab-selected-bgcolor: rgb(117,66,228) !important; + + /* tabs with any other theme */ + --lwt-text-color: white !important; + --lwt-selected-tab-background-color: rgb(117,66,228) !important; + + /* toolbar area */ + --toolbarbutton-icon-fill: white !important; + --toolbarbutton-icon-fill-attention: white !important; + --toolbarbutton-hover-background: rgba(255,255,255,0.2) !important; + --toolbarbutton-active-background: rgba(255,255,255,0.2) !important; + --lwt-toolbarbutton-icon-fill-attention: white !important; + --lwt-toolbarbutton-hover-background: rgba(255,255,255,0.2) !important; + --lwt-toolbarbutton-active-background: rgba(255,255,255,0.2) !important; + --toolbarseparator-color: black !important; + + /* urlbar */ + --toolbar-field-border-color: rgb(28,27,34) !important; + --toolbar-field-focus-border-color: rgb(28,27,34) !important; + --urlbar-popup-url-color: white !important; + --urlbar-box-bgcolor: var(--button-bgcolor); + --urlbar-box-focus-bgcolor: var(--button-bgcolor); + --urlbar-box-hover-bgcolor: var(--button-hover-bgcolor); + --urlbar-box-active-bgcolor: var(--button-active-bgcolor); + --urlbar-box-text-color: inherit; + --urlbar-box-hover-text-color: var(--urlbar-box-text-color); + --lwt-brighttext-url-color: #00ddff; + + /* urlbar Firefox < 92 */ + --lwt-toolbar-field-background-color: rgb(28,27,34) !important; + --lwt-toolbar-field-focus: white !important; + --lwt-toolbar-field-color: white !important; + --lwt-toolbar-field-focus-color: white !important; + + /* urlbar Firefox 92+ */ + --toolbar-field-background-color: rgb(28,27,34) !important; + --toolbar-field-focus-background-color: rgb(28,27,34) !important; + --toolbar-field-icon-fill-attention: rgb(117,66,228) !important; + --toolbar-field-color: white !important; + --toolbar-field-focus-color: white !important; + + /* sidebar - note the sidebar-box rule for the header-area */ + --lwt-sidebar-background-color: rgb(41,29,79) !important; + --lwt-sidebar-text-color: white !important; + + /* findbar */ + --focus-outline-color: rgb(117,66,228) !important; + --input-border-color: rgb(117,66,228) !important; + +/* buttons and checkboxes */ + --button-bgcolor: rgb(117,66,228) !important; + --button-color: white !important; + --button-hover-bgcolor: rgb(144,89,255) !important; + --button-active-bgcolor: rgb(144,89,255) !important; + --button-primary-bgcolor: rgb(117,66,228) !important; + --button-primary-hover-bgcolor: rgb(144,89,255) !important; + --button-primary-active-bgcolor: rgb(144,89,255) !important; + --button-primary-color: white !important; + --in-content-primary-button-background: rgb(117,66,228) !important; + --in-content-primary-button-background-hover: rgb(144,89,255) !important; + --in-content-primary-button-background-active: rgb(144,89,255) !important; + --buttons-destructive-bgcolor: #e22850; + --buttons-destructive-hover-bgcolor: #c50042; + --buttons-destructive-active-bgcolor: #810220; + --buttons-destructive-color: #fbfbfe; + --checkbox-unchecked-bgcolor: rgb(41,29,79) !important; + --checkbox-unchecked-hover-bgcolor: rgb(144,89,255) !important; + --checkbox-unchecked-active-bgcolor: rgb(144,89,255) !important; + --checkbox-checked-border-color: rgb(117,66,228) !important; + --checkbox-checked-bgcolor: rgb(117,66,228) !important; + --checkbox-checked-color: white !important; + --checkbox-checked-hover-bgcolor: rgba(144,89,255) !important; + --checkbox-checked-active-bgcolor: rgba(144,89,255) !important; + --uc-checkbox-checked-bgcolor: rgb(117,66,228) !important; + + /* icon glow */ + --uc-icon-glow-primary: rgb(117,66,228); + --uc-icon-glow-secondary: white; + --uc-icon-glow-hover-primary: rgb(117,66,228); + --uc-icon-glow-hover-secondary: white; +} + +/* line between nav-bar and tabs toolbar, + also fallback color for border around selected tab */ +#navigator-toolbox { + --lwt-tabs-border-color: rgb(65,64,72) !important; +} + +/* Line above tabs */ +#tabbrowser-tabs { + --lwt-tab-line-color: none !important; +} + +/* the header-area of sidebar needs this to work */ +#sidebar-box { + --sidebar-background-color: rgb(41,29,79) !important; +} + +/* Find Bar */ +.findbar-find-previous, +.findbar-find-next, +input.findbar-textbox, +findbar { + border: none !important; + box-shadow: none !important; + background-color: var(--arrowpanel-background) !important; + color: var(--toolbar-field-color) !important; +} + +/* Context Menus */ +menupopup { + --panel-background: rgb(41,29,79) !important; + --panel-border-color: transparent !important; + --panel-color: white !important; + --panel-separator-color: transparent !important; +} +menuseparator { + display: none !important; +} +menu:hover, +menuitem:hover { + background-color: var(--panel-item-hover-bgcolor) !important; + color: var(--panel-color) !important; +} + +/* Menu popup shadow */ +.menupopup-arrowscrollbox { + box-shadow: 0 5px 5px -3px rgba(0,0,0,0.2), + 0 8px 10px 1px rgba(0,0,0,0.14), + 0 3px 14px 2px rgba(0,0,0,0.12) !important; +} + +/* "Saved to Library!" popup notification */ +#confirmation-hint { + --panel-background: var(--lwt-accent-color) !important; + --panel-border-color: var(--lwt-accent-color) !important; + --panel-color: var(--lwt-text-color) !important; +} + +/* "Confirm before closing multiple tabs" popup checkboxes and dialog buttons */ +.checkbox-check { + background-color: var(--buttons-destructive-bgcolor) !important; + color: var(--buttons-destructive-color) !important; +} +.dialog-button-box > button:nth-child(6) { + background-color: var(--buttons-destructive-bgcolor) !important; + color: var(--buttons-destructive-color) !important; +} + +/* Main App Menu (≡), Tab Manager Menu, and Unified Extensions Menu */ +panel { + --panel-background: black !important; + --panel-shadow: none !important; +} +.panel-viewstack { + background-color: var(--arrowpanel-background) !important; + border-color: var(--arrowpanel-background) !important; +} + +/* Tab Manager Menu */ +#allTabsMenu-allTabsView-tabs, +#allTabsMenu-allTabsView, +#allTabsMenu-containerTabsView { + background-color: var(--toolbar-bgcolor) !important; +} +#allTabsMenu-containerTabsButton, +#allTabsMenu-containerTabsView > .panel-header { + color: var(--toolbar-color) !important; +} +#allTabsMenu-containerTabsButton:hover { + background-color: var(--panel-banner-item-hover-bgcolor) !important; +} +.all-tabs-item[selected] { + background-color: var(--arrowpanel-dimmed-further) !important; +} +.all-tabs-item:hover[selected] { + --panel-item-active-bgcolor: transparent !important; + --panel-item-hover-bgcolor: transparent !important; + background-color: var(--arrowpanel-dimmed) !important; +} +.all-tabs-item:hover:not([selected]) { + --panel-item-active-bgcolor: transparent !important; + --panel-item-hover-bgcolor: transparent !important; + background-color: var(--panel-banner-item-hover-bgcolor) !important; +} +.all-tabs-close-button:hover { + background-color: var(--toolbarbutton-hover-background) !important; +} + +/* Main App Menu (≡) item icons */ +#appMenu-zoom-controls::before, +#appMenu-fxa-status2[fxastatus] > toolbarbutton::before, +#appMenu-protonMainView > .panel-subview-body > toolbarbutton > image { + fill: currentColor; + -moz-context-properties: fill; + margin-inline: 0 20px !important; +} +#appMenu-zoom-controls::before, +#appMenu-fxa-status2[fxastatus] > toolbarbutton::before { + display: flex; + content: ""; + width: 16px; + height: 16px; +} +#appMenu-new-tab-button2 { + order: 1 !important; + list-style-image: url("chrome://global/skin/icons/plus.svg"); +} +#appMenu-bookmarks-button { + order: 2 !important; + list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg"); +} +#appMenu-history-button { + order: 3 !important; + list-style-image: url("chrome://browser/skin/history.svg"); +} +#appMenu-downloads-button { + order: 4 !important; + list-style-image: url("chrome://browser/skin/downloads/downloads.svg"); +} +#appMenu-extensions-themes-button { + order: 5 !important; + list-style-image: url("chrome://mozapps/skin/extensions/extension.svg"); +} +#appMenu-passwords-button { + order: 6 !important; + list-style-image: url("chrome://browser/skin/login.svg"); +} +#appMenu-find-button2 { + order: 7 !important; + list-style-image: url("chrome://global/skin/icons/search-glass.svg"); +} +#appMenu-zoom-controls { + order: 8 !important; +} +#appMenu-zoom-controls::before { + background-image: url("chrome://browser/skin/fullscreen.svg"); +} +#appMenu-new-window-button2 { + order: 9 !important; + list-style-image: url("chrome://browser/skin/window.svg"); +} +#appMenu-new-private-window-button2 { + order: 10 !important; + list-style-image: url("chrome://browser/skin/privateBrowsing.svg"); +} +#appMenu-save-file-button2 { + order: 11 !important; + list-style-image: url("chrome://browser/skin/save.svg"); +} +#appMenu-print-button2 { + order: 12 !important; + list-style-image: url("chrome://global/skin/icons/print.svg"); +} +#appMenu-help-button2 { + order: 13 !important; + list-style-image: url("chrome://global/skin/icons/help.svg"); +} +#appMenu-more-button2 { + order: 14 !important; + list-style-image: url("chrome://global/skin/icons/developer.svg"); +} +#appMenu-settings-button { + order: 15 !important; + list-style-image: url("chrome://global/skin/icons/settings.svg"); +} +#appMenu-quit-button2 { + order: 16 !important; + list-style-image: url("chrome://devtools/skin/images/search-clear.svg"); +} +/* Use account-button icon for signed in sync item */ +#appMenu-fxa-status2[fxastatus] > toolbarbutton::before { + background-image: var(--avatar-image-url) +} + +/* Tab Manager Menu button tab counter */ +#alltabs-button { + display: -moz-box !important; +} +#TabsToolbar-customization-target { + counter-reset: tabCount; +} +.tabbrowser-tab { + counter-increment: tabCount; +} +#alltabs-button > .toolbarbutton-badge-stack > .toolbarbutton-icon { + visibility: collapse !important; +} +#alltabs-button > .toolbarbutton-badge-stack { + position: relative !important; +} +#alltabs-button > .toolbarbutton-badge-stack::before { + content: counter(tabCount); + color: var(--toolbarbutton-icon-fill); + opacity: var(--toolbarbutton-icon-fill-opacity); + position: absolute; + bottom: var(--toolbarbutton-inner-padding); + left: 50%; + transform: translateX(-50%); +} +#alltabs-button > .toolbarbutton-badge-stack { + border-radius: var(--toolbarbutton-border-radius); +} + +/* Tab Manager Menu tab counter */ +#allTabsMenu-allTabsViewTabs, /* before FF 106 */ +#allTabsMenu-allTabsView-tabs { /* since FF 106 */ + counter-reset: nn_tabs 0 !important; +} +.all-tabs-button::before { + display: -moz-inline-box !important; + -moz-padding-end: 8px !important; + content: counter(nn_tabs) !important; + font-size: 12px !important; + margin-top: -2px !important; + margin-right: -2px !important; +} +.all-tabs-item { + counter-increment: nn_tabs !important; +} + +/* Apply this customization only on smaller screens in landscape mode */ +@media (max-height: 300px) { + + /* Density variables */ + :root:not([uidensity="touch"]) { + --PanelUI-menu-button-position: 4px; + --alltabs-button-height: 32px; + --alltabs-button-width: 32px; + --alltabs-button-position: 3.5px; + --urlbar-width: calc(100vw - 188.5px); + } + :root[uidensity="touch"] { + --PanelUI-menu-button-position: 5px; + --alltabs-button-height: 34px; + --alltabs-button-width: 34px; + --alltabs-button-position: 4.5px; + --urlbar-width: calc(100vw - 196.5px); + } + + /* Remove items from Main App Menu (≡) */ + #appMenu-fxa-status2, + #appMenu-fxa-separator, + #appMenu-protonMainView toolbarseparator, + #appMenu-fullscreen-button2, + #appMenu-passwords-button, + .subviewbutton[shortcut]::after { + display: none !important; + } + + /* Fix flickering of Main App Menu (≡) */ + #appMenu-popup { + width: 260px !important; + } + #appMenu-protonMainView vbox.panel-subview-body { + height: 253px !important; + max-height: 253px !important; + width: 250px !important; + } + + /* Change Main App Menu (≡) button to its mobile equivalent (⋮) */ + #PanelUI-menu-button { + position: absolute !important; + right: 0px !important; + bottom: var(--PanelUI-menu-button-position) !important; + margin-right: -10px !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack > .toolbarbutton-icon { + visibility: collapse !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack { + position: relative !important; + width: 75% !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack::before { + content: "⋮"; + color: var(--toolbarbutton-icon-fill); + opacity: var(--toolbarbutton-icon-fill-opacity); + position: absolute; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.9 ); + left: 50%; + transform: translateX(-50%); + font-size: 18px !important; + font-weight: bold !important; + } + + /* Hide Tab Bar and Private Browsing indicator */ + #tabbrowser-tabs, + #private-browsing-indicator-with-label { + visibility: collapse !important; + } + + /* Hide Nav Bar when in Fullscreen mode */ + #nav-bar[inFullscreen] { + display: none; + } + + /* Move Nav Bar to bottom */ + :root:not([uidensity="touch"],[inFullscreen]) { + --uc-bottom-toolbar-height: calc(39px + var(--toolbarbutton-outer-padding) ) + } + :root[uidensity="touch"]:not([inFullscreen]){ + --uc-bottom-toolbar-height: calc(43px + var(--toolbarbutton-outer-padding) ) + } + #browser, + #customization-container { + margin-bottom: var(--uc-bottom-toolbar-height,0px) + } + #nav-bar{ + position: fixed !important; + bottom: 0px; + width: 100%; + z-index: 1; + } + .panel-viewstack { + max-height: unset !important; + } + + /* Edit Bookmark Panel */ + #editBookmarkPanel { + background-color: var(--arrowpanel-background) !important; + max-height: 100vh !important; + max-width: 100vw !important; + width: 100vw !important; + } + #editBookmarkPanel box.panel-header, + #editBookmarkHeaderSeparator, + #editBookmarkPanelInfoArea, + #editBookmarkSeparator, + #editBMPanel_folderRow, + #editBMPanel_tagsRow { + display: none !important; + } + #editBookmarkPanelContent { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + #editBookmarkPanelBottomButtons { + margin-top: -5px !important; + margin-left: -50px !important; + } + + /* Find Bar*/ + input.findbar-textbox { + font-size: 12pt !important; + } + + /* Remove items from Tab Manager Menu */ + #allTabsMenu-searchTabs, + #allTabsMenu-tabsSeparator { + display: none; + } + + /* Fix flickering of Tab Manager Menu and extension popups */ + #customizationui-widget-panel, + #customizationui-widget-multiview box.panel-viewstack { + height: calc(100vh - 35px) !important; + max-height: calc(100vh - 35px) !important; + width: 100vw !important; + max-width: 100vw !important; + } + + /* Tab Manager Menu inspired by Firefox for Android */ + #allTabsMenu-containerTabsButton { + border-radius: 0 !important; + margin: 0 !important; + padding-left: 10px !important; + padding-right: 10px !important; + width: calc(100vw - 207px) !important; + } + .all-tabs-item { + border-radius: 0 !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(100vw - 207px) !important; + } + .all-tabs-close-button { + border-radius: 100% !important; + margin-left: calc(var(--urlbar-min-height) * -0.6 ) !important; + margin-right: calc(var(--urlbar-min-height) * -0.6 ) !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(var(--urlbar-min-height) * 2.25 ) !important; + } + .all-tabs-close-button > .toolbarbutton-icon { + margin-left: calc(var(--urlbar-min-height) * 0.625 ) !important; + height: calc(var(--urlbar-min-height) * 0.5 ) !important; + width: calc(var(--urlbar-min-height) * 0.5 ) !important; + } + + /* Tab Manager Menu button inspired by Firefox for Android */ + #alltabs-button > .toolbarbutton-badge-stack::before { + border: 1px solid var(--toolbarbutton-icon-fill); + border-radius: 2px; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.85 ) !important; + padding: 0 5px 0 5px; + font-size: 8px !important; + font-weight: 600 !important; + font-family: "Noto Sans" !important; + } + + /* Move Tab Manager Menu button to right of URL Bar */ + :root { + --tab-border-radius: var(--toolbarbutton-border-radius) !important; + } + #alltabs-button > .toolbarbutton-badge-stack { + height: var(--alltabs-button-height) !important; + width: var(--alltabs-button-width) !important; + } + #alltabs-button { + position: absolute; + bottom: var(--alltabs-button-position) !important; + right: 28.5px; + z-index: 2 !important; + } + + /* Allow room for Tab Manager Menu button */ + #nav-bar { + padding-right: 67px !important; + } + + /* URL Bar */ + #urlbar-container { + max-width: var(--urlbar-width) !important; + } + #urlbar, + #searchbar, + #urlbar-input, + #urlbar-input-container, + #urlbar-background { + border-radius: 7px !important; + } + + /* Remove items from Unified Extensions Menu */ + #unified-extensions-panel .panel-header, + #unified-extensions-panel toolbarseparator, + #unified-extensions-manage-extensions { + display: none !important; + } + + /* Adjust button padding and font size for secondary text in Unified Extensions Menu */ + #unified-extensions-panel .subviewbutton { + padding: 6px !important; + } + .unified-extensions-item-message { + font-size: 75% !important; + } + + /* Fix flickering of Unified Extensions Menu */ + #unified-extensions-panel { + --uei-icon-size: 20px; + width: 360px !important; + } + #unified-extensions-view { + margin-top: 6px !important; + height: 230px !important; + max-height: 230px !important; + width: 350px !important; + } + + /* Add padding to bottom of Unified Extensions Menu to look better */ + #unified-extensions-area { + padding-bottom: 5px !important; + } + + /* Allow extensions to use full display */ + .webextension-popup-browser { + height: 100% !important; + min-height: 100% !important; + width: 100vw !important; + min-width: 100vw !important; + } + + /* Change Unified Extensions Menu button icon to Home button icon */ + #unified-extensions-button { + list-style-image: url("chrome://browser/skin/home.svg") !important; + } + + /* Adjust "Saved to Library!" popup notification */ + #confirmation-hint { + padding: 10px !important; + width: 100vw !important; + } + + /* Adjust "Confirm before closing multiple tabs" popup */ + .dialogFrame { + width: 100vw !important; + max-width: 100vw !important; + } + +} + +/* Apply this customization only on smaller screens in portait mode */ +@media (max-width: 700px) { + + /* Density variables */ + :root:not([uidensity="touch"]) { + --PanelUI-menu-button-position: 4px; + --widget-overflow-margin: 22px; + --unified-extensions-panel-margin: 22px; + --customizationui-widget-panel-margin: 22px; + --appMenu-popup-margin: 22px; + --BMB_bookmarksPopup-margin: 22px; + --alltabs-button-height: 32px; + --alltabs-button-width: 32px; + --alltabs-button-position: 3.5px; + --urlbar-width: calc(100vw - 110.5px); + } + :root[uidensity="touch"] { + --PanelUI-menu-button-position: 5px; + --widget-overflow-margin: 23px; + --unified-extensions-panel-margin: 23px; + --customizationui-widget-panel-margin: 23px; + --appMenu-popup-margin: 23px; + --BMB_bookmarksPopup-margin: 23px; + --alltabs-button-height: 34px; + --alltabs-button-width: 34px; + --alltabs-button-position: 4.5px; + --urlbar-width: calc(100vw - 114.5px); + } + + /* Main App Menu (≡) */ + #appMenu-popup { + padding-left: 10px !important; + padding-right: 10px !important; + height: 340px; + max-height: 340px; + width: 260px !important; + } + #appMenu-protonMainView vbox.panel-subview-body { + margin-top: 4px !important; + height: 318px !important; + max-height: 318px !important; + width: 230px !important; + } + #appMenu-multiView box.panel-viewstack:first-child { + height: calc(100vh - 100px) !important; + max-height: calc(100vh - 100px) !important; + } + #appMenu-fxa-status2, + #appMenu-fxa-separator, + #appMenu-protonMainView toolbarseparator, + #appMenu-fullscreen-button2, + #appMenu-passwords-button, + .subviewbutton[shortcut]::after { + display: none !important; + } + + /* Change Main App Menu (≡) button to its mobile equivalent (⋮) */ + #PanelUI-menu-button { + position: absolute !important; + right: 0px !important; + bottom: var(--PanelUI-menu-button-position) !important; + margin-right: -10px !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack > .toolbarbutton-icon { + visibility: collapse !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack { + position: relative !important; + width: 75% !important; + } + #PanelUI-menu-button > .toolbarbutton-badge-stack::before { + content: "⋮"; + color: var(--toolbarbutton-icon-fill); + opacity: var(--toolbarbutton-icon-fill-opacity); + position: absolute; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.9 ); + left: 50%; + transform: translateX(-50%); + font-size: 18px !important; + font-weight: bold !important; + } + + /* Hide Tab Bar and Private Browsing Indicator */ + #tabbrowser-tabs, + #private-browsing-indicator-with-label { + visibility: collapse !important; + } + + /* Hide Nav Bar when in Fullscreen mode */ + #nav-bar[inFullscreen] { + display: none; + } + + /* Move Nav Bar to bottom */ + :root:not([uidensity="touch"],[inFullscreen]) { + --uc-bottom-toolbar-height: calc(39px + var(--toolbarbutton-outer-padding) ) + } + :root[uidensity="touch"]:not([inFullscreen]){ + --uc-bottom-toolbar-height: calc(43px + var(--toolbarbutton-outer-padding) ) + } + #browser, + #customization-container { + margin-bottom: var(--uc-bottom-toolbar-height,0px) + } + #nav-bar{ + position: fixed !important; + bottom: 0px; + width: 100%; + z-index: 1; + } + .panel-viewstack { + max-height: unset !important; + } + + /* Adjust Widget Overflow Menu (») spawn height */ + #widget-overflow { + margin-bottom: var(--widget-overflow-margin) !important; + } + + /* Adjust Unified Extensions Menu spawn height */ + #unified-extensions-panel { + margin-bottom: var(--unified-extensions-panel-margin) !important; + } + + /* Adjust Tab Manager Menu spawn height */ + #customizationui-widget-panel { + margin-bottom: var(--customizationui-widget-panel-margin) !important; + } + + /* Adjust Main App Menu (≡) spawn height */ + #appMenu-popup { + margin-bottom: var(--appMenu-popup-margin) !important; + } + + /* Adjust Bookmarks Menu (★) spawn height */ + #BMB_bookmarksPopup { + margin-bottom: var(--BMB_bookmarksPopup-margin) !important; + } + + /* Edit Bookmark Panel */ + #editBookmarkPanel { + background-color: var(--arrowpanel-background) !important; + margin-bottom: 225px !important; + max-height: 100vh !important; + max-width: 100vw !important; + width: 100vw !important; + } + #editBookmarkPanel box.panel-header, + #editBookmarkHeaderSeparator, + #editBookmarkPanelInfoArea, + #editBookmarkSeparator, + #editBMPanel_folderRow, + #editBMPanel_tagsRow { + display: none !important; + } + #editBookmarkPanelContent { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + #editBookmarkPanelBottomButtons { + margin-top: -5px !important; + margin-left: -50px !important; + } + + /* Find Bar */ + .findbar-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + height: 40px !important; + } + .findbar-textbox { + width: 100% !important; + } + .findbar-container checkbox { + padding: 10px 0px; + } + .findbar-highlight, + .findbar-case-sensitive, + .findbar-match-diacritics, + .findbar-entire-word, + /*.found-matches,*/ + .findbar-find-status, + .find-status-icon { + display: none; + } + input.findbar-textbox { + font-size: 12pt !important; + } + + /* Fix Popups */ + #notification-popup { + margin-top: -500px !important; + margin-right: -500px !important; + height: calc(100vh - 250px) !important; + max-width: 100vw !important; + } + #downloadsPanel-mainView { + max-width: calc(100vw - 10px); + } + #backForwardMenu { + margin-top: -250px; + height: 200px; + min-height: 200px; + max-width: 100vw !important; + } + #context-inspect, + #context-inspect-a11y, + #context-savelinktopocket, + #context-searchselect, + #context-sendlinktodevice, + #context-viewpartialsource-selection, + #inspect-separator { + display: none !important + } + #protections-popup, + #permission-popup, + #widget-overflow, + #identity-popup { + max-width: 100vw !important; + } + #protections-popup-mainView { + min-width: 100vw !important; + max-width: 100vw !important; + } + #widget-overflow, + #widget-overflow-mainView { + height: calc(100vh - 80px) !important; + } + #customizationui-widget-panel { + width: 100vw !important; + } + #BMB_bookmarksPopup { + padding-left: 10px !important; + padding-right: 10px !important; + width: 100vw !important; + } + + /* Tab Manager Menu */ + #allTabsMenu-searchTabs, + #allTabsMenu-tabsSeparator { + display: none; + } + #customizationui-widget-panel { + padding-left: 10px !important; + padding-right: 10px !important; + } + #allTabsMenu-multiView box.panel-viewstack { + height: calc(100vh - 100px) !important; + max-height: calc(100vh - 100px) !important; + } + #customizationui-widget-multiview box.panel-viewstack { + height: 330px !important; + max-height: 330px !important; + } + #allTabsMenu-allTabsViewTabs, + #allTabsMenu-allTabsView-tabs { + max-width: calc(100vw - 30px); + padding-top: 2px !important; + } + + /* Tab Manager Menu inspired by Firefox for Android */ + #allTabsMenu-containerTabsButton { + border-radius: 0 !important; + margin: 0 !important; + padding-left: 10px !important; + padding-right: 10px !important; + width: calc(100vw - 30px) !important; + } + .all-tabs-item { + border-radius: 0 !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(100vw - 30px) !important; + } + .all-tabs-close-button { + border-radius: 100% !important; + margin-left: calc(var(--urlbar-min-height) * -0.6 ) !important; + margin-right: calc(var(--urlbar-min-height) * -0.6 ) !important; + height: calc(var(--urlbar-min-height) * 2.25 ) !important; + width: calc(var(--urlbar-min-height) * 2.25 ) !important; + } + .all-tabs-close-button > .toolbarbutton-icon { + margin-left: calc(var(--urlbar-min-height) * 0.625 ) !important; + height: calc(var(--urlbar-min-height) * 0.5 ) !important; + width: calc(var(--urlbar-min-height) * 0.5 ) !important; + } + + /* Tab Manager Menu button inspired by Firefox for Android */ + #alltabs-button > .toolbarbutton-badge-stack::before { + border: 1px solid var(--toolbarbutton-icon-fill); + border-radius: 2px; + bottom: calc(var(--toolbarbutton-inner-padding) * 0.85 ) !important; + padding: 0 5px 0 5px; + font-size: 8px !important; + font-weight: 600 !important; + font-family: "Noto Sans" !important; + } + + /* Move Tab Manager Menu button to right of urlbar */ + :root { + --tab-border-radius: var(--toolbarbutton-border-radius) !important; + } + #alltabs-button > .toolbarbutton-badge-stack { + height: var(--alltabs-button-height) !important; + width: var(--alltabs-button-width) !important; + } + #alltabs-button { + position: absolute; + bottom: var(--alltabs-button-position) !important; + right: 28.5px; + z-index: 2 !important; + } + + /* Nav Bar */ + #back-button, + #forward-button, + #customizableui-special-spring1, + #customizableui-special-spring2, + #library-button, + #sidebar-button, + #fxa-toolbar-menu-button { + display: none !important; + } + + /* Allow room for Tab Manager Menu button */ + #nav-bar { + padding-right: 67px !important; + } + + /* URL Bar */ + #urlbar-container { + max-width: var(--urlbar-width) !important; + } + #urlbar { + padding: 0px 5px; + } + #urlbar-input { + font-size: 10pt !important; + } + #urlbar[focused] #urlbar-input { + font-size: calc(var(--urlbar-height) - 9px) !important; + } + #urlbar[focused] #remote-control-box, + #urlbar[focused] #identity-box, + #urlbar[focused] #tracking-protection-icon-container, + #urlbar[focused] #reader-mode-button, + #urlbar[focused] #page-action-buttons, + #tracking-protection-icon-container, + #identity-permission-box, + #userContext-indicator, + #pageActionButton { + display: none; + } + #identity-icon-label { + display: none; + } + .urlbarView { + position: fixed !important; + inset: 0px 0px 84px 0px; + width: 100% !important; + background: var(--arrowpanel-background); + margin: 0px !important; + margin-inline: 0px !important; + border-inline: 0px !important; + overflow-y: auto !important; + overflow-x: none !important; + scrollbar-width: none; + } + #PersonalToolbar { + display: none; + } + :root { + --bookmarks-toolbar-overlapping-browser-height: 0 !important; + } + #urlbar, + #searchbar, + #urlbar-input, + #urlbar-input-container, + #urlbar-background { + border-radius: 7px !important; + } + + /* Remove items from Unified Extensions Menu */ + #unified-extensions-panel .panel-header, + #unified-extensions-panel toolbarseparator, + #unified-extensions-manage-extensions { + display: none !important; + } + + /* Adjust button padding and font size for secondary text in Unified Extensions Menu */ + #unified-extensions-panel .subviewbutton { + padding: 6px !important; + } + .unified-extensions-item-message { + font-size: 75% !important; + } + + /* Fix flickering for Unified Extensions Menu */ + #unified-extensions-panel { + --uei-icon-size: 20px; + padding-left: 10px !important; + padding-right: 10px !important; + width: 100vw !important; + } + #unified-extensions-view { + margin-top: 6px !important; + height: 325px !important; + max-height: 325px !important; + width: calc(100vw - 30px) !important; + } + + /* Allow extensions to use full popup */ + .webextension-popup-browser { + height: 100% !important; + min-height: 100% !important; + width: calc(100vw - 20px) !important; + min-width: calc(100vw - 20px) !important; + } + + /* Change Unified Extensions Menu button icon to Home button icon */ + #unified-extensions-button { + list-style-image: url("chrome://browser/skin/home.svg") !important; + } + + /* Adjust "Saved to Library!" popup notification */ + #confirmation-hint { + padding: 10px !important; + width: 100vw !important; + } + + /* Adjust "Confirm before closing multiple tabs" popup */ + .dialogFrame { + width: 100vw !important; + max-width: 100vw !important; + } + + /* Added extra space to bottom of Unified Extensions Menu to compensate for orientation problem that would leave some extensions hidden in portrait mode when Unified Extentions Menu is first opened in landscape mode */ + #unified-extensions-area { + padding-bottom: 120px !important; + } + + /* Added extra space to bottom of Main App Menu (≡) to compensate for orientation problem that would leave some items hidden in portrait mode when Main App Menu (≡) is first opened in landscape mode */ + #appMenu-quit-button2 { + margin-bottom: 64px !important; + } + +} + +/* Private Browsing Mode theme for URL Bar and Nav Bar */ +:root { + --toolbar-field-border-color: var(--arrowpanel-background) !important; + --toolbar-field-focus-border-color: var(--arrowpanel-background) !important; + --lwt-toolbar-field-background-color: var(--arrowpanel-background) !important; + --toolbar-field-background-color: var(--arrowpanel-background) !important; + --toolbar-field-focus-background-color: var(--arrowpanel-background) !important; +} +#nav-bar { + background-image: -moz-linear-gradient(to right, rgb(112,34,145), rgb(57,52,115)) !important; +} +#navigator-toolbox { + --lwt-tabs-border-color: rgb(134,93,180) !important; +} diff --git a/src/userChrome/glow.css b/src/userChrome/glow.css index e0e41c6..6b15e21 100644 --- a/src/userChrome/glow.css +++ b/src/userChrome/glow.css @@ -6,7 +6,7 @@ filter: drop-shadow(0 0 2px var(--uc-icon-glow-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-primary)); } -/* Newtab buttons (+) and Tab Manager button glow on hover */ +/* Newtab buttons (+) and Tab Manager button (v) glow on hover */ #alltabs-button:hover > .toolbarbutton-badge-stack, #new-tab-button:hover, #tabs-newtab-button:hover { diff --git a/src/userChrome/iconized_main_menu.css b/src/userChrome/iconized_main_menu.css index 990516f..0ebf7c3 100644 --- a/src/userChrome/iconized_main_menu.css +++ b/src/userChrome/iconized_main_menu.css @@ -2,74 +2,46 @@ See the above repository for updates as well as full license text. */ /* Adds icons to main menu items which were removed in Proton */ +#appMenu-zoom-controls::before, #appMenu-fxa-status2[fxastatus] > toolbarbutton::before, -#appMenu-protonMainView > .panel-subview-body > toolbarbutton > image { - fill: currentColor; - -moz-context-properties: fill; - margin-inline: 0 8px !important; +#appMenu-protonMainView > .panel-subview-body > toolbarbutton > image{ + fill: currentColor; + -moz-context-properties: fill; + margin-inline: 0 8px !important; } -#appMenu-new-tab-button2 { - list-style-image: url("chrome://browser/skin/new-tab.svg"); -} -#appMenu-new-window-button2 { - list-style-image: url("chrome://browser/skin/window.svg"); -} -#appMenu-new-private-window-button2 { - list-style-image: url("chrome://browser/skin/privateBrowsing.svg"); -} -#appMenu-bookmarks-button { - list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg"); -} -#appMenu-history-button { - list-style-image: url("chrome://browser/skin/history.svg"); -} -#appMenu-downloads-button { - list-style-image: url("chrome://browser/skin/downloads/downloads.svg"); -} -#appMenu-passwords-button { - list-style-image: url("chrome://browser/skin/login.svg"); -} -#appMenu-extensions-themes-button { - list-style-image: url("chrome://mozapps/skin/extensions/extension.svg"); -} -#appMenu-print-button2 { - list-style-image: url("chrome://global/skin/icons/print.svg"); -} -#appMenu-save-file-button2 { - list-style-image: url("chrome://browser/skin/save.svg"); -} -#appMenu-find-button2 { - list-style-image: url("chrome://global/skin/icons/search-glass.svg"); -} -#appMenu-settings-button { - list-style-image: url("chrome://global/skin/icons/settings.svg"); -} -#appMenu-more-button2 { - list-style-image: url("chrome://global/skin/icons/developer.svg"); -} -#appMenu-help-button2 { - list-style-image: url("chrome://global/skin/icons/info.svg"); -} -#appMenu-quit-button2 { - list-style-image: url("chrome://devtools/skin/images/search-clear.svg"); +#appMenu-zoom-controls::before, +#appMenu-fxa-status2[fxastatus] > toolbarbutton::before{ + display: flex; + content: ""; + width: 16px; + height: 16px; } +#appMenu-new-tab-button2{ list-style-image: url("chrome://browser/skin/new-tab.svg") } +#appMenu-new-window-button2{ list-style-image: url("chrome://browser/skin/window.svg") } +#appMenu-new-private-window-button2{ list-style-image: url("chrome://browser/skin/privateBrowsing.svg") } +#appMenu-bookmarks-button{ list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg") } +#appMenu-history-button{ list-style-image: url("chrome://browser/skin/history.svg") } +#appMenu-downloads-button{ list-style-image: url("chrome://browser/skin/downloads/downloads.svg") } +#appMenu-passwords-button{ list-style-image: url("chrome://browser/skin/login.svg") } +#appMenu-extensions-themes-button{ list-style-image: url("chrome://mozapps/skin/extensions/extension.svg") } +#appMenu-print-button2{ list-style-image: url("chrome://global/skin/icons/print.svg") } +#appMenu-save-file-button2{ list-style-image: url("chrome://browser/skin/save.svg") } +#appMenu-find-button2{ list-style-image: url("chrome://global/skin/icons/search-glass.svg") } +#appMenu-settings-button{ list-style-image: url("chrome://global/skin/icons/settings.svg") } +#appMenu-more-button2{ list-style-image: url("chrome://global/skin/icons/developer.svg") } +#appMenu-help-button2{ list-style-image: url("chrome://global/skin/icons/info.svg") } +#appMenu-quit-button2{ list-style-image: url("chrome://devtools/skin/images/search-clear.svg") } +#appMenu-translate-button{ list-style-image: url("chrome://browser/skin/translations.svg") } +#appMenu-zoom-controls::before{ background-image: url("chrome://browser/skin/fullscreen.svg") } /* Use account-button icon for signed in sync item */ -#appMenu-fxa-status2[fxastatus] > toolbarbutton::before { - display: flex; - content: ""; - width: 16px; - height: 16px; - background-image: var(--avatar-image-url); -} +/*#appMenu-fxa-status2[fxastatus] > toolbarbutton::before{ background-image: var(--avatar-image-url) }*/ /* Add somewhat hacky separator to zoom controls so it looks consistent */ -#appMenu-protonMainView > .panel-subview-body::after { - content: ""; - display: flex; - border-bottom: 1px solid var(--panel-separator-color); - margin: var(--panel-separator-margin); -} - -#appMenu-find-button2 ~ * { - -moz-box-ordinal-group: 2; /* Fx < 112 compatibility */ - order: 2; +/*#appMenu-protonMainView > .panel-subview-body::after{ + content: ""; + display: flex; + border-bottom: 1px solid var(--panel-separator-color); + margin: var(--panel-separator-margin); } +#appMenu-find-button2 ~ *{ + order: 2; +}*/ diff --git a/src/userChrome/new-tab-button.css b/src/userChrome/new-tab-button.css index 76abc7c..a2b0073 100644 --- a/src/userChrome/new-tab-button.css +++ b/src/userChrome/new-tab-button.css @@ -9,9 +9,10 @@ display: none !important; } - /* Display overflow New-tab button by default */ + /* Display overflow New-tab button by default and fix alignment */ #new-tab-button { display: initial !important; + margin-top: 4px !important; } } diff --git a/src/userChrome/numbered_tabs.css b/src/userChrome/numbered_tabs.css index 409cc18..0c8e011 100644 --- a/src/userChrome/numbered_tabs.css +++ b/src/userChrome/numbered_tabs.css @@ -4,9 +4,15 @@ See the above repository for updates as well as full license text. */ /* Apply this customization only on smaller screens */ @media (max-width: 700px) { - /* Show a number before tab text */ - /* Actually, let's show the tab number after tab content, right-align it, - and fix its position directly on the tab close button */ + /* Density variables */ + :root:not([uidensity="touch"]) { + --tab-number-position: calc(var(--toolbarbutton-inner-padding) * 1.6 ); + } + :root[uidensity="touch"] { + --tab-number-position: calc(var(--toolbarbutton-inner-padding) * 1.8 ); + } + + /* Show the tab number after tab content, right-align it, and fix its position directly on the tab close button */ #tabbrowser-tabs { counter-reset: nth-tab 0; /* Change to -1 for 0-indexing */ } @@ -16,7 +22,7 @@ See the above repository for updates as well as full license text. */ position: absolute !important; position: fixed; right: 24px; - top: 12px; + bottom: var(--tab-number-position); width: 0 !important; } diff --git a/src/userChrome/popups.before-ff-108.css b/src/userChrome/popups.before-ff-108.css deleted file mode 100644 index c4e6166..0000000 --- a/src/userChrome/popups.before-ff-108.css +++ /dev/null @@ -1,15 +0,0 @@ -/* Copyright 2022 Oliver Smith - * SPDX-License-Identifier: MPL-2.0 */ - -@media (max-width: 700px) { - /* Hack to prevent popups from flickering around. It looks like e.g. the - * editBookmarkPanel has two heights otherwise, and draws one frame with a - * short height and one frame with the proper one. */ - #mainPopupSet { - position: fixed !important; - top: 0px; - left: 0px; - right: 0px; - bottom: 100px; - } -} diff --git a/src/userChrome/popups.css b/src/userChrome/popups.css index 7ce9b69..76713a4 100644 --- a/src/userChrome/popups.css +++ b/src/userChrome/popups.css @@ -8,6 +8,7 @@ #notification-popup { /*margin-left: -200px !important;*/ margin-top: -500px !important; + margin-right: -500px !important; height: calc(100vh - 250px) !important; max-width: 100vw !important; } @@ -59,13 +60,29 @@ #widget-overflow-mainView { height: calc(100vh - 80px) !important; } - #unified-extensions-view { - width: calc(100vw - 10px) !important; + + /* Adjust Tab Manager Menu to fix flickering */ + #customizationui-widget-panel { + width: 100vw !important; } - /* fix widget overflow to fit ublock0_raymondhill_net-browser-action */ - #widget-overflow-mainView { - height: 357px !important; + /* Adjust Bookmarks Menu (★) and fix flickering */ + #BMB_bookmarksPopup { + padding-left: 10px !important; + padding-right: 10px !important; + width: 100vw !important; + } + + /* Adjust "Saved to Library!" popup notification */ + #confirmation-hint { + padding: 10px !important; + width: 100vw !important; + } + + /* Adjust "Confirm before closing multiple tabs" popup */ + .dialogFrame { + width: 100vw !important; + max-width: 100vw !important; } } diff --git a/src/userChrome/round_ui_items.css b/src/userChrome/round_ui_items.css index d6e760e..61e99b9 100644 --- a/src/userChrome/round_ui_items.css +++ b/src/userChrome/round_ui_items.css @@ -48,10 +48,10 @@ menupopup { border-color: transparent !important; } -#nav-bar { +/*#nav-bar { box-shadow: none !important; margin-top: 3px; -} +}*/ .tab-line { display: none; } @@ -76,7 +76,7 @@ menugroup:hover > menuitem { border-radius: 16px !important; } -/* Urlbar and searchbar shape */ +/* URL Bar and Search Bar shape */ #urlbar, #searchbar, #urlbar-input, @@ -88,7 +88,7 @@ menugroup:hover > menuitem { border-radius: 12px !important; } -/* Findbar shape */ +/* Find Bar shape */ input.findbar-textbox { border-radius: 9px !important; font-size: 14px !important; diff --git a/src/userChrome/single_tab_mode-alt.css b/src/userChrome/single_tab_mode-alt.css new file mode 100644 index 0000000..a70659c --- /dev/null +++ b/src/userChrome/single_tab_mode-alt.css @@ -0,0 +1,98 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/******************************************/ +/* IMPORTANT: */ +/* */ +/* One of the things this code will do is */ +/* to move the Tab Manager Menu button to */ +/* the right side of the URL Bar. */ +/* */ +/* For the best results, consider moving */ +/* the Unified Extensions Menu button to */ +/* the left of the URL Bar and removing */ +/* less important toolbar items by using */ +/* the "Customize Toolbar" feature, or by */ +/* using a user.js file in your profile. */ +/******************************************/ + +/* Apply this customization only on smaller screens */ +@media (max-width: 700px) { + + /* Density variables */ + :root:not([uidensity="touch"]) { + --PanelUI-menu-button-position: 4px; + --alltabs-button-height: 32px; + --alltabs-button-width: 32px; + --alltabs-button-position: 48px; + --alltabs-number-position: calc(var(--toolbarbutton-inner-padding) * 1.5 ); + --urlbar-width: calc(100vw - 166px); + } + :root[uidensity="touch"] { + --PanelUI-menu-button-position: 5px; + --alltabs-button-height: 34px; + --alltabs-button-width: 34px; + --alltabs-button-position: 54px; + --alltabs-number-position: calc(var(--toolbarbutton-inner-padding) * 1.5 ); + --urlbar-width: calc(100vw - 171.5px); + } + + /* Hide Nav Bar and Tab Bar when in Fullscreen mode and hide Title Bar, Newtab button, and New-tab button */ + #nav-bar[inFullscreen], + #TabsToolbar[inFullscreen], + .titlebar-buttonbox-container, + #new-tab-button, + #tabs-newtab-button { + display: none !important; + } + + /* Hide unpinned inactive tabs */ + .tabbrowser-tab:not([pinned]):not([selected]) { + visibility: collapse !important; + min-width: 0 !important; + } + + /* Expand unpinned active tab */ + #tabbrowser-tabs:not([haspinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[selected] { + min-width: 100vw !important; + } + #tabbrowser-tabs[haspinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([pinned])[selected] { + min-width: calc(100vw - 40px) !important; + } + + /* Move Main App Menu (≡) button to allow room for Tab Manager Menu button */ + #PanelUI-menu-button { + position: absolute !important; + right: 0px !important; + bottom: var(--PanelUI-menu-button-position) !important; + } + + /* Move Tab Manager Menu button to right of URL Bar */ + :root { + --tab-border-radius: var(--toolbarbutton-border-radius) !important; + } + #alltabs-button > .toolbarbutton-badge-stack { + height: var(--alltabs-button-height) !important; + width: var(--alltabs-button-width) !important; + } + #alltabs-button { + position: absolute; + top: var(--alltabs-button-position) !important; + right: 41.5px; + z-index: 2 !important; + } + #alltabs-button > .toolbarbutton-badge-stack::before { + bottom: calc(var(--toolbarbutton-inner-padding) * 0.7 ) !important; + } + + /* Allow room for Tab Manager Menu button */ + #nav-bar { + padding-right: 67px !important; + } + + /* Reduce URL Bar width */ + #urlbar-container { + max-width: var(--urlbar-width) !important; + } + +} diff --git a/src/userChrome/single_tab_mode.css b/src/userChrome/single_tab_mode.css index 1054f1d..038d849 100644 --- a/src/userChrome/single_tab_mode.css +++ b/src/userChrome/single_tab_mode.css @@ -4,44 +4,43 @@ /******************************************/ /* IMPORTANT: */ /* */ -/* This will move the Tab Manager button */ -/* to the right side of the URL Bar. */ +/* One of the things this code will do is */ +/* to move the Tab Manager Menu button to */ +/* the right side of the URL Bar. */ /* */ -/* Move the Unified Extensions button */ -/* to the left side of the URL Bar */ -/* using the Customize Toolbar feature, */ -/* or use a user.js file in your profile. */ +/* For the best results, consider moving */ +/* the Unified Extensions Menu button to */ +/* the left of the URL Bar and removing */ +/* less important toolbar items by using */ +/* the "Customize Toolbar" feature, or by */ +/* using a user.js file in your profile. */ /******************************************/ /* Apply this customization only on smaller screens */ @media (max-width: 700px) { - /* Reduce urlbar width */ - #urlbar { - width: calc(100vw - 166px) !important; + /* Density variables */ + :root:not([uidensity="touch"]) { + --PanelUI-menu-button-position: 4px; + --alltabs-button-height: 32px; + --alltabs-button-width: 32px; + --alltabs-button-position: 4.5px; + --alltabs-number-position: calc(var(--toolbarbutton-inner-padding) * 1.5 ); + --urlbar-width: calc(100vw - 166px); + } + :root[uidensity="touch"] { + --PanelUI-menu-button-position: 5px; + --alltabs-button-height: 34px; + --alltabs-button-width: 34px; + --alltabs-button-position: 5.5px; + --alltabs-number-position: calc(var(--toolbarbutton-inner-padding) * 1.5 ); + --urlbar-width: calc(100vw - 171.5px); } - /* Adjust Tab Manager Menu spawn height */ - #customizationui-widget-panel { - margin-bottom: 26px !important; - } - - /* Move Tab Manager Menu button to right of urlbar */ - :root { - --tab-border-radius: var(--toolbarbutton-border-radius) !important; - } - #alltabs-button > .toolbarbutton-badge-stack { - height: 32px; - width: 32px; - } - #alltabs-button { - position: absolute; - bottom: 48.5px; - right: 41.5px; - z-index: 1 !important; - } - - /* Hide Newtab and New-tab buttons */ + /* Hide Nav Bar and Tab Bar when in Fullscreen mode and hide Title Bar, Newtab button, and New-tab button */ + #nav-bar[inFullscreen], + #TabsToolbar[inFullscreen], + .titlebar-buttonbox-container, #new-tab-button, #tabs-newtab-button { display: none !important; @@ -61,4 +60,39 @@ min-width: calc(100vw - 40px) !important; } + /* Move Main App Menu (≡) button to allow room for Tab Manager Menu button */ + #PanelUI-menu-button { + position: absolute !important; + right: 0px !important; + bottom: var(--PanelUI-menu-button-position) !important; + } + + /* Move Tab Manager Menu button to right of URL Bar */ + :root { + --tab-border-radius: var(--toolbarbutton-border-radius) !important; + } + #alltabs-button > .toolbarbutton-badge-stack { + height: var(--alltabs-button-height) !important; + width: var(--alltabs-button-width) !important; + } + #alltabs-button { + position: absolute; + bottom: var(--alltabs-button-position) !important; + right: 41.5px; + z-index: 2 !important; + } + #alltabs-button > .toolbarbutton-badge-stack::before { + bottom: calc(var(--toolbarbutton-inner-padding) * 0.7 ) !important; + } + + /* Allow room for Tab Manager Menu button */ + #nav-bar { + padding-right: 67px !important; + } + + /* Reduce URL Bar width */ + #urlbar-container { + max-width: var(--urlbar-width) !important; + } + } diff --git a/src/userChrome/single_tab_mode_with_space_for_1_item.css b/src/userChrome/single_tab_mode_with_space_for_1_item.css deleted file mode 100644 index 4f7f469..0000000 --- a/src/userChrome/single_tab_mode_with_space_for_1_item.css +++ /dev/null @@ -1,34 +0,0 @@ -/* Copyright 2023 user0 - * SPDX-License-Identifier: MPL-2.0 */ - -/******************************************/ -/* IMPORTANT: */ -/* */ -/* This will expand the active tab, with */ -/* space for one item of your choice: */ -/* */ -/* New-tab, Tab Manager, or other button. */ -/* */ -/* In addition to your item of choice, */ -/* the active tab will dynamically shrink */ -/* in order to accommodate one pinned tab. */ -/******************************************/ - -/* Apply this customization only on smaller screens */ -@media (max-width: 700px) { - - /* Hide unpinned inactive tabs */ - .tabbrowser-tab:not([pinned]):not([selected]) { - visibility: collapse !important; - min-width: 0 !important; - } - - /* Expand unpinned active tab */ - #tabbrowser-tabs:not([haspinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[selected] { - min-width: calc(100vw - 40px) !important; - } - #tabbrowser-tabs[haspinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([pinned])[selected] { - min-width: calc(100vw - 80px) !important; - } - -} diff --git a/src/userChrome/single_tab_mode_with_space_for_2_items.css b/src/userChrome/single_tab_mode_with_space_for_2_items.css deleted file mode 100644 index 9a5f1c5..0000000 --- a/src/userChrome/single_tab_mode_with_space_for_2_items.css +++ /dev/null @@ -1,34 +0,0 @@ -/* Copyright 2023 user0 - * SPDX-License-Identifier: MPL-2.0 */ - -/******************************************/ -/* IMPORTANT: */ -/* */ -/* This will expand the active tab, with */ -/* space for two items of your choice: */ -/* */ -/* New-tab, Tab Manager, or other button. */ -/* */ -/* In addition to your item of choice, */ -/* the active tab will dynamically shrink */ -/* in order to accommodate one pinned tab. */ -/******************************************/ - -/* Apply this customization only on smaller screens */ -@media (max-width: 700px) { - - /* Hide unpinned inactive tabs */ - .tabbrowser-tab:not([pinned]):not([selected]) { - visibility: collapse !important; - min-width: 0 !important; - } - - /* Expand unpinned active tab */ - #tabbrowser-tabs:not([haspinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[selected] { - min-width: calc(100vw - 80px) !important; - } - #tabbrowser-tabs[haspinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([pinned])[selected] { - min-width: calc(100vw - 120px) !important; - } - -} diff --git a/src/userChrome/tab_counter.css b/src/userChrome/tab_counter.css index 1e08602..4e9795f 100644 --- a/src/userChrome/tab_counter.css +++ b/src/userChrome/tab_counter.css @@ -1,58 +1,54 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + /* Source from reddit users /u/BatDogOnBatMobile, /u/moko1960, and /u/It_Was_The_Other_Guy https://teddit.net/r/FirefoxCSS/comments/s4wsww/ https://teddit.net/r/FirefoxCSS/comments/yb8tr9/ */ -/* Apply this customization only on smaller screens */ -@media (max-width: 700px) { - - /* Show Tab Manager button even when tabs aren't overflowing - - can instead use browser.tabs.tabmanager.enabled;true as well - or skip this part if you want to retain the default behaviour */ - #alltabs-button { - display: -moz-box !important; - } - - /* Tab Manager button tab counter */ - #TabsToolbar-customization-target { - counter-reset: tabCount; - } - .tabbrowser-tab { - counter-increment: tabCount; - } - #alltabs-button > .toolbarbutton-badge-stack > .toolbarbutton-icon { - visibility: collapse !important; - } - #alltabs-button > .toolbarbutton-badge-stack { - position: relative !important; - } - #alltabs-button > .toolbarbutton-badge-stack::before { - content: counter(tabCount); - border-bottom: 1px solid var(--toolbarbutton-icon-fill); - color: var(--toolbarbutton-icon-fill); - opacity: var(--toolbarbutton-icon-fill-opacity); - position: absolute; - bottom: var(--toolbarbutton-inner-padding); - left: 50%; - transform: translateX(-50%); - padding: 0 3px; - } - - /* Tab Manager menu tab counter */ - #allTabsMenu-allTabsViewTabs, /* before FF 106 */ - #allTabsMenu-allTabsView-tabs { /* since FF 106 */ - counter-reset: nn_tabs 0 !important; - } - .all-tabs-button::before { - display: -moz-inline-box !important; - -moz-padding-end: 8px !important; - content: counter(nn_tabs) !important; - /*font-weight: bold !important; */ - font-size: 12px !important; - margin-top: -2px !important; - margin-right: -2px !important; - } - .all-tabs-item { - counter-increment: nn_tabs !important; - } - +/* Show Tab Manager Menu button */ +#alltabs-button { + display: -moz-box !important; +} + +/* Tab Manager Menu button tab counter */ +#TabsToolbar-customization-target { + counter-reset: tabCount; +} +.tabbrowser-tab { + counter-increment: tabCount; +} +#alltabs-button > .toolbarbutton-badge-stack > .toolbarbutton-icon { + visibility: collapse !important; +} +#alltabs-button > .toolbarbutton-badge-stack { + position: relative !important; +} +#alltabs-button > .toolbarbutton-badge-stack::before { + content: counter(tabCount); + color: var(--toolbarbutton-icon-fill); + opacity: var(--toolbarbutton-icon-fill-opacity); + position: absolute; + bottom: var(--toolbarbutton-inner-padding); + left: 50%; + transform: translateX(-50%); +} +#alltabs-button > .toolbarbutton-badge-stack { + border-radius: var(--toolbarbutton-border-radius); +} + +/* Tab Manager Menu tab counter */ +#allTabsMenu-allTabsViewTabs, /* before FF 106 */ +#allTabsMenu-allTabsView-tabs { /* since FF 106 */ + counter-reset: nn_tabs 0 !important; +} +.all-tabs-button::before { + display: -moz-inline-box !important; + -moz-padding-end: 8px !important; + content: counter(nn_tabs) !important; + font-size: 12px !important; + margin-top: -2px !important; + margin-right: -2px !important; +} +.all-tabs-item { + counter-increment: nn_tabs !important; } diff --git a/src/userChrome/tabmenu.css b/src/userChrome/tabmenu.css index fd72e88..8e54e3b 100644 --- a/src/userChrome/tabmenu.css +++ b/src/userChrome/tabmenu.css @@ -51,8 +51,6 @@ padding-right: 10px !important; /*height: 320px;*/ /*max-height: 320px;*/ - height: 333px; - max-height: 333px; } /*#allTabsMenu-allTabsView vbox.panel-subview-body { @@ -80,10 +78,10 @@ } #customizationui-widget-multiview box.panel-viewstack { /* since FF 113 */ /* Use the whole height */ - /*height: 300px !important;*/ - /*max-height: 300px !important;*/ - height: 333px !important; - max-height: 333px !important; + /*height: 300px !important; + max-height: 300px !important;*/ + height: 330px !important; + max-height: 330px !important; } #allTabsMenu-allTabsViewTabs, /* before FF 106 */ diff --git a/src/userChrome/true_mobile_landscape-alt.css b/src/userChrome/true_mobile_landscape-alt.css new file mode 100644 index 0000000..e75c56a --- /dev/null +++ b/src/userChrome/true_mobile_landscape-alt.css @@ -0,0 +1,204 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/******************************************/ +/* IMPORTANT: */ +/* */ +/* One of the things this code will do is */ +/* to move the Tab Manager Menu button to */ +/* the right side of the URL Bar. */ +/* */ +/* For the best results, consider moving */ +/* the Unified Extensions Menu button to */ +/* the left of the URL Bar and removing */ +/* less important toolbar items by using */ +/* the "Customize Toolbar" feature, or by */ +/* using a user.js file in your profile. */ +/******************************************/ + +/* Apply this customization only on smaller screens in landscape mode */ +@media (max-height: 300px) { + + /* Density variables */ + :root:not([uidensity="touch"]) { + --PanelUI-menu-button-position: 4px; + --alltabs-button-height: 32px; + --alltabs-button-width: 32px; + --alltabs-button-position: 4px; + --urlbar-width: calc(100vw - 205.5px); + } + :root[uidensity="touch"] { + --PanelUI-menu-button-position: 5px; + --alltabs-button-height: 34px; + --alltabs-button-width: 34px; + --alltabs-button-position: 5px; + --urlbar-width: calc(100vw - 209.5px); + } + + /* Remove items from Main App Menu (≡) */ + #appMenu-fxa-status2, + #appMenu-fxa-separator, + #appMenu-protonMainView toolbarseparator, + #appMenu-fullscreen-button2, + #appMenu-passwords-button, + .subviewbutton[shortcut]::after { + display: none !important; + } + + /* Remove extra space above zoom controls in Main App Menu (≡) */ + #appMenu-zoom-controls { + margin-top: 0 !important; + } + + /* Fix flickering of Main App Menu (≡) */ + #appMenu-popup { + width: 260px !important; + } + #appMenu-protonMainView vbox.panel-subview-body { + height: 253px !important; + max-height: 253px !important; + width: 250px !important; + } + + /* Move Main App Menu (≡) button to allow room for Tab Manager Menu button */ + #PanelUI-menu-button { + position: absolute !important; + right: 0px !important; + bottom: var(--PanelUI-menu-button-position) !important; + } + + /* Hide Tab Bar and Private Browsing indicator */ + #tabbrowser-tabs, + #private-browsing-indicator-with-label { + visibility: collapse !important; + } + + /* Edit Bookmark Panel */ + #editBookmarkPanel { + background-color: var(--arrowpanel-background) !important; + max-height: 100vh !important; + max-width: 100vw !important; + width: 100vw !important; + } + #editBookmarkPanel box.panel-header, + #editBookmarkHeaderSeparator, + #editBookmarkPanelInfoArea, + #editBookmarkSeparator, + #editBMPanel_folderRow, + #editBMPanel_tagsRow { + display: none !important; + } + #editBookmarkPanelContent { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + #editBookmarkPanelBottomButtons { + margin-top: -5px !important; + margin-left: -50px !important; + } + + /* Remove items from Tab Manager Menu */ + #allTabsMenu-searchTabs, + #allTabsMenu-tabsSeparator { + display: none; + } + + /* Fix flickering of Tab Manager Menu and extension popups */ + #customizationui-widget-panel, + #customizationui-widget-multiview box.panel-viewstack { + height: calc(100vh - 35px) !important; + max-height: calc(100vh - 35px) !important; + width: 100vw !important; + max-width: 100vw !important; + } + + /* Move Tab Manager Menu button to right of URL Bar */ + :root { + --tab-border-radius: var(--toolbarbutton-border-radius) !important; + } + #alltabs-button > .toolbarbutton-badge-stack { + height: var(--alltabs-button-height) !important; + width: var(--alltabs-button-width) !important; + } + #alltabs-button { + position: absolute; + top: var(--alltabs-button-position) !important; + right: 41.5px; + z-index: 2 !important; + } + #alltabs-button > .toolbarbutton-badge-stack::before { + bottom: calc(var(--toolbarbutton-inner-padding) * 0.7 ) !important; + } + + /* Allow room for Tab Manager Menu button */ + #nav-bar { + padding-right: 67px !important; + } + + /* Reduce URL Bar width */ + #urlbar-container { + max-width: var(--urlbar-width) !important; + } + + /* Remove items from Unified Extensions Menu */ + #unified-extensions-panel .panel-header, + #unified-extensions-panel toolbarseparator, + #unified-extensions-manage-extensions { + display: none !important; + } + + /* Adjust button padding and font size for secondary text in Unified Extensions Menu */ + #unified-extensions-panel .subviewbutton { + padding: 6px !important; + } + .unified-extensions-item-message { + font-size: 75% !important; + } + + /* Fix flickering of Unified Extensions Menu */ + #unified-extensions-panel { + --uei-icon-size: 20px; + width: 360px !important; + } + #unified-extensions-view { + margin-top: 6px !important; + height: 230px !important; + max-height: 230px !important; + width: 350px !important; + } + + /* Add padding to bottom of Unified Extensions Menu to look better */ + #unified-extensions-area { + padding-bottom: 5px !important; + } + + /* Allow extensions to use full display */ + .webextension-popup-browser { + height: 100% !important; + min-height: 100% !important; + width: 100vw !important; + min-width: 100vw !important; + } + + /* Adjust "Saved to Library!" popup notification */ + #confirmation-hint { + padding: 10px !important; + width: 100vw !important; + } + +} + +/* Apply this customization only on smaller screens in portrait mode */ +@media (max-width: 700px) { + + /* Added extra space to bottom of Main App Menu (≡) to compensate for orientation problem that would leave some items hidden in portrait mode when Main App Menu (≡) is first opened in landscape mode */ + #appMenu-quit-button2 { + margin-bottom: 64px !important; + } + + /* Added extra space to bottom of Unified Extensions Menu to compensate for orientation problem that would leave some extensions hidden in portrait mode when Unified Extentions Menu is first opened in landscape mode */ + #unified-extensions-area { + padding-bottom: 120px !important; + } + +} diff --git a/src/userChrome/true_mobile_landscape.css b/src/userChrome/true_mobile_landscape.css new file mode 100644 index 0000000..47836d5 --- /dev/null +++ b/src/userChrome/true_mobile_landscape.css @@ -0,0 +1,230 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/******************************************/ +/* IMPORTANT: */ +/* */ +/* One of the things this code will do is */ +/* to move the Tab Manager Menu button to */ +/* the right side of the URL Bar. */ +/* */ +/* For the best results, consider moving */ +/* the Unified Extensions Menu button to */ +/* the left of the URL Bar and removing */ +/* less important toolbar items by using */ +/* the "Customize Toolbar" feature, or by */ +/* using a user.js file in your profile. */ +/******************************************/ + +/* Apply this customization only on smaller screens in landscape mode */ +@media (max-height: 300px) { + + /* Density variables */ + :root:not([uidensity="touch"]) { + --PanelUI-menu-button-position: 4px; + --alltabs-button-height: 32px; + --alltabs-button-width: 32px; + --alltabs-button-position: 3.5px; + --urlbar-width: calc(100vw - 205.5px); + } + :root[uidensity="touch"] { + --PanelUI-menu-button-position: 5px; + --alltabs-button-height: 34px; + --alltabs-button-width: 34px; + --alltabs-button-position: 4.5px; + --urlbar-width: calc(100vw - 209.5px); + } + + /* Remove items from Main App Menu (≡) */ + #appMenu-fxa-status2, + #appMenu-fxa-separator, + #appMenu-protonMainView toolbarseparator, + #appMenu-fullscreen-button2, + #appMenu-passwords-button, + .subviewbutton[shortcut]::after { + display: none !important; + } + + /* Remove extra space above zoom controls in Main App Menu (≡) */ + #appMenu-zoom-controls { + margin-top: 0 !important; + } + + /* Fix flickering of Main App Menu (≡) */ + #appMenu-popup { + width: 260px !important; + } + #appMenu-protonMainView vbox.panel-subview-body { + height: 253px !important; + max-height: 253px !important; + width: 250px !important; + } + + /* Move Main App Menu (≡) button to allow room for Tab Manager Menu button */ + #PanelUI-menu-button { + position: absolute !important; + right: 0px !important; + bottom: var(--PanelUI-menu-button-position) !important; + } + + /* Hide Tab Bar and Private Browsing indicator */ + #tabbrowser-tabs, + #private-browsing-indicator-with-label { + visibility: collapse !important; + } + + /* Move Nav Bar to bottom */ + :root:not([uidensity="touch"],[inFullscreen]) { + --uc-bottom-toolbar-height: calc(39px + var(--toolbarbutton-outer-padding) ) + } + :root[uidensity="touch"]:not([inFullscreen]){ + --uc-bottom-toolbar-height: calc(43px + var(--toolbarbutton-outer-padding) ) + } + #browser, + #customization-container { + margin-bottom: var(--uc-bottom-toolbar-height,0px) + } + #nav-bar{ + position: fixed !important; + bottom: 0px; + width: 100%; + z-index: 1; + } + #nav-bar[inFullscreen], + #TabsToolbar[inFullscreen], + .titlebar-buttonbox-container { + display: none; + } + .panel-viewstack { + max-height: unset !important; + } + + /* Edit Bookmark Panel */ + #editBookmarkPanel { + background-color: var(--arrowpanel-background) !important; + max-height: 100vh !important; + max-width: 100vw !important; + width: 100vw !important; + } + #editBookmarkPanel box.panel-header, + #editBookmarkHeaderSeparator, + #editBookmarkPanelInfoArea, + #editBookmarkSeparator, + #editBMPanel_folderRow, + #editBMPanel_tagsRow { + display: none !important; + } + #editBookmarkPanelContent { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + #editBookmarkPanelBottomButtons { + margin-top: -5px !important; + margin-left: -50px !important; + } + + /* Remove items from Tab Manager Menu */ + #allTabsMenu-searchTabs, + #allTabsMenu-tabsSeparator { + display: none; + } + + /* Fix flickering of Tab Manager Menu and extension popups */ + #customizationui-widget-panel, + #customizationui-widget-multiview box.panel-viewstack { + height: calc(100vh - 35px) !important; + max-height: calc(100vh - 35px) !important; + width: 100vw !important; + max-width: 100vw !important; + } + + /* Move Tab Manager Menu button to right of URL Bar */ + :root { + --tab-border-radius: var(--toolbarbutton-border-radius) !important; + } + #alltabs-button > .toolbarbutton-badge-stack { + height: var(--alltabs-button-height) !important; + width: var(--alltabs-button-width) !important; + } + #alltabs-button { + position: absolute; + bottom: var(--alltabs-button-position) !important; + right: 41.5px; + z-index: 2 !important; + } + #alltabs-button > .toolbarbutton-badge-stack::before { + bottom: calc(var(--toolbarbutton-inner-padding) * 0.7 ) !important; + } + + /* Allow room for Tab Manager Menu button */ + #nav-bar { + padding-right: 67px !important; + } + + /* Reduce URL Bar width */ + #urlbar-container { + max-width: var(--urlbar-width) !important; + } + + /* Remove items from Unified Extensions Menu */ + #unified-extensions-panel .panel-header, + #unified-extensions-panel toolbarseparator, + #unified-extensions-manage-extensions { + display: none !important; + } + + /* Adjust button padding and font size for secondary text in Unified Extensions Menu */ + #unified-extensions-panel .subviewbutton { + padding: 6px !important; + } + .unified-extensions-item-message { + font-size: 75% !important; + } + + /* Fix flickering of Unified Extensions Menu */ + #unified-extensions-panel { + --uei-icon-size: 20px; + width: 360px !important; + } + #unified-extensions-view { + margin-top: 6px !important; + height: 230px !important; + max-height: 230px !important; + width: 350px !important; + } + + /* Add padding to bottom of Unified Extensions Menu to look better */ + #unified-extensions-area { + padding-bottom: 5px !important; + } + + /* Allow extensions to use full display */ + .webextension-popup-browser { + height: 100% !important; + min-height: 100% !important; + width: 100vw !important; + min-width: 100vw !important; + } + + /* Adjust "Saved to Library!" popup notification */ + #confirmation-hint { + padding: 10px !important; + width: 100vw !important; + } + +} + +/* Apply this customization only on smaller screens in portrait mode */ +@media (max-width: 700px) { + + /* Added extra space to bottom of Main App Menu (≡) to compensate for orientation problem that would leave some items hidden in portrait mode when Main App Menu (≡) is first opened in landscape mode */ + #appMenu-quit-button2 { + margin-bottom: 64px !important; + } + + /* Added extra space to bottom of Unified Extensions Menu to compensate for orientation problem that would leave some extensions hidden in portrait mode when Unified Extentions Menu is first opened in landscape mode */ + #unified-extensions-area { + padding-bottom: 120px !important; + } + +} diff --git a/src/userChrome/true_mobile_mode-alt.css b/src/userChrome/true_mobile_mode-alt.css new file mode 100644 index 0000000..d7755a7 --- /dev/null +++ b/src/userChrome/true_mobile_mode-alt.css @@ -0,0 +1,79 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/******************************************/ +/* IMPORTANT: */ +/* */ +/* One of the things this code will do is */ +/* to move the Tab Manager Menu button to */ +/* the right side of the URL Bar. */ +/* */ +/* For the best results, consider moving */ +/* the Unified Extensions Menu button to */ +/* the left of the URL Bar and removing */ +/* less important toolbar items by using */ +/* the "Customize Toolbar" feature, or by */ +/* using a user.js file in your profile. */ +/******************************************/ + +/* Apply this customization only on smaller screens */ +@media (max-width: 700px) { + + /* Density variables */ + :root:not([uidensity="touch"]) { + --PanelUI-menu-button-position: 4px; + --alltabs-button-height: 32px; + --alltabs-button-width: 32px; + --alltabs-button-position: 4px; + --urlbar-width: calc(100vw - 166px); + } + :root[uidensity="touch"] { + --PanelUI-menu-button-position: 5px; + --alltabs-button-height: 34px; + --alltabs-button-width: 34px; + --alltabs-button-position: 5px; + --urlbar-width: calc(100vw - 171.5px); + } + + /* Move Main App Menu (≡) button to allow room for Tab Manager Menu button */ + #PanelUI-menu-button { + position: absolute !important; + right: 0px !important; + bottom: var(--PanelUI-menu-button-position) !important; + } + + /* Hide Tab Bar and Private Browsing Indicator */ + #tabbrowser-tabs, + #private-browsing-indicator-with-label { + visibility: collapse !important; + } + + /* Move Tab Manager Menu button to right of urlbar */ + :root { + --tab-border-radius: var(--toolbarbutton-border-radius) !important; + } + #alltabs-button > .toolbarbutton-badge-stack { + height: var(--alltabs-button-height) !important; + width: var(--alltabs-button-width) !important; + } + #alltabs-button { + position: absolute; + top: var(--alltabs-button-position) !important; + right: 41.5px; + z-index: 2 !important; + } + #alltabs-button > .toolbarbutton-badge-stack::before { + bottom: calc(var(--toolbarbutton-inner-padding) * 0.7 ) !important; + } + + /* Allow room for Tab Manager Menu button */ + #nav-bar { + padding-right: 67px !important; + } + + /* Reduce URL Bar width */ + #urlbar-container { + max-width: var(--urlbar-width) !important; + } + +} diff --git a/src/userChrome/true_mobile_mode.css b/src/userChrome/true_mobile_mode.css index dd4031d..cdb5430 100644 --- a/src/userChrome/true_mobile_mode.css +++ b/src/userChrome/true_mobile_mode.css @@ -4,46 +4,76 @@ /******************************************/ /* IMPORTANT: */ /* */ -/* This will move the Tab Manager button */ -/* to the right side of the URL Bar. */ +/* One of the things this code will do is */ +/* to move the Tab Manager Menu button to */ +/* the right side of the URL Bar. */ /* */ -/* Move the Unified Extensions button */ -/* to the left side of the URL Bar */ -/* using the "Customize Toolbar" feature, */ -/* or use a user.js file in your profile. */ +/* For the best results, consider moving */ +/* the Unified Extensions Menu button to */ +/* the left of the URL Bar and removing */ +/* less important toolbar items by using */ +/* the "Customize Toolbar" feature, or by */ +/* using a user.js file in your profile. */ /******************************************/ /* Apply this customization only on smaller screens */ @media (max-width: 700px) { - /* Hide Tabbar */ - #tabbrowser-tabs { + /* Density variables */ + :root:not([uidensity="touch"]) { + --PanelUI-menu-button-position: 4px; + --alltabs-button-height: 32px; + --alltabs-button-width: 32px; + --alltabs-button-position: 3.5px; + --urlbar-width: calc(100vw - 166px); + } + :root[uidensity="touch"] { + --PanelUI-menu-button-position: 4px; + --alltabs-button-height: 34px; + --alltabs-button-width: 34px; + --alltabs-button-position: 4.5px; + --urlbar-width: calc(100vw - 171.5px); + } + + /* Move Main App Menu (≡) button to allow room for Tab Manager Menu button */ + #PanelUI-menu-button { + position: absolute !important; + right: 0px !important; + bottom: var(--PanelUI-menu-button-position) !important; + } + + /* Hide Tab Bar and Private Browsing Indicator */ + #tabbrowser-tabs, + #private-browsing-indicator-with-label { visibility: collapse !important; } - /* Reduce urlbar width */ - #urlbar { - width: calc(100vw - 166px) !important; - } - - /* Adjust Tab Manager Menu spawn height */ - #customizationui-widget-panel { - margin-bottom: 26px !important; - } - - /* Move Tab Manager button to right of urlbar */ + /* Move Tab Manager Menu button to right of urlbar */ :root { --tab-border-radius: var(--toolbarbutton-border-radius) !important; } #alltabs-button > .toolbarbutton-badge-stack { - height: 32px; - width: 32px; + height: var(--alltabs-button-height) !important; + width: var(--alltabs-button-width) !important; } #alltabs-button { position: absolute; - bottom: 4.5px; + bottom: var(--alltabs-button-position) !important; right: 41.5px; - z-index: 1 !important; + z-index: 2 !important; + } + #alltabs-button > .toolbarbutton-badge-stack::before { + bottom: calc(var(--toolbarbutton-inner-padding) * 0.7 ) !important; + } + + /* Allow room for Tab Manager Menu button */ + #nav-bar { + padding-right: 67px !important; + } + + /* Reduce URL Bar width */ + #urlbar-container { + max-width: var(--urlbar-width) !important; } } diff --git a/src/userChrome/userChrome-desktop.css b/src/userChrome/userChrome-desktop.css index 782e5c6..42a192e 100644 --- a/src/userChrome/userChrome-desktop.css +++ b/src/userChrome/userChrome-desktop.css @@ -8,14 +8,16 @@ */ /* -@import "color_variable_template.css"; - -@import "colors.css"; +@import "fenix_colors.css"; +*/ +@import "true_mobile_landscape-alt.css"; +/* +@import "true_mobile_landscape.css"; */ @import "appMenu.css"; - +/* @import "browser.css"; - +*/ @import "editBookmarkPanel.css"; @import "findbar.css"; @@ -28,8 +30,10 @@ @import "urlbar.css"; -@import "alt-browser.css"; - +@import "extensions_menu.css"; +/* +@import "alt-browser-alt.css"; +*/ @import "custom_rules.css"; @import "hide_tabs_scrollbuttons.css"; @@ -37,25 +41,15 @@ @import "tab_close_button_always_on_hover.css"; @import "iconized_main_menu.css"; -/* + @import "round_ui_items.css"; - -@import "true_mobile_mode.css"; - -@import "single_tab_mode.css"; - -@import "single_tab_mode_with_space_for_1_item.css"; - -@import "single_tab_mode_with_space_for_2_items.css"; - -@import "hide_newtab_+_new-tab_buttons.css"; - -@import "numbered_tabs.css"; - +/* @import "tab_counter.css"; */ @import "hide_tab_counter.css"; - +/* +@import "hide_newtab_+_new-tab_buttons.css"; +*/ @import "new-tab-button.css"; @import "tabs_larger_min-width.css"; diff --git a/src/userChrome/userChrome-fenix.css b/src/userChrome/userChrome-fenix.css new file mode 100644 index 0000000..300d93e --- /dev/null +++ b/src/userChrome/userChrome-fenix.css @@ -0,0 +1,58 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/* Source files available here: + https://gitlab.com/postmarketOS/mobile-config-firefox/-/archive/master/mobile-config-firefox-master.zip + https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/ + https://forums.puri.sm/t/mobile-friendly-firefox-customizations-for-librem-5/20313 +*/ + + +@import "fenix_colors.css"; +/* +@import "true_mobile_landscape-alt.css"; +*/ +@import "true_mobile_landscape.css"; + +@import "appMenu.css"; +/* +@import "browser.css"; +*/ +@import "editBookmarkPanel.css"; + +@import "findbar.css"; + +@import "popups.css"; + +@import "root.css"; + +@import "tabmenu.css"; + +@import "urlbar.css"; + +@import "extensions_menu.css"; + +@import "alt-browser-alt.css"; + +@import "custom_rules.css"; +/* +@import "round_ui_items.css"; +*/ +@import "numbered_tabs.css"; + +@import "tab_counter.css"; +/* +@import "fenix-alt.css"; +*/ +@import "fenix.css"; +/* +@import "dynamic_popups.css"; + +@import "dynamic_popups_plus.css"; + +@import "dynamic_popups_max.css"; +*/ +@import "dynamic_popups_pro.css"; +/* +@import "dynamic_popups_pro_max.css"; +*/ diff --git a/src/userChrome/userChrome-fenix_fox.css b/src/userChrome/userChrome-fenix_fox.css new file mode 100644 index 0000000..1aeec33 --- /dev/null +++ b/src/userChrome/userChrome-fenix_fox.css @@ -0,0 +1,26 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/* Source files available here: + https://gitlab.com/postmarketOS/mobile-config-firefox/-/archive/master/mobile-config-firefox-master.zip + https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/ + https://forums.puri.sm/t/mobile-friendly-firefox-customizations-for-librem-5/20313 +*/ + +/* +@import "fenix_colors.css"; + +@import "fenix_fox-alt.css"; +*/ +@import "fenix_fox.css"; +/* +@import "dynamic_popups.css"; + +@import "dynamic_popups_plus.css"; + +@import "dynamic_popups_max.css"; +*/ +@import "dynamic_popups_pro.css"; +/* +@import "dynamic_popups_pro_max.css"; +*/ diff --git a/src/userChrome/userChrome-fenix_one.css b/src/userChrome/userChrome-fenix_one.css new file mode 100644 index 0000000..127325e --- /dev/null +++ b/src/userChrome/userChrome-fenix_one.css @@ -0,0 +1,24 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +/* Source files available here: + https://gitlab.com/postmarketOS/mobile-config-firefox/-/archive/master/mobile-config-firefox-master.zip + https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/ + https://forums.puri.sm/t/mobile-friendly-firefox-customizations-for-librem-5/20313 +*/ + +/* +@import "fenix_one-alt.css"; +*/ +@import "fenix_one.css"; +/* +@import "dynamic_popups.css"; + +@import "dynamic_popups_plus.css"; + +@import "dynamic_popups_max.css"; +*/ +@import "dynamic_popups_pro.css"; +/* +@import "dynamic_popups_pro_max.css"; +*/ diff --git a/src/userChrome/userChrome-hybrid.css b/src/userChrome/userChrome-hybrid.css deleted file mode 100644 index 4125954..0000000 --- a/src/userChrome/userChrome-hybrid.css +++ /dev/null @@ -1,72 +0,0 @@ -/* Copyright 2023 user0 - * SPDX-License-Identifier: MPL-2.0 */ - -/* Source files available here: - https://gitlab.com/postmarketOS/mobile-config-firefox/-/archive/master/mobile-config-firefox-master.zip - https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/ - https://forums.puri.sm/t/mobile-friendly-firefox-customizations-for-librem-5/20313 -*/ - -/* -@import "color_variable_template.css"; - -@import "colors.css"; -*/ -@import "appMenu.css"; - -@import "browser.css"; - -@import "editBookmarkPanel.css"; - -@import "findbar.css"; - -@import "popups.css"; - -@import "root.css"; - -@import "tabmenu.css"; - -@import "urlbar.css"; - -@import "alt-browser.css"; - -@import "custom_rules.css"; - -@import "hide_tabs_scrollbuttons.css"; - -@import "tab_close_button_always_on_hover.css"; - -@import "iconized_main_menu.css"; - -@import "round_ui_items.css"; -/* -@import "true_mobile_mode.css"; - -@import "single_tab_mode.css"; - -@import "single_tab_mode_with_space_for_1_item.css"; - -@import "single_tab_mode_with_space_for_2_items.css"; -*/ -@import "hide_newtab_+_new-tab_buttons.css"; -/* -@import "numbered_tabs.css"; -*/ -@import "tab_counter.css"; -/* -@import "hide_tab_counter.css"; - -@import "new-tab-button.css"; -*/ -@import "tabs_larger_min-width.css"; - -@import "tabs_fill_available_width.css"; -/* -@import "glow.css"; - -@import "colorful_inactive_tabs.css"; - -@import "tab_animated_active_border.css"; - -@import "borderless_transparent_active_tab.css"; -*/ diff --git a/src/userChrome/userChrome-mobile+color+glow+rainbow.css b/src/userChrome/userChrome-mobile+color+glow+rainbow.css deleted file mode 100644 index 87aee20..0000000 --- a/src/userChrome/userChrome-mobile+color+glow+rainbow.css +++ /dev/null @@ -1,71 +0,0 @@ -/* Copyright 2023 user0 - * SPDX-License-Identifier: MPL-2.0 */ - -/* Source files available here: - https://gitlab.com/postmarketOS/mobile-config-firefox/-/archive/master/mobile-config-firefox-master.zip - https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/ - https://forums.puri.sm/t/mobile-friendly-firefox-customizations-for-librem-5/20313 -*/ - - -@import "color_variable_template.css"; - -@import "colors.css"; - -@import "appMenu.css"; - -@import "browser.css"; - -@import "editBookmarkPanel.css"; - -@import "findbar.css"; - -@import "popups.css"; - -@import "root.css"; - -@import "tabmenu.css"; - -@import "urlbar.css"; - -@import "alt-browser.css"; - -@import "custom_rules.css"; - -@import "hide_tabs_scrollbuttons.css"; - -@import "tab_close_button_always_on_hover.css"; - -@import "iconized_main_menu.css"; - -@import "round_ui_items.css"; -/* -@import "true_mobile_mode.css"; - -@import "single_tab_mode.css"; -*/ -@import "single_tab_mode_with_space_for_1_item.css"; -/* -@import "single_tab_mode_with_space_for_2_items.css"; -*/ -@import "hide_newtab_+_new-tab_buttons.css"; - -@import "numbered_tabs.css"; - -@import "tab_counter.css"; -/* -@import "hide_tab_counter.css"; - -@import "new-tab-button.css"; - -@import "tabs_larger_min-width.css"; - -@import "tabs_fill_available_width.css"; -*/ -@import "glow.css"; - -@import "colorful_inactive_tabs.css"; - -@import "tab_animated_active_border.css"; - -@import "borderless_transparent_active_tab.css"; diff --git a/src/userChrome/userChrome-mobile.css b/src/userChrome/userChrome-mobile.css index b6de437..e73dd76 100644 --- a/src/userChrome/userChrome-mobile.css +++ b/src/userChrome/userChrome-mobile.css @@ -8,10 +8,12 @@ */ /* -@import "color_variable_template.css"; +@import "fenix_colors.css"; -@import "colors.css"; +@import "true_mobile_landscape-alt.css"; */ +@import "true_mobile_landscape.css"; + @import "appMenu.css"; @import "browser.css"; @@ -28,8 +30,10 @@ @import "urlbar.css"; -@import "alt-browser.css"; - +@import "extensions_menu.css"; +/* +@import "alt-browser-alt.css"; +*/ @import "custom_rules.css"; @import "hide_tabs_scrollbuttons.css"; @@ -40,28 +44,16 @@ @import "round_ui_items.css"; /* -@import "true_mobile_mode.css"; +@import "single_tab_mode-alt.css"; +@import "alt-single_tab_mode-alt.css"; +*/ @import "single_tab_mode.css"; -*/ -@import "single_tab_mode_with_space_for_1_item.css"; -/* -@import "single_tab_mode_with_space_for_2_items.css"; -*/ -@import "hide_newtab_+_new-tab_buttons.css"; @import "numbered_tabs.css"; @import "tab_counter.css"; /* -@import "hide_tab_counter.css"; - -@import "new-tab-button.css"; - -@import "tabs_larger_min-width.css"; - -@import "tabs_fill_available_width.css"; - @import "glow.css"; @import "colorful_inactive_tabs.css"; diff --git a/src/userChrome/userChrome-true-mobile+color+glow.css b/src/userChrome/userChrome-true-mobile+color+glow.css deleted file mode 100644 index 679d0ac..0000000 --- a/src/userChrome/userChrome-true-mobile+color+glow.css +++ /dev/null @@ -1,72 +0,0 @@ -/* Copyright 2023 user0 - * SPDX-License-Identifier: MPL-2.0 */ - -/* Source files available here: - https://gitlab.com/postmarketOS/mobile-config-firefox/-/archive/master/mobile-config-firefox-master.zip - https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/ - https://forums.puri.sm/t/mobile-friendly-firefox-customizations-for-librem-5/20313 -*/ - - -@import "color_variable_template.css"; - -@import "colors.css"; - -@import "appMenu.css"; - -@import "browser.css"; - -@import "editBookmarkPanel.css"; - -@import "findbar.css"; - -@import "popups.css"; - -@import "root.css"; - -@import "tabmenu.css"; - -@import "urlbar.css"; - -@import "alt-browser.css"; - -@import "custom_rules.css"; - -@import "hide_tabs_scrollbuttons.css"; - -@import "tab_close_button_always_on_hover.css"; - -@import "iconized_main_menu.css"; - -@import "round_ui_items.css"; - -@import "true_mobile_mode.css"; -/* -@import "single_tab_mode.css"; - -@import "single_tab_mode_with_space_for_1_item.css"; - -@import "single_tab_mode_with_space_for_2_items.css"; - -@import "hide_newtab_+_new-tab_buttons.css"; - -@import "numbered_tabs.css"; -*/ -@import "tab_counter.css"; -/* -@import "hide_tab_counter.css"; - -@import "new-tab-button.css"; - -@import "tabs_larger_min-width.css"; - -@import "tabs_fill_available_width.css"; -*/ -@import "glow.css"; -/* -@import "colorful_inactive_tabs.css"; - -@import "tab_animated_active_border.css"; - -@import "borderless_transparent_active_tab.css"; -*/ diff --git a/src/userChrome/userChrome-true-mobile+color.css b/src/userChrome/userChrome-true-mobile+color.css deleted file mode 100644 index 959ba2e..0000000 --- a/src/userChrome/userChrome-true-mobile+color.css +++ /dev/null @@ -1,72 +0,0 @@ -/* Copyright 2023 user0 - * SPDX-License-Identifier: MPL-2.0 */ - -/* Source files available here: - https://gitlab.com/postmarketOS/mobile-config-firefox/-/archive/master/mobile-config-firefox-master.zip - https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/ - https://forums.puri.sm/t/mobile-friendly-firefox-customizations-for-librem-5/20313 -*/ - - -@import "color_variable_template.css"; - -@import "colors.css"; - -@import "appMenu.css"; - -@import "browser.css"; - -@import "editBookmarkPanel.css"; - -@import "findbar.css"; - -@import "popups.css"; - -@import "root.css"; - -@import "tabmenu.css"; - -@import "urlbar.css"; - -@import "alt-browser.css"; - -@import "custom_rules.css"; - -@import "hide_tabs_scrollbuttons.css"; - -@import "tab_close_button_always_on_hover.css"; - -@import "iconized_main_menu.css"; - -@import "round_ui_items.css"; - -@import "true_mobile_mode.css"; -/* -@import "single_tab_mode.css"; - -@import "single_tab_mode_with_space_for_1_item.css"; - -@import "single_tab_mode_with_space_for_2_items.css"; - -@import "hide_newtab_+_new-tab_buttons.css"; - -@import "numbered_tabs.css"; -*/ -@import "tab_counter.css"; -/* -@import "hide_tab_counter.css"; - -@import "new-tab-button.css"; - -@import "tabs_larger_min-width.css"; - -@import "tabs_fill_available_width.css"; - -@import "glow.css"; - -@import "colorful_inactive_tabs.css"; - -@import "tab_animated_active_border.css"; - -@import "borderless_transparent_active_tab.css"; -*/ diff --git a/src/userChrome/userChrome-true-mobile.css b/src/userChrome/userChrome-true-mobile.css index 3628e4c..4060f28 100644 --- a/src/userChrome/userChrome-true-mobile.css +++ b/src/userChrome/userChrome-true-mobile.css @@ -8,14 +8,16 @@ */ /* -@import "color_variable_template.css"; +@import "fenix_colors.css"; -@import "colors.css"; +@import "true_mobile_landscape-alt.css"; */ +@import "true_mobile_landscape.css"; + @import "appMenu.css"; - +/* @import "browser.css"; - +*/ @import "editBookmarkPanel.css"; @import "findbar.css"; @@ -28,45 +30,31 @@ @import "urlbar.css"; -@import "alt-browser.css"; +@import "extensions_menu.css"; + +@import "alt-browser-alt.css"; @import "custom_rules.css"; -@import "hide_tabs_scrollbuttons.css"; - -@import "tab_close_button_always_on_hover.css"; - @import "iconized_main_menu.css"; @import "round_ui_items.css"; -@import "true_mobile_mode.css"; -/* -@import "single_tab_mode.css"; - -@import "single_tab_mode_with_space_for_1_item.css"; - -@import "single_tab_mode_with_space_for_2_items.css"; - -@import "hide_newtab_+_new-tab_buttons.css"; - @import "numbered_tabs.css"; -*/ + @import "tab_counter.css"; /* -@import "hide_tab_counter.css"; - -@import "new-tab-button.css"; - -@import "tabs_larger_min-width.css"; - -@import "tabs_fill_available_width.css"; - -@import "glow.css"; - -@import "colorful_inactive_tabs.css"; - -@import "tab_animated_active_border.css"; - -@import "borderless_transparent_active_tab.css"; +@import "true_mobile_mode-alt.css"; +*/ +@import "true_mobile_mode.css"; +/* +@import "dynamic_popups.css"; + +@import "dynamic_popups_plus.css"; + +@import "dynamic_popups_max.css"; +*/ +@import "dynamic_popups_pro.css"; +/* +@import "dynamic_popups_pro_max.css"; */ diff --git a/src/userContent/theme-color-1.css b/src/userContent/theme-color-1.css deleted file mode 100644 index 82ad9f8..0000000 --- a/src/userContent/theme-color-1.css +++ /dev/null @@ -1,98 +0,0 @@ -/* Copyright 2023 user0 - * SPDX-License-Identifier: MPL-2.0 */ - -@-moz-document url("about:addons"), -url("about:blank"), -url("about:config"), -url("about:home"), -url("about:newtab"), -url("about:preferences"), -url("about:privatebrowsing"), -url("about:profiles") { - :root { - --card-outline-color: #dc8add !important; - --card-shadow: var(--shadow-10); - --card-shadow-hover: var(--card-shadow), 0 0 0 5px var(--card-outline-color); - --checkbox-border-color: var(--in-content-box-border-color); - --checkbox-checked-active-bgcolor: var(--in-content-primary-button-background-active); - --checkbox-checked-bgcolor: var(--in-content-primary-button-background); - --checkbox-checked-border-color: transparent; - --checkbox-checked-color: var(--in-content-primary-button-text-color); - --checkbox-checked-hover-bgcolor: var(--in-content-primary-button-background-hover); - --checkbox-unchecked-active-bgcolor: var(--in-content-button-background-active); - --checkbox-unchecked-bgcolor: var(--in-content-button-background); - --checkbox-unchecked-hover-bgcolor: var(--in-content-button-background-hover); - --dialog-warning-text-color: #dc8add !important; - --in-content-accent-color: #dc8add !important; - --in-content-accent-color-active: #dc8add !important; - --in-content-border-color: #dc8add !important; - --in-content-border-active: #dc8add !important; - --in-content-border-active-shadow: #dc8add !important; - --in-content-border-hover: #dc8add !important; - --in-content-border-invalid: #dc8add !important; - --in-content-box-background: black !important; - --in-content-box-background-active: rgba(220,138,221,0.6) !important; - --in-content-box-background-hover: rgba(220,138,221,0.4) !important; - --in-content-box-background-odd: black !important; - --in-content-box-border-color: #dc8add !important; - --in-content-box-info-background: black !important; - --in-content-button-background: rgba(220,138,221,0.5) !important; - --in-content-button-background-active: rgba(220,138,221,0.4) !important; - --in-content-button-background-hover: rgba(220,138,221,0.6) !important; - --in-content-button-border-color: #dc8add !important; - --in-content-button-border-color-active: #dc8add !important; - --in-content-button-border-color-hover: #dc8add !important; - --in-content-button-text-color: #dc8add !important; - --in-content-button-text-color-active: #dc8add !important; - --in-content-button-text-color-hover: white !important; - --in-content-category-background: rgba(220,138,221,0.5) !important; - --in-content-category-background-hover: rgba(220,138,221,0.5) !important; - --in-content-category-background-selected: rgba(220,138,221,0.4) !important; - --in-content-category-background-selected-hover: rgba(220,138,221,0.5) !important; - --in-content-category-text: #dc8add !important; - --in-content-category-text-selected: #dc8add !important; - --in-content-danger-button-background: #dc8add !important; - --in-content-danger-button-background-active: #dc8add !important; - --in-content-danger-button-background-hover: #dc8add !important; - --in-content-deemphasized-text: #dc8add !important; - --in-content-error-text-color: #dc8add !important; - --in-content-focus-outline-color: #dc8add !important; - --in-content-icon-color: #dc8add !important; - --in-content-item-hover: #dc8add !important; - --in-content-item-hover-text: white !important; - --in-content-item-selected: #dc8add !important; - --in-content-item-selected-text: white !important; - --in-content-link-color: #dc8add !important; - --in-content-link-color-active: #dc8add !important; - --in-content-link-color-hover: #dc8add !important; - --in-content-link-color-visited: #dc8add !important; - --in-content-page-background: black !important; - --in-content-page-color: #dc8add !important; - --in-content-primary-button-background: rgba(220,138,221,0.666) !important; - --in-content-primary-button-background-active: rgba(220,138,221,0.666) !important; - --in-content-primary-button-background-hover: black !important; - --in-content-primary-button-border-color: #dc8add !important; - --in-content-primary-button-border-hover: #dc8add !important; - --in-content-primary-button-text-color: white !important; - --in-content-primary-button-text-color-hover: white !important; - --in-content-selected-text: #dc8add !important; - --in-content-table-background: black !important; - --in-content-table-border-color: #dc8add !important; - --in-content-table-border-dark-color: #dc8add !important; - --in-content-table-header-background: rgba(220,138,221,0.5) !important; - --in-content-table-header-color: #dc8add !important; - --in-content-text-color: #dc8add !important; - --in-content-warning-container: rgba(220,138,221,0.3) !important; - --shadow-10: 0 1px 4px #dc8add !important; - --shadow-30: 0 4px 16px #dc8add !important; - color: #dc8add !important; - } - ::selection { - background: #dc8add !important; - color: white !important; - } - #prefs>tr:hover { - background-color: rgba(220,138,221,0.6) !important; - color: #dc8add !important; - } -} diff --git a/src/userContent/theme-color-2.css b/src/userContent/theme-color-2.css deleted file mode 100644 index 54db2d6..0000000 --- a/src/userContent/theme-color-2.css +++ /dev/null @@ -1,98 +0,0 @@ -/* Copyright 2023 user0 - * SPDX-License-Identifier: MPL-2.0 */ - -@-moz-document url("about:addons"), -url("about:blank"), -url("about:config"), -url("about:home"), -url("about:newtab"), -url("about:preferences"), -url("about:privatebrowsing"), -url("about:profiles") { - :root { - --card-outline-color: #dc8add !important; - --card-shadow: var(--shadow-10); - --card-shadow-hover: var(--card-shadow), 0 0 0 5px var(--card-outline-color); - --checkbox-border-color: var(--in-content-box-border-color); - --checkbox-checked-active-bgcolor: var(--in-content-primary-button-background-active); - --checkbox-checked-bgcolor: var(--in-content-primary-button-background); - --checkbox-checked-border-color: var(--in-content-box-border-color); - --checkbox-checked-color: var(--in-content-primary-button-text-color); - --checkbox-checked-hover-bgcolor: var(--in-content-primary-button-background-hover); - --checkbox-unchecked-active-bgcolor: var(--in-content-button-background-active); - --checkbox-unchecked-bgcolor: var(--in-content-button-background); - --checkbox-unchecked-hover-bgcolor: var(--in-content-button-background-hover); - --dialog-warning-text-color: #dc8add !important; - --in-content-accent-color: #dc8add !important; - --in-content-accent-color-active: white !important; - --in-content-border-color: #dc8add !important; - --in-content-border-active: #dc8add !important; - --in-content-border-active-shadow: #dc8add !important; - --in-content-border-hover: #dc8add !important; - --in-content-border-invalid: #dc8add !important; - --in-content-box-background: black !important; - --in-content-box-background-active: #dc8add !important; - --in-content-box-background-hover: #dc8add !important; - --in-content-box-background-odd: black !important; - --in-content-box-border-color: #dc8add !important; - --in-content-box-info-background: black !important; - --in-content-button-background: black !important; - --in-content-button-background-active: #dc8add !important; - --in-content-button-background-hover: #dc8add !important; - --in-content-button-border-color: #dc8add !important; - --in-content-button-border-color-active: #dc8add !important; - --in-content-button-border-color-hover: #dc8add !important; - --in-content-button-text-color: #dc8add !important; - --in-content-button-text-color-active: white !important; - --in-content-button-text-color-hover: white !important; - --in-content-category-background: black !important; - --in-content-category-background-hover: #dc8add !important; - --in-content-category-background-selected: #dc8add !important; - --in-content-category-background-selected-hover: #dc8add !important; - --in-content-category-text: white !important; - --in-content-category-text-selected: white !important; - --in-content-danger-button-background: #dc8add !important; - --in-content-danger-button-background-active: #dc8add !important; - --in-content-danger-button-background-hover: #dc8add !important; - --in-content-deemphasized-text: #dc8add !important; - --in-content-error-text-color: #dc8add !important; - --in-content-focus-outline-color: #dc8add !important; - --in-content-icon-color: #dc8add !important; - --in-content-item-hover: #dc8add !important; - --in-content-item-hover-text: white !important; - --in-content-item-selected: #dc8add !important; - --in-content-item-selected-text: white !important; - --in-content-link-color: #dc8add !important; - --in-content-link-color-active: #dc8add !important; - --in-content-link-color-hover: #dc8add !important; - --in-content-link-color-visited: #dc8add !important; - --in-content-page-background: black !important; - --in-content-page-color: #dc8add !important; - --in-content-primary-button-background: #dc8add !important; - --in-content-primary-button-background-active: #dc8add !important; - --in-content-primary-button-background-hover: black !important; - --in-content-primary-button-border-color: #dc8add !important; - --in-content-primary-button-border-hover: #dc8add !important; - --in-content-primary-button-text-color: white !important; - --in-content-primary-button-text-color-hover: white !important; - --in-content-selected-text: white !important; - --in-content-table-background: black !important; - --in-content-table-border-color: #dc8add !important; - --in-content-table-border-dark-color: #dc8add !important; - --in-content-table-header-background: black !important; - --in-content-table-header-color: #dc8add !important; - --in-content-text-color: #dc8add !important; - --in-content-warning-container: black !important; - --shadow-10: 0 1px 4px #dc8add !important; - --shadow-30: 0 4px 16px #dc8add !important; - color: #dc8add !important; - } - ::selection { - background: #dc8add !important; - color: white !important; - } - #prefs>tr:hover { - background-color: #dc8add !important; - color: white !important; - } -} diff --git a/src/userContent/theme-dark.css b/src/userContent/theme-dark.css deleted file mode 100644 index a92b630..0000000 --- a/src/userContent/theme-dark.css +++ /dev/null @@ -1,131 +0,0 @@ -/* Copyright 2023 user0 - * SPDX-License-Identifier: MPL-2.0 */ - -@-moz-document url("about:addons"), -url("about:blank"), -url("about:config"), -url("about:home"), -url("about:newtab"), -url("about:preferences"), -url("about:privatebrowsing"), -url("about:profiles") { - body { - background-color:black!important - } - a,a:visited,a:hover { - color:black!important - } - #categories > .category[selected], - #categories > .category.selected { - color: white !important; - } - checkbox:not([disabled="true"]):hover > .checkbox-check, - input[type="checkbox"]:not(:disabled):hover { - border-color: white !important; - } - radio:not([disabled="true"]):hover > .radio-check { - border-color: white !important; - } - .text-link { - color: white !important; - } - .content-blocking-category.selected { - border: 1px solid white !important; - background-color: rgba(255,255,255,0.4) !important; - } - .content-blocking-category { - border: 1px solid var(--in-content-border-color) !important; - background-color: rgba(255,255,255,0.2) !important; /* bkg of default unselected*/ - } - .content-blocking-warning { - background-color: rgba(255,255,255,0.3) !important; - } - .checkbox-check{ - fill: white !important; - } - .radio-check{ - fill: white !important; - } - .addon-card:not([expanded]) > .addon.card:hover { - box-shadow: white !important; - } - .card { - border: 1px solid white !important; - } - :root { - --card-outline-color: white !important; - --in-content-border-color: white !important; - --in-content-border-active: white !important; - --in-content-border-active-shadow: white !important; - --in-content-border-hover: white !important; - --in-content-box-background: black !important; - --in-content-box-background-active: rgba(255,255,255,0.6) !important; - --in-content-box-background-hover: rgba(255,255,255,0.4) !important; - --in-content-box-border-color: white !important; - --in-content-box-info-background: black !important; - --in-content-button-background: rgba(255,255,255,0.5) !important; - --in-content-button-background-active: rgba(255,255,255,0.4) !important; - --in-content-button-background-hover: rgba(255,255,255,0.6) !important; - --in-content-category-background: rgba(255,255,255,0.5) !important; - --in-content-category-background-hover: rgba(255,255,255,0.5) !important; - --in-content-category-background-selected: rgba(255,255,255,0.4) !important; - --in-content-category-background-selected-hover: rgba(255,255,255,0.5) !important; - --in-content-category-text: white !important; - --in-content-category-text-selected: white !important; - --in-content-page-background: black !important; - --in-content-selected-text: white !important; - --in-content-table-background: black !important; - --in-content-table-border-dark-color: white !important; - --in-content-table-header-background: rgba(255,255,255,0.5) !important; - --in-content-text-color: white !important; - --in-content-warning-container: rgba(255,255,255,0.3) !important; - --shadow-10: 0 1px 4px white !important; - --shadow-30: 0 4px 16px white !important; - color: white !important; - } -} -:root { - --card-outline-color: white !important; - --in-content-box-background: black !important; - --in-content-page-background: black !important; - --in-content-text-color: white !important; - --shadow-10: 0 1px 4px white !important; - --shadow-30: 0 4px 16px white !important; - color: white !important; -} -.card { - border: 1px solid white !important; -} -#learnMoreLink { - color: white !important; -} -#errorCode { - color: white !important; -} -#viewCertificate { - color: white !important; -} -#advancedButton { - color: white !important; - background-color: rgba(0,62,170,1) !important; -} -#advancedButton:hover { - color: white !important; - background-color: rgba(0,62,170,0.7) !important; -} -#advancedButton:active { - color: white !important; - background-color: rgba(0,62,170,0.5) !important; -} -#exceptionDialogButton { - color: white !important; - background-color: rgba(0,62,170,1) !important; -} -#exceptionDialogButton:hover { - color: white !important; - background-color: rgba(0,62,170,0.7) !important; -} -#exceptionDialogButton:active { - color: white !important; - background-color: rgba(0,62,170,0.5) !important; -} diff --git a/src/userContent/theme-fenix.css b/src/userContent/theme-fenix.css new file mode 100644 index 0000000..83e5f63 --- /dev/null +++ b/src/userContent/theme-fenix.css @@ -0,0 +1,518 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +@-moz-document +regexp("^(about:).*") { + + /* Fenix Colors */ + :root { + --addon-card-background: rgba(171,113,255,0.1) !important; + --brand-color-accent: rgb(80,54,132) !important; + --brand-color-accent-active: rgb(80,54,132) !important; + --brand-color-accent-hover: rgb(80,54,132) !important; + --color-canvas: rgb(167,111,250) !important; + --card-outline-color: rgb(171,113,255) !important; + --card-shadow: var(--shadow-10) !important; + --card-shadow-hover: var(--card-shadow), 0 0 0 5px var(--card-outline-color) !important; + --checkbox-border-color: white !important; + --checkbox-checked-active-bgcolor: var(--in-content-box-background-active) !important; + --checkbox-checked-bgcolor: var(--in-content-box-border-color) !important; + --checkbox-checked-border-color: var(--in-content-box-border-color) !important; + --checkbox-checked-color: var(--in-content-box-text-color) !important; + --checkbox-checked-hover-bgcolor: var(--in-content-box-background-hover) !important; + --checkbox-unchecked-active-bgcolor: var(--in-content-box-background-active) !important; + --checkbox-unchecked-bgcolor: var(--in-content-box-background) !important; + --checkbox-unchecked-hover-bgcolor: var(--in-content-box-background-hover) !important; + --dialog-warning-text-color: white !important; + --in-content-accent-color: rgb(171,113,255) !important; + --in-content-accent-color-active: rgb(203,158,255) !important; + --in-content-border-color: rgb(171,113,255) !important; + --in-content-border-active: rgb(203,158,255) !important; + --in-content-border-active-shadow: rgb(203,158,255) !important; + --in-content-border-hover: rgb(203,158,255) !important; + --in-content-border-invalid: rgb(171,113,255) !important; + --in-content-box-background: rgb(41,29,79) !important; + --in-content-box-background-active: rgb(203,158,255) !important; + --in-content-box-background-hover: rgb(203,158,255) !important; + --in-content-box-background-odd: var(--in-content-box-info-background) !important; + --in-content-box-border-color: rgb(171,113,255) !important; + --in-content-box-text-color: white !important; + --in-content-box-info-background: rgba(171,113,255,0.2) !important; + --in-content-button-background: rgb(171,113,255) !important; + --in-content-button-background-active: rgb(203,158,255) !important; + --in-content-button-background-hover: rgb(203,158,255) !important; + --in-content-button-border-color: rgb(171,113,255) !important; + --in-content-button-border-color-active: rgb(203,158,255) !important; + --in-content-button-border-color-hover: rgb(203,158,255) !important; + --in-content-button-text-color: white !important; + --in-content-button-text-color-active: white !important; + --in-content-button-text-color-hover: white !important; + --in-content-category-background: rgb(41,29,79) !important; + --in-content-category-background-hover: rgb(171,113,255) !important; + --in-content-category-background-selected: rgb(171,113,255) !important; + --in-content-category-background-selected-hover: rgb(171,113,255) !important; + --in-content-category-text: white !important; + --in-content-category-text-selected: white !important; + --in-content-danger-button-background: darkred !important; + --in-content-danger-button-background-active: red !important; + --in-content-danger-button-background-hover: red !important; + --in-content-deemphasized-text: lightgray !important; + --in-content-error-text-color: white !important; + --in-content-focus-outline-color: rgb(171,113,255) !important; + --in-content-icon-color: white !important; + --in-content-item-hover: rgb(203,158,255) !important; + --in-content-item-hover-text: white !important; + --in-content-item-selected: rgb(203,158,255) !important; + --in-content-item-selected-text: white !important; + --in-content-link-color: rgb(171,113,255) !important; + --in-content-link-color-active: rgb(203,158,255) !important; + --in-content-link-color-hover: rgb(203,158,255) !important; + --in-content-link-color-visited: rgb(171,113,255) !important; + --in-content-page-background: rgb(41,29,79) !important; + --in-content-page-color: rgb(171,113,255) !important; + --in-content-primary-button-background: rgb(171,113,255) !important; + --in-content-primary-button-background-active: rgb(203,158,255) !important; + --in-content-primary-button-background-hover: rgb(203,158,255) !important; + --in-content-primary-button-border-color: rgb(171,113,255) !important; + --in-content-primary-button-border-hover: rgb(203,158,255) !important; + --in-content-primary-button-text-color: white !important; + --in-content-primary-button-text-color-hover: white !important; + --in-content-selected-text: white !important; + --in-content-table-background: rgb(41,29,79) !important; + --in-content-table-border-color: rgb(171,113,255) !important; + --in-content-table-border-dark-color: rgb(144,89,255) !important; + --in-content-table-header-background: rgb(41,29,79) !important; + --in-content-table-header-color: white !important; + --in-content-text-color: white !important; + --in-content-warning-container: darkorange !important; + --shadow-10: 0 1px 4px black !important; + --shadow-30: 0 4px 16px black !important; + color: white !important; + } + ::selection { + background: rgb(171,113,255) !important; + color: white !important; + } + + /* About:Addons */ + #categories > .category[selected], #categories > .category.selected { + background-color: var(--in-content-button-background) !important; + color: var(--in-content-button-text-color) !important; + } + .addon.card { + background-color: var(--addon-card-background) !important; + } + .radio-container-with-text > input { + border: 2px solid !important; + background-color: var(--in-content-page-background) !important; + color: var(--in-content-page-color) !important; + } + .radio-container-with-text > input:hover { + background-color: var(--in-content-button-background-hover) !important; + } + .radio-container-with-text > input:active { + background-color: var(--in-content-button-background-active) !important; + } + + /* About:Preferences */ + .radio-check { + border: 2px solid !important; + border-color: white !important; + background-color: var(--in-content-page-background) !important; + } + .radio-check[selected] { + border-color: var(--in-content-page-color) !important; + color: var(--in-content-page-color) !important; + } + .web-appearance-choice-image-container { + background-color: var(--in-content-page-background) !important; + } + .web-appearance-choice-image-container:hover { + background-color: var(--in-content-button-background-hover) !important; + } + .web-appearance-choice-image-container:active { + background-color: var(--in-content-button-background-active) !important; + } + .web-appearance-choice input { + background-color: var(--in-content-page-background) !important; + border: 2px solid !important; + border-color: var(--in-content-page-color) !important; + color: var(--in-content-page-color) !important; + } + .web-appearance-choice input:hover { + background-color: var(--in-content-button-background-hover) !important; + } + .web-appearance-choice input:active { + background-color: var(--in-content-button-background-active) !important; + } + label.web-appearance-choice:nth-child(1) > div:nth-child(2) > span:nth-child(2) { + display: none !important; + } + label.web-appearance-choice:nth-child(1) > div:nth-child(2)::after { + content: "Auto" !important; + } + +} + +@-moz-document +regexp("^(?!about:).*") { + + /* Apply this customization only on smaller screens */ + @media + (max-height: 300px), + (max-width: 700px) { + + /* Table font size (prevents horizontal scroll on web pages) */ + tr { + font-size: 13px; + } + + } + +} + +@-moz-document +url("about:addons"), +url-prefix("about:addons") { + + /* Apply this customization only on smaller screens */ + @media + (max-height: 300px), + (max-width: 700px) { + + /* Page width */ + :root { + --in-content-sidebar-width: 50px !important; + --sidebar-width: 50px !important; + } + body { + min-width: 100vw !important; + max-width:100vw !important; + width: 100vw !important; + } + + /* About:Addons */ + .search-label, + .textbox-search-icons { + display: none !important; + } + input::placeholder { + color: white !important; + opacity: 100% !important; + } + search-addons > search-textbox { + background-color: var(--in-content-button-background) !important; + color: var(--in-content-button-text-color) !important; + position: fixed !important; + top: 0 !important; + left: 0 !important; + padding: 0 !important; + width: 49px !important; + } + search-addons > search-textbox:hover { + background-color: var(--in-content-button-background-hover) !important; + } + search-addons > search-textbox:active { + background-color: var(--in-content-button-background-active) !important; + } + search-addons > search-textbox[focused] { + background-color: var(--in-content-page-background) !important; + border: 2px solid var(--card-outline-color) !important; + width: 100vw !important; + z-index: 2 !important; + } + .main-search { + padding-top: 18px !important; + padding-bottom: 18px !important; + } + .main-heading { + position: fixed !important; + top: 0 !important; + padding: 0 !important; + } + .page-options-menu { + position: fixed !important; + top: 0 !important; + right: 0 !important; + } + #categories > .category { + margin-left: 0px !important; + } + .sidebar-footer-list { + margin-inline-start: 0 !important; + } + .list-section-heading { + margin-top: 0 !important; + } + .addon-description { + padding-right: 40px !important; + } + .addon-badge-recommended { + margin-right: 10px !important; + } + .more-options-button { + margin-inline-start: -6px !important; + min-width: 36px !important; + } + .toggle-button { + margin-right: -60px !important; + margin-bottom: -60px !important; + height: 12px !important; + width: 24px !important; + } + .toggle-button:before { + margin-top: -4px !important; + margin-left: -6px !important; + height: 18px !important; + width: 18px !important; + } + + } + + /* Apply this customization only on smaller screens in portrait mode */ + @media (max-width: 700px) { + + /* Reduce addon cards width and font to fit display without horizontal scrolling */ + .card { + max-width: 250px !important; + font-size: 8pt !important; + } + + } + +} + +@-moz-document +url("about:config") { + + /* Apply this customization only on smaller screens */ + @media + (max-height: 300px), + (max-width: 700px) { + + /* About:Config */ + #search-container, + #toolbar, + #prefs { + min-width: calc(100vw - 20px) !important; + } + #toolbar { + flex-direction: column; + } + #prefs { + word-wrap: anywhere; + } + .checkbox-container { + margin-top: 6px; + padding-bottom: 3px; + } + tr { + font-size: 12px; + } + th { + padding-left: 8px !important; + } + + } + +} + +@-moz-document +url("about:license") { + + /* Apply this customization only on smaller screens */ + @media + (max-height: 300px), + (max-width: 700px) { + + /* About:License */ + .license-header { + background-image: none !important; + padding-inline-end: unset !important; + } + #lic-info > pre { + font-size: 4pt !important; + } + + } + +} + +@-moz-document +url("about:policies"), +url-prefix("about:policies") { + + /* Apply this customization only on smaller screens */ + @media + (max-height: 300px), + (max-width: 700px) { + + /* Page width */ + :root { + --in-content-sidebar-width: 50px !important; + --sidebar-width: 50px !important; + } + + /* About:Policies */ + #categories > .category { + margin-left: 0px !important; + } + td { + font-size: 9px; + padding-left: 5px !important; + padding-right: 5px !important; + word-wrap: anywhere; + } + + } + +} + +@-moz-document +regexp("about:preferences.*") { + + /* Apply this customization only on smaller screens */ + @media + (max-height: 300px), + (max-width: 700px) { + + /* Page width */ + :root { + --in-content-sidebar-width: 50px !important; + --sidebar-width: 50px !important; + } + + /* About:Preferences */ + #searchInput { + display: none !important; + } + .pane-container { + margin-inline-start: 10px !important; + margin-inline-end: 10px !important; + width: calc(100vw - 70px) !important; + min-width: calc(100vw - 70px) !important; + } + #category-general, + #category-home, + #category-search, + #category-privacy, + #category-more-from-mozilla { + width: 48px !important; + } + #categories > .category { + margin-left: 0px !important; + } + .sidebar-footer-list { + margin-inline-start: 0 !important; + } + .accessory-button { + min-width: 100px !important; + } + #defaultFont, + #advancedFonts { + max-width: 100px !important; + width: 100px !important; + } + #defaultFontSizeLabel { + margin-left: -196px !important; + } + #defaultFontSizeLabel, + #defaultFontSize { + margin-bottom: -80px !important; + } + #primaryBrowserLocale { + min-width: 20px !important; + } + + /* About:Preferences#Privacy */ + #contentBlockingHeader { + padding-left: 28px !important; + } + #trackingProtectionShield { + margin-inline-end: 0 !important; + margin-top: -34px !important; + max-height: 20px !important; + max-width: 20px !important; + height: 20px !important; + width: 20px !important; + } + #contentBlockingDescription { + font-size: 9pt !important; + } + #trackingProtectionExceptions { + padding-left: 0 !important; + padding-right: 0 !important; + max-width: 30px !important; + width: 30px !important; + } + #historyMode { + max-width: 235.5px !important; + width: 235.5px !important; + } + + /* About:Preferences#MoreFromMozilla */ + .simple .qr-code-box-title { + max-width: 235px !important; + width: 235px !important; + } + + } + +} + +@-moz-document +url("about:protections") { + + /* Apply this customization only on smaller screens */ + @media + (max-height: 300px), + (max-width: 700px) { + + /* About:Protections */ + #report-content { + margin: 0 !important; + padding: 50px !important; + max-width: 100vw !important; + width: 100vw !important; + } + #mobile-hanger { + display: none !important; + } + .body-wrapper { + grid-column-start: 1 !important; + grid-column-end: -1 !important; + } + #manage-protections, + #sign-up-for-monitor-link, + #save-passwords-button, + #get-proxy-extension-link { + grid-area: 2 / 1 / 2 / 6 !important; + } + .card-header .wrapper { + grid-row-gap: 8px !important; + } + .card:not(.has-logins) .wrapper div:nth-child(1) { + grid-column-end: -1 !important; + } + + } + +} + +@-moz-document +url("about:rights") { + + /* Apply this customization only on smaller screens */ + @media + (max-height: 300px), + (max-width: 700px) { + + /* About:Rights */ + .rights-header { + background-image: none !important; + padding-inline-end: unset !important; + } + + } + +} diff --git a/src/userContent/theme-light.css b/src/userContent/theme-light.css deleted file mode 100644 index e7dc0f3..0000000 --- a/src/userContent/theme-light.css +++ /dev/null @@ -1,18 +0,0 @@ -/* Copyright 2023 user0 - * SPDX-License-Identifier: MPL-2.0 */ - -@-moz-document url("about:addons"), -url("about:blank"), -url("about:config"), -url("about:home"), -url("about:newtab"), -url("about:preferences"), -url("about:privatebrowsing"), -url("about:profiles") { - body { - background-color:rgb(249, 249, 255)!important - } - a,a:visited,a:hover { - color:rgb(249, 249, 255)!important - } -} diff --git a/src/userContent/theme-non-colorized.css b/src/userContent/theme-non-colorized.css new file mode 100644 index 0000000..2a4fed5 --- /dev/null +++ b/src/userContent/theme-non-colorized.css @@ -0,0 +1,371 @@ +/* Copyright 2023 user0 + * SPDX-License-Identifier: MPL-2.0 */ + +@-moz-document +regexp("^(?!about:).*") { + + /* Apply this customization only on smaller screens */ + @media + (max-height: 300px), + (max-width: 700px) { + + /* Table font size (prevents horizontal scroll on web pages) */ + tr { + font-size: 13px; + } + + } + +} + +@-moz-document +url("about:addons"), +url-prefix("about:addons") { + + /* Apply this customization only on smaller screens */ + @media + (max-height: 300px), + (max-width: 700px) { + + /* Page width */ + :root { + --in-content-sidebar-width: 50px !important; + --sidebar-width: 50px !important; + } + body { + min-width: 100vw !important; + max-width:100vw !important; + width: 100vw !important; + } + + /* About:Addons */ + .search-label, + .textbox-search-icons { + display: none !important; + } + input::placeholder { + color: white !important; + opacity: 100% !important; + } + search-addons > search-textbox { + background-color: var(--in-content-button-background) !important; + color: var(--in-content-button-text-color) !important; + position: fixed !important; + top: 0 !important; + left: 0 !important; + padding: 0 !important; + width: 49px !important; + } + search-addons > search-textbox:hover { + background-color: var(--in-content-button-background-hover) !important; + } + search-addons > search-textbox:active { + background-color: var(--in-content-button-background-active) !important; + } + search-addons > search-textbox[focused] { + background-color: var(--in-content-page-background) !important; + border: 2px solid var(--card-outline-color) !important; + width: 100vw !important; + z-index: 2 !important; + } + .main-search { + padding-top: 18px !important; + padding-bottom: 18px !important; + } + .main-heading { + position: fixed !important; + top: 0 !important; + padding: 0 !important; + } + .page-options-menu { + position: fixed !important; + top: 0 !important; + right: 0 !important; + } + #categories > .category { + margin-left: 0px !important; + } + .sidebar-footer-list { + margin-inline-start: 0 !important; + } + .list-section-heading { + margin-top: 0 !important; + } + .addon-description { + padding-right: 40px !important; + } + .addon-badge-recommended { + margin-right: 10px !important; + } + .more-options-button { + margin-inline-start: -6px !important; + min-width: 36px !important; + } + .toggle-button { + margin-right: -60px !important; + margin-bottom: -60px !important; + height: 12px !important; + width: 24px !important; + } + .toggle-button:before { + margin-top: -4px !important; + margin-left: -6px !important; + height: 18px !important; + width: 18px !important; + } + + } + + /* Apply this customization only on smaller screens in portrait mode */ + @media (max-width: 700px) { + + /* Reduce addon cards width and font to fit display without horizontal scrolling */ + .card { + max-width: 250px !important; + font-size: 8pt !important; + } + + } + +} + +@-moz-document +url("about:config") { + + /* Apply this customization only on smaller screens */ + @media + (max-height: 300px), + (max-width: 700px) { + + /* About:Config */ + #search-container, + #toolbar, + #prefs { + min-width: calc(100vw - 20px) !important; + } + #toolbar { + flex-direction: column; + } + #prefs { + word-wrap: anywhere; + } + .checkbox-container { + margin-top: 6px; + padding-bottom: 3px; + } + tr { + font-size: 12px; + } + th { + padding-left: 8px !important; + } + + } + +} + +@-moz-document +url("about:license") { + + /* Apply this customization only on smaller screens */ + @media + (max-height: 300px), + (max-width: 700px) { + + /* About:License */ + .license-header { + background-image: none !important; + padding-inline-end: unset !important; + } + #lic-info > pre { + font-size: 4pt !important; + } + + } + +} + +@-moz-document +url("about:policies"), +url-prefix("about:policies") { + + /* Apply this customization only on smaller screens */ + @media + (max-height: 300px), + (max-width: 700px) { + + /* Page width */ + :root { + --in-content-sidebar-width: 50px !important; + --sidebar-width: 50px !important; + } + + /* About:Policies */ + #categories > .category { + margin-left: 0px !important; + } + td { + font-size: 9px; + padding-left: 5px !important; + padding-right: 5px !important; + word-wrap: anywhere; + } + + } + +} + +@-moz-document +regexp("about:preferences.*") { + + /* Apply this customization only on smaller screens */ + @media + (max-height: 300px), + (max-width: 700px) { + + /* Page width */ + :root { + --in-content-sidebar-width: 50px !important; + --sidebar-width: 50px !important; + } + + /* About:Preferences */ + #searchInput { + display: none !important; + } + .pane-container { + margin-inline-start: 10px !important; + margin-inline-end: 10px !important; + width: calc(100vw - 70px) !important; + min-width: calc(100vw - 70px) !important; + } + #category-general, + #category-home, + #category-search, + #category-privacy, + #category-more-from-mozilla { + width: 48px !important; + } + #categories > .category { + margin-left: 0px !important; + } + .sidebar-footer-list { + margin-inline-start: 0 !important; + } + label.web-appearance-choice:nth-child(1) > div:nth-child(2) > span:nth-child(2) { + display: none !important; + } + label.web-appearance-choice:nth-child(1) > div:nth-child(2)::after { + content: "Auto" !important; + } + .accessory-button { + min-width: 100px !important; + } + #defaultFont, + #advancedFonts { + max-width: 100px !important; + width: 100px !important; + } + #defaultFontSizeLabel { + margin-left: -196px !important; + } + #defaultFontSizeLabel, + #defaultFontSize { + margin-bottom: -80px !important; + } + #primaryBrowserLocale { + min-width: 20px !important; + } + + /* About:Preferences#Privacy */ + #contentBlockingHeader { + padding-left: 28px !important; + } + #trackingProtectionShield { + margin-inline-end: 0 !important; + margin-top: -34px !important; + max-height: 20px !important; + max-width: 20px !important; + height: 20px !important; + width: 20px !important; + } + #contentBlockingDescription { + font-size: 9pt !important; + } + #trackingProtectionExceptions { + padding-left: 0 !important; + padding-right: 0 !important; + max-width: 30px !important; + width: 30px !important; + } + #historyMode { + max-width: 235.5px !important; + width: 235.5px !important; + } + + /* About:Preferences#MoreFromMozilla */ + .simple .qr-code-box-title { + max-width: 235px !important; + width: 235px !important; + } + + } + +} + +@-moz-document +url("about:protections") { + + /* Apply this customization only on smaller screens */ + @media + (max-height: 300px), + (max-width: 700px) { + + /* About:Protections */ + #report-content { + margin: 0 !important; + padding: 50px !important; + max-width: 100vw !important; + width: 100vw !important; + } + #mobile-hanger { + display: none !important; + } + .body-wrapper { + grid-column-start: 1 !important; + grid-column-end: -1 !important; + } + #manage-protections, + #sign-up-for-monitor-link, + #save-passwords-button, + #get-proxy-extension-link { + grid-area: 2 / 1 / 2 / 6 !important; + } + .card-header .wrapper { + grid-row-gap: 8px !important; + } + .card:not(.has-logins) .wrapper div:nth-child(1) { + grid-column-end: -1 !important; + } + + } + +} + +@-moz-document +url("about:rights") { + + /* Apply this customization only on smaller screens */ + @media + (max-height: 300px), + (max-width: 700px) { + + /* About:Rights */ + .rights-header { + background-image: none !important; + padding-inline-end: unset !important; + } + + } + +}