From 4f58859466fa18d31ead2a1cc3734c985c13f003 Mon Sep 17 00:00:00 2001
From: "@user0" <@user0>
Date: Sat, 30 Sep 2023 20:41:00 +0200
Subject: [PATCH] =?UTF-8?q?Add=20@user0=E2=80=99s=20contributions=20as=20o?=
 =?UTF-8?q?f=202023-09-30?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/userChrome/alt-browser.css                | 24 +++++--
 .../borderless_transparent_active_tab.css     | 12 ++++
 src/userChrome/browser.css                    | 19 +++--
 src/userChrome/colorful_inactive_tabs.css     | 31 ++++++++
 src/userChrome/colors.css                     |  5 +-
 src/userChrome/custom_rules.css               | 11 +--
 src/userChrome/glow.css                       | 44 ++++++++++++
 .../hide_newtab_+_new-tab_buttons.css         |  3 +
 src/userChrome/hide_tab_counter.css           | 12 ++++
 src/userChrome/new-tab-button.css             |  3 +
 src/userChrome/numbered_tabs.css              | 11 ++-
 src/userChrome/popups.css                     |  5 +-
 src/userChrome/single_tab_mode.css            | 58 ++++++++++++---
 .../single_tab_mode_with_space_for_1_item.css | 31 +++++---
 ...single_tab_mode_with_space_for_2_items.css | 31 +++++---
 ...single_tab_mode_with_space_for_3_items.css | 25 -------
 src/userChrome/tab_animated_active_border.css | 59 ++++++++-------
 src/userChrome/tab_counter.css                |  7 +-
 src/userChrome/tabmenu.css                    | 10 +--
 src/userChrome/tabs_larger_min-width.css      |  7 +-
 src/userChrome/true_mobile_mode.css           | 49 +++++++++++++
 src/userChrome/userChrome-desktop.css         | 21 ++++--
 src/userChrome/userChrome-hybrid.css          | 21 ++++--
 .../userChrome-mobile+color+glow+rainbow.css  | 71 ++++++++++++++++++
 src/userChrome/userChrome-mobile.css          | 27 ++++---
 .../userChrome-true-mobile+color+glow.css     | 72 +++++++++++++++++++
 .../userChrome-true-mobile+color.css          | 72 +++++++++++++++++++
 src/userChrome/userChrome-true-mobile.css     | 72 +++++++++++++++++++
 src/userContent/theme-color-1.css             |  3 +
 src/userContent/theme-color-2.css             |  3 +
 src/userContent/theme-dark.css                |  3 +
 src/userContent/theme-light.css               |  3 +
 32 files changed, 696 insertions(+), 129 deletions(-)
 create mode 100644 src/userChrome/borderless_transparent_active_tab.css
 create mode 100644 src/userChrome/colorful_inactive_tabs.css
 create mode 100644 src/userChrome/glow.css
 create mode 100644 src/userChrome/hide_tab_counter.css
 delete mode 100644 src/userChrome/single_tab_mode_with_space_for_3_items.css
 create mode 100644 src/userChrome/true_mobile_mode.css
 create mode 100644 src/userChrome/userChrome-mobile+color+glow+rainbow.css
 create mode 100644 src/userChrome/userChrome-true-mobile+color+glow.css
 create mode 100644 src/userChrome/userChrome-true-mobile+color.css
 create mode 100644 src/userChrome/userChrome-true-mobile.css

diff --git a/src/userChrome/alt-browser.css b/src/userChrome/alt-browser.css
index dc6aade..abfe616 100644
--- a/src/userChrome/alt-browser.css
+++ b/src/userChrome/alt-browser.css
@@ -1,10 +1,11 @@
 /* Copyright 2022 plata
  * SPDX-License-Identifier: MPL-2.0 */
 
-/* Move navigation bar to bottom */
 @media (max-width: 700px) {
+    /* Move navigation bar to bottom */
     #browser {
-        -moz-box-ordinal-group: 0 !important;
+        -moz-box-ordinal-group: 0 !important; /* before FF 113 */
+        order: -1 !important; /* since FF 113 */
     }
 
     /* Hide navigation bar in kiosk mode (to prevent bug #29). We can assume FF
@@ -16,6 +17,11 @@
         display: none;
     }
 
+    /* Hide minimize/maximize/close buttons */
+    .titlebar-buttonbox-container {
+        display: none;
+    }
+
     /* https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/toolbars_below_content.css  */
     #TabsToolbar > .titlebar-buttonbox-container {
       display: none;
@@ -30,23 +36,29 @@
         order: 2;
     }
 
-    /* Adjust Bookmarks Menu Popup spawn height and fix flickering */
+    /* Adjust Bookmarks Menu (★) spawn height and fix flickering */
     #BMB_bookmarksPopup {
         margin-bottom: 22px !important;
         width: 100vw;
     }
 
-    /* Adjust Widget Overflow spawn height */
+    /* Adjust Unified Extensions Menu spawn height */
+    #unified-extensions-view {
+        margin-top: -44px !important;
+        margin-bottom: -44px !important;
+    }
+
+    /* Adjust Widget Overflow Menu (≫) spawn height */
     #widget-overflow {
         padding-bottom: 30px !important;
     }
 
-    /* Adjust App Menu Popup spawn height */
+    /* Adjust Main App Menu (≡) spawn height */
     #appMenu-popup {
         margin-bottom: 26px !important;
     }
 
-    /* Adjust All-Tabs Popup spawn height */
+    /* Adjust Tab Manager Menu spawn height */
     #customizationui-widget-panel {
         margin-bottom: 66px !important;
     }
