create buttonlike_toolbarbuttons.css
This commit is contained in:
parent
9f30038c9f
commit
c13b85aa2b
3 changed files with 88 additions and 10 deletions
76
chrome/buttonlike_toolbarbuttons.css
Normal file
76
chrome/buttonlike_toolbarbuttons.css
Normal 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; }
|
|
@ -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"]
|
||||
}
|
||||
|
|
1
tags.csv
1
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
|
||||
|
|
|
Loading…
Reference in a new issue