├── preview.jpg ├── buymeacoffee.png ├── icons ├── expand.png └── collapse.png ├── userChrome.css ├── custom ├── _megabar-disable.css ├── _titlebar-controls-enable-macos.css ├── _titlebar-controls-enable-windows.css └── _dev-tools.css ├── package.json ├── _bookmarks-bar.css ├── _variables.css ├── LICENSE ├── _global.css ├── .github └── ISSUE_TEMPLATE.md ├── _tab-bar.css ├── README.md ├── _find-bar.css ├── _side-bar.css ├── userContent.css ├── _navigation-bar.css └── _menu.css /preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eduardhojbota/moonlight-userChrome/HEAD/preview.jpg -------------------------------------------------------------------------------- /buymeacoffee.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eduardhojbota/moonlight-userChrome/HEAD/buymeacoffee.png -------------------------------------------------------------------------------- /icons/expand.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eduardhojbota/moonlight-userChrome/HEAD/icons/expand.png -------------------------------------------------------------------------------- /icons/collapse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eduardhojbota/moonlight-userChrome/HEAD/icons/collapse.png -------------------------------------------------------------------------------- /userChrome.css: -------------------------------------------------------------------------------- 1 | @import '_variables.css'; 2 | @import '_global.css'; 3 | @import '_tab-bar.css'; 4 | @import '_navigation-bar.css'; 5 | @import '_bookmarks-bar.css'; 6 | @import '_find-bar.css'; 7 | @import '_side-bar.css'; 8 | @import '_menu.css'; 9 | @import "custom/_dev-tools.css"; 10 | -------------------------------------------------------------------------------- /custom/_megabar-disable.css: -------------------------------------------------------------------------------- 1 | #urlbar[breakout][breakout-extend] { 2 | top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important; 3 | left: 0px !important; 4 | width: 100% !important; 5 | } 6 | 7 | #urlbar[breakout][breakout-extend] > #urlbar-input-container { 8 | height: var(--urlbar-height) !important; 9 | padding-inline: 0 !important; 10 | padding-block: 0 !important; 11 | } 12 | -------------------------------------------------------------------------------- /custom/_titlebar-controls-enable-macos.css: -------------------------------------------------------------------------------- 1 | /* Show CLOSE MIN MAX buttons - for macOS*/ 2 | .titlebar-buttonbox-container { 3 | display: block !important; 4 | position: fixed; 5 | left: 0; 6 | top: 0; 7 | height: 40px; 8 | } 9 | 10 | :root[tabsintitlebar][sizemode="maximized"] .titlebar-buttonbox-container { 11 | top: 12px; 12 | } 13 | 14 | :root[tabsintitlebar] .titlebar-buttonbox { 15 | top: 12px; 16 | } 17 | 18 | #nav-bar { 19 | padding-left: 76px; 20 | } 21 | 22 | :root[inFullscreen] #nav-bar { 23 | padding-left: 0; 24 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "moonlight-userchrome", 3 | "version": "1.0.2", 4 | "description": "A dark userstyle for Firefox inspired by [moonlight-vscode-theme](https://github.com/atomiks/moonlight-vscode-theme) and [github-moonlight](https://github.com/Brettm12345/github-moonlight)", 5 | "repository": { 6 | "type": "git", 7 | "url": "git+https://github.com/eduardhojbota/moonlight-userChrome.git" 8 | }, 9 | "author": "Eduard Hojbota", 10 | "license": "MIT", 11 | "bugs": { 12 | "url": "https://github.com/eduardhojbota/moonlight-userChrome/issues" 13 | }, 14 | "homepage": "https://github.com/eduardhojbota/moonlight-userChrome#readme" 15 | } 16 | -------------------------------------------------------------------------------- /_bookmarks-bar.css: -------------------------------------------------------------------------------- 1 | #PersonalToolbar { 2 | background-color: var(--moonlight-gray-2) !important; 3 | padding: 3px 0 !important; 4 | } 5 | #PersonalToolbar toolbarbutton.bookmark-item { 6 | padding: 6px !important; 7 | margin-right: 4px !important; 8 | background-color: var(--moonlight-gray-4); 9 | border: 1px solid var(--moonlight-gray-1) !important; 10 | color: var(--moonlight-gray-10) !important; 11 | transition: background-color, border-color 300ms cubic-bezier(0.645, 0.045, 0.355, 1) !important; 12 | border-radius: 3px !important; 13 | } 14 | #PersonalToolbar toolbarbutton.bookmark-item:hover, 15 | #PersonalToolbar toolbarbutton.bookmark-item[open=true] 16 | { 17 | background: var(--moonlight-gray-5) !important; 18 | border-color: var(--moonlight-blue) !important; 19 | } 20 | -------------------------------------------------------------------------------- /custom/_titlebar-controls-enable-windows.css: -------------------------------------------------------------------------------- 1 | /* Show MIN MAX CLOSE buttons - for windows*/ 2 | .titlebar-buttonbox-container { 3 | display: block !important; 4 | position: fixed; 5 | right: 0; 6 | top: 0; 7 | height: 40px; 8 | } 9 | 10 | :root[tabsintitlebar][sizemode="maximized"] .titlebar-buttonbox-container { 11 | top: 12px; 12 | } 13 | 14 | :root[tabsintitlebar] .titlebar-buttonbox { 15 | top: 50%; 16 | transform: translateY(-50%); 17 | } 18 | 19 | #nav-bar { 20 | padding-right: 138px; 21 | } 22 | 23 | .titlebar-buttonbox-container .titlebar-button .toolbarbutton-icon { 24 | stroke: var(--moonlight-gray-7); 25 | } 26 | 27 | .titlebar-buttonbox-container .titlebar-button:hover { 28 | background: none !important; 29 | } 30 | 31 | .titlebar-buttonbox-container .titlebar-button:hover .toolbarbutton-icon { 32 | stroke: var(--moonlight-gray-9); 33 | } 34 | 35 | .titlebar-buttonbox-container .titlebar-button.titlebar-close:hover .toolbarbutton-icon { 36 | stroke: var(--moonlight-dark-red); 37 | } -------------------------------------------------------------------------------- /_variables.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --moonlight-desaturated-gray: #7f85a3; 3 | --moonlight-dark-blue: #4976eb; 4 | --moonlight-blue: #82aaff; 5 | --moonlight-sky-blue: #50c4fa; 6 | --moonlight-cyan: #86e1fc; 7 | --moonlight-red: #ff757f; 8 | --moonlight-dark-red: #ff5370; 9 | --moonlight-light-red: #ff98a4; 10 | --moonlight-yellow: #ffc777; 11 | --moonlight-orange: #ff966c; 12 | --moonlight-dark-orange: #fc7b7b; 13 | --moonlight-teal: #4fd6be; 14 | --moonlight-green: #c3e88d; 15 | --moonlight-purple: #c099ff; 16 | --moonlight-pink: #fca7ea; 17 | --moonlight-indigo: #7a88cf; 18 | --moonlight-bright-cyan: #b4f9f8; 19 | --moonlight-gray-10-alt: #bcc4d6; 20 | --moonlight-gray-10: #c8d3f5; 21 | --moonlight-gray-9: #b4c2f0; 22 | --moonlight-gray-8: #a9b8e8; 23 | --moonlight-gray-7: #828bb8; 24 | --moonlight-gray-6: #444a73; 25 | --moonlight-gray-5: #2f334d; 26 | --moonlight-gray-4: #222436; 27 | --moonlight-gray-3: #1e2030; 28 | --moonlight-gray-2: #191a2a; 29 | --moonlight-gray-1: #131421; 30 | 31 | --scrollbar-chrome-size: 6px; 32 | } 33 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Eduard H. 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 | -------------------------------------------------------------------------------- /_global.css: -------------------------------------------------------------------------------- 1 | /* 2 | if the -moz-appearance: none; still gives you fullscreen issues 3 | change (#navigator-toolbox) with your top bar (in this case #nav-bar) and use 4 | -moz-appearance: -moz-window-titlebar-maximized !important; And remove the padding-top 5 | */ 6 | :root[tabsintitlebar][sizemode="maximized"] #navigator-toolbox { 7 | -moz-appearance: none !important; 8 | padding-top: 12px !important; 9 | } 10 | /* Fix the FUllscreen changing padding on other bars. */ 11 | :root[tabsintitlebar][sizemode="maximized"] #titlebar { 12 | -moz-appearance: none !important; 13 | } 14 | 15 | /* Change bars order */ 16 | #PersonalToolbar { 17 | -moz-box-ordinal-group: 3 !important; 18 | } 19 | #titlebar { 20 | -moz-box-ordinal-group: 2 !important; 21 | } 22 | #nav-bar { 23 | -moz-box-ordinal-group: 1 !important; 24 | } 25 | 26 | /* Change bottom border color */ 27 | #navigator-toolbox { 28 | border-color: var(--moonlight-gray-1) !important; 29 | background-color: var(--moonlight-gray-2) !important; 30 | padding: 0 3px 3px 3px !important; 31 | } 32 | 33 | #tabbrowser-tabpanels { 34 | background-color: var(--moonlight-gray-2) !important; 35 | } -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Custom issue template 3 | about: Describe this issue template's purpose here. 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | 11 | 12 | 13 | **I'm submitting a ...** (check one with "x") 14 | ``` 15 | [ ] bug report => Search github for a similar issue or PR before submitting 16 | [ ] feature request => Search github for a similar feature or PR before submitting 17 | [ ] support request => Please do not submit support request here, instead contact the https://www.reddit.com/r/FirefoxCSS/ community 18 | ``` 19 | 20 | **Current behavior** 21 | 22 | 23 | **Expected behavior** 24 | 25 | 26 | **Minimal reproduction of the problem with instructions** 27 | 30 | 31 | **What is the motivation / use case for changing the behavior?** 32 | 33 | 34 | **Please tell us about your environment:** 35 | 36 | 37 | * **Moonlight version:** X.X.X 38 | * **Operating system:** [all | Windows | MacOS | Linux] 39 | * **Firefox version:** Firefox XX 40 | -------------------------------------------------------------------------------- /custom/_dev-tools.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Variables for devtools are available at: https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors 3 | */ 4 | 5 | :root.theme-dark { 6 | /* 7 | * Chrome colors 8 | */ 9 | --theme-tab-toolbar-background: var(--moonlight-gray-3) !important; 10 | --theme-toolbar-background: var(--moonlight-gray-3) !important; 11 | --theme-selection-background: var(--moonlight-gray-5) !important; 12 | --theme-selection-color: #fff !important; 13 | --theme-splitter-color: var(--moonlight-gray-1) !important; 14 | --theme-comment: var(--moonlight-gray-10) !important; 15 | 16 | /* 17 | * Content Colors 18 | */ 19 | --theme-body-background: var(--moonlight-gray-2) !important; 20 | --theme-sidebar-background: var(--moonlight-gray-3) !important; 21 | --theme-contrast-background: var(--moonlight-gray-3) !important; 22 | 23 | /* 24 | * Text Colors 25 | */ 26 | --theme-body-color: var(--moonlight-gray-10-alt) !important; 27 | --theme-body-color-alt: var(--moonlight-desaturated-gray) !important; 28 | --theme-content-color1: #fff !important; 29 | --theme-content-color2: var(--moonlight-gray-10) !important; 30 | --theme-content-color3: var(--moonlight-gray-6) !important; 31 | 32 | 33 | /* 34 | * Highlight Colors 35 | */ 36 | --theme-highlight-blue: var(--moonlight-blue) !important; 37 | --theme-highlight-purple: var(--moonlight-purple) !important; 38 | --theme-highlight-pink: var(--moonlight-pink) !important; 39 | --theme-highlight-red: var(--moonlight-light-red) !important; 40 | --theme-highlight-orange: var(--moonlight-dark-orange) !important; 41 | --theme-highlight-lightorange: var(--moonlight-orange) !important; 42 | --theme-highlight-green: var(--moonlight-teal) !important; 43 | --theme-highlight-bluegrey: var(--moonlight-gray-6) !important; 44 | --theme-highlight-yellow: var(--moonlight-yellow) !important; 45 | } 46 | 47 | -------------------------------------------------------------------------------- /_tab-bar.css: -------------------------------------------------------------------------------- 1 | /* Hide window MAX MIN CLOSE buttons */ 2 | .titlebar-buttonbox-container { 3 | display: none; 4 | } 5 | 6 | /* Hide toolbar spacers */ 7 | #titlebar .titlebar-spacer { 8 | display: none !important; 9 | } 10 | 11 | #TabsToolbar { 12 | margin-top: -1px !important; 13 | padding-bottom: 1px !important; 14 | } 15 | 16 | #toolbar-menubar { 17 | color: var(--moonlight-gray-10) !important; 18 | } 19 | 20 | .tabbrowser-tab .tab-stack { 21 | background: var(--moonlight-gray-2) !important; 22 | border: 1px solid var(--moonlight-gray-1) !important; 23 | margin: 2px 4px 2px 2px !important; 24 | border-radius: 3px !important; 25 | color: var(--moonlight-gray-10) !important; 26 | transition: background-color, border-color 300ms cubic-bezier(0.645, 0.045, 0.355, 1) !important; 27 | } 28 | .tabbrowser-tab .tab-background { 29 | border: none !important; 30 | transition: background-color, border-color 300ms cubic-bezier(0.645, 0.045, 0.355, 1) !important; 31 | } 32 | .tabbrowser-tab::after { 33 | display: none !important; 34 | } 35 | .tab-content[selected]{ 36 | background: var(--moonlight-gray-1) !important; 37 | 38 | } 39 | .tabbrowser-tab:hover .tab-stack{ 40 | border-color: var(--moonlight-blue) !important; 41 | color: var(--moonlight-gray-10) !important; 42 | } 43 | .tabbrowser-tab:hover .tab-background { 44 | background: var(--moonlight-gray-5) !important; 45 | } 46 | .tabbrowser-tab[selected] .tab-stack { 47 | border-color: var(--moonlight-gray-1) !important; 48 | color: var(--moonlight-gray-10) !important; 49 | 50 | } 51 | .tabbrowser-tab[selected] .tab-background { 52 | background: var(--moonlight-gray-1) !important; 53 | 54 | } 55 | .tab-background .tab-line { 56 | display: none; 57 | } 58 | .tabbrowser-tab .tab-text { 59 | opacity: 1 !important; 60 | } 61 | .tabbrowser-tab .close-icon { 62 | fill: var(--moonlight-gray-7) !important; 63 | transition: fill 300ms cubic-bezier(0.645, 0.045, 0.355, 1) !important; 64 | } 65 | .tabbrowser-tab:hover .close-icon { 66 | fill: var(--moonlight-gray-9) !important; 67 | background-color: transparent !important; 68 | } 69 | #tabs-newtab-button .toolbarbutton-icon { 70 | width: calc(2 * var(--toolbarbutton-inner-padding) + 12px) !important; 71 | height: calc(2 * var(--toolbarbutton-inner-padding) + 12px) !important; 72 | margin-top: 1px !important; 73 | } 74 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Moonlight 🌌 userChrome 2 | 3 | A dark userstyle for Firefox inspired by [moonlight-vscode-theme](https://github.com/atomiks/moonlight-vscode-theme) and [github-moonlight](https://github.com/Brettm12345/github-moonlight) 4 | 5 | ![Firefox screenshot with the moonlight theme activated](https://github.com/eduardhojbota/moonlight-userChrome/raw/master/preview.jpg) 6 | 7 | ## Installation 8 | 9 | 1. Open your currently active profile folder 10 | 1. In the URL bar type: `about:profiles` 11 | 2. Look for the profile which has the "Default Profile" property set to true 12 | 3. Click on "Open Folder" button belonging to the "Root Directory" property 13 | 2. Create a new folder named chrome 14 | 3. - Clone the theme directly into the chrome folder. If you choose this method you will be able to update the theme by pulling the latest files. 15 | OR 16 | - Download and extract the files in the chrome folder 17 | 4. If you're running Firefox 69+ 18 | 1. In the URL bar type: `about:config` 19 | 2. You will receive a warning to proceed with caution. Accept the Risk and Continue. 20 | 3. In the "Search preference name" input field type `toolkit.legacyUserProfileCustomizations.stylesheets` 21 | 4. Set it to true by double clicking the false value 22 | 5. Restart the browser 23 | 24 | ## Custom styling 25 | 26 | The theme comes **as is** but it can be extended using CSS files provided in the custom folder. Further extensions should be included in the same folder to keep the main theme consistent. 27 | To **enable** custom styles, copy and paste the following `@import` statements at the end of the `userChrome.css` file. 28 | 29 | ### Re-enable title bar controls (MIN-MAX-CLOSE buttons) 30 | 31 | For Windows: 32 | 33 | ```css 34 | @import "custom/_titlebar-controls-enable-windows.css"; 35 | ``` 36 | 37 | For macOS: 38 | 39 | ```css 40 | @import "custom/_titlebar-controls-enable-macos.css"; 41 | ``` 42 | 43 | ### Disable megabar behavior 44 | 45 | ```css 46 | @import "custom/_megabar-disable.css"; 47 | ``` 48 | 49 | ### Add Developer Tools styling 50 | 51 | Set theme to dark in Firefox Developer Tools [settings](https://developer.mozilla.org/en-US/docs/Tools/Settings). Then, add the following line to `userContent.css`: 52 | 53 | ``` 54 | @import "custom/_dev-tools.css"; 55 | ``` 56 | 57 | ## Support 58 | 59 | If you love my work and would like to support my future endeavors I would gladly drink a coffee with you :) 60 | 61 | [![Buy me a coffee button](https://github.com/eduardhojbota/moonlight-userChrome/raw/master/buymeacoffee.png)](https://www.buymeacoffee.com/eduardh) 62 | -------------------------------------------------------------------------------- /_find-bar.css: -------------------------------------------------------------------------------- 1 | findbar { 2 | border-color: var(--moonlight-gray-1) !important; 3 | } 4 | findbar .findbar-container { 5 | background-color: var(--moonlight-gray-2) !important; 6 | color: var(--moonlight-gray-7) !important; 7 | } 8 | findbar .findbar-closebutton { 9 | background-color: var(--moonlight-gray-2) !important; 10 | } 11 | findbar .findbar-closebutton .toolbarbutton-icon { 12 | fill: var(--moonlight-gray-7) !important; 13 | transition: fill 300ms cubic-bezier(0.645, 0.045, 0.355, 1) !important; 14 | } 15 | findbar .findbar-closebutton:hover .toolbarbutton-icon { 16 | fill: var(--moonlight-gray-9) !important; 17 | fill-opacity: 0 !important; 18 | } 19 | findbar .findbar-button { 20 | border: 1px solid var(--moonlight-gray-1) !important; 21 | background-color: var(--moonlight-gray-4) !important; 22 | color: var(--moonlight-gray-10) !important; 23 | border-radius: 3px !important; 24 | transition: background-color, border-color 300ms cubic-bezier(0.645, 0.045, 0.355, 1) !important; 25 | } 26 | findbar .findbar-button:hover 27 | { 28 | background: var(--moonlight-gray-5) !important; 29 | border: 1px solid var(--moonlight-blue) !important; 30 | } 31 | 32 | findbar .findbar-button[checked="true"] { 33 | background: var(--moonlight-gray-5) !important; 34 | color: var(--moonlight-blue) !important; 35 | border: 1px solid var(--moonlight-blue) !important; 36 | } 37 | 38 | findbar .findbar-textbox { 39 | background-color: var(--moonlight-gray-4) !important; 40 | border: 1px solid var(--moonlight-gray-1) !important; 41 | color: var(--moonlight-gray-10) !important; 42 | border-radius: 3px !important; 43 | transition: background-color, border-color 300ms cubic-bezier(0.645, 0.045, 0.355, 1) !important; 44 | } 45 | 46 | findbar .findbar-textbox:focus { 47 | border-color: var(--moonlight-blue) !important; 48 | background-color: var(--moonlight-gray-3) !important; 49 | } 50 | findbar .findbar-find-previous, 51 | findbar .findbar-find-next{ 52 | background-color: var(--moonlight-gray-2) !important; 53 | border: none !important; 54 | } 55 | 56 | findbar .findbar-find-previous .toolbarbutton-icon, 57 | findbar .findbar-find-next .toolbarbutton-icon { 58 | fill: var(--moonlight-gray-7) !important; 59 | transition: fill 300ms cubic-bezier(0.645, 0.045, 0.355, 1) !important; 60 | } 61 | 62 | findbar .findbar-find-previous .toolbarbutton-icon[disabled="true"], 63 | findbar .findbar-find-next .toolbarbutton-icon[disabled="true"] { 64 | fill: var(--moonlight-gray-5) !important; 65 | opacity: 1 !important; 66 | } 67 | 68 | findbar .findbar-find-previous:not([disabled="true"]):hover .toolbarbutton-icon, 69 | findbar .findbar-find-next:not([disabled="true"]):hover .toolbarbutton-icon { 70 | fill: var(--moonlight-gray-9) !important; 71 | } 72 | 73 | 74 | -------------------------------------------------------------------------------- /_side-bar.css: -------------------------------------------------------------------------------- 1 | #sidebar-search-container, 2 | #bookmarks-view, 3 | #historyTree, 4 | [lwt-sidebar] { 5 | background-color: var(--moonlight-gray-2) !important; 6 | color: var(--moonlight-gray-10) !important; 7 | } 8 | 9 | 10 | #sidebar-splitter { 11 | border-color: var(--moonlight-gray-1) !important; 12 | } 13 | #sidebar-box { 14 | background-color: var(--moonlight-gray-2) !important; 15 | color: var(--moonlight-gray-10) !important; 16 | } 17 | #sidebar-box #sidebar-header { 18 | border: none !important; 19 | } 20 | #sidebar-box #sidebar-header #sidebar-switcher-target { 21 | transition: color 300ms cubic-bezier(0.645, 0.045, 0.355, 1) !important; 22 | } 23 | #sidebar-box #sidebar-header #sidebar-switcher-target:hover, 24 | #sidebar-box #sidebar-header #sidebar-switcher-target.active { 25 | color: var(--moonlight-blue) !important; 26 | } 27 | #sidebar-box #sidebar-header #sidebar-close { 28 | fill-opacity: 0 !important; 29 | color: var(--moonlight-gray-7) !important; 30 | transition: color 300ms cubic-bezier(0.645, 0.045, 0.355, 1) !important; 31 | } 32 | #sidebar-box #sidebar-header #sidebar-close:hover { 33 | fill-opacity: 0 !important; 34 | color: var(--moonlight-gray-10) !important; 35 | } 36 | 37 | #sidebar-header { 38 | /* border: none !important; */ 39 | border-color: var(--moonlight-gray-1) !important; 40 | } 41 | 42 | 43 | #sidebar-search-container #search-box { 44 | -moz-appearance: none !important; 45 | background-color: var(--moonlight-gray-4) !important; 46 | border: 1px solid var(--moonlight-gray-1) !important; 47 | color: var(--moonlight-gray-10) !important; 48 | border-radius: 3px !important; 49 | transition: background-color, border-color 300ms cubic-bezier(0.645, 0.045, 0.355, 1) !important; 50 | } 51 | #sidebar-search-container #search-box:focus-within { 52 | border-color: var(--moonlight-blue) !important; 53 | background-color: var(--moonlight-gray-3) !important; 54 | } 55 | #sidebar-search-container #search-box .textbox-search-clear { 56 | filter: invert(16%) sepia(23%) saturate(1040%) hue-rotate(193deg) brightness(94%) contrast(86%); 57 | } 58 | #sidebar-search-container #viewButton { 59 | background-color: var(--moonlight-gray-4) !important; 60 | border: 1px solid var(--moonlight-gray-1); 61 | border-radius: 3px !important; 62 | color: var(--moonlight-gray-10); 63 | transition: background-color, border-color 300ms cubic-bezier(0.645, 0.045, 0.355, 1) !important; 64 | } 65 | #sidebar-search-container #viewButton:hover { 66 | background-color: var(--moonlight-gray-5) !important; 67 | border-color: var(--moonlight-blue) !important; 68 | color: var(--moonlight-blue) !important; 69 | } 70 | 71 | 72 | treechildren::-moz-tree-separator{ 73 | -moz-appearance: none !important; 74 | border: none !important; 75 | border-bottom: solid 1px var(--moonlight-gray-1) !important; 76 | background: transparent !important; 77 | min-height: 0px !important; 78 | max-height: 0px !important; 79 | } 80 | -------------------------------------------------------------------------------- /userContent.css: -------------------------------------------------------------------------------- 1 | @import "_variables.css"; 2 | 3 | @-moz-document url(about:preferences) { 4 | 5 | /* Settings page background */ 6 | *.main-content { 7 | background: var(--moonlight-gray-1) !important; 8 | } 9 | *.navigation { 10 | background: var(--moonlight-gray-1) !important; 11 | } 12 | *.sticky-container { 13 | background: var(--moonlight-gray-1) !important; 14 | } 15 | 16 | } 17 | 18 | @-moz-document url(about:addons) { 19 | #full { 20 | background: var(--moonlight-gray-1) !important; 21 | } 22 | 23 | *.main-heading { 24 | background: var(--moonlight-gray-1) !important; 25 | } 26 | .main-search { 27 | background: var(--moonlight-gray-1) !important; 28 | } 29 | .sticky-container{ 30 | background: var(--moonlight-gray-1) !important; 31 | } 32 | } 33 | @-moz-document url(about:blank), url(about:newtab), url(about:home) { 34 | html:not(#ublock0-epicker), 35 | html:not(#ublock0-epicker) body, 36 | #newtab-customize-overlay { 37 | background: var(--moonlight-gray-2) !important; 38 | } 39 | 40 | .search-wrapper input { 41 | background-color: var(--moonlight-gray-3) !important; 42 | color: var(--moonlight-gray-7) !important; 43 | border: none !important; 44 | box-shadow: none !important; 45 | } 46 | 47 | .search-wrapper input:focus { 48 | color: var(--moonlight-gray-9) !important; 49 | } 50 | 51 | .search-wrapper .search-button { 52 | fill: var(--moonlight-gray-7) !important; 53 | } 54 | 55 | .search-wrapper .search-button:focus, 56 | .search-wrapper .search-button:hover { 57 | background-color: transparent !important; 58 | fill: var(--moonlight-gray-9) !important; 59 | } 60 | } 61 | 62 | 63 | 64 | 65 | 66 | /* Scrollbar */ 67 | 68 | *:not(select) { 69 | scrollbar-color: var(--moonlight-gray-5) var(--moonlight-gray-2) !important; 70 | scrollbar-width: thin !important; 71 | } 72 | ::-webkit-scrollbar, 73 | .integrations-select-repos::-webkit-scrollbar { 74 | max-height: var(--scrollbar-chrome-size) !important; 75 | max-width: var(--scrollbar-chrome-size) !important; 76 | } 77 | ::-webkit-scrollbar, 78 | .integrations-select-repos::-webkit-scrollbar, 79 | ::-webkit-scrollbar-corner, 80 | .integrations-select-repos::-webkit-scrollbar-corner, 81 | ::-webkit-scrollbar-track, 82 | .integrations-select-repos::-webkit-scrollbar-track, 83 | ::-webkit-scrollbar-track-piece, 84 | .integrations-select-repos::-webkit-scrollbar-track-piece { 85 | background: var(--moonlight-gray-2) !important; 86 | } 87 | ::-webkit-scrollbar:hover, 88 | .integrations-select-repos::-webkit-scrollbar:hover, 89 | ::-webkit-scrollbar-corner:hover, 90 | .integrations-select-repos::-webkit-scrollbar-corner:hover, 91 | ::-webkit-scrollbar-track:hover, 92 | .integrations-select-repos::-webkit-scrollbar-track:hover, 93 | ::-webkit-scrollbar-track-piece:hover, 94 | .integrations-select-repos::-webkit-scrollbar-track-piece:hover { 95 | background: var(--moonlight-gray-4) !important; 96 | } 97 | ::-webkit-scrollbar-thumb, 98 | .integrations-select-repos::-webkit-scrollbar-thumb { 99 | background: var(--moonlight-gray-5) !important; 100 | border-radius: var(--scrollbar-chrome-radius) !important; 101 | } 102 | ::-webkit-scrollbar-thumb:hover, 103 | .integrations-select-repos::-webkit-scrollbar-thumb:hover { 104 | background: var(--moonlight-blue) !important; 105 | } 106 | -------------------------------------------------------------------------------- /_navigation-bar.css: -------------------------------------------------------------------------------- 1 | #nav-bar { 2 | background-color: var(--moonlight-gray-2) !important; 3 | box-shadow: none !important; 4 | } 5 | 6 | /* Toolbar buttons */ 7 | .toolbarbutton-1 { 8 | fill: var(--moonlight-gray-7) !important; 9 | transition: fill 300ms cubic-bezier(0.645, 0.045, 0.355, 1) !important; 10 | } 11 | 12 | .toolbarbutton-1:hover { 13 | fill: var(--moonlight-gray-9) !important; 14 | } 15 | 16 | .toolbarbutton-1[open="true"] { 17 | fill: var(--moonlight-gray-9) !important; 18 | } 19 | 20 | .toolbarbutton-1[disabled] { 21 | fill: var(--moonlight-gray-5) !important; 22 | } 23 | 24 | .toolbarbutton-1 .toolbarbutton-icon, 25 | .toolbarbutton-1 .toolbarbutton-badge-stack { 26 | background: none !important; 27 | } 28 | 29 | /* Remove back button background and border */ 30 | 31 | #back-button > .toolbarbutton-icon { 32 | background: none !important; 33 | border: none !important; 34 | } 35 | 36 | /* Web extensions custom styling */ 37 | 38 | #nav-bar-customization-target > .toolbarbutton-1.webextension-browser-action .toolbarbutton-badge-stack, 39 | #nav-bar-customization-target > #fxa-toolbar-menu-button .toolbarbutton-badge-stack { 40 | background: var(--moonlight-gray-4) !important; 41 | border: 1px solid var(--moonlight-gray-1); 42 | transition: background-color, border-color 300ms cubic-bezier(0.645, 0.045, 0.355, 1) !important; 43 | } 44 | 45 | #nav-bar-customization-target > .toolbarbutton-1.webextension-browser-action:hover .toolbarbutton-badge-stack, 46 | #nav-bar-customization-target > #fxa-toolbar-menu-button:hover .toolbarbutton-badge-stack { 47 | background: var(--moonlight-gray-5) !important; 48 | border-color: var(--moonlight-blue); 49 | } 50 | 51 | #nav-bar-customization-target > .toolbarbutton-1.webextension-browser-action[open="true"] 52 | .toolbarbutton-badge-stack, 53 | #fxa-toolbar-menu-button[open="true"] .toolbarbutton-badge-stack { 54 | background: var(--moonlight-blue) !important; 55 | } 56 | 57 | /* Remove burger menu spacing */ 58 | #PanelUI-button { 59 | margin-inline-start: 0 !important; 60 | padding-inline-start: 0 !important; 61 | border: none !important; 62 | border-inline-start: none !important; 63 | } 64 | /* --- */ 65 | 66 | /* - Url bar - */ 67 | #urlbar-input { 68 | color: var(--moonlight-gray-10) !important; 69 | } 70 | #urlbar #urlbar-background { 71 | background-color: var(--moonlight-gray-3) !important; 72 | border: none !important; 73 | border-radius: 3px; 74 | box-shadow: none !important; 75 | } 76 | #urlbar[open="true"] #urlbar-background { 77 | background-color: var(--moonlight-gray-4) !important; 78 | } 79 | .urlbarView:not(.megabar) .urlbarView-row:not([type="tip"]):hover, 80 | .urlbarView.megabar .urlbarView-row:not([type="tip"]):hover > .urlbarView-row-inner { 81 | background: none !important; 82 | } 83 | .urlbarView #urlbar-results .urlbarView-row .urlbarView-row-inner { 84 | transition: color 300ms cubic-bezier(0.645, 0.045, 0.355, 1) !important; 85 | } 86 | .urlbarView #urlbar-results .urlbarView-row .urlbarView-row-inner:hover { 87 | background-color: var(--moonlight-gray-5) !important; 88 | color: var(--moonlight-blue) !important; 89 | } 90 | .urlbarView 91 | #urlbar-results 92 | .urlbarView-row[aria-selected="true"] 93 | .urlbarView-row-inner { 94 | border: 1px solid var(--moonlight-blue) !important; 95 | background-color: var(--moonlight-gray-5) !important; 96 | color: var(--moonlight-blue) !important; 97 | } 98 | .urlbarView.megabar .urlbarView-body-inner { 99 | border: 0 !important; 100 | } 101 | .urlbarView #urlbar-results { 102 | color: var(--moonlight-gray-10) !important; 103 | } 104 | .urlbarView #urlbar-results .urlbarView-row .urlbarView-url { 105 | color: var(--moonlight-blue) !important; 106 | } 107 | 108 | /* Url bar Icons */ 109 | 110 | #urlbar-container box, 111 | #urlbar-container image, 112 | .urlbar-icon-wrapper { 113 | background-color: transparent !important; 114 | } 115 | 116 | #urlbar-container [class*="icon"], 117 | #urlbar-container [id*="icon"] 118 | { 119 | border: 0 !important; 120 | fill: var(--moonlight-gray-7) !important; 121 | fill-opacity: 1 !important; 122 | transition: fill 300ms cubic-bezier(0.645, 0.045, 0.355, 1) !important; 123 | } 124 | 125 | #urlbar-container [class*="icon"]:hover, 126 | #urlbar-container [id*="icon"]:hover, 127 | #urlbar-container [open="true"] [class*="icon"], 128 | #urlbar-container [open="true"] [id*="icon"], 129 | #urlbar-container [class*="icon"][open="true"], 130 | #urlbar-container [id*="icon"][open="true"] 131 | { 132 | fill: var(--moonlight-gray-9) !important; 133 | fill-opacity: 1 !important; 134 | } 135 | 136 | #urlbar-zoom-button { 137 | border-color: var(--moonlight-gray-1) !important; 138 | background-color: var(--moonlight-gray-4) !important; 139 | color: var(--moonlight-gray-10) !important; 140 | transition: background-color, border-color 300ms cubic-bezier(0.645, 0.045, 0.355, 1) !important; 141 | } 142 | #urlbar-zoom-button:hover { 143 | background-color: var(--moonlight-gray-5) !important; 144 | border-color: var(--moonlight-blue) !important; 145 | } 146 | 147 | #pageActionSeparator { 148 | display: none !important; 149 | } 150 | 151 | /* --- */ 152 | -------------------------------------------------------------------------------- /_menu.css: -------------------------------------------------------------------------------- 1 | /* Separator */ 2 | menuseparator, 3 | #contentAreaContextMenu menuseparator, 4 | toolbarseparator, 5 | .bookmarks-actions-menuseparator { 6 | -moz-appearance: none !important; 7 | border-color: var(--moonlight-gray-1) !important; 8 | border-width: 1px !important; 9 | padding-top: 0px !important; 10 | padding-bottom: 0px !important; 11 | margin-top: 2px !important; 12 | margin-bottom: 2px !important; 13 | } 14 | /* Reset form elements appereance */ 15 | panel richlistbox, 16 | panel tree, 17 | panel button, 18 | panel menulist, 19 | panel textbox, 20 | menupopup, 21 | menu, 22 | menuitem { 23 | -moz-appearance: none !important; 24 | } 25 | 26 | /* Spacing between menu items */ 27 | menulist, 28 | menuitem, 29 | menu { 30 | min-height: 2.5em; 31 | } 32 | 33 | 34 | /* ? */ 35 | panel menulist { 36 | border: 1px solid transparent; 37 | } 38 | /* Menus */ 39 | #sidebarMenu-popup toolbarbutton, 40 | panel richlistbox, 41 | panel tree, 42 | panel button, 43 | panel menulist, 44 | panel textbox, 45 | menupopup:not(#BMB_bookmarksPopup), 46 | #main-menubar > menu > menupopup, 47 | #context-navigation { 48 | color: var(--moonlight-gray-10) !important; 49 | background-color: var(--moonlight-gray-2) !important; 50 | border-color: var(--moonlight-gray-1) !important; 51 | } 52 | #sidebarMenu-popup toolbarbutton:hover, 53 | panel treechildren::-moz-tree-row(selected), 54 | panel button:hover, 55 | menu:hover, 56 | menu[_moz-menuactive], 57 | menu[open], 58 | menuitem:hover, 59 | menuitem[_moz-menuactive] { 60 | background-color: var(--moonlight-gray-5) !important; 61 | color: var(--moonlight-gray-10) !important; 62 | } 63 | 64 | menu[disabled="true"] { 65 | color: var(--moonlight-gray-6) !important; 66 | } 67 | menuitem[disabled="true"] { 68 | color: var(--moonlight-gray-6) !important; 69 | } 70 | 71 | menulist > menupopup > menuitem, 72 | menulist > menupopup > menucaption, 73 | menulist > menupopup > menu { 74 | color: var(--moonlight-gray-10) !important; 75 | } 76 | .menupopup-arrowscrollbox{ 77 | background-color: var(--moonlight-gray-2) !important; 78 | 79 | } 80 | .expander-up { 81 | list-style-image: url("./icons/collapse.png") !important; 82 | } 83 | .expander-down { 84 | list-style-image: url("./icons/expand.png") !important; 85 | } 86 | 87 | #editBookmarkPanel label { 88 | color: var(--moonlight-gray-10) !important; 89 | } 90 | #editBookmarkPanel input { 91 | -moz-appearance: none; 92 | background-color: var(--moonlight-gray-4) !important; 93 | color: var(--moonlight-gray-10) !important; 94 | border: 1px solid var(--moonlight-gray-1) !important; 95 | border-radius: 3px !important; 96 | transition: background-color, border-color 300ms cubic-bezier(0.645, 0.045, 0.355, 1) !important; 97 | } 98 | #editBookmarkPanel input:focus { 99 | background-color: var(--moonlight-gray-3) !important; 100 | border-color: var(--moonlight-blue) !important; 101 | } 102 | 103 | 104 | /* Popup panels (more tools... , open menu) */ 105 | panel panelview { 106 | color: var(--moonlight-gray-10) !important; 107 | background-color: var(--moonlight-gray-2) !important; 108 | } 109 | .panel-arrowcontent { 110 | background-color: var(--moonlight-gray-2) !important; 111 | } 112 | .panel-arrowcontainer .panel-arrowbox .panel-arrow { 113 | fill: var(--moonlight-gray-1) !important; 114 | } 115 | .panel-arrowcontainer .panel-arrowcontent { 116 | border-color: var(--moonlight-gray-1) !important; 117 | } 118 | 119 | /* Context navigation buttons (right-click page) */ 120 | #context-navigation menuitem { 121 | color: var(--moonlight-gray-7) !important; 122 | background: none !important; 123 | transition: color 300ms cubic-bezier(0.645, 0.045, 0.355, 1) !important; 124 | } 125 | #context-navigation menuitem:hover { 126 | color: var(--moonlight-gray-9) !important; 127 | } 128 | /* Customize button in more extensions */ 129 | #overflowMenu-customize-button { 130 | background-color: var(--moonlight-gray-4) !important; 131 | border: 1px solid var(--moonlight-gray-1) !important; 132 | border-radius: 3px !important; 133 | margin: 4px !important; 134 | color: var(--moonlight-gray-10) !important; 135 | transition: background-color, border-color 300ms cubic-bezier(0.645, 0.045, 0.355, 1) !important; 136 | } 137 | #overflowMenu-customize-button:hover { 138 | background-color: var(--moonlight-gray-5) !important; 139 | border: 1px solid var(--moonlight-blue) !important; 140 | } 141 | #appMenu-zoomReset-button { 142 | border-color: var(--moonlight-gray-1) !important; 143 | background-color: var(--moonlight-gray-4) !important; 144 | color: var(--moonlight-gray-10) !important; 145 | transition: background-color, border-color 300ms cubic-bezier(0.645, 0.045, 0.355, 1) !important; 146 | } 147 | #appMenu-zoomReset-button:hover { 148 | background-color: var(--moonlight-gray-5) !important; 149 | border-color: var(--moonlight-blue) !important; 150 | } 151 | 152 | /* Change bookmark icon colors */ 153 | /* Standard folder -- on Toolbar and Menus */ 154 | #PlacesToolbarItems toolbarbutton[container="true"] .toolbarbutton-icon, 155 | :-moz-any( 156 | #PlacesToolbarItems, 157 | #PlacesChevronPopup, 158 | #BMB_bookmarksPopup, 159 | #bookmarksMenu) menu[container="true"] > .menu-iconic-left > .menu-iconic-icon, 160 | /* Standard folder -- in Sidebar, Library, Add/Edit Bookmark dialog */ 161 | :-moz-any( 162 | #bookmarks-view, 163 | #editBMPanel_folderTree, 164 | #placesList, 165 | #placeContent) treechildren::-moz-tree-image(container), 166 | #editBMPanel_folderMenuList > .menulist-label-box > .menulist-icon, 167 | #editBMPanel_folderMenuList menupopup menuitem { 168 | fill: var(--moonlight-blue) !important; 169 | } 170 | 171 | /* Arrow customization in the bookmark folder while overflowing */ 172 | .menupopup-scrollbutton { 173 | -moz-appearance: none !important; 174 | background-color: var(--moonlight-gray-3) !important; 175 | width: 100%; 176 | } 177 | .menupopup-scrollbutton:hover { 178 | background-color: var(--moonlight-gray-5) !important; 179 | } 180 | .scrollbutton-up:not([orient="horizontal"]), 181 | .scrollbutton-up:not([orient="horizontal"]) .toolbarbutton-icon { 182 | -moz-appearance: none !important; 183 | list-style-image: url("./icons/collapse.png") !important; 184 | } 185 | .scrollbutton-down:not([orient="horizontal"]), 186 | .scrollbutton-down:not([orient="horizontal"]) .toolbarbutton-icon { 187 | -moz-appearance: none !important; 188 | list-style-image: url("./icons/expand.png") !important; 189 | } --------------------------------------------------------------------------------