diff --git a/src/userChrome/borderless_transparent_active_tab.css b/src/userChrome/borderless_transparent_active_tab.css
new file mode 100644
index 0000000..3643739
--- /dev/null
+++ b/src/userChrome/borderless_transparent_active_tab.css
@@ -0,0 +1,12 @@
+/* Copyright 2023 user0
+ * SPDX-License-Identifier: MPL-2.0 */
+
+/* Tab color */
+.tab-background {
+    background-color: transparent !important;
+}
+
+/* Tab border */
+.tab-background[selected] {
+    border: 0 transparent !important;
+}
diff --git a/src/userChrome/browser.css b/src/userChrome/browser.css
index 28cfcb2..17d153c 100644
--- a/src/userChrome/browser.css
+++ b/src/userChrome/browser.css
@@ -17,6 +17,11 @@
         display: none;
     }
 
+    /* Hide minimize/maximize/close buttons */
+    .titlebar-buttonbox-container {
+        display: none;
+    }
+
     /* https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/toolbars_below_content.css  */
     #TabsToolbar > .titlebar-buttonbox-container {
       display: none;
@@ -26,23 +31,29 @@
       max-height: unset !important;
     }
 
-    /* Adjust Bookmarks Menu Popup spawn height and fix flickering */
+    /* Adjust Bookmarks Menu (★) spawn height and fix flickering */
     #BMB_bookmarksPopup {
         margin-bottom: 52px !important;
         width: 100vw;
     }
 
-    /* Adjust Widget Overflow spawn height */
+    /* Adjust Unified Extensions Menu spawn height */
+    #unified-extensions-view {
+        margin-top: -44px !important;
+        margin-bottom: -44px !important;
+    }
+
+    /* Adjust Widget Overflow Menu (≫) spawn height */
     #widget-overflow {
         padding-bottom: 60px !important;
     }
 
-    /* Adjust App Menu Popup spawn height */
+    /* Adjust Main App Menu (≡) spawn height */
     #appMenu-popup {
         margin-bottom: 56px !important;
     }
 
-    /* Adjust All-Tabs Popup spawn height */
+    /* Adjust Tab Manager Menu spawn height */
     #customizationui-widget-panel {
         margin-bottom: 20px !important;
     }
