0722603222
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.
105 lines
4 KiB
CSS
105 lines
4 KiB
CSS
/* 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. */
|
|
|
|
:root{
|
|
--uc-toolbarbutton-vertical-padding: var(--toolbarbutton-inner-padding);
|
|
--uc-toolbarbutton-horizontal-padding: calc(var(--toolbarbutton-inner-padding) + 10px);
|
|
--toolbarbutton-border-radius: 3px !important;
|
|
}
|
|
:root[uidensity="compact"]{
|
|
--uc-toolbarbutton-vertical-padding: calc(var(--toolbarbutton-inner-padding) - 1px);
|
|
--uc-toolbarbutton-horizontal-padding: calc(var(--toolbarbutton-inner-padding) + 6px);
|
|
}
|
|
|
|
.browser-toolbar{
|
|
--toolbarbutton-icon-fill: var(--toolbar-field-color);
|
|
}
|
|
|
|
/* size of buttons */
|
|
|
|
findbar toolbarbutton,
|
|
.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;
|
|
margin-inline: 1px 0px !important;
|
|
border-width: 1px !important;
|
|
}
|
|
.findbar-closebutton{
|
|
margin-inline-end: 8px !important;
|
|
}
|