├── .dockerignore
├── .gitignore
├── Dockerfile
├── LICENSE
├── README.md
├── resources
    └── images
    │   └── firefox_monolite_hero.png
├── startup-page
    ├── index.html
    └── src
    │   ├── css
    │       └── style.css
    │   ├── database
    │       └── profile.json
    │   ├── images
    │       └── monolite_logo.png
    │   └── js
    │       └── index.js
└── theme
    └── chrome
        └── userChrome.css


/.dockerignore:
--------------------------------------------------------------------------------
1 | Dockerfile
2 | .dockerignore
3 | .git
4 | .github
5 | README.md
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .env
2 | env/
3 | .env/
4 | 
5 | vscode/
6 | .vscode/


--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
1 | FROM nginx:alpine
2 | 
3 | COPY ./startup-page /usr/share/nginx/html
4 | 
5 | CMD ["nginx", "-g", "daemon off;"]
6 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Kalos Lazo
 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 | ![firefox_monolite_hero](resources/images/firefox_monolite_hero.png)
  2 | 
  3 | <br />
  4 | <p align="center">
  5 |     <a href="./LICENSE">
  6 |         <img src="https://img.shields.io/static/v1.svg?style=for-the-badge&label=With%20love%20from&message=PERU&colorA=333333&colorB=E6A3A2"/>
  7 |     </a>
  8 |     <a href="https://github.com/catppuccin/catppuccin/blob/main/LICENSE">
  9 |         <img src="https://img.shields.io/static/v1.svg?style=for-the-badge&label=License&message=MIT&logoColor=333333&colorA=333333&colorB=B8D9B0"/>
 10 |     </a>
 11 | </p>
 12 | 
 13 | ## 🌱 Genesis
 14 | 
 15 | <p align="justify">
 16 | Monolite theme aims to combine the beauty of pastel colors with monochromatic tones. Using small fonts, prioritizes screen space for greater vision range and increased productivity. On the other hand, we really recommend to use <a href="https://github.com/noriaku/firefox-monolite/tree/main/startup-page">monolite startup page</a>, designed for people who love terminal environment feeling & ascii art.
 17 | </p>
 18 |  
 19 | ## 🦊 Firefox Theme guide
 20 | 
 21 | To start, you must clone the repo. You will get also the folder `startup-page`, I really recommend you to follow steps to use it as startpage, cuz works with the same colorscheme and philosophy.
 22 | 
 23 | 1. Inside Firefox search at the top bar for `about:support`.
 24 | 2. Find the `Profile Folder` and click `Open Folder`. This gives your Firefox Profile Folder.
 25 | 3. Move `chrome` folder inside theme folder to your Profile Folder.
 26 | 4. Inside `about:config` set the following properties (changing the boolean value):
 27 |    - `browser.search.widget.inNavBar`: false
 28 |    - `services.sync.prefs.sync.browser.urlbar.showSearchSuggestionsFirst`: false
 29 | 5. Restart firefox, and be familiar with the keys.
 30 | 
 31 | > Obs. If you want to uninstall the theme, just must remove `chrome` folder inside your Firefox Profile Folder and restart your browser.
 32 | 
 33 | ## 🚀 Startpage guide
 34 | 
 35 | To start, you must clone the repo and move the folder `startup-page` to a save place.
 36 | 
 37 | 1. Click on menu icon in the top right corner in firefox and move to "Home" tab. Or put `about:preferences#home` in your top search bar.
 38 | 2. In the "Home" tab, look for "New Windows and Tabs" section.
 39 | 3. Inside "Homepage and new windows" set the path of startup-page folder with index.html. For example `file:///home/noriaku/Documents/startup-page/index.html` or a URL with your local webserver.
 40 | 
 41 | By the way, for customize the startpage with your custom data (nickname, city, etc), you must edit the database placed at `startup-page/src/database/profile.json`. It allows you to change the following fields:
 42 | 
 43 | - Username
 44 | - Category name
 45 | - Links of each category
 46 | - City & Country
 47 | 
 48 | Obs. I really recommend you to hostself your startup-page using any local webserver, for example, docker looks atractive for me. If not, weather api won't work cuz CORS problems. On the other hand, you must change the API coordinates with your own info inside `index.js`, check: [open meteo documentation](https://open-meteo.com/en/docs), it's very easy & free.
 49 | 
 50 | ## 🦅 Setting up Apache
 51 | 
 52 | As many people ask how use the startpage with a local web server: many extensions needs to work with local webserver, I'll explain step by step how configure your local web server using apache and a Linux distribution, in this case: debian.
 53 | 
 54 | 1. Update system & install packages.
 55 | 
 56 | ```bash
 57 | sudo apt update; sudo apt install apache2; # Instructions for debian based distros.
 58 | ```
 59 | 
 60 | 2. Copy or move all the files of `start-page` inside apache web server path
 61 | 
 62 | ```bash
 63 | sudo mv /path/to/startup-page/* /var/www/html
 64 | ```
 65 | 
 66 | 3. Start the web server & it's all. Server will be running at `127.0.0.1` or `localhost` (use that URL in your extension or firefox address for new tab).
 67 | 
 68 | ```bash
 69 | sudo systemctl enable apache2
 70 | ```
 71 | 
 72 | > Obs. Guide made for debian based distros, cuz of `apt` packages. On the other hand, I've tested this setup using the [New Tab Override](https://addons.mozilla.org/en-US/firefox/addon/new-tab-override/) extension, and it works perfectly. Any questions, open a new issue.
 73 | 
 74 | ## 🐋 Setting up Docker
 75 | 
 76 | Docker is another convenient way to host the start page. You must install docker, for that see [docs](https://docs.docker.com/get-docker/).
 77 | 
 78 | 1. Build the image via `docker` command. All the instructions are written inside Dockerfile.
 79 | 
 80 | ```bash
 81 | docker build -t startup-page .
 82 | ```
 83 | 
 84 | 2. Run the image. You can change the port mapping of `8080` into something you want. At this point you must see your startup-page at `localhost:8080`.
 85 | 
 86 | ```bash
 87 | docker run -d -p 8080:80 startup-page
 88 | ```
 89 | 
 90 | 3. Change your startup page (`user.js` file, in your Profile Directory path). This will do automatically the config, also you can use an extension of New Tab or manually change the URL to show as new firefox windows inside configuration.
 91 | 
 92 | ```js
 93 | /*
 94 |  * Set startup page
 95 |  * 0 = blank , 1 = home, 2 = last visited, 3 = resume previous session
 96 | */
 97 | user_pref('browser.startup.page', 0);
 98 | /*
 99 |  * Set home page
100 |  * about:home = Firefox Home, custom url, about:blank
101 | */
102 | user_pref('browser.startup.homepage', 'http://localhost:<port>');
103 | ```
104 | 
105 | > Obs. Using Docker with the -d option allows it to run as a background process, so it will operate each time you turn on your PC. On the other hand, if it does not work, you can try using: `docker run -d -p 8080:80 --restart=unless-stopped startup-page`, which will explicitly set it to do so.
106 | 
107 | ## 💡 Shorcuts
108 | 
109 | 1. Open new tab: `Ctrl + T`.
110 | 2. Close tab: `Ctrl + W`.
111 | 3. Bookmarks: `Ctrl + Shift + B`.
112 | 4. Previus page: `Alt + Left arrow`.
113 | 5. Next page: `Alt + Right arrow`.
114 | 6. Recharge: `Ctrl + R`.
115 | 7. Change next tab: `Ctrl + Tab`.
116 | 8. Change previous tab `Ctrl + Shift + Tab`.
117 | 


--------------------------------------------------------------------------------
/resources/images/firefox_monolite_hero.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/noriaku/FirefoxMonolite/e62ee2cc5ec00df2be494037ffd1a0405133a89e/resources/images/firefox_monolite_hero.png


--------------------------------------------------------------------------------
/startup-page/index.html:
--------------------------------------------------------------------------------
 1 | <!-- @noriaku | Kalos Lazo -->
 2 | 
 3 | <!DOCTYPE html>
 4 | <html lang="en">
 5 | <head>
 6 |   <meta charset="UTF-8">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |   <link rel="stylesheet" href="src/css/style.css">
 9 |   <link rel="shortcut icon" href="src/images/monolite_logo.png" type="image/x-icon">
10 |   <title>MonoLite</title>
11 | </head>
12 | <body class="flex">
13 | <!--===: top section :===-->
14 | <section id="section_top_info" class="flex">
15 |   <div id="time_welcome" class="text-center">
16 |     <h3 id="current_time">11:11</h3>
17 |     <h5>Welcome, <strong class="username">Noriaku</strong></h5>
18 |   </div>
19 |   <div id="date_weather" class="text-center">
20 |     <h3 id="current_date">Feb 28</h3>
21 |     <h5 id="current_weather">23°C | took 47ms</h5>
22 |   </div>
23 | </section>
24 | 
25 | <!--===: middle section :===-->
26 | <section id="section_middle_search" class="flex">
27 |   <form action="https://www.google.com/search" method="get" class="terminal-form">
28 |     <label for="search"><span class="col-04"> main</span> <span class="col-01 username">noriaku</span><span class="col-03">@minimal</span><span class="col-02">:~$</span> </label>
29 |     <input type="text" name="q" id="search" placeholder="" autocomplete="off" autofocus>
30 |   </form>
31 | </section>
32 | 
33 | <!--===: bottom section | links 6 categories :===-->
34 | <section id="section_bottom_links" class="flex"> </section>
35 | 
36 | <script src="src/js/index.js"></script>
37 | </body>
38 | </html>
39 | 


--------------------------------------------------------------------------------
/startup-page/src/css/style.css:
--------------------------------------------------------------------------------
  1 | /* @noriaku | Kalos Lazo */
  2 | 
  3 | /*===: root :===*/
  4 | /* Change with your colorscheme colors ;)  */
  5 | :root {
  6 |     --bg-dark-01: #1A1A1A;
  7 |     --bg-dark-02: #2A2A2A;
  8 |     --bg-dark-03: #333333;
  9 |     --bg-dark-04: #3D3D3D;
 10 |     --bg-dark-05: #505050;
 11 |     --bg-dark-05: #636363;
 12 |     
 13 |     --bg-white-02: #DBDBDB;
 14 |     --bg-white-03: #CDCDCD;
 15 |     --bg-white-01: #E8E8E8;
 16 |     --bg-white-04: #F5F5F5;
 17 | 
 18 |     --col-red-01: #C88383;
 19 |     --col-red-02: #D79393;
 20 |     --col-red-03: #E6A3A2;
 21 |     
 22 |     --col-light-orange-01: #C69F66;
 23 |     --col-light-orange-02: #D7B47A;
 24 |     --col-light-orange-03: #E6C98E;
 25 |     
 26 |     --col-purple-01: #A57FAE;
 27 |     --col-purple-02: #B694C1;
 28 |     --col-purple-03: #C7A9D4;
 29 |     
 30 |     --col-yellow-01: #C7B885;
 31 |     --col-yellow-02: #E0D195;
 32 |     --col-yellow-03: #F9EAA5;
 33 |     
 34 |     --col-green-01: #96BF7E;
 35 |     --col-green-02: #A7CC97;
 36 |     --col-green-03: #B8D9B0;
 37 |     
 38 |     --col-sky-blue-01: #7DB4CE;
 39 |     --col-sky-blue-02: #90C6E1;
 40 |     --col-sky-blue-03: #A3D8F4;
 41 | 
 42 |     --ff-mono: "Agave Nerd Font";
 43 |     --ff-weight-base: 400;
 44 | }
 45 | 
 46 | /*===: general :===*/
 47 | * {
 48 |     margin: 0;
 49 |     padding: 0;
 50 |     font-family: var(--ff-mono);
 51 |     font-weight: var(--ff-weight-base);
 52 |     box-sizing: border-box;
 53 | }
 54 | a {
 55 |     color: var(--bg-white-03);
 56 |     font-style: normal;
 57 |     text-decoration: none;
 58 | }
 59 | a:hover {
 60 |     color: var(--col-red-01);
 61 |     text-decoration: underline;
 62 | }
 63 | 
 64 | /*===: helpers :===*/
 65 | .flex {
 66 |     display: flex;
 67 |     align-items: center;
 68 | }
 69 | .text-center {
 70 |     text-align: center;
 71 | }
 72 | 
 73 | /*===: body :===*/
 74 | body {
 75 |     width: 100%;
 76 |     height: 100vh;
 77 |     max-width: 900px;
 78 |     margin: 0 auto;
 79 |     padding: 0 2em;
 80 |     flex-direction: column;
 81 |     justify-content: center;
 82 |     gap: 1em;
 83 |     color: var(--bg-white-01);
 84 |     background-color: var(--bg-dark-01);
 85 | }
 86 | 
 87 | /*===: top section :===*/
 88 | #section_top_info {
 89 |     width: 100%;
 90 |     margin: 1em 0em;
 91 |     padding: 2.2em 0em;
 92 |     justify-content: space-evenly;
 93 | }
 94 | #time_welcome h3, #date_weather h3 {
 95 |     font-size: 3.2em;
 96 |     font-weight: bold;
 97 | }
 98 | #time_welcome h5, #date_weather h5 {
 99 |     margin-top: .5em;
