create buttonlike_toolbarbuttons.css

This commit is contained in:
MrOtherGuy 2021-02-27 11:21:50 +02:00
parent 9f30038c9f
commit c13b85aa2b
3 changed files with 88 additions and 10 deletions

View file

@ -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; }

View file

@ -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"]
}

View file

@ -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

1 autohide_bookmarks_and_main_toolbars.css,autohide,bookmarks,toolbars,nav-bar
115 vertical_popup_menubar.css,menubar,menu,toolbars,popup
116 window_control_fallback_for_custom_windows_theme.css,window-controls,buttons,colors,patch
117 window_control_placeholder_support.css,window-control,patch
118 buttonlike_toolbarbuttons.css,buttons