diff --git a/src/userChrome/colorful_inactive_tabs.css b/src/userChrome/colorful_inactive_tabs.css
new file mode 100644
index 0000000..cda498c
--- /dev/null
+++ b/src/userChrome/colorful_inactive_tabs.css
@@ -0,0 +1,31 @@
+/* Copyright 2023 user0
+ * SPDX-License-Identifier: MPL-2.0 */
+
+/* Inactive tab color */
+.tabbrowser-tab:not(:hover,[pinned], [selected]) > .tab-stack > .tab-background {
+    background-color: var(--lwt-selected-tab-background-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 pinned tab icon color */
+.tab-icon-image[pinned]:not([selected]) {
+    color: var(--lwt-accent-color) !important;
+}
+
+/* Inactive tab text and close button (x) color */
+.tab-text:not([pinned]):not([selected]),
+.tab-icon-image:not([pinned]):not([selected]),
+.tab-close-button:not([pinned]):not([selected]) {
+    color: var(--lwt-text-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-accent-color) !important;
+}
diff --git a/src/userChrome/colors.css b/src/userChrome/colors.css
index 165a404..f1eaa35 100644
--- a/src/userChrome/colors.css
+++ b/src/userChrome/colors.css
@@ -1,3 +1,6 @@
+/* Copyright 2023 user0
+ * SPDX-License-Identifier: MPL-2.0 */
+
 /* Various items color */
 arrowscrollbox,
 findbar,
@@ -115,7 +118,7 @@ tooltip,
         color: var(--lwt-text-color) !important;
 }
 
-/* Main menu button (≡) color on hover */
+/* Main App Menu button (≡) color on hover */
 .subviewbutton:hover {
     background-color: var(--arrowpanel-color) !important;
     color: var(--lwt-text-color) !important;
diff --git a/src/userChrome/custom_rules.css b/src/userChrome/custom_rules.css
index a4076c1..c463f1d 100644
--- a/src/userChrome/custom_rules.css
+++ b/src/userChrome/custom_rules.css
@@ -1,11 +1,11 @@
-/* custom rules */
+/* Copyright 2023 user0
+ * SPDX-License-Identifier: MPL-2.0 */
 
 /* Apply this customization only on smaller screens */
 @media (max-width: 700px) {
 
-    /* Remove Tab Manager button
-        (overridden by tab_counter.css) */
-    #alltabs-button {
+    /* Remove Fullscreen popup */
+    .pointerlockfswarning {
         display: none !important;
     }
 
@@ -27,7 +27,8 @@
     #tracking-protection-icon-container,
     #identity-permission-box,
     #userContext-indicator,
-    #page-action-buttons {
+    /*#page-action-buttons,*/
+    #pageActionButton {
         display: none !important;
     }
 
diff --git a/src/userChrome/glow.css b/src/userChrome/glow.css
new file mode 100644
index 0000000..e0e41c6
--- /dev/null
+++ b/src/userChrome/glow.css
@@ -0,0 +1,44 @@
+/* Copyright 2023 user0
+ * SPDX-License-Identifier: MPL-2.0 */
+
+/* Inactive tab glow on hover */
+.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected]) {
+    filter: drop-shadow(0 0 2px var(--uc-icon-glow-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-primary));
+}
+
+/* Newtab buttons (+) and Tab Manager button glow on hover */
+#alltabs-button:hover > .toolbarbutton-badge-stack,
+#new-tab-button:hover,
+#tabs-newtab-button:hover {
+    filter: drop-shadow(0 0 2px var(--uc-icon-glow-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-primary));
+}
+
+/* Back button glow on hover */
+#back-button:not([disabled]):hover > .toolbarbutton-icon {
+    filter: drop-shadow(0 0 2px var(--uc-icon-glow-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-primary));
+}
+
+/* Forward button glow on hover */
+#forward-button:not([disabled]):hover > .toolbarbutton-icon {
+    filter: drop-shadow(0 0 2px var(--uc-icon-glow-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-primary));
+}
+
+/* Urlbar glow */
+#urlbar {
+    filter: drop-shadow(0 0 2px var(--uc-icon-glow-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-primary));
+}
+/* Urlbar glow on focus */
+#urlbar[focused] {
+    filter: drop-shadow(0 0 2px var(--uc-icon-glow-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-primary));
+    box-shadow: 0 0 3px var(--uc-icon-glow-secondary) !important;
+}
+/* Urlbar glow on hover */
+#urlbar:hover {
+    filter: drop-shadow(0 0 2px var(--uc-icon-glow-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-primary));
+    box-shadow: 0 0 3px var(--uc-icon-glow-secondary) !important;
+}
+
+/* Navbar buttons glow */
+#nav-bar toolbarbutton:hover:not(#back-button):not(#forward-button) {
+    filter: drop-shadow(0 0 2px var(--uc-icon-glow-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-primary));
+}
diff --git a/src/userChrome/hide_newtab_+_new-tab_buttons.css b/src/userChrome/hide_newtab_+_new-tab_buttons.css
index 7aec6ce..42613d1 100644
--- a/src/userChrome/hide_newtab_+_new-tab_buttons.css
+++ b/src/userChrome/hide_newtab_+_new-tab_buttons.css
@@ -1,3 +1,6 @@
+/* Copyright 2023 user0
+ * SPDX-License-Identifier: MPL-2.0 */
+
 /* Apply this customization only on smaller screens */
 @media (max-width: 700px) {
 
diff --git a/src/userChrome/hide_tab_counter.css b/src/userChrome/hide_tab_counter.css
new file mode 100644
index 0000000..8a2cb83
--- /dev/null
+++ b/src/userChrome/hide_tab_counter.css
@@ -0,0 +1,12 @@
+/* Copyright 2023 user0
+ * SPDX-License-Identifier: MPL-2.0 */
+
+/* Apply this customization only on smaller screens */
+@media (max-width: 700px) {
+
+    /* Remove Tab Manager button */
+    #alltabs-button {
+        display: none !important;
+    }
+
+}
diff --git a/src/userChrome/new-tab-button.css b/src/userChrome/new-tab-button.css
index 5b50563..76abc7c 100644
--- a/src/userChrome/new-tab-button.css
+++ b/src/userChrome/new-tab-button.css
@@ -1,3 +1,6 @@
+/* Copyright 2023 user0
+ * SPDX-License-Identifier: MPL-2.0 */
+
 /* Apply this customization only on smaller screens */
 @media (max-width: 700px) {
 
diff --git a/src/userChrome/numbered_tabs.css b/src/userChrome/numbered_tabs.css
index 43fdbec..409cc18 100644
--- a/src/userChrome/numbered_tabs.css
+++ b/src/userChrome/numbered_tabs.css
@@ -10,7 +10,7 @@ See the above repository for updates as well as full license text. */
     #tabbrowser-tabs {
         counter-reset: nth-tab 0; /* Change to -1 for 0-indexing */
     }
-    .tabbrowser-tab:not([pinned]) .tab-content::after {
+    .tabbrowser-tab .tab-content::after {
         content: counter(nth-tab) " ";
         counter-increment: nth-tab;
         position: absolute !important;
@@ -20,7 +20,14 @@ See the above repository for updates as well as full license text. */
         width: 0 !important;
     }
 
-    /* Hide tab number when hovering so that tab close button is clickable */
+    /* Hide tab close button on unpinned tabs, and reserve space for tab number */
+    .tabbrowser-tab:not(:hover,[pinned]) .tab-close-button {
+        display: initial !important;
+        visibility: hidden !important;
+    }
+
+    /* Hide tab number on pinned tabs and when hovering on unpinned tabs so that tab close button is clickable */
+    .tabbrowser-tab[pinned] .tab-content::after,
     .tabbrowser-tab:not([pinned]):hover .tab-content::after {
         visibility: hidden !important;
     }
diff --git a/src/userChrome/popups.css b/src/userChrome/popups.css
index f4a14fd..7ce9b69 100644
--- a/src/userChrome/popups.css
+++ b/src/userChrome/popups.css
@@ -45,7 +45,7 @@
     }
 
     /* fix the protections popup getting
-     * too wide, making controls naccessible */
+     * too wide, making controls unaccessible */
     #protections-popup-mainView {
         min-width: 100vw !important;
         max-width: 100vw !important;
@@ -59,6 +59,9 @@
     #widget-overflow-mainView {
         height: calc(100vh - 80px) !important;
     }
+    #unified-extensions-view {
+        width: calc(100vw - 10px) !important;
+    }
 
     /* fix widget overflow to fit ublock0_raymondhill_net-browser-action */
     #widget-overflow-mainView {