100 |     font-size: 1.2em;
101 | }
102 | 
103 | /*===: bottom section :===*/
104 | #section_bottom_links {
105 |     width: 100%;
106 |     margin: 1em 0em;
107 |     gap: 1em;
108 |     justify-content: center;
109 | }
110 | .generic_link {
111 |     width: 100%;
112 |     padding: 1.1em 1.1em;
113 |     background: var(--bg-dark-02);
114 | }
115 | 
116 | /*===: middle section :===*/
117 | #section_middle_search {
118 |     width: 100%;
119 |     justify-content: center;
120 |     padding: 1em 2em;
121 |     background-color: var(--bg-dark-02);
122 | }
123 | .terminal-form {
124 |     width: 100%;
125 |     display: flex;
126 |     align-items: center;
127 |     justify-content: start;
128 | }
129 | .terminal-form label {
130 |     width: auto;
131 |     margin-right: 1em;
132 | }
133 | .terminal-form input[type="text"] {
134 |     border: none;
135 |     flex-grow: 1;
136 |     background-color: var(--bg-dark-02);
137 |     color: var(--bg-white-01);
138 | }
139 | .terminal-form input[type="text"]:focus {
140 |     outline: none;
141 | }
142 | 
143 | /*===: prompt section :===*/
144 | .prompt_link {
145 |     margin-bottom: 0.5em;
146 | }
147 | .res_prompt {
148 |     margin-left: 1.5em;
149 | }
150 | .res_folder {
151 |     color: var(--col-purple-01);
152 | }
153 | 
154 | /*===: global colors section :===*/
155 | .col-01 {
156 |     color: var(--col-red-01);
157 | }
158 | .col-02 {
159 |     color: var(--col-sky-blue-02);
160 | }
161 | .col-03 {
162 |     color: var(--col-purple-01);
163 | }
164 | .col-04 {
165 |     color: var(--col-yellow-01);
166 | }


