pmOS-tweaks/fenix-fox
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

buttonlike_toolbarbuttons.css: Update the style for Firefox 108

Browse source
This commit is contained in:
MrOtherGuy 2022-12-26 12:29:31 +02:00
parent 19b2e4fa1f
commit 134491e41a
1 changed files with 33 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
chrome/buttonlike_toolbarbuttons.css
View file

@ -3,30 +3,29 @@ 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. Changes are not applied to buttons in tabs toolbar or menubar. */
/* Temporary dummy variables, can probably be removed when Fx92 releases */
:root{ :root{
--toolbar-field-background-color: var(--toolbar-field-non-lwt-bgcolor); --uc-toolbarbutton-vertical-padding: var(--toolbarbutton-inner-padding);
}
:root:-moz-lwtheme{
--toolbar-field-background-color: var(--lwt-toolbar-field-background-color);
}
:root{
--uc-toolbarbutton-vertical-padding: calc(var(--toolbarbutton-inner-padding) + 1px);
--uc-toolbarbutton-horizontal-padding: calc(var(--toolbarbutton-inner-padding) + 10px); --uc-toolbarbutton-horizontal-padding: calc(var(--toolbarbutton-inner-padding) + 10px);
--toolbarbutton-border-radius: 3px !important; --toolbarbutton-border-radius: 3px !important;
} }
:root[uidensity]{ :root[uidensity="compact"]{
--uc-toolbarbutton-vertical-padding: calc(var(--toolbarbutton-inner-padding) - 1px); --uc-toolbarbutton-vertical-padding: calc(var(--toolbarbutton-inner-padding) - 1px);
--uc-toolbarbutton-horizontal-padding: calc(var(--toolbarbutton-inner-padding) + 6px); --uc-toolbarbutton-horizontal-padding: calc(var(--toolbarbutton-inner-padding) + 6px);
} }
:root:not([uidensity="compact"]) #nav-bar { padding-inline-start: 5px } #navigator-toolbox > .browser-toolbar{
--toolbarbutton-icon-fill: var(--toolbar-field-color);
}
#navigator-toolbox > toolbar .chromeclass-toolbar-additional > .toolbarbutton-1{
background-color: transparent !important;
}
/* size of buttons */ /* size of buttons */
#PanelUI-button > toolbarbutton > stack, #PanelUI-button > toolbarbutton > stack,
.findbar-button, findbar toolbarbutton,
#navigator-toolbox > toolbar .chromeclass-toolbar-additional > .toolbarbutton-1 > .toolbarbutton-icon, #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 > .toolbarbutton-icon,
#navigator-toolbox > toolbar .chromeclass-toolbar-additional > stack{ #navigator-toolbox > toolbar .chromeclass-toolbar-additional > stack{
background-color: var(--toolbar-field-background-color, hsla(0,0%,100%,.8)); background-color: var(--toolbar-field-background-color, hsla(0,0%,100%,.8));
@ -35,49 +34,50 @@ See the above repository for updates as well as full license text. */
fill-opacity: 0.8; fill-opacity: 0.8;
margin-inline: 2px; margin-inline: 2px;
} }
.findbar-button{ width: auto !important; } findbar toolbarbutton{
padding-inline: var(--uc-toolbarbutton-horizontal-padding) !important;
height: revert !important;
margin-inline: 1px 0px !important;
border-width: 1px !important;
}
.findbar-closebutton{
margin-inline-end: 8px !important;
}
/* borders */ /* borders */
#PanelUI-button > toolbarbutton > stack, #PanelUI-button > toolbarbutton > stack,
.findbar-button, findbar toolbarbutton,
#navigator-toolbox > toolbar .chromeclass-toolbar-additional > .toolbarbutton-1 > .toolbarbutton-icon, #navigator-toolbox > toolbar .chromeclass-toolbar-additional > .toolbarbutton-1 > .toolbarbutton-icon,
#navigator-toolbox > toolbar .chromeclass-toolbar-additional > .toolbarbutton-icon{ #navigator-toolbox > toolbar .chromeclass-toolbar-additional > .toolbarbutton-icon{
border: 1px solid var(--toolbar-field-border-color, hsla(240,5%,5%,.55)); 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 */ /* 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(--toolbar-field-border-color, hsla(240,5%,5%,.55)) } #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 */ /* modify paddings within buttons */
#back-button > .toolbarbutton-icon,
#navigator-toolbox > toolbar .toolbarbutton-1 > stack, #navigator-toolbox > toolbar .toolbarbutton-1 > stack,
#navigator-toolbox > toolbar .chromeclass-toolbar-additional > .toolbarbutton-icon, #navigator-toolbox > toolbar .chromeclass-toolbar-additional > .toolbarbutton-icon,
#PersonalToolbar .chromeclass-toolbar-additional > .toolbarbutton-1 > .toolbarbutton-icon{ #PersonalToolbar .chromeclass-toolbar-additional > .toolbarbutton-1 > .toolbarbutton-icon{
padding: var(--uc-toolbarbutton-vertical-padding) var(--uc-toolbarbutton-horizontal-padding) !important; 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(--toolbar-field-border-color, hsla(240,5%,5%,.25)) !important;
}
/* Buttons in bookmarks toolbar also require some extra styling rules */ /* Buttons in bookmarks toolbar also require some extra styling rules */
#PersonalToolbar .chromeclass-toolbar-additional > .toolbarbutton-1 > .toolbarbutton-icon, #PersonalToolbar .chromeclass-toolbar-additional > .toolbarbutton-1 > .toolbarbutton-icon,
#PersonalToolbar .chromeclass-toolbar-additional > .toolbarbutton-icon, #PersonalToolbar .chromeclass-toolbar-additional > .toolbarbutton-icon,
#PersonalToolbar .chromeclass-toolbar-additional > stack, #PersonalToolbar .chromeclass-toolbar-additional > stack{
#back-button > .toolbarbutton-icon{
background-color: var(--toolbar-field-background-color, hsla(0,0%,100%,.8)) !important; 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 > .toolbarbutton-1:not([disabled]):hover > .toolbarbutton-icon,
#PersonalToolbar .chromeclass-toolbar-additional:not([disabled]):hover > .toolbarbutton-icon, #PersonalToolbar .chromeclass-toolbar-additional:not([disabled]):hover > .toolbarbutton-icon,
#PersonalToolbar .chromeclass-toolbar-additional:not([disabled]):hover > stack, #PersonalToolbar .chromeclass-toolbar-additional:not([disabled]):hover > stack{
#back-button:not([disabled]):hover > .toolbarbutton-icon{ background-color: var(--toolbarbutton-hover-background) !important; } background-color: var(--toolbarbutton-hover-background) !important;
}
#PersonalToolbar .chromeclass-toolbar-additional > .toolbarbutton-1, #PersonalToolbar .chromeclass-toolbar-additional > .toolbarbutton-1,
#PersonalToolbar .chromeclass-toolbar-additional{ padding: initial !important; background: transparent !important; } #PersonalToolbar .chromeclass-toolbar-additional{
padding: initial !important;
background: transparent !important;
}