├── .gitignore ├── LICENSE ├── README.md ├── add_style.py ├── chrome ├── auto_devtools_theme_for_rdm.css ├── autohide_bookmarks_and_main_toolbars.css ├── autohide_bookmarks_toolbar.css ├── autohide_main_toolbar.css ├── autohide_menubar.css ├── autohide_navigation_button.css ├── autohide_sidebar.css ├── autohide_tabstoolbar.css ├── autohide_tabstoolbar_v2.css ├── autohide_toolbox.css ├── bookmark_panel_enlarge.css ├── bookmarks_below_content.css ├── button_effect_icon_glow.css ├── button_effect_scale_onclick.css ├── button_effect_scale_onhover.css ├── buttonlike_toolbarbuttons.css ├── centered_statuspanel.css ├── centered_tab_content.css ├── centered_tab_label.css ├── classic_firefox_menu_button.css ├── classic_grid_main_menu_popup.css ├── click_selected_tab_to_focus_urlbar.css ├── color_variable_template.css ├── combined_favicon_and_tab_close_button.css ├── combined_tabs_and_main_toolbars.css ├── compact_extensions_panel.css ├── compact_proton.css ├── compact_urlbar_megabar.css ├── context_menus_more_proton.css ├── curved_tabs.css ├── custom_default_tab_favicons.css ├── custom_menupopup_check_icons.css ├── dark_checkboxes_and_radios.css ├── deprecated │ ├── blank_page_background.css │ ├── bookmarks_toolbar_on_newtabs_only.css │ ├── bookmarksbar_on_new_tabs_only.css │ ├── centered_top_statuspanel.css │ ├── dark_additional_windows.css │ ├── dark_context_menus.css │ ├── dark_date_picker_panel.css │ ├── dark_theme_aware_statuspanel.css │ ├── fake_tab_tooltip.css │ ├── full_width_urlbar_popup.css │ ├── google_style_urlbar_popup.css │ ├── multi-row_tabs_Fx66+.css │ ├── multi-row_tabs_below_content_legacy.css │ ├── multi-row_tabs_legacy.css │ ├── overlay_scrollbars.as.css │ ├── passive_tab_audio_label.css │ ├── theme_additional_windows.css │ ├── theme_aware_modal_prompts.css │ ├── theme_color_variables.css │ ├── theme_popups_and_menus.css │ ├── theme_sidebar.css │ ├── theme_toolbars.css │ ├── toggle_bookmarksbar_with_alt.css │ └── urlbar_and_popup_equal_width.css ├── disable_newtab_on_middle_click.css ├── drag_window_from_urlbar.css ├── dual_color_tab_attention_indicator.css ├── fake_statusbar_w_bookmarksbar.css ├── fake_statusbar_w_menubar.css ├── fake_urlbar_dropmarker.css ├── floating_findbar_on_top.css ├── grid_overflow_menu.css ├── hide_statuspanel_when_fullscreen.css ├── hide_tabs_scrollbuttons.css ├── hide_tabs_toolbar.css ├── hide_tabs_toolbar_osx.css ├── hide_tabs_toolbar_v2.css ├── hide_tabs_toolbar_w_alltabs_button.css ├── hide_tabs_with_one_tab.css ├── hide_tabs_with_one_tab_w_window_controls.css ├── hide_toolbox_top_bottom_borders.css ├── hide_urlbar_first_row.css ├── icon_only_context_menu_text_controls.css ├── icon_only_tabs.css ├── iconized_content_context_menu.css ├── iconized_main_menu.css ├── iconized_menubar_items.css ├── iconized_places_context_menu.css ├── iconized_tabs_context_menu.css ├── iconized_textbox_context_menu.css ├── inline_tab_audio_icons.css ├── integrated_searchbar_popup.css ├── less_static_throbber.css ├── linux_gtk_window_control_patch.css ├── loading_indicator_bouncing_line.css ├── loading_indicator_rotating_image.css ├── menubar_in_main_toolbar.css ├── menubar_in_tabs_toolbar.css ├── menubar_in_tabs_toolbar_oneliner_compatible.css ├── menulike_bookmarks_folder_popups.css ├── menupopup_forced_color_schemes.css ├── minimal_in-UI_scrollbars.css ├── minimal_text_fields.css ├── minimal_toolbarbuttons.css ├── minimal_toolbarbuttons_v2.css ├── minimal_toolbarbuttons_v3.css ├── more_visible_tab_icon.css ├── multi-row_bookmarks.css ├── multi-row_main_toolbar.css ├── multi-row_oneliner_combo_patch.css ├── multi-row_tabs.css ├── multi-row_tabs_below_content.css ├── multi-row_tabs_separate_pinned_row_patch.css ├── multi-row_tabs_window_control_patch.css ├── navbar_below_content.css ├── navbar_tabs_oneliner.css ├── navbar_tabs_oneliner_menu_buttons_on_right.css ├── navbar_tabs_oneliner_tabs_on_left.css ├── navbar_tabs_responsive_oneliner.css ├── navigation_buttons_inside_urlbar.css ├── newtab_button_always_on_hover.css ├── non_floating_sharp_tabs.css ├── normal_pinned_tabs.css ├── numbered_tabs.css ├── oneline_toolbar.css ├── overlay_fullscreen_toolbars.css ├── overlay_menubar.css ├── overlay_sidebar_header.css ├── overlay_tab_audio_icons.css ├── page_action_buttons_on_hover.css ├── page_action_buttons_on_urlbar_hover.css ├── pinned_tabs_on_right.css ├── privatemode_indicator_as_menu_button.css ├── proton_dark_light_notifications.css ├── reload_button_in_urlbar.css ├── round_caption_buttons.css ├── round_ui_items.css ├── rounded_menupopups.css ├── scrollable_menupopups.css ├── scrollable_urlbar_popup.css ├── selected_tab_as_urlbar.css ├── selected_tab_gradient_border.css ├── sharp_menupopup_corners.css ├── show_navbar_on_focus_only.css ├── show_toolbars_in_popup_windows.css ├── show_urlbar_button.css ├── show_window_title_in_menubar.css ├── shrinking_pinned_tabs.css ├── status_inside_menubar.css ├── status_inside_urlbar.css ├── status_inside_urlbar_v2.css ├── tab_animated_active_border.css ├── tab_close_button_always_on_hover.css ├── tab_closing_animation.css ├── tab_count_in_alltabs_button.css ├── tab_effect_scale_onclick.css ├── tab_line_loading_indicator.css ├── tab_loading_progress_bar.css ├── tab_loading_progress_throbber.css ├── tab_separator_lines.css ├── tabs_animated_gradient_border.css ├── tabs_below_content.css ├── tabs_below_content_v2.css ├── tabs_fill_available_width.css ├── tabs_on_bottom.css ├── tabs_on_bottom_menubar_on_top_patch.css ├── tabs_on_bottom_v2.css ├── textual_context_navigation.css ├── textual_searchbar_one-offs.css ├── toggle_tabs_toolbar_with_alt.css ├── toolbarbuttons_icon+label.css ├── toolbarbuttons_in_tabs_periphery.css ├── toolbars_below_content.css ├── toolbars_below_content_v2.css ├── urlbar_centered_text.css ├── urlbar_connection_type_background_colors.css ├── urlbar_connection_type_text_colors.css ├── urlbar_container_color_border.css ├── urlbar_info_icons_on_hover.css ├── urlbar_popup_full_width.css ├── urlbar_results_in_two_rows.css ├── urlbar_visible_on_active_tab_click.css ├── vertical_bookmarks_toolbar.css ├── vertical_context_navigation.css ├── vertical_context_navigation_v2.css ├── vertical_menubar.css ├── vertical_popup_menubar.css ├── vertical_tabs.css ├── vertical_urlbar_one-off_items.css ├── window_control_fallback_for_custom_windows_theme.css ├── window_control_force_linux_system_style.css └── window_control_placeholder_support.css ├── content ├── about_page_scrollbars.css ├── addon_manage_buttons_without_popup.css ├── auto_devtools_theme.css ├── compact_about_config.css ├── compact_addons_manager.css ├── css_scrollbar_width_color.css ├── dark_settings_pages.css ├── high_contrast_extended_style.css ├── limit_css_data_leak.css ├── multi_column_addons.css ├── newtab_background_color.css ├── newtab_background_image.css ├── remove_textbox_focusring.css ├── standalone_image_page_mods.css ├── transparent_reader_toolbar.css └── two_column_addons.css ├── html_resources ├── code-block │ ├── code-block-highlighter.js │ ├── code-block.css │ └── code-block.js ├── ext.svg ├── favicon.svg ├── main.css ├── selector.js └── tagmap.json ├── index.html ├── tags.csv ├── userChrome_example.css └── userContent_example.css /.gitignore: -------------------------------------------------------------------------------- 1 | userChrome.css 2 | userContent.css 3 | -------------------------------------------------------------------------------- /chrome/autohide_menubar.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_menubar.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 | /* Makes menubar slide over tabs toolbar when hovered */ 5 | /* Menubar will be shown when cursor touches top of the spacers on both side of tabs. Window controls will be in menubar, so they are automatically hidden */ 6 | /* Make sure you have menubar enabled */ 7 | 8 | :root{ --uc-menubar-spacer: 11px } 9 | :root[sizemode="maximized"]{ --uc-menubar-spacer: 1px } 10 | 11 | #nav-bar-customization-target, 12 | #PanelUI-button, 13 | #nav-bar-overflow-button, 14 | #TabsToolbar > .toolbar-items{ position: relative; z-index: 5; } 15 | #toolbar-menubar > spacer{ flex-grow: 1 } 16 | 17 | #toolbar-menubar > spacer, 18 | #toolbar-menubar > .titlebar-buttonbox-container{ order: 1000 } 19 | 20 | #TabsToolbar > .titlebar-spacer{ display: flex !important; } 21 | 22 | :where(#toolbar-menubar){ -moz-window-dragging: no-drag; } 23 | 24 | #toolbar-menubar:not([customizing]){ 25 | --uc-menubar-height: 34px; 26 | position: fixed; 27 | display: flex; 28 | width: 100vw; 29 | height: var(--uc-menubar-height); 30 | /* --uc-menubar-extra-margin is defined in toolbars_below_content.css */ 31 | margin-top: calc(var(--uc-menubar-spacer) - var(--uc-menubar-height) + var(--uc-menubar-extra-margin,0px)); 32 | transition: margin-top 150ms linear !important; 33 | z-index:4; 34 | } 35 | 36 | #toolbar-menubar:hover{ 37 | background-color: var(--toolbar-bgcolor) !important; 38 | margin-top: var(--uc-menubar-extra-margin,0px) !important; 39 | z-index: 6 40 | } 41 | 42 | #main-menubar > menu{ padding-bottom: 4px } 43 | 44 | /* This exists only for compatibility reasons with some other styles */ 45 | #navigator-toolbox{ --uc-hide-window-control-space: 0 } -------------------------------------------------------------------------------- /chrome/autohide_navigation_button.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_navigation_button.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 | /* Hides navigation-buttons (back/forward/stop/reload) buttons and shows them when cursor is over the right edge of urlbar */ 5 | /* Disabled button are completely hidden, such as back-button when there is no page to go back to */ 6 | 7 | /* To set this up you need to customize the order of items to be such that layout from LEFT to RIGHT is 8 | urlbar 9 | flexible space 10 | navigation-buttons in any order 11 | */ 12 | /* The order of items before urlbar and after navigation-buttons doesn't matter */ 13 | 14 | :is(#back-button,#forward-button), 15 | #reload-button{ 16 | margin-inline-start: -34px !important; 17 | visibility:hidden; 18 | transition: margin 66ms linear !important 19 | } 20 | 21 | :is(#back-button,#forward-button):hover, 22 | :is(#back-button,#forward-button):hover ~ :is(#back-button,#stop-reload-button,#forward-button), 23 | :is(#back-button,#forward-button):hover ~ #stop-reload-button > #reload-button, 24 | #urlbar-container + toolbarspring:hover ~ :is(#back-button,#forward-button), 25 | #stop-reload-button:hover > #reload-button, 26 | #urlbar-container + toolbarspring:hover ~ #stop-reload-button > #reload-button{ 27 | margin-inline-start: 0px !important; 28 | visibility: visible 29 | } 30 | 31 | #nav-bar-customization-target > #downloads-button { margin-inline-start: 0px !important; visibility: visible !important; } 32 | 33 | :is(#back-button,#forward-button)[disabled], 34 | #stop-reload-button > [disabled]{ display: none } 35 | 36 | #urlbar-container + toolbarspring{ max-width: 4px !important; min-width: 4px !important; } -------------------------------------------------------------------------------- /chrome/autohide_tabstoolbar.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_tabstoolbar.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 | /* Hide tabs unless cursor is on top of toolbar */ 5 | 6 | :root:not([customizing]) #navigator-toolbox{ 7 | position: relative; 8 | z-index: 1; 9 | } 10 | 11 | #navigator-toolbox:not(:hover) > #titlebar{ 12 | -moz-window-dragging: no-drag !important; 13 | pointer-events: none 14 | } 15 | 16 | :root:not([customizing],[chromehidden~="menubar"]) #navigator-toolbox:hover, 17 | :root:not([customizing],[chromehidden~="menubar"]) #titlebar{ 18 | margin-bottom: calc(0px - 2 * var(--tab-block-margin) - var(--tab-min-height)); 19 | } 20 | #TabsToolbar:not([customizing]){ visibility: hidden; transition: visibility 0ms linear 200ms } 21 | 22 | #navigator-toolbox, 23 | #titlebar{ transition: margin-bottom 48ms ease-out 200ms !important } 24 | 25 | #navigator-toolbox:hover{ transition-delay: 0s !important } 26 | #navigator-toolbox:hover > #titlebar{ 27 | margin-bottom: 0px; 28 | transition-delay: 0s !important; 29 | } 30 | 31 | #navigator-toolbox:hover #TabsToolbar{ 32 | visibility: visible; 33 | transition-delay: 18ms !important; 34 | } 35 | /* These rules make sure that height of tabs toolbar doesn't exceed tab-min-height */ 36 | #tabbrowser-tabs:not([secondarytext-unsupported]) .tab-label-container{ 37 | max-height: var(--tab-min-height); 38 | } 39 | .tab-label{ line-height: 20px !important; } 40 | :root[uidensity="compact"] .tab-label{ line-height: 18px !important; } 41 | -------------------------------------------------------------------------------- /chrome/bookmark_panel_enlarge.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/bookmark_panel_enlarge.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 | /* Makes the Edit Bookmark dialog panel wider and the folder tree larger */ 5 | 6 | /* Width Section */ 7 | 8 | #editBookmarkPanel { 9 | width: max(50vw, 32em); 10 | } 11 | 12 | /* Height Section */ 13 | 14 | /* Choose 1 of 3: Biggest (default), Big, or Balanced */ 15 | 16 | /* (1) Biggest folder tree, for use with collapsed tag panel */ 17 | 18 | #editBMPanel_folderTree { 19 | height: 64vh !important; 20 | } 21 | 22 | /* (2) Big folder tree with default tag panel */ 23 | 24 | /* 25 | #editBMPanel_folderTree { 26 | height: 53vh !important; 27 | } 28 | */ 29 | 30 | /* (3) Balanced folder tree with larger tag panel */ 31 | 32 | /* 33 | #editBMPanel_folderTree { 34 | height: 32vh !important; 35 | } 36 | #editBMPanel_tagsSelector { 37 | height: 32vh !important; 38 | } 39 | */ 40 | -------------------------------------------------------------------------------- /chrome/bookmarks_below_content.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/bookmarks_below_content.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 | /* Makes bookmarks toolbar show below web-content area. */ 5 | 6 | @-moz-document url("chrome://browser/content/browser.xhtml"){ 7 | :root:not([inDOMFullscreen],[sizemode="fullscreen"],[chromehidden="direrctories"]){ 8 | --uc-bm-toolbar-height: 28px; /* Adjust if needed */ 9 | } 10 | #browser, 11 | #customization-container{ 12 | margin-bottom: var(--uc-bm-toolbar-height,0); 13 | border-bottom: 1px solid var(--chrome-content-separator-color,light-dark(rgb(204, 204, 204), hsl(240, 5%, 5%))) 14 | } 15 | #navigator-toolbox:has(> #PersonalToolbar[collapsed="true"]) + #browser{ 16 | margin-bottom: 0; 17 | border-bottom: none; 18 | } 19 | #PersonalToolbar{ 20 | position: absolute; 21 | bottom: 0; 22 | width: 100%; 23 | } 24 | } -------------------------------------------------------------------------------- /chrome/button_effect_scale_onclick.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/button_effect_scale_onclick.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 | /* Effect */ 5 | .urlbar-icon, 6 | .toolbarbutton-icon, 7 | .downloadIconShow > .button-box > .button-icon, 8 | .menuitem-iconic :is(.menu-iconic-icon,.menu-icon), 9 | #downloads-indicator-icon, 10 | .urlbar-input-container [role="button"] image{ 11 | transition: transform 83ms linear !important; 12 | } 13 | toolbar .toolbarbutton-1 > .toolbarbutton-icon{ 14 | transition: padding 83ms linear !important; 15 | } 16 | .urlbar-input-container [role="button"]:active image, 17 | .downloadIconShow:active > .button-box > .button-icon, 18 | #downloads-button:active #downloads-indicator-icon, 19 | toolbarbutton#scrollbutton-up:active > .toolbarbutton-icon, 20 | toolbarbutton:not(.toolbarbutton-1):active > .toolbarbutton-icon, 21 | toolbar .toolbarbutton-1:not([disabled]):active > .toolbarbutton-badge-stack > .toolbarbutton-icon, 22 | .menuitem-iconic:active :is(.menu-iconic-icon,.menu-icon), 23 | .urlbar-page-action:active > .urlbar-icon{ 24 | transform: scale(0.6) !important; 25 | } 26 | .tab-close-button:hover{ 27 | transition: padding-block 83ms linear; 28 | } 29 | .tab-close-button:active{ 30 | padding: calc(var(--tab-close-button-padding) + 2px) !important; 31 | } 32 | toolbarbutton#scrollbutton-down:active > .toolbarbutton-icon{ transform: scale(-0.6) !important; } 33 | 34 | toolbar .toolbarbutton-1:not([disabled]):active > .toolbarbutton-icon{ 35 | padding: calc(var(--toolbarbutton-inner-padding) + 3px) !important; 36 | } -------------------------------------------------------------------------------- /chrome/button_effect_scale_onhover.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/button_effect_scale_onhover.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 | /* Effect */ 5 | .urlbar-icon, 6 | .toolbarbutton-icon, 7 | .tab-close-button, 8 | .downloadIconShow > .button-box > .button-icon, 9 | .menuitem-iconic is(.menu-iconic-icon,.menu-icon), 10 | #downloads-indicator-icon, 11 | .urlbar-input-container [role="button"] image{ 12 | transition: transform 83ms linear !important; 13 | } 14 | 15 | toolbar .toolbarbutton-1 > .toolbarbutton-icon{ 16 | transition: padding 83ms linear !important; 17 | } 18 | .urlbar-input-container [role="button"] image, 19 | .tab-close-button, 20 | .downloadIconShow > .button-box > .button-icon, 21 | .unified-extensions-item-menu-button > .toolbarbutton-icon, 22 | #downloads-button #downloads-indicator-icon, 23 | toolbarbutton#scrollbutton-up > .toolbarbutton-icon, 24 | toolobar .toolbarbutton-1 > .toolbarbutton-icon, 25 | toolbar .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon, 26 | .menuitem-iconic is(.menu-iconic-icon,.menu-icon), 27 | .urlbar-icon{ 28 | transform: scale(0.8) !important; 29 | } 30 | toolbarbutton#scrollbutton-down > .toolbarbutton-icon{ transform: scale(-0.8) !important; } 31 | 32 | toolbar .toolbarbutton-1 > .toolbarbutton-icon{ 33 | padding: calc(var(--toolbarbutton-inner-padding) + 2px) !important; 34 | } 35 | .urlbar-input-container [role="button"]:not([disabled]):hover image, 36 | .tab-close-button:hover, 37 | .downloadIconShow:hover > .button-box > .button-icon, 38 | #downloads-button:not([disabled]):hover #downloads-indicator-icon, 39 | toolbarbutton#scrollbutton-up:not([disabled]):hover > .toolbarbutton-icon, 40 | toolbarbutton:not(.toolbarbutton-1):not([disabled]):hover > .toolbarbutton-icon, 41 | toolbar .toolbarbutton-1:not([disabled]):hover > .toolbarbutton-badge-stack > .toolbarbutton-icon, 42 | .menuitem-iconic:not([disabled]):hover :is(.menu-iconic-icon,.menu-icon), 43 | .urlbar-page-action:hover > .urlbar-icon{ 44 | transform: none !important; 45 | } 46 | toolbarbutton#scrollbutton-down:not([disabled]):hover > .toolbarbutton-icon{transform: scale(-1) !important;} 47 | 48 | toolbar .toolbarbutton-1:not([disabled]):hover > .toolbarbutton-icon{ 49 | padding: var(--toolbarbutton-inner-padding) !important; 50 | } -------------------------------------------------------------------------------- /chrome/centered_statuspanel.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/centered_statuspanel.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 | #statuspanel:not([hidden]){ 5 | display: flex !important; 6 | justify-self: center !important; 7 | padding-top: 0 !important; 8 | inset-inline: auto !important; 9 | min-width: unset !important; 10 | } 11 | #statuspanel-label{ 12 | border-width: 1px 1px 0px 1px !important; 13 | border-style: solid !important; 14 | margin-inline: auto !important; 15 | } 16 | /* Set this pref to true in about:config to make statuspanel show at top instead */ 17 | @media (-moz-bool-pref: "userchrome.centered-statuspanel.on-top.enabled"), 18 | -moz-pref("userchrome.centered-statuspanel.on-top.enabled"){ 19 | #statuspanel:not([hidden]){ 20 | inset-block: 0 auto !important; 21 | } 22 | #statuspanel-label{ 23 | border-width: 0 1px 1px 1px !important; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /chrome/centered_tab_content.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/centered_tab_content.css made available under Mozilla Public License v. 2.0 2 | See the above repository for updates as well as full license text. */ 3 | .tabbrowser-tab[selected]:not(:hover):not([pinned]) .tab-label-container, 4 | #tabbrowser-tabs:not([closebuttons="activetab"]) .tabbrowser-tab:not(:hover):not([pinned]) .tab-label-container{ 5 | padding-inline-end: 6px !important; 6 | } 7 | .tab-icon-stack{ 8 | margin-inline-start: auto 9 | } 10 | .tab-label-container{ 11 | max-width: min-content; 12 | margin-inline-end: auto; 13 | } 14 | -------------------------------------------------------------------------------- /chrome/centered_tab_label.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/centered_tab_label.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 | .tab-label-container{ 5 | display: grid; 6 | align-content: center; 7 | } 8 | 9 | .tab-secondary-label{ 10 | justify-content: center; 11 | } 12 | 13 | .tab-label, 14 | .tab-secondary-label{ overflow: hidden } 15 | 16 | .tabbrowser-tab[selected]:not(:hover) .tab-label-container:not([labeldirection="rtl"]), 17 | #tabbrowser-tabs:not([closebuttons="activetab"]) .tabbrowser-tab:not(:hover,[pinned]) .tab-label-container:not([labeldirection="rtl"]){ 18 | margin-inline-end: 6px; 19 | } 20 | -------------------------------------------------------------------------------- /chrome/classic_firefox_menu_button.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/classic_firefox_menu_button.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 | /* Makes the main menu button appear in the top left corner styled similarly to Firefox versions 4 to 29 */ 5 | 6 | #PanelUI-button{ 7 | /* Nightly colors scheme */ 8 | /*--uc-fx-button-color: #9752fa; 9 | --uc-fx-button-sec-color: #00b2fa8a;*/ 10 | 11 | /* Release color scheme*/ 12 | --uc-fx-button-color: #ff8313; 13 | --uc-fx-button-sec-color: #ffdfbf85; 14 | } 15 | 16 | #PanelUI-button{ 17 | order: -1; 18 | margin-inline: 2px var(--uc-window-drag-space-pre,24px) !important; 19 | } 20 | :root:is([tabsintitlebar],[customtitlebar]) #nav-bar{ 21 | border-left-width: 0px; 22 | padding-left: 0px !important; 23 | } 24 | #PanelUI-menu-button{ 25 | align-items: start; 26 | } 27 | #PanelUI-menu-button > stack{ 28 | background-color: var(--uc-fx-button-color); 29 | background-image: linear-gradient(var(--uc-fx-button-sec-color), transparent) !important; 30 | list-style-image: url(chrome://global/skin/icons/arrow-down-12.svg) !important; 31 | border-radius: 0 0 4px 4px !important; 32 | border: 1px groove black; 33 | outline: 1px solid #cdd8e4; 34 | border-top: none; 35 | display: flex; 36 | padding: 4px 10px !important; 37 | } 38 | 39 | #PanelUI-menu-button:hover > stack, 40 | #PanelUI-menu-button[open] > stack{ 41 | background-color: var(--uc-fx-button-color) !important; 42 | background-image: linear-gradient(rgba(100,100,150,0.3), transparent) !important; 43 | } 44 | 45 | #PanelUI-menu-button > stack::before{ 46 | display: flex; 47 | content: "Firefox"; /* Change text here */ 48 | color: white; 49 | text-shadow: 0 0 2px black; 50 | font-weight: 700; 51 | margin-inline-end: 4px; 52 | } 53 | 54 | /* OPTIONAL - move the menu button to top-left corner of the window. 55 | * Don't use this if you also use tabs_on_bottom.css 56 | */ 57 | 58 | /* 59 | #PanelUI-button{ 60 | position: fixed; 61 | display: flex; 62 | top: 0; 63 | } 64 | 65 | #toolbar-menubar, 66 | #toolbar-menubar[autohide="true"] + #TabsToolbar{ 67 | padding-left: 94px !important; 68 | } 69 | 70 | */ -------------------------------------------------------------------------------- /chrome/click_selected_tab_to_focus_urlbar.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/click_selected_tab_to_focus_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 | 4 | /* Clicking selected tab selects focuses urlbar */ 5 | /* Selected tab cannot be normally clicked (right-,middle- or left-clicked) EXCEPT from the tab icon */ 6 | 7 | /* Clicking selected pinned tab doesn't focus urlbar by default since I expect you might not want to change pinned tab address - see below */ 8 | 9 | 10 | /* Make selected tab unclickable so click goes to the capture box, obviously it can't be clicked at all anymore */ 11 | /* remove the :not([pinned]) bit to make clicking pinned tab AROUND the tab-icon focus urlbar*/ 12 | 13 | .tabbrowser-tab:not([pinned])[selected]{ pointer-events: none } 14 | 15 | :root{ 16 | --uc-window-control-width: 138px; 17 | --uc-buttons-width: 116px; 18 | --uc-window-drag-space-width: 40px; 19 | --uc-menubar-height: 0px; 20 | } 21 | @media (-moz-platform: windows), 22 | (-moz-platform: linux){ 23 | :root:is([sizemode="maximized"],[sizemode="fullscreen"]){ 24 | --uc-window-drag-space-width: 0px; 25 | } 26 | #toolbar-menubar[autohide="false"] ~ #nav-bar, 27 | #titlebar:has(> [autohide="false"]) + #nav-bar{ 28 | --uc-window-drag-space-width: 0px; 29 | --uc-menubar-height: 28px; 30 | } 31 | } 32 | /* Add back pointer-events to several elements so UI remains usable */ 33 | /* The selected tab can be clicked normally from the icon */ 34 | #TabsToolbar toolbarbutton, 35 | #TabsToolbar toolbaritem, 36 | .tabbrowser-tab, 37 | .tab-close-button, 38 | .tab-icon-stack{ 39 | pointer-events: auto 40 | } 41 | /* Invisible capture box behind tabs*/ 42 | :root:not([customizing]) .urlbar-input-container::before{ 43 | position: fixed; 44 | display: block; 45 | left: 0; 46 | top: var(--uc-menubar-height); 47 | width: var(--uc-buttons-width); 48 | height: calc(var(--tab-min-height) + 2*var(--tab-block-margin)); 49 | content: ""; 50 | pointer-events: auto; 51 | } 52 | :root:is([tabsintitlebar],[customtitlebar]):not([customizing]) .urlbar-input-container::before{ 53 | left: var(--uc-window-drag-space-width); 54 | width: calc(100vw - var(--uc-window-control-width) - var(--uc-buttons-width) - 2 * var(--uc-window-drag-space-width)); 55 | } 56 | .urlbar-input-container:focus-within::before{ display: none !important; } 57 | 58 | /* Make tabs appear over the invisible box */ 59 | :root:not([customizing]) #TabsToolbar-customization-target{ 60 | position: relative; 61 | z-index: 1; 62 | pointer-events: none 63 | } 64 | :root:is([tabsintitlebar],[customtitlebar]) .browser-titlebar, 65 | #titlebar{ 66 | opacity: 1 !important; 67 | will-change: unset !important; 68 | transition: none !important; 69 | } -------------------------------------------------------------------------------- /chrome/color_variable_template.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/color_variable_template.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 | /* You should enable any non-default theme for these to apply properly. Built-in dark and light themes should work */ 5 | :root{ 6 | /* Popup panels */ 7 | --arrowpanel-background: olive !important; 8 | --arrowpanel-border-color: green !important; 9 | --arrowpanel-color: cyan !important; 10 | --arrowpanel-dimmed: rgba(0,0,0,0.4) !important; 11 | /* window and toolbar background */ 12 | --lwt-accent-color: red !important; 13 | --lwt-accent-color-inactive: green !important; 14 | --toolbar-bgcolor: rgba(0,0,0,0.4) !important; 15 | /* tabs with system theme - text is not controlled by variable */ 16 | --tab-selected-bgcolor: powderblue !important; 17 | /* tabs with any other theme */ 18 | --lwt-text-color: cyan !important; 19 | --lwt-selected-tab-background-color: cornflowerblue !important; 20 | /* toolbar area */ 21 | --toolbarbutton-icon-fill: white !important; 22 | --lwt-toolbarbutton-hover-background: orange !important; 23 | --lwt-toolbarbutton-active-background: red !important; 24 | /* urlbar */ 25 | --toolbar-field-border-color: green !important; 26 | --toolbar-field-focus-border-color: pink !important; 27 | --urlbar-popup-url-color: cyan !important; 28 | /* urlbar Firefox < 92 */ 29 | --lwt-toolbar-field-background-color: olive !important; 30 | --lwt-toolbar-field-focus: grey !important; 31 | --lwt-toolbar-field-color: red !important; 32 | --lwt-toolbar-field-focus-color: white !important; 33 | /* urlbar Firefox 92+ */ 34 | --toolbar-field-background-color: olive !important; 35 | --toolbar-field-focus-background-color: grey !important; 36 | --toolbar-field-color: red !important; 37 | --toolbar-field-focus-color: white !important; 38 | /* sidebar - note the sidebar-box rule for the header-area */ 39 | --lwt-sidebar-background-color: purple !important; 40 | --lwt-sidebar-text-color: yellow !important; 41 | } 42 | /* line between nav-bar and tabs toolbar, 43 | also fallback color for border around selected tab */ 44 | #navigator-toolbox{ --lwt-tabs-border-color: cyan !important; } 45 | /* Line above tabs */ 46 | #tabbrowser-tabs{ --lwt-tab-line-color: white !important; } 47 | /* the header-area of sidebar needs this to work */ 48 | #sidebar-box{ --sidebar-background-color: purple !important; } 49 | -------------------------------------------------------------------------------- /chrome/combined_favicon_and_tab_close_button.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/combined_favicon_and_tab_close_button.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 | /* Show tab close button when cursor is over the tab icon */ 5 | 6 | /* inline_tab_audio_icons.css is recommended because otherwise you cannot mute the tab using the mute button */ 7 | 8 | .tab-content{ 9 | pointer-events: none 10 | } 11 | .tab-icon-image:not([busy]){ display: block !important; } 12 | :where(.tab-content:hover) .tab-icon-image, 13 | :where(.tab-content:hover) > .tab-icon-stack{ 14 | visibility: hidden; 15 | } 16 | .tab-close-button{ 17 | order: -1; 18 | display: flex !important; 19 | position: relative; 20 | margin-inline: -4px -20px !important; 21 | padding-inline-start: 7px !important; 22 | opacity: 0; 23 | width: unset !important; 24 | pointer-events: auto; 25 | } 26 | .tab-close-button:hover{ opacity: 1 } 27 | .tabbrowser-tab[pinned] .tab-close-button{ display: none !important; } 28 | -------------------------------------------------------------------------------- /chrome/compact_extensions_panel.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/compact_extensions_panel.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 | /* This style hides some information from the extensions-button panel, but makes it appear more compact. Might be useful for someone having lot of extensions */ 5 | 6 | #unified-extensions-view{ 7 | --uei-icon-size: 16px; 8 | } 9 | .unified-extensions-item-menu-button.subviewbutton{ 10 | padding: 0px !important; 11 | margin-inline-end: 0 !important; 12 | } 13 | .unified-extensions-item-action-button.subviewbutton{ 14 | padding-block: 6px !important; 15 | } 16 | .unified-extensions-item-menu-button.subviewbutton > .toolbarbutton-icon{ 17 | padding: 4px !important; 18 | } 19 | .unified-extensions-item-message-deck{ 20 | display: none 21 | } 22 | #unified-extensions-view > vbox > vbox > .unified-extensions-item{ 23 | padding-block: 0px !important; 24 | } 25 | #unified-extensions-panel .unified-extensions-item{ 26 | margin-block: 0 !important; 27 | } -------------------------------------------------------------------------------- /chrome/compact_proton.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/compact_proton.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 | /* Small changes to make proton roughly as compact as the old compact mode */ 5 | 6 | :root{ 7 | --toolbarbutton-inner-padding: 6px !important; 8 | --tab-block-margin: 2px !important; 9 | --tabs-shadow-size: 0px !important; 10 | --arrowpanel-menuitem-padding-block: 5px !important; 11 | --panel-font-size: inherit !important; 12 | --arrowpanel-padding: 0.8em !important; 13 | --inline-tab-padding: 8px !important; /* 8px is default value since it looks good - lower values compactify tabs horizontally */ 14 | --tab-inline-padding: 8px !important; /* Same as above, but for fx132 */ 15 | } 16 | .subviewbutton.bookmark-item{ padding-block: 4px !important; } 17 | .subview-subheader{ display: block } 18 | menupopup > menuitem, 19 | menupopup > menu{ padding-block: 0.3em !important; } 20 | 21 | /* This is kinda weird, but it makes the horizontal line between tabs and nav-bar render "inside" nav-bar thus tabs are more visibily separated even if there is less space there */ 22 | #nav-bar{ 23 | box-shadow: inset 0 var(--tabs-shadow-size) 0 var(--lwt-tabs-border-color) !important; 24 | } 25 | 26 | .tab-close-button{ 27 | margin-inline-start: 0px !important; 28 | width: 20px !important; 29 | height: 20px !important; 30 | padding: 5px !important; 31 | } 32 | 33 | #tabbrowser-tabs{ --uc-tabs-scrollbutton-border: 2px } 34 | #scrollbutton-up, 35 | #scrollbutton-down{ border-block-width: var(--uc-tabs-scrollbutton-border,0px) !important; } 36 | 37 | /* OPTIONAL - show audio label in compact mode and make the audio icon behavior match non-compact mode */ 38 | /* 39 | .tab-secondary-label:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]){ display: flex !important; margin-bottom: 1px } 40 | #TabsToolbar:not(:hover) .tab-icon-image{ opacity: 1 !important; } 41 | #TabsToolbar:not(:hover) .tab-icon-overlay:not([pinned]){ opacity: 0 !important; } 42 | */ -------------------------------------------------------------------------------- /chrome/compact_urlbar_megabar.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/compact_urlbar_megabar.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 | /* Make urlbar appear more compact */ 5 | #urlbar[breakout][breakout-extend] { 6 | margin-left: 0 !important; 7 | width: var(--urlbar-width) !important; 8 | margin-top: calc((var(--urlbar-container-height) - var(--urlbar-height)) / 2) !important; 9 | } 10 | .urlbarView{ 11 | margin-inline: 0 !important; 12 | width: auto !important; 13 | } 14 | .urlbarView-row{ 15 | padding: 0 2px !important; 16 | } 17 | .urlbarView-row-inner{ 18 | padding-inline-start: 4px !important; 19 | } 20 | #urlbar-background{ 21 | animation: none !important; 22 | } 23 | .urlbar-input-container{ 24 | padding: 0px 1px !important; 25 | height: initial !important; 26 | } 27 | #identity-icon{ 28 | margin-block: var(--urlbar-icon-padding); 29 | } 30 | .urlbarView > .search-one-offs:not([hidden]){ 31 | padding-block: 0px !important; 32 | } -------------------------------------------------------------------------------- /chrome/context_menus_more_proton.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/context_menus_more_proton.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 | /* Adds more proton-like styling to context menus. Rounded rows, and more consistent padding. This is only going to work on Win10+ */ 5 | 6 | :root{ 7 | --arrowpanel-menuitem-margin: 0 8px; 8 | --arrowpanel-menuitem-padding-block: 8px; 9 | --arrowpanel-menuitem-padding-inline: 8px; 10 | --arrowpanel-menuitem-border-radius: 4px; 11 | --panel-separator-margin-vertical: 4px; 12 | --button-hover-bgcolor: rgb(82, 82, 94); 13 | } 14 | :root[uidensity="compact"] menupopup:not(.in-menulist){ 15 | --panel-padding: 4px 0 !important; 16 | --arrowpanel-menuitem-padding-block: 8px; 17 | } 18 | /* OPTIONAL Set custom context menu colors below */ 19 | /* 20 | menupopup:not(.in-menulist){ 21 | --panel-background: #eb2a33 !important; 22 | --panel-color: #4aa !important; 23 | --panel-separator-color: #f00 !important; 24 | --panel-border-color: ThreeDShadow !important; 25 | } 26 | menupopup > menuseparator{ 27 | border-color: var(--panel-separator-color,ThreeDShadow) !important; 28 | } 29 | */ 30 | menupopup{ 31 | --panel-item-hover-bgcolor: var(--button-hover-bgcolor); 32 | --panel-border-radius: var(--arrowpanel-border-radius) !important; 33 | } 34 | menupopup > menuitem, 35 | menupopup > menu{ 36 | appearance: none !important; 37 | margin: var(--arrowpanel-menuitem-margin) !important; 38 | min-height: 24px !important; 39 | padding: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline) !important; 40 | border-radius: var(--arrowpanel-menuitem-border-radius) !important; 41 | background-color: transparent !important; 42 | } 43 | #context-navigation{ 44 | padding-inline: var(--arrowpanel-menuitem-padding-inline) !important; 45 | } 46 | .menu-right{ 47 | margin-inline-end: initial !important; 48 | } 49 | menupopup:not(.in-menulist){ 50 | --panel-padding: var(--arrowpanel-menuitem-padding-block) 0 !important; 51 | } 52 | 53 | :root[uidensity="compact"] #context-navigation{ 54 | padding-block: 0 !important; 55 | } 56 | menuseparator:not(.in-menulist){ 57 | margin-block: var(--panel-separator-margin-vertical) !important; 58 | } 59 | 60 | #context-navigation > menuitem[_moz-menuactive] :is(.menu-iconic-icon){ 61 | border-radius: var(--arrowpanel-menuitem-border-radius) !important; 62 | } 63 | #context-navigation > menuitem[_moz-menuactive]:not([disabled]) :is(.menu-iconic-icon,.menu-icon), 64 | menupopup > menuitem[_moz-menuactive], 65 | menupopup > menu[_moz-menuactive]{ 66 | background-color: var(--panel-item-hover-bgcolor) !important; 67 | color: var(--panel-color,inherit) !important; 68 | } 69 | menupopup > menuitem[disabled][_moz-menuactive], 70 | menupopup > menu[disabled][_moz-menuactive]{ 71 | background-color: var(--menuitem-disabled-hover-background-color) !important; 72 | } -------------------------------------------------------------------------------- /chrome/custom_default_tab_favicons.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/custom_default_tab_favicons.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 | /* Icon files not included. Save the icon files to same folder where userChrome.css is */ 5 | 6 | /* Default tab favicon, the globe kind of thing */ 7 | .tab-icon-image:not([src]){ 8 | content: url("icon.png"); /* filename for icon to load */ 9 | } 10 | 11 | /* The Firefox brand icon seen on newtab page etc. */ 12 | .tab-icon-image[src="chrome://branding/content/icon32.png"]{ 13 | content: url("icon.png"); /* filename for icon to load */ 14 | } 15 | -------------------------------------------------------------------------------- /chrome/custom_menupopup_check_icons.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/custom_menupopup_check_icons.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 | /* Modifies appearance of menupopup check icons to more clearly show if the item is a radio or checkbox item */ 5 | 6 | menuitem:is([type="checkbox"],[type="radio"]){ 7 | padding-inline-start: 12px !important; 8 | } 9 | menuitem:is([type="checkbox"],[type="radio"]) > .menu-iconic-left > .menu-iconic-icon{ 10 | display: none !important; 11 | } 12 | menuitem:is([type="checkbox"],[type="radio"]) > .menu-iconic-left{ 13 | -moz-appearance: none !important; 14 | outline: 1px solid color-mix(in srgb,currentColor 20%, transparent); 15 | border-radius: 3px; 16 | width: 14px !important; 17 | height: 14px; 18 | margin-inline: 0px 8px !important; 19 | background-repeat: no-repeat; 20 | background-size: contain; 21 | background-position: center; 22 | -moz-context-properties: fill; 23 | fill: currentColor; 24 | background-color: transparent; 25 | } 26 | menuitem[type="radio"] > .menu-iconic-left{ 27 | border-radius: 100%; 28 | } 29 | menuitem[type="radio"][checked="true"] > .menu-iconic-left{ 30 | background-image: radial-gradient( AccentColor 40%, transparent 50%); 31 | list-style-image: none !important; 32 | } 33 | menuitem[type="checkbox"][checked="true"] > .menu-iconic-left{ 34 | background-image: url("chrome://global/skin/icons/check.svg"); 35 | } 36 | -------------------------------------------------------------------------------- /chrome/deprecated/blank_page_background.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/blank_page_background.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 | /* Set blank page background-color */ 5 | /* Uses color from theme_colors if available */ 6 | 7 | #tabbrowser-tabpanels{ 8 | background-color: var(--uc-light-bkgnd-color,rgb(46,54,69)) !important; 9 | } -------------------------------------------------------------------------------- /chrome/deprecated/bookmarks_toolbar_on_newtabs_only.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/bookmarks_toolbar_on_newtabs_only.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 | /* "Real" show-bookmarks toolbar on new-tabs only - requires extension: https://addons.mozilla.org/addon/ntp_titler/ */ 5 | 6 | /* This is NOT compatible with autohide_bookmarks_toolbar.css because the collapsing methods are different */ 7 | 8 | #PersonalToolbar{ 9 | --uc-bm-height: 20px; /* Might need to adjust if the toolbar has other buttons */ 10 | --uc-bm-padding: 4px; /* Vertical padding to be applied to bookmarks */ 11 | } 12 | 13 | :root[uidensity="compact"] #PersonalToolbar{ --uc-bm-padding: 1px } 14 | :root[uidensity="touch"] #PersonalToolbar{ --uc-bm-padding: 7px } 15 | 16 | #PersonalToolbar:not([customizing]){ 17 | margin-bottom: calc(0px - var(--uc-bm-height) - 2 * var(--uc-bm-padding)); 18 | visibility: hidden; 19 | transition: margin-bottom 135ms ease !important; 20 | } 21 | 22 | /* The prefixes are set by the above linked extension */ 23 | :root[titlepreface="NewTab - "] #PersonalToolbar, 24 | :root[titlepreface="Home - "] #PersonalToolbar, 25 | :root[titlepreface="PrivateBrowsing - "] #PersonalToolbar{ 26 | visibility: visible; 27 | margin-bottom: 0px; 28 | } -------------------------------------------------------------------------------- /chrome/deprecated/bookmarksbar_on_new_tabs_only.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/deprecated/bookmarksbar_on_new_tabs_only.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 | /* This stylesheet is deprecated since Firefox 72 */ 5 | /* Use autohide_bookmarks_toolbar.css instead */ 6 | 7 | :root[title$=" - Mozilla Firefox"] #PersonalToolbar, 8 | :root[title$=" - Mozilla Firefox (Private Browsing)"] #PersonalToolbar, 9 | :root[title$=" - Firefox Nightly"] #PersonalToolbar, 10 | :root[title$=" - Firefox Nightly (Private Browsing)"] #PersonalToolbar{ visibility: collapse; } 11 | /* about:home or something can have a "New Tab" prefix */ 12 | :root[title="New Tab - Mozilla Firefox"] #PersonalToolbar, 13 | :root[title="New Tab - Mozilla Firefox (Private Browsing)"] #PersonalToolbar, 14 | :root[title="New Tab - Firefox Nightly"] #PersonalToolbar, 15 | :root[title="New Tab - Firefox Nightly (Private Browsing)"] #PersonalToolbar{ visibility: visible; } 16 | /* Short delay to prevent being shortly visible during tab restore */ 17 | #PersonalToolbar{ transition: visibility 0ms linear 200ms !important} -------------------------------------------------------------------------------- /chrome/deprecated/centered_top_statuspanel.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/deprecated/centered_top_statuspanel.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 | #statuspanel:not([hidden]){ 5 | display: flex !important; 6 | justify-self: center !important; 7 | padding-top: 0 !important; 8 | inset-block: 0 auto !important; 9 | inset-inline: auto !important; 10 | } 11 | #statuspanel-label{ 12 | border-width: 0 1px 1px 1px !important; 13 | border-style: solid !important; 14 | margin-inline: auto !important; 15 | } 16 | -------------------------------------------------------------------------------- /chrome/deprecated/dark_context_menus.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/dark_context_menus.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 | /* Makes context menus dark. Also affects some portions of menu popups */ 5 | /* Uses dark theme colors but does not respect dark theme variables (they wouldn't work on sidebar context menu) */ 6 | 7 | :root{ 8 | --uc-menu-bkgnd: rgb(74,74,79); 9 | --uc-menu-color: rgb(230,230,230); 10 | --uc-menu-dimmed: rgba(255,255,255,0.1); 11 | --uc-menu-disabled: rgb(50,50,50); 12 | } 13 | panel richlistbox, 14 | panel tree, 15 | panel button, 16 | panel menulist, 17 | panel textbox, 18 | panel input, 19 | menupopup, 20 | menu, 21 | menuitem{ -moz-appearance: none !important; } 22 | 23 | menulist, 24 | menuitem, 25 | menu{ min-height: 1.8em } 26 | 27 | panel menulist{ border: 1px solid transparent } 28 | 29 | panel richlistbox, 30 | panel tree, 31 | panel button, 32 | panel menulist, 33 | panel textbox, 34 | panel input, 35 | panel #searchbar, 36 | menupopup:not(#BMB_bookmarksPopup), 37 | #main-menubar > menu > menupopup, 38 | #context-navigation{ 39 | color: var(--uc-menu-color) !important; 40 | padding: 2px; 41 | background-color: var(--uc-menu-bkgnd) !important; 42 | border-color: var(--uc-menu-disabled) !important; 43 | } 44 | 45 | panel textbox input{ padding: 2px !important; } 46 | 47 | panel input{ border-width: 1px; border-style: solid; background-color: rgba(0,0,0,0.1) !important; } 48 | panel #searchbar{ background-color: rgba(0,0,0,0.1) !important; padding: 0 !important; } 49 | panel #searchbar input{ background-color: transparent !important; } 50 | 51 | panel menulist:hover, 52 | panel menulist[open]{ border-color: Highlight !important; } 53 | 54 | #editBMPanel_folderMenuList > menupopup > menuitem{ color: var(--uc-menu-color) !important; } 55 | 56 | panel treechildren::-moz-tree-row(selected), 57 | panel button:hover, 58 | menu:hover, 59 | menu[_moz-menuactive], 60 | menu[open], 61 | menuitem:hover, 62 | menuitem[_moz-menuactive]{ background-color: var(--uc-menu-dimmed) !important; color: inherit !important; } 63 | 64 | menu[disabled="true"], 65 | menuitem[disabled="true"]{ color: var(--uc-menu-disabled) !important; } 66 | 67 | menu:not(.subviewbutton) > .menu-right{ filter: invert(1) } 68 | -------------------------------------------------------------------------------- /chrome/deprecated/dark_date_picker_panel.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/dark_date_picker_panel.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 | /* Makes the HTML picker panel dark IF you use dark colored theme. It does not affect the input element on the page, only the popup */ 5 | 6 | @media (-moz-toolbar-prefers-color-scheme: dark){ 7 | #DateTimePickerPanel{ --panel-background: #2b2a33 !important; } 8 | } 9 | @-moz-document url("chrome://global/content/datepicker.xhtml"){ 10 | @media (-moz-toolbar-prefers-color-scheme: dark){ 11 | :root{ 12 | --border: 0.1rem solid #a4a4a4 !important; 13 | --weekend-font-color: #ff4030 !important 14 | } 15 | body,.month-year-view{ background: #2b2a33 !important; color: #f4f4f4 !important; } 16 | button.month-year::after, 17 | button{ fill: #f4f4f4 !important; } 18 | } 19 | } -------------------------------------------------------------------------------- /chrome/deprecated/dark_theme_aware_statuspanel.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/dark_theme_aware_statuspanel.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 | /* 5 | Makes statuspanel aware of the the theme text color 6 | Meaning, if theme text is light then the statuspanel uses dark background and light text. On themes with dark text the statuspanel has normal appearance. 7 | */ 8 | 9 | :root[lwthemetextcolor="bright"] #statuspanel-label{ 10 | background-color: rgb(50,50,52) !important; 11 | color: rgb(187,187,189) !important; 12 | border-color: grey !important; 13 | } -------------------------------------------------------------------------------- /chrome/deprecated/fake_tab_tooltip.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/deprecated/fake_tab_tooltip.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 | /* This creates a fake tooltip-like box under hovered tab showing it's full title. 5 | * In about:config you can set `browser.chrome.toolbar_tips` to false to disable 6 | * normal tooltips - that however disables normal tooltips also from everything 7 | * else in the toolbar area. 8 | */ 9 | 10 | .tabbrowser-tab:hover::after{ 11 | display: block; 12 | content: attr(label); 13 | background: var(--arrowpanel-background); 14 | border: 1px solid var(--arrowpanel-border-color); 15 | color: var(--arrowpanel-color); 16 | padding: 0.3em; 17 | position: fixed; 18 | transform: translateY(calc(var(--tab-min-height) + 2 * var(--tab-block-margin))); 19 | z-index: 2; 20 | color-scheme: dark; 21 | border-radius: 5px; 22 | box-shadow: 2px 2px 4px rgba(0,0,0,0.3) 23 | } -------------------------------------------------------------------------------- /chrome/deprecated/full_width_urlbar_popup.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/deprecated/full_width_urlbar_popup.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 | /* DEPRECATED - USE urlbar_full_width.css instead */ 5 | 6 | /* Makes urlbar popup fit to window width, like in Firefox versions < 71 without "Megabar" */ 7 | /* Text won't be aligned to urlbar text though, since that relied on Firefox setting some css variables which are not available anymore */ 8 | #urlbar{ 9 | display: -moz-box !important; 10 | position: relative !important; 11 | background-color: var(--lwt-toolbar-field-background-color, hsla(0,0%,100%,.8)); 12 | border: 1px solid var(--toolbar-field-border-color, hsla(240,5%,5%,.25)); 13 | top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important; 14 | bottom: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important; 15 | margin-inline-start: 0px !important; 16 | width: 100% !important; 17 | left: 0 !important; 18 | border-radius: 2px; 19 | } 20 | 21 | #urlbar-container{ padding-block: 1px !important } 22 | 23 | #urlbar-background{ display: none !important; } 24 | #urlbar[focused]{ border-color: var(--lwt-toolbar-field-border-focus, highlight) } 25 | #urlbar-input-container{ padding: 0 !important; height: 100% !important; } 26 | 27 | #urlbar[open] > .urlbarView{ 28 | display: block !important; 29 | position: fixed !important; 30 | margin-top: calc(var(--urlbar-height) + 1px) !important;; 31 | left: 0; 32 | width: 100vw !important; 33 | background-color: var(--autocomplete-popup-background) !important; 34 | margin-inline: 0 !important; 35 | box-shadow: 0px 1px 3px 0px black; 36 | } -------------------------------------------------------------------------------- /chrome/deprecated/google_style_urlbar_popup.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/deprecated/google_style_urlbar_popup.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 | /* DEPRECATED AS OF FIREFOX 77 */ 5 | 6 | /* Makes urlbar popup to appear Like on various Google search services */ 7 | /* Firefox 70+ only */ 8 | /* Popup uses colors from your theme */ 9 | 10 | 11 | /* Focused urlbar popup radius, can be edited freely */ 12 | #urlbar > .urlbarView:not(.megabar), 13 | #urlbar.megabar[focused] > #urlbar-background{ border-radius: 8px !important; } 14 | 15 | 16 | /* Layout containing block hackery, don't touch pls */ 17 | #urlbar-container:not(.megabar){ transform: translateY(0); position: relative; z-index: 10 } 18 | 19 | 20 | /* constrain popup to urlbar width */ 21 | .urlbarView:not(.megabar){ 22 | max-width: 100% !important; 23 | top: calc(2px + var(--toolbarbutton-outer-padding)) !important; 24 | border-width: 0 !important; 25 | background-color: transparent !important; 26 | pointer-events: none; 27 | border-radius: inherit; 28 | } 29 | 30 | /* Apply popup background color to the urlbar background when focused */ 31 | #urlbar:not(.megabar):focus-within{ background-color: var(--autocomplete-popup-background) } 32 | 33 | /* Spacer to offset actual results. This is placed over urlbar text */ 34 | .urlbarView:not(.megabar)::before{ 35 | content: ""; 36 | display: -moz-box; 37 | height: calc(0.8em + var(--toolbarbutton-outer-padding)) 38 | } 39 | 40 | /* Add popup background color to sub-elements, since it was removed from the popup itself */ 41 | .urlbarView:not(.megabar) > .search-one-offs, 42 | .urlbarView:not(.megabar) > .urlbarView-body-outer{ 43 | background-color: var(--autocomplete-popup-background); /* Set background-color here */ 44 | color: var(--autocomplete-popup-color); /* Set text color here */ 45 | pointer-events: auto 46 | } 47 | 48 | /* Add separator line under urlbar text field */ 49 | .urlbarView:not(.megabar) > .urlbarView-body-outer::before{ 50 | content:""; 51 | display: block; 52 | height: 1px; 53 | width: 100%; 54 | background-image: linear-gradient(to right,transparent,grey 35%, grey 65%, transparent) 55 | } 56 | 57 | /* Remove normal urlbar border and background */ 58 | #urlbar:not(.megabar)[focused]{ 59 | border-color: transparent !important; 60 | background-color: var(--autocomplete-popup-background) !important; 61 | } 62 | 63 | 64 | /* Add shadow to focused popup + urlbar */ 65 | #urlbar:not(.megabar)[focused]:not([open]), 66 | #urlbar.megabar[focused] > #urlbar-background, 67 | #urlbar[open] > .urlbarView:not(.megabar) { box-shadow: 0 0 5px 3px var(--autocomplete-popup-highlight-background) !important; } 68 | 69 | #urlbar.megabar[focused] > #urlbar-background{ border-width: 0px !important;; } 70 | 71 | /* Remove horizontal paddings from texts */ 72 | .urlbarView-row{ padding: 6px 0px !important; } 73 | -------------------------------------------------------------------------------- /chrome/deprecated/multi-row_tabs_Fx66+.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/deprecated/multi-row_tabs_Fx66+.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 | /* For Firefox 66+ */ 5 | /* Use multi-row_tabs_window_control_patch.css to hide window controls if you wish */ 6 | /* This file is obsolete, you can use multi-row_tabs.css which should work on Firefox pre- and post-66 */ 7 | 8 | 9 | #tabbrowser-tabs{ 10 | min-height: unset !important; 11 | } 12 | #tabbrowser-tabs > .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox{ 13 | display: flex; 14 | flex-wrap: wrap; 15 | } 16 | #tabbrowser-tabs > .tabbrowser-arrowscrollbox { 17 | overflow: -moz-hidden-unscrollable; 18 | display: block; 19 | } 20 | .tabbrowser-tab{ max-height: 32px; } 21 | .tabbrowser-tab[fadein]:not([pinned]){ 22 | min-width: 100px !important; 23 | flex-grow: 1; 24 | /* 25 | Uncomment to enable full-width tabs, also makes tab dragging a tiny bit more sensible 26 | Don't set to none or you'll see errors in console when closing tabs 27 | */ 28 | /*max-width: 100vw !important;*/ 29 | } 30 | 31 | .tabbrowser-tab > stack{ width: 100%; height: 100%; } 32 | 33 | .tabbrowser-tab[pinned]{ position: static !important; } 34 | 35 | #tabbrowser-tabs .scrollbutton-up, 36 | #tabbrowser-tabs .scrollbutton-down, 37 | #alltabs-button, 38 | :root:not([customizing]) #TabsToolbar #new-tab-button, 39 | #tabbrowser-tabs spacer{ display: none } -------------------------------------------------------------------------------- /chrome/deprecated/overlay_scrollbars.as.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/overlay_scrollbars.as.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 | /* This is supposed to be loaded as a agent sheet via autoconfig */ 5 | /* It will not work otherwise and might do unexpected things */ 6 | 7 | @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 8 | 9 | scrollbar { 10 | -moz-appearance: none !important; 11 | position: relative !important; 12 | background-color: transparent; 13 | z-index: 9; 14 | } 15 | scrollbar thumb{ 16 | -moz-appearance: none !important; 17 | background-color: transparent; 18 | pointer-events: auto; 19 | opacity: 0.5; 20 | transition: opacity 0.1s ease-in; 21 | } 22 | 23 | scrollbar[orient = "vertical"] thumb{ 24 | border-image-source: linear-gradient(to right, transparent 13px, currentcolor 13px); 25 | border-image-width: 0 0 0 16px; 26 | border-image-slice: 0% 0% 0% 100%; 27 | border-image-repeat: stretch; 28 | } 29 | scrollbar[orient = "horizontal"] thumb{ 30 | border-image-source: linear-gradient(to bottom, transparent 13px, currentcolor 13px); 31 | border-image-width: 16px 0 0 0; 32 | border-image-slice: 100% 0% 0% 0%; 33 | border-image-repeat: stretch; 34 | } 35 | 36 | scrollbar gripper, 37 | scrollbar scrollbarbutton{ 38 | display: none; 39 | } 40 | scrollbar[orient = "vertical"] { 41 | min-width: 16px !important; 42 | -moz-margin-start: -16px;/*margin to fill the whole render window with content and overlay the scrollbars*/ 43 | } 44 | scrollbar[orient = "horizontal"] { 45 | height: 16px !important; 46 | margin-top: -16px; 47 | } 48 | scrollbar[orient = "vertical"] thumb{ 49 | border-right: 16px solid rgba(133, 132, 131, 1); 50 | width: 16px; 51 | min-height: 16px; 52 | } 53 | scrollbar[orient = "horizontal"] thumb{ 54 | border-bottom: 16px solid rgba(133, 132, 131, 1); 55 | min-width: 16px !important; 56 | } 57 | scrollbar:hover { 58 | background-color: rgba(0, 0, 0, 0.25); 59 | } 60 | scrollbar:hover thumb{ opacity: 1; } 61 | scrollbar:hover thumb{ border-image: none !important; } 62 | 63 | select > scrollbar, 64 | select > scrollbar > thumb{ 65 | -moz-appearance: initial !important; 66 | -moz-margin-start: 0px !important 67 | } -------------------------------------------------------------------------------- /chrome/deprecated/passive_tab_audio_label.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/passive_tab_audio_label.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 | /* For proton theme. Makes the audio "playing"/"muted" label not toggle muted state. The audio icon will still do so of course, but clicking the label will be just like clicking the tab itself. */ 5 | .tab-icon-sound{ pointer-events: none } 6 | .tab-icon-sound > image{ pointer-events: auto } -------------------------------------------------------------------------------- /chrome/deprecated/theme_additional_windows.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/deprecated/theme_additional_windows.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 | /* Color editing should generally be done in theme_color_variables.css */ 5 | 6 | /*!!! IMPORT theme_color_variables.css !!!*/ 7 | 8 | /* Library window */ 9 | @-moz-document url(chrome://browser/content/places/places.xul){ 10 | :root{ background-color: var(--uc-light-bkgnd-color,black) !important;} 11 | #placesToolbar, 12 | tree{ 13 | background: transparent !important; 14 | color: var(--uc-text-color) !important; 15 | } 16 | textbox, 17 | richlistbox, 18 | treecol, 19 | button{ 20 | -moz-appearance: none !important; 21 | background-color: var(--uc-dark-bkgnd-color) !important; 22 | color: var(--uc-text-color) !important; 23 | } 24 | treecol:not([hideheader]){ height: 24px; } 25 | treecol:hover{ filter: brightness(160%) } 26 | treechildren::-moz-tree-row(multicol, odd){ background-color: rgba(0,0,0,0.2) !important; } 27 | treechildren::-moz-tree-row(hover),button:hover{ background-color: var(--uc-active-color) !important; } 28 | treechildren::-moz-tree-row(selected){ background-color: var(--uc-border-color) !important; } 29 | button{ padding: 3px } 30 | #placesMenu > menu{ border: none !important; } 31 | #detailsDeck{ color: var(--uc-text-color) } 32 | } 33 | 34 | /* Page-info window */ 35 | @-moz-document url(chrome://browser/content/pageinfo/pageInfo.xul){ 36 | #main-window, 37 | #topBar{ 38 | background-color: var(--uc-dark-bkgnd-color,black) !important; 39 | color: var(--uc-text-color,white) !important; 40 | } 41 | textbox{ color: var(--uc-text-color) !important; } 42 | 43 | richlistbox, 44 | treecol, 45 | button, 46 | #permList{ 47 | -moz-appearance: none !important; 48 | background-color: var(--uc-light-bkgnd-color) !important; 49 | color: var(--uc-text-color) !important; 50 | } 51 | tree{ 52 | background: transparent !important; 53 | color: var(--uc-text-color) !important; 54 | } 55 | treecol:not([hideheader]){ height: 24px; } 56 | treecol:hover{ filter: brightness(140%) } 57 | treechildren{ background-color: var(--uc-light-bkgnd-color) !important; } 58 | treechildren::-moz-tree-row(multicol, odd){ background-color: rgba(0,0,0,0.2) !important; } 59 | treechildren::-moz-tree-row(hover), 60 | button:hover, 61 | radiogroup > radio:hover, 62 | #permList > .permission:hover{ 63 | background-color: var(--uc-active-color) !important; 64 | } 65 | treechildren::-moz-tree-row(selected), 66 | radiogroup > radio[selected]{ 67 | background-color: var(--uc-border-color) !important; 68 | } 69 | } -------------------------------------------------------------------------------- /chrome/deprecated/theme_aware_modal_prompts.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/deprecated/theme_aware_modal_prompts.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 | /* DEPRECATED */ 5 | 6 | /* Makes the popup of alert() prompt() etc. respept theme colors as well as be slightly differently styled */ 7 | 8 | tabmodalprompt >.spacer-top{ display: none } 9 | .tabmodalprompt-mainContainer{ 10 | -moz-box-orient: horizontal; 11 | box-shadow: 0 0px 14px black; 12 | background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)); 13 | border-top: none !important; 14 | } 15 | :root:-moz-lwtheme-brighttext .tabmodalprompt-mainContainer{ background-color: black !important; } 16 | .tabmodalprompt-topContainer{ color: var(--toolbar-color); padding-inline-end: 0px !important; } 17 | .tabmodalprompt-buttonContainer{ background: transparent !important; padding-top: 7em !important; } 18 | 19 | .tabmodalprompt-rows input{ color: inherit; -moz-appearance: none; background: rgba(255,255,255,0.1); border: 1px solid currentColor; } 20 | 21 | .tabmodalprompt-infoContainer{ 22 | display: flex; 23 | flex-direction: column; 24 | 25 | min-width: 30ch; 26 | } 27 | .infoTitle{ font-size: 1.1em } 28 | .infoBody{ margin-inline-start: 6px !important; } 29 | 30 | 31 | .tabmodalprompt-buttonContainer > button{ 32 | -moz-appearance: none !important; 33 | border: 1px solid rgba(0,0,0,0.1); 34 | border-radius: 4px; 35 | color: var(--toolbar-color) !important; 36 | } 37 | .tabmodalprompt-buttonContainer > button:hover{ 38 | box-shadow: inset 0 0 6px grey 39 | } 40 | 41 | .tabmodalprompt-buttonContainer > button[default], 42 | .tabmodalprompt-buttonContainer > button:focus{ background-color: #3388ff; color: white !important; } 43 | 44 | .tabmodalprompt-buttonContainer > button:active{ background-image: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.1)) } -------------------------------------------------------------------------------- /chrome/deprecated/theme_color_variables.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/deprecated/theme_color_variables.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 | /* Color controls for theme_***.css files */ 5 | :root{ 6 | --uc-dark-bkgnd-color: rgb(12,16,32); 7 | --uc-light-bkgnd-color: rgb(46,54,69); 8 | --uc-active-color: rgb(26, 70, 102); 9 | --uc-text-color: rgb(195, 198, 201); 10 | --uc-border-color: rgb(43,130,191); 11 | } 12 | -------------------------------------------------------------------------------- /chrome/deprecated/theme_sidebar.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/deprecated/theme_sidebar.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 | /* Colors for bookmarks and history sidebars */ 5 | /* Color editing should generally be done in theme_color_variables.css */ 6 | 7 | /*!!! IMPORT theme_color_variables.css !!!*/ 8 | 9 | #sidebar-box{ --toolbar-non-lwt-bgcolor: var(--uc-light-bkgnd-color) } 10 | 11 | #sidebar-search-container #search-box{ 12 | -moz-appearance:none !important; 13 | background-color: var(--uc-dark-bkgnd-color) !important; 14 | border: none !important; 15 | color: var(--uc-text-color) !important; 16 | } 17 | 18 | #history-panel, 19 | #bookmarksPanel, 20 | #sidebar-header{ 21 | background-color: var(--uc-light-bkgnd-color) !important; 22 | color: var(--uc-text-color) !important; 23 | border-top: none !important; 24 | border-bottom:none !important; 25 | scrollbar-color: rgb(210,210,210) var(--uc-light-bkgnd-color) !important; 26 | } 27 | 28 | .sidebar-placesTreechildren, 29 | #sidebar-box, 30 | #sidebar-header{ 31 | color: var(--uc-text-color) !important; 32 | } 33 | 34 | .sidebar-placesTreechildren::-moz-tree-cell{ 35 | outline:none; 36 | border-radius:0px; 37 | background-image:none; 38 | } 39 | 40 | .sidebar-placesTreechildren::-moz-tree-cell(selected){ 41 | background-color: var(--uc-border-color) !important; 42 | } 43 | 44 | .sidebar-placesTreechildren::-moz-tree-cell(hover){ 45 | background-color: var(--uc-active-color) !important; 46 | } -------------------------------------------------------------------------------- /chrome/deprecated/toggle_bookmarksbar_with_alt.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/deprecated/toggle_bookmarksbar_with_alt.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 | /* Pretty much requires either menubar_in-toolbar or the oneliner compatible one */ 5 | /* Otherwise the changing vertical position causes bookmarks to be unclickable */ 6 | /* NOT COMPATIBLE with Fx65+ */ 7 | #main-window[sizemode="normal"]:not([customizing]) #PersonalToolbar{ 8 | transition: margin 0.15s ease-in-out 50ms, z-index 16ms linear 100ms!important; 9 | height: 28px; 10 | position: relative; 11 | z-index: 1; 12 | } 13 | :root:not([customizing]) #toolbar-menubar[inactive] ~ #PersonalToolbar:not(:hover){ 14 | margin-top:-28px; 15 | z-index: -1; 16 | } -------------------------------------------------------------------------------- /chrome/deprecated/urlbar_and_popup_equal_width.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/deprecated/urlbar_and_popup_equal_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 | /* DEPRECATED AS OF FIREFOX 75 */ 5 | /* Constrains urlbar popup to urlbar width */ 6 | /* Firefox 70+ */ 7 | 8 | #urlbar-container{ 9 | transform: translateY(0); 10 | position: relative; 11 | z-index: 10; 12 | padding-block: 3px !important; 13 | padding-inline: 0px !important; 14 | margin-inline: 5px !important; 15 | } 16 | #nav-bar-customization-target{ overflow: visible !important } 17 | #urlbar-results{ max-width: 100% !important; } 18 | .urlbarView{ 19 | top: calc(100% - 5px) !important; 20 | width: 100%; 21 | border-width: 0 1px 1px 1px !important;; 22 | border-style: solid; 23 | border-color: inherit !important; 24 | } 25 | :root[uidensity="compact"] .urlbarView { margin-top: 2px } 26 | :root[uidensity="touch"] .urlbarView { margin-top: 1px } 27 | #urlbar[open]{ border-bottom-right-radius: 0px !important; border-bottom-left-radius: 0px !important; } 28 | .urlbarView-row{ padding: 6px 0px !important; } -------------------------------------------------------------------------------- /chrome/disable_newtab_on_middle_click.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/disable_newtab_on_middle_click.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 | /* Prevents middle-clicking in empty area in tabs toolbar from opening new tabs */ 5 | 6 | #tabbrowser-arrowscrollbox{pointer-events: none} 7 | .tabbrowser-tab, 8 | #scrollbutton-up, 9 | #scrollbutton-down, 10 | #tabs-newtab-button{pointer-events: auto} -------------------------------------------------------------------------------- /chrome/drag_window_from_urlbar.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/drag_window_from_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 | 4 | /* Makes the window draggable from urlbar when urlbar is not focused. This means you can't click the urlbar text to activate it normally. But right-click works to activate urlbar. */ 5 | 6 | .urlbar-input-box,.urlbar-input,#urlbar-scheme,#urlbar-container{ 7 | -moz-window-dragging: drag; 8 | cursor: default; 9 | } 10 | .urlbar-input-container > box, 11 | #page-action-buttons, 12 | #urlbar-container:focus-within, 13 | #urlbar-container:focus-within :is(.urlbar-input-box,.urlbar-input,#urlbar-scheme,#urlbar-container){ 14 | -moz-window-dragging: no-drag; 15 | cursor: auto; 16 | } -------------------------------------------------------------------------------- /chrome/dual_color_tab_attention_indicator.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/dual_color_tab_attention_indicator.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 | /* Makes tab attention indicator use two separate colors - by default main color is the toolbar text color, and secondary is accent color of your OS. */ 5 | 6 | #navigator-toolbox{ 7 | --uc-attention-primary-color: currentColor; 8 | --uc-attention-secondary-color: AccentColor; 9 | --uc-attention-indicator-radius: 2.5px; 10 | } 11 | .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]), 12 | .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]), 13 | #firefox-view-button[attention]{ 14 | background-image: radial-gradient(circle, 15 | var(--uc-attention-primary-color) var(--uc-attention-indicator-radius), 16 | transparent var(--uc-attention-indicator-radius), 17 | var(--uc-attention-secondary-color) calc(var(--uc-attention-indicator-radius) + 2px), 18 | transparent calc(var(--uc-attention-indicator-radius) + 2px) 19 | ) !important; 20 | background-position: center bottom var(--uc-attention-indicator-radius) !important; 21 | background-size: calc(2 * (var(--uc-attention-indicator-radius) + 2px)) calc(2 * (var(--uc-attention-indicator-radius) + 2px)) !important; 22 | background-repeat: no-repeat; 23 | } -------------------------------------------------------------------------------- /chrome/fake_urlbar_dropmarker.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/fake_urlbar_dropmarker.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 | /* Icon won't have a background when hovered and the cursor will be text selection cursor, unfortunately */ 5 | 6 | #page-action-buttons::before{ 7 | display: flex; 8 | content: ""; 9 | height: 28px; 10 | width: 28px; 11 | padding: var(--urlbar-icon-padding); 12 | fill: var(--toolbar-field-color, black); 13 | fill-opacity: 0.6; 14 | -moz-context-properties: fill, fill-opacity; 15 | background: no-repeat center url(chrome://global/skin/icons/arrow-down-12.svg); 16 | opacity: 0; 17 | transition: opacity 150ms linear 18 | } 19 | .urlbar-input-container:hover > #page-action-buttons::before{ opacity: 1 } 20 | .urlbar-input-box:not(:focus-within){ margin-inline-end: -24px; } 21 | .urlbar-input:not(:focus-within){ padding-inline-end: 24px !important; } 22 | .urlbar-input-box:focus-within ~ #page-action-buttons::before{ -moz-user-focus: normal } -------------------------------------------------------------------------------- /chrome/grid_overflow_menu.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/grid_overflow_menu.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 | /* Makes the contents of the overflow menu appear in a three column grid */ 5 | /* Hides button labels */ 6 | 7 | #widget-overflow-mainView{ min-width: 80px !important; } 8 | 9 | #widget-overflow-fixed-list{ 10 | display: grid; 11 | grid-template-areas: "s s s" "a a a"; 12 | grid-auto-columns: auto; 13 | } 14 | 15 | #widget-overflow-mainView[visible] #widget-overflow-fixed-list { max-width: 110px } 16 | #widget-overflow-mainView ~ panelview[visible]{ max-width: unset !important; } 17 | 18 | #widget-overflow-fixed-list > *{ padding-block: 8px !important; } 19 | #widget-overflow-fixed-list > #search-container{ grid-area: s } 20 | 21 | #widget-overflow-mainView #widget-overflow-fixed-list .subviewbutton-nav::after, 22 | #widget-overflow-mainView #widget-overflow-fixed-list .toolbarbutton-text{ display: none } -------------------------------------------------------------------------------- /chrome/hide_statuspanel_when_fullscreen.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/hide_statuspanel_when_fullscreen.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 | /* Always hide status-panel when the page is in fullscreen mode such as fullscreen video player */ 5 | /* No effect on Firefox fullscreen mode (activated with F11 key) - except when the page is in fullscreen */ 6 | 7 | :root[inDOMFullscreen] #statuspanel{ display: none !important } -------------------------------------------------------------------------------- /chrome/hide_tabs_scrollbuttons.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/hide_tabs_scrollbuttons.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 | /* This should hide tabs scrollbuttons in a manner that preserves the ability to move tab strip when reordering tabs */ 5 | 6 | #tabbrowser-arrowscrollbox{ 7 | --uc-compat-scrollbutton-margin: 1px; /* compatibility for non_floating_sharp_tabs.css */ 8 | --uc-scrollbutton-up-background: linear-gradient(-90deg,transparent,var(--lwt-accent-color) 35%); 9 | --uc-scrollbutton-down-background: linear-gradient(90deg,transparent,var(--lwt-accent-color) 35%); 10 | } 11 | 12 | #tabbrowser-tabs:not([movingtab]){ 13 | --uc-scroll-visibility: hidden; 14 | } 15 | #tabbrowser-tabs[overflow]{ 16 | --uc-scrollbox-base-margin: -31px; 17 | --uc-scrollbox-margin: calc(var(--uc-scrollbox-base-margin) + var(--tab-shadow-max-size)); 18 | } 19 | :root[uidensity="compact"] #tabbrowser-tabs[overflow]{ 20 | --uc-scrollbox-base-margin: -25px; 21 | } 22 | #tabbrowser-arrowscrollbox:not([scrolledtostart]){ 23 | --uc-scrollbox-overflow-start-margin: -1px; 24 | } 25 | #scrollbutton-up ~ spacer{ 26 | visibility: visible !important; 27 | } 28 | spacer[part="overflow-start-indicator"]{ 29 | order: -1; 30 | margin-inline-start: var(--uc-scrollbox-overflow-start-margin,-0.5px) !important; 31 | } 32 | spacer[part="overflow-end-indicator"]{ 33 | order: 2; 34 | } 35 | 36 | #scrollbutton-down[disabled="true"] > .toolbarbutton-icon, 37 | #scrollbutton-up[disabled="true"] > .toolbarbutton-icon{ 38 | opacity: 0.4; 39 | } 40 | #scrollbutton-up, 41 | #scrollbutton-down{ 42 | position: relative; 43 | z-index: 1; 44 | visibility: var(--uc-scroll-visibility,visible); 45 | background-clip: border-box !important; 46 | background-origin: initial !important; 47 | background-repeat: no-repeat !important; 48 | opacity: 1 !important; 49 | } 50 | #scrollbutton-up{ 51 | margin-inline-start: calc(0px - var(--tab-shadow-max-size,0px)) !important; 52 | background-image: var(--uc-scrollbutton-up-background); 53 | } 54 | #scrollbutton-down{ 55 | margin-inline-end: calc(0px - var(--tab-shadow-max-size,0px)) !important; 56 | background-image: var(--uc-scrollbutton-down-background); 57 | } 58 | scrollbox[orient="horizontal"], 59 | .scrollbox-clip{ margin-inline: var(--uc-scrollbox-margin,0px); } 60 | .scrollbox-clip > scrollbox[orient="horizontal"]{ margin-inline: initial } 61 | 62 | /* Need to reset some things for other scrollboxes */ 63 | .menupopup-arrowscrollbox{ 64 | --tab-shadow-max-size: 0; 65 | } 66 | -------------------------------------------------------------------------------- /chrome/hide_tabs_toolbar.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/hide_tabs_toolbar.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 | /* Hides tabs toolbar */ 5 | /* For OSX use hide_tabs_toolbar_osx.css instead */ 6 | 7 | /* Note, if you have either native titlebar or menubar enabled, then you don't really need this style. 8 | * In those cases you can just use: #TabsToolbar{ visibility: collapse !important } 9 | */ 10 | 11 | /* IMPORTANT */ 12 | /* 13 | Get window_control_placeholder_support.css 14 | Window controls will be all wrong without it 15 | */ 16 | 17 | :root[tabsintitlebar]{ --uc-toolbar-height: 40px; } 18 | :root[tabsintitlebar][uidensity="compact"]{ --uc-toolbar-height: 32px } 19 | #titlebar{ 20 | will-change: unset !important; 21 | transition: none !important; 22 | opacity: 1 !important; 23 | } 24 | #TabsToolbar{ visibility: collapse !important } 25 | :root[sizemode="fullscreen"] #titlebar{ position: relative } 26 | 27 | :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container{ 28 | visibility: visible !important; 29 | z-index: 2; 30 | } 31 | 32 | :root:not([inFullscreen]) #nav-bar{ 33 | margin-top: calc(0px - var(--uc-toolbar-height,0px)); 34 | } 35 | 36 | :root[tabsintitlebar] #toolbar-menubar[autohide="true"]{ 37 | min-height: unset !important; 38 | height: var(--uc-toolbar-height,0px) !important; 39 | position: relative; 40 | } 41 | 42 | #toolbar-menubar[autohide="false"]{ 43 | margin-bottom: var(--uc-toolbar-height,0px) 44 | } 45 | 46 | :root[tabsintitlebar] #toolbar-menubar[autohide="true"] #main-menubar{ 47 | flex-grow: 1; 48 | align-items: stretch; 49 | background-attachment: scroll, fixed, fixed; 50 | background-position: 0 0, var(--lwt-background-alignment), right top; 51 | background-repeat: repeat-x, var(--lwt-background-tiling), no-repeat; 52 | background-size: auto 100%, var(--lwt-background-size, auto auto), auto auto; 53 | padding-right: 20px; 54 | } 55 | :root[tabsintitlebar] #toolbar-menubar[autohide="true"]:not([inactive]) #main-menubar{ 56 | background-color: var(--lwt-accent-color); 57 | background-image: linear-gradient(var(--toolbar-bgcolor,--toolbar-non-lwt-bgcolor),var(--toolbar-bgcolor,--toolbar-non-lwt-bgcolor)), var(--lwt-additional-images,none), var(--lwt-header-image, none); 58 | mask-image: linear-gradient(to left, transparent, black 20px); 59 | } 60 | 61 | #toolbar-menubar:not([inactive]){ z-index: 2 } 62 | #toolbar-menubar[autohide="true"][inactive] > #menubar-items { 63 | opacity: 0; 64 | pointer-events: none; 65 | margin-left: var(--uc-window-drag-space-pre,0px) 66 | } 67 | -------------------------------------------------------------------------------- /chrome/hide_tabs_toolbar_osx.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/hide_tabs_toolbar_osx.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 | /* Hides tabs toolbar - OSX only */ 5 | 6 | /* IMPORTANT */ 7 | /* 8 | Get window_control_placeholder_support.css 9 | Window controls will be all wrong without it 10 | */ 11 | 12 | :root{ --uc-toolbar-height: 32px; } 13 | :root:not([uidensity="compact"]){ --uc-toolbar-height: 34px } 14 | 15 | #TabsToolbar > *{ visibility: collapse !important } 16 | #TabsToolbar > .titlebar-buttonbox-container{ 17 | visibility: visible !important; 18 | height:var(--uc-toolbar-height) !important; 19 | } 20 | 21 | #nav-bar{ 22 | margin-top: calc(0px - var(--uc-toolbar-height)); 23 | } 24 | :root[inFullscreen] #navigator-toolbox{ margin-top: 11px } -------------------------------------------------------------------------------- /chrome/hide_tabs_toolbar_v2.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/hide_tabs_toolbar_v2.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 | /* This requires Firefox 133+ to work */ 5 | 6 | @media (-moz-bool-pref: "sidebar.verticalTabs"), 7 | -moz-pref("sidebar.verticalTabs"){ 8 | #sidebar-main{ 9 | visibility: collapse; 10 | } 11 | } 12 | @media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"), 13 | -moz-pref("userchrome.force-window-controls-on-left.enabled"){ 14 | #nav-bar > .titlebar-buttonbox-container{ 15 | order: -1 !important; 16 | > .titlebar-buttonbox{ 17 | flex-direction: row-reverse; 18 | } 19 | } 20 | } 21 | @media not (-moz-bool-pref: "sidebar.verticalTabs"), 22 | not -moz-pref("sidebar.verticalTabs"){ 23 | #TabsToolbar:not([customizing]){ 24 | visibility: collapse; 25 | } 26 | :root[sizemode="fullscreen"] #nav-bar > .titlebar-buttonbox-container{ 27 | display: flex !important; 28 | } 29 | :root:is([tabsintitlebar],[customtitlebar]) #toolbar-menubar:not([autohide="false"]) ~ #nav-bar{ 30 | > .titlebar-buttonbox-container{ 31 | display: flex !important; 32 | } 33 | :root[sizemode="normal"] & { 34 | > .titlebar-spacer{ 35 | display: flex !important; 36 | } 37 | } 38 | :root[sizemode="maximized"] & { 39 | > .titlebar-spacer[type="post-tabs"]{ 40 | display: flex !important; 41 | } 42 | @media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"), 43 | -moz-pref("userchrome.force-window-controls-on-left.enabled"), 44 | (-moz-gtk-csd-reversed-placement), 45 | (-moz-platform: macos){ 46 | > .titlebar-spacer[type="post-tabs"]{ 47 | display: none !important; 48 | } 49 | > .titlebar-spacer[type="pre-tabs"]{ 50 | display: flex !important; 51 | } 52 | } 53 | } 54 | } 55 | } -------------------------------------------------------------------------------- /chrome/hide_tabs_toolbar_w_alltabs_button.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/hide_tabs_toolbar_w_with_alltabs_button.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 | /* This is less flexible than hide_tabs_toolbar.css, but this method aims to preserve the alltabs button and show it and window controls next to the main menu button */ 5 | 6 | /* Load window_control_placeholder_support.css before this stylesheet */ 7 | .tabbrowser-tab{ 8 | -moz-window-dragging: unset !important; 9 | } 10 | :root:not([customizing]) #tabbrowser-arrowscrollbox-periphery{ 11 | display: none; 12 | } 13 | #tabbrowser-tabs{ visibility: hidden;} 14 | #TabsToolbar-customization-target{ 15 | justify-content: flex-end; 16 | } 17 | #alltabs-button{ 18 | position: relative; 19 | z-index: 1; 20 | padding-bottom: 5px !important; 21 | display: flex !important; 22 | margin-right: 36px !important; 23 | } 24 | :root[sizemode="fullscreen"] #alltabs-button{ margin-right: calc(var(--uc-window-control-width) + 36px) !important } 25 | 26 | #TabsToolbar:not([inFullscreen]) > .titlebar-buttonbox-container{ 27 | padding-bottom: 5px; 28 | } 29 | #nav-bar{ padding-right: 40px !important; } 30 | /* Rules for window controls on left layout */ 31 | @media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"), 32 | (-moz-gtk-csd-reversed-placement), 33 | (-moz-platform: macos){ 34 | #alltabs-button{ 35 | margin-right: var(--uc-window-drag-space-pre) !important; 36 | } 37 | :root[sizemode="fullscreen"] #alltabs-button{ margin-right: 0px !important; } 38 | } 39 | 40 | #TabsToolbar > .titlebar-spacer{ display: none } 41 | #TabsToolbar:not([customizing]){ margin-bottom: calc(0px - var(--tab-min-height) - 2 * var(--tab-block-margin))} 42 | 43 | #titlebar{ 44 | -moz-appearance: none !important; 45 | will-change: unset !important; 46 | transition: none !important; 47 | opacity: 1 !important; 48 | } 49 | -------------------------------------------------------------------------------- /chrome/hide_toolbox_top_bottom_borders.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/hide_toolbox_top_bottom_borders.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 | :root[sizemode="normal"]{ border-top: none !important } 5 | #navigator-toolbox::after{ content: none !important } 6 | #navigator-toolbox{ border-bottom: none !important } 7 | /* Removes few remaining extra lines above tabs in non-maximized windows */ 8 | /* Also prevents small vertical shift when moving tabs in compact density - who knows why */ 9 | :root[sizemode="normal"] #titlebar{ -moz-appearance: none !important; } 10 | 11 | 12 | /* OPTIONAL - uncomment to remove still remaining space atop of tabs */ 13 | /* This just increases the height of tabs by few pixels, not decrease the toolbar height */ 14 | 15 | /* Fx pre-65 */ 16 | /* #navigator-toolbox > #TabsToolbar{margin-top: -2px;} */ 17 | /* Fx65+ */ 18 | /* #TabsToolbar > .toolbar-items > spacer{ display: none; } */ 19 | -------------------------------------------------------------------------------- /chrome/hide_urlbar_first_row.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/hide_urlbar_first_row.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 | /* Hides the first item in the urlbar dropdown if it is a "search with" or "visit" or "tab-to-search" item. Does not hide "search in private window item", probably */ 5 | 6 | #urlbar[usertyping] .urlbarView-row:is([type="url"],[type="autofill_origin"],[type="search"]):first-child, 7 | .urlbarView-row[type="tabtosearch"] { 8 | display: none !important; 9 | } 10 | -------------------------------------------------------------------------------- /chrome/icon_only_tabs.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/icon_only_tabs.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 | @media not (-moz-bool-pref: "sidebar.verticalTabs"), 5 | not -moz-pref("sidebar.verticalTabs"){ 6 | .tab-content > :not(.tab-icon-stack){ 7 | display: none; 8 | } 9 | .tab-icon-image:not([src]){ 10 | display: block !important; 11 | } 12 | .tab-icon-stack > *{ margin-inline: 0 !important; } 13 | .tabbrowser-tab{ 14 | flex-grow: 0 !important; 15 | } 16 | 17 | .tabbrowser-tab[fadein]{ min-width: calc(16px + 2 * 10px + 4px) !important; } 18 | :root[uidensity="compact"] .tabbrowser-tab[fadein]{ 19 | min-width: calc(16px + 2 * var(--tab-inline-padding,0px) + 4px) !important; 20 | } 21 | :root:not([uidensity="compact"]) .tab-content{ padding-inline: 10px !important; } 22 | 23 | .tab-audio-button{ 24 | --button-size-icon-small: 16px !important; 25 | --button-min-height-small: var(--button-size-icon-small) !important; 26 | --button-background-color-ghost: var(--toolbox-bgcolor-inactive); 27 | --button-border-radius: var(--border-radius-circle) !important; 28 | position: absolute; 29 | top: 0; 30 | right: 0; 31 | margin-inline: 0 !important; 32 | } 33 | } -------------------------------------------------------------------------------- /chrome/iconized_menubar_items.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/iconized_menubar_items.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 | /* Replaces menubar items text ("File Edit etc.") with icons */ 5 | 6 | #main-menubar > menu{ 7 | fill: currentColor; 8 | height: var(--uc-menubaritem-height,28px); 9 | width: var(--uc-menubaritem-width,30px); 10 | -moz-context-properties: fill; 11 | padding: 3px !important; 12 | background-repeat: no-repeat; 13 | background-position: center; 14 | border-radius: var(--toolbarbutton-border-radius) 15 | } 16 | #main-menubar > menu > :is(.menubar-text,.menu-text){ display: none } 17 | 18 | #file-menu{ background-image: url("chrome://devtools/skin/images/tool-storage.svg") } 19 | #edit-menu{ background-image: url("chrome://browser/skin/customize.svg") } 20 | #view-menu{ background-image: url("chrome://devtools/skin/images/command-frames.svg") } 21 | #history-menu{ background-image: url("chrome://browser/skin/history.svg") } 22 | #bookmarksMenu{ background-image: url("chrome://browser/skin/bookmark.svg") } 23 | #profiles-menu{ background-image: url("chrome://browser/skin/device-desktop.svg") } 24 | #tools-menu{ background-image: url("chrome://global/skin/icons/developer.svg") } 25 | #helpMenu{ background-image: url("chrome://global/skin/icons/help.svg") } -------------------------------------------------------------------------------- /chrome/iconized_textbox_context_menu.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/iconized_textbox_context_menu.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 | /* Adds icons to menuitems in textbox context menus, such as urlbar and searchbar. 5 | * Note that this won't work if you have native context menus, 6 | * such as ones used on MacOS */ 7 | 8 | :where(.textbox-contextmenu > menu:not(.menu-iconic))::before, 9 | :where(.textbox-contextmenu > menuitem:not(.menuitem-iconic))::before{ 10 | display: flex; 11 | padding-inline-end: 8px; 12 | padding-top: 2px; 13 | width: 16px; 14 | height: 16px; 15 | align-items: center; 16 | justify-content: center; 17 | content: url("chrome://browser/skin/tab.svg"); 18 | -moz-context-properties: fill; 19 | fill: currentColor; 20 | } 21 | :where(.textbox-contextmenu > menu), 22 | :where(.textbox-contextmenu > menuitem){ 23 | padding-inline-start: 1em !important; 24 | } 25 | .textbox-contextmenu > menuitem[type="checkbox"]::before{ 26 | content: url("chrome://devtools/skin/images/checkbox.svg"); 27 | } 28 | .textbox-contextmenu > menuitem[type="checkbox"] > :is(.menu-iconic-left,.menu-icon){ 29 | display: none; 30 | } 31 | .textbox-contextmenu > [data-l10n-id="text-action-undo"]::before, 32 | .textbox-contextmenu > [data-l10n-id="text-action-redo"]::before{ 33 | content: url("chrome://global/skin/icons/undo.svg"); 34 | } 35 | .textbox-contextmenu > [data-l10n-id="text-action-redo"]::before{ 36 | transform-box: content-box; 37 | transform: scaleX(-1); 38 | } 39 | .textbox-contextmenu > [data-l10n-id="text-action-copy"]::before{ 40 | content: url("chrome://global/skin/icons/edit-copy.svg"); 41 | } 42 | .textbox-contextmenu > [data-l10n-id="text-action-strip-on-share"]::before{ 43 | content: url("chrome://devtools/skin/images/command-always-on-top-window.svg"); 44 | } 45 | .textbox-contextmenu > [data-l10n-id="text-action-cut"]::before{ 46 | content: url("chrome://browser/skin/edit-cut.svg"); 47 | } 48 | .textbox-contextmenu > [data-l10n-id="text-action-paste"]::before{ 49 | content: url("chrome://browser/skin/edit-paste.svg"); 50 | } 51 | .textbox-contextmenu > #paste-and-go::before{ 52 | content: url("chrome://browser/skin/edit-paste.svg"); 53 | } 54 | .textbox-contextmenu > .searchbar-paste-and-search::before{ 55 | content: url("chrome://global/skin/icons/search-glass.svg"); 56 | } 57 | .textbox-contextmenu > [data-l10n-id="text-action-delete"]::before{ 58 | content: url("chrome://global/skin/icons/delete.svg"); 59 | } 60 | .textbox-contextmenu > [data-l10n-id="text-action-select-all"]::before{ 61 | content: url("chrome://global/skin/reader/character-spacing-20.svg"); 62 | transform: scale(0.85); 63 | } -------------------------------------------------------------------------------- /chrome/inline_tab_audio_icons.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/inline_tab_audio_icons.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 | /* Shows tab audio icons next to the tab icon, and by default removes the tab secondary line */ 5 | 6 | .tabbrowser-tab:not([pinned]) .tab-icon-stack:is([muted],[soundplaying],[activemedia-blocked]){ 7 | grid-template-areas: "a s"; 8 | } 9 | .tabbrowser-tab:not([pinned]) .tab-icon-overlay:is([muted],[soundplaying],[activemedia-blocked]){ grid-area: s; } 10 | .tab-icon-overlay, 11 | .tab-icon-image, 12 | .tab-throbber{ opacity: 1 !important; } 13 | 14 | .tab-icon-overlay:not([pinned]){ 15 | margin-inline: -2px 2px !important; 16 | } 17 | 18 | /* secondary audio label ain't much use with this style, but feel free to remove the next line if you want to show it. */ 19 | .tab-secondary-label{ display: none } 20 | 21 | /* show the secondary label when video is in PiP */ 22 | .tab-secondary-label[pictureinpicture]{ display: flex } 23 | 24 | /* These exist for compatibility with combined_favicon_and_tab_close_button.css */ 25 | .tab-icon-overlay{ pointer-events: auto } 26 | .tab-content > .tab-icon-stack, 27 | .tab-icon-stack:hover > .tab-icon-image{ visibility: visible } 28 | -------------------------------------------------------------------------------- /chrome/integrated_searchbar_popup.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/integrated_searchbar_popup.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 | /* This makes the searchbar popup look integrated into the searchbar, 5 | * kinda like urlbar popup looks. 6 | * Go to about:config and enable color-mix with layout.css.color-mix.enabled 7 | * to make the popup border show properly, or make the border use other color. 8 | */ 9 | 10 | #PopupSearchAutoComplete, 11 | #searchbar{ 12 | /* text input is clipped if this is too large compared to font-size. */ 13 | --uc-searchbar-border-radius: 6px; 14 | } 15 | 16 | #PopupSearchAutoComplete{ 17 | --uc-inner-margin: 6px; 18 | --uc-searchbar-border-outer-radius: calc(var(--uc-searchbar-border-radius) + var(--uc-inner-margin)); 19 | --arrowpanel-border-color: transparent !important; 20 | margin-top: calc(1px - var(--uc-searchbar-border-radius)); 21 | outline: 2px solid var(--toolbar-field-focus-border-color) !important; 22 | outline-offset: -8px; 23 | -moz-window-shadow: none !important; 24 | margin-inline: calc(0px - var(--uc-inner-margin)); 25 | padding-inline: var(--uc-inner-margin); 26 | margin-bottom: -6px; 27 | padding-bottom: 6px; 28 | filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.2)); 29 | background: transparent !important; 30 | border-radius: 0 0 var(--uc-searchbar-border-outer-radius) var(--uc-searchbar-border-outer-radius) !important; 31 | } 32 | 33 | #searchbar:focus-within{ border-radius: var(--uc-searchbar-border-radius) !important; } 34 | 35 | slot{ 36 | border-radius: 0 0 var(--uc-searchbar-border-radius) var(--uc-searchbar-border-radius) !important; 37 | } 38 | #PopupSearchAutoComplete::before{ 39 | height: 8px; 40 | background: var(--toolbar-field-focus-background-color); 41 | border-inline: 2px solid var(--toolbar-field-focus-border-color); 42 | display: flex; 43 | content: ""; 44 | position: relative; 45 | z-index: 2; 46 | } -------------------------------------------------------------------------------- /chrome/less_static_throbber.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/less_static_throbber.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 | /* Replaces the static reduced-motion hourglass-icon with rotating dots */ 5 | 6 | /* svg.context-properties.content.enabled must be "true" otherwise the icon will be black */ 7 | 8 | @media (prefers-reduced-motion:reduce){ 9 | @keyframes rotate-throbber{from{transform:rotateZ(0deg)}to{transform:rotateZ(360deg)}} 10 | .tab-throbber{ 11 | background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJjb250ZXh0LWZpbGwiIGZpbGwtb3BhY2l0eT0iY29udGV4dC1maWxsLW9wYWNpdHkiPg0KICA8Y2lyY2xlIGN4PSI4IiBjeT0iMi41IiByPSIyIiBmaWxsLW9wYWNpdHk9IjEiLz4NCiAgPGNpcmNsZSBjeD0iMTIiIGN5PSI0IiByPSIxLjciLz4NCiAgPGNpcmNsZSBjeD0iMTMuNSIgY3k9IjgiIHI9IjEuNyIvPg0KICA8Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxLjciLz4NCiAgPGNpcmNsZSBjeD0iOCIgY3k9IjEzLjUiIHI9IjEuNyIvPg0KICA8Y2lyY2xlIGN4PSI0IiBjeT0iMTIiIHI9IjEuNyIvPg0KICA8Y2lyY2xlIGN4PSIyLjUiIGN5PSI4IiByPSIxLjciLz4NCiAgPGNpcmNsZSBjeD0iNCIgY3k9IjQiIHI9IjEuNyIvPg0KPC9zdmc+DQo") !important; 12 | -moz-context-properties: fill,fill-opacity !important; 13 | fill-opacity: 0.5 !important; 14 | animation: rotate-throbber 2s steps(8) infinite; 15 | } 16 | } -------------------------------------------------------------------------------- /chrome/linux_gtk_window_control_patch.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/linux_gtk_window_control_patch.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 | /* Overrides the appearance of the window controls with something that more closely matches "normal" buttons*/ 5 | /* More importantly, this makes window controls to respect layout rules the other styles rely on */ 6 | 7 | .titlebar-buttonbox{ 8 | align-items: stretch !important; 9 | } 10 | .titlebar-button { 11 | -moz-appearance: none !important; 12 | -moz-context-properties: fill, stroke, fill-opacity; 13 | fill: currentColor; 14 | padding: 4px 6px !important; 15 | flex-grow: 1; 16 | overflow: -moz-hidden-unscrollable; 17 | } 18 | .titlebar-button:hover{ background-color: rgba(0,0,0,0.1) } 19 | .titlebar-min{ list-style-image: url(chrome://browser/skin/zoom-out.svg); } 20 | .titlebar-close{ 21 | list-style-image: url(chrome://global/skin/icons/close.svg); 22 | fill-opacity: 0; 23 | stroke: currentColor 24 | } 25 | 26 | -------------------------------------------------------------------------------- /chrome/loading_indicator_bouncing_line.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/loading_indicator_bouncing_line.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 | /* Shows a left-right bouncing line at the top of the content area during navigation */ 5 | 6 | @keyframes statusline-anim{from{background-position-x: left}to{background-position-x: right}} 7 | #statuspanel[type="status"]::after{ 8 | position: fixed; 9 | display: block; 10 | height: 2px; 11 | width: 100vw; 12 | top: 0; 13 | left:0; 14 | content: ""; 15 | pointer-events: none; 16 | background-size: 20%; 17 | background-repeat: no-repeat; 18 | background-image: linear-gradient(to left,transparent,rgb(170,0,70),transparent); 19 | animation: statusline-anim 400ms alternate infinite ease-in-out; 20 | } 21 | 22 | @media (min-width: 1000px){ #statuspanel[type="status"]::after{ animation-duration: 460ms } } 23 | @media (min-width: 1400px){ #statuspanel[type="status"]::after{ animation-duration: 520ms } } 24 | @media (min-width: 1700px){ #statuspanel[type="status"]::after{ background-size: 15%; animation-duration: 550ms } } 25 | @media (min-width: 2200px){ #statuspanel[type="status"]::after{ animation-duration: 600ms } } 26 | .browserContainer{ transform: translate(0) } -------------------------------------------------------------------------------- /chrome/loading_indicator_rotating_image.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/loading_indicator_rotating_image.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 | /* Shows a rotating image over web content during navigation */ 5 | 6 | @keyframes statusimage-anim{ 7 | from{ transform: rotateZ(0deg) } 8 | to{ transform: rotateZ(360deg) } 9 | } 10 | #statuspanel[type="status"]::after{ 11 | position: absolute; 12 | display: block; 13 | height: 200px; 14 | width: 200px; 15 | top: -60vh; 16 | left:50vw; 17 | margin-left: -100px; 18 | content: ""; 19 | pointer-events: none; 20 | border-radius: 100px; 21 | box-shadow: 0 0 40px grey; 22 | background-color: rgba(127,127,127,0.4); 23 | background-image: url("chrome://global/skin/icons/settings.svg"); 24 | background-size: 70%; 25 | background-position: center; 26 | background-repeat: no-repeat; 27 | -moz-context-properties: fill; 28 | fill: rgb(20,20,50); 29 | animation: statusimage-anim 2s infinite linear; 30 | } 31 | -------------------------------------------------------------------------------- /chrome/menubar_in_main_toolbar.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/menubar_in_main_toolbar.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 | /* Make menubar permanently enabled or this isn't going to work */ 5 | 6 | #navigator-toolbox{ --uc-menubar-height: 34px; } 7 | :root[uidensity="compact"] #navigator-toolbox{ --uc-menubar-height: 30px } 8 | 9 | #titlebar{ 10 | flex-direction: column-reverse; 11 | -moz-appearance: none !important; 12 | } 13 | 14 | #toolbar-menubar{ 15 | margin-bottom: calc(0px - var(--uc-menubar-height)); 16 | height: var(--uc-menubar-height); 17 | position: relative; 18 | z-index: 2; 19 | pointer-events: none; 20 | } 21 | 22 | #menubar-items{ 23 | justify-content: center; 24 | pointer-events: initial; 25 | margin-top: 3px; 26 | color: var(--toolbar-color); 27 | } 28 | /* Adjust to fit menubar items - 300px works for English locale */ 29 | #nav-bar{ padding-left: 300px; } 30 | 31 | #toolbar-menubar > .titlebar-buttonbox-container{ display: none } 32 | :root:is([tabsintitlebar],[customtitlebar])[sizemode="normal"] .titlebar-spacer, 33 | :root:is([tabsintitlebar],[customtitlebar]) #TabsToolbar > .titlebar-buttonbox-container{ display: flex !important; } 34 | -------------------------------------------------------------------------------- /chrome/menubar_in_tabs_toolbar.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/menubar_in_tabs_toolbar.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 | :root:not([customizing]) #titlebar{ 5 | flex-direction: row; 6 | } 7 | #toolbar-menubar > .titlebar-buttonbox-container, 8 | #toolbar-menubar > spacer{ display: none; } 9 | 10 | #main-menubar{ 11 | flex-grow: 1 !important; 12 | } 13 | :root:not([customizing]) #toolbar-menubar[autohide][inactive]{ max-width: 0 } 14 | 15 | #TabsToolbar > .titlebar-buttonbox-container{ 16 | display: flex !important; 17 | visibility: visible !important; 18 | } 19 | 20 | -------------------------------------------------------------------------------- /chrome/menubar_in_tabs_toolbar_oneliner_compatible.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/menubar_in_tabs_toolbar_oneliner_compatible.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 | /* Use with navbar_tabs_oneliner.css */ 5 | 6 | #toolbar-menubar:not([inactive]) ~ #TabsToolbar{ 7 | margin-left:calc(var(--uc-navigationbar-width) + 300px ) !important; 8 | margin-top: calc(0px - var(--uc-toolbar-height)) !important; 9 | padding-left: 0px !important; 10 | } 11 | #toolbar-menubar:not([inactive]){ 12 | margin-left: var(--uc-navigationbar-width); 13 | height: var(--uc-toolbar-height); 14 | } 15 | 16 | #toolbar-menubar > .titlebar-buttonbox-container{ display: none } -------------------------------------------------------------------------------- /chrome/menulike_bookmarks_folder_popups.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/menulike_bookmarks_folder_popups.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 | /* This style makes menus from bookmarks toolbar folders look like context menus do (on Win10) which was the behavior pre-fx92 */ 5 | 6 | menupopup[placespopup="true"]{ 7 | padding: 0 !important; 8 | margin: 0 !important; 9 | --arrowpanel-background: var(--menu-background-color,Menu) !important; 10 | border-radius: var(--panel-border-radius) !important; 11 | } 12 | .menupopup-arrowscrollbox{ 13 | margin-top: 1px !important; 14 | border: 1px solid var(--panel-border-color) !important; 15 | padding: var(--panel-padding) !important; 16 | border-radius: var(--panel-border-radius) !important; 17 | } 18 | :where(menupopup[placespopup="true"]) menu, 19 | :where(menupopup[placespopup="true"]) menuitem{ 20 | margin-inline: 0 !important; 21 | padding-inline-start: 1em !important; 22 | border-radius: 0 !important; 23 | padding-block: 0.5em !important; 24 | } -------------------------------------------------------------------------------- /chrome/menupopup_forced_color_schemes.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/menupopup_forced_color_schemes.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 | /* This only works on Windows10 when the proton-style context menus are used. 5 | * Purpose of this style is to force either dark or light version of menus 6 | * regardless of the Firefox theme you have. 7 | * This does NOTHING unless you go to about:config and create a new number pref 8 | * "userchrome.menupopups.color-scheme" 9 | * 10 | * 0 = dark 11 | * 1 = light 12 | */ 13 | 14 | @media -moz-pref("userchrome.menupopups.color-scheme",0){ 15 | menupopup{ 16 | color-scheme: dark !important; 17 | } 18 | } 19 | @media -moz-pref("userchrome.menupopups.color-scheme",1){ 20 | menupopup{ 21 | color-scheme: light !important; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /chrome/minimal_in-UI_scrollbars.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/minimal_in-UI_scrollbars.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 | /* Changes various in-UI scrollabars to be slim and more subtle */ 5 | 6 | .panel-subview-body, 7 | #permList, 8 | scrollbar{ 9 | color: inherit; 10 | scrollbar-color: currentColor transparent; 11 | scrollbar-width: thin 12 | } 13 | -------------------------------------------------------------------------------- /chrome/minimal_text_fields.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/minimal_text_fields.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 | :root:not([customizing]){ 5 | --toolbar-field-background-color: transparent !important; 6 | --toolbar-field-border-color: transparent !important; 7 | } 8 | 9 | #urlbar[open]{ background-color: var(--toolbar-bgcolor) !important; } 10 | 11 | #urlbar, 12 | #searchbar, 13 | #search-box{ 14 | -moz-appearance: none !important; 15 | background-color: var(--toolbar-field-background-color) !important; 16 | color: inherit !important; 17 | } 18 | 19 | #searchbar, 20 | #urlbar, 21 | .searchbar-textbox{ 22 | box-shadow: none !important; 23 | } 24 | 25 | #tracking-protection-icon-container, 26 | :where(#identity-box) ~ *, 27 | .searchbar-textbox > *{ 28 | opacity: 0; 29 | transition: opacity 150ms linear 30 | } 31 | .urlbar-input-container > :is(.urlbar-searchmode-and-input-box-container,.urlbar-input-box), 32 | .searchbar-textbox > moz-input-box{ opacity: 0.6 } 33 | 34 | #identity-box ~ *:hover, 35 | #tracking-protection-icon-container:hover, 36 | #tracking-protection-icon-container ~ *:hover, 37 | #urlbar:focus-within > *, 38 | .urlbar-input-container:focus-within > *, 39 | .searchbar-textbox:hover > *, 40 | .searchbar-textbox:focus-within > *{ opacity: 1 } 41 | 42 | #identity-box{ border: none !important } 43 | 44 | #urlbar:not(:hover) #identity-box{ background-image: radial-gradient(closest-side circle at 16px, orange 10%,transparent 35% ); } 45 | #urlbar:not(:hover) #identity-box.verifiedIdentity{ background-image: radial-gradient(closest-side circle at 16px, lime 10%,transparent 35% ); } 46 | #urlbar:not(:hover) #identity-box > *{ opacity: 0 } 47 | /* 48 | :root[title="Firefox Nightly"] #identity-box, 49 | :root[title="Mozilla Firefox"] #identity-box, 50 | */ 51 | #urlbar[pageproxystate=invalid]:not([usertyping]) #identity-box, 52 | #identity-box:hover, 53 | #identity-box.chromeUI, 54 | #identity-box.verifiedDomain{ 55 | background-image: none !important; 56 | } 57 | 58 | #identity-box > #identity-icon-labels{ transition: max-width 150ms linear !important; } 59 | #identity-box:not(:hover) > #identity-icon-labels{ max-width: 0px !important; } -------------------------------------------------------------------------------- /chrome/minimal_toolbarbuttons.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/minimal_toolbarbuttons.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 | /* Create a circular placeholder for toolbarbutton and downscale to hide them */ 5 | 6 | /* Create a placeholder for buttons */ 7 | toolbar .toolbarbutton-1:not([open]), 8 | .titlebar-button, 9 | #tabbrowser-tabs toolbarbutton, 10 | #scrollbutton-up:not(:hover), 11 | #scrollbutton-down:not(:hover){ 12 | background-image: radial-gradient(circle at center, var(--toolbarbutton-icon-fill,currentColor) 0,var(--toolbarbutton-icon-fill,currentColor) 10%,transparent 15% ); 13 | } 14 | /* Hide placeholder on hover */ 15 | toolbar:hover + toolbar .toolbarbutton-1, 16 | vbox:hover + toolbar .toolbarbutton-1, 17 | toolbar:hover .toolbarbutton-1, 18 | #tabbrowser-tabs:hover toolbarbutton, 19 | .titlebar-buttonbox:hover > .titlebar-button{ background-image: none } 20 | 21 | 22 | toolbar .toolbarbutton-1 > *, 23 | .titlebar-button > *, 24 | #tabbrowser-tabs toolbarbutton > *{ 25 | transform: scale(0); 26 | transition: transform 82ms linear !important; 27 | } 28 | #scrollbutton-up > .toolbarbutton-icon, 29 | #scrollbutton-down > .toolbarbutton-icon{ transform: scale(0) !important; transition: transform 82ms linear !important; } 30 | 31 | toolbar:hover + toolbar .toolbarbutton-1 > *, 32 | vbox:hover + toolbar .toolbarbutton-1 > *, 33 | toolbar:hover .toolbarbutton-1 > *, 34 | .toolbarbutton-1[open] > *, 35 | .titlebar-buttonbox:hover > .titlebar-button > *, 36 | #tabbrowser-tabs:hover toolbarbutton > *{ 37 | transform: scale(1) 38 | } 39 | #scrollbutton-up:hover > .toolbarbutton-icon{ transform: scale(1) !important } 40 | #scrollbutton-down:hover > .toolbarbutton-icon{ transform: scale(-1) !important } 41 | 42 | /* Urlbar icons, this way they show colors is applicable */ 43 | .urlbar-icon{ transition: transform 82ms linear !important; } 44 | #urlbar:not(:hover) .urlbar-icon:not([open]){ transform: scale(0.3) } 45 | 46 | /* The menu button has some margin on non-compact density which creates annnoying transitions */ 47 | /* Lets remove that as well as border since this is minimal style anyway */ 48 | #PanelUI-button{ border-left: 0px !important; margin-left: 0px !important; } 49 | 50 | /* Add a glow-effect to some buttons when it has some "alert" */ 51 | #nav-bar:not(:hover) > #PanelUI-button > #PanelUI-menu-button[badge-status], 52 | #navigator-toolbox:not(:hover) #downloads-button[attention]{ 53 | filter: brightness(2) drop-shadow(0 0 3px orange) drop-shadow(0 0 1px orange); 54 | } 55 | #nav-bar:not(:hover) > #PanelUI-button > #PanelUI-menu-button[badge-status^="update"], 56 | #navigator-toolbox:not(:hover) #downloads-button[attention="success"]{ 57 | filter: brightness(2) drop-shadow(0 0 2px cyan) drop-shadow(0 0 1px cyan); 58 | } -------------------------------------------------------------------------------- /chrome/more_visible_tab_icon.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/more_visible_tab_icon.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 | /* Makes black favicons more visible on dark background, contrast will be lowered though */ 5 | .tab-icon-image{ filter: invert(40%) contrast(250%) saturate(250%) !important; } -------------------------------------------------------------------------------- /chrome/multi-row_bookmarks.css: -------------------------------------------------------------------------------- 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 | /* Makes bookmarks toolbar span multiple rows */ 5 | 6 | #PersonalToolbar{ 7 | --multirow-bmb-n-rows: 3; /* Control how many rows are shown before scrolling */ 8 | --multirow-bmb-row-margin: 2px; /* Control how much spacing is between rows */ 9 | max-height: none !important; 10 | } 11 | :root[BookmarksToolbarOverlapsBrowser] :where(#PersonalToolbar){ 12 | height: unset !important; 13 | } 14 | 15 | #PlacesToolbar > hbox:not(#PlacesToolbarDropIndicatorHolder){ 16 | display: block; 17 | width: 100vw; 18 | } 19 | 20 | #PlacesToolbarItems{ 21 | display: flex; 22 | flex-wrap: wrap; 23 | /* --uc-bm-padding is defined in autohide_bookmarks_toolbar.css */ 24 | max-height: calc(var(--multirow-bmb-n-rows) * (4px + 1em + (2 * (var(--multirow-bmb-row-margin) + var(--uc-bm-padding,var(--bookmark-block-padding)))))) !important; 25 | overflow-y:auto; 26 | scrollbar-color: var(--lwt-accent-color) var(--toolbar-bgcolor); 27 | scrollbar-gutter: stable; 28 | scrollbar-width: thin; 29 | } 30 | 31 | /* Hide the all-bookmarks button */ 32 | #PlacesChevron{ display: none } 33 | 34 | /* Add some spacing between rows, inline margin is collapsed to prevent dragging issues */ 35 | #PlacesToolbarItems > .bookmark-item{ 36 | margin: var(--multirow-bmb-row-margin) 0 !important; 37 | border-inline: 2px solid transparent; 38 | visibility: visible !important; /* Just in case they would be hidden for some reason */ 39 | } 40 | -------------------------------------------------------------------------------- /chrome/multi-row_main_toolbar.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/multi-row_main_toolbar.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 | /** 5 | * Makes items in the main toolbar show on two (or three) lines. 6 | * Anything before urlbar in the customization order is shown at first line. 7 | * Urlbar is shown on second line, or first if no items are before it. 8 | * Anything after urlbar on the third line. 9 | * 10 | * Unfortunately items that don't fit in a row are not pushed to overflow menu. Instead, 11 | * they become invisible. Luckily that probably is less of a problem when using this style. 12 | */ 13 | 14 | :root{ 15 | --uc-multirow-toolbar-height: 40px; 16 | } 17 | :root[uidensity="compact"]{ 18 | --uc-multirow-toolbar-height: 34px; 19 | } 20 | :root[uidensity="touch"]{ 21 | --uc-multirow-toolbar-height: 44px; 22 | } 23 | #nav-bar-customization-target{ 24 | display: flex; 25 | flex-wrap: wrap; 26 | } 27 | 28 | #urlbar{ 29 | --urlbar-container-height: var(--uc-multirow-toolbar-height) !important; 30 | } 31 | 32 | #nav-bar-customization-target > [flex]{ flex-grow: 2 } 33 | #nav-bar-customization-target > toolbarspring{ flex-grow: 1 } 34 | 35 | #urlbar-container{ 36 | width: calc(100% - 20px); 37 | margin-inline: 40px !important; /* Empty space on both sides of urlbar */ 38 | } 39 | -------------------------------------------------------------------------------- /chrome/multi-row_oneliner_combo_patch.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/multi-row_oneliner_combo_patch.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 | /* 5 | This a compatibility patch to combine multi-row_tabs.css and navbar_tabs_responsive_oneliner.css 6 | 7 | Set the pref layout.css.osx-font-smoothing.enabled to true - this is enabled by default on OSX and doesn't do anything otherwise. Used to detect whether window controls are on left or on right. 8 | 9 | This patch only supports window controls on left - ie. they will be drawn to the left of the nav-bar. If you want to use this with window controls on right you must enable native titlebar. 10 | 11 | There is no good way to handle scrollable multiple rows so you should set the maximum rows in multi-row_tabs.css to something you won't ever hit. Or you could just check what happens. 12 | 13 | This will NOT work correctly if you have hidden tabs such as with tab groups extensions 14 | */ 15 | 16 | /* 17 | You will need 5 other stylesheets - order may or may not matter, but this patch needs to be loaded last 18 | 19 | chrome/window_control_placeholder_support.css 20 | chrome/navbar_tabs_responsive_oneliner.css 21 | chrome/tabs_on_bottom.css 22 | chrome/multi-row_tabs.css 23 | chrome/urlbar_full_width.css 24 | */ 25 | 26 | /* Instructions over, begin CSS */ 27 | 28 | #navigator-toolbox > #nav-bar{ 29 | margin-top: 0px !important; 30 | padding-left: 0px !important; 31 | } 32 | 33 | @media screen and (min-width: 1100px){ 34 | 35 | .urlbarView{ 36 | position: fixed !important; 37 | top: calc(var(--uc-toolbar-height)) 38 | } 39 | #nav-bar{ border-right-width: 0px !important } 40 | #TabsToolbar{ 41 | margin-top: calc(0px - var(--uc-toolbar-height,0px)); 42 | margin-left: 0px; 43 | } 44 | #tabbrowser-tabs .tabbrowser-tab:first-child, 45 | #tabbrowser-tabs .tabbrowser-tab[first-visible-tab]{ 46 | margin-left: var(--uc-navigationbar-width) !important; 47 | } 48 | 49 | } 50 | 51 | @media screen and (max-width: 1700px){ 52 | #urlbar-container{ min-width:unset !important } 53 | } -------------------------------------------------------------------------------- /chrome/multi-row_tabs_separate_pinned_row_patch.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/multi-row_tabs_separate_pinned_row_patch.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 | /* Use with multi-row_tabs.css to show pinned tabs on separate row. */ 5 | 6 | scrollbox[part][orient="horizontal"] > slot::after, 7 | .scrollbox-clip > scrollbox[part][orient="horizontal"]::after{ 8 | display: flow-root list-item; 9 | content: ""; 10 | flex-basis: -moz-available; 11 | height: 0; 12 | overflow: hidden; 13 | } 14 | 15 | .tabbrowser-tab:not([pinned]), 16 | .tabbrowser-tab:not([pinned]) + #tabs-newtab-button{ 17 | order: 1; 18 | } 19 | 20 | .tabbrowser-tab[pinned] + .tabbrowser-tab{ 21 | margin-inline-start: 0 !important; 22 | } -------------------------------------------------------------------------------- /chrome/multi-row_tabs_window_control_patch.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/multi-row_tabs_window_control_patch.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 | /* This is a supporting style for multi-row_tabs.css*/ 5 | /* This depends on window_control_placeholder_support.css to work so get that as well */ 6 | 7 | /* !! Use customize mode to make menubar permanently enabled !! */ 8 | /* You should NOT use this style if you want menubar to just always be visible */ 9 | 10 | /* space on left and right to be able to drag the window */ 11 | :root[sizemode="normal"] #TabsToolbar{ 12 | margin-inline: var(--uc-window-drag-space-pre) var(--uc-window-drag-space-post); 13 | } 14 | #nav-bar{ 15 | border-left-width: 0px; 16 | } 17 | :root[sizemode="fullscreen"] .titlebar-buttonbox-container{ 18 | display: flex !important; 19 | } 20 | :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container{ 21 | display: none !important; 22 | } 23 | #titlebar{ 24 | flex-direction: column-reverse; 25 | will-change: unset !important; 26 | opacity: 1 !important; 27 | } 28 | #toolbar-menubar{ 29 | height: 40px; 30 | margin-bottom: -40px; 31 | display: flex; 32 | } 33 | :root[sizemode="fullscreen"] #toolbar-menubar{ 34 | visibility: visible !important; 35 | } 36 | :root[uidensity="compact"] #toolbar-menubar{ 37 | height: 32px; 38 | margin-bottom: -32px; 39 | } 40 | #main-menubar{ 41 | height: 100%; 42 | position: relative; 43 | justify-content: center !important; 44 | } 45 | #main-menubar > menu{ 46 | opacity: 0; 47 | } 48 | #main-menubar:has(>[_moz-menuactive]), 49 | #menubar-items:hover > #main-menubar{ 50 | background-image: linear-gradient( to left,transparent,var(--arrowpanel-background) 35px); 51 | color: var(--arrowpanel-color); 52 | background-size: cover; 53 | position: relative; 54 | z-index: 1; 55 | } 56 | #main-menubar:has(>[_moz-menuactive]) > menu{ 57 | opacity: 1; 58 | } 59 | #main-menubar:last-child{ 60 | padding-inline-end: 40px; 61 | } 62 | #menubar-items:hover{ 63 | z-index: 2; 64 | } 65 | #file-menu{ 66 | padding-inline-start: 30px; 67 | background: url(chrome://browser/skin/settings.svg) no-repeat 10px; 68 | fill: currentColor; 69 | -moz-context-properties: fill 70 | } 71 | -------------------------------------------------------------------------------- /chrome/navbar_below_content.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/navbar_below_content.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 | /* Moves the main toolbar (#nav-bar) to the bottom of the window */ 5 | 6 | @-moz-document url(chrome://browser/content/browser.xhtml){ 7 | 8 | :root:not([inFullscreen]){ 9 | --uc-bottom-toolbar-height: calc(39px + var(--toolbarbutton-outer-padding) ) 10 | } 11 | 12 | :root[uidensity="compact"]:not([inFullscreen]){ 13 | --uc-bottom-toolbar-height: calc(32px + var(--toolbarbutton-outer-padding) ) 14 | } 15 | 16 | #browser, 17 | #customization-container{ margin-bottom: var(--uc-bottom-toolbar-height,0px) } 18 | 19 | #nav-bar{ 20 | position: fixed !important; 21 | bottom: 0px; 22 | /* For some reason -webkit-box behaves internally like -moz-box, but can be used with fixed position. display: flex would work too but it breaks extension menus. */ 23 | display: -webkit-box; 24 | width: 100%; 25 | z-index: 1; 26 | } 27 | #nav-bar-customization-target{ -webkit-box-flex: 1; } 28 | 29 | :root[lwtheme] #nav-bar{ 30 | background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)), var(--lwt-additional-images,var(--toolbar-bgimage)) !important; 31 | background-position: top,var(--lwt-background-alignment); 32 | background-repeat: repeat,var(--lwt-background-tiling); 33 | } 34 | :root[lwtheme-image] #nav-bar{ 35 | background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)),var(--lwt-header-image), var(--lwt-additional-images,var(--toolbar-bgimage)) !important; 36 | } 37 | 38 | /* Fix panels sizing */ 39 | .panel-viewstack{ max-height: unset !important; } 40 | 41 | #urlbar[breakout][breakout-extend]{ 42 | display: flex !important; 43 | flex-direction: column-reverse !important; 44 | bottom: 0px !important; /* Change to 3-5 px if using compact_urlbar_megabar.css depending on toolbar density */ 45 | top: auto !important; 46 | } 47 | 48 | .urlbarView-body-inner{ border-top-style: none !important; } 49 | 50 | @media (-moz-platform: linux){ 51 | #notification-popup[side="top"]{ 52 | margin-top: calc(-2 * var(--panel-padding-block) - 40px - 32px - 8.5em) !important; 53 | } 54 | #permission-popup[side="top"]{ 55 | margin-top: calc(-2 * var(--panel-padding-block) - 2.5em); 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /chrome/navigation_buttons_inside_urlbar.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/navigation_buttons_inside_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 | 4 | /* Requires you to edit toolbar layout. Put buttons directly to the right of the urlbar in this order: */ 5 | /* Actually, the order of reload and back-buttons doesn't matter */ 6 | 7 | #urlbar{ 8 | margin-right:0px !important; 9 | border-right:none !important; 10 | border-top-right-radius: 0 !important; 11 | border-bottom-right-radius: 0 !important; 12 | } 13 | 14 | #urlbar, 15 | #nav-bar-customization-target > .chromeclass-toolbar-additional[overflows="false"]:not(#downloads-button){ 16 | border-color: var(--toolbar-field-border-color, hsla(240,5%,5%,.25)); 17 | } 18 | 19 | #nav-bar-customization-target > .chromeclass-toolbar-additional[overflows="false"]:not(#downloads-button){ 20 | margin: 3px 0 !important; 21 | padding: 0 0px !important; 22 | background-clip: padding-box; 23 | border-style: solid; 24 | border-width: 1px 0; 25 | opacity: 1 !important; 26 | background-color: var(--toolbar-field-background-color, hsla(0,0%,100%,.8)); 27 | } 28 | 29 | #nav-bar-customization-target > .chromeclass-toolbar-additional[overflows="false"]:not(#downloads-button) .toolbarbutton-icon{ 30 | border: none !important; 31 | border-radius: 0 !important; 32 | margin: -3px 0 !important; 33 | background-color:transparent; 34 | width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important; 35 | height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important; 36 | } 37 | 38 | #back-button{ --backbutton-background: transparent; --uc-back-extra-padding: 0px !important } 39 | 40 | #back-button > .toolbarbutton-icon{ padding: var(--toolbarbutton-inner-padding) } 41 | 42 | #nav-bar-customization-target > .chromeclass-toolbar-additional[overflows="false"]:not(#downloads-button):hover .toolbarbutton-icon{ 43 | background-color: transparent !important; 44 | box-shadow: none !important; 45 | } 46 | 47 | #nav-bar-customization-target > .chromeclass-toolbar-additional[overflows="false"]:not(#downloads-button):not([disabled]):hover{ 48 | background-image: linear-gradient(to bottom, var(--uc-ext-active-color,hsla(0,0%,70%,.2)), var(--uc-ext-active-color,hsla(0,0%,70%,.2))) 49 | } 50 | 51 | #urlbar-container:focus-within ~ .chromeclass-toolbar-additional[overflows="false"]:not(#downloads-button){ 52 | border-color:Highlight !important; 53 | } 54 | 55 | #urlbar-container ~ .chromeclass-toolbar-additional[overflows="false"][disabled]:not(#downloads-button) .toolbarbutton-icon{ opacity: 0.4 !important } 56 | /* Change this if you want some other button to be the right-most one */ 57 | #forward-button{ 58 | border-right-width: 1px !important; 59 | border-radius: 0 2px 2px 0 !important; 60 | } 61 | 62 | #back-button, #back-button > image{ border-radius: 0 !important; } 63 | #stop-reload-button{ padding: 0 !important; } -------------------------------------------------------------------------------- /chrome/newtab_button_always_on_hover.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/newtab_button_always_on_hover.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 | /* Always show tab close button on hover and never otherwise */ 5 | #tabbrowser-tabs #tabs-newtab-button{ 6 | display: none; 7 | } 8 | #tabbrowser-tabs:hover #tabs-newtab-button{ 9 | display: flex !important; 10 | } 11 | -------------------------------------------------------------------------------- /chrome/normal_pinned_tabs.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/normal_pinned_tabs.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 | /* Makes pinned tabs behave like normal tabs, making their title and close buttons visible and making them "non-positioned" when tab strip is overflowing */ 5 | 6 | #tabbrowser-tabs{ padding-inline-start: 0px !important } 7 | 8 | .tabbrowser-tab{ 9 | flex-grow: 100; 10 | max-width: 225px; 11 | min-width: var(--tab-min-width); 12 | width: 0; 13 | transition: min-width 100ms ease-out, max-width 100ms ease-out; 14 | margin-inline-start: 0px !important; 15 | position: initial !important; 16 | display: flex !important 17 | } 18 | .tab-content{ min-width: 0 } 19 | .tab-label-container[textoverflow]{ 20 | mask-image: linear-gradient(to left, transparent, black var(--tab-label-mask-size)); 21 | } 22 | .tabbrowser-tab[pinned] > .tab-stack{ border: none !important; } 23 | .tabbrowser-tab[pinned]::after{ position: static !important; margin-block: 0px 1px !important; } 24 | 25 | .tabbrowser-tab[selected]{ position: relative !important; } 26 | 27 | .tab-label-container{ width: unset !important; } 28 | .tab-label-container[pinned]{ margin-inline-start: 8px } 29 | 30 | .tab-icon-sound:is([soundplaying],[muted],[activemedia-blocked],[pictureinpicture]), 31 | 32 | .tab-icon-overlay{ display: none !important; } 33 | 34 | #tabbrowser-tabs[closebuttons="activetab"] > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button:not([selected]){ display: none !important; } 35 | 36 | /* Comment out or remove this if you want pinned tabs to never have close-button */ 37 | .tab-close-button{ display: flex !important; } 38 | -------------------------------------------------------------------------------- /chrome/numbered_tabs.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/numbered_tabs.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 | /* Show a number before tab text*/ 5 | 6 | .tabbrowser-tab:first-child{ counter-reset: nth-tab 0 } /* Change to -1 for 0-indexing */ 7 | .tab-text::before{ content: counter(nth-tab) " "; counter-increment: nth-tab } -------------------------------------------------------------------------------- /chrome/overlay_fullscreen_toolbars.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/overlay_fullscreen_toolbars.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 | /* Makes toolbars appear as overlay instead of pushing down the website in fullscreen mode */ 5 | 6 | @media (-moz-bool-pref: "browser.fullscreen.autohide"), 7 | -moz-pref("browser.fullscreen.autohide"){ 8 | :root{ 9 | --uc-fullscreen-overlay-duration: 82ms; 10 | --uc-fullscreen-overlay-delay: 600ms; 11 | } 12 | :root[sizemode="fullscreen"]{ 13 | &[sessionrestored]{ 14 | #urlbar[popover]{ 15 | pointer-events: none; 16 | opacity: 0; 17 | transition: transform var(--uc-fullscreen-overlay-duration) ease-in-out var(--uc-fullscreen-overlay-delay), opacity 0ms calc(var(--uc-fullscreen-overlay-delay) + 82ms); 18 | transform: translateY(calc(0px - var(--tab-min-height) - (var(--tab-block-margin) * 2) - var(--urlbar-container-height))); 19 | } 20 | } 21 | #navigator-toolbox{ 22 | position: fixed !important; 23 | width: 100vw; 24 | z-index: 10 !important; 25 | transition: transform var(--uc-fullscreen-overlay-duration) ease-in-out var(--uc-fullscreen-overlay-delay) !important; 26 | margin-top: 0 !important; 27 | transform: translateY(-100%); 28 | } 29 | #navigator-toolbox:is(:hover,:focus-within,[style=""]), 30 | #mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts,#selection-shortcut-action-panel,#chat-shortcuts-options-panel,#tab-preview-panel)) ~ #navigator-toolbox{ 31 | transition-delay: 0ms !important; 32 | transform: translateY(0); 33 | } 34 | #mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts,#selection-shortcut-action-panel,#chat-shortcuts-options-panel,#tab-preview-panel)) ~ toolbox #urlbar[popover], 35 | #navigator-toolbox:is(:hover,:focus-within,[style=""]) #urlbar[popover], 36 | #urlbar-container > #urlbar[popover]:is([focused],[open]){ 37 | pointer-events: auto; 38 | opacity: 1; 39 | transition-delay: 0ms; 40 | transform: translateY(0); 41 | } 42 | } 43 | } -------------------------------------------------------------------------------- /chrome/overlay_menubar.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/overlay_menubar.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 | /* Makes menubar appear as overlay in the top left corner */ 5 | 6 | #toolbar-menubar{ 7 | position: fixed; 8 | display: flex; 9 | top: 0; 10 | width: 100vw; 11 | height: initial !important; 12 | z-index: 10; 13 | } 14 | 15 | #toolbar-menubar[autohide="true"][inactive="true"]{ height: 0px !important; } 16 | 17 | #toolbar-menubar > spacer{ flex-grow: 1 } 18 | #toolbar-menubar[inactive] > .titlebar-buttonbox-container{ display: none } 19 | 20 | #main-menubar{ 21 | height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin,0px)); 22 | background-color: var(--arrowpanel-background); 23 | color: var(--arrowpanel-color); 24 | } 25 | 26 | #menubar-items{ 27 | flex-direction: row !important; 28 | } 29 | #menubar-items::after{ 30 | content: ""; 31 | display: flex; 32 | width: 30px; 33 | height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin,0px)); 34 | background-image: linear-gradient(to right, var(--arrowpanel-background) 30%, transparent); 35 | } 36 | 37 | @media (-moz-gtk-csd-reversed-placement){ 38 | #toolbar-menubar[autohide="true"]:not([inactive]) > .titlebar-buttonbox-container{ display: none } 39 | } 40 | -------------------------------------------------------------------------------- /chrome/overlay_sidebar_header.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/overlay_sidebar_header.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 | /* This is a hack that only "kinda" works! */ 5 | /* Changes sidebar header to appear as small "notch" at the top of the sidebar. Hovering it will show full sidebar so you can have access to sidebar switcher button. The caveat is that you need to click the switcher button TWICE - otherwise the header and switcher popup will hide themselver as soon as cursor is moved on top of the switcher popup. */ 6 | 7 | #sidebar-header{ 8 | display: flex; 9 | position: absolute; 10 | width: inherit; 11 | visibility: hidden; 12 | background-color: inherit; 13 | -moz-user-focus: normal; 14 | } 15 | #sidebar-header::before{ 16 | visibility: visible; 17 | content: ""; 18 | border-bottom-left-radius: 8px; 19 | border-bottom-right-radius: 8px; 20 | background-color: inherit; 21 | border: 1px solid var(--chrome-content-separator-color); 22 | border-top: none; 23 | height: 8px; 24 | width: 14px; 25 | margin-top: -9px; 26 | margin-inline-start: -4px; 27 | } 28 | #sidebar-switcher-target.active{ 29 | pointer-events: none; 30 | } 31 | #sidebar-header:focus-within, 32 | #sidebar-header:hover{ 33 | visibility: visible; 34 | } 35 | #sidebar-spacer{ 36 | flex-grow: 1; 37 | } -------------------------------------------------------------------------------- /chrome/overlay_tab_audio_icons.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/overlay_tab_audio_icons.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 | /* Makes the tab audio indicator show as overlay in all tabs, not just pinned ones */ 5 | 6 | .tab-icon-image, 7 | .tab-throbber{ opacity: 1 !important; } 8 | 9 | .tab-icon-overlay:not([crashed]){ 10 | top: -8px; 11 | inset-inline-end: -6px; 12 | margin-inline-end: 0 !important; 13 | z-index: 1; 14 | padding: 2px; 15 | opacity: 1 !important; 16 | stroke: var(--tab-icon-overlay-stroke, black) !important; 17 | fill: var(--tab-icon-overlay-fill, white) !important; 18 | fill-opacity: 1 !important; 19 | } 20 | .tab-icon-overlay:not([crashed]):hover{ 21 | background-color: var(--tab-icon-overlay-stroke, black) !important; 22 | border-radius: 10px !important; 23 | } 24 | .tab-audio-button{ 25 | --button-size-icon-small: 16px !important; 26 | --button-min-height-small: var(--button-size-icon-small) !important; 27 | --button-background-color-ghost: var(--toolbox-bgcolor-inactive); 28 | --button-border-radius: var(--border-radius-circle) !important; 29 | position: absolute; 30 | top: 2px; 31 | margin-inline: 6px 0 !important; 32 | } -------------------------------------------------------------------------------- /chrome/page_action_buttons_on_hover.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/page_action_buttons_on_hover.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 | /* Page action-buttons "slide in" when cursor is on top of them and don't reserve space when not used */ 5 | 6 | #page-action-buttons{ padding-inline-start: 8px } 7 | 8 | .urlbar-page-action{ 9 | margin-inline-end: calc(-16px - 2 * var(--urlbar-icon-padding) ); 10 | opacity: 0; 11 | transition: margin-inline-end 100ms linear, opacity 200ms linear; 12 | } 13 | 14 | #page-action-buttons:hover > .urlbar-page-action, 15 | .urlbar-page-action[open], 16 | .urlbar-page-action[open] ~ .urlbar-page-action{ 17 | opacity: 1; 18 | margin-inline-end: 0px !important; 19 | } -------------------------------------------------------------------------------- /chrome/page_action_buttons_on_urlbar_hover.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/page_action_buttons_on_urlbar_hover.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-page-action{ 5 | margin-inline-end: calc(-16px - 2 * var(--urlbar-icon-padding) ); 6 | opacity: 0; 7 | transition: margin-inline-end 100ms linear, opacity 200ms linear; 8 | } 9 | 10 | #urlbar:hover .urlbar-page-action, 11 | .urlbar-page-action[open], 12 | .urlbar-page-action[open] ~ .urlbar-page-action{ 13 | opacity: 1; 14 | margin-inline-end: 0px !important; 15 | } -------------------------------------------------------------------------------- /chrome/pinned_tabs_on_right.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/pinned_tabs_on_right.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 | /* Show pinned tabs on right side of normal tabs */ 5 | /* This is stupid hack that barely works and might lead to some very unexpected behavior */ 6 | 7 | .scrollbutton-up[orient="horizontal"]~spacer{ display: none } 8 | 9 | .scrollbutton-up[orient="horizontal"]~scrollbox{ 10 | justify-content: flex-end; 11 | } 12 | 13 | .scrollbutton-up[orient="horizontal"]~scrollbox::after{ 14 | content: ""; 15 | display: flex; 16 | flex-grow: 1; 17 | flex-shrink: 1; 18 | order: 2; 19 | } 20 | 21 | #tabs-newtab-button{ 22 | order: 2; 23 | } 24 | .tabbrowser-tab[pinned]{ 25 | order: 3; 26 | } 27 | 28 | #tabbrowser-tabs[positionpinnedtabs]{ direction: rtl } 29 | #tabbrowser-tabs[positionpinnedtabs] > arrowscrollbox { 30 | flex-direction: row-reverse; 31 | } 32 | .tab-content{ direction: ltr } -------------------------------------------------------------------------------- /chrome/privatemode_indicator_as_menu_button.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/privatemode_indicator_as_menu_button.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 | /* Removes the private-browsing-mode indicator from tabs toolbar and changes the menu-button icon to the private-browsing indicator in private windows */ 5 | 6 | #private-browsing-indicator-with-label, 7 | .private-browsing-indicator-with-label, 8 | .private-browsing-indicator{ display: none } 9 | :root[privatebrowsingmode="temporary"] #PanelUI-menu-button{ 10 | list-style-image: url("chrome://global/skin/icons/indicator-private-browsing.svg") !important; 11 | } -------------------------------------------------------------------------------- /chrome/proton_dark_light_notifications.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/proton_dark_light_notifications.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 | /* Makes web notifications use dark/light theme based on your selected theme, and makes them fit a bit better to rounded proton style. */ 5 | 6 | @-moz-document url("chrome://global/content/alerts/alert.xhtml") { 7 | 8 | /* Color scheme definitions 9 | * Intentionally let Firefox override these on Windows10 10 | */ 11 | :root{ 12 | --menu-color: #15141a; 13 | --menu-background-color: #f9f9fb; 14 | --menu-border-color: #cfcfd8; 15 | --menuitem-hover-background-color: #e0e0e6; 16 | } 17 | @media (-moz-toolbar-prefers-color-scheme:dark) { 18 | :root { 19 | --menu-border-color: #5b5b66; 20 | --menu-color: #fbfbfe; 21 | --menu-background-color: #2b2a33; 22 | --menuitem-hover-background-color: #52525e; 23 | } 24 | #alertSourceLabel { color: rgb(5,209,241) !important; } 25 | } 26 | 27 | /* The line below removes background "layer" from the notification on linux, Windows and macOS don't have that layer in the first place */ 28 | :root{ background: transparent !important; } 29 | 30 | /* Make Firefox actually use the colors set above */ 31 | #alertBox { 32 | color: var(--menu-color) !important; 33 | background-color: var(--menu-background-color) !important; 34 | border-color: var(--menu-border-color) !important; 35 | border-radius: 6px !important; 36 | -moz-window-shadow: cliprounded !important; 37 | } 38 | #alertSettings { 39 | fill: currentColor !important; 40 | color: inherit !important; 41 | border-radius: 0 !important; 42 | margin-inline: 0 !important; 43 | margin-bottom: -4px !important; 44 | } 45 | .close-icon, 46 | #alertSettings { 47 | background: transparent !important 48 | } 49 | .close-icon:hover > .toolbarbutton-icon, 50 | #alertSettings:is(:hover,[open]) > .button-box > .box-inherit { 51 | background-color: var(--menuitem-hover-background-color); 52 | } 53 | 54 | /* Reshape and move the buttons a bit */ 55 | .close-icon > .toolbarbutton-icon, 56 | #alertSettings > .button-box > .box-inherit { 57 | border-radius: 4px !important; 58 | padding: 2px !important; 59 | margin: 2px 2px -2px 0 !important; 60 | } 61 | #alertSettings > .button-box > .box-inherit { 62 | margin: -4px 4px 3px 0 !important; 63 | } 64 | #alertSettings > .button-box > .box-inherit > .button-icon { 65 | padding: 1px; 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /chrome/reload_button_in_urlbar.css: -------------------------------------------------------------------------------- 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 | 4 | /* Makes stop-reload-button appear as if it's inside urlbar. 5 | * First, move reload button next to urlbar on right side using 6 | * customize-mode. 7 | * If your theme has opaque background for urlbar then that will cover the reload button. 8 | * Switch to another theme such of one of the built-in dark/light/auto theme. 9 | */ 10 | 11 | #urlbar-container + #stop-reload-button{ 12 | margin-left: calc( 1px - var(--urlbar-margin-inline) - 2 * (var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding)) - 16px ); 13 | position: relative; 14 | z-index: 3; 15 | color: var(--urlbar-box-hover-text-color) !important; 16 | --toolbarbutton-hover-background: var(--urlbar-box-hover-bgcolor); 17 | } 18 | 19 | #urlbar-container + #stop-reload-button > .toolbarbutton-1 > .toolbarbutton-icon{ 20 | padding-block: var(--urlbar-icon-padding) !important; 21 | height: unset !important; 22 | } 23 | 24 | #urlbar{ 25 | padding-right: calc(2 * (var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding)) + 12px) !important; 26 | pointer-events: none; 27 | } 28 | .urlbar-input-container, 29 | .urlbarView{ 30 | pointer-events: auto; 31 | } -------------------------------------------------------------------------------- /chrome/round_caption_buttons.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/round_caption_buttons.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 | /* Make window-control - aka caption buttons round following theme text color. */ 5 | 6 | /* Uncomment the following line to use colorful icons ala MacOS */ 7 | /* .titlebar-button{ --uc-caption-background: var(--uc-caption-color) } */ 8 | 9 | .titlebar-button { opacity: 0.6; --uc-caption-color: rgb(252,185,15) } 10 | .titlebar-min { opacity: 0.5; --uc-caption-color: rgb(36, 209, 49) } 11 | .titlebar-close { opacity: 0.7; --uc-caption-color: rgb(250, 55, 55) } 12 | 13 | .titlebar-button:hover { opacity: 1 } 14 | 15 | .titlebar-button { 16 | background: transparent !important; 17 | padding-inline: 10px !important; 18 | transition: opacity 0.2s ease; 19 | } 20 | .titlebar-close { padding-right: 18px !important; } 21 | 22 | .titlebar-button > .toolbarbutton-icon { 23 | list-style-image: none; 24 | border-radius: 10px; 25 | background: var(--uc-caption-background,currentColor) !important; 26 | } 27 | 28 | /* OPTIONAL - move caption buttons in tabs toolbar a bit upwards */ 29 | /* #TabsToolbar > .titlebar-buttonbox-container{ margin-bottom: var(--toolbarbutton-inner-padding) !important; } */ 30 | -------------------------------------------------------------------------------- /chrome/round_ui_items.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/round_ui_items.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 | /* Make bunch of things in the main UI round */ 5 | 6 | :root{ --toolbarbutton-border-radius: 24px !important } 7 | .urlbar-input-container > box:hover, 8 | .urlbar-input-container > box[open], 9 | #main-menubar > menu, 10 | .titlebar-button:hover, 11 | #scrollbutton-up, 12 | #scrollbutton-down, 13 | .tab-close-button, 14 | .close-icon > image, 15 | #page-action-buttons > :hover, 16 | .panel-arrowcontent, 17 | .urlbarView-row-inner, 18 | .search-one-offs button, 19 | .subviewbutton-back, 20 | .toolbaritem-combined-buttons > toolbarbutton, 21 | #PopupSearchAutoComplete, 22 | menupopup{ border-radius: 18px } 23 | 24 | button, 25 | .tab-background{ border-radius: 30px !important; } 26 | 27 | .panel-arrowcontent{ margin-inline-end: 0 !important; } 28 | .panel-arrow{ margin-inline: 17px !important; } 29 | 30 | menupopup{ -moz-appearance: none !important; overflow: -moz-hidden-unscrollable !important; } 31 | 32 | .tabbrowser-tab[selected]::after, 33 | .tabbrowser-tab[beforeselected-visible]::after{ border-color: transparent !important; } 34 | 35 | .urlbar-icon, 36 | toolbar toolbarbutton:not(#back-button):not(.bookmark-item):not(.titlebar-button) > .toolbarbutton-icon{ border-radius: 0px !important; clip-path: circle() } 37 | 38 | menugroup:hover > menuitem{ clip-path: circle() } -------------------------------------------------------------------------------- /chrome/rounded_menupopups.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/rounded_menupopups.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 | /* Makes panels, menupopups, urlbar and searchbar rounded */ 5 | 6 | /* Modify the rounding size here */ 7 | :root{ --uc-menupopup-border-radius: 20px } 8 | 9 | panel[type="autocomplete-richlistbox"], 10 | menupopup, 11 | .panel-arrowcontent{ 12 | -moz-appearance: none !important; 13 | border-radius: var(--uc-menupopup-border-radius) !important; 14 | overflow: -moz-hidden-unscrollable !important; 15 | } 16 | 17 | /* The rounding is also applied to searchbar and urlbar to look consistent */ 18 | searchbar#searchbar, 19 | #urlbar-background{ 20 | border-radius: var(--uc-menupopup-border-radius) !important 21 | } 22 | 23 | /* Reposition the panel-arrow */ 24 | panel[type="arrow"]{ margin-inline-end: calc(-10px - var(--uc-menupopup-border-radius)) !important; } 25 | .panel-arrow{ margin-inline: var(--uc-menupopup-border-radius) !important; } -------------------------------------------------------------------------------- /chrome/scrollable_menupopups.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/scrollable_menupopups.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 | .menupopup-arrowscrollbox{ 5 | --uc-scrollbox-overflow: auto; 6 | --uc-scrollbutton-display-model: none; 7 | } 8 | 9 | scrollbox{ overflow-y: var(--uc-scrollbox-overflow,initial) !important; } 10 | 11 | #scrollbutton-up, 12 | #scrollbutton-down{ 13 | display: var(--uc-scrollbutton-display-model,initial) !important; 14 | } -------------------------------------------------------------------------------- /chrome/scrollable_urlbar_popup.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/scrollable_urlbar_popup.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 | /* Makes the urlbar dropdown scrollable */ 5 | /* Modify the pref browser.urlbar.maxRichResults to set how many results should be shown */ 6 | 7 | #urlbar-results{ 8 | max-height: 400px; /* Maximum height for the list, modify as needed */ 9 | overflow-y: auto; 10 | scrollbar-color: var(--urlbar-separator-color,currentColor) transparent; 11 | scrollbar-width: thin 12 | } 13 | .urlbarView-no-wrap{ 14 | position: relative; 15 | } -------------------------------------------------------------------------------- /chrome/selected_tab_gradient_border.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/selected_tab_gradient_border.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 | /* Adds a gradient outline to selected tab. This is going to need modifications if you use tabs that don't follow Proton styling. */ 5 | 6 | .tab-background[selected]{ 7 | outline: none !important; 8 | border: 2px solid transparent !important; 9 | box-shadow: none !important; 10 | background-clip: padding-box; 11 | } 12 | .tab-background[selected] > .tab-context-line{ margin: -5px 0 0 !important; } 13 | .tabbrowser-tab[selected] > .tab-stack::before{ 14 | content: ""; 15 | display: flex; 16 | min-height: inherit; 17 | border-radius: var(--tab-border-radius); 18 | grid-area: 1/1; 19 | margin-block: var(--tab-block-margin); 20 | /* Edit gradient colors here */ 21 | background: repeat linear-gradient(90deg,#f0f,#ff0,#0ff)!important; 22 | } -------------------------------------------------------------------------------- /chrome/sharp_menupopup_corners.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/sharp_menupopup_corners.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 | menupopup, 5 | .menupopup-arrowscrollbox{ border-radius: 0 !important; } 6 | :root{ --arrowpanel-border-radius:0px !important } -------------------------------------------------------------------------------- /chrome/show_navbar_on_focus_only.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/show_navbar_on_focus_only.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 | /* Hides #nav-bar and overlays it on top of tabs when urlbar is focused */ 5 | /* overlay_menubar.css can be used for better handling of menubar when triggered with Alt-key */ 6 | /* This style totally breaks bookmarks toolbar but can be used with autohide_bookmarks_toolbar.css */ 7 | 8 | :root:not([customizing]) #navigator-toolbox{ display: grid; grid-template-rows: auto } 9 | :root:not([customizing]) #navigator-toolbox > :is(#titlebar,.browser-toolbar){ grid-area: 1/1; } 10 | :root:not([customizing]) #titlebar{ -moz-appearance: none !important; } 11 | 12 | #urlbar-container{ margin-top: 1px } 13 | :root[sessionrestored] #nav-bar:not([customizing]){ 14 | transform: rotateX(89.9deg); 15 | transition: transform 67ms linear, opacity 0ms linear 67ms !important; 16 | opacity: 0; 17 | z-index: 3; 18 | } 19 | :root[sessionrestored] #nav-bar:focus-within{ 20 | transform: rotateX(0deg); 21 | opacity: 1; 22 | transition-delay: 0ms, 0ms !important; 23 | } 24 | 25 | /* This enables compatibility with autohide_bookmarks_toolbar.css */ 26 | #PersonalToolbar{ margin-top: var(--tab-min-height) !important; } -------------------------------------------------------------------------------- /chrome/show_toolbars_in_popup_windows.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/show_toolbars_in_popup_windows.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 | :root[chromehidden~="toolbar"] :is(.browser-toolbar,.chromeclass-toolbar-additional) { display: flex } 5 | :root[chromehidden~="toolbar"] .browser-toolbar { visibility: visible } -------------------------------------------------------------------------------- /chrome/show_urlbar_button.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/show_urlbar_button.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 | /* This style hides urlbar, but instead shows a button that shows the urlbar when clicked, technically the button is the urlbar - just styled to look like a button. Urlbar also gets shown when it is focused by e.g. Ctrl+L */ 5 | 6 | #wrapper-urlbar-container, 7 | #urlbar-container{ 8 | flex-grow: 0 !important; 9 | width: 34px !important; 10 | position: static !important; 11 | } 12 | :root[customizing] #urlbar-container{ 13 | min-width: 60px; 14 | } 15 | #urlbar{ 16 | contain: inline-size; 17 | width: 34px !important; 18 | } 19 | #urlbar:focus-within{ 20 | width: 70vw !important; 21 | z-index: 1; 22 | inset-inline: 15vw !important; 23 | } 24 | :root:not([customizing]) #urlbar:not(:focus-within) > #urlbar-background{ 25 | background: transparent !important; 26 | border-color: transparent !important; 27 | } 28 | :root:not([customizing]) #urlbar:not(:focus-within):hover > #urlbar-background{ 29 | background: var(--toolbarbutton-hover-background) !important; 30 | } 31 | #urlbar:not(:focus-within) #page-action-buttons, 32 | #urlbar:not(:focus-within) #identity-box, 33 | .urlbar-input-container:not(:focus-within){ 34 | display: grid; 35 | } 36 | :where(#urlbar):not(:focus-within) #page-action-buttons > *, 37 | :where(#urlbar):not(:focus-within) #identity-box > *, 38 | .urlbar-input-container:not(:focus-within) > *{ 39 | grid-area: 1/1; 40 | opacity: 0; 41 | pointer-events: none; 42 | } 43 | .urlbar-input-container:not(:focus-within){ 44 | background-image: url("chrome://devtools/skin/images/tool-webconsole.svg"); 45 | background-repeat: no-repeat; 46 | background-position: center; 47 | color: var(--toolbar-color); 48 | fill: light-dark(rgb(91, 91, 102), rgb(251, 251, 254)); 49 | -moz-context-properties: fill; 50 | } 51 | :root[lwtheme] .urlbar-input-container:not(:focus-within){ 52 | fill: var(--toolbarbutton-icon-fill); 53 | } 54 | .urlbar-input-box.urlbar-input-box{ 55 | opacity: 1; 56 | width: 100%; 57 | pointer-events: auto; 58 | } 59 | #urlbar:not(:focus-within) #identity-icon-label{ 60 | display: none; 61 | } 62 | #page-action-buttons > [open], 63 | #identity-box > [open], 64 | .urlbar-input-container:not(:focus-within) > :has([open]){ 65 | opacity: 1; 66 | background-color: var(--toolbar-bgcolor); 67 | } 68 | #urlbar-input:not(:focus-within){ 69 | opacity: 0; 70 | cursor: default; 71 | } 72 | /* Make flexible spaces have unlimited width so that they can claim empty space that urlbar would normally claim */ 73 | #nav-bar-customization-target > toolbarspring{ 74 | max-width: none !important; 75 | } -------------------------------------------------------------------------------- /chrome/show_window_title_in_menubar.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/show_window_title_in_menubar.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 | /* Shows window title in menubar */ 5 | /* Enable menubar for correct behavior */ 6 | @-moz-document url(chrome://browser/content/browser.xhtml){ 7 | :root:not([sizemode="fullscreen"]) > head{ 8 | display: block; 9 | position: fixed; 10 | top: 2px; 11 | right: 140px; /* Space for window controls */ 12 | width: calc(100vw - 440px); /* Window width - window control width - menuitem (English) width */ 13 | text-align: center; 14 | z-index: 1; 15 | pointer-events: none; 16 | text-overflow: ellipsis; 17 | overflow-x: hidden; 18 | } 19 | head > *{ display: none } 20 | head > title{ 21 | display: contents; 22 | max-width: 50vw; 23 | white-space: nowrap; 24 | } 25 | } -------------------------------------------------------------------------------- /chrome/shrinking_pinned_tabs.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/shrinking_pinned_tabs.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 | /* Makes pinned tab width shrink dynamically, similar to unpinned tab width. */ 5 | 6 | #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[pinned] { 7 | flex-grow: 10; 8 | max-width: 40px; 9 | } 10 | 11 | :root[uidensity="compact"] #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[pinned] { 12 | max-width: 32px 13 | } 14 | 15 | #tabbrowser-arrowscrollbox .tab-content[pinned] { 16 | padding: 0px !important; 17 | justify-content: center; 18 | } 19 | 20 | .tab-label-container[pinned] { 21 | display: none; 22 | } 23 | 24 | /* Fixes flicker glitch. */ 25 | scrollbox[part][orient="horizontal"] { 26 | padding-inline: unset !important; 27 | } 28 | 29 | -------------------------------------------------------------------------------- /chrome/status_inside_menubar.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/status_inside_menubar.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 | /************** 5 | IMPORTANT WARNING 6 | Using this style can lead to long tab switch times (and probably other problems). Everything may be fine when Firefox starts but situation gets gradually worse, although pretty slowly. 7 | Relevant information: https://bugzilla.mozilla.org/show_bug.cgi?id=1496065 8 | As a workaround, the -moz-element background image is removed somewhat often which seems work at first glance. But there might still be some related issues on really long sessions. Just be aware. 9 | **************/ 10 | 11 | #menubar-items + spacer::after{ 12 | z-index: 2; 13 | content: ""; 14 | display: flex; 15 | width: 100%; 16 | height: 100%; 17 | pointer-events:none; 18 | background-position: left -3px; 19 | background-repeat: no-repeat; 20 | background-image: -moz-element(#statuspanel); 21 | grid-area: 1 / 1; 22 | } 23 | 24 | #toolbar-menubar:hover #menubar-items + spacer::after{ 25 | background-image: none !important 26 | } 27 | 28 | #statuspanel-label{ 29 | height:3em; 30 | min-width: 1000px; 31 | background: transparent !important; 32 | border: none !important; 33 | font-size: 1.15em; 34 | color: inherit !important; 35 | margin-right: 0px !important; 36 | } 37 | 38 | #statuspanel{ 39 | color: var(--lwt-text-color); 40 | z-index: -1; 41 | max-width: 100% !important; 42 | padding-top: 0 !important; 43 | } 44 | 45 | /* This creates opaque layer to be shown in front of "hidden" real statuspanel */ 46 | .browserStack{ 47 | background-color: var(--tabpanel-background-color); 48 | } -------------------------------------------------------------------------------- /chrome/tab_animated_active_border.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tab_animated_active_border.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 | /* Creates a colorful animated border around active tab */ 5 | 6 | @keyframes filter{from{ filter: hue-rotate(0deg) } to { filter: hue-rotate(360deg) }} 7 | 8 | .tabbrowser-tab[selected] > .tab-stack::before{ 9 | grid-area: 1/1; 10 | content: ""; 11 | display: inherit; 12 | margin-block: var(--tab-block-margin); 13 | border-radius: var(--tab-border-radius); 14 | z-index: 0; 15 | background-image: conic-gradient( 16 | hsl(0 100% 70%), 17 | hsl(60 100% 45%) 70deg, 18 | hsl(120 100% 55%) 105deg, 19 | hsl(160 100% 60%) 160deg, 20 | hsl(200 100% 60%) 200deg, 21 | hsl(240 100% 65%) 255deg, 22 | hsl(300 100% 60%) 290deg, 23 | hsl(360 100% 70%) 360deg); 24 | mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KICA8cmVjdCB4PSIwIiB5PSIwIiByeD0iNCIgc3Ryb2tlPSJyZWQiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHN0cm9rZS13aWR0aD0iMiIgZmlsbD0ibm9uZSIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIi8+DQo8L3N2Zz4"); 25 | background-size: cover; 26 | background-position: center; 27 | animation: filter steps(30) 2s infinite; 28 | 29 | } 30 | .tab-background[selected]{ 31 | border: 1px solid transparent !important; 32 | outline: none !important; 33 | background-clip: padding-box !important; 34 | } -------------------------------------------------------------------------------- /chrome/tab_close_button_always_on_hover.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tab_close_button_always_on_hover.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 | /* Always show tab close button on hover and never otherwise */ 5 | .tabbrowser-tab .tab-close-button{ 6 | display:none; 7 | } 8 | .tabbrowser-tab:not([pinned]):hover .tab-close-button{ 9 | display: flex !important; 10 | align-items: center; 11 | } -------------------------------------------------------------------------------- /chrome/tab_closing_animation.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tab_closing_animation.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 | /* This style simply makes the tab stay visible while it is being closed as well as makes the transition a bit slower */ 5 | 6 | .tabbrowser-tab:not([pinned],[fadein]){ 7 | transition-duration: 240ms, 240ms !important; 8 | transition-timing-function: ease-out, ease-out !important; 9 | visibility: visible !important; 10 | } 11 | .tab-content:not([fadein],[pinned]) 12 | .tab-icon-pending:not([fadein]), 13 | .tab-icon-image:not([fadein]), 14 | .tab-label:not([fadein]){ 15 | visibility: visible !important; 16 | } 17 | .tab-label:not([fadein]){ 18 | display: flex !important; 19 | } -------------------------------------------------------------------------------- /chrome/tab_count_in_alltabs_button.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tab_count_in_alltabs_button.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 | /* Replace the icon in alltabs-button with a counter showing number of opened (visible) tabs. 5 | Note that you can make alltabs button always show up by setting browser.tabs.tabmanager.enabled to true */ 6 | 7 | #TabsToolbar-customization-target{ 8 | counter-reset: tab-counter; 9 | } 10 | .tabbrowser-tab:not([hidden]){ 11 | counter-increment: tab-counter; 12 | } 13 | #alltabs-button >.toolbarbutton-badge-stack > .toolbarbutton-icon{ 14 | opacity: 0; 15 | } 16 | #alltabs-button >.toolbarbutton-badge-stack::before{ 17 | content: counter(tab-counter); 18 | display: flex; 19 | grid-area: 1/1; 20 | justify-content: center; 21 | color: var(--toolbarbutton-icon-fill); 22 | border-bottom: 1px solid; 23 | contain: inline-size; 24 | } 25 | 26 | -------------------------------------------------------------------------------- /chrome/tab_effect_scale_onclick.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tab_effect_scale_onclick.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 | .tab-stack{ transition: transform 20ms linear } 5 | .tabbrowser-tab:active .tab-stack{ 6 | transform: scale(0.9); 7 | } -------------------------------------------------------------------------------- /chrome/tab_line_loading_indicator.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tab_line_loading_indicator.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 | /* Hide the normal loading indicator (just show tab-icon instead) and make the top tab-line bounce left-to-right */ 5 | 6 | @keyframes tab-loading-line-anim{from{background-position-x: left}to{background-position-x: right}} 7 | .tabbrowser-tab[busy] > .tab-stack > .tab-background::before, 8 | .tab-background[selected]::before{ 9 | content: ""; 10 | display: flex; 11 | height: 2px; 12 | background-color:transparent; 13 | background-repeat: no-repeat; 14 | background-size: 100%; 15 | transition: background-size 80ms linear; 16 | } 17 | 18 | .tabbrowser-tab[busy] > .tab-stack > .tab-background::before{ 19 | background-size: 10%; 20 | background-image: linear-gradient(currentColor,currentColor); 21 | opacity: 0.7; 22 | animation: tab-loading-line-anim 400ms alternate infinite ease-in-out; 23 | } 24 | 25 | .tab-throbber{ display: none } 26 | .tab-icon-image[src]{ display: block } -------------------------------------------------------------------------------- /chrome/tab_loading_progress_bar.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tab_loading_progress_bar.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 | /* This style creates a fake loading progress bar to the bottom of a tab as a replacement for normal loading throbber */ 5 | 6 | @keyframes tab-loading-line-anim{ from{ background-size: 0% } to { background-size: 20% } } 7 | .tab-background::after{ 8 | background-size: 90%; 9 | } 10 | .tabbrowser-tab:is([busy],[bursting]) > .tab-stack > .tab-background::after{ 11 | content: ""; 12 | display: flex; 13 | height: 2px; 14 | background-color:transparent; 15 | background-repeat: no-repeat; 16 | background-image: linear-gradient(currentColor,currentColor); 17 | transition: background-size 80ms ease-out; 18 | } 19 | .tabbrowser-tab[busy]:not([progress],[bursting]) > .tab-stack > .tab-background::after{ 20 | animation: tab-loading-line-anim 80ms ease; 21 | background-size: 20%; 22 | opacity: 0.5; 23 | } 24 | .tabbrowser-tab[busy][progress] > .tab-stack > .tab-background::after{ 25 | transition-duration: 2000ms; 26 | } 27 | .tabbrowser-tab[bursting] > .tab-stack > .tab-background::after{ 28 | transition: background-size 80ms ease-out, opacity 80ms linear; 29 | background-size: 100%; 30 | opacity: 0; 31 | } 32 | .tab-throbber{ display: none !important; } 33 | .tab-icon-image[src]{ display: block !important; } 34 | -------------------------------------------------------------------------------- /chrome/tab_loading_progress_throbber.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tab_loading_progress_throbber.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 | /* Create a circular throbber inside tabs replacing the default one */ 5 | /* Doesn't really measure loading progress but sort of looks like it */ 6 | 7 | #tabbrowser-tabs{ --tab-loader-size: 16px; } 8 | .tab-throbber, 9 | .tabbrowser-tab[bursting] .tab-icon-image{ 10 | display: none !important; 11 | } 12 | .tab-icon-stack::before{ 13 | display: flex; 14 | grid-area: 1/1; 15 | content: ""; 16 | width:var(--tab-loader-size); 17 | height:var(--tab-loader-size); 18 | margin-right:6px; 19 | background: center no-repeat url('data:image/svg+xml,') !important; 20 | clip-path: polygon(50% 50%,50% 0%,50% 0%,50% 0%, 50% 0%,50% 0%, 50% 0%); 21 | transition: clip-path 0.2s ease-out, opacity 0.3s linear 0.1s; 22 | } 23 | 24 | .tab-icon-stack[pinned]::before{ margin-right: 0px } 25 | @keyframes loadprogress{ 26 | from{ clip-path: polygon(50% 50%,50% 0%,100% 0%,100% 50%, 100% 50%,100% 50%, 100% 50%); } 27 | 25%{ clip-path: polygon(50% 50%,50% 0%,100% 0%,100% 100%, 100% 100%,100% 100%, 100% 100%); } 28 | 50%{ clip-path: polygon(50% 50%,50% 0%,100% 0%,100% 100%, 0% 100%,0% 100%,0% 100%); } 29 | 75%{ clip-path: polygon(50% 50%,50% 0%,100% 0%,100% 100%, 0% 100%,0% 0%,0% 0%); } 30 | to{ clip-path: polygon(50% 50%,50% 0%,100% 0%,100% 100%, 0% 100%, 0% 0%, 50% 0%); } 31 | } 32 | @keyframes rotation{ 33 | from{ transform: rotateZ(0deg) } 34 | to{ transform: rotateZ(360deg) } 35 | } 36 | .tabbrowser-tab:not([bursting]) .tab-icon-stack:not([busy])::before{ visibility: collapse; width: 0 } 37 | .tab-icon-stack:not([busy])::before{ opacity: 0 } 38 | .tabbrowser-tab:not([progress]) .tab-icon-stack[busy]::before{ 39 | clip-path: polygon(50% 50%,50% 0%,100% 0%,100% 50%, 100% 50%,100% 50%, 100% 50%); 40 | } 41 | .tabbrowser-tab[progress] .tab-icon-stack[busy]::before{ 42 | animation: loadprogress 2s linear, rotation 0.7s linear 2s infinite !important; 43 | animation-fill-mode: forwards !important; 44 | } 45 | .tabbrowser-tab[bursting] .tab-icon-stack::before{ 46 | clip-path: polygon(50% 50%,50% 0%,100% 0%,100% 100%, 0% 100%,0% 0%, 50% 0%) !important; 47 | } 48 | #tabbrowser-tabs[schedulepressure] .tab-icon-stack::before{ display:none !important; } -------------------------------------------------------------------------------- /chrome/tab_separator_lines.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tab_separator_lines.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 | /* Bring back tab separator lines that were removed in Proton */ 5 | .tabbrowser-tab{ 6 | background-image: linear-gradient( 7 | transparent 20%, 8 | color-mix(in srgb, currentColor 20%, transparent) 20%, 9 | color-mix(in srgb, currentColor 20%, transparent) 80%, 10 | transparent 80% 11 | ); 12 | background-size: 1px 100%; 13 | background-repeat: no-repeat; 14 | } 15 | .tab-group-label-container{ 16 | padding-inline-start: 2px; 17 | } 18 | 19 | #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab:hover + .tabbrowser-tab:not([first-visible-unpinned-tab]), 20 | .tabbrowser-tab:is(:hover,:first-child,[selected],[multiselected]), 21 | .tabbrowser-tab:is([selected],[multiselected]) + .tabbrowser-tab[hidden] + .tabbrowser-tab, 22 | #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab:is([multiselected],[selected]) + .tabbrowser-tab, 23 | tab-group[collapsed] + .tabbrowser-tab, 24 | tab-group > .tabbrowser-tab:first-of-type, 25 | tab-group:has(> .tabbrowser-tab:last-child:is(:hover,[selected],[multiselected])) + .tabbrowser-tab{ 26 | background-image: none; 27 | } -------------------------------------------------------------------------------- /chrome/tabs_fill_available_width.css: -------------------------------------------------------------------------------- 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"]){ max-width: 100vw !important } -------------------------------------------------------------------------------- /chrome/tabs_on_bottom.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.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 | /* IMPORTANT 5 | Get window_control_placeholder_support.css 6 | Window controls will be all wrong without it. 7 | Additionally on Linux, you may need to get: 8 | linux_gtk_window_control_patch.css 9 | 10 | Use tabs_on_bottom_menubar_on_top_patch.css if you 11 | have menubar permanently enabled and want it on top 12 | */ 13 | 14 | #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, 15 | #TabsToolbar > .titlebar-buttonbox-container{ 16 | position: fixed; 17 | display: block; 18 | top: 0px; 19 | right:0; 20 | height: 40px; 21 | } 22 | @media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"), 23 | (-moz-gtk-csd-reversed-placement), 24 | (-moz-platform: macos){ 25 | .titlebar-buttonbox-container{ left:0; right: unset !important; } 26 | } 27 | 28 | :root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container{ height: 32px } 29 | 30 | #toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 } 31 | 32 | .titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; } 33 | 34 | #titlebar{ 35 | order: 2; 36 | -moz-appearance: none !important; 37 | --tabs-navbar-shadow-size: 0px; 38 | --uc-menubar-vertical-overlap: 19px; /* for hide_tabs_with_one_tab_w_window_controls.css compatibility */ 39 | } 40 | /* Re-order window and tab notification boxes */ 41 | #navigator-toolbox > div{ display: contents } 42 | .global-notificationbox, 43 | #tab-notification-deck{ 44 | order: 2; 45 | } 46 | 47 | #TabsToolbar .titlebar-spacer{ display: none; } 48 | /* Also hide the toolbox bottom border which isn't at bottom with this setup */ 49 | #navigator-toolbox::after{ display: none !important; } 50 | 51 | @media (-moz-gtk-csd-close-button){ 52 | .titlebar-button{ 53 | flex-direction: column; 54 | } 55 | } 56 | 57 | /* At Activated Menubar */ 58 | :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-buttonbox-container { 59 | display: block !important; 60 | } 61 | #toolbar-menubar:not([autohide="true"]) > .titlebar-buttonbox-container { 62 | visibility: hidden; 63 | } 64 | 65 | /* These exist only for compatibility with autohide-tabstoolbar.css */ 66 | toolbox#navigator-toolbox > toolbar#nav-bar.browser-toolbar{ animation: none; } 67 | #navigator-toolbox:hover #TabsToolbar{ animation: slidein ease-out 48ms 1 } 68 | #TabsToolbar > .titlebar-buttonbox-container{ visibility: visible } 69 | :root:not([lwtheme]) #navigator-toolbox{ background-color: -moz-dialog } 70 | 71 | /* Uncomment the following if you want bookmarks toolbar to be below tabs */ 72 | /* 73 | #PersonalToolbar{ 74 | order: 2; 75 | } 76 | */ 77 | -------------------------------------------------------------------------------- /chrome/tabs_on_bottom_menubar_on_top_patch.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patch.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 | /* Menubar on top patch - use with tabs_on_bottom.css */ 5 | /* Only really useful if menubar is ALWAYS visible */ 6 | 7 | :root:not([sizemode="fullscreen"]){ --uc-window-control-width: 0px !important } 8 | 9 | :root{ 10 | /* height if native titlebar is enabled, assumes empty menubar */ 11 | --uc-menubar-height: 20px; 12 | } 13 | :root[tabsintitlebar]{ 14 | /* height when native titlebar is disabled, more roomy so can fit buttons etc. */ 15 | --uc-menubar-height: 29px; 16 | } 17 | :root:is([sizemode="fullscreen"],[chromehidden~="menubar"]){ 18 | --uc-menubar-height: 0px; 19 | } 20 | /* Since menubar is statically at top, remove fake drag-space that might be set by window_control_placeholder_support.css */ 21 | :root:not([sizemode="fullscreen"]) #nav-bar{ border-inline-width: 0 } 22 | 23 | #navigator-toolbox{ 24 | -moz-window-dragging: drag; 25 | padding-top: var(--uc-menubar-height) !important; 26 | } 27 | 28 | /* Remove window dragging from notification boxes */ 29 | #tab-notification-deck, 30 | .global-notificationbox{ 31 | -moz-window-dragging: no-drag; 32 | } 33 | 34 | :root:not([chromehidden~="menubar"]) #toolbar-menubar{ 35 | position: fixed; 36 | display: flex; 37 | top: 0px; 38 | height: var(--uc-menubar-height); 39 | width: 100%; 40 | overflow: hidden; 41 | } 42 | 43 | #toolbar-menubar > .titlebar-buttonbox-container{ height: 100%; order: 100; } 44 | 45 | #toolbar-menubar > [flex]{ flex-grow: 100; } 46 | #toolbar-menubar > spacer[flex]{ 47 | order: 99; 48 | flex-grow: 1; 49 | min-width: var(--uc-window-drag-space-post,20px); 50 | } 51 | 52 | #toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px } 53 | 54 | :root:not([sizemode="fullscreen"]) #toolbar-menubar.browser-toolbar > .titlebar-buttonbox-container{ 55 | visibility: visible; 56 | } 57 | :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #TabsToolbar#TabsToolbar#TabsToolbar > .titlebar-buttonbox-container { 58 | display: none !important; 59 | } 60 | -------------------------------------------------------------------------------- /chrome/tabs_on_bottom_v2.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_v2.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 | /* This reorders toolbar to place tabs below other toolbars. Requires Firefox 133+ */ 5 | 6 | @media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"), 7 | -moz-pref("userchrome.force-window-controls-on-left.enabled"){ 8 | #nav-bar > .titlebar-buttonbox-container{ 9 | order: -1 !important; 10 | > .titlebar-buttonbox{ 11 | flex-direction: row-reverse; 12 | } 13 | } 14 | } 15 | @media not (-moz-bool-pref: "sidebar.verticalTabs"), 16 | not -moz-pref("sidebar.verticalTabs"){ 17 | .global-notificationbox, 18 | #tab-notification-deck, 19 | #TabsToolbar{ 20 | order: 1; 21 | } 22 | #TabsToolbar > :is(.titlebar-spacer,.titlebar-buttonbox-container){ 23 | display: none; 24 | } 25 | :root[sizemode="fullscreen"] #nav-bar > .titlebar-buttonbox-container{ 26 | display: flex !important; 27 | } 28 | :root:is([tabsintitlebar],[customtitlebar]) #toolbar-menubar:not([autohide="false"]) ~ #nav-bar{ 29 | > .titlebar-buttonbox-container{ 30 | display: flex !important; 31 | } 32 | :root[sizemode="normal"] & { 33 | > .titlebar-spacer{ 34 | display: flex !important; 35 | } 36 | } 37 | :root[sizemode="maximized"] & { 38 | > .titlebar-spacer[type="post-tabs"]{ 39 | display: flex !important; 40 | } 41 | @media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"), 42 | -moz-pref("userchrome.force-window-controls-on-left.enabled"), 43 | (-moz-gtk-csd-reversed-placement), 44 | (-moz-platform: macos){ 45 | > .titlebar-spacer[type="post-tabs"]{ 46 | display: none !important; 47 | } 48 | > .titlebar-spacer[type="pre-tabs"]{ 49 | display: flex !important; 50 | } 51 | } 52 | } 53 | } 54 | } -------------------------------------------------------------------------------- /chrome/textual_context_navigation.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/textual_context_navigation.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 | /* Makes constext navigation buttons appears as normal textual menuitems */ 5 | 6 | #context-navigation{ flex-direction: column !important; } 7 | #context-navigation > menuitem > :is(.menu-iconic-left,.menu-icon){ display: none } 8 | 9 | #context-navigation > menuitem{ 10 | padding: var(--menuitem-padding,0.5em 1em) !important; 11 | justify-content: start !important; 12 | width: auto !important; 13 | } 14 | #context-navigation > menuitem[_moz-menuactive="true"]:not([disabled]){ background-color: -moz-menuhover !important; } 15 | #context-navigation > menuitem::before{ content: attr(aria-label) } 16 | -------------------------------------------------------------------------------- /chrome/textual_searchbar_one-offs.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/textual_searchbar_one-offs.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 | /* Makes the one-off search buttons in the searchbar popup show vertically with a label */ 5 | 6 | #PopupSearchAutoComplete .search-panel-one-offs{ 7 | display: flex !important; 8 | flex-direction: column; 9 | } 10 | 11 | #PopupSearchAutoComplete .search-panel-one-offs-container{ 12 | flex-direction: column !important; 13 | } 14 | 15 | #PopupSearchAutoComplete .searchbar-engine-one-off-item{ 16 | display: flex !important; 17 | margin-inline: 8px !important; 18 | align-items: center; 19 | align-self: unset !important; 20 | } 21 | 22 | #PopupSearchAutoComplete .searchbar-engine-one-off-item > .button-box{ max-width: 30px; } 23 | 24 | #PopupSearchAutoComplete .search-panel-one-offs{ max-width: unset !important; } 25 | 26 | #PopupSearchAutoComplete .searchbar-engine-one-off-item::after{ 27 | content: attr(tooltiptext); 28 | display: inline-flex; 29 | flex-grow: 1; 30 | } -------------------------------------------------------------------------------- /chrome/toggle_tabs_toolbar_with_alt.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/toggle_tabs_toolbar_with_alt.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 | /* Show tabs toolbar with Alt-key. Menubar must be disabled for this to work. 5 | * To show window controls and/or menubar hit Alt again while cursor is over tabs toolbar */ 6 | 7 | :where(#titlebar:not(:hover) > #toolbar-menubar[autohide="true"][inactive]) + #TabsToolbar { 8 | visibility: collapse; 9 | } 10 | #toolbar-menubar[autohide]:not([inactive]), 11 | #toolbar-menubar[autohide="true"]:not([inactive],:hover) + #TabsToolbar > .titlebar-buttonbox-container{ 12 | visibility: collapse !important; 13 | } 14 | #menubar-items:has([_moz-menuactive][open="true"]), 15 | #toolbar-menubar[autohide]:hover > #menubar-items, 16 | :root:not([sizemode="fullscreen"]) #titlebar:hover #toolbar-menubar[autohide][inactive] > #menubar-items{ 17 | visibility: visible; 18 | position: absolute; 19 | z-index: 1; 20 | height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin)); 21 | background-color: -moz-dialog; 22 | align-items: stretch; 23 | } 24 | #main-window[sizemode="fullscreen"] #TabsToolbar{ 25 | visibility: visible !important; 26 | } 27 | #main-window[sizemode="fullscreen"] #toolbar-menubar > #menubar-items{ 28 | visibility: collapse; 29 | } 30 | #main-menubar{ height: 100%; } 31 | -------------------------------------------------------------------------------- /chrome/toolbarbuttons_icon+label.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/toolbarbuttons_icon+label.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 | /* Shows both icon and label for toolbarbuttons */ 5 | 6 | toolbar .toolbarbutton-1[label]{ 7 | flex-direction: column; 8 | align-items: center !important; 9 | } 10 | 11 | toolbar .toolbarbutton-1[label]:not([disabled]):hover{ background-color: var(--toolbarbutton-hover-background) !important; } 12 | 13 | toolbar .toolbarbutton-1[label] > .toolbarbutton-icon, 14 | toolbar .toolbarbutton-1[label] > .toolbarbutton-badge-stack{ 15 | padding: var(--toolbarbutton-inner-padding) !important; 16 | padding-bottom: 0px !important; 17 | height: calc(var(--toolbarbutton-inner-padding) + 16px) !important; 18 | border: none !important; 19 | background-color: transparent !important; 20 | box-shadow: none !important; 21 | } 22 | 23 | toolbar .toolbarbutton-1[label] > .toolbarbutton-text { 24 | display: flex !important; 25 | min-height: 16px !important; 26 | padding-top: 0px !important; 27 | background-color: transparent !important; 28 | overflow: hidden; 29 | width: 11ch; 30 | } 31 | toolbar .toolbarbutton-1[label] > .toolbarbutton-text::before{ 32 | margin-inline: auto; 33 | } 34 | :root:not([uidensity="compact"]) toolbar .toolbarbutton-1[label] > .toolbarbutton-text{ padding: 2px !important; } 35 | -------------------------------------------------------------------------------- /chrome/toolbarbuttons_in_tabs_periphery.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/toolbarbuttons_in_tabs_periphery.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 | /* 5 | This style allows you to place normal buttons to tabs toolbar such that they "stick to" the last tab similar to how newtab-button does. 6 | 7 | By default ALL buttons after the tabs strip now stick to the last tab. 8 | To change this, use customize mode to move one flexible space to the tabs toolbar. 9 | Any button to the right of the flexible space is pushed to the right edge. 10 | */ 11 | 12 | #TabsToolbar > .toolbar-items{ 13 | container-name: uc-tabs-toolbar; 14 | container-type: inline-size; 15 | } 16 | #TabsToolbar-customization-target{ 17 | max-width: 100cqw; 18 | } 19 | #tabbrowser-tabs{ 20 | --uc-scrollbox-containment: none; 21 | max-width: max-content; 22 | overflow: hidden; 23 | margin-inline-end: -2px; 24 | } 25 | .tabbrowser-tab:not([pinned]){ 26 | width: 225px; 27 | } 28 | /* This margin is added to create "buffer-space" 29 | Without it, opening and closing tabs will briefly 30 | make tabs overflow which looks jarring. 31 | The -2px margin on #tabbrowser-tabs is related to this as well so tabs-newtab-button isn't separated too far. */ 32 | #tabbrowser-arrowscrollbox-periphery{ 33 | margin-inline-start: 2px; 34 | } 35 | #tabs-newtab-button{ 36 | transform: translateX(-2px); 37 | } 38 | .closing-tabs-spacer{ 39 | display: none !important; 40 | } 41 | @-moz-document url("chrome://browser/content/browser.xhtml"){ 42 | scrollbox[orient="horizontal"], 43 | .scrollbox-clip[orient="horizontal"]{ 44 | contain: var(--uc-scrollbox-containment,initial) !important; 45 | } 46 | scrollbox[orient="horizontal"] > slot{ 47 | display: contents !important; 48 | } 49 | } 50 | #tabbrowser-tabs ~ toolbarspring{ 51 | flex-grow: 0 !important; 52 | min-width: 0px !important; 53 | margin-inline: auto; 54 | } 55 | -------------------------------------------------------------------------------- /chrome/urlbar_centered_text.css: -------------------------------------------------------------------------------- 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]) #urlbar-input, /* ID for Firefox 70 */ 5 | #urlbar:not([focused]) .urlbar-input{ text-align: center !important; } 6 | -------------------------------------------------------------------------------- /chrome/urlbar_connection_type_background_colors.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/urlbar_connection_type_background_colors.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 | /* Adds a colored overlay to urlbar based on the type of the connection */ 5 | 6 | #identity-box::before{ 7 | position: absolute; 8 | display: block; 9 | content: ""; 10 | width: 100%; 11 | height: var(--urlbar-height); 12 | left: 0; 13 | top: 0; 14 | pointer-events: none; 15 | } 16 | :root[customizing] #identity-box::before, 17 | #urlbar[focused] #identity-box::before{ display: none } 18 | 19 | /* https */ 20 | #identity-box.verifiedDomain::before{ background-color: rgba(50,255,50,0.2) } 21 | 22 | /* http: and potentially some other insecure connections like ftp: */ 23 | #identity-box.certErrorPage::before, 24 | #identity-box.notSecure::before{ background-color: rgba(255,50,50,0.3) } 25 | 26 | /* Mixed content including neterror */ 27 | #identity-box.unknownIdentity::before{ background-color: rgba(255,255,50,0.2) } 28 | 29 | /* Extension pages */ 30 | #identity-box.extensionPage::before{ background-color: rgba(150,50,250,0.2) } 31 | 32 | /* Internal about: and chrome:// urls (includes reader-view) */ 33 | #identity-box.chromeUI::before{ background-color: rgba(50,150,250,0.2) } -------------------------------------------------------------------------------- /chrome/urlbar_connection_type_text_colors.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/urlbar_connection_type_text_colors.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 | /* Modifies the urlbar text color based on connection type - "normal" https: won't be mdofied */ 5 | 6 | /* Mixed content including neterror */ 7 | #identity-box[pageproxystate="valid"].unknownIdentity ~ .urlbar-input-box{ color: orange } 8 | 9 | /* http: and potentially some other insecure connections like ftp: */ 10 | #identity-box[pageproxystate="valid"].notSecure ~ .urlbar-input-box{ color: orangered } 11 | 12 | /* Extension pages */ 13 | #identity-box[pageproxystate="valid"].extensionPage ~ .urlbar-input-box{ color: violet } 14 | 15 | /* Internal about: and chrome:// urls (includes reader-view) */ 16 | #identity-box[pageproxystate="valid"].localResource ~ .urlbar-input-box, 17 | #identity-box[pageproxystate="valid"].chromeUI ~ .urlbar-input-box{ color: dodgerblue } -------------------------------------------------------------------------------- /chrome/urlbar_container_color_border.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/urlbar_container_color_border.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 | /* Draws a border around urlbar using the color of the current container. */ 5 | 6 | .urlbar-input-container{ 7 | border-width: 0 !important; 8 | padding: 2px !important; 9 | } 10 | 11 | #userContext-icons::before{ 12 | box-sizing: border-box; 13 | display: block; 14 | position: absolute; 15 | content: ""; 16 | left: 0; 17 | top: 0; 18 | width: 100%; 19 | height: 100%; 20 | outline: 1px solid var(--identity-icon-color); 21 | border-radius: var(--toolbarbutton-border-radius); 22 | outline-offset: -1px; 23 | pointer-events: none; 24 | } 25 | 26 | #urlbar[focused] #userContext-icons::before{ 27 | outline-width: 2px; 28 | outline-offset: -2px 29 | } 30 | 31 | /* These might potentially cause some issues, but are needed to make the border extend the border to the full popup when urlbar popup is open */ 32 | #urlbar[open] > .urlbar-input-container{ 33 | position: static !important; 34 | padding: calc(2px + var(--urlbar-margin-inline,5px)) !important; 35 | } 36 | #urlbar[open] > #urlbar-background{ z-index: -1 !important; } 37 | 38 | /* OPTIONAL FEATURES */ 39 | 40 | /* Hide container label in urlbar */ 41 | /* #userContext-label{ display: none } */ 42 | 43 | /* Hide container icon in urlbar */ 44 | /* #userContext-indicator{ display: none } */ 45 | 46 | /* Hide the container line above tabs */ 47 | /* .tab-context-line{ display: none } */ -------------------------------------------------------------------------------- /chrome/urlbar_info_icons_on_hover.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/urlbar_info_icons_on_hover.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 | /* Hides info icons (except remote control icon) on the left side of urlbar and shows them when urlbar is hovered. Also hides container name and shows it on hover*/ 5 | 6 | #urlbar-search-button, 7 | #tracking-protection-icon-container, 8 | #identity-box, 9 | #identity-box.extensionPage #identity-icon-label{ 10 | max-width: 0px; 11 | transition: max-width 100ms linear !important; 12 | overflow: hidden; 13 | } 14 | 15 | #identity-box.extensionPage{ max-width: 32px } 16 | 17 | #urlbar:hover .urlbar-input-container > box, 18 | #urlbar:hover #identity-box.extensionPage #identity-icon-label{ 19 | max-width: 300px; 20 | } 21 | #urlbar:not(:hover) #userContext-label{ display: none } 22 | -------------------------------------------------------------------------------- /chrome/urlbar_popup_full_width.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/urlbar_popup_full_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 | /* Make urlbar popup appear full size like it did before urlbar re-design */ 5 | 6 | .urlbarView-row-inner{ 7 | /* This sets how far the dropdown-items are from window edge */ 8 | padding-inline-start: 6px !important; 9 | } 10 | 11 | .urlbarView{ 12 | position: fixed !important; 13 | top: inherit; 14 | left: 0 !important; 15 | margin: var(--urlbar-container-height) 0 0 0 !important; 16 | width: 100vw !important; 17 | border-width: 1px 0; 18 | background-color: var(--toolbar-field-focus-background-color, inherit); 19 | } 20 | -------------------------------------------------------------------------------- /chrome/urlbar_results_in_two_rows.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/urlbar_results_in_two_rows.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 | /* Show urlbar results on two lines */ 5 | 6 | .urlbarView-row-inner{ flex-wrap: wrap !important; } 7 | 8 | .urlbarView-no-wrap { 9 | max-width: 100% !important; 10 | flex-basis: 100%; 11 | } 12 | .urlbarView-row[has-url]:not([type="switchtab"]) .urlbarView-title-separator{ display: none } 13 | 14 | .urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-url:-moz-locale-dir(ltr) { 15 | margin-left: var(--urlbarView-second-line-indent); 16 | } 17 | .urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-url:-moz-locale-dir(rtl) { 18 | margin-right: var(--urlbarView-second-line-indent); 19 | } -------------------------------------------------------------------------------- /chrome/urlbar_visible_on_active_tab_click.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/urlbar_visible_on_active_tab_click.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 | /* NOTE This only works if tabs are on top */ 5 | .urlbar-input-box::before{ 6 | content:""; 7 | display: block; 8 | position: fixed; 9 | top:0; 10 | left:0; 11 | width:100vw; 12 | height:32px; 13 | } 14 | .tabbrowser-tab, 15 | #TabsToolbar toolbarbutton{ 16 | position: relative; 17 | z-index: 2 18 | } 19 | #navigator-toolbox:not(:focus-within) .tabbrowser-tab[visuallyselected]{ z-index: 0 !important; } 20 | 21 | :root:not([customizing]) #urlbar{ opacity: 0; transition: opacity 200ms ease-in-out } 22 | :root:not([customizing]) #urlbar:focus-within{ opacity: 1 } 23 | 24 | #toolbar-menubar{ position: relative; z-index:3 } -------------------------------------------------------------------------------- /chrome/vertical_bookmarks_toolbar.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/vertical_bookmarks_toolbar.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 | /* Makes bookmarks toolbar appear vertically at the left side of the window */ 5 | 6 | @-moz-document url(chrome://browser/content/browser.xhtml){ 7 | 8 | :root:not([inDOMFullscreen]){ 9 | --uc-vertical-toolbar-width: 60px; 10 | } 11 | #navigator-toolbox{ position: relative } 12 | #PersonalToolbar{ 13 | position: absolute; 14 | display: flex; 15 | flex-direction: column; 16 | top: 100%; 17 | left: 0; 18 | width: var(--uc-vertical-toolbar-width,0); 19 | min-width: unset !important; 20 | /* These create a empty area to the bottom of the toolbar, which is to mask a fact that we don't know exactly how high the toolbar should be */ 21 | height: 100vh; 22 | max-height: 100vh !important; 23 | padding-bottom: 120px !important; 24 | padding-inline: 2px !important; 25 | 26 | } 27 | #PersonalToolbar .toolbarbutton-1{ 28 | --toolbarbutton-inner-padding: 10px !important; 29 | } 30 | #PersonalToolbar #PlacesChevron{ 31 | display: none; 32 | } 33 | #PersonalToolbar > #personal-bookmarks{ 34 | overflow-y: auto; 35 | scrollbar-width: none; 36 | height: 100vh; 37 | } 38 | 39 | #PlacesToolbar, 40 | #PlacesToolbarDropIndicatorHolder{ 41 | flex-direction: column; 42 | } 43 | 44 | #PersonalToolbar #PlacesToolbarItems{ 45 | display: flex !important; 46 | flex-direction: column; 47 | overflow-y: auto; 48 | scrollbar-width: none; 49 | } 50 | #PersonalToolbar > toolbaritem{ 51 | justify-content: center; 52 | } 53 | #PersonalToolbar #PlacesToolbarItems > toolbarseparator{ 54 | height: 7px; 55 | background-color: currentColor; 56 | background-clip: padding-box; 57 | border-block: 3px solid transparent !important; 58 | } 59 | 60 | #PersonalToolbar #PlacesToolbarItems > .bookmark-item{ 61 | padding-block: 4px !important; 62 | margin-inline: 0 !important; 63 | } 64 | 65 | #browser, 66 | #browser-bottombox, 67 | #main-window > body::after, /* This selector is for compatibility with tabs_below_content.css */ 68 | #customization-container{ 69 | margin-left: var(--uc-vertical-toolbar-width,0); 70 | } 71 | :root:is([chromehidden~="toolbar"],[sizemode="fullscreen"]) > body > #browser, 72 | :root:is([chromehidden~="toolbar"],[sizemode="fullscreen"]) > body > #browser-bottombox, 73 | #main-window:is([chromehidden~="toolbar"],[sizemode="fullscreen"]) > body::after, 74 | :root:is([chromehidden~="toolbar"],[sizemode="fullscreen"]) > body > #customization-container{ 75 | margin-left: 0; 76 | } 77 | /* You should probably disable this if you have Firefox < 113 */ 78 | #PersonalToolbar #PlacesToolbarItems{ 79 | display: -webkit-box !important; 80 | -webkit-box-orient: vertical !important; 81 | } 82 | 83 | } 84 | -------------------------------------------------------------------------------- /chrome/vertical_context_navigation.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/vertical_context_navigation.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 | /* This very likely only works properly on Windows10 */ 5 | /* If this won't work correctly can try the v2 file */ 6 | 7 | #contentAreaContextMenu{ 8 | --uc-popup-display: grid; 9 | --uc-pseudo-elem: ""; 10 | --uc-scrollbox-slot: contents; 11 | min-height: 162px; 12 | } 13 | scrollbox[orient="vertical"]{ 14 | display: var(--uc-popup-display,inherit); 15 | grid-template-columns: auto 1fr; 16 | grid-template-rows: 0; 17 | } 18 | scrollbox[orient="vertical"] > slot{ 19 | display: var(--uc-scrollbox-slot,initial) !important; 20 | } 21 | scrollbox[orient="vertical"]::before{ 22 | content: var(--uc-pseudo-elem,none); 23 | grid-area: auto / 2 / auto / 2; 24 | } 25 | 26 | #contentAreaContextMenu menu{ --uc-popup-display: } /* intentionally blank */ 27 | 28 | #context-navigation{ 29 | flex-direction: column !important; 30 | grid-area: 1 / 1 / auto / 1; 31 | min-width: unset !important; 32 | align-items: flex-start; 33 | } 34 | #context-navigation > .menuitem-iconic{ width: unset !important; } 35 | #context-navigation .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon{ 36 | width: auto !important; 37 | } 38 | #context-sep-navigation{ display: none } 39 | #context-navigation ~ * { grid-area: auto / 2 / auto / 2; } -------------------------------------------------------------------------------- /chrome/vertical_context_navigation_v2.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/vertical_context_navigation_v2.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 | /* This very likely only works properly on Windows10 */ 5 | /* This v2 uses transform instead of grid display which might or might not work better */ 6 | 7 | #contentAreaContextMenu{ min-height: 162px } 8 | #context-navigation > menuitem{ max-width: 40px} 9 | 10 | #context-forward{ transform: translate(-40px, 40px) } 11 | #context-reload,#context-stop{ transform: translate(-80px, 80px) } 12 | #context-bookmarkpage{ transform: translate(-120px,120px) } 13 | 14 | #context-navigation:not([hidden])~*{ margin-left: 32px; } 15 | #context-sep-navigation{ display: none } 16 | #context-navigation{ margin-bottom: -34px; } 17 | #context-sep-navigation:not([hidden]) ~ *:not(.menuitem-iconic){ clip-path: polygon(0.8em 0%, 100% 0%,100% 100%,0.8em 100%); } 18 | #context-sep-navigation:not([hidden]) ~ menuseparator{ margin-left: 30px !important; } -------------------------------------------------------------------------------- /chrome/vertical_popup_menubar.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/vertical_popup_menubar.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 | /* Makes menubar-items (File, Edit etc.) appear vertically as popup 5 | * When menubar is enabled, only the first item will be visible and it will use an icon instead of text. 6 | * When menubar is disabled and you hit Alt to show it, then the menubar items will appear in the corner as overlay. 7 | * Does NOT support toolbar buttons/items in menubar when in disabled mode. 8 | */ 9 | 10 | #toolbar-menubar{ 11 | --uc-menubaritem-height: 28px; 12 | --uc-menubaritem-width: 40px; 13 | } 14 | 15 | #main-menubar > menu{visibility: collapse; transition: visibility 0ms linear 0.1s} 16 | #main-menubar:hover > menu, 17 | #toolbar-menubar[autohide="true"]:not([inactive]) > #menubar-items > #main-menubar > menu{visibility: visible} 18 | 19 | :root:not([customizing],[sizemode="fullscreen"]) #menubar-items{ 20 | display: block; 21 | position: fixed; 22 | z-index: 10; 23 | background-color: light-dark(rgb(235, 235, 239), rgb(31, 30, 37)); 24 | inset-inline-start: 0; 25 | } 26 | :root[lwtheme]:not([customizing]) #menubar-items{ 27 | background-color: var(--lwt-accent-color); 28 | } 29 | :root:not([customizing]) #main-menubar{ 30 | flex-direction: column; 31 | } 32 | #main-menubar > menu { padding: 3px } 33 | #main-menubar > menu > menupopup{ 34 | margin: calc(0px - var(--uc-menubaritem-height)) 0 0 var(--uc-menubaritem-width); 35 | } 36 | #toolbar-menubar[autohide="true"][inactive] > #menubar-items{ 37 | max-height: 0px; 38 | overflow: hidden; 39 | } 40 | #toolbar-menubar[autohide="true"]:not([inactive]){ 41 | margin-bottom: calc(0px - var(--tab-min-height) + var(--tabs-navbar-shadow-size)); 42 | } 43 | #toolbar-menubar > .titlebar-buttonbox-container + :is(toolbarbutton,toolbaritem){ 44 | margin-inline-start: var(--uc-menubaritem-width); 45 | } 46 | 47 | :root:not([sizemode="fullscreen"]) #file-menu{ 48 | fill: currentColor; 49 | visibility: visible; 50 | height: var(--uc-menubaritem-height); 51 | width: var(--uc-menubaritem-width); 52 | -moz-context-properties: fill; 53 | padding: 3px !important; 54 | background-repeat: no-repeat; 55 | background-position: center; 56 | } 57 | 58 | #main-menubar:not(:hover) > #file-menu{ background-image: url("chrome://devtools/skin/images/tool-storage.svg"); } 59 | 60 | #file-menu > .menubar-text{ visibility: collapse } 61 | #main-menubar:hover > #file-menu > .menubar-text{ visibility: visible } 62 | 63 | .browser-titlebar, 64 | #titlebar{ 65 | opacity: 1 !important; 66 | will-change: unset !important; 67 | } -------------------------------------------------------------------------------- /chrome/vertical_urlbar_one-off_items.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/vertical_urlbar_one-off_items.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 | /* Makes one-off search buttons in the urlbar popup show vertically to the right of results */ 5 | 6 | #urlbar[open="true"] > .urlbarView{ 7 | display: flex !important; 8 | } 9 | .urlbarView-body-outer{ 10 | width: calc(100% - 2 * (5px + var(--urlbar-container-padding)) - 30px); !important; 11 | } 12 | #urlbar .search-one-offs{ 13 | width: 40px !important; 14 | flex-direction: column; 15 | align-items: stretch !important; 16 | } 17 | .search-panel-one-offs, 18 | .search-panel-one-offs-container{ 19 | flex-direction: column !important; 20 | min-width: unset !important; 21 | align-items: stretch !important; 22 | justify-content: start !important; 23 | } 24 | #urlbar .searchbar-engine-one-off-item{ 25 | min-width: unset !important; 26 | margin-inline: 0 !important; 27 | align-self: unset !important; 28 | } 29 | .search-panel-one-offs .searchbar-engine-one-off-item{ 30 | min-height: 40px !important; 31 | } 32 | .search-panel-one-offs-header{ display: none !important } 33 | -------------------------------------------------------------------------------- /chrome/window_control_fallback_for_custom_windows_theme.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/window_control_fallback_for_custom_windows_theme.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 | /* If one uses custom Windows theme, then Firefox uses high-contrast window control buttons. This style makes Firefox fall back to using normal window control style. */ 5 | 6 | .titlebar-button{ 7 | background-color: transparent !important; 8 | -moz-context-properties: stroke !important; 9 | stroke: currentColor !important; 10 | } 11 | .titlebar-button:hover{ background-color: hsla(0,0%,100%,.32) !important } 12 | .titlebar-close:hover{ background-color: hsl(355,86%,49%) !important } 13 | 14 | .titlebar-close{ list-style-image: url(chrome://browser/skin/window-controls/close.svg) !important } 15 | .titlebar-min{ list-style-image: url(chrome://browser/skin/window-controls/minimize.svg) !important } 16 | .titlebar-max{ list-style-image: url(chrome://browser/skin/window-controls/maximize.svg) !important } 17 | .titlebar-restore{ list-style-image: url(chrome://browser/skin/window-controls/restore.svg) !important } -------------------------------------------------------------------------------- /chrome/window_control_force_linux_system_style.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/window_control_force_linux_system_style.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 | /* This style makes Firefox use your linux system style for window control buttons. Normally those are only used with default system (auto) theme. */ 5 | 6 | .titlebar-button{ 7 | list-style-image: none !important; 8 | appearance: none !important; 9 | } 10 | .titlebar-button > .toolbarbutton-icon{ 11 | appearance: auto !important; 12 | background: none !important; 13 | width: unset !important; 14 | height: unset !important; 15 | } 16 | .titlebar-min > .toolbarbutton-icon{ 17 | -moz-default-appearance: -moz-window-button-minimize !important; 18 | } 19 | .titlebar-max > .toolbarbutton-icon{ 20 | -moz-default-appearance: -moz-window-button-maximize !important; 21 | } 22 | .titlebar-restore > .toolbarbutton-icon{ 23 | -moz-default-appearance: -moz-window-button-restore !important; 24 | } 25 | .titlebar-close > .toolbarbutton-icon{ 26 | -moz-default-appearance: -moz-window-button-close !important; 27 | } -------------------------------------------------------------------------------- /content/about_page_scrollbars.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/content/about_page_scrollbars.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 | @-moz-document url-prefix("about:"){ 5 | window, 6 | page, 7 | html, 8 | .main-content, 9 | scrollbar{ 10 | scrollbar-color: rgb(210,210,210) rgb(42,42,46) !important; 11 | scrollbar-width: thin; 12 | } 13 | } -------------------------------------------------------------------------------- /content/addon_manage_buttons_without_popup.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/content/addon_manage_buttons_without_popup.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 | /* Show addon management buttons without opening popup */ 5 | 6 | 7 | @-moz-document url-prefix("chrome://mozapps/content/extensions/aboutaddons.html"), url("about:addons"){ 8 | 9 | .addon-card-message{ margin-bottom: 0px !important; margin-top: 0px !important; } 10 | .card.addon{ padding-bottom: 0px !important; } 11 | 12 | addon-card .addon-card-collapsed{ display: grid !important; grid-template-areas: "ic con" "op op"; grid-template-columns: 48px auto } 13 | addon-card .card-contents{ width: initial !important; white-space: initial !important; } 14 | 15 | .more-options-menu{ position: static !important; grid-area: op; margin: 0 !important; } 16 | .card-contents{ grid-area: con } 17 | .card-heading-icon{ grid-area: ic } 18 | 19 | plugin-options > panel-list, 20 | addon-options > panel-list{ 21 | position: static !important; 22 | display: flex !important; 23 | padding: 0 !important; 24 | margin: 0px calc(0px - var(--card-padding)) !important; 25 | border-width: 1px 0 0 0 !important; 26 | border-radius: 0 !important; 27 | box-shadow: none !important; 28 | background-color: rgba(127,127,127,0.1) !important; 29 | backdrop-filter: none !important; /* Having a backdrop-filter leads to some unexpected layering issues */ 30 | } 31 | 32 | button[role="menuitem"]{ padding-inline-start: 30px !important; background-position-x: 8px !important; } 33 | 34 | .arrow, 35 | .more-options-menu > .more-options-button, 36 | .addon-name-container > .more-options-button, 37 | panel-item[action="expand"]{ display: none !important } 38 | 39 | div.list{ display: inherit !important; flex-direction: row !important; } 40 | 41 | panel-item[action="toggle-disabled"]{ --icon: url("chrome://browser/skin/quit.svg") } 42 | panel-item[action="preferences"]{ --icon: url("chrome://global/skin/icons/settings.svg") } 43 | 44 | /* Uncomment these if you want to hide button label - such as with compact_addons_manager */ 45 | /* This is basically a requirement with compact_addons_manager.css because the button text causes the cards to overflow */ 46 | /* 47 | button[role="menuitem"] > slot{ display: none !important; } 48 | link+button[role="menuitem"]{ 49 | position: static !important; 50 | height: 30px !important; 51 | min-width: 30px; 52 | padding-inline-end: 4px !important; 53 | } 54 | button[role="menuitem"] > label:not([accesskey]), 55 | link+button::after{ display: none !important; } 56 | */ 57 | } 58 | 59 | -------------------------------------------------------------------------------- /content/compact_about_config.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/content/compact_about_config.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 | /* Makes about:config list more compact */ 5 | 6 | @-moz-document url("about:config"){ 7 | .button-delete, 8 | .button-edit, 9 | .button-reset, 10 | .button-save, 11 | .button-toggle{ 12 | margin-block: 1px !important; 13 | padding-block: 11px 0 !important; 14 | padding-inline: 0 !important; 15 | min-height: 22px !important; 16 | width: 22px !important; 17 | outline-offset: 0 !important; 18 | } 19 | .cell-edit{ width: 28px !important; } 20 | form > input, 21 | tr:not(.add) > th, 22 | tr:not(.add) > .cell-value{ padding-block: 0 !important; } 23 | tr:not(:hover) .semi-transparent:not(.primary,.button-add){ background-color: transparent !important; } 24 | } -------------------------------------------------------------------------------- /content/css_scrollbar_width_color.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/content/css_scrollbar_width_color.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 | /* Scrollbar colors and width - applied globally */ 5 | @namespace url("http://www.w3.org/1999/xhtml"); 6 | :root{ scrollbar-color: rgb(210,210,210) rgb(42,42,46) } 7 | *{ scrollbar-width: thin } -------------------------------------------------------------------------------- /content/dark_settings_pages.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/content/dark_settings_pages.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 | /* Recolors addons manager, preferences page and new about:config */ 5 | 6 | @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 7 | @namespace html url("http://www.w3.org/1999/xhtml"); 8 | 9 | @-moz-document url-prefix("about:addons"), 10 | url-prefix("about:preferences"), 11 | url-prefix("about:config"), 12 | url-prefix("chrome://browser/content/"), 13 | url-prefix("chrome://mozapps/content/"), 14 | url-prefix("chrome://pippki/content/"), 15 | url-prefix("chrome://mozapps/content/extensions/aboutaddons.html"){ 16 | :root, 17 | html|html{ 18 | --in-content-page-color: rgb(210,210,210) !important; 19 | --in-content-text-color: rgb(210,210,210) !important; 20 | --in-content-page-background: rgb(42,42,46) !important; 21 | --in-content-box-background: rgba(255,255,255,0.1) !important; 22 | --in-content-deemphasized-text: var(--in-content-text-color) !important; 23 | scrollbar-color: var(--in-content-text-color) var(--in-content-page-background) !important; 24 | color:var(--in-content-text-color) !important; 25 | } 26 | 27 | menulist > menupopup{ background-color: var(--in-content-page-background) !important; } 28 | 29 | .updateSettingCrossUserWarningContainer, 30 | .info-panel, 31 | .extension-controlled, 32 | .message-bar, 33 | html|message-bar, 34 | .alert, 35 | treecol{ 36 | background-color: var(--in-content-box-background) !important; 37 | color: var(--in-content-text-color) !important; 38 | } 39 | .menulist-dropmarker, 40 | .checkbox-icon{ 41 | -moz-context-properties: fill; 42 | fill : CurrentColor !important; 43 | } 44 | /* make panel background blurry if the background is translucent. Requires pref layout.css.backdrop-filter.enabled */ 45 | html|panel-list{ backdrop-filter: blur(28px) } 46 | } 47 | 48 | /* Get addons page */ 49 | /* New addons manager doesn't use this anymore */ 50 | @-moz-document url-prefix("https://discovery.addons.mozilla.org/"){ 51 | html|*{ color: inherit !important; } 52 | html|html,html|body{ 53 | background-color: rgb(46,54,69) !important; 54 | color: rgb(210,210,210) !important; 55 | } 56 | html|div.addon,html|div.Notice{ background-color: rgba(255,255,255,0.1) !important; } 57 | } -------------------------------------------------------------------------------- /content/high_contrast_extended_style.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/content/high_contrast_extended_style.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 | /* Intended to use with Firefox high contrast mode - forcing pages to use selected colors */ 5 | /* This applies few additional colors for selected page elements trying to "fix" common layout patterns without being specific to any page */ 6 | @-moz-document url-prefix("http"),url-prefix("about:"){ 7 | 8 | body > div, 9 | table, 10 | tr:first-child, 11 | br + div, 12 | hr + div, 13 | section, 14 | article, 15 | main, 16 | main > div, 17 | header > *:first-child, 18 | header + div > div, 19 | footer, 20 | nav, 21 | nav a:hover, 22 | ul > li:hover > a, 23 | li.active, 24 | li.selected, 25 | section > *, 26 | paper-dialog > *, 27 | #container, 28 | .container, 29 | .menu, 30 | .popup, 31 | .dropdown:hover, 32 | .dropdown > li:hover{ 33 | background-color: rgba(255,255,255,0.1); 34 | } 35 | 36 | section > * { background: transparent } 37 | 38 | article{ background-image: linear-gradient(rgba(255,255,255,0.1),rgba(255,255,255,0.1)); } 39 | 40 | nav a{ color: #bbb } 41 | 42 | table table{ background-color: transparent } 43 | 44 | input[type="submit"], 45 | button, 46 | .button, 47 | .btn{ 48 | background-image: linear-gradient(rgba(255,255,255,0.2),rgba(255,255,255,0.15)); 49 | color: rgb(40,50,40) 50 | } 51 | 52 | input[type="submit"]:hover, 53 | button:hover, 54 | .button:hover, 55 | .btn:hover{ 56 | background-image: linear-gradient(rgba(255,255,255,0.15),rgba(255,255,255,0.2)); 57 | text-shadow: 0 0 2px black; 58 | color: rgb(150,250,200) 59 | } 60 | 61 | input, 62 | nav ul > li:hover, 63 | div[role="menu"] > *:hover{ background-color: rgba(0,0,0,0.1); color: inherit } 64 | 65 | input[type="search"], 66 | input[type="text"], 67 | input[type="password"]{ background-image: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.1)); } 68 | 69 | textarea{ background-color: rgb(40,40,40); color: inherit } 70 | } -------------------------------------------------------------------------------- /content/limit_css_data_leak.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/content/limit_css_data_leak.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 | /* Limit CSS data leak, POTENTIALLY BREAKS SOME SITES */ 5 | @namespace html url("http://www.w3.org/1999/xhtml"); 6 | 7 | body input:not([value=""])[type], 8 | body input:not([value=""])[type]:focus ~ *, 9 | body input:not([value=""])[type] * { 10 | background-image: none !important; 11 | border-image: none !important; 12 | font-family: inherit !important; 13 | list-style-image: none !important; 14 | cursor: unset !important; 15 | content: none !important; 16 | } 17 | body input:not([value=""])[type]::before, 18 | body input:not([value=""])[type]:focus ~ *::before, 19 | body input:not([value=""])[type] *::before, 20 | body input:not([value=""])[type]::after, 21 | body input:not([value=""])[type]:focus ~ *::after, 22 | body input:not([value=""])[type] *::after { 23 | content:none !important; 24 | } 25 | 26 | /* Remove the comment to apply more strict version, causes even more trouble */ 27 | /* 28 | body input:not([value=""])[type] ~ *{ 29 | background-image: none !important; 30 | border-image: none !important; 31 | font-family: inherit !important; 32 | list-style-image: none !important; 33 | cursor: unset !important; 34 | content: none !important; 35 | } 36 | body input:not([value=""])[type] ~ *::before, 37 | body input:not([value=""])[type] ~ *::after{ 38 | content:none !important; 39 | } 40 | */ -------------------------------------------------------------------------------- /content/multi_column_addons.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/content/multi_column_addons.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 | /* Makes addon manager show addons in 2-4 columns based on available width */ 5 | /* You can use compact_addons_manager.css with this to make things even more, well, compact */ 6 | /* Compatible with addon_manage_buttons_without_popup.css */ 7 | 8 | @-moz-document url-prefix("chrome://mozapps/content/extensions/aboutaddons.html"), url("about:addons"){ 9 | 10 | :root{ overflow-x: hidden } /* Remove this if it causes horizontal scrolling problems */ 11 | 12 | @media (min-width:720px){ 13 | #main{ max-width: unset !important; padding-right: 28px; } 14 | addon-list > section, 15 | recommended-addon-list{ 16 | padding: 1em; 17 | display: grid; 18 | grid-template-areas: "hd hd" "cd cd"; 19 | grid-auto-columns: 1fr; 20 | column-gap: 1em; 21 | 22 | } 23 | 24 | addon-card .card-contents{ width: unset !important; white-space: initial !important; } 25 | 26 | .card-heading-image{ max-width: calc(100% + 32px) } 27 | section > h2{ grid-area: hd } 28 | addon-card{ 29 | padding-bottom: 0px !important; 30 | padding-top: 0px !important; 31 | grid-area: auto; 32 | } 33 | addon-card .addon-description{ max-height: 3em; scrollbar-width: thin; } 34 | } 35 | 36 | @media (min-width:1220px){ 37 | addon-list > section, 38 | recommended-addon-list{ 39 | grid-template-areas: "hd hd hd" "cd cd cd"; 40 | } 41 | } 42 | 43 | @media (min-width:1720px){ 44 | addon-list > section, 45 | recommended-addon-list{ 46 | grid-template-areas: "hd hd hd hd" "cd cd cd cd"; 47 | } 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /content/newtab_background_color.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/content/newtab_background_color.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 | @namespace url("http://www.w3.org/1999/xhtml"); 5 | 6 | @-moz-document url("about:home"),url("about:blank"),url("about:newtab"),url("about:privatebrowsing"){ 7 | body{background-color: rgb(46,54,69) !important;} 8 | } 9 | @-moz-document url("about:privatebrowsing"){ 10 | .search-handoff-button{ background-color: rgba(100,100,100,0.1) !important; } 11 | .fake-textbox{ color: rgb(200,200,200) !important } 12 | } -------------------------------------------------------------------------------- /content/newtab_background_image.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/content/newtab_background_image.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 | @-moz-document url("about:newtab"), url("about:home"){ 5 | body{ 6 | /* This will load image.jpg stored in the same folder as this file */ 7 | background-image: url("image.jpg") !important; 8 | background-size: cover; 9 | background-repeat: no-repeat; 10 | background-attachment: fixed; 11 | background-position-x: center; 12 | background-position-y: bottom; 13 | } 14 | } -------------------------------------------------------------------------------- /content/remove_textbox_focusring.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/content/remove_textbox_focusring.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 | :where(textarea,input[type="text"],input[type="search"],input[type="password"],input[type="url"]){ 5 | appearance: none; 6 | border-style: solid; 7 | outline: none; 8 | } -------------------------------------------------------------------------------- /content/standalone_image_page_mods.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/content/standalone_image_page_mods.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 | @-moz-document media-document(image){ 5 | @media not print { 6 | :root{ 7 | background-color: #232325 !important; /* set solid color background */ 8 | background-image: none !important; /* remove default background */ 9 | } 10 | 11 | /* Position of the image, auto = center (default), 0 = top-left */ 12 | img{ 13 | margin: auto !important; 14 | } 15 | 16 | /* Checkerboard pattern for transparent images, slight blue hue */ 17 | img.transparent{ 18 | background: conic-gradient(#eef 0.25turn, #bbc 0.25turn 0.5turn, #eef 0.5turn 0.75turn, #bbc 0.75turn) top left / 24px 24px repeat !important; 19 | } 20 | } 21 | } -------------------------------------------------------------------------------- /content/transparent_reader_toolbar.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/content/transparent_reader_toolbar.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 | /* Toolbar is invisible until hovered */ 5 | 6 | @-moz-document url-prefix("about:reader"){ 7 | .reader-toolbar, .reader-toolbar .button:not(:hover) { 8 | background-color: transparent !important; 9 | border: none !important; 10 | } 11 | .reader-toolbar:not(:hover)>*:not([open]){ visibility:hidden; } 12 | body{ text-align: justify; } 13 | } -------------------------------------------------------------------------------- /content/two_column_addons.css: -------------------------------------------------------------------------------- 1 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/content/two_column_addons.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 | /* Show addons in two columns */ 5 | 6 | /* DEPRECATED - use multi_column_addons.css instead */ 7 | 8 | @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 9 | @-moz-document url("about:addons"){ 10 | #list-view{ overflow: auto } 11 | /* Test for Firefox > 66 */ 12 | @supports (inset-block:auto){ 13 | #addon-list{ 14 | display: grid; 15 | grid-template-areas: "a a"; 16 | grid-template-columns: 1fr 1fr; 17 | grid-auto-rows: min-content; 18 | overflow: hidden !important; 19 | padding-bottom: 80px; /* increase this value if addons list content get cut */ 20 | } 21 | } 22 | /* Test for Firefox < 66 */ 23 | @supports not (inset-block:auto){ 24 | #addon-list > scrollbox > .scrollbox-innerbox{ 25 | display: grid; 26 | grid-template-areas: "a a"; 27 | grid-template-columns: 1fr 1fr; 28 | grid-auto-rows: min-content; 29 | } 30 | } 31 | .control-container{ display: flex; } 32 | .addon-control{ margin: 3px } 33 | .addon.card{ padding-bottom: 0px !important; padding-top: 0px !important } 34 | .addon.card > .content-container { display: flex; } 35 | .content-inner-container{ flex-grow: 1; } 36 | .content-inner-container > hbox{ display: block } 37 | .card-heading-image{ margin: 0 !important; } 38 | .icon{ min-width: 24px } 39 | } -------------------------------------------------------------------------------- /html_resources/ext.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /html_resources/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | firefox-csshacks tag browser 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
FAILURE, resources could not be loaded properly
15 |
16 | 33 | 34 | -------------------------------------------------------------------------------- /userChrome_example.css: -------------------------------------------------------------------------------- 1 | /* Example userChrome.css file */ 2 | 3 | /* Import your desired components first */ 4 | 5 | @import url(chrome/tab_close_button_always_on_hover.css); 6 | @import url(chrome/tab_loading_progress_throbber.css); 7 | @import url(chrome/button_effect_scale_onclick.css); 8 | @import url(chrome/blank_page_background.css); 9 | @import url(chrome/autohide_menubar.css); 10 | @import url(chrome/hide_toolbox_top_bottom_borders.css); 11 | @import url(chrome/vertical_context_navigation.css); 12 | @import url(chrome/minimal_popup_scrollbars.css); 13 | @import url(chrome/button_effect_icon_glow.css); 14 | @import url(chrome/dark_context_menus.css); 15 | @import url(chrome/dark_additional_windows.css); 16 | @import url(chrome/dark_checkboxes_and_radios.css); 17 | @import url(chrome/minimal_text_fields.css); 18 | @import url(chrome/minimal_toolbarbuttons.css); 19 | @import url(chrome/urlbar_centered_text.css); 20 | 21 | /* Apply your custom modifications after imports */ 22 | 23 | :root{ 24 | --toolbar-bgcolor: rgb(36,44,59) !important; 25 | --uc-menu-bkgnd: var(--toolbar-bgcolor); 26 | --arrowpanel-background: var(--toolbar-bgcolor) !important; 27 | --autocomplete-popup-background: var(--toolbar-bgcolor) !important; 28 | --uc-menu-disabled: rgb(90,90,90) !important; 29 | --lwt-toolbar-field-focus: rgb(36,44,59) !important; 30 | } 31 | 32 | #sidebar-box{ --sidebar-background-color: var(--toolbar-bgcolor) !important; } 33 | window.sidebar-panel{ --lwt-sidebar-background-color: rgb(36,44,59) !important; } -------------------------------------------------------------------------------- /userContent_example.css: -------------------------------------------------------------------------------- 1 | /* Example file */ 2 | 3 | @import url(content/css_scrollbar_width_color.css); 4 | /* @import url(content/limit_css_data_leak.css); */ /* Could induce site problems */ 5 | @import url(content/newtab_background_color.css); 6 | @import url(content/transparent_reader_toolbar.css); --------------------------------------------------------------------------------