├── CREDITS ├── LEPTON ├── LICENSE ├── __tests__ ├── _has.test.scss ├── accent_color.test.scss ├── color_scheme.test.scss ├── each.test.scss ├── example.scss ├── list.test.scss ├── media.test.scss ├── moz_document.test.scss ├── native_menu.test.scss ├── one_liner.test.scss ├── option.test.scss ├── os.test.scss ├── scss.spec.js └── theme.test.scss ├── css ├── leptonChrome.css └── leptonContent.css ├── docs ├── Omni_ja.md ├── Preference.md ├── Project_Structure.md ├── README.md ├── Restrictions.md ├── Rules.md └── Smart_Bookmarks.md ├── icons ├── add-device.svg ├── addons-logo.svg ├── arrow-between-down.svg ├── arrow-repeat-all.svg ├── arrow-sort-down-lines.svg ├── arrow-swap.svg ├── auto-fit-width.svg ├── blank.svg ├── blue-berror.svg ├── book-add.svg ├── book.svg ├── bookmark-multiple.svg ├── bookmarksMenu-open.svg ├── bookmarksMenu-open2.svg ├── bookmarksToolbar-open.svg ├── broom.svg ├── bug.svg ├── calendar-agenda.svg ├── checkmark-circle.svg ├── code.svg ├── command-frames.svg ├── command-pick.svg ├── command-responsivemode.svg ├── container-openin-16.svg ├── content-view.svg ├── copy-select.svg ├── dashboard.svg ├── developer.svg ├── dismiss-filled.svg ├── document-css.svg ├── document-endnote.svg ├── document-landscape-split-hint.svg ├── document-search.svg ├── drawer-arrow-download.svg ├── edit-copy.svg ├── edit-paste-go.svg ├── edit-paste-search.svg ├── enter-fullscreen.svg ├── eraser.svg ├── error-connection-failure.svg ├── error-malformed-url.svg ├── error-server-not-found.svg ├── error-session-restore.svg ├── error-tab-crashed.svg ├── exit-fullscreen.svg ├── eye-hide.svg ├── eye-show.svg ├── eye-tracking-off.svg ├── filter-dismiss.svg ├── filter-reload.svg ├── fluid.svg ├── folder-globe.svg ├── folder-open.svg ├── folder.svg ├── highlight.svg ├── history-reverse.svg ├── identity-icons-brand.svg ├── image-add.svg ├── image-alt-text.svg ├── image-arrow-counterclockwise.svg ├── image-copy.svg ├── image.svg ├── import-export.svg ├── key-multiple.svg ├── link-square.svg ├── link.svg ├── lock-closed.svg ├── mail-inbox-all.svg ├── mail-inbox.svg ├── merge.svg ├── movetowindow-16.svg ├── new-tab-forward.svg ├── new-tab-multiple.svg ├── new-tab-skip-forward.svg ├── no-search-results.svg ├── panelarrow-vertical-reverse.svg ├── panelarrow-vertical.svg ├── password-hide.svg ├── password.svg ├── paste.svg ├── performance.svg ├── pin-tab.svg ├── play.svg ├── plug-disconnected.svg ├── pocket-outline.svg ├── private-favicon.svg ├── pulse-square.svg ├── quit.svg ├── redo.svg ├── refresh-cw.svg ├── reload-auto.svg ├── reload.svg ├── resize-image.svg ├── resize.svg ├── restore-session.svg ├── screenshot.svg ├── select-all-on.svg ├── send-to-device.svg ├── send.svg ├── share.svg ├── shield-task.svg ├── sign-out.svg ├── sort.svg ├── star-line-horizontal.svg ├── synced-tabs.svg ├── tab-bottom-corner-left-australis-clipped.svg ├── tab-bottom-corner-left-australis.svg ├── tab-bottom-corner-left-chrome-clipped.svg ├── tab-bottom-corner-left-chrome.svg ├── tab-bottom-corner-left-chromeLegacy-clipped.svg ├── tab-bottom-corner-left-chromeLegacy.svg ├── tab-bottom-corner-left-edge-clipped.svg ├── tab-bottom-corner-left-edge.svg ├── tab-bottom-corner-left-wave-clipped.svg ├── tab-bottom-corner-left-wave.svg ├── tab-bottom-corner-left.svg ├── tab-bottom-corner-right-australis-cilpped.svg ├── tab-bottom-corner-right-australis.svg ├── tab-bottom-corner-right-chrome-clipped.svg ├── tab-bottom-corner-right-chrome.svg ├── tab-bottom-corner-right-chromeLegacy-clipped.svg ├── tab-bottom-corner-right-chromeLegacy.svg ├── tab-bottom-corner-right-edge-clipped.svg ├── tab-bottom-corner-right-edge.svg ├── tab-bottom-corner-right-wave-clipped.svg ├── tab-bottom-corner-right-wave.svg ├── tab-bottom-corner-right.svg ├── tab-copy.svg ├── tab-desktop-multiple-bottom.svg ├── tab-multiple.svg ├── tab-unload.svg ├── tab.svg ├── tag-open.svg ├── text-direction-horizontal-ltr.svg ├── text-number-format.svg ├── text-proofing-tools.svg ├── text-sort-ascending.svg ├── time-picker.svg ├── timer10.svg ├── toolbar.svg ├── toolbarButton-download.svg ├── toolbox.svg ├── undo.svg ├── unpin-tab.svg ├── vertical-line.svg ├── video-clip.svg ├── video-snapshot.svg ├── video.svg ├── weather-snowflake.svg ├── welcome-back.svg ├── whatsnew.svg ├── window-dev-tools.svg ├── window.svg └── wrench-filled.svg ├── install.ps1 ├── install.sh ├── macos-native-tabbar.css ├── package.json ├── src ├── autohide │ ├── _back_button.scss │ ├── _bookmarkbar.scss │ ├── _common.scss │ ├── _fill_urlbar.scss │ ├── _forward_button.scss │ ├── _index.scss │ ├── _infobar.scss │ ├── _navbar.scss │ ├── _page_action.scss │ ├── _sidebar.scss │ ├── _tab.scss │ ├── _tabbar.scss │ ├── _toolbar_overlap.scss │ └── sidebar │ │ ├── _overlap.scss │ │ └── _static.scss ├── bookmarkbar │ ├── _index.scss │ └── _multi_row.scss ├── centered │ ├── _bookmarkbar.scss │ ├── _index.scss │ ├── _tab.scss │ ├── _urlbar.scss │ └── tab │ │ ├── _content.scss │ │ ├── _label.scss │ │ └── _layout.scss ├── combined │ ├── _back_forward_button.scss │ ├── _combined_circle_button.scss │ ├── _home_button.scss │ ├── _index.scss │ └── _reload_button.scss ├── compatibility │ ├── _index.scss │ ├── _os.scss │ ├── _others.scss │ └── _theme.scss ├── contents │ ├── _activity_stream.scss │ ├── _compatibility.scss │ ├── _context_menu.scss │ ├── _dark_mode.scss │ ├── _downloads.scss │ ├── _error_page.scss │ ├── _monospace.scss │ ├── _proton_color.scss │ ├── _proton_contents.scss │ ├── _rounding.scss │ ├── _video_player.scss │ ├── dark_mode │ │ ├── _accounts_com.scss │ │ ├── _addons_org.scss │ │ └── _support_org.scss │ └── proton_contents │ │ ├── _about_cache.scss │ │ ├── _about_checkerboard.scss │ │ ├── _about_memory.scss │ │ ├── _about_plugins.scss │ │ ├── _about_preferences.scss │ │ ├── _directory_view.scss │ │ ├── _field_border.scss │ │ ├── _proton_commons.scss │ │ └── _view_source.scss ├── counter │ ├── _bookmark_menu.scss │ ├── _index.scss │ └── _tab.scss ├── decoration │ ├── _animate.scss │ ├── _cursor.scss │ ├── _download_panel.scss │ ├── _field_border.scss │ ├── _index.scss │ ├── _panel_arrow.scss │ └── _panel_button_separator.scss ├── fullscreen │ ├── _index.scss │ ├── _overlap.scss │ └── _show_bookmarkbar.scss ├── hidden │ └── _index.scss ├── icons │ ├── _activity_stream.scss │ ├── _addon_page.scss │ ├── _context_menu.scss │ ├── _global_menu.scss │ ├── _global_menubar.scss │ ├── _index.scss │ ├── _library.scss │ ├── _panel.scss │ ├── context_menu │ │ ├── _content_area.scss │ │ ├── _downloads.scss │ │ ├── _others.scss │ │ ├── _place.scss │ │ └── _tab_toolbar.scss │ ├── fork_browsers │ │ ├── _floorp.scss │ │ ├── _index.scss │ │ ├── _tor_browser.scss │ │ └── _waterfox.scss │ └── layout │ │ ├── _activity_stream.scss │ │ ├── _bookmark_menu.scss │ │ ├── _menu.scss │ │ ├── _menu_common.scss │ │ ├── _menu_contents.scss │ │ └── _panel.scss ├── leptonChrome.scss ├── leptonContent.scss ├── library │ ├── _chrome.scss │ ├── _contents.scss │ ├── _folder_icons.scss │ ├── _menubar.scss │ ├── _proton.scss │ └── _proton_contents.scss ├── navbar │ ├── _as_sidebar.scss │ └── _index.scss ├── others │ ├── _findbar_floating_on_top.scss │ └── _index.scss ├── padding │ ├── _bookmark_menu.scss │ ├── _bookmarkbar.scss │ ├── _drag_space.scss │ ├── _first_tab.scss │ ├── _global_menubar.scss │ ├── _index.scss │ ├── _infobar.scss │ ├── _menu.scss │ ├── _navbar.scss │ ├── _panel.scss │ ├── _panel_header.scss │ ├── _popup_panel.scss │ ├── _tab_padding.scss │ ├── _tabbar_height.scss │ ├── _tabbar_width.scss │ ├── _toolbar_button.scss │ ├── _urlbar.scss │ ├── _urlview_expanding.scss │ └── _urlview_result.scss ├── panel │ ├── _full_width_padding.scss │ ├── _full_width_separator.scss │ ├── _index.scss │ └── _remove_strip.scss ├── rounding │ ├── _dialog.scss │ ├── _index.scss │ ├── _library.scss │ └── _square.scss ├── sidebar │ ├── _index.scss │ └── _overlap.scss ├── tab │ ├── _clipped_tab.scss │ ├── _connect_to_window.scss │ ├── _container_tab.scss │ ├── _crashed_tab.scss │ ├── _index.scss │ ├── _newtab_button.scss │ ├── _picture_in_picture_tab.scss │ ├── _selected_tab.scss │ ├── _sound_tab.scss │ ├── _unload_tab.scss │ ├── _unselected_tab.scss │ ├── clipped_tab │ │ ├── _always_show_tab_icon.scss │ │ ├── _letters_cleary.scss │ │ ├── _pinned_close_button.scss │ │ └── _show_close_button_at_hover.scss │ ├── newtab_button │ │ ├── _looks_like_tab.scss │ │ ├── _proton_like_button.scss │ │ └── _smaller_button.scss │ ├── selected_tab │ │ ├── _bottom_rounded_corner.scss │ │ ├── _bottom_rounded_corner_others.scss │ │ ├── _box_shadow.scss │ │ ├── _color_like_toolbar.scss │ │ ├── _multi_selected.scss │ │ └── _photon_like_contextline.scss │ ├── sound_tab │ │ ├── _hide_label.scss │ │ ├── _show_label.scss │ │ └── _show_with_favicons.scss │ └── unselected_tab │ │ ├── _bar_separator.scss │ │ ├── _dynamic_separator.scss │ │ └── _static_separator.scss ├── tabbar │ ├── _as_titlebar.scss │ ├── _fill_width.scss │ ├── _index.scss │ ├── _layout.scss │ ├── _multi_row.scss │ ├── _on_bottom.scss │ ├── _one_liner.scss │ ├── _unscroll.scss │ └── layout │ │ ├── _navbar_padding.scss │ │ ├── _window_control.scss │ │ └── _window_control_size.scss ├── theme │ ├── _built_in.scss │ ├── _dark_blue_accent.scss │ ├── _dark_blue_color.scss │ ├── _fully_color.scss │ ├── _fully_dark.scss │ ├── _index.scss │ ├── _monospace.scss │ ├── _proton_chrome.scss │ ├── _proton_color.scss │ ├── _system_default_theme.scss │ ├── _waterfox.scss │ ├── proton_chrome │ │ ├── _cert.scss │ │ ├── _library_popup.scss │ │ ├── _page_info.scss │ │ ├── _proton_commons.scss │ │ └── _sanitize_everything.scss │ └── system_default_theme │ │ ├── _gtk.scss │ │ ├── _mac.scss │ │ ├── _urlbar_focus_color.scss │ │ ├── _win10.scss │ │ └── _win7.scss ├── urlview │ ├── _always_show_page_actions.scss │ ├── _as_launcher.scss │ ├── _focus_item_border.scss │ ├── _full_width_padding.scss │ ├── _go_button_when_typing.scss │ ├── _iconbox_as_separator.scss │ ├── _index.scss │ └── _move_icon_to_left.scss └── utils │ ├── _accent_color.scss │ ├── _color_scheme.scss │ ├── _each.scss │ ├── _has.scss │ ├── _list.scss │ ├── _media.scss │ ├── _moz_box.scss │ ├── _moz_document.scss │ ├── _native_menu.scss │ ├── _one_liner.scss │ ├── _option.scss │ ├── _os.scss │ ├── _proton_elements.scss │ ├── _theme.scss │ └── _window_control.scss ├── te6-custom-content.css ├── te6-custom.css ├── user.js ├── userChrome.css ├── userContent.css ├── waterfox.sh └── yarn.lock /LEPTON: -------------------------------------------------------------------------------- 1 | [Info] 2 | Branch=master 3 | -------------------------------------------------------------------------------- /__tests__/_has.test.scss: -------------------------------------------------------------------------------- 1 | @use "true" as *; 2 | @use "example" as *; 3 | @use "../src/utils/has" as *; 4 | 5 | @include test-module("`:has()` selector test [mix]") { 6 | @include test("exist `:has()`") { 7 | @include assert { 8 | @include output { 9 | @include Has { 10 | @include example; 11 | } 12 | } 13 | @include expect { 14 | @supports selector(:has(a)) { 15 | @include example; 16 | } 17 | } 18 | } 19 | } 20 | @include test("don't exist `:has()`") { 21 | @include assert { 22 | @include output { 23 | @include NotHas { 24 | @include example; 25 | } 26 | } 27 | @include expect { 28 | @supports not selector(:has(a)) { 29 | @include example; 30 | } 31 | } 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /__tests__/example.scss: -------------------------------------------------------------------------------- 1 | @mixin example_tag() { 2 | body { 3 | @content; 4 | } 5 | } 6 | @mixin example_property() { 7 | font-size: 16px; 8 | } 9 | 10 | @mixin example() { 11 | @include example_tag { 12 | @include example_property; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /__tests__/list.test.scss: -------------------------------------------------------------------------------- 1 | @use "true" as *; 2 | @use "../src/utils/list"; 3 | 4 | // TODO: Need more tests.. 5 | $simpleList: (ab cd efgh ijk); 6 | $dupList: (ab cd efgh efgh efgh ijk); 7 | 8 | @include test-module("Remove at list [fn]") { 9 | @include test("simple") { 10 | @include assert-equal( 11 | list.remove($simpleList, "cd"), 12 | (ab efgh ijk) 13 | ); 14 | } 15 | 16 | @include test("duplicate") { 17 | @include assert-equal( 18 | list.remove($dupList, "efgh"), 19 | (ab cd ijk) 20 | ); 21 | } 22 | } 23 | 24 | @include test-module("Convert to str [fn]") { 25 | @include test("simple") { 26 | @include assert-equal( 27 | list.to-string($simpleList), 28 | (((null ab) cd) efgh) ijk 29 | ); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /__tests__/native_menu.test.scss: -------------------------------------------------------------------------------- 1 | @use "true" as *; 2 | @use "example" as *; 3 | @use "../src/utils/native_menu"; 4 | 5 | @include test-module("Native Menu Option [mix]") { 6 | @include test("simple") { 7 | @include assert { 8 | @include output { 9 | @include native_menu.NativeMenu { 10 | @include example; 11 | } 12 | @include native_menu.NativeMenuPopup { 13 | @include example; 14 | } 15 | @include native_menu.WinNativeMenu { 16 | @include example; 17 | } 18 | @include native_menu.WinNonNativeMenu { 19 | @include example; 20 | } 21 | } 22 | @include expect { 23 | @supports -moz-bool-pref("widget.macos.native-context-menus") or -moz-bool-pref("widget.gtk.native-context-menus") { 24 | @include example; 25 | } 26 | menupopup:is(#historyMenuPopup, #bookmarksMenuPopup), 27 | menupopup:not([placespopup="true"]) { 28 | @include example; 29 | } 30 | @media not (-moz-windows-non-native-menus) { 31 | @include example; 32 | } 33 | @media (-moz-windows-non-native-menus) { 34 | @include example; 35 | } 36 | } 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /__tests__/scss.spec.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const sassTrue = require("sass-true"); 3 | const glob = require("fast-glob"); 4 | 5 | // https://www.educative.io/blog/sass-tutorial-unit-testing-with-sass-true 6 | // Find all of the Sass files that end in `*.test.scss` in any directory of this project. 7 | // I use path.resolve because True requires absolute paths to compile test files. 8 | const pattern = path.resolve(process.cwd(), "__tests__/**/*.test.scss"); 9 | const sassTestFiles = glob.sync([pattern]); 10 | 11 | // Run True on every file found with the describe and it methods provided 12 | sassTestFiles.forEach(file => { 13 | describe(file, () => sassTrue.runSass({ file }, { describe, it })); 14 | }); 15 | -------------------------------------------------------------------------------- /icons/add-device.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /icons/arrow-between-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/arrow-repeat-all.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/arrow-sort-down-lines.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/arrow-swap.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /icons/auto-fit-width.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/blank.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /icons/book-add.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /icons/book.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/bookmark-multiple.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/bookmarksMenu-open.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /icons/bookmarksMenu-open2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/bookmarksToolbar-open.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/broom.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/bug.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | -------------------------------------------------------------------------------- /icons/calendar-agenda.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /icons/checkmark-circle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/code.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/command-frames.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /icons/command-pick.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /icons/command-responsivemode.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /icons/container-openin-16.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /icons/content-view.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/copy-select.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/dashboard.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /icons/developer.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /icons/dismiss-filled.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/document-endnote.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/document-landscape-split-hint.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/document-search.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | -------------------------------------------------------------------------------- /icons/drawer-arrow-download.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/edit-copy.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /icons/edit-paste-go.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/edit-paste-search.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/enter-fullscreen.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/eraser.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/exit-fullscreen.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/eye-hide.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/eye-show.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/eye-tracking-off.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/filter-dismiss.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/filter-reload.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/fluid.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/folder-globe.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/folder-open.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /icons/folder.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/highlight.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/history-reverse.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/image-add.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/image-alt-text.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /icons/image-arrow-counterclockwise.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/image-copy.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /icons/image.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/import-export.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /icons/key-multiple.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /icons/link-square.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/link.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /icons/lock-closed.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/mail-inbox-all.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/mail-inbox.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/merge.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/movetowindow-16.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /icons/new-tab-forward.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/new-tab-multiple.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/new-tab-skip-forward.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/panelarrow-vertical-reverse.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/panelarrow-vertical.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /icons/password.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/paste.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /icons/performance.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /icons/pin-tab.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /icons/play.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/plug-disconnected.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/pocket-outline.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /icons/private-favicon.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /icons/pulse-square.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/quit.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /icons/redo.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /icons/refresh-cw.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /icons/reload-auto.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/reload.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /icons/resize-image.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/resize.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /icons/restore-session.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /icons/screenshot.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | -------------------------------------------------------------------------------- /icons/select-all-on.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /icons/send-to-device.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /icons/send.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 9 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /icons/share.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /icons/shield-task.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/sign-out.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /icons/sort.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /icons/star-line-horizontal.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/tab-bottom-corner-left-australis-clipped.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/tab-bottom-corner-left-australis.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /icons/tab-bottom-corner-left-chrome-clipped.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/tab-bottom-corner-left-chrome.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /icons/tab-bottom-corner-left-chromeLegacy-clipped.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/tab-bottom-corner-left-chromeLegacy.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /icons/tab-bottom-corner-left-edge-clipped.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/tab-bottom-corner-left-edge.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /icons/tab-bottom-corner-left-wave-clipped.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/tab-bottom-corner-left-wave.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /icons/tab-bottom-corner-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /icons/tab-bottom-corner-right-australis-cilpped.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/tab-bottom-corner-right-australis.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /icons/tab-bottom-corner-right-chrome-clipped.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/tab-bottom-corner-right-chrome.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /icons/tab-bottom-corner-right-chromeLegacy-clipped.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/tab-bottom-corner-right-chromeLegacy.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /icons/tab-bottom-corner-right-edge-clipped.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/tab-bottom-corner-right-edge.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /icons/tab-bottom-corner-right-wave-clipped.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/tab-bottom-corner-right-wave.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /icons/tab-bottom-corner-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /icons/tab-copy.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/tab-desktop-multiple-bottom.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/tab-multiple.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/tab-unload.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/tab.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /icons/tag-open.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /icons/text-direction-horizontal-ltr.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/text-proofing-tools.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /icons/text-sort-ascending.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/timer10.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/toolbar.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /icons/toolbarButton-download.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/toolbox.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /icons/undo.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /icons/unpin-tab.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /icons/vertical-line.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /icons/video-clip.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/video-snapshot.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/video.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/weather-snowflake.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/whatsnew.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /icons/window.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /icons/wrench-filled.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Lepton", 3 | "version": "7.0.0", 4 | "description": "I respect proton UI and aim to improve it. ", 5 | "author": "alstjr7375 ", 6 | "license": "MPL 2.0", 7 | "private": true, 8 | "repository": { 9 | "type": "git", 10 | "url": "git+https://github.com/black7375/Firefox-UI-Fix.git" 11 | }, 12 | "bugs": { 13 | "url": "https://github.com/black7375/Firefox-UI-Fix/issues" 14 | }, 15 | "homepage": "https://github.com/black7375/Firefox-UI-Fix#readme", 16 | "scripts": { 17 | "build": "sass --no-source-map src/leptonChrome.scss css/leptonChrome.css && sass --no-source-map src/leptonContent.scss css/leptonContent.css && prettier --write css/leptonChrome.css css/leptonContent.css", 18 | "format": "prettier --write .", 19 | "test": "jest", 20 | "validate": "csstree-validator css/leptonChrome.css; csstree-validator css/leptonContent.css" 21 | }, 22 | "devDependencies": { 23 | "csstree-validator": "^3.0.0", 24 | "fast-glob": "^3.2.12", 25 | "jest": "^29.3.1", 26 | "jest-environment-node-single-context": "^29.0.0", 27 | "prettier": "^2.7.1", 28 | "sass": "^1.56.1", 29 | "sass-true": "^6.1.0" 30 | }, 31 | "jest": { 32 | "testEnvironment": "jest-environment-node-single-context" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/autohide/_back_button.scss: -------------------------------------------------------------------------------- 1 | :root:not([customizing="true"]) #back-button[disabled="true"] { 2 | margin-left: var(--uc-toolbarbutton-hide-size) !important; 3 | opacity: 0 !important; 4 | pointer-events: none; 5 | } 6 | 7 | @include Animate { 8 | #back-button { 9 | transition-property: background-color, opacity, margin-left !important; 10 | } 11 | #back-button[disabled="true"] { 12 | transition: background-color 1s var(--animation-easing-function), 13 | opacity 1s var(--animation-easing-function), 14 | margin-left 0.5s ease !important; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/autohide/_bookmarkbar.scss: -------------------------------------------------------------------------------- 1 | // Based on https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/autohide_bookmarks_toolbar.css 2 | #PersonalToolbar:not([customizing]) { 3 | margin-bottom: var(--uc-bm-hide-height); 4 | opacity: 0; 5 | will-change: margin-bottom, opacity; 6 | 7 | @include Option("userChrome.autohide.toolbar_overlap") { 8 | @include NotOption("userChrome.autohide.toolbar_overlap.allow_layout_shift") { 9 | @include NotHas { 10 | &[collapsed="true"] { 11 | visibility: visible !important; 12 | max-height: unset !important; 13 | } 14 | } 15 | } 16 | } 17 | } 18 | 19 | #navigator-toolbox:is(:hover, :focus-within) #PersonalToolbar:not([customizing]) { 20 | margin-bottom: 0; 21 | opacity: 1; 22 | } 23 | 24 | @include Animate { 25 | #PersonalToolbar:not([customizing]) { 26 | // --ext-theme-background-transition: background-color 0.1s cubic-bezier(.17,.67,.83,.67); 27 | transition: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), 28 | opacity var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), 29 | min-height 170ms ease-out, max-height 170ms ease-out, var(--ext-theme-background-transition) !important; 30 | } 31 | #navigator-toolbox:is(:hover, :focus-within) #PersonalToolbar:not([customizing]) { 32 | transition-delay: 0s !important; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/autohide/_fill_urlbar.scss: -------------------------------------------------------------------------------- 1 | #nav-bar:not(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) #urlbar-container { 2 | @include BoxOrder(0); 3 | min-width: calc(var(--uc-navbar-width, 100vw) - ((2 * var(--urlbar-margin-inline)) + var(--uc-window-drag-space-pre, 0px) + var(--uc-navbar-gap, 0px))) !important; 4 | } 5 | 6 | @include Option("userChrome.tabbar.one_liner") { 7 | #nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) { 8 | --uc-tabbar-width: calc(100vw - var(--uc-navbar-width-origin)); 9 | } 10 | } 11 | 12 | @include Animate { 13 | @include OneLiner { 14 | #nav-bar { 15 | transition: margin-inline var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), 16 | var(--ext-theme-background-transition) !important; 17 | } 18 | #nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) { 19 | transition-delay: 0s !important; 20 | } 21 | } 22 | 23 | @include OneLinerNavbarContent { 24 | #urlbar-container { 25 | transition: min-width var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay); 26 | } 27 | #nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) #urlbar-container { 28 | transition-delay: 0s !important; 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/autohide/_forward_button.scss: -------------------------------------------------------------------------------- 1 | :root:not([customizing="true"]) #forward-button[disabled="true"] { 2 | margin-left: var(--uc-toolbarbutton-hide-size) !important; 3 | opacity: 0 !important; 4 | pointer-events: none; 5 | } 6 | 7 | @include Animate { 8 | #forward-button { 9 | transition-property: background-color, opacity, margin-left !important; 10 | } 11 | #forward-button[disabled="true"] { 12 | transition: background-color 1s var(--animation-easing-function), 13 | opacity 1s var(--animation-easing-function), 14 | margin-left 0.5s ease !important; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/autohide/_index.scss: -------------------------------------------------------------------------------- 1 | @include Option("userChrome.autohide.back_button", "userChrome.autohide.forward_button") { 2 | :root { 3 | --uc-toolbarbutton-hide-size: calc(-1 * (16px + (2 * (var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding))))); 4 | } 5 | } 6 | 7 | @include moz-document(url "chrome://browser/content/browser.xhtml") 8 | { 9 | @include Option("userChrome.autohide.back_button") { 10 | @import "back_button"; 11 | } 12 | @include Option("userChrome.autohide.forward_button") { 13 | @import "forward_button"; 14 | } 15 | } 16 | @include Option("userChrome.autohide.page_action") { 17 | @import "page_action"; 18 | } 19 | 20 | @include Option("userChrome.autohide.tab") { 21 | @import "tab"; 22 | } 23 | 24 | @import "common"; 25 | @include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar") { 26 | @include Option("userChrome.autohide.tabbar", "userChrome.tabbar.one_liner") { 27 | @import "tabbar"; 28 | } 29 | @include Option("userChrome.autohide.navbar", "userChrome.tabbar.one_liner") { 30 | @import "navbar"; 31 | } 32 | } 33 | @include Option("userChrome.autohide.bookmarkbar") { 34 | @import "bookmarkbar"; 35 | } 36 | @include Option("userChrome.autohide.infobar") { 37 | @import "infobar"; 38 | } 39 | 40 | @import "sidebar"; 41 | 42 | @include Option("userChrome.autohide.fill_urlbar") { 43 | @import "fill_urlbar"; 44 | } 45 | -------------------------------------------------------------------------------- /src/autohide/_navbar.scss: -------------------------------------------------------------------------------- 1 | @include OneLinerNavbar { 2 | #nav-bar:not([customizing]) { 3 | margin-bottom: var(--uc-navbar-hide-height); 4 | opacity: 0; 5 | will-change: margin-bottom, opacity; 6 | } 7 | #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { 8 | margin-bottom: 0; 9 | opacity: 1; 10 | } 11 | } 12 | 13 | @include Animate { 14 | #nav-bar:not([customizing]) { 15 | transition: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), 16 | opacity var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), 17 | var(--ext-theme-background-transition) !important; 18 | 19 | @include Option("userChrome.autohide.fill_urlbar") { 20 | transition: margin-inline var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), 21 | margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), 22 | opacity var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), 23 | var(--ext-theme-background-transition) !important; 24 | } 25 | } 26 | #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { 27 | transition-delay: 0s !important; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/autohide/_page_action.scss: -------------------------------------------------------------------------------- 1 | #page-action-buttons > .urlbar-page-action { 2 | margin-inline-end: calc(-16px - 2 * var(--urlbar-icon-padding) ); 3 | opacity: 0; 4 | } 5 | 6 | #urlbar-container:is(:hover, :focus-within) #page-action-buttons > .urlbar-page-action, 7 | .urlbar-page-action[open], 8 | .urlbar-page-action[open] ~ .urlbar-page-action { 9 | margin-inline-end: 0px !important; 10 | opacity: 1; 11 | } 12 | 13 | @include Animate { 14 | #page-action-buttons > .urlbar-page-action { 15 | transition: margin-inline-end 50ms var(--animation-easing-function) 900ms, 16 | opacity 1.5s var(--animation-easing-function) 600ms !important; 17 | 18 | @include Option("userChrome.decoration.animate") { 19 | transition: margin-inline-end 50ms var(--animation-easing-function) 900ms, 20 | opacity 1.5s var(--animation-easing-function) 600ms, 21 | background-color 2.5s var(--animation-easing-function) !important; 22 | } 23 | } 24 | #urlbar-container:is(:hover, :focus-within) #page-action-buttons > .urlbar-page-action, 25 | .urlbar-page-action[open], 26 | .urlbar-page-action[open] ~ .urlbar-page-action{ 27 | transition-delay: 0s !important; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/autohide/_sidebar.scss: -------------------------------------------------------------------------------- 1 | // Refer variable `src/sidebar/overlap` 2 | 3 | @include Option("userChrome.autohide.sidebar") { 4 | #sidebar-box { 5 | min-width: var(--uc-sidebar-width) !important; 6 | max-width: var(--uc-sidebar-width) !important; 7 | } 8 | 9 | :root[inFullscreen="true"] #sidebar-box { 10 | min-width: var(--uc-sidebar-activate-width) !important; 11 | max-width: var(--uc-sidebar-activate-width) !important; 12 | } 13 | 14 | @include Option("userChrome.sidebar.overlap") { 15 | @import "sidebar/overlap"; 16 | } 17 | @include NotOption("userChrome.sidebar.overlap") { 18 | @import "sidebar/static"; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/autohide/_tab.scss: -------------------------------------------------------------------------------- 1 | .tabbrowser-tab:not([multiselected]) .tab-content:not(:hover):not([selected]) { 2 | @include NotOption("userChrome.autohide.tab.opacity") { 3 | @include NotOption("userChrome.autohide.tab.blur") { 4 | margin-bottom: -64px; 5 | } 6 | } 7 | @include Option("userChrome.autohide.tab.opacity") { 8 | opacity: 0%; 9 | } 10 | @include Option("userChrome.autohide.tab.blur") { 11 | filter: blur(8px); 12 | } 13 | 14 | @include Animate { 15 | transition-timing-function: var(--animation-easing-function); 16 | transition-duration: 0.2s; 17 | transition-delay: 600ms; 18 | &:is(:hover, :focus-within) { 19 | transition-delay: 0s; 20 | } 21 | 22 | @include NotOption("userChrome.autohide.tab.opacity") { 23 | @include NotOption("userChrome.autohide.tab.blur") { 24 | transition-property: margin-bottom; 25 | } 26 | } 27 | @include Option("userChrome.autohide.tab.opacity") { 28 | transition-property: opacity; 29 | } 30 | @include Option("userChrome.autohide.tab.blur") { 31 | transition-property: filter; 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/bookmarkbar/_index.scss: -------------------------------------------------------------------------------- 1 | @include Option("userChrome.bookmarkbar.multi_row") { 2 | @import "_multi_row"; 3 | } 4 | -------------------------------------------------------------------------------- /src/bookmarkbar/_multi_row.scss: -------------------------------------------------------------------------------- 1 | // Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/multi-row_bookmarks.css made available under Mozilla Public License v. 2.0 2 | // See the above repository for updates as well as full license text. 3 | 4 | #PersonalToolbar { 5 | --uc-multirow-bookmark-rows: 3; 6 | --uc-multirow-bookmark-row-margin: 2px; 7 | max-height: none !important; 8 | } 9 | 10 | #PlacesToolbar > hbox { 11 | display: block; 12 | width: 100vw; 13 | } 14 | 15 | #PlacesToolbarItems { 16 | display: flex; 17 | flex-wrap: wrap; 18 | overflow-y: auto; 19 | scroll-snap-type: y mandatory; 20 | max-height: calc(var(--uc-multirow-bookmark-rows) * 21 | (var(--uc-bm-height, calc(20px + (2 * var(--bookmark-block-padding, 4px)))) + 22 | (2 * var(--uc-multirow-bookmark-row-margin)))) !important; 23 | } 24 | 25 | // Hide the all-bookmarks button 26 | #PlacesChevron { 27 | display: none; 28 | } 29 | 30 | // Add some spacing between rows 31 | #PlacesToolbarItems > .bookmark-item { 32 | scroll-snap-align: start; 33 | margin-block: var(--uc-multirow-bookmark-row-margin) !important; 34 | } 35 | -------------------------------------------------------------------------------- /src/centered/_bookmarkbar.scss: -------------------------------------------------------------------------------- 1 | #PlacesToolbarItems { 2 | display: flex !important; 3 | justify-content: safe center !important; 4 | } 5 | -------------------------------------------------------------------------------- /src/centered/_index.scss: -------------------------------------------------------------------------------- 1 | /*= Centered - Tab ===========================================================*/ 2 | @import "tab"; 3 | 4 | /*= Centered - URL Bar =======================================================*/ 5 | @include Option("userChrome.centered.urlbar") { 6 | @import "urlbar"; 7 | } 8 | 9 | /*= Centered - Bookmark Bar ==================================================*/ 10 | @include Option("userChrome.centered.bookmarkbar") { 11 | @import "bookmarkbar"; 12 | } 13 | -------------------------------------------------------------------------------- /src/centered/_tab.scss: -------------------------------------------------------------------------------- 1 | @include Option("userChrome.centered.tab") { 2 | @import "tab/layout"; 3 | 4 | @include NotOption("userChrome.centered.tab.label") { 5 | @import "tab/content"; 6 | } 7 | @include Option("userChrome.centered.tab.label") { 8 | @import "tab/label"; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/centered/_urlbar.scss: -------------------------------------------------------------------------------- 1 | // Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/urlbar_centered_text.css made available under Mozilla Public License v. 2.0 2 | // See the above repository for updates as well as full license text. 3 | 4 | #urlbar:not([focused]) { 5 | #urlbar-input, 6 | .urlbar-input { 7 | text-align: center !important; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/centered/tab/_content.scss: -------------------------------------------------------------------------------- 1 | .tab-icon-stack { 2 | @include BoxFlex(1); 3 | justify-content: end; 4 | } 5 | -------------------------------------------------------------------------------- /src/centered/tab/_label.scss: -------------------------------------------------------------------------------- 1 | /* Based on https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/centered_tab_label.css */ 2 | .tab-label-container { 3 | display: grid; 4 | justify-content: safe center; 5 | align-items: safe center; 6 | } 7 | .tab-label, 8 | .tab-secondary-label { 9 | overflow: clip; 10 | } 11 | 12 | .tabbrowser-tab[selected]:not(:hover) .tab-label-container:not([textoverflow]), 13 | .tabbrowser-tab:not(:hover,[pinned]) .tab-label-container:not([textoverflow]) { 14 | margin-inline-end: 5px; // userChrome.tab.close_button_at_hover 6px - 1px 15 | } 16 | -------------------------------------------------------------------------------- /src/centered/tab/_layout.scss: -------------------------------------------------------------------------------- 1 | .tabbrowser-tab[selected]:not(:hover) .tab-label-container:not([textoverflow]), 2 | .tabbrowser-tab:not(:hover,[pinned]) .tab-label-container:not([textoverflow]) { 3 | margin-inline-end: 5px; 4 | } 5 | 6 | @include Option("userChrome.tab.close_button_at_hover") { 7 | #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not(:hover,[pinned]) .tab-label-container:not([textoverflow]) { 8 | margin-inline-end: 1px; 9 | } 10 | #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([selected]):not(:hover, [pinned]) .tab-label-container label { 11 | padding-inline-end: 18px; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/combined/_home_button.scss: -------------------------------------------------------------------------------- 1 | @import "combined_circle_button"; 2 | 3 | #nav-bar-customization-target > #home-button { 4 | position: relative; 5 | @include circle_button_shape; 6 | 7 | &:hover > .toolbarbutton-icon { 8 | @include circle_button_background_hover; 9 | } 10 | &:hover:active > .toolbarbutton-icon { 11 | @include circle_button_background_active; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/combined/_reload_button.scss: -------------------------------------------------------------------------------- 1 | // Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/reload_button_in_urlbar.css made available under Mozilla Public License v. 2.0 2 | // See the above repository for updates as well as full license text. 3 | #urlbar { 4 | padding-right: calc(var(--uc-toolbarbutton-size) - (var(--urlbar-margin-inline) / 2)); 5 | } 6 | 7 | #nav-bar-customization-target > #stop-reload-button { 8 | z-index: 3; 9 | position: relative; 10 | 11 | --toolbarbutton-hover-background: var(--urlbar-box-hover-bgcolor); 12 | color: var(--urlbar-box-hover-text-color) !important; 13 | 14 | margin-left: calc( -1 * (var(--uc-toolbarbutton-size) + var(--urlbar-margin-inline))); 15 | } 16 | 17 | #nav-bar-customization-target > #stop-reload-button > .toolbarbutton-1 > .toolbarbutton-icon { 18 | width: var(--uc-urlbar-icon-size) !important; 19 | height: var(--uc-urlbar-icon-size) !important; 20 | 21 | padding: var(--urlbar-icon-padding) !important; 22 | } 23 | -------------------------------------------------------------------------------- /src/compatibility/_index.scss: -------------------------------------------------------------------------------- 1 | /*= Theme - Compatibility ====================================================*/ 2 | @include Option("userChrome.compatibility.theme") { 3 | @import "theme"; 4 | } 5 | 6 | /*= OS - Compatibility =======================================================*/ 7 | @include Option("userChrome.compatibility.os") { 8 | @import "os"; 9 | } 10 | 11 | /*= Others - Compatibility ===================================================*/ 12 | @import "others"; 13 | -------------------------------------------------------------------------------- /src/compatibility/_others.scss: -------------------------------------------------------------------------------- 1 | @include Option("userChrome.compatibility.panel_cutoff") { 2 | #appMenu-popup panelview { 3 | width: 24.5em !important; /* can modify panel width, Original: 22.5em */ 4 | } 5 | } 6 | 7 | @include Option("userChrome.compatibility.navbar_top_border") { 8 | #nav-bar { 9 | box-shadow: none !important; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/contents/_compatibility.scss: -------------------------------------------------------------------------------- 1 | @include moz-document(url-prefix "about:preferences") { 2 | .content-blocking-warning.info-box-container > hbox > .content-blocking-warning-image { 3 | margin-inline-start: -7px !important; 4 | margin-inline-end: 8px !important; // Original: 6px 5 | width: 20px !important; // ESR(102): 16px, Nightly(116): 27px 6 | } 7 | 8 | #pane-experimental-search-results-header, 9 | #pane-experimental-subtitle { 10 | min-height: 27px !important; // Original: 30px 11 | padding-inline-start: 35px !important; 12 | } 13 | 14 | // Align & Separator #722 15 | #firefoxExperimentalCategory { 16 | &:not([hidden="true"]) { 17 | display: inline-block; 18 | } 19 | 20 | > label { 21 | float: left; 22 | } 23 | > hbox { 24 | transform: translateY(5px); 25 | } 26 | } 27 | #pane-experimental-featureGates > html|p[data-l10n-id="pane-experimental-description2"] { 28 | border-bottom: 1px solid var(--in-content-border-color); 29 | padding-bottom: 1.5em; 30 | } 31 | } 32 | 33 | // #695 34 | @include moz-document(url-prefix "about:addons") { 35 | #updates-message + .page-options-menu > .more-options-button { 36 | box-sizing: content-box; 37 | padding: 0 !important; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/contents/_context_menu.scss: -------------------------------------------------------------------------------- 1 | @include moz-document( 2 | url "chrome://browser/content/places/places.xhtml", 3 | url "about:downloads" 4 | ) { 5 | @import "../icons/layout/menu_contents"; 6 | 7 | /*= Context Menu ===========================================================*/ 8 | @include Option("userChrome.icon.context_menu") { 9 | /* Icon lists */ 10 | @import "../icons/context_menu/downloads"; 11 | @import "../icons/context_menu/place"; 12 | } 13 | @include Option("userChrome.icon.global_menu") { 14 | @import "../icons/library"; 15 | } 16 | } 17 | 18 | @include moz-document(url-prefix "about:addons") { 19 | @include Option("userChrome.icon.context_menu") { 20 | @import "../icons/addon_page"; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/contents/_dark_mode.scss: -------------------------------------------------------------------------------- 1 | @include Dark { 2 | @import "dark_mode/addons_org"; 3 | @import "dark_mode/support_org"; 4 | @import "dark_mode/accounts_com"; 5 | } 6 | -------------------------------------------------------------------------------- /src/contents/_downloads.scss: -------------------------------------------------------------------------------- 1 | @include moz-document(url-prefix "about:downloads") { 2 | @include Animate { 3 | @include Option("userChrome.decoration.download_panel") { 4 | @import "../decoration/download_panel"; 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/contents/_monospace.scss: -------------------------------------------------------------------------------- 1 | @include moz-document( 2 | url-prefix "about:", 3 | url-prefix "chrome://", 4 | regexp "^((jar:)?file:\/\/\/).*\/$" 5 | ) { 6 | @import "../theme/monospace"; 7 | } 8 | -------------------------------------------------------------------------------- /src/contents/_proton_color.scss: -------------------------------------------------------------------------------- 1 | @include moz-document( 2 | url-prefix "about:", 3 | url-prefix "chrome://", 4 | url-prefix "https://addons.mozilla.org", 5 | url-prefix "https://support.mozilla.org", 6 | url-prefix "https://accounts.firefox.com", 7 | url-prefix "view-source", 8 | regexp "^((jar:)?file:\/\/\/).*\/$" 9 | ) { 10 | @import "../theme/proton_color"; 11 | 12 | @include Option("userContent.page.proton_color.dark_blue_accent") { 13 | @include Dark { 14 | @import "../theme/dark_blue_color"; 15 | 16 | :host, :root { 17 | @include DarkBlueContent; 18 | } 19 | } 20 | } 21 | 22 | @include Option("userContent.page.proton_color.system_accent") { 23 | :host, :root { 24 | @include AccentColor("Highlight") { 25 | --in-content-primary-button-text-color: #{$accentTextColor} !important; 26 | 27 | --in-content-primary-button-background: #{$accentColor} !important; 28 | --in-content-primary-button-background-hover: color-mix(in srgb, black 10%, #{$accentColor}) !important; 29 | --in-content-primary-button-background-active: color-mix(in srgb, black 20%, #{$accentColor}) !important; 30 | } 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/contents/_proton_contents.scss: -------------------------------------------------------------------------------- 1 | /*= Common contents ==========================================================*/ 2 | @import "proton_contents/proton_commons"; 3 | 4 | /*= Field Border =============================================================*/ 5 | @include Option("userContent.page.field_border") { 6 | @include Animate { 7 | @import "proton_contents/field_border"; 8 | } 9 | } 10 | 11 | /*= View Source ==============================================================*/ 12 | @import "proton_contents/view_source"; 13 | 14 | /*= Directory View ===========================================================*/ 15 | @import "proton_contents/directory_view"; 16 | 17 | /*= about:plugins ============================================================*/ 18 | @import "proton_contents/about_plugins"; 19 | 20 | /*= about:cache ==============================================================*/ 21 | @import "proton_contents/about_cache"; 22 | 23 | /*= about:checkerboard =======================================================*/ 24 | @import "proton_contents/about_checkerboard"; 25 | 26 | /*= about:memory =============================================================*/ 27 | @import "proton_contents/about_memory"; 28 | 29 | /*= about:preferences ========================================================*/ 30 | @import "proton_contents/about_preferences"; 31 | 32 | /*= chrome://browser/content/places/places.xhtml =============================*/ 33 | @import "../library/contents"; 34 | -------------------------------------------------------------------------------- /src/contents/proton_contents/_about_cache.scss: -------------------------------------------------------------------------------- 1 | @include moz-document(url-prefix "about:cache") { 2 | table { 3 | padding: 0 !important; 4 | } 5 | 6 | th, 7 | td { 8 | padding: 4px !important; 9 | text-align: match-parent !important; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/contents/proton_contents/_about_checkerboard.scss: -------------------------------------------------------------------------------- 1 | @include moz-document(url-prefix "about:checkerboard") { 2 | #canvas { 3 | border: 1px solid var(--in-content-border-color) !important; 4 | } 5 | #excludePageFromZoom { 6 | vertical-align: bottom !important; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/contents/proton_contents/_about_memory.scss: -------------------------------------------------------------------------------- 1 | @include moz-document(url-prefix "about:memory") { 2 | .opsRow, 3 | .section { 4 | background-color: var(--in-content-box-background) !important; 5 | color: var(--in-content-page-color) !important; 6 | } 7 | .opsRowLabel input { 8 | vertical-align: bottom !important; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/contents/proton_contents/_about_plugins.scss: -------------------------------------------------------------------------------- 1 | @include moz-document(url-prefix "about:plugins") { 2 | .notice { 3 | background: var(--in-content-box-background) !important; 4 | border: 1px solid var(--in-content-border-color) !important; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /src/contents/proton_contents/_about_preferences.scss: -------------------------------------------------------------------------------- 1 | @include moz-document(url-prefix "chrome://browser/content") { 2 | @import "../../theme/proton_chrome/sanitize_everything"; 3 | } 4 | -------------------------------------------------------------------------------- /src/contents/proton_contents/_directory_view.scss: -------------------------------------------------------------------------------- 1 | @include moz-document( 2 | url-prefix "about:sync-log", 3 | regexp "^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$" 4 | ) { 5 | body { 6 | background-color: var(--in-content-box-background) !important; 7 | margin: 4em auto !important; /* Override to default */ 8 | } 9 | thead a { 10 | color: var(--in-content-page-color) !important; 11 | } 12 | td ::before { 13 | vertical-align: top !important; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/contents/proton_contents/_field_border.scss: -------------------------------------------------------------------------------- 1 | @include moz-document(url-prefix "about:") { 2 | html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):not(#newtab-search-text):hover, 3 | html|textarea:hover, 4 | xul|search-textbox:hover { 5 | border-color: var(--in-content-focus-outline-color) !important; 6 | transition: border-color 0.5s var(--animation-easing-function); 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/counter/_bookmark_menu.scss: -------------------------------------------------------------------------------- 1 | menupopup[placespopup="true"] > menu.bookmark-item > .menu-right { 2 | counter-reset: bookmark-counts 0; 3 | } 4 | menupopup[placespopup="true"] > menu.bookmark-item::after { 5 | @include InlineBox; 6 | content: "(" counter(bookmark-counts) ")"; 7 | } 8 | 9 | menupopup[placespopup="true"] > menu.bookmark-item > .menu-iconic-highlightable-text, 10 | menupopup[placespopup="true"] > menu.bookmark-item > .menu-accel-container, 11 | menupopup[placespopup="true"] > menu.bookmark-item > .menu-right { 12 | @include BoxOrder(2); 13 | } 14 | 15 | menu.bookmark-item > menupopup[placespopup="true"] > .bookmark-item { 16 | counter-increment: bookmark-counts; 17 | } 18 | -------------------------------------------------------------------------------- /src/counter/_index.scss: -------------------------------------------------------------------------------- 1 | /*= Counter for Tab ==========================================================*/ 2 | @include Option("userChrome.counter.tab") { 3 | @import "tab"; 4 | } 5 | 6 | /*= Counter for Bookmark menu ================================================*/ 7 | @include Option("userChrome.counter.bookmark_menu") { 8 | @import "bookmark_menu"; 9 | } 10 | -------------------------------------------------------------------------------- /src/decoration/_cursor.scss: -------------------------------------------------------------------------------- 1 | #appMenu-proton-update-banner, 2 | #appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2, 3 | #appMenu-zoomReduce-button2, 4 | #appMenu-zoomReset-button2, 5 | #appMenu-zoomEnlarge-button2, 6 | #appMenu-fullscreen-button2, 7 | #panelMenu_showAllBookmarks, 8 | #PanelUI-historyMore, 9 | #appMenuClearRecentHistory:not([disabled]), 10 | #appMenu-library-recentlyClosedTabs > .restoreallitem.panel-subview-footer-button, 11 | #appMenu-library-recentlyClosedWindows > .restoreallitem.panel-subview-footer-button, 12 | #BMB_viewBookmarksSidebar, 13 | #BMB_bookmarksShowAllTop, 14 | #BMB_bookmarksShowAll, 15 | #import-button, 16 | menuitem.openintabs-menuitem, 17 | #downloadsListBox .downloadButton, 18 | #downloadsListBox .download-state[exists], 19 | #downloadsListBox .download-state[exists] .downloadDetails, 20 | #downloadsHistory, 21 | #protections-popup-footer .protections-popup-footer-button, 22 | #protections-popup-multiView .panel-subview-footer-button, 23 | #identity-popup-clear-sitedata-button, 24 | #identity-popup-more-info, 25 | #unified-extensions-manage-extensions, 26 | .unified-extensions-item-open-menu, 27 | .unified-extensions-item-menu-button.subviewbutton, 28 | #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title > .ac-text-overflow-container > .ac-title-text { 29 | cursor: pointer !important; 30 | } 31 | 32 | // TODO: For now, fxa-menu doesn't show any status. 33 | // (JS required, observe .syncNowBtn status) 34 | // #PanelUI-fxa-menu-syncnow-button[syncstatus="active"] { 35 | // cursor: progress !important; 36 | // } 37 | -------------------------------------------------------------------------------- /src/decoration/_download_panel.scss: -------------------------------------------------------------------------------- 1 | /* Accent Color for downloaded item */ 2 | #downloadsListBox .download-state[exists] .downloadDetails { 3 | color: var(--button-primary-bgcolor); 4 | &.downloadDetailsHover { 5 | color: var(--button-primary-hover-bgcolor); 6 | } 7 | } 8 | 9 | /* File moved or missing */ 10 | #downloadsListBox .download-state:not([exists], [state="0"]) { 11 | .downloadTarget { 12 | text-decoration: line-through; 13 | text-decoration-color: color-mix(in srgb, currentColor 65%, transparent); 14 | &:hover { 15 | text-decoration: none; 16 | } 17 | } 18 | .downloadTypeIcon { 19 | filter: grayscale(100%) !important; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/decoration/_field_border.scss: -------------------------------------------------------------------------------- 1 | /*- URL, Search Bar --------------------------------------------------------*/ 2 | #urlbar:hover:not([focused="true"]) > #urlbar-background, 3 | #searchbar:hover:not(:focus-within) { 4 | --toolbar-field-border-color: var(--toolbar-field-focus-border-color); 5 | } 6 | 7 | @include Option("userChrome.combined.urlbar_with_reload") { 8 | #nav-bar-customization-target > #stop-reload-button:hover ~ #urlbar-container #urlbar:not([focused="true"]) > #urlbar-background { 9 | --toolbar-field-border-color: var(--toolbar-field-focus-border-color); 10 | } 11 | } 12 | 13 | /*- Other Fields -----------------------------------------------------------*/ 14 | /* Sidebar */ 15 | .sidebar-panel[lwt-sidebar] #search-box:hover, 16 | body[lwt-sidebar] xul|search-textbox.tabsFilter:hover { 17 | border-color: var(--lwt-sidebar-highlight-background-color, Highlight) !important; 18 | } 19 | .sidebar-panel:not([lwt-sidebar]) #search-box:hover, 20 | body:not([lwt-sidebar]) xul|search-textbox.tabsFilter:hover { 21 | @include AccentColor { 22 | border-color: $accentColor !important; 23 | } 24 | } 25 | 26 | /* Others */ 27 | #editBMPanel_namePicker:hover, 28 | #editBMPanel_tagsField:hover, 29 | .findbar-container .findbar-textbox:hover { 30 | @include AccentColor { 31 | --input-border-color: color-mix(in srgb, var(--focus-outline-color, #{$accentColor}) 50%, transparent); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/decoration/_index.scss: -------------------------------------------------------------------------------- 1 | /*= Cursor Types =============================================================*/ 2 | @include Option("userChrome.decoration.cursor") { 3 | @import "cursor"; 4 | } 5 | 6 | /*= Panel UI Button Separator ================================================*/ 7 | @include Option("userChrome.decoration.panel_button_separator") { 8 | @import "panel_button_separator"; 9 | } 10 | 11 | /*= Panel UI Arrow ===========================================================*/ 12 | @include Option("userChrome.decoration.panel_arrow") { 13 | @import "panel_arrow"; 14 | } 15 | 16 | @include Animate { 17 | /*= Field Border ===========================================================*/ 18 | @include Option("userChrome.decoration.field_border") { 19 | @import "field_border"; 20 | } 21 | 22 | /*= Downloads Panel ========================================================*/ 23 | @include Option("userChrome.decoration.download_panel") { 24 | @import "download_panel"; 25 | } 26 | 27 | /*= Animate ================================================================*/ 28 | @include Option("userChrome.decoration.animate") { 29 | @import "animate"; 30 | } 31 | @include Option("userChrome.decoration.disable_panel_animate") { 32 | :root { 33 | --panelui-subview-transition-duration: 1ms !important; /* Disable top right corner menu sliding animation (0ms will not work!) */ 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/decoration/_panel_arrow.scss: -------------------------------------------------------------------------------- 1 | #appMenu-popup { 2 | background-image: url("../icons/panelarrow-vertical.svg"); 3 | background-repeat: no-repeat; 4 | background-position-x: right 10px; 5 | background-position-y: top; 6 | 7 | -moz-context-properties: fill, stroke; 8 | fill: var(--panel-background); 9 | stroke: var(--panel-border-color); 10 | 11 | &[side="top"] { 12 | margin-top: -8px !important; /* Original: -4px */ 13 | padding-top: 4px; 14 | } 15 | &[side="bottom"] { 16 | background-image: url("../icons/panelarrow-vertical-reverse.svg"); 17 | background-position-y: bottom; 18 | 19 | margin-bottom: -8px !important; /* Original: -4px */ 20 | padding-bottom: 4px; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/decoration/_panel_button_separator.scss: -------------------------------------------------------------------------------- 1 | :root:not([chromehidden~="toolbar"]) #PanelUI-button { 2 | // Original: not include at [uidensity=compact] 3 | margin-inline-start: 3px; 4 | padding-inline-start: 2px; 5 | border-inline-start: 1px solid; 6 | border-image: linear-gradient( 7 | transparent 4px, 8 | var(--toolbarseparator-color) 4px, 9 | var(--toolbarseparator-color) calc(100% - 4px), 10 | transparent calc(100% - 4px) 11 | ); 12 | border-image-slice: 1; 13 | } 14 | -------------------------------------------------------------------------------- /src/fullscreen/_index.scss: -------------------------------------------------------------------------------- 1 | @include Option("userChrome.fullscreen.overlap") { 2 | @include Option("browser.fullscreen.autohide") { 3 | @import "overlap"; 4 | } 5 | } 6 | 7 | @include Option("userChrome.fullscreen.show_bookmarkbar") { 8 | @import "show_bookmarkbar"; 9 | } 10 | -------------------------------------------------------------------------------- /src/fullscreen/_overlap.scss: -------------------------------------------------------------------------------- 1 | :root[sizemode="fullscreen"] #navigator-toolbox { 2 | position: fixed !important; /* Needed for content to take up entire height */ 3 | z-index: 1000 !important; /* Puts the UI above the content */ 4 | } 5 | 6 | :root[sizemode="fullscreen"] :-moz-any(#navigator-toolbox, #titlebar, #nav-bar, #PersonalToolbar) { 7 | width: 100%; /* Makes the UI take up the entire width */ 8 | } 9 | 10 | @include OS($linux) { 11 | /* Fix transparent background */ 12 | :root[tabsintitlebar][sizemode="fullscreen"] #TabsToolbar:not(:-moz-lwtheme) { 13 | appearance: auto !important; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/fullscreen/_show_bookmarkbar.scss: -------------------------------------------------------------------------------- 1 | :root:not([sizemode="fullscreen"]) #PersonalToolbar[initialized="true"]:not([collapsed="true"]), 2 | :root[sizemode="fullscreen"] #PersonalToolbar[initialized="true"] { 3 | visibility: unset !important; /* Makes the bookmarks toolbar visible if enabled */ 4 | } 5 | -------------------------------------------------------------------------------- /src/icons/_addon_page.scss: -------------------------------------------------------------------------------- 1 | // https://github.com/mozilla/gecko-dev/commit/260e4270fca18f2f6f59a1ffe4deccb5080a15f7 2 | button[role="menuitem"] { 3 | background-image: var(--icon, url("../icons/blank.svg")); /* Don't use !important. because of [checked] */ 4 | } 5 | 6 | panel-item { 7 | &[action="check-for-updates"] { 8 | // --icon: url("chrome://global/skin/icons/update-icon.svg"); 9 | // --icon: url("chrome://mozapps/skin/extensions/category-recent.svg"); 10 | // --icon: url("chrome://browser/skin/sync.svg"); 11 | --icon: url("../icons/refresh-cw.svg"); 12 | } 13 | 14 | &[action="view-recent-updates"] { 15 | // --icon: url("chrome://browser/skin/controlcenter/dashboard.svg"); 16 | --icon: url("chrome://global/skin/icons/info.svg"); 17 | } 18 | 19 | &[action="install-from-file"] { 20 | // --icon: url("chrome://browser/skin/import.svg"); 21 | --icon: url("chrome://devtools/skin/images/import.svg"); 22 | } 23 | 24 | &[action="debug-addons"] { 25 | --icon: url("../icons/bug.svg"); 26 | } 27 | 28 | &[action="set-update-automatically"] { 29 | --icon: url("chrome://devtools/skin/images/profiler-stopwatch.svg"); 30 | } 31 | 32 | &[action="reset-update-states"] { 33 | --icon: url("chrome://devtools/skin/images/debugging-workers.svg"); 34 | } 35 | 36 | &[action="manage-shortcuts"], 37 | &[data-l10n-id="preferences-addon-button"], 38 | &[data-l10n-id="manage-addon-button"] { 39 | --icon: url("chrome://global/skin/icons/settings.svg"); 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/icons/_context_menu.scss: -------------------------------------------------------------------------------- 1 | /** Context Menu - Icons ******************************************************/ 2 | @import "context_menu/tab_toolbar.scss"; 3 | @import "context_menu/content_area.scss"; 4 | @import "context_menu/downloads"; 5 | @import "context_menu/place"; 6 | @import "context_menu/others"; 7 | -------------------------------------------------------------------------------- /src/icons/_global_menubar.scss: -------------------------------------------------------------------------------- 1 | /*= main-menubar =============================================================*/ 2 | #file-menu { 3 | --menuitem-image: url("../icons/mail-inbox-all.svg"); 4 | } 5 | #edit-menu { 6 | --menuitem-image: url("chrome://global/skin/icons/edit.svg"); 7 | } 8 | #view-menu { 9 | --menuitem-image: url("../icons/content-view.svg"); 10 | } 11 | #history-menu { 12 | --menuitem-image: url("chrome://browser/skin/history.svg"); 13 | } 14 | #bookmarksMenu { 15 | --menuitem-image: url("chrome://browser/skin/bookmark.svg"); 16 | } 17 | #tools-menu { 18 | --menuitem-image: url("../icons/toolbox.svg"); 19 | } 20 | #helpMenu { 21 | --menuitem-image: url("chrome://global/skin/icons/help.svg"); 22 | } 23 | -------------------------------------------------------------------------------- /src/icons/_index.scss: -------------------------------------------------------------------------------- 1 | /** Library - Icons Replace ***************************************************/ 2 | @include Option("userChrome.icon.library") { 3 | @import "../library/chrome"; 4 | } 5 | 6 | /** Panel - Icons *************************************************************/ 7 | :root { 8 | --uc-sidebar-icon: url("chrome://browser/skin/sidebars.svg"); 9 | --uc-sidebar-icon-reverse: url("chrome://browser/skin/sidebars-right.svg"); 10 | @include Has { 11 | &:has(#sidebar-box[positionend="true"]) { 12 | --uc-sidebar-icon: url("chrome://browser/skin/sidebars-right.svg"); 13 | --uc-sidebar-icon-reverse: url("chrome://browser/skin/sidebars.svg"); 14 | } 15 | } 16 | } 17 | @include Option("userChrome.icon.panel") { 18 | @import "layout/panel"; 19 | @import "panel"; 20 | } 21 | 22 | /** Menu - Icons Layout *******************************************************/ 23 | @include Option("userChrome.icon.menu") { 24 | @import "layout/menu"; 25 | @import "layout/bookmark_menu"; 26 | 27 | @include Option("userChrome.icon.context_menu") { 28 | @import "context_menu"; 29 | } 30 | @include Option("userChrome.icon.global_menubar") { 31 | @import "global_menubar"; 32 | } 33 | @include Option("userChrome.icon.global_menu") { 34 | @import "global_menu"; 35 | } 36 | @include Option("userChrome.icon.library") { 37 | @import "library"; 38 | } 39 | } 40 | 41 | /** Icons for fork browsers ***************************************************/ 42 | @import "fork_browsers/index"; 43 | -------------------------------------------------------------------------------- /src/icons/fork_browsers/_floorp.scss: -------------------------------------------------------------------------------- 1 | @include Option("userChrome.icon.panel") { 2 | #rebootappmenu { 3 | list-style-image: url("../icons/refresh-cw.svg"); 4 | } 5 | 6 | #openprofiledir { 7 | list-style-image: url("../icons//folder.svg"); 8 | } 9 | } 10 | @include Option("userChrome.icon.menu") { 11 | #usercssloader-menu { 12 | --menuitem-image: url("../icons/developer.svg"); 13 | } 14 | 15 | #toggle_statusBar { 16 | --menuitem-image: url("../icons/pulse-square.svg"); 17 | } 18 | 19 | // Sidebar 20 | #muteMenu { 21 | --menuitem-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg"); 22 | stroke: transparent !important; 23 | } 24 | #unloadWebpanelMenu { 25 | --menuitem-image: url("../icons/tab-unload.svg"); 26 | } 27 | #changeUAWebpanelMenu { 28 | --menuitem-image: url("chrome://devtools/skin/images/command-responsivemode.svg"); 29 | fill-opacity: 0; 30 | } 31 | #deleteWebpanelMenu { 32 | --menuitem-image: url("chrome://global/skin/icons/delete.svg"); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/icons/fork_browsers/_index.scss: -------------------------------------------------------------------------------- 1 | /*= Waterfox =================================================================*/ 2 | @import "waterfox"; 3 | 4 | /*= Tor Browser ==============================================================*/ 5 | @import "tor_browser"; 6 | 7 | /*= Floorp Browser ===========================================================*/ 8 | @import "floorp"; 9 | -------------------------------------------------------------------------------- /src/icons/fork_browsers/_tor_browser.scss: -------------------------------------------------------------------------------- 1 | @include Option("userChrome.icon.panel") { 2 | #appMenuNewIdentity{ 3 | list-style-image: url("chrome://browser/skin/new_identity.svg"); 4 | } 5 | #appMenuNewCircuit { 6 | list-style-image: url("chrome://browser/skin/new_circuit.svg"); 7 | } 8 | #appMenu_torBrowserUserManual { 9 | list-style-image: url("chrome://browser/skin/onion.svg"); 10 | } 11 | } 12 | 13 | @include Option("userChrome.icon.menu") { 14 | #menu_newIdentity { 15 | --menuitem-image: url("chrome://browser/skin/new_identity.svg"); 16 | } 17 | #menu_newCircuit { 18 | --menuitem-image: url("chrome://browser/skin/new_circuit.svg"); 19 | } 20 | #torBrowserUserManual { 21 | --menuitem-image: url("chrome://browser/skin/onion.svg"); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/icons/fork_browsers/_waterfox.scss: -------------------------------------------------------------------------------- 1 | @include Option("userChrome.icon.panel") { 2 | #appMenu-restart-button { 3 | list-style-image: url("../icons/refresh-cw.svg") !important; 4 | } 5 | } 6 | @include Option("userChrome.icon.menu") { 7 | #menu_FileRestartItem { 8 | --menuitem-image: url("../icons/refresh-cw.svg"); 9 | } 10 | 11 | #toggle_status-dummybar { 12 | --menuitem-image: url("../icons/pulse-square.svg"); 13 | } 14 | 15 | menuitem.privatetab-icon { 16 | --menuitem-image: url("../icons/private-favicon.svg"); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/icons/layout/_activity_stream.scss: -------------------------------------------------------------------------------- 1 | @import "./menu_common"; 2 | 3 | .context-menu-list .context-menu-item button { 4 | padding-inline-start: 0 !important; 5 | } 6 | 7 | .context-menu-list .context-menu-item button span { 8 | @include _layout_icon_menus; 9 | 10 | padding-inline-start: 24px; /* 16p + (4px * 2) */ 11 | background-position: var(--uc-menu-background-position, left) 4px center; 12 | &:dir(rtl) { 13 | --uc-menu-background-position: right; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/library/_chrome.scss: -------------------------------------------------------------------------------- 1 | @import "folder_icons"; 2 | 3 | @include moz-document(url "chrome://browser/content/places/places.xhtml") { 4 | @include OS($linux) { 5 | @import "menubar"; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/library/_contents.scss: -------------------------------------------------------------------------------- 1 | @include moz-document(url "chrome://browser/content/places/places.xhtml") { 2 | /** Library - Icons Replace *************************************************/ 3 | @include Option("userChrome.icon.library") { 4 | @import "folder_icons"; 5 | @import "menubar"; 6 | } 7 | 8 | @include OS($linux) { 9 | /*= Layout Fixes =========================================================*/ 10 | menupopup menu { 11 | padding-block: 4px; 12 | } 13 | 14 | .menu-right { 15 | width: 16px !important; /* Original: 1ex */ 16 | background-image: url("chrome://global/skin/icons/arrow-right.svg"); 17 | background-position: right center; 18 | } 19 | 20 | /*= Proton ===============================================================*/ 21 | @include Option("userContent.page.proton") { 22 | @import "proton"; 23 | @import "proton_contents"; 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/library/_menubar.scss: -------------------------------------------------------------------------------- 1 | /*= Menubar - Icons ==========================================================*/ 2 | #organizeButton, 3 | #viewMenu, 4 | #maintenanceButton, 5 | #back-button, 6 | #forward-button, 7 | #clearDownloadsButton { 8 | fill: currentColor !important; 9 | -moz-context-properties: fill, fill-opacity, stroke !important; 10 | } 11 | 12 | /* Add */ 13 | #organizeButton { 14 | list-style-image: url("chrome://global/skin/icons/settings.svg") !important; 15 | } 16 | #viewMenu { 17 | list-style-image: url("../icons/sort.svg") !important; 18 | } 19 | #maintenanceButton { 20 | list-style-image: url("../icons/import-export.svg") !important; 21 | } 22 | 23 | #clearDownloadsButton { 24 | list-style-image: url("chrome://global/skin/icons/delete.svg") !important; 25 | } 26 | #clearDownloadsButton > .toolbarbutton-icon { 27 | @include InlineBox(true); 28 | margin-top: 0; 29 | margin-bottom: 0; 30 | margin-inline-start: 0; 31 | margin-inline-end: 2px; 32 | } 33 | 34 | /* Replace */ 35 | #back-button { 36 | list-style-image: url("chrome://browser/skin/back.svg") !important; 37 | } 38 | #forward-button { 39 | list-style-image: url("chrome://browser/skin/forward.svg") !important; 40 | } 41 | 42 | #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon, 43 | #forward-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { 44 | transform: scaleX(-1) !important; 45 | } 46 | -------------------------------------------------------------------------------- /src/navbar/_index.scss: -------------------------------------------------------------------------------- 1 | /*= Nav Bar - Navbar comabine with sidebar===================================*/ 2 | @include Option("userChrome.navbar.as_sidebar") { 3 | @import "as_sidebar"; 4 | } 5 | -------------------------------------------------------------------------------- /src/others/_index.scss: -------------------------------------------------------------------------------- 1 | @include Option("userChrome.findbar.floating_on_top") { 2 | @import "findbar_floating_on_top"; 3 | } 4 | -------------------------------------------------------------------------------- /src/padding/_bookmark_menu.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --bookmark-menu-padding: 3px; 3 | } 4 | :root[uidensity="compact"] { 5 | --bookmark-menu-padding: 1.5px; 6 | } 7 | @include Option("userChrome.padding.menu_compact") { 8 | :root { 9 | --bookmark-menu-padding: 2px; 10 | } 11 | :root[uidensity=compact] { 12 | --bookmark-menu-padding: 0px; 13 | } 14 | } 15 | 16 | :root:not([uidensity="touch"]) #BMB_bookmarksPopup .subviewbutton, 17 | :root:not([uidensity="touch"]) #PlacesToolbar menupopup[placespopup] .bookmark-item, 18 | :root:not([uidensity="touch"]) #PlacesToolbar menupopup[placespopup] .openintabs-menuitem { 19 | padding-block: var(--bookmark-menu-padding) !important; 20 | } 21 | 22 | @include Option("userChrome.padding.menu_compact", "userChrome.padding.bookmark_menu.compact") { 23 | :root:not([uidensity="touch"]) #BMB_bookmarksPopup .bookmark-item, 24 | :root:not([uidensity="touch"]) #PlacesToolbar menupopup[placespopup] .bookmark-item { 25 | min-height: unset !important; /* Original: 24px */ 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/padding/_bookmarkbar.scss: -------------------------------------------------------------------------------- 1 | :root[uidensity="compact"] #PersonalToolbar toolbarbutton { 2 | margin-top: 0px !important; /* Original: 2px */ 3 | margin-bottom: 1px !important; 4 | } 5 | -------------------------------------------------------------------------------- /src/padding/_first_tab.scss: -------------------------------------------------------------------------------- 1 | /* for First Tab Space */ 2 | :root { 3 | --uc-space-left-tabbar: 8px; /* If the option is not specified, it is equivalent to 0px. */ 4 | } 5 | 6 | @include NotOption("userChrome.padding.first_tab.always") { 7 | :root:not([tabsintitlebar]) #tabbrowser-tabs:not([positionpinnedtabs]), 8 | :root:is([sizemode="maximized"], [sizemode="fullscreen"]) #tabbrowser-tabs:not([positionpinnedtabs]) { 9 | padding-inline-start: var(--uc-space-left-tabbar) !important; 10 | } 11 | } 12 | 13 | @include Option("userChrome.padding.first_tab.always") { 14 | :root:not([tabsintitlebar]) #tabbrowser-tabs, 15 | :root:is([sizemode="maximized"], [sizemode="fullscreen"]) #tabbrowser-tabs { 16 | padding-inline-start: calc(var(--tab-overflow-pinned-tabs-width, 0px) + var(--uc-space-left-tabbar)) !important; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/padding/_global_menubar.scss: -------------------------------------------------------------------------------- 1 | /* Vertical Align - Center & Height: 100% */ 2 | #main-menubar { 3 | @include BoxFlex(1, true); 4 | } 5 | 6 | /* Rounding */ 7 | #main-menubar > menu { 8 | border-radius: 4px; 9 | } 10 | 11 | /* Menubar item padding */ 12 | :root { 13 | --global-menubar-padding: 2px; 14 | } 15 | :root[uidensity="compact"] { 16 | --global-menubar-padding: 1px; 17 | } 18 | :root[uidensity="touch"] { 19 | --global-menubar-padding: 4px; 20 | } 21 | #main-menubar > menu { 22 | padding-block: var(--global-menubar-padding) !important; 23 | } 24 | 25 | /* Reduce items */ 26 | #main-menubar > menu > menupopup menuitem, 27 | #main-menubar > menu > menupopup menu { 28 | padding-block: var(--bookmark-menu-padding) !important; 29 | @include Option("userChrome.compatibility.os.win11") { 30 | --bookmark-menu-padding: 3px; 31 | &:is([type="checkbox"], [type="radio"]) { 32 | --bookmark-menu-padding: 0px; 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/padding/_navbar.scss: -------------------------------------------------------------------------------- 1 | #nav-bar:not([customizing]) toolbarspring { 2 | min-width: 1px !important; 3 | max-width: 100px !important; 4 | } 5 | -------------------------------------------------------------------------------- /src/padding/_panel_header.scss: -------------------------------------------------------------------------------- 1 | .panel-header{ 2 | padding: unset !important; 3 | padding-top: 4px !important; 4 | } 5 | -------------------------------------------------------------------------------- /src/padding/_tab_padding.scss: -------------------------------------------------------------------------------- 1 | @include Option("userChrome.tab.lepton_like_padding", "userChrome.tab.photon_like_padding") { 2 | :root { 3 | // --tab-block-margin: New version of --proton-tab-block-margin 4 | --proton-tab-block-margin: var(--tab-block-margin) !important; /* Original: 4px, Legacy */ 5 | } 6 | :root[uidensity="touch"] { 7 | /* Like Original */ 8 | --tab-block-margin: 4px !important; 9 | } 10 | } 11 | 12 | @include Option("userChrome.tab.lepton_like_padding") { 13 | :root { 14 | --tab-block-margin: 2px !important; /* New version of --proton-tab-block-margin */ 15 | } 16 | } 17 | @include Option("userChrome.tab.photon_like_padding") { 18 | :root { 19 | --tab-block-margin: 0px !important; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/padding/_toolbar_button.scss: -------------------------------------------------------------------------------- 1 | :root[uidensity="compact"] { 2 | --toolbarbutton-outer-padding: 2px !important; /* Original: 3px, General is 2px */ 3 | } 4 | 5 | @include Option("userChrome.padding.toolbar_button.compact") { 6 | :root { 7 | --toolbarbutton-inner-padding: var(--uc-small-toolbarbutton-inner-padding) !important; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/padding/_urlbar.scss: -------------------------------------------------------------------------------- 1 | :root:not([uidensity="touch"]) #urlbar-container, 2 | :root:not([uidensity="touch"]) #search-container { 3 | padding-block: 3px !important; /* Original: 4px */ 4 | } 5 | :root:not([uidensity="compact"]) #urlbar-container, 6 | :root:not([uidensity="compact"]) #search-container { 7 | padding-block: 2px !important; 8 | } 9 | 10 | /* spread menu */ 11 | :root:not([uidensity]) .urlbarView-row { 12 | padding-block: 1px !important; /* Original: 2px */ 13 | } 14 | :root[uidensity="compact"] .urlbarView-row { 15 | padding-block: 0px !important; 16 | } 17 | 18 | :root:not([uidensity]) #urlbar .search-one-offs:not([hidden]) { 19 | padding-block: 8px !important; /* Original: 10px */ 20 | } 21 | :root[uidensity="compact"] #urlbar .search-one-offs:not([hidden]) { 22 | padding-block: 2px !important; 23 | } 24 | -------------------------------------------------------------------------------- /src/padding/_urlview_expanding.scss: -------------------------------------------------------------------------------- 1 | #urlbar[breakout][breakout-extend] > #urlbar-background { 2 | animation-name: none !important; 3 | box-shadow: 0 1px 4px rgba(0, 0, 0, .05) !important; 4 | } 5 | -------------------------------------------------------------------------------- /src/padding/_urlview_result.scss: -------------------------------------------------------------------------------- 1 | .urlbarView { 2 | margin-inline: 0 !important; 3 | width: 100% !important; 4 | } 5 | 6 | .urlbarView-row { 7 | padding-block: 0 !important; 8 | } 9 | -------------------------------------------------------------------------------- /src/panel/_full_width_padding.scss: -------------------------------------------------------------------------------- 1 | /* Original 2 | --arrowpanel-menuitem-margin: 0 8px; 3 | --arrowpanel-menuitem-padding-block: 8px; 4 | --arrowpanel-menuitem-padding-inline: 8px; 5 | --arrowpanel-menuitem-padding: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline); 6 | */ 7 | 8 | :root, 9 | :root:is([uidensity="compact"], [uidensity="touch"]) { 10 | --arrowpanel-menuitem-margin: 0 !important; 11 | --arrowpanel-menuitem-margin-inline: 0 !important; 12 | --arrowpanel-menuitem-padding-inline: calc(var(--arrowpanel-menuitem-padding-block) + 8px) !important; 13 | } 14 | -------------------------------------------------------------------------------- /src/panel/_full_width_separator.scss: -------------------------------------------------------------------------------- 1 | /* Full width separators */ 2 | :root { 3 | /* Original 4 | --panel-separator-margin-vertical: 4px; 5 | --panel-separator-margin-horizontal: 8px; 6 | --panel-separator-margin: var(--panel-separator-margin-vertical) var(--panel-separator-margin-horizontal); 7 | */ 8 | --panel-separator-margin-horizontal: 0 !important; 9 | } 10 | -------------------------------------------------------------------------------- /src/panel/_index.scss: -------------------------------------------------------------------------------- 1 | @include Option("userChrome.panel.remove_strip") { 2 | @import "remove_strip"; 3 | } 4 | 5 | @include Option("userChrome.panel.full_width_separator") { 6 | @import "full_width_separator"; 7 | } 8 | 9 | @include Option("userChrome.panel.full_width_padding") { 10 | @import "full_width_padding"; 11 | } 12 | -------------------------------------------------------------------------------- /src/panel/_remove_strip.scss: -------------------------------------------------------------------------------- 1 | #appMenu-fxa-separator { 2 | --panel-separator-zap-gradient: none; /* Original: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%) */ 3 | } 4 | -------------------------------------------------------------------------------- /src/rounding/_dialog.scss: -------------------------------------------------------------------------------- 1 | @include Option("userChrome.rounding.square_dialog") { 2 | dialog, .dialogBox { 3 | border-radius: 0 !important; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /src/rounding/_index.scss: -------------------------------------------------------------------------------- 1 | /** Rounding ******************************************************************/ 2 | @import "square"; 3 | @import "dialog"; 4 | @import "library"; 5 | 6 | /* 7 | --toolbarbutton-border-radius: 4px; 8 | */ 9 | -------------------------------------------------------------------------------- /src/rounding/_library.scss: -------------------------------------------------------------------------------- 1 | /*= Library ==============================================================*/ 2 | @include Option("userChrome.rounding.square_button") { 3 | #placesToolbar > toolbarbutton, 4 | #placesMenu > menu, 5 | #editBookmarkPanelRows .expander-up, 6 | #editBookmarkPanelRows .expander-down { 7 | border-radius: 0 !important; 8 | } 9 | } 10 | @include Option("userChrome.rounding.square_field") { 11 | #searchFilter, 12 | #detailsPane html|input, 13 | #places input 14 | #editBMPanel_tagsSelectorRow > richlistbox { 15 | border-radius: 0 !important; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/sidebar/_index.scss: -------------------------------------------------------------------------------- 1 | @import "overlap"; 2 | -------------------------------------------------------------------------------- /src/tab/_clipped_tab.scss: -------------------------------------------------------------------------------- 1 | /** Clipped tabs - Letters cleary *********************************************/ 2 | @include Option("userChrome.tab.letters_cleary") { 3 | @import "clipped_tab/letters_cleary"; 4 | } 5 | 6 | /** Clipped tabs - Show close button at hover *********************************/ 7 | @include Option("userChrome.tab.close_button_at_hover") { 8 | @import "clipped_tab/show_close_button_at_hover"; 9 | } 10 | 11 | /** Clipped tabs - Show close button at pinned tab ****************************/ 12 | @include Option("userChrome.tab.close_button_at_pinned") { 13 | @include NotOption("userChrome.tabbar.as_titlebar") { 14 | @import "clipped_tab/pinned_close_button"; 15 | } 16 | } 17 | 18 | /** Clipped tabs - Always show tab icon ***************************************/ 19 | @include Option("userChrome.tab.always_show_tab_icon") { 20 | @import "clipped_tab/always_show_tab_icon"; 21 | } 22 | -------------------------------------------------------------------------------- /src/tab/_connect_to_window.scss: -------------------------------------------------------------------------------- 1 | #tabbrowser-tabs[orient="vertical"] { 2 | --uc-tab-border-bottom-radius: var(--tab-border-radius); 3 | } 4 | .tab-background { 5 | border-radius: var(--tab-border-radius) var(--tab-border-radius) var(--uc-tab-border-bottom-radius, 0px) var(--uc-tab-border-bottom-radius, 0px) !important; 6 | margin-bottom: 0px !important; 7 | } 8 | 9 | .tab-content { 10 | margin-top: var(--tab-block-margin); 11 | } 12 | 13 | .tab-stack { 14 | margin-top: 0px !important; 15 | margin-bottom: 0px !important; 16 | } 17 | 18 | /* Remove line at Toolbar's top */ 19 | #tabbrowser-tabs { 20 | z-index: 1 !important; 21 | } 22 | @include NotOption("userChrome.tabbar.multi_row") { 23 | #TabsToolbar:not([multibar]) { 24 | overflow: clip; /* Prevent toolbar area over */ 25 | } 26 | } 27 | 28 | /* Pinned Tab - tabbrowser-arrowscrollbox overflowing */ 29 | #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] { 30 | z-index: 0 !important; 31 | 32 | .tab-stack { 33 | /* Temporary solution for compatibility #513 */ 34 | overflow-y: clip; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/tab/_crashed_tab.scss: -------------------------------------------------------------------------------- 1 | .tab-icon-image[crashed] { 2 | display: none !important; 3 | } 4 | -------------------------------------------------------------------------------- /src/tab/_index.scss: -------------------------------------------------------------------------------- 1 | /*= Tab - Connect to window ==============================================*/ 2 | @include Option("userChrome.tab.connect_to_window") { 3 | @import "connect_to_window"; 4 | } 5 | 6 | /*= Selected Tab =============================================================*/ 7 | @import "selected_tab"; 8 | 9 | /*= Unselected Tab - Divide line =============================================*/ 10 | @import "unselected_tab"; 11 | 12 | /*= New tab button ============================================================*/ 13 | @import "newtab_button"; 14 | 15 | /*= Unloaded Tab - Contents Opacity ===========================================*/ 16 | @include Option("userChrome.tab.unloaded") { 17 | @import "unload_tab"; 18 | } 19 | 20 | /*= Clipped tabs =============================================================*/ 21 | @import "clipped_tab"; 22 | 23 | /*= Sound Tab ================================================================*/ 24 | @import "sound_tab"; 25 | 26 | /*= PictureInPicture Tab - Show PIP Icon =====================================*/ 27 | @include Option("userChrome.tab.pip") { 28 | @import "picture_in_picture_tab"; 29 | } 30 | 31 | /*= Container Tab - Color line at icon's bottom ==============================*/ 32 | @include Option("userChrome.tab.container") { 33 | @include NotOption("userChrome.tabbar.as_titlebar") { 34 | @import "container_tab"; 35 | } 36 | } 37 | 38 | /*= Crashed Tab - Don't show Favicons ========================================*/ 39 | @include Option("userChrome.tab.crashed") { 40 | @import "crashed_tab"; 41 | } 42 | -------------------------------------------------------------------------------- /src/tab/_newtab_button.scss: -------------------------------------------------------------------------------- 1 | /*= New tab button - Looks like tab ==========================================*/ 2 | @include Option("userChrome.tab.newtab_button_like_tab") { 3 | @import "newtab_button/looks_like_tab"; 4 | } 5 | 6 | /*= New tab button - Smaller button ==========================================*/ 7 | @include Option("userChrome.tab.newtab_button_smaller") { 8 | @import "newtab_button/smaller_button"; 9 | } 10 | 11 | /*= New tab button - Proton like button ======================================*/ 12 | @include Option("userChrome.tab.newtab_button_proton") { 13 | @import "newtab_button/proton_like_button"; 14 | } 15 | -------------------------------------------------------------------------------- /src/tab/_picture_in_picture_tab.scss: -------------------------------------------------------------------------------- 1 | #tabbrowser-tabs:not([closebuttons="activetab"]) .tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-content::after, 2 | #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab[pictureinpicture]:not([pinned], :hover) .tab-content::after { 3 | content: ""; 4 | } 5 | .tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-content::after { 6 | /* Shape */ 7 | @include InlineBox(true); 8 | width: 14px; 9 | height: 14px; 10 | background-size: 14px; 11 | @include BoxOrder(1, true); 12 | 13 | /* Color */ 14 | fill: currentColor; 15 | opacity: 0.8; 16 | -moz-context-properties: fill; 17 | 18 | /* Icon */ 19 | background-image: url("chrome://global/skin/media/picture-in-picture-open.svg"); 20 | } 21 | .tabbrowser-tab[pictureinpicture]:not([pinned])[selected] .tab-content::after { 22 | opacity: 0.95; 23 | } 24 | 25 | /* Close Button's position */ 26 | .tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-close-button { 27 | @include BoxOrder(2, true); 28 | } 29 | #tabbrowser-tabs:not([closebuttons="activetab"]) .tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-close-button { 30 | margin-left: 7px !important; 31 | } 32 | #tabbrowser-tabs:not([closebuttons="activetab"]) 33 | .tabbrowser-tab[pictureinpicture]:not([pinned]):hover 34 | .tab-close-button { 35 | margin-left: 2px !important; 36 | } 37 | -------------------------------------------------------------------------------- /src/tab/_sound_tab.scss: -------------------------------------------------------------------------------- 1 | /*= Sound Tab - Hide Label ===================================================*/ 2 | @include Option("userChrome.tab.sound_hide_label") { 3 | @include NotOption("userChrome.tab.sound_show_label") { 4 | @import "sound_tab/hide_label"; 5 | } 6 | } 7 | 8 | /*= Sound Tab - Show Label ===================================================*/ 9 | @include Option("userChrome.tab.sound_show_label") { 10 | @import "sound_tab/show_label"; 11 | } 12 | 13 | /*= Sound Tab - Show with Favicons ===========================================*/ 14 | @include Option("userChrome.tab.sound_with_favicons") { 15 | @import "sound_tab/show_with_favicons"; 16 | } 17 | -------------------------------------------------------------------------------- /src/tab/_unload_tab.scss: -------------------------------------------------------------------------------- 1 | .tabbrowser-tab[pending] .tab-content { 2 | opacity: 0.7; 3 | } 4 | -------------------------------------------------------------------------------- /src/tab/_unselected_tab.scss: -------------------------------------------------------------------------------- 1 | /*= Unselected Tab - Dynamic Separator =======================================*/ 2 | @include Option("userChrome.tab.dynamic_separator") { 3 | @import "unselected_tab/dynamic_separator"; 4 | } 5 | 6 | /*= Unselected Tab - Static Separator ========================================*/ 7 | @include Option("userChrome.tab.static_separator") { 8 | @import "unselected_tab/static_separator"; 9 | } 10 | 11 | /*= Unselected Tab - Bar Separator ===========================================*/ 12 | @include Option("userChrome.tab.bar_separator") { 13 | @import "unselected_tab/bar_separator"; 14 | } 15 | -------------------------------------------------------------------------------- /src/tab/clipped_tab/_always_show_tab_icon.scss: -------------------------------------------------------------------------------- 1 | .tab-icon-image:not([src], [pinned], [crashed], [busy]) { 2 | @include InlineBox(true); 3 | } 4 | -------------------------------------------------------------------------------- /src/tab/clipped_tab/_letters_cleary.scss: -------------------------------------------------------------------------------- 1 | #tabbrowser-tabs[closebuttons="activetab"] { 2 | --inline-tab-padding: 7px !important; /* Original: 8px */ 3 | } 4 | #tabbrowser-tabs[overflow="true"] { 5 | --inline-tab-padding: 6px !important; /* Original: 8px */ 6 | } 7 | 8 | .tab-content[pinned] { 9 | --inline-tab-padding: 10px; /* Prevent overflow pinned tab's divide line not aligned */ 10 | padding-inline: var(--inline-tab-padding) !important; 11 | } 12 | :root[uidensity="compact"] .tab-content[pinned] { 13 | --inline-tab-padding: 8px; 14 | } 15 | 16 | // mask-image: linear-gradient(to left, transparent, black var(--tab-label-mask-size)); 17 | .tabbrowser-tab { 18 | .tab-label-container { 19 | --tab-label-mask-size: 1.8em; /* Original: 2em */ 20 | } 21 | } 22 | 23 | #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab { 24 | .tab-label-container { 25 | --tab-label-mask-size: 30%; 26 | } 27 | &:is([visuallyselected="true"], [multiselected="true"]) .tab-label-container { 28 | --tab-label-mask-size: 25%; 29 | } 30 | } 31 | 32 | .tabbrowser-tab[visuallyselected=true]:not([labelendaligned]):hover .tab-label-container, 33 | #tabbrowser-tabs:not([closebuttons=activetab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([visuallyselected=true],[labelendaligned]):hover .tab-label-container { 34 | --tab-label-mask-size: 0.9em; /* Original: 1em */ 35 | } 36 | -------------------------------------------------------------------------------- /src/tab/newtab_button/_proton_like_button.scss: -------------------------------------------------------------------------------- 1 | :root:not([uidensity="touch"]) #tabs-newtab-button > .toolbarbutton-icon { 2 | --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2 - 1px); 3 | } 4 | -------------------------------------------------------------------------------- /src/tab/newtab_button/_smaller_button.scss: -------------------------------------------------------------------------------- 1 | #tabs-newtab-button > .toolbarbutton-icon { 2 | // Not like tab, as button 3 | --tab-border-radius: var(--toolbarbutton-border-radius); 4 | margin-left: 1px; 5 | 6 | /* Original: calc((var(--tab-min-height) - 16px) / 2) = 10px */ 7 | --toolbarbutton-inner-padding: var(--uc-small-toolbarbutton-inner-padding); 8 | } 9 | -------------------------------------------------------------------------------- /src/tab/selected_tab/_color_like_toolbar.scss: -------------------------------------------------------------------------------- 1 | :root:not(:-moz-lwtheme) { 2 | /* Fix for windows's system default theme. Using --toolbar-bgcolor, --toolbar-bgimage fallback */ 3 | --tab-selected-bgcolor: unset !important; /* Original: rgb(255,255,255); */ 4 | --tab-selected-bgimage: unset !important; /* Above FF v101 */ 5 | } 6 | #tabbrowser-tabs:not([movingtab]) 7 | > #tabbrowser-arrowscrollbox 8 | > .tabbrowser-tab 9 | > .tab-stack 10 | > .tab-background[selected="true"]:-moz-lwtheme { 11 | /* Original: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) 12 | */ 13 | background-image: linear-gradient(transparent, transparent), 14 | linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important; 15 | } 16 | -------------------------------------------------------------------------------- /src/tab/sound_tab/_hide_label.scss: -------------------------------------------------------------------------------- 1 | .tab-secondary-label:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]) { 2 | display: none !important; 3 | } 4 | -------------------------------------------------------------------------------- /src/tab/sound_tab/_show_label.scss: -------------------------------------------------------------------------------- 1 | .tab-secondary-label:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]){ 2 | @include Box(true); 3 | } 4 | -------------------------------------------------------------------------------- /src/tab/unselected_tab/_static_separator.scss: -------------------------------------------------------------------------------- 1 | #TabsToolbar { 2 | --toolbarseparator-color: color-mix(in srgb, currentColor 30%, transparent); 3 | } 4 | 5 | .tab-stack::before, 6 | .tabbrowser-tab:last-of-type .tab-stack::after { 7 | content: ""; 8 | } 9 | 10 | .tab-stack::before, 11 | .tab-stack::after { 12 | /* Box Model */ 13 | display: block; 14 | position: absolute; 15 | 16 | /* Position */ 17 | top: 50%; 18 | transform: translateY(-50%); 19 | z-index: 1; 20 | 21 | /* Bar shape */ 22 | width: 0px; 23 | height: 100%; 24 | 25 | /* Bar Color */ 26 | border-right: 1px solid var(--toolbarseparator-color); 27 | } 28 | .tab-stack::after { 29 | right: 0; 30 | } 31 | 32 | .tabbrowser-tab[visuallyselected] .tab-stack::before, 33 | .tabbrowser-tab[visuallyselected] + .tabbrowser-tab .tab-stack::before, 34 | .tabbrowser-tab[visuallyselected] .tab-stack::after { 35 | @include Option("userChrome.tab.static_separator.selected_accent") { 36 | --toolbarseparator-color: var(--tab-line-color, var(--lwt-tab-line-color, rgb(10, 132, 255))); 37 | } 38 | @include NotOption("userChrome.tab.static_separator.selected_accent") { 39 | opacity: 0; 40 | } 41 | } 42 | 43 | /* Animate */ 44 | @include Animate { 45 | .tab-stack::before, 46 | .tab-stack::after { 47 | transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/tabbar/_fill_width.scss: -------------------------------------------------------------------------------- 1 | // Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_fill_available_width.css made available under Mozilla Public License v. 2.0 2 | // See the above repository for updates as well as full license text. 3 | 4 | /* Why 100vw? Tab closing requires width animation to end and "none" can't be animated */ 5 | .tabbrowser-tab[fadein]:not([style^="max-width"]) { 6 | --tab-max-width: 100vw; 7 | max-width: var(--tab-max-width) !important; 8 | } 9 | -------------------------------------------------------------------------------- /src/tabbar/_layout.scss: -------------------------------------------------------------------------------- 1 | //-- Mixin --------------------------------------------------------------------- 2 | @mixin _oneLiner_windowControl() { 3 | @include Option("userChrome.tabbar.one_liner.tabbar_first") { 4 | @content; 5 | } 6 | @include OS($mac) { 7 | @content; 8 | } 9 | } 10 | 11 | //------------------------------------------------------------------------------ 12 | 13 | @include NotOption("userChrome.hidden.titlebar_container") { 14 | @include NotOption("userChrome.tabbar.one_liner") { 15 | @include Option("userChrome.tabbar.on_bottom", "userChrome.hidden.tabbar") { 16 | @import "layout/window_control"; 17 | } 18 | } 19 | @include Option("userChrome.tabbar.one_liner") { 20 | @include NotOption("userChrome.tabbar.one_liner.responsive") { 21 | @include _oneLiner_windowControl() { 22 | @import "layout/window_control"; 23 | } 24 | } 25 | @include Option("userChrome.tabbar.one_liner.responsive") { 26 | @include Option("userChrome.tabbar.on_bottom", "userChrome.hidden.tabbar") { 27 | @media screen and (max-width: 1100px) { 28 | @import "layout/window_control"; 29 | } 30 | } 31 | @media screen and (min-width: 1100px) { 32 | @include _oneLiner_windowControl() { 33 | @import "layout/window_control"; 34 | } 35 | } 36 | } 37 | } 38 | 39 | @include NotOption("userChrome.navbar.as_sidebar") { 40 | @import "layout/navbar_padding"; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/theme/_built_in.scss: -------------------------------------------------------------------------------- 1 | // lwtheme-mozlightdark: Legacy - v96 2 | 3 | /*= Lightmode - Color darker =================================================*/ 4 | #{built-in-light-theme()} { 5 | --lwt-accent-color: rgb(229, 229, 235) !important; /* Original: rgb(240, 240, 244) */ 6 | } 7 | @include OS($win10, $mac) { 8 | #{selector.nest(built-in-light-theme(), "#navigator-toolbox")} { 9 | background-color: var(--lwt-accent-color) !important; 10 | } 11 | } 12 | 13 | /*= Darkmode - Color lighter =================================================*/ 14 | #{built-in-dark-theme()} { 15 | --toolbar-bgcolor: rgba(43, 42, 51, 5) !important; /* Original: rgba(43, 42, 51, 1) */ 16 | } 17 | -------------------------------------------------------------------------------- /src/theme/_dark_blue_accent.scss: -------------------------------------------------------------------------------- 1 | @include Dark { 2 | @import "dark_blue_color"; 3 | 4 | :host, :root, dialog { 5 | // button, select, input, menulist, radio 6 | @include DarkBlueContent; 7 | } 8 | 9 | #{built-in-dark-theme()} { 10 | --button-primary-color: var(--in-content-page-color) !important; 11 | --button-primary-bgcolor: var(--blue-60) !important; 12 | --button-primary-hover-bgcolor: var(--blue-50) !important; 13 | --button-primary-active-bgcolor: var(--blue-40) !important; 14 | 15 | --focus-outline-color: var(--blue-40) !important; 16 | 17 | --lwt-toolbarbutton-icon-fill-attention: var(--blue-40) !important; 18 | --download-progress-fill-color: var(--blue-40) !important; 19 | --panel-banner-item-info-icon-bgcolor: var(--blue-30) !important; 20 | 21 | --lwt-brighttext-url-color: var(--blue-30) !important; /* Original: as primary bgcolor */ 22 | } 23 | 24 | @include Option("userChrome.decoration.download_panel") { 25 | #{selector.nest(built-in-dark-theme(), "#downloadsListBox")} { 26 | --button-primary-bgcolor: var(--blue-30); 27 | --button-primary-hover-bgcolor: var(--blue-20); 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/theme/_index.scss: -------------------------------------------------------------------------------- 1 | /*= System Default Theme =====================================================*/ 2 | @include Option("userChrome.theme.system_default") { 3 | @import "system_default_theme"; 4 | } 5 | 6 | /*= Fully Theme Mode =========================================================*/ 7 | // Default Themes 8 | // https://github.com/mozilla/gecko-dev/blob/master/toolkit/mozapps/extensions/default-theme/manifest.json 9 | // https://github.com/mozilla/gecko-dev/blob/master/browser/themes/addons/light/manifest.json 10 | // https://github.com/mozilla/gecko-dev/blob/master/browser/themes/addons/dark/manifest.json 11 | 12 | @include Option("userChrome.theme.proton_color") { 13 | @import "proton_color"; 14 | @include Option("userChrome.theme.proton_color.dark_blue_accent") { 15 | @import "dark_blue_accent"; 16 | } 17 | } 18 | @include Option("userChrome.theme.fully_color") { 19 | @import "fully_color"; 20 | @import "waterfox"; 21 | } 22 | 23 | /*= Fully Dark Mode ==========================================================*/ 24 | @include Option("userChrome.theme.fully_dark") { 25 | @import "fully_dark"; 26 | } 27 | 28 | /*= Proton Theme Mode ========================================================*/ 29 | @include Option("userChrome.theme.proton_chrome") { 30 | @import "proton_chrome"; 31 | } 32 | 33 | /*= Monospace ================================================================*/ 34 | @include Option("userChrome.theme.monospace") { 35 | @import "monospace"; 36 | } 37 | -------------------------------------------------------------------------------- /src/theme/_monospace.scss: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: -moz-fixed; 3 | } 4 | -------------------------------------------------------------------------------- /src/theme/_proton_chrome.scss: -------------------------------------------------------------------------------- 1 | @import "proton_chrome/proton_commons"; 2 | @import "proton_chrome/cert"; 3 | @import "proton_chrome/page_info"; 4 | @import "proton_chrome/library_popup"; 5 | @import "proton_chrome/sanitize_everything"; 6 | -------------------------------------------------------------------------------- /src/theme/_system_default_theme.scss: -------------------------------------------------------------------------------- 1 | @import "system_default_theme/urlbar_focus_color"; 2 | @import "system_default_theme/win7"; 3 | @import "system_default_theme/win10"; 4 | @import "system_default_theme/gtk"; 5 | @import "system_default_theme/mac"; 6 | -------------------------------------------------------------------------------- /src/theme/_waterfox.scss: -------------------------------------------------------------------------------- 1 | /* New Folder Button */ 2 | #editBMPanel_newFolderButton { 3 | appearance: none; 4 | border: 0; 5 | border-radius: 4px; 6 | background-color: var(--button-bgcolor); 7 | color: var(--button-color, inherit); 8 | font-weight: 600; 9 | min-width: 0; 10 | padding: 8px 16px; 11 | 12 | /* This button is deeper in the visual hierarchy than others (notably the 13 | buttons at the bottom of the panel), so it should be slightly smaller. */ 14 | font-size: 90%; 15 | 16 | /* This button needs to align with the tree above it. */ 17 | margin-inline-start: 4px; 18 | 19 | &:hover { 20 | background-color: var(--button-hover-bgcolor); 21 | &:active { 22 | background-color: var(--button-active-bgcolor); 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/theme/proton_chrome/_library_popup.scss: -------------------------------------------------------------------------------- 1 | /*= Library Popup ============================================================*/ 2 | @include moz-document(url "chrome://browser/content/places/places.xhtml") { 3 | @include OS($linux) { 4 | @import "../../library/proton"; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /src/theme/proton_chrome/_sanitize_everything.scss: -------------------------------------------------------------------------------- 1 | #sanitizeEverythingWarningIcon { 2 | list-style-image: url("chrome://global/skin/icons/warning.svg") !important; 3 | -moz-context-properties: fill; 4 | fill: var(--uc-warning-icon-bgcolor); 5 | 6 | width: 48px; 7 | height: 48px; 8 | } 9 | -------------------------------------------------------------------------------- /src/theme/system_default_theme/_gtk.scss: -------------------------------------------------------------------------------- 1 | /*= GTK - URL View url accent color ==========================================*/ 2 | @include OS($linux) { 3 | :root:not(:-moz-lwtheme) .urlbarView-url { 4 | @include AccentColor { 5 | --urlbar-popup-url-color: #{$accentColor}; 6 | } 7 | } 8 | 9 | /* Nightly Compatibility */ 10 | :root:not(:-moz-lwtheme) #urlbar { 11 | --toolbar-field-focus-color: var(--toolbar-field-color); /* Nightly: rgba(0, 0, 0, 1) */ 12 | --toolbar-field-focus-background-color: var(--toolbar-field-background-color); /* Nightly: white */ 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/theme/system_default_theme/_urlbar_focus_color.scss: -------------------------------------------------------------------------------- 1 | /*= Common - URL Bar focus color =============================================*/ 2 | // TODO: `OS` Not covered case 3 | $_urlBarFocusSelector: ":root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme)"; 4 | $_urlBarFocusDarkSelector: ":root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive)"; 5 | 6 | @media (-moz-windows-accent-color-in-titlebar), (-moz-gtk-csd-available) { 7 | /* URL Bar */ 8 | @include AccentColor { 9 | #{$_urlBarFocusSelector}, 10 | #{$_urlBarFocusDarkSelector} { 11 | --focus-outline-color: #{$accentColor} !important; 12 | } 13 | 14 | #{$_urlBarFocusSelector} #urlbar[open] > #urlbar-background, 15 | #{$_urlBarFocusDarkSelector} #urlbar[open] > #urlbar-background { 16 | border-color: color-mix( 17 | in srgb, 18 | $accentColor 50%, 19 | transparent 20 | ) !important; /* Like: --toolbar-field-focus-border-color */ 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/theme/system_default_theme/_win7.scss: -------------------------------------------------------------------------------- 1 | /*= Windows7 - Aero Based Theme ==============================================*/ 2 | @include OS($win7) { 3 | #TabsToolbar:not(:-moz-lwtheme) { 4 | --background-color: rgb(229, 229, 235); 5 | --toolbarseparator-color: transparent; 6 | } 7 | #TabsToolbar:not(:-moz-lwtheme) 8 | .tabbrowser-tab 9 | > .tab-stack 10 | > .tab-background:not([selected="true"], [multiselected]) { 11 | color: var(--background-color); 12 | background-color: color-mix(in srgb, currentColor 60%, transparent); 13 | } 14 | #TabsToolbar:not(:-moz-lwtheme) 15 | .tabbrowser-tab:hover 16 | > .tab-stack 17 | > .tab-background:not([selected="true"], [multiselected]) { 18 | background-color: color-mix( 19 | in srgb, 20 | currentColor 85%, 21 | transparent 22 | ) !important; /* Original: color-mix(in srgb, currentColor 11%, transparent) */ 23 | } 24 | #scrollbutton-up:not(:-moz-lwtheme), 25 | #scrollbutton-down:not(:-moz-lwtheme), 26 | #alltabs-button:not(:-moz-lwtheme) > .toolbarbutton-badge-stack, 27 | #TabsToolbar:not(:-moz-lwtheme) .toolbarbutton-1 > .toolbarbutton-icon { 28 | color: var(--background-color) !important; 29 | background-color: color-mix(in srgb, currentColor 50%, transparent); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/urlview/_always_show_page_actions.scss: -------------------------------------------------------------------------------- 1 | #urlbar:not([breakout-extend="true"]) #pageActionButton { 2 | display: block !important; 3 | visibility: visible !important; 4 | } 5 | -------------------------------------------------------------------------------- /src/urlview/_focus_item_border.scss: -------------------------------------------------------------------------------- 1 | .urlbarView-row:not([type="tip"], [type="dynamic"])[selected] > .urlbarView-row-inner, 2 | .urlbarView-row-inner[selected] { 3 | box-shadow: 3px 0 var(--toolbar-field-focus-border-color) inset !important; 4 | } 5 | -------------------------------------------------------------------------------- /src/urlview/_full_width_padding.scss: -------------------------------------------------------------------------------- 1 | $_borderSize: 2px; 2 | 3 | .urlbarView { 4 | --uc-urlView-padding-double: calc(var(--uc-urlView-padding) * 2); 5 | --uc-urlView-full-width-padding: var(--uc-urlView-padding-double); 6 | 7 | @include NotOption("userChrome.urlView.as_commandbar") { 8 | --uc-urlView-full-width-padding: var(--uc-urlView-padding); 9 | width: 100% !important; 10 | } 11 | } 12 | 13 | #urlbar[open] > .urlbarView > .urlbarView-body-outer > .urlbarView-body-inner { 14 | border-color: transparent !important; 15 | 16 | &::before { 17 | content: ""; 18 | position: absolute; 19 | border-top: 1px solid var(--autocomplete-popup-separator-color); 20 | transform: translate(-50%, -1px); 21 | left: 50%; 22 | } 23 | } 24 | 25 | #urlbar[open] > .urlbarView > .urlbarView-body-outer > .urlbarView-body-inner::before, 26 | .urlbarView .search-one-offs { 27 | width: calc(100% + $_borderSize - var(--uc-urlView-padding-double)) !important; 28 | } 29 | .urlbarView .search-one-offs { 30 | margin-inline: var(--uc-urlView-full-width-padding) !important; 31 | } 32 | .urlbarView-row-inner { 33 | padding-inline: calc(var(--uc-urlView-full-width-padding) + var(--urlbarView-item-inline-padding)) !important; 34 | } 35 | -------------------------------------------------------------------------------- /src/urlview/_go_button_when_typing.scss: -------------------------------------------------------------------------------- 1 | #urlbar-input-container[pageproxystate="invalid"] #urlbar-go-button { 2 | display: block !important; 3 | } 4 | -------------------------------------------------------------------------------- /src/urlview/_iconbox_as_separator.scss: -------------------------------------------------------------------------------- 1 | #identity-box { 2 | /* separator */ 3 | position: relative; 4 | } 5 | 6 | #identity-box[pageproxystate="valid"] { 7 | &.notSecureText, 8 | &.chromeUI, 9 | &.extensionPage { 10 | > .identity-box-button { 11 | &:not(:hover, [open]) { 12 | /* remove background from urlbar box */ 13 | background-color: transparent !important; 14 | 15 | &::after { 16 | opacity: 0.375; 17 | } 18 | } 19 | 20 | &::after { 21 | /* Box Model */ 22 | content: ""; 23 | position: absolute; 24 | display: block; 25 | 26 | /* Position */ 27 | right: 0; 28 | top: 50%; 29 | transform: translateY(-50%); 30 | 31 | /* Bar shape */ 32 | width: 1px; 33 | height: 1em; 34 | 35 | /* Bar Color */ 36 | opacity: 0; 37 | background-color: currentColor; 38 | } 39 | } 40 | } 41 | 42 | #identity-icon-label { 43 | /* increase space between icon and text - as identity box padding */ 44 | padding-inline-start: 8px !important; 45 | } 46 | } 47 | 48 | @include Animate { 49 | .identity-box-button::after { 50 | transition: opacity 0.2s var(--animation-easing-function); 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/urlview/_move_icon_to_left.scss: -------------------------------------------------------------------------------- 1 | .urlbarView-type-icon { 2 | min-width: 16px !important; 3 | height: 16px !important; 4 | margin-block: 0 !important; 5 | margin-inline-start: 0 !important; 6 | } 7 | 8 | .urlbarView-favicon { 9 | margin-inline-start: 20px !important; 10 | } 11 | -------------------------------------------------------------------------------- /src/utils/_accent_color.scss: -------------------------------------------------------------------------------- 1 | @use "option" as *; 2 | 3 | // Compatibility for accent color 4 | // https://github.com/mozilla/gecko-dev/commit/4c5f20179e8d3b963dc588efb9dc2c7b49e7bb31 5 | // 6 | // Need to hard coded #437 7 | $accentColor: AccentColor; 8 | $accentTextColor: AccentColorText; 9 | 10 | @mixin AccentColor($mode: "-moz-accent-color") { 11 | @content; 12 | 13 | @include Option("userChrome.compatibility.accent_color") { 14 | @if $mode == "Highlight" { 15 | $accentColor: Highlight !global; 16 | $accentTextColor: HighlightText !global; 17 | } 18 | @else { 19 | $accentColor: -moz-accent-color !global; 20 | $accentTextColor: -moz-accent-color-foreground !global; 21 | } 22 | 23 | @content; 24 | } 25 | $accentColor: AccentColor !global; 26 | $accentTextColor: AccentColorText !global; 27 | } 28 | -------------------------------------------------------------------------------- /src/utils/_color_scheme.scss: -------------------------------------------------------------------------------- 1 | // -moz-toolbar-prefers-color-scheme is removed at v95, #250 2 | 3 | @mixin Dark() { 4 | @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { 5 | @content; 6 | } 7 | } 8 | @mixin Light() { 9 | @media (-moz-toolbar-prefers-color-scheme: light), (prefers-color-scheme: light) { 10 | @content; 11 | } 12 | } 13 | 14 | @mixin Contrast() { 15 | @media (prefers-contrast) { 16 | @content; 17 | } 18 | } 19 | 20 | @mixin NotContrast() { 21 | @media not all and (prefers-contrast) { 22 | @content; 23 | } 24 | } 25 | 26 | @mixin Animate() { 27 | @media (prefers-reduced-motion: no-preference) { 28 | @content; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/utils/_each.scss: -------------------------------------------------------------------------------- 1 | @use "sass:map"; 2 | @use "sass:list"; 3 | @use "list" as list-utils; 4 | 5 | $_defaultOption: ( 6 | "separator": ", ", 7 | "quoted": false 8 | ); 9 | 10 | @mixin AtEach($name, $list, $prefix: null, $option: $_defaultOption) { 11 | $option: map.merge($_defaultOption, $option); 12 | $separator: map.get($option, "separator"); 13 | $quoted: map.get($option, "quoted"); 14 | $quoted: if($quoted, "\"", null); 15 | 16 | $listL: list.length($list); 17 | @if $listL >= 1 { 18 | $first: list.nth($list, 1); 19 | @if $first != null and $first != () { 20 | $blocks: "#{$prefix}(#{$quoted}#{$first}#{$quoted})"; 21 | @if $listL > 1 { 22 | @for $i from 2 through ($listL) { 23 | $nextBlock: list.nth($list, $i); 24 | $nextBlock: "#{$separator}#{$prefix}(#{$quoted}#{$nextBlock}#{$quoted})"; 25 | $blocks: "#{$blocks}#{$nextBlock}"; 26 | } 27 | } 28 | @#{$name} #{"#{$blocks}"} { 29 | @content; 30 | } 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/utils/_has.scss: -------------------------------------------------------------------------------- 1 | // Need `:has selector` 2 | 3 | @mixin Has() { 4 | @supports selector(:has(a)) { 5 | @content; 6 | } 7 | } 8 | 9 | @mixin NotHas() { 10 | @supports not selector(:has(a)) { 11 | @content; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/utils/_list.scss: -------------------------------------------------------------------------------- 1 | // https://kittygiraudel.com/2013/08/08/advanced-sass-list-functions/ 2 | // https://gist.github.com/Jakobud/ec056b52f3673cc369dc97f2c2428424 3 | 4 | @function remove($list, $value, $recursive: false) { 5 | $result: (); 6 | 7 | @for $i from 1 through length($list) { 8 | @if type-of(nth($list, $i)) == list and $recursive { 9 | $result: append($result, remove(nth($list, $i), $value, $recursive)); 10 | } @else if nth($list, $i) != $value { 11 | $result: append($result, nth($list, $i)); 12 | } 13 | } 14 | 15 | @return $result; 16 | } 17 | 18 | @function to-string($list, $glue: '', $is-nested: false) { 19 | $result: null; 20 | 21 | @for $i from 1 through length($list) { 22 | $e: nth($list, $i); 23 | 24 | @if type-of($e) == list { 25 | $result: $result#{to-string($e, $glue, true)}; 26 | } @else { 27 | $result: if( 28 | $i != length($list) or $is-nested, 29 | $result#{$e}#{$glue}, 30 | $result#{$e} 31 | ); 32 | } 33 | } 34 | 35 | @return $result; 36 | } 37 | -------------------------------------------------------------------------------- /src/utils/_media.scss: -------------------------------------------------------------------------------- 1 | @use "each"; 2 | 3 | @mixin each($list...) { 4 | @include each.AtEach("media", $list) { 5 | @content; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/utils/_moz_document.scss: -------------------------------------------------------------------------------- 1 | @mixin moz-document($urlList...) { 2 | $result: (); 3 | @each $prefix, $urlPattern in $urlList { 4 | $result: append($result, #{$prefix}("#{$urlPattern}"), $separator: comma); 5 | } 6 | 7 | @#{-moz-document} #{$result} { 8 | @content; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/utils/_native_menu.scss: -------------------------------------------------------------------------------- 1 | @use "option" as *; 2 | 3 | @mixin NativeMenu() { 4 | @include Option("widget.macos.native-context-menus", "widget.gtk.native-context-menus") { 5 | @content; 6 | } 7 | } 8 | 9 | @mixin NativeMenuPopup() { 10 | menupopup:is(#historyMenuPopup, #bookmarksMenuPopup), 11 | menupopup:not([placespopup="true"]) { 12 | @content; 13 | } 14 | } 15 | 16 | @mixin WinNativeMenu() { 17 | @media not (-moz-windows-non-native-menus) { 18 | @content; 19 | } 20 | } 21 | 22 | @mixin WinNonNativeMenu() { 23 | @media (-moz-windows-non-native-menus) { 24 | @content; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/utils/_theme.scss: -------------------------------------------------------------------------------- 1 | @use "sass:selector"; 2 | 3 | //== Privated Variables ======================================================== 4 | $_lwTheme: ":-moz-lwtheme"; 5 | 6 | $_lightdark: "[lwtheme-mozlightdark]"; // Legacy - FF v96 7 | $_lightText: '[lwthemetextcolor="bright"]'; 8 | $_darkText: ":not(#{$_lightText})"; 9 | 10 | $_sysDark: "[lwt-default-theme-in-dark-mode]"; 11 | $_lightStyle: '[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"]'; 12 | $_darkStyle: '[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]'; 13 | 14 | //== Mixin ===================================================================== 15 | @function built-in-default-theme() { 16 | $oldDefault: selector.append(":root", $_lightdark); 17 | $newDefault: selector.append(":root", ":is(#{$_lightStyle}, #{$_darkStyle})"); 18 | 19 | @return "#{$oldDefault}, #{$newDefault}"; 20 | } 21 | 22 | @function system-default-theme() { 23 | $sysLight: selector.append(":root", ":not(#{$_lwTheme})"); 24 | $sysDark: selector.append(":root", $_sysDark); 25 | 26 | @return "#{$sysLight}, #{$sysDark}"; 27 | } 28 | 29 | @function built-in-light-theme() { 30 | $oldLight: selector.append(":root", $_lightdark, $_darkText); 31 | $newLight: selector.append(":root", $_lightStyle); 32 | 33 | @return "#{$oldLight}, #{$newLight}"; 34 | } 35 | 36 | @function built-in-dark-theme() { 37 | $oldDark: selector.append(":root", $_lightdark, $_lightText); 38 | $newDark: selector.append(":root", $_darkStyle); 39 | 40 | @return "#{$oldDark}, #{$newDark}"; 41 | } 42 | -------------------------------------------------------------------------------- /src/utils/_window_control.scss: -------------------------------------------------------------------------------- 1 | @use "os" as *; 2 | 3 | @mixin WindowControl_Right() { 4 | @include OS($win) { 5 | @content; 6 | } 7 | @include OS($linux) { 8 | @media (-moz-gtk-csd-reversed-placement: 0) { 9 | @content; 10 | } 11 | } 12 | } 13 | 14 | @mixin WindowControl_Left() { 15 | @include OS($mac) { 16 | @content; 17 | } 18 | @include OS($linux) { 19 | @media (-moz-gtk-csd-reversed-placement) { 20 | @content; 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /te6-custom-content.css: -------------------------------------------------------------------------------- 1 | @-moz-document url("about:newtab") { 2 | * { 3 | --radius: 12px; 4 | } 5 | 6 | .outer-wrapper { 7 | width: 100vw !important; 8 | height: 100vh !important; 9 | display: flex !important; 10 | padding: 0 !important; 11 | padding-bottom: 20vh !important; 12 | } 13 | 14 | .search-inner-wrapper:hover #newtab-search-text { 15 | border: 1px solid transparent !important; 16 | } 17 | 18 | #newtab-search-text { 19 | border-radius: var(--radius) !important; 20 | box-shadow: 0 3px 5px rgba(40, 40, 40, 0.12) !important; 21 | transition: box-shadow 0.3s !important; 22 | } 23 | 24 | #newtab-search-text:hover { 25 | box-shadow: 0 6px 8px rgba(40, 40, 40, 0.2) !important; 26 | } 27 | 28 | #newtab-search-text:focus { 29 | border: none !important; 30 | box-shadow: 0 5px 6px rgba(40, 40, 40, 0.26) !important; 31 | } 32 | 33 | #searchSubmit { 34 | border-radius: 0 var(--radius) var(--radius) 0 !important; 35 | } 36 | 37 | #searchSubmit:active { 38 | border: none !important; 39 | } 40 | 41 | #newtab-search-text:placeholder-shown+#searchSubmit { 42 | display: none !important; 43 | } 44 | 45 | .search-inner-wrapper:active #newtab-search-text { 46 | border: none !important; 47 | } 48 | 49 | #root>div>span>button.icon-settings { 50 | display: none !important; 51 | } 52 | } -------------------------------------------------------------------------------- /userChrome.css: -------------------------------------------------------------------------------- 1 | /** Import Lepton stylesheet (Chrome) *****************************************/ 2 | @import url("css/leptonChrome.css"); 3 | 4 | /** Add your custom styles below **********************************************/ 5 | @import url("macos-native-tabbar.css"); 6 | @import url("te6-custom.css"); 7 | 8 | /* Enable option to edit bookmark URLs under Add Bookmark (blue star) menu */ 9 | /* 10 | * .editBMPanel_locationRow { 11 | * display: initial !important; 12 | * } 13 | */ 14 | 15 | /* Disable Email Image/Audio/Video and Set as Desktop Background context menu items */ 16 | /* 17 | * #context-sendimage, 18 | * #context-sendvideo, 19 | * #context-sendaudio, 20 | * #context-setDesktopBackground { 21 | * display: none !important; 22 | * } 23 | */ -------------------------------------------------------------------------------- /userContent.css: -------------------------------------------------------------------------------- 1 | /** Import Lepton stylesheet (Content) ****************************************/ 2 | @import url("css/leptonContent.css"); 3 | 4 | /** Add your custom styles below **********************************************/ 5 | @import url("te6-custom-content.css"); 6 | -------------------------------------------------------------------------------- /waterfox.sh: -------------------------------------------------------------------------------- 1 | ## Please refer to the following commit: 2 | # https://github.com/WaterfoxCo/Waterfox/commit/f92e95c09ecd98f987bf54e1e6a1cf969b683277 3 | 4 | ## Replace Path 5 | # `./icons/` to `chrome://browser/skin/lepton/` 6 | replace_icon_path() { 7 | file=$1 8 | sed -i "s/\.\.\/icons\//chrome:\/\/browser\/skin\/lepton\//g" "${file}" 9 | } 10 | replace_icon_path css/leptonChrome.css 11 | replace_icon_path css/leptonContent.css 12 | --------------------------------------------------------------------------------