fliegerjohn/mobile-config-firefox
1
0
Fork 1
mirror of https://codeberg.org/claui/mobile-config-firefox.git synced 2024-09-19 18:47:19 +02:00
Code Issues Projects Releases Packages Wiki Activity

buttonlike_toolbarbuttons: apply to menubar and tabs toolbar

Browse source 
This patch simplies a lot of selectors and makes the changes apply to
buttons in menubar and tabs toolbar. With the exception of
tabs-newtab-button. Additionally, this makes the style
much better support dropdown buttons, combined buttons and findbar
buttons.
This commit is contained in:
MrOtherGuy 2023-04-07 08:32:23 +03:00
parent 5ab29bc53e
commit 0722603222
1 changed files with 71 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

120
chrome/buttonlike_toolbarbuttons.css
View file

@ -1,7 +1,7 @@
/* 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. */
/* 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. */
:root{
--uc-toolbarbutton-vertical-padding: var(--toolbarbutton-inner-padding);
@ -13,27 +13,87 @@ See the above repository for updates as well as full license text. */
--uc-toolbarbutton-horizontal-padding: calc(var(--toolbarbutton-inner-padding) + 6px);
}
#navigator-toolbox > .browser-toolbar{
.browser-toolbar{
--toolbarbutton-icon-fill: var(--toolbar-field-color);
}
#navigator-toolbox > toolbar .chromeclass-toolbar-additional > .toolbarbutton-1{
background-color: transparent !important;
}
/* size of buttons */
#PanelUI-button > toolbarbutton > stack,
findbar toolbarbutton,
#navigator-toolbox > toolbar .chromeclass-toolbar-additional > .toolbarbutton-1 > .toolbarbutton-icon,
#navigator-toolbox > toolbar .chromeclass-toolbar-additional > .toolbarbutton-1 > stack,
#navigator-toolbox > toolbar .chromeclass-toolbar-additional > .toolbarbutton-icon,
#navigator-toolbox > toolbar .chromeclass-toolbar-additional > stack{
.toolbarbutton-1 > .toolbarbutton-icon,
.toolbarbutton-1 > .toolbarbutton-badge-stack{
background-color: var(--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;
}
.toolbarbutton-1.toolbarbutton-combined > :is(.toolbarbutton-icon,.toolbarbutton-badge-stack){
margin-inline: 0 !important;
border-radius: 0 !important;
border-inline-end-width: 0 !important;
}
.toolbarbutton-1.toolbarbutton-combined:first-child > :is(.toolbarbutton-icon,.toolbarbutton-badge-stack){
border-top-left-radius: var(--toolbarbutton-border-radius) !important;
border-bottom-left-radius: var(--toolbarbutton-border-radius) !important;
}
.toolbarbutton-1.toolbarbutton-combined:last-child > :is(.toolbarbutton-icon,.toolbarbutton-badge-stack){
border-top-right-radius: var(--toolbarbutton-border-radius) !important;
border-bottom-right-radius: var(--toolbarbutton-border-radius) !important;
border-inline-end-width: 1px !important;
}
.toolbarbutton-1.toolbarbutton-combined-buttons-dropmarker > .toolbarbutton-icon{
padding-inline: 3px !important;
margin-inline: 0 !important;
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
width: revert !important;
}
/* borders */
findbar toolbarbutton,
.toolbarbutton-1 > .toolbarbutton-icon{
border: 1px solid var(--toolbar-field-border-color, hsla(240,5%,5%,.55));
}
/* stacks use box-shadow as a border to prevent size from changing */
.toolbarbutton-1 > .toolbarbutton-badge-stack{
box-shadow: inset 0 0 0 1px var(--toolbar-field-border-color, hsla(240,5%,5%,.55));
}
/* modify paddings within buttons */
.toolbarbutton-1 > .toolbarbutton-icon,
.toolbarbutton-1 > .toolbarbutton-badge-stack{
padding: var(--uc-toolbarbutton-vertical-padding) var(--uc-toolbarbutton-horizontal-padding) !important;
}
/* Special cases */
#tabs-newtab-button > .toolbarbutton-icon{
background-color: transparent;
}
#zoom-reset-button > .toolbarbutton-text{
background-color: var(--toolbar-field-background-color, hsla(0,0%,100%,.8));
border: 1px solid var(--toolbar-field-border-color, hsla(240,5%,5%,.55));
border-right-width: 0;
border-radius: 0 !important;
}
findbar toolbarbutton{
background-color: var(--input-bgcolor,var(--toolbarbutton-bgcolor));
}
#profiler-button-button:not(.profiler-active) > image{
border-radius: 0 var(--toolbarbutton-border-radius) var(--toolbarbutton-border-radius) 0 !important;
border-inline-width: 0 1px !important;
}
#tabs-newtab-button > .toolbarbutton-icon{
width: revert !important;
height: revert !important;
border: revert !important;
padding: var(--toolbarbutton-inner-padding) !important;
}
findbar toolbarbutton{
padding-inline: var(--uc-toolbarbutton-horizontal-padding) !important;
height: revert !important;
@ -43,41 +103,3 @@ findbar toolbarbutton{
.findbar-closebutton{
margin-inline-end: 8px !important;
}
/* borders */
#PanelUI-button > toolbarbutton > stack,
findbar toolbarbutton,
#navigator-toolbox > toolbar .chromeclass-toolbar-additional > .toolbarbutton-1 > .toolbarbutton-icon,
#navigator-toolbox > toolbar .chromeclass-toolbar-additional > .toolbarbutton-icon{
border: 1px solid var(--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 > .toolbarbutton-1 > stack,
#navigator-toolbox > toolbar .chromeclass-toolbar-additional > stack{
box-shadow: inset 0 0 0 1px var(--toolbar-field-border-color, hsla(240,5%,5%,.55));
}
/* modify paddings within buttons */
#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;
}
/* 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{
background-color: var(--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{
background-color: var(--toolbarbutton-hover-background) !important;
}
#PersonalToolbar .chromeclass-toolbar-additional > .toolbarbutton-1,
#PersonalToolbar .chromeclass-toolbar-additional{
padding: initial !important;
background: transparent !important;
}