mobile-config-firefox/chrome/buttonlike_toolbarbuttons.css

119 lines
4.5 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;
}
/* Remove styles from buttons inside extensions and overflow menu */
:is(#unified-extensions-panel,.widget-overflow-list) .toolbarbutton-1 > .toolbarbutton-icon,
:is(#unified-extensions-panel,.widget-overflow-list) .toolbarbutton-1 > .toolbarbutton-badge-stack,
.widget-overflow-list .toolbarbutton-text{
background-color: transparent !important;
width: revert !important;
height: revert !important;
padding: 0 !important;
border: none !important;
}
/* Special cases */
#tabs-newtab-button > .toolbarbutton-icon{
background-color: transparent;
}
.webextension-browser-action{
background: transparent !important;
}
#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;
}