├── .github
    └── FUNDING.yml
├── README.md
├── assets
    ├── bookmarks.png
    ├── downloads.png
    ├── findbar.png
    ├── fire-alpha-adapt.gif
    ├── gestures.png
    ├── menu.png
    ├── preview.gif
    ├── tabs.png
    └── urltab.png
└── chrome
    ├── userChrome.css
    └── userContent.css


/.github/FUNDING.yml:
--------------------------------------------------------------------------------
 1 | # These are supported funding model platforms
 2 | 
 3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
 4 | patreon: # Replace with a single Patreon username
 5 | open_collective: # Replace with a single Open Collective username
 6 | ko_fi: # Replace with a single Ko-fi username
 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
 9 | liberapay: # Replace with a single Liberapay username
10 | issuehunt: # Replace with a single IssueHunt username
11 | otechie: # Replace with a single Otechie username
12 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
13 | custom: ["https://www.buymeacoffee.com/taggar"]
14 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | 
  2 | ## [Firefox-Alphα](#features) 🗿 Super clear desktop browser
  3 | 
  4 | <img src="assets/fire-alpha-adapt.gif" alt="firefox alpha preview animation adaptive colors" width="720" height="auto"/>
  5 | 
  6 | Fast and minimal Firefox configuration with zero buttons, for simplicity and intuitive gesture controls. 
  7 | 
  8 | ### [<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Symbols/Down%20Arrow.png" alt="Down Arrow" width="25" height="25" align="top">&nbsp;`Install`](#install)&nbsp;[<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Alien%20Monster.png" alt="Alien Monster" width="25" height="25" align="top">&nbsp;`Report Bug`](https://github.com/Tagggar/Firefox-Alpha/issues)
  9 | 
 10 | ### [<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Ghost.png" alt="Ghost" width="25" height="25" align="top"/>&nbsp;`Support`](#support)&nbsp;[<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/High%20Voltage.png" alt="High Voltage" width="25" height="25" align="top"/>&nbsp;`Projects`](https://tagggar.github.io)
 11 | 
 12 | ### Features:
 13 | 
 14 | * [x] **[Combined Tab and Urlbar](#combined-tab-and-urlbar)**
 15 | 
 16 | * [x] **[Multi-row Tabs](#multi-row-tabs)**
 17 | 
 18 | * [x] **[Multi-row Bookmarks](#multi-row-bookmarks)**
 19 | 
 20 | * [x] **[New Clean Menu](#new-clean-menu)**
 21 | 
 22 | * [x] **[New Downloads Bar](#new-downloads-bar)**
 23 | 
 24 | * [x] **[Simple Finbar](#simple-findbar)**
 25 | 
 26 | * [x] **[Adaptive Color](#adaptive-color)**
 27 | 
 28 | * [x] **[Gesture navigation](#gesture-navigation)**
 29 | 
 30 | * [x] **[Security](#security)**
 31 | 
 32 | &nbsp;
 33 | 
 34 | 
 35 | 
 36 | ## Combined Tab and Urlbar
 37 | 
 38 | <img src="assets/preview.gif" alt="firefox alpha preview animation" width="368" height="auto"/>
 39 | 
 40 | Greatly enhances usability and provides a more intuitive browsing experience, eliminating the need for constant switching between UI sections:
 41 | 
 42 | `LMB` to select URL on Active Tab;
 43 | 
 44 | `MMB` to Close Inactive Tab;
 45 | 
 46 | `MMB` to open New Tab on empty space;
 47 | 
 48 | <p><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Alien%20Monster.png" alt="Alien Monster" height="24" align="top" /> Rare glitches may occur due to CSS limits. </p>
 49 | 
 50 | 
 51 | 
 52 | &nbsp;
 53 | 
 54 | 
 55 | ## Multi-row Tabs
 56 | 
 57 | <img src="assets/tabs.png" alt="firefox alpha multi-row tabs" width="520" height="auto"/>
 58 | 
 59 | Stacking tabs into multiple rows enhances tabs access, simplifies navigation, and optimizes screen space for efficient multitasking and improved user experience:
 60 | 
 61 | <p><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Hand%20gestures/Thumbs%20Up.png" alt="Thumbs Up" width="25" height="25" align="top" /> Clear and easily accessible layout;</p>
 62 | 
 63 | `RMB` on Tab for Tab controls;
 64 | 
 65 | <p><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Muted%20Speaker.png" alt="Muted Speaker" width="25" height="25" align="top"/> The Audio Tab is nicely highlighted and looks good without any extra [Playing] indications;</p>
 66 | 
 67 | <p><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Hand%20gestures/OK%20Hand.png" alt="OK Hand" width="25" height="25" align="top" /> Expect perfect UX/UI consistency.</p>
 68 | 
 69 | &nbsp;
 70 | 
 71 | 
 72 | ## Multi-row Bookmarks
 73 | 
 74 | <img src="assets/bookmarks.png" alt="firefox alpha multi-row bookmarks" width="520" height="auto"/>
 75 | 
 76 | Bookmarks are now organized in multiple rows below the Tabs, improving accessibility and resource management, especially for users with a large number of bookmarks:
 77 | 
 78 | Set `Bookmarks Toolbar` > `Show only on New Tab` to display Bookmarks only on New Tab;
 79 | 
 80 | Add `History` / `Downloads` to Bookmarks Panel for quick access;
 81 | 
 82 | Add `🥎 Emojis` to folder names instead of useless folder icons for better visual identification.
 83 | 
 84 | 
 85 | 
 86 | &nbsp;
 87 | 
 88 | 
 89 | ## New Clean Menu
 90 | 
 91 | <img src="assets/menu.png" alt="firefox alpha new simple clean menu" width="520" height="auto"/>
 92 | 
 93 | New consistent Main Menu design, with clear and uniform UI, ensures efficient access to key features. Unnecessary elements are removed to simplify the layout and navigation:
 94 | 
 95 | `Alt` / `Option` to open Main Menu with all browser features and controls;
 96 | 
 97 | :link: Menu can be customized with extensions or CSS: **[simpleMenuWizard](https://github.com/stonecrusher/simpleMenuWizard)**.
 98 | 
 99 | &nbsp;
100 | 
101 | 
102 | ## New Downloads Bar
103 | 
104 | <img src="assets/downloads.png" alt="firefox alpha new downloads bar" width="520" height="auto"/>
105 | 
106 | New Downloads identificator and simple status panel are now with human design:
107 | 
108 | <p><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Hand%20gestures/Thumbs%20Up.png" alt="Thumbs Up" width="25" height="25" align="top" /> Nice minimalistic progress bar and a consistent menu;</p>
109 | 
110 | ⚠️ Subtle notifications for download status and errors.
111 | 
112 | &nbsp;
113 | 
114 | 
115 | 
116 | ## Simple Findbar
117 | 
118 | <img src="assets/findbar.png" alt="firefox alpha simple findbar" width="520" height="auto"/>
119 | 
120 | `Ctrl+F` to find on webpage quickly. Findbar now natively integrated into UI.
121 | 
122 | &nbsp;
123 | 
124 | ## Adaptive Color
125 | 
126 | <img src="assets/fire-alpha-adapt.gif" alt="firefox alpha preview animation adaptive colors" width="800" height="auto"/>
127 | 
128 | > **[Adaptive Tab Bar Colour](https://github.com/easonwong-de/Adaptive-Tab-Bar-Colour#adaptive-tab-bar-colour)** - extension is required to make browser UI match the website color.
129 | 
130 | ⚠️ Configure the Extension Settings:
131 | 
132 | * [x] Allow light tab bar
133 | 
134 | * [x] Dynamic color update
135 | 
136 | * [x] Ignore designated color
137 | 
138 | 
139 | &nbsp;
140 | 
141 | 
142 | 
143 | ## Gesture navigation
144 | 
145 | <img src="assets/gestures.png" alt="firefox alpha gesture navigation" width="520" height="auto"/>
146 | 
147 | > **[Gesturefy](https://github.com/Robbendebiene/Gesturefy#esturefy)** - extension is required if your OS doesn't support native gesture controls.
148 | 
149 | ⚠️ Configure gestures in the Settings:
150 | 
151 | <p> <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Hand%20gestures/Backhand%20Index%20Pointing%20Left.png" alt="Backhand Index Pointing Left" width="25" height="25" align="top" /> Swipe-Right to go <code>Back</code> </p>
152 | 
153 | <p> <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Hand%20gestures/Backhand%20Index%20Pointing%20Right.png" alt="Backhand Index Pointing Right" width="25" height="25" align="top" /> Swipe-Left to go <code>Forward</code> </p>
154 | 
155 | <p> <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Hand%20gestures/Backhand%20Index%20Pointing%20Up.png" alt="Backhand Index Pointing Up" width="25" height="25" align="top" /> Pull-Down to <code>Reload</code> </p>
156 | 
157 | &nbsp;
158 | 
159 | 
160 | ## Security
161 | 
162 | > **[ uBlock Origin](https://github.com/gorhill/uBlock#ublock-origin-ubo)** - effective content blocker for ads, trackers, miners, popups, malware and other web annoynances.
163 | > <br>Follow the configuration guides and your personal preferences for fast and secure web.
164 | 
165 | ### Search suggestions in URL bar are disabled intentionally for several reasons:
166 | 
167 | In some of my UX research, I found interesting results indicating that **disabling search suggestions** in the URL bar can **reduce cognitive load and help maintain focus.**
168 | 
169 | ### <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Smiling%20Face%20with%20Sunglasses.png" alt="Smiling Face with Sunglasses" width="25" height="25" align="top"/> **`Productivity boost by lowering distractions and cognitive load`**
170 | 
171 | Disabling search suggestions cultivates a sense of control, reducing distractions and improving satisfaction. Users can concentrate on their tasks, boosting efficiency and search accuracy. This minimalist approach is especially helpful for users who find constant suggestions overwhelming, thereby enhancing the overall UX.
172 | 
173 | > **Search suggestions are still available on search engine webpage.**  
174 | > Sometimes, search engine provides **[grammatically wrong suggestions](https://support.google.com/websearch/thread/56300495/sometimes-google-search-gives-me-grammatically-wrong-suggestions?hl=en)** (check google community forums for more info)
175 | 
176 | ### <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Face%20with%20Crossed-Out%20Eyes.png" alt="Face with Crossed-Out Eyes" width="25" height="25" align="top"/> **`Data privacy`**
177 | 
178 | Suggestions are often based on the user's browsing history, frequently visited websites, and search patterns. Consequently, this personal data can be vulnerable, leading to privacy violations or badly targeted advertising. Users may also feel uncomfortable with the notion that their search behavior is being tracked and used for commercial or other purposes without their explicit consent.
179 | 
180 | ### <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Face%20in%20Clouds.png" alt="Face in Clouds" width="25" height="25" align="top"/> **`Echo chambers`**
181 | 
182 | The reliance on personalized suggestions may result in the formation of echo chambers, limiting users' exposure to diverse perspectives and information. This can potentially reinforce existing biases and restrict the exploration of alternative viewpoints.
183 | 
184 | > **In other words, the user gains significantly improved search results by correctly formulating the search query themselves, rather than relying on suggestions.**
185 | 
186 | &nbsp;
187 | 
188 | 
189 | ## Install
190 | 
191 | 1. Type `about:support` in URL Bar > open Firefox profile folder and put `chrome` folder:
192 | 
193 |     <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Open%20File%20Folder.png" alt="Open File Folder" width="25" height="25" align="top" /> `/` `Firefox` `/` `Profiles` `/` `###.default-release` `/` `chrome`
194 | 
195 | 2. Type `about:config` in URL Bar and set:
196 | 
197 |    `toolkit.legacyUserProfileCustomizations.stylesheets` > `true` to enable css themes;
198 | 
199 |    `browser.urlbar.maxRichResults` > `0` to hide search suggestions pop-up;
200 | 
201 |    `browser.urlbar.clickSelectsAll` > `true` for url selection in single click (optional);
202 | 
203 | 4. Restart Firefox and Enjoy
204 | 
205 | &nbsp;
206 | 
207 | ## Support
208 | 
209 | ### [<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Microsoft-Teams-Animated-Emojis/master/Emojis/Travel%20and%20places/Star.png" alt="Star" width="25" height="25" align="top"/> Star Project](https://github.com/Tagggar/Firefox-Alpha) &nbsp; [<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Ghost.png" alt="Ghost" width="25" height="25" align="top"/> Buy a Coffee](https://www.buymeacoffee.com/taggar)
210 | 
211 | ### [<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/High%20Voltage.png" alt="High Voltage" width="25" height="25" align="top"/> More Projects](https://tagggar.github.io)
212 | 


--------------------------------------------------------------------------------
/assets/bookmarks.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Tagggar/Firefox-Alpha/78bf9a9ea57538b0a58212731e81dea80d490105/assets/bookmarks.png


--------------------------------------------------------------------------------
/assets/downloads.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Tagggar/Firefox-Alpha/78bf9a9ea57538b0a58212731e81dea80d490105/assets/downloads.png


--------------------------------------------------------------------------------
/assets/findbar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Tagggar/Firefox-Alpha/78bf9a9ea57538b0a58212731e81dea80d490105/assets/findbar.png


--------------------------------------------------------------------------------
/assets/fire-alpha-adapt.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Tagggar/Firefox-Alpha/78bf9a9ea57538b0a58212731e81dea80d490105/assets/fire-alpha-adapt.gif


--------------------------------------------------------------------------------
/assets/gestures.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Tagggar/Firefox-Alpha/78bf9a9ea57538b0a58212731e81dea80d490105/assets/gestures.png


--------------------------------------------------------------------------------
/assets/menu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Tagggar/Firefox-Alpha/78bf9a9ea57538b0a58212731e81dea80d490105/assets/menu.png


--------------------------------------------------------------------------------
/assets/preview.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Tagggar/Firefox-Alpha/78bf9a9ea57538b0a58212731e81dea80d490105/assets/preview.gif


--------------------------------------------------------------------------------
/assets/tabs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Tagggar/Firefox-Alpha/78bf9a9ea57538b0a58212731e81dea80d490105/assets/tabs.png


--------------------------------------------------------------------------------
/assets/urltab.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Tagggar/Firefox-Alpha/78bf9a9ea57538b0a58212731e81dea80d490105/assets/urltab.png


--------------------------------------------------------------------------------
/chrome/userChrome.css:
--------------------------------------------------------------------------------
  1 | /* Firefox Alpha v 1.1.0 */
  2 | /* Source: https://github.com/Tagggar/Firefox-Alpha/ */
  3 | :root {
  4 |   --6: 6px;
  5 |   --8: 8px;
  6 |   --tab-min-height: 24px !important;
  7 |   --tab-min-width: 24px !important;
  8 |   --toolbarbutton-border-radius: var(--6) !important;
  9 |   --tab-border-radius: var(--6) !important;
 10 |   --main: #77777770;
 11 |   --item: #77777730;
 12 |   --grey: #b8b8b8;
 13 |   --red: #ff000070;
 14 |   
 15 |   --toolbarbutton-hover-background: transparent !important;
 16 |   --toolbarbutton-active-background: transparent !important;
 17 | }
 18 | 
 19 | /* Clean UI */
 20 | * {
 21 |   outline: none !important;
 22 |   box-shadow: none !important;
 23 |   border: none !important;
 24 | }
 25 | 
 26 | /* Highlight Selection color */
 27 | ::selection {
 28 |   background-color: dodgerblue !important;
 29 |   color: white !important;
 30 | }
 31 | 
 32 | /* Customization Panel Fix */
 33 | #customization-panelWrapper > .panel-arrowbox > .panel-arrow {
 34 |   margin-inline-end: initial !important;
 35 | }
 36 | 
 37 | /* Video Background Fix */
 38 | video {
 39 |   background-color: black !important;
 40 | }
 41 | 
 42 | /* ❌ Hide Items ❌ */
 43 | /* ❌ Tooltips ❌ */
 44 | tooltip,
 45 | 
 46 | /* ❌ Empty Space */
 47 | spacer,.titlebar-spacer,
 48 | 
 49 | /* ❌ Tab List */
 50 | #alltabs-button,
 51 | 
 52 | /* ❌ Extensions Menu */
 53 | #unified-extensions-button,
 54 | 
 55 | /* ❌ #PanelUI-button */
 56 | #PanelUI-menu-button,
 57 | 
 58 | /* ❌ Titlebar Window Controls */
 59 | .titlebar-buttonbox-container,
 60 | 
 61 | /* ❌ Navigation Buttons */
 62 | #back-button, #forward-button, #reload-button, #stop-reload-button,
 63 | 
 64 | /* ❌ Menu Icons __ menuitem > .menu-iconic-left, */
 65 |  menu > .menu-iconic-left, .menu-right,
 66 | 
 67 | /* ❌ Menu Separator */
 68 | menuseparator, toolbarseparator,
 69 | 
 70 | /* ❌ Menu Disabled */
 71 | menuitem[disabled], menu[disabled],
 72 | 
 73 | /* ❌ Overflow Icon */
 74 | #nav-bar-overflow-button,
 75 | 
 76 | /* ❌ url-bar Icons */
 77 | #urlbar-zoom-button,#tracking-protection-icon-container,#identity-box,
 78 | 
 79 | /* ❌ Bookmark Folder Icons */
 80 | #PlacesToolbar .bookmark-item:not([label=""]) > .toolbarbutton-icon,
 81 | 
 82 | /* ❌ Bookmarks [>] Button */
 83 | #PlacesChevron,
 84 | 
 85 | /* ❌ Tab Icon Overlay */
 86 | .tab-icon-overlay,
 87 | 
 88 | /* ❌ Tab Mute Icon */
 89 | .tab-icon-sound-label,
 90 | .tab-icon-overlay:not([muted]):is([soundplaying]),
 91 | 
 92 | /* ❌ Tab Close Btn */
 93 | .tab-close-button:not([selected]),
 94 | 
 95 | /* ❌ Tab Pinned Text */
 96 | .tab-label-container[pinned],
 97 | 
 98 | /* ❌ New Tab logo */
 99 | .tabbrowser-tab[label="New Tab"] .tab-icon-image,
100 | 
101 | /* ❌ Findbar Checkboxes */
102 | .findbar-container > checkbox,
103 | 
104 | /* ❌ Menu Icons */
105 | #contentAreaContextMenu > menuitem > .menu-iconic-left,
106 | #context-navigation > menuitem > .menu-iconic-left,
107 | 
108 | /* ❌ Downloads Icons */
109 | .downloadTypeIcon,
110 | #downloads-button > .toolbarbutton-badge-stack > .toolbarbutton-badge,
111 | :root:not([customizing]) #downloads-indicator-icon,
112 | #downloads-indicator-start-box, #downloads-indicator-start-image > *,
113 | #downloads-indicator-finish-box, #downloads-indicator-finish-image > *, 
114 | 
115 | /* ❌ Private Indicator */
116 | .private-browsing-indicator {
117 |   display: none !important;
118 |   -moz-user-focus: none;
119 | }
120 | 
121 | /* 🔗 Status Panel [Url Popup] */
122 | #statuspanel #statuspanel-label {
123 |   font-weight: 600 !important;
124 |   padding-inline: var(--6) !important;
125 |   border-radius: var(--6) !important;
126 |   margin: var(--8) !important;
127 |   background-color: blue !important;
128 | }
129 | 
130 | /* ℹ️ Findbar Ctrl+F */
131 | findbar {
132 |   padding: 0 !important;
133 |   margin: 0 8px !important;
134 |   border-radius: var(--6) !important;
135 |   width: 240px;
136 |   background: var(--grey) !important;
137 |   order: -1;
138 | }
139 | .findbar-container {
140 |   padding: 0 !important;
141 |   margin: 0 !important;
142 |   height: var(--tab-min-height) !important;
143 | }
144 | .findbar-textbox {
145 |   width: 168px !important;
146 |   padding-inline: var(--6) !important;
147 |   height: var(--tab-min-height) !important;
148 |   color: black !important;
149 |   background: none !important;
150 | }
151 | findbar toolbarbutton {
152 |   width: 24px;
153 |   padding: 4px !important;
154 |   margin: 0 !important;
155 |   background: none !important;
156 |   fill: black !important;
157 |   scale: 0.7;
158 | }
159 | 
160 | /* *️⃣ Menu *️⃣ */
161 | /* *️⃣ Toolbar Menu Alt */
162 | #toolbar-menubar[autohide="true"][inactive="true"] {
163 |   height: 0 !important;
164 |   margin: 0 !important;
165 | }
166 | 
167 | #toolbar-menubar {
168 |   height: 24px !important;
169 |   border-radius: var(--6);
170 |   background-color: var(--grey);
171 |   position: relative;
172 |   margin: var(--6) var(--6) 0 var(--6);
173 |   z-index: 3;
174 | }
175 | 
176 | 
177 | /* *️⃣ Toolbar Menu Item */
178 | menu[_moz-menuactive="true"]:not([disabled="true"]),
179 | menucaption[_moz-menuactive="true"]:not([disabled="true"]) {
180 |   background-color: var(--main) !important;
181 |   border-radius: 4px;
182 | }
183 | #main-menubar {
184 |   margin: 4px;
185 |   background-color: none;
186 |   color: black;
187 |   height: 16px !important;
188 | }
189 | 
190 | /* *️⃣ Menu Popup Box */
191 | .menupopup-arrowscrollbox {
192 |   border-radius: var(--8) !important;
193 |   padding: var(--6) !important;
194 |   background-color: var(--grey) !important;
195 |   color: black !important;
196 | }
197 | 
198 | /* Menu Position */
199 | menupopup {
200 |   margin: var(--6) 0 !important;
201 | }
202 | 
203 | #main-menubar menupopup {
204 |     margin: var(--6) var(--8) 0 -8px !important;
205 | }
206 | 
207 | menupopup > menuitem,
208 | menupopup > menu {
209 |   appearance: none !important;
210 |   max-height: 20px !important;
211 |   min-height: 20px !important;
212 |   border-radius: var(--6) !important;
213 |   padding-inline: var(--6) !important;
214 |   margin: 0 !important;
215 | 
216 | 
217 | 
218 | }
219 | .menu-accel {
220 |   margin-inline: var(--6) 0 !important;
221 | }
222 | 
223 | /* ⬅️➡️🔄️ Context Nav Text Buttons*/
224 | menuitem[_moz-menuactive="true"]:not([disabled]),
225 | menupopup > menuitem[_moz-menuactive],
226 | menupopup > menu[_moz-menuactive] {
227 |   background-color: var(--main) !important;
228 |   color: black !important;  
229 | }
230 | #context-navigation {
231 |   flex-direction: column !important;
232 | }
233 | #context-navigation > menuitem::before {
234 |   content: attr(aria-label);
235 | }
236 | #context-navigation > menuitem {
237 |   justify-content: start !important;
238 |   border-radius: var(--6) !important;
239 |   padding-inline: var(--6) !important;
240 |   height: 20px !important;
241 |   width: 100% !important;
242 | }
243 | 
244 | /* ❎ Tabs Multi-row ❎ */
245 | scrollbox[part][orient="horizontal"] {
246 |   display: flex;
247 |   flex-wrap: wrap !important;
248 |   height: none !important;
249 | }
250 | 
251 | #tabbrowser-tabs > * {
252 |   padding: 2px !important;
253 |   margin: 2px !important;
254 | }
255 | tab {
256 |   margin: 0 4px 0 0 !important;
257 | }
258 | :root:not([customizing]) #titlebar {
259 |   margin-bottom: -24px;
260 | }
261 | 
262 | .tabbrowser-tab[fadein]:not([selected]):not([pinned]) {
263 |   max-width: 120px !important;
264 |   min-width: 80px !important;
265 | }
266 | .tabbrowser-tab .tab-background:not([selected]) {
267 |   background: var(--item) !important;
268 | }
269 | .tab-label-container:not([selected]) {
270 |   opacity: 0.5 !important;
271 | }
272 | .tab-content {
273 |   padding-inline: var(--6) !important;
274 | }
275 | 
276 | /* Tabs [Selected] */
277 | .tabbrowser-tab[selected][fadein]:not([pinned]) {
278 |   max-width: 320px !important;
279 |   min-width: 240px !important;
280 | }
281 | .tabbrowser-tab .tab-background[selected="true"] {
282 |   background: var(--main) !important;
283 | }
284 | 
285 | /* Tabs [Pinned] */
286 | .tabbrowser-tab[pinned] {
287 |   width: calc(var(--tab-min-height) + var(--8)) !important;
288 | }
289 | 
290 | /* Tabs Audio */
291 | #tabbrowser-tabs .tabbrowser-tab:is([soundplaying]) .tab-background {
292 |   background-color: var(--red) !important;
293 |   transition: background-color 0.1s ease !important;
294 | }
295 | 
296 | /* Tabs Audio Favicon */
297 | .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted])
298 |   > :not(.tab-icon-overlay) {
299 |   opacity: 1 !important;
300 | }
301 | 
302 | /* Tab Close on hover */
303 | tab:not([pinned]):hover .tab-close-button {
304 |   display: flex !important;
305 | }
306 | .tab-close-button {
307 |   margin: -6px !important;
308 |   opacity: 0.5;
309 |   background-color: transparent !important;
310 | }
311 | 
312 | /* New Tab by MMB on Tabs Toolbar  */
313 | #tabs-newtab-button,
314 | #tabbrowser-arrowscrollbox-periphery {
315 |   flex: 1;
316 |   align-items: stretch !important;
317 |   opacity: 0 !important;
318 |   -moz-window-dragging: drag !important;
319 | }
320 | 
321 | /* 🪟 Bookmarks Multi-row  */
322 | :root[BookmarksToolbarOverlapsBrowser] :where(#PersonalToolbar) {
323 |   height: unset !important;
324 | }
325 | #PersonalToolbar {
326 |   padding: 0 !important;
327 |   margin: 0 !important;
328 |   max-height: none !important;
329 | }
330 | #PlacesToolbarItems {
331 |   display: flex;
332 |   flex-wrap: wrap;
333 |   padding: 0 var(--6);
334 | }
335 | #PlacesToolbarItems > .bookmark-item {
336 |   margin: 0 var(--8) var(--8) 0 !important;
337 |   padding: 0 var(--6) !important;
338 |   background: var(--item) !important;
339 |   color: grey !important;
340 |   height: var(--tab-min-height);
341 | }
342 | 
343 | 
344 | 
345 | /* 🔗 URLBAR Inbut https: */
346 | #urlbar-input {
347 |   transition: transform 0.1s linear;
348 |   transform: none !important;
349 |   font-size: 1rem !important;
350 |   color: lightgrey !important;
351 |   padding-inline: 0px !important;
352 | }
353 | 
354 | /* 📐 URLBAR in Tab */
355 | /* Source: https://github.com/MrOtherGuy/firefox-csshacks/.../selected_tab_as_urlbar.css */
356 | 
357 | #main-window > body > box {
358 |   position: relative;
359 |   z-index: 1;
360 | }
361 | .urlbar-input-box {
362 |   z-index: -1 !important;
363 | }
364 | #alltabs-button,
365 | #unified-extensions-button,
366 | #PanelUI-button,
367 | #nav-bar-overflow-button {
368 |   z-index: 2;
369 |   position: relative;
370 | }
371 | #urlbar-input-container > :not(.urlbar-input-box) {
372 |   opacity: 0;
373 | }
374 | #urlbar-background {
375 |   background: none !important;
376 | }
377 | #urlbar-container {
378 |   position: static !important;
379 | }
380 | .urlbarView {
381 |   background: var(--item);
382 |   z-index: 1;
383 |   padding: var(--6);
384 |   border-radius: var(--6);
385 |   left: 50vw;
386 |   width: max(50vw, 320px) !important;
387 |   transform: translateX(-50%) !important;
388 | }
389 | #nav-bar {
390 |   height: var(--tab-min-height) !important;
391 |   background-color: transparent !important;
392 | }
393 | 
394 | /* 📐 Click Tab to Focus Urlbar */
395 | /* Source: https://github.com/MrOtherGuy/firefox-csshacks/.../click_selected_tab_to_focus_urlbar.css*/
396 | 
397 | /* Make selected tab unclickable => click > capture box */
398 | .tabbrowser-tab:not([pinned])[selected] {
399 |   pointer-events: none;
400 | }
401 | 
402 | /* Retore pointer-events for usability */
403 | #TabsToolbar toolbarbutton,
404 | #TabsToolbar toolbaritem,
405 | .tabbrowser-tab,
406 | .tab-close-button,
407 | .tab-icon-stack {
408 |   pointer-events: auto;
409 | }
410 | 
411 | /* Capture box: click to focus urlbar */
412 | :root:not([customizing]) #urlbar-input-container::before {
413 |   position: fixed;
414 |   display: flex;
415 |   flex: 1;
416 |   height: var(--tab-min-height);
417 |   width: 100%;
418 |   top: var(--8);
419 |   bottom: var(--8);
420 |   content: "";
421 | }
422 | #urlbar-input-container:focus-within::before {
423 |   display: none !important;
424 | }
425 | 
426 | /* Tabs over the capture box */
427 | :root:not([customizing]) #TabsToolbar-customization-target {
428 |   position: relative;
429 |   z-index: 1;
430 |   pointer-events: none;
431 | }
432 | 
433 | /* Tab Focus => Url Select */
434 | #navigator-toolbox:focus-within
435 |   .tabbrowser-tab:not([pinned])[selected]
436 |   .tab-content {
437 |   opacity: 0;
438 | }
439 | 
440 | /* Tab URL */
441 | #navigator-toolbox:focus-within .tab-background:not([pinned])[selected] {
442 |   background-position: var(--6) !important;
443 |   background-color: var(--main) !important;
444 |   background-size: auto !important;
445 |   background-image: -moz-element(#urlbar-input) !important;
446 | }
447 | 
448 | /* 🪟 Drag Window from urlbar */
449 | .urlbar-input-box,
450 | #urlbar-input,
451 | #urlbar-scheme,
452 | #urlbar-container {
453 |   -moz-window-dragging: drag;
454 |   cursor: default;
455 | }
456 | 
457 | /* ⬇️ Downloads Indicator */
458 | #downloads-button {
459 |   position: fixed !important;
460 |   top: 0 !important;
461 |   right: 0 !important;
462 |   width: var(--tab-min-height);
463 |   z-index: 1;
464 | }
465 | #downloads-indicator-progress-outer {
466 |   position: fixed !important;
467 |   align-items: end !important;
468 |   top: var(--8) !important;
469 |   right: var(--8) !important;
470 |   left: auto !important;
471 |   width: var(--6) !important;
472 |   height: var(--tab-min-height) !important;
473 |   border-radius: var(--6) !important;
474 |   background: var(--item);
475 |   visibility: visible !important;
476 | }
477 | #downloads-indicator-progress-inner {
478 |   background: url("data:image/svg+xml;charset=UTF-8,%3csvg width='6' height='24' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='6' height='24' fill='dodgerblue'/%3e%3c/svg%3e") bottom no-repeat !important;
479 |   height: var(--download-progress-pcent) !important;
480 |   border-radius: var(--6) !important;
481 | }
482 | #downloads-button[attention="success"] #downloads-indicator-progress-outer {
483 |   background: deepskyblue !important;
484 | }
485 | #downloads-button:is([attention="warning"], [attention="severe"])
486 |   #downloads-indicator-progress-inner {
487 |   background: orange !important;
488 |   height: var(--8) !important;
489 | }
490 | 
491 | /* ⬇️ Downloads Panel */
492 | #downloadsPanel {
493 |   position: fixed !important;
494 |   margin: 4px var(--6) !important;
495 | }
496 | #downloadsPanel-mainView {
497 |   background-color: var(--grey) !important;
498 |   color: black;
499 |   padding: var(--6) !important;
500 | }
501 | #downloadsFooterButtons > button,
502 | #downloadsListBox > richlistitem {
503 |   min-height: var(--tab-min-height) !important;
504 |   padding: 0 0 0 var(--6) !important;
505 |   margin: 0 !important;
506 |   border-radius: var(--6) !important;
507 | }
508 | #downloadsListBox > richlistitem * {
509 |   padding: 0 !important;
510 |   margin: 0 !important;
511 |   padding-block: 0 !important;
512 |   border-radius: var(--6) !important;
513 | }
514 | #downloadsListBox > richlistitem > .downloadMainArea {
515 |   margin-inline-end: var(--8) !important;
516 | }
517 | 
518 | 


--------------------------------------------------------------------------------
/chrome/userContent.css:
--------------------------------------------------------------------------------
 1 | /* Hide Personalize new tab */
 2 | @-moz-document url("about:home"),url("about:newtab"),url("about:blank") {
 3 |   .personalize-button {
 4 |     display: none !important;
 5 |   }
 6 | }
 7 | 
 8 | /* Highlight color inside browser content window */
 9 | ::selection {
10 |   background-color: dodgerblue !important;
11 |   color: white !important;
12 | }
13 | 


--------------------------------------------------------------------------------