├── userChrome.css ├── userContent.css ├── src ├── variables │ ├── _constants.scss │ ├── _functions.scss │ ├── _animation.scss │ ├── _index.scss │ └── _icons.scss ├── user-chrome │ ├── global │ │ ├── _index.scss │ │ ├── _extension-icons.scss │ │ └── _buttons-ripple-effect.scss │ ├── new-tabbar-feature │ │ ├── _tab-separator.scss │ │ ├── _index.scss │ │ ├── _titlebar.scss │ │ ├── _nav-bar.scss │ │ ├── _tab.scss │ │ └── _tab-buttons.scss │ ├── components │ │ ├── _index.scss │ │ ├── _window-buttons.scss │ │ ├── _modal-window.scss │ │ └── _menupopup.scss │ ├── urlbar │ │ ├── _index.scss │ │ ├── _star-button.scss │ │ ├── _compact-urlbar-feature.scss │ │ ├── _sidebar-feature.scss │ │ ├── _bookmarks-bar.scss │ │ ├── _urlbar.scss │ │ ├── _urlbar-buttons.scss │ │ └── _urlbar-suggestions.scss │ ├── tabbar │ │ ├── _index.scss │ │ ├── _tab-identity-line.scss │ │ ├── _tab-tooltip.scss │ │ ├── _tab-loading.scss │ │ ├── _tab-separator.scss │ │ ├── _tab-sound-icon.scss │ │ ├── _titlebar.scss │ │ ├── _tab-buttons.scss │ │ └── _tab.scss │ └── _variables-local.scss ├── user-chrome.scss ├── global │ ├── _tree.scss │ ├── _input.scss │ ├── _fonts.scss │ ├── _select.scss │ ├── _reset.scss │ ├── _radio-button.scss │ ├── _checkbox.scss │ ├── _experimental.scss │ └── _button.scss ├── user-content.scss └── user-content │ ├── pages │ ├── _global.scss │ ├── _dev-tools.scss │ ├── _privatebrowsing.scss │ └── _reader-view.scss │ └── _variables-local.scss ├── .prettierignore ├── docs └── assets │ ├── preview.png │ ├── preview-dark.png │ ├── preview-light.png │ ├── preview-dracula.png │ ├── preview-github.png │ ├── preview-accent-1.png │ ├── preview-accent-2.png │ ├── preview-accent-3.png │ ├── material-red-preview.png │ ├── material-blue-preview.png │ ├── material-green-preview.png │ ├── material-theme-tutorial.png │ ├── material-yellow-preview.png │ └── preview-chrome-refresh.png ├── .husky └── pre-commit ├── chrome ├── userChrome.css ├── fonts │ ├── Roboto-Bold.ttf │ ├── Roboto-Medium.ttf │ └── Roboto-Regular.ttf ├── userContent.css ├── icons │ ├── circle.svg │ ├── circle-refresh.svg │ ├── circle-dark.svg │ ├── menu-update.svg │ ├── arrow-right.svg │ ├── arrow-down.svg │ ├── warning.svg │ ├── keyboard-arrow-down.svg │ ├── old │ │ ├── audio.svg │ │ ├── audio-blocked.svg │ │ ├── audio-muted.svg │ │ ├── home.svg │ │ ├── extension.svg │ │ └── tracking-protection.svg │ ├── arrow-back.svg │ ├── close.svg │ ├── keyboard-arrow-up.svg │ ├── menu │ │ ├── open-in-full.svg │ │ ├── reply.svg │ │ ├── swap.svg │ │ ├── pin.svg │ │ ├── screenshot.svg │ │ ├── undo.svg │ │ ├── redo.svg │ │ ├── unpin.svg │ │ ├── copy.svg │ │ ├── link.svg │ │ ├── tab-close.svg │ │ ├── paste.svg │ │ ├── link-off.svg │ │ ├── tab-duplicate.svg │ │ ├── select-all.svg │ │ ├── cut.svg │ │ └── share.svg │ ├── arrow-forward.svg │ ├── code.svg │ ├── lock.svg │ ├── audio-blocked.svg │ ├── menu.svg │ ├── home.svg │ ├── properties.svg │ ├── edit.svg │ ├── account.svg │ ├── star.svg │ ├── download.svg │ ├── new-tab.svg │ ├── side-panel.svg │ ├── open-in.svg │ ├── plus.svg │ ├── folder.svg │ ├── new-window.svg │ ├── refresh.svg │ ├── file-open.svg │ ├── trash.svg │ ├── mail.svg │ ├── toolbar.svg │ ├── exit.svg │ ├── feedback.svg │ ├── check.svg │ ├── devices.svg │ ├── eyedropper.svg │ ├── audio.svg │ ├── search.svg │ ├── tools.svg │ ├── close-tab.svg │ ├── report.svg │ ├── zoom-in.svg │ ├── organization.svg │ ├── history.svg │ ├── file-save.svg │ ├── no-src.svg │ ├── chevron.svg │ ├── key.svg │ ├── print.svg │ ├── find.svg │ ├── remote.svg │ ├── audio-muted.svg │ ├── spinner-busy.svg │ ├── bookmark-manager.svg │ ├── dev.svg │ ├── task-manager.svg │ ├── info.svg │ ├── multiaccountcontainer.svg │ ├── extension.svg │ ├── page-info.svg │ ├── extension-blocked.svg │ ├── tracking-protection.svg │ ├── help.svg │ ├── translate.svg │ ├── settings.svg │ ├── spinner-progress.svg │ ├── glyphs.svg │ └── incognito.svg ├── custom_example.css └── theme-material-blue.css ├── .vscode ├── extensions.json └── css.code-snippets ├── .prettierrc ├── .gitignore ├── examples ├── theme-dracula.css ├── theme-github.css ├── theme-system-accent.css ├── theme-material-green.css ├── theme-material-red.css └── theme-material-yellow.css ├── .github ├── ISSUE_TEMPLATE │ ├── FEATURE_REQUEST_TEMPLATE.yml │ └── BUG_REPORT_TEMPLATE.yml ├── FUNDING.yml └── workflows │ └── release.yml ├── user.js ├── LICENSE └── package.json /userChrome.css: -------------------------------------------------------------------------------- 1 | @import url("./chrome/userChrome.css"); 2 | -------------------------------------------------------------------------------- /userContent.css: -------------------------------------------------------------------------------- 1 | @import url("./chrome/userContent.css"); 2 | -------------------------------------------------------------------------------- /src/variables/_constants.scss: -------------------------------------------------------------------------------- 1 | // Prefix for CSS variables 2 | $prefix: md; 3 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | **/.git 2 | **/.husky 3 | **/node_modules 4 | 5 | # build files 6 | **/chrome 7 | **/examples -------------------------------------------------------------------------------- /docs/assets/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zacharee/material-fox-updated/main/docs/assets/preview.png -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | npm run pre-commit && git add . 5 | -------------------------------------------------------------------------------- /chrome/userChrome.css: -------------------------------------------------------------------------------- 1 | @import "user-chrome.css"; 2 | @import "theme-material-blue.css"; 3 | @import "custom.css"; 4 | -------------------------------------------------------------------------------- /chrome/fonts/Roboto-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zacharee/material-fox-updated/main/chrome/fonts/Roboto-Bold.ttf -------------------------------------------------------------------------------- /chrome/userContent.css: -------------------------------------------------------------------------------- 1 | @import "user-content.css"; 2 | @import "theme-material-blue.css"; 3 | @import "custom.css"; 4 | -------------------------------------------------------------------------------- /docs/assets/preview-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zacharee/material-fox-updated/main/docs/assets/preview-dark.png -------------------------------------------------------------------------------- /docs/assets/preview-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zacharee/material-fox-updated/main/docs/assets/preview-light.png -------------------------------------------------------------------------------- /src/user-chrome/global/_index.scss: -------------------------------------------------------------------------------- 1 | @import "icons"; 2 | @import "extension-icons"; 3 | @import "buttons-ripple-effect"; 4 | -------------------------------------------------------------------------------- /chrome/fonts/Roboto-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zacharee/material-fox-updated/main/chrome/fonts/Roboto-Medium.ttf -------------------------------------------------------------------------------- /chrome/fonts/Roboto-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zacharee/material-fox-updated/main/chrome/fonts/Roboto-Regular.ttf -------------------------------------------------------------------------------- /docs/assets/preview-dracula.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zacharee/material-fox-updated/main/docs/assets/preview-dracula.png -------------------------------------------------------------------------------- /docs/assets/preview-github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zacharee/material-fox-updated/main/docs/assets/preview-github.png -------------------------------------------------------------------------------- /docs/assets/preview-accent-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zacharee/material-fox-updated/main/docs/assets/preview-accent-1.png -------------------------------------------------------------------------------- /docs/assets/preview-accent-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zacharee/material-fox-updated/main/docs/assets/preview-accent-2.png -------------------------------------------------------------------------------- /docs/assets/preview-accent-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zacharee/material-fox-updated/main/docs/assets/preview-accent-3.png -------------------------------------------------------------------------------- /docs/assets/material-red-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zacharee/material-fox-updated/main/docs/assets/material-red-preview.png -------------------------------------------------------------------------------- /chrome/icons/circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/assets/material-blue-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zacharee/material-fox-updated/main/docs/assets/material-blue-preview.png -------------------------------------------------------------------------------- /docs/assets/material-green-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zacharee/material-fox-updated/main/docs/assets/material-green-preview.png -------------------------------------------------------------------------------- /docs/assets/material-theme-tutorial.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zacharee/material-fox-updated/main/docs/assets/material-theme-tutorial.png -------------------------------------------------------------------------------- /docs/assets/material-yellow-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zacharee/material-fox-updated/main/docs/assets/material-yellow-preview.png -------------------------------------------------------------------------------- /docs/assets/preview-chrome-refresh.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zacharee/material-fox-updated/main/docs/assets/preview-chrome-refresh.png -------------------------------------------------------------------------------- /chrome/icons/circle-refresh.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/custom_example.css: -------------------------------------------------------------------------------- 1 | :root, 2 | html, 3 | body { 4 | /* add your css variables below */ 5 | 6 | } 7 | 8 | /* add your user css below */ 9 | -------------------------------------------------------------------------------- /chrome/icons/circle-dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "redhat.vscode-yaml", 4 | "ms-vscode.vs-keybindings", 5 | "naumovs.color-highlight" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /chrome/icons/menu-update.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/arrow-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/user-chrome/new-tabbar-feature/_tab-separator.scss: -------------------------------------------------------------------------------- 1 | // new tab separator style 2 | .tab-content { 3 | &::before, 4 | &::after { 5 | width: 2px !important; 6 | height: 16px !important; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /chrome/icons/arrow-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/warning.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/user-chrome/components/_index.scss: -------------------------------------------------------------------------------- 1 | @import "context-menu"; 2 | @import "context-menu-icons"; 3 | @import "modal-window"; 4 | @import "menupopup"; 5 | @import "findbar"; 6 | @import "window-buttons"; 7 | @import "main-menu"; 8 | -------------------------------------------------------------------------------- /src/user-chrome/new-tabbar-feature/_index.scss: -------------------------------------------------------------------------------- 1 | @include moz-pref-media("userChrome.ui-chrome-refresh") { 2 | @import "tab"; 3 | @import "tab-separator"; 4 | @import "tab-buttons"; 5 | @import "titlebar"; 6 | @import "nav-bar"; 7 | } -------------------------------------------------------------------------------- /src/user-chrome/urlbar/_index.scss: -------------------------------------------------------------------------------- 1 | @import "urlbar"; 2 | @import "urlbar-buttons"; 3 | @import "urlbar-suggestions"; 4 | @import "star-button"; 5 | @import "compact-urlbar-feature"; 6 | @import "bookmarks-bar"; 7 | // @import "sidebar-feature"; 8 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 2, 3 | "semi": true, 4 | "singleQuote": false, 5 | "bracketSpacing": true, 6 | "quoteProps": "as-needed", 7 | "printWidth": 80, 8 | "plugins": ["stylefmt"], 9 | "pluginSearchDirs": false 10 | } 11 | -------------------------------------------------------------------------------- /chrome/icons/keyboard-arrow-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/old/audio.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/user-chrome/tabbar/_index.scss: -------------------------------------------------------------------------------- 1 | @import "tab"; 2 | @import "tab-separator"; 3 | @import "tab-loading"; 4 | @import "tab-identity-line"; 5 | @import "tab-tooltip"; 6 | @import "tab-sound-icon"; 7 | @import "tab-buttons"; 8 | @import "titlebar"; 9 | -------------------------------------------------------------------------------- /chrome/icons/arrow-back.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/close.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/keyboard-arrow-up.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/menu/open-in-full.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /chrome/icons/arrow-forward.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/code.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/lock.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/audio-blocked.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/menu.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/home.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/properties.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/edit.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /chrome/icons/menu/reply.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /chrome/icons/menu/swap.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /chrome/icons/menu/pin.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /chrome/icons/account.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chrome/icons/old/audio-blocked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/icons/star.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/download.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/menu/screenshot.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /chrome/icons/menu/undo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/new-tab.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/side-panel.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/icons/menu/redo.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /chrome/icons/old/audio-muted.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/icons/open-in.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/plus.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/folder.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/new-window.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/refresh.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /chrome/icons/file-open.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/trash.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/user-chrome/components/_window-buttons.scss: -------------------------------------------------------------------------------- 1 | @media (-moz-platform: macos) { 2 | .titlebar-buttonbox-container { 3 | // margin-top: 3px !important; 4 | margin-inline-start: 0px !important; 5 | margin-inline-end: 5px !important; 6 | } 7 | 8 | .titlebar—buttonbox:-moz-locale-dir(ltr) { 9 | margin-right: 5px !important; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /chrome/icons/menu/unpin.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /chrome/icons/mail.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/user-chrome/new-tabbar-feature/_titlebar.scss: -------------------------------------------------------------------------------- 1 | // tabs bar top margin 2 | #TabsToolbar-customization-target > :not(#alltabs-button) { 3 | margin-top: 0px !important; 4 | } 5 | 6 | // tabs top margin if window not maximized 7 | #main-window[sizemode="normal"] 8 | #TabsToolbar-customization-target 9 | > :not(#alltabs-button) { 10 | margin-top: 0px !important; 11 | } 12 | -------------------------------------------------------------------------------- /chrome/icons/toolbar.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/exit.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/feedback.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/menu/copy.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/check.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/devices.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/eyedropper.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/audio.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/search.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/menu/link.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /chrome/icons/old/home.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/icons/tools.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/close-tab.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/report.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/user-chrome/components/_modal-window.scss: -------------------------------------------------------------------------------- 1 | // modal window shadow 2 | .dialogBox:not(.spotlightBox) { 3 | box-shadow: get-var("elevation-2") !important; 4 | border: 1px solid !important; 5 | border-color: get-var("menu-border-color") !important; 6 | } 7 | 8 | // modal window background and text color 9 | :root { 10 | background-color: get-var("background-color-50") !important; 11 | color: get-var("text-primary") !important; 12 | } 13 | -------------------------------------------------------------------------------- /chrome/icons/old/extension.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/icons/zoom-in.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/menu/tab-close.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /chrome/icons/organization.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/user-chrome/urlbar/_star-button.scss: -------------------------------------------------------------------------------- 1 | // show star button on new tab 2 | #star-button-box { 3 | display: flex !important; 4 | align-items: center !important; 5 | } 6 | 7 | @include moz-pref-media("not userChrome.theme-default") { 8 | #star-button-box { 9 | --toolbarbutton-icon-fill-attention: #{get-var("accent-color")} !important; 10 | } 11 | } 12 | 13 | // disable animation for star button 14 | #star-button-animatable-box { 15 | display: none !important; 16 | } -------------------------------------------------------------------------------- /chrome/icons/menu/paste.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/history.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/menu/link-off.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/user-chrome/urlbar/_compact-urlbar-feature.scss: -------------------------------------------------------------------------------- 1 | @include moz-pref-media("userChrome.ui-compact-url-bar") { 2 | #urlbar { 3 | --urlbar-height: 28px !important; 4 | --urlbar-toolbar-height: 36px !important; 5 | } 6 | 7 | #urlbar-container { 8 | --urlbar-container-height: 36px !important; 9 | } 10 | 11 | html, 12 | body { 13 | --urlbar-min-height: 28px !important; // Minimum Height 14 | --toolbarbutton-height: 28px !important; // Button Height 15 | } 16 | } -------------------------------------------------------------------------------- /chrome/icons/file-save.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/no-src.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/chevron.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/key.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/print.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/find.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/remote.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/audio-muted.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | dist 11 | dist-ssr 12 | *.local 13 | 14 | # Editor directories and files 15 | .vscode/* 16 | !.vscode/extensions.json 17 | !.vscode/css.code-snippets 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | 26 | # ignore 27 | node_modules 28 | yarn.lock 29 | package-lock.json 30 | pnpm-lock.yaml 31 | *.zip 32 | custom.css 33 | user-chrome.css 34 | user-content.css 35 | -------------------------------------------------------------------------------- /chrome/icons/spinner-busy.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/bookmark-manager.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/dev.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/task-manager.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/info.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/menu/tab-duplicate.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/user-chrome.scss: -------------------------------------------------------------------------------- 1 | @use "sass:meta"; 2 | @import "variables/index"; 3 | @import "global/reset"; 4 | @import "global/fonts"; 5 | @import "global/button"; 6 | @import "global/input"; 7 | @import "global/select"; 8 | @import "global/checkbox"; 9 | @import "global/radio-button"; 10 | @import "global/tree"; 11 | @import "user-chrome/variables-local"; 12 | @import "user-chrome/global/index"; 13 | @import "user-chrome/tabbar/index"; 14 | @import "user-chrome/urlbar/index"; 15 | @import "user-chrome/components/index"; 16 | @import "user-chrome/new-tabbar-feature/index"; 17 | @import "global/experimental"; 18 | -------------------------------------------------------------------------------- /chrome/icons/multiaccountcontainer.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/global/_tree.scss: -------------------------------------------------------------------------------- 1 | // hide selected item outline 2 | :root { 3 | --default-focusring-width: 0px !important; 4 | } 5 | 6 | :root { 7 | --default-focusring: var(--default-focusring-width) solid !important; 8 | } 9 | 10 | // downloads window 11 | #downloadsListBox:focus > richlistitem[selected] { 12 | border: none !important; 13 | outline: none !important; 14 | } 15 | 16 | richlistbox { 17 | background-color: get-var(input-background-color) !important; 18 | } 19 | 20 | richlistitem[selected] { 21 | background-color: get-var(accent-color) !important; 22 | color: get-var(text-on-accent) !important; 23 | } 24 | -------------------------------------------------------------------------------- /chrome/icons/menu/select-all.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/global/_input.scss: -------------------------------------------------------------------------------- 1 | input:is( 2 | [type="email"], 3 | [type="tel"], 4 | [type="text"], 5 | [type="password"], 6 | [type="url"], 7 | [type="number"] 8 | ), 9 | textarea, 10 | search-textbox { 11 | border: 1px solid; 12 | border-color: get-var("menu-border-color") !important; 13 | background-color: get-var("input-background-color") !important; 14 | border-radius: 4px !important; 15 | 16 | &:focus { 17 | border-color: transparent !important; 18 | outline: 2px solid !important; 19 | outline-offset: -1px !important; 20 | outline-color: get-var("accent-color") !important; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /chrome/icons/extension.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/icons/page-info.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/theme-dracula.css: -------------------------------------------------------------------------------- 1 | /* use variables when about:config variable userChrome.theme-dracula is true */ 2 | @media -moz-pref("userChrome.theme-dracula") { 3 | :root, 4 | html, 5 | body { 6 | --md-accent-color: #bd93f9; 7 | --md-background-color-0: #282a36; 8 | --md-background-color-50: #343746; 9 | --md-background-color-100: #44475a; 10 | --md-tab-background-color-hover: #44475a; 11 | --md-menu-background-color-hover: var(--md-background-color-0); 12 | --md-menu-background-color: var(--md-background-color-0); 13 | --md-menu-border-color: #343746; 14 | --md-selection-text-color: var(--md-black); 15 | --md-selection-background-color: #bd93f9; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /chrome/icons/menu/cut.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/old/tracking-protection.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /chrome/icons/extension-blocked.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/tracking-protection.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /chrome/icons/help.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/FEATURE_REQUEST_TEMPLATE.yml: -------------------------------------------------------------------------------- 1 | name: "✨ Feature Request" 2 | description: Suggest an idea for this project 3 | title: "[Feature Request]: " 4 | labels: ["enhancement"] 5 | 6 | body: 7 | - type: textarea 8 | id: description 9 | attributes: 10 | label: Description 11 | description: Provide a clear explanation of the feature and how it should work. Add screenshots if needed. 12 | validations: 13 | required: true 14 | - type: textarea 15 | id: additional 16 | attributes: 17 | label: Additional info (Optional) 18 | description: Operating system and Firefox version, if relevant. 19 | placeholder: | 20 | Firefox version: 21 | Operating system: 22 | -------------------------------------------------------------------------------- /src/global/_fonts.scss: -------------------------------------------------------------------------------- 1 | /* Normal */ 2 | @font-face { 3 | font-family: "Roboto"; 4 | font-style: normal; 5 | font-weight: 400; 6 | font-display: swap; 7 | src: 8 | local("Roboto"), 9 | url("./fonts/Roboto-Regular.ttf") format("truetype"); 10 | } 11 | /* Semibold */ 12 | @font-face { 13 | font-family: "Roboto"; 14 | font-style: normal; 15 | font-weight: 500; 16 | font-display: swap; 17 | src: 18 | local("Roboto"), 19 | url("./fonts/Roboto-Medium.ttf") format("truetype"); 20 | } 21 | /* Bold */ 22 | @font-face { 23 | font-family: "Roboto"; 24 | font-style: normal; 25 | font-weight: 700; 26 | font-display: swap; 27 | src: 28 | local("Roboto"), 29 | url("./fonts/Roboto-Bold.ttf") format("truetype"); 30 | } -------------------------------------------------------------------------------- /chrome/icons/translate.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/theme-github.css: -------------------------------------------------------------------------------- 1 | /* use variables when about:config variable userChrome.theme-github is true */ 2 | @media -moz-pref("userChrome.theme-github") { 3 | 4 | :root, 5 | html, 6 | body { 7 | --md-text-primary: #e6edf3; 8 | --md-text-secondary: #7d8590; 9 | --md-accent-color: #2f81f7; 10 | --md-background-color-0: #0d1117; 11 | --md-background-color-50: #161b22; 12 | --md-background-color-100: #24292f; 13 | --md-menu-background-color: #161b22; 14 | --md-menu-background-color-hover: #6e768166; 15 | --md-menu-border-color: #31363d; 16 | --md-content-separator-color: #30363db3; 17 | --md-selection-text-color: var(--md-white); 18 | --md-selection-background-color: #1f6febb3; 19 | --md-text-on-accent: var(--md-white); 20 | } 21 | } -------------------------------------------------------------------------------- /chrome/icons/settings.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/user-content.scss: -------------------------------------------------------------------------------- 1 | @use "sass:meta"; 2 | // only for about:* pages 3 | @-moz-document regexp("about:(?!blank|devtools).*") { 4 | @import "variables/index"; 5 | @import "global/reset"; 6 | @import "global/fonts"; 7 | @import "global/button"; 8 | @import "global/input"; 9 | @import "global/select"; 10 | @import "global/checkbox"; 11 | @import "global/radio-button"; 12 | @import "user-content/variables-local"; 13 | 14 | // new tab page 15 | @import "user-content/pages/new-tab"; 16 | 17 | // private browsing page 18 | @import "user-content/pages/privatebrowsing"; 19 | 20 | // reader view page 21 | @import "user-content/pages/reader-view"; 22 | 23 | // any about:* page 24 | @import "user-content/pages/global"; 25 | } 26 | 27 | // dev tools panel 28 | @import "user-content/pages/dev-tools"; 29 | -------------------------------------------------------------------------------- /chrome/icons/menu/share.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: edelvarden 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry 12 | polar: # Replace with a single Polar username 13 | buy_me_a_coffee: # Replace with a single Buy Me a Coffee username 14 | thanks_dev: # Replace with a single thanks.dev username 15 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 16 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/BUG_REPORT_TEMPLATE.yml: -------------------------------------------------------------------------------- 1 | name: "🎃 Bug Report" 2 | description: Report a bug or issue 3 | title: "[Bug]: " 4 | labels: ["bug"] 5 | 6 | body: 7 | - type: textarea 8 | id: description 9 | attributes: 10 | label: What happened? 11 | description: General description of the problem. Add screenshots if needed. 12 | validations: 13 | required: true 14 | - type: textarea 15 | id: steps 16 | attributes: 17 | label: Steps to reproduce 18 | description: Describe the steps to reproduce the problem. 19 | placeholder: | 20 | 1. Open .... 21 | 2. Click on .... 22 | 3. ... 23 | validations: 24 | required: true 25 | - type: textarea 26 | id: additional 27 | attributes: 28 | label: Additional info (Optional) 29 | description: Operating system and Firefox version, if relevant. 30 | placeholder: | 31 | Firefox version: 32 | Operating system: 33 | -------------------------------------------------------------------------------- /user.js: -------------------------------------------------------------------------------- 1 | user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true); // for enable userChrome/userContent 2 | user_pref("svg.context-properties.content.enabled", true); // for svg 3 | user_pref("layout.css.color-mix.enabled", true); // for color-mix 4 | 5 | // * Available preferences 6 | 7 | // user_pref("userChrome.ui-chrome-refresh", true); 8 | 9 | // * Color themes, use only one 10 | // user_pref("userChrome.theme-chrome-refresh", true); 11 | // user_pref("userChrome.theme-default", true); 12 | // user_pref("userChrome.theme-material", true); 13 | 14 | // * Force enable control animation, because by default respects the user animation disable preference. 15 | // * (Not required if you do not disable animation) 16 | // user_pref("userChrome.ui-force-animation", true); 17 | 18 | // * Make the URL bar more compact by reducing its height 19 | // user_pref("userChrome.ui-compact-url-bar", true); 20 | 21 | // * Hide menu icons 22 | // user_pref("userChrome.ui-no-menu-icons", true); 23 | -------------------------------------------------------------------------------- /.vscode/css.code-snippets: -------------------------------------------------------------------------------- 1 | { 2 | "-moz-bool-pref": { 3 | "scope": "scss", 4 | "prefix": "media-pref", 5 | "body": [ 6 | "@include moz-pref-media(\"userChrome.${1:preference-name}\") {", 7 | "\t$2", 8 | "}", 9 | "$0", 10 | ], 11 | "description": "Preference wrapper", 12 | }, 13 | "-moz-bool-pref ": { 14 | "scope": "css", 15 | "prefix": "media-pref", 16 | "body": [ 17 | "@media -moz-pref(\"userChrome.${1:preference-name}\") {", 18 | "\t$2", 19 | "}", 20 | "$0", 21 | ], 22 | "description": "Preference wrapper", 23 | }, 24 | "(prefers-color-scheme: dark)": { 25 | "scope": "css, scss", 26 | "prefix": "media-dark", 27 | "body": ["@media (prefers-color-scheme: ${1:dark}) {", "\t$2", "}", "$0"], 28 | "description": "Styles for dark mode", 29 | }, 30 | "-moz-platform": { 31 | "scope": "scss, css", 32 | "prefix": "media-pl", 33 | "body": ["@media (-moz-platform: ${1:windows}) {", "\t$2", "}", "$0"], 34 | "description": "Platform wrapper", 35 | }, 36 | } 37 | -------------------------------------------------------------------------------- /src/user-chrome/tabbar/_tab-identity-line.scss: -------------------------------------------------------------------------------- 1 | // hide old user container identity line 2 | .tab-context-line { 3 | display: none !important; 4 | } 5 | 6 | // user container identity line like dot 7 | .tab-stack { 8 | position: relative !important; 9 | &::before { 10 | content: "" !important; 11 | position: absolute !important; 12 | top: 4px !important; 13 | right: 4px !important; 14 | width: 4px !important; 15 | height: 4px !important; 16 | background-color: var(--identity-icon-color) !important; 17 | border-radius: 100% !important; 18 | border-width: 0px !important; 19 | border-color: transparent !important; 20 | z-index: 999 !important; 21 | opacity: 1 !important; 22 | } 23 | } 24 | 25 | // user container identity line default 26 | // .tab-stack { 27 | // position: relative !important; 28 | // &::before { 29 | // content: ''; 30 | // position: absolute; 31 | // top: 0; 32 | // left: 0; 33 | // right: 0; 34 | // width: 100%; 35 | // height: 1px; 36 | // background-color: var(--identity-icon-color); 37 | // z-index: 999; 38 | // } 39 | // } 40 | -------------------------------------------------------------------------------- /chrome/icons/spinner-progress.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 edelvarden 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 | -------------------------------------------------------------------------------- /chrome/icons/glyphs.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/user-content/pages/_global.scss: -------------------------------------------------------------------------------- 1 | // rules for about:addons and about:preferences pages 2 | 3 | // right navigation panel bolder category names 4 | .category-name, 5 | .sidebar-footer-label { 6 | font-weight: 500 !important; 7 | } 8 | 9 | // replace extension icon 10 | .addons-icon { 11 | list-style-image: get-var("extension-icon") !important; 12 | } 13 | 14 | .category[name="extension"] { 15 | background-image: get-var("extension-icon") !important; 16 | } 17 | 18 | .info-box-container { 19 | font-size: 13px !important; 20 | // background-color: get-var("input-background-color") !important; 21 | } 22 | 23 | .info-icon[data-l10n-id="managed-notice-info-icon"] { 24 | content: get-var(organization-icon) !important; 25 | } 26 | 27 | .info-icon { 28 | // fill: #9aa0a6 !important; 29 | fill: get-var("icon-color-secondary") !important; 30 | margin-inline-end: 8px !important; 31 | } 32 | 33 | h1 { 34 | color: get-var(accent-color) !important; 35 | font-family: "Georgia", "Times New Roman", "Times", serif !important; 36 | font-weight: 400 !important; 37 | font-size: 1.5rem; 38 | letter-spacing: 0.25px; 39 | } 40 | 41 | .description-deemphasized { 42 | color: get-var(text-secondary) !important; 43 | } 44 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "material-fox-updated", 3 | "description": "Firefox user CSS theme, inspired by material design", 4 | "version": "2.0.0", 5 | "private": true, 6 | "type": "module", 7 | "author": "https://github.com/edelvarden", 8 | "license": "MIT", 9 | "scripts": { 10 | "dev": "npm-run-all --parallel dev:chrome dev:content", 11 | "dev:chrome": "sass --quiet --watch src/user-chrome.scss chrome/user-chrome.css --no-source-map --style compressed", 12 | "dev:content": "sass --quiet --watch src/user-content.scss chrome/user-content.css --no-source-map --style compressed", 13 | "build": "run-s build:chrome build:content", 14 | "build:chrome": "sass --quiet --no-source-map --style compressed src/user-chrome.scss chrome/user-chrome.css", 15 | "build:content": "sass --quiet --no-source-map --style compressed src/user-content.scss chrome/user-content.css", 16 | "format": "prettier --write ./src", 17 | "lint": "prettier --check .", 18 | "pre-commit": "prettier --write . --list-different" 19 | }, 20 | "devDependencies": { 21 | "husky": "^9.1.3", 22 | "npm-run-all": "^4.1.5", 23 | "prettier": "^3.3.3", 24 | "sass": "^1.86.3", 25 | "stylefmt": "^6.0.3" 26 | }, 27 | "browserslist": [ 28 | "last 5 Firefox version" 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /src/global/_select.scss: -------------------------------------------------------------------------------- 1 | $select-border-radius: 8px; 2 | // general "select" control styles 3 | select, 4 | menulist, 5 | .expander-down, 6 | .expander-up, 7 | button[type="menu"] { 8 | border: 1px solid; 9 | border-color: get-var("menu-border-color") !important; 10 | background-color: get-var("input-background-color") !important; 11 | border-radius: 4px !important; 12 | 13 | height: 36px !important; 14 | line-height: 36px !important; 15 | padding-top: 0 !important; 16 | padding-bottom: 0 !important; 17 | 18 | menupopup, 19 | menuitem { 20 | line-height: 18px !important; 21 | } 22 | 23 | &:focus { 24 | border-color: transparent !important; 25 | outline: 2px solid !important; 26 | outline-offset: -1px; 27 | outline-color: get-var("accent-color") !important; 28 | } 29 | } 30 | 31 | // select dropdown menu styles 32 | menulist > menupopup { 33 | --panel-shadow: #{get-var("elevation-2")} !important; 34 | 35 | --panel-border-color: #{get-var("menu-border-color")} !important; 36 | --panel-border-radius: 4px !important; 37 | --panel-background: #{get-var("input-background-color")} !important; 38 | --panel-color: #{get-var("text-primary")} !important; 39 | } 40 | 41 | dropmarker { 42 | content: get-var(arrow-down-icon) !important; 43 | fill: get-var(icon-color-secondary) !important; 44 | } 45 | 46 | button[type="menu"] { 47 | .button-box { 48 | display: flex; 49 | justify-content: space-between !important; 50 | width: 100% !important; 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/variables/_functions.scss: -------------------------------------------------------------------------------- 1 | $base-font-size: 16px; 2 | 3 | // convert px to em 4 | @function px-to-em($px) { 5 | @return $px / $base-font-size * 1em; 6 | } 7 | 8 | // convert px to rem 9 | @function px-to-rem($px) { 10 | @return $px / $base-font-size * 1rem; 11 | } 12 | 13 | // return color mix function with opacity support 14 | @function cm($main-color, $secondary-color, $opacity: 1) { 15 | $opacity: $opacity * 100%; 16 | @return color-mix(in srgb, $secondary-color $opacity, $main-color); 17 | } 18 | 19 | // return value from CSS variable 20 | @function get-var($variable-name, $secondary-variable-name: false) { 21 | @if $secondary-variable-name { 22 | @return #{var(--#{$prefix}-#{$variable-name}, $secondary-variable-name)}; 23 | } 24 | 25 | @return #{var(--#{$prefix}-#{$variable-name})}; 26 | } 27 | 28 | // Apply moz pref media rule (support `not` and `or` with two params) 29 | @mixin moz-pref-media($pref-names) { 30 | @if str-index($pref-names, "not") == 1 { 31 | $actual-pref-names: str-slice($pref-names, 5); 32 | @media not (#{'-moz-pref("' + $actual-pref-names + '")'}) { 33 | @content; 34 | } 35 | } @else if str-index($pref-names, "or") == 1 { 36 | $parts: str-split($pref-names, "or"); 37 | $first: nth($parts, 1); 38 | $second: nth($parts, 2); 39 | @media (#{'-moz-pref("' + $first + '")'}) or (#{'-moz-pref("' + $second + '")'}) { 40 | @content; 41 | } 42 | } @else { 43 | @media (#{'-moz-pref("' + $pref-names + '")'}) { 44 | @content; 45 | } 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /chrome/icons/incognito.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/user-chrome/global/_extension-icons.scss: -------------------------------------------------------------------------------- 1 | // extension icons size inside popup list 2 | .unified-extensions-item-icon, 3 | .unified-extensions-item 4 | .webextension-browser-action.subviewbutton 5 | > .toolbarbutton-badge-stack 6 | > .toolbarbutton-icon { 7 | $icon-size: 24px; 8 | height: $icon-size !important; 9 | width: $icon-size !important; 10 | } 11 | 12 | // fix rounded corners for extension button 13 | .unified-extensions-item-action-button:not(.subviewbutton) { 14 | border-radius: 50% !important; 15 | overflow: visible !important; 16 | } 17 | 18 | // move extension icon badge to the right bottom corner 19 | .toolbarbutton-1 { 20 | position: relative !important; 21 | } 22 | 23 | .toolbarbutton-badge { 24 | margin: 0 !important; 25 | position: absolute !important; 26 | bottom: 0 !important; 27 | right: 0 !important; 28 | } 29 | 30 | // some styles for badge 31 | .toolbarbutton-badge { 32 | border: 1px solid transparent !important; 33 | border-color: get-var("background-color-100") !important; 34 | border-radius: 4px !important; 35 | min-width: 14px !important; 36 | padding: 1px !important; 37 | font-weight: 400 !important; 38 | box-shadow: none !important; 39 | } 40 | 41 | .unified-extensions-item-contents { 42 | } 43 | .unified-extensions-item-name { 44 | white-space: nowrap !important; 45 | overflow: hidden !important; 46 | text-overflow: ellipsis !important; 47 | text-align: left !important; 48 | 49 | max-width: 250px !important; 50 | 51 | padding-right: 0px !important; 52 | padding-inline-end: 0px !important; 53 | 54 | word-break: unset !important; 55 | word-wrap: unset !important; 56 | } 57 | -------------------------------------------------------------------------------- /src/user-content/pages/_dev-tools.scss: -------------------------------------------------------------------------------- 1 | @-moz-document url-prefix(about:devtools), url-prefix(chrome:) { 2 | @media (prefers-color-scheme: dark) { 3 | .theme-dark .editor.text pre { 4 | // color: var(--theme-text-color-strong); 5 | color: #e3e3e3 !important; 6 | } 7 | 8 | .theme-selected, 9 | .CodeMirror-hint-active { 10 | // background-color: var(--theme-selection-background); 11 | background-color: #134b76 !important; 12 | } 13 | 14 | .theme-body { 15 | // color: var(--theme-body-color); 16 | color: #82aef7 !important; 17 | } 18 | 19 | .theme-fg-color1, 20 | .cm-s-mozilla .cm-attribute, 21 | .cm-s-mozilla .cm-builtin, 22 | .cm-s-mozilla .cm-keyword, 23 | .variables-view-variable > .title > .name { 24 | // color: var(--theme-highlight-red); 25 | color: #abc8f9 !important; 26 | } 27 | 28 | .theme-fg-color3, 29 | .cm-s-mozilla .cm-tag, 30 | .cm-s-mozilla .cm-header, 31 | .cm-s-mozilla .cm-bracket, 32 | .cm-s-mozilla .cm-qualifier, 33 | .variables-view-property > .title > .name { 34 | // color: var(--theme-highlight-blue); 35 | color: #82aef7 !important; 36 | } 37 | 38 | .theme-fg-color2 { 39 | // color: var(--theme-highlight-purple); 40 | color: #f78c58 !important; 41 | } 42 | 43 | .ruleview-code { 44 | .ruleview-propertyvaluecontainer, 45 | .ruleview-propertyvalue, 46 | .ruleview-color { 47 | color: #e3e3e3 !important; 48 | } 49 | 50 | .ruleview-variable { 51 | color: #82aef7 !important; 52 | } 53 | 54 | .ruleview-propertyname { 55 | color: #6ac9eb !important; 56 | } 57 | } 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: Publish New Release 2 | 3 | on: 4 | push: 5 | branches: [main] 6 | paths: 7 | - "package.json" # Trigger workflow on changes in package.json 8 | workflow_dispatch: 9 | 10 | jobs: 11 | create-release: 12 | permissions: 13 | contents: write 14 | 15 | runs-on: ubuntu-latest 16 | 17 | steps: 18 | - name: Checkout repository 19 | uses: actions/checkout@v4 20 | 21 | - name: Install dependencies and build project 22 | run: | 23 | sudo apt-get update && sudo apt-get install -y jq zip && npm install && npm run build 24 | continue-on-error: false # Stop the workflow if npm run build fails 25 | 26 | - name: Add chrome folder to archive 27 | run: | 28 | zip -r chrome.zip chrome 29 | working-directory: ${{ github.workspace }} 30 | 31 | - name: Read version from package.json 32 | id: get_version 33 | run: | 34 | VERSION=$(jq -r '.version' package.json) 35 | echo "VERSION=$VERSION" >> $GITHUB_ENV 36 | 37 | - name: Create version tag 38 | run: | 39 | TAG_NAME="v${{ env.VERSION }}" 40 | echo "TAG_NAME=$TAG_NAME" >> $GITHUB_ENV 41 | git fetch --tags 42 | if git rev-parse "$TAG_NAME" >/dev/null 2>&1; then 43 | echo "Tag $TAG_NAME already exists. Skipping tag creation." 44 | else 45 | git tag $TAG_NAME 46 | git push origin $TAG_NAME 47 | fi 48 | 49 | - name: Create and Publish Release 50 | uses: softprops/action-gh-release@v2 51 | with: 52 | tag_name: ${{ env.TAG_NAME }} 53 | name: ${{ env.TAG_NAME }} 54 | files: chrome.zip 55 | env: 56 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 57 | -------------------------------------------------------------------------------- /src/variables/_animation.scss: -------------------------------------------------------------------------------- 1 | $animation-durations: ( 2 | "shortest-duration": "83ms", 3 | "short-duration": "167ms", 4 | "medium-short-duration": "187ms", 5 | "medium-duration": "333ms", 6 | "medium-long-duration": "500ms", 7 | "long-duration": "667ms", 8 | ); 9 | 10 | $animation: ( 11 | // Fast Invoke 12 | // Direct and subtle 13 | // Usage: Transitions that are functional and utilitarian should use this curve. 14 | // Position, Scale, Rotation 15 | // Timing: 187, 333, 500 16 | "fast-invoke": cubic-bezier(0, 0, 0, 1), 17 | // Strong Invoke 18 | // Bold and emphasizing 19 | // Usage: Transitions that call attention or reinforce an action should use this curve. 20 | // Position, Scale 21 | // Timing: 667 22 | "strong-invoke": cubic-bezier(0.13, 1.62, 0, 0.92), 23 | // Fast Dismiss 24 | // Direct and subtle 25 | // Usage: Transitions that dismiss a surface without going off screen or within the same area should use this curve combined with a fade out. 26 | // Position, Scale 27 | // Timing: 187, 333, 500 28 | "fast-dismiss": cubic-bezier(0, 0, 0, 1), 29 | // Soft Dismiss 30 | // Gentle and mellow 31 | // Usage: Transitions that dismiss a surface off screen while confirming a user action should use this curve. 32 | // Scale 33 | // Timing: 167 34 | "soft-dismiss": cubic-bezier(1, 0, 1, 1), 35 | // Point to Point 36 | // Direct and guiding 37 | // Usage: Transitions that keep the same element on screen going from one place to another should use this curve. 38 | // Position, Scale, Rotation 39 | // Timing: 187, 333, 500 40 | "point-to-point": cubic-bezier(0.55, 0.55, 0, 1), 41 | // Fade in Out 42 | // Quick and efficient 43 | // Usage: Transitions that keep the same element on screen going from one place to another should use this curve. 44 | // Opacity 45 | // Timing: 83 46 | "fade-in-out": linear 47 | ); 48 | -------------------------------------------------------------------------------- /src/user-chrome/tabbar/_tab-tooltip.scss: -------------------------------------------------------------------------------- 1 | @include moz-pref-media("not browser.tabs.hoverPreview.enabled") { 2 | 3 | // hide old tooltip 4 | #tabbrowser-tab-tooltip { 5 | display: none !important; 6 | } 7 | 8 | // show new tooltip like chrome 9 | .tabbrowser-tab::after { 10 | content: attr(label) !important; 11 | display: block !important; 12 | position: fixed !important; 13 | overflow: hidden !important; 14 | z-index: 2 !important; 15 | pointer-events: none !important; 16 | opacity: 0; 17 | 18 | width: 255px; 19 | max-width: 255px; 20 | margin: var(--tab-min-height) 0 0 -10px; 21 | padding: 16px 19px; 22 | border-radius: 8px; 23 | border: 1px solid; 24 | border-color: get-var("menu-border-color"); 25 | font-size: inherit !important; 26 | font-weight: 500 !important; 27 | // font-size: 1rem !important; 28 | line-height: 20.02px !important; 29 | 30 | color: var(--arrowpanel-color) !important; 31 | background: var(--arrowpanel-background) !important; 32 | box-shadow: get-var("elevation-2") !important; 33 | } 34 | 35 | .tabbrowser-tab:hover::after { 36 | animation-name: show-tooltip; 37 | animation-duration: get-var("medium-duration"); 38 | animation-timing-function: get-var("point-to-point"); 39 | animation-fill-mode: forwards; 40 | animation-delay: 0.75s; 41 | } 42 | 43 | @keyframes show-tooltip { 44 | from { 45 | opacity: 0; 46 | transform: scale(0.9); 47 | } 48 | 49 | to { 50 | transform: scale(1); 51 | opacity: 1; 52 | } 53 | } 54 | 55 | // fix visibility priority for tab tooltip (make it over nav bar and bookmarks bar) 56 | #titlebar { 57 | z-index: 3 !important; 58 | } 59 | 60 | #nav-bar { 61 | z-index: 2 !important; 62 | } 63 | 64 | #PersonalToolbar { 65 | z-index: 1 !important; 66 | } 67 | 68 | } -------------------------------------------------------------------------------- /src/user-content/pages/_privatebrowsing.scss: -------------------------------------------------------------------------------- 1 | @-moz-document url-prefix("about:privatebrowsing") { 2 | // private browsing page colors 3 | :root, 4 | html, 5 | body { 6 | // main bg color 7 | --in-content-page-background: #{get-var("background-color-100")} !important; 8 | } 9 | 10 | .search-inner-wrapper { 11 | height: 44px !important; 12 | } 13 | 14 | .search-handoff-button, 15 | .search-handoff-button:active, 16 | .search-handoff-button:enabled:hover:active { 17 | background-color: get-var("input-background-color") !important; 18 | background-size: 24px; 19 | border: 0 !important; 20 | border-radius: 99px !important; 21 | padding-inline-start: 48px !important; 22 | } 23 | 24 | .search-handoff-button.focused:not(.disabled) { 25 | box-shadow: none !important; 26 | outline: 2px solid !important; 27 | outline-color: get-var("accent-color") !important; 28 | outline-offset: -2px !important; 29 | } 30 | 31 | .search-handoff-button.disabled { 32 | opacity: 0 !important; 33 | } 34 | 35 | .fake-textbox { 36 | color: var(--in-content-page-color) !important; 37 | font-weight: 400 !important; 38 | } 39 | 40 | .info { 41 | background-color: get-var("background-color-0") !important; 42 | border-radius: 18px !important; 43 | } 44 | 45 | .fake-caret { 46 | background-color: var(--in-content-text-color) !important; 47 | } 48 | 49 | .fake-caret { 50 | inset-inline-start: 48px !important; 51 | top: 13px !important; 52 | } 53 | 54 | // promo card 55 | .promo-visible { 56 | background-color: get-var("background-color-0") !important; 57 | border-radius: 18px !important; 58 | } 59 | 60 | // promo card button 61 | .promo-cta .primary { 62 | background-color: get-var("accent-color") !important; 63 | color: get-var("text-on-accent") !important; 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /src/global/_reset.scss: -------------------------------------------------------------------------------- 1 | @use "sass:meta"; 2 | 3 | // selection color 4 | ::selection { 5 | background-color: get-var("selection-background-color") !important; 6 | color: get-var("selection-text-color") !important; 7 | } 8 | 9 | // inherit fonts for inputs and buttons 10 | input, 11 | // :not(button-group) > button, 12 | textarea, 13 | select { 14 | font: inherit !important; 15 | letter-spacing: inherit !important; 16 | word-spacing: inherit !important; 17 | } 18 | 19 | // button font weight similar to chrome 20 | button { 21 | font-weight: 500 !important; 22 | } 23 | 24 | /** 25 | Remove the additional ':invalid' styles in Firefox. 26 | See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737 27 | */ 28 | :-moz-ui-invalid { 29 | box-shadow: none !important; 30 | } 31 | 32 | // font settings 33 | $font-family: ( 34 | "Roboto", 35 | sans-serif, 36 | "Apple Color Emoji", 37 | "Segoe UI Emoji", 38 | "Segoe UI Symbol", 39 | "Noto Color Emoji" 40 | ); 41 | 42 | :root, 43 | html, 44 | body { 45 | --#{$prefix}-font-family: system-ui, 46 | -apple-system, 47 | #{meta.inspect($font-family)}; 48 | 49 | font-family: var(--#{$prefix}-font-family) !important; 50 | text-rendering: optimizeLegibility; 51 | // -webkit-font-smoothing: antialiased; 52 | // -moz-osx-font-smoothing: grayscale; 53 | font-feature-settings: normal; 54 | font-variation-settings: normal; 55 | line-height: 1.2; 56 | tab-size: 4; 57 | } 58 | 59 | // Custom font (only for windows) 60 | @media (-moz-platform: windows) { 61 | @include moz-pref-media("not userChrome.ui-system-font") { 62 | 63 | :root, 64 | html, 65 | body { 66 | --#{$prefix}-font-family: #{meta.inspect($font-family)}; 67 | } 68 | 69 | *:not(hbox.titlebar-buttonbox, hbox.titlebar-buttonbox *), 70 | *:not(hbox.titlebar-buttonbox, hbox.titlebar-buttonbox *)::before, 71 | *:not(hbox.titlebar-buttonbox, hbox.titlebar-buttonbox *)::after { 72 | font-family: var(--#{$prefix}-font-family) !important; 73 | } 74 | } 75 | } -------------------------------------------------------------------------------- /src/user-chrome/tabbar/_tab-loading.scss: -------------------------------------------------------------------------------- 1 | // hide default loading animation 2 | .tab-loading-burst[bursting], 3 | .tab-throbber { 4 | &::before { 5 | display: none !important; 6 | } 7 | } 8 | 9 | // added spinner animation 10 | .tab-throbber { 11 | -moz-context-properties: fill !important; 12 | fill: var(--focus-outline-color) !important; 13 | background-image: url("icons/spinner-busy.svg") !important; 14 | transform-origin: center !important; 15 | position: static !important; 16 | margin: 0 !important; 17 | padding: 0 !important; 18 | 19 | animation: rotate-360 1.333s linear infinite reverse !important; 20 | } 21 | 22 | .tab-throbber { 23 | &[progress] { 24 | background-image: url("icons/spinner-progress.svg") !important; 25 | animation-direction: normal !important; 26 | } 27 | } 28 | 29 | @keyframes rotate-360 { 30 | 0% { 31 | transform: rotate(0); 32 | } 33 | 34 | 100% { 35 | transform: rotate(1turn); 36 | } 37 | } 38 | 39 | // icon animation when loading 40 | .tabbrowser-tab { 41 | .tab-icon-image { 42 | display: block !important; 43 | visibility: visible !important; 44 | overflow: visible !important; 45 | max-width: none !important; 46 | max-height: none !important; 47 | } 48 | 49 | &[busy] { 50 | .tab-icon-image { 51 | transform: scale(0.5); 52 | } 53 | } 54 | 55 | &:not([busy]) { 56 | .tab-icon-image { 57 | animation-name: set-scale; 58 | animation-duration: get-var("medium-short-duration"); 59 | animation-timing-function: get-var("fade-in-out"); 60 | } 61 | } 62 | } 63 | 64 | @keyframes set-scale { 65 | 0% { 66 | transform: scale(0.5); 67 | border-radius: 100px !important; 68 | } 69 | 70 | 100% { 71 | transform: scale(1); 72 | border-radius: 0 !important; 73 | } 74 | } 75 | 76 | .tab-icon-stack { 77 | max-width: 16px !important; 78 | max-height: 16px !important; 79 | width: 16px !important; 80 | height: 16px !important; 81 | overflow: visible !important; 82 | } 83 | 84 | .tab-icon-stack * { 85 | margin: 0 !important; 86 | } 87 | -------------------------------------------------------------------------------- /src/user-content/pages/_reader-view.scss: -------------------------------------------------------------------------------- 1 | @-moz-document url-prefix("about:reader") { 2 | body.dark { 3 | // original 4 | // --main-background: var(--dark-theme-background); 5 | // --main-foreground: var(--dark-theme-foreground); 6 | // --primary-color: rgb(0, 221, 255); 7 | // --toolbar-border: rgba(249, 249, 250, 0.2); 8 | // --toolbar-button-background-hover: rgb(82, 82, 94); 9 | // --toolbar-button-background-active: rgb(91, 91, 102); 10 | // --popup-background: rgb(66, 65, 77); 11 | // --popup-line: rgba(249, 249, 250, 0.1); 12 | // --popup-button-background: rgb(43, 42, 51); 13 | // --selected-background: rgba(0, 221, 255, 0.3); 14 | // --font-value-background: rgba(249, 249, 250, 0.15); 15 | // --font-value-border: #656468; 16 | // --icon-fill: rgb(251, 251, 254); 17 | // --icon-disabled-fill: rgba(251, 251, 254, 0.4); 18 | // --link-selected-foreground: #fff; 19 | // custom 20 | --main-background: #{get-var("background-color-0")} !important; 21 | --main-foreground: #{get-var("text-primary")} !important; 22 | --primary-color: #{get-var("accent-color")} !important; 23 | --toolbar-border: #{get-var("menu-border-color")} !important; 24 | --toolbar-button-background-hover: #{get-var("background-color-50")} !important; 25 | --toolbar-button-background-active: #{get-var("background-color-100")} !important; 26 | --popup-background: #{get-var("background-color-50")} !important; 27 | --popup-line: #{get-var("menu-border-color")} !important; 28 | --popup-button-background: #{get-var("background-color-0")} !important; 29 | --selected-background: #{get-var("accent-color-transparent")} !important; 30 | --font-value-background: #{get-var("background-color-50")} !important; 31 | --font-value-border: #{get-var("menu-border-color")} !important; 32 | --icon-fill: #{get-var("icon-color-secondary")} !important; 33 | --icon-disabled-fill: rgb(251 251 254 / 40%); 34 | --link-selected-foreground: #fff; 35 | } 36 | 37 | body.dark, 38 | body.light, 39 | body.sepia { 40 | .toolbar, 41 | .dropdown .dropdown-popup { 42 | box-shadow: #{get-var("elevation-2")} !important; 43 | } 44 | 45 | .domain { 46 | text-decoration: underline var(--primary-color) !important; 47 | } 48 | } 49 | 50 | body.serif { 51 | .container * { 52 | font-family: Georgia, "Times New Roman", serif !important; 53 | } 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /src/variables/_index.scss: -------------------------------------------------------------------------------- 1 | @use "sass:meta"; 2 | @import "constants"; 3 | @import "functions"; 4 | @import "animation"; 5 | @import "colors"; 6 | @import "icons"; 7 | 8 | :root, 9 | html, 10 | body { 11 | 12 | // loading animation only if enabled, respects animation disable preference 13 | @media not (prefers-reduced-motion: reduce) { 14 | 15 | // animation durations 16 | @each $key, $value in $animation-durations { 17 | --#{$prefix}-#{$key}: #{$value}; 18 | } 19 | } 20 | 21 | @include moz-pref-media("userChrome.ui-force-animation") { 22 | 23 | // animation durations 24 | @each $key, $value in $animation-durations { 25 | --#{$prefix}-#{$key}: #{$value}; 26 | } 27 | } 28 | 29 | // animation 30 | @each $key, $value in $animation { 31 | --#{$prefix}-#{$key}: #{$value}; 32 | } 33 | 34 | // icons 35 | @each $key, $value in $icons { 36 | --#{$prefix}-#{$key}: #{$value}; 37 | } 38 | 39 | // when not chrome-refresh or when old-icons enabled 40 | @include moz-pref-media("not userChrome.ui-chrome-refresh") { 41 | @include moz-pref-media("userChrome.ui-force-old-icons") { 42 | 43 | // old icons 44 | @each $key, $value in $icons-old { 45 | --#{$prefix}-#{$key}: #{$value}; 46 | } 47 | } 48 | } 49 | 50 | // colors 51 | @each $key, $value in $colors { 52 | --#{$prefix}-#{$key}: #{$value}; 53 | } 54 | 55 | @each $key, $value in $global { 56 | --#{$prefix}-#{$key}: #{$value}; 57 | } 58 | 59 | // dark mode colors 60 | @each $key, $value in $dark-mode { 61 | --#{$prefix}-#{$key}: #{$value}; 62 | } 63 | 64 | // optional feature: Chrome refresh theme colors 65 | 66 | @include moz-pref-media("userChrome.theme-chrome-refresh") { 67 | @each $key, $value in $chrome-refresh-colors { 68 | --#{$prefix}-#{$key}: #{$value}; 69 | } 70 | } 71 | 72 | // light mode colors (placed to the end to override dark mode styles if light mode is enabled) 73 | @media (prefers-color-scheme: light) { 74 | @each $key, $value in $light-mode { 75 | --#{$prefix}-#{$key}: #{$value}; 76 | } 77 | } 78 | 79 | @include moz-pref-media("userChrome.theme-material") { 80 | @each $key, $value in $theme-material-light { 81 | --#{$prefix}-#{$key}: #{$value}; 82 | } 83 | 84 | @media (prefers-color-scheme: dark) { 85 | @each $key, $value in $theme-material-dark { 86 | --#{$prefix}-#{$key}: #{$value}; 87 | } 88 | } 89 | } 90 | } -------------------------------------------------------------------------------- /src/user-content/_variables-local.scss: -------------------------------------------------------------------------------- 1 | :root, 2 | html, 3 | body { 4 | --newtab-primary-action-background: #{get-var("accent-color")} !important; 5 | 6 | --brand-color-accent: #{get-var("accent-color")} !important; 7 | --brand-color-accent-hover: #{get-var("accent-color-hover")} !important; 8 | 9 | // primary button colors 10 | --in-content-primary-button-text-color: #{get-var("text-on-accent")} !important; 11 | --in-content-primary-button-background: #{get-var("accent-color")} !important; 12 | --in-content-primary-button-background-hover: #{get-var("accent-color-hover")} !important; 13 | --in-content-primary-button-background-active: #{get-var("accent-color")} !important; 14 | 15 | --color-accent-primary: #{get-var("accent-color")} !important; 16 | accent-color: get-var("accent-color") !important; 17 | } 18 | 19 | :root, 20 | html, 21 | body { 22 | // bg color 23 | // --in-content-page-background: #{get-var("input-background-color")} !important; 24 | // --in-content-box-info-background: #{get-var("background-color-50")} !important; 25 | // --in-content-box-background: #{get-var("background-color-50")} !important; 26 | // border 27 | --in-content-border-color: #{get-var("menu-border-color")} !important; 28 | // primary text color 29 | --in-content-text-color: #{get-var("text-primary")} !important; 30 | --in-content-page-color: #{get-var("text-primary")} !important; 31 | 32 | // accent color 33 | --in-content-link-color: #{get-var("accent-color")} !important; 34 | --in-content-link-color-hover: #{get-var("accent-color")} !important; 35 | --in-content-accent-color: #{get-var("accent-color")} !important; 36 | --in-content-primary-button-background: #{get-var("accent-color")} !important; 37 | --in-content-primary-button-background-hover: #{get-var("accent-color")} !important; 38 | --in-content-primary-button-background-active: #{get-var("accent-color")} !important; 39 | --in-content-focus-outline-color: #{get-var("accent-color")} !important; 40 | --focus-outline-color: #{get-var("accent-color")} !important; 41 | 42 | --link-color: #{get-var("accent-color")} !important; 43 | --link-color-hover: #{get-var("accent-color")} !important; 44 | --link-color-active: #{get-var("accent-color")} !important; 45 | --link-color-visited: #{get-var("accent-color")} !important; 46 | } 47 | .toggle-button { 48 | --toggle-background-color-pressed: #{get-var("accent-color")} !important; 49 | --toggle-background-color-pressed-hover: #{get-var("accent-color")} !important; 50 | --toggle-background-color-pressed-active: #{get-var("accent-color")} !important; 51 | } 52 | -------------------------------------------------------------------------------- /src/global/_radio-button.scss: -------------------------------------------------------------------------------- 1 | // radio button 2 | input[type="radio"]:not(.wallpaper-input), 3 | .radio-check { 4 | display: inline-flex !important; 5 | align-items: center !important; 6 | justify-content: center !important; 7 | 8 | border: none !important; 9 | background-color: get-var("background-color-0") !important; 10 | 11 | // outline-width: 2px !important; 12 | // outline-style: solid !important; 13 | // outline-color: get-var("menu-border-color") !important; 14 | // outline-offset: 0px !important; 15 | 16 | width: 16px !important; 17 | height: 16px !important; 18 | 19 | color: get-var("accent-color") !important; 20 | border-color: get-var("accent-color") !important; 21 | 22 | background-size: 16px !important; 23 | 24 | background-position: center !important; 25 | 26 | transition-property: background-size !important; 27 | transition-duration: get-var("medium-short-duration") !important; 28 | transition-timing-function: get-var("fast-invoke") !important; 29 | } 30 | 31 | input[type="radio"]:enabled:hover, 32 | radio:not([disabled="true"]):hover > .radio-check { 33 | &:not([selected], :checked) { 34 | background-color: get-var("background-color-50") !important; 35 | } 36 | } 37 | 38 | input[type="radio"]:checked, 39 | .radio-check[selected] { 40 | background-size: 16px !important; 41 | 42 | border: none !important; 43 | // outline-width: 2px !important; 44 | // outline-style: solid !important; 45 | // outline-offset: 0px !important; 46 | // outline-color: get-var("accent-color") !important; 47 | } 48 | 49 | radio { 50 | position: relative !important; 51 | 52 | &::after { 53 | content: ""; 54 | width: 48px; 55 | height: 48px; 56 | position: absolute; 57 | display: grid; 58 | align-items: center !important; 59 | top: 50%; 60 | left: -15px; 61 | background-color: transparent; 62 | border-radius: 50%; 63 | z-index: 1; 64 | 65 | transform: translateY(-50%); 66 | 67 | transition-property: background-color; 68 | transition-duration: get-var("medium-short-duration"); 69 | transition-timing-function: get-var("fast-invoke"); 70 | } 71 | } 72 | 73 | radio:not([disabled="true"]) { 74 | &:hover::after { 75 | background-color: get-var("accent-color-transparent"); 76 | 77 | animation-name: control-hover; 78 | animation-duration: get-var("short-duration"); 79 | animation-timing-function: get-var("fast-invoke"); 80 | } 81 | 82 | &:hover:active::after { 83 | background-color: get-var("accent-color-transparent-active"); 84 | } 85 | } 86 | 87 | // hand cursor on hover 88 | radio:not([disabled="true"]) { 89 | cursor: pointer !important; 90 | 91 | // also for label, because it doesn't inherit 92 | label { 93 | cursor: pointer !important; 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /src/global/_checkbox.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | // checkbox 4 | input[type="checkbox"], 5 | .checkbox-check, 6 | .sponsored-checkbox { 7 | border-width: 2px !important; 8 | border-style: solid !important; 9 | border-color: get-var("menu-border-color") !important; 10 | background-color: get-var("background-color-0") !important; 11 | border-radius: 2px !important; 12 | 13 | width: 18px !important; 14 | height: 18px !important; 15 | 16 | &:is([checked], :checked) { 17 | background-image: get-var("check-icon") !important; 18 | background-color: get-var("accent-color") !important; 19 | border-color: get-var("accent-color") !important; 20 | } 21 | } 22 | 23 | input[type="checkbox"]:not(:disabled, [disabled="true"]):hover, 24 | checkbox:not([disabled="true"]):hover>.checkbox-check { 25 | &:not([checked], :checked) { 26 | background-color: get-var("background-color-50") !important; 27 | } 28 | } 29 | 30 | // checkbox material hover effect 31 | :not(.findbar-container) > checkbox { 32 | position: relative !important; 33 | 34 | &::after { 35 | content: ""; 36 | width: 48px; 37 | height: 48px; 38 | position: absolute; 39 | top: 50%; 40 | left: -15px; 41 | background-color: transparent; 42 | border-radius: 50%; 43 | z-index: 1; 44 | transform: translateY(-50%); 45 | 46 | transition-property: background-color; 47 | transition-duration: get-var("medium-short-duration"); 48 | transition-timing-function: get-var("fast-invoke"); 49 | } 50 | } 51 | 52 | // checkbox material hover effect (rtl support) 53 | [dir="rtl"] { 54 | :not(.findbar-container) > checkbox { 55 | &::after { 56 | left: unset; 57 | right: -15px; 58 | } 59 | } 60 | } 61 | 62 | @keyframes control-hover { 63 | 0% { 64 | transform: scale(0.8) translateY(-50%); 65 | } 66 | 67 | 100% { 68 | transform: scale(1) translateY(-50%); 69 | } 70 | } 71 | 72 | :not(.findbar-container) > checkbox:not([disabled="true"]) { 73 | &:hover::after { 74 | background-color: get-var("accent-color-transparent"); 75 | 76 | animation-name: control-hover; 77 | animation-duration: get-var("short-duration"); 78 | animation-timing-function: get-var("fast-invoke"); 79 | } 80 | 81 | &:hover:active::after { 82 | background-color: get-var("accent-color-transparent-active"); 83 | } 84 | } 85 | 86 | // hand cursor on hover 87 | checkbox:not([disabled="true"]) { 88 | cursor: pointer !important; 89 | 90 | // also for label, because it doesn't inherit 91 | label { 92 | cursor: pointer !important; 93 | } 94 | } 95 | 96 | // fix checkbox checkmark fill color 97 | .checkbox-check[checked] { 98 | fill: get-var("text-on-accent") !important; 99 | } -------------------------------------------------------------------------------- /src/global/_experimental.scss: -------------------------------------------------------------------------------- 1 | // fixes for default Firefox colors feature 2 | @include moz-pref-media("userChrome.theme-default") { 3 | 4 | // urlbar suggestions item 5 | .urlbarView-row { 6 | &[selected] { 7 | background-color: #{cm(rgba(0, 0, 0, 0.2), get-var("white"), 0.15)} !important; 8 | } 9 | 10 | &[selected] { 11 | border-left-color: var(--color-accent-primary) !important; 12 | } 13 | 14 | &:not([selected]):hover { 15 | background-color: #{cm(rgba(0, 0, 0, 0.2), get-var("white"), 0.15)} !important; 16 | } 17 | } 18 | 19 | .urlbarView-row { 20 | &:not([selected]):hover { 21 | border-left-color: #{cm(rgba(0, 0, 0, 0.2), get-var("white"), 0.15)} !important; 22 | } 23 | } 24 | 25 | [dir="rtl"] { 26 | .urlbarView-row { 27 | &[selected] { 28 | border-left-color: var(--color-accent-primary) !important; 29 | } 30 | 31 | &:not([selected]):hover { 32 | border-right-color: #{cm(rgba(0, 0, 0, 0.2), get-var("white"), 0.15)} !important; 33 | } 34 | } 35 | } 36 | 37 | // global accent color 38 | :root, 39 | html, 40 | body { 41 | --#{$prefix}-accent-color: var(--color-accent-primary) !important; 42 | // --md-text-on-accent: var(--button-primary-color) !important; 43 | --#{$prefix}-menu-border-color: var(--arrowpanel-border-color) !important; 44 | 45 | --toolbar-field-focus-border-color: var(--color-accent-primary) !important; 46 | } 47 | 48 | .browser-toolbar { 49 | &:not(.titlebar-color) { 50 | background-color: var(--toolbar-bgcolor) !important; 51 | } 52 | } 53 | 54 | // make navbar the same color as selected tab 55 | @media (prefers-color-scheme: dark) { 56 | 57 | html, 58 | body { 59 | --toolbar-bgcolor: var(--tab-selected-bgcolor) !important; 60 | } 61 | 62 | #nav-bar { 63 | background-color: var(--toolbar-bgcolor) !important; 64 | } 65 | } 66 | 67 | #urlbar-background, .urlbar-background { 68 | background-color: var(--toolbar-field-background-color) !important; 69 | } 70 | 71 | #urlbar:is([open], [focused]) { 72 | 73 | #urlbar-background, .urlbar-background, 74 | #searchbar { 75 | background-color: var(--toolbar-field-focus-background-color) !important; 76 | } 77 | } 78 | 79 | @include moz-pref-media("userChrome.ui-chrome-refresh") { 80 | #alltabs-button { 81 | .toolbarbutton-badge-stack { 82 | background-color: var(--tab-selected-bgcolor) !important; 83 | } 84 | 85 | &:not(:active, [open="true"]):hover { 86 | .toolbarbutton-badge-stack { 87 | background-color: get-var("alltabs-background-color-open") !important; 88 | } 89 | } 90 | 91 | &:active:hover { 92 | .toolbarbutton-badge-stack { 93 | background-color: var(--tab-selected-bgcolor) !important; 94 | } 95 | } 96 | } 97 | } 98 | } -------------------------------------------------------------------------------- /src/global/_button.scss: -------------------------------------------------------------------------------- 1 | // variables 2 | $button-border-radius: 4px; 3 | $button-padding: 8px 16px; 4 | $button-min-width: 5.14em; 5 | 6 | // mixins 7 | @mixin button-styles { 8 | min-width: $button-min-width !important; 9 | border-radius: $button-border-radius !important; 10 | padding: $button-padding !important; 11 | align-items: center; 12 | justify-content: center; 13 | text-align: center; 14 | 15 | font-weight: 500 !important; 16 | 17 | transition-property: background-color !important; 18 | transition-duration: get-var("medium-short-duration") !important; 19 | transition-timing-function: get-var("fast-invoke") !important; 20 | } 21 | 22 | @mixin primary-button-styles { 23 | border: none !important; 24 | color: get-var("text-on-accent") !important; 25 | background-color: get-var("accent-color") !important; 26 | 27 | &:not(.disabled, :disabled, [disabled]):hover { 28 | background-color: get-var("accent-color-hover") !important; 29 | } 30 | 31 | &:not(.disabled, :disabled, [disabled]):hover:active { 32 | background-color: cm( 33 | transparent, 34 | get-var("accent-color-hover"), 35 | 0.8 36 | ) !important; 37 | } 38 | } 39 | 40 | @mixin secondary-button-styles { 41 | color: get-var("secondary-button-text") !important; 42 | background-color: transparent !important; 43 | border: 1px solid !important; 44 | // border-color: get-var("menu-border-color") !important; 45 | border-color: var(--in-content-box-border-color) !important; 46 | 47 | &:not(.disabled, :disabled, [disabled]):hover { 48 | background-color: get-var("accent-color-transparent") !important; 49 | } 50 | 51 | &:not(.disabled, :disabled, [disabled]):hover:active { 52 | background-color: get-var("accent-color-transparent-active") !important; 53 | } 54 | } 55 | 56 | // styles 57 | :not(dialog, .dialogBox) { 58 | :not(button-group) > button { 59 | &:is( 60 | [accesskey], 61 | .accessory-button, 62 | [dlgtype="cancel"], 63 | [autofocus], 64 | [default], 65 | .primary, 66 | .primary-button, 67 | .popup-notification-primary-button, 68 | .disco-cta-button, 69 | [data-l10n-id="translations-manage-language-download-button"] 70 | ):not(button[type="menu"]), 71 | [type="submit"] { 72 | @include button-styles; 73 | } 74 | 75 | // Secondary buttons 76 | &:is( 77 | [accesskey], 78 | .accessory-button, 79 | [dlgtype="cancel"], 80 | .disco-cta-button, 81 | [data-l10n-id="translations-manage-language-download-button"] 82 | ):not(button[type="menu"]) { 83 | @include secondary-button-styles; 84 | } 85 | 86 | // Primary buttons 87 | &:is( 88 | [autofocus], 89 | [default], 90 | .primary, 91 | .primary-button, 92 | .popup-notification-primary-button 93 | ):not(button[type="menu"]), 94 | [type="submit"] { 95 | @include primary-button-styles; 96 | } 97 | 98 | &:not(.disabled, :disabled, [disabled]) { 99 | cursor: pointer; 100 | } 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /src/user-chrome/tabbar/_tab-separator.scss: -------------------------------------------------------------------------------- 1 | .tab-content { 2 | position: relative !important; 3 | overflow: hidden !important; 4 | align-items: center !important; 5 | 6 | &::before, 7 | &::after { 8 | content: "" !important; 9 | display: block !important; 10 | position: absolute !important; 11 | background-color: get-var("tab-separator-color") !important; 12 | width: 1px !important; 13 | height: 20px !important; 14 | top: unset !important; 15 | transform: translateY(0%) !important; 16 | opacity: 0 !important; 17 | border: none !important; 18 | 19 | transition-property: opacity !important; 20 | transition-duration: get-var("medium-short-duration") !important; 21 | transition-timing-function: get-var("point-to-point") !important; 22 | } 23 | 24 | &::before { 25 | left: 0 !important; 26 | } 27 | 28 | &::after { 29 | right: 0 !important; 30 | } 31 | } 32 | 33 | // hide tab separators if hover or selected 34 | [dir="ltr"] { 35 | .tabbrowser-tab:is([visuallyselected], [selected])[style*="transform"] 36 | + .tabbrowser-tab[style*="transform"] 37 | .tab-content::after, 38 | .tabbrowser-tab[style*="transform"]:not(:is([visuallyselected], [selected])) 39 | .tab-content::before, 40 | .tabbrowser-tab[style*="transform"] 41 | + .tabbrowser-tab:not(:is([visuallyselected], [selected])) 42 | .tab-content::before, 43 | .tabbrowser-tab:not(:is([visuallyselected], [selected])):not(:hover):not( 44 | [multiselected] 45 | ) 46 | + .tabbrowser-tab:not(:is([visuallyselected], [selected])):not(:hover):not( 47 | [multiselected] 48 | ) 49 | .tab-content::before, 50 | #tabbrowser-tabs[hasadjacentnewtabbutton]:not([overflow]) 51 | .tabbrowser-tab[last-visible-tab]:not( 52 | :is([visuallyselected], [selected]) 53 | ):not(:hover):not([multiselected]) 54 | .tab-content::after { 55 | opacity: var(--tab-separator-opacity) !important; 56 | } 57 | } 58 | 59 | [dir="rtl"] { 60 | .tabbrowser-tab:is([visuallyselected], [selected])[style*="transform"] 61 | + .tabbrowser-tab[style*="transform"] 62 | .tab-content::before, 63 | .tabbrowser-tab[style*="transform"]:not(:is([visuallyselected], [selected])) 64 | .tab-content::after, 65 | .tabbrowser-tab[style*="transform"] 66 | + .tabbrowser-tab:not(:is([visuallyselected], [selected])) 67 | .tab-content::after, 68 | .tabbrowser-tab:not(:is([visuallyselected], [selected])):not(:hover):not( 69 | [multiselected] 70 | ) 71 | + .tabbrowser-tab:not(:is([visuallyselected], [selected])):not(:hover):not( 72 | [multiselected] 73 | ) 74 | .tab-content::after, 75 | #tabbrowser-tabs[hasadjacentnewtabbutton]:not([overflow]) 76 | .tabbrowser-tab[last-visible-tab]:not( 77 | :is([visuallyselected], [selected]) 78 | ):not(:hover):not([multiselected]) 79 | .tab-content::before { 80 | opacity: var(--tab-separator-opacity) !important; 81 | } 82 | } 83 | 84 | // #tabbrowser-tabs[overflow] 85 | // .tabbrowser-tab[pinned] 86 | // + .tabbrowser-tab:not([pinned]) 87 | // .tab-content::before { 88 | // opacity: 0 !important; 89 | // } 90 | 91 | // disable hover transition for selected tab 92 | .tabbrowser-tab:is([visuallyselected], [selected]) { 93 | --tab-transition-duration: 0s !important; 94 | } 95 | -------------------------------------------------------------------------------- /src/user-chrome/urlbar/_sidebar-feature.scss: -------------------------------------------------------------------------------- 1 | // browser.toolbars.bookmarks.visibility = 'always' 2 | 3 | :root { 4 | --#{$prefix}-sidebar-width: 44px; 5 | } 6 | 7 | #browser { 8 | margin-left: get-var(sidebar-width); 9 | } 10 | 11 | #navigator-toolbox { 12 | position: relative !important; 13 | } 14 | 15 | #PersonalToolbar { 16 | position: absolute; 17 | display: flex; 18 | flex-direction: column; 19 | top: 100%; 20 | left: 0; 21 | width: get-var(sidebar-width); 22 | min-width: unset !important; 23 | height: 100vh; 24 | max-height: 100vh !important; 25 | padding-bottom: 120px !important; 26 | padding-inline: 0px !important; 27 | } 28 | 29 | #PersonalToolbar .toolbarbutton-1, 30 | #PersonalToolbar toolbaritem { 31 | max-width: get-var(sidebar-width) !important; 32 | margin: 0 !important; 33 | } 34 | 35 | #PersonalToolbar #PlacesToolbarItems { 36 | display: flex !important; 37 | flex-direction: column; 38 | overflow-y: auto; 39 | // scrollbar-width: none; 40 | } 41 | 42 | #PersonalToolbar > #personal-bookmarks { 43 | overflow-y: auto; 44 | scrollbar-width: none; 45 | height: 100vh; 46 | } 47 | 48 | #PersonalToolbar #PlacesToolbarItems { 49 | display: flex !important; 50 | flex-direction: row !important; 51 | justify-content: center !important; 52 | flex-wrap: wrap !important; 53 | } 54 | 55 | #personal-bookmarks, 56 | #PlacesToolbar, 57 | #PlacesToolbarItems { 58 | width: 100% !important; 59 | } 60 | 61 | #personal-bookmarks .bookmark-item > .toolbarbutton-text, 62 | #import-button label { 63 | display: none !important; 64 | } 65 | 66 | #PlacesToolbarItems > .bookmark-item > image { 67 | padding: 0 !important; 68 | margin-block: 0 !important; 69 | margin-inline: 0 !important; 70 | margin: 0 !important; 71 | } 72 | 73 | #PlacesToolbarItems > .bookmark-item { 74 | --tab-min-height: 40px; 75 | --tab-vertical-padding: 6px; 76 | --tab-horizontal-padding: 3px; 77 | 78 | min-height: var(--tab-min-height) !important; 79 | max-height: var(--tab-min-height) !important; 80 | width: 100%; 81 | 82 | background: none !important; 83 | background-image: none !important; 84 | padding: 0 !important; 85 | margin-block: 0 !important; 86 | margin-inline: 0 !important; 87 | margin: 0 !important; 88 | 89 | place-content: center !important; 90 | place-items: center !important; 91 | justify-content: center !important; 92 | align-items: center; 93 | 94 | position: relative !important; 95 | 96 | &::after { 97 | content: ""; 98 | position: absolute; 99 | 100 | // margin-top: var(--tab-vertical-padding) !important; 101 | // margin-bottom: var(--tab-vertical-padding) !important; 102 | // margin-left: var(--tab-horizontal-padding) !important; 103 | // margin-right: var(--tab-horizontal-padding) !important; 104 | 105 | min-height: 28px !important; 106 | max-height: 28px !important; 107 | min-width: 37px; 108 | max-width: 37px; 109 | 110 | width: 100%; 111 | border-radius: 11px; 112 | 113 | left: 50%; 114 | right: 0; 115 | 116 | transform: translateX(-50%); 117 | 118 | opacity: get-var(tab-opacity); 119 | } 120 | 121 | &:hover { 122 | &::after { 123 | background-color: get-var(tab-background-color-hover); 124 | opacity: get-var(tab-opacity-hover); 125 | } 126 | } 127 | } 128 | -------------------------------------------------------------------------------- /examples/theme-system-accent.css: -------------------------------------------------------------------------------- 1 | /* use variables when about:config variable userChrome.system-accent-colors is true */ 2 | @media -moz-pref("userChrome.theme-system-accent") { 3 | /* use variables when dark mode */ 4 | @media (prefers-color-scheme: dark) { 5 | :root, 6 | html, 7 | body { 8 | --md-accent-color: color-mix(in srgb, var(--md-white) 15%, AccentColor); 9 | --md-tab-background-color-hover: color-mix( 10 | in srgb, 11 | transparent 75%, 12 | var(--md-accent-color) 13 | ); 14 | --md-tab-opacity: 0.9; 15 | --md-background-color-0: color-mix( 16 | in srgb, 17 | var(--md-grey-900) 85%, 18 | var(--md-accent-color) 19 | ); 20 | --md-background-color-50: color-mix( 21 | in srgb, 22 | var(--md-grey-900-white-4-percent) 85%, 23 | var(--md-accent-color) 24 | ); 25 | --md-background-color-100: color-mix( 26 | in srgb, 27 | var(--md-grey-900-white-5-percent) 85%, 28 | var(--md-accent-color) 29 | ); 30 | --md-menu-background-color-hover: color-mix( 31 | in srgb, 32 | var(--md-grey-800) 85%, 33 | var(--md-accent-color) 34 | ); 35 | --md-menu-border-color: color-mix( 36 | in srgb, 37 | var(--md-grey-800) 85%, 38 | var(--md-accent-color) 39 | ); 40 | --md-text-on-accent: var(--md-white); 41 | --md-secondary-button-text: var(--md-white); 42 | --md-content-separator-color: color-mix( 43 | in srgb, 44 | #606164 90%, 45 | var(--md-accent-color) 46 | ); 47 | --md-selection-text-color: var(--md-text-on-accent); 48 | --md-selection-background-color: var(--md-accent-color); 49 | } 50 | } 51 | 52 | /* use variables when light mode */ 53 | @media (prefers-color-scheme: light) { 54 | :root, 55 | html, 56 | body { 57 | --md-accent-color: color-mix( 58 | in srgb, 59 | var(--md-grey-900) 15%, 60 | AccentColor 61 | ); 62 | --md-tab-background-color-hover: color-mix( 63 | in srgb, 64 | transparent 75%, 65 | var(--md-accent-color) 66 | ); 67 | --md-tab-opacity: 0.9; 68 | --md-background-color-0: color-mix( 69 | in srgb, 70 | #dee1e6 90%, 71 | var(--md-accent-color) 72 | ); 73 | --md-background-color-50: color-mix( 74 | in srgb, 75 | var(--md-grey-100) 90%, 76 | var(--md-accent-color) 77 | ); 78 | --md-background-color-100: color-mix( 79 | in srgb, 80 | var(--md-white) 90%, 81 | var(--md-accent-color) 82 | ); 83 | --md-menu-background-color-hover: color-mix( 84 | in srgb, 85 | var(--md-background-color-0) 90%, 86 | var(--md-accent-color) 87 | ); 88 | --md-menu-border-color: color-mix( 89 | in srgb, 90 | var(--md-background-color-0) 90%, 91 | var(--md-accent-color) 92 | ); 93 | --md-content-separator-color: color-mix( 94 | in srgb, 95 | #dbdcdd 90%, 96 | var(--md-accent-color) 97 | ); 98 | --md-secondary-button-text: var(--md-accent-color); 99 | --md-selection-text-color: var(--md-text-on-accent); 100 | --md-selection-background-color: var(--md-accent-color); 101 | } 102 | } 103 | } 104 | -------------------------------------------------------------------------------- /src/user-chrome/urlbar/_bookmarks-bar.scss: -------------------------------------------------------------------------------- 1 | // bookmark folder style 2 | #PlacesToolbarItems>.bookmark-item { 3 | --toolbarbutton-border-radius: 100px !important; 4 | padding: var(--bookmark-block-padding) 6px !important; 5 | } 6 | 7 | // bookmarks bar haight 8 | :root, 9 | #PersonalToolbar { 10 | --bookmarks-toolbar-overlapping-browser-heigh: max(36px, 2em) !important; 11 | } 12 | 13 | :root[BookmarksToolbarOverlapsBrowser] #PersonalToolbar { 14 | height: var(--bookmarks-toolbar-overlapping-browser-heigh) !important; 15 | } 16 | 17 | // bookmarks item haight 18 | #PersonalToolbar toolbarbutton { 19 | height: 28px !important; 20 | max-height: 28px !important; 21 | 22 | margin-top: 0 !important; 23 | margin-bottom: 0 !important; 24 | 25 | align-items: center !important; 26 | } 27 | 28 | #PersonalToolbar { 29 | align-items: center !important; 30 | } 31 | 32 | // centered bookmark item content 33 | #PlacesToolbar, 34 | #PlacesToolbarItems { 35 | align-items: center !important; 36 | height: 34px !important; 37 | margin-bottom: 2px !important; 38 | } 39 | 40 | #PlacesToolbarItems>.bookmark-item { 41 | display: flex !important; 42 | align-items: center !important; 43 | 44 | // remove top & btton padding to fix centered label position 45 | padding-top: 0px !important; 46 | padding-bottom: 0px !important; 47 | margin-bottom: 0 !important; 48 | margin-top: 0 !important; 49 | 50 | &>image { 51 | margin: auto 0; 52 | } 53 | 54 | &>label { 55 | margin-inline-start: 6px !important; 56 | margin-block: 0 !important; 57 | margin-inline: 0 !important; 58 | margin: auto 0; 59 | 60 | display: flex !important; 61 | align-items: center !important; 62 | 63 | height: 100% !important; 64 | } 65 | } 66 | 67 | // bookmarks bar left/right padding 68 | #PersonalToolbar { 69 | padding-inline: 4px !important; 70 | } 71 | 72 | // bookmart item max width (not in folder) 73 | toolbarbutton.bookmark-item:not(.subviewbutton) { 74 | max-width: 12em !important; // default: 13em 75 | } 76 | 77 | //fix margin for bookmark item in menu 78 | .toolbar-menupopup :is(menu, menuitem).bookmark-item { 79 | margin: 0 !important; 80 | } 81 | 82 | [dir="ltr"] { 83 | .toolbar-menupopup :is(menu, menuitem).bookmark-item { 84 | padding-left: 16px !important; 85 | } 86 | } 87 | 88 | [dir="rtl"] { 89 | .toolbar-menupopup :is(menu, menuitem).bookmark-item { 90 | padding-right: 16px !important; 91 | } 92 | } 93 | 94 | // bookmarks label font bolder 95 | .bookmark-item { 96 | label { 97 | @media (-moz-platform: windows) { 98 | font-weight: 500 !important; 99 | } 100 | 101 | @media (-moz-platform: macos) { 102 | font-size: 1.05rem !important; 103 | } 104 | } 105 | } 106 | 107 | // recolor like in chrome 108 | @include moz-pref-media("not userChrome.theme-default") { 109 | .bookmark-item { 110 | fill: get-var(text-secondary) !important; 111 | 112 | label { 113 | color: get-var("tab-label-color-inactive") !important; 114 | } 115 | } 116 | 117 | #PlacesChevron:not([collapsed]) .toolbarbutton-icon { 118 | fill: get-var(icon-color-secondary) !important; 119 | } 120 | } 121 | 122 | // make folder icon size bigger like in chrome 123 | #PlacesToolbarItems>.bookmark-item[container="true"]>image { 124 | transform: scale(1.15) !important; 125 | margin-inline-end: 8px !important; 126 | } 127 | 128 | // smaller "Show more bookmarks" icon 129 | #PlacesChevron:not([collapsed]) .toolbarbutton-icon { 130 | width: calc(2 * var(--toolbarbutton-inner-padding) + 12px) !important; 131 | } -------------------------------------------------------------------------------- /src/user-chrome/components/_menupopup.scss: -------------------------------------------------------------------------------- 1 | // popup menu shortcuts gray if not mouseover 2 | .toolbarbutton-1, 3 | .subviewbutton, 4 | .widget-overflow-list .toolbarbutton-1, 5 | .toolbaritem-combined-buttons:is( 6 | :not([cui-areatype="toolbar"]), 7 | [overflowedItem="true"] 8 | ) 9 | > toolbarbutton { 10 | &:not([disabled]) { 11 | &[shortcut]::after { 12 | color: get-var("text-disabled") !important; 13 | } 14 | 15 | &:hover[shortcut]::after { 16 | color: inherit !important; 17 | } 18 | } 19 | 20 | &[disabled] { 21 | &[shortcut]::after { 22 | color: get-var("text-disabled") !important; 23 | } 24 | 25 | &:hover[shortcut]::after { 26 | color: get-var("text-disabled") !important; 27 | } 28 | } 29 | } 30 | 31 | // also for #toolbar-menubar 32 | menuitem:not([disabled]) { 33 | .menu-accel, 34 | .menu-iconic-accel { 35 | color: get-var("text-secondary") !important; 36 | } 37 | 38 | &:hover { 39 | .menu-accel, 40 | .menu-iconic-accel { 41 | color: inherit !important; 42 | } 43 | } 44 | } 45 | 46 | menuitem[disabled] { 47 | .menu-accel, 48 | .menu-iconic-accel { 49 | color: get-var("text-secondary") !important; 50 | } 51 | 52 | &:hover { 53 | .menu-accel, 54 | .menu-iconic-accel { 55 | color: get-var("text-secondary") !important; 56 | } 57 | } 58 | } 59 | 60 | // separator style 61 | #widget-overflow-mainView > toolbarseparator, 62 | #widget-overflow-mainView > .panel-subview-body > toolbarseparator, 63 | .PanelUI-subView toolbarseparator, 64 | #unified-extensions-panel toolbarseparator, 65 | #permission-popup-mainView > toolbarseparator, 66 | #editBookmarkPanel toolbarseparator, 67 | #downloadsFooterButtons > toolbarseparator, 68 | .cui-widget-panel toolbarseparator { 69 | margin: 0.4em 4px !important; 70 | } 71 | // menuseparator { 72 | // border-top: 1px solid !important; 73 | // border-color: get-var("menu-border-color") !important; 74 | // } 75 | 76 | toolbarbutton menupopup[placespopup] menuseparator::before { 77 | border-top: 1px solid !important; 78 | border-color: get-var("menu-border-color") !important; 79 | } 80 | 81 | // popup drop shadow 82 | @media (-moz-platform: windows) { 83 | menupopup, 84 | panel:not(#autoscroller) { 85 | --panel-shadow-margin: 12px !important; 86 | } 87 | } 88 | 89 | menupopup, 90 | panel:not(#autoscroller) { 91 | --panel-shadow: #{get-var("elevation-2")} !important; 92 | } 93 | 94 | dialog, 95 | .dialogBox { 96 | .titleIcon { 97 | background-color: transparent !important; 98 | } 99 | } 100 | 101 | // menupopup and panel border width 102 | @media (prefers-color-scheme: dark) { 103 | *[part="content"] { 104 | border-width: 2px !important; 105 | } 106 | } 107 | 108 | // -------- 109 | // Context menu icons 110 | // Customize Toolbar… icon 111 | // menuitem.viewCustomizeToolbar { 112 | // background-image: get-var("edit-icon") !important; 113 | // background-size: 16px !important; 114 | // background-repeat: no-repeat !important; 115 | // background-position: left 1em center !important; 116 | // -moz-context-properties: fill !important; 117 | // fill: get-var("icon-color-primary") !important; 118 | // } 119 | 120 | // [dir="rtl"] { 121 | // menuitem.viewCustomizeToolbar { 122 | // background-position: right 1em center !important; 123 | // } 124 | // } 125 | // -------- 126 | 127 | @media (-moz-platform: windows) { 128 | // context menu padding inline start 129 | menupopup { 130 | menuitem:not(.menuitem-iconic, [checked="true"]), 131 | menu:not(.menu-iconic) { 132 | padding-inline-start: 36px !important; 133 | } 134 | } 135 | } 136 | -------------------------------------------------------------------------------- /src/user-chrome/global/_buttons-ripple-effect.scss: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | --toolbarbutton-border-radius: 50% !important; 4 | --#{$prefix}-circle-size: 0; 5 | } 6 | 7 | html, 8 | body { 9 | --#{$prefix}-circle-icon: url("icons/circle-dark.svg"); 10 | } 11 | 12 | @media (prefers-color-scheme: light) { 13 | 14 | html, 15 | body { 16 | --#{$prefix}-circle-icon: url("icons/circle.svg"); 17 | } 18 | } 19 | 20 | // regular style for buttons 21 | @mixin ripple-effect { 22 | place-content: center !important; 23 | place-items: center !important; 24 | background-image: get-var("circle-icon"), get-var("circle-icon") !important; 25 | background-position: 50% !important; 26 | background-repeat: no-repeat !important; 27 | background-size: get-var("circle-size") !important; 28 | border-radius: var(--toolbarbutton-border-radius) !important; 29 | 30 | transition-property: background-size, background-color !important; 31 | transition-duration: get-var("short-duration"), get-var("short-duration") !important; 32 | transition-timing-function: get-var("fade-in-out"), ease !important; 33 | 34 | @include moz-pref-media("userChrome.ui-no-ripple") { 35 | transition-duration: 0ms, get-var("short-duration") !important; 36 | } 37 | } 38 | 39 | // add style for buttons 40 | @mixin ripple-effect-for-button { 41 | @include ripple-effect(); 42 | 43 | &:is(:active:hover, [checked], [open]):not([disabled]) { 44 | --#{$prefix}-circle-size: 100%; 45 | } 46 | 47 | &:hover { 48 | background-color: get-var("control-background-color") !important; 49 | } 50 | } 51 | 52 | // add style for exception buttons, for icon or badge-stack selectors 53 | @mixin ripple-effect-for-icon { 54 | &> :is(.toolbarbutton-icon, .toolbarbutton-badge-stack) { 55 | @include ripple-effect(); 56 | } 57 | 58 | &:is(:active:hover, [checked], [open]):not([disabled])> :is(.toolbarbutton-icon, .toolbarbutton-badge-stack) { 59 | --#{$prefix}-circle-size: 100%; 60 | } 61 | 62 | &:not([disabled], #tabs-newtab-button, #new-tab-button):hover> :is(.toolbarbutton-icon, .toolbarbutton-badge-stack) { 63 | background-color: get-var("control-background-color") !important; 64 | } 65 | } 66 | 67 | // effect for url bar buttons, tab scroll buttons & bookmarkbar 68 | // #PlacesChevron:not([collapsed]), 69 | #PlacesToolbarItems>.bookmark-item, 70 | :is(.identity-box-button, 71 | #notification-popup-box, 72 | #tracking-protection-icon-container, 73 | #pageActionButton, 74 | #urlbar-zoom-button, 75 | .urlbar-page-action, 76 | // #scrollbutton-up, 77 | // #scrollbutton-down, 78 | .tab-close-button, 79 | .tab-icon-overlay):not([disabled]) { 80 | @include ripple-effect-for-button(); 81 | } 82 | 83 | // effect for other nav bar buttons 84 | .findbar-find-next, 85 | .findbar-find-previous, 86 | .findbar-closebutton, 87 | .toolbarbutton-1:not(#alltabs-button) { 88 | @include ripple-effect-for-icon(); 89 | } 90 | 91 | // hide default findbar buttons hover background 92 | .findbar-find-next, 93 | .findbar-find-previous, 94 | .findbar-closebutton { 95 | &:hover { 96 | background: transparent !important; 97 | } 98 | } 99 | 100 | // 101 | @include moz-pref-media("not userChrome.theme-default") { 102 | @include moz-pref-media("userChrome.ui-chrome-refresh") { 103 | 104 | html, 105 | body { 106 | --#{$prefix}-circle-icon-refresh: url("icons/circle-refresh.svg"); 107 | } 108 | 109 | #tabs-newtab-button, 110 | #new-tab-button { 111 | @include ripple-effect-for-icon(); 112 | 113 | &> :is(.toolbarbutton-icon, .toolbarbutton-badge-stack) { 114 | background-image: get-var("circle-icon-refresh"), 115 | get-var("circle-icon-refresh") !important; 116 | } 117 | } 118 | } 119 | } -------------------------------------------------------------------------------- /src/user-chrome/urlbar/_urlbar.scss: -------------------------------------------------------------------------------- 1 | // Main URL bar wrapper with paddings 2 | #urlbar-container { 3 | --urlbar-container-height: 42px !important; 4 | } 5 | 6 | // Just URL bar without top and bottom paddings 7 | #urlbar { 8 | --urlbar-height: 34px !important; 9 | --urlbar-toolbar-height: 42px !important; 10 | } 11 | 12 | html, 13 | body { 14 | --urlbar-min-height: 34px !important; // Minimum Height 15 | --toolbarbutton-height: 34px !important; // Button Height 16 | --toolbarbutton-inner-padding: 6px !important; // Button Inner Padding 17 | --urlbar-icon-border-radius: 100px !important; // Icon Border Radius 18 | --toolbarbutton-border-radius: 100px !important; // Button Border Radius 19 | --urlbar-container-padding: 2px !important; // Container Padding 20 | } 21 | 22 | // Fix Icons sizes after URL Bar Size Change 23 | .identity-box-button, 24 | #notification-popup-box, 25 | #tracking-protection-icon-container, 26 | .urlbar-page-action, 27 | #urlbar-go-button, 28 | .search-go-button { 29 | width: auto !important; 30 | height: calc(var(--urlbar-height) - var(--urlbar-container-padding) * 2) !important; 31 | border-radius: var(--urlbar-icon-border-radius) !important; 32 | padding: 0 8px !important; 33 | -moz-box-pack: center !important; 34 | align-items: center !important; 35 | justify-content: center !important; 36 | } 37 | 38 | #notification-popup-box { 39 | padding: 0 !important; 40 | } 41 | 42 | .notification-anchor-icon { 43 | padding: 0 !important; 44 | } 45 | 46 | #urlbar { 47 | &[open] { 48 | 49 | #urlbar-background, 50 | .urlbar-background, 51 | #searchbar { 52 | border-radius: 16px !important; 53 | border: none !important; 54 | box-shadow: get-var("elevation-4") !important; 55 | 56 | @media (prefers-color-scheme: light) { 57 | box-shadow: get-var("elevation-3") !important; 58 | } 59 | } 60 | } 61 | 62 | &:not([open])[focused] { 63 | 64 | #urlbar-background, 65 | .urlbar-background, 66 | #searchbar { 67 | box-shadow: none !important; 68 | } 69 | } 70 | } 71 | 72 | // Fix URL Input Font Size 73 | #urlbar-input, 74 | #urlbar, 75 | #searchbar { 76 | font: unset !important; 77 | font-size: 14px !important; 78 | } 79 | 80 | @include moz-pref-media("not userChrome.theme-default") { 81 | #urlbar:is([open], [focused]) { 82 | 83 | #urlbar-background, 84 | .urlbar-background, 85 | #searchbar { 86 | background-color: get-var("urlbar-background-color-open") !important; 87 | } 88 | } 89 | } 90 | 91 | // hide url bar search input placeholder if focused 92 | #urlbar:is([open], [focused]) { 93 | #urlbar-input::placeholder { 94 | color: transparent !important; 95 | } 96 | } 97 | 98 | .searchbar-textbox:focus::placeholder { 99 | color: transparent !important; 100 | } 101 | 102 | // remove theme navbar top border 103 | #nav-bar { 104 | box-shadow: none !important; 105 | border-top: none !important; 106 | } 107 | 108 | // nav bar bottom content separator border 109 | #navigator-toolbox { 110 | // border-bottom: 1px solid var(--chrome-content-separator-color); 111 | border-bottom: 1px solid get-var("content-separator-color") !important; 112 | } 113 | 114 | // Url bar bg color change on hover, feat: https://github.com/edelvarden/material-fox-updated/issues/69 115 | #urlbar-background, 116 | .urlbar-background, 117 | #searchbar { 118 | transition-property: background-color !important; 119 | transition-duration: get-var("short-duration") !important; 120 | transition-timing-function: get-var("point-to-point") !important; 121 | } 122 | 123 | #urlbar:not([focused]):hover #urlbar-background, 124 | #urlbar:not([focused]):hover .urlbar-background, 125 | #searchbar:hover { 126 | background-color: get-var("urlbar-background-color-hover") !important; 127 | } 128 | 129 | #urlbar:is([open], [focused]) #urlbar-background, 130 | #urlbar:is([open], [focused]) .urlbar-background { 131 | transition-duration: 0s !important; 132 | } -------------------------------------------------------------------------------- /src/user-chrome/urlbar/_urlbar-buttons.scss: -------------------------------------------------------------------------------- 1 | // change icons position 2 | #urlbar-input-container { 3 | display: flex !important; 4 | align-items: center !important; 5 | } 6 | 7 | #urlbar-zoom-button { 8 | order: 100 !important; 9 | } 10 | 11 | #page-action-buttons { 12 | order: 99 !important; 13 | } 14 | 15 | #tracking-protection-icon-container { 16 | order: 98 !important; 17 | } 18 | 19 | .urlbar-input-box { 20 | flex: 1 1 auto !important; 21 | } 22 | 23 | // URL icons 24 | #identity-box, 25 | #tracking-protection-icon-container, 26 | #notification-popup-box, 27 | .urlbar-icon:not(#star-button[starred], #tracking-protection-icon-box[active]) { 28 | fill: get-var("icon-color-secondary") !important; 29 | color: get-var("text-primary") !important; 30 | } 31 | 32 | // URL popup icons 33 | #identity-popup, 34 | #permission-popup, 35 | #protections-popup, 36 | .popup-notification-icon, 37 | .permission-popup-permission-icon, 38 | .subviewbutton-iconic:not([class*="identity-color-"]) > .toolbarbutton-icon { 39 | fill: get-var("icon-color-secondary") !important; 40 | } 41 | 42 | #urlbar { 43 | &[open] { 44 | #page-action-buttons, 45 | #tracking-protection-icon-container { 46 | display: none !important; 47 | } 48 | } 49 | } 50 | 51 | // Centered URL icons 52 | .urlbar-page-action { 53 | -moz-box-align: center !important; 54 | align-items: center !important; 55 | } 56 | #urlbar-input-container:not([pageproxystate="invalid"]) { 57 | .urlbar-page-action { 58 | &:not([hidden]) { 59 | display: grid !important; 60 | align-content: center !important; 61 | } 62 | } 63 | } 64 | 65 | // protections-popup-tp-switch color 66 | .protections-popup-tp-switch::before { 67 | background-color: get-var("text-on-accent") !important; 68 | } 69 | 70 | // fix background for "Firefox" box in urlbar container 71 | #identity-box[pageproxystate="valid"].notSecureText > .identity-box-button, 72 | #identity-box[pageproxystate="valid"].chromeUI > .identity-box-button, 73 | #identity-box[pageproxystate="valid"].extensionPage > .identity-box-button, 74 | #urlbar-label-box { 75 | // background-color: var(--urlbar-box-bgcolor); // Default 76 | background-color: transparent !important; 77 | 78 | &:hover { 79 | background-color: get-var("control-background-color") !important; 80 | outline-color: get-var("control-border-color") !important; 81 | } 82 | } 83 | 84 | // remove unnecessary right space from shield icon button (like chrome) 85 | #identity-box { 86 | // margin-inline-end: var(--identity-box-margin-inline); // default 87 | margin-inline-end: 0 !important; 88 | } 89 | 90 | // fix "Not secure" doesn’t fit into pill shape correctly (#118) 91 | #identity-box[pageproxystate="valid"]:is(.extensionPage, .notSecure, .notSecureText, .mixedActiveContent, .httpsOnlyErrorPage, .weakCipher, .mixedDisplayContent, .mixedDisplayContentLoadedActiveBlocked, .certUserOverridden, #identity-box[pageproxystate="valid"].certErrorPage) #identity-icon-box.identity-box-button { 92 | padding-inline: 8px !important; 93 | } 94 | 95 | #identity-icon-label { 96 | font-family: 500 !important; 97 | } 98 | 99 | // hide left border for menu button 100 | #PanelUI-button { 101 | border: none !important; 102 | border-inline: none !important; 103 | } 104 | 105 | // hide right border for identity box button 106 | #identity-icon-box { 107 | &::after, 108 | &::before { 109 | display: none !important; 110 | } 111 | } 112 | 113 | // disable refresh button animation 114 | #nav-bar-customization-target { 115 | align-items: center; 116 | } 117 | 118 | #reload-button, 119 | #stop-button { 120 | .toolbarbutton-icon { 121 | fill: inherit !important; 122 | } 123 | 124 | .toolbarbutton-animatable-box { 125 | display: none !important; 126 | } 127 | } 128 | 129 | @include moz-pref-media("not userChrome.theme-default") { 130 | #urlbar-searchmode-switcher, 131 | #urlbar-searchmode-switcher[open], 132 | #urlbar-searchmode-switcher[open]:hover { 133 | background-color: get-var(background-color-100) !important; 134 | } 135 | 136 | } 137 | -------------------------------------------------------------------------------- /src/user-chrome/urlbar/_urlbar-suggestions.scss: -------------------------------------------------------------------------------- 1 | // urlbar suggestions 2 | .urlbarView { 3 | margin: 0 !important; 4 | width: 100% !important; 5 | border-inline: none !important; 6 | } 7 | 8 | // urlbar suggestions item 9 | .urlbarView-row { 10 | border-radius: 0px !important; 11 | border: none !important; 12 | border-left: solid 5px transparent !important; 13 | border-top-right-radius: 4px !important; 14 | border-bottom-right-radius: 4px !important; 15 | } 16 | 17 | @include moz-pref-media("not userChrome.theme-default") { 18 | 19 | // urlbar suggestions item 20 | .urlbarView-row { 21 | &[selected] { 22 | border-left-color: get-var("accent-color") !important; 23 | background-color: get-var("menu-background-color-hover") !important; 24 | } 25 | 26 | &:not([selected]):hover { 27 | border-left-color: get-var("menu-background-color-hover") !important; 28 | background-color: get-var("menu-background-color-hover") !important; 29 | } 30 | } 31 | } 32 | 33 | [dir="rtl"] { 34 | .urlbarView-row { 35 | border-left-width: 0px !important; // hide left border 36 | 37 | border-right: solid 5px transparent !important; 38 | border-top-left-radius: 4px !important; 39 | border-bottom-left-radius: 4px !important; 40 | } 41 | } 42 | 43 | // urlbar suggestions item url 44 | .urlbarView-url { 45 | color: var(--color-accent-primary) !important; 46 | } 47 | 48 | @include moz-pref-media("not userChrome.theme-default") { 49 | [dir="rtl"] { 50 | .urlbarView-row { 51 | &[selected] { 52 | border-right-color: get-var("accent-color") !important; 53 | } 54 | 55 | &:not([selected]):hover { 56 | border-right-color: get-var("menu-background-color-hover") !important; 57 | } 58 | } 59 | } 60 | 61 | // urlbar suggestions item url 62 | .urlbarView-url { 63 | color: get-var("accent-color") !important; 64 | } 65 | } 66 | 67 | // urlbar suggestions item left/right padding 68 | .urlbarView-row { 69 | padding: 0 9px !important; 70 | } 71 | 72 | // urlbar suggestions item top/bottom padding 73 | .urlbarView-row-inner { 74 | padding-block: 9px !important; 75 | } 76 | 77 | // hide "This time, search with" bottom panel 78 | .search-one-offs { 79 | display: none !important; 80 | } 81 | 82 | // added url bar suggestions container padding 83 | .urlbarView-results { 84 | padding-block: 0 8px !important; 85 | } 86 | 87 | .urlbarView[noresults="true"] // if no results 88 | 89 | { 90 | .urlbarView-results { 91 | padding-block: 0 !important; 92 | } 93 | } 94 | 95 | // remove unnecessary border upper url bar suggestions 96 | #urlbar[open]>.urlbarView>.urlbarView-body-outer>.urlbarView-body-inner { 97 | border-color: transparent !important; 98 | } 99 | 100 | // urlbar suggestions item height 101 | .urlbarView-row-inner { 102 | // min-height: 20px; // (Default) Height with margins equals 38px 103 | min-height: 22px; // Height with margins equals 40px 104 | } 105 | 106 | // hide group titles (eg., Firefox Suggest, Firefox Extension) 107 | .urlbarView-row[label] { 108 | &::before { 109 | display: none !important; 110 | } 111 | 112 | // and remove reserved padding for group titles 113 | margin-block-start: 0 !important; 114 | } 115 | 116 | // set secondary text color 117 | .urlbarView-title-separator, 118 | .urlbarView-action { 119 | color: get-var("text-secondary") !important; 120 | } 121 | 122 | // hide unwanted suggestions (eg., Firefox Extension and other promotion or recommended items with large height) 123 | // .urlbarView-row[type="dynamic"] { 124 | // display: none !important; 125 | // } 126 | 127 | // hide go buttons for search fields, because if you want use the mouse you can click on first item for search 128 | #urlbar-go-button, 129 | .search-go-button { 130 | display: none !important; 131 | } 132 | 133 | // crop the background of item which out of the results block on hover 134 | .urlbarView-body-outer, 135 | .urlbarView-body-inner { 136 | border-bottom-left-radius: 16px !important; 137 | border-bottom-right-radius: 16px !important; 138 | overflow: hidden !important; 139 | } 140 | 141 | // fix urlbar search tag height 142 | #urlbar-search-mode-indicator { 143 | height: 100% !important; 144 | } -------------------------------------------------------------------------------- /src/user-chrome/new-tabbar-feature/_nav-bar.scss: -------------------------------------------------------------------------------- 1 | // nav bar top right and top left rounded corners 2 | #nav-bar { 3 | border-radius: 7px 7px 0 0 !important; 4 | } 5 | 6 | // remove rounded corners for popup windows 7 | #main-window[chromehidden="menubar toolbar directories extrachrome "] { 8 | #nav-bar { 9 | border-radius: 0 !important; 10 | } 11 | } 12 | 13 | // chrome refresh lock icon style 14 | @include moz-pref-media("not userChrome.ui-compact-url-bar") { 15 | 16 | // lock (secure) 17 | #identity-box[pageproxystate="valid"] { 18 | &:is(.verifiedDomain, .mixedActiveBlocked) #identity-icon { 19 | list-style-image: get-var("page-info") !important; 20 | } 21 | } 22 | 23 | #identity-box { 24 | padding-bottom: 2px !important; 25 | padding-top: 2px !important; 26 | margin-inline-end: 4px !important; 27 | margin-inline-start: 2px !important; 28 | 29 | @include moz-pref-media("not userChrome.ui-force-old-icons") { 30 | fill: get-var(icon-color-primary) !important; 31 | } 32 | } 33 | 34 | #identity-icon-box { 35 | min-width: 24px !important; 36 | } 37 | 38 | // remove box side paddings 39 | #identity-box:not(.chromeUI):not(.extensionPage) { 40 | #identity-icon-box.identity-box-button { 41 | padding-inline: unset !important; 42 | } 43 | } 44 | 45 | // for icon box middle position 46 | :is(#identity-icon-box, #identity-permission-box).identity-box-button, 47 | #notification-popup-box, 48 | #urlbar-go-button, 49 | .search-go-button { 50 | // height: unset !important; 51 | max-height: 24px !important; 52 | } 53 | 54 | #identity-box { 55 | align-items: center !important; 56 | } 57 | 58 | // correct permissions icon position 59 | #identity-permission-box.identity-box-button { 60 | padding-inline: 4px !important; 61 | } 62 | 63 | #identity-icon-box { 64 | background-color: get-var(background-color-100) !important; 65 | } 66 | 67 | #identity-box[pageproxystate="valid"].notSecureText>.identity-box-button, 68 | #identity-box[pageproxystate="valid"].chromeUI>.identity-box-button, 69 | #identity-box[pageproxystate="valid"].extensionPage>.identity-box-button, 70 | #urlbar-label-box { 71 | background-color: get-var(background-color-100) !important; 72 | } 73 | } 74 | 75 | // ---------------------------------------------------------------- 76 | // * (Temporary disabled) New Nav Bar style 77 | 78 | // #nav-bar { 79 | // min-height: 46px !important; 80 | // max-height: 46px !important; 81 | // } 82 | 83 | // html, 84 | // body { 85 | 86 | // --toolbarbutton-inner-padding: 9px !important; // Button Inner Padding 87 | 88 | // --toolbarbutton-outer-padding: 1px !important; // gap between nav buttons 89 | // --toolbar-start-end-padding: 5px !important; // first button left and last button right padding 90 | 91 | // } 92 | 93 | // #nav-bar { 94 | // display: flex !important; 95 | // align-items: center !important; 96 | 97 | // .toolbarbutton-1 { 98 | // min-height: 34px !important; 99 | // max-height: 34px !important; 100 | // min-width: 34px !important; 101 | 102 | // place-content: center !important; 103 | // place-items: center !important; 104 | // align-items: center !important; 105 | // justify-content: center !important; 106 | 107 | // &>stack, &>image { 108 | // min-height: 34px !important; 109 | // max-height: 34px !important; 110 | // min-width: 34px !important; 111 | 112 | // place-content: center !important; 113 | // place-items: center !important; 114 | // align-items: center !important; 115 | // justify-content: center !important; 116 | // } 117 | // } 118 | 119 | // :is(.toolbarbutton-1, #home-button, #reload-button, #stop-button) > :is(stack, image){ 120 | // padding: 9px !important; 121 | // } 122 | 123 | // #home-button { 124 | // .toolbarbutton-icon{ 125 | // padding: 9px !important; 126 | // } 127 | // } 128 | 129 | // #reload-button, #stop-button { 130 | // .toolbarbutton-icon{ 131 | // padding: 7px !important; 132 | // } 133 | // } 134 | 135 | // #unified-extensions-button{ 136 | // .toolbarbutton-icon{ 137 | // padding: 7px !important; 138 | // } 139 | // } 140 | 141 | // #developer-button { 142 | // .toolbarbutton-icon{ 143 | // padding: 7px !important; 144 | // } 145 | // } 146 | 147 | // #PanelUI-button { 148 | // display: flex !important; 149 | // align-items: center !important; 150 | // } 151 | // } -------------------------------------------------------------------------------- /src/user-chrome/new-tabbar-feature/_tab.scss: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | --tab-min-height: 40px !important; 4 | --tab-vertical-padding: 6px; 5 | --tab-horizontal-padding: 3px; 6 | } 7 | 8 | .tabbrowser-tab, 9 | .tabbrowser-tab[pinned] { 10 | .tab-stack { 11 | min-height: var(--tab-min-height) !important; 12 | max-height: var(--tab-min-height) !important; 13 | } 14 | } 15 | 16 | .tab-background { 17 | margin-top: var(--tab-vertical-padding) !important; 18 | min-height: calc(var(--tab-min-height) - var(--tab-vertical-padding)) !important; 19 | max-height: calc(var(--tab-min-height) - var(--tab-vertical-padding)) !important; 20 | } 21 | 22 | .tab-background { 23 | 24 | &::before, 25 | &::after { 26 | min-width: 12px !important; 27 | max-width: 12px !important; 28 | min-height: 12px !important; 29 | max-height: 12px !important; 30 | } 31 | 32 | &::before { 33 | border-bottom-right-radius: 12px !important; 34 | transform: translateX(-12px) !important; 35 | box-shadow: none !important; 36 | } 37 | 38 | &::after { 39 | border-bottom-left-radius: 12px !important; 40 | transform: translateX(12px) !important; 41 | box-shadow: none !important; 42 | } 43 | } 44 | 45 | .tabbrowser-tab[pinned] { 46 | max-width: calc(40px + var(--tab-horizontal-padding)) !important; 47 | min-width: calc(40px + var(--tab-horizontal-padding)) !important; 48 | 49 | .tab-content { 50 | place-content: center !important; 51 | place-items: center !important; 52 | justify-content: center !important; 53 | } 54 | } 55 | 56 | .tab-background { 57 | border-radius: 11px !important; 58 | 59 | margin-top: var(--tab-vertical-padding) !important; 60 | margin-bottom: 0px !important; 61 | margin-left: var(--tab-horizontal-padding) !important; 62 | margin-right: var(--tab-horizontal-padding) !important; 63 | 64 | min-height: 28px !important; 65 | max-height: 28px !important; 66 | } 67 | 68 | // hover bg opacity for not selected tab 69 | .tabbrowser-tab:not([selected="true"]):hover, 70 | .tabbrowser-tab[multiselected]:not([selected="true"]) { 71 | .tab-background { 72 | margin-top: var(--tab-vertical-padding) !important; 73 | margin-bottom: var(--tab-vertical-padding) !important; 74 | margin-left: var(--tab-horizontal-padding) !important; 75 | margin-right: var(--tab-horizontal-padding) !important; 76 | 77 | min-height: 28px !important; 78 | max-height: 28px !important; 79 | 80 | &::before, 81 | &::after { 82 | box-shadow: none !important; 83 | } 84 | } 85 | } 86 | 87 | // hover bg opacity for not selected tab 88 | .tabbrowser-tab:not([selected="true"]):hover, 89 | .tabbrowser-tab[multiselected]:not([selected="true"]) { 90 | --tab-opacity: 1 !important; 91 | } 92 | 93 | // bg color and opacity for selected tab 94 | .tabbrowser-tab:is([visuallyselected], [selected]) { 95 | --tab-opacity: 1 !important; 96 | } 97 | 98 | // tab transition 99 | .tab-background { 100 | transition-property: opacity, background-color !important; 101 | transition-duration: get-var("medium-short-duration") !important; 102 | transition-timing-function: get-var("fast-invoke") !important; 103 | } 104 | 105 | .tabbrowser-tab:is([visuallyselected], [selected]) .tab-background { 106 | transition: none !important; 107 | 108 | &::before, 109 | &::after { 110 | transition: none !important; 111 | } 112 | } 113 | 114 | // selected tab style 115 | .tabbrowser-tab:is([visuallyselected], [selected]) .tab-background { 116 | min-height: 34px !important; 117 | max-height: 34px !important; 118 | 119 | border-bottom-left-radius: 0px !important; 120 | border-bottom-right-radius: 0px !important; 121 | 122 | &::before { 123 | box-shadow: 4px 4px 0 4px var(--tab-selected-bgcolor) !important; 124 | } 125 | 126 | &::after { 127 | box-shadow: -4px 4px 0 4px var(--tab-selected-bgcolor) !important; 128 | } 129 | } 130 | 131 | @include moz-pref-media("not userChrome.theme-default") { 132 | 133 | // hover bg opacity for not selected tab 134 | .tabbrowser-tab:not([selected="true"]):hover, 135 | .tabbrowser-tab[multiselected]:not([selected="true"]) { 136 | --tab-background-color: #{get-var("tab-background-color-hover")} !important; 137 | } 138 | 139 | // selected tab style 140 | .tabbrowser-tab:is([visuallyselected], [selected]) .tab-background { 141 | &::before { 142 | box-shadow: 4px 4px 0 4px var(--tab-background-color) !important; 143 | } 144 | &::after { 145 | box-shadow: -4px 4px 0 4px var(--tab-background-color) !important; 146 | } 147 | } 148 | } 149 | -------------------------------------------------------------------------------- /src/variables/_icons.scss: -------------------------------------------------------------------------------- 1 | $icons: ( 2 | // tabbar 3 | "no-src-icon": url("icons/no-src.svg"), 4 | "audio-icon": url("icons/audio.svg"), 5 | "audio-muted-icon": url("icons/audio-muted.svg"), 6 | "audio-blocked-icon": url("icons/audio-blocked.svg"), 7 | "close-tab-icon": url("icons/close-tab.svg"), 8 | "plus-icon": url("icons/plus.svg"), 9 | "keyboard-arrow-down-icon": url("icons/keyboard-arrow-down.svg"), 10 | "keyboard-arrow-up-icon": url("icons/keyboard-arrow-up.svg"), 11 | // navbar 12 | "arrow-back-icon": url("icons/arrow-back.svg"), 13 | "arrow-forward-icon": url("icons/arrow-forward.svg"), 14 | "refresh-icon": url("icons/refresh.svg"), 15 | "close-icon": url("icons/close.svg"), 16 | "home-icon": url("icons/home.svg"), 17 | "dev-icon": url("icons/dev.svg"), 18 | "menu-icon": url("icons/menu.svg"), 19 | "menu-update-icon": url("icons/menu-update.svg"), 20 | "extension-icon": url("icons/extension.svg"), 21 | "extension-blocked-icon": url("icons/extension-blocked.svg"), 22 | "download-icon": url("icons/download.svg"), 23 | "account-icon": url("icons/account.svg"), 24 | "side-panel-icon": url("icons/side-panel.svg"), 25 | "open-in-full-icon": url("icons/menu/open-in-full.svg"), 26 | "mail-icon": url("icons/mail.svg"), 27 | "glyphs-icon": url("icons/glyphs.svg"), 28 | "file-open-icon": url("icons/file-open.svg"), 29 | //urlbar 30 | "info-icon": url("icons/info.svg"), 31 | "lock-icon": url("icons/lock.svg"), 32 | "page-info": url("icons/page-info.svg"), 33 | "warning-icon": url("icons/warning.svg"), 34 | "properties-icon": url("icons/properties.svg"), 35 | "tracking-protection-icon": url("icons/tracking-protection.svg"), 36 | "star-icon": url("icons/star.svg"), 37 | //other 38 | "chevron-icon": url("icons/chevron.svg"), 39 | "folder-icon": url("icons/folder.svg"), 40 | "check-icon": url("icons/check.svg"), 41 | "edit-icon": url("icons/edit.svg"), 42 | "arrow-right-icon": url("icons/arrow-right.svg"), 43 | "arrow-down-icon": url("icons/arrow-down.svg"), 44 | "organization-icon": url("icons/organization.svg"), 45 | // menu 46 | "new-tab-icon": url("icons/new-tab.svg"), 47 | "new-window-icon": url("icons/new-window.svg"), 48 | "incognito-icon": url("icons/incognito.svg"), 49 | "history-icon": url("icons/history.svg"), 50 | "key-icon": url("icons/key.svg"), 51 | "print-icon": url("icons/print.svg"), 52 | "file-save-icon": url("icons/file-save.svg"), 53 | "find-icon": url("icons/find.svg"), 54 | "translate-icon": url("icons/translate.svg"), 55 | "settings-icon": url("icons/settings.svg"), 56 | "tools-icon": url("icons/tools.svg"), 57 | "help-icon": url("icons/help.svg"), 58 | "zoom-in-icon": url("icons/zoom-in.svg"), 59 | "exit-icon": url("icons/exit.svg"), 60 | "search-icon": url("icons/search.svg"), 61 | "multiaccountcontainer-icon": url("icons/multiaccountcontainer.svg"), 62 | "toolbar-icon": url("icons/toolbar.svg"), 63 | "bookmark-manager-icon": url("icons/bookmark-manager.svg"), 64 | "trash-icon": url("icons/trash.svg"), 65 | "task-manager-icon": url("icons/task-manager.svg"), 66 | "eyedropper-icon": url("icons/eyedropper.svg"), 67 | "devices-icon": url("icons/devices.svg"), 68 | "remote-icon": url("icons/remote.svg"), 69 | "code-icon": url("icons/code.svg"), 70 | "report-icon": url("icons/report.svg"), 71 | "feedback-icon": url("icons/feedback.svg"), 72 | "open-in-icon": url("icons/open-in.svg"), 73 | "extension-old-icon": url("icons/old/extension.svg"), 74 | // menu 75 | "copy-icon": url("icons/menu/copy.svg"), 76 | "select-all-icon": url("icons/menu/select-all.svg"), 77 | "screenshot-icon": url("icons/menu/screenshot.svg"), 78 | "cut-icon": url("icons/menu/cut.svg"), 79 | "paste-icon": url("icons/menu/paste.svg"), 80 | "undo-icon": url("icons/menu/undo.svg"), 81 | "redo-icon": url("icons/menu/redo.svg"), 82 | "pin-icon": url("icons/menu/pin.svg"), 83 | "unpin-icon": url("icons/menu/unpin.svg"), 84 | "tab-duplicate-icon": url("icons/menu/tab-duplicate.svg"), 85 | "tab-close-icon": url("icons/menu/tab-close.svg"), 86 | "link-icon": url("icons/menu/link.svg"), 87 | "link-off-icon": url("icons/menu/link-off.svg"), 88 | "share-icon": url("icons/menu/share.svg"), 89 | "reply-icon": url("icons/menu/reply.svg"), 90 | "swap-icon": url("icons/menu/swap.svg"), 91 | ); 92 | 93 | $icons-old: ( 94 | "audio-icon": url("icons/old/audio.svg"), 95 | "audio-muted-icon": url("icons/old/audio-muted.svg"), 96 | "audio-blocked-icon": url("icons/old/audio-blocked.svg"), 97 | //naav bar 98 | "home-icon": url("icons/old/home.svg"), 99 | "extension-icon": url("icons/old/extension.svg"), 100 | "page-info": url("icons/lock.svg"), 101 | "tracking-protection-icon": url("icons/old/tracking-protection.svg"), 102 | ); 103 | -------------------------------------------------------------------------------- /src/user-chrome/tabbar/_tab-sound-icon.scss: -------------------------------------------------------------------------------- 1 | .tabbrowser-tab { 2 | &[pinned] { 3 | &:is([soundplaying], [muted], [activemedia-blocked]) { 4 | .tab-icon-image { 5 | display: none !important; 6 | visibility: collapse !important; 7 | } 8 | 9 | .tab-icon-overlay { 10 | display: block !important; 11 | opacity: 1 !important; 12 | } 13 | } 14 | 15 | &:not([soundplaying], [muted], [activemedia-blocked]) { 16 | .tab-icon-overlay { 17 | display: none !important; 18 | visibility: collapse !important; 19 | } 20 | } 21 | } 22 | 23 | &:not([pinned]):is([soundplaying], [muted], [activemedia-blocked]) { 24 | .tab-label-container { 25 | z-index: -2 !important; 26 | } 27 | } 28 | } 29 | 30 | // default position for sound icon 31 | [dir="ltr"] { 32 | .tabbrowser-tab { 33 | // apply only for soundplaying not pinned tabs 34 | &:not([pinned]):is([soundplaying], [muted], [activemedia-blocked]) { 35 | // .tab-label, 36 | // .tab-icon-overlay { 37 | // margin-right: 9px !important; 38 | // inset-inline-end: -7px !important; 39 | // } 40 | 41 | // margin between favicon and text label 42 | .tab-icon-stack { 43 | margin-right: 18px !important; 44 | } 45 | 46 | // sound icon position 47 | .tab-icon-overlay { 48 | transform: translateX(20px) !important; 49 | // inset-inline-end: -7px !important; 50 | } 51 | 52 | // make more space for rtl text fade gradient 53 | &[labeldirection="rtl"] { 54 | .tab-icon-stack { 55 | margin-right: 20px !important; 56 | } 57 | } 58 | } 59 | } 60 | } 61 | 62 | // rtl position for sound icon 63 | [dir="rtl"] { 64 | .tabbrowser-tab { 65 | // set default margin as zero 66 | .tab-icon-stack { 67 | margin-left: 0 !important; 68 | } 69 | 70 | // apply only for soundplaying not pinned tabs 71 | &:not([pinned]):is([soundplaying], [muted], [activemedia-blocked]) { 72 | // margin between favicon and text label 73 | .tab-icon-stack { 74 | margin-left: 18px !important; 75 | } 76 | 77 | // sound icon position 78 | .tab-icon-overlay { 79 | transform: translateX(-20px) !important; 80 | // inset-inline-end: -7px !important; 81 | } 82 | 83 | // make more space for ltr text fade gradient 84 | &[labeldirection="ltr"] { 85 | .tab-icon-stack { 86 | margin-left: 20px !important; 87 | } 88 | } 89 | } 90 | } 91 | } 92 | 93 | .tab-content { 94 | position: relative !important; 95 | } 96 | 97 | .tab-icon-overlay { 98 | $icon-size: 16px; 99 | position: relative !important; 100 | display: block !important; 101 | border-radius: 100px !important; 102 | min-width: $icon-size !important; 103 | min-height: $icon-size !important; 104 | max-width: $icon-size !important; 105 | max-height: $icon-size !important; 106 | top: 0 !important; // fix middle position if pinned 107 | inset-inline-end: 0 !important; // fix space from the icon 108 | margin: 0 !important; 109 | padding: 0 !important; 110 | overflow: visible !important; 111 | 112 | margin-inline-end: 0px !important; // fix position for waterfox 113 | 114 | // fix opacity 115 | fill-opacity: 1 !important; 116 | 117 | &:not([pinned], [sharing], [crashed]):is( 118 | [soundplaying], 119 | [muted], 120 | [activemedia-blocked] 121 | ) { 122 | display: block !important; 123 | opacity: 1 !important; 124 | } 125 | } 126 | 127 | .tab-icon-image, 128 | .tab-icon-overlay { 129 | z-index: -1 !important; 130 | } 131 | 132 | .tab-icon-stack, 133 | .tab-label, 134 | .tab-icon-overlay { 135 | margin-right: 0 !important; 136 | transform: translateX(0) !important; 137 | inset-inline-end: 0px !important; 138 | 139 | transition-property: margin, transform, background-size, background-color !important; 140 | transition-duration: get-var("medium-duration"), get-var("medium-duration"), 141 | get-var("short-duration"), get-var("short-duration") !important; 142 | transition-timing-function: get-var("point-to-point"), 143 | get-var("point-to-point"), get-var("fade-in-out"), ease !important; 144 | } 145 | 146 | .tabbrowser-tab[pinned]:is([soundplaying], [muted], [activemedia-blocked]) { 147 | .tab-icon-stack { 148 | z-index: 2 !important; 149 | } 150 | } 151 | 152 | .tab-icon-image:not([pinned]) { 153 | opacity: 1 !important; 154 | } 155 | 156 | // fix colors for pinned tab icon 157 | #TabsToolbar .tab-icon-overlay:is([pinned], [sharing]):not([crashed]) { 158 | color: get-var("text-primary") !important; 159 | } 160 | 161 | // hide sound icon if not sound playing 162 | .tabbrowser-tab:not([soundplaying], [muted], [activemedia-blocked]) { 163 | .tab-icon-overlay { 164 | visibility: collapse !important; 165 | } 166 | } 167 | 168 | // little margin for tab close button 169 | [dir="ltr"] { 170 | .tabbrowser-tab[labeldirection="rtl"] { 171 | .tab-close-button { 172 | margin-left: 3px !important; 173 | } 174 | } 175 | } 176 | [dir="rtl"] { 177 | .tabbrowser-tab[labeldirection="ltr"] { 178 | .tab-close-button { 179 | margin-right: 3px !important; 180 | } 181 | } 182 | } 183 | 184 | // hide the new sound icon (to fix audio button duplication) 185 | .tab-audio-button { 186 | display: none !important; 187 | } 188 | -------------------------------------------------------------------------------- /src/user-chrome/_variables-local.scss: -------------------------------------------------------------------------------- 1 | @include moz-pref-media("not userChrome.theme-default") { 2 | 3 | // accent color vars 4 | :root, 5 | html, 6 | body, 7 | panel, 8 | toolbar { 9 | --lwt-brighttext-url-color: #{get-var("accent-color")} !important; 10 | --toolbarbutton-icon-fill-attention: #{get-var("accent-color")} !important; 11 | 12 | --panel-item-hover-bgcolor: #{get-var("menu-background-color-hover")} !important; 13 | } 14 | 15 | :root, 16 | :is(panel, toolbar, #urlbar, #searchbar) { 17 | --toolbar-field-icon-fill-attention: #{get-var("accent-color")} !important; 18 | } 19 | 20 | :root, 21 | html, 22 | body { 23 | --color-accent-primary: #{get-var("accent-color")} !important; 24 | accent-color: get-var("accent-color") !important; 25 | } 26 | 27 | :root, 28 | html, 29 | body { 30 | --panel-banner-item-info-icon-bgcolor: #{get-var("accent-color")} !important; 31 | --focus-outline-color: #{get-var("accent-color")} !important; 32 | --button-primary-active-bgcolor: #{get-var("accent-color")} !important; 33 | --button-primary-bgcolor: #{get-var("accent-color")} !important; 34 | --button-primary-hover-bgcolor: #{get-var("accent-color-hover")} !important; 35 | --toolbar-field-focus-border-color: #{get-var("accent-color")} !important; 36 | 37 | --link-color: #{get-var("accent-color")} !important; 38 | --link-color-hover: #{get-var("accent-color")} !important; 39 | --link-color-active: #{get-var("accent-color")} !important; 40 | --link-color-visited: #{get-var("accent-color")} !important; 41 | 42 | // secondary text color 43 | --text-color-deemphasized: #{get-var("text-secondary")} !important; 44 | } 45 | 46 | // shadow 47 | :root, 48 | html, 49 | body, 50 | menupopup, 51 | panel { 52 | --panel-border-color: #{get-var("menu-border-color")} !important; 53 | --panel-shadow: #{get-var("elevation-2")} !important; 54 | --windows-panel-box-shadow: #{get-var("elevation-2")} !important; 55 | } 56 | 57 | html, 58 | body { 59 | //---------------------------------------------------------------------- 60 | // -- Firefox vars 61 | // ---------------------------------------------------------------------- 62 | 63 | // gray-900 - 0% lt dark bg 64 | --lwt-accent-color: #{get-var("background-color-0")} !important; 65 | --toolbar-field-background-color: #{get-var("background-color-0")} !important; 66 | --toolbar-field-focus-background-color: #{get-var("background-color-0")} !important; 67 | --lwt-background-tab-separator-color: #{get-var("background-color-0")} !important; 68 | 69 | // grey-900-white-4-percent - 50% lt dark bg 70 | --arrowpanel-background: #{get-var("menu-background-color")} !important; 71 | --arrowpanel-border-color: #{get-var("menu-border-color")} !important; 72 | --panel-separator-color: #{get-var("menu-border-color")} !important; 73 | --lwt-selected-tab-background-color: #{get-var("background-color-50")} !important; 74 | --autocomplete-popup-highlight-background: #{get-var("background-color-50")} !important; 75 | --tabpanel-background-color: #{get-var("background-color-50")} !important; 76 | --toolbarseparator-color: #{get-var("background-color-50")} !important; 77 | --tab-icon-overlay-stroke: #{get-var("background-color-50")} !important; 78 | 79 | // grey-900-white-5-percent - 100% lt dark bg 80 | --toolbar-bgcolor: #{get-var("background-color-100")} !important; 81 | 82 | // grey-200 - primary text 83 | --arrowpanel-color: #{get-var("text-primary")} !important; 84 | --input-color: #{get-var("text-primary")} !important; 85 | --lwt-tab-text: #{get-var("text-primary")} !important; 86 | --lwt-text-color: #{get-var("text-primary")} !important; 87 | --toolbar-color: #{get-var("text-primary")} !important; 88 | --toolbar-field-color: #{get-var("text-primary")} !important; 89 | --toolbar-field-focus-color: #{get-var("text-primary")} !important; 90 | 91 | // text on accent 92 | --button-primary-color: #{get-var("text-on-accent")} !important; 93 | 94 | --autocomplete-popup-separator-color: #{get-var("menu-border-color")} !important; 95 | 96 | --button-active-bgcolor: #{get-var("control-background-color")} !important; 97 | --button-bgcolor: #{get-var("control-background-color")} !important; 98 | --button-hover-bgcolor: #{get-var("control-background-color")} !important; 99 | 100 | --chrome-content-separator-color: #{get-var("tab-outline-color")} !important; 101 | 102 | --panel-separator-zap-gradient: transparent !important; 103 | --tab-icon-overlay-fill: #{get-var("icon-color-secondary")} !important; 104 | --toolbar-field-border-color: transparent !important; 105 | --toolbarbutton-icon-fill: #{get-var("icon-color-primary")} !important; 106 | 107 | // opacity for url bar icons 108 | --urlbar-icon-fill-opacity: 1 !important; 109 | } 110 | 111 | :root, 112 | html, 113 | body, 114 | dialog { 115 | // primary button colors 116 | --in-content-primary-button-text-color: #{get-var("text-on-accent")} !important; 117 | --in-content-primary-button-background: #{get-var("accent-color")} !important; 118 | --in-content-primary-button-background-hover: #{get-var( 119 | "accent-color-hover" 120 | ) 121 | } 122 | 123 | !important; 124 | --in-content-primary-button-background-active: #{get-var("accent-color")} !important; 125 | } 126 | 127 | // Remove tab outline described in https://github.com/edelvarden/material-fox-updated/issues/62 128 | :root, 129 | html, 130 | body, 131 | .tab-background { 132 | --tab-selected-outline-color: transparent !important; 133 | } 134 | } -------------------------------------------------------------------------------- /src/user-chrome/tabbar/_titlebar.scss: -------------------------------------------------------------------------------- 1 | // accent color mix for title bar and url bar backgrounds 2 | @include moz-pref-media("not userChrome.theme-default") { 3 | 4 | #urlbar-background, 5 | .urlbar-background, 6 | #searchbar { 7 | background-color: get-var("background-color-50") !important; 8 | } 9 | 10 | // default titlebar background color, when not theme-material 11 | @include moz-pref-media("not userChrome.theme-material") { 12 | 13 | #navigator-toolbox, 14 | #toolbar-menubar, 15 | #TabsToolbar, 16 | #titlebar { 17 | background-color: get-var("background-color-0") !important; 18 | } 19 | } 20 | } 21 | 22 | 23 | // default dark mode styles 24 | @media (prefers-color-scheme: dark) { 25 | @include moz-pref-media("not userChrome.theme-default") { 26 | 27 | #urlbar-background, 28 | .urlbar-background, 29 | #searchbar { 30 | background-color: get-var("background-color-50") !important; 31 | } 32 | 33 | // default titlebar background color, when not theme-material 34 | @include moz-pref-media("not userChrome.theme-material") { 35 | 36 | #navigator-toolbox, 37 | #toolbar-menubar, 38 | #TabsToolbar, 39 | #titlebar { 40 | background-color: get-var("background-color-0") !important; 41 | } 42 | } 43 | } 44 | } 45 | 46 | // special light mode titlebar background color for theme-chrome-refresh or theme-material 47 | @media (prefers-color-scheme: light) { 48 | @include moz-pref-media("userChrome.theme-chrome-refresh or userChrome.theme-material") { 49 | 50 | #navigator-toolbox, 51 | #toolbar-menubar, 52 | #TabsToolbar, 53 | #titlebar { 54 | background-color: cm(get-var("background-color-50"), 55 | get-var("accent-color"), 56 | 0.2) !important; 57 | } 58 | 59 | #urlbar-background, 60 | .urlbar-background, 61 | #searchbar { 62 | background-color: cm(get-var("background-color-50"), 63 | get-var("accent-color"), 64 | 0.0333) !important; 65 | } 66 | } 67 | } 68 | 69 | // special dark mode titlebar color for theme-material 70 | @media (prefers-color-scheme: dark) { 71 | @include moz-pref-media("userChrome.theme-material") { 72 | 73 | #navigator-toolbox, 74 | #toolbar-menubar, 75 | #TabsToolbar, 76 | #titlebar { 77 | background-color: get-var(sys-color-surface-container-lowest) !important; 78 | background-image: linear-gradient(90deg, 79 | cm(transparent, get-var(sys-color-tertiary), 0.2) 0%, 80 | cm(transparent, get-var(sys-color-secondary), 0.2) 80%) !important; 81 | } 82 | } 83 | } 84 | 85 | // inactive titlebar background color 86 | @include moz-pref-media("not userChrome.theme-default") { 87 | :root:-moz-window-inactive { 88 | 89 | #navigator-toolbox, 90 | #toolbar-menubar, 91 | #TabsToolbar, 92 | #titlebar { 93 | background-color: get-var("background-color-50") !important; 94 | background-image: none !important; 95 | } 96 | } 97 | 98 | // special unfocused background color for chrome refresh 99 | @include moz-pref-media("userChrome.theme-chrome-refresh") { 100 | @media (prefers-color-scheme: dark) { 101 | :root:-moz-window-inactive { 102 | 103 | #navigator-toolbox, 104 | #toolbar-menubar, 105 | #TabsToolbar, 106 | #titlebar { 107 | background-color: #2b2b2b !important; 108 | } 109 | } 110 | } 111 | 112 | } 113 | } 114 | 115 | // restore tab opacity when window-inactive 116 | :root[tabsintitlebar] #titlebar { 117 | &:-moz-window-inactive { 118 | // opacity: var(--inactive-titlebar-opacity); 119 | opacity: 1 !important; 120 | } 121 | } 122 | 123 | // title bar buttons opacity when window-inactive 124 | @media (-moz-platform: windows) { 125 | :root:-moz-window-inactive #navigator-toolbox { 126 | .titlebar-buttonbox .titlebar-button { 127 | opacity: 0.5 !important; 128 | } 129 | 130 | .titlebar-buttonbox .titlebar-button:hover { 131 | opacity: 1 !important; 132 | } 133 | } 134 | } 135 | 136 | // hide tab spacers 137 | .titlebar-spacer:is([type="pre-tabs"], [type="post-tabs"]) { 138 | display: none !important; 139 | } 140 | 141 | // hide unwanted left tab bar separator 142 | #tabbrowser-tabs { 143 | border-inline-start: none !important; 144 | margin-inline-start: 0px !important; 145 | } 146 | 147 | // fix for firefox view button (black border under tab bar), see: https://github.com/edelvarden/material-fox-updated/issues/6 148 | #firefox-view-button { 149 | margin: 0 !important; 150 | } 151 | 152 | // also for other buttons which can be added to the title bar 153 | #TabsToolbar .toolbarbutton-1 { 154 | margin-bottom: 0 !important; 155 | } 156 | 157 | // remove unwanted opacity for tab bar when window inactive 158 | .browser-titlebar { 159 | :root[tabsintitlebar] & { 160 | &:-moz-window-inactive { 161 | opacity: 1 !important; 162 | } 163 | } 164 | } 165 | 166 | // fix first tab rounded edge cutoff 167 | scrollbox:is([orient="horizontal"], [smoothscroll="true"], [flex="1"]) { 168 | padding-inline-start: 12px !important; 169 | margin-inline-start: -12px !important; 170 | padding-inline-end: 12px !important; 171 | margin-inline-end: -12px !important; 172 | } 173 | 174 | // fix transparent background behind tab scroll buttons 175 | #scrollbutton-up { 176 | z-index: 999 !important; 177 | } 178 | 179 | #scrollbutton-down { 180 | z-index: 999 !important; 181 | } 182 | 183 | spacer:is([part="overflow-start-indicator"]) { 184 | margin-inline: 0px 6px !important; 185 | } 186 | 187 | spacer:is([part="overflow-end-indicator"]) { 188 | margin-inline: 6px 0px !important; 189 | } -------------------------------------------------------------------------------- /src/user-chrome/new-tabbar-feature/_tab-buttons.scss: -------------------------------------------------------------------------------- 1 | @media (-moz-platform: windows), 2 | (-moz-platform: linux) { 3 | 4 | // move all tabs button to the left 5 | #TabsToolbar-customization-target { 6 | display: flex !important; 7 | } 8 | 9 | #alltabs-button { 10 | order: 0 !important; 11 | } 12 | 13 | #tabbrowser-tabs { 14 | order: 98 !important; 15 | } 16 | 17 | #new-tab-button { 18 | order: 99 !important; 19 | } 20 | 21 | #tabbrowser-arrowscrollbox .tabbrowser-tab:is(:first-child) { 22 | margin-left: 0px !important; 23 | } 24 | 25 | // restore drag area 26 | #alltabs-button { 27 | margin: 0 !important; 28 | } 29 | 30 | .titlebar-buttonbox-container { 31 | --margin-left: 48px; 32 | margin: 0 0 0 var(--margin-left) !important; 33 | } 34 | 35 | [dir="rtl"] { 36 | .titlebar-buttonbox-container { 37 | margin: 0 var(--margin-left) 0 0 !important; 38 | } 39 | } 40 | } 41 | 42 | // all tabs button redesign 43 | #alltabs-button { 44 | // 40px - 3px horizontal margin = 37px 45 | min-width: 34px !important; 46 | max-width: 34px !important; 47 | min-height: 37px !important; 48 | max-height: 100% !important; 49 | 50 | // move to the top left corner 51 | justify-content: center !important; 52 | align-content: center !important; 53 | 54 | .toolbarbutton-badge-stack { 55 | // make the position pixel perfect, this is the top and left margin 56 | transform: translate(0px, 1px) !important; 57 | 58 | min-width: 28px !important; 59 | max-width: 28px !important; 60 | min-height: 28px !important; 61 | max-height: 28px !important; 62 | 63 | display: grid !important; 64 | align-content: center !important; 65 | place-content: center !important; 66 | place-items: center !important; 67 | justify-content: center !important; 68 | 69 | overflow: hidden !important; 70 | border-radius: 11px !important; 71 | } 72 | 73 | .toolbarbutton-icon { 74 | width: 16px !important; 75 | height: 16px !important; 76 | 77 | @media (-moz-platform: macos) { 78 | width: 18px !important; 79 | height: 18px !important; 80 | } 81 | } 82 | } 83 | 84 | [dir="rtl"] { 85 | #alltabs-button .toolbarbutton-badge-stack { 86 | // make the position pixel perfect, this is the top and left margin 87 | transform: translate(0px, 1px) !important; 88 | } 89 | } 90 | 91 | // first tab bar padding 92 | #TabsToolbar-customization-target { 93 | padding-inline-start: 3px !important; 94 | } 95 | 96 | @media (-moz-platform: macos) { 97 | #alltabs-button { 98 | margin-inline-end: 3px !important; 99 | } 100 | } 101 | 102 | // fix first tab left decorative corner cropping (`.tab-background::before`) 103 | @media (-moz-platform: windows) or (-moz-platform: linux) { 104 | .scrollbox-clip[orient="horizontal"]>scrollbox:nth-child(1) { 105 | padding-inline-start: 11px !important; 106 | margin-inline-start: -11px !important; 107 | } 108 | 109 | #alltabs-button { 110 | z-index: 1 !important; 111 | } 112 | 113 | #tabs-newtab-button { 114 | margin-inline-start: 0px !important; 115 | } 116 | } 117 | 118 | // all tabs button transition 119 | #alltabs-button .toolbarbutton-badge-stack { 120 | transition-property: background-color !important; 121 | transition-duration: get-var("short-duration") !important; 122 | transition-timing-function: get-var("fade-in-out") !important; 123 | } 124 | 125 | // make new tab button icon smaller 126 | #tabs-newtab-button, 127 | #new-tab-button { 128 | &> :is(.toolbarbutton-icon, .toolbarbutton-badge-stack) { 129 | width: 30px !important; 130 | height: 30px !important; 131 | padding: 8px !important; 132 | } 133 | } 134 | 135 | @include moz-pref-media("not userChrome.theme-default") { 136 | #alltabs-button { 137 | 138 | // default color 139 | .toolbarbutton-badge-stack { 140 | background-color: cm(get-var("background-color-100"), 141 | get-var("accent-color"), 142 | 0.1333) !important; 143 | 144 | @media (prefers-color-scheme: dark) { 145 | background-color: get-var("background-color-100") !important; 146 | } 147 | } 148 | 149 | // on hover 150 | &:not(:active, [open="true"]):hover { 151 | .toolbarbutton-badge-stack { 152 | background-color: get-var("tab-background-color-hover") !important; 153 | } 154 | } 155 | 156 | // when open/active 157 | &:active:hover, 158 | &[open="true"] { 159 | .toolbarbutton-badge-stack { 160 | background-color: cm(transparent, 161 | get-var("accent-color-hover"), 162 | 0.6) !important; 163 | 164 | @media (prefers-color-scheme: dark) { 165 | background-color: get-var(alltabs-background-color-open) !important; 166 | } 167 | } 168 | } 169 | } 170 | 171 | // when window inactive 172 | :root:-moz-window-inactive #navigator-toolbox { 173 | #alltabs-button .toolbarbutton-badge-stack { 174 | background-color: get-var("background-color-100") !important; 175 | } 176 | } 177 | } 178 | 179 | @include moz-pref-media("not userChrome.theme-default") { 180 | 181 | #tabs-newtab-button, 182 | #new-tab-button { 183 | &:not([disabled]):hover> :is(.toolbarbutton-icon, .toolbarbutton-badge-stack) { 184 | background-color: get-var("tab-background-color-hover") !important; 185 | } 186 | 187 | fill: get-var("icon-color-secondary") !important; 188 | } 189 | } 190 | 191 | // increase close button padding when visible 192 | .tab-content { 193 | padding-inline-end: 15px !important; 194 | 195 | #tabbrowser-tabs[closebuttons="activetab"][orient="horizontal"] &:not([selected]) { 196 | padding-inline-end: 12px !important; 197 | } 198 | } -------------------------------------------------------------------------------- /chrome/theme-material-blue.css: -------------------------------------------------------------------------------- 1 | /* use variables when about:config variable userChrome.theme-material is true */ 2 | @media -moz-pref("userChrome.theme-material") { 3 | /* light mode variables */ 4 | :root { 5 | --md-sys-color-primary: rgb(65 95 145); 6 | --md-sys-color-surface-tint: rgb(65 95 145); 7 | --md-sys-color-on-primary: rgb(255 255 255); 8 | --md-sys-color-primary-container: rgb(214 227 255); 9 | --md-sys-color-on-primary-container: rgb(0 27 62); 10 | --md-sys-color-secondary: rgb(86 95 113); 11 | --md-sys-color-on-secondary: rgb(255 255 255); 12 | --md-sys-color-secondary-container: rgb(218 226 249); 13 | --md-sys-color-on-secondary-container: rgb(19 28 43); 14 | --md-sys-color-tertiary: rgb(112 85 117); 15 | --md-sys-color-on-tertiary: rgb(255 255 255); 16 | --md-sys-color-tertiary-container: rgb(250 216 253); 17 | --md-sys-color-on-tertiary-container: rgb(40 19 46); 18 | --md-sys-color-error: rgb(186 26 26); 19 | --md-sys-color-on-error: rgb(255 255 255); 20 | --md-sys-color-error-container: rgb(255 218 214); 21 | --md-sys-color-on-error-container: rgb(65 0 2); 22 | --md-sys-color-background: rgb(249 249 255); 23 | --md-sys-color-on-background: rgb(25 28 32); 24 | --md-sys-color-surface: rgb(249 249 255); 25 | --md-sys-color-on-surface: rgb(25 28 32); 26 | --md-sys-color-surface-variant: rgb(224 226 236); 27 | --md-sys-color-on-surface-variant: rgb(68 71 78); 28 | --md-sys-color-outline: rgb(116 119 127); 29 | --md-sys-color-outline-variant: rgb(196 198 208); 30 | --md-sys-color-shadow: rgb(0 0 0); 31 | --md-sys-color-scrim: rgb(0 0 0); 32 | --md-sys-color-inverse-surface: rgb(46 48 54); 33 | --md-sys-color-inverse-on-surface: rgb(240 240 247); 34 | --md-sys-color-inverse-primary: rgb(170 199 255); 35 | --md-sys-color-primary-fixed: rgb(214 227 255); 36 | --md-sys-color-on-primary-fixed: rgb(0 27 62); 37 | --md-sys-color-primary-fixed-dim: rgb(170 199 255); 38 | --md-sys-color-on-primary-fixed-variant: rgb(40 71 119); 39 | --md-sys-color-secondary-fixed: rgb(218 226 249); 40 | --md-sys-color-on-secondary-fixed: rgb(19 28 43); 41 | --md-sys-color-secondary-fixed-dim: rgb(190 198 220); 42 | --md-sys-color-on-secondary-fixed-variant: rgb(62 71 89); 43 | --md-sys-color-tertiary-fixed: rgb(250 216 253); 44 | --md-sys-color-on-tertiary-fixed: rgb(40 19 46); 45 | --md-sys-color-tertiary-fixed-dim: rgb(221 188 224); 46 | --md-sys-color-on-tertiary-fixed-variant: rgb(87 62 92); 47 | --md-sys-color-surface-dim: rgb(217 217 224); 48 | --md-sys-color-surface-bright: rgb(249 249 255); 49 | --md-sys-color-surface-container-lowest: rgb(255 255 255); 50 | --md-sys-color-surface-container-low: rgb(243 243 250); 51 | --md-sys-color-surface-container: rgb(237 237 244); 52 | --md-sys-color-surface-container-high: rgb(231 232 238); 53 | --md-sys-color-surface-container-highest: rgb(226 226 233); 54 | } 55 | 56 | /* dark mode variables */ 57 | @media (prefers-color-scheme: dark) { 58 | :root { 59 | --md-sys-color-primary: rgb(170 199 255); 60 | --md-sys-color-surface-tint: rgb(170 199 255); 61 | --md-sys-color-on-primary: rgb(10 48 95); 62 | --md-sys-color-primary-container: rgb(40 71 119); 63 | --md-sys-color-on-primary-container: rgb(214 227 255); 64 | --md-sys-color-secondary: rgb(190 198 220); 65 | --md-sys-color-on-secondary: rgb(40 49 65); 66 | --md-sys-color-secondary-container: rgb(62 71 89); 67 | --md-sys-color-on-secondary-container: rgb(218 226 249); 68 | --md-sys-color-tertiary: rgb(221 188 224); 69 | --md-sys-color-on-tertiary: rgb(63 40 68); 70 | --md-sys-color-tertiary-container: rgb(87 62 92); 71 | --md-sys-color-on-tertiary-container: rgb(250 216 253); 72 | --md-sys-color-error: rgb(255 180 171); 73 | --md-sys-color-on-error: rgb(105 0 5); 74 | --md-sys-color-error-container: rgb(147 0 10); 75 | --md-sys-color-on-error-container: rgb(255 218 214); 76 | --md-sys-color-background: rgb(17 19 24); 77 | --md-sys-color-on-background: rgb(226 226 233); 78 | --md-sys-color-surface: rgb(17 19 24); 79 | --md-sys-color-on-surface: rgb(226 226 233); 80 | --md-sys-color-surface-variant: rgb(68 71 78); 81 | --md-sys-color-on-surface-variant: rgb(196 198 208); 82 | --md-sys-color-outline: rgb(142 144 153); 83 | --md-sys-color-outline-variant: rgb(68 71 78); 84 | --md-sys-color-shadow: rgb(0 0 0); 85 | --md-sys-color-scrim: rgb(0 0 0); 86 | --md-sys-color-inverse-surface: rgb(226 226 233); 87 | --md-sys-color-inverse-on-surface: rgb(46 48 54); 88 | --md-sys-color-inverse-primary: rgb(65 95 145); 89 | --md-sys-color-primary-fixed: rgb(214 227 255); 90 | --md-sys-color-on-primary-fixed: rgb(0 27 62); 91 | --md-sys-color-primary-fixed-dim: rgb(170 199 255); 92 | --md-sys-color-on-primary-fixed-variant: rgb(40 71 119); 93 | --md-sys-color-secondary-fixed: rgb(218 226 249); 94 | --md-sys-color-on-secondary-fixed: rgb(19 28 43); 95 | --md-sys-color-secondary-fixed-dim: rgb(190 198 220); 96 | --md-sys-color-on-secondary-fixed-variant: rgb(62 71 89); 97 | --md-sys-color-tertiary-fixed: rgb(250 216 253); 98 | --md-sys-color-on-tertiary-fixed: rgb(40 19 46); 99 | --md-sys-color-tertiary-fixed-dim: rgb(221 188 224); 100 | --md-sys-color-on-tertiary-fixed-variant: rgb(87 62 92); 101 | --md-sys-color-surface-dim: rgb(17 19 24); 102 | --md-sys-color-surface-bright: rgb(55 57 62); 103 | --md-sys-color-surface-container-lowest: rgb(12 14 19); 104 | --md-sys-color-surface-container-low: rgb(25 28 32); 105 | --md-sys-color-surface-container: rgb(29 32 36); 106 | --md-sys-color-surface-container-high: rgb(40 42 47); 107 | --md-sys-color-surface-container-highest: rgb(51 53 58); 108 | } 109 | } 110 | } -------------------------------------------------------------------------------- /examples/theme-material-green.css: -------------------------------------------------------------------------------- 1 | /* use variables when about:config variable userChrome.theme-material-green is true */ 2 | @media -moz-pref("userChrome.theme-material-green") { 3 | /* light mode variables */ 4 | :root { 5 | --md-sys-color-primary: rgb(76 102 43); 6 | --md-sys-color-surface-tint: rgb(76 102 43); 7 | --md-sys-color-on-primary: rgb(255 255 255); 8 | --md-sys-color-primary-container: rgb(205 237 163); 9 | --md-sys-color-on-primary-container: rgb(16 32 0); 10 | --md-sys-color-secondary: rgb(88 98 73); 11 | --md-sys-color-on-secondary: rgb(255 255 255); 12 | --md-sys-color-secondary-container: rgb(220 231 200); 13 | --md-sys-color-on-secondary-container: rgb(21 30 11); 14 | --md-sys-color-tertiary: rgb(56 102 99); 15 | --md-sys-color-on-tertiary: rgb(255 255 255); 16 | --md-sys-color-tertiary-container: rgb(188 236 231); 17 | --md-sys-color-on-tertiary-container: rgb(0 32 30); 18 | --md-sys-color-error: rgb(186 26 26); 19 | --md-sys-color-on-error: rgb(255 255 255); 20 | --md-sys-color-error-container: rgb(255 218 214); 21 | --md-sys-color-on-error-container: rgb(65 0 2); 22 | --md-sys-color-background: rgb(249 250 239); 23 | --md-sys-color-on-background: rgb(26 28 22); 24 | --md-sys-color-surface: rgb(249 250 239); 25 | --md-sys-color-on-surface: rgb(26 28 22); 26 | --md-sys-color-surface-variant: rgb(225 228 213); 27 | --md-sys-color-on-surface-variant: rgb(68 72 61); 28 | --md-sys-color-outline: rgb(117 121 108); 29 | --md-sys-color-outline-variant: rgb(197 200 186); 30 | --md-sys-color-shadow: rgb(0 0 0); 31 | --md-sys-color-scrim: rgb(0 0 0); 32 | --md-sys-color-inverse-surface: rgb(47 49 42); 33 | --md-sys-color-inverse-on-surface: rgb(241 242 230); 34 | --md-sys-color-inverse-primary: rgb(177 209 138); 35 | --md-sys-color-primary-fixed: rgb(205 237 163); 36 | --md-sys-color-on-primary-fixed: rgb(16 32 0); 37 | --md-sys-color-primary-fixed-dim: rgb(177 209 138); 38 | --md-sys-color-on-primary-fixed-variant: rgb(53 78 22); 39 | --md-sys-color-secondary-fixed: rgb(220 231 200); 40 | --md-sys-color-on-secondary-fixed: rgb(21 30 11); 41 | --md-sys-color-secondary-fixed-dim: rgb(191 203 173); 42 | --md-sys-color-on-secondary-fixed-variant: rgb(64 74 51); 43 | --md-sys-color-tertiary-fixed: rgb(188 236 231); 44 | --md-sys-color-on-tertiary-fixed: rgb(0 32 30); 45 | --md-sys-color-tertiary-fixed-dim: rgb(160 208 203); 46 | --md-sys-color-on-tertiary-fixed-variant: rgb(31 78 75); 47 | --md-sys-color-surface-dim: rgb(218 219 208); 48 | --md-sys-color-surface-bright: rgb(249 250 239); 49 | --md-sys-color-surface-container-lowest: rgb(255 255 255); 50 | --md-sys-color-surface-container-low: rgb(243 244 233); 51 | --md-sys-color-surface-container: rgb(238 239 227); 52 | --md-sys-color-surface-container-high: rgb(232 233 222); 53 | --md-sys-color-surface-container-highest: rgb(226 227 216); 54 | } 55 | 56 | /* dark mode variables */ 57 | @media (prefers-color-scheme: dark) { 58 | :root { 59 | --md-sys-color-primary: rgb(177 209 138); 60 | --md-sys-color-surface-tint: rgb(177 209 138); 61 | --md-sys-color-on-primary: rgb(31 55 1); 62 | --md-sys-color-primary-container: rgb(53 78 22); 63 | --md-sys-color-on-primary-container: rgb(205 237 163); 64 | --md-sys-color-secondary: rgb(191 203 173); 65 | --md-sys-color-on-secondary: rgb(42 51 30); 66 | --md-sys-color-secondary-container: rgb(64 74 51); 67 | --md-sys-color-on-secondary-container: rgb(220 231 200); 68 | --md-sys-color-tertiary: rgb(160 208 203); 69 | --md-sys-color-on-tertiary: rgb(0 55 53); 70 | --md-sys-color-tertiary-container: rgb(31 78 75); 71 | --md-sys-color-on-tertiary-container: rgb(188 236 231); 72 | --md-sys-color-error: rgb(255 180 171); 73 | --md-sys-color-on-error: rgb(105 0 5); 74 | --md-sys-color-error-container: rgb(147 0 10); 75 | --md-sys-color-on-error-container: rgb(255 218 214); 76 | --md-sys-color-background: rgb(18 20 14); 77 | --md-sys-color-on-background: rgb(226 227 216); 78 | --md-sys-color-surface: rgb(18 20 14); 79 | --md-sys-color-on-surface: rgb(226 227 216); 80 | --md-sys-color-surface-variant: rgb(68 72 61); 81 | --md-sys-color-on-surface-variant: rgb(197 200 186); 82 | --md-sys-color-outline: rgb(143 146 133); 83 | --md-sys-color-outline-variant: rgb(68 72 61); 84 | --md-sys-color-shadow: rgb(0 0 0); 85 | --md-sys-color-scrim: rgb(0 0 0); 86 | --md-sys-color-inverse-surface: rgb(226 227 216); 87 | --md-sys-color-inverse-on-surface: rgb(47 49 42); 88 | --md-sys-color-inverse-primary: rgb(76 102 43); 89 | --md-sys-color-primary-fixed: rgb(205 237 163); 90 | --md-sys-color-on-primary-fixed: rgb(16 32 0); 91 | --md-sys-color-primary-fixed-dim: rgb(177 209 138); 92 | --md-sys-color-on-primary-fixed-variant: rgb(53 78 22); 93 | --md-sys-color-secondary-fixed: rgb(220 231 200); 94 | --md-sys-color-on-secondary-fixed: rgb(21 30 11); 95 | --md-sys-color-secondary-fixed-dim: rgb(191 203 173); 96 | --md-sys-color-on-secondary-fixed-variant: rgb(64 74 51); 97 | --md-sys-color-tertiary-fixed: rgb(188 236 231); 98 | --md-sys-color-on-tertiary-fixed: rgb(0 32 30); 99 | --md-sys-color-tertiary-fixed-dim: rgb(160 208 203); 100 | --md-sys-color-on-tertiary-fixed-variant: rgb(31 78 75); 101 | --md-sys-color-surface-dim: rgb(18 20 14); 102 | --md-sys-color-surface-bright: rgb(56 58 50); 103 | --md-sys-color-surface-container-lowest: rgb(12 15 9); 104 | --md-sys-color-surface-container-low: rgb(26 28 22); 105 | --md-sys-color-surface-container: rgb(30 32 26); 106 | --md-sys-color-surface-container-high: rgb(40 43 36); 107 | --md-sys-color-surface-container-highest: rgb(51 54 46); 108 | } 109 | } 110 | } 111 | -------------------------------------------------------------------------------- /examples/theme-material-red.css: -------------------------------------------------------------------------------- 1 | /* use variables when about:config variable userChrome.theme-material-red is true */ 2 | @media -moz-pref("userChrome.theme-material-red") { 3 | /* light mode variables */ 4 | :root { 5 | --md-sys-color-primary: rgb(143 76 56); 6 | --md-sys-color-surface-tint: rgb(143 76 56); 7 | --md-sys-color-on-primary: rgb(255 255 255); 8 | --md-sys-color-primary-container: rgb(255 219 209); 9 | --md-sys-color-on-primary-container: rgb(58 11 1); 10 | --md-sys-color-secondary: rgb(119 87 78); 11 | --md-sys-color-on-secondary: rgb(255 255 255); 12 | --md-sys-color-secondary-container: rgb(255 219 209); 13 | --md-sys-color-on-secondary-container: rgb(44 21 15); 14 | --md-sys-color-tertiary: rgb(108 93 47); 15 | --md-sys-color-on-tertiary: rgb(255 255 255); 16 | --md-sys-color-tertiary-container: rgb(245 225 167); 17 | --md-sys-color-on-tertiary-container: rgb(35 27 0); 18 | --md-sys-color-error: rgb(186 26 26); 19 | --md-sys-color-on-error: rgb(255 255 255); 20 | --md-sys-color-error-container: rgb(255 218 214); 21 | --md-sys-color-on-error-container: rgb(65 0 2); 22 | --md-sys-color-background: rgb(255 248 246); 23 | --md-sys-color-on-background: rgb(35 25 23); 24 | --md-sys-color-surface: rgb(255 248 246); 25 | --md-sys-color-on-surface: rgb(35 25 23); 26 | --md-sys-color-surface-variant: rgb(245 222 216); 27 | --md-sys-color-on-surface-variant: rgb(83 67 63); 28 | --md-sys-color-outline: rgb(133 115 110); 29 | --md-sys-color-outline-variant: rgb(216 194 188); 30 | --md-sys-color-shadow: rgb(0 0 0); 31 | --md-sys-color-scrim: rgb(0 0 0); 32 | --md-sys-color-inverse-surface: rgb(57 46 43); 33 | --md-sys-color-inverse-on-surface: rgb(255 237 232); 34 | --md-sys-color-inverse-primary: rgb(255 181 160); 35 | --md-sys-color-primary-fixed: rgb(255 219 209); 36 | --md-sys-color-on-primary-fixed: rgb(58 11 1); 37 | --md-sys-color-primary-fixed-dim: rgb(255 181 160); 38 | --md-sys-color-on-primary-fixed-variant: rgb(114 53 35); 39 | --md-sys-color-secondary-fixed: rgb(255 219 209); 40 | --md-sys-color-on-secondary-fixed: rgb(44 21 15); 41 | --md-sys-color-secondary-fixed-dim: rgb(231 189 178); 42 | --md-sys-color-on-secondary-fixed-variant: rgb(93 64 55); 43 | --md-sys-color-tertiary-fixed: rgb(245 225 167); 44 | --md-sys-color-on-tertiary-fixed: rgb(35 27 0); 45 | --md-sys-color-tertiary-fixed-dim: rgb(216 197 141); 46 | --md-sys-color-on-tertiary-fixed-variant: rgb(83 70 25); 47 | --md-sys-color-surface-dim: rgb(232 214 210); 48 | --md-sys-color-surface-bright: rgb(255 248 246); 49 | --md-sys-color-surface-container-lowest: rgb(255 255 255); 50 | --md-sys-color-surface-container-low: rgb(255 241 237); 51 | --md-sys-color-surface-container: rgb(252 234 229); 52 | --md-sys-color-surface-container-high: rgb(247 228 224); 53 | --md-sys-color-surface-container-highest: rgb(241 223 218); 54 | } 55 | 56 | /* dark mode variables */ 57 | @media (prefers-color-scheme: dark) { 58 | :root { 59 | --md-sys-color-primary: rgb(255 181 160); 60 | --md-sys-color-surface-tint: rgb(255 181 160); 61 | --md-sys-color-on-primary: rgb(86 31 15); 62 | --md-sys-color-primary-container: rgb(114 53 35); 63 | --md-sys-color-on-primary-container: rgb(255 219 209); 64 | --md-sys-color-secondary: rgb(231 189 178); 65 | --md-sys-color-on-secondary: rgb(68 42 34); 66 | --md-sys-color-secondary-container: rgb(93 64 55); 67 | --md-sys-color-on-secondary-container: rgb(255 219 209); 68 | --md-sys-color-tertiary: rgb(216 197 141); 69 | --md-sys-color-on-tertiary: rgb(59 47 5); 70 | --md-sys-color-tertiary-container: rgb(83 70 25); 71 | --md-sys-color-on-tertiary-container: rgb(245 225 167); 72 | --md-sys-color-error: rgb(255 180 171); 73 | --md-sys-color-on-error: rgb(105 0 5); 74 | --md-sys-color-error-container: rgb(147 0 10); 75 | --md-sys-color-on-error-container: rgb(255 218 214); 76 | --md-sys-color-background: rgb(26 17 15); 77 | --md-sys-color-on-background: rgb(241 223 218); 78 | --md-sys-color-surface: rgb(26 17 15); 79 | --md-sys-color-on-surface: rgb(241 223 218); 80 | --md-sys-color-surface-variant: rgb(83 67 63); 81 | --md-sys-color-on-surface-variant: rgb(216 194 188); 82 | --md-sys-color-outline: rgb(160 140 135); 83 | --md-sys-color-outline-variant: rgb(83 67 63); 84 | --md-sys-color-shadow: rgb(0 0 0); 85 | --md-sys-color-scrim: rgb(0 0 0); 86 | --md-sys-color-inverse-surface: rgb(241 223 218); 87 | --md-sys-color-inverse-on-surface: rgb(57 46 43); 88 | --md-sys-color-inverse-primary: rgb(143 76 56); 89 | --md-sys-color-primary-fixed: rgb(255 219 209); 90 | --md-sys-color-on-primary-fixed: rgb(58 11 1); 91 | --md-sys-color-primary-fixed-dim: rgb(255 181 160); 92 | --md-sys-color-on-primary-fixed-variant: rgb(114 53 35); 93 | --md-sys-color-secondary-fixed: rgb(255 219 209); 94 | --md-sys-color-on-secondary-fixed: rgb(44 21 15); 95 | --md-sys-color-secondary-fixed-dim: rgb(231 189 178); 96 | --md-sys-color-on-secondary-fixed-variant: rgb(93 64 55); 97 | --md-sys-color-tertiary-fixed: rgb(245 225 167); 98 | --md-sys-color-on-tertiary-fixed: rgb(35 27 0); 99 | --md-sys-color-tertiary-fixed-dim: rgb(216 197 141); 100 | --md-sys-color-on-tertiary-fixed-variant: rgb(83 70 25); 101 | --md-sys-color-surface-dim: rgb(26 17 15); 102 | --md-sys-color-surface-bright: rgb(66 55 52); 103 | --md-sys-color-surface-container-lowest: rgb(20 12 10); 104 | --md-sys-color-surface-container-low: rgb(35 25 23); 105 | --md-sys-color-surface-container: rgb(39 29 27); 106 | --md-sys-color-surface-container-high: rgb(50 40 37); 107 | --md-sys-color-surface-container-highest: rgb(61 50 47); 108 | } 109 | } 110 | } 111 | -------------------------------------------------------------------------------- /examples/theme-material-yellow.css: -------------------------------------------------------------------------------- 1 | /* use variables when about:config variable userChrome.theme-material-yellow is true */ 2 | @media -moz-pref("userChrome.theme-material-yellow") { 3 | /* light mode variables */ 4 | :root { 5 | --md-sys-color-primary: rgb(109 94 15); 6 | --md-sys-color-surface-tint: rgb(109 94 15); 7 | --md-sys-color-on-primary: rgb(255 255 255); 8 | --md-sys-color-primary-container: rgb(248 226 135); 9 | --md-sys-color-on-primary-container: rgb(34 27 0); 10 | --md-sys-color-secondary: rgb(102 94 64); 11 | --md-sys-color-on-secondary: rgb(255 255 255); 12 | --md-sys-color-secondary-container: rgb(238 226 188); 13 | --md-sys-color-on-secondary-container: rgb(33 27 4); 14 | --md-sys-color-tertiary: rgb(67 102 78); 15 | --md-sys-color-on-tertiary: rgb(255 255 255); 16 | --md-sys-color-tertiary-container: rgb(197 236 206); 17 | --md-sys-color-on-tertiary-container: rgb(0 33 15); 18 | --md-sys-color-error: rgb(186 26 26); 19 | --md-sys-color-on-error: rgb(255 255 255); 20 | --md-sys-color-error-container: rgb(255 218 214); 21 | --md-sys-color-on-error-container: rgb(65 0 2); 22 | --md-sys-color-background: rgb(255 249 238); 23 | --md-sys-color-on-background: rgb(30 27 19); 24 | --md-sys-color-surface: rgb(255 249 238); 25 | --md-sys-color-on-surface: rgb(30 27 19); 26 | --md-sys-color-surface-variant: rgb(234 226 208); 27 | --md-sys-color-on-surface-variant: rgb(75 71 57); 28 | --md-sys-color-outline: rgb(124 119 103); 29 | --md-sys-color-outline-variant: rgb(205 198 180); 30 | --md-sys-color-shadow: rgb(0 0 0); 31 | --md-sys-color-scrim: rgb(0 0 0); 32 | --md-sys-color-inverse-surface: rgb(51 48 39); 33 | --md-sys-color-inverse-on-surface: rgb(247 240 226); 34 | --md-sys-color-inverse-primary: rgb(219 198 110); 35 | --md-sys-color-primary-fixed: rgb(248 226 135); 36 | --md-sys-color-on-primary-fixed: rgb(34 27 0); 37 | --md-sys-color-primary-fixed-dim: rgb(219 198 110); 38 | --md-sys-color-on-primary-fixed-variant: rgb(83 70 0); 39 | --md-sys-color-secondary-fixed: rgb(238 226 188); 40 | --md-sys-color-on-secondary-fixed: rgb(33 27 4); 41 | --md-sys-color-secondary-fixed-dim: rgb(209 198 161); 42 | --md-sys-color-on-secondary-fixed-variant: rgb(78 71 42); 43 | --md-sys-color-tertiary-fixed: rgb(197 236 206); 44 | --md-sys-color-on-tertiary-fixed: rgb(0 33 15); 45 | --md-sys-color-tertiary-fixed-dim: rgb(169 208 179); 46 | --md-sys-color-on-tertiary-fixed-variant: rgb(44 78 56); 47 | --md-sys-color-surface-dim: rgb(224 217 204); 48 | --md-sys-color-surface-bright: rgb(255 249 238); 49 | --md-sys-color-surface-container-lowest: rgb(255 255 255); 50 | --md-sys-color-surface-container-low: rgb(250 243 229); 51 | --md-sys-color-surface-container: rgb(244 237 223); 52 | --md-sys-color-surface-container-high: rgb(238 232 218); 53 | --md-sys-color-surface-container-highest: rgb(232 226 212); 54 | } 55 | 56 | /* dark mode variables */ 57 | @media (prefers-color-scheme: dark) { 58 | :root { 59 | --md-sys-color-primary: rgb(219 198 110); 60 | --md-sys-color-surface-tint: rgb(219 198 110); 61 | --md-sys-color-on-primary: rgb(58 48 0); 62 | --md-sys-color-primary-container: rgb(83 70 0); 63 | --md-sys-color-on-primary-container: rgb(248 226 135); 64 | --md-sys-color-secondary: rgb(209 198 161); 65 | --md-sys-color-on-secondary: rgb(54 48 22); 66 | --md-sys-color-secondary-container: rgb(78 71 42); 67 | --md-sys-color-on-secondary-container: rgb(238 226 188); 68 | --md-sys-color-tertiary: rgb(169 208 179); 69 | --md-sys-color-on-tertiary: rgb(20 55 35); 70 | --md-sys-color-tertiary-container: rgb(44 78 56); 71 | --md-sys-color-on-tertiary-container: rgb(197 236 206); 72 | --md-sys-color-error: rgb(255 180 171); 73 | --md-sys-color-on-error: rgb(105 0 5); 74 | --md-sys-color-error-container: rgb(147 0 10); 75 | --md-sys-color-on-error-container: rgb(255 218 214); 76 | --md-sys-color-background: rgb(21 19 11); 77 | --md-sys-color-on-background: rgb(232 226 212); 78 | --md-sys-color-surface: rgb(21 19 11); 79 | --md-sys-color-on-surface: rgb(232 226 212); 80 | --md-sys-color-surface-variant: rgb(75 71 57); 81 | --md-sys-color-on-surface-variant: rgb(205 198 180); 82 | --md-sys-color-outline: rgb(150 144 128); 83 | --md-sys-color-outline-variant: rgb(75 71 57); 84 | --md-sys-color-shadow: rgb(0 0 0); 85 | --md-sys-color-scrim: rgb(0 0 0); 86 | --md-sys-color-inverse-surface: rgb(232 226 212); 87 | --md-sys-color-inverse-on-surface: rgb(51 48 39); 88 | --md-sys-color-inverse-primary: rgb(109 94 15); 89 | --md-sys-color-primary-fixed: rgb(248 226 135); 90 | --md-sys-color-on-primary-fixed: rgb(34 27 0); 91 | --md-sys-color-primary-fixed-dim: rgb(219 198 110); 92 | --md-sys-color-on-primary-fixed-variant: rgb(83 70 0); 93 | --md-sys-color-secondary-fixed: rgb(238 226 188); 94 | --md-sys-color-on-secondary-fixed: rgb(33 27 4); 95 | --md-sys-color-secondary-fixed-dim: rgb(209 198 161); 96 | --md-sys-color-on-secondary-fixed-variant: rgb(78 71 42); 97 | --md-sys-color-tertiary-fixed: rgb(197 236 206); 98 | --md-sys-color-on-tertiary-fixed: rgb(0 33 15); 99 | --md-sys-color-tertiary-fixed-dim: rgb(169 208 179); 100 | --md-sys-color-on-tertiary-fixed-variant: rgb(44 78 56); 101 | --md-sys-color-surface-dim: rgb(21 19 11); 102 | --md-sys-color-surface-bright: rgb(60 57 48); 103 | --md-sys-color-surface-container-lowest: rgb(16 14 7); 104 | --md-sys-color-surface-container-low: rgb(30 27 19); 105 | --md-sys-color-surface-container: rgb(34 32 23); 106 | --md-sys-color-surface-container-high: rgb(45 42 33); 107 | --md-sys-color-surface-container-highest: rgb(56 53 43); 108 | } 109 | } 110 | } 111 | -------------------------------------------------------------------------------- /src/user-chrome/tabbar/_tab-buttons.scss: -------------------------------------------------------------------------------- 1 | // centered alltabs icon 2 | #alltabs-button { 3 | display: flex !important; 4 | 5 | &>stack { 6 | display: flex !important; 7 | align-content: center !important; 8 | } 9 | } 10 | 11 | // buttons at center 12 | #tabbrowser-arrowscrollbox-periphery { 13 | display: flex !important; 14 | align-items: center !important; 15 | } 16 | 17 | // new tab button & all tabs button 18 | #tabs-newtab-button, 19 | #new-tab-button, 20 | #alltabs-button { 21 | min-width: 40px !important; 22 | min-height: var(--tab-min-height) !important; 23 | max-width: 40px !important; 24 | max-height: var(--tab-min-height) !important; 25 | margin: 0 !important; 26 | margin-top: auto !important; 27 | 28 | &> :is(.toolbarbutton-icon, .toolbarbutton-badge-stack) { 29 | padding: 6px !important; 30 | margin: 0 !important; 31 | width: auto !important; 32 | height: auto !important; 33 | border-radius: 4px !important; 34 | } 35 | } 36 | 37 | #tabs-newtab-button { 38 | margin-inline-start: 6px !important; 39 | margin-inline-end: 2px !important; 40 | } 41 | 42 | // tab close 43 | .tab-close-button, 44 | .messageCloseButton>.toolbarbutton-icon { 45 | width: auto !important; 46 | height: 16px !important; 47 | padding: 2px !important; 48 | 49 | transition-property: background-color !important; 50 | transition-duration: get-var("short-duration") !important; 51 | transition-timing-function: get-var("fade-in-out") !important; 52 | 53 | &:hover { 54 | background: get-var("control-background-color") !important; 55 | outline: 1px solid transparent !important; 56 | outline-color: get-var("control-border-color") !important; 57 | } 58 | } 59 | 60 | // all tabs button 61 | @media (-moz-platform: windows) { 62 | 63 | // hide spacer between tabs & window nav 64 | .titlebar-spacer[type="post-tabs"] { 65 | display: none !important; 66 | } 67 | 68 | #alltabs-button { 69 | max-height: 100% !important; 70 | min-height: 100% !important; 71 | padding: 0 !important; 72 | 73 | --margin-left: 48px; 74 | margin: 0 0 0 var(--margin-left) !important; 75 | 76 | &>stack { 77 | padding: 0 !important; 78 | margin: 0 !important; 79 | border-radius: 0 !important; 80 | max-height: 100% !important; 81 | min-height: 100% !important; 82 | } 83 | } 84 | 85 | #tabbrowser-tab { 86 | order: 990 !important; 87 | } 88 | 89 | #alltabs-button { 90 | order: 999 !important; 91 | } 92 | 93 | 94 | // @media (max-width: 700px) { 95 | // #alltabs-button { 96 | // --margin-left: 8px !important; 97 | // } 98 | // } 99 | 100 | // @media (max-width: 500px) { 101 | // #alltabs-button { 102 | // --margin-left: 0px !important; 103 | // } 104 | // } 105 | } 106 | 107 | // #scrollbutton-down, 108 | // #scrollbutton-up { 109 | // --scrollbutton-size: 34px; 110 | // max-width: var(--scrollbutton-size) !important; 111 | // min-width: var(--scrollbutton-size) !important; 112 | // min-height: var(--scrollbutton-size) !important; 113 | // min-height: var(--scrollbutton-size) !important; 114 | // } 115 | 116 | // fixes for macOS 117 | @media (-moz-platform: macos) { 118 | 119 | // macOS fix for new tab button & all tabs button 120 | #new-tab-button { 121 | margin-inline-start: 2px !important; 122 | } 123 | 124 | // macos drag area fix 125 | #tabs-newtab-button, 126 | #new-tab-button { 127 | margin-inline-end: 40px !important; 128 | } 129 | } 130 | 131 | // restore close button visibility for not selected tabs 132 | .tabbrowser-tab:not([pinned]) { 133 | .tab-close-button { 134 | display: flex !important; 135 | } 136 | } 137 | 138 | // Firefox view button 139 | #TabsToolbar #firefox-view-button { 140 | &>.toolbarbutton-icon { 141 | align-items: center !important; 142 | box-shadow: none !important; 143 | 144 | fill: get-var("icon-color-secondary") !important; 145 | 146 | transition-property: opacity, background-color !important; 147 | transition-duration: get-var("shortest-duration") !important; 148 | transition-timing-function: get-var("fade-in-out") !important; 149 | } 150 | 151 | &[open]>.toolbarbutton-icon { 152 | fill: get-var("icon-color-primaryy") !important; 153 | 154 | box-shadow: none !important; 155 | background-color: get-var(background-color-100) !important; 156 | } 157 | 158 | &[open]:hover>.toolbarbutton-icon { 159 | box-shadow: none !important; 160 | background-color: get-var(background-color-100) !important; 161 | } 162 | 163 | &:hover>.toolbarbutton-icon { 164 | box-shadow: none !important; 165 | background-color: get-var(tab-background-color-hover) !important; 166 | } 167 | } 168 | 169 | @include moz-pref-media("not userChrome.ui-chrome-refresh") { 170 | @media (-moz-platform: windows) { 171 | #alltabs-button { 172 | min-width: 46px !important; 173 | max-width: 46px !important; 174 | 175 | &> :is(.toolbarbutton-icon, .toolbarbutton-badge-stack) { 176 | width: 100% !important; 177 | border-radius: 0 !important; 178 | display: flex !important; 179 | justify-content: center !important; 180 | align-items: center !important; 181 | } 182 | 183 | &:hover { 184 | .toolbarbutton-badge-stack { 185 | background-color: light-dark(hsla(0, 0%, 0%, 0.13), 186 | hsla(0, 0%, 100%, 0.15)) !important; 187 | } 188 | } 189 | 190 | &:hover:active, 191 | &[open] { 192 | .toolbarbutton-badge-stack { 193 | background-color: light-dark(hsla(0, 0%, 0%, 0.22), 194 | hsla(0, 0%, 100%, 0.32)) !important; 195 | } 196 | } 197 | } 198 | 199 | :root:-moz-window-inactive #navigator-toolbox { 200 | #alltabs-button { 201 | opacity: 0.5 !important; 202 | 203 | &:hover { 204 | opacity: 1 !important; 205 | } 206 | } 207 | } 208 | } 209 | } -------------------------------------------------------------------------------- /src/user-chrome/tabbar/_tab.scss: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | --tab-min-height: 34px !important; // 34px (real height) 4 | 5 | // custom tab variables 6 | --tab-opacity: 0; 7 | } 8 | 9 | .tabbrowser-tab { 10 | overflow: visible !important; 11 | border: 0 !important; 12 | min-height: var(--tab-min-height) !important; 13 | max-height: var(--tab-min-height) !important; 14 | appearance: none !important; 15 | position: relative !important; 16 | box-sizing: border-box !important; 17 | background: 0 0 !important; 18 | padding: 0 !important; 19 | font-size: 12px !important; 20 | 21 | &:not([pinned]) { 22 | margin-inline-start: 0 !important; 23 | } 24 | } 25 | 26 | // hide tab bottom additional text 27 | .tab-secondary-label { 28 | display: none !important; 29 | } 30 | 31 | // tab label margin from icon 32 | .tab-label { 33 | margin-left: 8px !important; 34 | } 35 | 36 | [dir="rtl"] { 37 | .tab-label { 38 | margin-left: unset !important; 39 | margin-right: 8px !important; 40 | } 41 | } 42 | 43 | // selected and not selected tab text color 44 | @include moz-pref-media("not userChrome.theme-default") { 45 | .tabbrowser-tab { 46 | &:not(:is([visuallyselected], [selected])) { 47 | color: get-var("tab-label-color-inactive") !important; 48 | } 49 | 50 | &:is([visuallyselected], [selected]) { 51 | color: get-var("tab-label-color") !important; 52 | } 53 | 54 | &:hover { 55 | color: get-var("tab-label-color") !important; 56 | } 57 | } 58 | } 59 | 60 | // hide tab text and close button if pinned tab 61 | .tabbrowser-tab[pinned] { 62 | 63 | .tab-label-container, 64 | .tab-close-button { 65 | display: none !important; 66 | } 67 | } 68 | 69 | // styles for pinned tab 70 | .tabbrowser-tab[pinned] { 71 | max-width: 40px !important; 72 | min-width: 40px !important; 73 | padding: 0 !important; 74 | 75 | .tab-icon-stack { 76 | margin-left: 0 !important; 77 | } 78 | 79 | .tab-content { 80 | display: grid !important; 81 | align-content: center !important; 82 | place-content: center !important; 83 | place-items: center !important; 84 | justify-content: center !important; 85 | } 86 | } 87 | 88 | .tab-stack { 89 | margin-top: 0 !important; 90 | margin-bottom: 0 !important; 91 | } 92 | 93 | .tab-icon-overlay { 94 | margin: 0 !important; 95 | padding: 0 !important; 96 | } 97 | 98 | .tab-close-button, 99 | .tab-icon-image, 100 | .tab-icon-sound, 101 | .tab-sharing-icon-overlay, 102 | .tab-throbber, 103 | .tab-throbber-fallback { 104 | margin-top: 0 !important; 105 | } 106 | 107 | .tabbrowser-tab::after, 108 | .tabbrowser-tab::before { 109 | display: none !important; 110 | } 111 | 112 | // general tab background styles with tab corners 113 | .tab-background { 114 | margin-block: 0 !important; 115 | border-radius: 8px 8px 0 0 !important; 116 | position: relative !important; 117 | border: 0 !important; 118 | // outline: 0 !important; 119 | 120 | opacity: var(--tab-opacity) !important; 121 | visibility: visible !important; 122 | box-shadow: none !important; 123 | 124 | transition-property: opacity, background-color !important; 125 | transition-duration: get-var("shortest-duration") !important; 126 | transition-timing-function: get-var("fade-in-out") !important; 127 | 128 | &::before, 129 | &::after { 130 | content: "" !important; 131 | display: block !important; 132 | position: absolute !important; 133 | min-width: 8px !important; 134 | max-width: 8px !important; 135 | min-height: 8px !important; 136 | max-height: 8px !important; 137 | bottom: 0 !important; 138 | pointer-events: none !important; 139 | clip-path: inset(0px) !important; 140 | 141 | transition-property: box-shadow !important; 142 | transition-duration: get-var("shortest-duration") !important; 143 | transition-timing-function: get-var("fade-in-out") !important; 144 | 145 | background-image: none !important; // remove tab image for waterfox 146 | } 147 | 148 | &::before { 149 | border-bottom-right-radius: 8px !important; 150 | left: 0 !important; 151 | transform: translateX(-8px) !important; 152 | box-shadow: 4px 4px 0 4px var(--tab-selected-bgcolor) !important; 153 | } 154 | 155 | &::after { 156 | border-bottom-left-radius: 8px !important; 157 | right: 0 !important; 158 | transform: translateX(8px) !important; 159 | box-shadow: -4px 4px 0 4px var(--tab-selected-bgcolor) !important; 160 | } 161 | } 162 | 163 | @include moz-pref-media("not userChrome.theme-default") { 164 | 165 | html, 166 | body { 167 | --tab-background-color: #{get-var("background-color-100")} !important; 168 | } 169 | 170 | // general tab background styles with tab corners 171 | .tab-background { 172 | background: var(--tab-background-color) !important; 173 | 174 | &::before { 175 | box-shadow: 4px 4px 0 4px var(--tab-background-color) !important; 176 | } 177 | 178 | &::after { 179 | box-shadow: -4px 4px 0 4px var(--tab-background-color) !important; 180 | } 181 | } 182 | 183 | .tabbrowser-tab:is([visuallyselected], [selected]) { 184 | --tab-background-color: var(--toolbar-bgcolor) !important; 185 | } 186 | } 187 | 188 | // hover bg opacity for not selected tab 189 | .tabbrowser-tab:not([selected="true"]):hover, 190 | .tabbrowser-tab[multiselected]:not([selected="true"]) { 191 | --tab-opacity: #{get-var("tab-opacity-hover")} !important; 192 | } 193 | 194 | // bg color and opacity for selected tab 195 | .tabbrowser-tab:is([visuallyselected], [selected]) { 196 | --tab-opacity: #{get-var("tab-opacity")} !important; 197 | } 198 | 199 | .tab-icon-image { 200 | margin: 0 !important; 201 | } 202 | 203 | .tabbrowser-tab[fadein] { 204 | .tab-close-button { 205 | visibility: visible !important; 206 | } 207 | } 208 | 209 | .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) { 210 | max-width: 238px !important; 211 | } 212 | 213 | #tabs-newtab-button { 214 | margin-inline-start: 6px !important; 215 | margin-inline-end: 2px !important; 216 | } 217 | 218 | #tabbrowser-tabs[overflow] { 219 | .tabbrowser-tab[last-visible-unpinned-tab] { 220 | margin-inline-end: 8px !important; 221 | } 222 | 223 | .tabbrowser-tab[first-visible-unpinned-tab] { 224 | margin-inline-start: 8px !important; 225 | } 226 | } 227 | 228 | // tabs top margin if window not maximized 229 | #main-window[sizemode="normal"] #TabsToolbar-customization-target> :not(#alltabs-button) { 230 | margin-top: 8px !important; 231 | } 232 | 233 | // tab inline padding 234 | .tab-content { 235 | padding: 0 12px !important; 236 | } 237 | 238 | // fix first tab margin 239 | #tabbrowser-arrowscrollbox .tabbrowser-tab:is(:first-child) { 240 | margin-left: 8px !important; 241 | } 242 | 243 | // fix pinned tabs position for overflow mode 244 | #tabbrowser-tabs[overflow] { 245 | .tabbrowser-tab:is([pinned], [first-visible-unpinned-tab]) { 246 | margin-inline-start: 0 !important; 247 | } 248 | } 249 | 250 | // fix for prev style, if no pinned tabs - restore margin to prevent left tab corner cropping 251 | #tabbrowser-tabs:not([haspinnedtabs]) { 252 | .tabbrowser-tab[first-visible-unpinned-tab] { 253 | margin-inline-start: 8px !important; 254 | } 255 | } 256 | 257 | // remove left title bar drag area 258 | #tabbrowser-tabs { 259 | padding-inline: 0 0 !important; 260 | } 261 | 262 | // remove unwanted bottom spacing 263 | #tabbrowser-tabs { 264 | min-height: unset !important; 265 | } 266 | 267 | // remove theme tab outline color 268 | #TabsToolbar { 269 | --lwt-tab-line-color: transparent !important; 270 | } 271 | 272 | // fix tab background cropping 273 | .tab-background { 274 | z-index: 0 !important; 275 | 276 | &::before, 277 | &::after { 278 | z-index: 0 !important; 279 | } 280 | } 281 | 282 | .tabbrowser-tab:is([visuallyselected], [selected]) { 283 | .tab-background { 284 | z-index: 2 !important; 285 | 286 | &::before, 287 | &::after { 288 | z-index: 1 !important; 289 | } 290 | } 291 | 292 | .tab-content { 293 | z-index: 3 !important; 294 | } 295 | } 296 | 297 | // fixes for macOS 298 | @media (-moz-platform: macos) { 299 | 300 | // tabs bar top margin 301 | #TabsToolbar-customization-target> :not(#alltabs-button) { 302 | margin-top: 8px !important; 303 | } 304 | 305 | // bigger font size for tab text 306 | .tabbrowser-tab { 307 | font-size: 13px !important; 308 | } 309 | } --------------------------------------------------------------------------------