├── LICENSE ├── README.md ├── ass ├── screenshot-extension.png ├── screenshot-extension2.png ├── screenshot-site.png ├── screenshot.png ├── screenshot1.png ├── screenshot2.png └── screenshot3.png └── userChrome.css /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 mimipile 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 | # Another Online 2 | 3 | Another simple, oneline, minimal, keyboard-centered Firefox CSS theme. 4 | 5 | ![Screenshot](ass/screenshot.png) 6 | 7 | ![Screenshot0](ass/screenshot2.png) 8 | 9 | ## Setup and installation 10 | 1. Clone this repository or download the `userChrome.css` file to your local machine 11 | 2. On Firefox, go to `about:config`, click *"Accept the Risk and Continue"* and enable `toolkit.legacyUserProfileCustomizations.stylesheets` 12 | 3. Go to `about:profiles`, locate your profile under *"This is the profile in use and it cannot be deleted"* and open the directory 13 | 4. On the profile directory folder, open (or create) the folder `chrome` 14 | 5. Copy the `userChrome.css` file to `chrome` 15 | 6. Restart the browser to apply the theme 16 | 17 | ## Customization 18 | 19 | By default, all buttons and icons are hidden, except for the *"Application Menu"* (☰) button. This includes: 20 | - The window control buttons (minimize, resize and close window) 21 | - Backward and foward buttons 22 | - Extensions button 23 | - All tabs (⌄) button 24 | - "This time search with..." when searching in the url 25 | - ALL URL bar icons (permissons, bookmarks, extension icon, picture-in-picture, tracking protection, reader mode and translations) 26 | 27 | You can change the visibility of elements in the `userChrome.css` file, just delete or comment out the lines or blocks for the ones you want to see. 28 | 29 | ```css 30 | /* This is an ~example~ with code from the userChrome.css file */ 31 | 32 | /* Extensions button */ 33 | #unified-extensions-button { 34 | /* display: none !important /* Makes the Extensions button visible */ 35 | } 36 | 37 | /* URL bar icons */ 38 | #identity-permission-box, 39 | /* #star-button-box, /* Makes only the Bookmarks (star) icon visible */ 40 | #identity-icon-box, 41 | #picture-in-picture-button, 42 | #tracking-protection-icon-container, 43 | #reader-mode-button, 44 | #translations-button 45 | { 46 | display: none !important 47 | } 48 | ``` 49 | 50 | ## Optional 51 | 52 | You can use the [Adaptative Tab Bar Color](https://addons.mozilla.org/en-US/firefox/addon/adaptive-tab-bar-colour/) extension with the following settings: 53 | 54 | ![extension1](ass/screenshot-extension.png) 55 | ![extension2](ass/screenshot-extension2.png) 56 | 57 | ## Credits 58 | This theme uses code snippets from [JarnotMaciej/Essence](https://github.com/JarnotMaciej/Essence) 👈 Thank you~~ 🤗 59 | -------------------------------------------------------------------------------- /ass/screenshot-extension.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mimipile/firefoxCSS/3e097914f81369849c771f4cd7dbb0fa80baa4dc/ass/screenshot-extension.png -------------------------------------------------------------------------------- /ass/screenshot-extension2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mimipile/firefoxCSS/3e097914f81369849c771f4cd7dbb0fa80baa4dc/ass/screenshot-extension2.png -------------------------------------------------------------------------------- /ass/screenshot-site.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mimipile/firefoxCSS/3e097914f81369849c771f4cd7dbb0fa80baa4dc/ass/screenshot-site.png -------------------------------------------------------------------------------- /ass/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mimipile/firefoxCSS/3e097914f81369849c771f4cd7dbb0fa80baa4dc/ass/screenshot.png -------------------------------------------------------------------------------- /ass/screenshot1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mimipile/firefoxCSS/3e097914f81369849c771f4cd7dbb0fa80baa4dc/ass/screenshot1.png -------------------------------------------------------------------------------- /ass/screenshot2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mimipile/firefoxCSS/3e097914f81369849c771f4cd7dbb0fa80baa4dc/ass/screenshot2.png -------------------------------------------------------------------------------- /ass/screenshot3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mimipile/firefoxCSS/3e097914f81369849c771f4cd7dbb0fa80baa4dc/ass/screenshot3.png -------------------------------------------------------------------------------- /userChrome.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Hi~ 3 | * 4 | * The theme Another Oneline uses code from 5 | * 👉 https://github.com/JarnotMaciej/Essence 👈 Thank you~~ 🤗 6 | */ 7 | 8 | /* Just comment the lines or blocks for the elements you WANT to see */ 9 | 10 | /* Menu button */ 11 | #PanelUI-button { 12 | -moz-box-ordinal-group: 0 !important; 13 | order: -2 !important; 14 | margin: 2px !important; 15 | /* display: none !important; /* uncomment this line to hide the menu button */ 16 | } 17 | 18 | /* Window control buttons (min, resize and close) */ 19 | .titlebar-buttonbox-container { 20 | display: none !important; 21 | margin-right: 12px !important; 22 | } 23 | 24 | /* Page back and foward buttons */ 25 | #back-button, 26 | #forward-button 27 | { 28 | display: none !important 29 | } 30 | 31 | /* Extensions button */ 32 | #unified-extensions-button { 33 | display: none !important 34 | } 35 | 36 | /* Extension name inside URL bar */ 37 | #identity-box.extensionPage #identity-icon-label { 38 | visibility: collapse !important 39 | } 40 | 41 | /* All tabs (v-like) button */ 42 | #alltabs-button { 43 | display: none !important 44 | } 45 | 46 | /* URL bar icons */ 47 | #identity-permission-box, 48 | #star-button-box, 49 | #identity-icon-box, 50 | #picture-in-picture-button, 51 | #tracking-protection-icon-container, 52 | #reader-mode-button, 53 | #translations-button 54 | { 55 | display: none !important 56 | } 57 | 58 | /* "This time search with:..." */ 59 | #urlbar .search-one-offs { 60 | display: none !important 61 | } 62 | 63 | /* Space before and after tabs */ 64 | .titlebar-spacer { 65 | display: none; 66 | } 67 | 68 | /* --- ~END~ element visibility section --- */ 69 | 70 | /* Navbar size calc */ 71 | :root{ 72 | --tab-border-radius: 6px !important; /* Tab border radius -- Changes the tabs rounding *//* Default: 6px */ 73 | --NavbarWidth: 43; /* Default values: 36 - 43 */ 74 | --TabsHeight: 36; /* Minimum: 30 *//* Default: 36 */ 75 | --TabsBorder: 8; /* Doesnt do anything on small layout *//* Default: 8 */ 76 | --NavbarHeightSmall: calc(var(--TabsHeight) + var(--TabsBorder)) /* Only on small layout *//* Default: calc(var(--TabsHeight) + var(--TabsBorder)) *//* Default as a number: 44 */} 77 | 78 | @media screen and (min-width:1325px) /* Only the tabs space will grow from here */ 79 | {:root #nav-bar{margin-top: calc(var(--TabsHeight) * -1px - var(--TabsBorder) * 1px)!important; height: calc(var(--TabsHeight) * 1px + var(--TabsBorder) * 1px)} #TabsToolbar{margin-left: calc(1325px / 100 * var(--NavbarWidth)) !important} #nav-bar{margin-right: calc(100vw - calc(1325px / 100 * var(--NavbarWidth))) !important; vertical-align: center !important} #urlbar-container{min-width: 0px !important; flex: auto !important} toolbarspring{display: none !important}} 80 | 81 | @media screen and (min-width:950px) and (max-width:1324px) /* Both the tabs space and the navbar will grow */ 82 | {:root #nav-bar{margin-top: calc(var(--TabsHeight) * -1px - var(--TabsBorder) * 1px) !important; height: calc(var(--TabsHeight) * 1px + var(--TabsBorder) * 1px)} #TabsToolbar{margin-left: calc(var(--NavbarWidth) * 1vw) !important} #nav-bar{margin-right: calc(100vw - calc(var(--NavbarWidth) * 1vw)) !important; vertical-align: center !important} #urlbar-container{min-width: 0px !important; flex: auto !important} toolbarspring{display: none !important} #TabsToolbar, #nav-bar{transition: margin-top .25s !important}} 83 | 84 | @media screen and (max-width:949px) /* The window is not enough wide for a one line layout */ 85 | {:root #nav-bar{padding: 0 5px 0 5px!important; height: calc(var(--NavbarHeightSmall) * 1px) !important} toolbarspring{display: none !important;} #TabsToolbar, #nav-bar{transition: margin-top .25s !important}} 86 | #nav-bar, #PersonalToolbar{background-color: #0000 !important;background-image: none !important; box-shadow: none !important} #nav-bar{margin-left: 3px;} .tab-background, .tab-stack { min-height: calc(var(--TabsHeight) * 1px) !important} 87 | 88 | /* Removes urlbar border/background */ 89 | #urlbar-background { 90 | border: none !important; 91 | outline: none !important; 92 | transition: .15s !important; 93 | } 94 | 95 | /* Removes the background from the urlbar while not in use */ 96 | #urlbar:not(:hover):not([breakout][breakout-extend]) > #urlbar-background { 97 | box-shadow: none !important; 98 | background: #0000 !important; 99 | } 100 | 101 | /* Removes annoying border */ 102 | #navigator-toolbox { 103 | border: none !important 104 | } 105 | 106 | /* Fades window while not in focus */ 107 | #navigator-toolbox-background:-moz-window-inactive { 108 | filter: contrast(90%) 109 | } 110 | 111 | /* Remove fullscreen warning border */ 112 | #fullscreen-warning { 113 | border: none !important; 114 | background: -moz-Dialog !important; 115 | } 116 | 117 | /* Tabs close button */ 118 | .tabbrowser-tab:not(:hover) .tab-close-button { 119 | opacity: 0% !important; 120 | transition: 0.3s !important; 121 | display: -moz-box !important; 122 | } 123 | .tab-close-button[selected]:not(:hover) { 124 | opacity: 45% !important; 125 | transition: 0.3s !important; 126 | display: -moz-box !important; 127 | } 128 | .tabbrowser-tab:hover .tab-close-button { 129 | opacity: 50%; 130 | transition: 0.3s !important; 131 | background: none !important; 132 | cursor: pointer; 133 | display: -moz-box !important; 134 | } 135 | .tab-close-button:hover { 136 | opacity: 100% !important; 137 | transition: 0.3s !important; 138 | background: none !important; 139 | cursor: pointer; 140 | display: -moz-box !important; 141 | } 142 | .tab-close-button[selected]:hover { 143 | opacity: 100% !important; 144 | transition: 0.3s !important; 145 | background: none !important; 146 | cursor: pointer; 147 | display: -moz-box !important; 148 | } 149 | --------------------------------------------------------------------------------