diff --git a/src/userChrome/single_tab_mode.css b/src/userChrome/single_tab_mode.css
index c3908f8..1054f1d 100644
--- a/src/userChrome/single_tab_mode.css
+++ b/src/userChrome/single_tab_mode.css
@@ -1,20 +1,44 @@
+/* Copyright 2023 user0
+ * SPDX-License-Identifier: MPL-2.0 */
+
+/******************************************/
+/*               IMPORTANT:               */
+/*                                        */
+/* This will move the Tab Manager button  */
+/* to the right side of the URL Bar.      */
+/*                                        */
+/* Move the Unified Extensions button     */
+/* to the left side of the URL Bar        */
+/* using the Customize Toolbar feature,   */
+/* or use a user.js file in your profile. */
+/******************************************/
+
 /* 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;
+    /* Reduce urlbar width */
+    #urlbar {
+        width: calc(100vw - 166px) !important;
     }
 
-    /* Expand unpinned active tab */
-    .tabbrowser-tab:not([pinned])[selected] {
-        min-width: 100vw !important;
+    /* Adjust Tab Manager Menu spawn height */
+    #customizationui-widget-panel {
+        margin-bottom: 26px !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 - 30px) !important;
+    /* Move Tab Manager Menu button to right of urlbar */
+    :root {
+        --tab-border-radius: var(--toolbarbutton-border-radius) !important;
+    }
+    #alltabs-button > .toolbarbutton-badge-stack {
+        height: 32px;
+        width: 32px;
+    }
+    #alltabs-button {
+        position: absolute;
+        bottom: 48.5px;
+        right: 41.5px;
+        z-index: 1 !important;
     }
 
     /* Hide Newtab and New-tab buttons */
@@ -23,4 +47,18 @@
         display: none !important;
     }
 
+    /* Hide unpinned inactive tabs */
+    .tabbrowser-tab:not([pinned]):not([selected]) {
+        visibility: collapse !important;
+        min-width: 0 !important;
+    }
+
+    /* Expand unpinned active tab */
+    #tabbrowser-tabs:not([haspinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[selected] {
+        min-width: 100vw !important;
+    }
+    #tabbrowser-tabs[haspinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([pinned])[selected] {
+        min-width: calc(100vw - 40px) !important;
+    }
+
 }
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
index c52e0c1..4f7f469 100644
--- a/src/userChrome/single_tab_mode_with_space_for_1_item.css
+++ b/src/userChrome/single_tab_mode_with_space_for_1_item.css
@@ -1,25 +1,34 @@
+/* Copyright 2023 user0
+ * SPDX-License-Identifier: MPL-2.0 */
+
+/******************************************/
+/*               IMPORTANT:               */
+/*                                        */
+/* This will expand the active tab, with  */
+/* space for one item of your choice:     */
+/*                                        */
+/* New-tab, Tab Manager, or other button. */
+/*                                        */
+/* In addition to your item of choice,    */
+/* the active tab will dynamically shrink */
+/* in order to accommodate one pinned tab. */
+/******************************************/
+
 /* Apply this customization only on smaller screens */
 @media (max-width: 700px) {
 
     /* Hide unpinned inactive tabs */
     .tabbrowser-tab:not([pinned]):not([selected]) {
-        visibility: hidden !important;
+        visibility: collapse !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] {
+    #tabbrowser-tabs:not([haspinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[selected] {
         min-width: calc(100vw - 40px) !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 - 70px) !important;
+    #tabbrowser-tabs[haspinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([pinned])[selected] {
+        min-width: calc(100vw - 80px) !important;
     }
 
 }
