Skip to content

Instantly share code, notes, and snippets.

@chrosta
Last active Sep 23, 2021
Embed
What would you like to do?
/*** Megabar Styler General - version 2021-09-09 ***/
/*** General Preferences ***/
:root {
/* Number of pixels of enlargement when URL bar is focused */
--mbarstyler-popout-pixels: 1px; /* [0px - 7px] */
/* Top Bar Display or Not */
--mbarstyler-top-bar-display: block; /* [block,none] */
/* Font sizes (default: 13.8px for title, 10.2px for URL) */
--mbarstyler-title-font-size: 15px; /* [13px - 18px] */
--mbarstyler-url-font-size: 13px; /* [12px - 16px] */
/* Rows to show without scrolling */
--mbarstyler-max-rows-without-scrolling: 20;
/* Bottom border for each result row */
--mbarstyler-bottom-border-width: 1px; /* [0px or 1px] */
/* Height adjustment for labels (Proton) */
--mbarstyler-label-height-adjustment: 35px; /* [0px or 35px] */
/* Match display style */
--mbarstyler-match-weight: 700; /* [400,700] */
--mbarstyler-match-background-opacity: 0.0; /* [0.0,0.05,0.1] */
}
/*** URL bar enlargement or lack thereof ***/
/* Compute new position, width, and padding */
#urlbar[breakout][breakout-extend] {
top: calc(5px - var(--mbarstyler-popout-pixels)) !important;
left: calc(0px - var(--mbarstyler-popout-pixels)) !important;
width: calc(100% + (2 * var(--mbarstyler-popout-pixels))) !important;
padding: var(--mbarstyler-popout-pixels) !important;
}
[uidensity="compact"] #urlbar[breakout][breakout-extend] {
top: calc(3px - var(--mbarstyler-popout-pixels)) !important;
}
[uidensity="touch"] #urlbar[breakout][breakout-extend] {
top: calc(4px - var(--mbarstyler-popout-pixels)) !important;
}
/* Prevent shift of URL bar contents */
#urlbar[breakout][breakout-extend] > #urlbar-input-container {
height: var(--urlbar-height) !important;
padding: 0 !important;
}
/* Do not animate */
#urlbar[breakout][breakout-extend] > #urlbar-background {
animation: none !important;;
}
/* Remove shadows */
#urlbar[breakout][breakout-extend] > #urlbar-background {
box-shadow: none !important;
}
/*** Top "Blue Bar" Display ***/
.urlbarView-row:first-of-type {
display: var(--mbarstyler-top-bar-display) !important;
}
/*** Font Sizes and Scrolling ***/
/* Title font-size */
.urlbarView-row .urlbarView-title {
font-size: var(--mbarstyler-title-font-size) !important;
}
/* URL / action font-size */
.urlbarView-row .urlbarView-secondary,
.urlbarView-row .urlbarView-url,
.urlbarView-row .urlbarView-action {
font-size: var(--mbarstyler-url-font-size) !important;
}
/* Set max-height for items visible without scrolling */
#urlbarView-results, #urlbar-results {
height: unset !important;
max-height: calc(2.5 * (var(--mbarstyler-title-font-size) + var(--mbarstyler-bottom-border-width)) * var(--mbarstyler-max-rows-without-scrolling) + var(--mbarstyler-label-height-adjustment)) !important;
}
#urlbar-results {
overflow-y: auto !important;
}
/* Clean up extra spacing at the top and bottom */
#urlbar-results {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Subtle border between results */
.urlbarView-row:not(:last-of-type) {
border-bottom: var(--mbarstyler-bottom-border-width) solid rgba(0, 0, 0, 0.1) !important;
}
/* Match Styling Like Fx43-47 */
[lwt-popup-darktext] .urlbarView-row:not([selected]) .urlbarView-title strong,
[lwt-popup-darktext] .urlbarView-row:not([selected]) .urlbarView-url strong {
font-weight: var(--mbarstyler-match-weight) !important;
box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, calc(var(--mbarstyler-match-background-opacity) * 2));
background-color: rgba(0, 0, 0, var(--mbarstyler-match-background-opacity));
border-radius: 2px;
}
[lwt-popup-brighttext] .urlbarView-row:not([selected]) .urlbarView-title strong,
[lwt-popup-brighttext] .urlbarView-row:not([selected]) .urlbarView-url strong {
font-weight: var(--mbarstyler-match-weight) !important;
box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, calc(var(--mbarstyler-match-background-opacity) * 2));
background-color: rgba(255, 255, 255, var(--mbarstyler-match-background-opacity));
border-radius: 2px;
}
/*** End of: Megabar Styler General ***/
/*** Megabar Styler One-Offs - version 2020-05-31 ***/
/*** One-Off Search Button Preferences ***/
:root {
/* One-Offs Display or Not */
--mbarstyler-oneoffs-display: none; /* [flex,none] */
}
/* Show or Hide the One-Offs Search Icon Bar */
#urlbar .search-one-offs:not([hidden]) {
display: var(--mbarstyler-oneoffs-display) !important;
}
/* Shorten the One-Offs Search Icon Bar Vertically */
#urlbar .search-one-offs:not([hidden]) {
padding-block: unset !important;
}
/* We don't need the text */
#urlbar .search-one-offs .search-panel-header {
display: none !important;
}
/*** End of: Megabar Styler One-Offs ***/
/*** Proton Tabs Tweaks ***/
/* Adjust tab corner shape, optionally remove space below tabs */
#tabbrowser-tabs {
--user-tab-rounding: 0px;
}
.tab-background {
border-radius: var(--user-tab-rounding) var(--user-tab-rounding) 0px 0px !important;
margin-block: 1px 0 !important;
}
#scrollbutton-up, #scrollbutton-down { /* 6/10/2021 */
border-top-width: 1px !important;
border-bottom-width: 0 !important;
}
/* Container color bar visibility */
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
margin: 0px max(calc(var(--user-tab-rounding) - 3px), 0px) !important;
}
/* Override Normal Density height to Compact Density height only for tabs */
#TabsToolbar, #tabbrowser-tabs {
--tab-min-height: 29px !important;
}
/* Tweak for covering a line at the bottom of the active tab on some themes 8/11/2021 */
#main-window[sizemode="normal"] #toolbar-menubar[autohide="true"] + #TabsToolbar,
#main-window[sizemode="normal"] #toolbar-menubar[autohide="true"] + #TabsToolbar #tabbrowser-tabs {
--tab-min-height: 30px !important;
}
#scrollbutton-up,
#scrollbutton-down {
border-top-width: 0 !important;
border-bottom-width: 0 !important;
}
/* [Connected Tabs] Set a max height based on min-height plus margin-block: 1px 0 */
#TabsToolbar, #TabsToolbar > hbox, #TabsToolbar-customization-target, #tabbrowser-arrowscrollbox {
max-height: calc(var(--tab-min-height) + 1px) !important;
}
/* [Connected Tabs] Adjust padding around icons on buttons to avoid crushed images */
#TabsToolbar-customization-target toolbarbutton > .toolbarbutton-icon,
#TabsToolbar-customization-target .toolbarbutton-text,
#TabsToolbar-customization-target .toolbarbutton-badge-stack,
#scrollbutton-up,#scrollbutton-down {
padding-top: 7px !important;
padding-bottom: 6px !important;
}
/*** Tighten up drop-down/context/popup menu spacing (8 Sep 2021) ***/
menupopup:not(.in-menulist) > menuitem,
menupopup:not(.in-menulist) > menu {
padding-block: 4px !important; /* reduce to 3px, 2px, 1px or 0px as needed */
min-height: unset !important; /* v92.0 - for padding below 4px */
}
:root {
--arrowpanel-menuitem-padding: 4px 8px !important;
}
/*** Tab fixes. ***/
.tab-stack {
padding-bottom: 0px !important;
}
.tabbrowser-tab {
margin: 0px !important;
padding: 0px !important;
}
.tabbrowser-tab[selected="true"] .tab-background {
border-top: 2px solid #3584E4 !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment