├── .gitignore ├── Backgrounds ├── bg-photo-1366.jpg ├── bg-photo-1920.jpg └── bg-photo2-1920.jpg ├── LICENSE ├── README.md ├── Styles ├── compact_sidebar.css ├── context_and_popup_menus.css ├── menu_buttons_rotate_on_click.css ├── navbar_appearence.css ├── overflow_menu_horizontal.css ├── remove_extra_padding.css ├── tab_close_button_on_hover_only.css ├── tab_title_appearence.css └── urlbar_appearence.css ├── _deprecated ├── General │ ├── dark_background_on_loading_pages.css │ ├── dark_modal_prompts.css │ └── findbar_top_centered.css ├── Navbar │ ├── identitybox_colored_background.css │ ├── identitybox_colored_line.css │ ├── urlbar_centered_address.css │ └── urlbar_remove_megabar.css ├── Tabs │ ├── dynamic_tab_width.css │ ├── flag_multi_selected_tabs.css │ ├── subtle_tab_separators.css │ └── tab_sound_icon_above_favicon.css ├── Toolbars │ ├── bookmark_toolbar_on_bottom_of_newtab.css │ ├── floating_toolbars_on_hover.css │ ├── floating_toolbars_on_hover_fullscreen_only.css │ ├── menubar_visible_on_hover.css │ └── show_navbar_on_hover.css └── userContent │ ├── about_addons.css │ ├── about_newtab.css │ ├── about_reader.css │ ├── addon_styling.css │ ├── error_pages.css │ ├── variables.css │ ├── view_source.css │ └── webpage_specific.css ├── userChrome.css ├── userContent.css └── userContent ├── about_addons.css ├── about_newtab.css ├── about_reader.css ├── addon_styling.css ├── error_pages.css ├── variables.css ├── view_source.css └── webpage_specific.css /.gitignore: -------------------------------------------------------------------------------- 1 | originalContent/ 2 | .gitignore 3 | -------------------------------------------------------------------------------- /Backgrounds/bg-photo-1366.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TinyRaindrop/Firefox-UI-customization/f8ee1893a99ea0a07502455047b6790d18b59ef8/Backgrounds/bg-photo-1366.jpg -------------------------------------------------------------------------------- /Backgrounds/bg-photo-1920.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TinyRaindrop/Firefox-UI-customization/f8ee1893a99ea0a07502455047b6790d18b59ef8/Backgrounds/bg-photo-1920.jpg -------------------------------------------------------------------------------- /Backgrounds/bg-photo2-1920.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TinyRaindrop/Firefox-UI-customization/f8ee1893a99ea0a07502455047b6790d18b59ef8/Backgrounds/bg-photo2-1920.jpg -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 TinyRaindrop 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 UI customization 2 | 3 | Changing Firefox interface with userChrome.css and userContent.css. 4 | 5 | Latest update was for version **78.0b4**. 6 | 7 | ## Features 8 | 9 | - centered address in urlbar 10 | - floating centered findbar on the top of the page 11 | - subtle tab separators 12 | - tab close button visible only on hover 13 | - unnecessary buttons removed 14 | - context menus cleaned up 15 | - dark thin scrollbars 16 | - dark JS alerts/prompts 17 | - dark viewsource and error pages 18 | - bookmarks bar on newtab page on hover 19 | - background image on newtab page 20 | - floating navbar in fullscreen mode 21 | - compact addons overflow menu 22 | 23 | Some colors might be hardcoded to match the theme I use ([ArcDark](https://addons.mozilla.org/en-US/firefox/addon/arc-dark-theme-we/)). 24 | 25 | ## Installation 26 | 27 | 1. Open your profile from `about:support > Profile Folder`. 28 | 2. Inside create a folder named `chrome`. 29 | 3. Copy contents of this repository into this `chrome` folder. 30 | 31 | Comment out `@import` lines in `userChrome.css` and `userContent.css` to disable certain tweaks. Such as 32 | 33 | `/*@import url('userContent/about_newtab.css');*/` 34 | 35 | ## Examples 36 | 37 | ![NewTab screenshot](https://i.imgur.com/8FuAGz3.png) 38 | *Photo by Osman Rana on Unsplash* 39 | 40 | ![Webpage screenshot](https://i.imgur.com/5SQTHnF.png) 41 | 42 | Min/max/close buttons stand out because on my Windows 8.1 they are controlled by OS and cannot be changed by Firefox. 43 | 44 | ## Other great custom Firefox UI projects 45 | 46 | - [Firefox csshacks](https://github.com/MrOtherGuy/firefox-csshacks) 47 | - [UserChrome Tweaks](https://github.com/Timvde/UserChrome-Tweaks) 48 | - [Quantum Nox](https://github.com/Izheil/Quantum-Nox-Firefox-Dark-Full-Theme) 49 | - [CustomCSSforFx](https://github.com/Aris-t2/CustomCSSforFx) 50 | -------------------------------------------------------------------------------- /Styles/compact_sidebar.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Compact Sidebar Bookmarks for Firefox Quantum 3 | * https://github.com/rkocman/Firefox-Sidebar-Tweak 4 | */ 5 | 6 | @import url('../userContent/variables.css'); 7 | 8 | @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 9 | 10 | #sidebar-header { 11 | padding: 4px 8px !important; 12 | font-size: 1.21em !important; 13 | } 14 | #sidebar-search-container { 15 | padding: 5px 8px !important; 16 | } 17 | .sidebar-placesTree treechildren::-moz-tree-row { 18 | height: 1.6em !important; 19 | min-height: 1.6em !important; 20 | border-width: 1px !important; 21 | } 22 | .sidebar-placesTree treechildren::-moz-tree-indentation { 23 | width: 10px !important; 24 | } 25 | .sidebar-placesTree treechildren::-moz-tree-twisty { 26 | padding-inline-start: 0 !important; 27 | padding-inline-end: 2px !important; 28 | } 29 | 30 | /* Thin scrollbars in sidebar and history popup */ 31 | #bookmarksPanel scrollbar, 32 | #history-panel scrollbar, 33 | .panel-subview-body, 34 | panelview > vbox, 35 | #permList, scrollbar { 36 | scrollbar-color: var(--scroll-thumb-color) var(--scroll-track-color) !important; 37 | scrollbar-width: thin !important; 38 | } -------------------------------------------------------------------------------- /Styles/context_and_popup_menus.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Remove unnecessary elements from context and other menus 3 | */ 4 | 5 | /* Page context Menu */ 6 | #context-openlink, /* in new window */ 7 | #context-bookmarklink, 8 | #context-savelinktopocket, 9 | #context-pocket, 10 | #context-sendimage, 11 | #context-sep-sendpagetodevice, 12 | #context-setDesktopBackground, 13 | #context-selectall, 14 | #context-viewsource, 15 | #inspect-separator, 16 | 17 | /* Tab context menu */ 18 | #context_toggleMuteTab, 19 | #context_moveTabOptions, 20 | #context_undoCloseTab, 21 | #context_closeTab, 22 | 23 | /* Bookmark dropdown menu */ 24 | #BMB_bookmarksShowAllTop, 25 | #BMB_bookmarksShowAllTop + menuseparator, 26 | #BMB_viewBookmarksSidebar, 27 | #BMB_viewBookmarksToolbar, 28 | #BMB_bookmarksToolbar, 29 | /*#BMB_unsortedBookmarks, */ 30 | /*#BMB_bookmarksShowAll, */ 31 | #BMB_viewBookmarksToolbar + menuseparator, 32 | #BMB_mobileBookmarks + menuseparator, 33 | 34 | /* Hamburger menu */ 35 | #appMenu-edit-controls, 36 | #appMenu-edit-controls + toolbarseparator, 37 | #appMenu-open-file-button, 38 | #appMenu-find-button, 39 | #appMenu-help-button + toolbarseparator, 40 | #appMenu-quit-button, 41 | 42 | /* #PanelUI-history (history button) */ 43 | #appMenuViewHistorySidebar, 44 | #appMenuClearRecentHistory, 45 | #appMenuClearRecentHistory + toolbarseparator, 46 | 47 | /* Page action menu (...) on the right side of URLbar */ 48 | #pageAction-panel-bookmark, 49 | #pageAction-panel-bookmarkSeparator, 50 | #pageAction-panel-copyURL, 51 | #pageAction-panel-emailLink, 52 | #pageAction-panel-builtInSeparator, 53 | #pageAction-panel-_c607c8df-14a7-4f28-894f-29e8722976af_ 54 | { 55 | display: none !important; 56 | } 57 | 58 | #BMB_bookmarksToolbar, 59 | #BMB_unsortedBookmarks { 60 | -moz-box-ordinal-group: 2; 61 | } 62 | 63 | #BMB_bookmarksShowAll { 64 | -moz-box-ordinal-group: 3; 65 | } 66 | 67 | #pageAction-panel-sendToDevice { 68 | -moz-box-ordinal-group: 0; 69 | } 70 | 71 | 72 | /** 73 | * Style some menus 74 | */ 75 | 76 | /* 77 | * Color page context menu icons 78 | * Firefox Quantum userChrome.css tweaks 79 | * Github: https://github.com/aris-t2/customcssforfx 80 | */ 81 | #context-back .menu-iconic-icon, 82 | #context-forward .menu-iconic-icon { 83 | fill: #4169e1 !important; 84 | } 85 | 86 | #context-reload .menu-iconic-icon { 87 | fill: green !important; 88 | } 89 | 90 | #context-stop .menu-iconic-icon { 91 | fill: red !important; 92 | } 93 | 94 | #context-bookmarkpage .menu-iconic-icon { 95 | fill: #336699 !important; 96 | } 97 | 98 | 99 | /** 100 | * Add icons to context menu 101 | */ 102 | 103 | /* page */ 104 | #context-savepage::before { 105 | content: url(chrome://browser/skin/save.svg); 106 | } 107 | 108 | #context-sendpagetodevice::before { 109 | content: url(chrome://browser/skin/send-to-device.svg); 110 | } 111 | 112 | #context-sendpagetodevice .sendtab-target[clientType="phone"]::before { 113 | content: url(chrome://browser/skin/device-phone.svg); 114 | } 115 | 116 | #context-sendpagetodevice .sendtab-target[clientType="desktop"]::before { 117 | content: url(chrome://browser/skin/device-desktop.svg); 118 | } 119 | 120 | #context-sendpagetodevice .sendtab-target[clientType="tablet"]::before { 121 | content: url(chrome://browser/skin/device-tablet.svg); 122 | } 123 | 124 | /*#context-viewinfo::before { 125 | content: url(chrome://browser/skin/identity-icon.svg); 126 | }*/ 127 | 128 | /* #context-inspect */ 129 | 130 | /* link */ 131 | #context-openlinkintab::before { 132 | content: url(chrome://browser/skin/new-tab.svg); 133 | } 134 | 135 | /* #context-openlinkinusercontext-menu */ 136 | 137 | #context-openlinkprivate::before { 138 | content: url(chrome://browser/skin/privateBrowsing.svg); 139 | } 140 | 141 | #context-savelink::before { 142 | content: url(chrome://browser/skin/save.svg); 143 | } 144 | 145 | #context-copylink::before { 146 | content: url(chrome://browser/skin/link.svg); 147 | } 148 | 149 | #context-searchselect::before { 150 | content: url(chrome://global/skin/icons/search-glass.svg); 151 | } 152 | 153 | #context-sendlinktodevice::before { 154 | content: url(chrome://browser/skin/send-to-device.svg); 155 | } 156 | 157 | #context-sendlinktodevice .sendtab-target[clientType="phone"]::before { 158 | content: url(chrome://browser/skin/device-phone.svg); 159 | } 160 | 161 | #context-sendlinktodevice .sendtab-target[clientType="desktop"]::before { 162 | content: url(chrome://browser/skin/device-desktop.svg); 163 | } 164 | 165 | #context-sendlinktodevice .sendtab-target[clientType="tablet"]::before { 166 | content: url(chrome://browser/skin/device-tablet.svg); 167 | } 168 | 169 | /* image */ 170 | #context-copyimage-contents::before { 171 | content: url(chrome://browser/skin/edit-copy.svg); 172 | } 173 | 174 | #context-copyimage::before { 175 | content: url(chrome://browser/skin/link.svg); 176 | } 177 | 178 | #context-saveimage::before { 179 | content: url(chrome://browser/skin/save.svg); 180 | } 181 | 182 | #context-viewimageinfo::before { 183 | content: url(chrome://browser/skin/identity-icon.svg); 184 | } 185 | 186 | /* selection */ 187 | #context-copy::before { 188 | content: url(chrome://browser/skin/edit-copy.svg); 189 | } 190 | 191 | /* #context-viewpartialsource-selection */ 192 | 193 | /* tab */ 194 | #context_reloadTab::before { 195 | content: url(chrome://browser/skin/reload.svg); 196 | } 197 | 198 | /* image is too big, not showing in context menu */ 199 | /* #context_pinTab::before, 200 | #context_pinSelectedTabs::before { 201 | content: url(chrome://browser/skin/pin-tab.svg); 202 | width: 16px; 203 | height: 16px; 204 | } 205 | 206 | #context_unpinTab::before, 207 | #context_unpinSelectedTabs::before { 208 | content: url(chrome://browser/skin/unpin-tab.svg); 209 | width: 16px; 210 | height: 16px; 211 | } */ 212 | 213 | 214 | /* #context_duplicateTab */ 215 | 216 | #context_selectAllTabs::before { 217 | content: url(chrome://browser/skin/window.svg); 218 | } 219 | 220 | /* #context_reopenInContainer */ 221 | 222 | #context_sendTabToDevice::before { 223 | content: url(chrome://browser/skin/send-to-device.svg); 224 | } 225 | 226 | #context_sendTabToDevice .sendtab-target[clientType="phone"]::before { 227 | content: url(chrome://browser/skin/device-phone.svg); 228 | } 229 | 230 | #context_sendTabToDevice .sendtab-target[clientType="desktop"]::before { 231 | content: url(chrome://browser/skin/device-desktop.svg); 232 | } 233 | 234 | #context_sendTabToDevice .sendtab-target[clientType="tablet"]::before { 235 | content: url(chrome://browser/skin/device-tablet.svg); 236 | } 237 | 238 | /* #context_closeTabsToTheEnd */ 239 | /* #context_closeOtherTabs */ 240 | 241 | /* Properly align icons */ 242 | :-moz-any(#contentAreaContextMenu, #tabContextMenu) :-moz-any(menuitem, menu)::before { 243 | display: -moz-box; 244 | padding-inline-end: 8px; 245 | opacity: 0.7; 246 | } 247 | 248 | :-moz-any( 249 | #context-savepage, 250 | #context-sendpagetodevice, 251 | /* #context-viewinfo, */ 252 | #context-openlinkintab, 253 | /* #context-openlinkinusercontext-menu, */ 254 | #context-openlinkprivate, 255 | #context-savelink, 256 | #context-copylink, 257 | #context-searchselect, 258 | #context-sendlinktodevice, 259 | #context-copyimage-contents, 260 | #context-copyimage, 261 | #context-saveimage, 262 | #context-viewimageinfo, 263 | #context-copy, 264 | #context_reloadTab, 265 | /* #context_pinTab, 266 | #context_pinSelectedTabs, 267 | #context_unpinTab, 268 | #context_unpinSelectedTabs, */ 269 | #context_selectAllTabs, 270 | #context_sendTabToDevice) .menu-text { 271 | /* margin-inline-start: -18px !important; */ 272 | } 273 | 274 | 275 | /** 276 | * Add icons to appmenu items 277 | * Original code from Firefox Quantum userChrome.css tweaks 278 | * Github: https://github.com/aris-t2/customcssforfx 279 | */ 280 | 281 | #appMenu-open-file-button { 282 | -moz-context-properties: fill; 283 | list-style-image: url(chrome://browser/skin/open.svg); 284 | } 285 | 286 | #appMenu-save-file-button { 287 | -moz-context-properties: fill; 288 | list-style-image: url(chrome://browser/skin/save.svg); 289 | } 290 | 291 | #appMenu-more-button { 292 | -moz-context-properties: fill; 293 | list-style-image: url(chrome://browser/skin/chevron.svg); 294 | } 295 | 296 | #appMenu-characterencoding-button { 297 | -moz-context-properties: fill; 298 | list-style-image: url(chrome://browser/skin/characterEncoding.svg); 299 | } 300 | 301 | #appMenu-developer-button { 302 | -moz-context-properties: fill; 303 | list-style-image: url(chrome://browser/skin/developer.svg); 304 | } 305 | 306 | #PanelUI-helpItems > toolbarbutton:last-of-type { 307 | -moz-context-properties: fill; 308 | list-style-image: url(chrome://browser/skin/identity-icon.svg); 309 | } 310 | 311 | :-moz-any( 312 | #appMenu-open-file-button, 313 | #appMenu-save-file-button, 314 | #appMenu-more-button, 315 | #appMenu-characterencoding-button, 316 | #appMenu-developer-button) .toolbarbutton-text, 317 | #PanelUI-helpItems > toolbarbutton:last-of-type .toolbarbutton-text { 318 | padding-inline-start: 8px !important; 319 | } 320 | 321 | #main-window:not([style*='--lwt-header-image']):-moz-lwtheme:-moz-lwtheme-brighttext :-moz-any( 322 | #appMenu-open-file-button, 323 | #appMenu-save-file-button, 324 | #appMenu-more-button, 325 | #appMenu-characterencoding-button, 326 | #appMenu-developer-button), 327 | #PanelUI-helpItems > toolbarbutton:last-of-type { 328 | fill: currentColor !important; 329 | } 330 | 331 | /** 332 | * Hide some tooltips 333 | */ 334 | #back-button-tooltip, 335 | #forward-button-tooltip { 336 | display: none; 337 | } 338 | -------------------------------------------------------------------------------- /Styles/menu_buttons_rotate_on_click.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Rotate overflow and hamburger buttons on click 3 | */ 4 | 5 | /* Overflow rotates whole button, not just the icon, causing weird popup animation */ 6 | /* :-moz-any(#nav-bar-overflow-button, #PanelUI-menu-button) */ 7 | #PanelUI-menu-button[open="true"] .toolbarbutton-icon { 8 | transform: rotate(90deg) !important; 9 | } 10 | 11 | #PanelUI-menu-button .toolbarbutton-icon { 12 | transition: transform 150ms ease-out; 13 | } 14 | 15 | -------------------------------------------------------------------------------- /Styles/navbar_appearence.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Tweaks concerning NavBar area 3 | */ 4 | 5 | /* Remove border between Tabs and NavBar */ 6 | #nav-bar { 7 | margin-bottom: -1px !important; 8 | border: none !important; 9 | box-shadow: none !important; 10 | } 11 | -------------------------------------------------------------------------------- /Styles/overflow_menu_horizontal.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Addons overflow menu 3 | * Remove text labels and make menu horizontal 4 | */ 5 | 6 | #widget-overflow-fixed-list { 7 | display: flex; 8 | flex-flow: row wrap; 9 | justify-content: center; 10 | padding: 0 6px; 11 | } 12 | 13 | #widget-overflow-fixed-list toolbarbutton { 14 | /* width of elements: 20%, which means 5 in a row */ 15 | flex: 1 0 20%; 16 | padding: 12px 0 !important; 17 | } 18 | 19 | #widget-overflow-fixed-list .toolbarbutton-text, 20 | #overflowMenu-customize-button { 21 | display: none !important; 22 | } 23 | 24 | -------------------------------------------------------------------------------- /Styles/remove_extra_padding.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Remove extra padding from tabs toolbar 3 | */ 4 | 5 | .titlebar-spacer[type="pre-tabs"] { 6 | width: 0 !important; 7 | } 8 | 9 | .titlebar-spacer[type="post-tabs"] { 10 | width: 0 !important; 11 | } 12 | 13 | /** 14 | * Remove tab overflow scroll buttons 15 | */ 16 | #scrollbutton-up, #scrollbutton-down { 17 | display: none; 18 | } 19 | -------------------------------------------------------------------------------- /Styles/tab_close_button_on_hover_only.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Show close buttons on tabs only on hover 3 | */ 4 | 5 | .tabbrowser-tab:not([pinned]) .tab-close-button { 6 | /*! display: -moz-box !important; */ 7 | opacity: 0; 8 | visibility: collapse !important; 9 | transition: opacity 0.1s, visibility 0.1s ease-in !important; 10 | } 11 | 12 | .tabbrowser-tab:not([pinned]):hover .tab-close-button { 13 | opacity: 1; 14 | visibility: visible !important; 15 | } 16 | -------------------------------------------------------------------------------- /Styles/tab_title_appearence.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Reduce tab title shadow 3 | */ 4 | 5 | .tabbrowser-tab:not([pinned]) .tab-content { 6 | padding-inline-start: 6px !important; 7 | padding-inline-end: 4px !important; 8 | } 9 | 10 | /* 11 | .tab-label-container[textoverflow][labeldirection="ltr"]:not([pinned]), 12 | .tab-label-container[textoverflow]:not([labeldirection]):not([pinned]):-moz-locale-dir(ltr) { 13 | mask-image: linear-gradient(to left, transparent, black 1em) !important; 14 | } */ 15 | 16 | 17 | 18 | /** 19 | * Dim discarded tabs 20 | */ 21 | 22 | .tabbrowser-tab[pending] .tab-content:not(:hover) .tab-label { 23 | opacity: 0.75 !important; 24 | } 25 | 26 | 27 | /** 28 | * Make tabs seamless (effect visible when hovering active tab's neighbour) 29 | */ 30 | 31 | .tabbrowser-tab .tab-background { 32 | margin-inline-start: -1px !important; 33 | margin-inline-end: -1px !important; 34 | } 35 | 36 | 37 | -------------------------------------------------------------------------------- /Styles/urlbar_appearence.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Other tweaks regarding urlbar 3 | */ 4 | 5 | /* Remove placeholder text in the address bar */ 6 | .urlbar-input-box > .urlbar-input::placeholder { 7 | opacity: 0 !important; 8 | } 9 | 10 | /* Give the address bar darker background in a private browsing window and tweak selection colors */ 11 | #urlbar ::-moz-selection 12 | { 13 | background-color: #5294F9 !important; 14 | color: #fff !important; 15 | } 16 | 17 | #main-window[privatebrowsingmode] #urlbar ::-moz-selection 18 | { 19 | background-color: #5a5a5a !important; 20 | color: #f0f0f0 !important; 21 | } 22 | 23 | -------------------------------------------------------------------------------- /_deprecated/General/dark_background_on_loading_pages.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Whiteflash fix 3 | * Makes sure that page background always stays dark 4 | */ 5 | 6 | /* #browser vbox#appcontent tabbrowser, */ 7 | #tabbrowser-tabpanels, 8 | #content, 9 | browser[type=content-primary], 10 | browser[type=content] > html { 11 | background: var(--lwt-accent-color) !important; 12 | } 13 | -------------------------------------------------------------------------------- /_deprecated/General/dark_modal_prompts.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Make JS alert, prompt and confirm modals dark 3 | */ 4 | 5 | @keyframes fade-in { 6 | 0% { opacity: 0; } 7 | 100% { opacity: 1; } 8 | } 9 | 10 | @keyframes scale-in { 11 | 0% { transform: scaleY(0); } 12 | 100% { transform: scaleY(1); } 13 | } 14 | 15 | tabmodalprompt { 16 | background-color: transparent !important; 17 | background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.25)) !important; 18 | animation: 0.2s fade-in; 19 | } 20 | 21 | tabmodalprompt > spacer[flex="1"] { 22 | display: none; 23 | } 24 | 25 | tabmodalprompt .tabmodalprompt-mainContainer { 26 | position: relative !important; 27 | transform-origin: top center; 28 | max-width: 600px; 29 | background-color: var(--toolbar-bgcolor) !important; 30 | border: 1px solid var(--toolbox-border-bottom-color) !important; 31 | border-top-width: 0 !important; 32 | border-radius: 0 0 var(--toolbarbutton-border-radius) var(--toolbarbutton-border-radius) !important; 33 | box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.12); 34 | font-size: 14px; 35 | animation: 0.2s scale-in; 36 | } 37 | 38 | tabmodalprompt .tabmodalprompt-mainContainer * { 39 | color: var(--lwt-text-color); 40 | } 41 | 42 | tabmodalprompt .tabmodalprompt-mainContainer .tabmodalprompt-topContainer textbox { 43 | -moz-appearance: none !important; 44 | margin: 12px 0 0 0 !important; 45 | /*padding: 8px !important;*/ 46 | background-color: var(--lwt-toolbar-field-background-color, hsla(0,0%,100%,.8)) !important; 47 | border: 1px solid var(--lwt-toolbar-field-border-color, hsla(240,5%,5%,.25)); 48 | border-radius: var(--toolbarbutton-border-radius); 49 | text-align: center !important; 50 | } 51 | 52 | tabmodalprompt .tabmodalprompt-mainContainer .tabmodalprompt-topContainer textbox .textbox-input { 53 | padding: 8px !important; 54 | } 55 | 56 | tabmodalprompt .tabmodalprompt-mainContainer .tabmodalprompt-topContainer textbox[focused="true"] { 57 | background-color: var(--lwt-toolbar-field-focus, var(--lwt-toolbar-field-background-color, white)) !important; 58 | } 59 | 60 | tabmodalprompt .tabmodalprompt-mainContainer .tabmodalprompt-topContainer checkbox { 61 | /* margin: 12px 0 0 0 !important;*/ 62 | margin-top: 12px !important; 63 | opacity: 0.7 !important; 64 | } 65 | 66 | tabmodalprompt .tabmodalprompt-mainContainer .tabmodalprompt-buttonContainer { 67 | display: block !important; 68 | padding: 9px 20px 12px !important; 69 | background-color: transparent !important; 70 | text-align: center !important; 71 | } 72 | 73 | tabmodalprompt .tabmodalprompt-mainContainer .tabmodalprompt-buttonContainer spacer { 74 | display: none !important; 75 | } 76 | 77 | tabmodalprompt .tabmodalprompt-mainContainer .tabmodalprompt-buttonContainer button { 78 | -moz-appearance: none !important; 79 | padding: 2px 3px; 80 | border: 1px solid var(--toolbox-border-bottom-color); 81 | border-radius: var(--toolbarbutton-border-radius); 82 | } 83 | 84 | tabmodalprompt .tabmodalprompt-mainContainer .tabmodalprompt-buttonContainer button:hover, 85 | tabmodalprompt .tabmodalprompt-mainContainer .tabmodalprompt-buttonContainer button:focus { 86 | background-color: var(--toolbarbutton-hover-background); 87 | } 88 | 89 | tabmodalprompt .tabmodalprompt-mainContainer .tabmodalprompt-buttonContainer button:active { 90 | background-color: var(--toolbarbutton-active-background); 91 | } 92 | 93 | tabmodalprompt .tabmodalprompt-mainContainer .tabmodalprompt-buttonContainer button[default="true"], 94 | tabmodalprompt .tabmodalprompt-mainContainer .tabmodalprompt-buttonContainer button[label="OK"] { 95 | background-color: #0A84FF; 96 | border-color: #0060DF; 97 | color: #fff !important; 98 | } 99 | 100 | tabmodalprompt .tabmodalprompt-mainContainer .tabmodalprompt-buttonContainer button[default="true"]:hover, 101 | tabmodalprompt .tabmodalprompt-mainContainer .tabmodalprompt-buttonContainer button[default="true"]:focus, 102 | tabmodalprompt .tabmodalprompt-mainContainer .tabmodalprompt-buttonContainer button[label="OK"]:hover, 103 | tabmodalprompt .tabmodalprompt-mainContainer .tabmodalprompt-buttonContainer button[label="OK"]:focus { 104 | background-color: #0060DF !important; 105 | } 106 | -------------------------------------------------------------------------------- /_deprecated/General/findbar_top_centered.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Findbar on top of the page with centered elements 3 | */ 4 | 5 | @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 6 | @namespace html url("http://www.w3.org/1999/xhtml"); 7 | 8 | findbar { 9 | --findbarbutton-vertical-padding: 4px; 10 | --findbar-height: calc(2 * var(--findbarbutton-vertical-padding) + 22px); 11 | --findbar-height-negative: calc(-1 * var(--findbar-height)); 12 | 13 | /* Large number to keep all elements centered and to prevent them from shifting when .found-mathes text changes width. 14 | * Also the main thing to customize, as it requires different values depending on screen resolution and localization. */ 15 | --found-matches-width: 236px; 16 | 17 | -moz-box-ordinal-group: 0; 18 | position: fixed !important; 19 | /* display: block !important; */ 20 | width: 100% !important; 21 | border-top: none !important; 22 | background: var(--toolbar-bgcolor) !important; 23 | transition: transform 120ms ease-out !important; 24 | z-index: 2; 25 | } 26 | 27 | findbar, findbar[hidden] { 28 | display: -webkit-inline-box !important; 29 | margin-top: -2px !important; 30 | padding-bottom: 4px !important; 31 | } 32 | 33 | findbar[hidden] { 34 | visibility: collapse !important; 35 | opacity: 1 !important; 36 | transform: translateY(var(--findbar-height-negative)); 37 | } 38 | 39 | /* Reverse order of elements */ 40 | .findbar-container { 41 | -moz-box-direction: reverse; 42 | -moz-box-pack: center; 43 | margin: auto; 44 | } 45 | 46 | .findbar-container > hbox { 47 | -moz-box-ordinal-group: 1; 48 | margin: 0 70px; 49 | } 50 | 51 | .findbar-container > hbox > toolbarbutton { 52 | display: none !important; 53 | } 54 | 55 | findbar html|input.findbar-textbox { 56 | width: 32em !important; 57 | text-align: center !important; 58 | } 59 | 60 | findbar .found-matches { 61 | -moz-box-ordinal-group: 2; 62 | display: -moz-box; 63 | min-width: var(--found-matches-width) !important; 64 | width: var(--found-matches-width) !important; 65 | margin-inline-end: 8px !important; 66 | opacity: 0.75 !important; 67 | text-align: right !important; 68 | } 69 | 70 | findbar .found-matches[hidden] { 71 | display: -moz-box !important; 72 | visibility: hidden !important; 73 | } 74 | 75 | findbar .findbar-button { 76 | -moz-box-ordinal-group: 0; 77 | display: -moz-box !important; 78 | padding: var(--findbarbutton-vertical-padding) var(--toolbarbutton-inner-padding) !important; 79 | } 80 | 81 | .findbar-container > .findbar-find-fast:not(.found-matches) { 82 | display: none !important; 83 | } 84 | 85 | 86 | /* Hide findbar after out of focus for X seconds */ 87 | /*findbar { 88 | height: 32px !important;; 89 | } 90 | 91 | findbar:not(:focus-within) { 92 | height: 0 !important;; 93 | overflow: hidden !important; 94 | transition: height 0.2s ease 3s !important; 95 | }*/ 96 | 97 | 98 | -------------------------------------------------------------------------------- /_deprecated/Navbar/identitybox_colored_background.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Paint identity box background to indicate insecure connection 3 | * Example: https://i.imgur.com/Px0ZmWj.png 4 | */ 5 | 6 | :root { 7 | --identity-box-notsecure-bg-color: #d55; 8 | --identity-box-unsafe-bg-color: #da5; 9 | } 10 | 11 | /* 12 | * States of #identity-box 13 | * 1. Secure: verifiedDomain / verifiedIdentity / mixedActiveBlocked 14 | * 2. Unsafe: mixedDisplayContent / mixedDisplayContentLoadedActiveBlocked / weakCipher / certUserOverridden 15 | * 3. NotSecure: notSecure / insecureLoginForms / mixedActiveContent 16 | */ 17 | 18 | /* NOT SECURE: unencrypted HTTP */ 19 | #urlbar[pageproxystate="valid"] > #identity-box.notSecure, 20 | #urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms, 21 | #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent { 22 | background-color: var(--identity-box-notsecure-bg-color) !important; 23 | fill: black !important; 24 | box-shadow: 1px 0px 0 0 var(--lwt-toolbar-field-border-color) !important; 25 | } 26 | 27 | /* UNSAFE: secure HTTPS connection with not secure page elements */ 28 | #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent, 29 | #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked, 30 | #urlbar[pageproxystate="valid"] > #identity-box.weakCipher, 31 | #urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden { 32 | background-color: var(--identity-box-unsafe-bg-color) !important; 33 | fill: black !important; 34 | box-shadow: 1px 0px 0 0 var(--lwt-toolbar-field-border-color) !important; 35 | } -------------------------------------------------------------------------------- /_deprecated/Navbar/identitybox_colored_line.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Add a colored line to the right of identity box to indicate not secure connection 3 | * Example: https://i.imgur.com/WceMwmO.png 4 | */ 5 | 6 | :root { 7 | --identity-box-separator-color-mixed: #f90d; 8 | --identity-box-separator-color-notsecure: #f03d; 9 | } 10 | 11 | /* 12 | * States of #identity-box 13 | * 1. Secure: verifiedDomain / verifiedIdentity / mixedActiveBlocked 14 | * 2. Mixed: mixedDisplayContent / mixedDisplayContentLoadedActiveBlocked / weakCipher / certUserOverridden 15 | * 3. NotSecure: notSecure / insecureLoginForms / mixedActiveContent 16 | */ 17 | 18 | /* MIXED: secure HTTPS connection with not secure page elements */ 19 | #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked, 20 | #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent, 21 | #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked, 22 | #urlbar[pageproxystate="valid"] > #identity-box.weakCipher, 23 | #urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden { 24 | border-inline-end: 1px solid !important; 25 | border-image: linear-gradient(transparent 15%, var(--identity-box-separator-color-mixed) 15%, 85%, transparent 85%) !important; 26 | border-image-slice: 1 !important; 27 | } 28 | 29 | /* NOT SECURE: unencrypted HTTP */ 30 | #urlbar[pageproxystate="valid"] > #identity-box.notSecure, 31 | #urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms, 32 | #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent { 33 | border-inline-end: 1px solid !important; 34 | border-image: linear-gradient(transparent 15%, var(--identity-box-separator-color-notsecure) 15%, 85%, transparent 85%) !important; 35 | border-image-slice: 1 !important; 36 | /* fill: red !important; */ 37 | } 38 | -------------------------------------------------------------------------------- /_deprecated/Navbar/urlbar_centered_address.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Center address in urlbar and prevent it from shifting. 3 | * Hide unnecessary elements to clean up UI. 4 | */ 5 | 6 | @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 7 | @namespace html url("http://www.w3.org/1999/xhtml"); 8 | 9 | #urlbar .urlbar-input-box { 10 | margin: auto !important; 11 | } 12 | 13 | #urlbar html|input#urlbar-input { 14 | text-align: center !important; 15 | } 16 | 17 | /* Hide "search with Google" placeholder text */ 18 | #urlbar html|input#urlbar-input::placeholder { 19 | opacity: 0 !important; 20 | } 21 | 22 | /* Keep consistent margin across all URL states. Needed to ensure constant width of #identity-box */ 23 | #identity-box { 24 | margin-inline-end: 4px !important; 25 | padding-inline-end: 8px !important; 26 | } 27 | 28 | /* Always keep the width of 2 icons, but disable pointer events on not loaded pages */ 29 | #identity-box[class="unknownIdentity"] { 30 | min-width: 52px !important; 31 | opacity: 0; 32 | pointer-events: none; 33 | } 34 | 35 | /* Negate notification icons No-Hover policy */ 36 | #identity-box:hover:not([open=true]) { 37 | background-color: hsla(0,0%,70%,.2) !important; 38 | fill-opacity: 0.8 !important; 39 | } 40 | 41 | #identity-box:hover:active { 42 | background-color: hsla(0,0%,70%,.3) !important; 43 | fill-opacity: 0.8 !important; 44 | } 45 | 46 | /* Hide useless buttons */ 47 | #urlbar .urlbar-go-button, 48 | #urlbar .urlbar-history-dropmarker { 49 | display: none !important; 50 | } 51 | 52 | /* Page action buttons always occupy their space */ 53 | #urlbar[pageproxystate="invalid"] > #page-action-buttons > #pageActionButton, 54 | #urlbar[pageproxystate="invalid"] > #page-action-buttons > #star-button-box { 55 | -moz-box-ordinal-group: 0; 56 | display: -moz-box !important; 57 | visibility: hidden !important; 58 | pointer-events: none; 59 | } 60 | 61 | /* Minimize some spacing */ 62 | #pageActionSeparator { 63 | visibility: collapse !important; 64 | } 65 | 66 | /* #page-action-buttons > :not([hidden]) ~ #pageActionSeparator { 67 | visibility: visible !important; 68 | margin: 0 4px !important; 69 | } */ 70 | 71 | #userContext-icons, 72 | #urlbar-zoom-button { 73 | margin: 0 4px !important; 74 | } 75 | 76 | #urlbar-zoom-button { 77 | -moz-box-ordinal-group: 0; 78 | } 79 | 80 | /* Don't show "Switch to tab" text */ 81 | #urlbar-display-box { 82 | display: none !important; 83 | } 84 | 85 | /* Fix URL prefix alignment in case of left overflow | Not needed in FF 70 */ 86 | /* html|input.urlbar-scheme { 87 | text-align: left !important; 88 | } */ 89 | -------------------------------------------------------------------------------- /_deprecated/Navbar/urlbar_remove_megabar.css: -------------------------------------------------------------------------------- 1 | /* REMOVE MEGABAR START 2 | * VERSION 1.0.2 3 | * RELEASE NOTES: http://userchrome.wesleybranton.com/notes/megabar */ 4 | /*** breaks urlbar on Firefox 126 *** */ 5 | /* @-moz-document url(chrome://browser/content/browser.xhtml) { 6 | #urlbar[breakout][breakout-extend] > #urlbar-input-container, 7 | #urlbar-input-container { 8 | height: var(--urlbar-height) !important; 9 | padding-block: 0px !important; 10 | padding-inline: 0px !important; 11 | transition: none !important; 12 | border-radius: var(--toolbarbutton-border-radius) !important; 13 | } 14 | 15 | #urlbar[breakout][breakout-extend] { 16 | top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important; 17 | left: 0 !important; 18 | width: 100% !important; 19 | } 20 | 21 | #urlbar[breakout][breakout-extend] > #urlbar-background { 22 | box-shadow: 0 1px 4px rgba(0,0,0,.05) !important; 23 | } 24 | 25 | #urlbar[breakout][breakout-extend] > #urlbar-input-container { 26 | border: 1px solid var(--toolbar-field-focus-border-color) !important; 27 | } 28 | 29 | #urlbar[breakout][breakout-extend][open] > #urlbar-input-container { 30 | border-bottom: 1px solid transparent !important; 31 | border-radius: var(--toolbarbutton-border-radius) var(--toolbarbutton-border-radius) 0 0 !important; 32 | } 33 | } */ 34 | /* REMOVE MEGABAR END */ -------------------------------------------------------------------------------- /_deprecated/Tabs/dynamic_tab_width.css: -------------------------------------------------------------------------------- 1 | /** 2 | * WIP: Tabs occupy all available width. Selected tab is wider. 3 | * TODO: possibly remove, tab sliding causes too much headache 4 | */ 5 | 6 | .tabbrowser-tab:not([pinned]) { 7 | max-width: 300px !important; 8 | } 9 | 10 | .tabbrowser-tab[selected]:not([pinned]) { 11 | min-width: calc(var(--tab-min-width) + 50px) !important; 12 | } 13 | 14 | /* .tabbrowser-tab:not([pinned]) { 15 | transition: min-width 100ms ease-out, max-width 100ms ease-out; 16 | } */ 17 | 18 | -------------------------------------------------------------------------------- /_deprecated/Tabs/flag_multi_selected_tabs.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Flag multi-selected tabs with an orange marker 3 | */ 4 | 5 | .tabbrowser-tab[multiselected="true"] .tab-content::before { 6 | position: absolute; 7 | margin: -18px 0 0 -9px; 8 | padding: 0 2px; 9 | color:darkorange; 10 | content: "●"; 11 | font-size: 11px; 12 | } -------------------------------------------------------------------------------- /_deprecated/Tabs/subtle_tab_separators.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Mimic Opera tab separators. 3 | * Shorter and more subtle. 4 | */ 5 | 6 | .tabbrowser-tab::after, 7 | .tabbrowser-tab::before { 8 | margin-bottom: 9px !important; 9 | margin-top: 9px !important; 10 | } 11 | 12 | .tabbrowser-tab:hover::after, 13 | .tabbrowser-tab[multiselected]::after, 14 | #tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab[beforehovered]::after, 15 | #tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab[before-multiselected]::after { 16 | visibility: hidden !important; 17 | } 18 | 19 | #tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab[beforeselected-visible]::after, 20 | #tabbrowser-tabs[movingtab] > .tabbrowser-tab[visuallyselected]::before, 21 | .tabbrowser-tab[visuallyselected]::after, 22 | .tabbrowser-tab:last-of-type::after { 23 | visibility: hidden !important; 24 | } 25 | -------------------------------------------------------------------------------- /_deprecated/Tabs/tab_sound_icon_above_favicon.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Move the sound indicator to the left of the tab and make it smaller 3 | * Screenshot: https://i.imgur.com/XVyGNMG.png 4 | * 5 | * Contributor(s): BubiBalboa via reddit.com/user/marciiF 6 | */ 7 | 8 | .tab-icon-sound { 9 | -moz-box-ordinal-group: 0 !important; 10 | margin: initial !important; 11 | margin-right: -16px !important; 12 | border-radius: 50% !important; 13 | opacity: 1 !important; 14 | transform: translate(35%, -35%) !important; 15 | } 16 | 17 | .tab-icon-sound:hover { 18 | background-color: var(--toolbar-bgcolor) !important; 19 | } 20 | 21 | .tab-close-button { 22 | -moz-box-ordinal-group: 2 !important; 23 | } 24 | 25 | .tab-icon-sound[soundplaying] { 26 | list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg) !important; 27 | } 28 | 29 | .tab-icon-sound[muted] { 30 | list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg) !important; 31 | } 32 | 33 | .tab-icon-sound[activemedia-blocked] { 34 | list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-blocked-small.svg) !important; 35 | } 36 | -------------------------------------------------------------------------------- /_deprecated/Toolbars/bookmark_toolbar_on_bottom_of_newtab.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Bookmarks toolbar is visible at the bootom of new tab page and only on hover. 3 | */ 4 | 5 | #PersonalToolbar { 6 | position: fixed !important; 7 | bottom: 0; 8 | width: 100%; 9 | height: 32px; 10 | /* padding-bottom: 4px !important; */ 11 | opacity: 0 !important; 12 | transition: min-height 170ms ease-out, 13 | max-height 170ms ease-out, 14 | background-color 0.1s cubic-bezier(.17,.67,.83,.67), 15 | opacity 50ms ease-out !important; 16 | -moz-window-dragging: no-drag; 17 | } 18 | 19 | #PersonalToolbar #PlacesToolbar { 20 | visibility: collapse !important; 21 | height: 32px !important; 22 | } 23 | 24 | /* TODO: Center bookmarks on the bar */ 25 | /* #PersonalToolbar #PlacesToolbar #PlacesToolbarItems { 26 | 27 | } */ 28 | 29 | #main-window[title^="Mozilla Firefox"] #PersonalToolbar:hover, 30 | #main-window[title^="Нова вкладка"] #PersonalToolbar:hover { 31 | opacity: 1 !important; 32 | } 33 | 34 | #main-window[title^="Mozilla Firefox"] #PersonalToolbar:hover #PlacesToolbar, 35 | #main-window[title^="Нова вкладка"] #PersonalToolbar:hover #PlacesToolbar { 36 | visibility: visible !important; 37 | } 38 | 39 | /* Shorter separators with wider margins */ 40 | #PlacesToolbar toolbarseparator { 41 | margin: 5px 12px !important; 42 | opacity: 0.40 !important; 43 | } 44 | -------------------------------------------------------------------------------- /_deprecated/Toolbars/floating_toolbars_on_hover.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Make #navigator-toolbox float over page content in maximized window and fullscreen modes 3 | * Original code provided by am803 4 | * https://www.reddit.com/r/FirefoxCSS/comments/bhbvhj/make_navigatortoolbox_appear_on_top_of_page/elrzrq3/ 5 | */ 6 | 7 | /* Disable native toggler that triggers JS listener */ 8 | #fullscr-toggler { 9 | pointer-events: none; 10 | } 11 | 12 | /* Force bgcolor to prevent transparent tabbar */ 13 | #TabsToolbar { 14 | background-color: var(--lwt-accent-color) !important; 15 | } 16 | 17 | /* Allow registering hover state over toolbars */ 18 | :root:not([sizemode="normal"]) :-moz-any(#TabsToolbar, #nav-bar, #PersonalToolbar) { 19 | -moz-window-dragging: no-drag !important; 20 | } 21 | 22 | :root:not([sizemode="normal"]):not([customizing]) #navigator-toolbox { 23 | margin-top: calc(-30px - var(--tab-min-height)) !important; 24 | transition: all .2s ease .2s !important; 25 | z-index: 1; 26 | } 27 | 28 | :root:not([sizemode="normal"]):not([customizing]) #navigator-toolbox::after { 29 | height: 2px; 30 | visibility: hidden !important; 31 | opacity: 0 !important; 32 | } 33 | 34 | :root[customizing] #navigator-toolbox, 35 | :root:not([sizemode="normal"]):not([customizing]) #navigator-toolbox:focus-within, 36 | :root:not([sizemode="normal"]):not([customizing]) #navigator-toolbox:hover 37 | /*:root:not([sizemode="normal"]):not([customizing]) #mainPopupSet:focus-within ~ #navigator-toolbox, 38 | :root:not([sizemode="normal"]):not([customizing]) #mainPopupSet:hover ~ #navigator-toolbox */ { 39 | margin-top: 0 !important; 40 | transition-delay: 0s !important; 41 | } 42 | 43 | :root:not([sizemode="normal"]):not([customizing]) #navigator-toolbox:focus-within::after, 44 | :root:not([sizemode="normal"]):not([customizing]) #navigator-toolbox:hover::after 45 | /*:root:not([sizemode="normal"]):not([customizing]) #mainPopupSet:focus-within ~ #navigator-toolbox::after, 46 | :root:not([sizemode="normal"]):not([customizing]) #mainPopupSet:hover ~ #navigator-toolbox::after */ { 47 | height: 30px !important; 48 | } 49 | 50 | :root:not([sizemode="normal"]):not([customizing]) #browser { 51 | position: fixed; 52 | display: block; 53 | z-index: 0; 54 | top: 0; 55 | width: 100%; 56 | height: 100%; 57 | } 58 | 59 | :root:not([sizemode="normal"]):not([customizing]) #browser > #appcontent { 60 | width: 100%; 61 | height: 100%; 62 | } 63 | 64 | /* Fix strange 10px shift while not in fullscreen mode */ 65 | :root:not([inFullscreen]) #browser { 66 | top: 8px !important; 67 | height: calc(100% - 10px) !important; 68 | } 69 | 70 | 71 | /* Win8: To match non-fullscreen #titlebar-buttonbox-container */ 72 | @media (-moz-os-version: windows-win8) { 73 | #window-controls { 74 | margin-inline-start: 8px; 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /_deprecated/Toolbars/floating_toolbars_on_hover_fullscreen_only.css: -------------------------------------------------------------------------------- 1 | /* Hide the whole toolbar area unless urlbar is focused or cursor is over the toolbar */ 2 | /* Dimensions on non-Win10 OS probably needs to be adjusted */ 3 | 4 | /* Disable native toggler that triggers JS listener */ 5 | #fullscr-toggler { 6 | pointer-events: none; 7 | } 8 | 9 | /* Force bgcolor to prevent transparent tabbar */ 10 | #TabsToolbar { 11 | background-color: var(--lwt-accent-color) !important; 12 | } 13 | 14 | :root[inFullscreen] { margin-top: 0px !important; } 15 | /* :root[sizemode="maximized"] #navigator-toolbox{ margin-top: 8px } */ 16 | 17 | :root[inFullscreen] #navigator-toolbox{ 18 | position: fixed !important; 19 | display: block; 20 | margin-top: 0 !important; 21 | background-color: var(--lwt-accent-color, black) !important; 22 | transition: transform 82ms 33ms linear, opacity 42ms 33ms linear !important; 23 | transform-origin: top; 24 | line-height: 0; 25 | z-index: 1; 26 | } 27 | 28 | :root[inFullscreen] #navigator-toolbox > *{ line-height: normal } 29 | 30 | :root[inFullscreen] #navigator-toolbox, 31 | :root[inFullscreen] #navigator-toolbox > *{ 32 | width: 100vw; 33 | -moz-appearance: none !important; 34 | } 35 | 36 | :root[inFullscreen] #navigator-toolbox:not(:focus-within):not(:hover){ 37 | transform: rotateX(88deg); 38 | opacity: 0; 39 | } 40 | 41 | :root[inFullscreen]:not([customizing]) #navigator-toolbox::after { 42 | height: 0; 43 | visibility: hidden !important; 44 | opacity: 0 !important; 45 | } 46 | 47 | :root[inFullscreen]:not([customizing]) #navigator-toolbox:focus-within::after, 48 | :root[inFullscreen]:not([customizing]) #navigator-toolbox:hover::after { 49 | /* height: 20px; */ 50 | visibility: hidden !important; 51 | opacity: 0 !important; 52 | } 53 | 54 | 55 | :root[customizing] #navigator-toolbox{ 56 | position: relative !important; 57 | transform: none !important; 58 | opacity: 1 !important; 59 | } 60 | 61 | #PersonalToolbar[collapsed]{ margin-block-end: -7px } 62 | -------------------------------------------------------------------------------- /_deprecated/Toolbars/menubar_visible_on_hover.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Show menubar only on hover 3 | */ 4 | 5 | #toolbar-menubar { 6 | -moz-window-dragging: no-drag !important; 7 | } 8 | 9 | /* [autohide="false] means that MenuBar is enabled in UI setting */ 10 | #toolbar-menubar[autohide="false"]:not(:hover) { 11 | min-height: 1px !important; 12 | } 13 | 14 | #toolbar-menubar:not(:hover) #menubar-items, 15 | #toolbar-menubar[autohide="false"]:not(:hover) > .titlebar-buttonbox-container{ 16 | display: none !important; 17 | } 18 | 19 | #toolbar-menubar[autohide="false"]:hover + #TabsToolbar > .titlebar-buttonbox-container { 20 | visibility: hidden; 21 | } 22 | 23 | #toolbar-menubar[autohide="false"] + #TabsToolbar > .titlebar-buttonbox-container { 24 | display: -moz-box !important; 25 | margin-top: -1px; 26 | } 27 | 28 | #toolbar-menubar[autohide="false"] + #TabsToolbar .titlebar-spacer[type="post-tabs"] { 29 | display: -moz-box !important; 30 | } 31 | -------------------------------------------------------------------------------- /_deprecated/Toolbars/show_navbar_on_hover.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Show navbar (ulrbar + buttons) only on hover. 3 | * Tabs remain visible. 4 | */ 5 | 6 | #TabsToolbar { 7 | -moz-window-dragging: no-drag !important; 8 | } 9 | 10 | #nav-bar:not([customizing="true"]):not([inFullscreen]) { 11 | min-height: 1px !important; 12 | max-height: 1px !important; 13 | margin-bottom: -1px !important; 14 | transition: all 180ms ease 0.5s !important; 15 | z-index: -1 !important; 16 | } 17 | 18 | #navigator-toolbox:hover:not([inFullscreen]) #nav-bar, 19 | #navigator-toolbox:focus-within:not([inFullscreen]) #nav-bar { 20 | min-height: 40px !important; 21 | max-height: 40px !important; 22 | margin-bottom: -40px !important; 23 | transition: all 180ms ease 0s !important; 24 | z-index: 1 !important; 25 | } 26 | 27 | #urlbar, #urlbar[breakout][breakout-extend] { 28 | top: calc(20px - var(--urlbar-height) / 2) !important; 29 | } 30 | -------------------------------------------------------------------------------- /_deprecated/userContent/about_addons.css: -------------------------------------------------------------------------------- 1 | @-moz-document url("chrome://mozapps/content/extensions/aboutaddons.html") { 2 | /* url-prefix(chrome://mozapps/content/extensions/extensions.xul) */ 3 | 4 | /* Don't dim disabled addon's icon */ 5 | richlistitem[active="false"] .icon { 6 | filter: unset !important; 7 | } 8 | 9 | 10 | /** 11 | * Compact addons page 12 | * by mjcov 13 | * https://www.reddit.com/r/FirefoxCSS/comments/bc8f07/my_compact_addons_manager_screenshot_inside/ 14 | * TODO: restyle this section 15 | */ 16 | #addons-page .addon.card { 17 | max-width: 85% !important; 18 | padding: 4px 6px 4px 11px !important; 19 | margin: 0 0 8px !important; 20 | border-radius: 2px !important; 21 | } 22 | #addons-page #header-inner { 23 | width: auto !important; 24 | margin-left: 12px !important; 25 | } 26 | #addons-page #heading { 27 | /*margin: -3.35rem 0 1rem 0 !important;*/ 28 | margin: -3.35rem 0 0 0 !important; 29 | } 30 | #addons-page #heading .heading-inner { 31 | margin-left: 12px !important; 32 | margin-inline-start: 0 !important; 33 | padding-right: 4px !important; 34 | width: calc(100vw - 240px - 24px) !important; 35 | } 36 | #addons-page #heading-name { 37 | visibility: hidden !important; 38 | } 39 | #addons-page #addon-list { 40 | padding: 1rem 12px !important; 41 | } 42 | #addons-page .card:hover { 43 | box-shadow: 0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08) !important; 44 | } 45 | #addons-page .card:focus { 46 | box-shadow: 0 0 0 2px #0a84ff !important; 47 | } 48 | #addons-page #private-browsing-notice, 49 | #addons-page .privateBrowsing-notice { 50 | display: none !important; 51 | } 52 | #addons-page .addon[privateBrowsing="true"] .name:after { 53 | content: 'PRIVATE'; 54 | display: inline-block; 55 | background-color: var(--purple-70); 56 | color: #fff; 57 | opacity: 0.55; 58 | padding: 4px 5px 3px; 59 | font-size: 0.9rem; 60 | font-weight: 600; 61 | margin-left: 5px; 62 | } 63 | 64 | 65 | /* 66 | * Show action buttons (enable/disable, options etc.) 67 | * https://www.reddit.com/r/FirefoxCSS/comments/cs4yl5/show_action_buttons_enabledisable_options_etc_on/ 68 | */ 69 | panel-list { 70 | border: none !important; 71 | box-shadow: none !important; 72 | display: inline !important; 73 | min-width: unset !important; 74 | padding: 0 !important; 75 | right: 0px !important; 76 | } 77 | 78 | panel-item { 79 | display: inline-block !important; 80 | margin-inline-start: 2px !important; 81 | } 82 | 83 | .more-options-menu { 84 | margin: unset !important; 85 | } 86 | 87 | /* link + is needed to avoid styling check for updates buttons and tabs on add-on detail pages because shadowdom */ 88 | link + button { 89 | background-color: var(--in-content-button-background) !important; 90 | background-position: center !important; 91 | border-radius: 2px !important; 92 | cursor: pointer !important; 93 | height: 32px !important; 94 | padding-left: 8px !important; 95 | padding-right: 8px !important; 96 | } 97 | link + button:hover { 98 | background-color: var(--in-content-button-background-hover) !important; 99 | } 100 | link + button:hover:active { 101 | background-color: var(--in-content-button-background-active) !important; 102 | } 103 | link + button:focus { 104 | box-shadow: 0 0 0 1px var(--in-content-border-active) inset, 0 0 0 1px var(--in-content-border-active), 0 0 0 4px var(--in-content-border-active-shadow) !important; 105 | } 106 | 107 | /* dot badging on update button */ 108 | link + button::after { 109 | left: 22px !important; 110 | top: 4px !important; 111 | } 112 | 113 | /* use icons, remove text */ 114 | panel-item[action="remove"], 115 | panel-item[action="install-update"], 116 | panel-item[action="always-activate"] { 117 | font-size: 0px !important; 118 | position: relative !important; 119 | top: -6px !important; 120 | fill: var(--in-content-page-color) !important; 121 | width: 32px !important; 122 | } 123 | 124 | .more-options-button.ghost-button, 125 | .arrow.top, 126 | .arrow.bottom, 127 | panel-item-separator, 128 | panel-item[action="report"], 129 | panel-item[action="expand"], 130 | panel-item[hidden], 131 | .addon-description { 132 | display: none !important; 133 | } 134 | 135 | .card-contents { 136 | align-self: center !important; 137 | } 138 | 139 | /* show counter next to "Enabled" and "Disabled" */ 140 | addon-list[type="extension"] section[section="0"] > addon-card { 141 | counter-increment: enabled; 142 | } 143 | addon-list[type="extension"] section[section="1"] > addon-card { 144 | counter-increment: disabled; 145 | } 146 | section[section="0"] { 147 | counter-reset: enabledpvt; /* define scope */ 148 | } 149 | addon-list[type="extension"] section[section="0"] > addon-card .addon-badge-private-browsing-allowed { 150 | counter-increment: enabledpvt; 151 | } 152 | addon-list[type="extension"] section[section="0"], 153 | addon-list[type="extension"] section[section="1"] { 154 | position: relative !important; 155 | } 156 | addon-list[type="extension"] section[section="0"] > .list-section-heading, 157 | addon-list[type="extension"] section[section="1"] > .list-section-heading { 158 | visibility: collapse !important; 159 | } 160 | addon-list[type="extension"] section[section="0"]::after, 161 | addon-list[type="extension"] section[section="1"]::after { 162 | content: "Увімкнено: " counter(enabled) ", в приватних вікнах: " counter(enabledpvt); 163 | position: absolute !important; 164 | top: 0px !important; 165 | font-size: 17px; 166 | font-weight: 600; 167 | } 168 | addon-list[type="extension"] section[section="1"]::after { 169 | content: "Вимкнено: " counter(disabled); 170 | } 171 | 172 | } 173 | -------------------------------------------------------------------------------- /_deprecated/userContent/about_newtab.css: -------------------------------------------------------------------------------- 1 | @-moz-document url('about:home'), url('about:newtab'), url('about:privatebrowsing'), url('about:blank') { 2 | html:not(#ublock0-epicker) body { 3 | background-color: var(--arc-dark-tabbar) !important; 4 | } 5 | 6 | /* Hide scrollbar */ 7 | :root{ 8 | scrollbar-width: none !important; 9 | } 10 | } 11 | 12 | 13 | @-moz-document url('about:newtab'), url('about:home') { 14 | @media (max-width: 1920px) { 15 | body { 16 | background-image: url('../Backgrounds/bg-photo2-1920.jpg') !important; 17 | } 18 | } 19 | 20 | @media (max-width: 1366px) { 21 | body { 22 | background-image: url('../Backgrounds/bg-photo-1366.jpg') !important; 23 | } 24 | } 25 | 26 | body { 27 | overflow-y: hidden !important; 28 | --newtab-card-background-color: #333 !important; 29 | /* NewTab background */ 30 | background-size: cover !important; 31 | background-attachment: fixed !important; 32 | background-position: center !important; 33 | } 34 | 35 | /* Hide "Top sites" title */ 36 | .outer-wrapper .section-top-bar .click-target-container { 37 | display: none !important; 38 | } 39 | 40 | /* Hide "pinned" icon */ 41 | .icon-pin-small { 42 | display: none !important; 43 | } 44 | 45 | /* ********** VARIOUS OLD CRAP ************ */ 46 | 47 | /* featured cards title bg */ 48 | /* .card, .prefs-pane .sidebar { 49 | background-color:#202020 !important; 50 | } */ 51 | 52 | /* featured cards title text */ 53 | #snippets, .section-title, .snippetContainer, .card-title, .card-description { 54 | color: #AEAEAE !important; 55 | } 56 | 57 | .top-site-outer .tile { 58 | border-radius: 2px !important; 59 | } 60 | 61 | .top-site-outer .screenshot { 62 | background-position: top center !important; 63 | background-size: 120px !important; 64 | border-radius: 2px !important; 65 | } 66 | 67 | .top-sites-list .top-site-outer .rich-icon { 68 | background-size: 86px !important; 69 | border-radius: 2px !important; 70 | } 71 | 72 | .card-outer { 73 | border-radius: 1px !important; /* sharp edges */ 74 | box-shadow: 0 14px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22) !important; 75 | } 76 | 77 | /* .top-sites-list .top-site-outer .title span { 78 | color:#D1D1D1; 79 | } 80 | 81 | .top-site-outer .tile { 82 | width: 156px !important; 83 | height: 96px !important; 84 | } 85 | 86 | main { 87 | width: 1146px !important; 88 | padding-bottom: 0px !important; 89 | } */ 90 | 91 | } 92 | 93 | /* More homepage styling here : 94 | * https://github.com/Izheil/Quantum-Nox-Firefox-Dark-Full-Theme/blob/master/Full%20dark%20theme/userContent.css 95 | */ 96 | -------------------------------------------------------------------------------- /_deprecated/userContent/about_reader.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Change Reader fonts and appearence 3 | */ 4 | 5 | @-moz-document url-prefix("about:reader") { 6 | /* Fonts */ 7 | body.sans-serif, 8 | body.sans-serif .remove-button { 9 | font-family: "Segoe UI", Arial, sans-serif !important; 10 | } 11 | 12 | body.serif, 13 | body.serif .remove-button { 14 | font-family: "Tahoma", "Times New Roman", serif !important; 15 | } 16 | 17 | /* Buttons and Toolbar to match browser's navbar color */ 18 | .toolbar { 19 | background-color: var(--arc-dark-navbar) !important; 20 | border: none !important; 21 | } 22 | 23 | .button { 24 | height: 52px !important; 25 | background-color: var(--arc-dark-navbar) !important; 26 | fill: #eee !important; 27 | border: none !important; 28 | } 29 | 30 | .button:hover { 31 | background-color: #edd !important; 32 | fill: #444 !important; 33 | } 34 | 35 | .close-button { 36 | height: 68px !important; 37 | } 38 | 39 | .close-button:hover { 40 | background-color: #d66 !important; 41 | fill: #444 !important; 42 | } 43 | 44 | .dropdown.narrate-dropdown { 45 | display: none !important; 46 | } 47 | 48 | /* Text colors */ 49 | .moz-reader-content a:visited { 50 | color: #a4f !important; 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /_deprecated/userContent/addon_styling.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Ublock Origin dark theme 3 | * Replace UUID in the "moz-extension://UUID/" string with the one from about:debugging#addons 4 | * by Blaises and drakmester 5 | * https://www.reddit.com/r/FirefoxCSS/comments/7lefac/ublock_origin_dark_theme/ 6 | * https://www.reddit.com/r/FirefoxCSS/comments/bcgnvb/fully_themed_ublock_origin_css/ 7 | * TODO: recoloring 8 | */ 9 | 10 | @-moz-document url-prefix("moz-extension://96739bf5-16fd-468d-ba3e-fcf65184ca7c/") { 11 | body { background-color: #2A2C31 !important; color: #67707C !important; } 12 | a { color: #8ad !important; } 13 | h2 { background-color: #2F3136 !important; color: #eee !important; } 14 | code { background-color: #36393F !important; } 15 | .tool { color: #999 !important; } 16 | .tool.enabled:hover { color: #8ad !important; } 17 | .permatoolbar { background-color: #2F3136 !important; } 18 | .permatoolbar .button { background-color: #36393F !important; } 19 | .permatoolbar .button:hover { background-color: #67707C !important; } 20 | #tooltip { background-color: #67707C !important; border: 0px solid #111 !important; color: #111 !important; } 21 | #firewallContainer > div { background-color: #2F3136 !important; } 22 | #firewallContainer > div:hover { background-color: #36393F !important; } 23 | #firewallContainer > div > span { color: #eee !important; border-bottom: 0px solid #111 !important; } 24 | #firewallContainer > div > span:first-of-type ~ span { border-left: 0px solid #111 !important; } 25 | #extraTools { background-color: #2F3136 !important; } 26 | #extraTools > span:hover { color: #8ad !important; } 27 | #dashboard-nav-widgets { background-color: #111 !important; border-bottom: 0px solid #666 !important; } 28 | .tabButton { background-color: #2F3136 !important; border: 1px solid #666 !important; border-bottom: 0px solid #666 !important; color: #eee !important; } 29 | .tabButton.selected { background-color: #222 !important; border-bottom: 0px solid #222 !important; } 30 | #diff li { background-color: #36393F !important; } 31 | #diff li:nth-child(even) { background-color: #666 !important; } 32 | #diff textarea { background-color: #333 !important; color: #67707C !important; } 33 | #switch .fa-icon { fill: #7289DA !important; } 34 | body.off #switch .fa-icon { fill: #67707C !important; } 35 | #tooltip { background-color: #36393F !important; border: 0px solid gray !important; border-radius: 0px !important; box-shadow: 0px 0px 0px gray !important; color: white !important; } 36 | #refresh { background-color: #36393F !important; border: 0px solid #ddc !important; border-radius: 0px !important; fill: white !important; } 37 | } 38 | -------------------------------------------------------------------------------- /_deprecated/userContent/error_pages.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Dark error pages to match overall theme 3 | */ 4 | 5 | body.neterror, 6 | body.certerror { 7 | background-color: var(--arc-dark-tabbar) !important; 8 | color: #fffc !important; 9 | } 10 | 11 | body.neterror #errorPageContainer h1, 12 | body.certerror #errorPageContainer h1, 13 | body.neterror #errorPageContainer button, 14 | body.certerror #errorPageContainer button { 15 | color: inherit !important; 16 | } 17 | 18 | body.certerror #badCertAdvancedPanel { 19 | background-color: var(--arc-dark-navbar) !important; 20 | } 21 | -------------------------------------------------------------------------------- /_deprecated/userContent/variables.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Set colors to match ArcDark theme 3 | */ 4 | 5 | :root { 6 | /* Cheat sheet 7 | * --titlebar-bgcolor = titlebar: menu & tabs 8 | * --toolbar-bgcolor = navbar 9 | */ 10 | 11 | --arc-dark-tabbar: #2f343f; 12 | --arc-dark-navbar: #383c4a; 13 | 14 | --scroll-thumb-color: #5f6776; 15 | --scroll-track-color: var(--arc-dark-navbar); 16 | 17 | --newtab-background-image: url('../Backgrounds/bg-photo-1366.jpg'); 18 | } 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /_deprecated/userContent/view_source.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Dark View-source with syntax highlight 3 | */ 4 | 5 | @-moz-document url-prefix(view-source:) { 6 | html { 7 | background: #222 !important; 8 | color: #ccc !important 9 | } 10 | 11 | .attribute-name {color: #093 !important} 12 | .start-tag, .end-tag {color: #f93 !important} 13 | .attribute-value {color: #09f !important} 14 | } 15 | -------------------------------------------------------------------------------- /_deprecated/userContent/webpage_specific.css: -------------------------------------------------------------------------------- 1 | /* Youtube */ 2 | @-moz-document url-prefix('https://www.youtube.com') { 3 | /* Prevent whiteflash before Youtube dark theme loads */ 4 | html { 5 | background-color: #131313 !important; 6 | } 7 | 8 | /* Smaller font for fullscreen video title */ 9 | .ytp-big-mode .ytp-title-text { 10 | font-size: 22px !important; 11 | } 12 | 13 | /* Remove scroll down button and text */ 14 | .ytp-fullerscreen-edu-button, 15 | .ytp-fullerscreen-edu-chevron { 16 | display: none !important; 17 | } 18 | 19 | /* Color scrollbar to match Youtube background */ 20 | :root { 21 | scrollbar-color: #333333 #131313 !important; 22 | } 23 | 24 | /* Same for the sidebar */ 25 | #contentContainer { 26 | scrollbar-color: #333333 #1c1c1c !important; 27 | } 28 | } 29 | 30 | 31 | @-moz-document url-prefix('https://translate.google.com/translate') { 32 | #wtgbr { 33 | display: none !important; 34 | } 35 | 36 | #gt-appbar { 37 | padding: 0 28px !important; 38 | } 39 | 40 | #contentframe { 41 | top: 24px !important; 42 | } 43 | 44 | #gt-appname, .jfk-button, .jfk-button-standard { 45 | font-size: 9px !important; 46 | height: 12px !important; 47 | line-height: 12px !important; 48 | } 49 | 50 | .jfk-button-img { 51 | width: 10px !important; 52 | height: 10px !important; 53 | } 54 | 55 | #gt-appbar, #gt-appbar-r, #gt-lang-src, #gt-lang-tgt { 56 | height: 16px !important; 57 | } 58 | } 59 | 60 | -------------------------------------------------------------------------------- /userChrome.css: -------------------------------------------------------------------------------- 1 | /* works */ 2 | @import 'Styles/compact_sidebar.css'; 3 | /* edit */ 4 | @import 'Styles/context_and_popup_menus.css'; 5 | /* not needed * @import '_deprecated/General/dark_background_on_loading_pages.css'; */ 6 | /* not needed * @import '_deprecated/General/dark_modal_prompts.css'; */ 7 | /* broken * @import '_deprecated/General/findbar_top_centered.css'; */ 8 | 9 | /* obsolete * @import '_deprecated/Navbar/identitybox_colored_background.css'; */ 10 | /* not needed * @import '_deprecated/Navbar/identitybox_colored_line.css'; */ 11 | @import 'Styles/menu_buttons_rotate_on_click.css'; 12 | @import 'Styles/navbar_appearence.css'; 13 | /* edit */ 14 | @import 'Styles/overflow_menu_horizontal.css'; 15 | @import 'Styles/urlbar_appearence.css'; 16 | 17 | /* @import '_deprecated/Tabs/dynamic_tab_width.css'; */ 18 | /* @import '_deprecated/Tabs/flag_multi_selected_tabs.css'; */ 19 | @import 'Styles/remove_extra_padding.css'; 20 | /* obsolete @import '_deprecated/Tabs/subtle_tab_separators.css'; */ 21 | @import 'Styles/tab_close_button_on_hover_only.css'; 22 | /* obsolete @import '_deprecated/Tabs/tab_sound_icon_above_favicon.css'; */ 23 | @import 'Styles/tab_title_appearence.css'; 24 | 25 | /* @import '_deprecated/Toolbars/bookmark_toolbar_on_bottom_of_newtab.css'; */ 26 | /* @import '_deprecated/Toolbars/menubar_visible_on_hover.css'; obsolete */ 27 | /* @import '_deprecated/Toolbars/floating_toolbars_on_hover.css'; obsolete */ 28 | /* broken @import '_deprecated/Toolbars/floating_toolbars_on_hover_fullscreen_only.css'; */ 29 | /*@import '_deprecated/Toolbars/show_navbar_on_hover.css'; */ /* recommended, keeps tabs but hides urlbar*/ 30 | 31 | /* Is namespace even needed? */ 32 | @namespace url('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul'); 33 | 34 | /* :focus {outline:none !important;} 35 | ::-moz-focus-inner {border:0 !important; } */ 36 | 37 | /** 38 | * Work-in-progress stuff 39 | */ 40 | 41 | /* #statuspanel-label { 42 | background-color: var(--toolbar-bgcolor) !important; 43 | color: #ccc !important; 44 | border: none !important; 45 | } */ 46 | 47 | /*:root { 48 | --panel-disabled-color: rgba(211, 218, 227, 0.5) !important; 49 | --lwt-accent-color: !important; 50 | --lwt-text-color: rgba(207, 218, 231) !important; 51 | --arrowpanel-background: rgb(64, 69, 82) !important; 52 | --arrowpanel-color: rgba(211, 218, 227, 1) !important; 53 | --arrowpanel-border-color: rgb(43, 46, 57) !important; 54 | --lwt-toolbar-field-background-color: rgb(64, 69, 82) !important; 55 | --lwt-toolbar-field-color: rgba(211, 218, 227, 1) !important; 56 | --lwt-toolbar-field-border-color: rgb(43, 46, 57) !important; 57 | --lwt-toolbar-field-focus: rgba(255, 255, 255, 0.075) !important; 58 | --toolbar-field-focus-border-color: rgb(43, 46, 57) !important; 59 | --toolbar-bgcolor: rgb(56, 60, 74) !important; 60 | --toolbar-color: rgb(211, 218, 227) !important; 61 | --urlbar-separator-color: rgba(255, 255, 255, 0.2) !important; 62 | --lwt-toolbar-vertical-separator: rgb(43, 46, 57) !important; 63 | --chrome-content-separator-color: rgb(43, 46, 57) !important; 64 | --lwt-toolbarbutton-icon-fill-attention: rgb(82, 148, 226) !important; 65 | --lwt-toolbarbutton-hover-background: rgba(255, 255, 255, 0.12) !important; 66 | --lwt-toolbarbutton-active-background: rgb(82, 148, 226) !important; 67 | --autocomplete-popup-background: rgb(64, 69, 82) !important; 68 | --autocomplete-popup-color: rgb(211, 218, 227) !important; 69 | --autocomplete-popup-border-color: rgb(43, 46, 57) !important; 70 | --autocomplete-popup-highlight-background: rgb(82, 148, 226) !important; 71 | --autocomplete-popup-highlight-color: rgb(227, 234, 243) !important; 72 | }*/ 73 | 74 | /* Sidebar autohide */ 75 | /*#sidebar-box{ 76 | --uc-sidebar-width: 6px; 77 | --uc-sidebar-hover-width: 220px; 78 | position: relative; 79 | min-width: var(--uc-sidebar-width) !important; 80 | width: var(--uc-sidebar-width) !important; 81 | max-width: var(--uc-sidebar-width) !important; 82 | z-index:1; 83 | } 84 | 85 | #sidebar-header{ overflow: hidden; color: var(--chrome-color, inherit) !important} 86 | 87 | #sidebar{ 88 | transition: min-width 115ms linear !important; 89 | min-width: var(--uc-sidebar-width) !important; 90 | will-change: min-width; 91 | } 92 | 93 | #sidebar-box:hover > #sidebar{ min-width: var(--uc-sidebar-hover-width) !important; } 94 | 95 | #sidebar, 96 | #sidebar-header{ 97 | background-color: var(--toolbar-bgcolor) !important; 98 | }*/ 99 | -------------------------------------------------------------------------------- /userContent.css: -------------------------------------------------------------------------------- 1 | @import url('userContent/variables.css'); 2 | /* @import url('userContent/about_addons.css'); */ 3 | @import url('userContent/about_newtab.css'); 4 | @import url('userContent/about_reader.css'); 5 | @import url('userContent/error_pages.css'); 6 | @import url('userContent/view_source.css'); 7 | /* @import url('userContent/addon_styling.css'); */ 8 | @import url('userContent/webpage_specific.css'); 9 | 10 | /* Thin scrollbars everywhere */ 11 | :root { 12 | scrollbar-color: var(--scroll-thumb-color) var(--scroll-track-color); 13 | scrollbar-width: thin !important; 14 | } 15 | 16 | * { scrollbar-width: thin !important } 17 | 18 | /* Disable outlines on focused elements (links/buttons) */ 19 | :focus { outline: none; } 20 | ::-moz-focus-inner { border: 0; } 21 | -------------------------------------------------------------------------------- /userContent/about_addons.css: -------------------------------------------------------------------------------- 1 | @-moz-document url("chrome://mozapps/content/extensions/aboutaddons.html") { 2 | /* url-prefix(chrome://mozapps/content/extensions/extensions.xul) */ 3 | 4 | /* Don't dim disabled addon's icon */ 5 | richlistitem[active="false"] .icon { 6 | filter: unset !important; 7 | } 8 | 9 | 10 | /** 11 | * Compact addons page 12 | * by mjcov 13 | * https://www.reddit.com/r/FirefoxCSS/comments/bc8f07/my_compact_addons_manager_screenshot_inside/ 14 | * TODO: restyle this section 15 | */ 16 | #addons-page .addon.card { 17 | max-width: 85% !important; 18 | padding: 4px 6px 4px 11px !important; 19 | margin: 0 0 8px !important; 20 | border-radius: 2px !important; 21 | } 22 | #addons-page #header-inner { 23 | width: auto !important; 24 | margin-left: 12px !important; 25 | } 26 | #addons-page #heading { 27 | /*margin: -3.35rem 0 1rem 0 !important;*/ 28 | margin: -3.35rem 0 0 0 !important; 29 | } 30 | #addons-page #heading .heading-inner { 31 | margin-left: 12px !important; 32 | margin-inline-start: 0 !important; 33 | padding-right: 4px !important; 34 | width: calc(100vw - 240px - 24px) !important; 35 | } 36 | #addons-page #heading-name { 37 | visibility: hidden !important; 38 | } 39 | #addons-page #addon-list { 40 | padding: 1rem 12px !important; 41 | } 42 | #addons-page .card:hover { 43 | box-shadow: 0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08) !important; 44 | } 45 | #addons-page .card:focus { 46 | box-shadow: 0 0 0 2px #0a84ff !important; 47 | } 48 | #addons-page #private-browsing-notice, 49 | #addons-page .privateBrowsing-notice { 50 | display: none !important; 51 | } 52 | #addons-page .addon[privateBrowsing="true"] .name:after { 53 | content: 'PRIVATE'; 54 | display: inline-block; 55 | background-color: var(--purple-70); 56 | color: #fff; 57 | opacity: 0.55; 58 | padding: 4px 5px 3px; 59 | font-size: 0.9rem; 60 | font-weight: 600; 61 | margin-left: 5px; 62 | } 63 | 64 | 65 | /* 66 | * Show action buttons (enable/disable, options etc.) 67 | * https://www.reddit.com/r/FirefoxCSS/comments/cs4yl5/show_action_buttons_enabledisable_options_etc_on/ 68 | */ 69 | panel-list { 70 | border: none !important; 71 | box-shadow: none !important; 72 | display: inline !important; 73 | min-width: unset !important; 74 | padding: 0 !important; 75 | right: 0px !important; 76 | } 77 | 78 | panel-item { 79 | display: inline-block !important; 80 | margin-inline-start: 2px !important; 81 | } 82 | 83 | .more-options-menu { 84 | margin: unset !important; 85 | } 86 | 87 | /* link + is needed to avoid styling check for updates buttons and tabs on add-on detail pages because shadowdom */ 88 | link + button { 89 | background-color: var(--in-content-button-background) !important; 90 | background-position: center !important; 91 | border-radius: 2px !important; 92 | cursor: pointer !important; 93 | height: 32px !important; 94 | padding-left: 8px !important; 95 | padding-right: 8px !important; 96 | } 97 | link + button:hover { 98 | background-color: var(--in-content-button-background-hover) !important; 99 | } 100 | link + button:hover:active { 101 | background-color: var(--in-content-button-background-active) !important; 102 | } 103 | link + button:focus { 104 | box-shadow: 0 0 0 1px var(--in-content-border-active) inset, 0 0 0 1px var(--in-content-border-active), 0 0 0 4px var(--in-content-border-active-shadow) !important; 105 | } 106 | 107 | /* dot badging on update button */ 108 | link + button::after { 109 | left: 22px !important; 110 | top: 4px !important; 111 | } 112 | 113 | /* use icons, remove text */ 114 | panel-item[action="remove"], 115 | panel-item[action="install-update"], 116 | panel-item[action="always-activate"] { 117 | font-size: 0px !important; 118 | position: relative !important; 119 | top: -6px !important; 120 | fill: var(--in-content-page-color) !important; 121 | width: 32px !important; 122 | } 123 | 124 | .more-options-button.ghost-button, 125 | .arrow.top, 126 | .arrow.bottom, 127 | panel-item-separator, 128 | panel-item[action="report"], 129 | panel-item[action="expand"], 130 | panel-item[hidden], 131 | .addon-description { 132 | display: none !important; 133 | } 134 | 135 | .card-contents { 136 | align-self: center !important; 137 | } 138 | 139 | /* show counter next to "Enabled" and "Disabled" */ 140 | addon-list[type="extension"] section[section="0"] > addon-card { 141 | counter-increment: enabled; 142 | } 143 | addon-list[type="extension"] section[section="1"] > addon-card { 144 | counter-increment: disabled; 145 | } 146 | section[section="0"] { 147 | counter-reset: enabledpvt; /* define scope */ 148 | } 149 | addon-list[type="extension"] section[section="0"] > addon-card .addon-badge-private-browsing-allowed { 150 | counter-increment: enabledpvt; 151 | } 152 | addon-list[type="extension"] section[section="0"], 153 | addon-list[type="extension"] section[section="1"] { 154 | position: relative !important; 155 | } 156 | addon-list[type="extension"] section[section="0"] > .list-section-heading, 157 | addon-list[type="extension"] section[section="1"] > .list-section-heading { 158 | visibility: collapse !important; 159 | } 160 | addon-list[type="extension"] section[section="0"]::after, 161 | addon-list[type="extension"] section[section="1"]::after { 162 | content: "Увімкнено: " counter(enabled) ", в приватних вікнах: " counter(enabledpvt); 163 | position: absolute !important; 164 | top: 0px !important; 165 | font-size: 17px; 166 | font-weight: 600; 167 | } 168 | addon-list[type="extension"] section[section="1"]::after { 169 | content: "Вимкнено: " counter(disabled); 170 | } 171 | 172 | } 173 | -------------------------------------------------------------------------------- /userContent/about_newtab.css: -------------------------------------------------------------------------------- 1 | @-moz-document url('about:home'), url('about:newtab'), url('about:privatebrowsing'), url('about:blank') { 2 | html:not(#ublock0-epicker) body { 3 | background-color: var(--arc-dark-tabbar) !important; 4 | } 5 | 6 | /* Hide scrollbar */ 7 | :root{ 8 | scrollbar-width: none !important; 9 | } 10 | } 11 | 12 | 13 | @-moz-document url('about:newtab'), url('about:home') { 14 | @media (max-width: 1920px) { 15 | body { 16 | background-image: url('../Backgrounds/bg-photo2-1920.jpg') !important; 17 | } 18 | } 19 | 20 | @media (max-width: 1366px) { 21 | body { 22 | background-image: url('../Backgrounds/bg-photo-1366.jpg') !important; 23 | } 24 | } 25 | 26 | body { 27 | overflow-y: hidden !important; 28 | --newtab-card-background-color: #333 !important; 29 | /* NewTab background */ 30 | background-size: cover !important; 31 | background-attachment: fixed !important; 32 | background-position: center !important; 33 | } 34 | 35 | /* Hide "Top sites" title */ 36 | .outer-wrapper .section-top-bar .click-target-container { 37 | display: none !important; 38 | } 39 | 40 | /* Hide "pinned" icon */ 41 | .icon-pin-small { 42 | display: none !important; 43 | } 44 | 45 | /* ********** VARIOUS OLD CRAP ************ */ 46 | 47 | /* featured cards title bg */ 48 | /* .card, .prefs-pane .sidebar { 49 | background-color:#202020 !important; 50 | } */ 51 | 52 | /* featured cards title text */ 53 | #snippets, .section-title, .snippetContainer, .card-title, .card-description { 54 | color: #AEAEAE !important; 55 | } 56 | 57 | .top-site-outer .tile { 58 | border-radius: 2px !important; 59 | } 60 | 61 | .top-site-outer .screenshot { 62 | background-position: top center !important; 63 | background-size: 120px !important; 64 | border-radius: 2px !important; 65 | } 66 | 67 | .top-sites-list .top-site-outer .rich-icon { 68 | background-size: 86px !important; 69 | border-radius: 2px !important; 70 | } 71 | 72 | .card-outer { 73 | border-radius: 1px !important; /* sharp edges */ 74 | box-shadow: 0 14px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22) !important; 75 | } 76 | 77 | /* .top-sites-list .top-site-outer .title span { 78 | color:#D1D1D1; 79 | } 80 | 81 | .top-site-outer .tile { 82 | width: 156px !important; 83 | height: 96px !important; 84 | } 85 | 86 | main { 87 | width: 1146px !important; 88 | padding-bottom: 0px !important; 89 | } */ 90 | 91 | } 92 | 93 | /* More homepage styling here : 94 | * https://github.com/Izheil/Quantum-Nox-Firefox-Dark-Full-Theme/blob/master/Full%20dark%20theme/userContent.css 95 | */ 96 | -------------------------------------------------------------------------------- /userContent/about_reader.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Change Reader fonts and appearence 3 | */ 4 | 5 | @-moz-document url-prefix("about:reader") { 6 | /* Fonts */ 7 | body.sans-serif, 8 | body.sans-serif .remove-button { 9 | font-family: "Segoe UI", Arial, sans-serif !important; 10 | } 11 | 12 | body.serif, 13 | body.serif .remove-button { 14 | font-family: "Tahoma", "Times New Roman", serif !important; 15 | } 16 | 17 | /* Buttons and Toolbar to match browser's navbar color */ 18 | .toolbar { 19 | background-color: var(--arc-dark-navbar) !important; 20 | border: none !important; 21 | } 22 | 23 | .button { 24 | height: 52px !important; 25 | background-color: var(--arc-dark-navbar) !important; 26 | fill: #eee !important; 27 | border: none !important; 28 | } 29 | 30 | .button:hover { 31 | background-color: #edd !important; 32 | fill: #444 !important; 33 | } 34 | 35 | .close-button { 36 | height: 68px !important; 37 | } 38 | 39 | .close-button:hover { 40 | background-color: #d66 !important; 41 | fill: #444 !important; 42 | } 43 | 44 | .dropdown.narrate-dropdown { 45 | display: none !important; 46 | } 47 | 48 | /* Text colors */ 49 | .moz-reader-content a:visited { 50 | color: #a4f !important; 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /userContent/addon_styling.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Ublock Origin dark theme 3 | * Replace UUID in the "moz-extension://UUID/" string with the one from about:debugging#addons 4 | * by Blaises and drakmester 5 | * https://www.reddit.com/r/FirefoxCSS/comments/7lefac/ublock_origin_dark_theme/ 6 | * https://www.reddit.com/r/FirefoxCSS/comments/bcgnvb/fully_themed_ublock_origin_css/ 7 | * TODO: recoloring 8 | */ 9 | 10 | @-moz-document url-prefix("moz-extension://96739bf5-16fd-468d-ba3e-fcf65184ca7c/") { 11 | body { background-color: #2A2C31 !important; color: #67707C !important; } 12 | a { color: #8ad !important; } 13 | h2 { background-color: #2F3136 !important; color: #eee !important; } 14 | code { background-color: #36393F !important; } 15 | .tool { color: #999 !important; } 16 | .tool.enabled:hover { color: #8ad !important; } 17 | .permatoolbar { background-color: #2F3136 !important; } 18 | .permatoolbar .button { background-color: #36393F !important; } 19 | .permatoolbar .button:hover { background-color: #67707C !important; } 20 | #tooltip { background-color: #67707C !important; border: 0px solid #111 !important; color: #111 !important; } 21 | #firewallContainer > div { background-color: #2F3136 !important; } 22 | #firewallContainer > div:hover { background-color: #36393F !important; } 23 | #firewallContainer > div > span { color: #eee !important; border-bottom: 0px solid #111 !important; } 24 | #firewallContainer > div > span:first-of-type ~ span { border-left: 0px solid #111 !important; } 25 | #extraTools { background-color: #2F3136 !important; } 26 | #extraTools > span:hover { color: #8ad !important; } 27 | #dashboard-nav-widgets { background-color: #111 !important; border-bottom: 0px solid #666 !important; } 28 | .tabButton { background-color: #2F3136 !important; border: 1px solid #666 !important; border-bottom: 0px solid #666 !important; color: #eee !important; } 29 | .tabButton.selected { background-color: #222 !important; border-bottom: 0px solid #222 !important; } 30 | #diff li { background-color: #36393F !important; } 31 | #diff li:nth-child(even) { background-color: #666 !important; } 32 | #diff textarea { background-color: #333 !important; color: #67707C !important; } 33 | #switch .fa-icon { fill: #7289DA !important; } 34 | body.off #switch .fa-icon { fill: #67707C !important; } 35 | #tooltip { background-color: #36393F !important; border: 0px solid gray !important; border-radius: 0px !important; box-shadow: 0px 0px 0px gray !important; color: white !important; } 36 | #refresh { background-color: #36393F !important; border: 0px solid #ddc !important; border-radius: 0px !important; fill: white !important; } 37 | } 38 | -------------------------------------------------------------------------------- /userContent/error_pages.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Dark error pages to match overall theme 3 | */ 4 | 5 | body.neterror, 6 | body.certerror { 7 | background-color: var(--arc-dark-tabbar) !important; 8 | color: #fffc !important; 9 | } 10 | 11 | body.neterror #errorPageContainer h1, 12 | body.certerror #errorPageContainer h1, 13 | body.neterror #errorPageContainer button, 14 | body.certerror #errorPageContainer button { 15 | color: inherit !important; 16 | } 17 | 18 | body.certerror #badCertAdvancedPanel { 19 | background-color: var(--arc-dark-navbar) !important; 20 | } 21 | -------------------------------------------------------------------------------- /userContent/variables.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Set colors to match ArcDark theme 3 | */ 4 | 5 | :root { 6 | /* Cheat sheet 7 | * --titlebar-bgcolor = titlebar: menu & tabs 8 | * --toolbar-bgcolor = navbar 9 | */ 10 | 11 | --arc-dark-tabbar: #2f343f; 12 | --arc-dark-navbar: #383c4a; 13 | 14 | --scroll-thumb-color: #5f6776; 15 | --scroll-track-color: var(--arc-dark-navbar); 16 | 17 | --newtab-background-image: url('../Backgrounds/bg-photo-1366.jpg'); 18 | } 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /userContent/view_source.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Dark View-source with syntax highlight 3 | */ 4 | 5 | @-moz-document url-prefix(view-source:) { 6 | html { 7 | background: #222 !important; 8 | color: #ccc !important 9 | } 10 | 11 | .attribute-name {color: #093 !important} 12 | .start-tag, .end-tag {color: #f93 !important} 13 | .attribute-value {color: #09f !important} 14 | } 15 | -------------------------------------------------------------------------------- /userContent/webpage_specific.css: -------------------------------------------------------------------------------- 1 | /* Youtube */ 2 | @-moz-document url-prefix('https://www.youtube.com') { 3 | /* Prevent whiteflash before Youtube dark theme loads */ 4 | html { 5 | background-color: #131313 !important; 6 | } 7 | 8 | /* Smaller font for fullscreen video title */ 9 | .ytp-big-mode .ytp-title-text { 10 | font-size: 22px !important; 11 | } 12 | 13 | /* Remove scroll down button and text */ 14 | .ytp-fullerscreen-edu-button, 15 | .ytp-fullerscreen-edu-chevron { 16 | display: none !important; 17 | } 18 | 19 | /* Color scrollbar to match Youtube background */ 20 | :root { 21 | scrollbar-color: #333333 #131313 !important; 22 | } 23 | 24 | /* Same for the sidebar */ 25 | #contentContainer { 26 | scrollbar-color: #333333 #1c1c1c !important; 27 | } 28 | } 29 | 30 | 31 | @-moz-document url-prefix('https://translate.google.com/translate') { 32 | #wtgbr { 33 | display: none !important; 34 | } 35 | 36 | #gt-appbar { 37 | padding: 0 28px !important; 38 | } 39 | 40 | #contentframe { 41 | top: 24px !important; 42 | } 43 | 44 | #gt-appname, .jfk-button, .jfk-button-standard { 45 | font-size: 9px !important; 46 | height: 12px !important; 47 | line-height: 12px !important; 48 | } 49 | 50 | .jfk-button-img { 51 | width: 10px !important; 52 | height: 10px !important; 53 | } 54 | 55 | #gt-appbar, #gt-appbar-r, #gt-lang-src, #gt-lang-tgt { 56 | height: 16px !important; 57 | } 58 | } 59 | 60 | --------------------------------------------------------------------------------