diff --git a/src/userChrome/single_tab_mode_with_space_for_2_items.css b/src/userChrome/single_tab_mode_with_space_for_2_items.css
index 425b2d3..9a5f1c5 100644
--- a/src/userChrome/single_tab_mode_with_space_for_2_items.css
+++ b/src/userChrome/single_tab_mode_with_space_for_2_items.css
@@ -1,25 +1,34 @@
+/* Copyright 2023 user0
+ * SPDX-License-Identifier: MPL-2.0 */
+
+/******************************************/
+/*               IMPORTANT:               */
+/*                                        */
+/* This will expand the active tab, with  */
+/* space for two items of your choice:     */
+/*                                        */
+/* New-tab, Tab Manager, or other button. */
+/*                                        */
+/* In addition to your item of choice,    */
+/* the active tab will dynamically shrink */
+/* in order to accommodate one pinned tab. */
+/******************************************/
+
 /* Apply this customization only on smaller screens */
 @media (max-width: 700px) {
 
     /* Hide unpinned inactive tabs */
     .tabbrowser-tab:not([pinned]):not([selected]) {
-        visibility: hidden !important;
+        visibility: collapse !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] {
+    #tabbrowser-tabs:not([haspinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[selected] {
         min-width: calc(100vw - 80px) !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 - 110px) !important;
+    #tabbrowser-tabs[haspinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([pinned])[selected] {
+        min-width: calc(100vw - 120px) !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
deleted file mode 100644
index 2480250..0000000
--- a/src/userChrome/single_tab_mode_with_space_for_3_items.css
+++ /dev/null
@@ -1,25 +0,0 @@
-/* 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;
-    }
-
-    /* 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;
-    }
-
-}
diff --git a/src/userChrome/tab_animated_active_border.css b/src/userChrome/tab_animated_active_border.css
index a4e8a53..62d1e4d 100644
--- a/src/userChrome/tab_animated_active_border.css
+++ b/src/userChrome/tab_animated_active_border.css
@@ -3,30 +3,37 @@ See the above repository for updates as well as full license text. */
 
 /* Creates a colorful animated border around active tab */
 
-@keyframes filter{from{ filter: hue-rotate(0deg) } to { filter: hue-rotate(360deg) }}
- 
-.tabbrowser-tab[selected] > .tab-stack::before{
-  grid-area: 1/1;
-  content: "";
-  display: inherit;
-  margin-block: var(--tab-block-margin);
-  border-radius: var(--tab-border-radius);
-  z-index: 0;
-  background-image: conic-gradient(
-    hsl(0 100% 70%),
-    hsl(60 100% 45%) 70deg,
-    hsl(120 100% 55%) 105deg,
-    hsl(160 100% 60%) 160deg,
-    hsl(200 100% 60%) 200deg,
-    hsl(240 100% 65%) 255deg,
-    hsl(300 100% 60%) 290deg,
-    hsl(360 100% 70%) 360deg);
-  background-size: cover;
-  background-position: center;
-  animation: filter steps(30) 2s infinite;
+@keyframes filter {
+    from {
+        filter: hue-rotate(0deg)
+    }
+    to {
+        filter: hue-rotate(360deg)
+    }
+}
+
+.tabbrowser-tab[selected] > .tab-stack::before {
+    grid-area: 1/1;
+    content: "";
+    display: inherit;
+    margin-block: var(--tab-block-margin);
+    border-radius: var(--tab-border-radius);
+    z-index: 0;
+    background-image: conic-gradient(
+        hsl(0 100% 70%),
+        hsl(60 100% 45%) 70deg,
+        hsl(120 100% 55%) 105deg,
+        hsl(160 100% 60%) 160deg,
+        hsl(200 100% 60%) 200deg,
+        hsl(240 100% 65%) 255deg,
+        hsl(300 100% 60%) 290deg,
+        hsl(360 100% 70%) 360deg);
+    background-size: cover;
+    background-position: center;
+    animation: filter steps(30) 2s infinite;
+}
+.tab-background[selected] {
+    border: 1px solid transparent !important;
+    outline: none !important;
+    background-clip: padding-box !important;
 }
-.tab-background[selected]{
-  border: 1px solid transparent !important;
-  outline: none !important;
-  background-clip: padding-box !important;
-}
\ No newline at end of file
diff --git a/src/userChrome/tab_counter.css b/src/userChrome/tab_counter.css
index 7d853d2..1e08602 100644
--- a/src/userChrome/tab_counter.css
+++ b/src/userChrome/tab_counter.css
@@ -12,11 +12,11 @@
         display: -moz-box !important;
     }
 
-    /* Tab Manager button (v) tab counter */
+    /* Tab Manager button tab counter */
     #TabsToolbar-customization-target {
         counter-reset: tabCount;
     }
-    .tabbrowser-tab:not([pinned]) {
+    .tabbrowser-tab {
         counter-increment: tabCount;
     }
     #alltabs-button > .toolbarbutton-badge-stack > .toolbarbutton-icon {
@@ -38,7 +38,8 @@
     }
 
     /* Tab Manager menu tab counter */
-    #allTabsMenu-allTabsViewTabs {
+    #allTabsMenu-allTabsViewTabs, /* before FF 106 */
+    #allTabsMenu-allTabsView-tabs { /* since FF 106 */
         counter-reset: nn_tabs 0 !important;
     }
     .all-tabs-button::before {
diff --git a/src/userChrome/tabmenu.css b/src/userChrome/tabmenu.css
index c3ca01a..fd72e88 100644
--- a/src/userChrome/tabmenu.css
+++ b/src/userChrome/tabmenu.css
@@ -80,15 +80,17 @@
     }
     #customizationui-widget-multiview box.panel-viewstack { /* since FF 113 */
         /* Use the whole height */
-        height: 300px !important;
-        max-height: 300px !important;
+        /*height: 300px !important;*/
+        /*max-height: 300px !important;*/
+        height: 333px !important;
+        max-height: 333px !important;
     }
 
     #allTabsMenu-allTabsViewTabs, /* before FF 106 */
     #allTabsMenu-allTabsView-tabs { /* since FF 106 */
         /* Make sure tabs with long titles don't exceed the all tabs menu */
-        width: 0;
-        max-width: calc(100vw - 20px);
+        /*max-width: calc(100vw - 20px);*/
+        max-width: calc(100vw - 30px);
         /* Fix padding */
         padding-top: 2px !important;
     }
diff --git a/src/userChrome/tabs_larger_min-width.css b/src/userChrome/tabs_larger_min-width.css
index 56c91d6..e98df49 100644
--- a/src/userChrome/tabs_larger_min-width.css
+++ b/src/userChrome/tabs_larger_min-width.css
@@ -1,4 +1,7 @@
+/* Copyright 2023 user0
+ * SPDX-License-Identifier: MPL-2.0 */
+
 /* Tab min-width resizing */
-#tabbrowser-tabs .tabbrowser-tab[fadein]:not([pinned]) {
-    min-width: 90px !important;
+#tabbrowser-tabs {
+    --tab-min-width: 24vw !important;
 }