--------------------------------------------------------------------------------
/startup-page/src/database/profile.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "username": "noriaku",
 3 |     
 4 |     "country": "Peru",
 5 |     "city": "Lima",
 6 | 
 7 |     "categories": {
 8 |         "work": {
 9 |             "slack": "https://slack.com/",
10 |             "trello": "https://trello.com"
11 |         },
12 |         "news": {
13 |             "xataka": "https://xataka.com",
14 |             "theverge": "https://theverge.com"
15 |         },
16 |         "social": {
17 |             "github": "https://github.com",
18 |             "reddit": "https://reddit.com"
19 |         }
20 |     }
21 | }


--------------------------------------------------------------------------------
/startup-page/src/images/monolite_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/noriaku/FirefoxMonolite/e62ee2cc5ec00df2be494037ffd1a0405133a89e/startup-page/src/images/monolite_logo.png


--------------------------------------------------------------------------------
/startup-page/src/js/index.js:
--------------------------------------------------------------------------------
 1 | // @noriaku | Kalos Lazo
 2 | 
 3 | //===: get username :===
 4 | async function handle_get_username() {
 5 |     const database = await fetch('src/database/profile.json');
 6 |     const data = await database.json();
 7 |     const username = data.username;
 8 | 
 9 |     // get links & categories
10 |     const categories = data.categories;
11 |     const links_sections = document.getElementById('section_bottom_links');
12 | 
13 |     // change each categorie link data
14 |     for (let category in categories) {
15 |         let actual_category_container = document.createElement('div');
16 |         actual_category_container.className = 'generic_link';
17 | 
18 |         // make each prompt
19 |         let promptLinkDiv = document.createElement('div');
20 |         promptLinkDiv.className = 'prompt_link';
21 |         promptLinkDiv.innerHTML = `<p><span class="col-01">➜</span> <span class="col-02">ls</span> <span class="col-02">-T</span> <span class="col-04">${category}/</span> </p>`;
22 |         actual_category_container.appendChild(promptLinkDiv);
23 | 
24 |         // show category name as responde (from ls -T)
25 |         let resPromptDiv = document.createElement('div');
26 |         resPromptDiv.className = 'res_prompt';
27 |         resPromptDiv.innerHTML = `<p class="res_folder">${category}/</p>`;
28 | 
29 |         // add each link from actual category
30 |         for (let link in categories[category]) {
31 |             let p = document.createElement('p');
32 |             p.innerHTML = `└── <a href="${categories[category][link]}">${link}</a>`;
33 |             resPromptDiv.appendChild(p);
34 |         };
35 | 
36 |         actual_category_container.appendChild(resPromptDiv);
37 |         links_sections.appendChild(actual_category_container);
38 |     };
39 | 
40 |     // for all .username clases update data.
41 |     const user_name_elements = document.getElementsByClassName("username");
42 |     for (let i = 0; i < user_name_elements.length; i++) {
43 |         user_name_elements[i].textContent = username;
44 |     }
45 | }
46 | 
47 | //===: current date implementation :===
48 | function handle_current_date() {
49 |     const current_date_element = document.getElementById('current_date');
50 |     const now = new Date();
51 |     const month = now.toLocaleString('default', { month: 'short' });
52 |     const day = now.getDate();
53 | 
54 |     current_date_element.textContent = `${month} ${day}`;
55 | }
56 | 
57 | //===: get weather implementation :===
58 | async function handle_current_weather() {
59 |     const current_weather_element = document.getElementById('current_weather');
60 |     
61 |     const database = await fetch('src/database/profile.json');
62 |     const database_json = await database.json();
63 |     
64 |     const API = database_json.API_KEY;
65 |     const city = database_json.city;
66 |     const country = database_json.country;
67 |     
68 |     const response = await fetch(`https://api.open-meteo.com/v1/forecast?latitude=52.52&longitude=13.41&current_weather=true`);
69 |     const data = await response.json();
70 | 
71 |     const temperature = Math.round(data.current_weather.temperature);
72 |     const description = "took 41ms";
73 | 
74 |     current_weather_element.textContent = `${temperature} °C | ${description}`;
75 | };
76 | 
77 | //===: current time implementation :===
78 | function handle_current_time() {
79 |     const current_time_element = document.getElementById('current_time');
80 |     const now = new Date();
81 |     const hours = now.getHours().toString().padStart(2, '0');
82 |     const minutes = now.getMinutes().toString().padStart(2, '0');
83 | 
84 |     current_time_element.textContent = `${hours}:${minutes}`;
85 | };
86 | 
87 | handle_current_time();
88 | handle_current_date();
89 | handle_current_weather();
90 | handle_get_username();
91 | 
92 | setInterval(handle_current_time, 60000);
93 | 


