├── LICENSE ├── README.md └── userChrome.css /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Agnihotra Nath 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 | # KeyFox 2 | A simple, minimal OneLiner Keyboard-centered CSS for Firefox. 3 | 4 | **Features:** 5 | - Minimal interface. 6 | - very Simple. 7 | - Features OneLine Design. 8 | - Keyboard Centered (More info below). 9 | 10 | ![image](https://user-images.githubusercontent.com/78948152/136501706-accca691-b9c3-4841-acd7-6bb843d2f422.png) 11 | 12 | ## Details: 13 | 14 | ### Minimal Interface 15 | 16 | OneLiners are known to be minimal. Instead of 3 different stacked toolbars, you have everything in a single, continuous bar. With only the **Refresh** and **Home** Button available on Startpage, buttons appear and disappear according to their need. 17 | 18 | For example, on Startpage: 19 | ![image](https://user-images.githubusercontent.com/78948152/136502381-5bf7533b-a37c-4947-af50-211becdcd29a.png) 20 | 21 | But once you go to a website, you can see that the Width of the URL-Bar decreases, and makes space for the **Back** Button. 22 | ![image](https://user-images.githubusercontent.com/78948152/136502519-acb5c42e-7d70-408b-9bc4-d8366ed93d9b.png) 23 | 24 | And once you go back to the startpage, the **Back** Button changes to the **Forward** Button. 25 | ![image](https://user-images.githubusercontent.com/78948152/136502765-92e622b0-c709-4ac3-b97f-3525fc7b9d20.png) 26 | 27 | And when you have multiple sites in history, both of them appear. 28 | ![image](https://user-images.githubusercontent.com/78948152/136502834-1aa03910-ed30-4178-9b26-c41c7be8971b.png) 29 | 30 | ### Simplicity 31 | 32 | This entire theme is wrapped with **AMOLED Colors**, with **True Black**, and little to no bright colors. It is intended to be used with Systemwide Dark Mode. 33 | And all the browser elements have been rearranged into a single bar so as to dedicate as much screen visibility as possible. 34 | 35 | ### KeyBoard Centered 36 | 37 | I've seen many people complaining about touch-first apps, since they require users to lift their hands off the keyboard and then use the touchpad or mouse, thereby.....making them suffer, I guess? But anyway, this theme has __NO CAPTION BUTTONS__. 38 | So, Min, Max, Close? Poof! Gone! 39 | Although you can still control the browser using the buttons on the toolbar, keystrokes are always available. 40 | -------------------------------------------------------------------------------- /userChrome.css: -------------------------------------------------------------------------------- 1 | /*===KeyFox by AlfarexGuy2019===*/ 2 | 3 | /*===COLORS===*/ 4 | 5 | :root { 6 | --accent-color: 45, 45, 45; 7 | --tab-color: 240, 240, 244; 8 | --tab-text-color: 255, 255, 255; 9 | --secondary-accent-color: 127,127,127; 10 | --second-tab-text-color: 127,127,127; 11 | --third-accent-color: 235, 219, 178; 12 | --light-color: 255, 255, 255; 13 | --dark-color: 0, 0, 0; 14 | --url-back: 249, 249, 251; 15 | --caption-min-color: 215, 153, 33; 16 | --caption-max-color: 69, 133, 136; 17 | --caption-close-color: 177, 98, 134; 18 | } 19 | 20 | 21 | /* MIN MAX CLOSE Remove */ 22 | #TabsToolbar > .titlebar-buttonbox-container { 23 | visibility: collapse !important;} 24 | 25 | /*Basic Settings*/ 26 | 27 | 28 | :root { 29 | --navbarWidth : 40vw; /* Set width of navbar. Use px for a fixed width 30 | or vw for a percentage of your window. */ 31 | --animationSpeed : 0.5s; 32 | } 33 | 34 | 35 | #TabsToolbar { 36 | margin-left : var(--navbarWidth) !important; 37 | } 38 | 39 | #nav-bar { 40 | margin-right: calc(100vw - var(--navbarWidth)) !important; 41 | } 42 | 43 | #urlbar-container { 44 | min-width : 0px !important; 45 | } 46 | 47 | :root[uidensity="compact"] #nav-bar { 48 | margin-top : -37px !important; 49 | height : 37px !important; 50 | } 51 | 52 | :root:not([uidensity="compact"]):not([uidensity="touch"]) #nav-bar { 53 | margin-top : -44px !important; 54 | height : 44px !important; 55 | } 56 | 57 | :root[uidensity="touch"] #nav-bar { 58 | margin-top : -49px !important; 59 | height : 49px !important; 60 | } 61 | 62 | 63 | /* Back Hide */ 64 | #back-button[disabled="true"] { display: none !important } 65 | 66 | /* Forward Hide */ 67 | #forward-button[disabled="true"] { display: none !important } 68 | 69 | /* Site information button */ 70 | #identity-box > :not(#notification-popup-box) { display: none !important } 71 | #identity-box { margin: 0 !important } 72 | #notification-popup-box { margin-inline-end: var(--identity-box-margin-inline) } 73 | 74 | /* "Shield" icon */ 75 | #tracking-protection-icon-container { display: none !important } 76 | 77 | 78 | /* Simplifying interface */ 79 | 80 | #nav-bar { 81 | background : none !important; 82 | box-shadow : none !important; 83 | } 84 | 85 | #navigator-toolbox { 86 | border : none !important; 87 | } 88 | 89 | .titlebar-spacer { 90 | display : none !important; 91 | } 92 | 93 | #urlbar-background { 94 | border : none !important; 95 | } 96 | 97 | #urlbar:not(:hover):not([breakout][breakout-extend]) > #urlbar-background { 98 | box-shadow : none !important; 99 | background : none !important; 100 | } 101 | 102 | 103 | /* Element Hiding stuff */ 104 | 105 | .urlbar-icon, #userContext-indicator, #userContext-label { 106 | fill : transparent !important; 107 | background : transparent !important; 108 | color : transparent !important; 109 | } 110 | 111 | #urlbar:not(:hover,:active,[focused]) .urlbar-icon { 112 | visibility: hidden; 113 | } 114 | 115 | #urlbar .urlbar-icon { 116 | fill : var(--toolbar-color) !important; 117 | } 118 | 119 | /*================== TABS BAR ==================*/ 120 | 121 | .browser-toolbox-background { 122 | background: rgba(var(--dark-color), 1) !important; 123 | will-change: initial; /* reset for performance */ 124 | } 125 | 126 | #PersonalToolbar { 127 | background: rgba(var(--dark-color), 1) !important; 128 | color: rgba(var(--light-color), 1) !important; 129 | padding-bottom: 6px !important; 130 | padding-top: 1px !important; 131 | } 132 | 133 | toolbar#nav-bar { 134 | background: rgba(var(--dark-color), 1) !important; 135 | box-shadow: none !important; 136 | padding-bottom: 4px !important; 137 | } 138 | 139 | /*================ DARK THEME ================*/ 140 | :root:-moz-lwtheme-brighttext, 141 | .sidebar-panel[lwt-sidebar-brighttext], 142 | body[lwt-sidebar-brighttext] { 143 | --main-bgcolor: var(--dark-color); 144 | --transparent-bgcolor: var(--dark-color); 145 | } 146 | 147 | tab[selected="true"] .tab-content { 148 | color: rgba(var(--secondary-accent-color), 1) !important; 149 | } 150 | 151 | tab[selected="true"] .tab-background { 152 | background: rgba(var(--accent-color), 1) !important; 153 | } 154 | 155 | .tabbrowser-tab:not([selected]):hover > .tab-stack > .tab-background { 156 | background-color: rgba(var(--accent-color), 0.7) !important; 157 | } 158 | 159 | .tab-line { 160 | height: 0px !important; 161 | } 162 | 163 | .tabbrowser-tab { 164 | margin-right: 5px !important; 165 | } 166 | 167 | .tabbrowser-tab:not([visuallyselected="true"]), 168 | .tabbrowser-tab:-moz-lwtheme { 169 | color: rgba(var(--second-tab-text-color), 1) !important; 170 | } 171 | 172 | tab[selected="true"] .tab-content { 173 | color: rgba(var(--tab-text-color), 1) !important; 174 | } 175 | 176 | tab[selected="true"] .tab-background { 177 | background: rgba(var(--accent-color), 1) !important; 178 | } 179 | 180 | .tabbrowser-tab::after, 181 | .tabbrowser-tab::before { 182 | border-left: 0 !important; 183 | opacity: 0 !important; 184 | } 185 | 186 | .tab-close-button { 187 | transition: all 0.3s ease !important; 188 | border-radius: 4px !important; 189 | } --------------------------------------------------------------------------------