diff --git a/src/userChrome/true_mobile_mode.css b/src/userChrome/true_mobile_mode.css
new file mode 100644
index 0000000..dd4031d
--- /dev/null
+++ b/src/userChrome/true_mobile_mode.css
@@ -0,0 +1,49 @@
+/* Copyright 2023 user0
+ * SPDX-License-Identifier: MPL-2.0 */
+
+/******************************************/
+/*               IMPORTANT:               */
+/*                                        */
+/* This will move the Tab Manager button  */
+/* to the right side of the URL Bar.      */
+/*                                        */
+/* Move the Unified Extensions button     */
+/* to the left side of the URL Bar        */
+/* using the "Customize Toolbar" feature, */
+/* or use a user.js file in your profile. */
+/******************************************/
+
+/* Apply this customization only on smaller screens */
+@media (max-width: 700px) {
+
+    /* Hide Tabbar */
+    #tabbrowser-tabs {
+        visibility: collapse !important;
+    }
+
+    /* Reduce urlbar width */
+    #urlbar {
+        width: calc(100vw - 166px) !important;
+    }
+
+    /* Adjust Tab Manager Menu spawn height */
+    #customizationui-widget-panel {
+        margin-bottom: 26px !important;
+    }
+
+    /* Move Tab Manager button to right of urlbar */
+    :root {
+        --tab-border-radius: var(--toolbarbutton-border-radius) !important;
+    }
+    #alltabs-button > .toolbarbutton-badge-stack {
+        height: 32px;
+        width: 32px;
+    }
+    #alltabs-button {
+        position: absolute;
+        bottom: 4.5px;
+        right: 41.5px;
+        z-index: 1 !important;
+    }
+
+}
diff --git a/src/userChrome/userChrome-desktop.css b/src/userChrome/userChrome-desktop.css
index f711893..782e5c6 100644
--- a/src/userChrome/userChrome-desktop.css
+++ b/src/userChrome/userChrome-desktop.css
@@ -1,8 +1,10 @@
+/* Copyright 2023 user0
+ * SPDX-License-Identifier: MPL-2.0 */
+
 /* Source files available here:
    https://gitlab.com/postmarketOS/mobile-config-firefox/-/archive/master/mobile-config-firefox-master.zip
    https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/
    https://forums.puri.sm/t/mobile-friendly-firefox-customizations-for-librem-5/20313
-
 */
 
 /*
@@ -18,8 +20,6 @@
 
 @import "findbar.css";
 
-@import "popups.before-ff-108.css";
-
 @import "popups.css";
 
 @import "root.css";
@@ -40,22 +40,33 @@
 /*
 @import "round_ui_items.css";
 
+@import "true_mobile_mode.css";
+
 @import "single_tab_mode.css";
 
 @import "single_tab_mode_with_space_for_1_item.css";
 
 @import "single_tab_mode_with_space_for_2_items.css";
 
-@import "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 "hide_tab_counter.css";
+
 @import "new-tab-button.css";
 
 @import "tabs_larger_min-width.css";
 
 @import "tabs_fill_available_width.css";
+/*
+@import "glow.css";
+
+@import "colorful_inactive_tabs.css";
+
+@import "tab_animated_active_border.css";
+
+@import "borderless_transparent_active_tab.css";
+*/
diff --git a/src/userChrome/userChrome-hybrid.css b/src/userChrome/userChrome-hybrid.css
index 62e591d..4125954 100644
--- a/src/userChrome/userChrome-hybrid.css
+++ b/src/userChrome/userChrome-hybrid.css
@@ -1,8 +1,10 @@
+/* Copyright 2023 user0
+ * SPDX-License-Identifier: MPL-2.0 */
+
 /* Source files available here:
    https://gitlab.com/postmarketOS/mobile-config-firefox/-/archive/master/mobile-config-firefox-master.zip
    https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/
    https://forums.puri.sm/t/mobile-friendly-firefox-customizations-for-librem-5/20313
-
 */
 
 /*
@@ -18,8 +20,6 @@
 
 @import "findbar.css";
 
-@import "popups.before-ff-108.css";
-
 @import "popups.css";
 
 @import "root.css";
@@ -40,13 +40,13 @@
 
 @import "round_ui_items.css";
 /*
+@import "true_mobile_mode.css";
+
 @import "single_tab_mode.css";
 
 @import "single_tab_mode_with_space_for_1_item.css";
 
 @import "single_tab_mode_with_space_for_2_items.css";
-
-@import "single_tab_mode_with_space_for_3_items.css";
 */
 @import "hide_newtab_+_new-tab_buttons.css";
 /*
@@ -54,8 +54,19 @@
 */
 @import "tab_counter.css";
 /*
+@import "hide_tab_counter.css";
+
 @import "new-tab-button.css";
 */
 @import "tabs_larger_min-width.css";
 
 @import "tabs_fill_available_width.css";
