From c13b85aa2b5a3eb2f4d92379fcf665e8ff41058b Mon Sep 17 00:00:00 2001 From: MrOtherGuy Date: Sat, 27 Feb 2021 11:21:50 +0200 Subject: [PATCH] create buttonlike_toolbarbuttons.css --- chrome/buttonlike_toolbarbuttons.css | 76 ++++++++++++++++++++++++++++ html_resources/tagmap.json | 21 ++++---- tags.csv | 1 + 3 files changed, 88 insertions(+), 10 deletions(-) create mode 100644 chrome/buttonlike_toolbarbuttons.css diff --git a/chrome/buttonlike_toolbarbuttons.css b/chrome/buttonlike_toolbarbuttons.css new file mode 100644 index 0000000..ee1d5bb --- /dev/null +++ b/chrome/buttonlike_toolbarbuttons.css @@ -0,0 +1,76 @@ +/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/buttonlike_toolbarbuttons.css made available under Mozilla Public License v. 2.0 +See the above repository for updates as well as full license text. */ + +/* This style makes buttons look like real buttons with border and background. Color of border and background use the same colors as unselected urlbar to make them fit together. Changes are not applied to buttons in tabs toolbar or menubar. */ + +:root{ + --uc-toolbarbutton-vertical-padding: calc(var(--toolbarbutton-inner-padding) + 1px); + --uc-toolbarbutton-horizontal-padding: calc(var(--toolbarbutton-inner-padding) + 10px); + --toolbarbutton-border-radius: 3px !important; +} +:root[uidensity]{ + --uc-toolbarbutton-vertical-padding: calc(var(--toolbarbutton-inner-padding) - 1px); + --uc-toolbarbutton-horizontal-padding: calc(var(--toolbarbutton-inner-padding) + 6px); +} + +#navigator-toolbox > toolbar{ --lwt-toolbarbutton-icon-fill: var(--lwt-toolbar-field-color, black) } +:root:not([uidensity="compact"]) #nav-bar { padding-inline-start: 5px } + +/* size of buttons */ +#PanelUI-button > toolbarbutton > stack, +.findbar-button, +#navigator-toolbox > toolbar .chromeclass-toolbar-additional > .toolbarbutton-1 > .toolbarbutton-icon, +#navigator-toolbox > toolbar .chromeclass-toolbar-additional > .toolbarbutton-icon, +#navigator-toolbox > toolbar .chromeclass-toolbar-additional > stack{ + background-color: var(--lwt-toolbar-field-background-color, hsla(0,0%,100%,.8)); + width: calc(2* var(--uc-toolbarbutton-horizontal-padding) + 16px) !important; + height: calc(2* var(--uc-toolbarbutton-vertical-padding) + 16px) !important; + fill-opacity: 0.8; + margin-inline: 2px; +} +.findbar-button{ width: auto !important; } + +/* borders */ +#PanelUI-button > toolbarbutton > stack, +.findbar-button, +#navigator-toolbox > toolbar .chromeclass-toolbar-additional > .toolbarbutton-1 > .toolbarbutton-icon, +#navigator-toolbox > toolbar .chromeclass-toolbar-additional > .toolbarbutton-icon{ + border: 1px solid var(--lwt-toolbar-field-border-color, hsla(240,5%,5%,.55)); +} + +/* stacks use box-shadow as a border to prevent size from changing */ +#navigator-toolbox > toolbar .chromeclass-toolbar-additional > stack{ box-shadow: inset 0 0 0 1px var(--lwt-toolbar-field-border-color, hsla(240,5%,5%,.55)) } + +/* modify paddings within buttons */ +#back-button > .toolbarbutton-icon, +#navigator-toolbox > toolbar .toolbarbutton-1 > stack, +#navigator-toolbox > toolbar .chromeclass-toolbar-additional > .toolbarbutton-icon, +#PersonalToolbar .chromeclass-toolbar-additional > .toolbarbutton-1 > .toolbarbutton-icon{ + padding: var(--uc-toolbarbutton-vertical-padding) var(--uc-toolbarbutton-horizontal-padding) !important; +} + +/* Custom rules for back-button because it has different styling with non-compact density */ + +#back-button{ border-radius: 0 !important } + +#back-button{ padding: initial !important; border: none !important; } + +#back-button > .toolbarbutton-icon{ + border-radius: var(--toolbarbutton-border-radius) !important; + border: 1px solid var(--lwt-toolbar-field-border-color, hsla(240,5%,5%,.25)) !important; +} + +/* Buttons in bookmarks toolbar also require some extra styling rules */ +#PersonalToolbar .chromeclass-toolbar-additional > .toolbarbutton-1 > .toolbarbutton-icon, +#PersonalToolbar .chromeclass-toolbar-additional > .toolbarbutton-icon, +#PersonalToolbar .chromeclass-toolbar-additional > stack, +#back-button > .toolbarbutton-icon{ + background-color: var(--lwt-toolbar-field-background-color, hsla(0,0%,100%,.8)) !important; +} +#PersonalToolbar .chromeclass-toolbar-additional > .toolbarbutton-1:not([disabled]):hover > .toolbarbutton-icon, +#PersonalToolbar .chromeclass-toolbar-additional:not([disabled]):hover > .toolbarbutton-icon, +#PersonalToolbar .chromeclass-toolbar-additional:not([disabled]):hover > stack, +#back-button:not([disabled]):hover > .toolbarbutton-icon{ background-color: var(--toolbarbutton-hover-background) !important; } + +#PersonalToolbar .chromeclass-toolbar-additional > .toolbarbutton-1, +#PersonalToolbar .chromeclass-toolbar-additional{ padding: initial !important; background: transparent !important; } diff --git a/html_resources/tagmap.json b/html_resources/tagmap.json index 9990876..9c5bb77 100644 --- a/html_resources/tagmap.json +++ b/html_resources/tagmap.json @@ -12,13 +12,18 @@ "button_effect_icon_glow.css":["buttons","effect"], "button_effect_scale_onclick.css":["buttons","effect"], "button_effect_scale_onhover.css":["buttons","effect"], +"centered_tab_content.css":["tab","icon"], +"centered_top_statuspanel.css":["status"], "classic_firefox_menu_button.css":["classic","menu"], "classic_grid_main_menu_popup.css":["classic","menu","popup"], "click_selected_tab_to_focus_urlbar.css":["hack","tabs","urlbar"], "color_variable_template.css":["colors"], "combined_favicon_and_tab_close_button.css":["tab","icon","close"], "combined_tabs_and_main_toolbars.css":["minimal","tabs","toolbars"], +"compact_proton.css":["menu","popups","tabs"], "compact_urlbar_megabar.css":["urlbar","minimal"], +"curved_tabs.css":["tabs","tab"], +"custom_menupopup_check_icons.css":["icon","menu","minimal","popup"], "dark_additional_windows.css":["windows","dark-mode"], "dark_checkboxes_and_radios.css":["dark-mode"], "dark_context_menus.css":["dark-mode","menu","popup"], @@ -69,10 +74,13 @@ "overlay_scrollbars.as.css":["scrollbar"], "page_action_buttons_on_hover.css":["urlbar","minimal","effect"], "pinned_tabs_on_right.css":["tabs"], +"privatemode_indicator_as_menu_button.css":["icon","buttons"], +"round_ui_items.css":["buttons","icon","menu","tabs","toolbars","bookmarks"], "rounded_menupopups.css":["menu","popup","urlbar"], "scrollable_menupopups.css":["scrollbar","popup","menu"], "scrollable_urlbar_popup.css":["scrollbar","popup","urlbar"], "show_navbar_on_focus_only.css":["urlbar","nav-bar","toolbars","hiding"], +"show_toolbars_in_popup_windows.css":["toolbars","popup"], "show_window_title_in_menubar.css":["windows","menubar"], "status_inside_urlbar.css":["status","urlbar","hack"], "status_inside_urlbar_v2.css":["status","urlbar","status","effect","hack"], @@ -86,6 +94,7 @@ "tabs_on_bottom_menubar_on_top_patch.css":["tabs","menubar","toolbars","classic","patch"], "textual_context_navigation.css":["navigation","popup","menu"], "theme_additional_windows.css":["legacy"], +"theme_aware_modal_prompts.css":["effect","dark-mode","colors","popup"], "theme_color_variables.css":["legacy"], "theme_popups_and_menus.css":["legacy"], "theme_sidebar.css":["legacy"], @@ -105,15 +114,7 @@ "vertical_context_navigation_v2.css":["navigation","menu","popup"], "vertical_menubar.css":["menubar","hack"], "vertical_popup_menubar.css":["menubar","menu","toolbars","popup"], -"window_control_placeholder_support.css":["window-control","patch"], -"round_ui_items.css":["buttons","icon","menu","tabs","toolbars","bookmarks"], -"curved_tabs.css":["tabs","tab"], -"theme_aware_modal_prompts.css":["effect","dark-mode","colors","popup"], -"centered_top_statuspanel.css":["status"], -"custom_menupopup_check_icons.css":["icon","menu","minimal","popup"], -"show_toolbars_in_popup_windows.css":["toolbars","popup"], -"centered_tab_content.css":["tab","icon"], "window_control_fallback_for_custom_windows_theme.css":["window-controls","buttons","colors","patch"], -"privatemode_indicator_as_menu_button.css":["icon","buttons"], -"compact_proton.css":["menu","popups","tabs"] +"window_control_placeholder_support.css":["window-control","patch"], +"buttonlike_toolbarbuttons.css":["buttons"] } diff --git a/tags.csv b/tags.csv index 636c8af..0a4f284 100644 --- a/tags.csv +++ b/tags.csv @@ -115,3 +115,4 @@ vertical_menubar.css,menubar,hack vertical_popup_menubar.css,menubar,menu,toolbars,popup window_control_fallback_for_custom_windows_theme.css,window-controls,buttons,colors,patch window_control_placeholder_support.css,window-control,patch +buttonlike_toolbarbuttons.css,buttons