From ad06da486870f5032bc74fd100f5fc4814106e1d Mon Sep 17 00:00:00 2001 From: "@user0" <> Date: Sun, 21 May 2023 09:50:32 +0200 Subject: [PATCH] =?UTF-8?q?Add=20@user0=E2=80=99s=20contributions=20as=20o?= =?UTF-8?q?f=202023-05-21?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/userChrome/alt-browser.css | 43 +++ src/userChrome/appMenu.css | 29 +- src/userChrome/browser.css | 10 + src/userChrome/color_variable_template.css | 289 +++++++++++++++--- src/userChrome/colors.css | 154 ++++++++++ src/userChrome/custom_rules.css | 74 +++++ src/userChrome/findbar.css | 15 +- .../hide_newtab_+_new-tab_buttons.css | 10 + src/userChrome/hide_tabs_scrollbuttons.css | 86 +++--- src/userChrome/iconized_main_menu.css | 98 +++--- src/userChrome/new-tab-button.css | 14 + src/userChrome/numbered_tabs.css | 42 ++- src/userChrome/popups.css | 17 +- src/userChrome/round_ui_items.css | 86 ++++-- src/userChrome/single_tab_mode.css | 21 ++ .../single_tab_mode_with_space_for_1_item.css | 20 ++ ...single_tab_mode_with_space_for_2_items.css | 20 ++ ...single_tab_mode_with_space_for_3_items.css | 20 ++ .../tab_close_button_always_on_hover.css | 12 +- src/userChrome/tab_counter.css | 57 ++++ src/userChrome/tabmenu.css | 45 +-- src/userChrome/tabs_fill_available_width.css | 11 +- src/userChrome/tabs_larger_min-width.css | 4 + src/userChrome/userChrome-desktop.css | 61 ++++ src/userChrome/userChrome-hybrid.css | 61 ++++ src/userChrome/userChrome-mobile.css | 61 ++++ 26 files changed, 1180 insertions(+), 180 deletions(-) create mode 100644 src/userChrome/alt-browser.css create mode 100644 src/userChrome/colors.css create mode 100644 src/userChrome/custom_rules.css create mode 100644 src/userChrome/hide_newtab_+_new-tab_buttons.css create mode 100644 src/userChrome/new-tab-button.css create mode 100644 src/userChrome/single_tab_mode.css create mode 100644 src/userChrome/single_tab_mode_with_space_for_1_item.css create mode 100644 src/userChrome/single_tab_mode_with_space_for_2_items.css create mode 100644 src/userChrome/single_tab_mode_with_space_for_3_items.css create mode 100644 src/userChrome/tab_counter.css create mode 100644 src/userChrome/tabs_larger_min-width.css create mode 100644 src/userChrome/userChrome-desktop.css create mode 100644 src/userChrome/userChrome-hybrid.css create mode 100644 src/userChrome/userChrome-mobile.css diff --git a/src/userChrome/alt-browser.css b/src/userChrome/alt-browser.css new file mode 100644 index 0000000..5de7edc --- /dev/null +++ b/src/userChrome/alt-browser.css @@ -0,0 +1,43 @@ +/* Copyright 2022 plata + * SPDX-License-Identifier: MPL-2.0 */ + +/* Move navigation bar to bottom */ +@media (max-width: 700px) { + #browser { + -moz-box-ordinal-group: 0 !important; + } + + /* 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; + } + + /* 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 menu popup spawn height */ + #appMenu-popup { + margin-bottom: 20px !important; + } + + /* Adjust all-tabs popup spawn height */ + #customizationui-widget-panel { + margin-bottom: 60px !important; + } + +} diff --git a/src/userChrome/appMenu.css b/src/userChrome/appMenu.css index 9d966b7..a1e9e38 100644 --- a/src/userChrome/appMenu.css +++ b/src/userChrome/appMenu.css @@ -7,13 +7,20 @@ * height. This is due to the position="bottomcenter topright" attribute in * the HTML, which we can't override via CSS. */ #appMenu-popup { - margin-top: -390px !important; - height: 310px; - max-height: 310px; + /*margin-top: -390px !important;*/ + margin-bottom: 62px !important; + padding-left: 10px !important; + padding-right: 10px !important; + /*height: 310px;*/ + /*max-height: 310px;*/ + height: 330px; + max-height: 330px; } #appMenu-protonMainView vbox.panel-subview-body { - height: 300px !important; - max-height: 300px !important; + /*height: 300px !important;*/ + /*max-height: 300px !important;*/ + height: 318px !important; + max-height: 318px !important; } #appMenu-multiView box.panel-viewstack:first-child { /* Use the whole space in the menu, instead of slowly increasing the @@ -42,16 +49,16 @@ * are over the FF in fullscreen) */ #appMenu-fxa-status2, /* FF login */ #appMenu-fxa-separator, /* FF login */ - #appMenu-new-window-button2, + /*#appMenu-new-window-button2,*/ #appMenu-protonMainView toolbarseparator, /* all separators */ - #appMenu-save-file-button2, /* Save file can be done from Print too */ + /*#appMenu-save-file-button2, /* Save file can be done from Print too */ #appMenu-fullscreen-button2, #appMenu-passwords-button, /* accessible from settings */ - #appMenu-extensions-themes-button, /* accessible from settings */ + /*#appMenu-extensions-themes-button, /* accessible from settings */ #appMenu-bookmarks-button, /* submenu */ - #appMenu-history-button, /* submenu */ - #appMenu-more-button2, /* submenu */ - #appMenu-help-button2, /* submenu */ + /*#appMenu-history-button, /* submenu */ + /*#appMenu-more-button2, /* submenu */ + /*#appMenu-help-button2, /* submenu */ .subviewbutton[shortcut]::after { /* menu shortcuts ("Ctrl+T" etc.) */ display: none !important; } diff --git a/src/userChrome/browser.css b/src/userChrome/browser.css index feafa8f..ef9e0ff 100644 --- a/src/userChrome/browser.css +++ b/src/userChrome/browser.css @@ -15,4 +15,14 @@ #TabsToolbar[inFullscreen] { 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; + } + } diff --git a/src/userChrome/color_variable_template.css b/src/userChrome/color_variable_template.css index d7d0f7c..2b790e7 100644 --- a/src/userChrome/color_variable_template.css +++ b/src/userChrome/color_variable_template.css @@ -2,47 +2,256 @@ 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: olive !important; - --arrowpanel-border-color: green !important; - --arrowpanel-color: cyan !important; - --arrowpanel-dimmed: rgba(0,0,0,0.4) !important; - /* window and toolbar background */ - --lwt-accent-color: red !important; - --lwt-accent-color-inactive: green !important; - --toolbar-bgcolor: rgba(0,0,0,0.4) !important; - /* tabs with system theme - text is not controlled by variable */ - --tab-selected-bgcolor: powderblue !important; - /* tabs with any other theme */ - --lwt-text-color: cyan !important; - --lwt-selected-tab-background-color: cornflowerblue !important; - /* toolbar area */ - --toolbarbutton-icon-fill: white !important; - --lwt-toolbarbutton-hover-background: orange !important; - --lwt-toolbarbutton-active-background: red !important; - /* urlbar */ - --toolbar-field-border-color: green !important; - --toolbar-field-focus-border-color: pink !important; - --urlbar-popup-url-color: cyan !important; - /* urlbar Firefox < 92 */ - --lwt-toolbar-field-background-color: olive !important; - --lwt-toolbar-field-focus: grey !important; - --lwt-toolbar-field-color: red !important; - --lwt-toolbar-field-focus-color: white !important; - /* urlbar Firefox 92+ */ - --toolbar-field-background-color: olive !important; - --toolbar-field-focus-background-color: grey !important; - --toolbar-field-color: red !important; - --toolbar-field-focus-color: white !important; - /* sidebar - note the sidebar-box rule for the header-area */ - --lwt-sidebar-background-color: purple !important; - --lwt-sidebar-text-color: yellow !important; +: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: cyan !important; } + 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: white !important; } +#tabbrowser-tabs { + --lwt-tab-line-color: none !important; +} + /* the header-area of sidebar needs this to work */ -#sidebar-box{ --sidebar-background-color: purple !important; } +#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 new file mode 100644 index 0000000..165a404 --- /dev/null +++ b/src/userChrome/colors.css @@ -0,0 +1,154 @@ +/* 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 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 new file mode 100644 index 0000000..a4076c1 --- /dev/null +++ b/src/userChrome/custom_rules.css @@ -0,0 +1,74 @@ +/* custom rules */ + +/* Apply this customization only on smaller screens */ +@media (max-width: 700px) { + + /* Remove Tab Manager button + (overridden by tab_counter.css) */ + #alltabs-button { + display: none !important; + } + + /* Remove tab overflow indicators */ + spacer[part=overflow-start-indicator], + spacer[part=overflow-end-indicator] { + display: none !important; + } + + /* Remove spacers on left and right of main tab view */ + #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] { + margin-inline-start: 0px !important; + } + .titlebar-spacer[type="post-tabs"] { + display: none !important; + } + + /* Remove items from urlbar */ + #tracking-protection-icon-container, + #identity-permission-box, + #userContext-indicator, + #page-action-buttons { + display: none !important; + } + + /* Urlbar font resizing */ + #urlbar-input { + font-size: 10pt !important; + } + #urlbar[focused] #urlbar-input { + font-size: calc(var(--urlbar-height) - 9px) !important; + } + + /* 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/findbar.css b/src/userChrome/findbar.css index 96805d5..462348a 100644 --- a/src/userChrome/findbar.css +++ b/src/userChrome/findbar.css @@ -6,7 +6,8 @@ display: flex; flex-direction: row; flex-wrap: wrap; - height: 150px !important; + /*height: 150px !important;*/ + height: 40px !important; } .findbar-textbox { @@ -19,4 +20,16 @@ * them with the finger. */ padding: 10px 0px; } + + /* Save space */ + .findbar-highlight, + .findbar-case-sensitive, + .findbar-match-diacritics, + .findbar-entire-word, + /*.found-matches,*/ + .findbar-find-status, + .find-status-icon { + display: none; + } + } diff --git a/src/userChrome/hide_newtab_+_new-tab_buttons.css b/src/userChrome/hide_newtab_+_new-tab_buttons.css new file mode 100644 index 0000000..7aec6ce --- /dev/null +++ b/src/userChrome/hide_newtab_+_new-tab_buttons.css @@ -0,0 +1,10 @@ +/* Apply this customization only on smaller screens */ +@media (max-width: 700px) { + + /* Hide Newtab and New-tab buttons */ + #new-tab-button, + #tabs-newtab-button { + display: none !important; + } + +} diff --git a/src/userChrome/hide_tabs_scrollbuttons.css b/src/userChrome/hide_tabs_scrollbuttons.css index 9c65593..5612d60 100644 --- a/src/userChrome/hide_tabs_scrollbuttons.css +++ b/src/userChrome/hide_tabs_scrollbuttons.css @@ -3,63 +3,65 @@ See the above repository for updates as well as full license text. */ /* This should hide tabs scrollbuttons in a manner that preserves the ability to move tab strip when reordering tabs */ -#tabbrowser-arrowscrollbox{ - --uc-compat-scrollbutton-margin: 1px; /* compatibility for non_floating_sharp_tabs.css */ - --uc-scrollbutton-up-background: linear-gradient(-90deg,transparent,var(--lwt-accent-color) 35%); - --uc-scrollbutton-down-background: linear-gradient(90deg,transparent,var(--lwt-accent-color) 35%); +#tabbrowser-arrowscrollbox { + --uc-compat-scrollbutton-margin: 1px; /* compatibility for non_floating_sharp_tabs.css */ + --uc-scrollbutton-up-background: linear-gradient(-90deg,transparent,var(--lwt-accent-color) 35%); + --uc-scrollbutton-down-background: linear-gradient(90deg,transparent,var(--lwt-accent-color) 35%); } -#tabbrowser-tabs:not([movingtab]){ - --uc-scroll-visibility: hidden; +#tabbrowser-tabs:not([movingtab]) { + --uc-scroll-visibility: hidden; } -#tabbrowser-tabs[overflow]{ - --uc-scrollbox-base-margin: -31px; - --uc-scrollbox-margin: calc(var(--uc-scrollbox-base-margin) + var(--tab-shadow-max-size)); +#tabbrowser-tabs[overflow] { + --uc-scrollbox-base-margin: -31px; + --uc-scrollbox-margin: calc(var(--uc-scrollbox-base-margin) + var(--tab-shadow-max-size)); } -:root[uidensity="compact"] #tabbrowser-tabs[overflow]{ - --uc-scrollbox-base-margin: -25px; +:root[uidensity="compact"] #tabbrowser-tabs[overflow] { + --uc-scrollbox-base-margin: -25px; } -#tabbrowser-arrowscrollbox:not([scrolledtostart="true"]){ - --uc-scrollbox-overflow-start-margin: -1px; +#tabbrowser-arrowscrollbox:not([scrolledtostart="true"]) { + --uc-scrollbox-overflow-start-margin: -1px; } -#scrollbutton-up ~ spacer{ - visibility: visible !important; +#scrollbutton-up ~ spacer { + visibility: visible !important; } -spacer[part="overflow-start-indicator"]{ - -moz-box-ordinal-group: 0; /* Fx < 112 compatibility */ - order: -1; - margin-inline-start: var(--uc-scrollbox-overflow-start-margin,-0.5px) !important; +spacer[part="overflow-start-indicator"] { + -moz-box-ordinal-group: 0; /* Fx < 112 compatibility */ + order: -1; + margin-inline-start: var(--uc-scrollbox-overflow-start-margin,-0.5px) !important; } -spacer[part="overflow-end-indicator"]{ - -moz-box-ordinal-group: 2; /* Fx < 112 compatibility */ - order: 2; +spacer[part="overflow-end-indicator"] { + -moz-box-ordinal-group: 2; /* Fx < 112 compatibility */ + order: 2; } #scrollbutton-down[disabled="true"] > .toolbarbutton-icon, -#scrollbutton-up[disabled="true"] > .toolbarbutton-icon{ - opacity: 0.4; -} +#scrollbutton-up[disabled="true"] > .toolbarbutton-icon { + opacity: 0.4; +} #scrollbutton-up, -#scrollbutton-down{ - position: relative; - z-index: 1; - visibility: var(--uc-scroll-visibility,visible); - background-clip: border-box !important; - background-origin: initial !important; - background-repeat: no-repeat !important; - opacity: 1 !important; +#scrollbutton-down { + position: relative; + z-index: 1; + visibility: var(--uc-scroll-visibility,visible); + background-clip: border-box !important; + background-origin: initial !important; + background-repeat: no-repeat !important; + opacity: 1 !important; } -#scrollbutton-up{ - margin-inline-start: calc(0px - var(--tab-shadow-max-size,0px)) !important; - background-image: var(--uc-scrollbutton-up-background); +#scrollbutton-up { + margin-inline-start: calc(0px - var(--tab-shadow-max-size,0px)) !important; + background-image: var(--uc-scrollbutton-up-background); } -#scrollbutton-down{ - margin-inline-end: calc(0px - var(--tab-shadow-max-size,0px)) !important; - background-image: var(--uc-scrollbutton-down-background); +#scrollbutton-down { + margin-inline-end: calc(0px - var(--tab-shadow-max-size,0px)) !important; + background-image: var(--uc-scrollbutton-down-background); +} +.scrollbox-clip { + margin-inline: var(--uc-scrollbox-margin,0px); } -.scrollbox-clip{ margin-inline: var(--uc-scrollbox-margin,0px); } /* Need to reset some things for other scrollboxes */ -.menupopup-arrowscrollbox{ - --tab-shadow-max-size: 0; +.menupopup-arrowscrollbox { + --tab-shadow-max-size: 0; } diff --git a/src/userChrome/iconized_main_menu.css b/src/userChrome/iconized_main_menu.css index d419a90..990516f 100644 --- a/src/userChrome/iconized_main_menu.css +++ b/src/userChrome/iconized_main_menu.css @@ -3,43 +3,73 @@ See the above repository for updates as well as full license text. */ /* Adds icons to main menu items which were removed in Proton */ #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-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") } /* 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 { + display: flex; + content: ""; + width: 16px; + height: 16px; + 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-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; -} \ No newline at end of file +#appMenu-find-button2 ~ * { + -moz-box-ordinal-group: 2; /* Fx < 112 compatibility */ + order: 2; +} diff --git a/src/userChrome/new-tab-button.css b/src/userChrome/new-tab-button.css new file mode 100644 index 0000000..5b50563 --- /dev/null +++ b/src/userChrome/new-tab-button.css @@ -0,0 +1,14 @@ +/* Apply this customization only on smaller screens */ +@media (max-width: 700px) { + + /* Hide non-overflow Newtab button */ + #tabs-newtab-button { + display: none !important; + } + + /* Display overflow New-tab button by default */ + #new-tab-button { + display: initial !important; + } + +} diff --git a/src/userChrome/numbered_tabs.css b/src/userChrome/numbered_tabs.css index 0710e7d..33852a9 100644 --- a/src/userChrome/numbered_tabs.css +++ b/src/userChrome/numbered_tabs.css @@ -1,7 +1,43 @@ /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/numbered_tabs.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ -/* Show a number before tab text*/ +/* Apply this customization only on smaller screens */ +@media (max-width: 700px) { -.tabbrowser-tab:first-child{ counter-reset: nth-tab 0 } /* Change to -1 for 0-indexing */ -.tab-text::before{ content: counter(nth-tab) " "; counter-increment: nth-tab } \ No newline at end of file + /* 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 */ + #tabbrowser-tabs { + counter-reset: nth-tab 0; /* Change to -1 for 0-indexing */ + } + .tabbrowser-tab:not([pinned]) .tab-content::after { + content: counter(nth-tab) " "; + counter-increment: nth-tab; + position: absolute !important; + position: fixed; + right: 24px; + top: 12px; + width: 0 !important; + } + + /* Shorten tab content width so that tab number is more visible */ + .tabbrowser-tab[selected]:not(:hover,[pinned]) > .tab-stack > .tab-content { + width: calc(100vw - 150px) !important; + } + + /* Hide tab number when hovering so that tab close button is clickable */ + .tabbrowser-tab:not([pinned]):hover .tab-content::after { + visibility: hidden !important; + } + + /* Adjust tab close button opacity, border, and shape */ + .tab-close-button { + position: absolute !important; + margin-right: -8px !important; + opacity: 0.5 !important; + border: 2px solid white !important; + height: 36px !important; + width: 36px !important; + } + +} diff --git a/src/userChrome/popups.css b/src/userChrome/popups.css index 09c253b..eb40c72 100644 --- a/src/userChrome/popups.css +++ b/src/userChrome/popups.css @@ -6,8 +6,10 @@ * the notifications (like the one for installing addons) displayed * on-screen. */ #notification-popup { - margin-left: -200px !important; + /*margin-left: -200px !important;*/ margin-top: -500px !important; + height: calc(100vh - 250px) !important; + max-width: 100vw !important; } #downloadsPanel-mainView { @@ -42,8 +44,8 @@ max-width: 100vw !important; } - /* fix the protections popup gettting - * too wide, making controls unaccessible */ + /* fix the protections popup getting + * too wide, making controls naccessible */ #protections-popup-mainView { min-width: 100vw !important; max-width: 100vw !important; @@ -57,4 +59,13 @@ #widget-overflow-mainView { height: calc(100vh - 80px) !important; } + + /* Fix widget overflow to fit ublock0_raymondhill_net-browser-action */ + #widget-overflow { + padding-bottom: 25px !important; + } + #widget-overflow-mainView { + height: 357px !important; + } + } diff --git a/src/userChrome/round_ui_items.css b/src/userChrome/round_ui_items.css index 2ecbab6..d6e760e 100644 --- a/src/userChrome/round_ui_items.css +++ b/src/userChrome/round_ui_items.css @@ -3,10 +3,13 @@ See the above repository for updates as well as full license text. */ /* Make bunch of things in the main UI round */ -:root{ --toolbarbutton-border-radius: 24px !important } +:root { + --toolbarbutton-border-radius: 12px !important; + --tab-border-radius: 14px !important; +} #urlbar-input-container > box:hover, #urlbar-input-container > box[open], -#main-menubar > menu, +#main-menubar > menu, .titlebar-button:hover, #scrollbutton-up, #scrollbutton-down, @@ -19,29 +22,74 @@ See the above repository for updates as well as full license text. */ .subviewbutton-back, .toolbaritem-combined-buttons > toolbarbutton, #PopupSearchAutoComplete, -menupopup{ border-radius: 18px } +menupopup { + border-radius: 10px; +} button, -.tab-background{ border-radius: 30px !important; } +.tab-background { + border-radius: 14px !important; +} -.panel-arrowcontent{ margin-inline-end: 0 !important; } -.panel-arrow{ margin-inline: 17px !important; } +.panel-arrowcontent { + margin-inline-end: 0 !important; +} +.panel-arrow { + margin-inline: 17px !important; +} -menupopup{ -moz-appearance: none !important; overflow: -moz-hidden-unscrollable !important; } +menupopup { + -moz-appearance: none !important; + overflow: -moz-hidden-unscrollable !important; +} .tabbrowser-tab[selected]::after, -.tabbrowser-tab[beforeselected-visible]::after{ border-color: transparent !important; } - -#nav-bar{ box-shadow: none !important; margin-top: 3px } -.tab-line{ display: none } - -.tab-background[selected]{ - border-top-width: 2px !important; - border-top-color: var(--lwt-tab-line-color) !important; +.tabbrowser-tab[beforeselected-visible]::after { + border-color: transparent !important; } -.tabbrowser-tab[selected]{ z-index: auto !important; } -.urlbar-icon, -toolbar toolbarbutton:not(#back-button):not(.bookmark-item):not(.titlebar-button) > .toolbarbutton-icon{ border-radius: 0px !important; clip-path: circle() } +#nav-bar { + box-shadow: none !important; + margin-top: 3px; +} +.tab-line { + display: none; +} -menugroup:hover > menuitem{ clip-path: circle() } \ No newline at end of file +.tab-background[selected] { + border-top-width: 3px !important; + border-bottom-width: 3px !important; + border-left-width: 3px !important; + border-right-width: 3px !important; + border-radius: 14px !important; +} +.tabbrowser-tab[selected] { + z-index: auto !important; +} + +/*.urlbar-icon, +toolbar toolbarbutton:not(#back-button):not(.bookmark-item):not(.titlebar-button) > .toolbarbutton-icon { + border-radius: 12px !important; +}*/ + +menugroup:hover > menuitem { + border-radius: 16px !important; +} + +/* Urlbar and searchbar shape */ +#urlbar, +#searchbar, +#urlbar-input, +#urlbar-input-container { + border-radius: 12px !important; +} +#urlbar-background { + border: none !important; + border-radius: 12px !important; +} + +/* Findbar shape */ +input.findbar-textbox { + border-radius: 9px !important; + font-size: 14px !important; +} diff --git a/src/userChrome/single_tab_mode.css b/src/userChrome/single_tab_mode.css new file mode 100644 index 0000000..5740de2 --- /dev/null +++ b/src/userChrome/single_tab_mode.css @@ -0,0 +1,21 @@ +/* Apply this customization only on smaller screens */ +@media (max-width: 700px) { + + /* Hide unpinned inactive tabs */ + .tabbrowser-tab:not([pinned]):not([selected]) { + visibility: hidden !important; + min-width: 0 !important; + } + + /* Expand unpinned active tab */ + .tabbrowser-tab:not([pinned])[selected] { + min-width: 100vw !important; + } + + /* Hide Newtab and New-tab buttons */ + #new-tab-button, + #tabs-newtab-button { + display: none !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 new file mode 100644 index 0000000..56366f4 --- /dev/null +++ b/src/userChrome/single_tab_mode_with_space_for_1_item.css @@ -0,0 +1,20 @@ +/* Apply this customization only on smaller screens */ +@media (max-width: 700px) { + + /* Hide unpinned inactive tabs */ + .tabbrowser-tab:not([pinned]):not([selected]) { + visibility: hidden !important; + min-width: 0 !important; + } + + /* Expand first unpinned tab */ + #tabbrowser-tabs:not([haspinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] { + max-width: 100vw !important; + } + + /* Expand unpinned active tab */ + .tabbrowser-tab:not([pinned])[selected] { + min-width: calc(100vw - 40px) !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 new file mode 100644 index 0000000..52086e1 --- /dev/null +++ b/src/userChrome/single_tab_mode_with_space_for_2_items.css @@ -0,0 +1,20 @@ +/* Apply this customization only on smaller screens */ +@media (max-width: 700px) { + + /* Hide unpinned inactive tabs */ + .tabbrowser-tab:not([pinned]):not([selected]) { + visibility: hidden !important; + min-width: 0 !important; + } + + /* Expand first unpinned tab */ + #tabbrowser-tabs:not([haspinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] { + max-width: 100vw !important; + } + + /* Expand unpinned active tab */ + .tabbrowser-tab:not([pinned])[selected] { + min-width: calc(100vw - 80px) !important; + } + +} diff --git a/src/userChrome/single_tab_mode_with_space_for_3_items.css b/src/userChrome/single_tab_mode_with_space_for_3_items.css new file mode 100644 index 0000000..32dec54 --- /dev/null +++ b/src/userChrome/single_tab_mode_with_space_for_3_items.css @@ -0,0 +1,20 @@ +/* Apply this customization only on smaller screens */ +@media (max-width: 700px) { + + /* Hide unpinned inactive tabs */ + .tabbrowser-tab:not([pinned]):not([selected]) { + visibility: hidden !important; + min-width: 0 !important; + } + + /* Expand first unpinned tab */ + #tabbrowser-tabs:not([haspinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] { + max-width: 100vw !important; + } + + /* Expand unpinned active tab */ + .tabbrowser-tab:not([pinned])[selected] { + min-width: calc(100vw - 120px) !important; + } + +} diff --git a/src/userChrome/tab_close_button_always_on_hover.css b/src/userChrome/tab_close_button_always_on_hover.css index 22add02..d80bd77 100644 --- a/src/userChrome/tab_close_button_always_on_hover.css +++ b/src/userChrome/tab_close_button_always_on_hover.css @@ -2,10 +2,10 @@ See the above repository for updates as well as full license text. */ /* Always show tab close button on hover and never otherwise */ -.tabbrowser-tab .tab-close-button{ - display:none; +.tabbrowser-tab .tab-close-button { + display: none; +} +.tabbrowser-tab:not([pinned]):hover .tab-close-button { + display: flex !important; + align-items: center; } -.tabbrowser-tab:not([pinned]):hover .tab-close-button{ - display: flex !important; - align-items: center; -} \ No newline at end of file diff --git a/src/userChrome/tab_counter.css b/src/userChrome/tab_counter.css new file mode 100644 index 0000000..7d853d2 --- /dev/null +++ b/src/userChrome/tab_counter.css @@ -0,0 +1,57 @@ +/* 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 (v) tab counter */ + #TabsToolbar-customization-target { + counter-reset: tabCount; + } + .tabbrowser-tab:not([pinned]) { + 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 { + 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; + } + +} diff --git a/src/userChrome/tabmenu.css b/src/userChrome/tabmenu.css index ec6d0ed..d71053a 100644 --- a/src/userChrome/tabmenu.css +++ b/src/userChrome/tabmenu.css @@ -6,7 +6,7 @@ * the tab bar for the private-browsing-indicator (that mask icon). This * gives the tab bar a consistent width in both the regular and the private * browsing mode, so the increased width hack below looks good in both. */ - #titlebar { + /*#titlebar { padding-right: 30px; } hbox.private-browsing-indicator { @@ -14,24 +14,25 @@ right: 0px; bottom: 50px; display: block; - } + }*/ /* Increase tab width, to have more space for displaying the title of the * website and to make the "all tabs" button show up. */ - #tabbrowser-tabs { + /*#tabbrowser-tabs { --tab-min-width: calc(100vw - 116px) !important; - } + }*/ /* Rotate the arrow on the "all tabs" button to point upwards, since the * tabs and searchbar were moved to the bottom. */ - #alltabs-button { + /*#alltabs-button { transform: rotate(180deg) !important; - } + }*/ /* All tabs menu: hide scroll buttons */ - #scrollbutton-up, #scrollbutton-down { + /*#scrollbutton-up, + #scrollbutton-down { display: none !important; - } + }*/ /* All tabs menu: hide the search and the separator below it. */ #allTabsMenu-searchTabs, @@ -45,27 +46,32 @@ /* Further up than appmenu, because the "all tabs" button that spawns * this menu is above the hamburger button that spawns the regular * menu. */ - margin-top: -360px !important; - height: 320px; - max-height: 320px; + /*margin-top: -360px !important;*/ + margin-bottom: 15px !important; + padding-left: 10px !important; + padding-right: 10px !important; + /*height: 320px;*/ + /*max-height: 320px;*/ + height: 333px; + max-height: 333px; } - #allTabsMenu-allTabsView vbox.panel-subview-body { + /*#allTabsMenu-allTabsView vbox.panel-subview-body { /* Use the whole height */ - height: 300px !important; - max-height: 300px !important; + /*height: 300px !important; + /*max-height: 300px !important; /* When messing around with tabs, it gets into a state where it does * not use the whole height anymore, it becomes a tiny window. Removing * this attribute fixes it. */ - -moz-box-flex: initial !important; - } + /*-moz-box-flex: initial !important; + }*/ - #allTabsMenu-allTabsView vbox.panel-subview-body:first-child { + /*#allTabsMenu-allTabsView vbox.panel-subview-body:first-child { /* the allTabsMenu has a vbox.panel-subview-body inside another one. * With -moz-box-flex: initial, it will show a scroll bar in each, but * we only want one scrollbar. */ - overflow-y: hidden !important; - } + /*overflow-y: hidden !important; + }*/ #allTabsMenu-multiView box.panel-viewstack { /* Use the whole height */ @@ -75,6 +81,7 @@ #allTabsMenu-allTabsViewTabs { /* Make sure tabs with long titles don't exceed the all tabs menu */ + width: 0; max-width: calc(100vw - 20px); } } diff --git a/src/userChrome/tabs_fill_available_width.css b/src/userChrome/tabs_fill_available_width.css index f7a3094..cc6fe4b 100644 --- a/src/userChrome/tabs_fill_available_width.css +++ b/src/userChrome/tabs_fill_available_width.css @@ -1,5 +1,12 @@ /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_fill_available_width.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ -/* Why 100vw? Tab closing requires width animation to end and "none" can't be animated */ -.tabbrowser-tab[fadein]:not([style^="max-width"]){ max-width: 100vw !important } \ No newline at end of file +/* Apply this customization only on smaller screens */ +@media (max-width: 700px) { + + /* Why 100vw? Tab closing requires width animation to end and "none" can't be animated */ + .tabbrowser-tab[fadein]:not([style^="max-width"]) { + max-width: 100vw !important; + } + +} diff --git a/src/userChrome/tabs_larger_min-width.css b/src/userChrome/tabs_larger_min-width.css new file mode 100644 index 0000000..56c91d6 --- /dev/null +++ b/src/userChrome/tabs_larger_min-width.css @@ -0,0 +1,4 @@ +/* Tab min-width resizing */ +#tabbrowser-tabs .tabbrowser-tab[fadein]:not([pinned]) { + min-width: 90px !important; +} diff --git a/src/userChrome/userChrome-desktop.css b/src/userChrome/userChrome-desktop.css new file mode 100644 index 0000000..f711893 --- /dev/null +++ b/src/userChrome/userChrome-desktop.css @@ -0,0 +1,61 @@ +/* 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.before-ff-108.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 "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 "single_tab_mode_with_space_for_3_items.css"; + +@import "hide_newtab_+_new-tab_buttons.css"; + +@import "numbered_tabs.css"; + +@import "tab_counter.css"; +*/ +@import "new-tab-button.css"; + +@import "tabs_larger_min-width.css"; + +@import "tabs_fill_available_width.css"; diff --git a/src/userChrome/userChrome-hybrid.css b/src/userChrome/userChrome-hybrid.css new file mode 100644 index 0000000..62e591d --- /dev/null +++ b/src/userChrome/userChrome-hybrid.css @@ -0,0 +1,61 @@ +/* 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.before-ff-108.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 "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 "single_tab_mode_with_space_for_3_items.css"; +*/ +@import "hide_newtab_+_new-tab_buttons.css"; +/* +@import "numbered_tabs.css"; +*/ +@import "tab_counter.css"; +/* +@import "new-tab-button.css"; +*/ +@import "tabs_larger_min-width.css"; + +@import "tabs_fill_available_width.css"; diff --git a/src/userChrome/userChrome-mobile.css b/src/userChrome/userChrome-mobile.css new file mode 100644 index 0000000..92ca4a9 --- /dev/null +++ b/src/userChrome/userChrome-mobile.css @@ -0,0 +1,61 @@ +/* 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.before-ff-108.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 "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 "single_tab_mode_with_space_for_3_items.css"; + +@import "hide_newtab_+_new-tab_buttons.css"; +*/ +@import "numbered_tabs.css"; + +@import "tab_counter.css"; +/* +@import "new-tab-button.css"; + +@import "tabs_larger_min-width.css"; + +@import "tabs_fill_available_width.css"; +*/