--------------------------------------------------------------------------------
/theme/chrome/userChrome.css:
--------------------------------------------------------------------------------
  1 | /*///// GLOBAL /////*/
  2 | :root {
  3 |     --border-color: #000000;
  4 |     --bg-color: #1A1A1A;
  5 |     --bg-sub-color: #333333;
  6 |     --bg-sub-sub-color: #505050;
  7 |     --red-color: #C88383;
  8 |     --yellow-color: #D7B47A;
  9 |     --selected-color: #FFFFFF;
 10 |     --text-primary: #F5F5F5;
 11 | }
 12 | 
 13 | #back-button {
 14 |     display: -moz-inline-box !important;
 15 | }
 16 | 
 17 | #forward-button,
 18 | #back-button,
 19 | #reload-button,
 20 | #stop-button,
 21 | #tabs-newtab-button {
 22 |     display: none !important;
 23 | }
 24 | 
 25 | /*///// TOOLBAR /////*/
 26 | #nav-bar {
 27 |     padding: 3px 10px !important;
 28 |     border-color: var(--border-color) !important;
 29 |     color: var(--selected-color) !important;
 30 | }
 31 | 
 32 | #nav-bar,
 33 | #nav-bar:-moz-window-inactive,
 34 | #TabsToolbar,
 35 | #TabsToolbar:-moz-window-inactive {
 36 |     box-shadow: var(--border-color) !important;
 37 |     background: var(--bg-color) !important;
 38 |     color: var(--selected-color) !important;
 39 | }
 40 | 
 41 | #PersonalToolbar,
 42 | #PersonalToolbar:-moz-window-inactive,
 43 | #toolbar-menubar,
 44 | #toolbar-menubar:-moz-window-inactive,
 45 | findbar,
 46 | findbar:-moz-window-inactive {
 47 |     appearance: none !important;
 48 |     border-color: var(--bg-color) !important;
 49 |     background: var(--bg-sub-color) !important;
 50 | }
 51 | 
 52 | .toolbar-items {
 53 |     padding: 0px 10px !important;
 54 |     padding-bottom: 2px !important;
 55 |     background-color: var(--bg-color);
 56 |     color: var(--selected-color) !important;
 57 | }
 58 | 
 59 | #PlacesToolbarItems {
 60 |     background-color: var(--bg-sub-color) !important;
 61 | }
 62 | 
 63 | /*///// NAVBAR /////*/
 64 | #urlnavbar {
 65 |     color: var(--selected-color) !important;
 66 | }
 67 | 
 68 | #statuspanel-label {
 69 |     color: white !important
 70 | }
 71 | 
 72 | #navigator-toolbox #nav-bar {
 73 |     -moz-box-ordinal-group: 0;
 74 |     background: var(--bg-color) !important;
 75 | }
 76 | 
 77 | #TabsToolbar[movingtab],
 78 | #TabsToolbar[movingtab]>.tabbrowser-tabs,
 79 | #TabsToolbar[movingtab]+#nav-bar {
 80 |     padding-bottom: 0 !important;
 81 | }
 82 | 
 83 | #urlbar {
 84 |     --urlbar-height: 35px;
 85 |     --urlbar-toolbar-height: 35px !important;
 86 |     color: var(--selected-color) !important;
 87 | }
 88 | 
 89 | #urlbar-background {
 90 |     border: 0 !important;
 91 |     border-radius: 3px !important;
 92 |     background: var(--bg-sub-color) !important;
 93 | }
 94 | 
 95 | .sharing-icon,
 96 | #identity-icon,
 97 | #permissions-granted-icon,
 98 | #tracking-protection-icon,
 99 | #blocked-permissions-container>.blocked-permission-icon {