+/*
+@import "glow.css";
+
+@import "colorful_inactive_tabs.css";
+
+@import "tab_animated_active_border.css";
+
+@import "borderless_transparent_active_tab.css";
+*/
diff --git a/src/userChrome/userChrome-mobile+color+glow+rainbow.css b/src/userChrome/userChrome-mobile+color+glow+rainbow.css
new file mode 100644
index 0000000..87aee20
--- /dev/null
+++ b/src/userChrome/userChrome-mobile+color+glow+rainbow.css
@@ -0,0 +1,71 @@
+/* Copyright 2023 user0
+ * SPDX-License-Identifier: MPL-2.0 */
+
+/* Source files available here:
+   https://gitlab.com/postmarketOS/mobile-config-firefox/-/archive/master/mobile-config-firefox-master.zip
+   https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/
+   https://forums.puri.sm/t/mobile-friendly-firefox-customizations-for-librem-5/20313
+*/
+
+
+@import "color_variable_template.css";
+
+@import "colors.css";
+
+@import "appMenu.css";
+
+@import "browser.css";
+
+@import "editBookmarkPanel.css";
+
+@import "findbar.css";
+
+@import "popups.css";
+
+@import "root.css";
+
+@import "tabmenu.css";
+
+@import "urlbar.css";
+
+@import "alt-browser.css";
+
+@import "custom_rules.css";
+
+@import "hide_tabs_scrollbuttons.css";
+
+@import "tab_close_button_always_on_hover.css";
+
+@import "iconized_main_menu.css";
+
+@import "round_ui_items.css";
+/*
+@import "true_mobile_mode.css";
+
+@import "single_tab_mode.css";
+*/
+@import "single_tab_mode_with_space_for_1_item.css";
+/*
+@import "single_tab_mode_with_space_for_2_items.css";
+*/
+@import "hide_newtab_+_new-tab_buttons.css";
+
+@import "numbered_tabs.css";
+
+@import "tab_counter.css";
+/*
+@import "hide_tab_counter.css";
+
+@import "new-tab-button.css";
+
+@import "tabs_larger_min-width.css";
+
+@import "tabs_fill_available_width.css";
+*/
+@import "glow.css";
+
+@import "colorful_inactive_tabs.css";
+
+@import "tab_animated_active_border.css";
+
+@import "borderless_transparent_active_tab.css";
diff --git a/src/userChrome/userChrome-mobile.css b/src/userChrome/userChrome-mobile.css
index 92ca4a9..b6de437 100644
--- a/src/userChrome/userChrome-mobile.css
+++ b/src/userChrome/userChrome-mobile.css
@@ -1,3 +1,6 @@
+/* Copyright 2023 user0
+ * SPDX-License-Identifier: MPL-2.0 */
+
 /* Source files available here:
    https://gitlab.com/postmarketOS/mobile-config-firefox/-/archive/master/mobile-config-firefox-master.zip
    https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/
@@ -17,8 +20,6 @@
 
 @import "findbar.css";
 
-@import "popups.before-ff-108.css";
-
 @import "popups.css";
 
 @import "root.css";
@@ -39,23 +40,33 @@
 
 @import "round_ui_items.css";
 /*
+@import "true_mobile_mode.css";
+
 @import "single_tab_mode.css";
-
+*/
 @import "single_tab_mode_with_space_for_1_item.css";
-*/
-@import "single_tab_mode_with_space_for_2_items.css";
 /*
-@import "single_tab_mode_with_space_for_3_items.css";
-
-@import "hide_newtab_+_new-tab_buttons.css";
+@import "single_tab_mode_with_space_for_2_items.css";
 */
+@import "hide_newtab_+_new-tab_buttons.css";
+
 @import "numbered_tabs.css";
 
 @import "tab_counter.css";
 /*
+@import "hide_tab_counter.css";
+
 @import "new-tab-button.css";
 
 @import "tabs_larger_min-width.css";
 
 @import "tabs_fill_available_width.css";
+
+@import "glow.css";
+
+@import "colorful_inactive_tabs.css";
+
+@import "tab_animated_active_border.css";
+
+@import "borderless_transparent_active_tab.css";
 */
