├── LICENSE
├── README.md
├── add.svg
├── demo.gif
├── install.sh
├── left-arrow.svg
├── right-arrow.svg
├── userChrome.css
└── userContent.css


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019-2020 mut-ex
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # minimal-functional-fox
  2 | 
  3 | > ###### *A minimal, yet functional configuration for Firefox!*
  4 | 
  5 | <p align="center">
  6 | If you would like to show your appreciation for this project,<br>please consider a donation :)<br><br>
  7 | <a href="https://www.paypal.com/donate/?business=Y4Y75KP2JBNJW&currency_code=USD">
  8 | <img src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" alt="PayPal donation link"/></a>
  9 | <p>
 10 | 
 11 | ![Demo](https://raw.githubusercontent.com/mut-ex/minimal-functional-fox/master/demo.gif)
 12 | 
 13 | [![License](http://img.shields.io/:license-mit-blue.svg)](http://doge.mit-license.org)
 14 | ------
 15 | ## Features
 16 | 
 17 | - Minimal bloat (non-crucial icons and decorations hidden)
 18 | 
 19 | - Easy way to tweak fonts, colors, and spacings to your liking through CSS variables
 20 | 
 21 | - Tab list below toolbar
 22 | 
 23 | - Tab(s) with sound playing highlighted with a different color
 24 | 
 25 | - Centered URL bar with narrow-er results list
 26 | 
 27 | - And more!
 28 | 
 29 | ------
 30 | 
 31 | ## Prerequisites
 32 | 
 33 | * Verify that the user **stylesheets (userChrome)** option is enabled:
 34 |   1. Go to the address `about:config` in Firefox
 35 | 
 36 |   2. Search for `toolkit.legacyUserProfileCustomizations.stylesheets`
 37 | 
 38 |   3. Confirm the option is set to **true**
 39 | 
 40 | 
 41 | 
 42 | * Make sure that you have the **Default** theme enabled
 43 |   1. Go to the address `about:addons`
 44 |   2. **Enable** the **Default** theme if not already enabled
 45 | 
 46 | 
 47 | ------
 48 | 
 49 | ## Installation
 50 | 
 51 | ### Quick Install
 52 | 
 53 | You can quickly install minimal functional fox via the command-line by using `curl`:
 54 | 
 55 | ```bash
 56 | sh -c "$(curl -fsSL https://raw.githubusercontent.com/mut-ex/minimal-functional-fox/master/install.sh)"
 57 | ```
 58 | 
 59 | It is a good idea to inspect the install script for projects you aren't familiar with. To do that, you can download the install script separately, go through it to make sure everything looks OK, then go ahead and run it once you are satisfied:
 60 | 
 61 | ```bash
 62 | curl -Lo install.sh https://raw.githubusercontent.com/mut-ex/minimal-functional-fox/master/install.sh
 63 | sh install.sh
 64 | ```
 65 | 
 66 | **Note:** The install script will create a backup of your existing `userChrome.css`, and `userContent.css` files by renaming them to `userChrome.css~`, and `userContent.css~` respectively in the chrome directory.
 67 | 
 68 | ### Manual Install
 69 | 
 70 | If quick install does not work, or if you simply prefer to; you can manually install  minimal functional fox through the following steps:
 71 | 
 72 | 1. Locate your Firefox user directory. You should be able to find it by navigating to `/home/.mozilla/firefox/` and looking for a directory ending with the world `.default-release`.
 73 | 2. Within your Firefox user directory, locate the `chrome` directory, if one does not already exist you can simply go ahead and create it yourself.
 74 | 3. Download the contents of this repository, and copy *all* the files to the chrome directory within your Firefox user directory.
 75 | 
 76 | After installation, restart Firefox to see the effects.
 77 | 
 78 | ------
 79 | 
 80 | 
 81 | ## Recommended Tweaks
 82 | 
 83 | * Select the **Customize** option from the **hamburger menu** **(≡)**, and remove all items except for:
 84 |     * Forward button
 85 |     * Back button
 86 |     * Downloads button
 87 | * The new tab page extension is called **nightTab**. [You can can find it here](https://addons.mozilla.org/en-US/firefox/addon/nighttab/)
 88 | 
 89 | ------
 90 | 
 91 | ## Customizing
 92 | 
 93 | You can easily tweak the theme by changing the relevant CSS variables, starting with `--mff-` located within the :root section at the top of the `userChrome.css` file.
 94 | 
 95 | ```css
 96 |  :root {
 97 |      /* Minimal Functional Fox variables*/
 98 |      --mff-bg: #293241;
 99 |      --mff-icon-color: #e0fbfc;
100 |      --mff-nav-toolbar-padding: 8px;
101 |      /*
102 |      ...
103 |      ...
104 |      ...
105 |      */
106 | }
107 | ```
108 | 
109 | 


--------------------------------------------------------------------------------
/add.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?><!-- Generator: Gravit.io --><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 16 16" width="16pt" height="16pt"><defs><clipPath id="_clipPath_99lNy5iVNzBT4GJ61eRvLV4FbIJfEq2X"><rect width="16" height="16"/></clipPath></defs><g clip-path="url(#_clipPath_99lNy5iVNzBT4GJ61eRvLV4FbIJfEq2X)"><clipPath id="_clipPath_PSmJUw238rlrF3iVjoZbuIy7ApS18eFZ"><rect x="0" y="0" width="16" height="16" transform="matrix(1,0,0,1,0,0)" fill="rgb(255,255,255)"/></clipPath><g clip-path="url(#_clipPath_PSmJUw238rlrF3iVjoZbuIy7ApS18eFZ)"><g><defs><filter id="hr6gh2N39iEKGHUEUXPQ1VpI5CnFB6KP" x="-200%" y="-200%" width="400%" height="400%" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB"><feGaussianBlur xmlns="http://www.w3.org/2000/svg" in="SourceGraphic" stdDeviation="1.42936090628390283"/><feOffset xmlns="http://www.w3.org/2000/svg" dx="0" dy="0" result="pf_100_offsetBlur"/><feFlood xmlns="http://www.w3.org/2000/svg" flood-color="#000000" flood-opacity="0.65"/><feComposite xmlns="http://www.w3.org/2000/svg" in2="pf_100_offsetBlur" operator="in" result="pf_100_dropShadow"/><feBlend xmlns="http://www.w3.org/2000/svg" in="SourceGraphic" in2="pf_100_dropShadow" mode="normal"/></filter></defs><g filter="url(#hr6gh2N39iEKGHUEUXPQ1VpI5CnFB6KP)"><mask id="_mask_kcpkNUVqAh3jvumwkzpWdE5WZ1TZaYfV" x="-200%" y="-200%" width="400%" height="400%"><rect x="-200%" y="-200%" width="400%" height="400%" style="fill:white;"/><path d=" M 12.487 8 L 3.513 8 M 8 3.513 L 8 12.487" fill-rule="evenodd" fill="black" stroke="none"/></mask><path d=" M 12.487 8 L 3.513 8 M 8 3.513 L 8 12.487" fill-rule="evenodd" fill="rgb(0,0,0)" mask="url(#_mask_kcpkNUVqAh3jvumwkzpWdE5WZ1TZaYfV)" vector-effect="non-scaling-stroke" stroke-width="3" stroke="rgb(255,255,255)" stroke-opacity="100" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="3"/><path d=" M 12.487 8 L 3.513 8 M 8 3.513 L 8 12.487" fill-rule="evenodd" fill="rgb(0,0,0)"/></g></g></g></g></svg>


--------------------------------------------------------------------------------
/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mut-ex/minimal-functional-fox/495d16b1e052e47f0c8adc073a9dda7ed32501ff/demo.gif


--------------------------------------------------------------------------------
/install.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | 
 3 | echoerr() { printf "%s\n" "$*" >&2; }
 4 | 
 5 | download_mff() {
 6 |     echoerr " [>>] Downloading..."
 7 | 
 8 |     curl -LJ0 https://github.com/mut-ex/minimal-functional-fox/archive/master.tar.gz | tar -xz -C /tmp/
 9 | 
10 |     if [[ $? -eq 0 ]]; then
11 |         echoerr " [>>] Copying..."
12 | 
13 |         USERCHROME="/tmp/minimal-functional-fox-master/userChrome.css"
14 |         USERCONTENT="/tmp/minimal-functional-fox-master/userContent.css"
15 |         cp -r --backup=simple -t $CHROME_DIRECTORY $USERCHROME $USERCONTENT
16 |         rm -f USERCHROME USERCONTENT
17 |         cp -r /tmp/minimal-functional-fox-master/* $CHROME_DIRECTORY
18 | 
19 |         if [[ $? -eq 0 ]]; then
20 |             rm -rf /tmp/minimal-functional-fox-master
21 |         else
22 |             echoerr " [!!] There was a problem copying the files. Terminating..."
23 |             return 1
24 |         fi
25 |     else
26 |         echoerr " [!!] There was a problem downloading the files. Terminating..."
27 |         return 1
28 |     fi
29 |     cat <<-'EOF'
30 |             _       _                 _
31 |   _ __ ___ (_)_ __ (_)_ __ ___   __ _| |
32 |  | '_ ` _ \| | '_ \| | '_ ` _ \ / _` | |
33 |  | | | | | | | | | | | | | | | | (_| | |
34 |  |_|_|_| |_|_|_| |_|_|_| |_| |_|\__,_|_|       _
35 |   / _|_   _ _ __   ___| |_(_) ___  _ __   __ _| |
36 |  | |_| | | | '_ \ / __| __| |/ _ \| '_ \ / _` | |
37 |  |  _| |_| | | | | (__| |_| | (_) | | | | (_| | |
38 |  |_|_ \__,_|_| |_|\___|\__|_|\___/|_| |_|\__,_|_|
39 |   / _| _____  __
40 |  | |_ / _ \ \/ /
41 |  |  _| (_) >  <
42 |  |_|  \___/_/\_\
43 | 
44 | EOF
45 |     echoerr " Installation successful! Enjoy :)"
46 | }
47 | 
48 | MOZILLA_USER_DIRECTORY="$(find ~/.mozilla/firefox -maxdepth 1 -type d -regextype egrep -regex '.*[a-zA-Z0-9]+.default-release')"
49 | 
50 | if [[ -n $MOZILLA_USER_DIRECTORY ]]; then
51 |     # echoerr "mozilla user directory found: $MOZILLA_USER_DIRECTORY"
52 | 
53 |     CHROME_DIRECTORY="$(find $MOZILLA_USER_DIRECTORY -maxdepth 1 -type d -name 'chrome')"
54 | 
55 |     if [[ -n $CHROME_DIRECTORY ]]; then
56 |         # echoerr "chrome directory found: ""$CHROME_DIRECTORY"
57 |         download_mff
58 |     else
59 |         echoerr " [>>] No chrome directory found! Creating one..."
60 |         mkdir $MOZILLA_USER_DIRECTORY"/chrome"
61 |         if [[ $? -eq 0 ]]; then
62 |             CHROME_DIRECTORY="$MOZILLA_USER_DIRECTORY/chrome"
63 |             # echoerr "Directory succesfully created"
64 |             download_mff
65 |         else
66 |             echoerr " [!!] There was a problem creating the directory. Terminating..."
67 |             exit 1
68 |         fi
69 |     fi
70 | 
71 | else
72 |     echoerr " [!!] No mozilla user directory found. Terminating..."
73 |     exit 1
74 | fi
75 | 


--------------------------------------------------------------------------------
/left-arrow.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?><!-- Generator: Gravit.io --><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 16 16" width="16pt" height="16pt"><defs><clipPath id="_clipPath_z1ZWMbJsyhiOU2QHbFJoUMhQtGZ43GMW"><rect width="16" height="16"/></clipPath></defs><g clip-path="url(#_clipPath_z1ZWMbJsyhiOU2QHbFJoUMhQtGZ43GMW)"><defs><filter id="VFDVuOTf5K98KT4GTZIfo6t2oUeOZ3OQ" x="-200%" y="-200%" width="400%" height="400%" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB"><feGaussianBlur xmlns="http://www.w3.org/2000/svg" in="SourceGraphic" stdDeviation="1.42936090628390283"/><feOffset xmlns="http://www.w3.org/2000/svg" dx="0" dy="0" result="pf_100_offsetBlur"/><feFlood xmlns="http://www.w3.org/2000/svg" flood-color="#000000" flood-opacity="1"/><feComposite xmlns="http://www.w3.org/2000/svg" in2="pf_100_offsetBlur" operator="in" result="pf_100_dropShadow"/><feBlend xmlns="http://www.w3.org/2000/svg" in="SourceGraphic" in2="pf_100_dropShadow" mode="normal"/></filter></defs><g filter="url(#VFDVuOTf5K98KT4GTZIfo6t2oUeOZ3OQ)"><path d=" M 6.459 8.003 L 12.444 2.018 C 12.609 1.853 12.7 1.633 12.7 1.399 C 12.7 1.164 12.609 0.945 12.444 0.78 L 11.92 0.256 C 11.755 0.091 11.535 0 11.301 0 C 11.067 0 10.847 0.091 10.682 0.256 L 3.555 7.382 C 3.39 7.548 3.3 7.768 3.3 8.003 C 3.3 8.239 3.39 8.459 3.555 8.625 L 10.676 15.744 C 10.84 15.909 11.06 16 11.294 16 C 11.529 16 11.749 15.909 11.913 15.744 L 12.438 15.22 C 12.779 14.879 12.779 14.323 12.438 13.982 L 6.459 8.003 L 6.459 8.003 Z " fill="rgb(255,255,255)"/></g></g></svg>


--------------------------------------------------------------------------------
/right-arrow.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?><!-- Generator: Gravit.io --><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 16 16" width="16pt" height="16pt"><defs><clipPath id="_clipPath_eVFSl4zvN5oTHPzyWFXDKL3KvwnaLKzR"><rect width="16" height="16"/></clipPath></defs><g clip-path="url(#_clipPath_eVFSl4zvN5oTHPzyWFXDKL3KvwnaLKzR)"><clipPath id="_clipPath_whDLWxO2Es9F8hEuhZ0p3GS4myfSGk47"><rect x="0" y="0" width="16" height="16" transform="matrix(1,0,0,1,0,0)" fill="rgb(255,255,255)"/></clipPath><g clip-path="url(#_clipPath_whDLWxO2Es9F8hEuhZ0p3GS4myfSGk47)"><g><g filter="url(#ypa27OiaF8P4AvdUhn4W059B0fCNWPt7)"><path d=" M 9.541 8.003 L 3.556 2.018 C 3.391 1.853 3.3 1.633 3.3 1.399 C 3.3 1.164 3.391 0.945 3.556 0.78 L 4.08 0.256 C 4.245 0.091 4.465 0 4.699 0 C 4.933 0 5.153 0.091 5.318 0.256 L 12.445 7.382 C 12.61 7.548 12.7 7.768 12.7 8.003 C 12.7 8.239 12.61 8.459 12.445 8.625 L 5.324 15.744 C 5.16 15.909 4.94 16 4.706 16 C 4.471 16 4.251 15.909 4.087 15.744 L 3.562 15.22 C 3.221 14.879 3.221 14.323 3.562 13.982 L 9.541 8.003 L 9.541 8.003 Z " fill="rgb(255,255,255)"/></g><defs><filter id="ypa27OiaF8P4AvdUhn4W059B0fCNWPt7" x="-200%" y="-200%" width="400%" height="400%" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB"><feGaussianBlur xmlns="http://www.w3.org/2000/svg" in="SourceGraphic" stdDeviation="1.42936090628390283"/><feOffset xmlns="http://www.w3.org/2000/svg" dx="0" dy="0" result="pf_100_offsetBlur"/><feFlood xmlns="http://www.w3.org/2000/svg" flood-color="#000000" flood-opacity="1"/><feComposite xmlns="http://www.w3.org/2000/svg" in2="pf_100_offsetBlur" operator="in" result="pf_100_dropShadow"/><feBlend xmlns="http://www.w3.org/2000/svg" in="SourceGraphic" in2="pf_100_dropShadow" mode="normal"/></filter></defs></g></g></g></svg>


--------------------------------------------------------------------------------
/userChrome.css:
--------------------------------------------------------------------------------
  1 |  :root {
  2 | 
  3 |    /* Minimal Functional Fox variables*/
  4 |   --mff-bg: #292f36;
  5 |   --mff-icon-color: #e0fbfc;
  6 |   --mff-nav-toolbar-padding: 8px;
  7 |   --mff-sidebar-bg: var(--mff-bg);
  8 |   --mff-sidebar-color: #e0fbfc;
  9 |   --mff-tab-border-radius: 0px;
 10 |   --mff-tab-color: #fefefa;
 11 |   --mff-tab-font-family: "Cantarell", sans;
 12 |   --mff-tab-font-size: 11pt;
 13 |   --mff-tab-font-weight: 400;
 14 |   --mff-tab-height: 32px;
 15 |   --mff-tab-pinned-bg: #70c1b3;
 16 |   --mff-tab-selected-bg: #ee6c4d;
 17 |   --mff-tab-soundplaying-bg: #9c89b8;
 18 |   --mff-urlbar-color: #98c1d9;
 19 |   --mff-urlbar-focused-color: #e0fbfc;
 20 |   --mff-urlbar-font-family: "Cantarell", serif;
 21 |   --mff-urlbar-font-size: 12pt;
 22 |   --mff-urlbar-font-weight: 700;
 23 |   --mff-urlbar-results-color: #e0fbfc;
 24 |   --mff-urlbar-results-font-family: "mononoki Nerd Font", serif;
 25 |   --mff-urlbar-results-font-size: 12pt;
 26 |   --mff-urlbar-results-font-weight: 700;
 27 |   --mff-urlbar-results-url-color: #98c1d9;
 28 |   /*   --mff-tab-selected-bg: linear-gradient(90deg, rgba(232,74,95,1) 0%, rgba(255,132,124,1) 50%, rgba(254,206,168,1) 100%); */
 29 |   /*   --mff-urlbar-font-weight: 600; */
 30 | 
 31 |   /* Overriden Firefox variables*/
 32 |   --autocomplete-popup-background: var(--mff-bg) !important;
 33 |   --default-arrowpanel-background: var(--mff-bg) !important;
 34 |   --default-arrowpanel-color: #fefefa !important;
 35 |   --lwt-toolbarbutton-icon-fill: var(--mff-icon-color) !important;
 36 |   --panel-disabled-color: #f9f9fa80;
 37 |   --toolbar-bgcolor: var(--mff-bg) !important;
 38 |   --urlbar-separator-color: transparent !important;
 39 | }
 40 | 
 41 | /*
 42 |   _____ _   ___ ___
 43 |  |_   _/_\ | _ ) __|
 44 |    | |/ _ \| _ \__ \
 45 |    |_/_/ \_\___/___/
 46 | 
 47 | */
 48 | 
 49 | .tab-background[selected="true"] {
 50 |   background: var(--mff-tab-selected-bg) !important;
 51 | }
 52 | 
 53 | .tab-background:not[visuallyselected] {
 54 |   background: var(--mff-tab-selected-bg) !important;
 55 |   opacity: 0.5 !important;
 56 | }
 57 | 
 58 | /* This positions the tabs under the navaigator container */
 59 | #titlebar {
 60 |   -moz-box-ordinal-group: 3 !important;
 61 | }
 62 | 
 63 | .tabbrowser-tab::after,
 64 | .tabbrowser-tab::before {
 65 |   border-left: none !important;
 66 | }
 67 | 
 68 | .tab-background {
 69 |   border: none !important;
 70 | }
 71 | 
 72 | .tabbrowser-arrowscrollbox {
 73 |   margin-inline-start: 4px !important;
 74 |   margin-inline-end: 0px !important;
 75 | }
 76 | 
 77 | .tab-close-button {
 78 |  display: none !important;
 79 | }
 80 | 
 81 | .tab-text {
 82 |   font-family: var(--mff-tab-font-family);
 83 |   font-weight: var(--mff-tab-font-weight);
 84 |   font-size: var(--mff-tab-font-size) !important;
 85 |   color: var(--mff-tab-color);
 86 | }
 87 | 
 88 | /* Hide the favicon for tabs */
 89 | hbox.tab-content .tab-icon-image {
 90 |   display: none !important;
 91 | }
 92 | 
 93 | /* Show the favicon for tabs that are pinned */
 94 | hbox.tab-content[pinned=true] .tab-icon-image {
 95 |   display: initial !important;
 96 | }
 97 | 
 98 | hbox.tab-content[pinned=true] .tab-text {
 99 |   display: none !important;
100 | }
101 | 
102 | #tabbrowser-tabs {
103 |   --tab-loading-fill: #033433 !important;
104 | 
105 | }
106 | 
107 | .tab-label-container:not([textoverflow]) {
108 |   display: flex;
109 |   overflow: hidden;
110 |   justify-content: center;
111 | width: 50% !important;
112 |   max-width: 50% !important;
113 |   min-width: 50% !important;
114 | }
115 | 
116 | /* .tab-label-container::after {
117 |   content: "?" !important;
118 | 
119 | } */
120 | 
121 | .tab-line {
122 |   display: none !important;
123 | }
124 | 
125 | .tabbrowser-tab {
126 |   border-radius: var(--mff-tab-border-radius) !important;
127 |   border-width: 0;
128 |   height: var(--mff-tab-height) !important;
129 |   margin-bottom: 4px !important;
130 |   margin-inline-end: 4px !important;
131 |   margin-top: 4px !important;
132 |   max-height: var(--mff-tab-height) !important;
133 |   min-height: var(--mff-tab-height) !important;
134 | }
135 | 
136 | .tabbrowser-tab[soundplaying="true"] {
137 |   background-color: var(--mff-tab-soundplaying-bg) !important;
138 | }
139 | 
140 | #tabs-newtab-button {
141 |   list-style-image: url("add.svg") !important;
142 |   opacity: 0.7;
143 | }
144 | 
145 | .tab-icon-sound {
146 |   display: none !important;
147 | }
148 | 
149 | /*
150 |   _____ ___   ___  _    ___   _   ___
151 | |_   _/ _ \ / _ \| |  | _ ) /_\ | _ \
152 |   | || (_) | (_) | |__| _ \/ _ \|   /
153 |   |_| \___/ \___/|____|___/_/  \_\_|_\
154 | */
155 | 
156 | .urlbar-icon > image {
157 |   fill: var(--mff-icon-color) !important;
158 |   color: var(--mff-icon-color) !important;
159 | }
160 | 
161 | .toolbarbutton-text {
162 |   color: var(--mff-icon-color)  !important;
163 | }
164 | .urlbar-icon {
165 |   color: var(--mff-icon-color)  !important;
166 | 
167 | }
168 | 
169 | .toolbarbutton-icon {
170 | /* filter: drop-shadow(0 0 0.75rem crimson); */
171 | }
172 | 
173 | #urlbar-results {
174 |   font-family: var(--mff-urlbar-results-font-family);
175 |   font-weight: var(--mff-urlbar-results-font-weight);
176 |   font-size: var(--mff-urlbar-results-font-size) !important;
177 |   color: var(--mff-urlbar-results-color) !important;
178 | }
179 | 
180 | .urlbarView-row[type="bookmark"] > span{
181 |   color: green !important;
182 | }
183 | 
184 | .urlbarView-row[type="switchtab"] > span{
185 |   color: orange !important;
186 | }
187 | 
188 | .urlbarView-url, .search-panel-one-offs-container {
189 |   color: var(--mff-urlbar-results-url-color) !important;
190 |   font-family: var(--mff-urlbar-font-family);
191 |   font-weight: var(--mff-urlbar-results-font-weight);
192 |   font-size: var(--mff-urlbar-font-size) !important;
193 | }
194 | 
195 | .urlbarView-favicon, .urlbarView-type-icon {
196 |   display: none !important;
197 | }
198 | 
199 | #urlbar-input {
200 |   font-size: var(--mff-urlbar-font-size) !important;
201 |   color: var(--mff-urlbar-color) !important;
202 |   font-family: var(--mff-urlbar-font-family) !important;
203 |   font-weight: var(--mff-urlbar-font-weight)!important;
204 |   text-align: center !important;
205 | }
206 | 
207 | #tracking-protection-icon-container, #identity-box {
208 |   display: none;
209 | }
210 | 
211 | #back-button > .toolbarbutton-icon{
212 |   --backbutton-background: transparent !important;
213 |   border: none !important;
214 | }
215 | 
216 | #back-button {
217 |   list-style-image: url("left-arrow.svg") !important;
218 | }
219 | 
220 | #forward-button {
221 |   list-style-image: url("right-arrow.svg") !important;
222 | }
223 | 
224 | toolbar {
225 |   background-image: none !important;
226 | }
227 | 
228 | #urlbar-background {
229 |   opacity: .98 !important;
230 | }
231 | 
232 | #navigator-toolbox, toolbaritem {
233 |   border: none !important;
234 | }
235 | 
236 | #urlbar-background {
237 |   background-color: var(--mff-bg) !important;
238 |   border: none !important;
239 | }
240 | 
241 | .toolbar-items {
242 |   background-color: var(--mff-bg) !important;
243 | }
244 | 
245 | #sidebar-search-container {
246 |   background-color: var(--mff-sidebar-bg) !important;
247 | }
248 | 
249 | box.panel-arrowbox {
250 |   display: none;
251 | }
252 | 
253 | box.panel-arrowcontent {
254 |   border-radius: 8px !important;
255 |   border: none !important;
256 | }
257 | 
258 | tab.tabbrowser-tab {
259 |   overflow: hidden;
260 | }
261 | 
262 | tab.tabbrowser-tab:hover {
263 |   box-shadow: 0 1px 4px rgba(0,0,0,.05);
264 | }
265 | 
266 | image#star-button {
267 |   display: none;
268 | }
269 | 
270 | toolbar#nav-bar {
271 |   padding: var(--mff-nav-toolbar-padding) !important;
272 | }
273 | 
274 | toolbar#nav-bar {
275 |   padding: 4px !important;
276 | }
277 | 
278 | #urlbar {
279 |   max-width: 70% !important;
280 |   margin: 0 15% !important;
281 |   /* 	position: unset!important; */;
282 | }
283 | 
284 | #urlbar-input:focus {
285 |   color: var(--mff-urlbar-focused-color) !important;
286 | }
287 | 
288 | 
289 | .megabar[breakout-extend="true"]:not([open="true"]) > #urlbar-background {
290 |   box-shadow: none !important;
291 |   background-color: transparent !important;
292 | }
293 | 
294 | toolbarbutton {
295 |   box-shadow: none !important;
296 | }
297 | 
298 | 
299 | /*
300 |   ___ ___ ___  ___ ___   _   ___
301 |  / __|_ _|   \| __| _ ) /_\ | _ \
302 |  \__ \| || |) | _|| _ \/ _ \|   /
303 |  |___/___|___/|___|___/_/ \_\_|_\
304 | */
305 | 
306 | .close-icon, .urlbar-icon {
307 |   fill: var(--mff-icon-color) !important;
308 | }
309 | 
310 | .sidebar-placesTree {
311 |   color: var(--mff-sidebar-color) !important;
312 | }
313 | 
314 | #sidebar-switcher-target {
315 | /*   color: white !important; */
316 | }
317 | 
318 | #sidebar-box {
319 |   --sidebar-background-color: var(--mff-sidebar-bg) !important;
320 | }
321 | 
322 | splitter#sidebar-splitter {
323 |   opacity: 0 !important;
324 | }
325 | 
326 | splitter#sidebar-splitter {
327 |   border: none !important;
328 |   background-color: transparent !important;
329 | }
330 | 
331 | image#sidebar-icon {
332 |   display: none;
333 | }
334 | 
335 | 
336 | /*
337 |     _   ___ ___  _____      _____  _   _  _ ___ _
338 |    /_\ | _ \ _ \/ _ \ \    / / _ \/_\ | \| | __| |
339 |   / _ \|   /   / (_) \ \/\/ /|  _/ _ \| .` | _|| |__
340 |  /_/ \_\_|_\_|_\\___/ \_/\_/ |_|/_/ \_\_|\_|___|____|
341 |  */
342 | 
343 | .panel-arrowcontent {
344 |   padding: 0px !important;
345 |   margin: 0px !important;
346 | }
347 | 
348 | toolbarseparator {
349 |   display: none;
350 | }


--------------------------------------------------------------------------------
/userContent.css:
--------------------------------------------------------------------------------
 1 | @import url("userChrome.css");
 2 | 
 3 | /* Removes white loading page */
 4 | @-moz-document url(about:blank), url(about:newtab), url(about:home) {
 5 |     html:not(#ublock0-epicker), html:not(#ublock0-epicker) body, #newtab-customize-overlay {
 6 |       background: var(--mff-bg) !important;
 7 |     }
 8 |   }
 9 | 
10 | 
11 |   /* Hide scrollbar */
12 | 
13 |   :root{
14 |     scrollbar-width: none !important;
15 |   }
16 | 
17 | 
18 |   @-moz-document url(about:privatebrowsing) {
19 | 
20 |   :root{
21 |     scrollbar-width: none !important;
22 |   }
23 |   }


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