100 |     width: 14px;
101 |     height: 14px;
102 | }
103 | 
104 | #navigator-toolbox-background {
105 |     background-color: var(--bg-color) !important;
106 | }
107 | 
108 | /*///// TAB /////*/
109 | tab[selected="true"] .tab-content {
110 |     color: var(--selected-color) !important;
111 | }
112 | 
113 | tab[selected="true"] .tab-background {
114 |     background: var(--bg-sub-color) !important;
115 | }
116 | 
117 | .tabbrowser-tab::after,
118 | .tabbrowser-tab::before {
119 |     border-left: 100 !important;
120 |     opacity: 1 !important;
121 | }
122 | 
123 | /* Ctrl - W close. */
124 | .tab-close-button {
125 |     display: none !important;
126 |     border-radius: 7px !important;
127 | }
128 | 
129 | .titlebar-spacer {
130 |     display: none !important
131 | }
132 | 
133 | .tab-background {
134 |     border-radius: 3px !important;
135 | }
136 | 
137 | .tab-content {
138 |     font-size: .9em;
139 | }
140 | 
141 | .tab-throbber-tabslist,
142 | .tab-throbber,
143 | .tab-icon-pending,
144 | .tab-icon-image,
145 | .tab-sharing-icon-overlay,
146 | .tab-icon-overlay {
147 |     height: 14px !important;
148 |     width: 14px !important;
149 | }
150 | 
151 | .tab-throbber:not([pinned]),
152 | .tab-icon-pending:not([pinned]),
153 | .tab-icon-image:not([pinned]),
154 | .tab-sharing-icon-overlay:not([pinned]),
155 | .tab-icon-overlay:not([pinned]) {
156 |     margin-inline-end: 8.5px;
157 | }
158 | 
159 | .tabbrowser-tab .tab-icon-stack {
160 |     align-items: center;
161 |     justify-items: center;
162 | }
163 | 
164 | /*///// BOOKMARKS /////*/
165 | #PersonalToolbar {
166 |     -moz-box-ordinal-group: 1 !important;
167 |     padding-inline: 11px !important;
168 |     color: var(--bg-sub-color);
169 | }
170 | 
171 | #nav-bar {
172 |     -moz-box-ordinal-group: 2 !important;
173 |     color: var(--selected-color) !important;
174 | }
175 | 
176 | #titlebar {
177 |     color: var(--selected-color) !important;
178 |     -moz-box-ordinal-group: 3 !important;
179 | }
180 | 
181 | :root[uidensity="compact"] #PersonalToolbar {
182 |     padding-inline: 0px !important;
183 | }
184 | 
185 | #PlacesToolbarItems {
186 |     background: var(--bg-color) !important;
187 | }
188 | 
189 | toolbarbutton.bookmark-item {
190 |     transition: all 0.5s ease !important;
191 |     border-radius: 3px !important;
192 | }
193 | 
194 | /*///// MISC /////*/
195 | .bookmark-item .toolbarbutton-icon {
196 |     display: none !important;
197 | }
198 | toolbarbutton.bookmark-item:not(.subviewbutton) {
199 |     min-width: 1.6em !important;
200 | }
201 | .tab-icon-stack[pinned] {
202 |     border-bottom: 1px solid var(--yellow-color);
203 |     padding: 5px 0px !important;
204 | }
205 | 
206 | .reader-mode-button,
207 | #alltabs-button,
208 | #tracking-protection-icon-container,
209 | #new-tab-button,
210 | #scrollbutton-up,
211 | #scrollbutton-down,
212 | #TabsToolbar.toolbarbutton-1,
213 | #identity-icon-box {
214 |     display: none !important;
215 | }
216 | #identity-box {
217 |     margin-right: 5px !important;
218 | }
219 | #nav-bar-overflow-button.toolbarbutton-icon {
220 |     width: 25px !important;
221 | }
222 | 
223 | /* REMOTE DEBUGGIN */
224 | #urlbar{
225 |     background-color: transparent;
226 | }
227 | #urlbar, #searchbar {
228 |     font-size: 0.8em !important;
229 | }
230 | #urlbar-container{
231 |     --urlbar-container-height: 0.00px !important;;
232 | }
233 | .urlbar-icon, .blocked-permission-icon, .desktop-notification-icon{
234 |     width: 12px !important;
235 |     height: 12px !important;
236 | }
237 | #urlbar-zoom-button {
238 |     background: transparent;
239 |     margin: 0 !important;
240 | }
241 | #urlbar-background {
242 |    outline: none !important;
243 | }
244 | #reader-mode-button {
245 |     display: none !important;
246 | }
247 | 
248 | #titlebar, .tabbrowser-tab, #navigator-toolbox-background, #navigator-toolbox, #toolbar-menubar, #TabsToolbar{
249 |     background-color: var(--bg-color) !important;
250 | }
251 | .tab-content {
252 |     font-size: 0.8em !important;
253 | }
254 | .tab-content {
255 |    padding: 0em 0.5em 0em !important;
256 | }
257 | .tab-background, .tab-stack {
258 |     min-height: 0 !important;
259 | }
260 | .tab-icon-stack {
261 |     margin: 0 auto !important;
262 | }
263 | .tab-icon-stack {
264 |     margin-left: 5px !important;
265 | }
266 | .tab-background, .tab-stack {
267 |     height: inherit !important;
268 | }
269 | .tabbrowser-tab:not([visuallyselected="true"], [multiselected]), .tabbrowser-tab:-moz-lwtheme {
270 |     border-radius: 0px !important;    
271 | }
272 | 
273 | .toolbarbutton-badge-stack, .toolbarbutton-icon {
274 |    padding: 0 !important;
275 |    width: 15px !important;
276 | }
277 | #PanelUI-menu-button{
278 |     padding: 0.5em 0.5em !important;
279 | }
280 | #nav-bar-overflow-button {
281 |     height: auto !important;
282 | }
283 | 
284 | #PersonalToolbar, #PersonalToolbar:-moz-window-inactive, #toolbar-menubar, #toolbar-menubar:-moz-window-inactive, findbar, findbar:-moz-window-inactive {
285 |     background: var(--bg-color) !important;
286 |     color: var(--text-primary) !important;
287 |     font-size: 0.8em !important;
288 |     padding: 3px 12px !important;
289 | }
290 | 
291 | #nav-bar {
292 |     padding: 0.2em 0.2em 0em !important;
293 | }
294 | #navigator-toolbox {
295 |     border-bottom: none !important;;
296 | }
297 | 
298 | .toolbar-items {
299 |     padding: 0em 0.5em 0.2em !important;
300 | }
301 | 
302 | .accessibility-indicator, .private-browsing-indicator, #TabsToolbar, #TabsToolbar-customization-target {
303 |     background-color: var(--bg-color) !important; 
304 | }
305 | 
306 | .urlbarView {
307 |     background: var(--bg-sub-color) !important;
308 | }
309 | .urlbarView{
310 |     padding-bottom: 1.5em !important;
311 | }
312 | :root:not([uidensity="compact"]) .urlbarView-row:not([type="tip"], [type="dynamic"]) {
313 |     height: 20px !important;
314 | }
315 | .urlbarView-row:hover > .urlbarView-row-inner {
316 |   background-color: var(--bg-sub-sub-color) !important; 
317 | }
318 | .urlbarView-row .urlbarView-row-inner{
319 |   background-color: var(--bg-sub-color) !important;
320 | }


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