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";
+*/