diff --git a/src/userChrome/userChrome-true-mobile+color+glow.css b/src/userChrome/userChrome-true-mobile+color+glow.css
new file mode 100644
index 0000000..679d0ac
--- /dev/null
+++ b/src/userChrome/userChrome-true-mobile+color+glow.css
@@ -0,0 +1,72 @@
+/* Copyright 2023 user0
+ * SPDX-License-Identifier: MPL-2.0 */
+
+/* Source files available here:
+   https://gitlab.com/postmarketOS/mobile-config-firefox/-/archive/master/mobile-config-firefox-master.zip
+   https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/
+   https://forums.puri.sm/t/mobile-friendly-firefox-customizations-for-librem-5/20313
+*/
+
+
+@import "color_variable_template.css";
+
+@import "colors.css";
+
+@import "appMenu.css";
+
+@import "browser.css";
+
+@import "editBookmarkPanel.css";
+
+@import "findbar.css";
+
+@import "popups.css";
+
+@import "root.css";
+
+@import "tabmenu.css";
+
+@import "urlbar.css";
+
+@import "alt-browser.css";
+
+@import "custom_rules.css";
+
+@import "hide_tabs_scrollbuttons.css";
+
+@import "tab_close_button_always_on_hover.css";
+
+@import "iconized_main_menu.css";
+
+@import "round_ui_items.css";
+
+@import "true_mobile_mode.css";
+/*
+@import "single_tab_mode.css";
+
+@import "single_tab_mode_with_space_for_1_item.css";
+
+@import "single_tab_mode_with_space_for_2_items.css";
+
+@import "hide_newtab_+_new-tab_buttons.css";
+
+@import "numbered_tabs.css";
+*/
+@import "tab_counter.css";
+/*
+@import "hide_tab_counter.css";
+
+@import "new-tab-button.css";
+
+@import "tabs_larger_min-width.css";
+
+@import "tabs_fill_available_width.css";
+*/
+@import "glow.css";
+/*
+@import "colorful_inactive_tabs.css";
+
+@import "tab_animated_active_border.css";
+
+@import "borderless_transparent_active_tab.css";
+*/
diff --git a/src/userChrome/userChrome-true-mobile+color.css b/src/userChrome/userChrome-true-mobile+color.css
new file mode 100644
index 0000000..959ba2e
--- /dev/null
+++ b/src/userChrome/userChrome-true-mobile+color.css
@@ -0,0 +1,72 @@
+/* Copyright 2023 user0
+ * SPDX-License-Identifier: MPL-2.0 */
+
+/* Source files available here:
+   https://gitlab.com/postmarketOS/mobile-config-firefox/-/archive/master/mobile-config-firefox-master.zip
+   https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/
+   https://forums.puri.sm/t/mobile-friendly-firefox-customizations-for-librem-5/20313
+*/
+
+
+@import "color_variable_template.css";
+
+@import "colors.css";
+
+@import "appMenu.css";
+
+@import "browser.css";
+
+@import "editBookmarkPanel.css";
+
+@import "findbar.css";
+
+@import "popups.css";
+
+@import "root.css";
+
+@import "tabmenu.css";
+
+@import "urlbar.css";
+
+@import "alt-browser.css";
+
+@import "custom_rules.css";
+
+@import "hide_tabs_scrollbuttons.css";
+
+@import "tab_close_button_always_on_hover.css";
+
+@import "iconized_main_menu.css";
+
+@import "round_ui_items.css";
+
+@import "true_mobile_mode.css";
+/*
+@import "single_tab_mode.css";
+
+@import "single_tab_mode_with_space_for_1_item.css";
+
+@import "single_tab_mode_with_space_for_2_items.css";
+
+@import "hide_newtab_+_new-tab_buttons.css";
+
+@import "numbered_tabs.css";
+*/
+@import "tab_counter.css";
+/*
+@import "hide_tab_counter.css";
+
+@import "new-tab-button.css";
+
+@import "tabs_larger_min-width.css";
+
+@import "tabs_fill_available_width.css";
+
+@import "glow.css";
+
+@import "colorful_inactive_tabs.css";
+
+@import "tab_animated_active_border.css";
+
+@import "borderless_transparent_active_tab.css";
+*/
diff --git a/src/userChrome/userChrome-true-mobile.css b/src/userChrome/userChrome-true-mobile.css
new file mode 100644
index 0000000..3628e4c
--- /dev/null
+++ b/src/userChrome/userChrome-true-mobile.css
@@ -0,0 +1,72 @@
+/* Copyright 2023 user0
+ * SPDX-License-Identifier: MPL-2.0 */
+
+/* Source files available here:
+   https://gitlab.com/postmarketOS/mobile-config-firefox/-/archive/master/mobile-config-firefox-master.zip
+   https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/
+   https://forums.puri.sm/t/mobile-friendly-firefox-customizations-for-librem-5/20313
+*/
+
+/*
+@import "color_variable_template.css";
+
+@import "colors.css";
+*/
+@import "appMenu.css";
+
+@import "browser.css";
+
+@import "editBookmarkPanel.css";
+
+@import "findbar.css";
+
+@import "popups.css";
+
+@import "root.css";
+
+@import "tabmenu.css";
+
+@import "urlbar.css";
+
+@import "alt-browser.css";
+
+@import "custom_rules.css";
+
+@import "hide_tabs_scrollbuttons.css";
+
+@import "tab_close_button_always_on_hover.css";
+
+@import "iconized_main_menu.css";
+
+@import "round_ui_items.css";
+
+@import "true_mobile_mode.css";
+/*
+@import "single_tab_mode.css";
+
+@import "single_tab_mode_with_space_for_1_item.css";
+
+@import "single_tab_mode_with_space_for_2_items.css";
+
+@import "hide_newtab_+_new-tab_buttons.css";
+
+@import "numbered_tabs.css";
+*/
+@import "tab_counter.css";
+/*
+@import "hide_tab_counter.css";
+
+@import "new-tab-button.css";
+
+@import "tabs_larger_min-width.css";
+
+@import "tabs_fill_available_width.css";
+
+@import "glow.css";
+
+@import "colorful_inactive_tabs.css";
+
+@import "tab_animated_active_border.css";
+
+@import "borderless_transparent_active_tab.css";
+*/
diff --git a/src/userContent/theme-color-1.css b/src/userContent/theme-color-1.css
index 9757e61..82ad9f8 100644
--- a/src/userContent/theme-color-1.css
+++ b/src/userContent/theme-color-1.css
@@ -1,3 +1,6 @@
+/* Copyright 2023 user0
+ * SPDX-License-Identifier: MPL-2.0 */
+
 @-moz-document url("about:addons"),
 url("about:blank"),
 url("about:config"),
diff --git a/src/userContent/theme-color-2.css b/src/userContent/theme-color-2.css
index c791df4..54db2d6 100644
--- a/src/userContent/theme-color-2.css
+++ b/src/userContent/theme-color-2.css
@@ -1,3 +1,6 @@
+/* Copyright 2023 user0
+ * SPDX-License-Identifier: MPL-2.0 */
+
 @-moz-document url("about:addons"),
 url("about:blank"),
 url("about:config"),
diff --git a/src/userContent/theme-dark.css b/src/userContent/theme-dark.css
index ccfc126..a92b630 100644
--- a/src/userContent/theme-dark.css
+++ b/src/userContent/theme-dark.css
@@ -1,3 +1,6 @@
+/* Copyright 2023 user0
+ * SPDX-License-Identifier: MPL-2.0 */
+
 @-moz-document url("about:addons"),
 url("about:blank"),
 url("about:config"),
diff --git a/src/userContent/theme-light.css b/src/userContent/theme-light.css
index b3166be..e7dc0f3 100644
--- a/src/userContent/theme-light.css
+++ b/src/userContent/theme-light.css
@@ -1,3 +1,6 @@
+/* Copyright 2023 user0
+ * SPDX-License-Identifier: MPL-2.0 */
+
 @-moz-document url("about:addons"),
 url("about:blank"),
 url("about:config"),